@import url('fonts.css');

/* ============================================================
   Optik Feldmann — Design-System

   Haltung: Handwerksbetrieb, nicht Startup. Deshalb ein strenges
   Raster, Haarlinien statt Schlagschatten, kantige Kanten statt
   Pillenformen, und genau eine Akzentfarbe — das Rot aus dem Logo.
   ============================================================ */
:root{
  /* --- Farben. Rot und Blau sind pixelgenau aus dem Logo gezogen. --- */
  --rot:#B51E29;          /* Wortmarke „BRILLENMACHER" */
  --rot-dunkel:#8E141D;   /* für Hover und Text auf Hell */
  --blau:#005DAC;         /* Signatur „Feldmann" */
  --blau-dunkel:#00477F;

  --tinte:#14181C;        /* fast schwarz, minimal warm */
  --tinte-80:#3A4249;
  --tinte-60:#5D666E;     /* Sekundärtext, hält 4.5:1 auf Papier */
  --linie:#DCD8D2;        /* Haarlinie — das wichtigste Gestaltungsmittel hier */
  --linie-stark:#B8B2AA;
  --papier:#FCFBF9;       /* minimal warmes Weiß */
  --papier-2:#F4F1EC;
  --weiss:#fff;

  --serif:'Archivo',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  /* Typo-Skala: klar getrennte Stufen statt fließender Übergänge */
  --t-hero:clamp(2.6rem,6.4vw,5.25rem);
  --t-h2:clamp(1.8rem,3.3vw,2.85rem);
  --t-h3:clamp(1.08rem,1.45vw,1.28rem);
  --t-lead:clamp(1.04rem,1.22vw,1.18rem);

  --wrap:1280px;
  --gut:clamp(1.15rem,4vw,3rem);
  --sect:clamp(4rem,7.5vw,7rem);
  --r:3px;                /* fast kantig */
  --ease:cubic-bezier(.4,0,.2,1);
}

/* ---------------- Reset ---------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}
body{
  font-family:var(--sans);color:var(--tinte);background:var(--papier);
  font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased;
  font-feature-settings:'kern' 1,'liga' 1;overflow-x:hidden;
}
img,picture{display:block;max-width:100%;height:auto}
/* Grundgröße für Inline-Icons: sie bringen nur ein viewBox mit. Fehlt die
   Größenregel, skaliert das SVG auf die volle Spaltenbreite. */
svg{display:block;width:1.05em;height:1.05em;flex:none}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;line-height:1.06;
  letter-spacing:-.028em;text-wrap:balance}
p{text-wrap:pretty}
::selection{background:var(--rot);color:#fff}

:focus-visible{outline:2px solid var(--rot);outline-offset:3px;border-radius:1px}
:focus:not(:focus-visible){outline:none}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:0;top:-100px;z-index:200;background:var(--rot);color:#fff;
  padding:.85rem 1.4rem;font-weight:600;font-size:.92rem;transition:top .16s}
.skip:focus{top:0}

/* ---------------- Bausteine ---------------- */
.wrap{width:min(100% - var(--gut)*2,var(--wrap));margin-inline:auto}
.wrap-narrow{width:min(100% - var(--gut)*2,780px);margin-inline:auto}
.sect{padding-block:var(--sect)}
.sect--linie{border-top:1px solid var(--linie)}
.sect--grau{background:var(--papier-2)}

/* Abschnittsmarke: Haarlinie darüber, kein Bindestrich-Präfix */
/* Kurzer Akzentbalken über dem Label. Als ::before statt border-top, weil
   ein inline-block in einem Flex-Container sonst auf volle Breite gezogen wird. */
