/* ═══════════════════════════════════════════════════════════════════════════
   ENTWURF 2 — „Soforthilfe"
   Dein Gutachter Oguzhan · Kfz-Sachverstaendiger Bielefeld

   Haltung: Der Gegenentwurf zur Kanzlei. Hier steht nicht die Wuerde im
   Vordergrund, sondern die Handlung. Jemand steht am Strassenrand, das Auto
   ist kaputt, er hat drei Minuten und Adrenalin. Die Seite muss in dieser
   Lage funktionieren: Nummer gross, Formular oben, ein einziges lautes
   Signal (Orange) auf ruhigem Grund — Warnwesten-Logik, kein Farbchaos.

   Kanten sind hart (0–2px). Diese Branche verkauft Messgenauigkeit, keine
   Gemuetlichkeit. Runde Pillen-Buttons waeren hier der Zahnarzt-Reflex.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Marken-Kontrakt ─────────────────────────────────────────────────────────
   Alles Farbige und alle Abstaende haengen an diesen Werten. Wer die Marke
   aendern will, aendert hier — nirgends sonst. */
:root{
  /* Flaechen */
  --grund:#F6F7F9;          /* Seitenflaeche */
  --grund-tief:#ECEFF3;     /* abgesetzte Baender */
  --flaeche:#FFFFFF;        /* Karten, Formular, Leisten */

  /* Schrift */
  --tinte:#101922;          /* Ueberschriften, Zahlen */
  --text:#4A5768;           /* Fliesstext */
  --leise:#5F6979;          /* Beschriftungen, Meta
                               (Grund 5,2:1 · Band 4,8:1 · Weiss 5,6:1) */

  /* Linien */
  --linie:#E3E7EC;
  --haar:1px solid #E3E7EC;

  /* Traeger- und Signalfarbe */
  --blau:#123B63;           /* Werkstattblau — Kopf, dunkle Baender */
  --blau-tief:#0C2942;
  --blau-hell:#2F6BA8;
  /* Das Signalorange in drei Rollen. Es MUSS drei sein, sonst wird die Seite
     unlesbar: #F25C05 ist eine helle Farbe. Weisse Schrift darauf kommt nur
     auf 3,3:1, und als Schrift auf hellem Grund sind es sogar nur 2,9:1 —
     beides zu wenig. Getrennt funktioniert alles:
       --orange       Flaeche. Darauf immer --tinte (5,3:1).
       --orange-t     Schrift auf hellem Grund (4,7:1 bis 5,5:1).
       --orange-hell  Schrift und Rahmen auf den dunklen Blaubaendern
                      (4,7:1 auf --blau, 6,1:1 auf --blau-tief).
     Alle drei bleiben erkennbar dieselbe Farbe. */
  --orange:#F25C05;         /* NUR Haupt-Handlung. Sonst nirgends. */
  --orange-tief:#D64F02;    /* Schattenkante der Knoepfe, Fokusrahmen hell */
  --orange-t:#B84300;       /* Signalorange als Schrift auf hellem Grund   */
  --orange-hell:#FF8438;    /* Signalorange als Schrift auf Dunkelblau     */
  --gruen:#1E874B;          /* Bestaetigung, WhatsApp, Haken */

  /* Schriften */
  --display:'Clash Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --schrift:'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Zahlen laufen bewusst im Monospace des Systems: Reparaturkosten,
     Wiederbeschaffungswert, Telefonnummer. Das trennt „Dokument" von
     „Werbung" — und kostet keinen einzigen Byte Ladezeit. */
  --zahl:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --spalte:1200px;
  --tempo:.4s cubic-bezier(.22,.68,.36,1);
  --kante:2px;
}

/* ── Grundgeruest ───────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:104px}
body{
  margin:0; background:var(--grund); color:var(--text);
  font-family:var(--schrift); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;   /* faengt Ausreisser ab, ohne position:sticky zu toeten */
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
button{font:inherit; color:inherit}

h1,h2,h3{
  font-family:var(--display); color:var(--tinte);
  font-weight:600; line-height:1.08; letter-spacing:-.02em; margin:0;
}
p{margin:0}
ul{margin:0; padding:0; list-style:none}

