/* ==========================================================================
   Schnösenberg Service & Montage – Design-System
   --------------------------------------------------------------------------
   Gestaltungsprinzip (angelehnt an Apple / Google):
     · Fast keine Farbe – Schwarz, Weiß, ein einziges Blau für Aktionen
     · Große, ruhige Typografie mit enger Laufweite
     · Viel Weißraum statt Rahmen, Schatten und Verläufe
     · Flächen werden durch Hellgrau abgesetzt, nicht durch Linien
     · Keine Deko: jedes Element hat eine Funktion

   Aufbau:
     1  Design-Tokens          8  Abschluss-Band (CTA)
     2  Basis & Typografie     9  Leerzustand
     3  Layout-Bausteine      10  Kontakt & Formular
     4  Buttons & Links       11  Footer & mobile Aktionsleiste
     5  Kopfbereich           12  Hilfsklassen, Media Queries, Druck
     6  Hero                  13  Einzelbausteine
     7  Karten, Listen, Prozess, FAQ
   ========================================================================== */

/* ==========================================================================
   1 · DESIGN-TOKENS
   ========================================================================== */
:root {
  color-scheme: light;

  /* Neutrale Skala – das eigentliche Farbsystem */
  --ink:       #1d1d1f;   /* Überschriften, Primärtext */
  --ink-2:     #424245;   /* Fließtext */
  --muted:     #6e6e73;   /* Sekundärtext */
  --muted-2:   #86868b;   /* Hinweise, Meta */
  --hairline:  #d2d2d7;   /* Trennlinien */
  --hairline-2:#e8e8ed;   /* sehr leise Trennlinien */
  --surface:   #ffffff;
  --surface-2: #f5f5f7;   /* abgesetzte Flächen */
  --surface-3: #ebebf0;

  /* Genau ein Akzent: Blau für Aktionen und Links */
  --accent:      #0071e3;
  --accent-hover:#0077ed;
  --accent-ink:  #06c;    /* Text-Links, etwas dunkler für Kontrast */

  /* Signal – nur für Fehler/Erfolg im Formular */
  --danger:    #b3261e;
  --danger-bg: #fdf2f1;
  --warn:      #8a5300;   /* Hinweis, der kein Fehler ist */
  --warn-bg:   #fff8ec;
  --warn-line: #f0dcbb;

  /* Typografie */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --fs-display: clamp(2.6rem, 1.4rem + 4.4vw, 4.4rem);
  --fs-h1:      clamp(2.1rem, 1.4rem + 2.8vw, 3.4rem);
  --fs-h2:      clamp(1.75rem, 1.25rem + 2.1vw, 2.75rem);
  --fs-h3:      clamp(1.15rem, 1.05rem + .4vw, 1.35rem);
  --fs-lead:    clamp(1.15rem, 1rem + .7vw, 1.5rem);
  --fs-body:    1.0625rem;   /* 17px */

  /* Abstände */
  --sp-2: .5rem;   --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;   --sp-7: 3rem;    --sp-8: 4.5rem;
  --section-y: clamp(4.5rem, 3rem + 6vw, 8rem);

  /* Radien – groß und weich, aber ohne Verspieltheit */
  --r-sm:  10px;
  --r-lg:  18px;
  --r-xl:  22px;
  --r-pill: 980px;

  --container: 1040px;
  --measure:   44rem;      /* angenehme Lesebreite */
  --header-h:  52px;
}

/* ==========================================================================
   2 · BASIS & TYPOGRAFIE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

/* Das hidden-Attribut muss jede display-Regel schlagen. Ohne diese Zeile
   bliebe z. B. ein .alert (display: flex) trotz element.hidden = true
   sichtbar – Klassen im Stylesheet gewinnen sonst gegen [hidden]. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
  -webkit-text-size-adjust: 100%;

  /* Letzte Absicherung gegen seitliches Scrollen auf dem Handy.
     `clip` statt `hidden`, weil `hidden` position:sticky aushebeln wuerde. */
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.5;
  letter-spacing: -.01em;
  color: var(--ink-2);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}
body.no-scroll { overflow: hidden; }

img, svg, video { max-width: 100%; }
img { height: auto; display: block; }

h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.022em;
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -.015em; }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.15em; }
li { margin-bottom: .4em; }