.eyebrow{
  font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--rot);display:block;margin-bottom:1.4rem;
}
.eyebrow::before{content:'';display:block;width:52px;height:3px;background:var(--rot);margin-bottom:.9rem}
.eyebrow.hell{color:#fff}
.eyebrow.center{text-align:center}
.eyebrow.center::before{margin-inline:auto}

.lead{font-size:var(--t-lead);color:var(--tinte-80);line-height:1.66;max-width:62ch}
.head{max-width:780px;margin-bottom:clamp(2.4rem,4vw,3.6rem)}
.head.center{margin-inline:auto;text-align:center}
.head.center .lead{margin-inline:auto}
.head h2{font-size:var(--t-h2);margin-bottom:1rem}

/* Buttons: rechteckig, ruhig. Keine Pillen, keine Sprünge beim Hover. */
.btn{
  --bg:var(--rot);--fg:#fff;--bd:var(--rot);
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  background:var(--bg);color:var(--fg);border:1.5px solid var(--bd);border-radius:var(--r);
  font-weight:600;font-size:.94rem;letter-spacing:-.002em;padding:.92rem 1.55rem;cursor:pointer;
  transition:background .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease);
}
.btn:hover{--bg:var(--rot-dunkel);--bd:var(--rot-dunkel)}
.btn--ghost{--bg:transparent;--fg:var(--tinte);--bd:var(--linie-stark)}
.btn--ghost:hover{--bg:var(--tinte);--fg:#fff;--bd:var(--tinte)}
.btn--hell{--bg:transparent;--fg:#fff;--bd:rgba(255,255,255,.4)}
.btn--hell:hover{--bg:#fff;--fg:var(--tinte);--bd:#fff}
.btn svg{width:17px;height:17px;flex:none}

/* Karten: flach, Haarlinie, kein Schweben */
.card{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r);
  padding:clamp(1.5rem,2.2vw,2rem);transition:border-color .18s var(--ease)}
.card:hover{border-color:var(--linie-stark)}

.grid{display:grid;gap:1px;background:var(--linie)}   /* 1px-Raster = Trennlinien */
.grid > *{background:var(--papier)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.grid--frei{gap:clamp(1rem,1.6vw,1.4rem);background:none}
.grid--frei > *{background:none}

/* ============================================================
   Kopf
   ============================================================ */
.topbar{background:var(--tinte);color:rgba(255,255,255,.7);font-size:.795rem;
  letter-spacing:.005em;border-bottom:3px solid var(--rot)}
.topbar .wrap{display:flex;gap:1.6rem;align-items:center;min-height:40px;flex-wrap:wrap;padding-block:.35rem}
.topbar a:hover{color:#fff}
.topbar .tb-item{display:inline-flex;align-items:center;gap:.45rem}
.topbar svg{width:13px;height:13px;opacity:.6;flex:none}
.tb-status{display:inline-flex;align-items:center;gap:.42rem;font-weight:600;color:#fff;margin-left:auto}
.tb-dot{width:6px;height:6px;border-radius:50%;background:#3FBF7F}
.tb-dot.closed{background:#E0A33A}

.nav{position:sticky;top:0;z-index:100;background:var(--papier);
  border-bottom:1px solid var(--linie);transition:border-color .2s}
.nav.stuck{border-bottom-color:var(--linie-stark)}
.nav .wrap{display:flex;align-items:center;gap:1.4rem;min-height:74px}
.brand{display:flex;align-items:center;gap:.8rem;margin-right:auto}
.brand img{height:44px;width:auto}
.brand-txt{display:none}
@media(min-width:560px){.brand-txt{display:block}}
.brand-txt b{font-family:var(--serif);font-size:1rem;font-weight:700;display:block;
  line-height:1.15;letter-spacing:-.02em}
.brand-txt span{font-size:.665rem;letter-spacing:.15em;text-transform:uppercase;color:var(--tinte-60)}

.menu{display:none;align-items:center;gap:0;list-style:none;margin:0;padding:0}
@media(min-width:1040px){.menu{display:flex}}
.menu > li{position:relative}
.menu a{display:block;padding:.6rem .9rem;font-size:.92rem;font-weight:500;color:var(--tinte-80);
  position:relative;transition:color .16s}
.menu a::after{content:'';position:absolute;left:.9rem;right:.9rem;bottom:.15rem;height:2px;
  background:var(--rot);transform:scaleX(0);transform-origin:left;transition:transform .2s var(--ease)}
.menu a:hover{color:var(--tinte)}
.menu a:hover::after,.menu a[aria-current="page"]::after{transform:scaleX(1)}
.menu a[aria-current="page"]{color:var(--tinte);font-weight:600}
.has-sub > a::after{display:none}
.has-sub > a{padding-right:1.4rem}
.has-sub > a::before{content:'';position:absolute;right:.65rem;top:50%;width:4px;height:4px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-70%) rotate(45deg);opacity:.45}
.sub{position:absolute;top:100%;left:0;min-width:288px;background:var(--weiss);
  border:1px solid var(--linie);padding:.35rem;list-style:none;
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:.16s var(--ease);
  box-shadow:0 12px 30px -18px rgba(20,24,28,.4)}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:none}
.sub a{padding:.6rem .75rem;font-size:.885rem}
.sub a::after{display:none}
.sub a:hover{background:var(--papier-2)}
.sub a small{display:block;font-size:.765rem;color:var(--tinte-60);font-weight:400;margin-top:.1rem}

.burger{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--linie);
  border-radius:var(--r);cursor:pointer;background:var(--weiss)}
@media(min-width:1040px){.burger{display:none}}
.burger span{display:block;width:18px;height:1.5px;background:var(--tinte);transition:.22s var(--ease)}
.burger span+span{margin-top:4.5px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.drawer{position:fixed;inset:0 0 0 auto;width:min(88vw,390px);background:var(--papier);z-index:150;
  transform:translateX(100%);transition:transform .3s var(--ease);overflow-y:auto;
  padding:1.4rem 1.5rem 3rem;border-left:3px solid var(--rot)}
.drawer[data-open="true"]{transform:none}
.drawer .drawer-label{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--rot);font-weight:700;margin:1.7rem 0 .4rem;padding-top:.7rem;border-top:1px solid var(--linie)}
.drawer .drawer-label:first-child{margin-top:.4rem;border-top:0;padding-top:0}
.drawer a{display:block;padding:.72rem .1rem;font-size:1rem;font-weight:500;
  border-bottom:1px solid var(--linie)}
.scrim{position:fixed;inset:0;background:rgba(20,24,28,.5);z-index:140;
  opacity:0;visibility:hidden;transition:.25s}
.scrim[data-open="true"]{opacity:1;visibility:visible}

/* ============================================================
   Hero — vollflächiges Video, Text darüber.

   Der Abdunkler ist nicht geschätzt: über den ganzen Loop gemessen
   liegt das 95. Perzentil im Textbereich bei L=0,276. Weiß darauf
   ergäbe nur 3,22:1. Mit 88 % Schwarz links sind es rund 9:1.
   ============================================================ */
.hero{position:relative;background:var(--tinte);color:#fff;overflow:hidden;isolation:isolate;
  border-bottom:3px solid var(--rot)}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img,.hero__bg video{width:100%;height:100%;object-fit:cover;object-position:center 38%;
  position:absolute;inset:0}
.hero__bg video{opacity:0;transition:opacity 1.1s var(--ease)}
.hero__bg video[data-laeuft="true"]{opacity:1}
/* Verlauf: links kräftig, rechts fast offen, damit das Motiv sichtbar bleibt */
.hero__bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,
    rgba(16,19,22,.86) 0%, rgba(16,19,22,.76) 38%,
    rgba(16,19,22,.44) 66%, rgba(16,19,22,.16) 100%)}
@media(max-width:999px){
  /* Ohne zweite Spalte steht der Text über dem ganzen Bild — gleichmäßig abdunkeln */
  .hero__bg::after{background:linear-gradient(180deg,
    rgba(16,19,22,.78) 0%, rgba(16,19,22,.72) 55%, rgba(16,19,22,.86) 100%)}
}

.hero .wrap{position:relative;z-index:1}
.hero__inhalt{padding-block:clamp(3.4rem,9vw,7.5rem);max-width:44rem;
  display:flex;flex-direction:column;justify-content:center;min-height:min(78svh,720px)}
.hero h1{font-size:var(--t-hero);letter-spacing:-.042em;margin-bottom:1.4rem;font-weight:700}
/* Headline komplett weiß. Gemessen: jedes Rot, das auf dem hellsten Frame
   noch 3:1 erreicht, ist so weit aufgehellt, dass es rosa wirkt und nicht
   mehr nach der Marke aussieht. Weiß liegt bei 12:1. Das Rot trägt hier
   der Akzentbalken und der Button. */
.hero h1 em{font-style:normal;color:#fff}
.hero .lead{max-width:42ch;color:rgba(255,255,255,.86)}
.hero .eyebrow{color:#fff}
.hero .eyebrow::before{background:var(--rot)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2.2rem}

/* Belegzeile, helle Fassung */
.hero__beleg{list-style:none;margin:2.4rem 0 0;padding:1.4rem 0 0;
  border-top:1px solid rgba(255,255,255,.22);
  display:flex;flex-wrap:wrap;gap:.5rem 2.2rem;font-size:.855rem;color:rgba(255,255,255,.74)}
.hero__beleg li{display:flex;align-items:baseline;gap:.45rem}
.hero__beleg b{font-family:var(--serif);font-size:1.06rem;font-weight:700;color:#fff;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hero__sterne{color:#F0B942;font-size:.9rem;letter-spacing:.04em}

.hero__weiter{display:none;align-items:center;gap:.7rem;margin-top:2.2rem;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.78);font-weight:600}
@media(min-width:1000px){.hero__weiter{display:flex}}
.hero__weiter::before{content:'';width:34px;height:1px;background:rgba(255,255,255,.4)}
.hero__weiter svg{width:13px;height:13px}

/* Quellenhinweis. Sitzt rechts unten, wo der Verlauf fast offen ist —
   deshalb ein eigener Grund statt nur heller Schrift (dort waren es 2,68:1). */
.hero__quelle{position:absolute;right:0;bottom:0;z-index:1;font-size:.66rem;
  color:rgba(255,255,255,.82);background:rgba(16,19,22,.82);
  padding:.45rem .8rem;letter-spacing:.06em;text-transform:uppercase}

/* Aussage-Abschnitt: rein typografisch, ohne Bild. Sitzt zwischen Hero und
   Sehsimulator und gibt dem Auge eine Pause zwischen zwei Bildblöcken. */
.aussage{background:var(--papier-2);border-top:1px solid var(--linie)}
.aussage__grid{display:grid;gap:clamp(1.6rem,4vw,4.5rem);grid-template-columns:1fr;align-items:start}
@media(min-width:900px){.aussage__grid{grid-template-columns:1.15fr .85fr}}
.aussage h2{font-size:clamp(1.7rem,3.4vw,2.9rem);letter-spacing:-.032em;line-height:1.08}
.aussage h2 em{font-style:normal;color:var(--rot)}
.aussage__text p{color:var(--tinte-80);font-size:1.02rem;line-height:1.7;max-width:46ch}
.aussage__text p + p{margin-top:1.1rem}
.aussage__weiter{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.6rem;
  font-weight:600;font-size:.92rem;color:var(--rot);
  border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color .16s}
.aussage__weiter:hover{border-bottom-color:var(--rot)}
.aussage__weiter svg{width:15px;height:15px}

/* ============================================================
   Terminbuchung
   ============================================================ */
.booking{background:var(--papier-2);border-block:1px solid var(--linie)}
.booking__grid{display:grid;gap:clamp(2rem,4vw,4rem);grid-template-columns:1fr}
@media(min-width:960px){.booking__grid{grid-template-columns:.82fr 1.18fr;align-items:start}}
.bk{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r);
  padding:clamp(1.3rem,2.4vw,2rem)}
.bk__steps{display:flex;gap:1px;background:var(--linie);list-style:none;padding:0;margin:0 0 1.7rem}
.bk__steps li{flex:1;background:var(--weiss);padding:.7rem .6rem;font-size:.715rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--tinte-60);
  border-top:2px solid var(--linie);transition:.2s}
.bk__steps li[data-on="true"]{color:var(--tinte);border-top-color:var(--rot)}
.bk__panel[hidden]{display:none}
.bk__label{display:block;font-size:.71rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinte-60);margin-bottom:.8rem}
.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.6rem}
.chip{padding:.58rem 1rem;border:1px solid var(--linie);background:var(--weiss);border-radius:var(--r);
  font-size:.87rem;font-weight:500;cursor:pointer;transition:.15s var(--ease)}
