/* San Marco — Studio-Fassung
   Dunkler Grund, Gold, Ziegel. Cinzel für die Display, Work Sans für den Rest.
   Alles Sichtbare steht ohne JavaScript — JS fügt nur Bewegung hinzu.

   Palette aus demos/san-marco/palette.json, gemessen aus den Ladenfotos:
   --ink      #141414  dominantester Ton in vier von fünf Innenaufnahmen
   --warm     #281414  derselbe Ton mit dem Rotstich des Ziegels
   --ziegel   #503C3C  Wand hinter dem Leuchtschriftzug
   --holz     #64503C  Stühle, Vertäfelung, Rahmen
   --gold     #D89C48  der Leuchtschriftzug „SAN MARCO" über der Tür
   --goldhell #E4A854  angestrahlte Kante
   --rosso    #A82737  Markenrot der alten Website (nur Fläche/Linie, nie Text)
   --paper    #F2EDE4  Papier/Putz
   --muted    #A6988A  gedämpft
*/

:root {
  --ink:      #141414;
  --warm:     #281414;
  --ziegel:   #503C3C;
  --holz:     #64503C;
  --gold:     #D89C48;
  --goldhell: #E4A854;
  --rosso:    #A82737;
  --paper:    #F2EDE4;
  --muted:    #A6988A;

  --serif: 'Cinzel', Georgia, serif;
  --sans:  'Work Sans', system-ui, sans-serif;

  --maxw: 1700px;
  --pad:  clamp(1.5rem, 5vw, 4rem);
  --header-clearance: clamp(4.75rem, 6vw, 5.25rem);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { background: var(--ink); }

body {
  font-family: var(--sans);
  cursor: default;
  font-weight: 300;
  color: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--warm) 0%, var(--ink) 55%);
}

::selection { background: var(--gold); color: var(--ink); }

/* ---------- Hintergrund-Ebenen ---------- */

#glut {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.grain {
  position: fixed;
  inset: -50%;
  z-index: 3;
  pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 9s steps(6) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0) }
  20% { transform: translate(-3%,2%) }
  40% { transform: translate(2%,-3%) }
  60% { transform: translate(-2%,-2%) }
  80% { transform: translate(3%,3%) }
}

main, footer.fuss { position: relative; z-index: 2; }

/* ---------- Kopf ---------- */

.top {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem var(--pad);
  mix-blend-mode: difference;
  transition: opacity .25s ease, transform .3s cubic-bezier(.16,1,.3,1),
              background-color .25s ease;
}

/* Über der Titelkarte darf der Kopf blank stehen — dort liegt nur Video
   hinter ihm. Sobald gescrollt wird, laufen Zeilen unter ihm durch, und
   Wortmarke und Menüknopf brauchen einen eigenen Grund, sonst schneiden
   sie sich mit der Schrift. Der Differenzmodus muss dafür weichen: er
   rechnet gegen den Untergrund, nicht gegen die eigene Fläche. */
html.kopf-grund .top { mix-blend-mode: normal; }

/* Der Schleier liegt in einer eigenen Ebene, nicht auf dem Kopf selbst:
   so kann er nach unten auslaufen, ohne Wortmarke und Menüknopf mit
   auszublenden. Deckend war er eine schwarze Platte über einem warmen
   Abschnitt — es reicht, den Untergrund weichzuzeichnen und leicht
   abzudunkeln, damit die Schrift darüber steht. */
