/* ═══════════════════════════════════════════════════════════════════════════
   Dein Gutachter Oguzhan — Entwurf 1 „Kanzlei"
   Ruhig, hell, viel Weissraum. Haarlinien statt Kaesten, Serifen fuer die
   Ueberschriften (passt zur Serifen-Wortmarke im Logo), Tintenblau als
   einziger Akzent. Kein Effekt, der nicht der Lesbarkeit dient.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Marken-Kontrakt ──────────────────────────────────────────────────────── */
:root{
  --papier:      #FBFAF8;   /* Grundflaeche, warmes Weiss statt reines #fff  */
  --papier-tief: #F3F1EC;   /* abgesetzte Baender                            */
  --karte:       #FFFFFF;
  --tinte:       #16191D;   /* Fliesstext und Ueberschriften                 */
  --tinte-matt:  #585E67;   /* Nebentext                                     */
  /* Fuer Bildunterschriften und Labels — also fuer kleine Schrift. Der
     Wert davor (#8A9099) sah ruhig aus, kam aber nur auf 2,9:1 gegen das
     abgesetzte Band und war damit unter der Grenze fuer Fliesstext. */
  --tinte-leise: #666B73;   /* Bildunterschriften, Labels
                               (Band 4,8:1 · Papier 5,1:1 · Weiss 5,4:1) */
  --blau:        #1B3A5C;   /* der eine Akzent                               */
  --blau-hell:   #2C5580;
  --haar:        1px solid #E4E0D8;
  --haar-farbe:  #E4E0D8;

  --display: 'Gambetta', Georgia, 'Times New Roman', serif;
  --text:    'Switzer', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --spalte:  1180px;
  --tempo:   .45s cubic-bezier(.22,.68,.36,1);
  --kante:   3px;           /* bewusst fast eckig — Kanzlei, nicht App        */
}

/* ── Grundlagen ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--papier); color:var(--tinte);
  font-family:var(--text); font-size:17px; line-height:1.62;
  font-weight:400; -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{display:block; max-width:100%; height:auto}
a{color:inherit}
button{font:inherit; color:inherit}
h1,h2,h3,h4{margin:0; font-weight:400; line-height:1.08; letter-spacing:-.015em}
h1,h2{font-family:var(--display)}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}

:focus-visible{outline:2px solid var(--blau); outline-offset:3px; border-radius:2px}

.wrap{width:min(100% - 44px, var(--spalte)); margin-inline:auto}
.nur-vorleser{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}
.sprung{
  position:fixed; top:10px; left:10px; z-index:200; transform:translateY(-160%);
  background:var(--tinte); color:var(--papier); padding:12px 20px; border-radius:var(--kante);
}
.sprung:focus{transform:none}

/* ── Einblenden beim Scrollen ─────────────────────────────────────────────── */
/* Nur wenn JavaScript laeuft — sonst waere die Seite ohne Skript leer. */
.js .zeig{opacity:0; translate:0 14px; transition:opacity .7s ease, translate .7s cubic-bezier(.2,.7,.3,1)}
.js .zeig[data-da="1"]{opacity:1; translate:0 0}
.js .zeig{transition-delay:calc(var(--i, 0) * 70ms)}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .js .zeig{opacity:1; translate:none; transition:none}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
}

/* ── Wiederkehrende Bausteine ─────────────────────────────────────────────── */
.lab{
  display:block; font-size:.7rem; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--tinte-leise); margin-bottom:20px;
}
.lab--blau{color:var(--blau)}

.gross{font-size:clamp(2rem, 4.2vw, 3.15rem); letter-spacing:-.022em}
.mittel{font-size:clamp(1.5rem, 2.6vw, 2rem)}
.matt{color:var(--tinte-matt)}
.lead{font-size:clamp(1.06rem, 1.5vw, 1.2rem); line-height:1.66; color:var(--tinte-matt)}

section{padding:clamp(64px, 8vw, 118px) 0}
.band{background:var(--papier-tief)}
.strich-oben{border-top:var(--haar)}