strong { color: var(--ink); font-weight: 600; }
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .85em; background: var(--surface-2); color: var(--ink);
  padding: .15em .45em; border-radius: 6px;
  overflow-wrap: anywhere;        /* lange Dateipfade sprengen kein Layout */
}
hr { border: 0; border-top: 1px solid var(--hairline); margin: var(--sp-7) 0; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Icons: dünn, monochrom, erben die Textfarbe */
.icon {
  width: 1.2em; height: 1.2em; flex: none;
  vertical-align: -.22em;
  stroke-width: 1.4;
}
.icon-lg { width: 1.6em; height: 1.6em; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: 12px 20px; font-size: .875rem;
}
.skip-link:focus { left: 0; color: #fff; text-decoration: none; }

/* Noch offene Platzhalter aus der config.php */
mark.todo {
  background: #fff8dd; color: var(--ink);
  padding: 0 .3em; border-radius: 4px;
  box-shadow: inset 0 -1px 0 #e8d9a0;
}

/* ==========================================================================
   3 · LAYOUT-BAUSTEINE
   ========================================================================== */
.container {
  width: 100%; max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, .5rem + 2.4vw, 2.5rem);
}

.section { padding-block: var(--section-y); }
.section-alt { background: var(--surface-2); }
.section + .section { border-top: 1px solid var(--hairline-2); }
.section-alt + .section, .section + .section-alt { border-top: 0; }

/* Abschnittskopf – zentriert, ruhig, viel Luft */
.section-head {
  max-width: var(--measure);
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h1, .section-head h2 { margin-bottom: var(--sp-4); }
.section-head .lead { margin-bottom: 0; }

/* Kleines Label über der Überschrift */
.eyebrow {
  display: block;
  font-size: .8125rem; font-weight: 600; letter-spacing: .01em;
  color: var(--muted); margin-bottom: var(--sp-3);
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.32;
  letter-spacing: -.018em;
  color: var(--muted);
  font-weight: 400;
}

.narrow { max-width: var(--measure); }

/* ==========================================================================
   4 · BUTTONS & LINKS
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .7rem 1.35rem;
  font: inherit; font-size: 1rem; font-weight: 400; line-height: 1.25;
  letter-spacing: -.01em;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, color .18s ease,
              border-color .18s ease, opacity .18s ease;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn .icon { width: 1.05em; height: 1.05em; }

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); color: #fff; }

/* Sekundär: Umriss in Akzentfarbe */
.btn-ghost { background: transparent; color: var(--accent-ink); border-color: var(--accent); }
.btn-ghost:hover { background: var(--accent); color: #fff; border-color: var(--accent); }


.btn-lg { padding: .85rem 1.75rem; font-size: 1.0625rem; }
.btn-sm { padding: .42rem 1rem; font-size: .875rem; }
.btn-block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }
.btn-row.center { justify-content: center; }

/* Textlink mit Chevron – der typische „Mehr erfahren ›“-Link */
.arrow-link {
  display: inline-flex; align-items: center; gap: .2em;
  color: var(--accent-ink); font-size: 1rem; text-decoration: none;
  margin-top: auto; padding-top: var(--sp-4);
}
.arrow-link .icon { width: .95em; height: .95em; stroke-width: 1.8; }
.arrow-link:hover { text-decoration: underline; }


/* ==========================================================================
   5 · KOPFBEREICH
   ========================================================================== */

/* -- Demo-Hinweis: bewusst leise -- */
.demo-banner {
  background: var(--surface-2);
  border-bottom: 1px solid var(--hairline);
  color: var(--muted);
  font-size: .75rem;
}
.demo-banner-inner { display: flex; align-items: center; gap: .5rem; padding-block: .5rem; }
.demo-banner .icon { width: 1em; height: 1em; flex: none; }
.demo-banner p { margin: 0; color: inherit; }
.demo-banner code { background: #fff; font-size: .95em; }

/* -- Info-Leiste: sehr schmal, sehr leise -- */
.topbar {
  background: var(--surface-2);
  color: var(--muted);
  font-size: .75rem;
  border-bottom: 1px solid var(--hairline-2);
}
.topbar-inner {
  display: flex; align-items: center; justify-content: center;
  gap: 1.5rem; padding-block: .55rem; flex-wrap: wrap;
}
.topbar p { display: inline-flex; align-items: center; gap: .4rem; margin: 0; }
.topbar .icon { width: .95em; height: .95em; }
.topbar a { color: var(--ink); }
.topbar p.topbar-hours, .topbar p.topbar-phone { display: inline-flex; }

/* -- Header: schmal, milchig, ohne Rahmenwirkung -- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
}
.site-header.is-stuck { border-bottom-color: var(--hairline); }
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5); min-height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.brand-schriftzug {
  height: 22px; width: auto;      /* einzeilige Wortmarke, 673x86 */
  display: block;
}
.brand-fallback { display: inline-flex; align-items: center; gap: .5rem; }
.brand-logo { height: 28px; width: 28px; object-fit: cover; border-radius: 6px; }
.brand-name { font-weight: 600; color: var(--ink); font-size: .95rem; letter-spacing: -.02em; }

/* -- Navigation: kleine, unaufdringliche Links -- */
.nav-shell { display: contents; }   /* am Desktop reine Huelle ohne Wirkung */
.main-nav { display: flex; align-items: center; gap: var(--sp-5); }
.main-nav > ul {
  display: flex; align-items: center; gap: .35rem;
  list-style: none; margin: 0; padding: 0;
}
.main-nav > ul li { margin: 0; }
.main-nav > ul a {
  display: block; padding: .4rem .7rem;
  font-size: .8125rem; font-weight: 400; letter-spacing: -.005em;
  color: var(--ink); opacity: .82;
  text-decoration: none; border-radius: 6px;
  transition: opacity .18s ease;
}
.main-nav > ul a:hover { opacity: 1; text-decoration: none; }
.main-nav > ul a.is-active { opacity: 1; font-weight: 600; }
.nav-cta { display: flex; align-items: center; gap: .5rem; }
.nav-phone { font-size: .8125rem; }
.nav-head { display: none; }

.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; margin-right: -8px;
  background: transparent; border: 0; color: var(--ink); cursor: pointer;
}
.nav-toggle .icon { width: 20px; height: 20px; }

.nav-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0, 0, 0, .32);
  opacity: 0; transition: opacity .25s ease;
}
.nav-backdrop.is-visible { opacity: 1; }

