/* Pippig's Brillen + Contactlinsen · Design-System
   Schwarzweiß mit einem Grün. Das Grün kommt aus dem Logo (#4F9954). */

@font-face{font-family:"Bricolage";src:url("fonts/bricolage-grotesque-v9-latin_latin-ext-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Bricolage";src:url("fonts/bricolage-grotesque-v9-latin_latin-ext-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"InterVar";src:url("fonts/inter-v20-latin_latin-ext-regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"InterVar";src:url("fonts/inter-v20-latin_latin-ext-600.woff2") format("woff2");font-weight:600;font-display:swap}

:root{
  --ink:#0E0E0E;          /* Schwarz */
  --paper:#FAFAF8;        /* Grund */
  --concrete:#EDECE8;     /* zweite Fläche */
  --line:#DAD8D2;
  --field-line:#8C897F;   /* Rahmen von Eingabefeldern, 3,1:1 auf Weiß (WCAG 1.4.11) */
  --muted:#6A6A64;
  --green:#4F9954;        /* Logo-Grün, Akzent auf Dunkel */
  --green-light:#7DC084;  /* aufgehellt für Text auf Schwarz und über dem Video */
  --green-deep:#2C7437;   /* Grün für Text/Buttons auf Hell (5,3:1 auf Weiß) */
  --f-display:"Bricolage","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-text:"InterVar",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wide:1280px;
  --gut:clamp(1.25rem,4.5vw,4rem);
  --ease:cubic-bezier(.22,.68,.24,1);
  --head-h:76px;
  color-scheme:light;
}
@media(max-width:820px){:root{--head-h:62px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 1rem)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 1.0625rem/1.65 var(--f-text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video,svg{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--green-deep);outline-offset:3px;border-radius:2px}

h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;letter-spacing:-.028em;margin:0 0 .45em;text-wrap:balance}
h1{font-size:clamp(2.75rem,7.4vw,6.5rem);line-height:.96}
h2{font-size:clamp(2rem,4.2vw,3.6rem);line-height:1.04;max-width:17ch}
h3{font-size:clamp(1.25rem,1.9vw,1.6rem);line-height:1.18;letter-spacing:-.02em}
p{margin:0 0 1.1em;max-width:62ch}
.lead{font-size:clamp(1.1rem,1.55vw,1.375rem);line-height:1.55;color:var(--muted);max-width:52ch}
.eyebrow{font-family:var(--f-text);font-size:.75rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--green-deep);margin:0 0 1.1rem}
.eyebrow::before{content:"";display:inline-block;width:1.75rem;height:1px;background:currentColor;
  vertical-align:.32em;margin-right:.7rem}
.big-num{font-family:var(--f-display);font-weight:700;font-size:clamp(2.2rem,4vw,3.2rem);line-height:1;letter-spacing:-.04em}
.muted{color:var(--muted)}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:.75rem 1.25rem}
.skip:focus{left:.75rem;top:.75rem}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.85rem 1.5rem;border:1px solid transparent;border-radius:2px;
  font:600 .9375rem/1 var(--f-text);letter-spacing:.01em;text-decoration:none;cursor:pointer;
  transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--green-deep);color:#fff}
.btn-primary:hover{background:#25642F}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#2b2b2b}
.btn-line{border-color:currentColor;background:transparent}
.btn-line:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.on-dark .btn-line:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn-lg{padding:1.05rem 2rem;font-size:1rem}
.arrow{transition:transform .22s var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}

/* ---------- Header ---------- */
.header{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--line);
  height:var(--head-h);display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);padding:0 var(--gut)}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:0 0 auto}
.brand img.mark{height:38px;width:auto}
@media(max-width:820px){.brand img.mark{height:32px}}
.brand .sub{font:600 .58rem/1 var(--f-text);letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
  border-left:1px solid var(--line);padding-left:.7rem;margin-left:.15rem}
.nav{display:flex;gap:clamp(1rem,2vw,1.9rem);margin-left:auto}
.nav a{position:relative;text-decoration:none;font-size:.9375rem;font-weight:500;padding:.35rem 0}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:.1rem;height:1.5px;background:var(--green-deep);
  transition:right .28s var(--ease)}
.nav a:hover::after,.nav a[aria-current=page]::after{right:0}
.nav a[aria-current=page]{color:var(--green-deep)}
.head-cta{display:flex;align-items:center;gap:.6rem;flex:0 0 auto}
.tel-link{text-decoration:none;font-weight:600;font-size:.9375rem;white-space:nowrap}
.tel-link:hover{color:var(--green-deep)}
.burger{display:none;width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;margin-left:auto}
.burger span{display:block;width:22px;height:1.5px;background:var(--ink);transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate;
  min-height:clamp(520px,82svh,860px);display:grid;align-items:end}
.hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.74) 34%,rgba(0,0,0,.42) 58%,rgba(0,0,0,.18) 78%,rgba(0,0,0,.42) 100%),
             linear-gradient(to top,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 38%)}