/* Knoepfe: gefuellt = die eine Haupthandlung, Linie = alles daneben. */
.knopf{
  --bg:var(--tinte); --fg:var(--papier); --rand:var(--tinte);
  display:inline-flex; align-items:center; gap:11px; justify-content:center;
  padding:15px 26px; border-radius:var(--kante); border:1px solid var(--rand);
  background:var(--bg); color:var(--fg); text-decoration:none;
  font-weight:600; font-size:.97rem; letter-spacing:.005em; cursor:pointer;
  transition:background var(--tempo), color var(--tempo), border-color var(--tempo), translate var(--tempo);
}
.knopf:hover,.knopf:focus-visible{translate:0 -2px}
.knopf--blau{--bg:var(--blau); --fg:#fff; --rand:var(--blau)}
.knopf--blau:hover{--bg:var(--blau-hell); --rand:var(--blau-hell)}
.knopf--linie{--bg:transparent; --fg:var(--tinte); --rand:var(--haar-farbe)}
.knopf--linie:hover,.knopf--linie:focus-visible{--rand:var(--tinte)}
.knopf--klein{padding:11px 19px; font-size:.9rem}
.knopf svg{width:17px; height:17px; flex:none}

/* Textlink mit mitwachsender Unterlinie */
.tlink{
  color:var(--blau); text-decoration:none; font-weight:600;
  background-image:linear-gradient(currentColor, currentColor);
  background-size:100% 1px; background-repeat:no-repeat; background-position:0 100%;
  padding-bottom:2px; transition:background-size var(--tempo);
}
.tlink:hover,.tlink:focus-visible{background-size:0% 1px; background-position:100% 100%}

/* ── Kopfleiste ───────────────────────────────────────────────────────────── */
#kopf{
  position:sticky; top:0; z-index:80; background:rgba(251,250,248,.88);
  backdrop-filter:saturate(150%) blur(14px); border-bottom:1px solid transparent;
  transition:border-color var(--tempo), background var(--tempo);
}
#kopf[data-fest="1"]{border-bottom-color:var(--haar-farbe)}
.kopf-reihe{display:flex; align-items:center; gap:24px; min-height:76px}
.marke{display:flex; align-items:center; gap:13px; text-decoration:none; flex:none}
.marke img{width:auto; height:30px}
.marke span{
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--tinte-leise); border-left:var(--haar); padding-left:13px;
}
.haupt{display:flex; gap:30px; margin-left:auto}
.haupt a{
  text-decoration:none; font-size:.94rem; color:var(--tinte-matt);
  position:relative; padding:6px 0; transition:color var(--tempo);
}
.haupt a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--blau); 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-tel{
  display:flex; flex-direction:column; line-height:1.2; text-decoration:none; text-align:right;
}
.kopf-tel small{font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--tinte-leise)}
.kopf-tel b{font-family:var(--display); font-size:1.12rem; font-weight:500; letter-spacing:0}
.kopf-rechts{display:flex; align-items:center; gap:20px; margin-left:6px}

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

/* ── Auftakt ──────────────────────────────────────────────────────────────── */
.auftakt{padding:clamp(48px, 6vw, 86px) 0 clamp(56px, 7vw, 100px)}
.auftakt-netz{
  display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(34px, 5vw, 76px);
  align-items:center;
}
.auftakt h1{font-size:clamp(2.5rem, 5.4vw, 4.05rem); letter-spacing:-.028em}
.auftakt h1 em{font-style:italic; color:var(--blau)}
.auftakt .lead{margin-top:24px; max-width:46ch}
.auftakt-knoepfe{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}

/* Der Bildstapel: ein grosses Foto, darunter eine schmale Faktenzeile. */
.bildstapel{position:relative}
.bildstapel img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--kante); background:var(--papier-tief);
}
.bild-fuss{
  display:flex; gap:0; margin-top:0; background:var(--karte);
  border:var(--haar); border-top:none; border-radius:0 0 var(--kante) var(--kante);
}
.bild-fuss div{flex:1; padding:16px 18px}
.bild-fuss div + div{border-left:var(--haar)}
.bild-fuss b{display:block; font-family:var(--display); font-size:1.16rem; font-weight:500}
.bild-fuss small{font-size:.76rem; color:var(--tinte-leise); letter-spacing:.02em}
.bildstapel img{border-radius:var(--kante) var(--kante) 0 0}

