/* Route 1: Bento. Schwarzer Grund, Kacheln in Creme, Sandstein und Oliv,
   große Rundungen außen, kleine innen. Die Platte sitzt zwischen "Über uns"
   und "Was läuft".
   Schriftgrößen folgen der Bühne (Container-Einheiten über --s), damit die
   Komposition in jeder Fensterhöhe ohne Scrollen und ohne Abschneiden passt. */

:root {
  --gap: 10px;
  --pad: 14px;
  --r: 18px;     /* innere Ecken */
  --R: 52px;     /* äußere Ecken der Komposition */
  --tp: clamp(18px, 1.9vw, 30px);   /* Innenabstand aller Kacheln */
  --ink: #111111;
  --ground: #0c0c0b;
  --coal: #181816;
  --hair-brass: rgba(198, 161, 90, .38);
  --hair-light: rgba(245, 241, 232, .3);
  --hair-dark: rgba(17, 17, 17, .15);
  --focus: #C6A15A;         /* Fokusring auf dunklem Grund */
  --focus-light: #111111;   /* Fokusring auf hellen Kacheln */
  color-scheme: dark;
}

html { background: var(--ground); overflow-x: clip; }
body {
  background: var(--ground);
  color: var(--creme);
  min-height: 100dvh;
  overflow-x: clip;
}

/* Ältere Browser ohne overflow: clip */
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}

/* Papierkorn über allem, fest und ohne Zeigerereignisse */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .9 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
}

.frame {
  /* eine Einheit der Bühne: 1 % der Breite, gedeckelt durch die Höhe */
  /* Kette und Tonarm ragen über den Rand: hier abschneiden, damit die Seite nie breiter als der
     Bildschirm wird (am Handy ließ sie sich sonst seitlich verschieben) */
  overflow-x: clip;
  --s: min(1cqw, 1.26cqh);
  height: 100dvh;
  min-height: 680px;
  padding: var(--pad);
  display: grid;
  gap: var(--gap);
  grid-template-columns: minmax(0, 1fr) clamp(300px, 27.5vw, 460px);
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding-bottom: 8px;
}

/* Druckzeile unter dem Raster: Impressum und Datenschutz, klein wie die Zeile unter einem Plakat */
.legal {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: -2px;
  padding: 0 calc(var(--R) * .55);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, .5);
}
.legal nav { display: flex; gap: 24px; }
.legal a { padding: 4px 0; transition: color .3s; }
.legal a:hover, .legal a[aria-current="page"] { color: var(--creme); }

/* ---------- Kachel ---------- */
.t {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r);
  isolation: isolate;
}
/* Nur beim ersten Laden bauen sich die Kacheln nacheinander auf.
   Wechsel zwischen Ansichten laufen über den Bühnenübergang weiter unten. */
.is-first .home .t, .is-first .side .t {
  animation: tile-in .8s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}
@keyframes tile-in {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to { opacity: 1; transform: none; }
}

.t-bg, .vh img, .v-pic img, .t-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}
a.t:hover .t-bg, .t-menu:hover .t-bg, a.t:hover .t-photo img { transform: scale(1.04); }

/* ---------- Schrift ---------- */
.t-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, calc(var(--s) * 6.7), 86px);
  line-height: .92;
  letter-spacing: -.02em;
}
.t-title em, .v-title em { font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.t-line {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(15px, calc(var(--s) * 1.95), 22px);
  line-height: 1.22;
  text-wrap: balance;
}

/* Eine Auszeichnung für alle kleinen Versalzeilen */
.go, .nav, .parts, .t-kicker, .t-mon, .v-sub, .mg-name, .ev-mon, .ev-when, .nw-date, .v-role,
.v-tabs button, .f label, .f-submit, .done-kicker, .done-again {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  line-height: 1.35;
  text-transform: uppercase;
}

.go {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}
.go .ico {
  width: 34px; height: 34px;
  padding: 9.5px;
  border: 1px solid currentColor;
  border-radius: 50%;
  transition: transform .5s var(--ease), background-color .3s, color .3s;
}
a:hover > .go .ico, a.go:hover .ico { transform: rotate(45deg); }

/* ---------- Kopf ---------- */
.t-head {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 34px);
  height: clamp(52px, 7vh, 66px);
  padding: 0 clamp(18px, 1.9vw, 28px) 0 clamp(20px, 2.1vw, 32px);
  border-radius: var(--R) var(--r) var(--r) var(--r);
  background: var(--creme);
  color: var(--ink);
}
.is-first .t-head { animation: tile-in .8s var(--ease) both; }
.wordmark {
  font-family: var(--display);
  font-size: clamp(19px, 1.8vw, 28px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .01em;
  /* TAN Ashford sitzt in seiner Zeile weit oben (Versalhöhe 1,16 em über einer kurzen Unterlänge).
     .33em Polster oben rückt die Buchstaben optisch in die Mitte der Kopfzeile. */
  padding-top: .33em;
}
.nav {
  margin-left: auto;
  display: flex;
  gap: clamp(12px, 1.85vw, 32px);
}
.nav a {
  position: relative;
  padding: 10px 0;
  white-space: nowrap;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: .18em; bottom: 4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.t-head a:focus-visible { outline-color: var(--focus-light); }

/* ---------- Bühne ---------- */
.stage {
  grid-column: 1;
  grid-row: 2;
  position: relative;
  min-height: 0;
  outline: none;
}
.home {
  height: 100%;
  display: grid;
  gap: var(--gap);
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1.2fr) minmax(0, 1fr);
}
.home[hidden] { display: none; }

/* Tisch */
.t-tisch {
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  border-radius: var(--r) var(--r) var(--r) var(--R);
  background: var(--oliv);
  color: var(--creme);
}
.t-tisch .t-top {
  position: relative;
  padding: var(--tp) var(--tp) clamp(16px, calc(var(--s) * 2.4), 30px);
}
.t-tisch .t-line { margin-top: clamp(10px, calc(var(--s) * 1.4), 16px); max-width: 13.5em; color: rgba(245, 241, 232, .88); }
.rings {
  position: absolute;
  right: var(--tp);
  top: calc(var(--tp) + 3px);
  width: clamp(40px, calc(var(--s) * 5.4), 70px);
  fill: none;
  stroke: rgba(245, 241, 232, .55);
  stroke-width: .8px;
}
.rings circle, .motif * { vector-effect: non-scaling-stroke; }
.t-photo {
  position: relative;
  isolation: isolate;   /* die Ebenen des Bildwechsels bleiben unter dem Knopf der Kachel */
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-radius: 0 clamp(90px, 10vw, 190px) 0 0;
}
/* Bildwechsel (app.js): Das nächste Motiv blendet über dem alten ein, jedes zieht dabei ganz
   langsam näher. Hover nutzt transform, die Fahrt scale, so stören sie sich nicht. */
.t-photo img { object-position: 42% 50%; }
.t-photo img, .v-gal img {
  opacity: 0;
  transition: opacity 1.1s cubic-bezier(.45, 0, .55, 1), transform 1.4s var(--ease);
}
.t-photo img.is-on, .v-gal img.is-on { opacity: 1; }
.t-photo img.is-on, .t-photo img.is-out { animation: photo-drift 5.5s linear both; }
.v-gal img.is-on, .v-gal img.is-out { animation: photo-drift 9s linear both; }
@keyframes photo-drift {
  from { scale: 1; }
  to { scale: 1.055; }
}
.t-tisch .go {
  position: absolute;
  left: var(--tp); right: var(--tp);
  bottom: var(--tp);
  max-width: 252px;
  justify-content: space-between;
  padding: 6px 6px 6px 20px;
  border-radius: 999px;
  background: var(--creme);
  color: var(--ink);
}
.t-tisch .go .ico { background: var(--ink); color: var(--creme); border-color: var(--ink); }

/* Karte: Titel unten links, darunter die vier Tageszeiten als feine Zeile */
.t-menu {
  grid-column: 2 / 4;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--tp);
  color: var(--creme);
}
.t-menu .t-bg { object-position: 56% 50%; }
.t-menu::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(0deg, rgba(12, 10, 8, .86) 0%, rgba(12, 10, 8, .62) 20%, rgba(12, 10, 8, 0) 60%),
    linear-gradient(90deg, rgba(12, 10, 8, .66) 0%, rgba(12, 10, 8, .3) 34%, rgba(12, 10, 8, 0) 60%);
}
.t-cover { position: absolute; inset: 0; z-index: 2; }
.t-cover:focus-visible { outline-offset: -5px; border-radius: 14px; }
.t-menu .t-body { position: relative; z-index: 3; pointer-events: none; }
.t-menu .t-title { font-size: clamp(60px, calc(var(--s) * 10.8), 140px); font-weight: 300; line-height: .86; }
.t-menu .t-line { margin-top: clamp(8px, calc(var(--s) * 1.2), 14px); }
.parts {
  position: relative;
  z-index: 3;
  margin-top: clamp(12px, calc(var(--s) * 1.9), 22px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(245, 241, 232, .4);
}
.parts a {
  position: relative;
  margin-right: clamp(10px, 1.6vw, 24px);
  padding: 13px 0 1px;
  color: rgba(245, 241, 232, .86);
  transition: color .3s;
}
.parts a::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 1px;
  background: var(--creme);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
}
.parts a:hover, .parts a.is-now { color: var(--creme); }
.parts a:hover::before, .parts a:focus-visible::before, .parts a.is-now::before { transform: scaleX(1); }
.parts a:focus-visible { outline-offset: 4px; }

