/* ============================================================
   Ambulanter Pflegedienst Angelika Herrmann · site-v11
   Designsystem „Klare Kante" – Vollbild-Fotografie, präzise
   Diagonalen, symmetrische Raster. Nativer Scroll, kein Lenis.
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --papier:#fcfdfe;
  --wolke:#f2f6f9;
  --eis:#e7eff5;
  --eis-tief:#d5e2ec;
  --tinte:#10293a;
  --nacht:#0b1c28;
  --gelb:#ffdf00;
  --gelb-tief:#f2c800;
  --blau:#19bcff;
  --blau-tief:#0b7fb4;
  --grau:#5b6d7a;

  --display:"Clash Display",sans-serif;
  --text:"Satoshi",sans-serif;

  /* Die Signatur: eine Diagonale, überall gleich */
  --keil:4.5rem;                 /* Höhe des diagonalen Anschnitts */

  --breite:76rem;
  --radius:1.25rem;
  --schatten:0 24px 60px -30px rgba(16,41,58,.25);
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- Reset / Basis ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--text);
  color:var(--tinte);
  background:var(--papier);
  line-height:1.65;
  font-size:1.0625rem;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:var(--blau-tief);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--tinte)}
:focus-visible{outline:3px solid var(--blau);outline-offset:3px;border-radius:4px}
::selection{background:var(--gelb);color:var(--tinte)}

h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.06;letter-spacing:-.01em}
h1{font-size:clamp(2.6rem,6.2vw,4.9rem)}
h2{font-size:clamp(2rem,4.2vw,3.3rem)}
h3{font-size:clamp(1.25rem,2vw,1.55rem)}
p{max-width:38rem}

.skip{position:absolute;left:-999px;top:0;background:var(--gelb);color:var(--tinte);padding:.8rem 1.4rem;z-index:100;font-weight:700}
.skip:focus{left:1rem;top:1rem}

/* ---------- Marker (gelbe Unterstreichung) ---------- */
.marker{
  font-style:normal;
  background-image:linear-gradient(104deg,transparent .4rem,var(--gelb) .4rem,var(--gelb) calc(100% - .4rem),transparent calc(100% - .4rem));
  background-repeat:no-repeat;
  background-size:100% .38em;
  background-position:0 78%;
  padding:0 .1em;
}
/* Auf dunklem Grund: Marker wird zur kräftigen Unterstreichung */
.hero-voll .marker,.hero-seite .marker,.page-head .marker,.band .marker,.cta-schluss .marker{
  background-size:100% .14em;
  background-position:0 97%;
}

/* ---------- Header ---------- */
.site-head{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;
  padding-block:1rem;
  /* Auf derselben Achse wie .innen: Logo und Telefon stehen bündig zum Inhalt,
     statt auf breiten Bildschirmen an die Fensterränder zu wandern. */
  padding-inline:max(clamp(1.25rem,4vw,3rem),calc((100% - var(--breite)) / 2));
  transition:background .35s,box-shadow .35s,padding .35s;
}
.site-head.fest{
  background:rgba(252,253,254,.92);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--eis-tief);
  padding-top:.6rem;padding-bottom:.6rem;
}
.head-logo img{height:3.2rem;width:auto}
.site-head .logo-dunkel{display:none}
.site-head.fest .logo-dunkel{display:block}
.site-head.fest .logo-hell{display:none}

.site-nav{display:flex;align-items:center;gap:.25rem}
.site-nav a{
  font-weight:500;text-decoration:none;color:#fff;
  padding:.55rem .9rem;border-radius:999px;font-size:.95rem;
  transition:background .2s,color .2s;
}
.site-head.fest .site-nav a{color:var(--tinte)}
.site-nav a:hover{background:rgba(255,255,255,.16);color:#fff}
.site-head.fest .site-nav a:hover{background:var(--eis);color:var(--tinte)}
.site-nav a[aria-current="page"]{background:var(--gelb);color:var(--tinte);font-weight:700}
.site-head.fest .site-nav a[aria-current="page"]{background:var(--gelb);color:var(--tinte)}

.head-tel{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--gelb);color:var(--tinte)!important;
  font-weight:700;text-decoration:none;
  padding:.65rem 1.2rem;border-radius:999px;font-size:.95rem;
  transition:transform .2s var(--ease),box-shadow .2s;
  white-space:nowrap;
}
.head-tel:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(242,200,0,.7)}