html.kopf-grund .top::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(18,18,18,.7), rgba(18,18,18,.3));
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  backdrop-filter: blur(16px) saturate(125%);
  -webkit-mask-image: linear-gradient(180deg, #000 68%, rgba(0,0,0,0));
  mask-image: linear-gradient(180deg, #000 68%, rgba(0,0,0,0));
}
/* Der Schleier ist absolut positioniert und läge damit über den statischen
   Kindern — Wortmarke und Knöpfe müssen darüber. */
.top > * { position: relative; z-index: 1; }
/* Weicher Schatten statt mehr Fläche: hält die Schrift auch dann, wenn eine
   helle Fläche der Seite unter dem Kopf durchläuft. */
html.kopf-grund .wortmarke,
html.kopf-grund .top-nav a { text-shadow: 0 1px 10px rgba(0,0,0,.62); }

/* Bei offenem Menü deckt die Tafel schon alles ab. */
html.menu-offen .top { mix-blend-mode: normal; }
html.menu-offen .top::before { display: none; }

/* Solange die Kapitelleiste oben klebt, gehört der Rand ihr allein. */
html.karte-oben .top { opacity: 0; transform: translateY(-100%); pointer-events: none; }
html.karte-oben.menu-offen .top { opacity: 1; transform: none; pointer-events: auto; }

.wortmarke {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--paper);
  text-decoration: none;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.top-nav {
  display: flex;
  gap: 2.2rem;
}
.top-nav a {
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid rgba(242,237,228,.14);
  padding-bottom: .2em;
  transition: border-color .3s;
}
.top-nav a:hover { border-color: var(--gold); }
@media (max-width: 720px) {
  /* Kompakter Kopf am Telefon: die klebende Kapitelleiste rückt dadurch
     spürbar weiter nach oben. */
  .top { padding: 1rem var(--pad); }
  .top-nav { display: none; }
  .top-menu-toggle { display: flex; }
}
@media (max-width: 480px) {
  .tel-pill { display: none; }
  .title-card-index { top: 7.1rem; right: var(--pad); }
}

.tel-pill {
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  background: var(--gold);
  padding: .7em 1.3em;
  transition: background .3s;
  white-space: nowrap;
}
.tel-pill:hover { background: var(--goldhell); }

.top-aktionen { display: flex; align-items: center; gap: .75rem; }
.top-menu-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
  color: var(--paper);
  background: transparent;
  border: 1px solid rgba(242,237,228,.34);
  cursor: pointer;
  touch-action: manipulation;
}
.top-menu-toggle span { display: block; width: 20px; height: 1px; background: currentColor; transition: transform .28s ease, opacity .2s ease; }
.top-menu-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; background: transparent; }
.menu-offen .top-menu-toggle span:first-child { transform: translateY(3px) rotate(45deg); }
.menu-offen .top-menu-toggle span:last-child { transform: translateY(-3px) rotate(-45deg); }
.mobile-menu {
  position: fixed; inset: 0; z-index: 9; display: flex; flex-direction: column; justify-content: space-between;
  padding: 7rem var(--pad) max(2rem, env(safe-area-inset-bottom));
  /* Deckend plus Weichzeichner: bei .97 schimmerten die Kennzahlen der Seite
     durch die Menüzeilen. */
  background: rgba(16,16,16,.985); color: var(--paper);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-10px);
  transition: opacity .28s ease, visibility .28s ease, transform .35s cubic-bezier(.16,1,.3,1);
}
html.menu-offen { overflow: hidden; }
.menu-offen .mobile-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.mobile-menu nav { display: flex; flex-direction: column; }
.mobile-menu nav a { display: flex; align-items: baseline; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid rgba(242,237,228,.16); font-family: var(--serif); font-size: clamp(2rem, 8vw, 3rem); color: var(--paper); text-decoration: none; }
.mobile-menu nav a span { color: var(--gold); font-family: var(--sans); font-size: .62rem; letter-spacing: .2em; }
.mobile-menu__cta { display: block; padding: 1.1rem; background: var(--gold); color: var(--ink); text-align: center; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; }
.mobile-menu a { touch-action: manipulation; }
@media (max-width: 720px) { .top-menu-toggle { display: flex; } }

/* ---------- Typo-Werkzeug ---------- */

.display {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: .01em;
  overflow-wrap: break-word;
  hyphens: manual;
}

.eyebrow {
  font-size: .68rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--muted);
}
.eyebrow.num { color: var(--gold); }

em { font-style: italic; }

/* ---------- 00 Hero ---------- */

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 var(--pad);
  padding-bottom: 3.5rem;
  position: relative;
  overflow: hidden;
}

.hero-bild {
  position: absolute;
  inset: 0;
  z-index: 0;
  will-change: transform;
}
/* Dieselbe Regel wie im Kino: Poster und Clip liegen übereinander.
   Ohne position:absolute rutscht das angehängte <video> unter das Bild. */