/* Feiern */
.t-feiern {
  display: flex;
  flex-direction: column;
  padding: var(--tp);
  background: var(--coal);
  color: var(--creme);
  box-shadow: inset 0 0 0 1px var(--hair-brass);
}
.motif {
  width: clamp(84px, calc(var(--s) * 13), 176px);
  margin-bottom: auto;
  fill: none;
  stroke: var(--messing);
  stroke-width: .9px;
}
.t-feiern .t-line { margin-top: clamp(6px, calc(var(--s) * .8), 10px); }
.t-feiern .go { margin-top: clamp(14px, calc(var(--s) * 1.8), 20px); justify-content: space-between; }

/* Kontakt */
.t-kontakt {
  display: flex;
  flex-direction: column;
  padding: var(--tp);
  background: var(--sandstein);
  color: var(--ink);
}
.t-kicker {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 2px 12px;
}
.t-status {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: var(--oliv);
}
.t-num {
  margin: auto 0 0 -.04em;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(92px, calc(var(--s) * 16.6), 230px);
  line-height: .74;
  letter-spacing: -.04em;
  font-variant-numeric: lining-nums;
  color: var(--oliv);
}
.t-kontakt .t-line { margin-top: clamp(10px, calc(var(--s) * 1.4), 16px); max-width: 15em; }
.t-kontakt .go { margin-top: clamp(12px, calc(var(--s) * 1.6), 18px); justify-content: space-between; }

/* ---------- Rechte Spalte: Haus, Platte, Termine ---------- */
.side {
  grid-column: 2;
  grid-row: 1 / 3;
  position: relative;
  container-type: size;
  --yc: 45cqh;
  --deck: min(100cqw, 90cqh - 230px, 110cqh - 320px);
}
.t-about {
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(var(--yc) - var(--gap) / 2);
  border-radius: var(--r) var(--R) 0 0;
  color: var(--creme);
  -webkit-mask: radial-gradient(circle calc(var(--deck) / 2) at 50% calc(100% + var(--gap) / 2), transparent calc(100% - .7px), #000 100%);
  mask: radial-gradient(circle calc(var(--deck) / 2) at 50% calc(100% + var(--gap) / 2), transparent calc(100% - .7px), #000 100%);
}
/* Das Bild steht etwas höher als die Kachel und hängt unten an: so fällt die
   angeschnittene Pendelleuchte am oberen Bildrand weg */
.t-about .t-bg { inset: auto 0 0 0; height: 120%; object-position: 46% 100%; }
.t-about-m, .hero-foot { display: none; }
.t-about::after, .t-about-m::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(12, 10, 8, .6) 0%, rgba(12, 10, 8, .22) 30%, rgba(12, 10, 8, 0) 52%),
    linear-gradient(100deg, rgba(12, 10, 8, .34) 0%, rgba(12, 10, 8, 0) 46%);
}
.t-about .t-title, .t-about-m .t-title {
  position: absolute;
  z-index: 1;
  left: var(--tp);
  top: calc(var(--tp) - 4px);
  font-size: clamp(34px, 3.4vw, 58px);
}
.go-solo {
  position: absolute;
  z-index: 1;
  right: var(--tp);
  top: var(--tp);
}

.deck {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: var(--yc);
  width: var(--deck);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  view-transition-name: deck;
}
.deck-tt.tt { position: absolute; inset: 6.5%; }
.ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.ring text {
  fill: var(--messing);
  font-family: var(--sans);
  font-size: 4.9px;
  font-weight: 500;
  letter-spacing: .28em;
}
.flip {
  position: absolute;
  left: 84%; top: 84%;
  width: clamp(44px, 11%, 50px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--creme);
  color: var(--ink);
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 var(--gap) var(--ground);
  transition: transform .5s var(--ease), background-color .3s;
}
.flip:hover { transform: translate(-50%, -50%) rotate(-18deg) scale(1.06); background: var(--sandstein); }
.flip:active { transform: translate(-50%, -50%) scale(.95); }
.flip:focus-visible { outline-offset: 2px; }
.flip-letter { font-family: var(--serif); font-weight: 500; font-size: 23px; line-height: 1; }