.wrap{width:min(100% - 48px, var(--spalte)); margin-inline:auto}

/* Sichtbarer Fokus. Nicht verhandelbar — wer mit Tastatur bedient,
   muss sehen koennen, wo er ist. */
/* Der Fokusrahmen muss sich vom Untergrund abheben — 3:1 verlangt die Regel
   fuer alles, was kein Text ist. Das reine Signalorange schafft das auf den
   abgesetzten hellen Baendern nicht (2,9:1), deshalb steht hier der tiefere
   Ton (3,7:1). Auf den dunklen Blaubaendern waere genau der zu dunkel, also
   kippt er dort auf den hellen (4,7:1 bis 6,4:1). */
:focus-visible{outline:3px solid var(--orange-tief); outline-offset:3px; border-radius:1px}
.notleiste :focus-visible,.melden-kopf :focus-visible,.zahlen :focus-visible,
.kontakt :focus-visible,.entwurf-band :focus-visible{outline-color:var(--orange-hell)}

.nur-vorleser{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}
.sprung{
  position:absolute; left:16px; top:-100px; z-index:200;
  background:var(--orange); color:var(--tinte); padding:12px 20px; font-weight:700;
  text-decoration:none; transition:top .2s;
}
.sprung:focus{top:16px}

/* ── Einblenden beim Scrollen ────────────────────────────────────────────────
   Bewusst „translate" statt „transform": so kann ein Hover-Effekt spaeter
   scale/rotate benutzen, ohne diese Bewegung zu ueberschreiben. */
html.js .zeig{opacity:0; translate:0 20px; transition:opacity var(--tempo), translate var(--tempo)}
html.js .zeig[data-da="1"]{opacity:1; translate:0 0; transition-delay:calc(var(--i, 0) * 70ms)}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  html.js .zeig{opacity:1; translate:none; transition:none}
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

/* ── Knoepfe ─────────────────────────────────────────────────────────────────
   Kantig (2px), nie Pille. Der orange Knopf ist der einzige laute Ton auf der
   Seite und darf deshalb pro Bildschirm nur einmal vorkommen. */
.knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 26px; border:2px solid transparent; border-radius:var(--kante);
  font-family:var(--schrift); font-weight:700; font-size:.98rem; letter-spacing:.01em;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background var(--tempo), color var(--tempo), border-color var(--tempo),
             translate var(--tempo), box-shadow var(--tempo);
}
.knopf svg{width:19px; height:19px; fill:currentColor; flex:none}

/* Beim Zeigen wird die Flaeche HELLER, nicht dunkler. Das ist kein
   Geschmack, sondern Rechnung: auf dem Knopf steht dunkle Schrift, und die
   braucht eine helle Flaeche unter sich. Ginge der Knopf beim Zeigen dunkler,
   faellt die Lesbarkeit von 5,3:1 auf 4,2:1 — unter die Grenze. So steigt sie
   auf 6,8:1. Zur Hebebewegung nach oben passt das Aufhellen ohnehin besser. */
