/* ═══════════════════════════════════════════════════════════════════════════
   ENTWURF 3 — „Werkstatt"
   Dein Gutachter Oguzhan · Kfz-Sachverstaendiger Bielefeld

   Haltung: Nicht die Kanzlei (V1), nicht der Notruf (V2), sondern das
   Handwerk. Dunkle Halle, Arbeitslicht, grosse Fotografie. Die Seite
   argumentiert nicht mit Hoeflichkeit und nicht mit Tempo, sondern mit
   Koennen — so wie eine gute Werkstatt: man sieht, dass hier gearbeitet wird.

   Typografisch das Gegenteil der anderen beiden: eine sehr fette, breite
   Display-Schrift (Tanker) gegen eine ruhige Grotesk (Supreme). Das Raster
   ist bewusst asymmetrisch — Text sitzt versetzt, Bilder laufen ueber den
   Rand hinaus. Die Handlung wandert vom Kopf an den rechten Bildschirmrand
   (Kontaktschiene), damit sie beim Scrollen nie verschwindet.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Marken-Kontrakt ─────────────────────────────────────────────────────── */
:root{
  /* Flaechen — drei Tiefen, damit die Seite nicht flach wirkt */
  --nacht:#0A0B0D;          /* Grundflaeche */
  --nacht-hoch:#121418;     /* abgesetzte Baender */
  --nacht-karte:#181B20;    /* Karten, Formularfelder */

  /* Schrift — die Werte sind gegen die hellste Flaeche (--nacht-karte) gerechnet,
     damit sie auf allen drei Tiefen sicher lesbar bleiben */
  --knochen:#EDE9E1;        /* Ueberschriften, heller Text */
  --matt:#A8A399;           /* Fliesstext (auf Nacht 7,9:1) */
  --leise:#8C877D;          /* Meta, Beschriftungen (auf Karte 4,8:1) */
  --geist:#6B675E;          /* nur fuer grosse Schmuckziffern (3,5:1) */

  /* Linien */
  --linie:#24272C;          /* Trennlinien, nicht fuer Text */
  --rand:#5A5F68;           /* Umriss bedienbarer Elemente (3,1:1) */
  --haar:1px solid #24272C;

  /* Signal */
  --amber:#D9863B;          /* Akzent, Handlung, aktive Zustaende */
  --amber-hell:#E8A163;
  --amber-tief:#B96C28;

  /* Schriften */
  --display:'Tanker', 'Arial Black', Impact, sans-serif;
  --schrift:'Supreme', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --zahl:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --spalte:1280px;
  --tempo:.5s cubic-bezier(.22,.68,.36,1);
}

/* ── Grundgeruest ───────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px}
body{
  margin:0; background:var(--nacht); color:var(--matt);
  font-family:var(--schrift); font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
button{font:inherit; color:inherit}

h1,h2,h3{color:var(--knochen); margin:0; font-weight:400}
h1,h2{font-family:var(--display); line-height:.94; letter-spacing:-.01em; text-transform:uppercase}
h3{font-family:var(--schrift); font-weight:600; line-height:1.25; letter-spacing:-.01em}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
dl,dd,figure{margin:0}

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

:focus-visible{outline:3px solid var(--amber); outline-offset:3px}

.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(--amber); color:var(--nacht); padding:12px 20px; font-weight:700;
  text-decoration:none; transition:top .2s;
}
.sprung:focus{top:16px}

/* ── Einblenden ──────────────────────────────────────────────────────────── */
html.js .zeig{opacity:0; translate:0 26px; transition:opacity var(--tempo), translate var(--tempo)}
html.js .zeig[data-da="1"]{opacity:1; translate:0 0; transition-delay:calc(var(--i, 0) * 80ms)}
@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 ─────────────────────────────────────────────────────────────── */
.knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:11px;
  padding:17px 28px; border:1px solid transparent; border-radius:0;
  font-weight:600; font-size:.95rem; letter-spacing:.02em;
  text-decoration:none; cursor:pointer; white-space:nowrap; position:relative;
  transition:background var(--tempo), color var(--tempo), border-color var(--tempo), translate var(--tempo);
}
.knopf svg{width:19px; height:19px; fill:currentColor; flex:none}
.knopf--amber{background:var(--amber); color:var(--nacht)}
.knopf--amber:hover,.knopf--amber:focus-visible{background:var(--amber-hell); translate:0 -2px}
.knopf--rand{background:transparent; color:var(--knochen); border-color:var(--rand)}
.knopf--rand:hover,.knopf--rand:focus-visible{border-color:var(--amber); color:var(--amber); translate:0 -2px}
.knopf--klein{padding:11px 19px; font-size:.86rem}
.knopf--breit{width:100%}