.hero-bild img,
.hero-bild video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(.62) contrast(1.08) saturate(.9);
}
.hero-bild video { z-index: 1; }

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg,
    rgba(20,20,20,.95) 0%,
    rgba(20,20,20,.78) 44%,
    rgba(20,20,20,.25) 78%,
    transparent 92%);
}
@media (max-width: 639px) {
  .hero-scrim {
    background: linear-gradient(0deg,
      rgba(20,20,20,.97) 0%,
      rgba(20,20,20,.93) 46%,
      rgba(20,20,20,.7) 64%,
      rgba(20,20,20,.28) 80%,
      transparent 94%);
  }
}

.title-card-index {
  position: absolute; z-index: 2; top: 8.5rem; right: var(--pad);
  display: flex; align-items: center; gap: .8rem;
  color: var(--paper); font-size: .64rem; letter-spacing: .24em; text-transform: uppercase;
}
.title-card-index__number { color: var(--gold); font-family: var(--serif); font-size: 2rem; letter-spacing: 0; line-height: 1; }
.title-card-index__rule { width: 3.5rem; height: 1px; background: var(--gold); }
.title-card-index__label { color: rgba(242,237,228,.62); }

.hero-inhalt {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  width: 100%;
  margin: 0 auto;
}

.hero-titel {
  font-size: clamp(3rem, 13vw, 11rem);
  margin: .25em 0 .35em;
  line-height: .86;
}
.hero-titel .hz {
  display: block;
  overflow: hidden;
}
.hero-titel .hw {
  display: inline-block;
}
.hero-titel .hw.gold {
  color: var(--gold);
}

.hero-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1.5rem 3rem;
}

.jahre {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(3rem, 7vw, 5.5rem);
  line-height: 1;
  color: var(--gold);
  display: flex;
  align-items: baseline;
  gap: .4rem;
}
.jahre em {
  font-family: var(--sans);
  font-style: normal;
  font-size: .8rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero-sub {
  font-size: clamp(.9rem, 1.5vw, 1.15rem);
  color: rgba(242,237,228,.8);
  max-width: 26em;
  line-height: 1.6;
}

.scroll-hinweis {
  position: absolute;
  bottom: 2rem;
  right: var(--pad);
  z-index: 2;
  font-size: .66rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(242,237,228,.32);
  display: inline-flex;
  align-items: center;
  gap: .8em;
}
.scroll-hinweis i {
  display: block;
  width: 3.2em; height: 1px;
  background: var(--gold);
  transform-origin: 0 50%;
  animation: hint 2.4s ease-in-out infinite;
}
@keyframes hint {
  0%,100% { transform: scaleX(.35); opacity: .5 }
  50% { transform: scaleX(1); opacity: 1 }
}
@media (max-width: 639px) { .scroll-hinweis { display: none; } }

/* ---------- 01 Laufband ---------- */

.band {
  border-top: 1px solid rgba(242,237,228,.1);
  border-bottom: 1px solid rgba(242,237,228,.1);
  overflow: hidden;
  padding: 1rem 0;
  white-space: nowrap;
}
.band-lauf {
  display: inline-block;
  animation: band 28s linear infinite;
}
.band-lauf span {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: rgba(242,237,228,.35);
  margin-right: 2rem;
}
@keyframes band {
  from { transform: translateX(0) }
  to   { transform: translateX(-50%) }
}

/* ---------- 02 Manifest ---------- */

section { padding: clamp(5rem, 12vh, 9rem) var(--pad); }

.manifest { max-width: var(--maxw); margin: 0 auto; }

.manifest .gross {
  margin-top: 2rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 4vw, 3.2rem);
  line-height: 1.22;
  max-width: 22em;
  letter-spacing: .002em;
}
.manifest .gross em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold);
}
.manifest .gross .wd { display: inline-block; }

/* ---------- 03 Das Kino ----------
   Fünf bildschirmfüllende Szenen, gestapelt in einem Pin. Jede besitzt ein
   Fünftel des Scrollwegs; main.js blendet am Fortschritt über. Deckkraft
   liegt auf der Szene (dem Rahmen), nie auf dem Medium selbst — sonst
   stimmt der berechnete Wert und der Compositor malt trotzdem nichts. */

