/* Klassisch-seriös — Kanzlei Stefanie Weber (Demo-Entwurf)
   Schriften lokal eingebunden, keine externen Requests. */
@font-face{font-family:'Source Sans 3';src:url('assets/fonts/sourcesans3-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Source Sans 3';src:url('assets/fonts/sourcesans3-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Source Sans 3';src:url('assets/fonts/sourcesans3-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Lora';src:url('assets/fonts/lora-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Lora';src:url('assets/fonts/lora-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Lora';src:url('assets/fonts/lora-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Playfair Display';src:url('assets/fonts/playfair-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Playfair Display';src:url('assets/fonts/playfair-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}

:root{
  --bordeaux:#bb0264; --bordeaux-dunkel:#8e0149; --grau-marke:#939598;
  --bg:#ffffff; --flaeche-2:#f4f6f8; --karte-bg:#ffffff;
  --ink:#2c3540; --ink-stark:#16212e; --ink-weich:#505d6b;
  --rand:#dfe4e9; --rand-stark:#c3ccd5; --link:#bb0264; --fokus:#bb0264;
  --marke-ink:#16212e; --marke-weich:#6b7885; --nav-ink:#16212e;
  --kopf-bg:#ffffff; --kopf-rand:3px solid #16212e; --kopf-h:4.75rem;
  --hero-bg:#f4f6f8; --seitenkopf-bg:#f4f6f8; --kontakt-bg:#ffffff;
  --zeiten-bg:#ffffff; --zeiten-rand:1px solid #c3ccd5; --karte-rand:1px solid #dfe4e9;
  --dunkel-bg:#16212e; --hinweis-bg:#f4f6f8;
  --offen-bg:#e3f3e8; --offen-ink:#1c6b39; --zu-bg:#f2e6e9; --zu-ink:#8a1836;
  --fuss-bg:#16212e; --fuss-ink:#d5dce4; --fuss-titel:#8fa0b2; --fuss-link:#ffffff; --fuss-marke:#ffffff; --fuss-rand:rgba(255,255,255,.15);
  --font-titel:'Lora',Georgia,serif; --font-text:'Source Sans 3',system-ui,sans-serif; --font-marke:'Source Sans 3',system-ui,sans-serif;
  --gew-titel:600; --sp-titel:-0.008em;
  --fs-body:1.0625rem; --fs-lead:1.15rem; --fs-h1:clamp(2rem,5vw,3.1rem); --fs-h2:clamp(1.5rem,3vw,2.1rem); --fs-h3:1.2rem;
  /* Knöpfe rund wie in Entwurf 3 (Wunsch der Kundin, 10.08.). Karten und Bilder bleiben
     ruhig-eckig mit leichter Rundung, damit das klassische Raster erhalten bleibt. */
  --radius-knopf:999px; --radius-karte:10px; --radius-bild:8px; --radius-nr:50%; --radius-punkt:50%;
  --breite:70rem; --abstand:clamp(3rem,7vw,5rem); --abstand-gross:clamp(3.5rem,8vw,6rem);
  --schatten:0 1px 3px rgba(22,33,46,.07); --schatten-hoch:0 10px 28px rgba(22,33,46,.11); --t:.18s ease;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-text);font-size:var(--fs-body);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
h1,h2,h3,h4{margin:0;font-family:var(--font-titel);font-weight:var(--gew-titel);line-height:1.15;text-wrap:balance;color:var(--ink-stark);letter-spacing:var(--sp-titel);
  /* Lange deutsche Komposita ("Datenschutzerklärung") müssen auf schmalen Displays trennen dürfen */
  overflow-wrap:break-word;hyphens:auto;}
h1{font-size:var(--fs-h1);} h2{font-size:var(--fs-h2);} h3{font-size:var(--fs-h3);}
p{margin:0 0 1rem;} p:last-child{margin-bottom:0;}
img,picture,svg{max-width:100%;} img{display:block;height:auto;}
a{color:var(--link);}
ul,ol{margin:0;padding:0;}
address{font-style:normal;}
:focus-visible{outline:3px solid var(--fokus);outline-offset:3px;border-radius:2px;}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink-stark);color:#fff;padding:.75rem 1.25rem;z-index:100;}
.skip:focus{left:0;}
.huelle{width:min(100% - 2.5rem, var(--breite));margin-inline:auto;}
.huelle--schmal{width:min(100% - 2.5rem, 46rem);}
.vorspann{font-size:var(--fs-lead);color:var(--ink-weich);max-width:60ch;}

/* Knöpfe — Tap-Targets mindestens 44px */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3rem;padding:.75rem 1.5rem;border-radius:var(--radius-knopf);font-weight:600;font-size:1rem;text-decoration:none;border:2px solid transparent;transition:background var(--t),color var(--t),border-color var(--t),transform var(--t);}
.knopf--haupt{background:var(--bordeaux);color:#fff;border-color:var(--bordeaux);}
.knopf--haupt:hover{background:var(--bordeaux-dunkel);border-color:var(--bordeaux-dunkel);}
.knopf--rand{background:transparent;color:var(--ink-stark);border-color:var(--rand-stark);}
.knopf--rand:hover{background:var(--flaeche-2);border-color:var(--ink-stark);}

/* Kopf */
.kopf{background:var(--kopf-bg);border-bottom:var(--kopf-rand);position:sticky;top:0;z-index:50;}
.kopf-innen{display:flex;align-items:center;gap:1rem;min-height:var(--kopf-h);flex-wrap:wrap;}
.marke{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;color:inherit;margin-right:auto;padding:.5rem 0;}
.logo-mark{width:1.9rem;height:auto;flex:none;}
.marke-text{display:flex;flex-direction:column;line-height:1.05;}
.wortmarke{font-family:var(--font-marke);font-size:1.02rem;letter-spacing:.09em;color:var(--marke-ink);white-space:nowrap;}
.wm-1{font-weight:400;} .wm-2{font-weight:700;} .wm-punkt{color:var(--bordeaux);font-weight:700;}
.marke-rolle{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--marke-weich);margin-top:.18rem;}
.hauptnav ul{list-style:none;display:flex;gap:.25rem;}
.hauptnav a{display:block;padding:.7rem .85rem;min-height:44px;display:flex;align-items:center;text-decoration:none;color:var(--nav-ink);font-weight:600;font-size:.95rem;border-bottom:2px solid transparent;transition:color var(--t),border-color var(--t);}
.hauptnav a:hover{color:var(--bordeaux);}
.hauptnav a[aria-current="page"]{color:var(--bordeaux);border-bottom-color:var(--bordeaux);}
.kopf-tel{display:none;align-items:center;min-height:44px;text-decoration:none;color:var(--nav-ink);font-weight:600;font-size:.95rem;white-space:nowrap;}
.kopf-tel:hover{color:var(--bordeaux);}
.nav-schalter{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.5rem .85rem;background:none;border:1px solid var(--rand);border-radius:var(--radius-knopf);font:inherit;font-weight:600;font-size:.9rem;color:var(--nav-ink);cursor:pointer;}
.nav-balken{display:block;width:1.1rem;height:2px;background:currentColor;box-shadow:0 5px 0 currentColor,0 -5px 0 currentColor;}
@media (max-width:860px){
  .hauptnav{flex-basis:100%;display:none;}
  .hauptnav[data-offen="true"]{display:block;}
  .hauptnav ul{flex-direction:column;gap:0;padding-bottom:.75rem;}
  .hauptnav a{border-bottom:1px solid var(--rand);border-radius:0;}
  .hauptnav a[aria-current="page"]{border-bottom-color:var(--bordeaux);}
}
@media (min-width:861px){ .nav-schalter{display:none;} .kopf-tel{display:inline-flex;align-items:center;gap:.4rem;margin-left:1.25rem;} }

/* Hero (Grundlagen; Feinheiten je Design) */
.hero{background:var(--hero-bg);}
.hero-innen{padding-block:var(--abstand-gross);}
.hero-ort{font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bordeaux);font-weight:600;margin-bottom:.9rem;}
.hero h1{margin-bottom:.5rem;}
.hero-titel{font-size:var(--fs-lead);color:var(--ink-weich);font-weight:600;margin-bottom:1rem;}
.hero-lead{font-size:1.075rem;color:var(--ink-weich);max-width:52ch;margin-bottom:1.75rem;}
.hero-knoepfe{display:flex;gap:.75rem;flex-wrap:wrap;}
.hero-bild img{border-radius:var(--radius-bild);}

/* Öffnungszeiten */
.zeiten{padding-block:var(--abstand);}
.zeiten-innen{width:min(100% - 2.5rem, var(--breite));margin-inline:auto;background:var(--zeiten-bg);border:var(--zeiten-rand);border-radius:var(--radius-karte);padding:clamp(1.5rem,4vw,2.5rem);box-shadow:var(--schatten);}
.zeiten-kopf{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:1.25rem;}
.zeiten-kopf h2{font-size:var(--fs-h2);}
.zeiten-status{margin:0;font-weight:700;font-size:.9rem;padding:.3rem .8rem;border-radius:999px;}
.zeiten-status[data-offen="ja"]{background:var(--offen-bg);color:var(--offen-ink);}
.zeiten-status[data-offen="nein"]{background:var(--zu-bg);color:var(--zu-ink);}
.zeiten-liste{margin:0;display:grid;gap:.6rem;}
.z-zeile{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;padding-bottom:.6rem;border-bottom:1px solid var(--rand);}
.z-zeile dt{font-weight:600;color:var(--ink-stark);margin:0;}
.z-zeile dd{margin:0;font-variant-numeric:tabular-nums;color:var(--ink-weich);}
.zeiten-zusatz{margin-top:1rem;color:var(--ink-weich);font-style:italic;}
.zeiten-kontakt{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.5rem;}
.zeiten--band .zeiten-innen{border-radius:0;border-inline:0;box-shadow:none;}
.zeiten--dunkel{background:var(--dunkel-bg);}
.zeiten--dunkel .zeiten-innen{background:transparent;border:1px solid rgba(255,255,255,.18);box-shadow:none;}
.zeiten--dunkel h2,.zeiten--dunkel .z-zeile dt{color:#fff;}
.zeiten--dunkel .z-zeile dd,.zeiten--dunkel .zeiten-zusatz{color:rgba(255,255,255,.78);}
.zeiten--dunkel .z-zeile{border-bottom-color:rgba(255,255,255,.16);}
.zeiten--dunkel .knopf--rand{color:#fff;border-color:rgba(255,255,255,.5);}
.zeiten--dunkel .knopf--rand:hover{background:rgba(255,255,255,.1);}

/* Rechtsgebiete */
.gebiete{padding-block:var(--abstand);}
.gebiete h2{margin-bottom:1.75rem;}
.gebiet-gitter{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));}
.gebiet-karte{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:var(--karte-bg);border:var(--karte-rand);border-radius:var(--radius-karte);overflow:hidden;transition:transform var(--t),box-shadow var(--t),border-color var(--t);}
.gebiet-karte:hover{transform:translateY(-3px);box-shadow:var(--schatten-hoch);border-color:var(--bordeaux);}
.gebiet-bild img{width:100%;aspect-ratio:3/2;object-fit:cover;}
.gebiet-text{padding:1.5rem;display:flex;flex-direction:column;gap:.6rem;flex:1;}
.gebiet-text p{color:var(--ink-weich);flex:1;}
.mehr{font-weight:600;color:var(--bordeaux);}
.mehr::after{content:" →";}

/* Vertrauen */
.vertrauen{padding-block:var(--abstand);background:var(--flaeche-2);}
.vertrauen h2{margin-bottom:1.75rem;}
.vertrauen-gitter{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));}
.vk h3{font-size:1.075rem;margin-bottom:.5rem;}
.vk p{color:var(--ink-weich);font-size:.975rem;}

/* Ablauf */
.ablauf{padding-block:var(--abstand);}
.ablauf h2{margin-bottom:.75rem;}
.ablauf .vorspann{margin-bottom:2rem;}
.ablauf-liste{list-style:none;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));counter-reset:s;}
.ablauf-schritt{position:relative;padding-top:3.25rem;}
.ablauf-nr{position:absolute;top:0;left:0;width:2.5rem;height:2.5rem;display:grid;place-items:center;border-radius:var(--radius-nr);background:var(--bordeaux);color:#fff;font-weight:700;font-family:var(--font-titel);}
.ablauf-schritt h3{font-size:1.075rem;margin-bottom:.4rem;}
.ablauf-schritt p{color:var(--ink-weich);font-size:.975rem;}

/* Kontakt */
.kontakt-block{padding-block:var(--abstand);background:var(--kontakt-bg);}
.kontakt-innen{display:grid;gap:2.5rem;align-items:center;}
@media (min-width:800px){ .kontakt-innen:has(.kontakt-bild){grid-template-columns:1.15fr .85fr;} }
.kontakt-text h2{margin-bottom:.75rem;}
.kontakt-text>p{color:var(--ink-weich);max-width:52ch;}
.kontakt-daten{margin:1.5rem 0;display:grid;gap:.75rem;}
.kd-zeile{display:flex;gap:1rem;flex-wrap:wrap;align-items:baseline;margin:0;padding-bottom:.75rem;border-bottom:1px solid var(--rand);}
.kd-label{flex:0 0 5.5rem;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-weich);font-weight:600;}
.kd-wert{font-size:1.075rem;font-weight:600;color:var(--ink-stark);word-break:break-word;}
a.kd-wert{color:var(--bordeaux);display:inline-flex;align-items:center;min-height:44px;}
.kontakt-knoepfe{display:flex;gap:.75rem;flex-wrap:wrap;}
.kontakt-bild img{border-radius:var(--radius-bild);}

/* Seitenkopf */
.seitenkopf{padding-block:var(--abstand) 0;background:var(--seitenkopf-bg);}
.seitenkopf h1{margin-bottom:.75rem;}
.seitenkopf--mit-bild{padding-bottom:var(--abstand);}
.seitenkopf-innen{display:grid;gap:2rem;align-items:center;}
@media (min-width:800px){ .seitenkopf-innen{grid-template-columns:1.1fr .9fr;} }
.seitenkopf-bild img{border-radius:var(--radius-bild);aspect-ratio:3/2;object-fit:cover;}

/* Themen */
.themen{padding-block:var(--abstand);}
.themen h2{margin-bottom:1.75rem;}
/* Höchstens drei Spalten. Bei fünf Themengruppen ergab die freie Aufteilung sonst vier
   nebeneinander und eine einzelne darunter mit großer Leerfläche; das wirkt unfertig.
   Mit drei Spalten wird daraus 3 + 2. (Befund vom 18.08.2026) */
.themen-gitter{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));max-width:calc(3 * 22rem + 2 * 1.5rem);}
.themen-gruppe{background:var(--karte-bg);border:var(--karte-rand);border-radius:var(--radius-karte);padding:1.5rem;}
.themen-gruppe h3{font-size:1rem;letter-spacing:.04em;text-transform:uppercase;color:var(--bordeaux);margin-bottom:.85rem;}
.themen-gruppe ul{list-style:none;display:grid;gap:.55rem;}
/* Lange Rechtsbegriffe ("Geschwindigkeitsüberschreitung") müssen umbrechen dürfen,
   sonst ragen sie aus der Karte heraus. */