/* ── Kopf ────────────────────────────────────────────────────────────────────
   Liegt zunaechst durchsichtig ueber dem Bild und wird beim Scrollen fest. */
.kopf{
  position:fixed; inset:0 0 auto; z-index:90;
  transition:background var(--tempo), border-color var(--tempo), backdrop-filter var(--tempo);
  border-bottom:1px solid transparent;
}
.kopf[data-gescrollt="1"]{
  background:rgba(10,11,13,.86); backdrop-filter:blur(14px); border-bottom-color:var(--linie);
}
.kopf .wrap{display:flex; align-items:center; gap:26px; min-height:82px}

.marke{display:flex; align-items:center; gap:13px; text-decoration:none; flex:none}
.marke img{width:auto; height:40px}
.marke span{
  font-family:var(--zahl); font-size:.68rem; line-height:1.4; color:var(--matt);
  letter-spacing:.12em; text-transform:uppercase;
}

.haupt{display:flex; gap:30px; margin-left:auto}
.haupt a{
  text-decoration:none; font-size:.84rem; font-weight:500; color:var(--matt);
  letter-spacing:.09em; text-transform:uppercase; padding:6px 0; position:relative;
  transition:color var(--tempo);
}
.haupt a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--amber); scale:0 1; transform-origin:left; transition:scale var(--tempo);
}
.haupt a:hover,.haupt a:focus-visible{color:var(--knochen)}
.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:46px; height:46px; border:1px solid var(--rand); background:transparent;
  position:relative; cursor:pointer;
}
.burger span,.burger::before,.burger::after{
  content:""; position:absolute; left:13px; width:20px; height:1px;
  background:var(--knochen); transition:translate var(--tempo), rotate var(--tempo), opacity .2s;
}
.burger::before{top:16px}
.burger span{top:22px}
.burger::after{top:28px}
.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}

/* ── Kontaktschiene am rechten Rand ──────────────────────────────────────────
   Der dritte CTA-Gedanke: nicht im Kopf (V1), nicht im Hero (V2), sondern
   dauerhaft am Rand. Verdeckt nichts und ist nie weiter als eine Handbewegung
   entfernt. Unter 1200px verschwindet sie — dort uebernimmt die Daumenleiste. */
.schiene{
  position:fixed; right:0; top:50%; translate:0 -50%; z-index:88;
  display:flex; flex-direction:column; border-left:var(--haar); border-top:var(--haar);
  background:rgba(18,20,24,.9); backdrop-filter:blur(10px);
}
.schiene a{
  display:grid; place-items:center; width:56px; height:56px;
  border-bottom:var(--haar); text-decoration:none; color:var(--matt);
  transition:background var(--tempo), color var(--tempo);
  position:relative;
}
.schiene a:hover,.schiene a:focus-visible{background:var(--amber); color:var(--nacht)}
.schiene svg{width:20px; height:20px; fill:currentColor}
/* Beschriftung faehrt beim Zeigen heraus — ohne sie waeren die Symbole geraten */
.schiene a span{
  position:absolute; right:100%; top:0; height:56px; display:flex; align-items:center;
  padding:0 16px; white-space:nowrap; background:var(--amber); color:var(--nacht);
  font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  opacity:0; translate:8px 0; pointer-events:none;
  transition:opacity var(--tempo), translate var(--tempo);
}
.schiene a:hover span,.schiene a:focus-visible span{opacity:1; translate:0 0}

/* ── Hero ────────────────────────────────────────────────────────────────────
   Vollflaechiges Foto, Text unten links. Kein Kasten, kein Kaesten-im-Kasten:
   die Schrift steht direkt im Bild, gehalten von einem Verlauf. */
