/* Schriften liegen auf dem eigenen Server: keine Verbindung zu Google beim Seitenaufruf */
@font-face{font-family:"Jost";font-style:normal;font-weight:300 500;font-display:swap;src:url("fonts/jost-latin.woff2") format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url("fonts/instrument-sans-latin.woff2") format("woff2")}
/* Optik Kaiser – gemeinsames Layout aller Seiten.
   Schwarze Markenbänder (wie das Logo) wechseln mit hellem Stein-Grund; ein roter Akzent wie das Quadrat im Logo. */
:root{
  --black:#0d0d0d;
  --ink:#1b1918;
  --stone:#f3f1ee;
  --paper:#ffffff;
  --muted:#6b6560;
  --rule:#ddd8d2;
  --red:#91252c;
  --red-dark:#741c22;
  --on-black:#f5f3f0;
  --on-black-muted:#a7a19b;
  --display:"Jost","Futura","Century Gothic",system-ui,sans-serif;
  --body:"Instrument Sans","Segoe UI",system-ui,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--stone);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.band{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.inner{max-width:1200px;margin:0 auto}
h1,h2,h3{font-family:var(--display);font-weight:300;line-height:1.08;margin:0;text-wrap:balance}
p{margin:0}
.label{font-family:var(--display);font-weight:500;font-size:13px;letter-spacing:.22em;text-transform:uppercase}
.label::before{content:"";display:inline-block;width:10px;height:10px;background:var(--red);margin-right:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 26px;font-family:var(--display);font-weight:500;font-size:14px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border:1px solid transparent;transition:background .2s,color .2s,border-color .2s}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-dark)}
.btn-line{border-color:currentColor}
.on-dark .btn-line:hover,.hero .btn-line:hover{background:var(--on-black);color:var(--black);border-color:var(--on-black)}
.on-light .btn-line:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn svg{width:16px;height:16px}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.more{font-family:var(--display);font-weight:500;font-size:14px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;display:inline-flex;gap:10px;align-items:center}
.more::after{content:"→";transition:transform .2s}
.more:hover::after{transform:translateX(4px)}