.kino-pin {
  height: 520svh;
  padding: 0;
  position: relative;
}

.kino-buehne {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}

.kino-szenen {
  display: grid;
  height: 100%;
}

/* will-change steht bewusst **nicht** hier, sondern setzt main.js auf die
   ein bis zwei Szenen, die gerade überblenden. Fest im Stylesheet hielte
   der Compositor sonst fünf bildschirmfüllende Ebenen dauerhaft im
   Speicher — auf einem Telefon rund 60 MB, neben sechs Videodecodern. */
.szene {
  grid-area: 1 / 1;
  position: relative;
  overflow: hidden;
  opacity: 0;
}
.szene:first-child { opacity: 1; }

/* z-index: 0 macht hier einen eigenen Stapelkontext auf. Ohne ihn wirkt das
   z-index:1 des Videos im Kontext der ganzen Szene — und legt sich damit über
   Scrim und Bildunterschrift, die beide auf auto stehen. Genau so ist die
   Beschriftung einmal komplett verschwunden. */
.szene-medium { position: absolute; inset: 0; z-index: 0; }
/* Poster und Video liegen **übereinander**, nicht hintereinander.
   Ohne position:absolute steht das per Skript angehängte <video> im
   normalen Fluss unter dem Posterbild — bei 900 px Rahmenhöhe also
   exakt 900 px zu tief und hinter overflow:hidden unsichtbar.
   Es lief dort einwandfrei, nur sah es niemand. */
.szene-medium img,
.szene-medium video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Das Video gehört über das Poster. */
.szene-medium video { z-index: 1; }

/* Noch nicht gedrehte Szenen: ruhige Glutfläche statt kaputtem Bildsymbol. */
.szene-medium.platzhalter {
  background:
    radial-gradient(60% 55% at 62% 42%, rgba(216,156,72,.16), transparent 68%),
    radial-gradient(80% 70% at 30% 78%, rgba(168,39,55,.13), transparent 70%),
    linear-gradient(158deg, #241a14 0%, #1a1512 46%, #141414 100%);
}

/* Text steht quer links, hochkant unten — derselbe Verlauf um 90° gedreht,
   nicht zweimal übereinander. */
.szene-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20,20,20,.94) 0%, rgba(20,20,20,.74) 42%, rgba(20,20,20,.22) 74%, transparent 92%);
}
@media (max-width: 767px) {
  .szene-scrim {
    background: linear-gradient(0deg, rgba(20,20,20,.97) 0%, rgba(20,20,20,.9) 38%, rgba(20,20,20,.6) 60%, rgba(20,20,20,.2) 80%, transparent 94%);
  }
  /* Hochkant sitzt der Text am unteren Rand — beim Teig steht dort aber das
     Motiv: Hände, Teig, Holz. Bei solchen Szenen zieht die Beschriftung nach
     oben in den leeren Raum, und der Verlauf dreht mit, sonst läge er auf der
     falschen Seite. */
  .szene[data-text="oben"] .szene-text {
    top: calc(var(--header-clearance) + 1.1rem);
    bottom: auto;
  }
  .szene[data-text="oben"] .szene-scrim {
    background: linear-gradient(180deg, rgba(20,20,20,.96) 0%, rgba(20,20,20,.88) 34%, rgba(20,20,20,.55) 56%, rgba(20,20,20,.18) 76%, transparent 92%);
  }
}

.szene-text {
  position: absolute;
  z-index: 2;
  left: var(--pad);
  right: var(--pad);
  bottom: clamp(4.5rem, 12vh, 9rem);
  max-width: 20em;
}

/* Die zweite Zeile kommt später als die Überschrift — erst wenn der
   Besucher ein Stück in der Szene steht. Sie trägt immer eine belegte
   Angabe, keine Werbezeile. */
