/* Gianna Panini | Bello e buonissimo.
   Farben und Schriften aus dem Styleguide. Jede Fläche trägt eine Bereichsfarbe, oben das Streifenband von der Wand,
   und schiebt sich beim Scrollen schräg über die vorige. Der Rundbogen bleibt besonders: vorne mit den Panini und am
   Ende als echte Tür. Dazwischen wachsen Bilder mit den runden Ecken des Abzeichens aus der Mitte (Scroll nach einer
   Vorlage von existacial), verziert mit den Begleitern und Icons aus dem Styleguide.
   Der Aufbau folgt bar-topas.ch: Streifen-Intro, Laufbänder über Kreuz, Wörterbuch-Karte, Fotogalerie quer,
   große Öffnungszeiten und am Ende ein Gruß, alles in den Farben von Gianna.
   Ohne JavaScript und bei reduzierter Bewegung steht alles ruhig untereinander. */

@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  --nero: #2A1A12;
  --espresso: #4A2B1C;
  --ciottolo: #655B52;
  --crema: #E8DCCB;
  --panna: #F4EDE3;
  --arancia: #EB6420;
  --arancia-scura: #A3420F;
  --albicocca: #E9AD76;
  --rossetto: #D0552F;
  --rossetto-scuro: #9A3218;
  --rossetto-chiaro: #FAE2D9;
  --zafferano: #E2A12B;
  --zafferano-scuro: #7E560B;
  --castagno: #74321F;
  --castagno-scuro: #4C1D12;
  --ruggine: #B66E39;
  --rovere: #E2B07B;
  --titel: "Fraunces", "Cooper Black", Georgia, serif;
  --text: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --rand: clamp(20px, 4vw, 56px);
  --rand-l: max(var(--rand), env(safe-area-inset-left, 0px));
  --rand-r: max(var(--rand), env(safe-area-inset-right, 0px));
  --weich: cubic-bezier(.16, 1, .3, 1);
  --leiste: calc(76px + env(safe-area-inset-bottom, 0px));
  --logo: clamp(76px, 7vw, 104px);
  --kopf: calc(var(--logo) * .77 + 12px + env(safe-area-inset-top, 0px));
  /* Szenen: Satzgröße und Bildfeld, auf dem Handy hochkant */
  --satz: min(12vw, 7svh);
  --bild-w: min(calc(100vw - 2 * var(--rand)), 42svh, calc((100svh - var(--leiste) - var(--kopf) - 2 * var(--luft) - 1.8 * var(--satz) - 16px) * .8));
  --bild-h: calc(var(--bild-w) * 1.25);
  --luft: clamp(10px, 1.6svh, 20px);
  --buehne: calc(100svh - var(--leiste));
  --weg: 65svh;
  --ring: clamp(4px, .5vw, 8px);
  /* runde Ecken wie am Abzeichen: Radius rund 9 % der Breite */
  --ecke: clamp(18px, 3vw, 44px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--espresso) var(--crema); }
body {
  margin: 0;
  background: var(--panna);
  color: var(--nero);
  font-family: var(--text);
  font-size: clamp(17px, .45vw + 15px, 19px);
  line-height: 1.55;
  font-variation-settings: "SOFT" 100, "WONK" 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
:where(h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote) { margin: 0; }
:where(ul, ol) { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: .07em; }
i, em { font-family: var(--titel); font-weight: 400; font-variation-settings: "SOFT" 100, "WONK" 1; }
::selection { background: var(--arancia); color: var(--nero); }
:focus-visible { outline: 3px solid var(--nero); outline-offset: 3px; border-radius: 8px; }
.dunkel :focus-visible { outline-color: var(--panna); }
[tabindex="-1"]:focus { outline: none; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprung { position: fixed; left: 12px; top: 12px; z-index: 200; padding: 12px 16px; border-radius: 999px; background: var(--nero); color: var(--panna); font-weight: 650; text-decoration: none; transform: translateY(-160%); transition: transform .3s var(--weich); }
.sprung:focus-visible { transform: none; }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

/* ---------------------------------------------------------------- Kopf: Logo nur am Anfang, der Status immer oben */
.kopf {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) var(--rand-r) 0 var(--rand-l);
  pointer-events: none;
}
.kopf > * { pointer-events: auto; }
.kopf-logo { display: block; border-radius: 12px; transition: opacity .4s var(--weich), visibility .4s; }
.kopf-logo img { width: var(--logo); }
.kopf-weg .kopf-logo { opacity: 0; visibility: hidden; }
.kopf-nav {
  display: flex; align-items: center; gap: 4px; padding: 5px;
  background: var(--panna); border-radius: 999px; box-shadow: 0 10px 28px -10px rgba(42, 26, 18, .35);
}
.kopf-nav a { font-weight: 600; font-size: 15px; line-height: 1; text-decoration: none; padding: 11px 15px; border-radius: 999px; transition: background-color .25s; }
.kopf-nav a:hover { background: var(--crema); }
.kopf-nav .status-chip { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; background: var(--nero); color: var(--panna); white-space: nowrap; }
.kopf-nav .status-chip:hover { background: var(--espresso); }
.status-chip::before { content: ""; width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 2px currentColor; flex: none; }
.status-chip.offen::before { background: var(--arancia); box-shadow: none; animation: chip-puls 2.4s var(--weich) infinite; }
@keyframes chip-puls { 0% { box-shadow: 0 0 0 0 rgba(235, 100, 32, .6); } 70%, 100% { box-shadow: 0 0 0 8px rgba(235, 100, 32, 0); } }
.nav-link { display: none; }

.entwurf { position: relative; z-index: 2; margin: 0; background: var(--nero); color: var(--panna); font-size: 13px; line-height: 1.45; padding: 9px var(--rand-r) 9px var(--rand-l); }
.entwurf b { font-weight: 700; }
/* in den Entwurfs-Fassungen steht der Kopf mit Logo unter dem Hinweis, nach dem ersten Scrollen wieder ganz oben */
.entwurf ~ .kopf { top: var(--hinweis, 0px); transition: top .4s var(--weich); }
.entwurf ~ .kopf.kopf-weg { top: 0; }

/* ---------------------------------------------------------------- Flächen */
/* die schräg hereinkommende Fläche ragt seitlich über den Rand: hier abschneiden, ohne einen Scrollbereich zu bauen */
main { position: relative; overflow-x: clip; }
.anker { height: 0; scroll-margin-top: 0; }
/* clip statt hidden: so bleibt die Bühne der Szenen in der Fläche klebrig */
.flaeche { position: relative; min-height: 100vh; min-height: 100svh; overflow: clip; isolation: isolate; }
/* feines Druckkorn auf allen Flächen, unter dem Inhalt (isolation hält es und die Begleiter über dem Flächengrund, auch ohne JS) */
.flaeche::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: url("../img/korn.png"); background-size: 180px; pointer-events: none; }
.gestapelt .stapel { position: sticky; top: min(0px, calc(100svh - var(--leiste) - var(--h, 100svh))); }
.innen {
  position: relative; z-index: 1; max-width: 1440px; margin-inline: auto;
  padding: clamp(96px, 13vh, 150px) var(--rand-r) clamp(72px, 11vh, 130px) var(--rand-l);
  transform-origin: 50% 100%;
}
.szene + .innen { padding-top: clamp(40px, 8svh, 96px); }
/* Ruhezone am Ende: der letzte Absatz steht frei, bevor die nächste Fläche kommt, darin ein kleiner Begleiter */
.gestapelt .stapel:not(.start) > .innen { padding-bottom: max(clamp(72px, 11vh, 130px), 24svh); }
.band { position: absolute; inset: 0 0 auto; z-index: 2; height: clamp(21px, 2.2vw, 33px); display: grid; grid-template-rows: repeat(3, 1fr); }
.band span:nth-child(1) { background: var(--espresso); }
.band span:nth-child(2) { background: var(--ruggine); }
.band span:nth-child(3) { background: var(--zafferano); }
/* die verdeckte Fläche dunkelt im eigenen Farbton ab, nicht in Grau */
.schatten { position: absolute; inset: 0; z-index: 4; background: var(--dunkel, var(--nero)); opacity: 0; pointer-events: none; }