.hero-inner{max-width:var(--wide);width:100%;margin:0 auto;padding:clamp(3rem,10vh,7rem) var(--gut) clamp(2.5rem,7vh,4.5rem)}
.hero .eyebrow{color:var(--green-light);text-shadow:0 1px 12px rgba(0,0,0,.8)}
.hero h1{max-width:15ch;margin-bottom:.35em}
.hero .lead{color:rgba(255,255,255,.82);max-width:46ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.open-badge{display:inline-flex;align-items:center;gap:.55rem;font-size:.875rem;font-weight:600;
  color:#fff;margin-top:1.75rem}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(79,153,84,.25)}
.dot.closed{background:#B9B9B4;box-shadow:0 0 0 4px rgba(255,255,255,.12)}

/* ---------- Faktenband ---------- */
.facts{background:var(--ink);color:#fff;border-top:1px solid rgba(255,255,255,.1)}
.facts ul{list-style:none;margin:0 auto;max-width:var(--wide);padding:clamp(1.75rem,3.5vw,2.75rem) var(--gut);
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,3vw,2.5rem)}
.facts li{display:flex;flex-direction:column;gap:.3rem}
.facts .big-num{color:#fff}
.facts span{font-size:.8125rem;color:rgba(255,255,255,.62);letter-spacing:.02em}
@media(max-width:760px){.facts ul{grid-template-columns:repeat(2,1fr);row-gap:1.75rem}}

/* ---------- Sections ---------- */
.sec{padding:clamp(4.5rem,11vw,9rem) var(--gut)}
.sec>.inner,.sec-inner{max-width:var(--wide);margin:0 auto}
.sec-concrete{background:var(--concrete)}
.sec-dark{background:var(--ink);color:#fff}
.sec-dark .eyebrow{color:var(--green-light)}
.sec-dark .lead,.sec-dark .muted{color:rgba(255,255,255,.66)}
.sec-head{margin-bottom:clamp(2.5rem,5.5vw,4.5rem);max-width:56ch}
.sec-head.with-action{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;max-width:none;flex-wrap:wrap}

/* ---------- Zitat ---------- */
.claim{font-family:var(--f-display);font-weight:600;font-size:clamp(1.6rem,3.6vw,3.1rem);line-height:1.14;
  letter-spacing:-.03em;max-width:22ch;margin:0}
.claim em{font-style:normal;color:var(--green-deep)}
.sec-dark .claim em,.on-dark .claim em{color:var(--green-light)}

/* ---------- Karten / Leistungen ---------- */
.cards{display:grid;gap:clamp(1rem,2vw,1.5rem);grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
/* Fünf Bauweisen: auf breiten Schirmen eine Reihe, darunter drei und zwei. */
.cards-5{grid-template-columns:repeat(5,1fr)}
@media(max-width:1180px){.cards-5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.cards-5{grid-template-columns:repeat(1,1fr)}}
.card{position:relative;display:flex;flex-direction:column;text-decoration:none;background:var(--paper);
  border:1px solid var(--line);overflow:hidden;transition:border-color .25s var(--ease),transform .25s var(--ease)}
.card:hover{border-color:var(--ink);transform:translateY(-3px)}
.card-media{overflow:hidden;background:var(--ink)}
.card-media img{aspect-ratio:4/5;object-fit:cover;width:100%;transition:transform .6s var(--ease)}
.card:hover .card-media img{transform:scale(1.045)}
.card-body{padding:1.4rem 1.4rem 1.6rem;display:flex;flex-direction:column;flex:1}
.card-body h3{margin-bottom:.4rem}
.card-body p{font-size:.9375rem;color:var(--muted);margin-bottom:1.1rem}
.card-more{margin-top:auto;font-size:.875rem;font-weight:600;color:var(--green-deep);display:inline-flex;gap:.4rem;align-items:center}

/* ---------- Split ---------- */
.split{display:grid;gap:clamp(2rem,6vw,5rem);grid-template-columns:1fr 1fr;align-items:center}
.split.wide-media{grid-template-columns:.85fr 1.15fr}
@media(max-width:900px){.split,.split.wide-media{grid-template-columns:1fr}}
.split figure{margin:0}
.stack{display:grid;gap:1.6rem}
.stack-row{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start}
.stack-row .n{font-family:var(--f-display);font-weight:700;font-size:.9rem;color:var(--green-deep);
  border:1px solid var(--green-deep);border-radius:50%;width:2rem;height:2rem;display:grid;place-items:center;flex:0 0 auto}
.sec-dark .stack-row .n{color:var(--green);border-color:var(--green)}
.stack-row h3{margin-bottom:.2rem;font-size:1.15rem}
.stack-row p{margin:0;font-size:.9375rem;color:var(--muted)}

/* ---------- Marken ---------- */
/* 24 Marken. Die Spaltenzahl ist auf jeder Stufe ein Teiler davon, damit
   keine angebrochene Reihe entsteht. */
.brands{display:grid;grid-template-columns:repeat(6,1fr);gap:.5rem}
@media(max-width:1080px){.brands{grid-template-columns:repeat(4,1fr)}}
@media(max-width:700px){.brands{grid-template-columns:repeat(3,1fr)}}
@media(max-width:460px){.brands{grid-template-columns:repeat(2,1fr)}}
.brands li{list-style:none;border:1px solid rgba(255,255,255,.17);padding:.6rem .75rem;font-size:.875rem;
  letter-spacing:.01em;color:rgba(255,255,255,.86);transition:border-color .25s,color .25s;
  display:flex;align-items:center;justify-content:center;text-align:center}
.brands li:hover{border-color:var(--green);color:#fff}

/* ---------- Galerie ---------- */
.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(.6rem,1.4vw,1.1rem)}
.gallery figure{margin:0;overflow:hidden;background:var(--concrete)}
.gallery img{width:100%;height:100%;object-fit:cover}
.g-a{grid-column:span 7;aspect-ratio:16/10}
.g-b{grid-column:span 5;aspect-ratio:4/5}
.g-c{grid-column:span 5;aspect-ratio:4/3}
.g-d{grid-column:span 7;aspect-ratio:16/10}
@media(max-width:760px){.g-a,.g-b,.g-c,.g-d{grid-column:span 12;aspect-ratio:4/3}}

/* ---------- Team ---------- */
.team-photo{margin:0 0 clamp(2rem,4vw,3rem)}
.team-photo img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center 42%}

/* ---------- FAQ ---------- */
.faq{max-width:820px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:1.35rem .25rem;font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.05rem,1.6vw,1.25rem);display:flex;justify-content:space-between;gap:1.5rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:13px;height:13px;flex:0 0 auto;position:relative;
  background:linear-gradient(var(--ink),var(--ink)) center/100% 1.5px no-repeat,
             linear-gradient(var(--ink),var(--ink)) center/1.5px 100% no-repeat;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(90deg);
  background:linear-gradient(var(--green-deep),var(--green-deep)) center/100% 1.5px no-repeat}
.faq details p{padding:0 .25rem 1.4rem;margin:0;color:var(--muted);max-width:68ch}

/* ---------- Kontakt ---------- */
.hours{width:100%;border-collapse:collapse;max-width:440px}
.hours caption{text-align:left;font-family:var(--f-display);font-weight:600;font-size:1.25rem;padding-bottom:.9rem}
.hours th,.hours td{padding:.65rem 0;border-bottom:1px solid rgba(255,255,255,.14);font-weight:400;text-align:left;font-size:.9375rem}
.hours td{text-align:right;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.8)}
.hours tr.today th,.hours tr.today td{color:var(--green);font-weight:600}
.contact-lines{font-style:normal;font-size:1.0625rem;line-height:1.75}
.contact-lines a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}
.contact-lines a:hover{border-color:var(--green);color:var(--green)}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:rgba(255,255,255,.62);border-top:1px solid rgba(255,255,255,.12);
  padding:clamp(2.5rem,5vw,4rem) var(--gut) 6rem;font-size:.875rem}
.footer-in{max-width:var(--wide);margin:0 auto;display:grid;gap:2rem;grid-template-columns:1.3fr 1fr 1fr}
@media(max-width:760px){.footer-in{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}}
.footer h2{font-family:var(--f-text);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.45);margin:0 0 .9rem}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.footer a{text-decoration:underline;text-underline-offset:.2em;text-decoration-color:rgba(255,255,255,.35)}
.footer a:hover{text-decoration-color:currentColor}
.footer a:hover{color:#fff}
.footer img.mark{height:92px;width:auto;margin-bottom:1.1rem}
.footer-legal{max-width:var(--wide);margin:2.5rem auto 0;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;justify-content:space-between;font-size:.8125rem}

/* ---------- Sticky-CTA mobil ---------- */
.sticky{display:none}

/* ---------- Reveal: siehe Abschnitt "Bewegung" am Dateiende ---------- */
@media(prefers-reduced-motion:reduce){
  .btn:hover,.card:hover{transform:none}
  .card-media img,.card:hover .card-media img{transition:none;transform:none}
}

/* ---------- Mobil ---------- */
@media(max-width:980px){
  .nav{position:fixed;inset:var(--head-h) 0 0;background:var(--paper);flex-direction:column;justify-content:center;
    align-items:flex-start;gap:.4rem;padding:0 var(--gut) 20vh;margin:0;z-index:55;
    transform:translateY(-8px);opacity:0;pointer-events:none;visibility:hidden;
    transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
    overflow-y:auto}
  .nav.open{opacity:1;transform:none;pointer-events:auto;visibility:visible}
  .nav a{font-family:var(--f-display);font-size:clamp(1.75rem,7vw,2.75rem);font-weight:600;letter-spacing:-.03em;padding:.3rem 0}
  .nav a::after{display:none}
  .head-cta{display:none}
  .burger{display:flex}
  body.locked{overflow:hidden}
  .sticky{display:grid;grid-template-columns:1fr 1.35fr;gap:.5rem;position:fixed;inset:auto 0 0;z-index:58;
    padding:.6rem var(--gut) calc(.6rem + env(safe-area-inset-bottom));
    background:rgba(250,250,248,.93);backdrop-filter:blur(14px);border-top:1px solid var(--line)}
  .sticky .btn{padding:.8rem .6rem;font-size:.875rem;white-space:nowrap}
  .footer{padding-bottom:6.5rem}
}
@media(max-width:400px){.brand .sub{display:none}}

/* --- Unterseiten --- */
/* --- Seitenkopf ----------------------------------------------------------
   Die Unterseiten beginnen alle gleich: Pfad, Überschrift, Vorspann. Damit
   die rechte Hälfte nicht leer bleibt, liegen dort zwei konzentrische Ringe —
   eine Linse im Schnitt, nur aus Geometrie, kein Bild. Und die Überschrift
   stellt sich beim Laden scharf, so wie man eine Linse einstellt. */
.page-head{position:relative;overflow:hidden;isolation:isolate;
  padding-top:clamp(1.25rem,2.5vw,2rem);padding-bottom:clamp(2.5rem,6vw,4.5rem)}
.page-head>.inner{position:relative;z-index:2}
.page-head::before,.page-head::after{content:"";position:absolute;z-index:0;border-radius:50%;
  border:1px solid var(--line);pointer-events:none}
.page-head::before{width:48rem;height:48rem;right:-14rem;top:-11rem}
.page-head::after{width:31rem;height:31rem;right:-5.5rem;top:-2.5rem}
.page-head .linse{position:absolute;z-index:0;right:-5.5rem;top:-2.5rem;width:31rem;height:31rem;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 42% 38%,rgba(44,116,55,.09),rgba(44,116,55,0) 62%)}
@media(max-width:980px){
  .page-head::before{width:34rem;height:34rem;right:-15rem;top:-9rem}
  .page-head::after{width:22rem;height:22rem;right:-9rem;top:-3rem}
  .page-head .linse{right:-9rem;top:-3rem;width:22rem;height:22rem}
}
.page-head h1{font-size:clamp(2.4rem,5.6vw,4.6rem);max-width:17ch}
.page-head .lead{max-width:54ch}