.t-news {
  position: absolute;
  inset: calc(var(--yc) + var(--gap) / 2) 0 0 0;
  border-radius: 0 0 var(--R) var(--r);
  background: var(--creme);
  color: var(--ink);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: end;
  align-items: end;
  gap: 14px clamp(14px, 1.4vw, 22px);
  padding: 0 var(--tp) var(--tp);
  -webkit-mask: radial-gradient(circle calc(var(--deck) / 2) at 50% calc(0% - var(--gap) / 2), transparent calc(100% - .7px), #000 100%);
  mask: radial-gradient(circle calc(var(--deck) / 2) at 50% calc(0% - var(--gap) / 2), transparent calc(100% - .7px), #000 100%);
}
.t-date { display: flex; flex-direction: column; align-items: flex-start; color: var(--oliv); }
.t-day { font-family: var(--serif); font-weight: 300; font-size: clamp(68px, 7.2vw, 124px); line-height: .76; letter-spacing: -.04em; font-variant-numeric: lining-nums; }
.t-mon { margin-top: 10px; }
.t-news .t-title { font-size: clamp(28px, 2.6vw, 42px); white-space: nowrap; }
.t-news .t-line { margin-top: 8px; font-size: clamp(15px, 1.2vw, 19px); text-wrap: pretty; }
.t-news .go { grid-column: 1 / -1; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--hair-dark); }

/* ---------- Unterseiten ---------- */
.view {
  position: absolute;
  inset: 0;
  display: grid;
  gap: var(--gap);
}
.view[hidden] { display: none; }
.view .t { padding: var(--tp); }
.view figure.t { padding: 0; }

.back {
  position: absolute;
  z-index: 5;
  top: 10px; right: 10px;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--creme);
  box-shadow: 0 0 0 1px rgba(245, 241, 232, .28);
  transition: transform .5s var(--ease), background-color .3s, color .3s;
}
.back .ico { width: 16px; height: 16px; }
.back:hover { transform: rotate(90deg); background: var(--creme); color: var(--ink); }
.back:focus-visible { outline-offset: 2px; }
body[data-view="home"] .back { display: none; }

.olive { background: var(--oliv); color: var(--creme); }
.dark { background: var(--coal); color: var(--creme); box-shadow: inset 0 0 0 1px var(--hair-brass); }
.creme { background: var(--creme); color: var(--ink); }
.sand { background: var(--sandstein); color: var(--ink); }

.v-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, calc(var(--s) * 7.2), 92px);
  line-height: .92;
  letter-spacing: -.02em;
}
.v-line { font-family: var(--serif); font-style: italic; font-size: clamp(16px, calc(var(--s) * 2.1), 23px); line-height: 1.2; margin-top: 10px; }
.v-lead { font-family: var(--serif); font-weight: 500; font-size: clamp(19px, calc(var(--s) * 2.5), 28px); line-height: 1.18; text-wrap: balance; }
.view p + p { margin-top: .8em; }
.view .t > p:not([class]), .view .t > div > p:not([class]) {
  max-width: 46ch;
  font-size: clamp(13px, calc(var(--s) * 1.42), 15px);
  line-height: 1.6;
  text-wrap: pretty;
}

.vh figcaption {
  position: absolute;
  z-index: 1;
  left: var(--tp);
  right: var(--tp);
  bottom: calc(var(--tp) - 2px);
  color: var(--creme);
}
.vh::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(12, 10, 8, .78) 0%, rgba(12, 10, 8, .3) 34%, rgba(12, 10, 8, 0) 60%);
}
.vh-tisch::after { display: none; }

/* Karte */
.v-karte { grid-template-columns: min(41.5cqh, 30cqw) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.vh-karte { grid-row: 1 / 3; border-radius: var(--r) var(--r) var(--r) var(--R); }
.vh-karte img, .v-more img { transition: opacity .85s cubic-bezier(.33, 0, .2, 1), transform 1s cubic-bezier(.33, 0, .2, 1), filter .85s cubic-bezier(.33, 0, .2, 1); }
.vh-karte img.is-swapping, .v-more img.is-swapping { opacity: .2; transform: scale(1.04); filter: blur(16px) brightness(.4); transition-duration: .45s; transition-timing-function: cubic-bezier(.45, 0, .55, 1); }
/* Zweites Bild unter kurzen Karten (app.js setzt .has-more, wenn Platz ist) */
.v-more { display: none; }
.v-karte.has-more { grid-template-rows: auto auto minmax(0, 1fr); }
.v-karte.has-more .vh-karte { grid-row: 1 / 4; }
.v-karte.has-more .v-more { display: block; border-radius: var(--r) clamp(70px, calc(var(--s) * 13), 170px) var(--r) var(--r); }
.v-karte.has-more .v-scroll { height: auto; overflow: visible; -webkit-mask: none; mask: none; }
.v-tabs.t {
  display: flex;
  gap: 6px;
  padding: 10px 60px 10px 10px;
  background: var(--creme);
}
.v-tabs button {
  flex: 1;
  height: 40px;
  border-radius: 999px;
  color: var(--ink);
  transition: background-color .35s, color .35s;
}
.v-tabs button:hover { background: rgba(17, 17, 17, .07); }
.v-tabs button[aria-selected="true"] { background: var(--ink); color: var(--creme); }
.v-tabs button:focus-visible { outline-color: var(--focus-light); outline-offset: 2px; }
.v-list.t {
  padding: 0;
  background: var(--creme);
  color: var(--ink);
}
.v-scroll {
  height: 100%;
  padding: var(--tp);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(17, 17, 17, .28) transparent;
  /* Zeilen laufen oben und unten weich aus, wenn die Karte länger ist als die Kachel */
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 16px, #000 calc(100% - 26px), transparent 100%);
  mask: linear-gradient(180deg, transparent 0, #000 16px, #000 calc(100% - 26px), transparent 100%);
}
.v-scroll:focus-visible { outline-color: var(--focus-light); outline-offset: -6px; border-radius: 14px; }
.mcols {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  align-items: start;
  gap: 0 clamp(20px, calc(var(--s) * 3), 46px);
  transition: opacity .8s cubic-bezier(.33, 0, .2, 1), transform .95s cubic-bezier(.33, 0, .2, 1), filter .8s cubic-bezier(.33, 0, .2, 1);
  transform-origin: 50% 30%;
}
.mcols.is-swapping { opacity: 0; transform: scale(.98); filter: blur(12px); transition-duration: .42s; transition-timing-function: cubic-bezier(.45, 0, .55, 1); }
.mcol { display: grid; align-content: start; gap: clamp(18px, calc(var(--s) * 2.6), 34px); }
.mg-name { padding-bottom: 8px; border-bottom: 1px solid var(--hair-dark); color: var(--terrakotta); }
.mg-note { margin-top: 8px; font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1.2; color: rgba(17, 17, 17, .68); }
.mg-list { margin-top: clamp(8px, calc(var(--s) * 1.1), 12px); display: grid; gap: clamp(3px, calc(var(--s) * .6), 8px); }
.mi { display: grid; gap: 1px; }
.mi-n {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(17.5px, calc(var(--s) * 1.95), 22px);
  line-height: 1.14;
  padding-left: .7em;
  text-indent: -.7em;
}
.mi-d { padding-bottom: 3px; font-size: 12px; line-height: 1.4; color: rgba(17, 17, 17, .68); }
.fine { margin-top: clamp(18px, calc(var(--s) * 2.6), 30px); font-size: 12px; line-height: 1.5; color: rgba(17, 17, 17, .66); }

/* Tisch */
.v-tisch { grid-template-columns: minmax(0, .8fr) minmax(0, .95fr) minmax(0, .7fr); grid-template-rows: minmax(0, 1fr) minmax(min-content, .6fr); }
.vh-tisch { grid-row: 1 / 3; border-radius: var(--r) var(--r) var(--r) var(--R); }
.vh-tisch img { object-position: 40% 50%; }
.v-form { display: flex; flex-direction: column; overflow: auto; scrollbar-width: thin; }
.v-tisch .v-form { grid-column: 2 / 4; }
.v-form .v-title { padding-right: 46px; font-size: clamp(40px, calc(var(--s) * 6.6), 84px); }
.v-form .v-lead { margin-top: clamp(8px, calc(var(--s) * 1.2), 14px); max-width: 26em; }
.v-form .v-sub { padding-right: 46px; }
.v-slot { margin-top: auto; padding-top: clamp(16px, calc(var(--s) * 3), 40px); }

.v-hours .v-sub { margin-bottom: clamp(8px, calc(var(--s) * 1.2), 14px); }
.v-tisch .v-hours { display: flex; flex-direction: column; }
.v-tisch .v-hours .hours { margin-top: auto; }
.hours { display: grid; }
.hours div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: clamp(4px, calc(var(--s) * .62), 7px) 0; border-top: 1px solid var(--hair-dark); }
.hours div:first-child { border-top: 0; }
.olive .hours div { border-color: rgba(245, 241, 232, .22); }
.hours dt { font-size: 13px; line-height: 1.35; }
.hours dd { font-family: var(--serif); font-size: 17px; line-height: 1.2; white-space: nowrap; }
/* Heute: kleiner Punkt statt farbiger Zeile */
.hours .is-today dt { font-weight: 500; }
.hours .is-today dt::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin: 0 8px 2px 0;
  border-radius: 50%;
  background: var(--terrakotta);
}
.olive .hours .is-today dt::before { background: var(--messing); }