.hero{position:relative; min-height:min(100svh, 900px); display:flex; align-items:flex-end; overflow:clip}
.hero-bild{position:absolute; inset:0}
/* 28 % haelt den Kopf des Sachverstaendigen im Bild — bei 58 % wird er abgeschnitten */
.hero-bild img{width:100%; height:100%; object-fit:cover; object-position:center 28%}
.hero-bild::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(10,11,13,.97) 0%, rgba(10,11,13,.80) 38%, rgba(10,11,13,.42) 68%, rgba(10,11,13,.62) 100%),
    linear-gradient(to right, rgba(10,11,13,.78), rgba(10,11,13,.22) 58%, transparent 78%);
}
/* Oben so viel Luft, dass der Text auf schmalen Geraeten nie unter den
   festen Kopf rutscht — auf grossen Bildschirmen bleibt er trotzdem unten,
   weil der Inhalt dort die Mindesthoehe gar nicht ausfuellt. */
.hero .wrap{position:relative; padding:clamp(118px, 17vh, 168px) 0 clamp(48px, 6vw, 92px)}

.kicker{
  display:inline-flex; align-items:flex-start; gap:10px; font-family:var(--zahl);
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--amber);
}
/* flex-start + Versatz: bricht die Zeile auf schmalen Geraeten um, bleibt der
   Strich trotzdem auf Hoehe der ersten Zeile statt in der Mitte zu haengen. */
.kicker::before{content:""; width:34px; height:1px; background:var(--amber); flex:none; margin-top:.68em}

.hero h1{
  font-size:clamp(3rem, 8.4vw, 7.4rem); margin:22px 0 0; max-width:15ch;
  color:var(--knochen);
}
.hero h1 em{font-style:normal; color:var(--amber)}
.hero .lead{
  margin-top:26px; max-width:52ch; font-size:clamp(1.02rem, 1.3vw, 1.16rem);
  color:var(--knochen); opacity:.86;
}
.hero-tat{display:flex; flex-wrap:wrap; gap:13px; margin-top:34px}

/* Meta-Zeile ganz unten: drei kurze Fakten im Monospace, wie ein Datenblatt */
.hero-meta{
  display:flex; flex-wrap:wrap; gap:20px clamp(24px, 3vw, 52px); margin-top:38px;
  border-top:var(--haar); padding-top:20px;
}
.hero-meta li{font-family:var(--zahl); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--leise)}
.hero-meta b{display:block; color:var(--knochen); font-size:.92rem; letter-spacing:.02em; margin-top:5px; font-weight:600}

/* ── Abschnitte ──────────────────────────────────────────────────────────── */
section{padding:clamp(64px, 7vw, 118px) 0}
.lab{
  display:block; font-family:var(--zahl); font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--amber); margin-bottom:18px;
}
.kopfzeile{max-width:60ch; margin-bottom:clamp(36px, 4vw, 62px)}
.kopfzeile h2{font-size:clamp(2rem, 4.4vw, 3.5rem)}
.kopfzeile p{margin-top:20px; font-size:1.04rem}

/* ── Aussage (grosses Zitat, versetzt) ───────────────────────────────────── */
.aussage{background:var(--nacht-hoch); border-top:var(--haar); border-bottom:var(--haar)}
.aussage .wrap{display:grid; grid-template-columns:1fr 1.5fr; gap:clamp(28px, 4vw, 70px); align-items:start}
.aussage blockquote{
  margin:0; font-family:var(--display); text-transform:uppercase;
  font-size:clamp(1.6rem, 3.2vw, 2.7rem); line-height:1; color:var(--knochen);
}
.aussage blockquote em{font-style:normal; color:var(--amber)}
.aussage-text p{margin-bottom:16px}
.aussage-text p:last-child{margin-bottom:0}
.aussage-fakten{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px; margin-top:34px; border-top:var(--haar); padding-top:26px}
.aussage-fakten b{display:block; font-family:var(--zahl); font-size:1.5rem; color:var(--amber); line-height:1}
.aussage-fakten small{display:block; margin-top:9px; font-size:.85rem; color:var(--leise); line-height:1.5}
/* Sternchen-Verweise auf die Kosten-Erlaeuterung im Kontaktteil */
.stern,.aussage-fakten small a,.anspruch-netz p a{color:var(--amber); text-decoration:none; font-weight:700; padding:0 2px}
.aussage-fakten small a:hover,.anspruch-netz p a:hover{text-decoration:underline}