.chip:hover{border-color:var(--rot);color:var(--rot)}
.chip[aria-pressed="true"]{background:var(--rot);color:#fff;border-color:var(--rot)}
.days{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:1px;
  background:var(--linie);border:1px solid var(--linie);margin-bottom:1.6rem}
.day{padding:.7rem .35rem;border:0;background:var(--weiss);cursor:pointer;text-align:center;
  line-height:1.3;transition:.15s}
.day:hover:not(:disabled){background:var(--papier-2)}
.day small{display:block;font-size:.665rem;letter-spacing:.09em;text-transform:uppercase;color:var(--tinte-60)}
.day b{font-family:var(--serif);font-size:1.15rem;font-weight:700;font-variant-numeric:tabular-nums}
.day[aria-pressed="true"]{background:var(--tinte);color:#fff}
.day[aria-pressed="true"] small{color:rgba(255,255,255,.7)}
.day:disabled{opacity:.3;cursor:not-allowed}
.slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:1px;
  background:var(--linie);border:1px solid var(--linie)}
.slot{padding:.68rem .3rem;border:0;background:var(--weiss);font-weight:600;font-size:.885rem;
  font-variant-numeric:tabular-nums;cursor:pointer;transition:.15s}
.slot:hover:not(:disabled){background:var(--papier-2);color:var(--rot)}
.slot[aria-pressed="true"]{background:var(--rot);color:#fff}
.slot:disabled{opacity:.32;cursor:not-allowed;text-decoration:line-through}
.bk__summary{border-left:3px solid var(--rot);background:var(--papier-2);padding:.9rem 1.1rem;
  margin:1.4rem 0 1.1rem;font-size:.885rem;display:flex;flex-wrap:wrap;gap:.35rem 1.3rem}
.bk__nav{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.3rem}
.field{margin-bottom:1rem}
.field input,.field textarea{width:100%;padding:.82rem 1rem;border:1px solid var(--linie);
  border-radius:var(--r);background:var(--weiss);transition:border-color .15s}
.field input:focus,.field textarea:focus{border-color:var(--rot);outline:none}
.consent{display:flex;gap:.65rem;font-size:.83rem;color:var(--tinte-60);line-height:1.5;margin-bottom:1.1rem}
.consent input{margin-top:.25rem;accent-color:var(--rot);width:16px;height:16px;flex:none}
.bk__done{text-align:center;padding:2rem 1rem}
.bk__done svg{width:48px;height:48px;color:var(--rot);margin:0 auto 1rem}

/* ============================================================
   Inhaltsbausteine
   ============================================================ */
/* Leistungskarte: Nummer + Linie statt Icon im getönten Quadrat */
.svc{display:flex;flex-direction:column;height:100%;padding:clamp(1.6rem,2.4vw,2.1rem);
  background:var(--papier);transition:background .18s var(--ease)}
.svc:hover{background:var(--weiss)}
.svc__nr{font-family:var(--serif);font-size:.78rem;font-weight:700;letter-spacing:.06em;
  color:var(--rot);font-variant-numeric:tabular-nums;margin-bottom:1.1rem;
  display:flex;align-items:center;gap:.7rem}
.svc__nr::after{content:'';height:1px;flex:1;background:var(--linie)}
.svc__tag{font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinte-60);display:block;margin-bottom:.55rem}
.svc h3{font-size:var(--t-h3);margin-bottom:.6rem;letter-spacing:-.018em}
.svc p{color:var(--tinte-80);font-size:.925rem;margin-bottom:1.1rem}
.svc ul{list-style:none;padding:0;margin:0 0 1.3rem;display:flex;flex-direction:column;gap:.4rem}
.svc li{display:flex;gap:.55rem;font-size:.86rem;color:var(--tinte-60)}
.svc li::before{content:'';width:5px;height:1.5px;background:var(--rot);flex:none;margin-top:.72rem}
.svc__more{margin-top:auto;font-weight:600;font-size:.875rem;color:var(--rot);
  display:inline-flex;gap:.4rem;align-items:center;border-bottom:1px solid transparent;
  align-self:flex-start;padding-bottom:2px;transition:border-color .16s}
.svc:hover .svc__more,.card:hover .svc__more{border-bottom-color:var(--rot)}
.svc__more svg{width:14px;height:14px}

/* Preise: großes Zahlenband, keine Farbkacheln */
.preis{padding:clamp(1.8rem,3vw,2.6rem);background:var(--papier)}
.preis small{font-size:.71rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tinte-60);
  display:block;padding-bottom:.9rem;border-bottom:1px solid var(--linie)}