.v-cross { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.cross-line { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, calc(var(--s) * 3.1), 38px); line-height: 1.04; letter-spacing: -.015em; text-wrap: balance; }
.cross-line em { font-style: italic; }
.v-cross .go { justify-content: space-between; }
/* Der Runner läuft in der Kontakt-Kachel "Du kommst vorbei?" zwischen Text und Knopf.
   Tags hat er die Farbe der Kachel im Rücken, nachts wird daraus ein helles Siegel. */
.v-runner {
  --rs: clamp(84px, calc(var(--s) * 17), 210px);
  margin: auto;
  background: var(--creme);
}

/* Feiern */
.v-feiern { grid-template-columns: minmax(0, .85fr) minmax(0, 1.2fr); grid-template-rows: minmax(120px, 1fr) auto; }
.vh-feiern { grid-column: 1 / 3; }
/* unten anhängen: die ganze Tafel bleibt im Bild, die Kugelleuchten werden nicht halb angeschnitten */
.vh-feiern img { object-position: 50% 100%; }
.vh-feiern::after {
  background:
    linear-gradient(0deg, rgba(12, 10, 8, .84) 0%, rgba(12, 10, 8, .4) 36%, rgba(12, 10, 8, 0) 66%),
    linear-gradient(90deg, rgba(12, 10, 8, .5) 0%, rgba(12, 10, 8, 0) 60%);
}
.vh-feiern .v-title { font-size: clamp(38px, calc(var(--s) * 6.2), 80px); text-wrap: balance; }
.v-feiern .v-text { display: flex; flex-direction: column; border-radius: var(--r) var(--r) var(--r) var(--R); }
.v-feiern .v-text .v-lead { margin-bottom: clamp(10px, calc(var(--s) * 1.4), 16px); }
.facts { margin-top: auto; padding-top: clamp(16px, calc(var(--s) * 2.4), 28px); display: grid; font-family: var(--serif); font-size: clamp(16px, calc(var(--s) * 1.8), 19px); line-height: 1.2; }
.facts li { padding: clamp(7px, calc(var(--s) * .95), 11px) 0; border-top: 1px solid rgba(245, 241, 232, .28); }
.facts li:last-child { padding-bottom: 0; }
.v-feiern .v-slot { padding-top: clamp(12px, calc(var(--s) * 1.8), 20px); }

/* Termine */
.v-news { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.v-headline.t {
  grid-column: 1 / 3;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px clamp(18px, calc(var(--s) * 3), 40px);
  padding: clamp(14px, calc(var(--s) * 2), 24px) 64px clamp(16px, calc(var(--s) * 2.3), 28px) var(--tp);
}
.v-headline .v-title { font-size: clamp(40px, calc(var(--s) * 6), 76px); }
.v-headline .v-line { margin-top: 0; }
.ev-list { grid-column: 1; grid-row: 2; display: grid; grid-auto-rows: minmax(0, 1fr); min-height: 0; }
.ev.t {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(14px, calc(var(--s) * 2.4), 30px);
  padding: 8px var(--tp);
  border-radius: 0;
  background: var(--creme);
  color: var(--ink);
}
.ev.t:first-child { margin-bottom: var(--gap); border-radius: var(--r); background: var(--oliv); color: var(--creme); }
.ev.t:only-child { border-bottom-left-radius: var(--R); }
.ev.t:nth-child(2) { border-top-left-radius: var(--r); border-top-right-radius: var(--r); }
.ev.t:nth-child(n + 2):last-child { border-bottom-right-radius: var(--r); border-bottom-left-radius: var(--R); }
/* Die Zeilen der Liste überlappen um 1 px, damit zwischen ihnen kein Grund durchscheint */
.ev.t:nth-child(n + 3) { margin-top: -1px; }
.ev:nth-child(n + 3)::before {
  content: "";
  position: absolute;
  left: var(--tp); right: var(--tp); top: 0;
  height: 1px;
  background: var(--hair-dark);
}
.ev-date { display: grid; justify-items: start; min-width: clamp(54px, calc(var(--s) * 7.2), 92px); }
.ev-day { font-family: var(--serif); font-weight: 300; font-size: clamp(46px, calc(var(--s) * 6.2), 80px); line-height: .78; letter-spacing: -.04em; font-variant-numeric: lining-nums; }
.ev-mon { margin-top: 8px; }
.ev-when { opacity: .78; }
.ev-title { margin-top: 5px; font-family: var(--serif); font-weight: 500; font-size: clamp(19px, calc(var(--s) * 2.5), 28px); line-height: 1.08; text-wrap: balance; }
.ev-text { margin-top: 4px; font-size: clamp(12.5px, calc(var(--s) * 1.32), 14px); line-height: 1.4; opacity: .82; text-wrap: pretty; }
.news-list { grid-column: 2; grid-row: 2; display: grid; gap: var(--gap); grid-auto-rows: minmax(0, 1fr); min-height: 0; }
.nw.t {
  display: grid;
  grid-template-columns: 38% minmax(0, 1fr);
  padding: 0;
  background: var(--sandstein);
  color: var(--ink);
}
.nw figure { position: relative; overflow: hidden; border-radius: 0 999px 999px 0; }
.nw figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nw div { align-self: center; padding: 12px var(--tp) 12px clamp(14px, calc(var(--s) * 2), 26px); }
.nw-date { color: var(--terrakotta); }
.nw-title { margin-top: 6px; font-family: var(--serif); font-weight: 500; font-size: clamp(19px, calc(var(--s) * 2.3), 26px); line-height: 1.08; text-wrap: balance; }
.nw-text { margin-top: 6px; font-size: clamp(12.5px, calc(var(--s) * 1.32), 14px); line-height: 1.45; text-wrap: pretty; }

/* Haus */
.v-haus { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1.2fr) minmax(0, 1fr); }
.v-haus .v-text { display: flex; flex-direction: column; overflow: auto; scrollbar-width: thin; }
.v-haus .v-text .v-lead { padding-right: 40px; }
.v-body { margin-top: auto; }
.v-body::before { content: ""; display: block; height: 1px; margin: 16px 0 clamp(12px, calc(var(--s) * 1.8), 20px); background: var(--hair-dark); }
.v-host {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(16px, calc(var(--s) * 2.6), 34px);
  border-radius: var(--r) var(--r) var(--r) var(--R);
}
.v-host img {
  width: clamp(92px, calc(var(--s) * 13.5), 176px);
  aspect-ratio: 1;
  object-fit: cover;
  object-position: 50% 14%;
  border-radius: 50%;
  filter: saturate(.9) contrast(1.03);
}
.v-host .v-sub { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, calc(var(--s) * 3.8), 46px); letter-spacing: -.02em; text-transform: none; line-height: 1; }
.v-role { margin-top: 8px; color: rgba(245, 241, 232, .8); }
.v-host p[data-about] { margin-top: 12px; font-family: var(--serif); font-size: clamp(16px, calc(var(--s) * 1.9), 21px); line-height: 1.28; max-width: 30em; text-wrap: pretty; }