/* ── Leistungen: versetzte Liste ─────────────────────────────────────────────
   Kein Kartenraster (das hat V2). Hier laeuft die Liste als Satzspiegel:
   grosse Nummer, Titel, Beschreibung — jede zweite Zeile eingerueckt. */
.werk-liste{border-top:var(--haar)}
.werk-liste li{
  display:grid; grid-template-columns:110px minmax(220px, 1fr) minmax(0, 1.5fr);
  gap:clamp(16px, 3vw, 48px); align-items:start;
  padding:clamp(26px, 3vw, 40px) 0; border-bottom:var(--haar);
  transition:background var(--tempo);
}
.werk-liste li:hover{background:var(--nacht-hoch)}
.werk-liste .nr{
  font-family:var(--display); font-size:clamp(1.7rem, 3vw, 2.6rem); line-height:.9;
  color:var(--geist); transition:color var(--tempo);
}
.werk-liste li:hover .nr{color:var(--amber)}
.werk-liste h3{font-size:clamp(1.15rem, 1.8vw, 1.5rem)}
.werk-liste p{font-size:.97rem}

/* ── Bildband, volle Breite ──────────────────────────────────────────────── */
.bildband{padding:0; position:relative; height:clamp(320px, 46vw, 560px); overflow:clip}
.bildband img{width:100%; height:100%; object-fit:cover}
.bildband::after{content:""; position:absolute; inset:0; background:linear-gradient(to right, rgba(10,11,13,.86), rgba(10,11,13,.12) 70%)}
/* z-index, damit der Verlauf (::after, letztes Kind) den Text nicht zudeckt */
.bildband .wrap{position:absolute; inset:0; z-index:1; display:flex; align-items:center}
.bildband blockquote{
  margin:0; max-width:22ch; font-family:var(--display); text-transform:uppercase;
  font-size:clamp(1.7rem, 4vw, 3.2rem); line-height:.98; color:var(--knochen);
}
.bildband cite{
  display:block; margin-top:20px; font-style:normal; font-family:var(--zahl);
  font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--amber);
}

/* ── Fotostreifen, volle Breite ──────────────────────────────────────────────
   Drei Bilder ohne Abstand, nur durch Haarlinien getrennt. Ruhig entsaettigt,
   damit sie das Amber nicht stoeren; beim Zeigen kommt die Farbe zurueck. */
.streifen{padding:0}
.streifen ul{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1px; background:var(--linie)}
.streifen li{position:relative; overflow:clip; background:var(--nacht)}
.streifen img{
  width:100%; height:clamp(190px, 22vw, 300px); object-fit:cover;
  filter:grayscale(.7) brightness(.72); scale:1;
  transition:filter var(--tempo), scale var(--tempo);
}
.streifen li:hover img{filter:grayscale(0) brightness(.92); scale:1.04}
.streifen figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:14px 16px;
  background:linear-gradient(to top, rgba(10,11,13,.92), transparent);
  font-family:var(--zahl); font-size:.72rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--matt);
}

/* ── Ablauf als Zeitstrahl ───────────────────────────────────────────────── */
.ablauf-strahl{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(16px, 2.4vw, 34px)}
.ablauf-strahl li{position:relative; padding-top:34px}
.ablauf-strahl li::before{
  content:""; position:absolute; inset:0 0 auto; height:1px; background:var(--linie);
}
.ablauf-strahl li::after{
  content:""; position:absolute; left:0; top:-4px; width:9px; height:9px; background:var(--amber);
}
.ablauf-strahl .nr{font-family:var(--zahl); font-size:.76rem; letter-spacing:.14em; color:var(--amber); display:block; margin-bottom:12px}
.ablauf-strahl h3{font-size:1.14rem; margin-bottom:11px}
.ablauf-strahl p{font-size:.94rem}