/* ---------------------------------------------------------------- Schrift */
.satz { font-family: var(--titel); font-weight: 800; font-size: var(--satz); line-height: .9; letter-spacing: -.035em; }
.satz i { letter-spacing: -.02em; }
.zeile { display: block; white-space: nowrap; }
.satz .unten { text-align: right; }
.dunkel .satz i { color: var(--albicocca); }
.caffe .satz, .hommage .satz { text-align: center; }
.caffe .satz .zeile, .hommage .satz .zeile { display: inline; }
.lead { font-size: clamp(19px, .8vw + 14px, 25px); line-height: 1.42; max-width: 34ch; text-wrap: pretty; }
.text { max-width: 60ch; }
.klein { font-size: 15px; line-height: 1.5; }
.dachzeile { font: 700 clamp(12px, .35vw + 10px, 15px)/1.25 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--rossetto-scuro); }

/* Knöpfe */
.knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.knopf {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px;
  font: 650 16px/1 var(--text); text-decoration: none; padding: 16px 22px; border-radius: 999px;
  background: var(--nero); color: var(--panna); transition: transform .35s var(--weich), background-color .25s, box-shadow .25s;
}
.knopf:hover { transform: translateY(-2px); box-shadow: 0 12px 22px -12px rgba(42, 26, 18, .55); }
.knopf:active { transform: translateY(0); }
.knopf svg { width: 20px; height: 20px; flex: none; }
.knopf.orange { background: var(--arancia); color: var(--nero); }
.knopf.hell { background: var(--panna); color: var(--nero); }
.knopf.linie { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.knopf.linie:hover { box-shadow: inset 0 0 0 2px currentColor, 0 12px 22px -12px rgba(42, 26, 18, .45); }

/* Öffnungsstatus */
.status { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; }
.status::before { content: ""; width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 2px currentColor; flex: none; }
.status.offen::before { background: currentColor; animation: puls 2.4s var(--weich) infinite; }
@keyframes puls { 0% { box-shadow: inset 0 0 0 2px currentColor, 0 0 0 0 rgba(42, 26, 18, .45); } 70%, 100% { box-shadow: inset 0 0 0 2px currentColor, 0 0 0 10px rgba(42, 26, 18, 0); } }

/* ---------------------------------------------------------------- Bildformen aus dem Styleguide */
/* der Rundbogen mit drei Ringen wie im Rundbogen-Logo, nur vorne und an der Tür */
.bogen { position: relative; margin: 0; }
.bogen .ring { width: 100%; height: 100%; border-radius: 999px 999px 0 0; padding: var(--ring); background: var(--rossetto); }
.bogen .ring .ring { background: var(--arancia); }
.bogen .ring .ring .ring { background: var(--albicocca); }
.bogen-foto { width: 100%; height: 100%; border-radius: 999px 999px 0 0; overflow: hidden; background: var(--espresso); }
.bogen-foto picture, .bogen-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--fokus, 50% 50%); }
/* alle anderen Fotos im Rechteck mit den runden Ecken des Abzeichens */
.eckbild { position: relative; margin: 0; border-radius: var(--ecke); overflow: hidden; background: var(--espresso); }
.eckbild > picture, .eckbild > picture > img, .eckbild > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--fokus, 50% 50%); }

/* Verzierung: die Begleiter aus dem Styleguide als große Silhouetten im dunklen Ton der eigenen Fläche */
.deko { position: absolute; z-index: -1; width: var(--deko-w, clamp(120px, 15vw, 230px)); color: var(--dunkel, var(--nero)); opacity: var(--deko-op, .3); pointer-events: none; }
.deko svg { display: block; width: 100%; height: auto; transform: rotate(var(--deko-r, -8deg)); }
/* Icons mit Beschriftung aus dem Styleguide, wie kleine Schilder im Laden */
.schilder { display: flex; flex-wrap: wrap; gap: 10px; }
.schilder li { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 10px; border-radius: 999px; background: rgba(244, 237, 227, .38); font: 650 15px/1.2 var(--text); }
.schilder svg { width: 28px; height: 28px; flex: none; }
.dunkel .schilder li { background: rgba(244, 237, 227, .08); }

/* ---------------------------------------------------------------- Start: der Schriftzug läuft durch das Tor, im Bogen steht Bianca */
.start { --dunkel: var(--zafferano-scuro); background: var(--zafferano); z-index: 1; }
/* Handy: senkrecht durchs Tor, das „e“ sinkt oben in den Bogen, „buonissimo.“ tritt unten aus der Tür */
.start .innen {
  min-height: 100svh; display: grid; gap: 22px; align-content: start; padding-top: calc(var(--kopf) + 22px); padding-bottom: 40px;
  --tor-gr: min(17vw, 9svh, 132px);
  --tor-w: min(62vw, 34svh, 340px);
  --tor-h: calc(var(--tor-w) * 1.4);
}
.tor-titel { position: relative; font-weight: inherit; padding-top: calc(1.68 * var(--tor-gr) + var(--tor-h) + 12px); }
.tor { position: absolute; z-index: 1; overflow: hidden; font-size: var(--tor-gr); padding-bottom: .12em; }
/* feste optische Größe (Plakatschnitt), sonst läuft Fraunces am Handy breiter und die gemessenen Breiten stimmen nicht */
.tor .zeile { font-family: var(--titel); font-weight: 800; line-height: .9; letter-spacing: -.04em; font-variation-settings: "SOFT" 100, "WONK" 0, "opsz" 144; }
.tor i { letter-spacing: -.02em; font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; }
/* die Mitte des „e“ (2,385 em vom Zeilenanfang) steht genau über dem Scheitel des Bogens */
.tor-links { top: 0; left: calc(50% - 2.385em); }
.tor-rechts { top: calc(.63 * var(--tor-gr) + var(--tor-h)); left: 0; right: 0; text-align: center; }
.b { display: inline-block; }
.titel-zusatz { display: block; font: 650 clamp(15px, 1.25vw, 19px)/1.35 var(--text); letter-spacing: 0; max-width: 28ch; }
.bogen-figur { position: absolute; z-index: 2; top: calc(var(--kopf) + 22px + .63 * var(--tor-gr)); left: calc(50% - var(--tor-w) / 2); width: var(--tor-w); height: var(--tor-h); margin: 0; }
.start-box { display: none; gap: 14px; justify-items: start; }
.zeiten-kurz { font-weight: 650; }
.deko-start-links, .deko-start-rechts { display: none; }
/* in der Ruhezone am Ende jeder Fläche steht ein kleiner Begleiter, auch am Handy */
.deko-ruhe { display: none; bottom: max(18px, 6svh); --deko-w: clamp(84px, 13vw, 170px); --deko-op: .26; }
.gestapelt .deko-ruhe { display: block; }
.deko-ruhe.links { left: calc(var(--rand-l) + 4%); --deko-r: -9deg; }
.deko-ruhe.rechts { right: calc(var(--rand-r) + 4%); --deko-r: 9deg; }

