/* ---------- Fonts (self-gehostet, Fontshare — keine externen Requests) ---------- */
@font-face{font-family:'Zodiak';src:url('fonts/zodiak-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Zodiak';src:url('fonts/zodiak-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Zodiak';src:url('fonts/zodiak-700i.woff2') format('woff2');font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:'SlabSign';src:url('fonts/alfaslab.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Supreme';src:url('fonts/supreme-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Supreme';src:url('fonts/supreme-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Supreme';src:url('fonts/supreme-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ---------- Tokens: Kalkputz-Creme, Nussbaum, Lichtkasten-Gold, Tafel-Weinrot ---------- */
:root{
  --paper:#0d0b0a;
  --paper-2:#151110;
  --creme:#f7f1e4;
  --ink:#efe6d4;
  --wood:#070605;
  --wood-2:#1c1715;
  --gold:#c08628;
  --gold-lt:#f0c879;
  --burg:#8e3330;
  --line:#2c2522;
  --fx-0:#120d0a;
  --fx-1:#b87a1e;
  --fx-2:#7e2a28;
  --line-2:rgba(240,200,121,.20);
  /* Shader-Farben (Hero ist dunkel → eigene Tokens statt --paper/--accent) */
  --display:'Zodiak',Georgia,'Times New Roman',serif;
  --sans:'Supreme','Segoe UI',system-ui,-apple-system,sans-serif;
  --sign:'SlabSign',Rockwell,'Roboto Slab',Georgia,serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
/* Weite Farbraeume nur dort, wo der Browser sie kennt.
   Ohne diese Kapselung liefert var() in alten Browsern einen ungueltigen
   Wert -> Hintergrund und Schriftfarbe fallen auf ihre Initialwerte zurueck
   (weisse Seite, schwarze Schrift). */
@supports (color: oklch(0.5 0.1 60)){
:root{
  --paper:oklch(0.148 0.005 62.0);
  --paper-2:oklch(0.190 0.008 58.0);
  --creme:oklch(0.959 0.018 86.1);
  --ink:oklch(0.930 0.024 85.0);
  --wood:oklch(0.108 0.004 62.0);
  --wood-2:oklch(0.222 0.010 58.0);
  --gold:oklch(0.672 0.126 74.0);
  --gold-lt:oklch(0.851 0.108 83.3);
  --burg:oklch(0.452 0.126 25.5);
  --line:oklch(0.248 0.010 55.0);
  --fx-0:oklch(0.170 0.010 62.0);
  --fx-1:oklch(0.629 0.126 70.9);
  --fx-2:oklch(0.411 0.117 25.1);
}
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@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{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:1.05rem;line-height:1.65;overflow-x:clip;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
::selection{background:var(--burg);color:var(--creme)}
:focus-visible{outline:3px solid var(--gold-lt);outline-offset:3px;border-radius:4px}
.dark :focus-visible{outline-color:var(--gold-lt)}
.skip{position:fixed;top:10px;left:10px;z-index:400;background:var(--ink);color:var(--paper);padding:10px 18px;border-radius:10px;font-weight:600;text-decoration:none;transform:translateY(-250%);transition:transform .2s var(--ease)}
.skip:focus-visible{transform:none}

/* ---------- Draft-Banner ---------- */
.draft{background:var(--burg);color:#f7f1e4;text-align:center;font-size:.8rem;line-height:1.45;padding:9px 16px;letter-spacing:.01em}
.draft b{font-weight:700}
.draft-kurz{display:none}
@media (max-width:760px){
  .draft{font-size:.74rem;padding:7px 14px}
  .draft-lang{display:none}
  .draft-kurz{display:inline}
}

/* ---------- Header + Mobile-Menü (kein backdrop-filter!) ---------- */
header{position:sticky;top:0;z-index:100;background:#12100e;background:color-mix(in oklab,var(--paper) 94%,#f7f1e4);border-bottom:1px solid var(--line)}
.nav{max-width:1240px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:12px 24px;gap:18px}
.brand{font-family:var(--display);font-weight:800;font-size:1.32rem;letter-spacing:.005em;text-decoration:none;display:flex;align-items:center;gap:10px;min-height:44px;text-transform:uppercase}
.brand i{width:11px;height:11px;border-radius:50% 50% 46% 54%;background:var(--gold);box-shadow:0 0 0 3px rgba(184,122,30,.22);display:inline-block;flex:none}
.nav-links{display:flex;align-items:center;gap:24px;list-style:none}
.nav-links a{text-decoration:none;font-weight:500;font-size:.97rem;padding:10px 2px;position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:6px;height:1.5px;background:var(--gold);transition:right .28s var(--ease)}
.nav-links a:hover::after{right:0}
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--burg);color:var(--creme);font-weight:600;text-decoration:none;padding:12px 22px;border-radius:999px;border:none;min-height:44px;font-size:.98rem;transition:transform .22s var(--ease),background .22s var(--ease)}
.btn:hover{background:#a53d39;background:color-mix(in oklab,var(--burg) 84%,#f7f1e4);transform:translateY(-2px)}
.btn--gold{background:var(--gold);color:#241a12}
.btn--gold:hover{background:var(--gold-lt);color:#241a12}
.btn--ghost{background:transparent;color:var(--creme);border:1.5px solid rgba(240,200,121,.5)}
.btn--ghost:hover{background:rgba(240,200,121,.14);color:var(--creme)}
.burger{display:none;background:none;border:2px solid var(--ink);border-radius:12px;width:46px;height:46px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger b{display:block;width:20px;height:2.5px;background:var(--ink);border-radius:2px;transition:transform .25s var(--ease),opacity .2s}
.burger[aria-expanded="true"] b:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] b:nth-child(2){opacity:0}
.burger[aria-expanded="true"] b:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.mobile-menu{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--gold);padding:8px 24px 20px;visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .22s var(--ease),transform .22s var(--ease),visibility 0s .25s}
.mobile-menu.open{visibility:visible;opacity:1;transform:none;transition-delay:0s}
.mobile-menu a{display:block;padding:12px 4px;font-family:var(--display);font-weight:700;font-size:1.28rem;text-decoration:none;border-bottom:1px solid var(--line)}
.mobile-menu a:last-child{border-bottom:none;color:var(--gold-lt)}
@media (max-width:980px){.nav-links,.nav>.btn{display:none}.burger{display:flex}.mobile-menu{display:block}}

/* ---------- Grundraster ---------- */
section{padding:clamp(72px,10vw,132px) 24px;position:relative}
@media (max-width:760px){
  section{padding:52px 20px}
  .wrap{max-width:100%}
  h2{font-size:clamp(1.9rem,7.6vw,2.5rem);max-width:15ch}
  .lead{font-size:1rem}
  .sec-head{gap:14px}
  .hero{padding-top:26px}
  .hero-strip{margin-bottom:20px}
  .hero-shot{margin-top:30px;padding-bottom:34px}
  .card summary{padding:18px 18px;min-height:56px}
  .card-in{padding:0 18px 20px}
  .mq span{font-size:.92rem}
}
.wrap{max-width:1240px;margin:0 auto}
.dark{background:var(--wood);color:var(--creme)}
.eyebrow{font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--gold-lt);display:flex;align-items:flex-start;gap:10px}
.eyebrow::before{content:"";width:30px;height:1px;background:var(--gold);flex:none;margin-top:.68em}
.dark .eyebrow{color:var(--gold-lt)}
.dark .eyebrow::before{background:var(--gold-lt)}
h2{font-family:var(--display);font-weight:800;font-size:clamp(2.05rem,5vw,3.7rem);line-height:1.02;letter-spacing:-.012em;max-width:17ch;margin:.42em 0 0}
h2 em{font-style:italic;font-weight:700;color:var(--burg-lt)}
.dark h2 em{color:var(--gold-lt)}
h3{font-family:var(--display);font-weight:700;font-size:1.5rem;line-height:1.12}
.lead{max-width:50ch;font-size:1.08rem;margin-top:1.1em;color:#ded2bd;color:color-mix(in oklab,var(--ink) 88%,var(--paper))}
.dark .lead{color:#e3d6bf;color:color-mix(in oklab,var(--creme) 86%,var(--wood))}
.sec-head{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(24px,4vw,56px);align-items:end}
@media (max-width:860px){.sec-head{grid-template-columns:1fr}}

/* ---------- Hero ---------- */
.hero{padding-top:clamp(52px,7vw,86px);padding-bottom:0;overflow:hidden;isolation:isolate;background:var(--wood)}
/* Stimmungsbild als Grundton — bewusst tief abgedunkelt, Text bleibt der Held */
/* Stimmungsbild als Kinostreifen in der rechten Heros-Spalte — Panorama bleibt ganz sichtbar */
.hero-strip{position:relative;margin:0 0 clamp(26px,3.4vw,44px)}
.hero-strip .fr{display:block;position:relative;overflow:hidden;border-radius:16px 5px 16px 5px}
.hero-strip picture{display:block}
.hero-strip img,.hero-strip video{display:block;width:100%;height:auto;background:var(--wood)}
.hero-strip .fr::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(92deg,rgba(7,6,5,.62),rgba(7,6,5,.06) 34%,transparent 62%,rgba(7,6,5,.30));
  box-shadow:inset 0 0 0 1px rgba(240,200,121,.16)}
.hero-strip figcaption{margin-top:10px;font-size:.74rem;letter-spacing:.11em;text-transform:uppercase;color:#9c8d76}
@media (max-width:900px){.hero-strip{margin-bottom:24px}}
/* Shader liegt jetzt ALS LICHT ueber dem Stimmungsbild — keine deckende Grundfarbe mehr */
.bgfx{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;mix-blend-mode:screen;opacity:.42}
.bgfx::before{content:"";position:absolute;inset:-20%;
  background:
    radial-gradient(58% 62% at 24% 26%, color-mix(in oklab, var(--fx-1) 30%, transparent), transparent 70%),
    radial-gradient(64% 58% at 82% 74%, color-mix(in oklab, var(--fx-2) 22%, transparent), transparent 72%);}
.bgfx canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.2s ease}
.bgfx canvas.on{opacity:.8}
.hero-inner{position:relative;z-index:2;max-width:1240px;margin:0 auto}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(26px,4vw,64px);align-items:end}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:30px}}
h1{font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,7.6vw,5.5rem);line-height:.99;letter-spacing:-.02em;margin:.3em 0 0}
h1 .row{display:block}
/* Maske nur solange der Auftakt läuft — sonst beschneidet sie den Lichtschein */
h1 .it{font-style:italic;font-weight:700;color:var(--gold-lt);position:relative}
h1 .accent{position:relative;white-space:nowrap;display:inline-block}
h1 .accent svg{position:absolute;left:-2%;bottom:-.06em;width:104%;height:.26em;overflow:visible}
h1 .accent path{fill:none;stroke:#f0c879;stroke:var(--gold-lt);stroke-width:7;stroke-linecap:round;opacity:.9}
/* Lichtschein: breit über das ganze Wort, tief angesetzt — kein abgesetzter Ellipsen-Fleck */
.glow{position:absolute;left:-22%;top:-30%;width:144%;height:172%;z-index:-1;opacity:1;pointer-events:none;
  background:radial-gradient(64% 58% at 50% 57%,rgba(240,200,121,.40),rgba(240,200,121,.13) 44%,transparent 82%);filter:blur(6px)}
/* ---- Wortmarke: nachgebaut nach dem Leuchtschild an der Turmstraße ---- */
.wordmark{position:relative;margin:.42em 0 0;font-family:var(--sign);font-weight:400;letter-spacing:-.004em}
.wm-line{display:block;text-transform:uppercase;font-size:clamp(2.9rem,10.6vw,7rem);line-height:.9;
  color:var(--creme);text-shadow:.034em .046em 0 rgba(16,10,4,.66),0 0 .48em rgba(240,200,121,.15)}
.wm-sub{display:block;margin-top:.72em;font-family:var(--sans);font-weight:700;
  font-size:clamp(.78rem,2vw,1.02rem);letter-spacing:.32em;text-transform:uppercase;color:#efe0c2;
  text-shadow:0 2px 0 rgba(16,10,4,.5)}
@media (max-width:420px){.wm-sub{letter-spacing:.2em}}
.wordmark .glow{left:-14%;top:-16%;width:128%;height:140%}

/* ---- Galerie: Fotos aus dem Google-Eintrag ---- */
.gal{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.6vw,20px);margin-top:clamp(26px,3.4vw,44px)}
.gal--quad{grid-template-columns:repeat(3,1fr)}
.gal--quad figure{grid-column:auto!important;aspect-ratio:1/1!important}
@media (max-width:820px){.gal--quad{grid-template-columns:repeat(2,1fr)}}
.ig-link{color:var(--gold-lt);text-underline-offset:3px}
.gal figure{position:relative;margin:0;overflow:hidden;border-radius:16px 5px 17px 6px;background:var(--wood)}
.gal picture{display:block;width:100%;height:100%}
.gal img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);
  filter:brightness(.86) contrast(1.04) saturate(.92)}
/* weiche Kante nach innen, damit die Kacheln im Schwarz sitzen statt darauf zu liegen */
.gal figure::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  box-shadow:inset 0 0 46px 12px rgba(7,6,5,.55),inset 0 0 0 1px rgba(240,200,121,.14);border-radius:inherit}
@media (hover:hover) and (pointer:fine){.gal figure:hover img{transform:scale(1.03)}}
.gal figure{aspect-ratio:4/3}
.gal .g-a{grid-column:span 7;aspect-ratio:4/3}
.gal .g-b{aspect-ratio:1/1}
.gal .g-d{aspect-ratio:16/9}
.gal .g-b{grid-column:span 5}
.gal .g-c{grid-column:span 6}
.gal .g-d{grid-column:span 6}
@media (max-width:820px){.gal .g-a,.gal .g-b{grid-column:span 12}.gal .g-c,.gal .g-d{grid-column:span 6}}
@media (max-width:520px){.gal figure{grid-column:span 12 !important}}
.hero-facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.fact{font-size:.87rem;font-weight:500;letter-spacing:.02em;border:1.5px solid rgba(240,200,121,.42);border-radius:999px;padding:7px 15px;color:#efe3cc}
.rate-chip{display:inline-flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:14px;font-size:.84rem;color:#ddcdb1}
.rate-chip b{font-family:var(--display);font-weight:800;font-size:1.28rem;color:var(--gold-lt);letter-spacing:.01em}
.rate-chip .st{color:var(--gold-lt);letter-spacing:.1em;font-size:.9rem}
.status{display:inline-flex;align-items:flex-start;gap:12px;background:rgba(20,13,7,.42);border:1.5px solid rgba(240,200,121,.34);border-radius:18px 6px 18px 8px;padding:14px 20px;max-width:34ch}
.status .dot{width:10px;height:10px;border-radius:50%;background:var(--gold-lt);margin-top:8px;flex:none;box-shadow:0 0 0 4px rgba(240,200,121,.18)}
.status.zu .dot{background:#c98a86}
.status b{display:block;font-family:var(--display);font-weight:700;font-size:1.12rem;line-height:1.2}
.status span{font-size:.86rem;color:#ddcdb1}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.hero-side{padding-bottom:8px}
.hero-shot{position:relative;margin-top:clamp(44px,6vw,74px);padding-bottom:clamp(44px,6vw,74px)}
.hero-shot figure{position:relative;transform:rotate(-.45deg)}
.hs-img{position:relative;display:block}
.hero-shot picture{display:block}
.hero-shot img{width:100%;border-radius:20px 7px 22px 9px;box-shadow:0 20px 60px rgba(10,6,2,.45)}
.hero-shot figcaption{margin-top:14px;font-size:.84rem;color:#d8c9ae;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.hero-shot figcaption b{font-family:var(--display);font-style:italic;font-weight:700;color:var(--gold-lt);font-size:.95rem}
.sticker{position:absolute;z-index:4;background:var(--burg);color:var(--creme);font-family:var(--display);font-style:italic;font-weight:700;border-radius:999px;padding:9px 19px;font-size:.92rem;box-shadow:0 3px 0 rgba(20,13,7,.55);transform:rotate(-2deg)}
.sticker--gold{background:var(--gold);color:#241a12;transform:rotate(1.5deg)}
/* schmale Schirme: Sticker rutscht ins Bild, sonst deckt er die Bildunterschrift zu */
@media (max-width:760px){
  /* die Sticker liegen sonst mitten im Ladenschild */
  .hero-shot .sticker{display:none}
}

/* ---------- Marquee ---------- */
.mq{background:var(--burg);color:var(--creme);overflow:hidden;border-top:1px solid rgba(0,0,0,.5);border-bottom:1px solid rgba(0,0,0,.5)}
.mq-track{display:flex;width:max-content;animation:mq 34s linear infinite;padding:10px 0}
.mq span{font-family:var(--display);font-weight:700;font-style:italic;font-size:1.02rem;letter-spacing:.05em;white-space:nowrap;padding:0 .85em}
.mq .sep{font-style:normal;color:var(--gold-lt);font-size:.8rem}
@keyframes mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none!important}}

/* ---------- Leistungen ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px);margin-top:clamp(34px,4vw,56px);align-items:start}
@media (max-width:980px){.cards{grid-template-columns:1fr;gap:12px}}
.card{background:var(--paper-2);border:1px solid var(--line);border-radius:16px 5px 16px 5px;overflow:hidden}
.card summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:12px;
  padding:22px 24px;min-height:60px}
.card summary::-webkit-details-marker{display:none}
.card summary h3{margin:0;font-size:clamp(1.35rem,2.4vw,1.7rem)}
.card summary .mini{font-size:.82rem;letter-spacing:.02em;color:#a9997f;
  color:#a1927b;color:color-mix(in oklab,var(--ink) 62%,var(--paper));margin-right:auto}
.card summary i{flex:none;width:11px;height:11px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s var(--ease);align-self:center}
.card[open] summary i{transform:rotate(-135deg) translate(-3px,-3px)}
.card summary:hover .mini{color:var(--gold-lt)}
.card-in{padding:0 24px 24px}
.card ul{list-style:none;border-top:1px solid var(--line);padding-top:4px}
.card ul+.sub{margin-top:18px}
.card li{font-size:.95rem;padding:9px 0 9px 20px;border-bottom:1px solid #221d1a;border-bottom:1px solid color-mix(in oklab,var(--line) 62%,transparent);position:relative}
.card li:last-child{border-bottom:none}
.card li::before{content:"";position:absolute;left:2px;top:18px;width:7px;height:2px;background:var(--gold)}
.card li small{display:block;font-size:.8rem;color:#a9997f;color:color-mix(in oklab,var(--ink) 66%,var(--paper))}
/* ab Tablet immer offen — das Aufklappen ist eine reine Handy-Hilfe */
@media (max-width:980px){.card:not([open]) .card-in{display:none}}
/* ab Tablet sind alle Listen offen — der Pfeil waere dort sinnlos */
@media (min-width:981px){
  .card summary{cursor:default;padding-bottom:14px}
  .card summary i{display:none}
}
.card .sub{margin-top:18px;font-size:.81rem;text-transform:uppercase;letter-spacing:.14em;font-weight:600;color:var(--gold)}
.note{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;margin-top:clamp(16px,2vw,24px);background:var(--paper-2);border:1.5px dashed var(--burg);border-radius:6px 20px 8px 20px;padding:24px 26px}
.note .tag{font-family:var(--display);font-weight:800;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;background:var(--burg);color:var(--creme);padding:6px 12px;border-radius:999px;white-space:nowrap}
.note p{font-size:.96rem;max-width:62ch}
.note p+p{margin-top:.5em}
@media (max-width:640px){.note{grid-template-columns:1fr}}

/* ---------- Bart ---------- */
.bart-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:start}
@media (max-width:900px){.bart-grid{grid-template-columns:1fr;gap:26px}}
.bart-grid .steps{margin-top:0}
.shot{position:relative}
.shot img{width:100%;border-radius:18px 6px 20px 8px;filter:brightness(.88) contrast(1.03) saturate(.93)}
/* Handyfotos haben ausgebrannte Decken — oben ein Hauch Holzton, damit die Kante nicht sticht */
.shot picture,.shot>img{position:relative}
.shot .fr{position:relative;display:block;border-radius:18px 6px 20px 8px;overflow:hidden}
.shot .fr::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(rgba(51,33,15,.34),rgba(51,33,15,.05) 26%,transparent 46%)}
.shot--small .fr{border-radius:8px 18px 7px 20px}
.shot figcaption{margin-top:12px;font-size:.82rem;color:#d6c7ab}
.shot--small{width:66%;margin:26px 0 0 auto;transform:rotate(1.4deg)}
.shot--small img{border-radius:8px 18px 7px 20px}
.shot--small figcaption{text-align:right}
@media (max-width:900px){.shot--small{width:78%;transform:rotate(1deg)}}
.steps{list-style:none;margin-top:28px}
.steps li{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:16px 0;border-top:1px solid var(--line-2)}
.steps li:last-child{border-bottom:1px solid var(--line-2)}
.steps .num{font-family:var(--display);font-weight:800;font-size:1.05rem;color:var(--gold-lt);padding-top:2px}
.steps b{font-family:var(--display);font-weight:700;font-size:1.16rem;display:block;line-height:1.2}
.steps span{font-size:.92rem;color:#ddcdb1;color:color-mix(in oklab,var(--creme) 84%,var(--wood))}

/* ---------- Laden / Zitat ---------- */
.duo{display:grid;grid-template-columns:1.24fr .76fr;gap:24px;margin-top:clamp(34px,4vw,52px);align-items:start}
@media (max-width:820px){.duo{grid-template-columns:1fr}}
.duo .txt{font-size:.95rem;margin-top:16px;max-width:36ch;color:#cfc2ac;color:color-mix(in oklab,var(--ink) 84%,var(--paper))}
.frame{position:relative;border-radius:20px 8px 18px 10px;overflow:hidden;background:var(--wood)}
.frame img{width:100%;filter:brightness(.86) contrast(1.04) saturate(.92)}
.frame::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  box-shadow:inset 0 0 46px 12px rgba(7,6,5,.5),inset 0 0 0 1px rgba(240,200,121,.14);border-radius:inherit}
.frame figcaption{z-index:2}
.frame figcaption{position:absolute;left:0;right:0;bottom:0;padding:52px 20px 16px;font-size:.85rem;line-height:1.5;color:#f7f1e4;
  background:linear-gradient(transparent,rgba(20,13,7,.62) 34%,rgba(20,13,7,.93))}
.pull{font-family:var(--display);font-weight:700;font-style:italic;font-size:clamp(1.5rem,3.4vw,2.5rem);line-height:1.16;max-width:20ch;letter-spacing:-.01em}
.pull-src{margin-top:14px;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--gold)}

/* ---------- Zeiten ---------- */
.hours{width:100%;border-collapse:collapse;margin-top:30px;font-variant-numeric:tabular-nums}
.hours caption{text-align:left;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--gold);padding-bottom:12px}
.hours th{text-align:left;font-weight:500;font-size:1.02rem;padding:13px 6px;border-bottom:1px solid var(--line)}
.hours td{text-align:right;padding:13px 6px;border-bottom:1px solid var(--line);font-weight:500}
.hours tr:last-child th,.hours tr:last-child td{border-bottom:none}
.hours tr.heute th,.hours tr.heute td{background:rgba(240,200,121,.10);font-weight:700}
.hours tr.heute th{border-left:4px solid var(--gold);padding-left:12px}
.hours tr.zu td{color:#9a8b74;color:color-mix(in oklab,var(--ink) 70%,var(--paper));font-weight:400}
.hours .tag-heute{font-family:var(--display);font-style:italic;font-weight:700;font-size:.8rem;color:var(--gold-lt);margin-left:10px}
.zeiten-grid{display:grid;grid-template-columns:1.09fr .91fr;gap:clamp(30px,5vw,70px);align-items:start}
@media (max-width:880px){.zeiten-grid{grid-template-columns:1fr}}
.panel{background:var(--paper-2);border:1px solid var(--line);border-radius:6px 20px 8px 20px;padding:clamp(24px,3vw,34px)}
.big-tel{font-family:var(--display);font-weight:800;font-size:clamp(1.85rem,4.4vw,2.9rem);line-height:1.05;text-decoration:none;display:inline-block;letter-spacing:-.01em}
.big-tel:hover{color:var(--burg)}
.zeiten-extra{display:flex;gap:18px;align-items:flex-start;margin-top:26px;padding:0 6px}
.zeiten-extra .chip{font-family:var(--display);font-style:italic;font-weight:700;font-size:.95rem;background:var(--gold);color:#241a12;border-radius:999px;padding:9px 19px;white-space:nowrap;transform:rotate(-2.5deg);box-shadow:0 2px 0 rgba(0,0,0,.55)}
.zeiten-extra p{font-size:.94rem;max-width:32ch;color:#c9bca6;color:color-mix(in oklab,var(--ink) 82%,var(--paper))}
@media (max-width:520px){.zeiten-extra{flex-direction:column;gap:12px}}

/* ---------- Stimmen ---------- */
.rating{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-top:8px}
.rating .score{font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,6vw,4rem);line-height:1;color:var(--gold-lt)}
.rating .stars{letter-spacing:.14em;color:var(--gold-lt);font-size:1.1rem}
.rating .meta{font-size:.9rem;color:#ddcdb1}
.rating a{color:var(--gold-lt)}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:clamp(34px,4vw,52px);align-items:start}
@media (max-width:940px){.quotes{grid-template-columns:1fr}}
.q{background:rgba(247,241,228,.055);border:1px solid var(--line-2);border-radius:20px 7px 18px 9px;padding:24px 22px 22px;display:flex;flex-direction:column;gap:12px}
/* Versatz über margin, nicht transform — der Reveal-Tween würde ein transform überschreiben */
.quotes .q:nth-child(2){margin-top:26px}
.quotes .q:nth-child(3){margin-top:11px}
@media (max-width:940px){.quotes .q:nth-child(2),.quotes .q:nth-child(3){margin-top:0}}
.q blockquote{font-family:var(--display);font-style:italic;font-weight:700;font-size:1.16rem;line-height:1.32}
.q .who{font-size:.84rem;color:#d8c9ae;letter-spacing:.04em}
.q .reply{border-left:2.5px solid var(--gold);padding-left:12px;font-size:.88rem;color:#e6d8c0}
.q .reply b{font-family:var(--display);font-weight:700;font-style:italic}

/* ---------- Kontakt ---------- */
.kontakt-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(30px,5vw,64px);align-items:start}
@media (max-width:880px){.kontakt-grid{grid-template-columns:1fr}}
.adr{font-style:normal;font-size:1.12rem;line-height:1.75;margin-top:26px}
.adr strong{font-family:var(--display);font-weight:700;font-size:1.3rem;display:block}
.wayfind{list-style:none;margin-top:24px}
.wayfind li{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);font-size:.96rem}
.wayfind li:last-child{border-bottom:none}
.wayfind .ubahn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;background:#0d3b8c;color:#fff;font-weight:700;font-size:.9rem;border-radius:3px;font-family:var(--sans);margin-top:3px}
.wayfind .badge{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;background:var(--ink);color:var(--paper);font-weight:700;font-size:.9rem;border-radius:3px;margin-top:3px}
.wayfind .ico{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--ink);border-radius:8px 3px 8px 4px;margin-top:3px;color:var(--ink)}
.mapcard .facts{list-style:none;margin-top:18px;border-top:1px solid rgba(240,200,121,.28);padding-top:6px}
.mapcard .facts li{display:flex;justify-content:space-between;gap:14px;font-size:.9rem;padding:7px 0;border-bottom:1px solid rgba(240,200,121,.16)}
.mapcard .facts li:last-child{border-bottom:none}
.mapcard .facts b{font-family:var(--display);font-weight:700;color:var(--gold-lt);white-space:nowrap}
.mapcard{background:var(--paper-2);border:1px solid var(--line);border-radius:10px 24px 10px 24px;padding:22px 22px 20px;color:var(--creme)}
.mapcard svg{width:100%;height:auto;display:block;border-radius:8px}
.mapcard .hint{font-size:.78rem;color:#c8b89c;margin-top:12px}
.mapcard .btn{margin-top:14px}

/* ---------- Footer ---------- */
footer{background:var(--wood);color:var(--creme);padding:56px 24px 44px;border-top:1px solid var(--line)}
footer .wrap{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:26px}
@media (max-width:820px){footer .wrap{grid-template-columns:1fr;gap:22px}}
footer a{color:var(--creme)}
footer .fbrand{font-family:var(--display);font-weight:800;font-size:1.5rem;text-transform:uppercase}
footer .fbrand span{color:var(--gold)}
footer h4{font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:#c3ae8c;margin-bottom:10px;font-weight:600}
footer p,footer li{font-size:.92rem;line-height:1.7}
footer ul{list-style:none}
footer li a{display:inline-block;padding:11px 0}
footer .ph{font-size:.8rem;color:#c3ae8c;font-style:italic}
.legal{max-width:1240px;margin:34px auto 0;padding-top:18px;border-top:1px solid rgba(243,234,217,.18);font-size:.78rem;color:#c3ae8c;display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between}

/* ---------- Mobile Call-Bar ---------- */
.callbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:120;background:var(--burg);border-top:1px solid rgba(0,0,0,.5)}
.callbar a{display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;color:var(--creme);text-decoration:none;font-weight:600;letter-spacing:.02em}
.callbar b{font-family:var(--display);font-weight:800;font-size:1.1rem}
@media (max-width:760px){.callbar{display:block}body{padding-bottom:60px}}

/* Reveals sind Zugabe, kein Grundzustand: ohne JS ist alles sichtbar */
[data-reveal]{opacity:1}
html.js [data-reveal]{opacity:0;transform:translateY(20px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
html.js [data-reveal].sichtbar{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.js [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
}

/* Wortmarke faehrt per CSS hoch — vorher machte das GSAP mit Zeichen-Zerlegung */
html.js .wordmark .row{overflow:hidden}
html.js .wm-line{transform:translateY(104%);animation:wmauf .85s var(--ease) forwards}
html.js .row:nth-of-type(2) .wm-line{animation-delay:.10s}
html.js .wm-sub{opacity:0;animation:wmein .7s var(--ease) .45s forwards}
html.js .glow{opacity:0;animation:glimm 1.5s var(--ease) .35s forwards}
@keyframes glimm{0%{opacity:0}22%{opacity:.35}34%{opacity:.05}48%{opacity:.6}60%{opacity:.15}100%{opacity:1}}
@keyframes wmauf{to{transform:translateY(0)}}
@keyframes wmein{to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  html.js .wm-line{transform:none;animation:none}
  html.js .wm-sub{opacity:1;animation:none}
}

/* ============ Mehrseiten-Fassung ============ */
/* Kompakter Kopf der Unterseiten */
.seitenkopf{padding-top:clamp(46px,6vw,86px);padding-bottom:0}
.seiten-h1{font-family:var(--display);font-weight:800;font-size:clamp(2.1rem,5.4vw,3.9rem);
  line-height:1.02;letter-spacing:-.014em;max-width:16ch;margin:.34em 0 0}
.seiten-h1 em{font-style:italic;font-weight:700;color:#b0514c;color:var(--burg-lt)}
.seitenkopf .lead{margin-top:1em}
.dark .seiten-h1 em{color:#f0c879;color:var(--gold-lt)}

/* aktiver Navigationspunkt */
.nav-links a[aria-current="page"]{color:#f0c879;color:var(--gold-lt)}
.nav-links a[aria-current="page"]::after{right:0}
.mobile-menu a[aria-current="page"]{color:#f0c879;color:var(--gold-lt)}

/* Einstiegskacheln auf der Startseite */
.wege{padding-top:clamp(48px,6vw,92px)}
.kacheln{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.5vw,20px)}
@media (max-width:980px){.kacheln{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.kacheln{grid-template-columns:1fr}}
.kachel{display:flex;flex-direction:column;gap:8px;text-decoration:none;position:relative;
  background:#151110;background:var(--paper-2);border:1px solid #2c2522;border:1px solid var(--line);
  border-radius:16px 5px 16px 5px;padding:26px 24px 58px;min-height:190px;
  transition:border-color .25s var(--ease),transform .25s var(--ease),background .25s var(--ease)}
.kachel:hover{border-color:#c08628;border-color:var(--gold);transform:translateY(-3px)}
.k-num{font-family:var(--display);font-weight:800;font-size:.82rem;letter-spacing:.14em;
  color:#c08628;color:var(--gold)}
.k-titel{font-family:var(--display);font-weight:800;font-size:clamp(1.4rem,2.5vw,1.85rem);line-height:1.05}
.k-text{font-size:.93rem;line-height:1.5;color:#cfc2ac;color:color-mix(in oklab,var(--ink) 84%,var(--paper))}
.k-pfeil{position:absolute;left:24px;bottom:24px;width:26px;height:9px}
.k-pfeil::before{content:"";position:absolute;left:0;top:4px;width:26px;height:1.5px;
  background:#c08628;background:var(--gold);transition:width .25s var(--ease)}
.k-pfeil::after{content:"";position:absolute;right:0;top:0;width:9px;height:9px;
  border-right:1.5px solid #c08628;border-top:1.5px solid #c08628;
  border-right-color:var(--gold);border-top-color:var(--gold);transform:rotate(45deg)}
.kachel:hover .k-pfeil::before{width:38px}
@media (max-width:760px){.kachel{padding:22px 20px 52px;min-height:0}}

/* Galerie ohne Bildunterschriften: reine Bildflaeche */
.gal--quad figure{border-radius:14px 4px 14px 4px}


/* Doppelte Abstaende vermeiden: der Seitenkopf traegt den oberen Abstand,
   die folgende Sektion setzt oben nur noch einen kleinen Rest. */
.seitenkopf{padding-bottom:clamp(26px,3vw,40px)}
.seitenkopf + section{padding-top:clamp(18px,2.4vw,34px)}
.wege{padding-bottom:clamp(34px,4vw,56px)}
.wege + section{padding-top:clamp(40px,5vw,72px)}

/* ---- Schnitte-Vorschau auf der Startseite ---- */
.schnitte{padding-bottom:clamp(46px,5vw,78px)}
.vorschau{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,18px);
  margin-top:clamp(26px,3.4vw,44px)}
@media (max-width:860px){.vorschau{grid-template-columns:repeat(2,1fr)}}
.vorschau-bild{display:block;position:relative;overflow:hidden;aspect-ratio:1/1;
  border-radius:14px 4px 14px 4px;background:#070605;background:var(--wood)}
.vorschau-bild picture{display:block;width:100%;height:100%}
.vorschau-bild img{display:block;width:100%;height:100%;object-fit:cover;
  filter:brightness(.86) contrast(1.04) saturate(.92);transition:transform .6s var(--ease)}
.vorschau-bild::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 40px 10px rgba(7,6,5,.5),inset 0 0 0 1px rgba(240,200,121,.14);border-radius:inherit}
@media (hover:hover) and (pointer:fine){.vorschau-bild:hover img{transform:scale(1.04)}}
.vorschau-mehr{margin-top:clamp(22px,2.6vw,34px)}


/* ══════════════════════════════════════════════════════════════════
   DIE WAND - 24 echte Schnitte in drei Spalten mit unterschiedlichem
   Tempo. Jedes Bild ist ein Knopf und oeffnet die Grossansicht.
   ══════════════════════════════════════════════════════════════════ */
.wand{position:relative;margin:clamp(18px,3vw,34px) 0 0;
  height:clamp(430px,66vh,660px);overflow:hidden;
  -webkit-mask-image:linear-gradient(transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(transparent,#000 8%,#000 92%,transparent)}
.wand-lauf{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(8px,1.2vw,16px);height:100%;align-items:start}
.wand-spalte{display:grid;gap:clamp(8px,1.2vw,16px);
  transform:translate3d(0,var(--v,0px),0);will-change:transform}
.wand-bild{display:block;padding:0;border:0;background:none;cursor:pointer;
  overflow:hidden;line-height:0;position:relative}
.wand-bild img{width:100%;height:auto;display:block;
  filter:saturate(.9) contrast(1.04);
  transition:transform .5s var(--ease,ease-out),filter .5s var(--ease,ease-out)}
.wand-bild:hover img,.wand-bild:focus-visible img{transform:scale(1.045);
  filter:saturate(1.02) contrast(1.06)}
.wand-bild:focus-visible{outline:2px solid var(--gold,#e8b24a);outline-offset:3px}
@media(max-width:700px){
  .wand{height:clamp(370px,60vh,500px)}
  .wand-lauf{grid-template-columns:repeat(2,1fr)}
  .wand-spalte:nth-child(3){display:none}
}
.wand-fuss{margin:clamp(14px,2vw,22px) 0 0;font-size:14px;max-width:66ch;opacity:.72}
.wand-fuss a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* Grossansicht */
.lupe{position:fixed;inset:0;z-index:120;display:grid;
  grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(6px,2vw,24px);
  padding:clamp(12px,3vw,40px);background:rgba(8,6,5,.94)}
.lupe[hidden]{display:none}
.lupe-buehne{margin:0;display:grid;justify-items:center;gap:.9em;min-width:0}
.lupe-buehne img{max-width:100%;max-height:78vh;width:auto;height:auto;display:block}
.lupe-buehne figcaption{font-size:13.5px;letter-spacing:.06em;opacity:.72}
.lupe-nav,.lupe-zu{background:none;border:0;color:#f2e8d6;cursor:pointer;
  font-size:clamp(30px,5vw,52px);line-height:1;padding:.25em .45em;
  transition:opacity .25s,transform .25s}
.lupe-nav:hover,.lupe-zu:hover{opacity:.6;transform:scale(1.08)}
.lupe-zu{position:absolute;top:clamp(8px,2vw,22px);right:clamp(10px,2.5vw,30px);
  font-size:clamp(26px,4vw,40px)}
.lupe-nav:focus-visible,.lupe-zu:focus-visible{outline:2px solid var(--gold,#e8b24a);outline-offset:3px}
@media(max-width:640px){
  .lupe{grid-template-columns:1fr;grid-template-rows:1fr auto}
  .lupe-buehne{grid-row:1}
  .lupe-vor{grid-row:2;justify-self:start}
  .lupe-zur{grid-row:2;justify-self:end}
  .lupe-buehne img{max-height:66vh}
}

/* ══════════════════════════════════════════════════════════════════
   DER SCHRIFTZUG GEHT AN. Wie das echte Schild an der Turmstrasse:
   erst dunkel, dann zuendet das Licht dahinter, zweimal kurz gezuckt,
   dann steht es. Laeuft genau einmal beim Laden.
   ══════════════════════════════════════════════════════════════════ */
.hero h1{position:relative}
.hero h1::before{content:"";position:absolute;inset:-12% -7%;z-index:-1;
  pointer-events:none;border-radius:50%;
  background:radial-gradient(58% 54% at 50% 50%,rgba(232,178,74,.5),rgba(232,178,74,0) 72%);
  opacity:0;filter:blur(12px)}
.anschalten h1{animation:letternAn 2.1s var(--ease,ease-out) .3s both}
.anschalten h1::before{animation:lichtAn 2.1s var(--ease,ease-out) .3s both}
@keyframes letternAn{
  0%{opacity:.36;filter:brightness(.52)}
  22%{opacity:1;filter:brightness(1.22)}
  30%{opacity:.46;filter:brightness(.62)}
  46%{opacity:1;filter:brightness(1.28)}
  56%{opacity:.72;filter:brightness(.86)}
  100%{opacity:1;filter:brightness(1)}
}
@keyframes lichtAn{
  0%{opacity:0}22%{opacity:.85}30%{opacity:.16}
  46%{opacity:1}56%{opacity:.5}100%{opacity:.7}
}
@media (prefers-reduced-motion:reduce){
  .anschalten h1,.anschalten h1::before{animation:none}
  .anschalten h1::before{opacity:.7}
  .wand-spalte{transform:none!important}
  .wand-bild img{transition:none}
}