/* ============================================================
   MEDIRA · Facharztzentrum Hannover — fiktive Demonstration
   ============================================================ */

:root{
  --creme:#FAFAF7; --weiss:#FFFFFF;
  --blau-50:#F3F8FE; --blau-100:#E4EEFB; --blau-200:#C9DDF7;
  --blau-300:#A9C6F0; --blau-400:#7FA5E4; --blau-500:#5A83C8; --blau-600:#3B62A5;
  --flieder:#B9C4EE; --flieder-hell:#E5E8F8;
  --oliv:#C7CD8C; --oliv-50:#EFF1DC; --oliv-600:#5F6530;
  --tinte:#2C3440; --grau:#55616F; --grau-mittel:#6E7A88; --grau-hell:#6F7A86;
  --rand:#E5EAF1;
  --r-gross:32px; --r-mittel:22px; --r-klein:14px;
  --schatten:0 24px 60px -34px rgba(40,64,104,.45);
  --schatten-karte:0 18px 40px -28px rgba(40,64,104,.40);
  --breite:1240px;
  --ueberblende:.55s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:104px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0; overflow-x:clip; background:var(--creme); color:var(--grau);
  font-family:'Mulish',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:400; font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{display:block; max-width:100%}
img{height:auto}
a{color:inherit}
h1,h2,h3,h4{margin:0; color:var(--tinte); font-weight:600; line-height:1.2; letter-spacing:-.01em}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
input,textarea,select{font:inherit}

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

.bahn{width:min(100% - 40px,var(--breite)); margin-inline:auto}
@media (max-width:640px){.bahn{width:calc(100% - 32px)}}

.nur-lesehilfe{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.sprungmarke{
  position:absolute; left:16px; top:-70px; z-index:200; background:var(--weiss);
  color:var(--blau-600); padding:12px 20px; border-radius:999px; font-weight:600;
  box-shadow:var(--schatten-karte); transition:top .2s;
}
.sprungmarke:focus{top:16px}

/* ---------- Bausteine ---------- */

.knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 34px; border-radius:999px; font-weight:600; font-size:16px;
  text-decoration:none; letter-spacing:.01em; cursor:pointer;
  transition:transform .25s, box-shadow .25s, background-color .25s, color .25s;
  border:1.5px solid transparent; white-space:nowrap;
}
.knopf:hover{transform:translateY(-2px)}
.knopf-blau{background:var(--blau-500); color:#fff; box-shadow:0 14px 26px -14px rgba(58,98,165,.85)}
.knopf-blau:hover{background:var(--blau-600); box-shadow:0 20px 34px -14px rgba(58,98,165,.9)}
.knopf-weiss{background:#fff; color:var(--blau-600); box-shadow:0 14px 30px -18px rgba(30,52,90,.5)}
.knopf-weiss:hover{background:#fff; box-shadow:0 20px 40px -18px rgba(30,52,90,.55)}
.knopf-rand{border-color:rgba(255,255,255,.75); color:#fff}
.knopf-rand:hover{background:rgba(255,255,255,.16)}
.knopf-rand-blau{border-color:var(--blau-300); color:var(--blau-600); background:#fff}
.knopf-rand-blau:hover{border-color:var(--blau-500); background:var(--blau-50)}
.knopf-klein{padding:11px 24px; font-size:14.5px}

.mehr{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  font-weight:600; color:var(--blau-600); border-bottom:1.5px solid var(--blau-300);
  padding-bottom:3px; transition:border-color .25s, gap .25s, color .25s;
}
.mehr:hover{border-color:var(--blau-600); gap:13px}
.mehr svg{width:15px; height:15px; flex:none}

.abschnitt{padding:clamp(64px,8vw,112px) 0}
.abschnitt-kopf{text-align:center; max-width:820px; margin:0 auto clamp(38px,5vw,58px)}
.abschnitt-kopf h2{
  font-size:clamp(1.55rem,3.4vw,2.4rem); font-weight:300; color:#4C5867;
  line-height:1.32; letter-spacing:-.015em;
}
.abschnitt-kopf h2 b{font-weight:600; color:var(--tinte)}
.abschnitt-kopf p{margin-top:16px; color:var(--grau-mittel); font-size:16.5px}
.trennlinie{height:1px; background:linear-gradient(90deg,transparent,var(--rand) 12%,var(--rand) 88%,transparent); margin-top:30px}

/* dekorative Punkte */
.punkt{position:absolute; border-radius:50%; pointer-events:none}
.punkt-blau{background:var(--blau-300)}
.punkt-oliv{background:var(--oliv)}
.punkt-hell{background:var(--flieder-hell)}

/* ---------- Kopfzeile ---------- */

.kopf{
  position:sticky; top:0; z-index:90; background:rgba(250,250,247,.86);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent; transition:border-color .3s, background-color .3s, box-shadow .3s;
}
.kopf.geheftet{border-bottom-color:var(--rand); box-shadow:0 10px 30px -26px rgba(40,64,104,.7)}
.kopf-innen{display:flex; align-items:center; gap:26px; padding:16px 0}

.marke{display:flex; align-items:center; gap:12px; text-decoration:none; flex:none}
.marke-zeichen{width:34px; height:38px; color:var(--blau-500); flex:none}
.marke-wort{display:block; font-weight:700; font-size:19px; letter-spacing:.13em; color:var(--tinte); line-height:1.1}
.marke-zusatz{display:block; font-size:10.5px; letter-spacing:.19em; text-transform:uppercase; color:var(--grau-hell); font-weight:600; margin-top:2px}

.nav{margin-inline:auto}
.nav ul{display:flex; gap:clamp(14px,2.2vw,32px)}
.nav a{
  text-decoration:none; font-size:15.5px; color:var(--grau); font-weight:500;
  padding:8px 2px; position:relative; transition:color .25s;
}
.nav a::after{
  content:''; position:absolute; left:0; right:100%; bottom:2px; height:2px;
  background:var(--blau-400); border-radius:2px; transition:right .3s;
}
.nav a:hover{color:var(--blau-600)}
.nav a:hover::after{right:0}

.kopf-rechts{display:flex; align-items:center; gap:16px; flex:none}
.sozial{display:flex; gap:9px}
.sozial a{
  width:34px; height:34px; display:grid; place-items:center; border-radius:50%;
  color:var(--blau-500); transition:background-color .25s, transform .25s;
}
.sozial a:hover{background:var(--blau-100); transform:translateY(-2px)}
.sozial svg{width:17px; height:17px}

.burger{display:none; width:44px; height:44px; border-radius:12px; place-items:center}
.burger span{display:block; width:22px; height:2px; background:var(--tinte); border-radius:2px; transition:transform .3s, opacity .3s}
.burger span+span{margin-top:5px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:1080px){
  .nav{
    position:fixed; inset:74px 0 auto; background:var(--weiss); margin:0;
    border-bottom:1px solid var(--rand); box-shadow:var(--schatten);
    max-height:0; overflow:hidden; transition:max-height .38s ease;
  }
  .nav.offen{max-height:min(70vh,520px); overflow-y:auto}
  .nav ul{flex-direction:column; gap:0; padding:10px 24px 24px}
  .nav a{display:block; padding:15px 0; border-bottom:1px solid var(--rand); font-size:17px}
  .nav a::after{display:none}
  .burger{display:grid}
  .sozial{display:none}
}
@media (max-width:560px){
  .kopf-rechts .knopf{display:none}
  .marke-zusatz{display:none}
}

/* ---------- Kopfbereich / Held ---------- */

.held{padding:clamp(26px,4vw,44px) 0 clamp(120px,13vw,170px); position:relative}
.held-buehne{position:relative}

.held-karte{
  position:relative; border-radius:var(--r-gross);
  background:linear-gradient(90deg,#31518D 0%,#42659F 20%,#6D93D6 38%,#B7CDF2 48%,#E9F0FB 56%,#E9F0FB 100%);
  min-height:clamp(420px,46vw,560px); overflow:hidden;
}
.held-wellen{position:absolute; inset:0; opacity:.5; pointer-events:none}
.held-wellen svg{width:100%; height:100%}
.held-blase{position:absolute; border-radius:50%; background:rgba(255,255,255,.22); pointer-events:none}

.held-inhalt{
  position:relative; z-index:3;
  padding:clamp(38px,5vw,58px) clamp(24px,5vw,66px) clamp(74px,8vw,112px);
  max-width:min(56%,620px);
}
@media (max-width:900px){.held-inhalt{max-width:100%; padding-bottom:330px}}

.folie{display:none}
.folie.ist-aktiv{display:block; animation:einblenden .6s both}
@keyframes einblenden{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.folie.ist-aktiv{animation:none}}

.folie-kicker{
  font-size:12.5px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.92); font-weight:700; margin-bottom:14px;
}
.folie h1{
  color:#fff; font-size:clamp(1.9rem,4.4vw,3.25rem); font-weight:700;
  line-height:1.14; letter-spacing:-.02em; text-shadow:0 2px 20px rgba(46,72,120,.18);
}
.folie-liste{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:8px 26px; margin:26px 0 30px;
}
.folie-liste li{position:relative; padding-left:20px; color:#fff; font-size:15.5px; line-height:1.5}
.folie-liste li::before{
  content:''; position:absolute; left:0; top:.62em; width:8px; height:8px;
  border-radius:50%; border:1.6px solid rgba(255,255,255,.9);
}
.folie-liste li a{color:#fff; font-weight:700; text-decoration:none; border-bottom:1.5px solid rgba(255,255,255,.6); padding-bottom:2px}
.folie-liste li a:hover{border-color:#fff}

.folie-aktion{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.merken{
  width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.9);
  display:grid; place-items:center; color:var(--blau-500); flex:none;
  box-shadow:0 12px 26px -16px rgba(30,52,90,.6); transition:transform .25s, background-color .25s, color .25s;
}
.merken svg{width:22px; height:22px}
.merken:hover{transform:translateY(-2px) scale(1.04)}
.merken[aria-pressed="true"]{background:#fff; color:#E2607C}
.merken[aria-pressed="true"] svg{fill:currentColor}

.folie-hinweis{margin-top:16px; font-size:12.5px; line-height:1.5; color:rgba(255,255,255,.93); max-width:330px}
.folie-hinweis a{color:#fff}

.held-person{
  position:absolute; right:clamp(8px,2.5vw,52px); bottom:0; z-index:2;
  height:100%; pointer-events:none;
}
.held-person img{
  height:100%; width:auto; max-width:none; display:none;
}
.held-person img.ist-aktiv{display:block; animation:personRein .7s both}
@keyframes personRein{from{opacity:0; transform:translateX(24px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.held-person img.ist-aktiv{animation:none}}
@media (max-width:900px){
  .held-person{height:250px; width:auto; right:clamp(6px,3vw,40px); transform:none}
  .held-person img{height:100%; width:auto}
}

.abzeichen{
  position:absolute; z-index:4; background:#fff; border-radius:18px;
  width:64px; height:64px; display:grid; place-items:center;
  box-shadow:0 16px 34px -20px rgba(30,52,90,.6); animation:schweben 5s ease-in-out infinite;
}
.abzeichen svg{width:34px; height:34px}
.abzeichen-a{right:clamp(38%,40vw,44%); top:38%}
.abzeichen-b{right:clamp(4%,6vw,10%); top:24%; animation-delay:1.6s}
@keyframes schweben{0%,100%{transform:translateY(0)} 50%{transform:translateY(-11px)}}
@media (prefers-reduced-motion:reduce){.abzeichen{animation:none}}
@media (max-width:900px){.abzeichen{display:none}}

.pfeil{
  position:absolute; top:50%; transform:translateY(-50%); z-index:6;
  width:52px; height:52px; border-radius:50%; background:#fff; color:var(--blau-500);
  display:grid; place-items:center; box-shadow:0 14px 30px -18px rgba(30,52,90,.65);
  transition:background-color .25s, color .25s, transform .25s;
}
.pfeil svg{width:17px; height:17px}
.pfeil:hover{background:var(--blau-500); color:#fff}
.pfeil-links{left:clamp(-6px,-.4vw,0px)}
.pfeil-rechts{right:clamp(-6px,-.4vw,0px)}
@media (max-width:900px){.pfeil{width:44px; height:44px}.pfeil-links{left:6px}.pfeil-rechts{right:6px}}

.held-punkte{
  position:absolute; left:50%; transform:translateX(-50%); bottom:20px; z-index:6;
  display:flex; gap:9px;
}
.held-punkte button{width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.55); transition:width .3s, background-color .3s}
.held-punkte button[aria-current="true"]{width:28px; border-radius:5px; background:#fff}
@media (max-width:900px){.held-punkte{bottom:14px}}

.held-kacheln{
  position:absolute; left:clamp(20px,4vw,56px); bottom:clamp(-88px,-8vw,-70px); z-index:7;
  display:flex; gap:16px; flex-wrap:wrap;
}
.kachel{
  position:relative; overflow:hidden; width:min(46vw,206px); padding:20px 22px 22px;
  border-radius:var(--r-mittel); color:#fff;
  background:linear-gradient(150deg,#3E5C9B,#33507F);
  box-shadow:0 22px 44px -26px rgba(40,64,104,.75);
}
.kachel:first-child{background:linear-gradient(150deg,#4E71B4,#3F5F9F)}
.kachel-zahl{display:flex; align-items:baseline; gap:8px}
.kachel-zahl b{font-size:clamp(1.9rem,4vw,2.5rem); font-weight:700; line-height:1; letter-spacing:-.02em}
.kachel-zahl span{font-size:15px; font-weight:500; line-height:1.15; opacity:.95}
.kachel p{margin-top:10px; font-size:13.5px; line-height:1.45; color:rgba(255,255,255,.94)}
.kachel-symbol{position:absolute; right:-10px; bottom:-14px; width:76px; opacity:.22}

.arzt-plakette{
  position:absolute; right:clamp(20px,4vw,64px); bottom:clamp(-64px,-6vw,-48px); z-index:7;
  background:#fff; border-radius:var(--r-mittel); padding:18px 26px;
  box-shadow:0 22px 44px -28px rgba(40,64,104,.7); max-width:330px;
}
.arzt-plakette b{display:block; color:var(--tinte); font-size:16.5px; font-weight:700}
.arzt-plakette p{margin-top:5px; font-size:13.5px; color:var(--grau-mittel); line-height:1.5}
@media (max-width:900px){
  .held-kacheln{position:static; margin-top:20px; justify-content:center}
  .kachel{width:min(44vw,210px)}
  .arzt-plakette{position:static; margin:16px auto 0; max-width:none; text-align:center}
  .held{padding-bottom:clamp(56px,8vw,80px)}
}

/* ---------- Einleitungssatz ---------- */

.satz{position:relative; text-align:center; padding:clamp(60px,7vw,96px) 0 clamp(40px,5vw,60px)}
.satz-karte{
  background:var(--weiss); border-radius:var(--r-gross); padding:clamp(38px,5vw,64px) clamp(22px,4vw,56px);
  box-shadow:var(--schatten); position:relative; z-index:2;
}
.satz h2{
  font-size:clamp(1.35rem,3vw,2.05rem); font-weight:300; color:#4C5867;
  line-height:1.4; letter-spacing:-.015em; max-width:900px; margin-inline:auto;
}
.satz h2 b{font-weight:600; color:var(--tinte)}
.satz-unter{margin-top:14px; color:var(--grau-mittel); font-size:16px}

.faecher{
  display:grid; grid-template-columns:repeat(8,1fr); gap:clamp(10px,1.6vw,22px);
  margin-top:clamp(34px,4vw,48px);
}
@media (max-width:960px){.faecher{grid-template-columns:repeat(4,1fr)}}
@media (max-width:520px){.faecher{grid-template-columns:repeat(2,1fr)}}
.fach{display:flex; flex-direction:column; align-items:center; gap:12px; text-decoration:none}
.fach-feld{
  width:100%; aspect-ratio:1/1; max-width:104px; border-radius:24px; display:grid; place-items:center;
  background:linear-gradient(150deg,#7C9EDB,#5A80C4); color:#fff;
  box-shadow:0 16px 30px -22px rgba(40,64,104,.9);
  transition:transform .3s cubic-bezier(.34,1.4,.64,1), box-shadow .3s;
}
.fach-feld svg{width:52%; height:52%}
.fach:hover .fach-feld{transform:translateY(-6px) scale(1.04); box-shadow:0 24px 40px -22px rgba(40,64,104,.95)}
.fach span{font-size:14.5px; color:var(--grau); font-weight:500; text-align:center}
.fach:hover span{color:var(--blau-600)}

.faecher-fuss{
  margin-top:clamp(28px,3.5vw,40px); display:flex; align-items:center; justify-content:center;
  gap:16px; flex-wrap:wrap; font-size:16px; color:var(--grau-mittel);
}
.faecher-fuss b{color:var(--tinte)}

/* ---------- Schieber allgemein ---------- */

.schieber{position:relative}
.spur{
  display:grid; grid-auto-flow:column; gap:clamp(16px,2vw,28px);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding:8px 4px 20px; margin:0 -4px;
  scrollbar-width:none;
}
.spur::-webkit-scrollbar{display:none}
.spur>*{scroll-snap-align:start}
@media (prefers-reduced-motion:reduce){.spur{scroll-behavior:auto}}

.schieber .pfeil{background:var(--blau-400); color:#fff}
.schieber .pfeil:hover{background:var(--blau-600)}
.schieber .pfeil-links{left:clamp(-24px,-1.6vw,-8px)}
.schieber .pfeil-rechts{right:clamp(-24px,-1.6vw,-8px)}
.schieber .pfeil[disabled]{opacity:.32; cursor:default; transform:translateY(-50%)}
@media (max-width:1340px){
  .schieber .pfeil-links{left:-6px}
  .schieber .pfeil-rechts{right:-6px}
}

/* ---------- Aktionen ---------- */

.aktionen{background:linear-gradient(180deg,transparent,#F6F6F0 40%,transparent)}
.aktion{
  width:clamp(270px,32vw,384px); background:var(--weiss); border-radius:var(--r-mittel);
  overflow:hidden; box-shadow:var(--schatten-karte); display:flex; flex-direction:column;
  transition:transform .3s, box-shadow .3s;
}
.aktion:hover{transform:translateY(-6px); box-shadow:0 30px 56px -30px rgba(40,64,104,.55)}
.aktion img{width:100%; aspect-ratio:900/620; object-fit:cover}
.aktion-text{padding:26px 26px 28px; display:flex; flex-direction:column; gap:14px; flex:1}
.aktion h3{font-size:19px; font-weight:600; line-height:1.35; color:#3E4A59}
.aktion p{font-size:15px; color:var(--grau-mittel); line-height:1.6; flex:1}
.aktion .mehr{align-self:flex-start; margin-top:2px}
.marke-band{
  display:inline-block; align-self:flex-start; padding:5px 13px; border-radius:999px;
  background:var(--oliv-50); color:var(--oliv-600); font-size:12px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
}

/* ---------- Programme ---------- */

.programme{background:var(--blau-50)}
.pakete{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(18px,2.4vw,28px)}
.paket{
  background:var(--weiss); border-radius:var(--r-mittel); padding:34px 30px 32px;
  box-shadow:var(--schatten-karte); display:flex; flex-direction:column; gap:18px;
  border:1.5px solid transparent; position:relative; transition:transform .3s, box-shadow .3s;
}
.paket:hover{transform:translateY(-5px)}
.paket-beliebt{border-color:var(--blau-300); box-shadow:0 30px 56px -30px rgba(40,64,104,.5)}
.paket-fahne{
  position:absolute; top:-13px; left:30px; background:var(--blau-500); color:#fff;
  padding:5px 15px; border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.paket h3{font-size:20px; font-weight:600; color:#3E4A59}
.paket-preis{display:flex; align-items:baseline; gap:8px; color:var(--tinte)}
.paket-preis b{font-size:2.15rem; font-weight:700; letter-spacing:-.02em; line-height:1}
.paket-preis span{font-size:14px; color:var(--grau-hell)}
.paket ul{display:grid; gap:11px; flex:1}
.paket li{position:relative; padding-left:28px; font-size:15px; line-height:1.55}
.paket li::before{
  content:''; position:absolute; left:0; top:.34em; width:17px; height:17px; border-radius:50%;
  background:var(--blau-100);
}
.paket li::after{
  content:''; position:absolute; left:5px; top:.62em; width:7px; height:4px;
  border-left:2px solid var(--blau-600); border-bottom:2px solid var(--blau-600);
  transform:rotate(-45deg);
}
.paket .knopf{width:100%}

/* ---------- Beratung ---------- */

.beratung{padding:clamp(40px,5vw,70px) 0 clamp(64px,8vw,110px)}
.beratung-karte{
  position:relative; border-radius:var(--r-gross); overflow:hidden;
  background:linear-gradient(90deg,#E9F0FB 0%,#E9F0FB 44%,#A9C1EA 48%,#6486C9 51.5%,#42659F 55%,#39599A 100%);
  display:grid; grid-template-columns:1fr 1fr; align-items:end; min-height:clamp(380px,38vw,460px);
}
.beratung-karte .held-wellen{opacity:.42}
.beratung-bild{position:relative; z-index:2; align-self:end; display:flex; justify-content:center}
.beratung-bild img{width:auto; height:clamp(340px,36vw,460px); max-width:100%; margin-left:auto; margin-right:0; display:block}
.beratung-text{position:relative; z-index:3; padding:clamp(34px,4vw,58px) clamp(24px,4vw,58px)}
.beratung-text h2{color:#fff; font-size:clamp(1.6rem,3.4vw,2.55rem); font-weight:700; line-height:1.16; letter-spacing:-.02em}
.beratung-text>p{color:rgba(255,255,255,.94); margin-top:12px; font-size:16.5px}

.formular{margin-top:26px; display:grid; gap:14px; max-width:430px}
.feld label{display:block; font-size:12.5px; color:rgba(255,255,255,.95); margin-bottom:7px; font-weight:600; letter-spacing:.04em}
.feld label .stern{color:#fff}
.feld-huelle{position:relative; display:flex; align-items:center}
.feld-huelle svg{position:absolute; left:20px; width:17px; height:17px; color:var(--blau-500); pointer-events:none}
.feld input{
  width:100%; padding:16px 20px 16px 48px; border-radius:999px; border:1.5px solid transparent;
  background:#FFFDF9; color:var(--tinte); font-size:15.5px; transition:border-color .25s, box-shadow .25s;
}
.feld input::placeholder{color:#A7B0BC}
.feld input:focus{outline:none; border-color:var(--blau-500); box-shadow:0 0 0 4px rgba(90,131,200,.28)}
.feld input[aria-invalid="true"]{border-color:#C9455C; box-shadow:0 0 0 4px rgba(201,69,92,.22)}
.feld-fehler{display:block; min-height:0; font-size:12.5px; color:#FFF1F3; margin-top:6px; font-weight:600}
.formular-fuss{font-size:12.5px; color:rgba(255,255,255,.93); line-height:1.5}
.formular-fuss a{color:#fff}
.formular .knopf{width:100%; margin-top:4px}
.formular-danke{
  display:none; background:rgba(255,255,255,.94); border-radius:var(--r-klein);
  padding:16px 20px; color:var(--blau-600); font-weight:600; font-size:15px;
}
.formular-danke.sichtbar{display:block}

@media (max-width:900px){
  .beratung-karte{grid-template-columns:1fr}
  .beratung-bild{order:2; padding:0 24px 0}
  .beratung-bild img{height:235px; width:auto}
  .beratung-text{order:1; padding-bottom:34px}
  .formular{max-width:none}
}

/* ---------- Spezialisten ---------- */

.aerzte{
  background:linear-gradient(160deg,#F7F8EE 0%,#EFF1DC 46%,#F3F5E6 100%);
  position:relative; overflow:hidden;
}
.arztkarte{
  width:clamp(240px,26vw,286px); background:var(--weiss); border-radius:var(--r-mittel);
  overflow:hidden; box-shadow:var(--schatten-karte); display:flex; flex-direction:column;
  transition:transform .3s, box-shadow .3s;
}
.arztkarte:hover{transform:translateY(-6px); box-shadow:0 30px 56px -30px rgba(70,80,40,.45)}
.arztkarte-bild{position:relative; background:linear-gradient(155deg,#E7EBCB,#CFD9C4)}
.arztkarte-bild img{width:100%; aspect-ratio:640/780; object-fit:cover; object-position:top center}
.arztkarte-text{padding:22px 24px 26px; display:flex; flex-direction:column; gap:11px; flex:1}
.arztkarte h3{font-size:17.5px; font-weight:600; line-height:1.35; color:#3E4A59}
.arztkarte-rolle{font-size:14.5px; color:var(--grau-mittel); line-height:1.5}
.arztkarte-jahre{font-size:14px; color:var(--grau-hell); line-height:1.5; flex:1}
.arztkarte-jahre b{color:var(--grau); font-weight:600}
.arztkarte .mehr{align-self:flex-start; font-size:15px}
.aerzte-fuss{
  margin-top:clamp(26px,3.4vw,38px); display:flex; align-items:center; justify-content:center;
  gap:16px; flex-wrap:wrap; font-size:16px; color:var(--grau-mittel);
}
.aerzte-fuss b{color:var(--tinte)}
.aerzte .pfeil{background:var(--blau-400)}

/* ---------- Über die Klinik ---------- */

.ueber{position:relative}
.ueber-raster{display:grid; grid-template-columns:1fr 1.06fr; gap:clamp(30px,5vw,68px); align-items:start}
@media (max-width:900px){.ueber-raster{grid-template-columns:1fr}}
.ueber-text{display:grid; gap:22px; color:var(--grau); font-size:16.5px; line-height:1.75}
.ueber-text .mehr{margin-top:6px; justify-self:start}
.ueber-bilder{display:grid; gap:clamp(12px,1.6vw,18px)}
.ueber-bilder>img:first-child{width:100%; border-radius:var(--r-mittel); aspect-ratio:4/3; object-fit:cover; box-shadow:var(--schatten-karte)}
.ueber-klein{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.6vw,18px)}
.ueber-klein img{width:100%; border-radius:var(--r-klein); aspect-ratio:13/10; object-fit:cover; box-shadow:var(--schatten-karte)}

.zahlenband{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:clamp(14px,2vw,24px); margin-top:clamp(38px,5vw,60px);
}
.zahl{background:var(--weiss); border-radius:var(--r-mittel); padding:26px 24px; box-shadow:var(--schatten-karte)}
.zahl b{display:block; font-size:2rem; font-weight:700; color:var(--blau-600); letter-spacing:-.02em; line-height:1}
.zahl span{display:block; margin-top:8px; font-size:14.5px; color:var(--grau-mittel); line-height:1.5}

/* ---------- Aktuelles ---------- */

.aktuell{background:var(--blau-50)}
.beitraege{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(18px,2.4vw,28px)}
.beitrag{
  background:var(--weiss); border-radius:var(--r-mittel); overflow:hidden;
  box-shadow:var(--schatten-karte); display:flex; flex-direction:column;
  transition:transform .3s, box-shadow .3s;
}
.beitrag:hover{transform:translateY(-6px); box-shadow:0 30px 56px -30px rgba(40,64,104,.5)}
.beitrag img{width:100%; aspect-ratio:40/27; object-fit:cover}
.beitrag-text{padding:24px 26px 28px; display:flex; flex-direction:column; gap:12px; flex:1}
.beitrag-datum{font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--blau-600); font-weight:700}
.beitrag h3{font-size:18px; font-weight:600; line-height:1.4; color:#3E4A59}
.beitrag p{font-size:15px; color:var(--grau-mittel); line-height:1.6; flex:1}

/* ---------- Standort ---------- */

.standort-bild{width:100%; border-radius:var(--r-gross); aspect-ratio:4/3; object-fit:cover; box-shadow:var(--schatten)}
.standort-raster{
  display:grid; grid-template-columns:1.05fr 1fr; align-items:center;
  gap:clamp(26px,4vw,58px);
}
.standort-felder{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(22px,3vw,34px);
}
@media (max-width:860px){
  .standort-raster{grid-template-columns:1fr}
}
.standort-block h3{font-size:16px; font-weight:700; color:var(--tinte); margin-bottom:12px; letter-spacing:.02em}
.standort-block p,.standort-block li{font-size:15.5px; line-height:1.75; color:var(--grau-mittel)}
.standort-block a{color:var(--blau-600); text-decoration:none; border-bottom:1px solid var(--blau-200)}
.standort-block a:hover{border-color:var(--blau-600)}
.zeiten{display:grid; gap:5px}
.zeiten li{display:flex; justify-content:space-between; gap:16px; max-width:260px}
.zeiten span:last-child{color:var(--grau); font-weight:600}

/* ---------- Fußzeile ---------- */

.fuss{background:linear-gradient(140deg,#4E71B4,#3D5E9C); color:#fff; margin-top:clamp(50px,7vw,90px); position:relative; overflow:hidden}
.fuss-oben{
  display:flex; align-items:center; gap:clamp(20px,4vw,50px); flex-wrap:wrap;
  padding:clamp(30px,4vw,44px) 0; border-bottom:1px solid rgba(255,255,255,.28);
}
.fuss .marke-wort,.fuss .marke-zusatz{color:#fff}
.fuss .marke-zeichen{color:#fff}
.fuss-tel{display:grid; gap:5px; font-size:15.5px}
.fuss-tel a{color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.4)}
.fuss-tel a:hover{border-color:#fff}
.fuss-tel b{font-weight:700}
.fuss-rechts{margin-left:auto; display:flex; align-items:center; gap:16px}
.fuss .sozial a{color:#fff}
.fuss .sozial a:hover{background:rgba(255,255,255,.2)}
.fuss-nav{padding:clamp(20px,3vw,28px) 0}
.fuss-nav ul{display:flex; flex-wrap:wrap; gap:14px clamp(20px,3.4vw,44px)}
.fuss-nav a{color:#fff; text-decoration:none; font-size:15px; font-weight:500; opacity:.94; border-bottom:1px solid transparent}
.fuss-nav a:hover{border-color:#fff}
.fuss-band{
  border-top:1px solid rgba(255,255,255,.28); padding:22px 0 30px;
  display:flex; justify-content:space-between; gap:16px 34px; flex-wrap:wrap;
  font-size:13.5px; color:rgba(255,255,255,.92); line-height:1.6;
}
.fuss-band a{color:#fff}
.fuss-demo{font-weight:700}
@media (max-width:760px){.fuss-rechts{margin-left:0; width:100%}}

/* ---------- Einblendungen beim Scrollen ---------- */

.zeigt{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1)}
.zeigt.da{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.zeigt{opacity:1; transform:none; transition:none}}

/* ---------- Nach-oben-Knopf ---------- */
.hoch{
  position:fixed; right:22px; bottom:22px; z-index:80; width:48px; height:48px; border-radius:50%;
  background:var(--blau-500); color:#fff; display:grid; place-items:center;
  box-shadow:0 16px 32px -16px rgba(40,64,104,.9);
  opacity:0; pointer-events:none; transform:translateY(12px); transition:opacity .3s, transform .3s, background-color .25s;
}
.hoch.da{opacity:1; pointer-events:auto; transform:none}
.hoch:hover{background:var(--blau-600)}
.hoch svg{width:17px; height:17px}

/* ============================================================
   Unterseiten
   ============================================================ */

.seitenkopf{
  background:linear-gradient(150deg,#E9F1FC 0%,#DCE7F9 55%,#E2E5F6 100%);
  padding:clamp(38px,6vw,72px) 0 clamp(34px,5vw,54px); position:relative; overflow:hidden;
}
.brotkrumen{font-size:14px; color:var(--grau-mittel); margin-bottom:16px}
.brotkrumen a{color:var(--blau-600); text-decoration:none; border-bottom:1px solid var(--blau-200)}
.brotkrumen a:hover{border-color:var(--blau-600)}
.seitenkopf h1{font-size:clamp(1.85rem,4.4vw,2.9rem); font-weight:700; letter-spacing:-.02em; color:#33404F}
.seitenkopf>.bahn>p{margin-top:14px; max-width:660px; font-size:16.5px; color:var(--grau)}

.suche{margin-top:26px; max-width:460px}
.suche label{display:block; font-size:12.5px; font-weight:700; letter-spacing:.05em; color:var(--grau-mittel); margin-bottom:7px}
.suche .feld-huelle svg{color:var(--blau-500)}
.suche input{
  width:100%; padding:15px 20px 15px 48px; border-radius:999px; border:1.5px solid var(--blau-200);
  background:#fff; color:var(--tinte); font-size:15.5px; transition:border-color .25s, box-shadow .25s;
}
.suche input:focus{outline:none; border-color:var(--blau-500); box-shadow:0 0 0 4px rgba(90,131,200,.24)}
.suche input::-webkit-search-cancel-button{cursor:pointer}
.suche-treffer{margin-top:9px; font-size:14px; color:var(--grau-mittel); min-height:1.2em}

.katalog-raster{display:grid; grid-template-columns:260px 1fr; gap:clamp(28px,4vw,56px); align-items:start}
@media (max-width:900px){.katalog-raster{grid-template-columns:1fr}}

.katalog-nav{position:sticky; top:104px}
@media (max-width:900px){.katalog-nav{position:static}}
.katalog-nav h2{font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--grau-hell); font-weight:700; margin-bottom:14px}
.katalog-nav ul{display:grid; gap:2px}
.katalog-nav a{
  display:block; padding:9px 14px; border-radius:10px; text-decoration:none;
  font-size:15px; color:var(--grau); transition:background-color .2s, color .2s;
}
.katalog-nav a:hover{background:var(--blau-50); color:var(--blau-600)}

.katalog-inhalt{display:grid; gap:clamp(24px,3vw,36px)}
.gruppe{
  background:var(--weiss); border-radius:var(--r-mittel); padding:clamp(24px,3vw,36px);
  box-shadow:var(--schatten-karte); scroll-margin-top:104px;
}
.gruppe-kopf{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap}
.gruppe-kopf h2{font-size:clamp(1.15rem,2.4vw,1.5rem); font-weight:600; color:#3E4A59}
.gruppe-zahl{font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--blau-600); white-space:nowrap}
.gruppe-text{margin-top:10px; font-size:15.5px; color:var(--grau-mittel); line-height:1.65; max-width:70ch}
.gruppe-liste{
  margin-top:22px; display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr));
  gap:2px 26px;
}
.gruppe-liste li{
  position:relative; padding:9px 0 9px 26px; font-size:15.5px; color:var(--grau);
  border-bottom:1px solid var(--blau-50); line-height:1.5;
}
.gruppe-liste li::before{
  content:''; position:absolute; left:2px; top:1.05em; width:9px; height:9px;
  border-radius:50%; border:1.8px solid var(--blau-300);
}
.gruppe-liste li.treffer{background:linear-gradient(90deg,var(--oliv-50),transparent); border-radius:8px}
.gruppe[hidden]{display:none}
.gruppe-liste li[hidden]{display:none}

.katalog-hinweis{
  font-size:13.5px; color:var(--grau-hell); line-height:1.7; padding:20px 24px;
  border-radius:var(--r-klein); background:var(--blau-50);
}

/* ---------- Fehlerseite ---------- */
.fehler{text-align:center; padding:clamp(70px,12vw,150px) 0}
.fehler-zahl{
  font-size:clamp(4.5rem,16vw,9rem); font-weight:700; line-height:1; letter-spacing:-.04em;
  background:linear-gradient(140deg,#A9C6F0,#7FA5E4); -webkit-background-clip:text;
  background-clip:text; color:transparent;
}
.fehler h1{margin-top:18px; font-size:clamp(1.4rem,3.4vw,2.1rem); font-weight:600; color:#3E4A59}
.fehler p:not(.fehler-zahl){margin:16px auto 30px; max-width:520px; color:var(--grau-mittel); font-size:16.5px}

/* ---------- Rechtstexte ---------- */
.rechts{
  width:min(100% - 40px,760px); margin:clamp(40px,6vw,80px) auto clamp(50px,7vw,90px);
  background:var(--weiss); border-radius:var(--r-gross); padding:clamp(30px,5vw,58px);
  box-shadow:var(--schatten-karte);
}
.rechts h1{font-size:clamp(1.7rem,4vw,2.4rem); font-weight:700; letter-spacing:-.02em; color:#33404F}
.rechts h2{font-size:1.12rem; font-weight:700; color:var(--tinte); margin:34px 0 10px}
.rechts p,.rechts li{font-size:16px; line-height:1.75; color:var(--grau)}
.rechts p{margin-top:10px}
.rechts ul{margin-top:10px; display:grid; gap:7px}
.rechts li{position:relative; padding-left:22px}
.rechts li::before{content:''; position:absolute; left:2px; top:.68em; width:7px; height:7px; border-radius:50%; background:var(--blau-300)}
.rechts a{color:var(--blau-600)}
.hinweis{
  margin-top:24px; padding:18px 22px; border-radius:var(--r-klein);
  background:var(--oliv-50); color:#5C6338; font-size:15px; line-height:1.65;
}
.rechts-zurueck{margin-top:38px}


/* ---------- gestapelte Ansicht: Verläufe drehen, damit Text auf dunklem Grund liegt ---------- */
@media (max-width:900px){
  /* Die ruhige helle Flaeche wird in PIXELN von unten gemessen, nicht in
     Prozent: so liegt sie immer genau hinter dem Foto und nie hinter Text,
     egal wie lang der Text der jeweiligen Folie ist. */
  .held-karte{
    background:linear-gradient(180deg,#31518D 0%,#3F5F9B 50%,
      #3F5F9B calc(100% - 305px),#83A3E0 calc(100% - 275px),
      #E9F0FB calc(100% - 245px),#E9F0FB 100%);
  }
  .beratung-karte{
    background:linear-gradient(180deg,#35558E 0%,#42659F 50%,
      #42659F calc(100% - 300px),#83A3E0 calc(100% - 272px),
      #E9F0FB calc(100% - 245px),#E9F0FB 100%);
  }
}

/* ---------- schmale Fenster: Überlauf vermeiden ---------- */
@media (max-width:640px){
  .folie-liste{grid-template-columns:1fr; gap:6px}
  .held-person{width:min(58%,240px)}
  .held-kacheln{gap:12px; flex-wrap:nowrap}
  .kachel{width:auto; flex:1 1 0; min-width:0; padding:18px 18px 20px}
  .kachel-zahl b{font-size:1.75rem}
  .kachel-zahl span{font-size:13.5px}
  .kachel p{font-size:12.5px}
  .knopf{padding:15px 26px}
  .folie-aktion{gap:12px}
}

/* ---------- Bedienelemente auf kleinen Fenstern ---------- */
@media (max-width:900px){
  /* Kopfbereich: Pfeile nach unten neben die Punkte */
  .held .pfeil{top:auto; bottom:12px; transform:none; width:40px; height:40px}
  .held .pfeil-links{left:14px}
  .held .pfeil-rechts{right:14px}
  .held-punkte{bottom:24px}
}
@media (max-width:760px){
  /* Schieber werden gewischt - Pfeile würden nur die Karten verdecken */
  .schieber .pfeil{display:none}
  .spur{padding-bottom:16px}
}
@media (max-width:640px){
  .held-person{height:225px}
  .held-inhalt{padding-bottom:300px}
}