/* Kontakt */
.v-kontakt { grid-template-columns: minmax(0, 1.15fr) minmax(0, .9fr) minmax(0, .9fr); grid-template-rows: minmax(0, 1.1fr) minmax(min-content, 1fr); }
.v-addr { display: flex; flex-direction: column; }
/* Stadtplan hinter der Adresse, Ton in Ton. Der Plan (3:2) füllt die Kachel und hängt unten rechts an,
   so bleibt das Singerhaus bei jeder Kachelform im Bild und links oben Platz für die Schrift. */
.v-map { position: absolute; inset: 0; z-index: -1; overflow: hidden; container: vmap / size; }
.v-map::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(98deg, var(--map-ground) 0%, color-mix(in srgb, var(--map-ground) 84%, transparent) 26%, transparent 58%),
    linear-gradient(180deg, color-mix(in srgb, var(--map-ground) 70%, transparent) 0%, transparent 34%);
}
.v-map-in { position: absolute; right: 0; bottom: 0; width: max(100cqw, 150cqh); aspect-ratio: 3 / 2; container-type: inline-size; }
.v-addr {
  --map-ground: var(--sandstein);
  --map-build: rgba(17, 17, 17, .085);
  --map-road: #F3EFE7;
  --map-water: rgba(140, 150, 138, .5);
  --map-green: rgba(61, 74, 58, .1);
  --map-church: rgba(17, 17, 17, .32);
  --map-home: var(--terrakotta);
  --map-ink: var(--ink);
}
.plan { position: absolute; inset: 0; width: 100%; height: 100%; }
.p-g { fill: var(--map-green); }
.p-w { fill: var(--map-water); }
.p-s { fill: none; stroke: var(--map-water); stroke-width: 3; }
.p-r { fill: none; stroke: var(--map-road); stroke-linecap: round; stroke-linejoin: round; }
.p-r1 { stroke-width: 15; }
.p-r2 { stroke-width: 10; }
.p-r3 { stroke-width: 5; }
.p-pa { fill: var(--map-road); }
.p-b { fill: var(--map-build); }
.p-k { fill: var(--map-church); }
.p-h { fill: var(--map-home); }
.p-ring { fill: none; stroke: var(--map-ink); stroke-width: 1px; vector-effect: non-scaling-stroke; }
/* Beschriftung */
.pl { position: absolute; white-space: nowrap; color: var(--map-ink); line-height: 1; }
.pl-haus { transform: translate(calc(-100% - 3.6cqw), -52%); font-family: var(--serif); font-style: italic; font-size: clamp(14px, 3.6cqw, 19px); }
.pl-kirche, .pl-str, .pl-isar { font-size: clamp(8.5px, 1.9cqw, 10.5px); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; opacity: .6; }
.pl-kirche { transform: translate(-50%, 3.4cqw); }
.pl-str, .pl-isar { transform: translate(-50%, -50%) rotate(var(--a)); }
.pl-isar { letter-spacing: .5em; opacity: .5; }
/* Straßen- und Flussname nur in breiten Kacheln, sonst kreuzen sie die Adresse */
@container vmap (max-width: 520px) { .pl-str, .pl-isar { display: none; } }
.v-osm { position: absolute; right: var(--tp); bottom: calc(var(--tp) + 8px); font-size: 9.5px; letter-spacing: .04em; color: color-mix(in srgb, var(--map-ink) 62%, transparent); }
.v-osm:hover { color: var(--map-ink); text-decoration: underline; text-underline-offset: 3px; }
.v-addr .v-lead { margin-top: 14px; }
.v-addr .go { margin-top: auto; align-self: flex-start; }
.v-addr .go:focus-visible { outline-color: var(--focus-light); }
.v-kontakt .v-pic { grid-column: 2 / 4; }
.v-kontakt .v-pic img { object-position: 50% 66%; }
.v-kontakt .v-hours { display: flex; flex-direction: column; border-radius: var(--r) var(--r) var(--r) var(--R); }
.v-note {
  margin-top: auto !important;
  padding-top: 12px;
  max-width: none !important;
  font-size: 11.5px !important;
  line-height: 1.5 !important;
  color: rgba(245, 241, 232, .8);
}
.v-note::before { content: ""; display: block; height: 1px; margin-bottom: 11px; background: rgba(245, 241, 232, .22); }
/* Im Netz: Instagram und Google als zwei ruhige Zeilen am Fuß der Kachel */
.v-social { display: flex; flex-direction: column; }
.soc { margin-top: auto; }
.soc a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 14px;
  padding: clamp(10px, calc(var(--s) * 1.5), 18px) 0;
  border-top: 1px solid var(--hair-light);
}
.soc li:last-child a { padding-bottom: 0; }
.soc-name { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, calc(var(--s) * 3), 36px); line-height: 1; letter-spacing: -.012em; }
.soc-line { grid-column: 1; margin-top: 6px; font-size: clamp(12px, calc(var(--s) * 1.3), 13.5px); line-height: 1.3; color: rgba(245, 241, 232, .72); }
.soc .ico {
  grid-column: 2; grid-row: 1 / 3;
  width: 34px; height: 34px;
  padding: 9.5px;
  border: 1px solid currentColor;
  border-radius: 50%;
  transition: transform .5s var(--ease), background-color .3s, color .3s;
}
.soc a:hover .ico, .soc a:focus-visible .ico { transform: rotate(45deg); background: var(--creme); color: var(--ink); }