.preis b{display:block;font-family:var(--serif);font-size:clamp(2.6rem,5.4vw,3.9rem);
  font-weight:700;line-height:1;margin:1.1rem 0 .35rem;letter-spacing:-.045em;
  font-variant-numeric:tabular-nums}
.preis span{color:var(--tinte-60);font-size:.885rem}
.preis--akzent b{color:var(--rot)}

/* Bild/Text-Block */
.split{display:grid;gap:clamp(2rem,4.5vw,4.5rem);align-items:center;grid-template-columns:1fr}
@media(min-width:940px){.split{grid-template-columns:1fr 1fr}.split.flip .split__media{order:2}}
.split__media{position:relative;background:var(--papier-2)}
/* Kein aspect-ratio: die width/height-Attribute liefern das echte Verhältnis.
   Vorher wurden Panoramabilder in ein 4:3-Fenster gezwängt und dabei
   zur Hälfte weggeschnitten und hochskaliert — daher der Schärfeverlust. */
.split__media img{width:100%;height:auto;object-fit:cover}
.split__badge{position:absolute;left:0;bottom:0;background:var(--tinte);color:#fff;
  padding:.7rem 1.1rem;font-size:.8rem;font-weight:600;display:flex;align-items:center;gap:.5rem;
  letter-spacing:.02em}