/* ---------------------------------------------------------------- Laufbänder über Kreuz, oben auf der Wörterbuch-Fläche */
.laufbaender { position: relative; z-index: 2; margin-inline: -6vw; padding: clamp(56px, 7vw, 110px) 0 clamp(8px, 2vw, 30px); pointer-events: none; }
.laufband { overflow: hidden; white-space: nowrap; }
.lauf { display: flex; width: max-content; }
.bewegt .lauf { animation: laufen 42s linear infinite; }
.bewegt .laufband-b .lauf { animation-duration: 34s; animation-direction: reverse; }
@keyframes laufen { to { transform: translateX(-50%); } }
.lauf-gruppe { display: flex; align-items: center; flex: none; }
.lauf-wort { padding: 0 .34em; }
.lauf-zeichen { width: .56em; height: .56em; flex: none; }
.laufband-a {
  position: relative; z-index: 1; transform: rotate(-3deg); padding: .14em 0 .1em;
  background: var(--rossetto); color: var(--panna); box-shadow: 0 18px 30px -18px rgba(42, 26, 18, .5);
  font: 800 clamp(42px, 7.4vw, 118px)/1 var(--titel); letter-spacing: -.02em; text-transform: uppercase;
}
.laufband-a i { font-weight: 400; text-transform: none; }
.laufband-a .lauf-zeichen { color: var(--zafferano); }
.laufband-b {
  position: relative; transform: rotate(2.2deg); margin-top: -.3em; padding: .55em 0 .5em;
  background: var(--zafferano); color: var(--nero);
  font: 700 clamp(17px, 2.2vw, 36px)/1 var(--text); letter-spacing: .05em; text-transform: uppercase;
}
.laufband-b .lauf-zeichen { color: var(--rossetto-scuro); }

/* ---------------------------------------------------------------- Wörterbuch (Panna): Gianna Panini als Eintrag, gerahmt wie das Abzeichen */
.wort { --dunkel: var(--zafferano-scuro); background: var(--panna); z-index: 2; }
.wort .innen { display: grid; justify-items: center; padding-top: clamp(30px, 5vw, 60px); }
.wortkarte {
  position: relative; z-index: 2; width: min(100% - 50px, 720px); margin: 25px; overflow: hidden;
  padding: clamp(78px, 7vw, 100px) clamp(24px, 4vw, 60px) clamp(26px, 3.5vw, 46px);
  border-radius: var(--ecke); background: var(--panna); color: var(--nero);
  box-shadow: 0 0 0 4px var(--arancia), 0 0 0 8px var(--panna), 0 0 0 13px var(--rossetto), 0 0 0 17px var(--panna), 0 0 0 24px var(--espresso), 0 60px 80px -44px rgba(42, 26, 18, .6);
}
.wortkarte .ecke { position: absolute; left: 0; top: 0; width: clamp(84px, 9vw, 120px); height: auto; }
.wort-titel { font: 800 clamp(46px, 6.6vw, 104px)/.88 var(--titel); letter-spacing: -.035em; color: var(--rossetto-scuro); }
.wort-laut { margin-top: 16px; padding-bottom: 16px; border-bottom: 2px solid currentColor; font: 650 clamp(12px, .45vw + 10px, 15px)/1.4 var(--text); letter-spacing: .12em; text-transform: uppercase; }
.wort-laut i { font-size: 1.3em; letter-spacing: 0; text-transform: none; color: var(--arancia-scura); }
.wort-text { margin-top: 24px; font: 650 clamp(22px, 1.5vw + 13px, 36px)/1.28 var(--text); letter-spacing: -.01em; text-wrap: pretty; }
.wort-siehe { margin-top: 20px; font-size: clamp(16px, .4vw + 13px, 19px); }
.wort-siehe b { color: var(--rossetto-scuro); }
.wort-gruss { width: max-content; margin: 18px -4px -6px auto; transform: rotate(-6deg); font-size: clamp(32px, 3vw, 52px); line-height: 1; color: var(--rossetto); }
.wort-foto { position: relative; z-index: 3; width: min(58%, 280px); aspect-ratio: 4 / 5; box-shadow: 0 30px 50px -26px rgba(42, 26, 18, .6); }
.wort-foto-a { justify-self: start; rotate: -6deg; margin-bottom: -46px; }
.wort-foto-b { justify-self: end; rotate: 5deg; margin-top: -40px; }

/* ---------------------------------------------------------------- Szenen: das Bild wächst aus der Mitte */
.szene { padding: clamp(110px, 16svh, 200px) var(--rand-r) 0 var(--rand-l); }
.buehne { position: relative; display: grid; gap: var(--luft); }
.buehne .wachsbild { justify-self: center; width: min(100%, 460px); aspect-ratio: 4 / 5; }

.bewegt .szene { height: calc(var(--buehne) + var(--weg)); padding: 0; }
.bewegt .buehne { position: sticky; top: 0; height: var(--buehne); display: block; overflow: hidden; }
.bewegt .buehne .zeile { position: absolute; }
.bewegt .buehne .oben { left: var(--rand-l); bottom: calc(50% - var(--kopf) / 2 + var(--bild-h) / 2 + var(--luft)); }
.bewegt .buehne .unten { right: var(--rand-r); top: calc(50% + var(--kopf) / 2 + var(--bild-h) / 2 + var(--luft)); }
.bewegt .buehne .wachsbild {
  position: absolute; left: calc(50% - var(--bild-w) / 2); top: calc(50% + var(--kopf) / 2 - var(--bild-h) / 2);
  width: var(--bild-w); height: var(--bild-h); aspect-ratio: auto; transform-origin: 50% 50%;
}
.bewegt .buehne .zeile { z-index: 2; }