/* ── Ansprueche ──────────────────────────────────────────────────────────── */
.anspruch{background:var(--nacht-hoch); border-top:var(--haar); border-bottom:var(--haar)}
.anspruch-netz{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1px; background:var(--linie); border:var(--haar)}
.anspruch-netz li{background:var(--nacht-hoch); padding:30px 28px 34px; transition:background var(--tempo)}
.anspruch-netz li:hover{background:var(--nacht-karte)}
.anspruch-netz svg{width:24px; height:24px; fill:var(--amber); margin-bottom:16px}
.anspruch-netz h3{font-size:1.06rem; margin-bottom:9px}
.anspruch-netz p{font-size:.93rem}

/* ── Person ──────────────────────────────────────────────────────────────── */
.person .wrap{display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(30px, 4.6vw, 76px); align-items:center}
.person-bild{position:relative}
.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(--nacht-karte); border:1px dashed var(--rand); padding:36px;
}
/* --matt statt --leise: Kleintext braucht auf der Karte 4,5:1 (hier ~6,9:1) */
.person-platz small{font-size:.88rem; color:var(--matt); line-height:1.65; max-width:30ch}
.person-platz b{display:block; color:var(--knochen); margin-bottom:9px; font-size:.94rem}
.person h2{font-size:clamp(1.9rem, 3.6vw, 3rem); margin-bottom:24px}
.person p{margin-bottom:16px}
.person-daten{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; margin-top:30px; border-top:var(--haar); padding-top:26px}
.person-daten dt,.person-daten dd{margin:0}
.person-daten small{display:block; font-family:var(--zahl); font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--leise); margin-bottom:5px}
.person-daten b{color:var(--knochen); font-size:.98rem; font-weight:600}

/* ── Fragen ──────────────────────────────────────────────────────────────── */
.fragen-liste{border-top:var(--haar)}
.fragen-liste details{border-bottom:var(--haar)}
.fragen-liste summary{
  display:flex; align-items:flex-start; gap:18px; padding:24px 0; cursor:pointer;
  font-size:1.08rem; font-weight:600; color:var(--knochen); list-style:none;
  transition:color var(--tempo);
}
.fragen-liste summary::-webkit-details-marker{display:none}
.fragen-liste summary:hover{color:var(--amber)}
.fragen-liste summary .zeichen{margin-left:auto; flex:none; width:22px; height:22px; position:relative; margin-top:4px}
.fragen-liste summary .zeichen::before,
.fragen-liste summary .zeichen::after{
  content:""; position:absolute; inset:50% 0 auto; height:1px; background:var(--amber);
  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(--amber)}
.fragen-liste .antwort{padding:0 40px 26px 0; max-width:76ch}
.fragen-liste .antwort p{font-size:.97rem; margin-bottom:12px}
.fragen-liste .antwort p:last-child{margin-bottom:0}

/* ── Kontakt ─────────────────────────────────────────────────────────────── */
.kontakt{background:var(--nacht-hoch); border-top:var(--haar)}
.kontakt .wrap{display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px, 4.6vw, 76px)}
.kontakt-liste{margin-top:30px}
.kontakt-liste li{display:flex; gap:17px; padding:19px 0; border-bottom:var(--haar)}
.kontakt-liste svg{width:21px; height:21px; fill:var(--amber); flex:none; margin-top:4px}
.kontakt-liste small{display:block; font-family:var(--zahl); font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--leise); margin-bottom:4px}
.kontakt-liste b{color:var(--knochen); font-size:1.04rem; font-weight:600}
.kontakt-liste a{text-decoration:none}
.kontakt-liste a:hover b{color:var(--amber)}

.formular{background:var(--nacht-karte); border:var(--haar); padding:clamp(26px, 3vw, 38px)}
.formular h3{font-size:1.24rem; margin-bottom:8px}
.formular > p{font-size:.92rem; margin-bottom:24px}
.feld{margin-bottom:16px}
.feld label{display:block; font-family:var(--zahl); font-size:.72rem; letter-spacing:.11em; text-transform:uppercase; color:var(--matt); margin-bottom:7px}
.feld label .opt{color:var(--leise); letter-spacing:.05em}
/* Hier steht --rand und nicht --linie: das Feld hat dieselbe Fuellung wie der
   Untergrund, der Umriss ist also das einzige, woran man es erkennt. --linie
   waere dafuer viel zu dunkel (1,3:1). --rand ist genau fuer Umrisse da. */
