/* ============================================================
   TOKENS — wörtlich aus dem Designsystem (Designsystem/index.html)
   ============================================================ */
:root{
  /* — Kernfarben (aus dem Logo-SVG) — */
  --c-primary:      #005454;
  --c-secondary:    #95a8b0;
  --c-accent:       #e3000b;

  /* — Teal-Skala — */
  --c-teal-900:     #002b2b;
  --c-teal-800:     #003d3d;
  --c-teal-700:     #005454;
  --c-teal-600:     #056b6b;
  --c-teal-500:     #0e8383;
  --c-teal-300:     #7fbdbd;
  --c-teal-100:     #d6e8e8;
  --c-teal-50:      #edf5f5;

  /* — Neutrale — */
  --c-ink:          #0f2b2b;
  --c-ink-soft:     #47585f;
  --c-muted:        #6e828a;
  --c-line:         #d2dbdf;
  --c-line-soft:    #e8eef0;

  /* — Flächen — */
  --c-surface:      #ffffff;
  --c-surface-alt:  #f4f7f8;
  --c-surface-deep: #005454;
  --c-surface-ink:  #002b2b;

  /* — Rot-Skala — */
  --c-accent-700:   #a80008;
  --c-accent-600:   #e3000b;
  --c-accent-100:   #fde5e6;

  /* — Typografie — lokal eingebundene Schriften (siehe assets/fonts/fonts.css) */
  --f-display: "Spectral", Georgia, serif;
  --f-body:    "Inter", -apple-system, "Segoe UI", sans-serif;

  --fs-display: 72px;  --lh-display: 1.1;
  --fs-h1:      56px;  --lh-h1:      1.15;
  --fs-h2:      40px;  --lh-h2:      1.2;
  --fs-h3:      28px;  --lh-h3:      1.3;
  --fs-eyebrow: 12px;  --lh-eyebrow: 1.4;
  --fs-lead:    20px;  --lh-lead:    1.6;
  --fs-body:    16px;  --lh-body:    1.7;
  --fs-small:   13px;  --lh-small:   1.5;

  --ls-tight:   -0.01em;
  --ls-eyebrow:  0.18em;
  --ls-badge:    0.1em;

  /* — Abstände — */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 16px;  --sp-4: 24px;
  --sp-5: 40px;  --sp-6: 64px;  --sp-7: 96px;  --sp-8: 144px;

  /* — Container —
     Breiter als im Designsystem (1200px): Katja möchte, dass die Seite
     den Großteil des Monitors ausschöpft. */
  --w-container: 1600px;
  --w-text:      760px;

  /* — Radien — */
  --r-sm:   2px;
  --r-md:   4px;
  --r-lg:   8px;
  --r-pill: 999px;

  /* — Schatten — */
  --sh-sm:    0 1px 2px rgba(0,43,43,.06);
  --sh-md:    0 4px 16px rgba(0,43,43,.08);
  --sh-lg:    0 12px 40px rgba(0,43,43,.12);
  --sh-focus: 0 0 0 3px rgba(0,84,84,.25);

  /* — Bewegung — */
  --ease: cubic-bezier(.4,0,.2,1);
  --dur:  200ms;
}

/* Mobile Typo-Skala – Hauptbreakpoint 768px */
@media (max-width: 767px){
  :root{
    --fs-display: 44px;
    --fs-h1:      36px;
    --fs-h2:      28px;
    --fs-h3:      22px;
    --fs-lead:    17px;
  }
}

/* ============================================================
   RESET + BASIS
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--f-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--c-ink);
  background:var(--c-surface);
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; display:block; }
a{ color:var(--c-primary); }
:focus-visible{ outline:none; box-shadow:var(--sh-focus); border-radius:var(--r-sm); }

/* ============================================================
   TYPOGRAFIE
   ============================================================ */
