/* HH-SCHRIFTEN-ANFANG */
/* ==========================================================================
   Schriften – ausgeliefert vom eigenen Server
   --------------------------------------------------------------------------
   Die Dateien liegen unter /schriften/ und werden NICHT von Google Fonts
   geladen. Eine Einbindung ueber fonts.googleapis.com wuerde bei jedem
   Seitenaufruf die IP-Adresse des Besuchers an einen Dritten uebertragen
   (LG Muenchen I, 20.01.2022, Az. 3 O 17493/20). In einer Anwendung mit
   Mandantendaten kommt das nicht in Betracht.

   Das ganze Produkt spricht nur ueber zwei Namen: HH Sans und HH Mono.
   Welche Schrift dahintersteckt, steht ausschliesslich in diesem Block.
   Ein Wechsel ist deshalb eine Aenderung an genau einer Stelle.

   Aktuell: IBM Plex Sans + IBM Plex Mono
   ========================================================================== */
@font-face{font-family:"HH Sans";font-style:normal;font-weight:100 700;font-display:swap;src:url(/schriften/plex-sans-latin.woff2) format("woff2")}
@font-face{font-family:"HH Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/schriften/plex-mono-400-latin.woff2) format("woff2")}
@font-face{font-family:"HH Mono";font-style:normal;font-weight:600;font-display:swap;src:url(/schriften/plex-mono-600-latin.woff2) format("woff2")}
/* HH-SCHRIFTEN-ENDE */

/* ==========================================================================
   Reiseheld24 – Gestaltungssystem
   --------------------------------------------------------------------------
   Diese Datei war ueber acht angehaengte Schichten gewachsen; spaetere
   Bloecke haben frueherer widersprochen (.hero stand viermal, .faq h2
   dreimal). Sie ist deshalb einmal zusammengefasst worden: ein Block je
   Bauteil, Farben ausschliesslich ueber Tokens.

   Zwei Regeln tragen das Ganze:

   1. KEIN TEXT UNTER 15 PIXELN. Der Bestand arbeitete mit 10 bis 13 Pixeln.
      Das ist der Hauptgrund, warum die Seite technisch statt menschlich
      wirkte – und auf dem Telefon schlicht schwer zu lesen war.
   2. RAHMEN STATT SCHATTEN. Ein Schatten nur dort, wo ein Element wirklich
      ueber der Flaeche liegt (Hero-Karte, aufgeklapptes Menue).
   ========================================================================== */

:root{
  /* --- Marke ------------------------------------------------------------
     Navy ist die Institutionsfarbe und traegt die primaeren Handlungs-
     aufrufe; Gruen ist der Akzent. Der Akzent existiert in zwei Werten:
     ein dunkleres Gruen, das als Text auf Weiss AA erreicht, und ein
     helleres fuer Flaechen und Grafik. */
  --color-primary:#14294a; --color-primary-dark:#0e1e38; --color-primary-light:#234b71;
  --color-accent:#3fa65c; --color-accent-dark:#2e8049; --color-accent-soft:#eef7f1;

  /* --- Flaechen ---------------------------------------------------------
     Warm statt kuehl. Das ist die einzige inhaltliche Farbaenderung des
     Redesigns: Sie nimmt dem Layout den Blaustich, ohne die Marke
     anzutasten. */
  --color-background:#fbfaf7;   /* Seitengrund */
  --color-surface:#ffffff;      /* Karten */
  --color-surface-2:#f2efe9;    /* ruhige Sektionsflaeche */
  --color-text:#14202e; --color-text-muted:#5b6976;
  --color-border:#e6ebee; --color-border-soft:#eef2f5;

  /* --- Signalfarben ----------------------------------------------------- */
  --color-success:#2e8049; --color-warning:#b7791f; --color-error:#c0392b;
  --color-error-soft:#fcf0ec; --color-error-border:#f0cfc7; --color-error-text:#b3402e;
  --color-info:#3a4ea3; --color-info-soft:#eaedfb; --color-info-border:#d9def7;

  /* --- Legacy-Aliase ----------------------------------------------------
     Bestehende Regeln und das Portal benennen diese Namen. Sie zeigen auf
     das neue System, dadurch rekoloriert sich das Produkt geschlossen. */
  --papier:var(--color-background); --flaeche:var(--color-surface); --flaeche-2:var(--color-surface-2);
  --bg:var(--color-background); --white:#fff;
  --ink:var(--color-text); --tinte-2:#33404d; --muted:var(--color-text-muted);
  --line:var(--color-border); --linie-fein:var(--color-border-soft);
  --navy:var(--color-primary); --navy2:var(--color-primary-light);
  --akzent:var(--color-accent-dark); --akzent-hell:var(--color-accent);
  --blue:var(--color-accent-dark);
  --green:var(--color-success); --greenbg:var(--color-accent-soft);
  --warnung:var(--color-warning); --stop:var(--color-error);

  /* --- Form -------------------------------------------------------------
     Karten sind runder als zuvor (4px wirkte technisch), aber nicht
     verspielt. */
  --radius:10px; --radius-gross:16px; --radius-klein:8px;
  --shadow:0 1px 2px rgba(20,32,46,.06);
  --shadow-schwebend:0 18px 44px -22px rgba(20,41,74,.34),0 2px 8px rgba(20,41,74,.06);

  /* --- Masse ------------------------------------------------------------ */
  --breite:1320px; --breite-schmal:1080px; --breite-text:780px;
  --rand:32px; --kopfhoehe:77px;

  /* --- Schriftfamilien --------------------------------------------------
     Welche Dateien hinter "HH Sans" und "HH Mono" stecken, steht oben im
     Schriftenblock – dort und nur dort wird gewechselt. */
  --schrift-oberflaeche:"HH Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --schrift-auszeichnung:var(--schrift-oberflaeche);
  --schrift-daten:"HH Mono",ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
}

/* ==========================================================================
   Grundlagen
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--schrift-oberflaeche);
  font-optical-sizing:auto;
  font-size:17px;line-height:1.6;
  color:var(--color-text);
  background:var(--color-background);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{/* HH-UEBERSCHRIFT */font-family:var(--schrift-auszeichnung);font-weight:600;letter-spacing:-.011em;text-wrap:balance}
h2{font-size:clamp(32px,3.4vw,46px);line-height:1.08;letter-spacing:-.022em;margin:0 0 18px}
h3{font-size:21px;line-height:1.25;margin:0 0 10px}
p{margin:0 0 16px}
img{max-width:100%;height:auto}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
input[type=checkbox],input[type=radio],progress{accent-color:var(--color-primary)}
a{color:var(--color-primary)}
a:hover{color:var(--color-accent-dark)}

/* Sichtbarer Fokusrahmen – wichtig fuer die Bedienung nur mit Tastatur. */
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,summary:focus-visible,.choice:focus-visible{
  outline:2px solid var(--color-accent-dark);outline-offset:2px;border-radius:3px;
}