.feld input,.feld select,.feld textarea{
  width:100%; padding:14px 15px; border:1px solid var(--rand); border-radius:0;
  background:var(--nacht); color:var(--knochen); font:inherit; font-size:.95rem;
  transition:border-color var(--tempo);
}
.feld textarea{resize:vertical; min-height:92px}
/* Eigener Pfeil, weil der System-Pfeil auf dunklem Grund fast unsichtbar ist */
.feld select{
  appearance:none; padding-right:44px; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23D9863B'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:20px 20px;
}
.feld select option{background:var(--nacht); color:var(--knochen)}
.feld input::placeholder,.feld textarea::placeholder{color:var(--leise)}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:none; border-color:var(--amber)}
.feld input:focus-visible,.feld select:focus-visible,.feld textarea:focus-visible{outline:3px solid var(--amber); outline-offset:2px}
.feld-paar{display:grid; grid-template-columns:1fr 1fr; gap:15px}
.form-fuss{font-size:.8rem; color:var(--leise); margin-top:14px; line-height:1.6}
.form-fuss a{color:var(--amber)}

.gebiet{margin-top:34px; border-top:var(--haar); padding-top:26px}
.gebiet h3{font-size:1.06rem; margin-bottom:16px}
.gebiet ul{display:flex; flex-wrap:wrap; gap:8px}
.gebiet li{border:var(--haar); padding:7px 13px; font-size:.85rem; color:var(--matt)}
.gebiet p{margin-top:18px; font-size:.88rem; color:var(--leise)}

/* ── Fuss ────────────────────────────────────────────────────────────────── */
footer{background:var(--nacht); padding:clamp(52px, 5.6vw, 82px) 0 32px; font-size:.92rem; border-top:var(--haar)}
.fuss-netz{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:clamp(24px, 3vw, 52px)}
footer h3{font-family:var(--zahl); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--leise); margin-bottom:18px; font-weight:400}
footer li{margin-bottom:10px}
footer a{color:var(--matt); text-decoration:none; transition:color var(--tempo)}
footer a:hover{color:var(--amber)}
.fuss-marke img{height:44px; width:auto; margin-bottom:18px}
.fuss-marke address{font-style:normal; line-height:1.8; color:var(--matt)}
.fuss-unten{
  margin-top:clamp(34px, 3.6vw, 52px); padding-top:24px; border-top:var(--haar);
  display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center;
  font-size:.84rem; color:var(--leise);
}
.fuss-unten nav{margin-left:auto; display:flex; gap:22px}

/* ── Daumenleiste ────────────────────────────────────────────────────────── */
.daumen{
  display:none; position:fixed; inset:auto 0 0; z-index:95;
  background:var(--nacht-hoch); border-top:var(--haar);
  padding-bottom:env(safe-area-inset-bottom);
}
.daumen ul{display:grid; grid-template-columns:repeat(3, 1fr)}
.daumen a{
  display:flex; flex-direction:column; align-items:center; gap:5px; padding:12px 4px 11px;
  text-decoration:none; font-family:var(--zahl); font-size:.68rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--matt); 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(--amber); color:var(--nacht); font-weight:600}