/* ==========================================================================
   6 · HERO – zentriert, groß, ohne Deko
   ========================================================================== */
.hero { background: var(--surface); text-align: center; }
.hero-inner {
  padding-block: clamp(4rem, 2.5rem + 7vw, 8rem) clamp(3rem, 2rem + 4vw, 5rem);
}
.hero-text { max-width: 56rem; margin-inline: auto; }
.hero .eyebrow { color: var(--muted); }
.hero h1 {
  font-size: var(--fs-display);
  letter-spacing: -.035em;
  line-height: 1.04;
  margin-bottom: var(--sp-5);
}
.hero h1 .accent { color: var(--ink); }   /* kein Farbverlauf mehr */
.hero-sub {
  font-size: var(--fs-lead);
  line-height: 1.35; letter-spacing: -.018em;
  color: var(--muted);
  max-width: 38rem; margin: 0 auto var(--sp-6);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-5); justify-content: center; }

/* USP-Zeile: schlichte Aufzählung mit Trennpunkten */
.hero-usp {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .5rem 1.5rem; list-style: none;
  margin: var(--sp-6) 0 0; padding: 0;
}
.hero-usp li {
  position: relative; margin: 0;
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .9375rem; color: var(--muted);
}
.hero-usp li + li::before {
  content: ""; position: absolute; left: -.78rem; top: 50%;
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--hairline); transform: translateY(-50%);
}
.hero-usp .icon { display: none; }   /* Text allein reicht – ruhiger */


/* Kennzahlenzeile direkt unter dem Hero */
.trustbar { background: var(--surface); }
.trustbar-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding-block: clamp(2rem, 1.5rem + 2vw, 3rem);
  border-top: 1px solid var(--hairline-2);
}
.trust-item {
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  text-align: center; padding-inline: var(--sp-4);
  border-left: 1px solid var(--hairline-2);
}
.trust-item:first-child { border-left: 0; }
.trust-item > .icon { display: none; }   /* Zahl und Wort tragen die Aussage */
.trust-item strong {
  display: block; color: var(--ink); font-size: 1.0625rem;
  font-weight: 600; letter-spacing: -.015em;
}
.trust-item span { font-size: .875rem; color: var(--muted); }

/* ==========================================================================
   7 · KARTEN, LISTEN, PROZESS, FAQ
   ========================================================================== */
.grid { display: grid; gap: clamp(1rem, .6rem + 1.4vw, 1.5rem); }
/* min-width:0 verhindert, dass lange Inhalte die Spalten aufblähen */
.grid > *, .split > *, .contact-grid > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Karte: Fläche statt Rahmen, kein Schatten, kein Hover-Sprung */
.card {
  display: flex; flex-direction: column;
  background: var(--surface-2);
  border: 0; border-radius: var(--r-xl);
  padding: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem);
  transition: background-color .2s ease;
}
.card::after { content: none; }              /* Verlaufsstreifen entfernt */
.card:hover { background: var(--surface-3); }
.card h2 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -.015em; }
.card h2, .card h3 { margin-bottom: var(--sp-3); }
.card p { color: var(--muted); }
/* Auf grauem Grund kehrt sich die Flächenlogik um */
.section-alt .card { background: var(--surface); }
.section-alt .card:hover { background: var(--surface); }