.display{ font-family:var(--f-display); font-weight:300; font-size:var(--fs-display); line-height:var(--lh-display); letter-spacing:var(--ls-tight); }
.h2{ font-family:var(--f-display); font-weight:400; font-size:var(--fs-h2); line-height:var(--lh-h2); letter-spacing:-.005em; color:var(--c-ink); }
.h3{ font-family:var(--f-display); font-weight:500; font-size:var(--fs-h3); line-height:var(--lh-h3); }
.eyebrow{
  font-family:var(--f-body); font-weight:500; font-size:var(--fs-eyebrow);
  line-height:var(--lh-eyebrow); letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase; color:var(--c-primary);
}
/* Kleiner roter Punkt hinter jedem Label — Echo des Logo-Punkts „WORKS." */
.eyebrow::after{ content:"."; color:var(--c-accent); font-weight:600; }
.lead{ font-weight:300; font-size:var(--fs-lead); line-height:var(--lh-lead); color:var(--c-ink-soft); max-width:68ch; }
.body{ font-size:var(--fs-body); line-height:var(--lh-body); max-width:68ch; }
.small{ font-size:var(--fs-small); line-height:var(--lh-small); letter-spacing:.01em; color:var(--c-muted); }

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap{ width:100%; max-width:var(--w-container); margin:0 auto; padding:0 var(--sp-4); }
@media (min-width:768px){ .wrap{ padding:0 var(--sp-6); } }

.sec{ padding:var(--sp-7) 0; }
@media (min-width:768px){ .sec{ padding:var(--sp-8) 0; } }
.sec--alt{ background:var(--c-surface-alt); }
.sec__head{ margin-bottom:var(--sp-6); }
.sec__head .eyebrow{ margin-bottom:var(--sp-3); }
.sec__head .lead{ margin-top:var(--sp-4); max-width:680px; }

.grid{ display:grid; gap:var(--sp-4); }
@media (min-width:640px){ .grid--2{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .grid--3{ grid-template-columns:1fr 1fr 1fr; } }

/* Text links, Bild rechts — ab 1024px nebeneinander */
/* Zukunftsbild: Text und Berg nebeneinander (ab 1024px zwei Spalten),
   darunter gestapelt – kein Überlappen mehr. */
.sec--berg__img{ display:block; width:100%; height:auto; max-width:460px; margin-top:var(--sp-5); }
@media (min-width:1024px){
  .sec--berg .wrap{ display:grid; grid-template-columns:1.1fr .9fr; gap:var(--sp-7); align-items:end; }
  .sec--berg__img{ max-width:480px; margin-top:0; justify-self:center; }
}

/* Zwei Textspalten nebeneinander — füllt die Breite, bleibt luftig */
.duo{ display:grid; gap:var(--sp-6); align-items:start; }
@media (min-width:900px){ .duo{ grid-template-columns:1fr 1fr; gap:var(--sp-7); } }
.duo > * { min-width:0; }
/* Auf dem Handy: gestapelte Spalten ohne störenden Leerraum.
   Problem-Liste im Listen-Rhythmus (--sp-3). */
@media (max-width:899px){
  .problem-duo{ gap:var(--sp-3); }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  font-family:var(--f-body); font-weight:500; font-size:15px; letter-spacing:.02em;
  padding:14px 32px; border-radius:var(--r-md); border:1px solid transparent;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease),
             border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn--primary{ background:var(--c-primary); color:#fff; }
.btn--primary:hover{ background:var(--c-teal-800); }
.btn--primary:active{ background:var(--c-teal-600); }
.on-dark .btn--primary{ background:#fff; color:var(--c-primary); }
.on-dark .btn--primary:hover{ background:var(--c-teal-100); }

/* CTA-Gruppe: linksbündig; der Button wird automatisch so breit wie der
   Hinweis darunter, sodass beide dieselbe linke und rechte Kante teilen. */
.cta{ display:inline-block; text-align:left; }
.cta .btn{ display:flex; width:100%; }
.cta-note{ margin-top:var(--sp-3); font-size:var(--fs-small); line-height:var(--lh-small); letter-spacing:.01em; color:var(--c-muted); }
.on-dark .cta-note{ color:var(--c-teal-100); }

/* ============================================================
   HEADER / NAVIGATION
   ============================================================ */
.header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--c-line-soft);
}
.header__bar{ height:88px; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); }
.header__logo img{ height:32px; width:auto; }
.header__right{ display:flex; align-items:center; gap:var(--sp-5); }
.header__nav{ display:none; align-items:center; gap:var(--sp-5); }
.header__nav a{
  font-weight:400; font-size:15px; color:var(--c-ink); text-decoration:none;
  transition:color var(--dur) var(--ease);
}
.header__nav a:hover{ color:var(--c-primary); text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:1px; }
.header__cta{ display:none; }
@media (min-width:1024px){
  .header__nav{ display:flex; }
  .header__cta{ display:inline-flex; }
}