/* ── Entwurfs-Band ───────────────────────────────────────────────────────── */
.entwurf-band{
  position:relative; z-index:91; background:var(--nacht-karte); color:var(--matt);
  font-size:.83rem; padding:11px 0; border-bottom:var(--haar);
}
.entwurf-band .wrap{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.entwurf-band b{color:var(--knochen)}
.entwurf-band a{color:var(--amber); text-decoration:none; margin-left:auto; font-weight:600}
.entwurf-band a:hover{text-decoration:underline}
/* Der feste Kopf muss unter dem Band beginnen, sonst verdeckt er es. */
body[data-band="1"] .kopf{top:var(--band-hoehe, 42px)}

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

@media (max-width: 1200px){
  .schiene{display:none}          /* darunter uebernimmt die Daumenleiste */
}

@media (max-width: 1040px){
  .aussage .wrap,.person .wrap,.kontakt .wrap{grid-template-columns:1fr}
  .person-bild{max-width:400px}
  .ablauf-strahl{grid-template-columns:repeat(2, minmax(0,1fr)); gap:32px}
  .anspruch-netz{grid-template-columns:repeat(2, minmax(0,1fr))}
  .fuss-netz{grid-template-columns:1fr 1fr; gap:36px}
  .werk-liste li{grid-template-columns:76px 1fr}
  .werk-liste p{grid-column:2}
}

@media (max-width: 960px){
  .haupt{
    position:fixed; inset:82px 0 auto; flex-direction:column; gap:0;
    background:var(--nacht-hoch); border-bottom:var(--haar); padding:8px 24px 24px;
    translate:0 -140%; transition:translate .42s cubic-bezier(.3,.8,.3,1); margin-left:0;
  }
  .haupt[data-auf="1"]{translate:0 0}
  .haupt a{padding:16px 0; border-bottom:var(--haar); font-size:.94rem}
  .haupt a::after{display:none}
  .kopf-rechts{margin-left:auto}
  .kopf-rechts .knopf{display:none}
  .burger{display:block}
}

@media (max-width: 720px){
  body{font-size:16px; padding-bottom:70px}
  .wrap{width:min(100% - 32px, var(--spalte))}
  html{scroll-padding-top:84px}
  .daumen{display:block}
  .hero{min-height:min(94svh, 760px)}
  .hero-meta{gap:18px 30px}
  .anspruch-netz,.ablauf-strahl,.person-daten,.fuss-netz,.feld-paar{grid-template-columns:1fr}
  .aussage-fakten{grid-template-columns:1fr; gap:18px}
  .werk-liste li{grid-template-columns:56px 1fr; gap:14px}
  .streifen ul{grid-template-columns:1fr 1fr}
  .streifen li:last-child{display:none}
  .hero-tat .knopf{flex:1 1 100%}
  .fuss-unten nav{margin-left:0; flex-wrap:wrap}
  .fragen-liste .antwort{padding-right:0}
  .bildband{height:auto; min-height:320px; padding:64px 0}
  .bildband .wrap{position:relative}
  .bildband img{position:absolute; inset:0}
  /* Erklaersatz raus: sonst wird das Band dreizeilig und schiebt den Kopf
     bis in den Hero hinein. Titel und Link genuegen. */
  .entwurf-band > .wrap > span{display:none}
  .entwurf-band .wrap{gap:10px}
}

@media (max-width: 420px){
  .marke span{display:none}
  .kopf .wrap{gap:14px}
}

/* ── Rechtstexte ─────────────────────────────────────────────────────────── */
.rechts-kopf{padding:calc(96px + clamp(30px, 4vw, 56px)) 0 clamp(24px, 3vw, 38px)}
.rechts-kopf h1{font-size:clamp(2.2rem, 4.4vw, 3.4rem); margin-top:14px}
.rechts-kopf .lead{margin-top:18px; 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(56px, 6vw, 96px)}
.rechtstext p,.rechtstext ul,.rechtstext dl,.rechtstext address,.rechts-hinweis{max-width:68ch}
.rechtstext section{border-top:var(--haar); padding:30px 0 4px}
.rechtstext h2{font-size:clamp(1.3rem, 2.2vw, 1.7rem); margin-bottom:16px}
.rechtstext h3{font-size:1.02rem; font-weight:600; margin:24px 0 8px}
.rechtstext p{margin-bottom:13px}
.rechtstext ul li{padding-left:22px; position:relative; margin-bottom:8px}
.rechtstext ul li::before{content:""; position:absolute; left:4px; top:.66em; width:5px; height:5px; background:var(--amber)}
.rechtstext dt{font-weight:600; color:var(--knochen); margin-top:16px}
.rechtstext dd{margin:2px 0 0}
.rechtstext address{font-style:normal; line-height:1.85}
.rechtstext a{color:var(--amber)}
.rechts-hinweis{background:var(--nacht-karte); border-left:2px solid var(--amber); padding:22px 26px; margin:26px 0 32px}
.rechts-hinweis b{display:block; margin-bottom:7px; color:var(--knochen)}
.rechts-hinweis p{font-size:.93rem; margin-bottom:0}
.zurueck{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  font-family:var(--zahl); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--leise); margin-top:34px;
}
.zurueck svg{width:16px; height:16px; rotate:180deg; fill:currentColor; transition:translate var(--tempo)}
.zurueck:hover{color:var(--amber)}
.zurueck:hover svg{translate:-4px 0}