/* Riesenwort hinter dem Freisteller: die erste Zeile gefüllt, darunter als Kontur, Ton in Ton mit der Fläche */
.riesenwort {
  position: absolute; left: 0; right: 0; top: 50%; z-index: -1; transform: translateY(-50%);
  display: grid; justify-items: center; pointer-events: none;
  font-family: var(--titel); font-weight: 800; line-height: .8; letter-spacing: -.02em; text-transform: uppercase; white-space: nowrap;
  font-size: min(calc((100vw - 2 * var(--rand)) / 3.6), calc(var(--bild-h) / 2.45)); color: var(--dunkel);
}
.riesenwort span:not(:first-child) { color: transparent; -webkit-text-stroke: max(1.5px, .006em) var(--dunkel); }
/* ohne Bewegung steht das Riesenwort mittig hinter dem Freisteller, der Arm läuft unten weich aus */
.buehne .riesenwort { top: auto; bottom: calc(min(.7 * (100vw - var(--rand-l) - var(--rand-r)), 320px) * 1.7325 / 2); transform: translateY(50%); }
.bewegt .buehne .riesenwort { top: calc(50% + var(--kopf) / 2); bottom: auto; transform: translateY(-50%); }
/* der Freisteller steigt von unten ins Bild, wie eine Hand, die den Panino hinhält */
.freisteller { position: relative; margin: 0; --frei-h: calc(var(--buehne) * .62); --frei-w: calc(var(--frei-h) * .577); }
.freisteller > picture, .freisteller > picture > img, .freisteller > img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 30px 34px rgba(42, 26, 18, .35)); }
.buehne .freisteller { justify-self: center; width: min(70%, 320px); aspect-ratio: 1189 / 2060; }
.buehne .freisteller img { -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
.bewegt .buehne .freisteller img { -webkit-mask-image: none; mask-image: none; }
.bewegt .buehne .freisteller { left: calc(50% - var(--frei-w) * .58); top: auto; bottom: 0; width: var(--frei-w); height: var(--frei-h); transform-origin: 50% 100%; }

/* ---------------------------------------------------------------- Vetrina (Arancia) */
.vetrina { --dunkel: var(--arancia-scura); background: var(--arancia); z-index: 3; }
.vetrina .innen { display: grid; gap: clamp(32px, 5vw, 64px); }
/* die Eichenkante der Vetrina, auf der die Kärtchen stehen */
.regal { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 18px; align-items: end; padding-bottom: 34px; }
.regal::after { content: ""; position: absolute; inset: auto 0 0; height: 12px; border-radius: 3px; background: var(--rovere); box-shadow: 0 8px 14px -6px rgba(42, 26, 18, .45); }
.kaertchen {
  position: relative; min-height: 190px; padding: clamp(68px, 7vw, 92px) clamp(14px, 1.5vw, 20px) 20px; border-radius: 14px; overflow: hidden;
  background: var(--nero); color: var(--panna); transform: rotate(var(--r, 0deg));
  box-shadow: 0 18px 30px -16px rgba(42, 26, 18, .6);
}
.kaertchen .ecke { position: absolute; left: 0; top: 0; width: clamp(84px, 9vw, 120px); height: auto; }
.kaertchen h3 { font-family: var(--titel); font-weight: 800; font-size: clamp(22px, 2vw, 34px); line-height: 1.02; letter-spacing: -.015em; }
.kaertchen p { color: var(--albicocca); font-size: clamp(14px, .4vw + 12px, 15.5px); line-height: 1.45; margin-top: 10px; }
@media (max-width: 899px) {
  .regal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .regal .kaertchen:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 9px); }
}

/* ---------------------------------------------------------------- Galerie (Panna): die Fotokarten laufen quer durch und richten sich zur Mitte hin auf */
.galerie { --dunkel: var(--rossetto-scuro); background: var(--panna); z-index: 4; }
.galerie-buehne { position: relative; padding: clamp(110px, 14vh, 160px) 0 clamp(70px, 10vh, 120px); }
.galerie-riese {
  position: absolute; left: 0; top: 56%; transform: translateY(-50%); white-space: nowrap; pointer-events: none;
  font: 800 clamp(150px, 27vw, 470px)/.8 var(--titel); letter-spacing: -.03em; text-transform: uppercase; color: var(--rossetto); opacity: .1;
}
.galerie-kopf { position: relative; z-index: 2; display: grid; gap: 12px; padding: 0 var(--rand-r) 0 var(--rand-l); }
.galerie-titel { font: 800 clamp(44px, 5.4vw, 92px)/.9 var(--titel); letter-spacing: -.035em; }
.galerie-titel i { color: var(--rossetto); letter-spacing: -.02em; }
.galerie-spur {
  position: relative; z-index: 1; display: flex; align-items: center; gap: clamp(26px, 3.2vw, 58px);
  padding: clamp(60px, 9vh, 100px) var(--rand-r) 50px var(--rand-l);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.galerie-spur::-webkit-scrollbar { display: none; }
.karte { position: relative; flex: none; width: clamp(232px, 22vw, 350px); rotate: var(--neig, 0deg); scroll-snap-align: center; container-type: inline-size; }
.karte:nth-child(odd) { margin-top: -5vh; }
.karte:nth-child(even) { margin-top: 7vh; }
.karte .eckbild { aspect-ratio: 4 / 5; box-shadow: 0 34px 50px -28px rgba(42, 26, 18, .65); }
.karte .eckbild::after { content: ""; position: absolute; inset: 42% 0 0; background: linear-gradient(transparent, rgba(42, 26, 18, .78)); pointer-events: none; }
.karte img { scale: 1.12; }
.karte-nr { position: absolute; z-index: 2; top: -.7em; right: -.12em; font: 800 min(70px, 19cqi)/1 var(--titel); letter-spacing: -.03em; color: var(--arancia); }
.karte-name { position: absolute; z-index: 2; left: 8.5cqi; right: 8.5cqi; bottom: 7.5cqi; font: 800 min(38px, 10.5cqi)/.95 var(--titel); letter-spacing: -.02em; text-transform: uppercase; color: var(--panna); text-wrap: balance; }
.karte-ende { flex: none; display: grid; place-items: center; padding-right: 2vw; }
.kreis {
  display: grid; place-content: center; gap: 10px; width: clamp(232px, 21vw, 340px); aspect-ratio: 1; padding: 28px; border-radius: 50%;
  background: var(--rossetto-scuro); color: var(--panna); text-align: center; text-decoration: none; rotate: -4deg;
  box-shadow: 0 30px 50px -28px rgba(42, 26, 18, .65); transition: transform .45s var(--weich);
}
.kreis:hover { transform: scale(1.05) rotate(-3deg); }
.kreis-gross { font: 800 clamp(28px, 2.5vw, 44px)/.95 var(--titel); letter-spacing: -.02em; }
.kreis-klein { font: 650 15px/1.35 var(--text); }
/* mit Bewegung bleibt die Bühne stehen und die Spur läuft so weit quer, wie sie breiter ist als das Fenster */
.bewegt .galerie-lauf { height: calc(var(--buehne) + var(--strecke, 150vw)); }
.bewegt .galerie-buehne { position: sticky; top: 0; height: var(--buehne); overflow: hidden; display: grid; grid-template-rows: auto 1fr; padding: calc(var(--kopf) + 28px) 0 0; }
.bewegt .galerie-spur { width: max-content; overflow: visible; align-self: center; padding: 0 var(--rand-r) clamp(20px, 5vh, 60px) calc(var(--rand-l) + 4vw); scroll-snap-type: none; }

@media (max-height: 560px) and (orientation: landscape) {
  .bewegt .galerie-buehne { padding-top: calc(var(--kopf) + 6px); }
  .galerie-kopf .dachzeile { display: none; }
  .galerie-titel { font-size: clamp(30px, 8svh, 44px); }
  .karte { width: calc((var(--buehne) - var(--kopf) - 110px) * .76); }
  .karte:nth-child(n) { margin-top: 0; }
  .kreis { width: calc((var(--buehne) - var(--kopf) - 110px) * .9); padding: 14px; }
  .kreis-gross { font-size: 22px; }
  .kreis-klein { font-size: 12px; }
}

/* ---------------------------------------------------------------- Kapitel mit Foto und Text: Caffè und Bianca */
.kapitel-kopf { display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; }
.kapitel-kopf .eckbild { width: min(100%, 460px); aspect-ratio: 1; }
.kapitel-kopf .eckbild.hoch { aspect-ratio: 4 / 5; }
/* Caffè: Tasse und Aufkleber stehen auf der Eichenkante, dahinter CAFFÈ als Kontur */
.stillleben { position: relative; margin: 0; width: min(100%, 560px); justify-self: center; padding-bottom: 14px; }
.stillleben > picture, .stillleben > img { position: relative; z-index: 1; display: block; }
.stillleben img { width: 100%; height: auto; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .35)); }
.stillleben::after { content: ""; position: absolute; inset: auto -4% 0; height: 14px; border-radius: 3px; background: var(--rovere); box-shadow: 0 8px 14px -6px rgba(0, 0, 0, .45); }
.stillleben .riesenwort { transform: translateY(-62%); font-size: calc(min(100vw - 2 * var(--rand), 560px) / 3.15); color: var(--ruggine); }
.stillleben .riesenwort span:not(:first-child) { -webkit-text-stroke-color: var(--ruggine); }
.kapitel-text { display: grid; gap: 22px; align-content: start; }
/* der Begleiter steht in der Lücke rechts neben der ersten Zeile, über der zweiten; am Handy ist dort der Status-Chip */
.deko-ecke { display: none; --deko-r: 9deg; }