/* Pfad: eine Haarlinie über der Zeile, darauf ein grüner Anstrich, der sich
   beim Laden aufzieht. Der Winkel › ist raus, es trennt eine kurze Linie. */
.pfad{position:relative;display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;
  padding-top:1.5rem;margin-bottom:clamp(2.75rem,6.5vw,5rem);
  font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.pfad::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line)}
.pfad::after{content:"";position:absolute;left:0;top:0;height:1px;width:5rem;background:var(--green-deep);
  transform-origin:left;animation:pfadZieht 1.05s .15s cubic-bezier(.16,1,.3,1) both}
@keyframes pfadZieht{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.pfad a{text-decoration:none;transition:color .2s var(--ease)}
.pfad a:hover{color:var(--ink)}
.pfad [aria-current]{color:var(--ink)}
.pfad-trenner{display:block;width:1.2rem;height:1px;background:var(--line)}

/* Scharfstellen: die Überschrift kommt aus der Unschärfe, der Vorspann folgt. */
.page-head h1{animation:scharf .95s .1s cubic-bezier(.16,1,.3,1) both}
.page-head .lead{animation:kopfRise .8s .34s cubic-bezier(.16,1,.3,1) both}
.page-head .hero-actions,.page-head>.inner>p:not(.lead){animation:kopfRise .8s .46s cubic-bezier(.16,1,.3,1) both}
@keyframes scharf{from{opacity:0;filter:blur(16px);transform:translateY(12px)}
                  to{opacity:1;filter:blur(0);transform:none}}
@keyframes kopfRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.no-motion .page-head h1,.no-motion .page-head .lead,.no-motion .page-head .hero-actions,
.no-motion .pfad::after{animation:none}
@media(prefers-reduced-motion:reduce){
  .page-head h1,.page-head .lead,.page-head .hero-actions,.page-head>.inner>p:not(.lead),
  .pfad::after{animation:none}
}

/* Fließtext für Impressum, Datenschutz, lange Erklärseiten */
.prose{max-width:72ch}
.prose h2{font-size:clamp(1.4rem,2.4vw,1.9rem);margin-top:2.6rem;max-width:none}
.prose h3{font-size:1.15rem;margin-top:1.8rem}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose p,.prose li{color:var(--muted)}
.prose strong{color:var(--ink);font-weight:600}
.prose ul,.prose ol{padding-left:1.2rem;margin:0 0 1.1em}
.prose li{margin-bottom:.4em}
.prose a{color:var(--green-deep)}
.prose dl{margin:0 0 1.2em}
.prose dt{font-weight:600;color:var(--ink);margin-top:.9em}
.prose dd{margin:0 0 .2em}

/* Formular */
.form{display:grid;gap:1.1rem;max-width:36rem}
.form .row{display:grid;gap:1.1rem;grid-template-columns:1fr 1fr}
@media(max-width:560px){.form .row{grid-template-columns:1fr}}
.field{display:grid;gap:.4rem}
.field label{font-size:.8125rem;font-weight:600;letter-spacing:.02em}
.field .hint{font-size:.75rem;color:var(--muted);font-weight:400;letter-spacing:0}
.field input,.field select,.field textarea{
  font:400 1rem/1.5 var(--f-text);color:var(--ink);background:#fff;
  border:1px solid var(--field-line);border-radius:2px;padding:.75rem .85rem;width:100%;
  transition:border-color .2s var(--ease)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--green-deep);outline-offset:1px}