.split__badge svg{width:16px;height:16px;color:var(--rot)}
.checks{list-style:none;padding:0;margin:1.7rem 0 0;display:grid;gap:0}
.checks li{display:flex;gap:.8rem;align-items:flex-start;font-size:.935rem;color:var(--tinte-80);
  padding-block:.72rem;border-bottom:1px solid var(--linie)}
.checks li:first-child{border-top:1px solid var(--linie)}
.checks svg{width:17px;height:17px;color:var(--rot);flex:none;margin-top:.22rem}

/* Werkstatt-Bilder */
/* Werkstattbilder sind 2.32:1-Panoramen — als Streifen gezeigt, nicht quadratisch beschnitten. */
.gal{display:flex;gap:1px;overflow-x:auto;scroll-snap-type:x mandatory;
  background:var(--linie);padding-bottom:2px;-webkit-overflow-scrolling:touch}
.gal figure{margin:0;flex:0 0 min(88vw,640px);scroll-snap-align:start;overflow:hidden;
  background:var(--papier-2);position:relative}
.gal img{width:100%;height:auto;display:block;transition:transform .7s var(--ease)}
.gal figure:hover img{transform:scale(1.03)}
.gal figcaption{position:absolute;left:0;bottom:0;background:var(--tinte);color:#fff;
  font-size:.755rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;padding:.5rem .85rem}