/* Icon: klein, monochrom, ohne Kachel – alle Farbtöne sind bewusst gleich */
.card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: auto; height: auto; margin-bottom: var(--sp-4);
  background: none; border: 0; color: var(--ink);
}
.card-icon .icon { width: 30px; height: 30px; stroke-width: 1.3; }
.check-list { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; gap: .55rem; }
.check-list li {
  display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start;
  margin: 0; font-size: .9375rem; color: var(--muted);
}
.check-list .icon { width: 1em; height: 1em; color: var(--muted-2); margin-top: .32em; stroke-width: 2; }

/* Feature: reine Typografie */
.feature { text-align: left; }
.feature-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: auto; height: auto; margin-bottom: var(--sp-4);
  background: none; border-radius: 0; color: var(--ink);
}
.feature-icon .icon { width: 28px; height: 28px; stroke-width: 1.3; }
.feature h3 { margin-bottom: var(--sp-2); }
.feature p { font-size: .9375rem; color: var(--muted); margin: 0; }

/* Prozess: Ziffer als leises Ordnungsmerkmal */
.steps { counter-reset: step; }
.step { position: relative; padding-top: var(--sp-5); border-top: 1px solid var(--hairline); }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: var(--sp-5); left: 0;
  font-size: .8125rem; font-weight: 600; color: var(--muted-2);
}
.step::after { content: none; }
.step h3 { margin: 1.75rem 0 var(--sp-2); }
.step p { font-size: .9375rem; color: var(--muted); margin: 0; }

/* FAQ: nur Haarlinien, keine Kästen */
.faq { display: grid; gap: 0; border-top: 1px solid var(--hairline); }
.faq details { background: none; border: 0; border-bottom: 1px solid var(--hairline); border-radius: 0; }
.faq details[open] { box-shadow: none; }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
  padding: 1.35rem 0; cursor: pointer; list-style: none;
  font-size: 1.0625rem; font-weight: 500; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { color: var(--muted); transition: transform .25s ease; flex: none; width: 1.05em; height: 1.05em; }
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq .faq-body { padding: 0 0 1.5rem; color: var(--muted); max-width: var(--measure); }

/* Zweispaltiger Inhalt */
.split {
  display: grid; grid-template-columns: 1.35fr .65fr;
  gap: clamp(2.5rem, 1.5rem + 4vw, 5rem); align-items: start;
}
.panel {
  background: var(--surface-2); border: 0;
  border-radius: var(--r-xl);
  padding: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem);
}
.section-alt .panel { background: var(--surface); }
.panel h2, .panel h3 { margin-top: 0; font-size: var(--fs-h3); }

.prose { max-width: var(--measure); }
.prose p { font-size: var(--fs-body); line-height: 1.55; color: var(--ink-2); }
.prose > h2 { margin-top: var(--sp-8); font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.9rem); }
.prose > h2:first-child { margin-top: 0; }
.prose > h3 { margin-top: var(--sp-7); }
.prose li { color: var(--ink-2); }
.prose .grid { max-width: none; }

/* ==========================================================================
   8 · ABSCHLUSS-BAND
   ========================================================================== */
/* Abschluss-CTA: hell und ruhig */
.cta-band { background: var(--surface-2); color: var(--ink-2); }
.cta-inner {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--sp-5);
  padding-block: clamp(3.5rem, 2.5rem + 3vw, 5.5rem);
}
.cta-band h2 { color: var(--ink); margin-bottom: var(--sp-3); }
.cta-band p { color: var(--muted); margin: 0 auto; max-width: 36rem; font-size: 1.0625rem; }

/* ==========================================================================
   9 · LEERZUSTAND
   ========================================================================== */
.empty-state {
  display: grid; place-items: center; gap: var(--sp-4);
  text-align: center;
  padding: clamp(3.5rem, 2.5rem + 4vw, 6rem) var(--sp-5);
  border: 0; border-radius: var(--r-xl);
  background: var(--surface-2); color: var(--muted);
}
.section-alt .empty-state { background: var(--surface); }
.empty-state .icon { width: 2rem; height: 2rem; color: var(--muted-2); stroke-width: 1.2; }
.empty-state h3 { margin: 0; }
.empty-state p { margin: 0; max-width: 32rem; font-size: .9375rem; }

/* ==========================================================================
   10 · KONTAKT & FORMULAR
   ========================================================================== */
.contact-grid {
  display: grid; grid-template-columns: 1.4fr .6fr;
  gap: clamp(2.5rem, 1.5rem + 4vw, 5rem); align-items: start;
}