.field textarea{min-height:8rem;resize:vertical}
.form .note{font-size:.8125rem;color:var(--muted);margin:0}
.form .note a,.meta-grid a{text-decoration:underline;text-underline-offset:.2em}

/* Zwei-Spalten-Info (Kontakt/Preis/Dauer nebeneinander) */
.meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.5rem 2rem;
  border-top:1px solid var(--line);padding-top:1.6rem;margin-top:2rem}
.sec-dark .meta-grid{border-color:rgba(255,255,255,.16)}
.meta-grid dt{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.35rem}
.sec-dark .meta-grid dt,.on-dark .meta-grid dt{color:rgba(255,255,255,.72)}
.meta-grid dd{margin:0;font-family:var(--f-display);font-weight:600;font-size:1.15rem;letter-spacing:-.02em}

/* Randbild ohne Karte */
.figure-note{margin:.7rem 0 0;font-size:.8125rem;color:var(--muted)}

/* --- Utilities ---
   Ersetzen die frueheren style-Attribute. Die Content-Security-Policy verbietet
   Inline-Styles, deshalb steht hier alles, was sonst im HTML stehen wuerde. */
.u-m0{margin:0}
.u-mb0{margin-bottom:0}
.u-mb-xs{margin:0 0 .4rem}
.u-mt0{margin-top:0}
.u-pt0{padding-top:0}
.u-mt-xxs{margin-top:.25rem}
.u-mt-s{margin-top:1.5rem}
.u-mt-m{margin-top:1.75rem}
.u-mt-l{margin-top:2rem}
.u-mt-xl{margin-top:clamp(2rem,4vw,3rem)}
.u-mt-xxl{margin-top:clamp(2.5rem,5vw,4rem)}
.u-small{font-size:.9375rem}
.u-green{color:var(--green)}
.u-on-dark{color:rgba(255,255,255,.78)}
.u-align-start{align-items:flex-start}
.u-no-underline{text-decoration:none}
.u-inline-block{display:inline-block}
.u-one-col{grid-template-columns:1fr}
.u-max-34{max-width:34rem}
.u-max-44{max-width:44rem}