.szene-detail {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(216,156,72,.35);
  font-size: .85rem;
  letter-spacing: .04em;
  line-height: 1.55;
  color: rgba(242,237,228,.9);
  max-width: 24em;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.6,0,.2,1);
}
.szene-detail b { font-weight: 400; color: var(--gold); }
.szene.detail-an .szene-detail { opacity: 1; transform: none; }
/* Ohne Bewegung und im Notfall steht sie sofort da. */
@media (prefers-reduced-motion: reduce) {
  .szene-detail { opacity: 1 !important; transform: none !important; }
}
html.notfall .szene-detail { opacity: 1 !important; transform: none !important; }
.szene-num {
  font-size: .68rem;
  letter-spacing: .34em;
  color: var(--gold);
  margin-bottom: .9rem;
}
.szene-text h3 {
  font-size: clamp(2.4rem, 6.5vw, 6rem);
  line-height: 1.02;
  color: var(--paper);
}
.szene-sub {
  margin-top: 1rem;
  font-size: clamp(.95rem, 1.4vw, 1.15rem);
  line-height: 1.6;
  color: rgba(242,237,228,.82);
  max-width: 26em;
}

/* Fortschritt: fünf Striche, der aktive füllt sich golden. */
.kino-fortschritt {
  position: absolute;
  right: var(--pad);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.kino-fortschritt span {
  display: block;
  width: 2px;
  height: 2.6rem;
  background: rgba(242,237,228,.16);
  position: relative;
  overflow: hidden;
}
.kino-fortschritt span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleY(var(--f, 0));
  transform-origin: 50% 0;
}
@media (max-width: 767px) {
  .kino-fortschritt {
    top: auto;
    bottom: 1.4rem;
    right: auto;
    left: var(--pad);
    transform: none;
    flex-direction: row;
  }
  .kino-fortschritt span { width: 2.2rem; height: 2px; }
  .kino-fortschritt span::after { transform: scaleX(var(--f, 0)); transform-origin: 0 50%; }
}

/* ---------- 04 Der Raum ---------- */

.raum { max-width: var(--maxw); margin: 0 auto; }

.raum .abschnitt {
  font-size: clamp(2.4rem, 7vw, 6rem);
  margin-top: .8rem;
  max-width: 14em;
}

.raum-reihe {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  perspective: 1200px;
}
@media (max-width: 860px) {
  .raum-reihe { grid-template-columns: 1fr; }
}

.kachel {
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform .5s ease-out;
}
.kachel img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  display: block;
  filter: brightness(.85) contrast(1.05);
  transition: filter .5s;
}
.kachel:hover img { filter: brightness(1) contrast(1.05); }
.kachel figcaption {
  margin-top: .8rem;
  font-size: .85rem;
  color: var(--muted);
}

/* Die dritte Kachel trägt kein Bild, sondern einen Satz. In der
   Kundenfassung stand hier das Wappentier des Hauses; auf einer
   Beispielseite gibt es keins, und ein erfundenes Wappen wäre genau die
   Sorte Detail, an der ein Interessent zu zweifeln anfängt. Der schwache
   Lichthof bleibt — er hebt die Kachel aus der Reihe der beiden Fotos. */
.kachel.spruch {
  background:
    radial-gradient(58% 46% at 50% 40%, rgba(216,156,72,.13), transparent 70%),
    var(--warm);
  border: 1px solid rgba(242,237,228,.08);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  aspect-ratio: 3/4;
}
.kachel.spruch .loewe-text {
  font-size: clamp(1.35rem, 2.1vw, 1.95rem);
  line-height: 1.35;
  color: var(--paper);
  margin-top: 0;
  max-width: 16em;
}
.kachel.spruch figcaption { margin-top: 0; }

/* ---------- 05 Stimmen ---------- */

.stimmen { max-width: var(--maxw); margin: 0 auto; }

.stimmen blockquote {
  margin-top: 2.5rem;
  border-left: 1px solid var(--gold);
  padding-left: 1.5rem;
  max-width: 36em;
}
.stimmen blockquote p {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  line-height: 1.4;
  color: var(--paper);
}
.stimmen blockquote footer {
  margin-top: 1.2rem;
  font-size: .85rem;
  color: var(--muted);
}
.stimmen blockquote footer a {
  color: var(--muted);
  text-decoration: underline;
  text-decoration-color: rgba(216,156,72,.5);
  text-underline-offset: 3px;
}
.stimmen blockquote footer a:hover { color: var(--paper); }