.nav-toggle{
  display:none;border:0;background:var(--gelb);color:var(--tinte);
  font:inherit;font-weight:700;padding:.6rem 1.1rem;border-radius:999px;cursor:pointer;
  align-items:center;gap:.5rem;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--text);font-weight:700;font-size:1rem;
  text-decoration:none;cursor:pointer;border:0;
  padding:1rem 1.8rem;border-radius:999px;
  transition:transform .25s var(--ease),box-shadow .25s,background .2s,color .2s;
}
.btn svg{transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn-gelb{background:var(--gelb);color:var(--tinte)}
.btn-gelb:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(242,200,0,.75);color:var(--tinte)}
.btn-dunkel{background:var(--tinte);color:#fff}
.btn-dunkel:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(16,41,58,.6);color:#fff}
.btn-hell{background:#fff;color:var(--tinte);box-shadow:inset 0 0 0 1.5px var(--eis-tief)}
.btn-hell:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1.5px var(--tinte);color:var(--tinte)}
.btn-kontur{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6)}
.btn-kontur:hover{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 0 0 1.5px #fff}

/* ---------- Vollbild-Hero (Startseite) ---------- */
.hero-voll{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  color:#fff;isolation:isolate;
  padding:8rem clamp(1.25rem,4vw,3rem) calc(var(--keil) + 3rem);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--keil)),0 100%);
}
.hero-voll .hg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-voll .hg img{width:100%;height:112%;object-fit:cover;object-position:var(--fokus,center 35%)}
.hero-voll::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(11,28,40,.9) 0%,rgba(11,28,40,.4) 45%,rgba(11,28,40,.2) 100%);
}
/* Zweiter, linksbetonter Schleier: Textspalte liest sauber, das Foto bleibt rechts hell */
.hero-voll::before,.hero-seite::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,rgba(11,28,40,.78) 0%,rgba(11,28,40,.5) 34%,rgba(11,28,40,0) 62%);
}
.hero-inhalt{max-width:var(--breite);margin:0 auto;width:100%}
.hero-inhalt .eyebrow{color:var(--gelb)}
.hero-inhalt .eyebrow::before{background:var(--gelb)}
.hero-inhalt h1{max-width:16ch;margin:.8rem 0 1.4rem;text-wrap:balance}
.hero-inhalt .lede{font-size:clamp(1.05rem,1.6vw,1.3rem);max-width:34rem;color:rgba(255,255,255,.92)}
.hero-aktionen{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem}

.hero-zeile{
  max-width:var(--breite);margin:3rem auto 0;width:100%;
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(255,255,255,.25);
  padding-top:1.6rem;gap:1.5rem;
}
.hero-stat{display:flex;flex-direction:column;gap:.15rem}
.hero-stat b{font-family:var(--display);font-weight:600;font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1}
.hero-stat b .einheit{color:var(--gelb)}
.hero-stat span{font-size:.9rem;color:rgba(255,255,255,.75)}

/* ---------- Seiten-Hero (Unterseiten, Vollbild) ---------- */
.hero-seite{
  position:relative;min-height:88svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  color:#fff;isolation:isolate;
  padding:8rem clamp(1.25rem,4vw,3rem) calc(var(--keil) + 2.6rem);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--keil)),0 100%);
}
.hero-seite .hg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-seite .hg img{width:100%;height:112%;object-fit:cover;object-position:var(--fokus,center 30%)}
.hero-seite::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(11,28,40,.88) 0%,rgba(11,28,40,.34) 55%,rgba(11,28,40,.16) 100%);
}
.hero-seite .hero-inhalt .lede{color:rgba(255,255,255,.92);font-size:clamp(1.02rem,1.5vw,1.2rem);max-width:36rem}

/* Kopf ohne Bild (Kontakt, Rechtsseiten) */
.page-head{
  background:var(--nacht);color:#fff;
  padding:9.5rem clamp(1.25rem,4vw,3rem) calc(var(--keil) + 2.6rem);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--keil)),0 100%);
  position:relative;overflow:hidden;
}
.page-head::before{
  content:"";position:absolute;right:-12%;top:-40%;width:55%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(25,188,255,.22),transparent 65%);
}
.page-head-inhalt{max-width:var(--breite);margin:0 auto;position:relative}
.page-head .eyebrow{color:var(--gelb)}
.page-head .eyebrow::before{background:var(--gelb)}
.page-head h1{margin:.8rem 0 1rem;max-width:18ch}
.page-head .lede{color:rgba(255,255,255,.85);font-size:clamp(1.02rem,1.5vw,1.2rem);max-width:36rem}