.form-card { background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
.form-grid { display: grid; gap: var(--sp-5); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.field { display: flex; flex-direction: column; gap: .45rem; }
.field > label {
  font-size: .875rem; font-weight: 500; color: var(--ink);
  display: flex; align-items: baseline; gap: .35rem;
}
.field .hint { font-size: .8125rem; color: var(--muted-2); font-weight: 400; }
.req { color: var(--muted-2); }

input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
select, textarea {
  width: 100%; padding: .85rem 1rem;
  font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  transition: border-color .18s ease, background-color .18s ease;
}
input::placeholder, textarea::placeholder { color: var(--muted-2); }
input:hover, select:hover, textarea:hover { border-color: var(--hairline); }
input:focus, select:focus, textarea:focus {
  outline: none; background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 113, 227, .18);
}
textarea { resize: vertical; min-height: 9rem; line-height: 1.5; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 16px;
  padding-right: 2.75rem;
}
.field.has-error input, .field.has-error select, .field.has-error textarea {
  border-color: var(--danger); background: var(--danger-bg);
}
.field-error {
  display: flex; align-items: center; gap: .35rem;
  margin: 0; font-size: .8125rem; color: var(--danger);
}
.field-error .icon { width: 1em; height: 1em; }

.file-drop {
  display: flex; align-items: center; gap: .9rem;
  padding: 1.25rem; border: 1px dashed var(--hairline);
  border-radius: var(--r-sm); background: var(--surface-2);
  cursor: pointer; transition: border-color .18s ease, background-color .18s ease;
}
.file-drop:hover, .file-drop.is-hover { border-color: var(--accent); background: var(--surface); }
.file-drop .icon { width: 1.4em; height: 1.4em; color: var(--muted); flex: none; }
.file-drop input[type="file"] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* font-weight ausdruecklich zuruecksetzen: `.field > label` weiter oben ist
   spezifischer und wuerde den Erklaertext sonst halbfett faerben. */
.file-drop-text { font-size: .875rem; font-weight: 400; color: var(--muted); }
.file-drop-text b { display: block; color: var(--ink); font-weight: 500; font-size: .9375rem; }
/* Vorschau der ausgewählten Fotos */
.file-box { margin-top: .85rem; }
.file-vorschau {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  list-style: none; margin: 0; padding: 0;
}
.file-karte {
  position: relative; margin: 0;
  aspect-ratio: 1 / 1;
  border-radius: 10px; overflow: hidden;
  background: var(--surface-3);
  box-shadow: 0 0 0 1px var(--hairline) inset;
}
.file-karte img { width: 100%; height: 100%; object-fit: cover; display: block; }
.file-karte.is-error { box-shadow: 0 0 0 2px var(--danger) inset; }
.file-karte.ohne-bild::after {
  content: "?"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted-2); font-size: 1.5rem;
}

/* Dateiname und Größe als Streifen am unteren Rand */
.file-info {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: 1.4rem .4rem .35rem;
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
  color: #fff; font-size: .65rem; line-height: 1.3;
}
.file-info b {
  display: block; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Entfernen-Knopf – auf Mobilgeräten gibt es kein Hover, also immer sichtbar */
.file-weg {
  position: absolute; top: 5px; right: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .62); color: #fff;
  cursor: pointer; transition: background-color .15s ease, transform .15s ease;
}
.file-weg:hover { background: var(--danger); transform: scale(1.08); }
.file-weg:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