/* ── Vertrauensband ───────────────────────────────────────────────────────── */
.vertrauen{border-top:var(--haar); border-bottom:var(--haar); padding:0}
.vertrauen ul{display:grid; grid-template-columns:repeat(4, 1fr)}
.vertrauen li{padding:26px 22px 26px 0; display:flex; gap:13px; align-items:flex-start}
.vertrauen li + li{border-left:var(--haar); padding-left:26px}
.vertrauen svg{width:19px; height:19px; flex:none; margin-top:3px; color:var(--blau)}
.vertrauen b{display:block; font-weight:600; font-size:.95rem}
.vertrauen small{color:var(--tinte-matt); font-size:.85rem; line-height:1.5; display:block; margin-top:2px}

/* ── Leistungen ───────────────────────────────────────────────────────────── */
.kopf-zeile{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(24px, 4vw, 64px); align-items:end; margin-bottom:clamp(38px, 4.6vw, 62px);
}

/* Erste Leistung gross mit Foto, die anderen als ruhige Liste mit Haarlinien —
   so entsteht Hierarchie, ohne dass sechs gleiche Kaesten nebeneinanderstehen. */
.leistung-haupt{
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(26px, 3.6vw, 52px);
  align-items:center; background:var(--karte); border:var(--haar);
  border-radius:var(--kante); overflow:hidden; margin-bottom:14px;
}
.leistung-haupt img{width:100%; height:100%; min-height:290px; object-fit:cover}
.leistung-haupt .text{padding:clamp(28px, 3.4vw, 46px) clamp(26px, 3vw, 44px) clamp(28px, 3.4vw, 46px) 0}
.leistung-haupt h3{font-family:var(--display); font-size:clamp(1.5rem,2.4vw,1.95rem); margin-bottom:14px}
.leistung-haupt ul{display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:20px}
.leistung-haupt ul li{font-size:.9rem; color:var(--tinte-matt); display:flex; gap:8px; align-items:center}
.leistung-haupt ul li::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--blau)}

.leistung-liste{border-top:var(--haar)}
.leistung-liste li{
  display:grid; grid-template-columns:56px minmax(220px,.9fr) minmax(0,1.4fr);
  gap:clamp(14px, 2.4vw, 40px); align-items:baseline;
  padding:24px 0; border-bottom:var(--haar);
}
.leistung-liste .nr{
  font-family:var(--display); font-size:.95rem; color:var(--tinte-leise);
  font-variant-numeric:tabular-nums;
}
.leistung-liste h3{font-size:1.1rem; font-family:var(--text); font-weight:600; letter-spacing:0}
.leistung-liste p{color:var(--tinte-matt); font-size:.95rem}
.leistung-liste li{transition:background var(--tempo)}
.leistung-liste li:hover{background:var(--karte)}

/* ── Ablauf ───────────────────────────────────────────────────────────────── */
.ablauf{counter-reset:schritt}
.ablauf-netz{display:grid; grid-template-columns:repeat(4, 1fr); gap:0; border-top:var(--haar)}
.ablauf-netz li{
  counter-increment:schritt; padding:34px 26px 38px 0; position:relative;
}
.ablauf-netz li + li{border-left:var(--haar); padding-left:30px}
.ablauf-netz li::before{
  content:counter(schritt, decimal-leading-zero);
  display:block; font-family:var(--display); font-size:2.1rem; color:var(--blau);
  line-height:1; margin-bottom:18px; font-variant-numeric:tabular-nums;
}
.ablauf-netz h3{font-size:1.08rem; font-family:var(--text); font-weight:600; letter-spacing:0; margin-bottom:9px}
.ablauf-netz p{color:var(--tinte-matt); font-size:.94rem}