.themen-gruppe li{padding-left:1.4rem;position:relative;color:var(--ink-weich);overflow-wrap:break-word;hyphens:auto;}
.themen-gruppe li::before{content:"";position:absolute;left:0;top:.62em;width:.5rem;height:.5rem;background:var(--bordeaux);border-radius:var(--radius-punkt);}
.themen-hinweis{margin-top:1.75rem;padding:1.25rem 1.5rem;background:var(--flaeche-2);border-left:3px solid var(--bordeaux);color:var(--ink-weich);border-radius:var(--radius-karte);}

/* Querverweise */
.quer{padding-block:0 var(--abstand);}
.quer h2{font-size:1.075rem;margin-bottom:1rem;}
.quer-links{display:flex;gap:.75rem;flex-wrap:wrap;}
.quer-link{display:inline-flex;align-items:center;min-height:44px;padding:.6rem 1.25rem;border:1px solid var(--rand-stark);border-radius:var(--radius-knopf);text-decoration:none;color:var(--ink-stark);font-weight:600;transition:border-color var(--t),background var(--t);}
.quer-link:hover{border-color:var(--bordeaux);background:var(--flaeche-2);color:var(--bordeaux);}

/* Kanzlei */
.haltung{padding-block:var(--abstand);background:var(--flaeche-2);}
.haltung-innen,.team-innen{display:grid;gap:2.5rem;align-items:center;}
@media (min-width:800px){ .haltung-innen{grid-template-columns:1fr 1fr;} .team-innen{grid-template-columns:.9fr 1.1fr;} }
.haltung-text h2,.team-text h2{margin-bottom:1rem;}
.haltung-text p,.team-text p{color:var(--ink-weich);}
.haltung-bild img,.team-bild img{border-radius:var(--radius-bild);aspect-ratio:3/2;object-fit:cover;}
.vita{padding-block:var(--abstand);}
.vita h2{margin-bottom:1.75rem;}
.vita-liste{list-style:none;display:grid;gap:0;max-width:44rem;}
.vita-punkt{display:grid;grid-template-columns:7.5rem 1fr;gap:1.25rem;padding:1rem 0;border-bottom:1px solid var(--rand);align-items:baseline;}
.vita-jahr{font-weight:700;color:var(--bordeaux);font-variant-numeric:tabular-nums;font-family:var(--font-titel);}
.vita-text{color:var(--ink-weich);}
@media (max-width:520px){ .vita-punkt{grid-template-columns:1fr;gap:.25rem;} }
.team{padding-block:var(--abstand);background:var(--flaeche-2);}