.file-fuss {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); margin-top: .7rem;
  font-size: .8125rem; color: var(--muted);
}
.file-fuss.is-error .file-summe { color: var(--danger); font-weight: 500; }
.file-alles-weg {
  padding: 0; border: 0; background: none;
  font: inherit; font-size: .8125rem; color: var(--accent-ink);
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.file-alles-weg:hover { color: var(--ink); }

/* Zwei Selektoren, weil `.field > label` weiter oben spezifischer waere:
   sonst bleibt die Zeile flex, und das Kaestchen wird auf seine
   Mindestbreite (13 px) zusammengequetscht. */
.field > .consent, .consent {
  display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start;
  font-size: .875rem; font-weight: 400; color: var(--muted);
  cursor: pointer; line-height: 1.5;
}
.consent input[type="checkbox"] {
  flex: none;                       /* falls die Zeile doch einmal flex ist */
  width: 20px; height: 20px; margin: .1em 0 0;
  accent-color: var(--accent); cursor: pointer;
}

.alert {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: 1rem 1.15rem; border-radius: var(--r-sm);
  border: 1px solid var(--hairline); background: var(--surface-2);
  margin-bottom: var(--sp-5); font-size: .9375rem; color: var(--ink-2);
}
.alert .icon { flex: none; margin-top: .15em; width: 1.1em; height: 1.1em; }
.alert p { margin: 0; }
.alert ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.alert li { margin-bottom: .2rem; }
.alert-error   { background: var(--danger-bg); border-color: #f0d5d2; color: #7d1b16; }
.alert-error strong, .alert-error .icon { color: var(--danger); }
.alert-info    { background: var(--surface-2); border-color: var(--hairline); color: var(--ink-2); }
.alert-warn    { background: var(--warn-bg); border-color: var(--warn-line); color: #6b4200; }
.alert-warn strong, .alert-warn .icon { color: var(--warn); }

/* Alert innerhalb eines Formularfeldes statt über dem Formular. */
.alert-inline { margin: .7rem 0 0; font-size: .875rem; }
.alert-inline strong { display: block; margin-bottom: .2rem; }
.alert-inline p { margin: 0; }

/* Namen der Bilder, die erneut ausgewählt werden müssen. */
.fotos-weg-liste { margin-top: .55rem !important; display: flex; flex-wrap: wrap;
  align-items: center; gap: .35rem; font-size: .8125rem; }
.file-chip {
  display: inline-block; max-width: 16rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
  padding: .12rem .5rem; border-radius: 999px;
  background: rgba(138, 83, 0, .1); color: var(--warn); font-weight: 500;
}

/* Solange die Bilder fehlen, bleibt das Auswahlfeld deutlich markiert. */
.file-drop.is-erneut { border-color: var(--warn); background: var(--warn-bg); }

/* Notfallnummer: in der Kontaktbox und klein im Footer. */
.notfall { margin: 0; font-size: .875rem; color: var(--muted); }
.notfall a { display: block; margin-top: .15rem; font-size: 1.0625rem; font-weight: 500; }
.footer-notfall {
  margin-left: .35rem; padding: .05rem .4rem; border-radius: 999px;
  background: rgba(255, 255, 255, .12); font-size: .6875rem;
  text-transform: uppercase; letter-spacing: .04em;
}

.hp-field {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  border: 0; padding: 0; margin: -1px;
}

/* Info-Karte: hell statt dunkelblau */
.info-card {
  background: var(--surface-2); color: var(--muted);
  border-radius: var(--r-xl);
  padding: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem);
}
.section-alt .info-card { background: var(--surface); }
.info-card h2, .info-card h3 {
  color: var(--ink); font-size: var(--fs-h3); margin-bottom: var(--sp-4);
  display: flex; align-items: center; gap: .5rem;
}
.info-card h3 .icon, .info-card h2 .icon { width: 1.05em; height: 1.05em; color: var(--muted); }
.info-card + .info-card, .info-card + .panel, .panel + .info-card { margin-top: var(--sp-4); }
.info-list { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: grid; gap: .9rem; }
.info-list li { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; margin: 0; font-size: .9375rem; }
.info-list .icon { color: var(--muted-2); margin-top: .22em; width: 1.05em; height: 1.05em; }
.info-list a { color: var(--accent-ink); }
.info-card dl {
  display: grid; grid-template-columns: auto 1fr;
  gap: .4rem 1rem; margin: 0; font-size: .9375rem;
}
.info-card dt { font-weight: 400; color: var(--ink); }
.info-card dd { margin: 0; text-align: right; color: var(--muted); }
.info-divider { height: 1px; background: var(--hairline); margin: var(--sp-5) 0; }

/* Danke- / Statusseite */
.status-box { max-width: 40rem; margin-inline: auto; text-align: center; }
.status-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%; margin-bottom: var(--sp-5);
  background: none; color: var(--ink); box-shadow: none;
}
.status-icon .icon { width: 52px; height: 52px; stroke-width: 1.1; }
.status-box .lead { margin-bottom: var(--sp-7); }

/* ==========================================================================
   11 · FOOTER & MOBILE AKTIONSLEISTE
   ========================================================================== */
.site-footer {
  background: var(--surface-2);
  color: var(--muted);
  font-size: .75rem; line-height: 1.6;
  padding-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  border-top: 1px solid var(--hairline-2);
}
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--ink); text-decoration: underline; }
.footer-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: clamp(1.75rem, 1rem + 2.5vw, 2.5rem);
  padding-bottom: clamp(2rem, 1.5rem + 2vw, 2.75rem);
}
.footer-col h2 {
  color: var(--ink); font-size: .75rem; font-weight: 600;
  letter-spacing: 0; text-transform: none; margin-bottom: var(--sp-3);
}
.footer-brand img {
  height: 34px; width: auto;      /* vollständige Marke mit Unterzeile, 673x108 */
  margin-bottom: var(--sp-4); filter: none; opacity: 1;
}
.footer-brand p { max-width: 32ch; }

.footer-links, .footer-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.footer-links li, .footer-contact li { margin: 0; }
.footer-contact li { display: block; }
.footer-contact .icon { color: var(--muted-2); margin-top: .22em; width: 1em; height: 1em; }
.footer-hours { display: grid; grid-template-columns: auto 1fr; gap: .3rem .75rem; margin: 0 0 var(--sp-4); }
.footer-hours dt { color: var(--muted); }
.footer-hours dd { margin: 0; text-align: right; color: var(--muted); }
.footer-legal { padding-top: var(--sp-4); margin-top: var(--sp-4); border-top: 1px solid var(--hairline); }