/* ── Ansprueche ───────────────────────────────────────────────────────────── */
.anspruch-netz{display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(30px, 4vw, 70px)}
.anspruch-netz li{padding:24px 0; border-top:var(--haar); display:flex; gap:18px}
.anspruch-netz svg{width:20px; height:20px; flex:none; margin-top:4px; color:var(--blau)}
.anspruch-netz h3{font-size:1.06rem; font-family:var(--text); font-weight:600; letter-spacing:0; margin-bottom:6px}
.anspruch-netz p{color:var(--tinte-matt); font-size:.94rem}

.hinweis-kasten{
  margin-top:38px; padding:24px 26px; background:var(--karte);
  border:var(--haar); border-left:3px solid var(--blau); border-radius:0 var(--kante) var(--kante) 0;
}
.hinweis-kasten b{display:block; margin-bottom:6px; font-weight:600}
.hinweis-kasten p{color:var(--tinte-matt); font-size:.94rem}

/* ── Nach dem Unfall (Checkliste) ─────────────────────────────────────────── */
.unfall-netz{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(30px, 4.5vw, 72px); align-items:start}
.unfall-netz > img{border-radius:var(--kante); aspect-ratio:3/4; object-fit:cover; width:100%}
.check li{
  display:grid; grid-template-columns:30px 1fr; gap:14px; align-items:baseline;
  padding:15px 0; border-bottom:var(--haar);
}
.check li:first-child{border-top:var(--haar)}
.check .nr{font-family:var(--display); color:var(--blau); font-size:1rem; font-variant-numeric:tabular-nums}
.check b{font-weight:600}
.check span{display:block; color:var(--tinte-matt); font-size:.93rem; margin-top:2px}

/* ── Person ───────────────────────────────────────────────────────────────── */
.person-netz{display:grid; grid-template-columns:.78fr 1.22fr; gap:clamp(30px, 4.6vw, 74px); align-items:center}
.portrait-platz{
  aspect-ratio:4/5; border:1px dashed #C9C4B8; border-radius:var(--kante);
  background:var(--papier-tief); display:grid; place-items:center; text-align:center;
  padding:26px; color:var(--tinte-leise);
}
.portrait-platz svg{width:34px; height:34px; margin:0 auto 14px; opacity:.5}
.portrait-platz small{font-size:.8rem; line-height:1.55; display:block}
.person-netz blockquote{
  margin:0 0 26px; font-family:var(--display); font-size:clamp(1.35rem, 2.4vw, 1.85rem);
  line-height:1.34; letter-spacing:-.015em;
}
.person-daten{display:flex; flex-wrap:wrap; gap:0 44px; margin-top:28px; border-top:var(--haar); padding-top:22px}
.person-daten div{min-width:150px; padding:8px 0}
.person-daten small{display:block; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--tinte-leise)}
.person-daten b{font-weight:600; font-size:.97rem}

/* ── Einsatzgebiet ────────────────────────────────────────────────────────── */
/* Hier standen dreizehn Orte als Pillen mit rundem Rahmen, und der erste —
   Bielefeld — war blau abgesetzt und fett. Das las sich wie ein aktiver Filter:
   einer ausgewaehlt, zwoelf warten aufs Antippen. Anklicken kann man aber
   nichts, es ist eine reine Aufzaehlung.
   Nur den blauen Rahmen wegzunehmen haette nicht gereicht: rund umrandete
   Kaestchen sehen fuer sich schon nach Schaltflaeche aus. `border-radius:100px`
   widersprach ausserdem dem --kante:3px dieser Mappe („bewusst fast eckig —
   Kanzlei, nicht App").
   Jetzt: links der Sitz als Aussage, rechts der Umkreis als Liste mit
   Haarlinien. Beides ist eindeutig Text, nichts sieht nach Bedienelement aus. */