/* Anfahrt + Karte */
.anfahrt{padding-block:var(--abstand);}
.anfahrt h2{margin-bottom:1.5rem;}
.anfahrt-bild{display:block;margin-bottom:2rem;}
.anfahrt-bild img{width:100%;aspect-ratio:21/9;object-fit:cover;object-position:center 60%;border-radius:var(--radius-bild);}
@media (max-width:700px){ .anfahrt-bild img{aspect-ratio:3/2;} }
.anfahrt-gitter{display:grid;gap:2rem;}
@media (min-width:800px){ .anfahrt-gitter{grid-template-columns:1fr 1.2fr;} }
.anfahrt-hinweise{display:grid;gap:1.5rem;align-content:start;}
.ah h3{font-size:1.05rem;margin-bottom:.4rem;}
.ah p{color:var(--ink-weich);font-size:.975rem;}
.karte{border:var(--karte-rand);border-radius:var(--radius-karte);overflow:hidden;background:var(--flaeche-2);min-height:20rem;display:grid;}
.karte-platzhalter{padding:2rem;display:grid;gap:1rem;place-content:center;text-align:center;}
.karte-adresse{font-size:1.125rem;font-weight:600;color:var(--ink-stark);margin:0;}
.karte-hinweis{font-size:.9rem;color:var(--ink-weich);max-width:34ch;margin-inline:auto;}
.karte-platzhalter .knopf{justify-self:center;}
.karte-alt{font-size:.875rem;margin:0;}
/* eigenständiger Aktionslink (kein Fließtext) — braucht klickbare Fläche */
.karte-alt a{display:inline-flex;align-items:center;min-height:44px;padding-inline:.5rem;}
.karte iframe{width:100%;height:100%;min-height:20rem;border:0;display:block;}