.knopf--signal{background:var(--orange); color:var(--tinte); box-shadow:0 2px 0 var(--orange-tief)}
.knopf--signal:hover,.knopf--signal:focus-visible{background:#FF7A2E; translate:0 -2px; box-shadow:0 4px 0 var(--orange-tief)}

.knopf--blau{background:var(--blau); color:#fff}
.knopf--blau:hover,.knopf--blau:focus-visible{background:var(--blau-tief); translate:0 -2px}

.knopf--rand{background:transparent; color:var(--blau); border-color:var(--linie)}
.knopf--rand:hover,.knopf--rand:focus-visible{border-color:var(--blau); background:var(--flaeche)}

.knopf--gruen{background:var(--gruen); color:#fff}
.knopf--gruen:hover,.knopf--gruen:focus-visible{background:#186B3C; translate:0 -2px}

.knopf--klein{padding:11px 18px; font-size:.88rem}
.knopf--breit{width:100%}

/* ── Notleiste ganz oben ─────────────────────────────────────────────────────
   Das duenne dunkle Band ueber dem Kopf. Traegt genau die zwei Angaben, die
   im Notfall zaehlen: erreichbar wann, erreichbar wo. */
.notleiste{background:var(--blau-tief); color:#C7D6E4; font-size:.82rem}
.notleiste .wrap{display:flex; align-items:center; gap:20px; min-height:38px; flex-wrap:wrap}
.notleiste b{color:#fff; font-weight:600}
.notleiste .punkt{
  width:7px; height:7px; border-radius:50%; background:var(--gruen); flex:none;
  box-shadow:0 0 0 3px rgba(30,135,75,.28);
}
html.js .notleiste .punkt{animation:pulsen 2.4s ease-out infinite}
@keyframes pulsen{
  0%,100%{box-shadow:0 0 0 3px rgba(30,135,75,.28)}
  50%    {box-shadow:0 0 0 7px rgba(30,135,75,.06)}
}
.notleiste .rechts{margin-left:auto; display:flex; align-items:center; gap:18px}
.notleiste a{color:#fff; text-decoration:none; font-weight:600; font-family:var(--zahl); font-size:.86rem}
.notleiste a:hover{text-decoration:underline}

/* ── Kopf ────────────────────────────────────────────────────────────────── */
.kopf{
  position:sticky; top:0; z-index:90; background:rgba(246,247,249,.94);
  backdrop-filter:blur(12px); border-bottom:var(--haar);
  transition:box-shadow var(--tempo);
}
.kopf[data-gescrollt="1"]{box-shadow:0 6px 22px rgba(16,25,34,.07)}
.kopf .wrap{display:flex; align-items:center; gap:24px; min-height:70px}

.marke{display:flex; align-items:center; gap:12px; text-decoration:none; flex:none}
.marke img{width:auto; height:38px}
.marke span{
  font-family:var(--display); font-weight:600; font-size:.78rem; line-height:1.25;
  color:var(--tinte); letter-spacing:.01em;
}

.haupt{display:flex; gap:26px; margin-left:auto}
.haupt a{
  text-decoration:none; font-size:.92rem; font-weight:500; color:var(--text);
  position:relative; padding:6px 0; transition:color var(--tempo);
}
.haupt a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--orange); scale:0 1; transform-origin:left;
  transition:scale var(--tempo);
}
.haupt a:hover,.haupt a:focus-visible{color:var(--tinte)}
.haupt a:hover::after,.haupt a:focus-visible::after{scale:1 1}

.kopf-rechts{display:flex; align-items:center; gap:12px; flex:none}

.burger{
  display:none; width:44px; height:44px; border:var(--haar); background:var(--flaeche);
  border-radius:var(--kante); position:relative; cursor:pointer;
}
.burger span,.burger::before,.burger::after{
  content:""; position:absolute; left:12px; width:20px; height:2px;
  background:var(--tinte); transition:translate var(--tempo), rotate var(--tempo), opacity .2s;
}
.burger::before{top:15px}
.burger span{top:21px}
.burger::after{top:27px}
.burger[aria-expanded="true"]::before{translate:0 6px; rotate:45deg}
.burger[aria-expanded="true"] span{opacity:0}
.burger[aria-expanded="true"]::after{translate:0 -6px; rotate:-45deg}

/* ── Hero ────────────────────────────────────────────────────────────────────
   Die wichtigste Entscheidung dieses Entwurfs: rechts steht kein Foto,
   sondern das Formular. Wer hier landet, will melden — nicht bewundern. */
.hero{padding:clamp(38px, 4.6vw, 66px) 0 clamp(44px, 5vw, 72px); position:relative; overflow:clip}
.hero::before{
  content:""; position:absolute; inset:0 0 auto; height:100%;
  background:
    radial-gradient(900px 420px at 12% -10%, rgba(18,59,99,.07), transparent 62%),
    radial-gradient(600px 300px at 92% 8%, rgba(242,92,5,.06), transparent 60%);
  pointer-events:none;
}
.hero .wrap{position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px, 4vw, 60px); align-items:start}

.kicker{
  display:inline-flex; align-items:center; gap:9px; font-size:.78rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--blau);
  background:rgba(18,59,99,.07); padding:8px 14px; border-radius:var(--kante);
}
.hero h1{font-size:clamp(2.35rem, 5.1vw, 4rem); margin:20px 0 0}
.hero h1 mark{background:none; color:var(--orange)}
.hero .lead{font-size:clamp(1.03rem, 1.35vw, 1.16rem); max-width:46ch; margin-top:20px}

/* Fakten-Chips: drei Aussagen, die die drei groessten Hemmschwellen abraeumen —
   Kosten, Wartezeit, Anfahrt. */
.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px}
.chips li{
  display:flex; align-items:center; gap:9px; background:var(--flaeche);
  border:var(--haar); border-left:3px solid var(--gruen);
  padding:11px 15px; font-size:.9rem; font-weight:600; color:var(--tinte);
  border-radius:0 var(--kante) var(--kante) 0;
}
.chips svg{width:17px; height:17px; fill:var(--gruen); flex:none}
.chips li:nth-child(2){border-left-color:var(--orange)}
.chips li:nth-child(2) svg{fill:var(--orange)}
.chips li:nth-child(3){border-left-color:var(--blau)}
.chips li:nth-child(3) svg{fill:var(--blau)}

.hero-tat{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.hero-fuss{
  display:flex; align-items:center; gap:12px; margin-top:24px;
  font-size:.85rem; color:var(--leise);
}
.hero-fuss img{
  width:40px; height:40px; border-radius:50%; object-fit:cover;
  border:2px solid var(--flaeche); box-shadow:0 0 0 1px var(--linie);
}

/* ── Schnellmeldung (Formularkarte im Hero) ──────────────────────────────── */
.melden{
  background:var(--flaeche); border:var(--haar); border-radius:var(--kante);
  box-shadow:0 18px 44px rgba(16,25,34,.09); overflow:hidden;
}
.melden-kopf{background:var(--blau); color:#fff; padding:20px 26px}
.melden-kopf b{font-family:var(--display); font-size:1.16rem; font-weight:600; display:block}
.melden-kopf small{display:block; color:#B9CBDB; font-size:.86rem; margin-top:3px}
.melden form{padding:24px 26px 26px}

/* Feldgruppen statt Fortschrittsbalken.
   Ein Balken, der von Anfang an voll ist, taeuscht Fortschritt vor, den es nicht
   gibt — das Formular ist einseitig. Stattdessen sagen drei Zwischenzeilen
   ehrlich, was jetzt kommt. Das beruhigt genauso und luegt nicht. */
.gruppe{
  display:flex; align-items:center; gap:12px; margin:22px 0 14px;
  font-family:var(--zahl); font-size:.72rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--leise); font-weight:600;
}
.gruppe:first-of-type{margin-top:4px}
.gruppe .nr{
  width:20px; height:20px; display:grid; place-items:center; flex:none;
  background:var(--blau); color:#fff; font-size:.68rem; letter-spacing:0;
}
.gruppe::after{content:""; flex:1; height:1px; background:var(--linie)}

.feld{margin-bottom:15px}
.feld label{display:block; font-size:.82rem; font-weight:700; color:var(--tinte); margin-bottom:6px}
.feld label .opt{font-weight:500; color:var(--leise)}
/* Der Umriss ist deutlich dunkler als --linie. Ein Eingabefeld muss man als
   Eingabefeld erkennen; die Fuellung allein leistet das nicht, weil sie fast
   so hell ist wie der Untergrund. 3,5:1 gegen Fuellung und Umfeld — ueber der
   Grenze, die fuer Bedienelemente gilt. */
.feld input,.feld select,.feld textarea{
  width:100%; padding:13px 14px; border:1px solid #7F858E; border-radius:var(--kante);
  background:var(--grund); color:var(--tinte); font:inherit; font-size:.95rem;
  transition:border-color var(--tempo), background var(--tempo);
}
.feld textarea{resize:vertical; min-height:88px}
.feld input:focus,.feld select:focus,.feld textarea:focus{
  outline:none; border-color:var(--blau); background:var(--flaeche);
}
.feld input:focus-visible,.feld select:focus-visible,.feld textarea:focus-visible{
  outline:3px solid var(--orange); outline-offset:2px;
}
.feld-paar{display:grid; grid-template-columns:1fr 1fr; gap:14px}

.melden-fuss{font-size:.78rem; color:var(--leise); margin-top:13px; line-height:1.55}
.melden-fuss a{color:var(--blau)}

/* ── Abschnittskoepfe ────────────────────────────────────────────────────── */
section{padding:clamp(56px, 6.4vw, 100px) 0}
.kopfzeile{max-width:64ch; margin-bottom:clamp(32px, 3.6vw, 52px)}
.lab{
  display:block; font-family:var(--zahl); font-size:.76rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--orange-t); font-weight:600; margin-bottom:14px;
}
.kopfzeile h2{font-size:clamp(1.85rem, 3.4vw, 2.75rem)}
.kopfzeile p{margin-top:16px; font-size:1.03rem}

/* ── Ablauf: drei Schritte als Band ──────────────────────────────────────── */
.ablauf{background:var(--grund-tief)}
.ablauf-netz{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(18px, 2.4vw, 34px)}
.ablauf-netz li{background:var(--flaeche); border:var(--haar); border-radius:var(--kante); padding:30px 28px 32px; position:relative}
.ablauf-netz .nr{
  font-family:var(--zahl); font-size:.9rem; font-weight:700; color:#fff;
  background:var(--blau); width:34px; height:34px; display:grid; place-items:center;
  border-radius:var(--kante); margin-bottom:18px;
}
/* Hier war die 01 orange und die 02/03 blau. Gemeint war „das ist der Anfang",
   gelesen wurde „das ist gerade ausgewaehlt" — zumal Orange auf dieser Seite
   sonst die Farbe der anklickbaren Dinge ist. Alle drei Ziffern sind jetzt
   gleich; die Reihenfolge erzaehlt der Strich zwischen den Karten. */
.ablauf-netz h3{font-size:1.22rem; margin-bottom:10px}
.ablauf-netz p{font-size:.96rem}
.ablauf-netz li::after{
  content:""; position:absolute; right:-18px; top:46px; width:14px; height:2px;
  background:var(--linie);
}
.ablauf-netz li:last-child::after{display:none}
/* Der Strich zeichnet sich nach, sobald die Karte da ist — der Ablauf laeuft
   dadurch sichtbar von links nach rechts durch. Nur mit Skript: ohne JS wird
   `data-da` nie gesetzt, die Striche muessen dann sofort stehen. */
html.js .ablauf-netz li::after{width:0; transition:width .45s cubic-bezier(.3,.8,.3,1) .3s}
html.js .ablauf-netz li[data-da="1"]::after{width:14px}

/* ── Anspruchsliste ──────────────────────────────────────────────────────── */
.anspruch-netz{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:2px; background:var(--linie); border:var(--haar)}
.anspruch-netz li{background:var(--flaeche); padding:26px 28px; display:flex; gap:16px}
.anspruch-netz svg{width:22px; height:22px; fill:var(--gruen); flex:none; margin-top:3px}
.anspruch-netz h3{font-size:1.06rem; margin-bottom:6px; font-family:var(--schrift); font-weight:700; letter-spacing:0}
.anspruch-netz p{font-size:.94rem}

/* ── Leistungen als Kartenraster ─────────────────────────────────────────── */
.leistung-netz{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(16px, 2vw, 26px)}
.leistung-netz li{
  background:var(--flaeche); border:var(--haar); border-radius:var(--kante);
  padding:28px 26px 30px; transition:border-color var(--tempo), translate var(--tempo), box-shadow var(--tempo);
}
.leistung-netz li:hover{border-color:var(--blau); translate:0 -3px; box-shadow:0 14px 30px rgba(16,25,34,.08)}
.leistung-netz .nr{font-family:var(--zahl); font-size:.78rem; color:var(--leise); letter-spacing:.1em}
.leistung-netz h3{font-size:1.16rem; margin:12px 0 10px}
.leistung-netz p{font-size:.95rem}

/* ── Kennzahlen-Band (dunkel, mit Zaehler) ───────────────────────────────── */
.zahlen{background:var(--blau); color:#fff; padding:clamp(44px, 5vw, 70px) 0}
.zahlen ul{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(20px, 3vw, 44px)}
.zahlen li{border-left:2px solid rgba(255,255,255,.16); padding-left:20px}
.zahlen b{
  display:block; font-family:var(--zahl); font-size:clamp(2rem, 3.6vw, 3rem);
  font-weight:700; color:#fff; line-height:1; font-variant-numeric:tabular-nums;
}
.zahlen b .plus{color:var(--orange)}
.zahlen small{display:block; margin-top:10px; font-size:.88rem; color:#B9CBDB; line-height:1.45}

/* ── Person ──────────────────────────────────────────────────────────────── */
.person .wrap{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px, 4vw, 60px); align-items:center}
.person-bild{position:relative; border:var(--haar); background:var(--flaeche); padding:10px}
.person-bild img{width:100%; aspect-ratio:4/5; object-fit:cover}
.person-platz{
  aspect-ratio:4/5; display:grid; place-items:center; text-align:center;
  background:var(--grund-tief); padding:34px; border:1px dashed #C3CCD6;
}
.person-platz small{font-size:.88rem; color:var(--leise); line-height:1.6; max-width:30ch}
.person-platz b{display:block; color:var(--tinte); margin-bottom:8px; font-size:.94rem}
.person h2{font-size:clamp(1.8rem, 3.2vw, 2.5rem); margin-bottom:18px}
.person p{margin-bottom:14px}
.person-daten{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; margin-top:26px; border-top:var(--haar); padding-top:24px}
.person-daten small{display:block; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--leise); margin-bottom:4px}
.person-daten b{color:var(--tinte); font-size:.98rem}

/* ── Bilderstreifen ──────────────────────────────────────────────────────── */
.streifen{padding-top:0}
.streifen ul{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:2px}
.streifen li{overflow:hidden; background:var(--grund-tief)}
.streifen img{width:100%; aspect-ratio:1/1; object-fit:cover; transition:scale .6s cubic-bezier(.22,.68,.36,1)}
.streifen li:hover img{scale:1.05}

/* ── Fragen ──────────────────────────────────────────────────────────────── */
.fragen-liste{border-top:var(--haar)}
.fragen-liste details{border-bottom:var(--haar)}
.fragen-liste summary{
  display:flex; align-items:flex-start; gap:16px; padding:22px 0; cursor:pointer;
  font-family:var(--display); font-size:1.08rem; font-weight:600; color:var(--tinte);
  list-style:none; transition:color var(--tempo);
}
.fragen-liste summary::-webkit-details-marker{display:none}
.fragen-liste summary:hover{color:var(--blau)}
.fragen-liste summary .zeichen{
  margin-left:auto; flex:none; width:22px; height:22px; position:relative; margin-top:3px;
}
.fragen-liste summary .zeichen::before,
.fragen-liste summary .zeichen::after{
  content:""; position:absolute; inset:50% 0 auto; height:2px; background:var(--orange);
  transition:rotate var(--tempo), opacity var(--tempo);
}
.fragen-liste summary .zeichen::after{rotate:90deg}
.fragen-liste details[open] summary .zeichen::after{rotate:0deg; opacity:0}
.fragen-liste details[open] summary{color:var(--blau)}
.fragen-liste .antwort{padding:0 38px 24px 0; max-width:76ch}
.fragen-liste .antwort p{font-size:.98rem; margin-bottom:12px}
.fragen-liste .antwort p:last-child{margin-bottom:0}

/* ── Kontakt ─────────────────────────────────────────────────────────────── */
.kontakt{background:var(--blau-tief); color:#C7D6E4}
.kontakt h2{color:#fff}
.kontakt .lab{color:var(--orange-hell)}
.kontakt .wrap{display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px, 4.4vw, 70px)}
.kontakt-liste{margin-top:28px}
.kontakt-liste li{display:flex; gap:16px; padding:18px 0; border-bottom:1px solid rgba(255,255,255,.12)}
.kontakt-liste svg{width:21px; height:21px; fill:var(--orange); flex:none; margin-top:3px}
.kontakt-liste small{display:block; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:#8AA3BA; margin-bottom:3px}
.kontakt-liste b{color:#fff; font-size:1.04rem; font-weight:600}
.kontakt-liste a{text-decoration:none}
.kontakt-liste a:hover b{color:var(--orange)}
.kontakt-liste .zahlwert{font-family:var(--zahl); letter-spacing:.01em}

.gebiet h3{color:#fff; font-size:1.1rem; margin-bottom:16px}
.gebiet ul{display:flex; flex-wrap:wrap; gap:8px}
.gebiet li{
  border:1px solid rgba(255,255,255,.2); padding:7px 13px; font-size:.86rem;
  border-radius:var(--kante); color:#C7D6E4;
}
.gebiet p{margin-top:20px; font-size:.9rem; color:#8AA3BA}

/* ── Fuss ────────────────────────────────────────────────────────────────── */
footer{background:var(--grund-tief); padding:clamp(46px, 5vw, 70px) 0 30px; font-size:.92rem}
.fuss-netz{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:clamp(24px, 3vw, 50px)}
footer h3{
  font-family:var(--zahl); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--leise); margin-bottom:16px; font-weight:600;
}
footer li{margin-bottom:9px}
footer a{color:var(--text); text-decoration:none; transition:color var(--tempo)}
footer a:hover{color:var(--orange-t)}
.fuss-marke img{height:40px; width:auto; margin-bottom:16px}
.fuss-marke address{font-style:normal; line-height:1.75; color:var(--text)}
.fuss-unten{
  margin-top:clamp(32px, 3.4vw, 48px); padding-top:22px; border-top:var(--haar);
  display:flex; flex-wrap:wrap; gap:14px 24px; align-items:center;
  font-size:.85rem; color:var(--leise);
}
.fuss-unten nav{margin-left:auto; display:flex; gap:20px}

/* ── Daumenleiste (nur Handy) ────────────────────────────────────────────────
   Der Daumen liegt unten. Deshalb liegt dort auch die Handlung. */
.daumen{
  display:none; position:fixed; inset:auto 0 0; z-index:95;
  background:var(--flaeche); border-top:var(--haar);
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -6px 22px rgba(16,25,34,.09);
}
.daumen ul{display:grid; grid-template-columns:repeat(3, 1fr)}
.daumen a{
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:11px 4px 10px;
  text-decoration:none; font-size:.72rem; font-weight:700; color:var(--text);
  border-right:var(--haar);
}
.daumen li:last-child a{border-right:none}
.daumen svg{width:20px; height:20px; fill:currentColor}
.daumen .haupt-tat{background:var(--orange); color:var(--tinte)}

/* ── Entwurfs-Hinweis ────────────────────────────────────────────────────── */
.entwurf-band{background:#1B2430; color:#C7D6E4; font-size:.84rem; padding:11px 0}
.entwurf-band .wrap{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.entwurf-band b{color:#fff}
.entwurf-band a{color:var(--orange-hell); text-decoration:none; margin-left:auto; font-weight:600}
.entwurf-band a:hover{text-decoration:underline}

/* ═══════════════════════════════════════════════════════════════════════════
   Enger werdende Bildschirme
   ═══════════════════════════════════════════════════════════════════════════ */

/* Formular neben dem Text braucht Platz. Darunter stapeln. */
@media (max-width: 1040px){
  .hero .wrap{grid-template-columns:1fr}
  .melden{max-width:560px}
  .person .wrap{grid-template-columns:1fr}
  .person-bild{max-width:380px}
  .zahlen ul{grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px}
  .fuss-netz{grid-template-columns:1fr 1fr; gap:34px}
}

/* Logo + fuenf Menuepunkte + Knopf brauchen zusammen rund 900px.
   Darunter wandert das Menue hinter den Burger. */
@media (max-width: 960px){
  .haupt{
    position:fixed; inset:70px 0 auto; flex-direction:column; gap:0;
    background:var(--flaeche); border-bottom:var(--haar); padding:8px 24px 22px;
    translate:0 -130%; transition:translate .4s cubic-bezier(.3,.8,.3,1);
    box-shadow:0 20px 38px rgba(16,25,34,.1); margin-left:0;
  }
  .haupt[data-auf="1"]{translate:0 0}
  .haupt a{padding:15px 0; border-bottom:var(--haar); font-size:1.02rem}
  .haupt a::after{display:none}
  .kopf-rechts{margin-left:auto}
  .kopf-rechts .knopf{display:none}
  .burger{display:block}
  .ablauf-netz{grid-template-columns:1fr}
  .ablauf-netz li::after{display:none}
  .leistung-netz{grid-template-columns:repeat(2, minmax(0,1fr))}
  .kontakt .wrap{grid-template-columns:1fr}
}

@media (max-width: 720px){
  body{font-size:16px; padding-bottom:66px}
  .wrap{width:min(100% - 34px, var(--spalte))}
  html{scroll-padding-top:88px}
  .notleiste .rechts{display:none}      /* Nummer steht unten in der Daumenleiste */
  .daumen{display:block}
  .anspruch-netz,.leistung-netz,.streifen ul,.person-daten,.fuss-netz,.feld-paar{grid-template-columns:1fr}
  .streifen ul{grid-template-columns:1fr 1fr}
  .zahlen ul{grid-template-columns:1fr 1fr; gap:22px}
  .hero-tat .knopf{flex:1 1 100%}
  .melden form{padding:20px 20px 22px}
  .melden-kopf{padding:17px 20px}
  .fuss-unten nav{margin-left:0; flex-wrap:wrap}
  .fragen-liste .antwort{padding-right:0}
}

@media (max-width: 420px){
  .chips li{width:100%}
  .marke span{display:none}
}

/* ── Rechtstexte (Impressum, Datenschutz) ───────────────────────────────────
   Die Trennlinien laufen ueber die volle Spalte, der Lesetext bleibt schmal.
   Umgekehrt saehe es aus wie ein Fehler. */
.rechts-kopf{padding:clamp(44px, 5vw, 72px) 0 clamp(24px, 3vw, 38px)}
.rechts-kopf h1{font-size:clamp(2rem, 3.8vw, 2.9rem); margin-top:12px}
.rechts-kopf .lead{margin-top:16px; max-width:56ch}
/* Deutsche Rechtsbegriffe sind lang: „Datenschutzerklaerung",
   „Umsatzsteuer-Identifikationsnummer", „Verbraucherstreitbeilegungsgesetz".
   Auf einem 375px-Bildschirm passt so ein Wort in keine Zeile und wuerde sonst
   ueber den Rand hinausgeschoben — der Text waere abgeschnitten. hyphens trennt
   nach den Regeln der Sprache (lang="de" steht im html-Tag, sonst greift es
   nicht), overflow-wrap ist das Netz darunter fuer Browser ohne Trennmuster.
   Beides vererbt sich, die eine Regel auf dem Behaelter deckt alle Absaetze,
   Listen und Adressen darin ab. */
.rechts-kopf h1,.rechtstext{hyphens:auto; overflow-wrap:break-word}
.rechtstext{padding-bottom:clamp(54px, 6vw, 92px)}
.rechtstext p,.rechtstext ul,.rechtstext dl,.rechtstext address,.rechts-hinweis{max-width:68ch}
.rechtstext section{border-top:var(--haar); padding:28px 0 4px}
.rechtstext h2{font-size:clamp(1.25rem, 2vw, 1.55rem); margin-bottom:14px}
.rechtstext h3{font-family:var(--schrift); font-size:1.02rem; font-weight:700; letter-spacing:0; margin:22px 0 8px}
.rechtstext p{margin-bottom:13px}
.rechtstext ul li{padding-left:22px; position:relative; margin-bottom:7px}
.rechtstext ul li::before{
  content:""; position:absolute; left:4px; top:.62em; width:5px; height:5px;
  background:var(--orange);
}
.rechtstext dt{font-weight:700; color:var(--tinte); margin-top:15px}
.rechtstext dd{margin:2px 0 0}
.rechtstext address{font-style:normal; line-height:1.8}
.rechtstext a{color:var(--blau)}
.rechts-hinweis{
  background:var(--grund-tief); border-left:3px solid var(--orange);
  padding:20px 24px; margin:26px 0 30px;
}
.rechts-hinweis b{display:block; margin-bottom:6px; color:var(--tinte)}
.rechts-hinweis p{font-size:.94rem; margin-bottom:0}
.zurueck{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font-size:.86rem; font-weight:700; color:var(--leise); margin-top:32px;
}
.zurueck svg{width:16px; height:16px; rotate:180deg; fill:currentColor; transition:translate var(--tempo)}
.zurueck:hover{color:var(--orange-t)}
.zurueck:hover svg{translate:-4px 0}