.footer-bottom {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  align-items: center; justify-content: space-between;
  padding-block: var(--sp-5);
  border-top: 1px solid var(--hairline);
  font-size: .75rem; color: var(--muted-2);
}
.footer-bottom p { margin: 0; }
.footer-badges { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer-badges span { display: inline-flex; align-items: center; gap: .35rem; }
.footer-badges .icon { width: 1em; height: 1em; color: var(--muted-2); }

.mobile-actionbar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 80;
  display: none; gap: .5rem;
  padding: .6rem .9rem calc(.6rem + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--hairline);
  box-shadow: none;
}
.mobile-actionbar .btn { flex: 1; padding-inline: .75rem; font-size: .9375rem; }

/* ==========================================================================
   12 · HILFSKLASSEN, ANIMATION, MEDIA QUERIES, DRUCK
   ========================================================================== */
.is-hidden { display: none !important; }
.text-center { text-align: center; }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mb-0 { margin-bottom: 0; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* Sehr zurückhaltendes Einblenden */
.reveal { opacity: 0; transform: translateY(10px); }
.js-reveal-ready .reveal { transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Breakpoints ---------- */
@media (max-width: 1024px) {
  .split, .contact-grid { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .trustbar-grid { grid-template-columns: repeat(2, 1fr); row-gap: var(--sp-6); }
  .trust-item:nth-child(odd) { border-left: 0; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }

  /* Mobile Navigation als Panel */
  /* 44 px ist die kleinste Flaeche, die sich mit dem Daumen sicher trifft. */
  .nav-toggle { display: inline-flex; width: 44px; height: 44px; margin-right: -10px; }

  /* Ohne diese Zeilen bleibt das Menue unbenutzbar: backdrop-filter macht
     den Header zum Bezugsrahmen fuer alles, was darin fixed oder absolute
     positioniert ist. Das Panel waere dann nur 52 px hoch statt
     bildschirmhoch. Auf dem Handy ist die Milchglas-Optik ohnehin teuer –
     eine deckende Leiste sieht dort genauso gut aus. */
  .site-header {
    background: var(--surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* Bildschirmgrosser Rahmen: schneidet das geschlossene Panel ab, damit es
     die Seitenbreite nicht aufblaeht. Er faengt selbst keine Klicks ab. */
  .nav-shell {
    display: block;
    position: fixed; inset: 0; z-index: 95;
    overflow: hidden; pointer-events: none;
  }
  .main-nav {
    /* absolut statt fixed – nur so greift das overflow:hidden der Huelle */
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(20rem, 84vw);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0; padding: var(--sp-4) var(--sp-5) var(--sp-6);
    padding-bottom: calc(var(--sp-6) + env(safe-area-inset-bottom));
    background: var(--surface);
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.32, .72, 0, 1);
    overflow-y: auto; visibility: hidden;
    pointer-events: auto;
    overscroll-behavior: contain;
  }
  .main-nav.is-open { transform: none; visibility: visible; }
  .nav-head {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: var(--sp-4); margin-bottom: var(--sp-2);
    border-bottom: 1px solid var(--hairline);
  }
  .nav-head-title { font-size: .75rem; font-weight: 600; color: var(--muted-2); }
  .nav-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-right: -10px;
    border: 0; border-radius: 50%;
    background: none; color: var(--ink); cursor: pointer;
  }
  .nav-close:hover { background: var(--surface-2); }
  .main-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav > ul a { padding: .9rem .25rem; font-size: 1.125rem; border-radius: 0; }
  .main-nav > ul a.is-active { background: none; }
  .nav-cta {
    flex-direction: column; align-items: stretch; gap: var(--sp-3);
    margin-top: var(--sp-5); padding-top: var(--sp-5);
    border-top: 1px solid var(--hairline);
  }
  .nav-cta .btn { width: 100%; padding-block: .75rem; }
}

@media (max-width: 700px) {
  .topbar-inner { gap: 1rem; }
  /* Auf schmalen Displays zaehlt nur die Nummer. Die Zeiten stehen im Footer.
     Der Selektor braucht dieselbe Spezifitaet wie `.topbar p`, sonst bleibt
     das display:inline-flex von oben stehen und die Zeile bleibt sichtbar. */
  .topbar p.topbar-hours { display: none; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .mobile-actionbar { display: flex; }
  /* Platz fuer die feste Aktionsleiste – plus Home-Indikator auf iPhones. */
  body { padding-bottom: calc(4.75rem + env(safe-area-inset-bottom)); }
  .hero-actions { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  .hero-actions .btn { width: 100%; }
  /* Lange Beschriftungen (z. B. "Jetzt anrufen: 02504 123 456") umbrechen
     lassen, statt den Viewport horizontal zu sprengen. */
  .btn { white-space: normal; text-align: center; }
  .cta-inner .btn { width: 100%; }
  .info-card dl { grid-template-columns: 1fr auto; }
  .step { padding-top: var(--sp-4); }

  /* -- Weniger Leerlauf ----------------------------------------------------
     Alle Raster stehen jetzt untereinander. Mit den Desktop-Abstaenden wird
     daraus eine sehr lange Rutschbahn; auf dem Handy reicht gut die Haelfte. */
  :root { --section-y: 3.5rem; }
  .section-head { margin-bottom: var(--sp-6); }
  .hero-inner { padding-block: 3rem 2.5rem; }
  .cta-inner { padding-block: 3rem; }

  /* -- USP-Zeile im Hero ---------------------------------------------------
     Die Trennpunkte sitzen absolut vor dem Eintrag. Bricht die Zeile um,
     steht der Punkt allein am Zeilenanfang. Untereinander ist es eindeutig. */
  .hero-usp { flex-direction: column; align-items: center; gap: .35rem; margin-top: var(--sp-5); }
  .hero-usp li + li::before { content: none; }

  /* -- Tippziele im Kopf ---------------------------------------------------
     Logo und Telefonnummer waren nur ~20 px hoch. */
  .brand { min-height: 44px; }
  .topbar-inner { padding-block: .15rem; }
  .topbar p { min-height: 34px; }
  .topbar a { display: inline-block; padding: .5rem .25rem; }

  /* -- Formular ------------------------------------------------------------ */
  .form-card button[type="submit"] { width: 100%; }
  /* Ein 18-px-Kaestchen trifft man mit dem Daumen kaum. */
  .consent { gap: .9rem; }
  .consent input[type="checkbox"] { width: 24px; height: 24px; }
  /* Der Entfernen-Knopf liegt auf dem Bild – klein, aber erreichbar. */
  .file-weg { width: 30px; height: 30px; top: 6px; right: 6px; }
  .file-vorschau { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }

  /* -- Weiterlesen-Links --------------------------------------------------- */
  .arrow-link { padding-block: var(--sp-4) .35rem; }

  /* -- Footer --------------------------------------------------------------
     12 px sind auf dem Handy zu klein zum Lesen, und die eng gestapelten
     Links liegen als Tippziele fast aufeinander. */
  /* Telefon und E-Mail in der Kontaktbox sind die wichtigsten Links der
     Seite – sie brauchen mehr als 20 px Hoehe. */
  .info-list a { display: inline-block; padding-block: .4rem; }

  .site-footer { font-size: .875rem; }
  .footer-col h2 { font-size: .9375rem; margin-bottom: var(--sp-4); }
  .footer-links, .footer-contact { gap: .1rem; }
  .footer-links a, .footer-contact a {
    display: inline-block; padding-block: .45rem;
  }
  .footer-hours { gap: .45rem .75rem; }
  .footer-brand p { max-width: none; }
  .footer-bottom { font-size: .8125rem; gap: var(--sp-3); }
  .footer-badges { gap: .5rem 1.25rem; }
}

@media (max-width: 460px) {
  .trustbar-grid { grid-template-columns: 1fr; row-gap: var(--sp-5); }
  .trust-item { border-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .topbar, .demo-banner, .site-header, .mobile-actionbar, .cta-band,
  .nav-backdrop, .skip-link { display: none !important; }
  body { color: #000; background: #fff; padding: 0; font-size: 11pt; }
  .site-footer { background: #fff; color: #000; border-top: 1px solid #999; }
  .site-footer a, .footer-col h2 { color: #000; }
  .card, .panel, .info-card { background: #fff; border: 1px solid #ccc; break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }
}

/* ==========================================================================
   13 · EINZELBAUSTEINE (ersetzen frühere Inline-Styles)
   ========================================================================== */

/* Portrait auf „Über uns“ */
.portrait {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;   /* Format egal, nie verzerrt */
  border-radius: var(--r-lg); margin-bottom: var(--sp-5); background: var(--surface-3);
}
.portrait-name { margin-bottom: .2rem; font-size: var(--fs-h3); }
.portrait-role { margin-bottom: var(--sp-5); color: var(--muted); font-size: .9375rem; }

/* Kompakter Leerzustand (z. B. fehlendes Portrait) */
.empty-state-sm { padding: 2.5rem 1.25rem; margin-bottom: var(--sp-5); }
.empty-state-sm p { font-size: .875rem; }

/* Fußnote unter dem Formular */
.form-footnote { margin: var(--sp-5) 0 0; font-size: .8125rem; color: var(--muted-2); }

/* Hinweiszeile auf Status-Seiten */
.status-note { color: var(--muted); font-size: .9375rem; }