/* Rechtstexte */
.rechtstext{padding-block:var(--abstand);}
.rechtstext h2{font-size:1.2rem;margin:2rem 0 .75rem;}
.rechtstext h2:first-of-type{margin-top:0;}
.rechtstext p{color:var(--ink-weich);}
/* Lange URLs/Fachbegriffe dürfen umbrechen, sonst läuft die Seite auf schmalen Displays über */
.rechtstext a,.rechtstext p,.recht-liste li{overflow-wrap:anywhere;}
.recht-liste{list-style:none;display:grid;gap:.4rem;margin:0 0 1rem;}
.recht-liste li{padding-left:1.3rem;position:relative;color:var(--ink-weich);}
.recht-liste li::before{content:"";position:absolute;left:0;top:.62em;width:.4rem;height:.4rem;background:var(--bordeaux);border-radius:50%;}
.entwurf-hinweis{background:var(--hinweis-bg);border-left:4px solid var(--bordeaux);padding:1.1rem 1.35rem;border-radius:var(--radius-karte);margin-bottom:2rem;color:var(--ink-stark)!important;}
.todo{background:#fff3cd;color:#664d03;padding:.15rem .45rem;border-radius:4px;font-size:.92em;font-weight:600;}

/* Fuß */
.fuss{background:var(--fuss-bg);color:var(--fuss-ink);padding-block:var(--abstand) 0;margin-top:var(--abstand);}
.fuss-innen{display:grid;gap:2.25rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));padding-bottom:2.25rem;}
.fuss h2{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fuss-titel);margin-bottom:.9rem;}
.fuss a{color:var(--fuss-link);text-decoration:none;}
.fuss a:hover{text-decoration:underline;}
.fuss address{line-height:1.9;}
.marke--fuss{margin-right:0;}
.marke--fuss .wortmarke{color:var(--fuss-marke);}
.marke--fuss .marke-rolle{color:var(--fuss-titel);}
.fuss-titel{margin-top:.9rem;font-size:.9rem;color:var(--fuss-titel);line-height:1.7;}
.fuss-zeiten{list-style:none;display:grid;gap:.45rem;font-size:.925rem;}
.fuss-zeiten li{display:flex;flex-direction:column;}
.fuss-zeiten li span:first-child{color:var(--fuss-titel);}
.fuss-zusatz{margin-top:.75rem;font-size:.875rem;font-style:italic;color:var(--fuss-titel);}
.fuss-links{list-style:none;display:grid;gap:.5rem;}
.fuss-unten{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-block:1.25rem;border-top:1px solid var(--fuss-rand);font-size:.85rem;color:var(--fuss-titel);}
.fuss-unten p{margin:0;}
.fuss-demo{opacity:.75;}
/* Urhebervermerk: bewusst zurückhaltend. Er soll auffindbar sein, nicht auffallen. */
.fuss-urheber{opacity:.7;}
.fuss-urheber a{color:inherit;text-decoration:underline;text-underline-offset:2px;}
.fuss-urheber a:hover{opacity:1;}