/* ---------- Sektionen ---------- */
.abschnitt{padding:clamp(4.5rem,9vw,7.5rem) clamp(1.25rem,4vw,3rem)}
.abschnitt.eng{padding-top:clamp(3rem,6vw,4.5rem);padding-bottom:clamp(3rem,6vw,4.5rem)}
.innen{max-width:var(--breite);margin:0 auto}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.82rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blau-tief);
}
.eyebrow::before{content:"";width:1.6rem;height:.22rem;background:var(--gelb);transform:skewX(-20deg)}

.section-head{margin-bottom:clamp(2.2rem,4vw,3.5rem)}
.section-head h2{margin-top:.7rem;max-width:22ch;text-wrap:balance}
.section-head .sub{margin-top:1rem;color:var(--grau)}
.section-head.mitte{text-align:center}
.section-head.mitte h2{margin-inline:auto}
.section-head.mitte .sub{margin-inline:auto}

/* ---------- Diagonale Split-Sektion (Signatur) ---------- */
.split{
  display:grid;grid-template-columns:1fr 1fr;align-items:center;
  gap:clamp(2rem,5vw,5rem);
}
.split-bild{position:relative;border-radius:var(--radius);box-shadow:var(--schatten)}
.split-bild figure{overflow:hidden;border-radius:var(--radius)}
.split-bild img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/4.15;object-position:var(--fokus,center 32%)}
.split-bild.quer img{aspect-ratio:5/3.7}
.split-bild.hoch img{aspect-ratio:4/4.9}
/* die schräge Kante */
.split-bild.kante-rechts figure{clip-path:polygon(0 0,100% 0,86% 100%,0 100%)}
.split-bild.kante-links figure{clip-path:polygon(14% 0,100% 0,100% 100%,0 100%)}
.split-bild .keil-akzent{
  position:absolute;bottom:-.1rem;width:38%;height:.55rem;background:var(--gelb);
  transform:skewX(-38deg);
}
.split-bild.kante-rechts .keil-akzent{right:6%}
.split-bild.kante-links .keil-akzent{left:6%}
.split-text h2{margin:.7rem 0 1.2rem}
.split-text p+p{margin-top:1rem}
.split-text .btn{margin-top:1.8rem}
.split-text .lede{font-size:1.15rem;font-weight:500}

/* ---------- Diagonale Panels (volle Breite) ---------- */
.band{
  position:relative;color:#fff;isolation:isolate;
  padding:calc(var(--keil) + clamp(3.5rem,7vw,5.5rem)) clamp(1.25rem,4vw,3rem);
  clip-path:polygon(0 var(--keil),100% 0,100% calc(100% - var(--keil)),0 100%);
  margin:calc(var(--keil) * -1) 0;
}
.band .hg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.band .hg img{width:100%;height:114%;object-fit:cover;object-position:var(--fokus,center)}
.band::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(11,28,40,.88) 25%,rgba(11,28,40,.45) 70%,rgba(11,28,40,.3))}
.band .innen{position:relative}
.band .eyebrow{color:var(--gelb)}
.band .eyebrow::before{background:var(--gelb)}
.band h2{margin:.7rem 0 1.2rem;max-width:18ch}
.band p{color:rgba(255,255,255,.9)}
.band .btn{margin-top:1.8rem}

.band-gelb{
  position:relative;background:var(--gelb);color:var(--tinte);
  padding:calc(var(--keil) + clamp(2.8rem,6vw,4.2rem)) clamp(1.25rem,4vw,3rem);
  clip-path:polygon(0 var(--keil),100% 0,100% calc(100% - var(--keil)),0 100%);
  margin:calc(var(--keil) * -1) 0;
  text-align:center;
  z-index:1;
}
.band-gelb h2{max-width:24ch;margin:0 auto 1rem}
.band-gelb p{margin:0 auto;max-width:44rem}
.band-gelb p+p{margin-top:.4rem}
.band-gelb .btn{margin-top:1.8rem}

/* Panels ohne Diagonale */
.panel-wolke{background:var(--wolke)}
.panel-eis{background:linear-gradient(160deg,var(--wolke),var(--eis))}

/* ---------- Karten ---------- */
.karten{display:grid;gap:1.5rem}
.karten-2{grid-template-columns:repeat(2,1fr)}
.karten-3{grid-template-columns:repeat(3,1fr)}
.karte{
  background:#fff;border-radius:var(--radius);
  padding:2.2rem 2rem;box-shadow:0 1px 0 var(--eis-tief),0 18px 44px -30px rgba(16,41,58,.18);
  position:relative;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s;
}
.karte:hover{transform:translateY(-5px);box-shadow:0 1px 0 var(--eis-tief),0 28px 56px -30px rgba(16,41,58,.28)}
.karte::before{
  content:"";position:absolute;top:0;left:0;width:3.2rem;height:.45rem;
  background:var(--gelb);transform:skewX(-38deg) translateX(-.3rem);
  transition:width .35s var(--ease);
}
.karte:hover::before{width:5rem}
.karte h3{margin-bottom:.7rem}
.karte p{font-size:.98rem;color:var(--grau)}
.karte .karten-link{display:inline-flex;align-items:center;gap:.45rem;margin-top:1.1rem;font-weight:700;text-decoration:none}
.karte .karten-link svg{transition:transform .25s var(--ease)}
.karte:hover .karten-link svg{transform:translateX(4px)}