.gal::-webkit-scrollbar{height:5px}
.gal::-webkit-scrollbar-thumb{background:var(--linie-stark)}

/* Markenband */
.marquee{overflow:hidden;background:var(--weiss);padding-block:1.6rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;gap:3.6rem;width:max-content;animation:slide 58s linear infinite;align-items:center}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
/* Die Logo-Dateien haben weiße, nicht transparente Hintergründe. Deshalb
   liegt der Streifen auf Weiß — sonst zeichnen sich helle Kästen auf dem
   warmen Papierton ab. Und kein Graustufenfilter: der machte aus dem
   weißen Hintergrund graue Blöcke. */
.marquee img{height:32px;width:auto;object-fit:contain;opacity:.85;transition:opacity .25s var(--ease)}
.marquee img:hover{opacity:1}
@media (prefers-reduced-motion:reduce){
  .marquee__track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;gap:2.2rem}
}

/* Bewertungen — Zitat, nicht Kachel */
.revs{display:grid;gap:1px;background:var(--linie);grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.rev{background:var(--papier);padding:clamp(1.6rem,2.4vw,2.1rem);display:flex;flex-direction:column}
.rev__stars{color:var(--rot);font-size:.85rem;letter-spacing:.12em;margin-bottom:1rem}
.rev blockquote{font-size:.945rem;color:var(--tinte-80);line-height:1.66;margin:0 0 1.4rem;flex:1;
  font-family:var(--sans)}
.rev figcaption{display:flex;flex-direction:column;gap:.15rem;font-size:.865rem;
  padding-top:.9rem;border-top:1px solid var(--linie)}
.rev figcaption b{font-weight:600}
.rev .rev__src{color:var(--tinte-60);font-size:.775rem}

/* Team — Rolle steht genau einmal, unter dem Namen. Vorher lag sie
   zusätzlich als Badge halb im Bild und wirkte wie ein Rendering-Fehler. */
.team{display:grid;gap:clamp(1.6rem,2.6vw,2.4rem);grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  align-items:start}
.mem figure{margin:0 0 1.1rem;overflow:hidden;background:var(--papier-2)}
.mem img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 18%;
  transition:transform .55s var(--ease),filter .55s var(--ease);filter:grayscale(.2) contrast(1.02)}
.mem:hover img{transform:scale(1.03);filter:none}
.mem h3{font-size:1.1rem;margin:0 0 .3rem;letter-spacing:-.018em}
.mem__rolle{color:var(--rot);font-weight:600;font-size:.735rem;letter-spacing:.11em;
  text-transform:uppercase;display:block;margin-bottom:.7rem}
.mem p{font-size:.885rem;color:var(--tinte-80);line-height:1.6}

/* Der Inhaber bekommt mehr Platz — sonst reihen sich neun gleich große Kacheln aneinander */
.chef{display:grid;gap:clamp(1.8rem,4vw,3.4rem);grid-template-columns:1fr;align-items:center;
  padding-bottom:clamp(2.4rem,4.5vw,4rem);margin-bottom:clamp(2.4rem,4.5vw,4rem);
  border-bottom:1px solid var(--linie)}