.zahlen {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  border-top: 1px solid rgba(242,237,228,.1);
  padding-top: 3rem;
}
@media (max-width: 720px) {
  .zahlen { grid-template-columns: 1fr; gap: 1.5rem; }
}

.zahlen > div {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.zahlen .display {
  font-size: clamp(3rem, 7vw, 5.5rem);
  line-height: 1;
  color: var(--paper);
}
.zahlen small {
  font-size: .85rem;
  color: var(--muted);
}

/* ---------- 06 Besuch ---------- */

.besuch { max-width: var(--maxw); margin: 0 auto; }

.besuch .abschnitt {
  font-size: clamp(2.5rem, 8vw, 6rem);
  margin-top: .8rem;
}

.besuch-sub {
  margin-top: 1rem;
  font-size: 1.1rem;
  color: rgba(242,237,228,.85);
}

.tel-gross {
  display: inline-block;
  margin-top: 2.5rem;
  font-family: var(--serif);
  font-size: clamp(1.8rem, 4vw, 3rem);
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(216,156,72,.3);
  padding-bottom: .15em;
  transition: border-color .3s;
  will-change: transform;
}
.tel-gross:hover { border-color: var(--gold); }
.tel-gross span { display: inline-block; }

.merkmale {
  margin-top: 3rem;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}
.merkmale li {
  font-size: .9rem;
  color: rgba(242,237,228,.85);
  border-bottom: 1px solid rgba(242,237,228,.08);
  padding-bottom: .8rem;
}

/* ---------- Fuß ---------- */

.fuss {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.6rem var(--pad) 2rem;
  border-top: 1px solid rgba(242,237,228,.1);
  font-size: .72rem;
  letter-spacing: .1em;
  color: rgba(242,237,228,.32);
}

/* ---------- Notbremse ---------- */
/* Sechs Sekunden ohne Lebenszeichen → alles hart sichtbar.
   html.notfall wird vom inline-Script vor den Stylesheets gesetzt. */
html.notfall #glut { display: none; }
html.notfall .kino-pin { height: auto; }
html.notfall .kino-buehne { position: static; height: auto; }
html.notfall .kino-szenen { display: block; }
html.notfall .szene { opacity: 1 !important; height: 78svh; margin-bottom: 2px; }
html.notfall .kino-fortschritt { display: none; }
html.notfall .aktionsleiste { transform: none !important; opacity: 1 !important; }
html.notfall .hero-bild { transform: none !important; }
html.notfall [data-fade] { opacity: 1 !important; transform: none !important; }

/* ---------- Bewegung aus ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .grain, .scroll-hinweis i, .band-lauf { animation: none; }
  #glut { display: none; }
  .hero-bild { transform: none !important; }
  .kino-pin { height: auto; }
  .kino-buehne { position: static; height: auto; }
  .kino-szenen { display: block; }
  .szene { opacity: 1 !important; height: 78svh; margin-bottom: 2px; }
  .kino-fortschritt { display: none; }
}
/* ---------- 05 Die ganze Karte ---------- */

.speisekarte { border-top: 1px solid rgba(242,237,228,.1); }

.karte-hinweis {
  margin-top: 1.4rem;
  max-width: 34em;
  font-size: .9rem;
  line-height: 1.7;
  color: var(--muted);
}
.karte-hinweis a {
  color: var(--muted);
  text-decoration: underline;
  text-decoration-color: rgba(216,156,72,.5);
  text-underline-offset: 4px;
}
.karte-hinweis a:hover { color: var(--paper); }

.karten-raster {
  margin-top: 4rem;
  max-width: 1200px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem 4.5rem;
}
@media (max-width: 820px) { .karten-raster { grid-template-columns: 1fr; gap: 3rem; } }

.kapitel-block h3 {
  font-size: 1.45rem;
  color: var(--gold);
  padding-bottom: .7rem;
  border-bottom: 1px solid rgba(242,237,228,.13);
}
.kapitel-block h3 small {
  display: block;
  margin-top: .35rem;
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--muted);
}