/* Kopf */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--black)}
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--black);color:var(--on-black);border-bottom:1px solid #222}
.site-header .inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:14px}
.logo img{height:46px;width:auto}
.main-nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0;align-items:center}
.main-nav a{font-family:var(--display);font-size:14px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--on-black-muted);transition:color .2s}
.main-nav a:hover,.main-nav a[aria-current="page"]{color:var(--on-black)}
.main-nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--red);padding-bottom:4px}
.main-nav .btn{color:#fff;padding:11px 18px;font-size:13px}
.menu-toggle{display:none;background:none;border:1px solid #444;color:var(--on-black);font-family:var(--display);letter-spacing:.14em;text-transform:uppercase;font-size:13px;padding:10px 14px;cursor:pointer}

/* Startseite: Hero */
.hero{background:var(--black);color:var(--on-black)}
.hero .inner{display:grid;grid-template-columns:1.05fr .95fr;min-height:560px}
.hero-text{display:flex;flex-direction:column;justify-content:center;gap:26px;padding-block:64px;padding-right:48px}
.hero h1{font-size:clamp(40px,6vw,84px);text-transform:uppercase;letter-spacing:.04em}
.hero h1 span{display:block;border-bottom:2px solid var(--on-black);padding-bottom:12px;margin-bottom:12px;width:max-content;max-width:100%}
.hero p{color:var(--on-black-muted);font-size:19px;max-width:30em}
.hero-img{position:relative;overflow:hidden;margin:0}
.hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 28%}
.hero-img figcaption{position:absolute;left:0;bottom:0;background:var(--red);color:#fff;font-family:var(--display);font-size:13px;letter-spacing:.2em;text-transform:uppercase;padding:12px 18px}

/* Unterseiten: Kopfbereich */
.page-head{background:var(--black);color:var(--on-black)}
.page-head .inner{display:grid;gap:20px;padding-block:72px 64px;max-width:1200px}
.page-head h1{font-size:clamp(38px,5.4vw,72px);text-transform:uppercase;letter-spacing:.04em}
.page-head p{color:var(--on-black-muted);font-size:19px;max-width:38em}

/* Infoleiste */
.facts{background:var(--paper);border-bottom:1px solid var(--rule)}
.facts .inner{display:grid;grid-template-columns:repeat(3,1fr)}
.fact{padding-block:24px;padding-right:24px;display:flex;gap:16px;align-items:flex-start;min-width:0}
.fact + .fact{border-left:1px solid var(--rule);padding-left:28px}
.fact svg{flex:none;width:22px;height:22px;color:var(--red);margin-top:3px}
.fact strong{display:block;font-family:var(--display);font-weight:500;font-size:13px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:2px}
.fact span,.fact a{color:var(--muted);text-decoration:none;font-size:16px}
.status{display:inline-flex;align-items:baseline;gap:8px;font-weight:600;color:var(--ink)!important}
.status i{flex:none;width:8px;height:8px;border-radius:50%;background:#2f8a4e;transform:translateY(-1px)}
.status.closed i{background:var(--red)}
.status em{font-style:normal}
.status-next{display:block;font-weight:400;color:var(--muted)}

/* Abschnitte */
section{padding-block:96px}
section.tight{padding-block:72px}
.head{display:grid;gap:16px;max-width:720px;margin-bottom:48px}
.head h2{font-size:clamp(32px,4.2vw,52px)}
.head p{color:var(--muted);font-size:18px}
.on-dark{background:var(--black);color:var(--on-black)}
.on-dark .head p{color:var(--on-black-muted)}
.white{background:var(--paper)}

/* Kundenstimmen */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.quotes figure{margin:0;display:grid;gap:16px;align-content:start;border-top:2px solid var(--ink);padding-top:24px}
.quotes .stars{color:var(--red);letter-spacing:4px;font-size:14px}
.quotes blockquote{margin:0;font-family:var(--display);font-weight:300;font-size:21px;line-height:1.4}
.quotes figcaption{color:var(--muted);font-size:15px}

/* Kacheln auf der Startseite */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.tile{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;text-decoration:none;color:#fff;background:var(--black)}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease,opacity .4s}
.tile:hover img{transform:scale(1.05);opacity:.85}
.tile .cap{position:absolute;inset:auto 0 0 0;padding:22px;display:grid;gap:6px;background:linear-gradient(transparent,rgba(0,0,0,.82) 45%)}
.tile h3{font-size:26px;font-weight:400}
.tile .more{font-size:12px;color:#fff;opacity:.85}

/* Zweispaltige Inhaltsblöcke der Unterseiten */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split.rev > :first-child{order:2}
.split img{width:100%;object-fit:cover}
.split.small-media{grid-template-columns:2fr 3fr;gap:56px}
.split.small-media.rev{grid-template-columns:3fr 2fr}
.split.small-media img{max-height:400px}
/* ZEISS-Partnerlogo: immer auf weißem Grund, nie beschnitten */
.split .zeiss-logo{background:#fff;padding:16px 20px;justify-self:start;margin-top:6px}
.split .zeiss-logo img{width:210px;height:auto;object-fit:contain}
.split.small-media img.zeiss-inline{width:190px!important;height:auto;max-height:none;aspect-ratio:auto!important;object-fit:contain;margin:4px 0}
.prose{display:grid;gap:18px;align-content:start;min-width:0}
.prose h2{font-size:clamp(30px,3.8vw,46px)}
.prose p{color:var(--muted)}
.on-dark .prose p{color:var(--on-black-muted)}
.checks{list-style:none;padding:0;margin:4px 0 0;border-top:1px solid var(--rule)}
.checks li{padding:13px 0 13px 26px;border-bottom:1px solid var(--rule);position:relative}
.checks li::before{content:"";position:absolute;left:0;top:22px;width:10px;height:10px;background:var(--red)}
.keyfacts{display:flex;flex-wrap:wrap;gap:12px 32px;margin-top:6px}
.keyfacts div{display:grid}
.keyfacts b{font-family:var(--display);font-weight:300;font-size:34px;line-height:1.1}
.keyfacts span{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.note{border-left:3px solid var(--red);background:var(--paper);padding:18px 22px;color:var(--muted);font-size:15px}

/* Drei Prüfpunkte / Ablauf */
.trio{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)}
.trio > div{padding:28px 28px 32px 0;display:grid;gap:10px;align-content:start;min-width:0}
.trio > div + div{padding-left:28px;border-left:1px solid var(--rule)}
.trio h3{font-size:26px;font-weight:400}
.trio p{color:var(--muted);font-size:16px}
.trio .tag{font-family:var(--display);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;counter-reset:s}
.steps li{display:grid;gap:10px;align-content:start;border-top:2px solid var(--on-black);padding-top:20px;counter-increment:s}
.steps li::before{content:"Schritt " counter(s);font-family:var(--display);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--on-black-muted)}
.steps h3{font-size:23px;font-weight:400}
.steps p{color:var(--on-black-muted);font-size:16px}

/* Marken */
.brand-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.brand-row figure{margin:0;display:grid;gap:14px}
.brand-row .frame{overflow:hidden;aspect-ratio:3/4}
.brand-row img{width:100%;height:100%;object-fit:cover}
.brand-row figcaption{font-family:var(--display);font-size:15px;letter-spacing:.22em;text-transform:uppercase;color:var(--on-black)}
.brand-list{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink);list-style:none;margin:0;padding:0}
.brand-list li{font-family:var(--display);font-size:clamp(18px,2vw,24px);font-weight:300;letter-spacing:.06em;text-transform:uppercase;padding:22px 0;border-bottom:1px solid var(--rule)}

/* Team */
.timeline{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.timeline li{border-top:1px solid var(--on-black-muted);padding:20px 24px 24px 0;display:grid;gap:6px;align-content:start;position:relative}
.timeline li::before{content:"";position:absolute;top:-6px;left:0;width:11px;height:11px;background:var(--on-black)}
.timeline li.mark::before{background:var(--red)}
.timeline b{font-family:var(--display);font-weight:300;font-size:34px;line-height:1.1}
.timeline span{color:var(--on-black-muted);font-size:15px}
.portraits{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.portraits img{width:100%;aspect-ratio:3/4;object-fit:cover;background:#ccc}
.portraits{row-gap:32px}
.portraits figure{margin:0;display:grid;gap:12px;align-content:start}
.portraits figcaption{display:grid;gap:2px}
.portraits b{font-family:var(--display);font-weight:400;font-size:20px}
.portraits span{color:var(--muted);font-size:14px;line-height:1.4}
.news{display:grid;grid-template-columns:repeat(2,1fr);gap:48px}
.news article{display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:start}
.news img{width:100%;aspect-ratio:4/5;object-fit:cover}
.news .date{font-family:var(--display);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.news h3{font-size:26px;margin:6px 0 10px}
.news p{color:var(--muted);font-size:16px}
.news-home .head{margin-bottom:32px}
.news-home .news article{grid-template-columns:240px 1fr;gap:28px}
.news-home .news h3{font-size:30px}
.news-home .news article.wide{grid-column:1/-1;grid-template-columns:320px 1fr;gap:40px;align-items:center;padding-bottom:40px;border-bottom:1px solid rgba(0,0,0,.1)}
.news-home .news article.wide h3{font-size:38px}
.news-home .news article.wide p{font-size:18px;max-width:640px}

/* Rechtstexte */
.legal{max-width:760px;display:grid;gap:28px}
.legal h2{font-size:26px;font-weight:400}
.legal p,.legal dd{color:var(--muted)}
.legal dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 24px;margin:0}
.legal dt{font-weight:600}
.legal dd{margin:0}
.legal{gap:16px}
.legal h2{margin-top:28px}
.legal h3{font-family:var(--body);font-weight:600;font-size:17px;margin-top:10px}
.legal ul{margin:0;padding-left:20px;color:var(--muted);display:grid;gap:6px}
.legal .caps{font-weight:500;color:var(--ink)}
.legal .source{font-size:14px}
.legal a{word-break:break-all}
/* Markierungen zum Gegenlesen (vor dem Hochladen entfernen) */
.review{background:var(--paper);border:1px solid var(--rule);border-top:3px solid var(--red);padding:20px 22px;display:grid;gap:10px;font-size:15px}
.review strong{font-family:var(--display);font-size:13px;letter-spacing:.18em;text-transform:uppercase}
.m-neu{background:#e3f1e6;box-shadow:0 0 0 4px #e3f1e6;color:var(--ink)}
div.m-neu{padding:6px 4px;display:grid;gap:16px}
.m-neu p,.m-neu h2,.m-neu h3{color:var(--ink)}
.m-pruefen{background:#fbecc4;box-shadow:0 0 0 4px #fbecc4;color:var(--ink)!important}

/* Kontakt */
.contact{background:var(--black);color:var(--on-black)}
.contact .inner{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:56px}
.contact h2{font-size:clamp(32px,4.2vw,52px);text-transform:uppercase;letter-spacing:.04em}
.contact h3{font-family:var(--display);font-weight:500;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--on-black-muted);margin-bottom:14px}
.contact .stack a:not(.btn){text-decoration:none;border-bottom:1px solid #444}
.contact .stack a:not(.btn):hover{border-color:var(--on-black)}
.hours{display:grid;grid-template-columns:auto 1fr;gap:6px 22px;font-variant-numeric:tabular-nums;margin:0}
.hours dt{color:var(--on-black-muted)}
.hours dd{margin:0;white-space:nowrap}
.hours .today{color:var(--on-black);font-weight:600}
.contact .stack{display:grid;gap:20px;align-content:start}
.contact .links{display:grid;gap:8px}

.site-footer{background:var(--black);color:var(--on-black-muted);border-top:1px solid #222;font-size:14px}
.site-footer .inner{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-block:24px}
.site-footer nav{display:flex;gap:24px}
.site-footer a{text-decoration:none}
.site-footer a:hover{color:var(--on-black)}

/* Feste Leiste am Handy */
.callbar{display:none}

@media (max-width:1000px){
  .menu-toggle{display:block}
  .main-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--black);border-bottom:1px solid #222;padding:8px max(16px,env(safe-area-inset-right,0px)) 20px max(16px,env(safe-area-inset-left,0px))}
  .main-nav.open{display:block}
  .main-nav ul{flex-direction:column;align-items:stretch;gap:0}
  .main-nav li{border-bottom:1px solid #222}
  .main-nav a{display:block;padding:14px 0}
  .main-nav a[aria-current="page"]{box-shadow:none;color:#fff}
  .main-nav li:last-child{display:none}
  .hero .inner{grid-template-columns:1fr;min-height:0}
  .hero-text{padding-right:0;padding-block:48px 40px}
  .hero-img{aspect-ratio:1/1;margin-inline:calc(-1 * max(16px,env(safe-area-inset-left,0px)))}
  .facts .inner{grid-template-columns:1fr}
  .fact{padding-block:16px}
  .fact + .fact{border-left:0;border-top:1px solid var(--rule);padding-left:0}
  section{padding-block:64px}
  section.tight{padding-block:52px}
  .page-head .inner{padding-block:48px 44px}
  .split,.contact .inner,.news{grid-template-columns:1fr;gap:36px}
  .split.rev > :first-child{order:0}
  .split.small-media,.split.small-media.rev{grid-template-columns:1fr;gap:28px}
  .split.small-media img{width:55%;max-height:none;aspect-ratio:4/5!important}
  .split.small-media img.keep-ratio{width:100%;aspect-ratio:auto!important}
  .tiles{grid-template-columns:1fr 1fr;gap:12px}
  .quotes{grid-template-columns:1fr;gap:28px}
  .trio{grid-template-columns:1fr}
  .trio > div + div{padding-left:0;border-left:0;border-top:1px solid var(--rule)}
  .steps{grid-template-columns:1fr 1fr}
  .timeline{grid-template-columns:1fr 1fr}
  .portraits{grid-template-columns:repeat(3,1fr);gap:10px}
  .brand-list{grid-template-columns:1fr 1fr}
  .brand-row{gap:10px}
  .brand-row figcaption{font-size:12px;letter-spacing:.14em}
  /* feste Leiste */
  .callbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:25;background:var(--black);border-top:1px solid #222;padding:10px max(12px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));gap:10px}
  .callbar .btn{padding:14px 10px;font-size:13px}
  .callbar .btn-line{color:var(--on-black)}
  body{padding-bottom:76px}
}
@media (max-width:600px){
  .logo img{height:36px}
  .hero .btns{display:none}
  .tile h3{font-size:19px}
  .tile .more{display:none}
  .tile .cap{padding:14px}
  .steps,.timeline{grid-template-columns:1fr}
  .portraits{grid-template-columns:1fr 1fr}
  .news article,.news-home .news article{grid-template-columns:120px 1fr;gap:16px}
  .news-home .news h3{font-size:22px}
  .news-home .news article.wide{grid-template-columns:120px 1fr;gap:16px;padding-bottom:28px}
  .news-home .news article.wide h3{font-size:26px}
  .news-home .news article.wide p{font-size:16px}
  .legal dl{grid-template-columns:1fr}
  .legal dt{margin-top:8px}
}

/* Terminseite */
.tfilter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:32px}
.tfilter button{font-family:var(--display);font-weight:500;font-size:13px;letter-spacing:.12em;text-transform:uppercase;padding:11px 16px;border:1px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer}
.tfilter button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tcard{background:var(--paper);border:1px solid var(--rule);padding:24px;display:flex;flex-direction:column;gap:10px}
.tcard[hidden]{display:none}
.tcard-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.tcard h3{font-size:24px;font-weight:400}
.tpreis{flex:none;font-family:var(--display);font-size:22px;font-weight:500;color:var(--red);white-space:nowrap}
.tdauer{font-family:var(--display);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tcard p{color:var(--muted);font-size:16px;flex:1}
.tcard .btn{align-self:flex-start;margin-top:6px}
@media (max-width:1000px){.tgrid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.tgrid{grid-template-columns:1fr;gap:14px}.tfilter{gap:8px}.tfilter button{padding:9px 12px;font-size:12px}.tcard{padding:20px}.tcard h3{font-size:21px}}
/* Terminseite kompakter auf großen Bildschirmen */
@media (min-width:1001px){
  .tgrid{grid-template-columns:repeat(3,1fr);gap:16px;max-width:1000px}
  .tcard{padding:18px;gap:6px}
  .tcard h3{font-size:19px}
  .tpreis{font-size:18px}
  .tdauer{font-size:11px}
  .tcard p{font-size:14px;line-height:1.5}
  .tcard .btn{padding:10px 14px;font-size:12px}
  .tfilter{margin-bottom:24px}
  .tgrid + .note{max-width:1000px}
}

/* Neuigkeiten: langer Text zum Aufklappen */
.news .news-voll{display:grid;gap:10px}
.news .news-voll[hidden],.news .news-kurz[hidden]{display:none}
.news-mehr{background:none;border:0;padding:0;margin-top:8px;font-family:var(--display);font-weight:500;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--red);cursor:pointer;display:block}
.news-mehr:hover{text-decoration:underline;text-underline-offset:3px}

/* Liste im dunklen Abschnitt (Myopie) */
.on-dark .checks{border-top-color:#333}
.on-dark .checks li{border-bottom-color:#333;color:var(--on-black-muted)}
.on-dark .checks strong{color:var(--on-black);font-weight:600}

/* Myopie: ZEISS-Bild unverändert (nie beschneiden) + MiSight-Banner */
.myo-bilder{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start}
.split .myo-bilder img{width:100%!important;height:auto!important;max-height:none!important;aspect-ratio:4/5!important;object-fit:contain;background:#fff}
.split .myo-bilder img:only-child{grid-column:1/-1;max-width:50%}

/* Sehanalyse: zwei Angebote mit eigenem Termin */
.seh-optionen{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.seh-opt{background:var(--paper);border:1px solid var(--rule);padding:16px 18px;display:flex;flex-direction:column;gap:8px}
.seh-opt h3{font-size:19px;font-weight:400}
.seh-opt .tpreis{font-size:19px}
.seh-opt .tdauer{font-size:11px;line-height:1.5}
.seh-opt .btn{align-self:flex-start;padding:10px 14px;font-size:12px;margin-top:auto}
@media (max-width:600px){.seh-optionen{grid-template-columns:1fr}}