/* Bildkarte */
.bild-karte{padding:0;display:flex;flex-direction:column}
.bild-karte::before{z-index:2}
.bild-karte figure{overflow:hidden}
.bild-karte figure img{aspect-ratio:16/10;width:100%;object-fit:cover;object-position:var(--fokus,center);transition:transform .6s var(--ease)}
.bild-karte:hover figure img{transform:scale(1.045)}
.bild-karte .bild-karte-text{padding:1.6rem 1.8rem 2rem}
.bild-karte .bild-karte-text p{margin-top:.5rem}

/* ---------- Listen ---------- */
.leistungen{list-style:none;display:grid;gap:.65rem;margin-top:1.2rem}
.leistungen li{position:relative;padding-left:1.9rem;font-size:1rem}
.leistungen li::before{
  content:"";position:absolute;left:0;top:.52em;width:.95rem;height:.42rem;
  background:var(--gelb);transform:skewX(-38deg);
}
.leistungen li b{font-weight:700}

.check-raster{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem}
.check-raster li{
  display:flex;gap:.85rem;align-items:flex-start;
  background:#fff;border-radius:.9rem;padding:1rem 1.2rem;
  box-shadow:0 1px 0 var(--eis-tief);font-size:.98rem;
}
.check-raster li svg{flex:none;margin-top:.2rem;color:var(--blau-tief);background:var(--eis);border-radius:999px;padding:.22rem;width:1.45rem;height:1.45rem}