.kapitel-block ul { list-style: none; margin-top: 1.1rem; }
.kapitel-block li {
  display: flex;
  align-items: baseline;
  gap: .7em;
  padding: .42em 0;
  font-size: .93rem;
  color: rgba(242,237,228,.88);
}
.kapitel-block li b {
  flex: 0 0 2.2em;
  font-weight: 400;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.kapitel-block li i {
  flex: 1;
  min-width: 2em;
  align-self: flex-end;
  height: 1.05em;
  font-style: normal;
  background-image: radial-gradient(circle, rgba(166,152,138,.55) 1px, transparent 1.2px);
  background-size: 8px 2px;
  background-position: 0 100%;
  background-repeat: repeat-x;
}
.kapitel-block li em {
  font-style: normal;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.kapitel-block li u {
  text-decoration: none;
  color: var(--rosso);
  font-size: .82em;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-left: .5em;
}

.karte-fussnote {
  margin-top: 4rem;
  max-width: 38em;
  border-left: 2px solid var(--rosso);
  padding-left: 1.3rem;
  font-size: .88rem;
  line-height: 1.7;
  color: var(--muted);
}

/* Stimmen: Teilnoten unter den Zitaten */
.teilnoten {
  margin-top: 2.6rem;
  font-size: .9rem;
  color: var(--muted);
}
.teilnoten b { font-weight: 400; color: var(--gold); }
.stimmen blockquote + blockquote { margin-top: 3rem; }

/* Besuch: Notiz unter den Merkmalen */
.besuch-notiz {
  margin-top: 1.6rem;
  max-width: 40em;
  font-size: .8rem;
  line-height: 1.7;
  color: var(--muted);
}

/* ---------- Knöpfe ---------- */

.knopf-gold, .knopf-linie {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .95em 1.9em;
  text-decoration: none;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  transition: background .3s, color .3s, border-color .3s;
  will-change: transform;
}
.knopf-gold { background: var(--gold); color: var(--ink); }
.knopf-gold:hover { background: var(--goldhell); }
.knopf-linie { border: 1px solid rgba(242,237,228,.3); color: var(--paper); }
.knopf-linie:hover { border-color: var(--gold); color: var(--gold); }

.knopf-gold.gross {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.6vw, 2rem);
  letter-spacing: .06em;
  text-transform: none;
  padding: .7em 1.3em;
}

.hero-aktionen {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  /* Die Knöpfe klebten an der Adresszeile. Ein Absatz Luft macht sie zu einer
     eigenen Zeile statt zum Anhang des Fließtextes. */
  margin-top: clamp(1.9rem, 5.5vh, 3.2rem);
  /* Der Hero verankert seinen Inhalt unten: Luft über den Knöpfen schiebt
     sonst den ganzen Block nach oben, bis die Eyebrow in der Kopfzeile der
     Titelkarte hängt. Das untere Polster gibt genau so viel wieder her. */
  padding: 0 var(--pad) clamp(1.4rem, 3.5vh, 2.6rem);
}

/* ---------- Übergang nach dem Kino ---------- */

.uebergang {
  max-width: var(--maxw);
  margin: 0 auto;
  text-align: left;
}
.uebergang-satz {
  font-size: clamp(1.8rem, 4.6vw, 4rem);
  line-height: 1.2;
  max-width: 18em;
}
.uebergang-satz .wd { display: inline-block; }
.uebergang-aktionen {
  margin-top: 2.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
}

/* ---------- Schnellnav der Speisekarte ---------- */

.kapitel-nav {
  position: sticky;
  /* Wie bei San Marco: die Leiste klebt am obersten Rand und liegt über dem
     Kopf (z-index 12 gegen 10). Dadurch beginnt die Karte direkt unter der
     Statusleiste des Telefons, und keine Kartenzeile wandert mehr durch
     Wortmarke oder Menüknopf. */
  top: 0;
  z-index: 12;
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  scrollbar-width: none;
  /* Volle Breite, damit links und rechts nichts am Deckel vorbeiläuft. */
  margin: 2.2rem calc(var(--pad) * -1) 0;
  padding: .85rem var(--pad);
  background: linear-gradient(180deg, var(--ink) 82%, rgba(20,20,20,0));
  -webkit-overflow-scrolling: touch;
}
.kapitel-nav::-webkit-scrollbar { display: none; }
.kapitel-nav a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 1.05em;
  border: 1px solid rgba(242,237,228,.28);
  border-radius: 100px;
  font-size: .86rem;
  font-weight: 400;
  letter-spacing: .05em;
  color: rgba(242,237,228,.82);
  background: rgba(242,237,228,.05);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .25s, color .25s, background .25s;
}
.kapitel-nav a:hover { border-color: var(--gold); color: var(--paper); }
.kapitel-nav a[aria-current="location"] {
  border-color: var(--gold);
  color: var(--ink);
  font-weight: 500;
  background: var(--gold);
}