/* ---------------------------------------------------------------- Caffè (Castagno, wie die Holztafel) */
.caffe { --dunkel: var(--castagno-scuro); background: var(--castagno); color: var(--panna); z-index: 5; }
.caffe .innen { display: grid; gap: clamp(32px, 5vw, 56px); }
.caffe .lead { color: var(--rovere); }
.caffe .deko { color: var(--ruggine); --deko-op: .45; }
.tafel { display: grid; gap: 0 48px; }
.tafel li { display: flex; align-items: baseline; gap: 12px; padding: 13px 0; border-bottom: 1px solid rgba(244, 237, 227, .18); font-size: clamp(18px, .5vw + 15px, 22px); }
.tafel .name { font-family: var(--titel); font-weight: 600; }
.tafel .punkte { flex: 1; min-width: 16px; border-bottom: 2px dotted rgba(226, 176, 123, .55); transform: translateY(-5px); }
.tafel .preis { font-weight: 650; font-variant-numeric: tabular-nums; color: var(--rovere); white-space: nowrap; }
.bibite { font-size: clamp(18px, .4vw + 15px, 21px); }
.bibite b { font-family: var(--titel); font-style: italic; font-weight: 400; font-size: 1.25em; font-variation-settings: "SOFT" 100, "WONK" 1; }

/* ---------------------------------------------------------------- Bianca (Rossetto chiaro) */
.bianca { --dunkel: var(--rossetto-scuro); background: var(--rossetto-chiaro); z-index: 6; }
.bianca .innen { display: grid; gap: clamp(32px, 5vw, 56px); }
.bianca .deko { --deko-op: .2; }
.zitat { font-family: var(--titel); font-style: italic; font-weight: 400; font-size: clamp(26px, 1.6vw + 16px, 42px); line-height: 1.3; color: var(--rossetto-scuro); max-width: 26ch; font-variation-settings: "SOFT" 100, "WONK" 1; }
.zitat p { quotes: "„" "“"; }
.zitat p::before { content: open-quote; }
.zitat p::after { content: close-quote; }
.zitat footer { margin-top: 14px; font: 650 14px/1.4 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--nero); font-style: normal; }
.presse { font-size: 15px; color: var(--espresso); }

/* ---------------------------------------------------------------- Hommage (Rossetto scuro): eine Single für Gianna Nannini */
.hommage { --dunkel: var(--castagno-scuro); background: var(--rossetto-scuro); color: var(--panna); z-index: 7; }
.hommage .innen { display: grid; gap: clamp(36px, 5vw, 72px); align-items: center; }
.hommage-text { display: grid; gap: 22px; align-content: start; }
.hommage .klein { color: var(--rossetto-chiaro); }
.hommage .satz i { color: var(--rossetto-chiaro); }
.single { position: relative; margin: 0; width: min(100%, 620px); aspect-ratio: 1.6; }
.huelle { position: absolute; left: 0; top: 0; z-index: 2; width: 62.5%; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: var(--panna); box-shadow: 0 36px 60px -28px rgba(0, 0, 0, .6); }
.huelle-grund { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.huelle-feld { position: absolute; right: 7%; bottom: 7%; width: 62%; display: grid; justify-items: end; gap: 8px; text-align: right; color: var(--nero); }
.huelle-abz { width: 76%; height: auto; }
.huelle-titel { font-family: var(--titel); font-weight: 800; font-size: clamp(17px, 2.1vw, 30px); line-height: .95; letter-spacing: -.02em; }
.huelle-klein { font: 650 clamp(9.5px, .72vw, 11px)/1.2 var(--text); letter-spacing: .18em; text-transform: uppercase; }
.platte { position: absolute; left: 1.8%; top: 1.9%; z-index: 1; width: 58.75%; aspect-ratio: 1; transform: translateX(52%); }
.bewegt .platte { transform: none; }
.platte svg { display: block; width: 100%; height: 100%; }
.platte::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(135deg, transparent 36%, rgba(244, 237, 227, .11) 50%, transparent 64%); pointer-events: none; }
.etikett-rund { font: 650 12.5px var(--text); letter-spacing: .04em; fill: var(--panna); }
.etikett-klein { font: 650 10.5px var(--text); letter-spacing: .2em; fill: var(--panna); }