@media(min-width:860px){.chef{grid-template-columns:minmax(0,.42fr) minmax(0,.58fr)}}
.chef figure{margin:0;overflow:hidden;background:var(--papier-2)}
.chef img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 18%}
.chef__rolle{color:var(--rot);font-weight:600;font-size:.735rem;letter-spacing:.11em;
  text-transform:uppercase;display:block;margin-bottom:.8rem}
.chef h2{font-size:clamp(1.7rem,3vw,2.4rem);margin-bottom:1rem}
.chef p{color:var(--tinte-80);font-size:1.02rem;line-height:1.68;max-width:52ch}
.chef p + p{margin-top:.9rem}

/* Selbsttest-Block */
.selftest{background:var(--tinte);color:#fff;padding:clamp(2rem,4.5vw,3.6rem)}
.selftest h2{font-size:var(--t-h2);margin-bottom:.9rem}
.selftest p{color:rgba(255,255,255,.78);max-width:50ch}
.selftest .meta{display:flex;flex-wrap:wrap;gap:0;margin:1.6rem 0 2rem;
  border-top:1px solid rgba(255,255,255,.18)}
.selftest .meta span{padding:.65rem 1.1rem .65rem 0;font-size:.815rem;color:rgba(255,255,255,.72);
  border-bottom:1px solid rgba(255,255,255,.18);flex:1 1 auto;min-width:120px}

/* FAQ */
.faq details{border-bottom:1px solid var(--linie)}
.faq details:first-of-type{border-top:1px solid var(--linie)}
.faq summary{cursor:pointer;list-style:none;padding:1.2rem 2.4rem 1.2rem 0;font-weight:600;
  font-size:1rem;position:relative;font-family:var(--serif);letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';position:absolute;right:.3rem;top:1.55rem;width:11px;height:11px;
  border-right:2px solid var(--rot);border-bottom:2px solid var(--rot);
  transform:rotate(45deg);transition:transform .2s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg);top:1.75rem}
.faq details p{padding:0 2.4rem 1.3rem 0;color:var(--tinte-80);font-size:.935rem}

/* Anfahrt */
.map{border:1px solid var(--linie);background:var(--papier-2);aspect-ratio:16/10;
  display:grid;place-items:center;text-align:center;padding:2rem}
.map__pin{width:48px;height:48px;background:var(--rot);display:grid;place-items:center;
  margin:0 auto 1rem}