/* Sprungmarke zum Inhalt, fuer Screenreader und Tastaturbedienung. */
.skip-to-content{
  position:absolute;left:-9999px;top:8px;z-index:200;
  background:var(--color-primary);color:#fff;padding:12px 20px;border-radius:var(--radius-klein);
  font-weight:600;font-size:16px;text-decoration:none;
}
.skip-to-content:focus{left:8px}

@media(prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;scroll-behavior:auto !important}
}

/* ==========================================================================
   Servicezeile und Kopfzeile
   ========================================================================== */
.servicebar{background:var(--color-primary);color:#c9d6e4;font-size:15px}
.servicebar-inner{
  max-width:var(--breite);margin:auto;padding:9px var(--rand);
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.servicebar a{color:#c9d6e4;text-decoration:none}
.servicebar a:hover{color:#fff}
.servicebar strong{color:#fff;font-weight:600}
.servicebar-rechts{display:flex;align-items:center;gap:22px;flex-wrap:wrap}

/* Die Kopfzeile klebt oben und ist undurchsichtig – sonst schimmert der
   Inhalt beim Scrollen durch, was besonders auf dem Telefon unruhig wirkt.
   Das weisse Band laeuft ueber die volle Breite, der Inhalt darin ist auf
   die Seitenbreite zentriert. */
.nav{
  position:sticky;top:0;z-index:40;
  background:var(--color-surface);border-bottom:1px solid var(--color-border);
}
.nav-inner{
  min-height:76px;
  display:flex;align-items:center;justify-content:space-between;gap:26px;
  max-width:var(--breite);margin:auto;padding:14px var(--rand);
}

.brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:22px;letter-spacing:-.03em;color:var(--color-primary);text-decoration:none}
.logo{width:38px;height:38px;flex:0 0 auto}
.brand-word{color:var(--color-primary)}
.brand-24{color:var(--color-accent)}

.navlinks{display:flex;gap:28px;align-items:center}
.navlinks a,.nav-help{
  text-decoration:none;color:#3f454e;font-size:16px;font-weight:600;white-space:nowrap;
  transition:color .16s;
}
.navlinks a:hover,.nav-help:hover{color:var(--color-accent-dark)}
.navlinks a.active,.navlinks a[aria-current=page]{color:var(--color-accent-dark)}

.navright{display:flex;align-items:center;gap:18px;font-size:16px;font-weight:600}

/* Den Verweis auf den Kundenbereich traegt die Servicezeile. site.js legt
   zusaetzlich einen in der Kopfzeile an – der wird hier ausgeblendet, sonst
   stuende er zweimal nebeneinander. Fuer das mobile Menue baut site.js eine
   eigene Schaltflaeche; die bleibt davon unberuehrt. */
.nav-portal{display:none}

/* Erste-Hilfe-Pille. Rot, weil sie den Notfall meint – nicht als Zierde. */
.help-pill{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--color-error-soft);color:var(--color-error-text);
  border:1px solid var(--color-error-border);border-radius:999px;
  padding:8px 14px 8px 9px;font-size:15px;font-weight:600;
  text-decoration:none;white-space:nowrap;transition:background .16s;
}
.help-pill:hover{background:#f9e4dd;color:var(--color-error-text)}
.help-pill .ring{
  width:20px;height:20px;border-radius:50%;background:#fff;
  border:1px solid var(--color-error-border);color:var(--color-error);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;flex:0 0 auto;
}

/* ==========================================================================
   Schaltflaechen und Textlinks
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  border:1px solid var(--color-primary);border-radius:var(--radius-klein);
  padding:14px 22px;
  background:var(--color-primary);color:#fff;
  font-weight:600;font-size:16px;letter-spacing:.005em;
  text-decoration:none;
  transition:background .15s,border-color .15s;
}
.btn:hover{background:var(--color-primary-light);border-color:var(--color-primary-light);color:#fff}
.nav .btn{white-space:nowrap}
.btn .arrow{font-size:20px;line-height:0}
.btn-light{background:var(--color-surface);color:var(--color-primary);border-color:var(--color-border)}
.btn-light:hover{background:var(--color-surface-2);border-color:var(--color-primary-light);color:var(--color-primary)}
.btn-white{background:#fff;color:var(--color-primary);border-color:#fff}
.btn-white:hover{background:#eef2f5;border-color:#eef2f5;color:var(--color-primary)}
.btn-gruen{background:var(--color-accent-dark);border-color:var(--color-accent-dark)}
.btn-gruen:hover{background:#26683b;border-color:#26683b}
.btn-help{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--color-error);color:#fff;text-decoration:none;
  border:1px solid var(--color-error);border-radius:var(--radius-klein);
  padding:12px 17px;font-size:16px;font-weight:600;white-space:nowrap;
}
.btn-help:hover{background:#a5301f;border-color:#a5301f;color:#fff}
.btn,.btn-help,.btn-light,.btn-white{text-decoration:none}

.text-link,.step-link,.dark-link,.proof-link,.example-link,.card-link{
  color:var(--color-primary);font-weight:600;font-size:16px;text-decoration:none;
}
.text-link:hover,.step-link:hover,.dark-link:hover,.proof-link:hover,
.example-link:hover,.card-link:hover{color:var(--color-accent-dark)}
.text-link span{margin-left:7px;color:var(--color-accent-dark)}

.eyebrow{
  font-family:var(--schrift-daten);font-size:15px;letter-spacing:.13em;font-weight:500;
  color:var(--color-accent-dark);text-transform:uppercase;margin-bottom:16px;
}
.eyebrow.light{color:#8fd3a5}
.section-lead{max-width:680px;color:var(--color-text-muted);font-size:18px;line-height:1.7;margin:0 auto 44px}

/* ==========================================================================
   Startseite – Hero
   ========================================================================== */
.hero{
  position:relative;background:var(--color-primary);
  min-height:0;max-width:none;margin:0;padding:0;
}
.hero-bild{position:absolute;inset:0;overflow:hidden}
.hero-bild img{width:100%;height:100%;object-fit:cover;display:block}
/* Der Verlauf macht die Schrift links lesbar und laesst das Foto rechts
   stehen. Ohne ihn ist weisser Text auf einem Foto Gluecksache. */
.hero-schleier{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(94deg,rgba(15,31,56,.94) 0%,rgba(15,31,56,.84) 42%,rgba(15,31,56,.42) 100%);
}
.hero-inner{
  position:relative;z-index:3;
  max-width:var(--breite);margin:auto;padding:64px var(--rand) 58px;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center;
}
.hero h1{
  font-weight:600;font-size:clamp(38px,4.4vw,60px);line-height:1.05;letter-spacing:-.025em;
  color:#fff;margin:0 0 22px;max-width:640px;text-wrap:pretty;
}
.hero-lead{font-size:20px;line-height:1.6;color:#d3dde8;max-width:560px;margin:0 0 26px}
.hero .eyebrow{color:#8fd3a5}
.hero-zusagen{display:flex;flex-direction:column;gap:12px;margin-bottom:28px}
.hero-zusage{display:flex;align-items:flex-start;gap:12px;color:#e6edf4;font-size:17px;line-height:1.5}
.hero-zusage .check{
  width:22px;height:22px;border-radius:50%;background:var(--color-accent-dark);color:#fff;
  border:0;display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;flex:0 0 auto;margin-top:2px;
}
/* Hinweis fuer Reisende, die noch vor Ort sind – die eiligste Gruppe. */
.hero-sofort{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:rgba(192,57,43,.16);border:1px solid rgba(240,207,199,.4);
  border-radius:var(--radius);padding:13px 16px;font-size:16px;color:#f4dcd6;
}
.hero-sofort strong{color:#fff;font-weight:600}
.hero-sofort a{color:#ffd9d0;font-weight:600;text-decoration:none;white-space:nowrap}
.hero-sofort a:hover{color:#fff}

/* Das Startformular. Der einzige Ort auf der Seite, an dem ein Schatten
   richtig ist: Die Karte liegt tatsaechlich ueber dem Foto. */
.hero-formular{
  background:var(--color-surface);border-radius:var(--radius-gross);
  padding:28px 28px 24px;box-shadow:var(--shadow-schwebend);
}
.hero-formular h2{font-size:26px;line-height:1.2;margin:0 0 8px}
.hero-formular > p{font-size:16px;color:var(--color-text-muted);margin:0 0 20px}
.hero-formular label{display:block;font-size:15px;font-weight:600;margin-bottom:7px;color:var(--color-text)}
.hero-formular input{
  width:100%;padding:14px 15px;border:1px solid #d9e0e5;border-radius:var(--radius-klein);
  font-size:16px;color:var(--color-text);background:#fff;
}
.hero-formular input:focus{border-color:var(--color-accent);box-shadow:0 0 0 4px var(--color-accent-soft);outline:none}
.hero-feld{margin-bottom:18px}
.hero-feld-paar{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.hero-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.hero-chip{
  border:1px solid #d9e0e5;background:#fff;border-radius:999px;
  padding:9px 15px;font-size:15px;font-weight:600;color:#3f454e;
  transition:border-color .15s,background .15s,color .15s;
}
.hero-chip:hover{border-color:var(--color-accent);color:var(--color-accent-dark)}
.hero-chip[aria-pressed=true]{background:var(--color-accent-soft);border-color:var(--color-accent-dark);color:var(--color-accent-dark)}
.hero-formular .btn{width:100%}
.hero-zusatz{
  display:flex;align-items:center;gap:11px;margin-top:16px;
  font-size:15px;line-height:1.45;color:var(--color-text-muted);
}
.hero-zusatz .dot{
  width:30px;height:30px;border-radius:50%;background:var(--color-accent-soft);
  color:var(--color-accent-dark);display:inline-flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;flex:0 0 auto;
}

/* ==========================================================================
   Startseite – vier Kurzargumente
   ========================================================================== */
.trust{background:var(--color-surface);border-bottom:1px solid var(--color-border)}
.trustbar{
  max-width:var(--breite);margin:auto;padding:26px var(--rand);
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
  border:0;border-radius:0;box-shadow:none;
}
.trustitem{display:flex;align-items:center;gap:14px;position:relative}
.trustitem:not(:last-child)::after{
  content:"";position:absolute;right:-11px;top:6px;bottom:6px;
  width:1px;background:var(--color-border);
}
.trusticon{
  width:44px;height:44px;border-radius:50%;flex:0 0 auto;
  background:var(--color-accent-soft);color:var(--color-accent-dark);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;
}
.trustitem strong{display:block;font-size:17px;line-height:1.3}
.trustitem span{display:block;color:var(--color-text-muted);font-size:15px;margin-top:3px;line-height:1.4}

/* ==========================================================================
   Allgemeiner Abschnittsrahmen
   ========================================================================== */
.sektion{max-width:var(--breite);margin:auto;padding:76px var(--rand)}

/* Flaechenfarbe fuer Abschnitte, die selbst eine Hoechstbreite haben.
   Ohne den Schatten reichte die Flaeche nur bis zur Spaltenbreite und der
   Abschnitt saehe aus wie eine Karte. Der Schatten zieht dieselbe Farbe bis
   zum Bildschirmrand; clip-path schneidet ihn oben und unten ab, damit er
   nicht in die Nachbarabschnitte laeuft. */
.sektion-ruhig,.sektion-weiss{box-shadow:0 0 0 100vmax var(--flaeche-abschnitt);clip-path:inset(0 -100vmax)}
.sektion-ruhig{--flaeche-abschnitt:var(--color-surface-2);background:var(--color-surface-2)}
.sektion-weiss{--flaeche-abschnitt:var(--color-surface);background:var(--color-surface)}
.sektion-kopf{
  display:flex;align-items:flex-end;justify-content:space-between;gap:40px;
  flex-wrap:wrap;margin-bottom:38px;
}
.sektion-kopf h2{margin:0}
.sektion-kopf p{max-width:430px;margin:0;color:var(--color-text-muted);font-size:17px;line-height:1.7}
.sektion-kopf .eyebrow{margin-bottom:12px}

/* ==========================================================================
   Startseite – Reisemangel-Kategorien
   ========================================================================== */
.mangel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.mangel-karte{
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-gross);overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .15s;
}
.mangel-karte:hover{border-color:var(--color-accent)}
.mangel-bild{height:190px;overflow:hidden;background:var(--color-surface-2)}
.mangel-bild img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.mangel-karte:hover .mangel-bild img{transform:scale(1.035)}
.mangel-text{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.mangel-text h3{font-size:22px;margin:0 0 10px}
.mangel-text p{font-size:17px;line-height:1.6;color:var(--color-text-muted);margin:0 0 16px}
.mangel-hinweis{
  margin-top:auto;padding-top:15px;border-top:1px solid var(--color-border);
  font-size:15px;line-height:1.55;color:var(--color-text-muted);
}
.mangel-weitere{
  display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:28px;
  padding-top:24px;border-top:1px solid var(--color-border);
}

/* ==========================================================================
   Startseite – Ablauf in drei Schritten
   ========================================================================== */
.steps{max-width:var(--breite);margin:auto;padding:76px var(--rand);text-align:center}
.steps h2{margin:0 0 14px}
.steps .eyebrow{margin-bottom:12px}
.stepgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;text-align:left}
.step{position:relative;display:flex;flex-direction:column}
.step-bild{
  height:180px;border-radius:var(--radius-gross);overflow:hidden;
  background:var(--color-surface-2);margin-bottom:20px;
}
.step-bild img{width:100%;height:100%;object-fit:cover;display:block}
.num{
  width:40px;height:40px;border-radius:50%;
  background:var(--color-accent-soft);color:var(--color-accent-dark);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:16px;margin-bottom:16px;
}
.stepicon{height:44px;color:var(--color-primary);font-size:30px;margin-bottom:16px}
.step h3{font-size:22px;margin:0 0 10px}
.step p{font-size:17px;line-height:1.65;color:var(--color-text-muted);margin:0;max-width:none}

/* ==========================================================================
   Startseite – Beispieltabelle (Navy)
   ========================================================================== */
.example-section{background:var(--color-primary);color:#fff;padding:76px var(--rand)}
.example-inner{max-width:var(--breite-schmal);margin:auto}
.example-inner h2{color:#fff}
.example-inner > p{color:#c3d0dc;font-size:17px;line-height:1.7;max-width:660px}
.example-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-bottom:34px}
.example-story{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-gross);padding:26px 28px;
}
.example-card{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-gross);padding:24px 26px;
}
.example-card h3{color:#fff;font-size:20px}
.example-card p{color:#c3d0dc;font-size:16px;line-height:1.65;margin:0}
.example-result{display:grid;gap:2px;margin-top:8px}
.result-line{
  display:flex;justify-content:space-between;gap:20px;
  padding:13px 0;border-bottom:1px solid rgba(255,255,255,.12);
  font-size:17px;color:#dbe4ee;
}
.result-line span:last-child{font-family:var(--schrift-daten);color:#fff;white-space:nowrap}
.result-total{
  display:flex;justify-content:space-between;gap:20px;
  padding:16px 0 0;font-size:19px;font-weight:600;color:#fff;
}
.result-total span:last-child{font-family:var(--schrift-daten);color:#8fd3a5}
.result-note{margin-top:16px;font-size:15px;line-height:1.6;color:#9fb2c6}

/* ==========================================================================
   Startseite – Zusagen
   ========================================================================== */
.why-section{padding:76px var(--rand);background:var(--color-surface)}
.why-inner{max-width:var(--breite-schmal);margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.why-main h2{margin:0 0 18px}
.why-main p{font-size:17px;line-height:1.75;color:var(--color-text-muted)}
.why-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.why-list li{
  display:flex;gap:16px;align-items:flex-start;
  padding:18px 0;border-bottom:1px solid var(--color-border);
}
.why-list li:first-child{padding-top:0}
.why-list b{
  font-family:var(--schrift-daten);font-size:15px;font-weight:600;
  color:var(--color-accent-dark);flex:0 0 auto;padding-top:2px;
}
.why-list strong{display:block;font-size:17px;margin-bottom:4px}
.why-list span{font-size:16px;line-height:1.6;color:var(--color-text-muted)}
.why-side{align-self:start}

/* ==========================================================================
   Startseite – Menschen dahinter
   ========================================================================== */
.team-section{background:var(--color-surface-2);padding:76px var(--rand)}
.team-inner{max-width:var(--breite-schmal);margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.team-copy h2{margin:0 0 18px}
.team-copy p{font-size:17px;line-height:1.75;color:var(--color-text-muted)}
.team-zahlen{display:flex;gap:40px;margin:26px 0 24px;flex-wrap:wrap}
.team-zahl strong{display:block;font-size:40px;line-height:1;letter-spacing:-.02em;color:var(--color-primary)}
.team-zahl span{display:block;font-size:16px;color:var(--color-text-muted);margin-top:7px}
.team-rollen{display:grid;gap:14px}
.team-rolle{
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-gross);padding:22px 24px;
}
.team-rolle strong{display:block;font-size:18px;margin-bottom:6px}
.team-rolle span{font-size:16px;line-height:1.6;color:var(--color-text-muted)}

/* ==========================================================================
   Verguetung
   ========================================================================== */
.pricing-section{padding:76px var(--rand);background:var(--color-surface)}
.pricing-inner{max-width:var(--breite-schmal);margin:auto;display:grid;grid-template-columns:1fr 420px;gap:64px;align-items:center}
.pricing-copy h2{margin:0 0 20px}
.pricing-copy h2 span{color:var(--color-accent-dark)}
.pricing-lead{font-size:19px;line-height:1.65;color:var(--color-text);max-width:640px}
.pricing-copy>p:not(.pricing-lead){font-size:17px;line-height:1.7;color:var(--color-text-muted);max-width:640px}
.pricing-card{
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-gross);padding:28px 29px;
}
.sektion-weiss .pricing-card,.pricing-section .pricing-card{background:var(--color-background)}
.pricing-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.pricing-label{font-family:var(--schrift-daten);font-size:15px;text-transform:uppercase;letter-spacing:.11em;font-weight:600;color:var(--color-text-muted)}
.pricing-success{font-size:15px;font-weight:600;color:var(--color-accent-dark);background:var(--color-accent-soft);padding:6px 11px;border-radius:999px}
.pricing-number{font-size:72px;line-height:.95;font-weight:700;letter-spacing:-.02em;color:var(--color-primary);margin-top:22px}
.pricing-number span{font-size:32px;vertical-align:14px;margin-left:3px}
.pricing-caption{font-size:16px;color:var(--color-text-muted);margin-top:10px}
.pricing-divider{height:1px;background:var(--color-border);margin:24px 0 18px}
.pricing-row{display:flex;gap:12px;align-items:flex-start;margin:15px 0}
.pricing-dot{
  width:22px;height:22px;border-radius:50%;background:var(--color-accent-soft);color:var(--color-accent-dark);
  display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:0 0 auto;margin-top:1px;
}
.pricing-row strong{display:block;font-size:17px;color:var(--color-text)}
.pricing-row small{display:block;font-size:15px;line-height:1.55;color:var(--color-text-muted);margin-top:3px}

/* ==========================================================================
   Magazin-Anriss auf der Startseite
   ========================================================================== */
.home-proof{max-width:var(--breite);margin:auto;padding:76px var(--rand)}
.home-proof-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:34px}
.home-proof-head h2{margin:0}
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.proof-card{
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-gross);padding:26px;
  display:flex;flex-direction:column;transition:border-color .15s;
}
.proof-card:hover{border-color:var(--color-accent)}
.proof-card .blog-tag{margin-bottom:12px}
.proof-card h3{font-size:20px;line-height:1.25;margin:0 0 10px}
.proof-card p{font-size:16px;line-height:1.65;color:var(--color-text-muted);margin:0 0 18px}
.proof-link{margin-top:auto}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{max-width:var(--breite-schmal);margin:auto;padding:76px var(--rand)}
.faq h2{margin:0 0 30px}
.faqgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.faq details{
  border:1px solid var(--color-border);border-radius:var(--radius);
  padding:20px 22px;background:var(--color-surface);
}
.faq summary{cursor:pointer;font-weight:600;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--color-text-muted);font-size:22px;line-height:1;flex:0 0 auto}
.faq details[open] summary:after{content:"\2013"}
.faq p{color:var(--color-text-muted);font-size:16px;line-height:1.7;margin:14px 0 0}
.faq-kontakt{
  background:var(--color-accent-soft);border:1px solid #d4e8db;
  border-radius:var(--radius-gross);padding:26px;
}
.faq-kontakt h3{font-size:20px;margin:0 0 10px}
.faq-kontakt p{font-size:16px;line-height:1.65;color:#3d5c48;margin:0 0 18px}

/* ==========================================================================
   Soforthilfe-Band und Hinweisleiste
   ========================================================================== */
.help-strip{max-width:var(--breite);margin:0 auto;padding:0 var(--rand) 28px}
.help-strip-inner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  background:var(--color-error-soft);border:1px solid var(--color-error-border);
  border-radius:var(--radius-gross);padding:18px 22px;
}
.help-strip-copy strong{display:block;color:#87382d;font-size:17px;margin-bottom:4px}
.help-strip-copy span{font-size:16px;color:#8a635e;line-height:1.55}
.help-strip .mini-ring{
  width:18px;height:18px;border:2px solid rgba(255,255,255,.9);border-radius:50%;flex:0 0 auto;
}

.sofort-band{background:var(--color-error);color:#fff;padding:40px var(--rand)}
.sofort-inner{
  max-width:var(--breite-schmal);margin:auto;
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
}
.sofort-inner h2{color:#fff;font-size:clamp(25px,2.4vw,33px);margin:0 0 8px}
.sofort-inner p{color:#fbe3de;font-size:17px;line-height:1.6;margin:0;max-width:640px}

/* ==========================================================================
   Abschluss-CTA und Fusszeile
   ========================================================================== */
.cta-strip{background:var(--color-primary);color:#fff;padding:72px var(--rand)}
.cta-inner{max-width:900px;margin:auto;text-align:center}
.cta-inner h2{color:#fff;margin:0 0 16px}
.cta-inner p{color:#c3d0dc;line-height:1.7;max-width:680px;margin:0 auto 28px;font-size:18px}
.cta-inner .eyebrow{color:#8fd3a5}
.final-cta .eyebrow{color:#8fd3a5}

.footer{border-top:1px solid var(--color-border);background:var(--color-surface);padding:56px var(--rand) 40px;color:var(--color-text-muted);font-size:16px;text-align:left}
.footer-grid{max-width:var(--breite);margin:0 auto 36px;display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:36px}
.footer-spalte h3{font-size:16px;font-weight:600;color:var(--color-primary);margin:0 0 14px}
.footer-spalte a{display:block;padding:6px 0;color:var(--color-text-muted);text-decoration:none;font-size:16px}
.footer-spalte a:hover{color:var(--color-accent-dark)}
.footer-brand{max-width:var(--breite);margin:0 auto 14px;font-weight:700;font-size:20px;color:var(--color-primary)}
.footer-intro{font-size:16px;line-height:1.65;color:var(--color-text-muted);max-width:290px;margin:0}
.footer-links{max-width:var(--breite);margin:auto;display:flex;gap:22px;flex-wrap:wrap}
.footer-links a{color:var(--color-text-muted);text-decoration:none;font-size:16px}
.footer-links a:hover{color:var(--color-accent-dark)}
.footer-note{max-width:var(--breite);margin:24px auto 0;padding-top:22px;border-top:1px solid var(--color-border);color:var(--color-text-muted);font-size:15px;line-height:1.6}

/* ==========================================================================
   Mobiles Menue
   --------------------------------------------------------------------------
   Unter 1100 px passen Marke, Menuepunkte und zwei Schaltflaechen nicht
   mehr nebeneinander. Das Menue klappt deshalb dort zusammen – dort, wo es
   tatsaechlich nicht mehr passt, nicht erst auf Telefonbreite.
   ========================================================================== */
.nav-burger{
  display:none;align-items:center;justify-content:center;
  width:46px;height:46px;padding:0;flex:0 0 auto;
  border:1px solid var(--color-border);border-radius:var(--radius-klein);
  background:#fff;color:var(--color-primary);
  transition:border-color .16s,background .16s;
}
.nav-burger:hover{border-color:#d7dde2;background:var(--color-surface-2)}
.nav-burger svg{width:22px;height:22px}
.nav-burger.is-open{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}

/* Beginnt UNTER der Kopfzeile, damit die Schaltflaeche zum Schliessen
   sichtbar bleibt. */
.mobile-menu{
  display:none;position:fixed;left:0;right:0;top:var(--kopfhoehe);bottom:0;z-index:90;
  background:#fff;padding:22px;overflow-y:auto;
  animation:menu-in .2s ease;
}
@keyframes menu-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mobile-menu nav{display:flex;flex-direction:column}
.mobile-menu nav a{
  display:block;padding:17px 4px;font-size:19px;font-weight:600;
  letter-spacing:-.02em;color:var(--color-primary);text-decoration:none;
  border-bottom:1px solid var(--color-border);
}
.mobile-menu nav a:active,.mobile-menu nav a[aria-current=page]{color:var(--color-accent-dark)}
.mobile-menu-actions{display:flex;flex-direction:column;gap:12px;margin-top:26px}
.mobile-menu-actions .btn{width:100%;justify-content:center}

/* ==========================================================================
   Unterseiten – Kopf und Inhalt
   ========================================================================== */
.page-hero{max-width:var(--breite);margin:auto;padding:72px var(--rand) 56px}
.page-hero .eyebrow{margin-bottom:14px}
.page-hero h1{font-size:clamp(36px,4.2vw,58px);letter-spacing:-.024em;line-height:1.05;margin:0 0 20px;max-width:860px}
.page-hero p{max-width:740px;font-size:19px;line-height:1.7;color:var(--color-text-muted);margin:0}
.page-content{max-width:var(--breite);margin:auto;padding:0 var(--rand) 84px}

.intro-band{background:var(--color-surface-2);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border)}
.intro-inner{max-width:var(--breite-schmal);margin:auto;padding:72px var(--rand);text-align:center}
.intro-inner h2{margin:0 0 20px}
.intro-inner p{max-width:800px;margin:0 auto 16px;color:var(--color-text-muted);font-size:18px;line-height:1.8}

.customer-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:start}
.customer-card{
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-gross);padding:30px;
}
.customer-card h2{font-size:26px;letter-spacing:-.022em;margin:0 0 14px}
.customer-card h3{font-size:19px;margin:0 0 10px}
.customer-card p{font-size:17px;line-height:1.75;color:var(--color-text-muted);margin:0 0 14px}
.customer-card p:last-child{margin-bottom:0}
.customer-card ul{padding-left:20px;color:var(--color-text-muted);font-size:17px;line-height:1.85;margin:0}

.customer-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.customer-step{border-top:2px solid var(--color-border);padding-top:18px}
.customer-step b{display:block;font-family:var(--schrift-daten);font-size:15px;color:var(--color-accent-dark);margin-bottom:10px}
.customer-step h3{font-size:18px;margin:0 0 8px}
.customer-step p{font-size:16px;color:var(--color-text-muted);line-height:1.65;margin:0}

.trust-section{background:var(--color-surface-2);padding:72px var(--rand)}
.trust-inner{max-width:var(--breite);margin:auto}
.trust-inner h2{margin:0 0 14px}
.trust-inner>p{color:var(--color-text-muted);max-width:720px;line-height:1.75;font-size:17px}
.trust-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.trust-col{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-gross);padding:26px}
.trust-col .mini-icon{
  width:42px;height:42px;border-radius:var(--radius-klein);background:var(--color-accent-soft);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px;
  color:var(--color-accent-dark);margin-bottom:16px;
}
.trust-col h3{margin:0 0 9px;font-size:19px}
.trust-col p{margin:0;color:var(--color-text-muted);font-size:16px;line-height:1.7}

.reassurance{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
.reassurance div{background:var(--color-surface-2);border-radius:var(--radius);padding:20px}
.reassurance strong{display:block;font-size:17px;margin-bottom:6px}
.reassurance span{font-size:16px;color:var(--color-text-muted);line-height:1.55}

.case-cta{max-width:var(--breite);margin:0 auto;padding:0 var(--rand) 72px}
.case-cta-card{
  border-radius:var(--radius-gross);padding:34px;
  background:var(--color-surface);border:1px solid var(--color-border);
  display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
}
.case-cta-card h2{font-size:26px;letter-spacing:-.022em;margin:0 0 10px}
.case-cta-card p{font-size:17px;color:var(--color-text-muted);margin:0;line-height:1.65}

.legal-card{
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-gross);padding:34px;
}
.legal-card h2{margin-top:32px;font-size:26px}
.legal-card h2:first-child{margin-top:0}
.legal-card h3{margin-top:26px;font-size:19px}
.legal-card p,.legal-card li{font-size:17px;line-height:1.8;color:var(--color-text-muted)}
.legal-card strong{color:var(--color-text)}

/* Ueber uns */
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.person{padding:28px;border:1px solid var(--color-border);border-radius:var(--radius-gross);background:var(--color-surface)}
.avatar{
  width:56px;height:56px;border-radius:50%;background:var(--color-accent-soft);
  color:var(--color-accent-dark);display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:18px;margin-bottom:18px;
}
.person strong{display:block;font-size:18px;margin-bottom:6px}
.person span{font-size:16px;color:var(--color-text-muted)}
.person p{font-size:16px;line-height:1.65;color:var(--color-text-muted);margin:12px 0 0}

.quote-band{background:var(--color-surface-2);padding:76px var(--rand)}
.quote{max-width:860px;margin:auto;text-align:center}
.quote-mark{font-size:48px;color:var(--color-accent-dark);line-height:1}
.quote blockquote{font-size:clamp(23px,2.4vw,31px);line-height:1.32;letter-spacing:-.024em;margin:10px 0 20px}
.quote cite{font-style:normal;color:var(--color-text-muted);font-size:16px}

/* ==========================================================================
   Notfallhilfe
   ========================================================================== */
.emergency-page{background:var(--color-background)}
.emergency-hero{background:var(--color-error-soft);border-bottom:1px solid var(--color-error-border);padding:68px var(--rand) 56px}
.emergency-hero-inner{max-width:var(--breite);margin:auto}
.emergency-hero h1{font-size:clamp(36px,4.2vw,58px);line-height:1.05;letter-spacing:-.024em;margin:0 0 16px;color:#7e362d}
.emergency-hero p{max-width:780px;font-size:19px;line-height:1.7;color:#7c605c;margin:0}
.emergency-shell{max-width:var(--breite);margin:auto;padding:52px var(--rand) 84px}
.emergency-alert{
  display:flex;gap:16px;align-items:flex-start;
  background:var(--color-surface);border:1px solid var(--color-error-border);
  border-radius:var(--radius-gross);padding:20px 22px;margin-bottom:32px;
}
.emergency-alert .ring-icon{width:34px;height:34px;border:4px solid var(--color-error);border-radius:50%;flex:0 0 auto;position:relative}
.emergency-alert .ring-icon:after{content:"";position:absolute;width:11px;height:11px;border:3px solid var(--color-error);border-radius:50%;top:7px;left:7px}
.emergency-alert strong{display:block;color:#7a241c;font-size:17px;margin-bottom:5px}
.emergency-alert p{margin:0;color:#7a615e;font-size:16px;line-height:1.65}
.emergency-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.emergency-card{border:1px solid var(--color-border);border-radius:var(--radius-gross);padding:25px;background:var(--color-surface)}
.emergency-card .num{
  display:inline-flex;width:34px;height:34px;border-radius:50%;
  align-items:center;justify-content:center;background:var(--color-error-soft);
  color:#b84839;font-weight:700;font-size:15px;margin-bottom:14px;
}
/* Die Schrittkarten tragen historisch ein <h2>. Eine Ueberschrift IN einer
   Karte ist aber keine Abschnittsueberschrift und darf deren Groesse nicht
   erben – sonst sprengt sie die Karte. */
.emergency-card h2,.emergency-card h3{font-size:20px;line-height:1.25;letter-spacing:-.011em;margin:0 0 9px}
.emergency-card p{font-size:16px;line-height:1.7;color:var(--color-text-muted);margin:0}
.emergency-do{display:grid;gap:10px;margin-top:14px;padding:0;list-style:none}
.emergency-do li{display:flex;gap:10px;font-size:16px;line-height:1.6;color:var(--color-text-muted)}
.copy-box{
  background:var(--color-surface-2);border:1px solid var(--color-border);
  border-radius:var(--radius);padding:18px 20px;margin-top:14px;
  font-family:var(--schrift-daten);font-size:15px;line-height:1.7;color:var(--color-text);
}
.help-card-inline{
  background:var(--color-accent-soft);border:1px solid #d4e8db;
  border-radius:var(--radius-gross);padding:26px;margin-top:32px;
}
.help-card-inline h3{font-size:20px;margin:0 0 10px}
.help-card-inline p{font-size:16px;line-height:1.7;color:#3d5c48;margin:0 0 18px}

/* ==========================================================================
   Magazin
   ========================================================================== */
.blog-hero{background:var(--color-surface-2);border-bottom:1px solid var(--color-border);padding:72px var(--rand) 60px}
.blog-hero-inner{max-width:var(--breite);margin:auto}
.blog-hero h1{font-size:clamp(36px,4.2vw,58px);letter-spacing:-.024em;line-height:1.05;margin:0 0 18px}
.blog-hero p{font-size:19px;line-height:1.7;color:var(--color-text-muted);max-width:740px;margin:0}
.blog-grid{max-width:var(--breite);margin:auto;padding:60px var(--rand) 84px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.blog-card{
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-gross);overflow:hidden;transition:border-color .15s;
  display:flex;flex-direction:column;
}
.blog-card:hover{border-color:var(--color-accent)}
.blog-card.featured{grid-column:span 2}
.blog-photo{height:220px;overflow:hidden;position:relative;background:var(--color-surface-2)}
.blog-photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.blog-card:hover .blog-photo img{transform:scale(1.035)}
.blog-card.featured .blog-photo{height:300px}
.blog-copy{padding:24px 25px 26px;display:flex;flex-direction:column;flex:1}
.blog-tag{font-family:var(--schrift-daten);font-size:15px;letter-spacing:.11em;color:var(--color-accent-dark);font-weight:600;text-transform:uppercase}
.blog-copy h2{font-size:22px;letter-spacing:-.022em;line-height:1.2;margin:12px 0 10px;min-height:0}
.blog-copy p{font-size:16px;color:var(--color-text-muted);line-height:1.7;margin:0 0 18px;min-height:0}
.blog-copy a{font-size:16px;font-weight:600;color:var(--color-primary);text-decoration:none;margin-top:auto}
.blog-copy a:hover{color:var(--color-accent-dark)}

.article{max-width:var(--breite-text);margin:auto;padding:68px var(--rand) 90px}
.article h1{font-size:clamp(34px,4vw,54px);line-height:1.06;letter-spacing:-.024em;margin:0 0 18px}
.article .lead{font-size:20px;color:var(--color-text-muted);line-height:1.7;max-width:none}
.article-meta{display:flex;gap:16px;flex-wrap:wrap;color:var(--color-text-muted);font-size:15px;margin:18px 0 30px}
.article h2{font-size:28px;letter-spacing:-.022em;margin:46px 0 14px}
.article h3{font-size:21px;margin:32px 0 10px}
.article p,.article li{font-size:18px;line-height:1.85;color:#3f454e;max-width:none}
.article-note{
  background:var(--color-surface-2);border-left:3px solid var(--color-accent-dark);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:20px 22px;margin:30px 0;color:#3f454e;font-size:17px;line-height:1.7;
}
.article-note strong{color:var(--color-primary)}
.editorial-image{width:100%;height:320px;object-fit:cover;border-radius:var(--radius-gross);margin:28px 0 38px}
.article-source{border-top:1px solid var(--color-border);margin-top:48px;padding-top:24px;font-size:15px;line-height:1.7;color:var(--color-text-muted)}
.article-source a{color:var(--color-accent-dark)}
.article-related{margin-top:48px;background:var(--color-surface-2);border-radius:var(--radius-gross);padding:26px}
.article-related h3{margin:0 0 12px;font-size:19px}
.article-related a{display:block;padding:9px 0;color:var(--color-primary);text-decoration:none;font-size:16px;font-weight:600}
.article-related a:hover{color:var(--color-accent-dark)}

/* ==========================================================================
   Formular „Anspruch pruefen"
   ========================================================================== */
.intake-wrap{background:var(--color-surface-2);min-height:calc(100vh - 80px);padding:48px 20px 80px}
.intake-shell{max-width:880px;margin:auto}
.intake-progress{height:6px;background:var(--color-border);border-radius:3px;overflow:hidden;margin-bottom:32px}
.intake-progress>div{height:100%;background:var(--color-accent-dark);width:25%;transition:width .25s}
.intake-card{
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-gross);padding:38px;
}
.intake-step{display:none}
.intake-step.active{display:block}
.intake-kicker{font-family:var(--schrift-daten);font-size:15px;text-transform:uppercase;letter-spacing:.12em;color:var(--color-accent-dark);font-weight:600}
.intake-card h1{font-size:clamp(28px,3.2vw,38px);line-height:1.12;letter-spacing:-.022em;margin:12px 0 12px}
.intake-card>p{font-size:17px;line-height:1.7;color:var(--color-text-muted)}
.question{margin:28px 0}
.question label{display:block;font-size:16px;font-weight:600;color:var(--color-primary);margin-bottom:9px}
.question input,.question textarea,.question select{
  width:100%;border:1px solid #d6dee3;border-radius:var(--radius-klein);
  padding:14px 15px;font-size:17px;background:#fff;color:var(--color-text);
}
.question input:focus,.question textarea:focus,.question select:focus{
  border-color:var(--color-accent);box-shadow:0 0 0 4px var(--color-accent-soft);outline:none;
}
.question textarea{min-height:140px;resize:vertical}
.question .hinweis{font-size:15px;color:var(--color-text-muted);margin:8px 0 0;line-height:1.55}
/* Zwei Felder nebeneinander (Vor-/Nachname, Reise von/bis, PLZ/Ort).
   Auf schmalen Bildschirmen untereinander – nebeneinander passten sie
   nicht und die Seite liess sich seitlich verschieben. */
.feldpaar{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.feldpaar-plz{grid-template-columns:1fr 2fr}
.feldpaar > div{min-width:0}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.choice,button.choice{
  border:1px solid #d6dee3;border-radius:var(--radius-klein);padding:16px;
  cursor:pointer;font-size:16px;color:var(--color-primary);font-weight:600;
  background:#fff;width:100%;text-align:left;font-family:inherit;
  transition:border-color .15s,background .15s;
}
.choice:hover,button.choice:hover{border-color:var(--color-accent)}
.choice.selected,button.choice.selected{border-color:var(--color-accent-dark);background:var(--color-accent-soft)}
.intake-actions{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:32px}
.back-btn{border:0;background:transparent;color:var(--color-text-muted);font-weight:600;font-size:16px;cursor:pointer;padding:10px 0}
.back-btn:hover{color:var(--color-primary)}
/* Zustimmung zur Verguetungsvereinbarung. Ein Pflichtfeld – es steht
   deshalb in normaler Lesegroesse, nicht im Kleingedruckten. */
.zustimmung{
  display:flex;gap:11px;align-items:flex-start;margin-top:22px;
  font-size:16px;line-height:1.55;
}
.zustimmung input{margin-top:4px;flex:0 0 auto;width:18px;height:18px}
.success-box{
  background:var(--color-accent-soft);border:1px solid #c8ddd0;
  border-radius:var(--radius);padding:22px;color:#245a41;font-size:17px;line-height:1.65;
}
.success-box strong{display:block;margin-bottom:6px}

/* Allgemeine Formularbausteine (Portal-Randseiten, Altbestand) */
.field{margin:22px 0}
.field label{display:block;font-size:16px;font-weight:600;margin-bottom:8px}
.field input,.field textarea,.field select{
  width:100%;padding:14px 15px;border:1px solid #d6dee3;border-radius:var(--radius-klein);
  color:var(--color-text);outline:none;background:#fff;font-size:17px;
}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--color-accent);box-shadow:0 0 0 4px var(--color-accent-soft);
}
.field textarea{min-height:130px;resize:vertical}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.actions{display:flex;justify-content:space-between;gap:12px;margin-top:28px}
.lead{color:var(--color-text-muted);line-height:1.7;font-size:18px}
.small{font-size:15px;color:var(--color-text-muted)}
.back{color:var(--color-accent-dark);font-size:16px;font-weight:600;background:none;border:0;padding:0}
.micro{display:flex;align-items:center;gap:9px;color:var(--color-text-muted);font-size:16px;margin-top:18px}
.check{
  width:20px;height:20px;border:2px solid var(--color-accent-dark);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--color-accent-dark);font-size:11px;font-weight:700;flex:0 0 auto;
}
.pill{display:inline-flex;padding:7px 12px;border-radius:999px;background:var(--color-accent-soft);color:#245a41;font-size:15px;font-weight:600}
.dot{
  width:20px;height:20px;border-radius:50%;background:var(--color-accent-soft);color:var(--color-accent-dark);
  display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex:0 0 auto;
}

/* ==========================================================================
   Hotel-Eingabehilfe (Autocomplete)
   ========================================================================== */
.hh-ac{position:relative}
.hh-ac-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hh-ac-list{
  position:absolute;z-index:60;left:0;right:0;top:calc(100% + 5px);
  margin:0;padding:6px;list-style:none;max-height:290px;overflow-y:auto;
  background:#fff;border:1px solid var(--color-border);border-radius:var(--radius);
  box-shadow:var(--shadow-schwebend);
}
.hh-ac-item{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:var(--radius-klein);cursor:pointer}
.hh-ac-item:hover,.hh-ac-item.active{background:var(--color-accent-soft)}
.hh-ac-item.active{outline:2px solid var(--color-accent-dark);outline-offset:-2px}
.hh-ac-name{font-size:16px;font-weight:600;color:var(--color-primary)}
.hh-ac-location{font-size:15px;color:var(--color-text-muted)}

/* ==========================================================================
   Hilfsmittel
   ========================================================================== */
/* Abschnitte, die sich ueber die volle Breite des Textbereichs ziehen.
   Der Negativ-Abstand muss dem Innenabstand des umgebenden Bereichs
   entsprechen – sonst ragt der Abschnitt ueber den Bildschirmrand hinaus. */
.full-bleed{margin-left:calc(var(--rand) * -1);margin-right:calc(var(--rand) * -1)}
.toast{
  position:fixed;right:22px;bottom:22px;background:var(--color-primary);color:#fff;
  padding:14px 18px;border-radius:var(--radius);box-shadow:var(--shadow-schwebend);
  font-size:16px;opacity:0;transform:translateY(10px);pointer-events:none;transition:.25s;
}
.toast.show{opacity:1;transform:none}
.screen.active{display:block}

/* ==========================================================================
   Schmale Bildschirme
   ========================================================================== */
@media(max-width:1100px){
  .navlinks{display:none}
  .nav-help{display:none}
  .nav-burger{display:inline-flex}
  .mobile-menu:not([hidden]){display:block}
  .navright{gap:12px}
  .navright .btn{padding:13px 17px;gap:10px}
}

@media(max-width:980px){
  :root{--rand:24px}
  .hero-inner{grid-template-columns:1fr;gap:34px;padding:48px var(--rand) 44px}
  .hero-lead{max-width:none}
  .trustbar{grid-template-columns:1fr 1fr;gap:22px 26px}
  .trustitem:nth-child(2n)::after{display:none}
  .mangel-grid,.stepgrid,.proof-grid,.trust-cols,.emergency-grid,.people{grid-template-columns:1fr}
  .why-inner,.team-inner,.pricing-inner,.customer-grid,.example-head{grid-template-columns:1fr;gap:34px}
  .customer-steps{grid-template-columns:1fr 1fr}
  .faqgrid{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:1fr 1fr}
  .blog-card.featured{grid-column:span 2}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
  .reassurance{grid-template-columns:1fr}
  .pricing-card{max-width:520px}

  /* Rasterelemente duerfen schrumpfen. Ohne min-width:0 koennen sie nicht
     schmaler werden als ihr Inhalt und sprengen das Raster. */
  .customer-grid>*,.customer-steps>*,.people>*,.trust-cols>*,.proof-grid>*,
  .blog-grid>*,.faqgrid>*,.stepgrid>*,.reassurance>*,.mangel-grid>*,
  .emergency-grid>*,.footer-grid>*,.trustbar>*,.why-inner>*,.team-inner>*,
  .pricing-inner>*,.hero-inner>*{min-width:0}

  p,li,h1,h2,h3,td,dd{overflow-wrap:break-word}
}

@media(max-width:640px){
  :root{--rand:20px;--kopfhoehe:69px}
  .servicebar{font-size:15px}
  .servicebar-inner{justify-content:center;text-align:center;gap:8px 18px}
  .nav-inner{min-height:68px;padding:12px var(--rand)}
  .navright .btn{display:none}
  .help-pill{display:none}
  .mobile-menu{padding:18px}
  .hero-inner{padding:38px var(--rand) 36px}
  .hero-formular{padding:22px 20px 20px}
  .hero-feld-paar{grid-template-columns:1fr;gap:0}
  .hero-feld-paar>div{margin-bottom:18px}
  .trustbar{grid-template-columns:1fr;padding:22px var(--rand)}
  .trustitem::after{display:none}
  .sektion,.steps,.home-proof,.faq,.why-section,.team-section,
  .pricing-section,.example-section,.trust-section,.quote-band,
  .cta-strip,.intro-inner{padding-top:52px;padding-bottom:52px}
  .customer-steps,.blog-grid,.footer-grid{grid-template-columns:1fr}
  .blog-card.featured{grid-column:auto}
  .blog-card.featured .blog-photo{height:220px}
  .sektion-kopf,.home-proof-head,.example-head{gap:18px}
  .intake-wrap{padding:32px 16px 64px}
  .intake-card{padding:24px 20px}
  .choices{grid-template-columns:1fr}
  .feldpaar,.feldpaar-plz{grid-template-columns:1fr}
  .intake-actions{flex-direction:column-reverse;align-items:stretch}
  .intake-actions .btn{width:100%}
  .article{padding:44px var(--rand) 68px}
  .editorial-image{height:220px}
  .case-cta-card,.help-strip-inner,.sofort-inner{display:block}
  .case-cta-card .btn,.help-strip-inner .btn-help,.sofort-inner .btn{margin-top:20px}
  .footer{padding:44px var(--rand) 32px}
  .footer-links{gap:14px}
  .team-zahlen{gap:26px}

  /* Bedienflaechen auf dem Telefon: freistehende Links waren zuvor nur
     14 bis 21 Pixel hoch und mit dem Finger nicht sicher zu treffen.
     Fuer Links MITTEN im Fliesstext gilt das nicht. */
  .footer-links a,.footer-spalte a,.text-link,.blog-copy a,.article-related a,
  .auth-foot a,.proof-link,.btn-help,.example-link,.card-link{
    display:inline-block;padding-top:9px;padding-bottom:9px;min-height:24px;
  }
}