/* --- Browser-Oberflaechen ------------------------------------------------
   Die Teile, die man nicht selbst zeichnet, gehoeren trotzdem zum Entwurf. */
::selection{background:var(--green-deep);color:#fff}
.sec-dark ::selection,.hero ::selection,.footer ::selection{background:var(--green);color:var(--ink)}
html{scrollbar-color:var(--line) transparent;caret-color:var(--green-deep)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--concrete)}
::-webkit-scrollbar-thumb{background:#C7C4BC;border:3px solid var(--concrete);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}
.hours td,.facts .big-num,.meta-grid dd{font-variant-numeric:tabular-nums}
::placeholder{color:var(--muted);opacity:1}

/* --- Bewegung -----------------------------------------------------------
   Zwei Behandlungen statt einer für alles: Text steigt, Bilder kommen aus
   der Tiefe. Der Hero läuft beim Laden, nicht beim Scrollen. */
.rv{opacity:0;transform:translateY(14px);
    transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
figure.rv,.card.rv,.gallery.rv{transform:translateY(10px) scale(.985)}
figure.rv.in,.card.rv.in,.gallery.rv.in{transform:none}
.rv-d1{transition-delay:.06s}.rv-d2{transition-delay:.12s}.rv-d3{transition-delay:.18s}
.rv-d4{transition-delay:.24s}

.hero-inner>*{animation:heroRise .8s cubic-bezier(.16,1,.3,1) both}
.hero-inner>*:nth-child(1){animation-delay:.05s}
.hero-inner>*:nth-child(2){animation-delay:.13s}
.hero-inner>*:nth-child(3){animation-delay:.21s}
.hero-inner>*:nth-child(4){animation-delay:.29s}
.hero-inner>*:nth-child(5){animation-delay:.37s}
@keyframes heroRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.no-motion .rv,html.no-motion .rv{opacity:1;transform:none;transition:none}
.no-motion .hero-inner>*{animation:none}
@media(prefers-reduced-motion:reduce){
  .hero-inner>*{animation:none}
  .rv{opacity:1;transform:none;transition:none}
}

[hidden]{display:none!important}
.u-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

/* --- Anrufen und schreiben ----------------------------------------------
   Statt eines Formulars: die Nummer so groß wie eine Überschrift. Wer nur
   drei Sekunden hat, soll den Daumen schon auf dem richtigen Ziel haben. */
.ruf-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(2rem,6vw,5rem);align-items:start}
@media(max-width:900px){.ruf-grid{grid-template-columns:1fr}}
.ruf-wege{display:grid;justify-items:start;gap:.3rem;margin:clamp(1.75rem,4vw,2.75rem) 0 0}
.sec-head+.ruf-wege{margin-top:0}
.ruf-nummer{font-family:var(--f-display);font-weight:700;letter-spacing:-.035em;
  font-size:clamp(2.1rem,5.4vw,4.1rem);line-height:1.02;text-decoration:none;
  font-variant-numeric:tabular-nums;display:inline-block;white-space:nowrap;
  background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;
  background-position:0 100%;background-size:0 2px;
  transition:background-size .4s var(--ease),color .25s var(--ease)}
.ruf-nummer:hover{background-size:100% 2px}
.ruf-mail{font-family:var(--f-text);font-weight:600;font-size:clamp(1.05rem,1.9vw,1.4rem);
  letter-spacing:-.01em;text-decoration:none;display:inline-block;margin-top:.55rem;
  border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:.1rem;
  transition:border-color .25s var(--ease),color .25s var(--ease)}
.on-dark .ruf-nummer:hover,.on-dark .ruf-mail:hover{color:var(--green-light)}
.on-dark .ruf-mail:hover{border-color:var(--green-light)}
.ruf-mail:hover{color:var(--green-deep);border-color:currentColor}
.sec:not(.sec-dark) .ruf-mail{border-bottom-color:var(--line)}
.ruf-hinweis{font-size:.875rem;margin:1.6rem 0 0;max-width:38ch}
.ruf-wann{display:grid;gap:.9rem;margin-top:clamp(1.75rem,3.5vw,2.5rem);
  border-top:1px solid rgba(255,255,255,.16);padding-top:1.5rem}
.sec:not(.sec-dark) .ruf-wann{border-top-color:var(--line)}
.ruf-wann h3{font-size:1rem;margin:0 0 .25rem}
.ruf-wann p{font-size:.9375rem;margin:0;color:inherit;opacity:.78;max-width:46ch}

/* --- Zeitleiste der Geschichte ------------------------------------------ */
.jahre{display:grid;gap:0;margin:0;border-top:1px solid var(--line)}
.sec-dark .jahre,.on-dark .jahre{border-top-color:rgba(255,255,255,.16)}
.jahre>div{display:grid;grid-template-columns:7rem 1fr;gap:1rem 2rem;align-items:baseline;
  padding:1.5rem .1rem;border-bottom:1px solid var(--line)}
.sec-dark .jahre>div,.on-dark .jahre>div{border-bottom-color:rgba(255,255,255,.16)}
@media(max-width:620px){.jahre>div{grid-template-columns:1fr;gap:.4rem;padding:1.2rem .1rem}}
.jahre dt{font-family:var(--f-display);font-weight:700;font-size:1.5rem;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--green-deep)}
.sec-dark .jahre dt,.on-dark .jahre dt{color:var(--green-light)}
.jahre dd{margin:0}
.jahre dd strong{display:block;font-family:var(--f-display);font-weight:600;font-size:1.15rem;
  letter-spacing:-.02em;margin-bottom:.3rem}
