@font-face{font-family:Jost;src:url(jost.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:Atkinson;src:url(atkinson.woff2) format("woff2");font-weight:200 800;font-display:swap}
:root{--blau:#0F6DB8;--blau-t:#0B5A99;--nacht:#0C2A44;--tinte:#12263A;--grau:#4A5C6D;--glut:#F6B73C;--platte:#6F767D;--kuehl:#EEF5FB;--linie:#CFDDE9;--wrap:1240px}
*{box-sizing:border-box}
html{font-size:100%;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html.gross{font-size:118%}
body{margin:0;background:#fff;color:var(--tinte);font-family:Atkinson,system-ui,sans-serif;font-size:1.0625rem;line-height:1.6;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:var(--blau-t);text-underline-offset:.18em}
h1,h2,h3{font-family:Jost,system-ui,sans-serif;font-weight:600;line-height:1.08;margin:0;letter-spacing:-.012em;text-wrap:balance}
h2{font-size:clamp(2rem,1.3rem + 2.6vw,3.25rem)}
h3{font-size:1.4rem;line-height:1.2}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
:focus-visible{outline:3px solid var(--glut);outline-offset:2px}
main:focus{outline:0}
.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.text{max-width:62ch}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:.6rem 1rem;z-index:99}
.skip:focus{left:.5rem;top:.5rem}
.band-entwurf{background:var(--nacht);color:#C7D7E5;font-size:.78rem;text-align:center;padding:.25rem .75rem}

/* Kopf */
.kopf{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--linie)}
.kopf-in{display:flex;align-items:center;gap:1.25rem;min-height:76px}
.marke img{width:128px}
.nav{margin-left:auto;display:flex;align-items:center;gap:.15rem}
.nav a{font-family:Jost,sans-serif;font-weight:500;font-size:1.03rem;color:var(--tinte);text-decoration:none;padding:.5rem .62rem;white-space:nowrap}
.nav a:hover{color:var(--blau)}
.nav a[aria-current=page]{color:var(--blau);box-shadow:inset 0 -2px 0 var(--blau)}
.kopf-rechts{display:flex;align-items:center;gap:.6rem}
.nur-klein{display:none}
.a-plus{font:600 1rem Jost,sans-serif;width:44px;height:44px;border:1px solid var(--linie);background:#fff;color:var(--tinte);border-radius:50%;cursor:pointer}
.a-plus[aria-pressed=true]{background:var(--blau);color:#fff;border-color:var(--blau)}
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.65rem 1.25rem;font-family:Jost,sans-serif;font-weight:600;font-size:1.06rem;line-height:1.1;text-decoration:none;border:2px solid transparent;border-radius:3px;cursor:pointer;transition:background-color .18s,color .18s,transform .18s}
.knopf:active{transform:translateY(1px)}
.k-glut{background:var(--glut);color:#1d1503}.k-glut:hover{background:#FFC95E}
.k-blau{background:var(--blau);color:#fff}.k-blau:hover{background:var(--blau-t)}
.k-rand{border-color:currentColor;color:inherit;background:transparent}.k-rand:hover{background:rgba(255,255,255,.14)}
.k-rand-d{border-color:var(--blau);color:var(--blau-t);background:#fff}.k-rand-d:hover{background:var(--kuehl)}
.burger{display:none;width:44px;height:44px;border:1px solid var(--linie);background:#fff;border-radius:50%;cursor:pointer;padding:0;align-items:center;justify-content:center}
.burger svg{width:24px;height:14px}
@media(max-width:1180px){
 .burger{display:inline-flex}
 .nav{position:fixed;inset:0;top:0;z-index:50;background:var(--nacht);display:none;flex-direction:column;align-items:flex-start;gap:0;padding:5.5rem 1.5rem 2rem;overflow:auto;margin:0}
 .nav.offen{display:flex}
 .nav a{color:#fff;font-size:1.65rem;padding:.55rem 0;width:100%;border-bottom:1px solid rgba(255,255,255,.14)}
 .nav a:hover,.nav a[aria-current=page]{color:var(--glut);box-shadow:none}
 .nur-klein{display:block}
 .nav .nav-tel{border:0;margin-top:1rem;font-size:1.2rem;color:var(--glut)}
 .nav-zu{position:absolute;top:1rem;right:1.25rem;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;font-size:1.5rem;cursor:pointer;line-height:1}
 .kopf-rechts{margin-left:auto}
}
@media(min-width:1181px){.nav-zu{display:none}.nav a{font-size:16.5px;padding:8px 9px}.kopf .knopf{font-size:17px;padding:10px 18px}.a-plus{font-size:16px}}
@media(max-width:760px){.kopf-in{min-height:64px;gap:.5rem}.marke img{width:108px}.kopf-termin{display:none}.band-entwurf{font-size:.72rem}}

/* Hero */
.hero{position:relative;display:flex;flex-direction:column;min-height:calc(100svh - 104px);background:var(--nacht);overflow:hidden}
.hero-bild{position:relative;flex:1 1 auto;min-height:clamp(340px,52svh,720px);overflow:hidden;background:#3a3a33;touch-action:pan-y}
.schicht{position:absolute;inset:0;overflow:hidden}
.schicht img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;transform:scale(1.06);transform-origin:50% 0;transition:filter .9s cubic-bezier(.2,.7,.2,1)}
.s-basis img{filter:blur(var(--b0,12px))}
.s-l1 img{filter:blur(var(--b1,6px))}
.s-l2 img{filter:blur(var(--b2,0))}
.hero.ohne-js .s-basis img{filter:none}
.hero.ohne-js .s-l1,.hero.ohne-js .s-l2,.hero.ohne-js .brille{display:none}
.brille{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;transition:opacity .7s}
.hero.scharf .brille,.hero.scharf .s-l1,.hero.scharf .s-l2{opacity:0;pointer-events:none}
.s-l1,.s-l2{transition:opacity .7s}
.hero-band{position:relative;z-index:3;background:var(--blau);color:#fff;padding:1.25rem 0 1.5rem}
.hero-welle{position:absolute;left:0;right:0;top:-29px;width:100%;height:30px;display:block}
.band-in{display:grid;grid-template-columns:minmax(0,1.3fr) auto auto;gap:clamp(1.25rem,3vw,3.5rem);align-items:center}
.hero-h1 small{display:block;font-family:Jost,sans-serif;font-weight:500;font-size:1.08rem;letter-spacing:0;margin-bottom:.35rem;color:#fff}
.hero-h1{font-size:clamp(2.5rem,1.4rem + 3.8vw,4.5rem)}
.status{margin:.55rem 0 0;max-width:46ch;min-height:3.2em;font-size:1.02rem;line-height:1.4}
.linsen{display:flex;gap:.9rem;align-items:center}
.linse{width:88px;height:88px;border-radius:50%;border:5px solid #fff;background:transparent;color:#fff;font:600 2.3rem/1 Jost,sans-serif;cursor:pointer;transition:background-color .18s,color .18s,transform .18s}
.linse:hover{background:#fff;color:var(--blau)}
.linse:active{transform:scale(.96)}
.linsen i{display:block;width:18px;height:5px;background:#fff;margin:0 -.9rem;border-radius:3px 3px 0 0}
.hero-wege{display:flex;flex-direction:column;gap:.55rem;min-width:220px}
.hero-wege .tel{color:#fff;font-family:Jost,sans-serif;font-weight:500;text-align:center;text-decoration:none;padding:.3rem}
.hero-wege .tel:hover{text-decoration:underline}
.hero.scharf .linsen{display:none}
.nochmal{background:none;border:0;color:#fff;text-decoration:underline;font:inherit;cursor:pointer;padding:0}
@media(max-width:980px){.band-in{grid-template-columns:1fr auto}.hero-wege{grid-column:1/-1;flex-direction:row;align-items:center}.hero-wege .knopf{flex:1}.hero-wege .tel{white-space:nowrap}}
@media(max-width:760px){
 .hero{min-height:calc(100svh - 92px - 63px)}
 .hero-bild{min-height:44svh}
 .hero-band{padding:.8rem 0 1.05rem}
 .hero-h1{font-size:2.45rem}
 .hero-h1 small{font-size:1rem;margin-bottom:.2rem}
 .band-in{grid-template-columns:1fr auto;gap:.65rem .8rem}
 .linse{width:62px;height:62px;font-size:1.65rem;border-width:4px}
 .linsen{gap:.7rem}.linsen i{margin:0 -.7rem;width:14px}
 .status{grid-column:1/-1;margin:0;min-height:2.9em;font-size:.98rem;max-width:none}
 .band-in>.hero-txt{display:contents}
 .hero-wege{display:none}
 .hero-h1{order:1}.linsen{order:2;justify-self:end}.status{order:3}
}
.schrift-unten{display:flex}

/* Abschnitte */
.ab{padding:clamp(3.5rem,8vw,6.5rem) 0}
.ab-kuehl{background:var(--kuehl)}
.ab-nacht{background:var(--nacht);color:#fff}
.ab-nacht a:not(.knopf){color:#fff}
.zwei{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,6vw,5.5rem);align-items:start}
.zwei.um{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.mitte{align-items:center}
.gross-p{font-size:clamp(1.25rem,1.05rem + .7vw,1.6rem);line-height:1.38;font-family:Jost,sans-serif;font-weight:400}
[id]{scroll-margin-top:96px}
.abst{margin-top:1.5rem}
.abst-g{margin-top:2.5rem}
.knoepfe{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem;align-items:center}

/* Augen-Check Start */
.check-kreise{display:flex;justify-content:flex-end;align-items:center;position:relative}
.kreis{aspect-ratio:1;width:56%;border-radius:50%;border:clamp(7px,1vw,11px) solid var(--tinte);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1rem;background:#fff}
.kreis b{font:600 clamp(1.1rem,.8rem + 1vw,1.55rem)/1.12 Jost,sans-serif;hyphens:auto}
.kreis span{font-size:.92rem;color:var(--grau);margin-top:.35rem;line-height:1.25}
.steg{width:6%;height:clamp(7px,1vw,11px);background:var(--tinte);margin-top:-8%}
.preis{font:600 clamp(2.6rem,2rem + 2vw,4rem)/1 Jost,sans-serif;color:var(--blau)}

/* Leuchtschilder */
.schilder{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(.8rem,1.6vw,1.25rem);margin-top:2.5rem}
.schild{grid-column:span 4;display:block;background:var(--platte);color:#14100a;text-decoration:none;padding:clamp(1.4rem,2.6vw,2.4rem) clamp(1rem,2vw,1.8rem) 1.2rem;border-radius:2px;transition:background-color .25s}
.ab-nacht .schild{color:#14100a}
.schild:nth-child(1),.schild:nth-child(2){grid-column:span 6}
.schild b{display:block;font:700 clamp(1.7rem,1.1rem + 2.1vw,2.9rem)/1.08 Jost,sans-serif;letter-spacing:-.01em;color:#14100a;text-shadow:0 0 10px rgba(246,170,50,.95),0 0 26px rgba(246,170,50,.55);transition:text-shadow .25s}
.schild span{display:block;color:#fff;margin-top:.9rem;font-size:1rem;line-height:1.35}
.schild:hover{background:#7A8188}
.schild:hover b{text-shadow:0 0 12px rgba(255,190,70,1),0 0 34px rgba(255,180,60,.8)}
@media(max-width:760px){.schild,.schild:nth-child(1),.schild:nth-child(2){grid-column:span 12}.zwei,.zwei.um{grid-template-columns:1fr}.check-kreise{justify-content:center}.kreis{width:47%}}

.kaiser{font:500 clamp(2.1rem,1.2rem + 3.6vw,4.2rem)/1.05 Jost,sans-serif;letter-spacing:-.015em;margin:0 0 1.5rem;text-wrap:balance}
.foto-rand{border-radius:2px;width:100%;object-fit:cover}
.tuer-foto{aspect-ratio:4/5;object-position:50% 72%}
.beschrift{font-size:.88rem;color:var(--grau);margin:.5rem 0 0}

.liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--linie)}
.liste li{padding:.8rem 0;border-bottom:1px solid var(--linie);font-size:1.12rem;line-height:1.35}
.liste.spalten{columns:2;column-gap:3.5rem;border-top:0}
.liste.spalten li{break-inside:avoid}
.ab-nacht .liste,.ab-nacht .liste li{border-color:rgba(255,255,255,.2)}
@media(max-width:760px){.liste.spalten{columns:1}}

/* Unterseiten-Kopf */
.seitenkopf{background:var(--nacht);color:#fff;position:relative;overflow:hidden}
.sk-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:clamp(1.5rem,4vw,4rem);align-items:center;padding:clamp(2.5rem,6vw,5rem) 0 clamp(3.5rem,7vw,5.5rem)}
.seitenkopf h1{font-size:clamp(2.6rem,1.5rem + 4vw,4.6rem)}
.seitenkopf p{font-size:clamp(1.12rem,1rem + .4vw,1.35rem);line-height:1.42;max-width:44ch;margin:1.1rem 0 0}
.brillenbild{display:flex;align-items:center;justify-content:flex-end}
.brillenbild .glas{flex:1 1 0;min-width:0;aspect-ratio:1;border-radius:50%;overflow:hidden;border:clamp(6px,.9vw,10px) solid #fff}
.brillenbild .glas img{width:100%;height:100%;object-fit:cover}
.brillenbild i{flex:0 0 clamp(14px,2vw,26px);height:clamp(6px,.9vw,10px);background:#fff;margin-top:-10%}
.sk-welle{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:30px;display:block}
@media(max-width:760px){.sk-in{grid-template-columns:1fr;padding-top:2.2rem}.brillenbild{max-width:86%;justify-content:flex-start}}

.schritte{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;gap:1.6rem}
.schritte li{counter-increment:s;display:grid;grid-template-columns:58px 1fr;gap:1rem;align-items:start}
.schritte li::before{content:counter(s);width:58px;height:58px;border-radius:50%;border:4px solid var(--blau);display:flex;align-items:center;justify-content:center;font:600 1.5rem/1 Jost,sans-serif;color:var(--blau)}
.schritte h3{margin:.35rem 0 .3rem}
.nicht{background:var(--kuehl);padding:clamp(1.4rem,3vw,2.4rem);border-radius:2px}
.frage{border-top:1px solid var(--linie)}
.frage:last-child{border-bottom:1px solid var(--linie)}
.frage summary{cursor:pointer;font:500 1.22rem/1.25 Jost,sans-serif;padding:1rem 2rem 1rem 0;list-style:none;position:relative}
.frage summary::-webkit-details-marker{display:none}
.frage summary::after{content:"+";position:absolute;right:.2rem;top:.8rem;font-size:1.5rem;color:var(--blau)}
.frage[open] summary::after{content:"\2212"}
.frage p{padding-bottom:1rem}
.zahlen{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.3rem 0}
.zahlen span{width:82px;height:82px;border-radius:50%;border:4px solid currentColor;display:flex;flex-direction:column;align-items:center;justify-content:center;font:600 1.5rem/1 Jost,sans-serif}
.zahlen small{font:500 .68rem/1.1 Atkinson,sans-serif;margin-top:.15rem}
.typen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-top:1.8rem}
.typen figure{margin:0}
.typen svg{width:100%;height:auto;display:block}
.typen figcaption{font:500 1.08rem Jost,sans-serif;margin-top:.3rem}
@media(max-width:560px){.typen{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Abschluss */
.abschluss{background:var(--blau);color:#fff;position:relative;padding:clamp(2.8rem,6vw,4.5rem) 0}
.abschluss .sk-welle{top:-29px;bottom:auto}
.abschluss-in{display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:1.5rem 3rem;align-items:center}
.abschluss p{margin:.6rem 0 0}
.abschluss .knoepfe{margin:0}
@media(max-width:760px){.abschluss-in{grid-template-columns:1fr}.abschluss .knopf{width:100%}}

/* Fuss */
.fuss{background:var(--nacht);color:#D5E2EE;padding:3.2rem 0 2rem;font-size:1rem}
.fuss a{color:#fff;text-decoration:none}.fuss a:hover{text-decoration:underline}
.fuss-gitter{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:2rem}
.fuss img{width:140px;margin-bottom:1rem}
.fuss h2{font-size:1.1rem;font-weight:600;margin-bottom:.6rem;color:#fff;letter-spacing:0}
.fuss ul{list-style:none;margin:0;padding:0}.fuss li{padding:.32rem 0}
.fuss-unten{border-top:1px solid rgba(255,255,255,.18);margin-top:2.2rem;padding-top:1rem;font-size:.9rem;display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}
@media(max-width:760px){.fuss-gitter{grid-template-columns:1fr 1fr}.fuss-gitter>div:first-child{grid-column:1/-1}.fuss{padding-bottom:6rem}}

/* Handy-Leiste */
.leiste{display:none}
@media(max-width:760px){
 .leiste{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:auto 1fr;gap:.5rem;background:#fff;border-top:1px solid var(--linie);padding:.5rem .75rem calc(.5rem + env(safe-area-inset-bottom))}
 .leiste .knopf{min-height:46px;font-size:1rem}
 body.ohne-leiste .leiste{display:none}
 body.ohne-leiste .fuss{padding-bottom:2rem}
}

/* Formular */
.form-gitter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem}
.feld{display:flex;flex-direction:column;gap:.3rem}
.feld.breit,fieldset.breit{grid-column:1/-1}
.feld label,legend{font:500 1.08rem/1.25 Jost,sans-serif}
.feld input,.feld textarea,.feld select{font:inherit;font-size:1.0625rem;width:100%;min-height:50px;padding:.65rem .8rem;border:1.5px solid #8EA5B8;border-radius:3px;background:#fff;color:var(--tinte)}
.feld input:focus,.feld textarea:focus,.feld select:focus{outline:3px solid var(--blau);outline-offset:0;border-color:var(--blau)}
.feld .opt{font-weight:400;color:var(--grau);font-size:.92rem}
fieldset{border:0;padding:0;margin:0;min-width:0}
legend{padding:0;margin-bottom:.5rem}
.wahl{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.5rem}
.wahl label{display:flex;gap:.7rem;align-items:center;min-height:54px;padding:.5rem .75rem;border:1.5px solid var(--linie);border-radius:3px;cursor:pointer;background:#fff;font:500 1.05rem/1.2 Jost,sans-serif;transition:border-color .15s,background-color .15s}
.wahl label:hover{border-color:var(--blau)}
.wahl input{appearance:none;-webkit-appearance:none;margin:0;flex:0 0 26px;width:26px;height:26px;border-radius:50%;border:4px solid var(--tinte);background:#fff;transition:background-color .15s,box-shadow .15s}
.wahl input:checked{border-color:var(--blau);background:var(--glut);box-shadow:inset 0 0 0 3px #fff}
.wahl label:has(input:checked){border-color:var(--blau);background:var(--kuehl)}
.wahl input:focus-visible{outline:3px solid var(--blau);outline-offset:2px}
.zustimmung{grid-column:1/-1;display:grid;grid-template-columns:24px 1fr;gap:.6rem;align-items:start;font-size:.98rem;line-height:1.4}
.zustimmung input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--blau)}
.fehler{color:#A32020;font-weight:600;min-height:1.4em;margin:.2rem 0 0;grid-column:1/-1}
.danke{background:var(--kuehl);padding:clamp(1.5rem,3vw,2.5rem);border-radius:2px}
.danke h2{font-size:clamp(1.8rem,1.3rem + 1.6vw,2.6rem);margin-bottom:.7rem}
.vorschau-hinweis{font-size:.95rem;color:var(--grau);margin-top:1rem}
[hidden]{display:none!important}
@media(max-width:620px){.form-gitter{grid-template-columns:1fr}.form-gitter .knopf{width:100%}}

/* Fragestrecke */
.strecke{background:var(--kuehl);min-height:calc(100svh - 104px);padding:clamp(1.5rem,5vw,4rem) 0 4rem}
.strecke-in{width:min(100% - 2.5rem,720px);margin-inline:auto}
.strecke h1{font-size:clamp(2.1rem,1.5rem + 2.4vw,3.2rem);margin-bottom:.5rem}
.fortschritt{display:flex;align-items:center;margin:1.4rem 0 1.8rem;max-width:280px}
.fortschritt b{flex:0 0 40px;height:40px;border-radius:50%;border:4px solid #9DB3C5;display:flex;align-items:center;justify-content:center;font:600 1rem/1 Jost,sans-serif;color:#5A7083;background:#fff;transition:all .25s}
.fortschritt b.an{border-color:var(--blau);background:var(--blau);color:#fff}
.fortschritt i{flex:1;height:4px;background:#9DB3C5}
.schritt legend,.schritt h2{font:600 clamp(1.45rem,1.2rem + 1vw,2rem)/1.15 Jost,sans-serif;margin-bottom:1rem}
.schritt .wahl{grid-template-columns:1fr}
.schritt .wahl label{min-height:62px;font-size:1.15rem}
.zurueck{background:none;border:0;color:var(--blau-t);font:500 1rem Jost,sans-serif;text-decoration:underline;cursor:pointer;padding:.6rem 0;margin-top:.8rem}

/* Sanftes Einblenden */
.js .auf{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.js .auf.da{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}.js .auf{opacity:1;transform:none}}
@media print{.kopf,.leiste,.band-entwurf{display:none}}