.gebiet{
  display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr);
  gap:0 64px; margin-top:46px; align-items:start;
}
.gebiet-marke{
  display:block; font-size:.7rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--tinte-leise);
  padding-bottom:15px; border-bottom:var(--haar);
}
.gebiet-stadt{
  margin:26px 0 0; font-family:var(--display); color:var(--blau);
  font-size:clamp(2.2rem, 4.4vw, 3.05rem); line-height:1.04; letter-spacing:-.022em;
}
.gebiet-satz{
  margin:16px 0 0; max-width:32ch; color:var(--tinte-matt);
  font-size:.97rem; line-height:1.65;
}
.orte{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 165px), 1fr));
  gap:0 34px; margin:0; padding:0; list-style:none;
}
.orte li{
  display:flex; align-items:baseline; gap:12px; padding:14px 2px;
  border-bottom:var(--haar); font-size:1rem; color:var(--tinte);
}
/* Der kurze Strich vor dem Ortsnamen richtet die Zeile aus. Bewusst ein Strich
   und kein Kaestchen und kein Haken — die duerften wieder nach Auswahl aussehen. */
.orte li::before{content:""; flex:none; width:14px; height:1px; background:var(--blau); opacity:.4}
/* Der Aufbau laeuft schneller durch als die 70ms der uebrigen Seite: bei zwoelf
   Zeilen stuende der letzte Ort sonst erst nach ueber einer Sekunde da. */
.js .orte li.zeig{transition-delay:calc(var(--i, 0) * 45ms)}

/* ── Fragen ───────────────────────────────────────────────────────────────── */
.fragen{border-top:var(--haar)}
.fragen details{border-bottom:var(--haar)}
.fragen summary{
  display:flex; align-items:flex-start; gap:20px; padding:22px 0; cursor:pointer;
  list-style:none; font-size:1.05rem; font-weight:600;
}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{
  content:""; width:11px; height:11px; margin-left:auto; margin-top:7px; flex:none;
  border-right:1.5px solid var(--tinte-leise); border-bottom:1.5px solid var(--tinte-leise);
  rotate:45deg; transition:rotate var(--tempo);
}
.fragen details[open] summary::after{rotate:-135deg}
.fragen .frage-nr{font-family:var(--display); color:var(--tinte-leise); font-size:.92rem; flex:none; width:26px}
.fragen p{padding:0 46px 24px; color:var(--tinte-matt); max-width:76ch}

/* ── Kontakt ──────────────────────────────────────────────────────────────── */
.kontakt-netz{display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(34px, 4.6vw, 76px); align-items:start}
.kontakt-liste li{padding:19px 0; border-bottom:var(--haar); display:grid; grid-template-columns:26px 1fr; gap:16px}
.kontakt-liste li:first-child{border-top:var(--haar)}
.kontakt-liste svg{width:19px; height:19px; color:var(--blau); margin-top:4px}
.kontakt-liste small{display:block; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--tinte-leise); margin-bottom:3px}
.kontakt-liste b{font-weight:600; font-size:1.02rem}
.kontakt-liste a{text-decoration:none}
.kontakt-liste a:hover b{color:var(--blau)}