.jahre dd p{margin:0;color:var(--muted);font-size:.9375rem;max-width:58ch}
.sec-dark .jahre dd p,.on-dark .jahre dd p{color:rgba(255,255,255,.66)}

/* --- Zitat mit Quelle --------------------------------------------------- */
.zitat{margin:0;max-width:30ch}
.zitat blockquote{margin:0}
.zitat figcaption{margin-top:1.2rem;font-size:.8125rem;color:var(--muted);letter-spacing:.02em}
.sec-dark .zitat figcaption,.on-dark .zitat figcaption{color:rgba(255,255,255,.6)}

/* --- Markenwand ---------------------------------------------------------
   Echte Logos, aber einfarbig. Die Seite ist schwarzweiß mit einem Grün;
   zwanzig Hausfarben nebeneinander würden sie zerreißen. Die Höhen sind
   pro Marke optisch ausgeglichen, nicht gleich: ein quadratisches Zeichen
   wirkt bei gleicher Höhe doppelt so groß wie eine lange Wortmarke. */
.logos{list-style:none;margin:0 0 clamp(2.25rem,5vw,3.5rem);padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:clamp(1.5rem,2.6vw,2.2rem)}
/* Jede Marke bekommt dieselbe Zelle, damit die Wand ein Raster bleibt und
   nicht dem Zufall der Wortlängen folgt. Die Zeilen sind zentriert, sonst
   steht die letzte halbe Reihe allein am linken Rand. */
.logos li{display:flex;align-items:center;justify-content:center;
  flex:0 0 calc((100% - 4 * clamp(1.5rem,2.6vw,2.2rem)) / 5);
  min-height:clamp(58px,6vw,74px)}
@media(max-width:1000px){.logos li{flex-basis:calc((100% - 3 * 1.6rem) / 4)}}
@media(max-width:700px){.logos li{flex-basis:calc((100% - 2 * 1.5rem) / 3)}}
@media(max-width:440px){.logos li{flex-basis:calc((100% - 1.5rem) / 2)}}
.logos img{display:block;width:auto;max-width:100%;height:var(--h,26px);
  filter:brightness(0) invert(1);opacity:.74;
  transition:opacity .3s var(--ease)}