/* ---------------------------------------------------------------- Gäste (Panna) */
.gaeste { --dunkel: var(--espresso); background: var(--panna); z-index: 8; }
.gaeste .innen { display: grid; gap: clamp(32px, 5vw, 64px); }
.note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; font-weight: inherit; }
.note strong { font-family: var(--titel); font-weight: 800; font-size: clamp(120px, 22vw, 330px); line-height: .8; letter-spacing: -.05em; color: var(--rossetto-scuro); }
.sterne { display: inline-flex; gap: 4px; }
.sterne svg { width: clamp(24px, 2.4vw, 36px); height: auto; fill: var(--rossetto-scuro); stroke: var(--rossetto-scuro); stroke-width: 1.2; }
.note-text { font-size: clamp(19px, .6vw + 15px, 24px); line-height: 1.4; max-width: 22ch; }
.stimmen { display: grid; gap: clamp(28px, 4vw, 48px); }
.stimme { border-top: 2px solid var(--nero); padding-top: 18px; }
.stimme p { font-family: var(--titel); font-style: italic; font-size: clamp(24px, 1.2vw + 16px, 34px); line-height: 1.3; quotes: "„" "“"; font-variation-settings: "SOFT" 100, "WONK" 1; }
.stimme p::before { content: open-quote; }
.stimme p::after { content: close-quote; }
.stimme footer { margin-top: 12px; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; font-weight: 650; color: var(--ciottolo); }

/* ---------------------------------------------------------------- Öffnungszeiten (Albicocca): groß wie auf einem Plakat */
.zeiten-flaeche { --dunkel: var(--ruggine); background: var(--albicocca); z-index: 9; }
.zeiten-flaeche .innen { display: grid; gap: clamp(36px, 6vw, 80px); align-items: center; }
.zeiten-text { display: grid; gap: 14px; justify-items: start; }
.zeiten-flaeche .satz { color: var(--rossetto-scuro); hyphens: manual; }
.zeiten-flaeche .dachzeile { color: var(--castagno-scuro); }
.zeiten-tage { margin-top: clamp(12px, 2.4vw, 34px); font: 700 clamp(15px, .5vw + 12px, 19px)/1.2 var(--text); letter-spacing: .12em; text-transform: uppercase; }
.zeiten-gross { display: flex; align-items: center; gap: .08em; font: 800 clamp(88px, 14vw, 230px)/.86 var(--titel); letter-spacing: -.045em; white-space: nowrap; font-variation-settings: "SOFT" 100, "WONK" 0, "opsz" 144; }
.zeiten-gross .pfeil { width: .62em; height: auto; color: var(--rossetto); margin: 0 .04em; }
.zeiten-gross small { align-self: flex-end; margin: 0 0 .5vw .4vw; font-size: clamp(24px, 3.6vw, 60px); letter-spacing: -.01em; }
.zeiten-flaeche .status { margin-top: 6px; font-size: clamp(17px, .4vw + 15px, 20px); }
.zeiten-flaeche .zeiten { width: min(100%, 520px); }
.zeiten-flaeche .zeiten div { border-bottom-color: rgba(42, 26, 18, .22); }
.zeiten-flaeche .zeiten dd { color: var(--nero); }
.zeiten-gruss { margin-top: 10px; transform: rotate(-5deg); font-size: clamp(32px, 3.2vw, 56px); line-height: 1; color: var(--rossetto-scuro); }
.scheibe { display: grid; place-items: center; width: min(78vw, 420px); aspect-ratio: 1; justify-self: center; border-radius: 50%; background: var(--rossetto); color: var(--panna); box-shadow: 0 50px 80px -46px rgba(42, 26, 18, .7); }
.scheibe svg { width: 60%; height: auto; }

/* ---------------------------------------------------------------- Anfahrt (Espresso Nero): die Altstadt aus Lichtpunkten */
.anfahrt { --dunkel: var(--espresso); background: var(--nero); color: var(--panna); z-index: 10; }
.karte-szene { --bild-w: min(calc(100vw - 2 * var(--rand)), 42svh, calc((100svh - var(--leiste) - var(--kopf) - 2 * var(--luft) - 1.8 * var(--satz) - 16px) * .8)); --bild-h: calc(var(--bild-w) * 1.25); }
.buehne .karte-box { width: 100%; max-width: 1100px; }
.punkte-bild, .punkte-ueber {
  position: absolute; inset: 0; width: 100%; height: 100%;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 60%, transparent 84%); mask-image: radial-gradient(ellipse at center, #000 60%, transparent 84%);
}
.punkte-bild { object-fit: cover; }
.punkte-ueber text { font: 650 19px var(--text); fill: var(--panna); paint-order: stroke; stroke: var(--nero); stroke-width: 5px; stroke-linejoin: round; }
.punkte-ueber .gianna-name { font-weight: 700; fill: var(--albicocca); }
.funke { transform-box: fill-box; transform-origin: center; }
.gianna-ring { transform-box: fill-box; transform-origin: center; opacity: 0; }
.bewegt .funke { transform: scale(0); }
.bewegt .laeuft .funke { animation: funkeln 6s var(--weich) var(--v, 0s) infinite; }
.bewegt .laeuft .gianna-ring { animation: ring 2.4s var(--weich) infinite; }
@keyframes funkeln { 0% { transform: scale(0); } 8% { transform: scale(2.4); } 22% { transform: scale(1.2); } 40%, 100% { transform: scale(0); } }
@keyframes ring { from { transform: scale(1); opacity: .9; } to { transform: scale(3.4); opacity: 0; } }
.tuer-rahmen { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.tuer { height: 80%; aspect-ratio: 4 / 5; }
.osm { position: absolute; left: 10px; bottom: 10px; font-size: 12px; line-height: 1.3; padding: 4px 9px; border-radius: 999px; background: var(--nero); color: var(--rovere); box-shadow: 0 0 0 1px rgba(244, 237, 227, .2); }

.anfahrt .innen { display: grid; gap: clamp(32px, 5vw, 64px); padding-bottom: 40px; }
.anfahrt-info, .anfahrt-weg { display: grid; gap: 24px; align-content: start; }
.info-titel { display: flex; align-items: center; gap: 12px; font-family: var(--titel); font-weight: 700; font-size: clamp(24px, 1.2vw + 16px, 32px); line-height: 1.1; }
.info-titel svg { width: 34px; height: 34px; flex: none; color: var(--albicocca); }
.zeiten { display: grid; max-width: 520px; }
.zeiten div { display: flex; justify-content: space-between; gap: 18px; padding: 14px 0; border-bottom: 1px solid rgba(244, 237, 227, .18); }
.zeiten dt { font-weight: 600; }
.zeiten dd { font-variant-numeric: tabular-nums; color: var(--rovere); }
.adresse { font-style: normal; font-size: clamp(19px, .5vw + 16px, 23px); line-height: 1.45; }
.anfahrt .status { color: var(--albicocca); }
.anfahrt .status.offen::before { animation-name: puls-hell; }
@keyframes puls-hell { 0% { box-shadow: inset 0 0 0 2px currentColor, 0 0 0 0 rgba(233, 173, 118, .5); } 70%, 100% { box-shadow: inset 0 0 0 2px currentColor, 0 0 0 10px rgba(233, 173, 118, 0); } }
/* ---------------------------------------------------------------- Abschluss (Zafferano wie der Start): ein großer Gruß */
.abschluss { --dunkel: var(--zafferano-scuro); background: var(--zafferano); z-index: 11; }
.abschluss .innen { display: grid; align-content: space-between; gap: clamp(40px, 7vh, 80px); min-height: 100svh; padding-top: clamp(90px, 12vh, 140px); padding-bottom: 36px; }
.legato-karte {
  display: grid; gap: 6px; justify-self: start; max-width: 460px; padding: 18px 24px 20px; border-radius: 22px;
  background: var(--panna); color: var(--nero); text-decoration: none; box-shadow: 0 22px 34px -22px rgba(42, 26, 18, .55);
  transition: transform .4s var(--weich);
}
.legato-karte:hover { transform: translateY(-3px) rotate(-1deg); }
.legato-karte span { font-size: 15px; line-height: 1.4; }
.legato-karte b { display: flex; align-items: center; gap: 10px; font: 800 clamp(28px, 2.4vw, 40px)/1 var(--titel); letter-spacing: -.02em; }
.legato-karte svg { width: .8em; height: .8em; flex: none; color: var(--rossetto-scuro); }
.abschluss-gruss { display: grid; justify-items: center; gap: 14px; text-align: center; }
.abschluss-riese { padding-bottom: .16em; font: 800 min(21vw, 330px)/.82 var(--titel); letter-spacing: -.045em; white-space: nowrap; font-variation-settings: "SOFT" 100, "WONK" 0, "opsz" 144; }
.abschluss-riese i { color: var(--rossetto-scuro); letter-spacing: -.02em; font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; }
.abschluss-heisst { font-weight: 650; font-size: clamp(17px, .5vw + 14px, 21px); }
.fuss { display: grid; gap: 22px; align-items: end; border-top: 1px solid rgba(42, 26, 18, .25); padding-top: 28px; font-size: 15px; }
.fuss img { width: 128px; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 0 22px; }
.fuss nav a { padding: 11px 0; }
.fuss small { font-size: 13px; }

/* ---------------------------------------------------------------- Leiste unten (Handy) */
.leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  padding: 10px var(--rand-r) calc(10px + env(safe-area-inset-bottom, 0px)) var(--rand-l);
  background: var(--panna); box-shadow: 0 -10px 26px -12px rgba(42, 26, 18, .35);
}
.leiste a { display: grid; justify-items: center; gap: 4px; padding: 8px 4px; border-radius: 14px; font: 650 13px/1.1 var(--text); text-decoration: none; }
.leiste svg { width: 22px; height: 22px; }
.mit-leiste { padding-bottom: var(--leiste); }