/* ---------- Zahlen-/Fakten-Raster ---------- */
.fakten{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.fakt{border-top:3px solid var(--gelb);padding-top:1.1rem}
.fakt b{font-family:var(--display);font-weight:600;font-size:clamp(1.9rem,3.4vw,2.8rem);line-height:1;display:block}
.fakt > span{color:var(--grau);font-size:.95rem}

/* ---------- Zitate ---------- */
.zitat{
  border-left:4px solid var(--gelb);padding:.4rem 0 .4rem 1.4rem;
  font-style:italic;color:var(--grau);
}
.zitat b{color:var(--tinte);font-style:normal;display:block;margin-top:.6rem;font-size:.92rem}
.zitat-gross{
  font-family:var(--display);font-weight:500;font-style:normal;
  font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.3;color:var(--tinte);
  border:0;padding:0;max-width:44rem;margin:0 auto;text-align:center;text-wrap:balance;
}

/* ---------- Personen ---------- */
.person figure{overflow:hidden;border-radius:var(--radius);box-shadow:var(--schatten);position:relative}
.person figure::after{content:"";position:absolute;left:6%;bottom:-.1rem;width:34%;height:.5rem;background:var(--gelb);transform:skewX(-38deg)}
.person img{aspect-ratio:4/4.2;width:100%;object-fit:cover;object-position:var(--fokus,center 20%);transition:transform .6s var(--ease)}
.person:hover img{transform:scale(1.04)}
.person h3{margin-top:1.2rem}
.person .rolle{color:var(--grau);font-size:.95rem}
.person a{font-size:.95rem;word-break:break-all}

/* ---------- Schritte (Karriere) ---------- */
.schritte{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.schritte li{background:#fff;border-radius:var(--radius);padding:2rem;box-shadow:0 1px 0 var(--eis-tief);position:relative}
.schritt-nr{
  font-family:var(--display);font-weight:600;font-size:2.6rem;line-height:1;
  color:transparent;-webkit-text-stroke:1.5px var(--blau-tief);
  display:block;margin-bottom:.9rem;
}
.schritte h3{font-size:1.15rem;margin-bottom:.5rem}
.schritte p{font-size:.95rem;color:var(--grau)}

/* ---------- Formular ---------- */
.formular-karte{
  background:#fff;border-radius:var(--radius);box-shadow:var(--schatten);
  padding:clamp(1.8rem,3vw,2.6rem);
}
.formular{display:grid;gap:1.1rem}
.formular label{font-weight:700;font-size:.95rem;display:block;margin-bottom:.4rem}
.formular input{
  width:100%;border:1.5px solid var(--eis-tief);border-radius:.8rem;
  background:var(--wolke);padding:.9rem 1.1rem;font:inherit;color:var(--tinte);
  transition:border-color .2s,background .2s;
}
.formular input:focus{outline:none;border-color:var(--blau);background:#fff}
.formular .hinweis{font-size:.85rem;color:var(--grau);background:var(--wolke);border-radius:.8rem;padding:.9rem 1.1rem}
.formular .btn{justify-self:start}

/* ---------- Merkmale (Kontaktzeilen) ---------- */
.merkmale{list-style:none;display:grid;gap:.2rem}
.merkmale li{display:flex;align-items:center;gap:.9rem;padding:.85rem 0;border-bottom:1px solid var(--eis-tief)}
.merkmale li svg{flex:none;color:var(--blau-tief)}
.merkmale a{font-weight:700}

/* ---------- Einzugsgebiet ---------- */
.einzug-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.ort-liste{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin:1.3rem 0 1.7rem}
.ort-liste li{margin:0}
.ort-liste button{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  font:inherit;font-size:.9rem;color:var(--tinte);text-align:left;cursor:pointer;
  background:#fff;border:1px solid var(--eis-tief);border-radius:.7rem;padding:.6rem .75rem;
  transition:border-color .2s,box-shadow .2s,transform .2s,background .2s;
}
.ort-liste button:hover{border-color:var(--blau);transform:translateY(-1px);box-shadow:var(--schatten)}
.ort-liste button:focus-visible{outline:2px solid var(--blau-tief);outline-offset:2px}
.ort-liste .ol-name{font-weight:600}
.ort-liste .ol-meta{display:inline-flex;align-items:center;gap:.45rem}
.ort-liste .ol-dir{
  font-size:.64rem;font-weight:700;letter-spacing:.05em;color:var(--grau);
  border:1px solid var(--eis-tief);border-radius:999px;padding:.14rem .38rem;min-width:1.7rem;text-align:center;
}
.ort-liste .ol-km{color:var(--grau);font-variant-numeric:tabular-nums;white-space:nowrap}
.ort-liste .aktiv{background:var(--gelb);border-color:var(--gelb)}
.ort-liste .aktiv .ol-dir{border-color:rgba(16,41,58,.28);color:var(--tinte)}
.ort-liste .aktiv .ol-km{color:var(--tinte)}
.hq-karte{background:#fff;border-radius:var(--radius);box-shadow:var(--schatten);padding:1.8rem}
.hq-karte h3{font-size:1.05rem;margin-bottom:.5rem}
.hq-karte p{font-size:.95rem;color:var(--grau)}
.hq-karte .btn{margin-top:1.1rem;padding:.75rem 1.3rem;font-size:.92rem}

/* ---------- CTA-Schluss ---------- */
.cta-schluss{
  position:relative;background:var(--nacht);color:#fff;overflow:hidden;
  padding:calc(var(--keil) + clamp(3.5rem,7vw,5rem)) clamp(1.25rem,4vw,3rem) clamp(3.5rem,7vw,5rem);
  clip-path:polygon(0 var(--keil),100% 0,100% 100%,0 100%);
  margin-top:calc(var(--keil) * -1);
}
.cta-schluss::before{
  content:"";position:absolute;left:-10%;bottom:-55%;width:55%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(25,188,255,.2),transparent 65%);
}
.cta-schluss .eyebrow{color:var(--gelb)}
.cta-schluss .eyebrow::before{background:var(--gelb)}
.cta-schluss .innen{display:grid;grid-template-columns:1.2fr .8fr;gap:2.5rem;align-items:center;position:relative}
.cta-schluss h2{max-width:16ch;margin-top:.7rem}
.cta-schluss p{color:rgba(255,255,255,.8);margin-top:1rem}
.cta-tel{
  font-family:var(--display);font-weight:600;font-size:clamp(1.7rem,3.4vw,2.6rem);
  color:#fff;text-decoration:none;display:inline-block;
  border-bottom:4px solid var(--gelb);padding-bottom:.3rem;line-height:1.15;
}
.cta-tel:hover{color:var(--gelb)}
.cta-aktionen{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.6rem}

/* ---------- Footer ---------- */
.site-foot{background:var(--nacht);color:#fff;padding:3.5rem clamp(1.25rem,4vw,3rem) 2.5rem}
.cta-schluss+.site-foot{padding-top:0}
.cta-schluss+.site-foot .innen{border-top:1px solid rgba(255,255,255,.14);padding-top:3rem}
.foot-gross{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.7rem,3.6vw,2.7rem);line-height:1.15;max-width:22ch;
  margin-bottom:2.6rem;
}
.herz-inline{display:inline-block;width:.85em;height:.85em;background:var(--gelb);vertical-align:-.06em;
  clip-path:path("M10 17 C4 12 1 9 1 5.5 C1 2.8 3 1 5.4 1 C7.2 1 8.9 2 10 3.6 C11.1 2 12.8 1 14.6 1 C17 1 19 2.8 19 5.5 C19 9 16 12 10 17 Z");
  transform:scale(1.05)}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:2.5rem}
.foot-grid h4{font-family:var(--text);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gelb);margin-bottom:1rem}
.foot-grid ul{list-style:none;display:grid;gap:.45rem}
.foot-grid a{color:rgba(255,255,255,.85);text-decoration:none;font-size:.95rem}
.foot-grid a:hover{color:var(--gelb)}
.foot-grid p{font-size:.95rem;color:rgba(255,255,255,.85)}
.foot-logo img{height:3.6rem;margin-bottom:1rem}
.foot-unten{
  max-width:var(--breite);margin:2.6rem auto 0;padding-top:1.4rem;
  border-top:1px solid rgba(255,255,255,.14);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.85rem;color:rgba(255,255,255,.6);
}
.foot-unten a{color:rgba(255,255,255,.8)}

/* ---------- Prosa (Rechtsseiten) ---------- */
.prosa{max-width:46rem;margin:0 auto}
.prosa h2{font-size:1.6rem;margin:2.4rem 0 .8rem}
.prosa h3{font-size:1.2rem;margin:1.8rem 0 .6rem}
.prosa p,.prosa li{color:var(--grau)}
.prosa p{max-width:none;margin:.6rem 0}
.prosa ul,.prosa ol{padding-left:1.4rem;margin:.6rem 0}
.prosa table{border-collapse:collapse;width:100%;font-size:.92rem}
.prosa td,.prosa th{border:1px solid var(--eis-tief);padding:.55rem .7rem;text-align:left}

/* ---------- Utilities ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.btn-row{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.8rem}
.link-pfeil{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;text-decoration:none}
.link-pfeil svg{transition:transform .25s var(--ease)}
.link-pfeil:hover svg{transform:translateX(4px)}
address{font-style:normal}

/* ---------- Partner-Links ---------- */
.partner-links{list-style:none;display:grid;gap:.7rem;margin-top:1.6rem}
.partner-links a{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:#fff;border:1px solid var(--eis-tief);border-radius:.9rem;
  padding:1rem 1.3rem;font-weight:700;text-decoration:none;color:var(--tinte);
  transition:transform .25s var(--ease),box-shadow .25s,border-color .2s;
}
.partner-links a:hover{transform:translateY(-2px);box-shadow:var(--schatten);border-color:var(--blau)}
.partner-links svg{flex:none;color:var(--blau-tief)}

/* ---------- Karte-CTA ---------- */
.karte-cta{background:var(--tinte);color:#fff}
.karte-cta h3{color:#fff}
.karte-cta p{color:rgba(255,255,255,.8)}
.karte-cta .karten-link{color:var(--gelb)}

/* ---------- Nachtkarte (Einzugsgebiet) ---------- */
.orbit-box{
  position:relative;overflow:hidden;
  background:radial-gradient(125% 105% at 42% 44%,#153a52 0%,#0e2a3d 46%,#081826 100%);
  border-radius:var(--radius);padding:1.4rem;
  box-shadow:0 30px 60px -32px rgba(8,24,38,.65),inset 0 0 0 1px rgba(255,255,255,.05);
}
.orbit-svg{width:100%;height:auto;display:block}

.orbit-svg .zentrum-schein{fill:url(#gGlow)}

.orbit-svg .ring{fill:none;stroke:rgba(255,255,255,.09);stroke-width:1.4}
.orbit-svg .ring-label{font:600 12px/1 var(--text);fill:rgba(255,255,255,.34);letter-spacing:.14em}

.orbit-svg .kontur path{fill:none;stroke:rgba(130,200,240,.16);stroke-width:1.4;stroke-linecap:round}
.orbit-svg .terrain-label{font:700 12px/1 var(--text);fill:rgba(255,255,255,.3);letter-spacing:.4em}

.orbit-svg .k-ring{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1.4}
.orbit-svg .k-nadel-n{fill:var(--gelb)}
.orbit-svg .k-nadel-s{fill:rgba(255,255,255,.28)}
.orbit-svg .k-n{font:700 14px/1 var(--text);fill:rgba(255,255,255,.62);letter-spacing:.04em}

.orbit-svg .strahl{
  stroke:rgba(120,205,255,.42);stroke-width:1.4;stroke-linecap:round;
  transition:stroke .25s,stroke-width .25s;
}
.orbit-svg .strahl.aktiv{stroke:var(--gelb);stroke-width:2.6}

.orbit-svg .ort{cursor:pointer;outline:none}
.orbit-svg .ort .halo{fill:rgba(120,205,255,.14);transition:fill .25s}
.orbit-svg .ort .p{fill:#0d2a3d;stroke:#7ecbff;stroke-width:2.6;transition:fill .25s,stroke .25s}
.orbit-svg .ort text{font:600 16px/1 var(--text);fill:rgba(255,255,255,.92)}
.orbit-svg .ort .km{font:500 12px/1 var(--text);fill:rgba(255,255,255,.44)}
.orbit-svg .ort.aktiv .p,.orbit-svg .ort:hover .p,.orbit-svg .ort:focus-visible .p{fill:var(--gelb);stroke:#fff}
.orbit-svg .ort.aktiv .halo,.orbit-svg .ort:hover .halo{fill:rgba(255,223,0,.28)}

.orbit-svg .puls{
  fill:none;stroke:rgba(255,223,0,.5);stroke-width:2;
  transform-box:fill-box;transform-origin:center;animation:pulsRing 3.4s var(--ease) infinite;
}
@keyframes pulsRing{0%{transform:scale(.62);opacity:.65}70%{opacity:0}100%{transform:scale(1.7);opacity:0}}
.orbit-svg .pin-koerper{fill:var(--gelb)}
.orbit-svg .pin-innen{fill:#0d2a3d}
.orbit-svg .pin-herz{fill:var(--gelb)}
.orbit-svg .hq-text{font-family:var(--display);font-weight:600;font-size:20px;fill:#fff}
.orbit-svg .hq-sub{font:500 12px/1 var(--text);fill:rgba(255,255,255,.55)}

/* Scroll-Effekt: Linien zeichnen sich, Orte steigen auf */
.orbit-box .strahl{stroke-dasharray:520;stroke-dashoffset:520}
.orbit-box.sichtbar .strahl{animation:strahlZeichnen 1s var(--ease) forwards;animation-delay:calc(.15s + var(--i,0) * .06s)}
.orbit-box.sichtbar .strahl.aktiv{animation:none;stroke-dashoffset:0}
@keyframes strahlZeichnen{to{stroke-dashoffset:0}}
.orbit-box .ort,.orbit-box .hq,.orbit-box .kontur,.orbit-box .kompass-mini,.orbit-box .ring,.orbit-box .ring-label{
  opacity:0;transition:opacity .6s var(--ease);
}
.orbit-box.sichtbar .ort{opacity:1;transition-delay:calc(.35s + var(--i,0) * .06s)}
.orbit-box.sichtbar .hq{opacity:1;transition-delay:.1s}
.orbit-box.sichtbar .kontur,.orbit-box.sichtbar .kompass-mini,
.orbit-box.sichtbar .ring,.orbit-box.sichtbar .ring-label{opacity:1;transition-delay:0s}
@media (prefers-reduced-motion:reduce){
  .orbit-svg .puls{animation:none;opacity:.4}
  .orbit-box .strahl{stroke-dashoffset:0}
  .orbit-box .strahl,.orbit-box.sichtbar .strahl{animation:none}
  .orbit-box .ort,.orbit-box .hq,.orbit-box .kontur,.orbit-box .kompass-mini,
  .orbit-box .ring,.orbit-box .ring-label{opacity:1;transition:none}
}

/* ---------- Reveals ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.sichtbar{opacity:1;transform:none}
.reveal-bild{opacity:0;clip-path:inset(0 0 14% 0);transition:opacity .9s var(--ease),clip-path .9s var(--ease)}
.reveal-bild.sichtbar{opacity:1;clip-path:inset(0)}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-bild{opacity:1;transform:none;clip-path:none;transition:none}
}

/* ---------- Icons: eigene Strichzeichnungen mit gelbem Keil-Akzent ---------- */
.ikone{width:2.9rem;height:2.9rem;display:block;overflow:visible}
.ikone .ink{fill:none;stroke:var(--tinte);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ikone .akzent{fill:var(--gelb);stroke:none}
.ikone .akzent-strich{fill:none;stroke:var(--gelb);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
/* auf dunklem Grund */
.karte-cta .ikone .ink,.band .ikone .ink,.cta-schluss .ikone .ink{stroke:#fff}

/* Karten mit Icon: der gelbe Schrägbalken entfällt, das Icon trägt den Akzent */
.karte.mit-ikone::before{content:none}
.karte.mit-ikone .ikone{margin-bottom:1.2rem}
.karte.mit-ikone .ikone .ink{transition:stroke .3s var(--ease)}
.karte.mit-ikone:hover .akzent-strich{stroke:var(--gelb-tief)}

/* ---------- Leistungs-Raster (Icon + Hairline statt Karte) ---------- */
.leistungs-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,3.5vw,3rem) clamp(1.8rem,3vw,2.6rem)}
.leistung{
  border-top:2px solid var(--eis-tief);padding-top:1.4rem;
  position:relative;transition:border-color .35s var(--ease);
}
.leistung::after{
  content:"";position:absolute;top:-2px;left:0;width:0;height:2px;background:var(--gelb);
  transition:width .45s var(--ease);
}
.leistung:hover::after,.leistung:focus-within::after{width:3.4rem}
.leistung .ikone{margin-bottom:1rem}
.leistung h3{font-size:1.12rem;margin-bottom:.5rem}
.leistung p{font-size:.97rem;color:var(--grau)}
a.leistung{display:block;text-decoration:none;color:inherit}
a.leistung h3{transition:color .25s var(--ease)}
a.leistung:hover h3{color:var(--blau-tief)}

/* ---------- Responsive ---------- */
@media (max-width:64rem){
  .site-nav{
    position:fixed;top:5.2rem;right:1rem;left:auto;
    flex-direction:column;align-items:stretch;
    background:#fff;border-radius:1.2rem;box-shadow:var(--schatten);
    padding:.8rem;min-width:15rem;
    display:none;
  }
  .site-nav.offen{display:flex}
  .site-nav a{color:var(--tinte)!important;padding:.85rem 1.1rem;border-radius:.8rem}
  .site-nav a:hover{background:var(--eis)}
  .site-nav a[aria-current="page"]{background:var(--tinte);color:#fff!important}
  .nav-toggle{display:inline-flex}
  .head-tel .tel-text{display:none}
  .head-tel{padding:.65rem .8rem}
}
@media (max-width:56rem){
  :root{--keil:2.8rem}
  .split{grid-template-columns:1fr}
  .split-bild img{aspect-ratio:16/11}
  .karten-2,.karten-3{grid-template-columns:1fr}
  .check-raster{grid-template-columns:1fr}
  .schritte{grid-template-columns:1fr}
  .fakten{grid-template-columns:1fr 1fr}
  .einzug-grid{grid-template-columns:1fr}
  /* Mobil: die Ortsnamen trägt die Liste, die Karte zeigt nur die leuchtenden Punkte */
  .orbit-svg .ort text,.orbit-svg .ort .km{display:none}
  .orbit-svg .hq-sub{display:none}
  .orbit-svg .ort .p{stroke-width:3.2}
  .orbit-svg .ort .halo{fill:rgba(120,205,255,.2)}
  .cta-schluss .innen{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .leistungs-raster{grid-template-columns:1fr 1fr}
  .hero-zeile{grid-template-columns:1fr;gap:1rem;padding-top:1.2rem}
  .hero-stat{flex-direction:row;align-items:baseline;gap:.7rem}

  /* Mobil: das Foto bekommt ein eigenes Band oben, der Text steht darunter
     auf dunklem Grund. So wird bei Gruppenfotos niemand abgeschnitten. */
  .hero-voll,.hero-seite{
    min-height:0;background:var(--nacht);
    padding:0 0 calc(var(--keil) + 2.4rem);
  }
  .hero-voll::after,.hero-seite::after,
  .hero-voll::before,.hero-seite::before{content:none}
  .hero-voll .hg,.hero-seite .hg{
    position:relative;inset:auto;z-index:0;
    aspect-ratio:var(--hero-format,4/3);
    margin-bottom:2rem;
    clip-path:polygon(0 0,100% 0,100% calc(100% - var(--keil)),0 100%);
  }
  .hero-voll .hg::after,.hero-seite .hg::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(to bottom,rgba(11,28,40,.62),rgba(11,28,40,0) 32%,rgba(11,28,40,0) 72%,rgba(11,28,40,.92));
  }
  .hero-voll .hg img,.hero-seite .hg img{object-position:var(--fokus-mobil,var(--fokus,center 32%))}
  .hero-inhalt,.hero-zeile{padding-inline:clamp(1.25rem,4vw,3rem)}
  .hero-inhalt h1{max-width:none}
}
@media (max-width:36rem){
  .foot-grid{grid-template-columns:1fr}
  .fakten{grid-template-columns:1fr}
  .leistungs-raster{grid-template-columns:1fr}
  .ort-liste{grid-template-columns:1fr}
  .head-logo img{height:2.6rem}
}