.logos li:hover img{opacity:1}
@media(max-width:620px){
  .logos{gap:1.5rem 1.9rem}
  .logos img{height:calc(var(--h,26px) * .82)}
}
.l-cartier{--h:26px}.l-celine{--h:23px}.l-chanel{--h:20px}.l-chloe{--h:28px}
.l-dior{--h:31px}.l-dolce-gabbana{--h:16px}.l-emporio-armani{--h:15px}
.l-giorgio-armani{--h:25px}.l-gucci{--h:20px}.l-miu-miu{--h:20px}.l-montblanc{--h:37px}
.l-oakley{--h:31px}.l-oliver-peoples{--h:22px}.l-porsche-design{--h:11px}.l-prada{--h:20px}
.l-ray-ban{--h:30px}.l-saint-laurent{--h:16px}.l-tag-heuer{--h:34px}.l-tom-ford{--h:19px}
.logos-weiter{font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin:0 0 1rem}

/* --- Köpfe ---------------------------------------------------------------
   Acht Gesichter, gleich groß und gleich beschnitten. Namen stehen darunter
   in der Liste, sobald die Zuordnung vom Laden bestätigt ist. */
/* Schlichte Liste mit Trennlinien: Name links, Zusatz rechts. Wird auf der
   404-Seite und für die Sportmarken benutzt. */
.names{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:0 clamp(1rem,3vw,2.5rem)}
.names li{border-bottom:1px solid var(--line);padding:.9rem .25rem;font-size:1.0625rem;display:flex;
  flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.35rem}
.names .role{font-size:.8125rem;color:var(--muted)}

.koepfe{list-style:none;margin:0 0 clamp(2rem,4vw,3rem);padding:0;
  display:grid;gap:clamp(.5rem,1.3vw,1rem);grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.koepfe{grid-template-columns:repeat(2,1fr)}}
.koepfe li{margin:0}
.koepfe figure{margin:0;position:relative;overflow:hidden;background:var(--line)}
.koepfe img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;
  transition:transform .7s var(--ease)}
@media(hover:hover){.koepfe figure:hover img{transform:scale(1.035)}}
/* Der Name liegt auf dem Bild, auf einem dunklen Verlauf von unten. Das hält
   das Raster ruhig und bleibt nach WCAG 1.4.3 lesbar. */
.koepfe figcaption{position:absolute;inset:auto 0 0 0;z-index:1;
  padding:clamp(2.5rem,7vw,3.5rem) clamp(.75rem,1.6vw,1.1rem) clamp(.7rem,1.4vw,1rem);
  background:linear-gradient(to top,rgba(10,10,10,.82),rgba(10,10,10,.5) 45%,rgba(10,10,10,0));
  color:#fff;display:flex;flex-direction:column;gap:.1rem;line-height:1.3}
.koepfe figcaption b{font-weight:600;font-size:clamp(.9375rem,1.25vw,1.0625rem);letter-spacing:-.005em}
.koepfe figcaption span{font-size:clamp(.75rem,.95vw,.8125rem);color:rgba(255,255,255,.78)}

/* --- Hero-Schleife -------------------------------------------------------
   Das Foto bleibt die Grundlage und wird zuerst geladen. Das Video legt
   sich darüber und blendet erst auf, wenn es wirklich läuft. Wer reduzierte
   Bewegung eingestellt hat, lädt es gar nicht: main.js setzt die Quellen. */
.hero-video{opacity:0;transition:opacity 1.1s var(--ease)}
.hero-video.an{opacity:1}
@media(prefers-reduced-motion:reduce){.hero-video{display:none}}

/* Schalter dazu (WCAG 2.2.2: Bewegung über fünf Sekunden braucht einen) */
.video-toggle{position:absolute;right:var(--gut);bottom:clamp(2.5rem,7vh,4.5rem);z-index:3;
  width:44px;height:44px;padding:0;cursor:pointer;border-radius:50%;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.5);backdrop-filter:blur(6px);
  transition:background .2s var(--ease),border-color .2s var(--ease)}
