:root{
  --navy:#1B2A4A; --navy-deep:#111D34; --navy-soft:#2C3E63;
  --gold:#A8924F; --gold-light:#C9B679; --gold-text:#776025;
  --sand:#FBF6EA; --ice:#EEF1F6;
  --ink:#22262B; --body:#3A4148; --mute:#6B7480; --line:#DDE3EC;
  --white:#fff;
  --serif:"Manrope","Segoe UI",system-ui,sans-serif;
  --sans:"Manrope","Segoe UI",system-ui,sans-serif;
  --wrap:1140px;
  --r:3px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--body);font-family:var(--sans);font-size:17px;line-height:1.68;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--navy);text-decoration:none}
p{margin:0 0 1.1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.narrow{max-width:760px}
h1,h2,h3,h4{font-family:var(--serif);color:var(--navy);font-weight:700;line-height:1.18;margin:0 0 .5em}
h1{font-size:clamp(34px,5.2vw,58px);letter-spacing:-.5px}
h2{font-size:clamp(26px,3.4vw,38px)}
h3{font-size:21px}
h4{font-size:17px;font-family:var(--sans);letter-spacing:.01em}
.eyebrow{font-family:var(--sans);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-text);font-weight:600;margin:0 0 14px}
.eyebrow.d{color:var(--gold-light)}
.lead{font-size:20px;line-height:1.6;color:var(--ink)}
.mute{color:var(--mute)}
.small{font-size:14.5px;line-height:1.6}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------- Kopf ---------- */
header.site{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.97);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:22px;height:74px}
.brand{display:flex;flex-direction:column;line-height:1.1;margin-right:auto;cursor:pointer}
.brand b{font-family:var(--serif);font-size:19px;color:var(--navy);letter-spacing:.2px}
.brand span{font-size:10.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--gold-text);font-weight:600;margin-top:3px}
nav.main{display:flex;gap:2px;flex-wrap:wrap}
nav.main a{font-size:14px;padding:8px 11px;border-radius:var(--r);color:var(--body);white-space:nowrap}
nav.main a:hover{background:var(--ice);color:var(--navy)}
nav.main a.active{color:var(--navy);font-weight:600;box-shadow:inset 0 -2px 0 var(--gold)}
.btn{display:inline-block;background:var(--navy);color:#fff;padding:11px 20px;border-radius:var(--r);font-size:14.5px;font-weight:600;border:1px solid var(--navy);cursor:pointer;font-family:var(--sans)}
.btn:hover{background:var(--navy-deep)}
.btn.ghost{background:transparent;color:var(--navy)}
.btn.ghost:hover{background:var(--ice)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#1b1b1b}
.btn.gold:hover{background:#96813f}
.btn.on-dark{background:#fff;color:var(--navy);border-color:#fff}
.btn.on-dark.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:var(--r);padding:9px 12px;cursor:pointer;font-size:15px}
@media(max-width:1080px){
  nav.main{position:fixed;inset:74px 0 auto 0;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;padding:10px 18px 20px;display:none;max-height:calc(100vh - 74px);overflow:auto}
  nav.main.open{display:flex}
  nav.main a{padding:12px 6px;border-bottom:1px solid var(--ice)}
  .burger{display:block}
  .bar .btn.head{padding:9px 14px;font-size:13.5px}
}

/* ---------- Seiten ---------- */
.page{display:none;animation:fade .35s ease}
.page.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
section{padding:74px 0}
section.tight{padding:48px 0}
.band-navy{background:var(--navy);color:#D9E1EE}
.band-navy h2,.band-navy h3,.band-navy h1{color:#fff}
.band-sand{background:var(--sand)}
.band-ice{background:var(--ice)}

/* ---------- Raster ---------- */
.grid{display:grid;gap:26px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:32px}}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 24px}
.card h3{font-size:19px;margin-bottom:.35em}
.card .small{color:var(--mute)}
.card.link{cursor:pointer;transition:border-color .2s,transform .2s}
.card.link:hover{border-color:var(--gold);transform:translateY(-2px)}
.card .more{font-size:13px;font-weight:600;color:var(--gold-text);letter-spacing:.02em;margin-top:14px;display:inline-block}
.card.dark{background:var(--navy-soft);border-color:rgba(255,255,255,.12);color:#D9E1EE}
.num{font-family:var(--serif);font-size:13px;color:var(--gold-text);letter-spacing:.18em;display:block;margin-bottom:10px}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(160deg,var(--navy-deep) 0%,var(--navy) 58%,#22375E 100%);color:#D9E1EE;position:relative;overflow:hidden;padding:86px 0 74px}
.hero:after{content:"";position:absolute;right:-16%;top:-28%;width:70%;height:150%;background:radial-gradient(closest-side,rgba(168,146,79,.20),transparent 72%)}
.hero .wrap{position:relative;z-index:2}
.hero h1{color:#fff;max-width:15ch}
.hero .lead{color:#C4D0E2;max-width:52ch}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.facts{display:flex;flex-wrap:wrap;gap:0;margin-top:52px;border-top:1px solid rgba(255,255,255,.16)}
.fact{flex:1 1 190px;padding:22px 22px 4px 0;border-right:1px solid rgba(255,255,255,.12)}
.fact:last-child{border-right:0}
.fact b{display:block;font-family:var(--serif);font-size:30px;color:#fff;line-height:1}
.fact span{font-size:13px;color:#9DB0CA;display:block;margin-top:7px}

/* ---------- Weiche (Signature) ---------- */
.weiche{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.weiche-top{padding:26px 26px 22px;border-bottom:1px solid var(--line);background:var(--sand)}
.weiche-cols{display:grid;grid-template-columns:1fr 1fr}
@media(max-width:720px){.weiche-cols{grid-template-columns:1fr}}
.wcol{padding:26px 24px 30px;cursor:pointer;border-right:1px solid var(--line);transition:background .2s}
.wcol:last-child{border-right:0}
.wcol:hover{background:#FAFBFD}
.wcol.sel{background:var(--navy);color:#CFDAEA}
.wcol.sel h3,.wcol.sel .num{color:#fff}
.wcol.sel .num{color:var(--gold-light)}
.wcol .detail{display:none;margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.2);font-size:15px}
.wcol.sel .detail{display:block}
.wcol .hint{font-size:13px;color:var(--gold-text);font-weight:600;margin-top:14px;display:block}
.wcol.sel .hint{display:none}

/* ---------- Körperkarte ---------- */
.bodymap{display:grid;grid-template-columns:300px 1fr;gap:44px;align-items:start}
@media(max-width:820px){.bodymap{grid-template-columns:1fr;gap:26px}}
.joint{cursor:pointer}
.joint circle{transition:all .18s}
.joint:hover circle.hit,.joint.on circle.hit{fill:var(--gold);r:11}
.joint text{font-size:11px;fill:var(--mute);font-family:var(--sans)}
.joint.on text{fill:var(--navy);font-weight:600}
.jointpanel{border-left:2px solid var(--gold);padding-left:26px;min-height:220px}
@media(max-width:820px){.jointpanel{border-left:0;border-top:2px solid var(--gold);padding:22px 0 0}}

/* ---------- Listen / Tabellen ---------- */
table{width:100%;border-collapse:collapse;font-size:15px}
thead th{background:var(--navy);color:#fff;text-align:left;padding:11px 14px;font-weight:600;font-family:var(--sans);font-size:14px}
tbody td{padding:11px 14px;border:0;vertical-align:top}
tbody tr:nth-child(odd){background:var(--ice)}
tbody td:first-child{font-weight:600;color:var(--ink)}
.tablewrap{overflow-x:auto;border-radius:var(--r);border:1px solid var(--line)}

.deflist{border-top:1px solid var(--line)}
.deflist div{display:grid;grid-template-columns:210px 1fr;gap:20px;padding:16px 0;border-bottom:1px solid var(--line)}
@media(max-width:640px){.deflist div{grid-template-columns:1fr;gap:4px}}
.deflist b{color:var(--navy);font-family:var(--serif);font-size:17px}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.chip{border:1px solid var(--line);border-radius:100px;padding:6px 14px;font-size:13.5px;color:var(--body);background:#fff;cursor:pointer}
.chip:hover,.chip.on{border-color:var(--gold);background:var(--sand);color:var(--navy)}

/* ---------- Galerie ---------- */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:820px){.gal{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.gal{grid-template-columns:1fr}}
.shot{position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.shot .ph{position:absolute;inset:0;display:flex;align-items:flex-end;padding:16px;background:linear-gradient(145deg,#243A63,#16243F)}
.shot.a .ph{background:linear-gradient(145deg,#2C3E63,#1B2A4A)}
.shot.b .ph{background:linear-gradient(145deg,#5B6B86,#31405E)}
.shot.c .ph{background:linear-gradient(145deg,#A8924F,#6E5E32)}
.shot.d .ph{background:linear-gradient(145deg,#C6CFDD,#8E9CB2)}
.shot .cap{color:#fff;font-size:13.5px;line-height:1.45;position:relative;z-index:2}
.shot .cap b{display:block;font-family:var(--serif);font-size:16px;margin-bottom:2px}
.shot:after{content:"Motiv";position:absolute;top:12px;right:12px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6);z-index:2}

/* ---------- Formular / Test ---------- */
.qbox{border:1px solid var(--line);border-radius:var(--r);padding:24px;background:#fff;margin-bottom:14px}
.qbox p.q{font-weight:600;color:var(--ink);margin-bottom:12px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{border:1px solid var(--line);background:#fff;border-radius:var(--r);padding:9px 14px;font-size:14px;cursor:pointer;font-family:var(--sans);color:var(--body)}
.opt:hover{border-color:var(--gold)}
.opt.sel{background:var(--navy);color:#fff;border-color:var(--navy)}
.result{border-left:3px solid var(--gold);background:var(--sand);padding:22px 24px;border-radius:var(--r);display:none}
.result.show{display:block}
.result h3{margin-bottom:.3em}
.meter{height:8px;background:var(--ice);border-radius:100px;overflow:hidden;margin:14px 0 6px}
.meter i{display:block;height:100%;background:var(--gold);width:0;transition:width .5s}

.note{font-size:13.5px;color:var(--mute);border-top:1px solid var(--line);padding-top:14px;margin-top:22px}

/* ---------- Lexikon ---------- */
.searchbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.searchbar input{flex:1 1 260px;padding:13px 16px;border:1px solid var(--line);border-radius:var(--r);font-size:15.5px;font-family:var(--sans)}
.searchbar input:focus{outline:2px solid var(--gold);outline-offset:0;border-color:var(--gold)}
.lexitem{border-bottom:1px solid var(--line);padding:18px 0}
.lexitem b{color:var(--navy);font-family:var(--serif);font-size:18px;display:block;margin-bottom:4px}
.lexitem span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text);font-weight:600;margin-left:10px}

/* ---------- Fuß ---------- */
footer.site{background:var(--navy-deep);color:#93A4BE;padding:60px 0 28px;font-size:14.5px}
footer.site h4{color:#fff;font-family:var(--sans);font-size:12px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:14px}
footer.site a{color:#B9C6DA;display:block;padding:4px 0}
footer.site a:hover{color:#fff}
.footbottom{border-top:1px solid rgba(255,255,255,.12);margin-top:40px;padding-top:20px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13px;color:#7C8CA6}

/* ---------- Dummy-Marker ---------- */
.dummybar{background:#A8924F;color:#1a1a1a;font-size:12.5px;padding:7px 0;letter-spacing:.02em}
.dummybar .wrap{display:flex;gap:14px;justify-content:space-between;flex-wrap:wrap;align-items:center}
.tag{display:inline-block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text);border:1px solid var(--gold);border-radius:100px;padding:2px 9px;vertical-align:middle;margin-left:8px;font-weight:600}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- Bibliothek ---------- */
.libgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:22px}
.libcard{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;cursor:pointer;background:#fff;transition:border-color .2s,transform .2s,box-shadow .2s;display:flex;flex-direction:column}
.libcard:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 8px 26px rgba(27,42,74,.10)}
.libcard img{width:100%;aspect-ratio:2/3;object-fit:cover;object-position:top;background:var(--ice)}
.libmeta{padding:14px 15px 18px}
.tagline{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold-text);font-weight:600}
.libmeta b{display:block;font-family:var(--serif);font-size:17px;color:var(--navy);margin:6px 0 1px;line-height:1.25}
.libmeta i{display:block;font-style:normal;font-size:13px;color:var(--mute);margin-bottom:8px}
.libmeta p{font-size:13.5px;line-height:1.5;color:var(--body);margin:0}
.docview{position:fixed;inset:0;background:rgba(10,16,28,.72);z-index:180;display:none;overflow:auto;padding:40px 20px}
.docview.open{display:block}
.docpanel{max-width:840px;margin:0 auto;background:#fff;border-radius:var(--r);padding:34px 34px 40px;position:relative}
@media(max-width:640px){.docpanel{padding:24px 20px 30px}.docview{padding:16px 10px}}
.docclose{position:absolute;top:14px;right:16px;border:1px solid var(--line);background:#fff;border-radius:var(--r);padding:7px 12px;cursor:pointer;font-size:14px;font-family:var(--sans)}
.docheadgrid{display:grid;grid-template-columns:170px 1fr;gap:26px;align-items:start}
@media(max-width:640px){.docheadgrid{grid-template-columns:1fr}}
.docheadgrid img{border:1px solid var(--line);border-radius:var(--r)}
.lexlink{color:var(--navy);border-bottom:1px solid var(--gold);cursor:pointer}

/* ---------- Assistent ---------- */
.chat{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.chatlog{padding:22px;min-height:330px;max-height:52vh;overflow:auto;background:linear-gradient(180deg,#FAFBFD,#fff)}
.msg{max-width:78%;padding:14px 17px;border-radius:var(--r);margin-bottom:14px;font-size:15.5px;line-height:1.62}
.msg p{margin:0 0 .7em}.msg p:last-child{margin:0}
.msg.bot{background:var(--ice);color:var(--ink);border-left:3px solid var(--gold)}
.msg.me{background:var(--navy);color:#E4EAF4;margin-left:auto;border-left:0}
@media(max-width:640px){.msg{max-width:92%}}
.msg .src{font-size:12px;letter-spacing:.03em;color:var(--mute);border-top:1px solid var(--line);margin-top:12px;padding-top:9px}
.msg .alsoq{font-size:13px;color:var(--mute);margin:14px 0 8px}
.msg .alarm{background:#FBF6EA;border-left:3px solid var(--gold);padding:14px 16px;margin:-14px -17px;border-radius:var(--r)}
.msg .alarm b{display:block;color:var(--navy);font-family:var(--serif);font-size:17px;margin-bottom:6px}
.msg .alarm p{margin:0}
.small-btn{padding:7px 13px;font-size:13px}
.chatsug{display:flex;gap:8px;flex-wrap:wrap;padding:14px 22px;border-top:1px solid var(--line);background:var(--sand)}
.chatsug .chip{font-size:13px;background:#fff}
.chatin{display:flex;gap:10px;padding:14px 22px;border-top:1px solid var(--line)}
.chatin input{flex:1;padding:13px 15px;border:1px solid var(--line);border-radius:var(--r);font-size:15.5px;font-family:var(--sans)}
.chatin input:focus{outline:2px solid var(--gold);border-color:var(--gold)}

/* ---------- Verfahren ---------- */
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}
.vcard{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;cursor:pointer;background:#fff;display:flex;flex-direction:column;transition:border-color .2s,transform .2s,box-shadow .2s}
.vcard:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 10px 28px rgba(27,42,74,.10)}
.vcard img{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--ice)}
.vcard .vph{width:100%;aspect-ratio:16/10;background:linear-gradient(145deg,#2C3E63,#1B2A4A)}
.vmeta{padding:18px 19px 22px}
.vmeta b{display:block;font-family:var(--serif);font-size:19px;color:var(--navy);margin:7px 0 6px;line-height:1.25}
.vmeta p{font-size:14.5px;line-height:1.55;color:var(--body);margin:0}
.vview{position:fixed;inset:0;background:rgba(10,16,28,.74);z-index:185;display:none;overflow:auto;padding:40px 20px}
.vview.open{display:block}
.vpanel{max-width:880px;margin:0 auto;background:#fff;border-radius:var(--r);padding:34px 36px 42px;position:relative}
@media(max-width:640px){.vpanel{padding:24px 20px 32px}.vview{padding:14px 10px}}
.vpanel h3{font-family:var(--serif);font-size:20px;margin:30px 0 .4em;padding-top:20px;border-top:1px solid var(--line)}
.vpanel h3:first-of-type{border-top:0;padding-top:0}
.vgal{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:6px 0 26px}
.vgal figure.wide{grid-column:1/-1}
.vgal figure{margin:0}
.vgal img{width:100%;border-radius:var(--r);border:1px solid var(--line);background:var(--ice);object-fit:cover;aspect-ratio:16/10}
.vgal figure.wide img{aspect-ratio:16/8}
.vgal figcaption{font-size:12.5px;line-height:1.5;color:var(--mute);margin-top:7px}
@media(max-width:640px){.vgal{grid-template-columns:1fr}}
.vsvg{background:var(--ice);border-radius:var(--r);padding:16px 16px 10px;margin:0 0 26px}
.vsvg svg{width:100%;height:auto;display:block;margin-top:8px}
.vsteps{margin:0;padding-left:22px}
.vsteps li{margin-bottom:9px;font-size:15.5px;line-height:1.6}
.vsteps li::marker{color:var(--gold-text);font-weight:700}

/* ---------- KI-Lexikon ---------- */
.chat{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.chatlog{padding:22px;min-height:340px;max-height:56vh;overflow:auto;background:linear-gradient(180deg,#FAFBFD,#fff)}
.msg{max-width:82%;padding:15px 18px;border-radius:var(--r);margin-bottom:16px;font-size:15.5px;line-height:1.62}
.msg p{margin:0 0 .7em}.msg p:last-child{margin:0}
.msg.bot{background:var(--ice);color:var(--ink);border-left:3px solid var(--gold)}
.msg.me{background:var(--navy);color:#E4EAF4;margin-left:auto}
@media(max-width:640px){.msg{max-width:94%}}
.msg .src{font-size:12px;color:var(--mute);border-top:1px solid var(--line);margin-top:12px;padding-top:9px}
.msg .alsoq{font-size:13px;color:var(--mute);margin:14px 0 8px}
.msg .mrow{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}
.msg .alarm{background:#FBF6EA;border-left:3px solid var(--gold);padding:15px 17px;margin:-15px -18px;border-radius:var(--r)}
.msg .alarm b{display:block;color:var(--navy);font-family:var(--serif);font-size:17px;margin-bottom:6px}
.msg .alarm p{margin:0}
.msg .ki{background:#fff;border:1px dashed var(--gold);border-radius:var(--r);padding:14px 16px;margin:-4px 0 0}
.msg .ki p{margin:8px 0 0}
.melde{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line);display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--mute)}
.mbtn{border:1px solid var(--line);background:#fff;border-radius:100px;padding:5px 12px;font-size:12.5px;font-family:var(--sans);color:var(--body);cursor:pointer}
.mbtn:hover{border-color:var(--gold);background:var(--sand);color:var(--navy)}
.small-btn{padding:7px 13px;font-size:13px}
.chatsug{display:flex;gap:8px;flex-wrap:wrap;padding:14px 22px;border-top:1px solid var(--line);background:var(--sand)}
.chatsug .chip{font-size:13px;background:#fff}
.chatin{display:flex;gap:10px;padding:14px 22px;border-top:1px solid var(--line)}
.chatin input{flex:1;padding:13px 15px;border:1px solid var(--line);border-radius:var(--r);font-size:15.5px;font-family:var(--sans)}
.chatin input:focus{outline:2px solid var(--gold);border-color:var(--gold)}
.ringbtn{position:fixed;right:20px;bottom:20px;z-index:150;background:var(--navy);color:#fff;border:1px solid var(--navy);border-radius:100px;padding:12px 20px 12px 16px;font-family:var(--sans);font-size:14.5px;font-weight:600;cursor:pointer;box-shadow:0 8px 26px rgba(17,29,52,.28);display:flex;align-items:center;gap:9px}
.ringbtn:hover{background:var(--navy-deep)}
.ringbtn span{color:var(--gold-light);font-size:17px;line-height:1;font-weight:700}
@media(max-width:640px){.ringbtn{right:14px;bottom:14px;padding:11px 17px 11px 14px}}

/* ---------- KI-Hinweis und Meldekarte ---------- */
.chathead{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line);background:var(--navy)}
.kibadge{background:var(--gold);color:#1b1b1b;font-size:11px;font-weight:700;letter-spacing:.1em;padding:4px 8px;border-radius:3px}
.chatname b{display:block;font-family:var(--serif);color:#fff;font-size:16px;line-height:1.2}
.chatname i{font-style:normal;font-size:11.5px;color:#9DB0CA}
.hbtn2{margin-left:auto;background:transparent;border:1px solid rgba(255,255,255,.3);color:#D9E1EE;border-radius:3px;padding:7px 12px;font-size:13px;font-family:var(--sans);cursor:pointer;white-space:nowrap}
.hbtn2:hover{background:rgba(255,255,255,.1)}
.kipanel{display:none;padding:20px 22px;background:var(--sand);border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.6}
.kipanel.open{display:block}
.kipanel p{margin:0 0 .8em}.kipanel p:last-child{margin:0}
.qbadge{display:inline-block;background:var(--ice);color:var(--navy);border:1px solid var(--line);border-radius:100px;padding:2px 9px;font-size:11px;font-weight:600;margin-right:7px}
.msg .ki{background:#fff;border:1px solid var(--gold);border-left-width:3px;border-radius:var(--r);padding:14px 16px 14px 16px;position:relative}
.kimark{display:inline-block;background:var(--gold);color:#1b1b1b;font-size:10.5px;font-weight:700;letter-spacing:.1em;padding:3px 7px;border-radius:3px;margin-bottom:9px}
.kiquellen{background:var(--ice);border-radius:var(--r);padding:12px 14px;margin:12px 0;font-size:13px}
.kiquellen b{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text);margin-bottom:7px}
.kiquellen span{display:block;color:var(--body);padding:2px 0;border-bottom:1px solid #DFE5EF}
.kiquellen span:last-child{border-bottom:0}
.tippt{display:inline-flex;gap:5px;padding:4px 0}
.tippt i{width:7px;height:7px;border-radius:50%;background:var(--gold);opacity:.35;animation:tp 1.1s infinite}
.tippt i:nth-child(2){animation-delay:.18s}.tippt i:nth-child(3){animation-delay:.36s}
@keyframes tp{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.meldform{width:100%}
.meldform b{display:block;font-size:13.5px;color:var(--navy);margin-bottom:8px}
.meldform textarea,.meldform input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);font-size:14.5px;font-family:var(--sans);margin-bottom:8px;color:var(--body)}
.meldform textarea{min-height:70px}
.meldbox{margin-top:24px}
.meldrow{border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:var(--r);padding:13px 15px;margin-bottom:10px;background:#fff}
.meldrow b{display:block;font-size:15px;color:var(--ink);margin-top:4px;font-weight:500}
.meldrow i{font-style:normal;font-size:12.5px;color:var(--mute);display:block;margin-top:5px}

/* Navigation ohne Skript */
html.js .page.active{display:block}
html:not(.js) .page:target{display:block}
html:not(.js) body:not(:has(.page:target)) #start{display:block}
html:not(.js) #start{display:block}
html:not(.js) body:has(.page:target:not(#start)) #start{display:none}
html:not(.js) .ringbtn{display:none}

/* ---------- Marke und Kopfzeile ---------- */
.bar{display:flex;align-items:center;gap:20px;height:auto;min-height:78px;padding:12px 0;flex-wrap:nowrap}
.brand{display:flex;align-items:center;gap:14px;margin-right:auto;cursor:pointer;text-decoration:none;flex:0 0 auto}
.brand .logo{height:46px;width:auto;display:block;flex:0 0 auto}
.brand .bsep{width:1px;height:36px;background:var(--line);flex:0 0 auto;margin:0;text-transform:none;letter-spacing:normal}
.brand .btxt{text-transform:none;letter-spacing:normal;font-size:16px;color:var(--body);font-weight:400;margin:0;line-height:1.15;white-space:nowrap}
.brand .btxt b{display:block;font-family:var(--serif);font-size:19px;font-weight:700;color:var(--navy);letter-spacing:.2px;text-transform:none}
.brand .btxt i{display:block;font-style:normal;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-text);font-weight:600;margin-top:4px}
nav.main{display:flex;gap:2px;flex-wrap:nowrap;overflow:visible}
.burger{display:none}
@media(max-width:1700px){
  nav.main{position:static;order:3;flex-basis:100%;flex-wrap:wrap;background:transparent;border:0;padding:0;max-height:none;flex-direction:row;display:none}
  nav.main.open{display:flex}
  nav.main a{padding:10px 12px;border-bottom:0}
  .bar{flex-wrap:wrap}
  .burger{display:block}
}
@media(max-width:640px){
  .brand .logo{height:34px}
  .brand .btxt b{font-size:16px}
  .brand .btxt i{font-size:9px}
  .brand{gap:9px}
  .bar .btn.head{padding:9px 14px;font-size:13.5px}
  nav.main a{flex:1 1 44%;border-bottom:1px solid var(--ice)}
}
.logo.foot{height:54px;margin-bottom:18px;filter:brightness(0) invert(1);opacity:.92}
/* ---------- Die Mannschaft: alle Ärzte untereinander, rechts Mehr (20.09.2026) ---------- */
.aerzte{display:flex;flex-direction:column;margin-top:24px;border-top:1px solid var(--line)}
.azeile{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:20px;align-items:center;
  padding:14px 6px;border-bottom:1px solid var(--line);text-decoration:none;transition:background .15s}
a.azeile:hover{background:var(--sand)}
.azeile img,.azeile .aleer{width:72px;height:72px;object-fit:cover;border-radius:12px;display:block}
.azeile .aleer{background:var(--sand);display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:28px;color:var(--gold-text);border:1px dashed var(--line)}
.atext b{display:block;font-family:var(--serif);font-size:19px;color:var(--navy);line-height:1.25}
.atext span{display:block;font-size:14.5px;color:var(--mute);line-height:1.4;margin-top:2px}
.amehr{white-space:nowrap;font-size:14.5px;color:var(--navy);border:1px solid var(--line);
  border-radius:999px;padding:8px 16px;transition:border-color .15s,background .15s}
a.azeile:hover .amehr{border-color:var(--gold);background:#fff}
.amehr.leer{color:var(--mute);border-style:dashed}
.azeile.klapp{width:100%;border:0;background:none;font:inherit;text-align:left;cursor:pointer;
  border-bottom:1px solid var(--line);color:inherit}
.azeile.klapp:hover{background:var(--sand)}
.azeile.klapp:hover .amehr{border-color:var(--gold);background:#fff}
.adetail{padding:10px 6px 30px;border-bottom:1px solid var(--line)}
.tafel2{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.tafel2 h3{font-family:var(--serif);font-size:19px;color:var(--navy);margin:0 0 14px}
.kurzcv{list-style:none;margin:0;padding:0}
.kurzcv li{display:grid;grid-template-columns:96px 1fr;gap:14px;padding:7px 0;border-bottom:1px solid var(--line);
  font-size:15px;line-height:1.45;color:var(--body)}
.kurzcv li:last-child{border-bottom:0}
.kurzcv span{font-size:13px;color:var(--gold-text);font-weight:700}
@media(max-width:820px){.tafel2{grid-template-columns:1fr;gap:28px}}
@media(max-width:640px){.kurzcv li{grid-template-columns:78px 1fr;gap:10px;font-size:14px}}
.adetail>*+*{margin-top:34px}
.adetail h2{font-size:25px}
html.js .adetail{display:none}
html.js .adetail.auf{display:block;animation:fade .3s ease}
@media(max-width:640px){
  .azeile{grid-template-columns:56px minmax(0,1fr) auto;gap:14px;padding:12px 2px}
  .azeile img,.azeile .aleer{width:56px;height:56px;font-size:22px}
  .atext b{font-size:16px}.atext span{font-size:13px}
  .amehr{font-size:13px;padding:7px 12px}
}

/* ---------- Der Ratgeber zum Blättern (21.09.2026, Ansage Doc „wie ein Hochglanzprospekt") ---------- */
.buchkopf{padding-top:6px;padding-bottom:0}
/* ---------- Der Ratgeber zum Blättern (21.09.2026, Ansage Doc) ----------
   Bedienung, Pfeile und Kapitelleiste liegen in der dunklen Flaeche. So gehoert
   die ganze Fensterhoehe dem Heft, und nichts ueberlappt. */
.heft{margin-top:6px;width:min(1560px,94vw);margin-left:50%;transform:translateX(-50%)}
.heftbuehne{position:relative;background:var(--navy-deep);border-radius:16px;
  padding:56px 76px 78px;display:flex;align-items:center;justify-content:center;gap:16px;overflow:hidden}
.heftseiten{display:flex;gap:14px;align-items:flex-start;justify-content:center;width:100%}
.heftseiten img{width:auto;max-width:min(720px,44vw);max-height:var(--heftmax,58vh);height:auto;
  display:block;border-radius:3px;box-shadow:0 18px 44px rgba(0,0,0,.5);background:#fff}
.heftleiste{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:12px;
  padding:12px 18px;color:#C4D0E2;background:linear-gradient(to bottom,rgba(10,16,28,.75),rgba(10,16,28,0))}
.hefttitel{font-family:var(--serif);font-size:16px;color:#fff;margin:0 auto 0 0;line-height:1.2;font-weight:600}
.heftzahl{font-size:13.5px;color:#C4D0E2;white-space:nowrap}
.heftknopf{font:inherit;font-size:13.5px;padding:6px 14px;border-radius:999px;cursor:pointer;white-space:nowrap;
  border:1px solid rgba(201,182,121,.55);background:rgba(201,182,121,.14);color:#E7D9AE;text-decoration:none}
.heftknopf:hover{background:rgba(201,182,121,.28);color:#fff}
.heftpfeil{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px;border-radius:50%;
  border:1px solid var(--gold);background:rgba(184,148,90,.22);color:var(--gold-light);font-size:26px;
  line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2}
.heftpfeil:hover{background:var(--gold);color:#1b1b1b}
.heftpfeil[disabled]{opacity:.25;cursor:default}
.heftpfeil.links{left:12px}
.heftpfeil.rechts{right:12px}
.heftfuss{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;gap:12px;
  padding:8px 14px 10px;color:#C4D0E2;font-size:13px;background:linear-gradient(to top,rgba(10,16,28,.85),rgba(10,16,28,0))}
.heftfuss input{font:inherit;font-size:13px;width:64px;padding:5px 8px;border-radius:999px;
  border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.12);color:#fff;text-align:center}
.kapleiste{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1;padding:2px 0}
.kapleiste::-webkit-scrollbar{display:none}
.kapleiste button{flex:0 0 auto;font:inherit;font-size:12.5px;padding:5px 12px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07);color:#D9E1EE;white-space:nowrap}
.kapleiste button:hover{border-color:var(--gold);color:#fff}
.kapleiste button.an{background:var(--gold);border-color:var(--gold);color:#1b1b1b;font-weight:600}
.heftkarte{border:0;background:#fff;text-align:left;cursor:pointer;font:inherit;width:100%}
.heftkarte:hover{border-color:var(--gold)}
.heftkarte .num{color:var(--gold-text)}
body.heftvoll{overflow:hidden}
.heft.voll{position:fixed;inset:0;z-index:200;margin:0;width:auto;transform:none}
.heft.voll .heftbuehne{border-radius:0;height:100vh}
@media(max-width:900px){
  .heft{width:auto;margin-left:0;transform:none}
  .heftbuehne{padding:74px 10px 96px}
  .heftseiten img{max-width:100%}
  .heftleiste{flex-wrap:wrap}
  .hefttitel{font-size:14px;flex:1 0 100%;margin:0 0 2px}
  .heftfuss{flex-wrap:wrap;justify-content:center}
  .heftpfeil{width:42px;height:42px;font-size:22px}
  .heftpfeil.links{left:2px}
  .heftpfeil.rechts{right:2px}
}

/* ---------- Lebenslauf ---------- */
.cv{border-top:1px solid var(--line);margin-top:22px}
.cv div{display:grid;grid-template-columns:130px 1fr;gap:24px;padding:18px 0;border-bottom:1px solid var(--line);align-items:start}
.cv span{font-family:var(--serif);font-size:15px;color:var(--gold-text);font-weight:700}
.cv b{display:block;font-family:var(--serif);font-size:18px;color:var(--navy);margin-bottom:5px}
.cv b,.cv p{grid-column:2}
.cv p{margin:0;font-size:15.5px;line-height:1.6}
@media(max-width:640px){.cv div{grid-template-columns:1fr;gap:4px}.cv b,.cv p{grid-column:1}.cv span{font-size:13px}}

/* ---------- Echte Bilder in den Kacheln ---------- */
.shot .shotimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;display:block}
.shot.live .ph{background:linear-gradient(to top,rgba(10,16,28,.86) 0%,rgba(10,16,28,.25) 42%,rgba(10,16,28,0) 70%);z-index:2}
.shot.live .cap{z-index:3}
.shot.live:after{content:"Maybach Klinik"}
.gelenkbild{width:100%;border-radius:var(--r);border:1px solid var(--line);display:block;background:var(--ice)}
.karte{width:100%;height:300px;border:1px solid var(--line);border-radius:var(--r);display:block}
.karteattr{font-size:11.5px;color:var(--mute);margin:7px 0 0}

.vcardsvg{width:100%;aspect-ratio:16/10;background:var(--sand);display:flex;align-items:center;justify-content:center;overflow:hidden}
.vcardsvg svg{width:100%;height:100%;display:block}
.vgal figure .vcardsvg{aspect-ratio:16/9;border-radius:12px;border:1px solid var(--line)}

.shot.cover .shotimg{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.shot.cover .ph,.shot.cover:after{display:none}

/* ---------- FAQ ---------- */
.faqbox{margin-top:26px;border-top:1px solid var(--line)}
details.faq{border-bottom:1px solid var(--line)}
details.faq summary{cursor:pointer;padding:16px 30px 16px 0;font-family:var(--serif);font-size:18px;color:var(--navy);list-style:none;position:relative}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary:after{content:"+";position:absolute;right:6px;top:14px;color:var(--gold-text);font-size:22px;font-family:var(--sans);line-height:1}
details.faq[open] summary:after{content:"–"}
details.faq summary:hover{color:var(--gold-text)}
details.faq p{margin:0 0 20px;font-size:15.5px;line-height:1.68;max-width:74ch}
.defsatz{background:var(--sand);border-left:3px solid var(--gold);border-radius:var(--r);padding:22px 26px;font-size:17.5px;line-height:1.62;color:var(--ink);margin:0}

/* ================================================================
   Gestaltungsschicht im Stil der SummitGO-Seite.
   Ändert ausschließlich Farbe, Schrift und Form.
   Kein Inhalt, keine Struktur, keine Funktion wird berührt.
   ================================================================ */
:root{
  --navy:#1B2A4A; --navy-deep:#14213B; --navy-soft:#2C3E63;
  --gold:#B8945A; --gold-light:#C9A875; --gold-text:#776025;
  --sand:#FBF6EA; --ice:#EEF1F6; --paper:#FCFBF8;
  --ink:#22293A; --body:#3A4350; --mute:#5A6473;
  --line:rgba(27,42,74,.14);
  --serif:"Manrope","Segoe UI",system-ui,sans-serif;   /* 26.08.2026: eine Familie */
  --sans:"Manrope","Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:12px;
  --wrap:1240px;
}
body{background:var(--paper);font-size:17px;line-height:1.62}
h1,h2,h3,h4{font-weight:500;letter-spacing:-.01em}
h1{font-size:clamp(38px,6.4vw,70px)}
h2{font-size:clamp(28px,4vw,42px)}
h3{font-size:23px}
h4{font-family:var(--sans);font-weight:600}
.lead{font-size:clamp(19px,2.4vw,22px);color:var(--mute);line-height:1.52}
.band-navy .lead,.hero .lead{color:rgba(251,246,234,.82)}

/* Kennzeichnungen in Schreibmaschinenschrift */
.eyebrow,.num,.tagline,.hstand,.themen,.karteattr,.vgal figcaption,.fmsg span,.mono{
  font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.eyebrow{font-size:12px;letter-spacing:.16em}
.num{font-size:11px;letter-spacing:.14em}
.tagline{font-size:10.5px}
.hstand,.themen,.karteattr,.vgal figcaption{font-size:11px;letter-spacing:.04em;text-transform:none}
.note{font-size:14px;color:var(--mute)}

/* Flächen */
section{padding-top:clamp(64px,9vw,124px);padding-bottom:clamp(64px,9vw,124px);border-top:1px solid var(--line)}
section.tight{padding-top:clamp(44px,6vw,80px);padding-bottom:clamp(44px,6vw,80px)}
.band-sand{background:var(--sand)}
.band-ice{background:var(--ice)}
.band-navy{background:var(--navy);color:rgba(251,246,234,.86);border-top:1px solid rgba(184,148,90,.45)}
/* 20.09.2026, Schlusskontrolle: Gold als Text war auf hellem Grund zu schwach
   (2,5:1 statt der geforderten 4,5:1). Auf hellem Grund jetzt dunkler, auf
   dunklem Grund weiter hell. */
.band-navy,.band-navy-deep,.hero,.kopfband,footer.site{--gold-text:#D3B87A}
.band-navy .eyebrow{color:var(--gold-light)}
.hero{background:linear-gradient(160deg,var(--navy-deep) 0%,var(--navy) 58%,#243A63 100%)}
.hero:after{background:radial-gradient(closest-side,rgba(184,148,90,.22),transparent 72%)}
.hero .lead{color:rgba(251,246,234,.88)}

/* Knöpfe als Pillen */
.btn{border-radius:999px;font-weight:500;font-size:15px;padding:11px 20px;
  transition:transform .15s ease,background .15s ease,box-shadow .15s ease,border-color .15s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(27,42,74,.20)}
.btn.ghost{border-color:var(--line)}
.btn.ghost:hover{border-color:var(--gold);background:transparent}
.btn.gold{background:var(--gold);border-color:var(--gold)}
.btn.gold:hover{background:#a8854f}
.small-btn{padding:8px 15px;font-size:13.5px}
.mbtn,.chip{border-radius:999px}
.chip{font-family:var(--sans);font-size:13.5px;padding:7px 15px;border-color:var(--line)}
.chip:hover,.chip.on{border-color:var(--gold);background:var(--sand)}

/* Karten */
.card,.libcard,.vcard,.region,.step,.meldrow,.qbox,.hthread{
  border-radius:16px;border-color:var(--line);background:var(--paper)}
.card{padding:26px}
.card:hover,.card.link:hover,.libcard:hover,.vcard:hover{
  border-color:var(--gold);transform:translateY(-3px);box-shadow:0 14px 34px rgba(27,42,74,.10)}
.card p,.card .small{color:var(--mute)}
.card h3,.vmeta b,.libmeta b{color:var(--navy)}
.card .more{color:var(--navy);border-bottom:1px solid var(--gold);padding-bottom:1px;font-weight:500}
.card.dark{background:rgba(251,246,234,.06);border-color:rgba(251,246,234,.18)}
.card.dark .small{color:rgba(251,246,234,.86)}
.libcard img,.vcard img{border-radius:0}
.libcard,.vcard{overflow:hidden}

/* Kopfzeile */
header.site{background:rgba(252,251,248,.86);backdrop-filter:blur(10px) saturate(1.2);border-bottom:1px solid var(--line)}
.bar{min-height:80px}
nav.main a{font-size:15px;color:var(--ink);opacity:.85;border-radius:999px;padding:8px 13px}
nav.main a:hover{opacity:1;background:transparent;color:var(--navy)}
nav.main a.active{opacity:1;font-weight:500;box-shadow:none;color:var(--navy);background:var(--sand)}
.brand .btxt b{font-family:var(--serif);font-weight:600;font-size:20px}
.brand .btxt i{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em}
.dummybar{background:var(--gold);color:#241c0c;font-family:var(--mono);font-size:12px;letter-spacing:.03em}
.ringbtn{border-radius:999px;font-weight:500;box-shadow:0 12px 30px rgba(27,42,74,.24)}

/* Fließtext und Listen */
.deflist{border-top:1px solid var(--line)}
.deflist div{border-bottom:1px solid var(--line);padding:18px 0}
.deflist b{font-family:var(--serif);font-weight:600;font-size:18px;color:var(--navy)}
.deflist span{color:var(--mute)}
.vsteps li::marker{color:var(--gold-text)}

/* Tabellen */
.tablewrap{border-radius:14px;border:1px solid var(--line)}
thead th{font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.02em;padding:14px 16px}
tbody td{padding:14px 16px}
tbody tr:nth-child(odd){background:var(--ice)}
tbody tr:nth-child(even){background:#fff}

/* Weiche auf der Startseite */
.weiche{border-radius:16px;border-color:var(--line);overflow:hidden}
.weiche-top{background:var(--sand);border-bottom:1px solid var(--line)}
.wcol{border-right:1px solid var(--line)}
.wcol.sel{background:var(--navy)}
.wcol .hint{color:var(--gold-text);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}

/* Verfahren und Bibliothek */
.vpanel,.docpanel{border-radius:18px;padding:36px 38px 44px}
.vgal img{border-radius:12px;border-color:var(--line)}
.vsvg{background:var(--sand);border-radius:14px}
.shot,.figure{border-radius:14px;border-color:var(--line)}
.gelenkbild,.karte{border-radius:14px;border-color:var(--line)}

/* Chat */
.chat{border-radius:18px;border-color:var(--line);overflow:hidden;background:#fff}
.chatlog{background:linear-gradient(180deg,var(--paper),#fff)}
.msg{border-radius:14px;font-size:16px}
.msg.bot{background:var(--ice);border-left:3px solid var(--gold)}
.msg.me{background:var(--navy);color:rgba(251,246,234,.92)}
.msg .ki{border-radius:12px;border-color:var(--gold)}
.kimark,.kibadge{border-radius:6px;font-family:var(--mono);letter-spacing:.1em}
.qbadge{border-radius:999px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase}
.chathead{background:var(--navy)}
.hbtn2{border-radius:999px}
.kipanel{background:var(--sand)}
.alarm{background:var(--sand);border-radius:12px}
.kiquellen{background:var(--ice);border-radius:12px}
.chatsug{background:var(--sand)}

/* Eingaben */
input,textarea,.searchbar input,.chatin input,.hform input,.hform textarea,.meldform input,.meldform textarea,.opt{
  border-radius:10px;border-color:var(--line);font-family:var(--sans);font-size:16px}
input:focus,textarea:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.opt{border-radius:999px;font-size:14px;padding:9px 16px}
.opt.sel{background:var(--navy);border-color:var(--navy)}
.result{border-radius:14px;background:var(--sand);border-left:3px solid var(--gold)}
.meter{background:var(--ice);border-radius:999px}
.meter i{background:var(--gold)}

/* FAQ */
details.faq summary{font-family:var(--serif);font-size:20px;font-weight:500;padding:20px 44px 20px 0}
details.faq summary:after{content:"+";font-family:var(--sans);font-size:24px;top:18px;transition:transform .2s}
details.faq[open] summary:after{content:"+";transform:rotate(45deg)}
details.faq p{color:var(--mute);padding-bottom:4px}
.defsatz{border-radius:0 10px 10px 0;background:var(--cream,var(--sand));border-left:3px solid var(--gold);font-size:16.5px}

/* Lexikon */
.lexitem b{font-family:var(--serif);font-weight:600;color:var(--navy)}
.lexitem span{font-family:var(--mono);font-size:10px;letter-spacing:.12em}

/* Lebenslauf */
.cv b{font-family:var(--serif);font-weight:600}
.cv span{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-text)}

/* Fuß */
footer.site{background:var(--navy-deep);color:rgba(251,246,234,.78);font-size:14px}
footer.site h4{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:#fff}
footer.site a{color:rgba(251,246,234,.78)}
footer.site a:hover{color:var(--gold-light)}
.footbottom{border-top:1px solid rgba(251,246,234,.16);color:rgba(251,246,234,.6)}

:focus-visible{outline:2px solid var(--wirkung);outline-offset:2px;border-radius:6px}   /* 26.08.2026: ein Fokusring, Navy statt Gold (Styleguide, Gesetzbuch 1) */

/* ---------- Fußzeile ---------- */
.footgrid{display:grid;gap:32px;grid-template-columns:1fr}
@media(min-width:700px){.footgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.footgrid{grid-template-columns:1.3fr 1fr 1fr 1.1fr 1.1fr}}
.fclaim{color:rgba(251,246,234,.66);font-size:14px;line-height:1.6;margin:16px 0 18px;max-width:34ch}
.fsocial{display:flex;flex-wrap:wrap;gap:14px}
.fsocial a{font-size:13px;padding:0;border-bottom:1px solid rgba(184,148,90,.5)}
.fadr{color:rgba(251,246,234,.66);margin:0 0 10px;line-height:1.6}
.fzeit{color:rgba(251,246,234,.66);font-size:13.5px;line-height:1.65;margin:14px 0 10px}
.fnews{margin-top:44px;padding:26px 0;border-top:1px solid rgba(251,246,234,.16);border-bottom:1px solid rgba(251,246,234,.16);display:grid;gap:22px;grid-template-columns:1fr}
@media(min-width:860px){.fnews{grid-template-columns:1fr 1.1fr;align-items:center}}
.fnews h4{margin-bottom:8px}
.fnews p{color:rgba(251,246,234,.66);margin:0;font-size:14.5px;max-width:44ch}
.fnewsform{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.fnewsform input{flex:1 1 240px;padding:12px 15px;border-radius:999px;border:1px solid rgba(251,246,234,.28);background:rgba(251,246,234,.06);color:#fff;font-family:var(--sans);font-size:15px}
.fnewsform input::placeholder{color:rgba(251,246,234,.5)}
.fnewsform input:focus{outline:2px solid var(--gold);border-color:var(--gold)}
.fnote{flex:1 1 100%;font-size:12px;color:rgba(251,246,234,.5);margin:2px 0 0}
.fnotfall{margin-top:26px;padding:16px 20px;border-radius:12px;background:rgba(184,148,90,.12);border-left:3px solid var(--gold);font-size:14px;line-height:1.6}
.fnotfall b{display:block;color:#fff;font-family:var(--serif);font-size:16px;margin-bottom:5px;font-weight:600}
.fnotfall span{color:rgba(251,246,234,.82)}
.fnotfall a{display:inline;color:var(--gold-light);padding:0;border-bottom:1px solid rgba(201,168,117,.5)}
.footbottom a{display:inline;padding:0;border-bottom:1px solid rgba(251,246,234,.3)}

/* ---------- Lexikon und Ratgeber auf der Startseite ---------- */
.zweiwege{display:grid;gap:22px;grid-template-columns:1fr;margin-top:34px}
@media(min-width:900px){.zweiwege{grid-template-columns:1fr 1fr}}
.weg{background:rgba(251,246,234,.06);border:1px solid rgba(251,246,234,.18);border-radius:16px;padding:28px}
.weg .wnum{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--gold-light)}
.weg h3{color:#fff;font-size:25px;margin:10px 0 10px}
.weg p{color:rgba(251,246,234,.78);font-size:15.5px;line-height:1.62;margin:0 0 20px}
.wsuche{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.wsuche input{flex:1 1 220px;padding:12px 16px;border-radius:999px;border:1px solid rgba(251,246,234,.28);background:rgba(251,246,234,.08);color:#fff;font-family:var(--sans);font-size:15px}
.wsuche input::placeholder{color:rgba(251,246,234,.5)}
.wsuche input:focus{outline:2px solid var(--gold);border-color:var(--gold)}
.wchips{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.wchips button{border:1px solid rgba(251,246,234,.24);background:transparent;color:rgba(251,246,234,.82);border-radius:999px;padding:6px 13px;font-size:13px;font-family:var(--sans);cursor:pointer}
.wchips button:hover{border-color:var(--gold);color:#fff}
.wnote{font-size:12.5px;color:rgba(251,246,234,.55);margin:16px 0 0}
.kformnote{font-size:14px;color:var(--mute);margin-top:12px}
.kformnote.ok{color:var(--green,#2E7D32);font-weight:500}

/* ---------- Online-Termin und Direktanruf ---------- */
.headact{display:flex;gap:10px;align-items:center;flex:0 0 auto}
.btn.head{display:inline-flex;align-items:center;gap:9px;border-radius:999px;padding:10px 18px;font-size:14.5px;font-weight:500;white-space:nowrap;text-decoration:none}
.btn.head svg{flex:none}
.btn.head.prim{background:var(--gold);border-color:var(--gold);color:#241c0c}
.btn.head.prim:hover{background:#a8854f;border-color:#a8854f}
.btn.head.ruf{background:transparent;border:1px solid var(--gold);color:var(--navy)}
.btn.head.ruf:hover{background:var(--sand)}
@media(max-width:820px){.btn.head span{display:none}.btn.head{padding:10px 12px}}
.termblock{display:grid;gap:16px;grid-template-columns:1fr;margin-top:26px}
@media(min-width:760px){.termblock{grid-template-columns:repeat(3,1fr)}}
.tstep{border:1px solid var(--line);border-radius:16px;padding:22px;background:var(--paper)}
.tstep .n{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;font-family:var(--mono);font-size:13px;margin-bottom:12px}
.tstep h3{font-size:19px;color:var(--navy);margin:0 0 6px}
.tstep p{margin:0;font-size:14.5px;color:var(--mute);line-height:1.6}
.termcta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;align-items:center}

/* ---------- Chat auf der Startseite ---------- */
.chatteaser{background:linear-gradient(155deg,var(--navy-deep) 0%,var(--navy) 62%,#243A63 100%);color:rgba(251,246,234,.86);border-top:1px solid rgba(184,148,90,.45);position:relative;overflow:hidden}
.chatteaser h2{color:#fff}
.ctgrid{display:grid;gap:34px;grid-template-columns:1fr;align-items:center}
@media(min-width:960px){.ctgrid{grid-template-columns:1fr 1.05fr}}
.ctliste{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-wrap:wrap;gap:10px 26px}
.ctliste li{font-size:14.5px;color:rgba(251,246,234,.72)}
.ctliste b{display:block;font-family:var(--serif);font-size:27px;color:#fff;font-weight:500;line-height:1.1}
.ctnote{font-size:13px;color:rgba(251,246,234,.55);margin:22px 0 0;max-width:52ch}
.ctbox{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 26px 60px rgba(9,15,28,.38)}
.ctbar{display:flex;align-items:center;gap:10px;padding:14px 20px;background:var(--sand);border-bottom:1px solid var(--line)}
.ctbar b{font-family:var(--serif);font-size:17px;color:var(--navy)}
.ctbar i{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--mute);margin-left:auto}
.ctbody{padding:20px}
.ctmsg{border-radius:14px;padding:13px 16px;font-size:15.5px;line-height:1.6;margin-bottom:12px;max-width:88%}
.ctmsg.me{background:var(--navy);color:rgba(251,246,234,.92);margin-left:auto}
.ctmsg.bot{background:var(--ice);color:var(--ink);border-left:3px solid var(--gold)}
.ctsrc{display:block;font-family:var(--mono);font-size:11px;color:var(--mute);margin-top:10px;padding-top:8px;border-top:1px solid var(--line)}
.ctin{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.ctin input{flex:1 1 200px;padding:12px 16px;border:1px solid var(--line);border-radius:999px;font-family:var(--sans);font-size:15.5px}
.ctin input:focus{outline:2px solid var(--gold);border-color:var(--gold)}
.ctchips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.ctchips button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 13px;font-size:13px;font-family:var(--sans);color:var(--body);cursor:pointer}
.ctchips button:hover{border-color:var(--gold);background:var(--sand);color:var(--navy)}
.msg .weiter{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.msg .weiter b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text);margin-bottom:8px}
.msg .weiter p{font-size:15px;margin:0 0 6px}
.msg .weiter .q{font-family:var(--serif);color:var(--navy);font-size:15.5px;display:block;margin-bottom:3px}

/* ---------- KI-Lexikon ---------- */
.kisuche{display:flex;gap:12px;flex-wrap:wrap}
.kisuche input{flex:1 1 320px;padding:16px 22px;border:1px solid var(--line);border-radius:999px;font-family:var(--sans);font-size:17px;background:#fff}
.kisuche input:focus{outline:2px solid var(--gold);border-color:var(--gold)}
.kisuche .btn{padding:14px 26px;font-size:16px}
.kihinweis{margin-top:20px;font-size:14px;color:var(--mute);line-height:1.6;max-width:80ch}
.kihinweis .kibadge{margin-right:8px}
.linkbtn{background:none;border:0;padding:0;font-family:var(--sans);font-size:14px;color:var(--navy);border-bottom:1px solid var(--gold);cursor:pointer}
#kiantwort .chat{margin-top:0}
.lexitem{padding:20px 0}
.lextreffer{border-left:3px solid var(--gold);background:var(--sand);border-radius:0 12px 12px 0;padding:16px 20px;margin-top:18px}
.lextreffer b{font-family:var(--serif);font-size:18px;color:var(--navy);display:block;margin-bottom:4px}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--navy);color:#fff;padding:12px 20px;border-radius:0 0 10px 0;font-size:15px;text-decoration:none}
.skip:focus{left:0}
@media print{
  header.site,footer.site,.dummybar,.ringbtn,.chatsug,.chatin,.kisuche,.headact{display:none!important}
  .page{display:block!important}
  body{background:#fff;font-size:11pt}
  a[href^="http"]:after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}

/* ---------- Kopfzeile in zwei Zeilen, alle Menüpunkte sichtbar ---------- */
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:14px;height:auto;min-height:0;padding:10px 0 0}
.brand{order:1;margin-right:auto;flex:0 1 auto;display:flex;flex-direction:row;align-items:center;gap:12px;line-height:1.15}
.brand .logo{height:38px}
.brand .bsep{height:30px;margin:0}
.brand .btxt{white-space:nowrap}
.brand .btxt b{font-size:18px;line-height:1.1}
.brand .btxt i{font-size:10px;letter-spacing:.11em;margin-top:2px}
.btn.head{padding:9px 16px;font-size:14px}
.headact{order:2;flex:0 0 auto}
nav.main{order:3;flex:1 0 100%;display:flex!important;position:static;flex-direction:row;flex-wrap:wrap;
  gap:2px 4px;background:transparent;border:0;border-top:1px solid var(--line);
  margin-top:12px;padding:8px 0 6px;max-height:none;overflow:visible}
nav.main a{padding:8px 12px;font-size:15px;border-bottom:0;white-space:nowrap;border-radius:999px}
nav.main a:hover{background:var(--sand);color:var(--navy)}
nav.main a.active{background:var(--sand);color:var(--navy);font-weight:500;box-shadow:none}
.burger{display:none!important}
@media(max-width:820px){
  .bar{gap:10px;padding-top:9px}
  /* 20.09.2026: Auf dem Telefon lief das Menue auf fuenf Zeilen und nahm ein
     Drittel des Bildschirms ein. Jetzt eine Zeile, die man seitwaerts schiebt. */
  nav.main{margin-top:9px;padding:6px 0 4px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(to right,#000 88%,transparent 100%);
    mask-image:linear-gradient(to right,#000 88%,transparent 100%)}
  nav.main::-webkit-scrollbar{display:none}
  nav.main.geschoben{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 5%,#000 88%,transparent 100%);
    mask-image:linear-gradient(to right,transparent 0,#000 5%,#000 88%,transparent 100%)}
  nav.main a{padding:8px 10px;font-size:14.5px;flex:0 0 auto}
  .brand .logo{height:32px}
  .brand .btxt b{font-size:16px}
  .brand .bsep{height:26px}
}
@media(max-width:560px){
  nav.main a{font-size:14px;padding:7px 9px}
  .brand .logo{height:28px}
  .brand .btxt b{font-size:15px}
  .brand .btxt i{display:none}
  .brand .bsep{display:none}
  .brand{gap:9px}
}
.beschwerde{background:var(--sand);border-left:3px solid var(--gold);padding:10px 14px;margin:0 0 12px;font-size:.94rem}
.duenn{color:var(--mute);font-size:.9rem;margin-top:14px}
.bezug{font-size:.85rem;color:var(--mute);border-left:2px solid var(--line);padding-left:10px;margin-bottom:10px}
.bezug i{color:var(--navy);font-style:normal}

/* ---------- Autorenzeile (20.09.2026) ---------- */
.autorz{border-top:1px solid var(--line);margin-top:8px;padding-top:14px;font-size:13.5px;line-height:1.65;color:var(--mute);max-width:80ch}
.autorz b{color:var(--ink);font-weight:600}
.autorz a{border-bottom:1px solid var(--gold)}

/* Zweitnamen, wie Patienten sie suchen (20.09.2026) */
.auchgenannt{font-size:13.5px;color:var(--mute);margin:-14px 0 20px}

/* ---------- Bilder auf der Startseite (20.09.2026) ---------- */
.heroinhalt{display:grid;gap:34px}
@media(min-width:980px){.heroinhalt{grid-template-columns:1.12fr .88fr;align-items:center}}
.herobild{margin:0}
.herobild img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:16px;box-shadow:0 18px 44px rgba(8,14,26,.45)}
.herobild figcaption{margin-top:10px;font-size:13px;color:rgba(251,246,234,.62)}
.card .kbild{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:10px;margin:0 0 14px}
.hausgal{display:grid;gap:16px;grid-template-columns:repeat(2,1fr);margin-top:28px}
@media(min-width:900px){.hausgal{grid-template-columns:repeat(4,1fr)}}
.hausgal figure{margin:0}
.hausgal img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;display:block}
.hausgal figcaption{margin-top:8px;font-size:13.5px;color:var(--mute);line-height:1.5}
.hausgal b{display:block;color:var(--ink);font-weight:600}

/* ---------- Einstieg nach Körperregion und Operationsband (20.09.2026) ---------- */
.regiongrid{display:grid;gap:14px;grid-template-columns:repeat(2,1fr);margin-top:26px}
@media(min-width:760px){.regiongrid{grid-template-columns:repeat(4,1fr)}}
.regionkachel{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:border-color .15s,transform .15s,box-shadow .15s}
.regionkachel img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;background:#EEF1F6}
.regionkachel .rtext{padding:14px 16px 16px}
.regionkachel:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 12px 26px rgba(23,50,79,.10)}
.regionkachel b{display:block;font-family:var(--serif);font-size:19px;color:var(--navy);margin-bottom:4px}
.regionkachel span{display:block;font-size:13.5px;color:var(--mute);line-height:1.5}
.regionkachel i{display:block;margin-top:10px;font-style:normal;font-size:12.5px;color:var(--gold-dark,#8a6f27);letter-spacing:.02em}
.opband{display:grid;gap:22px;margin-top:28px}
@media(min-width:860px){.opband{grid-template-columns:1fr 1fr}}
.opkarte{display:block;border-radius:16px;overflow:hidden;border:1px solid rgba(251,246,234,.18);background:rgba(251,246,234,.05)}
.opkarte img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.opkarte .optext{padding:20px 22px 22px}
.opkarte h3{color:#fff;margin:0 0 8px}
.opkarte p{color:rgba(251,246,234,.78);font-size:14.5px;margin:0 0 12px;line-height:1.6}
.opkarte .more{color:var(--gold-text);font-size:14px}
.opkarte:hover{border-color:var(--gold)}
.wcol .wbild{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;margin:0 0 14px;display:block}

/* ---------- Kopfbild auf den Unterseiten (20.09.2026) ---------- */
.bandkopf{display:grid;gap:30px}
@media(min-width:900px){.bandkopf{grid-template-columns:1.12fr .88fr;align-items:center}}
.kopffig{margin:0}
.kopffig img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;box-shadow:0 16px 38px rgba(8,14,26,.42);display:block}
.kopffig figcaption{margin-top:9px;font-size:12.5px;color:rgba(251,246,234,.58)}

/* ---------- Bewegter Kopf und Bewegung beim Blättern (20.09.2026) ---------- */
.hero{position:relative;overflow:hidden}
.heroslides{position:absolute;inset:0;z-index:0}
.heroslides figure{position:absolute;inset:0;margin:0;opacity:0;animation:heroBlende 36s linear infinite}
.heroslides img{width:100%;height:100%;object-fit:cover;animation:heroZoom 36s ease-in-out infinite}
/* 20.09.2026: Die Bildwechsel liefen auch dann weiter, wenn der Kopf laengst
   ausserhalb des Bildschirms war. Auf aelteren Rechnern kostet das Rechenzeit
   und laesst das Rollen stocken. Ausserhalb des Blicks stehen sie still. */
.heroslides.ruht figure,.heroslides.ruht img,.kopfbg.ruht img{animation-play-state:paused}
.hero.ruht .heromarke:before{animation-play-state:paused}
.heroslides figure:nth-child(1),.heroslides figure:nth-child(1) img{animation-delay:0s}
.heroslides figure:nth-child(2),.heroslides figure:nth-child(2) img{animation-delay:9s}
.heroslides figure:nth-child(3),.heroslides figure:nth-child(3) img{animation-delay:18s}
.heroslides figure:nth-child(4),.heroslides figure:nth-child(4) img{animation-delay:27s}
@keyframes heroBlende{0%{opacity:0}4%{opacity:1}22%{opacity:1}28%{opacity:0}100%{opacity:0}}
@keyframes heroZoom{0%{transform:scale(1.02)}30%{transform:scale(1.12)}100%{transform:scale(1.12)}}
.hero:after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(13,22,40,.96) 0%,rgba(13,22,40,.90) 38%,rgba(13,22,40,.58) 72%,rgba(13,22,40,.38) 100%)}
.hero .wrap{position:relative;z-index:2}
.heromarke{position:relative;z-index:2;display:inline-flex;align-items:center;gap:9px;margin-bottom:18px;padding:7px 14px;border:1px solid rgba(251,246,234,.26);border-radius:999px;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:rgba(251,246,234,.86)}
.heromarke:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);animation:pulsen 2.6s ease-in-out infinite}
@keyframes pulsen{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.kopfband{position:relative;overflow:hidden}
.kopfbg{position:absolute;inset:0;z-index:0}
.kopfbg img{width:100%;height:100%;object-fit:cover;animation:kopfZoom 20s ease-out forwards}
@keyframes kopfZoom{from{transform:scale(1.12)}to{transform:scale(1)}}
.kopfband:after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(98deg,rgba(13,22,40,.96) 0%,rgba(13,22,40,.90) 40%,rgba(13,22,40,.62) 74%,rgba(13,22,40,.42) 100%)}
.kopfband .wrap{position:relative;z-index:2}
.aufblende{opacity:0;transform:translateY(16px)}
.aufblende.sichtbar{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.regionkachel img,.opkarte img,.hausgal img,.card .kbild{transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.regionkachel:hover img,.opkarte:hover img,.hausgal figure:hover img,.card.link:hover .kbild{transform:scale(1.06)}
.hausgal figure{overflow:hidden;border-radius:12px}
.card{overflow:hidden}
@media (prefers-reduced-motion: reduce){
  .heroslides figure{animation:none;opacity:0}
  .heroslides figure:first-child{opacity:1}
  .heroslides img,.kopfbg img{animation:none}
  .aufblende{opacity:1;transform:none}
  .heromarke:before{animation:none}
}

/* ---------- Ihr Weg in vier Schritten (20.09.2026) ---------- */
.wegband{position:relative}
.weg4{display:grid;gap:26px;margin-top:34px;counter-reset:schritt}
@media(min-width:820px){.weg4{grid-template-columns:repeat(4,1fr);gap:22px}}
.weg4 .schritt{position:relative;padding-top:64px}
.weg4 .schritt:before{counter-increment:schritt;content:counter(schritt);position:absolute;top:0;left:0;width:46px;height:46px;border-radius:50%;background:var(--navy);color:#fff;font-family:var(--serif);font-size:20px;display:grid;place-items:center;box-shadow:0 0 0 6px rgba(23,50,79,.08)}
@media(min-width:820px){.weg4 .schritt:after{content:"";position:absolute;top:23px;left:58px;right:-22px;height:2px;background:linear-gradient(90deg,var(--gold) 0%,rgba(168,146,79,.25) 100%)}
.weg4 .schritt:last-child:after{display:none}}
.weg4 h3{margin:0 0 6px;font-size:19px}
.weg4 p{margin:0;font-size:14.5px;color:var(--mute);line-height:1.62}
.weg4 .dauer{display:inline-block;margin-top:10px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-dark,#8a6f27)}
.wegsvg{display:block;width:100%;max-width:980px;margin:6px auto 0;height:auto}
.wegsvg .bahn{stroke:rgba(23,50,79,.18);stroke-width:2;fill:none}
.wegsvg .lauf{stroke:var(--gold);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-dasharray:680;stroke-dashoffset:680}
.sichtbar .wegsvg .lauf{animation:laufen 2.2s ease-out .2s forwards}
@keyframes laufen{to{stroke-dashoffset:0}}
.wegsvg circle.punkt{fill:var(--navy)}
.wegsvg circle.ring{fill:none;stroke:var(--gold);stroke-width:1.5;opacity:.5}
@media (prefers-reduced-motion: reduce){.sichtbar .wegsvg .lauf{animation:none;stroke-dashoffset:0}}


/* ---------- Verfahrensübersicht nach Stufen (20.09.2026) ---------- */
.stufenleiste{display:grid;gap:10px;margin:26px 0 8px;grid-template-columns:1fr}
@media(min-width:760px){.stufenleiste{grid-template-columns:repeat(5,1fr)}}
.stufe{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.stufe b{width:26px;height:26px;flex:none;border-radius:50%;background:var(--navy);color:#fff;font-size:12.5px;display:grid;place-items:center;font-family:var(--sans)}
.stufe span{font-size:13.5px;line-height:1.35;color:var(--ink)}
.katblock{margin-top:44px}
.katkopf{display:flex;align-items:flex-start;gap:14px;border-top:2px solid var(--navy);padding-top:16px}
.katkopf .nr{width:34px;height:34px;flex:none;border-radius:50%;background:var(--gold);color:#1b1b1b;display:grid;place-items:center;font-weight:700;font-size:15px}
.katkopf h3{margin:0 0 4px;font-size:22px}
.katkopf p{margin:0;font-size:14.5px;color:var(--mute);max-width:70ch}
.katgrid{display:grid;gap:14px;margin-top:18px;grid-template-columns:1fr}
@media(min-width:680px){.katgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.katgrid{grid-template-columns:repeat(3,1fr)}}
.vkarte{display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px 14px;transition:border-color .15s,transform .15s,box-shadow .15s}
.vkarte:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 12px 24px rgba(23,50,79,.10)}
.vkarte.kommt{border-style:dashed;background:#FCFAF4}
.vkarte.kommt:hover{border-color:var(--line);transform:none;box-shadow:none}
.vkarte.kommt i{color:var(--mute)}
.vkarte b{font-family:var(--serif);font-size:17px;color:var(--navy);line-height:1.25}
.vkarte span{font-size:13.5px;color:var(--mute);line-height:1.55}
.vkarte i{font-style:normal;font-size:12.5px;color:#8a6f27;margin-top:2px}
.katgrid .vkarte.gelenk{background:var(--navy);border-color:var(--navy)}
.katgrid .vkarte.gelenk b{color:#fff}
.katgrid .vkarte.gelenk span{color:rgba(251,246,234,.72)}
.katgrid .vkarte.gelenk i{color:var(--gold-text)}

/* Erklaerzeile und A-bis-Z-Zeile auf der Therapieseite (20.09.2026) */
.katerkl{margin:0 0 20px;color:var(--mute);font-size:15px;max-width:80ch}
.azzeile{font-size:14px;line-height:2;color:var(--mute)}
.azzeile a{color:var(--navy);border-bottom:1px solid rgba(168,146,79,.5)}
.azzeile a:hover{border-color:var(--gold)}


/* Karte lädt erst auf Klick — bis dahin geht nichts an openstreetmap.org (25.08.2026). */
.karte-platzhalter{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:var(--ice);border:1px solid var(--line);padding:24px;text-align:center}
.karte-platzhalter p{margin:0;color:var(--mute);font-size:.92rem;max-width:38em}
.karte-laden{font:inherit;cursor:pointer;background:var(--navy);color:#fff;border:0;padding:11px 22px;border-radius:var(--r)}
.karte-laden:hover{background:var(--navy-deep)}


/* ================================================================
   SummitGO-Styleguide auf die Arztseite angewandt (26.08.2026)
   Ansage Doc: vollstaendige Umsetzung. Quelle:
   _summit-30-08/SummitGO_Neu/styleguide/index.html, Stand 01.09.2026.

   NICHT uebernommen, mit Absicht: Schleife, Schriftzug, Modulzeile,
   Suite-Kopfzeile, die Leiste "<- Medical Suite" und der Rettungsring.
   Anbieter dieser Seite ist Dr. med. Christian Mauch, nicht SummitGO;
   das Uebergabedokument verlangt, die Trennung nicht zu verwischen.

   BENANNTE ABWEICHUNG von den Schriftstufen: Der Styleguide bemisst eine
   Arbeitsoberflaeche (Grund 14px, Riese 40px). Diese Seite lesen Patienten,
   viele davon aeltere, auf Abstand. Grundschrift bleibt deshalb bei 17px und
   die Titel bei ihrer clamp-Groesse. Uebernommen sind Familie, Gewichte,
   Laufweiten, Zeilen auf dem 8er-Raster und die Ziffernregel.
   ================================================================ */
:root{
  /* Farben: die semantischen Werte der Token-Quelle */
  --navy:#17324F;            /* --kopf */
  --navy-deep:#172538;       /* --farbe-navy-900 */
  --navy-soft:#1E3A5C;       /* dunkle Karte, zwischen 800 und 900 */
  --wirkung:#246B9E;         /* --wirkung, Knoepfe und Verweise */
  --gold:#C2A15C;            /* --akzent */
  --gold-light:#F8E5C6;      /* --farbe-gold-100 */
  --gold-tinte:#B8860B;      /* --akzent-tinte, Gold als Text auf Hell */
  --sand:#F3EFE2;            /* --flaeche-ruhig */
  --ice:#DCE4EE;             /* --farbe-navy-100 */
  --paper:#FBFBF8;           /* --farbe-papier */
  --ink:#172538;             /* --tinte */
  --body:#172538;            /* --tinte */
  --mute:#51677C;            /* --tinte-gedaempft, abgetoentes Navy statt Grau */
  --line:rgba(23,50,79,.16);
  --line-zart:rgba(23,50,79,.09);
  --erfolg:#15715F; --erfolg-flaeche:#D8EEE8;
  --warnung:#A45C00; --offen:#E0762E;
  --fehler:#D14343; --fehler-flaeche:#F6DCDA;

  /* Eine Familie */
  --serif:"Manrope","Segoe UI",system-ui,sans-serif;
  --sans:"Manrope","Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Form: Radien und Schatten der Token-Quelle */
  --r:10px;
  --rund-klein:6px; --rund-gross:16px; --rund-voll:999px;
  --schatten-karte:0 1px 2px rgba(23,37,56,.05), 0 4px 16px rgba(23,37,56,.06);
  --schatten-schwebend:0 2px 8px rgba(23,50,79,.08), 0 16px 40px rgba(23,50,79,.16);
  --fokus-schein:0 0 0 3px rgba(36,107,158,.22);

  /* 8er-Raster */
  --halb:4px; --r1:8px; --r2:16px; --r3:24px; --r4:32px; --r5:40px; --r6:48px; --r8:64px;
}

/* ---------- Schrift ---------- */
body{font-family:var(--sans)}
h1,h2,h3,h4,.eyebrow{font-family:var(--sans)}
h1,h2,h3,h4{text-wrap:balance;color:var(--navy)}
h1{font-weight:800;letter-spacing:-.02em}
h2{font-weight:800;letter-spacing:-.015em}
h3{font-weight:700;letter-spacing:-.01em}
h4{font-weight:700}
b,strong{font-weight:700}
/* Ziffern in Spalten stehen untereinander */
table,.zahl,time,.tel{font-variant-numeric:tabular-nums}

/* ---------- Knoepfe: Rasterhoehe, Rundpille, Anheben statt Aufhellen ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:40px;padding:0 24px;border-radius:var(--rund-voll);
  font-weight:600;line-height:1.2;
  transition:transform .15s,box-shadow .15s,background-color .15s,border-color .15s;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(23,37,56,.16)}
.btn.small-btn{min-height:32px;padding:0 16px;font-size:13.5px}
.btn.gold{font-weight:700;color:var(--navy-deep)}
.btn.head{font-weight:600}   /* eine Gewichtsstufe, auch in der Kopfzeile */
.btn.ghost:hover{background:var(--sand);box-shadow:none;transform:none}
.btn[disabled],.btn.aus{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

/* Ein Fokusring fuer alles, was bedient wird */
.btn:focus-visible,.chip:focus-visible,a:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible,
button:focus-visible,[tabindex]:focus-visible{
  outline:none;border-color:var(--wirkung);box-shadow:var(--fokus-schein);
}

/* ---------- Pillen und Marken ---------- */
.chip{
  display:inline-flex;align-items:center;gap:7px;min-height:32px;
  border-radius:var(--rund-voll);font-weight:600;
  transition:transform .15s,box-shadow .15s,background-color .15s,border-color .15s;
}
.chip:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(23,37,56,.12)}
.chip.on{background:var(--navy);border-color:var(--navy);color:#fff}

/* ---------- Karten: Ruhe, Schwebe, gewaehlt, in Arbeit ---------- */
.card{
  border-radius:var(--r);border:1px solid var(--line);
  box-shadow:var(--schatten-karte);
  transition:transform .15s,box-shadow .15s,border-color .15s;
}
.card.link:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(23,37,56,.12)}
.card.gewaehlt{border-color:var(--navy);box-shadow:var(--schatten-karte)}
.card.arbeit{filter:grayscale(1);opacity:.62}

/* ---------- Eingabefelder ---------- */
input[type=text],input[type=email],input[type=tel],input[type=search],select{
  min-height:40px;padding:0 16px;border-radius:var(--rund-voll);
  border:1px solid rgba(23,50,79,.3);background:#fff;color:var(--ink);
  font:inherit;
}
textarea{
  padding:12px 16px;border-radius:var(--rund-gross);
  border:1px solid rgba(23,50,79,.3);background:#fff;color:var(--ink);font:inherit;
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--wirkung);box-shadow:var(--fokus-schein)}
.feldfehler input,.feldfehler textarea,input[aria-invalid=true]{border-color:var(--fehler)}

/* ---------- Tabellen: haftender Kopf, Spalten-Zebra, Ziffern in Spalten ---------- */
.tablewrap{overflow-x:auto;border-radius:var(--r);border:1px solid var(--line)}
.tablewrap table{border-collapse:collapse;width:100%}
.tablewrap th{
  background:var(--navy);color:#fff;text-align:left;
  padding:10px 14px;position:sticky;top:0;font-weight:700;
}
.tablewrap td{padding:10px 14px;border-bottom:1px solid var(--line-zart)}
.tablewrap td:nth-child(even){background:color-mix(in srgb,#F3EFE2 45%,#fff)}

/* ---------- Verhalten ---------- */
html,body{overflow-x:clip}          /* die Seite scrollt nie seitwaerts */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .btn:hover,.chip:hover,.card.link:hover{transform:none;box-shadow:none}
}


/* Die zweite Tafel: was der Ratgeber zur Frage sagt (26.08.2026) */
.ratgeber{background:var(--sand);border-left:3px solid var(--gold);border-radius:0 var(--r) var(--r) 0;padding:16px 20px;margin:16px 0 0}
.ratgeber>b{display:block;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-tinte);margin-bottom:10px}
.ratgeber p{margin:0 0 12px;font-size:.95rem;line-height:1.6}
.rkap{display:block;font-weight:700;color:var(--navy);font-size:.9rem;margin-bottom:2px}
.rquelle{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line-zart);padding-top:10px;font-size:.82rem;color:var(--mute)}
.kihinw{background:var(--ice);border-radius:var(--r);padding:10px 14px;margin-bottom:12px;font-size:.88rem;color:var(--navy)}


/* Geraetefotos auf weissem Grund: ganz zeigen, nicht beschneiden, nicht hochziehen (19.09.2026) */
img.geraet{object-fit:contain!important;background:#fff;padding:10px;image-rendering:auto}
.vcard img.geraet{max-height:100%}


/* Eigenuebungen aus dem ASC (19.09.2026) */
#eigenuebung .uebregel,#eigenuebung .uebtext{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px 22px;margin:22px 0;max-width:820px}
#eigenuebung .uebregel p,#eigenuebung .uebtext p{margin:0 0 10px}
#eigenuebung .uebregel p:last-child,#eigenuebung .uebtext p:last-child{margin-bottom:0}
#eigenuebung .achtung{background:var(--sand);border-left:3px solid var(--offen);padding:10px 14px;border-radius:0 var(--rund-klein) var(--rund-klein) 0}
.uebung{margin:22px 0 0;max-width:980px}
.uebung img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.uebung figcaption{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;font-size:.92rem;color:var(--mute)}
.gelueb{margin-top:18px;padding-top:14px;border-top:1px solid var(--line-zart)}
.gelueb b{display:block;margin-bottom:6px;color:var(--navy)}


/* Hinweis auf die Uebungsblaetter im Band "Kostenfrei fuer Sie" (19.09.2026) */
.wextra{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:30px 0 0;padding-top:20px;border-top:1px solid rgba(251,246,234,.18);color:rgba(251,246,234,.86)}
.wextra b{color:#fff}


/* Einzelseiten fuer Verfahren und Gelenke, Verzeichnisse (19.09.2026) */
.verfseite{max-width:900px}
.verfseite>h3{margin-top:30px}
.verzeichnis{columns:2 300px;column-gap:40px;margin:18px 0 0;padding:0;list-style:none}
.verzeichnis li{break-inside:avoid;margin:0 0 18px}
.verzeichnis h3{font-size:1rem;margin:0 0 8px;color:var(--navy)}
.verzeichnis a{display:block;padding:4px 0;border-bottom:1px solid var(--line-zart)}
.verzeichnis a span{display:block;font-size:.88rem;color:var(--mute)}
.krumen a{color:inherit;border-bottom:1px solid rgba(251,246,234,.35)}


/* Leitsatz unter der sachlichen Hauptueberschrift: die bisherige Ueberschrift, unveraendert (19.09.2026) */
.leitsatz{font-size:clamp(19px,2.3vw,25px);font-weight:600;line-height:1.3;letter-spacing:-.01em;margin:-4px 0 16px;max-width:40ch;color:inherit;opacity:.92}