/* Galerie in "Über uns": Zähler und zwei Pfeile unten rechts auf dem Bild */
.v-gal::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(12, 10, 8, .62) 0%, rgba(12, 10, 8, 0) 100%);
}
.v-gal { touch-action: pan-y; cursor: grab; }
.gal-ui {
  position: absolute;
  z-index: 4;
  right: var(--tp);
  bottom: var(--tp);
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--creme);
}
.gal-count { margin-right: 8px; font-family: var(--serif); font-size: 17px; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.gal-btn {
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  transition: background-color .3s, color .3s, transform .25s var(--ease);
}
.gal-btn .ico { width: 15px; height: 15px; }
.gal-btn:hover { background: var(--creme); color: var(--ink); }
.gal-btn:active { transform: scale(.94); }
.gal-btn:focus-visible { outline-color: var(--creme); outline-offset: 2px; }

/* Impressum und Datenschutz */
.v-legal { grid-template-columns: minmax(0, .46fr) minmax(0, 1.54fr); }
.v-legal-head { display: flex; flex-direction: column; border-radius: var(--r) var(--r) var(--r) var(--R); }
.v-legal-head .v-title { font-size: clamp(30px, calc(var(--s) * 4.3), 56px); hyphens: manual; }
.v-legal-head .go { margin-top: auto; justify-content: space-between; }
.view .v-legal-body.t { padding: 0; }
.v-legal-body .v-scroll { padding-right: calc(var(--tp) + 48px); }
.v-legal .lg {
  --lg-line: var(--hair-dark);
  --lg-mute: rgba(17, 17, 17, .66);
  --lg-acc: var(--terrakotta);
  columns: 2;
  column-gap: clamp(26px, calc(var(--s) * 3.8), 58px);
}

/* ---------- Formulare: Linien statt Kästen ---------- */
.v-form {
  --f-line: rgba(245, 241, 232, .52);
  --f-gap: clamp(10px, calc(var(--s) * 1.9), 28px);
  --f-h: clamp(34px, calc(var(--s) * 4.1), 50px);
  --f-chev: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23F5F1E8' stroke-width='1.1'><path d='M2 4.200l4 4 4-4'/></svg>");
}
.v-form.creme {
  --f-line: rgba(17, 17, 17, .52);
  --f-chev: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23111111' stroke-width='1.1'><path d='M2 4.200l4 4 4-4'/></svg>");
}
.sh-form[hidden] { display: none; }
.f-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); column-gap: clamp(14px, calc(var(--s) * 2.4), 28px); }
.f { margin-bottom: var(--f-gap); }
.f label { display: block; padding-bottom: 1px; font-size: 10px; letter-spacing: .16em; opacity: .84; }
/* Zeilen einer Reihe teilen sich das Raster: Felder bleiben auf einer Linie,
   auch wenn ein Etikett umbricht oder eine Meldung erscheint */