.map__pin svg{width:24px;height:24px;color:#fff}

/* ============================================================
   Fuß
   ============================================================ */
.foot{background:var(--tinte);color:rgba(255,255,255,.62);
  padding-block:clamp(3rem,5.5vw,4.8rem) 0;font-size:.885rem;border-top:3px solid var(--rot)}
.foot__grid{display:grid;gap:2.4rem;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  margin-bottom:3rem}
.foot h2{font-family:var(--sans);font-size:.685rem;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;font-weight:700;margin-bottom:1.1rem;padding-bottom:.7rem;
  border-bottom:1px solid rgba(255,255,255,.18)}
.foot ul{list-style:none;margin:0;padding:0}
.foot a:hover{color:#fff}
.foot li{padding-block:.24rem}
/* width:auto ist hier nicht optional: ohne die Regel greift die Breite aus dem
   width-Attribut und das Logo wird gestaucht. Die Datei hat einen weißen
   Hintergrund ohne Transparenz — deshalb die weiße Fläche, sonst wäre das
   dunkelrote Wort auf dem fast schwarzen Fuß nicht lesbar. */
.foot .brand-block img{height:52px;width:auto;margin-bottom:1.2rem;
  background:#fff;padding:.5rem .7rem}
.foot .brand-block p{max-width:33ch;line-height:1.62}
.foot dl{display:grid;grid-template-columns:auto 1fr;gap:.26rem 1.1rem;font-variant-numeric:tabular-nums}
.foot dt{color:rgba(255,255,255,.5)}
.foot dd{margin:0;color:#fff;font-weight:500}
.foot__social{display:flex;gap:.5rem;margin-top:1.3rem}
.foot__social a{width:36px;height:36px;border:1px solid rgba(255,255,255,.22);
  display:grid;place-items:center;transition:.2s}
.foot__social a:hover{background:var(--rot);border-color:var(--rot);color:#fff}
.foot__social svg{width:16px;height:16px}
.foot__bar{border-top:1px solid rgba(255,255,255,.14);padding-block:1.4rem;display:flex;
  flex-wrap:wrap;gap:.5rem 1.6rem;justify-content:space-between;font-size:.795rem}
.foot__bar ul{display:flex;gap:1.3rem;flex-wrap:wrap}

/* Mobile Aktionsleiste */
.actionbar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:grid;grid-template-columns:1fr 1fr;
  gap:1px;background:var(--linie);border-top:1px solid var(--linie-stark);
  transform:translateY(110%);transition:transform .28s var(--ease);
  padding-bottom:env(safe-area-inset-bottom)}
.actionbar[data-show="true"]{transform:none}
@media(min-width:1040px){.actionbar{display:none}}
.actionbar .btn{border-radius:0;border:0;padding:1rem;font-size:.92rem;width:100%}
.actionbar .btn--ghost{background:var(--papier);color:var(--tinte)}
.actionbar .btn--ghost:hover{background:var(--tinte);color:#fff}
@media(max-width:1039px){body{padding-bottom:64px}}

/* Demo-Hinweis */
.demo-note{background:var(--tinte);color:rgba(255,255,255,.82);font-size:.79rem;text-align:center;
  padding:.6rem 1rem;line-height:1.5;border-bottom:1px solid rgba(255,255,255,.12)}
.demo-note b{color:#fff}
.demo-note a{text-decoration:underline;text-underline-offset:2px;color:#fff}

@media print{.nav,.actionbar,.drawer,.scrim,.topbar,.demo-note{display:none}}

/* ============================================================
   Mobile-Feinschliff
   ============================================================ */
@media (max-width:760px){
  .topbar .tb-addr,.topbar .tb-hours{display:none}
  .topbar .wrap{gap:.9rem}
  .demo-note{font-size:.75rem;padding:.5rem .9rem;text-align:left}
}
@media (max-width:1039px){
  .nav .wrap > .btn{display:none}
  .nav .wrap{min-height:62px;gap:1rem}
  .brand img{height:38px}
}
@media (max-width:420px){
  .brand-txt{display:none}
}

/* ============================================================
   Handy-Feinschliff
   Gemessen bei 375 px: freistehende Telefonlinks waren nur 17–21 px
   hoch (WCAG 2.2 verlangt 24 px; für etwas, das man mit dem Daumen
   trifft, sind 44 px angemessen). Kleinste Beschriftungen lagen bei
   10,6 px. Inline-Links im Fließtext sind ausgenommen — die dürfen
   klein bleiben, dafür gibt es die Ausnahmeregel.
   ============================================================ */
@media (max-width:760px){
  /* Telefonnummern: großzügig antippbar */
  .topbar .tb-item{min-height:44px;padding-inline:.1rem}
  /* Alle Fuß-Links antippbar, nicht nur Telefon und E-Mail */
  .foot li a,.foot__bar a{display:inline-flex;align-items:center;min-height:40px}
  .foot li > a[href^="tel:"]{min-height:44px}
  .foot__social a{width:44px;height:44px}
  .foot li{padding-block:0}
  .foot__bar ul{gap:.2rem 1.3rem}

  /* Kleinste Beschriftungen anheben */
  .hero__quelle{font-size:.72rem}
  .foot h2{font-size:.76rem}
  .eyebrow{font-size:.75rem;letter-spacing:.14em}
  .svc__tag,.sim__marke{font-size:.75rem}
  .bk__label,.bk__steps li,.preis small{font-size:.76rem}
  .demo-note{font-size:.78rem}

  /* Fließtext eine Spur größer — auf kleinen Schirmen liest sich das ruhiger */
  body{font-size:17px}
  .rev blockquote,.svc p,.mem p{font-size:.95rem}
}

/* Sehr schmale Geräte */
@media (max-width:380px){
  .hero__cta .btn,.bk__nav .btn{width:100%}
  .chips{gap:.4rem}
  .chip{font-size:.83rem;padding:.55rem .85rem}
}

/* Markenlogos: die Dateien haben ganz unterschiedliche Seitenverhältnisse
   (von 145×110 bis 1920×219). Deshalb über die Höhe begrenzen und die Breite
   frei lassen — width:auto ist hier zwingend, nicht kosmetisch. */
.markenlogo{max-height:46px;width:auto;height:auto;object-fit:contain}
.raybild{width:min(100%,420px);height:auto}