/* Sticky-Anruf (nur mobil) */
.sticky-tel{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:60;display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:3.25rem;background:var(--bordeaux);color:#fff;text-decoration:none;font-weight:700;border-radius:var(--radius-knopf);box-shadow:0 6px 20px rgba(0,0,0,.28);}
@media (min-width:861px){ .sticky-tel{display:none;} }
@media (max-width:860px){ .fuss{padding-bottom:4.5rem;} }
/* Solange die Kontaktknöpfe sichtbar sind, tritt der Balken zurück. Er lag sonst genau auf
   dem E-Mail-Knopf, und wer schreiben wollte, traf ihn nicht (Befund vom 18.08.2026). */
.sticky-tel{transition:opacity .18s ease, transform .18s ease;}
.sticky-tel.ist-verdeckt{opacity:0;transform:translateY(120%);pointer-events:none;}
@media (prefers-reduced-motion:reduce){ .sticky-tel{transition:none;} }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
}


/* Klassisch: strenges Raster, Bild rechts, kräftige Trennlinien */
@media (min-width:900px){ .hero--klassisch .hero-innen{display:grid;grid-template-columns:1.05fr .95fr;gap:3.5rem;align-items:center;} }
.hero--klassisch{border-bottom:1px solid var(--rand-stark);}
.hero--klassisch .hero-bild img{aspect-ratio:4/3;object-fit:cover;box-shadow:var(--schatten-hoch);}
/* Auf dem Handy stapeln Text und Bild untereinander. Ohne Abstand klebt der
   E-Mail-Knopf direkt am Foto. */
@media (max-width:899px){ .hero--klassisch .hero-bild{display:block;margin-top:2rem;} }
.hero--klassisch h1{letter-spacing:-.015em;}
h2{padding-bottom:.6rem;border-bottom:2px solid var(--rand);}
.zeiten-kopf h2,.fuss h2,.gebiet-text h3,.vk h3,.ablauf-schritt h3,.themen-gruppe h3,.ah h3,.quer h2{border-bottom:0;padding-bottom:0;}
.gebiet-karte{border-top:3px solid var(--bordeaux);}
.vita-punkt{border-bottom:1px solid var(--rand-stark);}