@supports (grid-template-rows: subgrid) {
  .f-row > .f { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
  .f-row > .f label { align-self: end; }
}
.f input, .f select, .f textarea {
  display: block;
  width: 100%;
  height: var(--f-h);
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--f-line);
  border-radius: 0;
  background: none;
  color: inherit;
  font-family: var(--serif);
  font-size: clamp(18px, calc(var(--s) * 2.05), 23px);
  font-weight: 500;
  line-height: 1.2;
  transition: border-color .25s, box-shadow .25s;
}
.f select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 20px;
  background: var(--f-chev) no-repeat right 1px center / 12px 12px;
  cursor: pointer;
}
.f option { color: #111; background: #f5f1e8; font-family: var(--sans); font-size: 14px; }
.f input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.f input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.f textarea {
  height: auto;
  min-height: clamp(52px, calc(var(--s) * 7.4), 92px);
  margin-top: 6px;
  padding: 8px 12px;
  border: 1px solid var(--f-line);
  border-radius: 10px;
  resize: vertical;
}
.olive .f input[type="date"] { color-scheme: dark; }
.creme .f input, .creme .f select, .creme .f textarea { color-scheme: light; }
.f input:hover, .f select:hover, .f textarea:hover { border-color: currentColor; }
.f input:focus-visible, .f select:focus-visible { outline: none; border-color: currentColor; box-shadow: 0 1px 0 0 currentColor; }
.f textarea:focus-visible { outline: none; border-color: currentColor; box-shadow: 0 0 0 1px currentColor; }
.f-hint { margin-top: 5px; font-size: 12px; opacity: .8; }
.f-err { margin-top: 5px; font-size: 12px; line-height: 1.35; font-weight: 500; color: #f6cbbd; }
.creme .f-err { color: #8f3a26; }
.f.has-err input, .f.has-err select { border-color: #f6cbbd; box-shadow: 0 1px 0 0 #f6cbbd; }
.creme .f.has-err input, .creme .f.has-err select { border-color: #8f3a26; box-shadow: 0 1px 0 0 #8f3a26; }
.f-submit {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: 46px;
  margin-top: 2px;
  padding: 0 6px 0 22px;
  border-radius: 999px;
  background: var(--creme);
  color: var(--ink);
  transition: transform .25s var(--ease), background-color .3s;
}
.f-submit .ico { width: 34px; height: 34px; padding: 9.5px; border-radius: 50%; background: var(--ink); color: var(--creme); transition: transform .5s var(--ease); }
.f-submit:hover { background: var(--sandstein); }
.f-submit:hover .ico { transform: translateX(3px); }
.f-submit:active { transform: scale(.98); }
.f-submit:focus-visible { outline-color: var(--creme); }
.creme .f-submit { background: var(--ink); color: var(--creme); }
.creme .f-submit .ico { background: var(--creme); color: var(--ink); }
.creme .f-submit:hover { background: var(--oliv); }
.creme .f-submit:focus-visible, .creme .done-again:focus-visible { outline-color: var(--focus-light); }
.f-submit:disabled { opacity: .6; cursor: progress; transform: none; }

/* Buchungssystem: Hinweis zu Sitzdauer und Anfrage, freie Zeiten, Datenschutz, Spam-Schutz */
.f-info[hidden], .f-legal[hidden] { display: none; }
.f-info { margin: calc(var(--f-gap) * -.35) 0 var(--f-gap); max-width: 52ch; font-size: 13px; line-height: 1.5; opacity: .9; }
.f-alt { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: 2px; }
.f-alt button { height: 26px; padding: 0 11px; border: 1px solid currentColor; border-radius: 999px; font-size: 12.5px; transition: background-color .3s, color .3s; }
.f-alt button:hover { background: var(--creme); color: var(--ink); }
.creme .f-alt button:hover { background: var(--ink); color: var(--creme); }
.f-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.f-ts:empty { display: none; }
.f-ts { margin-bottom: 10px; }
.f-legal { margin-bottom: 12px; max-width: 56ch; font-size: 11.5px; line-height: 1.5; opacity: .72; }
.f-legal a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.f-send-err { margin: 0 0 12px; }

/* Anfragen: Auswahl Private Feier / Firma / Künstler:in, Feldgruppen je Auswahl */
.f-seg { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--f-gap); }
.f-seg button { height: 32px; padding: 0 14px; border: 1px solid currentColor; border-radius: 999px; font-size: 12.5px; letter-spacing: .03em; transition: background-color .3s, color .3s; }
.f-seg button:hover { background: rgba(17, 17, 17, .07); }
.f-seg button[aria-checked="true"] { background: var(--ink); border-color: var(--ink); color: var(--creme); }
.olive .f-seg button:hover { background: rgba(245, 241, 232, .1); }
.olive .f-seg button[aria-checked="true"] { background: var(--creme); border-color: var(--creme); color: var(--ink); }
[data-nur][hidden] { display: none; }

.sh-done { outline: none; }
.sh-done[hidden] { display: none; }
.done-kicker { color: rgba(245, 241, 232, .8); }
.creme .done-kicker { color: var(--terrakotta); }
.done-line { margin-top: 10px; font-family: var(--serif); font-weight: 500; font-size: clamp(22px, calc(var(--s) * 2.9), 34px); line-height: 1.12; text-wrap: pretty; }
.done-note { margin-top: 14px !important; max-width: 46ch; font-size: 13.5px; line-height: 1.55; opacity: .88; }
.done-note a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.done-again { margin-top: 20px; height: 42px; padding: 0 22px; border: 1px solid currentColor; border-radius: 999px; transition: background-color .3s, color .3s; }
.done-again:hover { background: var(--creme); color: var(--ink); }
.creme .done-again:hover { background: var(--ink); color: var(--creme); }

/* ---------- Übergänge zwischen Ansichten ----------
   Wie ein Schärfewechsel: Die alte Ansicht dunkelt ab, zieht sich leicht zurück und
   wird unscharf, die neue kommt aus der Unschärfe nach vorn. Kopfzeile, rechte Spalte,
   Platte und Kordel bleiben dabei ruhig stehen. app.js setzt .nav-switch für die Dauer. */
.stage { view-transition-name: stage; }
html.nav-switch::view-transition-old(root),
html.nav-switch::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.nav-switch::view-transition-group(stage) { animation: none; }
html.nav-switch::view-transition-image-pair(stage) { isolation: auto; }
html.nav-switch::view-transition-old(stage) {
  mix-blend-mode: normal;
  transform-origin: 50% 50%;
  animation: stage-out .8s cubic-bezier(.45, 0, .55, 1) both;
}
html.nav-switch::view-transition-new(stage) {
  mix-blend-mode: normal;
  transform-origin: 50% 50%;
  animation: stage-in 1.15s cubic-bezier(.33, 0, .2, 1) .28s both;
}
/* Erst wird es dunkler und weicher, dann erst verschwindet die Ansicht.
   Die neue wird früh sichtbar und zieht danach langsam scharf. */
@keyframes stage-out {
  55% { opacity: .85; transform: scale(.978); filter: blur(10px) brightness(.5); }
  100% { opacity: 0; transform: scale(.96); filter: blur(22px) brightness(.28); }
}
@keyframes stage-in {
  0% { opacity: 0; transform: scale(1.03); filter: blur(22px) brightness(.4); }
  45% { opacity: .9; transform: scale(1.012); filter: blur(9px) brightness(.75); }
  100% { opacity: 1; transform: none; filter: blur(0) brightness(1); }
}
/* Die Platte läuft während des Wechsels weiter */
::view-transition-old(deck) { display: none; }
::view-transition-new(deck) { animation: none; }

/* ---------- Kleiner Plattenspieler (schmal) ---------- */
.dock { display: none; }

/* ---------- Breit: die Bühne ist der Maßstab ---------- */
@media (min-width: 1000px) {
  .stage { container: stage / size; }
}
@media (min-width: 1000px) and (max-width: 1120px) {
  .nav { letter-spacing: .13em; }
}

/* Schmale Bühne (etwa 1024 breit): kürzere Zeilen, andere Spaltenanteile */
@container stage (max-width: 800px) {
  .opt { display: none; }
  .go { gap: 10px; letter-spacing: .14em; }
  .go .ico { width: 32px; height: 32px; padding: 9px; }
  .t-tisch .go { padding-left: 16px; }
  .v-tisch { grid-template-columns: minmax(0, .7fr) minmax(0, 1.08fr) minmax(0, .68fr); }
  .v-kontakt { grid-template-columns: minmax(0, 1.3fr) minmax(0, .85fr) minmax(0, .85fr); }
  .hours div { gap: 10px; }
  .hours dt { font-size: 12.5px; }
  .hours dd { font-size: 16px; }
  .nw.t { grid-template-columns: 34% minmax(0, 1fr); }
  /* Feier-Formular: zwei Spalten, das dritte Feld der Reihe über die ganze Breite */
  .v-feiern .f-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .v-feiern .f-row > .f:nth-child(3):last-child { grid-column: 1 / -1; }
}

/* Niedrige Bühne (etwa 720 hoch): engere Abstände */
@container stage (max-height: 660px) {
  .v-tabs.t { padding-top: 8px; padding-bottom: 8px; }
  .v-tabs button { height: 38px; }
  .back { top: 8px; right: 8px; width: 38px; height: 38px; }
  .f-submit { height: 42px; }
  .f-submit .ico { width: 30px; height: 30px; padding: 8px; }
  .ev-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .mg-list { gap: 1px; }
  .mi-n { line-height: 1.1; }
  .mcol { gap: 16px; }
  .fine { margin-top: 14px; }
}

/* ---------- Schmal: alles untereinander ---------- */
@media (max-width: 999px) {
  :root { --R: 40px; --pad: 10px; --tp: 20px; }
  .frame { height: auto; min-height: 0; display: flex; flex-direction: column; }
  .legal { justify-content: center; flex-wrap: wrap; gap: 6px 26px; padding: 14px 0 8px; }
  .legal a { padding: 12px 0; }
  .v-legal .lg { columns: 1; }
  .v-legal-body .v-scroll { padding-right: var(--tp); }
  /* Platz für den schwebenden Zurück-Knopf am Seitenende */
  body:not([data-view="home"]) .frame { padding-bottom: 84px; }
  /* Reihenfolge: Kopf, Platte als Einstieg, Kacheln, Druckzeile */
  .t-head { order: 0; height: auto; min-height: 60px; flex-wrap: wrap; row-gap: 0; padding: 0 20px 0 24px; }
  .side { order: 1; }
  .stage { order: 2; }
  .legal { order: 3; }
  .wordmark { display: flex; align-items: center; min-height: 60px; font-size: 25px; }
  /* Auf der Übersicht sind die Kacheln die Navigation, die Kopfzeile bleibt ruhig */
  body[data-view="home"] .nav { display: none; }
  .nav {
    order: 3;
    width: calc(100% + 44px);
    margin: -6px -20px 0 -24px;
    /* rechts so viel Luft, dass der letzte Punkt neben dem Zugschalter (Nachtmodus) frei antippbar bleibt */
    padding: 0 66px 0 24px;
    overflow-x: auto;
    gap: 22px;
    scrollbar-width: none;
    -webkit-mask: linear-gradient(90deg, #000 calc(100% - 34px), transparent);
    mask: linear-gradient(90deg, #000 calc(100% - 34px), transparent);
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding: 14px 0; }
  .nav a::after { bottom: 8px; }

  .home { height: auto; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; }
  .t-tisch { grid-row: auto; grid-column: 1 / 3; min-height: 480px; border-radius: var(--r); }
  .t-menu { grid-column: 1 / 3; min-height: 400px; }
  .parts a { padding: 15px 0 9px; }
  .t-feiern, .t-kontakt { min-height: 250px; }
  .t-kontakt { border-radius: var(--r); }
  .t-about-m { display: block; grid-column: 1 / 3; min-height: 300px; color: var(--creme); border-radius: var(--r) var(--r) var(--R) var(--R); }
  .t-about-m .t-bg { object-position: 46% 60%; }
  .t-about-m .t-title { font-size: clamp(40px, 11vw, 58px); }

  /* Einstieg: Die Platte steht allein auf dem schwarzen Grund, "Was läuft" schmiegt sich darunter.
     Der Block füllt den ersten Bildschirm unter der Kopfzeile, am Fuß stehen Öffnungsstatus
     und Scroll-Hinweis. Auf Unterseiten weicht er dem kleinen Plattenspieler unten rechts. */
  .side {
    container-type: normal;
    display: flex;
    flex-direction: column;
    gap: 0;
    --deck: min(88vw, 46svh, 420px);
    min-height: calc(100svh - 60px - var(--pad) - var(--gap) - 6px);
    padding-top: calc(var(--deck) * .2);          /* Luft für das Gegengewicht des Tonarms */
  }
  body:not([data-view="home"]) .side { display: none; }
  .t-about { display: none; }
  .deck { position: relative; left: auto; top: auto; transform: none; flex: none; margin: 0 auto calc(var(--deck) / -2 + var(--gap) / 2); }
  .t-news { position: relative; inset: auto; flex: none; min-height: calc(var(--deck) / 2 + 178px); border-radius: var(--r) var(--r) var(--R) var(--R); }
  .hero-foot {
    flex: 1;
    min-height: 92px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 14px 0 6px;
  }
  .hero-status { font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.2; color: rgba(245, 241, 232, .82); }
  /* Scroll-Hinweis: eine feine Linie, an der ein Stück Messing nach unten läuft */
  .cue { position: relative; width: 1px; height: 38px; background: rgba(245, 241, 232, .26); overflow: hidden; }
  .cue::after {
    content: "";
    position: absolute;
    left: 0; top: 0;
    width: 1px; height: 14px;
    background: var(--messing);
    animation: cue 2.4s cubic-bezier(.65, 0, .35, 1) infinite;
  }
  @keyframes cue {
    0% { transform: translateY(-16px); }
    62%, 100% { transform: translateY(40px); }
  }

  .view { position: static; display: flex; flex-direction: column; }
  .view .t, .view .t.vh { border-radius: var(--r); }
  .vh, .v-pic { aspect-ratio: 4 / 3; }
  .vh-karte { aspect-ratio: 5 / 4; }
  .vh-tisch { aspect-ratio: 1; }
  .v-tabs.t { padding: 8px; }
  .v-tabs button { height: 44px; letter-spacing: .14em; }
  .v-scroll { height: auto; overflow: visible; -webkit-mask: none; mask: none; }
  .v-form, .v-haus .v-text { overflow: visible; }
  .v-form .v-title, .v-form .v-sub, .v-haus .v-text .v-lead { padding-right: 0; }
  .v-slot { padding-top: 24px; }
  .f input, .f select { height: 44px; }
  .f-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 18px; }
  .f-row > .f:nth-child(3):last-child { grid-column: 1 / -1; }
  .f { margin-bottom: 18px; }
  .f-submit { height: 50px; }
  .facts { padding-top: 22px; }
  .v-headline.t { padding-right: var(--tp); }
  .ev-list, .news-list { grid-auto-rows: auto; }
  .ev.t { padding: 18px var(--tp); }
  .view .ev.t:nth-child(n + 2) { border-radius: 0; }
  .view .ev.t:nth-child(2) { border-top-left-radius: var(--r); border-top-right-radius: var(--r); }
  .view .ev.t:nth-child(n + 2):last-child { border-bottom-left-radius: var(--r); border-bottom-right-radius: var(--r); }
  .nw.t { min-height: 168px; }
  .nw div { padding: 16px 18px 16px 16px; }
  .v-host { grid-template-columns: 1fr; justify-items: start; }
  .v-cross { min-height: 190px; }
  .v-social { min-height: 210px; }
  .v-addr { min-height: 330px; }
  .gal-btn { width: 44px; height: 44px; }
  .v-note { padding-top: 22px; }
  .back { position: fixed; top: auto; bottom: 16px; left: 16px; right: auto; width: 52px; height: 52px; z-index: 40; box-shadow: 0 0 0 1px rgba(245, 241, 232, .28), 0 10px 30px rgba(0, 0, 0, .5); }
  .back .ico { width: 18px; height: 18px; }

  .dock {
    display: block;
    position: fixed;
    z-index: 40;
    right: 14px; bottom: 14px;
    width: 84px;
    padding: 8px;
    border-radius: 50%;
    background: var(--ground);
    box-shadow: 0 0 0 1px rgba(245, 241, 232, .22), 0 10px 30px rgba(0, 0, 0, .5);
    transition: transform .6s var(--ease), opacity .4s;
  }
  .dock[hidden] { display: block; transform: translateY(130%); opacity: 0; pointer-events: none; }
  .dock .tt-arm { display: none; }
}

/* Tablet: Text links, Foto rechts, sonst wird das quadratische Bild zum Streifen */
@media (min-width: 640px) and (max-width: 999px) {
  .t-tisch { flex-direction: row; min-height: 440px; }
  .t-tisch .t-top { flex: 0 0 44%; }
  .t-photo { border-radius: clamp(90px, 16vw, 150px) 0 0 0; }
  .t-photo img { object-position: 50% 50%; }
}

@media (max-width: 520px) {
  .t-menu .t-title { font-size: 64px; }
  .t-feiern, .t-kontakt { padding: 16px; }
  .t-feiern .go, .t-kontakt .go { gap: 8px; font-size: 10px; letter-spacing: .12em; }
  .t-feiern .go .ico, .t-kontakt .go .ico { width: 30px; height: 30px; padding: 8.5px; }
  .t-status { font-size: 14.5px; }
  .t-num { font-size: 96px; }
  .parts { letter-spacing: .14em; }
}