/* ---------------------------------------------------------------- Intro wie bei Topas: Streifen in den Farben des Abzeichens (bei jedem Laden, nur mit JavaScript) */
.intro { display: none; }
.mit-intro .intro { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; color: var(--panna); cursor: pointer; animation: intro-notaus 0s 7s forwards; }
.intro-streifen { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, 1fr); }
.intro-streifen span:nth-child(1) { background: var(--espresso); }
.intro-streifen span:nth-child(2) { background: var(--rossetto); }
.intro-streifen span:nth-child(3) { background: var(--arancia); }
.intro-streifen span:nth-child(4) { background: var(--albicocca); }
.intro-streifen span:nth-child(5) { background: var(--zafferano); }
.intro-warten { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 24px; }
.intro-panino { width: clamp(72px, 7vw, 104px); transform-origin: 50% 100%; animation: hupf 1s cubic-bezier(.3, 0, .3, 1) infinite; filter: drop-shadow(0 12px 14px rgba(42, 26, 18, .3)); }
.intro-panino svg { display: block; width: 100%; height: auto; }
@keyframes hupf { 0%, 100% { transform: translateY(0) scale(1.08, .92); } 45% { transform: translateY(-26px) rotate(-7deg); } 60% { transform: translateY(-24px) rotate(5deg); } 88% { transform: translateY(0) scale(1); } }
.intro-sprueche { position: relative; width: min(90vw, 560px); height: 3.2em; font: 650 clamp(15px, .8vw + 10px, 19px)/1.2 var(--text); }
.intro-sprueche li {
  position: absolute; left: 0; right: 0; top: 0; width: max-content; max-width: 100%; margin: 0 auto; padding: 12px 22px;
  border-radius: 999px; background: var(--panna); color: var(--nero); box-shadow: 0 14px 26px -14px rgba(42, 26, 18, .55);
  opacity: 0; animation: spruch 2.7s infinite;
}
.intro-sprueche li:nth-child(2) { animation-delay: .9s; }
.intro-sprueche li:nth-child(3) { animation-delay: 1.8s; }
@keyframes spruch { 0% { opacity: 0; transform: translateY(12px); } 8%, 30% { opacity: 1; transform: none; } 36%, 100% { opacity: 0; transform: translateY(-10px); } }
.intro-balken { display: block; width: min(56vw, 300px); height: 6px; border-radius: 6px; background: rgba(244, 237, 227, .35); overflow: hidden; }
.intro-balken i { display: block; height: 100%; background: var(--panna); transform: scaleX(.04); transform-origin: 0 50%; transition: transform .8s var(--weich); }
.intro-name {
  position: relative; display: flex; align-items: flex-end; visibility: hidden; padding-bottom: .1em;
  font: 800 min(21vw, 270px)/.8 var(--titel); letter-spacing: -.03em; text-transform: uppercase;
  font-variation-settings: "SOFT" 100, "WONK" 0, "opsz" 144; filter: drop-shadow(0 18px 26px rgba(42, 26, 18, .38));
}
.intro-b { display: inline-block; transform-origin: 50% 100%; }
.intro-tag {
  position: absolute; right: -.04em; bottom: -.3em; padding: .3em .55em .26em; border-radius: .28em;
  background: var(--rossetto-scuro); color: var(--panna); font: 700 .16em/1 var(--text); letter-spacing: .2em; transform-origin: 50% 0;
}
.intro-ruf { position: absolute; left: var(--rand-l); bottom: calc(var(--rand) + env(safe-area-inset-bottom, 0px)); font: 800 clamp(15px, 1.2vw, 19px)/1 var(--titel); letter-spacing: .02em; text-transform: uppercase; }
@keyframes intro-notaus { to { visibility: hidden; opacity: 0; pointer-events: none; } }
/* Notausgang: läuft das Skript nicht, kommt der Start trotzdem nach wenigen Sekunden, gescrollt werden kann immer */
.bewegt .start h1, .bewegt .start .einblenden, .bewegt .start .bogen-figur { visibility: hidden; animation: sichtbar 0s 3.8s forwards; }
.mit-intro .start h1, .mit-intro .start .einblenden, .mit-intro .start .bogen-figur { animation-delay: 7.2s; }
@keyframes sichtbar { to { visibility: visible; } }