form{background:var(--karte); border:var(--haar); border-radius:var(--kante); padding:clamp(24px, 3vw, 38px)}
.feld{margin-bottom:18px}
.feld label{display:block; font-size:.83rem; font-weight:600; margin-bottom:7px}
/* Der Umriss ist deutlich dunkler als eine normale Trennlinie. 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 15px; border:1px solid #8A857B; border-radius:var(--kante);
  background:var(--papier); font:inherit; font-size:.97rem; color:var(--tinte);
  transition:border-color var(--tempo), background var(--tempo);
}
.feld textarea{min-height:118px; resize:vertical}
.feld input:focus,.feld select:focus,.feld textarea:focus{border-color:var(--blau); background:var(--karte)}
.feld-paar{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.zustimmung{display:flex; gap:12px; align-items:flex-start; margin:22px 0 20px; font-size:.86rem; color:var(--tinte-matt)}
.zustimmung input{width:17px; height:17px; margin-top:3px; flex:none; accent-color:var(--blau)}
form .knopf{width:100%}
.form-fuss{margin-top:14px; font-size:.8rem; color:var(--tinte-leise); text-align:center}

/* ── Schlussaufruf ────────────────────────────────────────────────────────── */
.schluss{background:var(--tinte); color:var(--papier); text-align:center}
.schluss h2{font-size:clamp(1.9rem, 3.8vw, 2.9rem)}
.schluss p{color:#A9AFB8; margin-top:16px; max-width:52ch; margin-inline:auto}
.schluss .knoepfe{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:34px}
.schluss .knopf--linie{--fg:var(--papier); --rand:#3A4049}
.schluss .knopf--linie:hover{--rand:var(--papier)}
.schluss .knopf{--bg:var(--papier); --fg:var(--tinte); --rand:var(--papier)}

/* ── Fusszeile ────────────────────────────────────────────────────────────── */
footer{background:var(--papier-tief); padding:clamp(52px,6vw,78px) 0 34px; font-size:.93rem}
.fuss-netz{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.1fr; gap:clamp(24px,3vw,52px)}
footer h3{font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--tinte-leise); margin-bottom:16px; font-weight:600}
footer li{margin-bottom:9px}
footer a{color:var(--tinte-matt); text-decoration:none; transition:color var(--tempo)}
footer a:hover,footer a:focus-visible{color:var(--blau)}
footer address{font-style:normal; color:var(--tinte-matt); line-height:1.75}
.fuss-marke img{height:30px; width:auto; margin-bottom:16px}
.fuss-unten{
  display:flex; flex-wrap:wrap; gap:14px 26px; justify-content:space-between;
  margin-top:clamp(38px,4.4vw,58px); padding-top:22px; border-top:var(--haar);
  color:var(--tinte-leise); font-size:.85rem;
}
.fuss-unten a{color:var(--tinte-leise)}

/* ── Handy-Leiste ─────────────────────────────────────────────────────────── */
/* Erst ab dem Handy sichtbar. Drei gleich grosse Flaechen, jede ueber 48px
   hoch — das ist die Groesse, die man mit dem Daumen sicher trifft. */
.daumen{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:90;
  background:rgba(251,250,248,.96); backdrop-filter:blur(12px);
  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:11px 6px 12px; text-decoration:none; font-size:.72rem; font-weight:600;
  color:var(--tinte); min-height:56px; justify-content:center;
}
.daumen li + li a{border-left:var(--haar)}
.daumen svg{width:19px; height:19px}
/* Das WhatsApp-Gruen der Marke (#128C7E) kommt als kleine Schrift nur auf
   4,0:1 — knapp zu wenig. Der dunklere Ton der Marke passt und liegt bei
   6,7:1. */
.daumen .wa{color:#0C6559}
.daumen .haupt-tat{background:var(--blau); color:#fff}

/* ── Rechtstexte (Impressum, Datenschutz) ────────────────────────────────── */
.rechts-kopf{padding:clamp(46px, 5.4vw, 78px) 0 clamp(26px, 3vw, 40px)}
.rechts-kopf h1{font-size:clamp(2.1rem, 4vw, 3rem); margin-top:10px}
.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(56px, 6vw, 96px)}
/* Die Haarlinien laufen ueber die volle Spalte wie ueberall sonst, der Lesetext
   selbst bleibt schmal. Sonst stuende der Fliesstext mittig und die Ueberschrift
   links — das sieht nach Fehler aus. */
.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.28rem, 2vw, 1.6rem); margin-bottom:14px;
}
.rechtstext h3{
  font-family:var(--text); font-size:1.02rem; font-weight:600; letter-spacing:0;
  margin:22px 0 8px;
}
.rechtstext p{color:var(--tinte-matt); margin-bottom:13px}
.rechtstext p:last-child{margin-bottom:0}
.rechtstext ul{margin:0 0 14px; padding-left:0}
.rechtstext ul li{
  color:var(--tinte-matt); padding-left:22px; position:relative; margin-bottom:7px;
}
.rechtstext ul li::before{
  content:""; position:absolute; left:4px; top:.62em;
  width:5px; height:5px; border-radius:50%; background:var(--blau); opacity:.7;
}
.rechtstext dl{margin:0}
.rechtstext dt{font-weight:600; margin-top:15px}
.rechtstext dd{margin:2px 0 0; color:var(--tinte-matt)}
.rechtstext address{font-style:normal; color:var(--tinte-matt); line-height:1.8}
.rechtstext a{color:var(--blau)}
.rechts-hinweis{
  background:var(--papier-tief); border-left:3px solid var(--blau);
  padding:20px 24px; border-radius:0 var(--kante) var(--kante) 0; 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:600; color:var(--tinte-matt); margin-top:34px;
}
.zurueck svg{width:16px; height:16px; rotate:180deg; transition:translate var(--tempo)}
.zurueck:hover,.zurueck:focus-visible{color:var(--blau)}
.zurueck:hover svg{translate:-4px 0}