.video-toggle:hover{background:rgba(0,0,0,.8);border-color:#fff}
.video-toggle::before{content:"";position:absolute;inset:0;margin:auto;width:14px;height:14px;background:#fff}
.video-toggle[data-state="playing"]::before{
  clip-path:polygon(0 0,38% 0,38% 100%,0 100%,0 0,62% 0,100% 0,100% 100%,62% 100%,62% 0)}
.video-toggle[data-state="paused"]::before{clip-path:polygon(12% 0,100% 50%,12% 100%)}
@media(max-width:820px){.video-toggle{bottom:auto;top:calc(var(--head-h) + .75rem);width:40px;height:40px}}

/* --- Einwilligung --------------------------------------------------------
   Eine Karte unten links statt eines Balkens über der ganzen Seite: Der
   Inhalt bleibt lesbar, während man entscheidet. Annehmen und Ablehnen sind
   gleich groß, gleich weit vorne und gleich auffällig — alles andere wäre
   nach § 25 TDDDG keine freiwillige Einwilligung. */
.cc{position:fixed;left:var(--gut);bottom:var(--gut);z-index:80;width:min(27rem,calc(100vw - 2*var(--gut)));
  background:var(--paper);border:1px solid var(--ink);border-radius:2px;
  padding:clamp(1.25rem,2.5vw,1.75rem);
  box-shadow:0 18px 50px -12px rgba(14,14,14,.28);
  animation:ccRein .5s cubic-bezier(.16,1,.3,1) both}
@keyframes ccRein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.no-motion .cc{animation:none}
@media(prefers-reduced-motion:reduce){.cc{animation:none}}
@media(max-width:620px){.cc{left:.75rem;right:.75rem;bottom:.75rem;width:auto}}
.cc-titel{font-size:1.25rem;margin:0 0 .5rem;max-width:none}
.cc-text{font-size:.9375rem;line-height:1.55;color:var(--muted);margin:0 0 1.1rem;max-width:none}
.cc-knoepfe{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.cc-weit{width:100%;padding:.85rem .6rem;font-size:.9375rem}
.cc-fuss{font-size:.8125rem;color:var(--muted);margin:.9rem 0 0;max-width:none}
.cc-fuss a{color:inherit;text-underline-offset:.2em}
.cc-link{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;
  text-decoration:underline;text-underline-offset:.2em}
.cc-link:hover,.cc-fuss a:hover{color:var(--ink)}

.cc-dialog{width:min(34rem,calc(100vw - 2rem));max-height:86vh;overflow:auto;
  background:var(--paper);color:var(--ink);border:1px solid var(--ink);border-radius:2px;
  padding:clamp(1.5rem,3vw,2.25rem)}
.cc-dialog::backdrop{background:rgba(14,14,14,.55)}
.cc-dialog h2{font-size:clamp(1.4rem,2.6vw,1.8rem);margin:0 0 .6rem;max-width:none}
.cc-dialog h3{font-size:1rem;margin:0 0 .25rem}
.cc-reihe{display:flex;gap:1.5rem;align-items:flex-start;justify-content:space-between;
  border-top:1px solid var(--line);padding:1.1rem 0}
.cc-reihe p{font-size:.875rem;color:var(--muted);margin:0;max-width:42ch}
.cc-anbieter{margin-top:.35rem;font-size:.8125rem}
.cc-immer{font-size:.8125rem;font-weight:600;color:var(--muted);white-space:nowrap;padding-top:.2rem}
.cc-dialog .cc-knoepfe{margin-top:1.5rem}
.cc-schalter{flex:0 0 auto;cursor:pointer;display:block;padding-top:.15rem}
.cc-schalter input{position:absolute;width:1px;height:1px;opacity:0}
.cc-spur{display:block;width:46px;height:26px;border-radius:99px;background:#fff;
  border:1px solid var(--field-line);position:relative;transition:background .22s var(--ease),border-color .22s var(--ease)}
.cc-spur::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:var(--field-line);transition:transform .22s var(--ease),background .22s var(--ease)}
.cc-schalter input:checked+.cc-spur{background:var(--green-deep);border-color:var(--green-deep)}
.cc-schalter input:checked+.cc-spur::after{transform:translateX(20px);background:#fff}
.cc-schalter input:focus-visible+.cc-spur{outline:3px solid var(--green-deep);outline-offset:3px}

/* Karte: bis zur Einwilligung ein Platzhalter, der schon alles Nötige sagt */
.karte{position:relative;background:var(--concrete);border:1px solid var(--line);
  aspect-ratio:16/10;display:grid;place-items:center;overflow:hidden}
.sec-dark .karte,.on-dark .karte{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18)}
.karte iframe{width:100%;height:100%;border:0;display:block}
.karte-platz{display:grid;gap:.9rem;justify-items:center;text-align:center;
  padding:clamp(1.5rem,4vw,2.5rem);max-width:34ch}
.karte-platz p{font-size:.875rem;color:var(--muted);margin:0}
.on-dark .karte-platz p{color:rgba(255,255,255,.66)}

/* --- Gläser ---------------------------------------------------------------
   Die Fassung sucht man aus, das Glas bekommt man dazu – deshalb steht hier,
   von wem es kommt, und nicht nur als Fußnote. */
.glas{margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:clamp(1.75rem,3.5vw,2.5rem);
  border-top:1px solid var(--line);display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.sec-dark .glas,.on-dark .glas{border-top-color:rgba(255,255,255,.18)}
@media(max-width:820px){.glas{grid-template-columns:1fr;gap:1.25rem}}
.glas-satz{font-family:var(--f-display);font-weight:600;letter-spacing:-.025em;
  font-size:clamp(1.15rem,2.1vw,1.6rem);line-height:1.25;margin:0;max-width:30ch}
.glas-satz em{font-style:normal;color:var(--green-deep)}
.sec-dark .glas-satz em,.on-dark .glas-satz em{color:var(--green-light)}
.glas-note{font-size:.875rem;color:var(--muted);margin:0;max-width:42ch}
.sec-dark .glas-note,.on-dark .glas-note{color:rgba(255,255,255,.62)}