/* ---------------------------------------------------------------- ab Tablet und Desktop */
@media (min-width: 900px) {
  :root {
    --leiste: 0px;
    --satz: clamp(48px, min(7.2vw, 10.5svh), 128px);
    --bild-h: calc(100svh - var(--kopf) - 1.8 * var(--satz) - 2 * var(--luft) - 5svh);
    --bild-w: calc(var(--bild-h) * 10 / 11);
  }
  .karte-szene { --bild-w: min(58vw, 88svh); --bild-h: calc(var(--bild-w) * .625); }
  .nav-link { display: inline-block; }
  .leiste { display: none; }
  .mit-leiste { padding-bottom: 0; }
  .start-box { display: grid; }
  .freisteller { --frei-h: calc(var(--buehne) * .8); }
  .riesenwort { font-size: min(calc((100vw - 2 * var(--rand)) / 3.6), calc(var(--bild-h) / 1.65)); }
  .buehne .riesenwort span:nth-child(3) { display: none; }
  .deko-ecke { display: block; right: 32%; top: clamp(36px, 5vh, 60px); --deko-w: clamp(110px, 12vw, 180px); }
  .buehne .wachsbild { width: min(100%, 520px); aspect-ratio: 10 / 11; }
  .buehne .karte-box { aspect-ratio: 16 / 10; }
  .kapitel-kopf { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 6vw, 96px); }
  .caffe .stillleben { justify-self: end; }
  .tafel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hommage .innen { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: clamp(32px, 6vw, 96px); }
  .hommage .satz { grid-column: 1 / -1; }
  .stimmen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Karte in der Mitte, die Fotos in eigenen Spalten daneben: sie berühren nur den Rahmen, nie den Text */
  .wort .innen { min-height: 100svh; grid-template-columns: minmax(0, 1fr) minmax(0, 720px) minmax(0, 1fr); align-items: center; padding-block: clamp(40px, 7vh, 90px) clamp(70px, 12vh, 140px); }
  .wortkarte { grid-column: 2; grid-row: 1; width: calc(100% - 50px); }
  .wort-foto { grid-row: 1; width: min(100%, 300px); margin: 0; }
  .wort-foto-a { grid-column: 1; justify-self: end; align-self: start; margin-right: -30px; }
  .wort-foto-b { grid-column: 3; justify-self: start; align-self: end; margin-left: -30px; width: min(112%, 330px); aspect-ratio: 5 / 4; }
  .bewegt .galerie-spur { padding-left: max(36vw, calc(var(--rand-l) + 420px)); }
  .galerie-kopf { max-width: 34vw; }
  .zeiten-flaeche .innen { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); min-height: 100svh; }
  .scheibe { width: min(42vw, 620px); justify-self: end; margin-right: calc(-1 * var(--rand-r) - 7vw); }
  .anfahrt-weg { max-width: 640px; }
  .punkte-ueber text { font-size: 14px; stroke-width: 4px; }
  .fuss { grid-template-columns: auto 1fr auto; }
  .fuss nav { justify-content: center; }
}

/* ---------------------------------------------------------------- ab 1100 Pixel: waagrecht durchs Tor */
@media (min-width: 1100px) {
  /* „Bello e“ läuft links in den Bogen, „buonissimo.“ kommt rechts heraus; Maße aus den gemessenen Breiten (2,55 und 4,76 em), das b bleibt lesbar */
  .start .innen {
    display: block; height: 100svh; min-height: 0; max-width: none; padding: 0; container-type: inline-size;
    --tor-h: min(70svh, 640px);
    --tor-w: calc(var(--tor-h) * 5 / 7);
    --tor-gr: min(200px, calc((100cqw - 2 * var(--rand) - var(--tor-w)) / 7.1));
    --tor-x: calc(var(--rand) + 2.38 * var(--tor-gr) + var(--tor-w) / 2);
    --tor-oben: calc(100svh - var(--tor-h));
  }
  .tor-titel { position: static; padding: 0; }
  .bogen-figur { top: var(--tor-oben); left: calc(var(--tor-x) - var(--tor-w) / 2); }
  .tor-links { top: calc(var(--tor-oben) + var(--tor-h) * .15); left: 0; width: var(--tor-x); text-align: right; padding-right: calc(var(--tor-w) / 2 - .2em); }
  .tor-rechts { top: calc(var(--tor-oben) + var(--tor-h) * .5); left: var(--tor-x); right: 0; text-align: left; padding-left: calc(var(--tor-w) / 2 - .06em); }
  .titel-zusatz { position: absolute; left: var(--rand-l); top: calc(var(--tor-oben) + var(--tor-h) * .15 + 1.02 * var(--tor-gr) + 14px); width: calc(var(--tor-x) - var(--tor-w) / 2 - var(--rand-l) - 28px); max-width: none; }
  .start .lead { position: absolute; left: var(--rand-l); bottom: 40px; width: calc(var(--tor-x) - var(--tor-w) / 2 - var(--rand-l) - 32px); font-size: clamp(17px, .5vw + 12px, 20px); }
  .start-box { position: absolute; right: var(--rand-r); bottom: 40px; justify-items: end; text-align: right; }
  .start-box .knoepfe { justify-content: flex-end; }
  .deko-start-links, .deko-start-rechts { display: block; }
  .deko-start-links { left: calc(var(--rand-l) + 3%); top: 14%; --deko-w: clamp(130px, 11vw, 200px); --deko-r: -10deg; }
  .deko-start-rechts { right: calc(var(--rand-r) + 6%); top: 16%; --deko-w: clamp(120px, 10vw, 180px); --deko-r: 8deg; }
}

/* ---------------------------------------------------------------- Impressum, Datenschutz, 404 */
.recht { max-width: 74ch; margin: 0 auto; padding: calc(var(--kopf) + 60px) var(--rand-r) 90px var(--rand-l); }
.recht h1 { font-family: var(--titel); font-weight: 800; font-size: clamp(44px, 6vw, 84px); line-height: .95; letter-spacing: -.03em; margin-bottom: 36px; text-wrap: balance; }
.recht h2 { font-family: var(--titel); font-weight: 700; font-size: clamp(22px, 1vw + 16px, 28px); line-height: 1.2; margin: 40px 0 10px; }
.recht p, .recht li { margin: 0 0 12px; }
.recht ul { list-style: disc; padding-left: 1.2em; }
.recht .stand { margin-top: 40px; font-size: 15px; color: var(--ciottolo); }
.platzhalter { background: var(--albicocca); color: var(--nero); padding: 1px 6px; border-radius: 5px; }
.recht-seite { background: var(--panna); }
.recht-seite .band { position: fixed; }

@media (prefers-reduced-motion: reduce) {
  .intro { display: none !important; }
  .knopf, .kopf-logo { transition: none; }
  .status.offen::before, .status-chip.offen::before { animation: none; }
  .bewegt .start h1, .bewegt .start .einblenden, .bewegt .start .bogen-figur { visibility: visible; animation: none; }
}