/* ── Schmale Bildschirme ──────────────────────────────────────────────────── */
@media (max-width: 1000px){
  .auftakt-netz,.leistung-haupt,.unfall-netz,.person-netz,.kontakt-netz{grid-template-columns:1fr}
  .leistung-haupt img{min-height:230px; aspect-ratio:16/9}
  .leistung-haupt .text{padding:30px 28px 34px}
  .vertrauen ul,.ablauf-netz{grid-template-columns:1fr 1fr}
  .vertrauen li:nth-child(3){border-left:none}
  .vertrauen li:nth-child(n+3){border-top:var(--haar)}
  .vertrauen li:nth-child(odd){padding-left:0}
  .vertrauen li:nth-child(even){border-left:var(--haar); padding-left:26px}
  .ablauf-netz li:nth-child(3){border-left:none; padding-left:0}
  .ablauf-netz li:nth-child(n+3){border-top:var(--haar)}
  .anspruch-netz{grid-template-columns:1fr}
  .kopf-zeile{grid-template-columns:1fr}
  .gebiet{grid-template-columns:minmax(0, 1fr); gap:42px 0}
  .unfall-netz > img{aspect-ratio:16/10}
  .portrait-platz{aspect-ratio:16/9; max-width:420px}
  .fuss-netz{grid-template-columns:1fr 1fr}
}

/* Die Kopfleiste wird frueher schmal als der Rest: Logo + sechs Menuepunkte +
   Telefon + Knopf brauchen zusammen rund 910px. Unter 940px wandert das Menue
   deshalb hinter den Burger, die Rufnummer bleibt aber sichtbar. */
@media (max-width: 940px){
  .haupt{
    position:fixed; inset:76px 0 auto; flex-direction:column; gap:0;
    background:var(--papier); border-bottom:var(--haar); padding:8px 22px 22px;
    transform:translateY(-130%); transition:transform .42s cubic-bezier(.3,.8,.3,1);
    box-shadow:0 22px 40px rgba(22,25,29,.09);
  }
  .haupt[data-auf="1"]{transform:none}
  .haupt a{padding:15px 0; border-bottom:var(--haar); font-size:1.02rem}
  .haupt a::after{display:none}
  .kopf-rechts .knopf{display:none}
  .burger{display:block}
  .kopf-rechts{margin-left:auto}
}

@media (max-width: 720px){
  body{font-size:16px}
  .wrap{width:min(100% - 34px, var(--spalte))}
  .kopf-tel{display:none}   /* steht unten in der Daumenleiste */
  body{padding-bottom:64px}
  .daumen{display:block}
  .vertrauen ul,.ablauf-netz,.fuss-netz,.feld-paar{grid-template-columns:1fr}
  .vertrauen li,.ablauf-netz li{border-left:none !important; padding-left:0 !important; border-top:var(--haar)}
  .vertrauen li:first-child,.ablauf-netz li:first-child{border-top:none}
  .ablauf-netz li{padding:26px 0 28px}
  .leistung-liste li{grid-template-columns:38px 1fr; gap:10px 14px}
  .leistung-liste p{grid-column:2}
  .fragen p{padding-left:0; padding-right:0}
  .auftakt-knoepfe .knopf{flex:1 1 100%}
  .schluss .knoepfe .knopf{flex:1 1 100%}
}