/* Anker unter der klebenden Leiste nicht verstecken. */
.kapitel-block { scroll-margin-top: 8rem; }
/* Abschnittssprünge brauchen keinen Vorlauf für die Kapitelleiste — die klebt
   erst, wenn man mitten in der Karte steht. Der eigene Innenabstand des
   Abschnitts trägt die Luft unter dem Kopf; mehr schob die Überschrift eine
   halbe Bildschirmhöhe nach unten. */
section[id] { scroll-margin-top: 1rem; }

@media (max-width: 720px) {
  :root { --header-clearance: 5rem; }
  .kapitel-block { scroll-margin-top: 8.5rem; }
  section[id] { scroll-margin-top: 1rem; }
}

/* ---------- Abschluss der Karte ---------- */

.karte-abschluss {
  margin-top: 4.5rem;
  padding-top: 3rem;
  border-top: 1px solid rgba(242,237,228,.13);
}
.karte-abschluss .display { font-size: clamp(2.2rem, 5vw, 4rem); }
.karte-abschluss-sub { margin-top: .8rem; color: var(--muted); font-size: .95rem; }
.karte-abschluss .knopf-gold { margin-top: 2rem; }

/* ---------- Aktionsleiste (Telefon) ---------- */

.aktionsleiste {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  display: none;
  gap: 1px;
  background: rgba(242,237,228,.14);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(110%);
  opacity: 0;
  transition: transform .45s cubic-bezier(.6,0,.2,1), opacity .3s;
}
.aktionsleiste.sichtbar { transform: translateY(0); opacity: 1; }
/* Bei offenem Menü tritt sie ab: sie lag sonst über dem Knopf der Tafel. */
html.menu-offen .aktionsleiste { transform: translateY(100%); opacity: 0; pointer-events: none; }

.aktionsleiste a {
  flex: 1;
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  text-decoration: none;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.aktionsleiste svg { width: 19px; height: 19px; fill: currentColor; }
.al-tel { background: var(--gold); color: var(--ink); }
.al-karte { background: var(--warm); color: var(--paper); }

@media (max-width: 767px) {
  .aktionsleiste { display: flex; }
  /* Platz, damit der Fuß nicht unter der Leiste verschwindet. */
  .fuss { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
}

/* Noch nicht gedrehte Szenen tragen das Wappentier als Wasserzeichen —
   besser eine ruhige Marke als eine leere Fläche. Verschwindet, sobald
   ein Clip eingehängt ist (main.js nimmt .platzhalter weg). */
.szene-medium.platzhalter::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url(img/lion.webp) no-repeat 68% 46%;
  background-size: min(46vw, 520px) auto;
  opacity: .07;
  filter: grayscale(1) brightness(2.4);
}
@media (max-width: 767px) {
  .szene-medium.platzhalter::after { background-position: 60% 38%; background-size: 74vw auto; }
}

/* Titelkarte mit echtem Einstiegsmotiv. Der Verlauf bleibt als Farbschleier
   unter dem Poster liegen und die Glut-Leinwand liefert die Bewegung. */
.hero-bild.hero-leer {
  background:
    radial-gradient(120% 80% at 72% 18%, rgba(216,156,72,.16), transparent 62%),
    radial-gradient(90% 70% at 20% 90%, rgba(170,38,56,.12), transparent 60%),
    linear-gradient(168deg, #16110d 0%, #0d0b0a 52%, #070607 100%);
}
.hero-bild.hero-leer img { opacity: .52; mix-blend-mode: screen; }
@media (max-width: 639px) {
  .hero-bild.hero-leer img { object-position: 56% 50%; opacity: .62; }
}