/* Burger + Overlay-Menü (mobil) */
.burger{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:48px; height:48px; padding:12px; background:none; border:0; cursor:pointer;
}
.burger span{ display:block; height:2px; width:24px; background:var(--c-ink); transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
@media (min-width:1024px){ .burger{ display:none; } }

/* Kompaktes Klapp-Panel: klappt von oben nur so weit auf, wie der Inhalt lang ist */
.mobilemenu{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(71,88,95,.92); /* Firmengrau-Neutral (--c-ink-soft), leicht durchsichtig */
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  display:none; flex-direction:column; padding:var(--sp-4) var(--sp-4) var(--sp-5);
  box-shadow:0 12px 40px rgba(0,43,43,.28);
}
.mobilemenu.is-open{ display:flex; }
.mobilemenu__top{ height:88px; display:flex; align-items:center; justify-content:space-between; }
.mobilemenu__top img{ height:32px; width:auto; }
.mobilemenu__close{
  width:48px; height:48px; background:none; border:0; cursor:pointer;
  color:#fff; font-size:28px; line-height:1;
}
.mobilemenu__links{ display:flex; flex-direction:column; gap:var(--sp-4); margin-top:var(--sp-5); list-style:none; }
.mobilemenu__links a{
  font-family:var(--f-display); font-weight:400; font-size:28px; color:#fff; text-decoration:none;
}
/* Vollflächiger CTA-Abschluss direkt unter den Menüpunkten, mit Trennlinie darüber */
.mobilemenu__cta{
  margin-top:var(--sp-5); padding-top:var(--sp-5);
  border-top:1px solid rgba(255,255,255,.18);
}
/* Button so groß wie die CTA-Buttons im Seiteninhalt: nur so breit wie der Text,
   linksbündig — dadurch überall auf der Seite einheitlich. */
.mobilemenu__cta .btn{
  background:#fff; color:var(--c-primary);
}
.mobilemenu__cta .btn:hover{ background:var(--c-teal-100); }
.mobilemenu__cta .cta-note{ color:var(--c-teal-100); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; overflow:hidden;
  background-color:var(--c-primary); color:#fff;
  /* Handy: Zahnräder-Ausschnitt (ohne leere linke Fläche) als Hintergrund */
  background-image:url("zahnraeder-hero-mobile.jpg");
  background-size:cover; background-position:center; background-repeat:no-repeat;
  padding:var(--sp-7) 0;
}
/* Ab 768px: das volle Bild als vollflächiger Hintergrund, Inhalt links davor (Desktop/Tablet wie gehabt). */
@media (min-width:768px){
  .hero{
    min-height:80vh; display:flex; align-items:center;
    background-image:url("zahnraeder-hero.jpg");
  }
}
/* Teal-Schleier: auf dem Handy als Verlauf – oben (wo der Text steht) kräftig für gute
   Lesbarkeit, nach unten durchlässiger, damit die Zahnräder sichtbar bleiben. Ab 768px dezent. */
.hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,43,43,.82) 0%, rgba(0,43,43,.68) 60%, rgba(0,84,84,.5) 100%);
  pointer-events:none;
}
@media (min-width:768px){ .hero::before{ background:rgba(0,84,84,.28); } }
/* Handy: dezenter Schatten hinter der Schrift für zusätzliche Lesbarkeit über den hellen Rädern */
@media (max-width:767px){
  .hero__eyebrow, .hero__title, .hero__lead, .hero .cta-note{ text-shadow:0 1px 3px rgba(0,43,43,.6); }
}
.hero > .wrap{ position:relative; z-index:1; }
.hero__content{ position:relative; max-width:640px; }
.hero__eyebrow{ color:var(--c-secondary); margin-bottom:var(--sp-5); }
.hero__title{ color:#fff; margin-bottom:var(--sp-5); }
.hero__lead{ color:var(--c-teal-100); max-width:560px; margin-bottom:var(--sp-5); }

/* ============================================================
   KARTE
   ============================================================ */
.card{
  background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--r-md);
  padding:var(--sp-4); box-shadow:var(--sh-md);
  transition:box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
@media (min-width:768px){ .card{ padding:var(--sp-5); } }
.card:hover{ box-shadow:var(--sh-lg); border-color:var(--c-secondary); transform:translateY(-2px); }
.card .h3{ color:var(--c-ink); margin-bottom:var(--sp-3); }
.card p{ color:var(--c-ink-soft); }
/* Box-Überschrift: Hauptbegriff, darunter Pfeil + Beschreibung */
.card__kicker{
  display:block; margin-top:var(--sp-2);
  font-family:var(--f-body); font-weight:500; font-size:15px;
  line-height:1.4; letter-spacing:0; color:var(--c-primary);
}
.card__arrow{
  color:var(--c-accent); font-size:1.35em; font-weight:700;
  vertical-align:-0.12em; -webkit-text-stroke:0.5px var(--c-accent);
}

/* Angebots-Karten: Ergebnis-Block in Petrol, sitzt in allen drei Karten auf gleicher Höhe unten */
.card--result{ display:flex; flex-direction:column; }
.card--result > p{ margin-bottom:var(--sp-4); }
.card__result{ margin-top:auto; padding:var(--sp-4); border-radius:var(--r-md); background:var(--c-primary); }
.card .card__result p{ color:#fff; }
.card .card__result p + p{ margin-top:var(--sp-2); }
.card .card__result .card__result-label{ color:var(--c-teal-100); margin-bottom:var(--sp-2); }
/* Link zur Unterseite, unter dem Ergebnis-Block */
.card__more{ margin-top:var(--sp-4); }
/* Moderne Browser: Überschrift, Text und Ergebnis-Block beginnen in allen drei Karten auf gleicher Höhe */
@supports (grid-template-rows:subgrid){
  .card--result{ display:grid; grid-row:span 4; grid-template-rows:subgrid; row-gap:0; }
  .card--result .card__result{ margin-top:0; }
}

/* So geht's: nummerierte Schritte (echte Liste, Nummer als Kreis in Petrol) */
.steps{ list-style:none; counter-reset:step; }
.steps .card p + p{ margin-top:var(--sp-3); }
.steps .card .list{ margin:var(--sp-3) 0; }
/* Aufzählungen in Karten: gleiche Textfarbe wie die Absätze, engere Zeilen */
.card .list li{ color:var(--c-ink-soft); }
.card .list li + li{ margin-top:var(--sp-2); }
/* Kopf der Schritt-Karte: oben der Umfang in der Überschriften-Schrift,
   darunter der Preis mit rotem Pfeil */
.card .card__scope, .offer .card__scope, .card__scope--seite{
  font-family:var(--f-display); font-weight:500;
  font-size:var(--fs-body); line-height:1.5; color:var(--c-primary);
}
.steps .card__scope{ margin-top:0; }
.card .card__scope + p{ margin-top:var(--sp-3); }
.offer .card__scope{ margin-bottom:var(--sp-3); }
.steps .card p.card__kicker{ margin-top:var(--sp-2); }
.steps .card .card__kicker + p{ margin-top:var(--sp-4); }
.steps > li{ counter-increment:step; }
.steps > li::before{
  content:counter(step); display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:var(--r-pill); margin-bottom:var(--sp-4);
  background:var(--c-primary); color:#fff;
  font-family:var(--f-display); font-weight:500; font-size:22px; line-height:1;
}

/* Einstiegspaket „Erster Blick": Inhalt links, Preis + Button rechts (auf dem Handy untereinander) */
.offer{ margin-top:var(--sp-6); display:grid; gap:var(--sp-5); border-top:4px solid var(--c-primary); }
.offer:hover{ transform:none; }
.offer .eyebrow{ margin-bottom:var(--sp-2); }
.offer .list{ margin-top:var(--sp-4); }
.offer__more{ margin-top:var(--sp-4); }
.offer__price{ border-top:1px solid var(--c-line); padding-top:var(--sp-5); }
@media (min-width:900px){
  .offer{ grid-template-columns:1.3fr 1fr; gap:var(--sp-6); }
  .offer__price{ border-top:0; padding-top:0; border-left:1px solid var(--c-line); padding-left:var(--sp-6); }
}
.offer__amount{ font-family:var(--f-display); font-weight:400; font-size:var(--fs-h1); line-height:1; color:var(--c-primary); }
.card .offer__terms, .offer__terms{ margin-top:var(--sp-2); font-size:var(--fs-small); color:var(--c-muted); }
.offer__credit{ margin-top:var(--sp-4); }
.offer__credit + .list{ margin-top:var(--sp-2); }
.offer__note{ margin-top:var(--sp-4); }
.offer .cta{ margin-top:var(--sp-5); }


/* ============================================================
   LISTEN
   ============================================================ */
.list{ list-style:none; }
.list li{
  position:relative; padding-left:28px; max-width:68ch;
}
.list li + li{ margin-top:var(--sp-3); }
.list li::before{
  content:""; position:absolute; left:0; top:.85em;
  width:12px; height:2px; background:var(--c-secondary);
}
.list--check li::before{
  content:"✓"; width:auto; height:auto; background:none; top:0;
  color:var(--c-primary); font-weight:600; font-size:16px; line-height:inherit;
}
/* X-Liste als Gegenstück zur Haken-Liste (Farbe: Akzent, ggf. später anpassen) */
.list--x li::before{
  content:"✗"; width:auto; height:auto; background:none; top:0;
  color:var(--c-accent); font-weight:600; font-size:16px; line-height:inherit;
}

/* ============================================================
   FAQ — Fragen und Antworten offen sichtbar, ab 900px zweispaltig
   ============================================================ */
.faq-list{ display:grid; column-gap:var(--sp-7); }
/* Ab 900px zwei Spalten, spaltenweise gefüllt: links die ersten fünf Fragen,
   rechts die übrigen. Bei einer anderen Anzahl Fragen die Zeilenzahl anpassen. */
@media (min-width:900px){
  .faq-list{ grid-template-columns:1fr 1fr; grid-template-rows:repeat(5, auto); grid-auto-flow:column; }
}
/* Unterseiten mit weniger Fragen: Zeilenzahl passend setzen */
@media (min-width:900px){ .faq-list--3{ grid-template-rows:repeat(3, auto); } }
.faq-item{ border-top:1px solid var(--c-line); padding:var(--sp-4) 0 var(--sp-5); }
.faq-item h3{
  font-family:var(--f-body); font-weight:600; font-size:17px; line-height:1.5;
  color:var(--c-ink); margin-bottom:var(--sp-2);
}
.faq-item p{ color:var(--c-ink-soft); max-width:68ch; }
.faq-item p + p{ margin-top:var(--sp-2); }
.faq-item .list{ margin:var(--sp-2) 0; }
.faq-item .list li{ color:var(--c-ink-soft); }
.faq-item .list li + li{ margin-top:var(--sp-2); }

/* ============================================================
   PLATZHALTER (Formular + Rechtliches — kommen in späteren Schritten)
   ============================================================ */
.placeholder{
  border:2px dashed var(--c-secondary); border-radius:var(--r-md);
  background:var(--c-teal-50); padding:var(--sp-5) var(--sp-4); text-align:center;
}
.placeholder__badge{
  display:inline-block; padding:4px 12px; border-radius:var(--r-pill);
  background:var(--c-teal-100); color:var(--c-teal-900);
  font-weight:500; font-size:11px; letter-spacing:var(--ls-badge); text-transform:uppercase; line-height:1.6;
  margin-bottom:var(--sp-3);
}
.placeholder p{ color:var(--c-ink-soft); max-width:48ch; margin:0 auto; }

.placeholder-link{
  display:inline-block; padding:2px 10px; border:1px dashed var(--c-secondary); border-radius:var(--r-sm);
  color:var(--c-teal-100); text-decoration:none; font-size:var(--fs-small); cursor:default;
}

/* ============================================================
   KONTAKT — Stimmungsbild als Hintergrund mit Teal-Schleier,
   damit die helle Schrift darauf gut lesbar bleibt.
   ============================================================ */
.sec--kontakt{
  position:relative; overflow:hidden;
  background:var(--c-primary);
  background-image:url("stimmung-kontakt.jpg");
  background-size:cover; background-position:center;
  color:#fff;
}
/* Derselbe Foto-Schleier wie im Hero: primäres Marken-Teal laut Design-Vorlage.
   Etwas kräftiger, weil hier mehr Text auf dem Bild steht und lesbar bleiben muss. */
.sec--kontakt::before{
  content:""; position:absolute; inset:0;
  background:rgba(0,84,84,.82);
  pointer-events:none;
}
.sec--kontakt > .wrap{ position:relative; z-index:1; }
.sec--kontakt .eyebrow{ color:var(--c-secondary); }
.sec--kontakt .h2{ color:#fff; }
.sec--kontakt .lead{ color:var(--c-teal-100); }
.sec--kontakt .body{ color:var(--c-teal-100); }

.kontakt-card{ max-width:var(--w-text); margin-top:var(--sp-6); }
.kontakt-card__intro{ margin-bottom:var(--sp-4); }
/* Sprungziel der CTA-Buttons: etwas Abstand, damit das Formular nicht unter der klebenden Kopfzeile landet */
#kontaktformular{ scroll-margin-top:100px; }

/* Telefonische Erreichbarkeit im Kontakt-Bereich */
.kontakt-phone{ margin-top:var(--sp-6); padding-top:var(--sp-5); border-top:1px solid rgba(255,255,255,.18); }
.kontakt-phone__label{ font-size:var(--fs-small); color:var(--c-teal-100); margin-bottom:var(--sp-1); }
.kontakt-phone__number{ display:inline-block; font-family:var(--f-display); font-weight:400; font-size:var(--fs-h3); line-height:1.2; color:#fff; text-decoration:none; }
.kontakt-phone__number:hover{ text-decoration:underline; text-underline-offset:4px; }
.kontakt-phone__times{ margin-top:var(--sp-3); color:var(--c-teal-100); }
.kontakt-phone__note{ margin-top:var(--sp-3); font-size:var(--fs-small); color:var(--c-teal-100); }

/* ============================================================
   KONTAKTFORMULAR (nach Designsystem-Vorgabe)
   ============================================================ */
.form-field{ margin-bottom:var(--sp-3); }
.form-field label{
  display:block; font-family:var(--f-body); font-weight:500; font-size:13px;
  color:var(--c-ink); margin-bottom:var(--sp-2);
}
.form-field .optional{ color:var(--c-muted); font-weight:400; }
.form-field input,
.form-field textarea{
  width:100%; font-family:var(--f-body); font-size:16px; color:var(--c-ink);
  background:#fff; border:1px solid var(--c-line); border-radius:var(--r-sm);
  padding:0 16px; height:48px;
}
.form-field textarea{ height:auto; min-height:120px; padding:12px 16px; line-height:1.6; resize:vertical; }
.form-field input::placeholder,
.form-field textarea::placeholder{ color:var(--c-muted); }
.form-field input:focus,
.form-field textarea:focus{ outline:none; border-color:var(--c-primary); box-shadow:var(--sh-focus); }

.form-consent{ display:flex; gap:var(--sp-2); align-items:flex-start; margin:var(--sp-4) 0; }
.form-consent input{ width:18px; height:18px; margin-top:2px; flex:0 0 auto; accent-color:var(--c-primary); }
.form-consent label{ font-size:13px; line-height:1.5; color:var(--c-ink-soft); }
.form-consent a{ color:var(--c-primary); }

.form .btn{ width:100%; }
/* Formular sitzt auf weißer Karte: Button grün, nicht die „auf-dunkel"-Variante */
.form .btn--primary{ background:var(--c-primary); color:#fff; }
.form .btn--primary:hover{ background:var(--c-teal-800); }
/* Solange Pflichtfelder fehlen: zarter Grünton, noch nicht klickbar */
.form .btn--primary:disabled{ background:var(--c-teal-300); color:#fff; opacity:1; }

/* Fehlerzustand: zarter Rotton aus der Design-Vorlage */
.form-field input.is-error,
.form-field textarea.is-error{ border-color:var(--c-accent); background:var(--c-accent-100); }
.form-error{ display:none; margin-top:var(--sp-2); font-size:13px; color:var(--c-accent); }
.form-error.is-visible{ display:block; }

/* Honeypot: für Menschen unsichtbar, nur Bots füllen es aus (bewusst unauffälliger Klassenname) */
.form-extra{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Hinweis, falls JavaScript ausgeschaltet ist (ohne JS greift der Spam-Schutz nicht) */
.form-noscript{ margin:0 0 var(--sp-3); font-size:13px; line-height:1.5; color:var(--c-ink-soft); }
.form-noscript a{ color:var(--c-primary); }

/* Schmale helle Trennung zwischen dunklem Kontakt-Bereich und dunklem Footer */
.divider-light{ height:var(--sp-6); background:var(--c-surface-alt); }

/* ============================================================
   FOOTER — Aufbau wie auf der bisherigen Seite:
   Teal-Band mit Rechtslinks links und Kontakt-Icons rechts,
   darunter mittig die Copyright-Zeile auf Weiß.
   ============================================================ */
.footer__band{ background:var(--c-primary); color:var(--c-teal-100); padding:var(--sp-6) 0; }
.footer__row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--sp-4);
}
.footer__legal{ display:flex; flex-direction:column; gap:2px; font-size:var(--fs-small); }
.footer__legal a{ color:var(--c-teal-100); text-decoration:underline; text-underline-offset:3px; }
.footer__legal a:hover{ color:#fff; }
/* Rechtlicher Hinweis (nur Unternehmer, § 14 BGB) als dezente Fußnote über volle Breite */
.footer__note{ margin-top:var(--sp-5); padding-top:var(--sp-4); border-top:1px solid rgba(149,168,176,.2); font-size:var(--fs-small); line-height:1.6; color:rgba(214,232,232,.72); }
.footer__note--tight{ margin-top:var(--sp-3); padding-top:0; border-top:none; }
.footer__social{ display:flex; gap:var(--sp-3); }
.footer__social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:var(--r-pill);
  background:#fff; color:var(--c-primary);
  transition:background var(--dur) var(--ease);
}
.footer__social a:hover{ background:var(--c-teal-100); }
.footer__social svg{ width:18px; height:18px; fill:currentColor; }
.footer__copy{
  text-align:center; padding:var(--sp-4) 0;
  font-size:var(--fs-small); line-height:var(--lh-small); color:var(--c-muted);
}

/* ============================================================
   ANIMATIONEN (dezent, ohne externe Bibliothek, reduced-motion-freundlich)
   ============================================================ */
/* 1) Sektionen faden beim Scrollen einmalig ein. Der Unsichtbar-Zustand greift nur,
   wenn per JS die Klasse .anim gesetzt ist – ohne JS bleibt alles sichtbar. */
.anim .reveal{ opacity:0; transform:translateY(30px); }
.anim .reveal.is-visible{ opacity:1; transform:none; transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:var(--rd, 0ms); }
/* Kästen kommen ab Tablet von rechts herein (auf dem Handy weiter von unten) */
@media (min-width:768px){ .anim .reveal--x{ transform:translateX(44px); } }
/* Kästen einer Reihe leicht versetzt („gestaffelt") einfaden */
.anim .grid .card:nth-child(2).is-visible{ transition-delay:.12s; }
.anim .grid .card:nth-child(3).is-visible{ transition-delay:.24s; }

/* 2) Zurück-nach-oben-Button (wird per JS erzeugt) */
.to-top{
  position:fixed; right:24px; bottom:24px; z-index:60;
  width:48px; height:48px; border-radius:var(--r-pill);
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--c-primary); color:#fff; border:0; cursor:pointer;
  box-shadow:var(--sh-lg);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur), background var(--dur) var(--ease);
}
.to-top.is-visible{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ background:var(--c-teal-800); }
.to-top svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; }

/* 3) Glanz-Sweep über dem Haupt-Button – nur Desktop-Hover, nur wenn Bewegung erlaubt */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .btn--primary, .mobilemenu__cta .btn{ position:relative; overflow:hidden; }
  .btn--primary::after, .mobilemenu__cta .btn::after{
    content:""; position:absolute; top:0; left:-75%; width:50%; height:100%;
    transform:skewX(-20deg); pointer-events:none;
  }
  .btn--primary::after{ background:linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent); }
  .mobilemenu__cta .btn::after{ background:linear-gradient(120deg, transparent, rgba(0,84,84,.18), transparent); }
  .btn--primary:hover::after, .mobilemenu__cta .btn:hover::after{ animation:btn-shine .8s var(--ease); }
  @keyframes btn-shine{ from{ left:-75%; } to{ left:130%; } }
}

/* Reduced-Motion: kein sanftes Scrollen */
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }