/* L'Enoteca: Projekt-CSS. Lädt nach tokens.css (Skill designsystem). Werte kommen aus Tokens.
   Breakpoints laut tokens.css: sm 480, md 768, lg 1024, xl 1280 (in @media als Zahl wiederholt). */

/* ---------- Zuordnung der Musternamen (geschmack) auf tokens.css ---------- */
:root {
  --grund: var(--color-canvas);
  --flaeche: var(--color-surface);
  --text: var(--color-ink);
  --text-leise: var(--color-ink-muted);
  --akzent: var(--color-primary);
  --auf-akzent: var(--color-on-primary);
  --linie: var(--color-line);
  --feldrand: var(--color-line);
  --fokus: var(--color-focus);
  --schrift-text: var(--font-body-family);
  --schrift-titel: var(--font-display-family);
  --fs-0: var(--font-body-size);
  --fs-2: var(--font-heading-size);
  --fs-hero: var(--font-display-size);
  --zh-text: var(--font-body-line-height);
  --zh-titel: var(--font-display-line-height);
  --lauf-titel: var(--font-display-letter-spacing);
  --abstand-m: var(--space-md);
  --radius-s: var(--radius-sm);
  --radius-m: var(--radius-md);
  --radius-l: var(--radius-lg);
  --radius-voll: var(--radius-pill);
  --ease-aus: var(--motion-easing-standard);
  --dauer-kurz: var(--motion-duration-fast);

  /* Ohne Gegenstück in tokens.css */
  --ease-wechsel: var(--motion-easing-exit);
  --inhalt-max: 87.5rem;
  --rand: clamp(1.25rem, 0.5rem + 3.2vw, 4rem);
  --abstand-sektion: clamp(4.5rem, 2.5rem + 7vw, 9rem);
  --fs-1: var(--font-subheading-size);
  --fs-buehne: clamp(2.5rem, 1rem + 4vw, 4.75rem);
  --fs-riesig: clamp(2.25rem, 1.2rem + 4.6vw, 5rem);
  --lesemass: 62ch;
  --titel-opsz: 30;
  --kopf-hoehe: 4.25rem;
  --leiste-hoehe: 2.75rem;
  --oben: calc(var(--kopf-hoehe) + var(--leiste-hoehe));
  --icon-strich: 1.5;
  --z-marke: 90;
  --z-kopf: 100;
  --z-overlay: 200;
  --z-modal: 300;

  /* Dunkle Leisten (Kopf, Fuss): in beiden Farbschemata gleich, damit das Logo unverändert lesbar bleibt.
     Kontrast gerechnet: #ECEFEA auf #151916 16.1:1, #B3BCB4 auf #151916 9.1:1, #FF8FA1 auf #151916 8.2:1. */
  --leiste-grund: #151916;
  --leiste-text: #ECEFEA;
  --leiste-leise: #B3BCB4;
  --leiste-linie: #3A413C;
  --leiste-fokus: #FF8FA1;

  /* Bühne (Film): helle Insel in beiden Farbschemata. Wandfarbe aus dem Film gemessen.
     #151916 auf #A6ADA3 7.9:1. */
  --film-wand: #A6ADA3;
  --film-stein: #2B2E2D;
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--oben) + 1rem); }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
html.mit-lenis { scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: var(--fs-0);
  font-weight: var(--font-body-weight);
  line-height: var(--zh-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, address, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
address { font-style: normal; }
fieldset { border: 0; min-width: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }

h1, h2 {
  font-family: var(--schrift-titel);
  font-weight: var(--font-display-weight);
  line-height: var(--font-heading-line-height);
  letter-spacing: var(--font-heading-letter-spacing);
  text-wrap: balance;
  font-optical-sizing: auto;
}
h1 { font-size: var(--fs-hero); line-height: 1.06; letter-spacing: var(--lauf-titel); }
/* Bodoni Moda hat eine Achse für die optische Grösse. Bei grossen Graden werden die Haarlinien so fein,
   dass sie auf normalen Bildschirmen wegbrechen. Darum fest auf eine kräftigere Stufe gesetzt. */
h1, h2, .agenda-tag, .agenda-text h3, .verzeichnis-name, .angebote-preis, .kauf-preis .preis, .summe .preis, address.gross, .textlink.gross {
  font-variation-settings: "opsz" var(--titel-opsz);
}
h2 { font-size: var(--fs-2); }
h3 { font-size: var(--fs-1); font-weight: var(--font-subheading-weight); line-height: var(--font-subheading-line-height); }
h1 em, h2 em { font-style: italic; font-weight: 400; color: var(--akzent); padding-block-end: 0.1em; }
p, li, dd { text-wrap: pretty; }
p { max-width: var(--lesemass); }
.preis, .zahl { font-variant-numeric: tabular-nums; }

:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: var(--radius-s); }
:focus:not(:focus-visible) { outline: none; }

.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.sprung {
  position: absolute; left: var(--rand); top: 0.5rem; z-index: var(--z-modal);
  padding: 0.75rem 1rem; background: var(--flaeche); color: var(--text); border-radius: var(--radius-m);
  transform: translateY(-200%);
}
.sprung:focus-visible { transform: none; }

.symbol {
  width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor;
  stroke-width: var(--icon-strich); stroke-linecap: round; stroke-linejoin: round;
}

.inhalt { width: min(100% - 2 * var(--rand), var(--inhalt-max)); margin-inline: auto; }
.sektion { padding-block: var(--abstand-sektion); }
.sektion-eng { padding-block: calc(var(--abstand-sektion) * 0.6); }
.sektion-kopf { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-md) var(--space-xl); margin-block-end: var(--space-2xl); }
.sektion-text { margin-block-start: var(--space-lg); color: var(--text-leise); font-size: var(--fs-1); line-height: 1.5; max-width: 34em; }
.etikett {
  font-size: var(--font-label-size); font-weight: var(--font-label-weight); line-height: var(--font-label-line-height);
  letter-spacing: var(--font-label-letter-spacing); text-transform: uppercase; color: var(--text-leise);
  margin-block-end: var(--space-md);
}
.band { background: var(--color-sage); padding-block: var(--abstand-sektion); }
.band .sektion-text, .band .etikett { color: var(--text); }
/* Auf dem salbeigrauen Band erreicht das Rot als Lauftext nur 3.3:1. Links stehen dort in der Textfarbe (9.1:1), unterstrichen. */
.band .textlink { color: var(--text); text-decoration-thickness: 1px; }
@media (hover: hover) {
  .band .textlink:hover { color: var(--text); text-decoration-thickness: 2px; }
}
.band .textlink:active { color: var(--text); }
.platzhalter { background: none; color: inherit; outline: 1px dashed var(--akzent); outline-offset: 2px; padding-inline: 0.2em; }
.platzhalter-block { border: 1px dashed var(--linie); padding: var(--space-lg); align-self: start; }
.meldung { margin: 0; max-width: none; padding: 0.75rem var(--rand); background: var(--color-sage); color: var(--text); text-align: center; }

/* ---------- Links, Knöpfe, Marken ---------- */
.textlink {
  color: var(--comp-link-text-color); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em;
  display: inline-flex; align-items: center; gap: 0.4em;
  transition: color var(--dauer-kurz) var(--ease-aus);
}
.textlink .symbol { transition: transform var(--motion-duration-base) var(--ease-aus); }
.textlink.gross { font-family: var(--schrift-titel); font-size: var(--fs-2); line-height: 1.1; text-decoration: none; }
@media (hover: hover) {
  .textlink:hover { color: var(--comp-link-hover-text-color); }
  .textlink:hover .symbol { transform: translateX(0.25em); }
}
.textlink:active { color: var(--comp-link-active-text-color); }
.textlink:focus-visible { outline: var(--comp-link-focus-outline-width) solid var(--comp-link-focus-outline-color); outline-offset: var(--comp-link-focus-outline-offset); }

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: var(--comp-button-primary-height); padding: var(--comp-button-primary-padding);
  border: 1px solid transparent; border-radius: var(--comp-button-primary-rounded);
  font-family: var(--comp-button-primary-font-family); font-size: var(--comp-button-primary-font-size);
  font-weight: var(--comp-button-primary-font-weight); line-height: var(--comp-button-primary-line-height);
  text-decoration: none; text-align: center;
  transition: background-color var(--dauer-kurz) var(--ease-aus), color var(--dauer-kurz) var(--ease-aus), border-color var(--dauer-kurz) var(--ease-aus), transform var(--dauer-kurz) var(--ease-aus);
}
@media (min-width: 1024px) {
  .knopf { white-space: nowrap; }
}
.knopf:active { transform: translateY(1px) scale(0.985); }
@media (prefers-reduced-motion: reduce) {
  .knopf:active { transform: none; }
}
.knopf-haupt { background: var(--comp-button-primary-background-color); color: var(--comp-button-primary-text-color); }
@media (hover: hover) {
  .knopf-haupt:hover { background: var(--comp-button-primary-hover-background-color); }
}
.knopf-haupt:active { background: var(--comp-button-primary-active-background-color); }
.knopf-haupt:focus-visible, .knopf-neben:focus-visible {
  outline: var(--comp-button-primary-focus-outline-width) solid var(--comp-button-primary-focus-outline-color);
  outline-offset: var(--comp-button-primary-focus-outline-offset);
}
.knopf-haupt[disabled], .knopf-haupt[aria-disabled="true"] {
  background: var(--comp-button-primary-disabled-background-color); color: var(--comp-button-primary-disabled-text-color); cursor: not-allowed;
}
.knopf-neben {
  background: var(--comp-button-secondary-background-color); color: var(--comp-button-secondary-text-color);
  border-color: var(--comp-button-secondary-border-color);
}
@media (hover: hover) {
  .knopf-neben:hover { background: var(--comp-button-secondary-hover-background-color); color: var(--comp-button-secondary-hover-text-color); }
}
.knopf-neben:active { background: var(--comp-button-secondary-active-background-color); color: var(--comp-button-secondary-active-text-color); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-block-start: var(--space-xl); }

.marken { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.marke {
  display: inline-flex; align-items: center; gap: 0.6em; min-height: var(--comp-chip-min-height);
  padding: var(--comp-chip-padding); border: var(--comp-chip-border-width) solid var(--comp-chip-border-color);
  border-radius: var(--comp-chip-rounded); background: var(--comp-chip-background-color); color: var(--comp-chip-text-color);
  font-size: var(--font-small-size); font-weight: 500; line-height: 1.2; text-decoration: none;
  transition: background-color var(--dauer-kurz) var(--ease-aus), color var(--dauer-kurz) var(--ease-aus), border-color var(--dauer-kurz) var(--ease-aus);
}
.marke-zahl { font-variant-numeric: tabular-nums; color: var(--text-leise); font-weight: 400; }
@media (hover: hover) {
  .marke:hover { border-color: var(--comp-chip-hover-border-color); }
}
.marke:focus-visible { outline: var(--comp-chip-focus-outline-width) solid var(--comp-chip-focus-outline-color); outline-offset: var(--comp-chip-focus-outline-offset); }
.marke:active, .marke[aria-pressed="true"] {
  background: var(--comp-chip-active-background-color); color: var(--comp-chip-active-text-color); border-color: var(--comp-chip-active-border-color);
}
.marke:active .marke-zahl, .marke[aria-pressed="true"] .marke-zahl { color: inherit; }

.rundknopf {
  display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--radius-voll);
  border: 1px solid var(--linie); background: transparent; color: var(--text);
  transition: background-color var(--dauer-kurz) var(--ease-aus), color var(--dauer-kurz) var(--ease-aus), border-color var(--dauer-kurz) var(--ease-aus);
}
@media (hover: hover) {
  .rundknopf:hover { background: var(--text); color: var(--grund); border-color: var(--text); }
}
.rundknopf:active { background: var(--text); color: var(--grund); }
[data-pan-zurueck] .symbol { transform: scaleX(-1); }

.live-punkt { display: inline-block; width: 0.5rem; height: 0.5rem; margin-inline-end: 0.5em; border-radius: 50%; background: var(--akzent); }
@media (prefers-reduced-motion: no-preference) {
  .live-punkt { animation: puls 1.6s var(--ease-wechsel) 3; }
}
@keyframes puls { 50% { opacity: 0.35; transform: scale(0.8); } }

/* ---------- Kopfzeile ---------- */
.oben { position: sticky; top: 0; z-index: var(--z-kopf); }
.kopf {
  background: var(--leiste-grund); color: var(--leiste-text); border-block-end: 1px solid var(--leiste-linie);
}
.kopf :focus-visible { outline-color: var(--leiste-fokus); }
.kopf-innen {
  width: min(100% - 2 * var(--rand), var(--inhalt-max)); margin-inline: auto; min-height: var(--kopf-hoehe);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg);
}
.kopf-logo { display: block; flex: none; margin-inline-end: auto; padding-block: 0.6rem; }
.kopf-logo img { width: 8.125rem; height: auto; }
@media (min-width: 480px) {
  .kopf-logo img { width: 9.375rem; }
}
.kopf-nav { order: 3; flex: 1 0 100%; }
.kopf-nav ul { display: flex; flex-wrap: wrap; gap: 0 var(--space-lg); padding-block-end: var(--space-sm); }
.kopf-nav a, .kopf-liste {
  display: inline-flex; align-items: center; min-height: var(--comp-nav-link-min-height);
  color: var(--leiste-text); text-decoration: none; font-weight: 500; font-size: var(--font-small-size); letter-spacing: 0.01em;
  transition: color var(--dauer-kurz) var(--ease-aus);
}
.kopf-nav a[aria-current="page"] { color: var(--leiste-leise); text-decoration: underline; text-underline-offset: 0.5em; text-decoration-thickness: 1px; }
@media (hover: hover) {
  .kopf-nav a:hover, .kopf-liste:hover { color: var(--leiste-leise); }
}
.kopf-nav a:active, .kopf-liste:active { color: var(--leiste-leise); }
.kopf-liste { gap: 0.5em; padding-inline: 0.75rem; min-height: 2.75rem; border: 1px solid var(--leiste-linie); border-radius: var(--radius-m); }
.kopf-liste .symbol { width: 1.35em; height: 1.35em; }
.kopf-liste-text { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 768px) {
  .kopf-liste { padding-inline: 1rem; }
  .kopf-liste .symbol { display: none; }
  .kopf-liste-text { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; }
}
.kopf-liste[aria-current="page"] { border-color: var(--leiste-leise); }
.kopf-liste-zahl {
  display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding-inline: 0.35rem;
  border-radius: var(--radius-voll); background: var(--leiste-text); color: var(--leiste-grund);
  font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.kopf-menue {
  display: inline-flex; align-items: center; gap: 0.5em; min-height: 2.75rem; padding-inline: 0.75rem;
  background: transparent; border: 1px solid var(--leiste-linie); border-radius: var(--radius-m); color: var(--leiste-text);
  font-size: var(--font-small-size); font-weight: 500;
}
.kopf-menue span { display: inline-flex; align-items: center; gap: 0.5em; }
.kopf-menue[aria-expanded="false"] .kopf-menue-zu, .kopf-menue[aria-expanded="true"] .kopf-menue-offen { display: none; }
/* Unter lg klappt die Navigation erst ein, wenn seite.js den Menü-Knopf angeschlossen hat. */
html.nav-bereit .kopf-nav:not([data-offen]) { display: none; }
html.nav-bereit .kopf-nav ul { flex-direction: column; gap: 0; padding-block: var(--space-sm) var(--space-md); }
html.nav-bereit .kopf-nav a { min-height: 3rem; font-size: var(--fs-1); width: 100%; }
@media (min-width: 1024px) {
  .kopf-innen { flex-wrap: nowrap; }
  .kopf-logo { margin-inline-end: var(--space-2xl); }
  .kopf-nav, html.nav-bereit .kopf-nav:not([data-offen]) { order: 0; flex: 1 1 auto; display: block; }
  .kopf-nav ul, html.nav-bereit .kopf-nav ul { flex-direction: row; gap: 0 var(--space-xl); padding-block: 0; }
  html.nav-bereit .kopf-nav a { min-height: var(--comp-nav-link-min-height); font-size: var(--font-small-size); width: auto; }
  .kopf-menue { display: none !important; }
}

/* ---------- Bühne (Hero mit Film) ---------- */
.buehne {
  /* Helle Insel: Der Film ist immer hell, darum gelten hier in beiden Farbschemata die hellen Werte. */
  --color-ink: #151916; --color-ink-muted: #2F3631; --color-primary: #C1022C; --color-primary-strong: #99042F;
  --color-on-primary: #FBFCFA; --color-canvas: #EEF0EC; --color-focus: #99042F;
  /* Die Komponenten-Tokens sind an :root aufgelöst und folgen der Insel nicht von selbst: hier fest gesetzt.
     Gerechnet: #FBFCFA auf #C1022C 6.2:1, #151916 auf #A6ADA3 7.9:1, #EEF0EC auf #151916 15.5:1. */
  --comp-button-primary-background-color: #C1022C; --comp-button-primary-text-color: #FBFCFA;
  --comp-button-primary-hover-background-color: #99042F; --comp-button-primary-active-background-color: #99042F;
  --comp-button-primary-focus-outline-color: #99042F;
  --comp-button-secondary-text-color: #151916; --comp-button-secondary-border-color: #151916;
  --comp-button-secondary-hover-background-color: #151916; --comp-button-secondary-hover-text-color: #EEF0EC;
  --comp-button-secondary-active-background-color: #151916; --comp-button-secondary-active-text-color: #EEF0EC;
  color-scheme: light;
  position: relative; display: grid; grid-template-columns: 1fr; background: var(--film-wand); color: var(--color-ink);
}
.buehne-bild { position: relative; order: 1; aspect-ratio: 5 / 4; overflow: clip; background: var(--film-wand); }
.buehne-bild img, .buehne-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.buehne-text { order: 2; padding: var(--space-xl) var(--rand) var(--space-2xl); }
.buehne h1 { font-size: var(--fs-buehne); max-width: 12em; }
.buehne h1 em { color: var(--color-primary-strong); }
.buehne-unter { margin-block-start: var(--space-lg); font-size: var(--fs-1); line-height: 1.5; max-width: 30em; color: var(--color-ink-muted); }
@media (min-width: 768px) {
  .buehne { min-height: calc(100svh - var(--oben)); align-items: center; }
  .buehne-bild { position: absolute; inset: 0; order: 0; aspect-ratio: auto; }
  .buehne-bild img, .buehne-film { object-position: 70% 50%; }
  .buehne-bild::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, rgb(166 173 163 / 0.78) 0%, rgb(166 173 163 / 0.5) 34%, rgb(166 173 163 / 0) 60%);
  }
  .buehne-text {
    position: relative; order: 0; padding: var(--space-3xl) 0;
    width: min(100% - 2 * var(--rand), var(--inhalt-max)); margin-inline: auto;
  }
  .buehne-text > * { max-width: min(46rem, 54%); }
  .buehne h1 { max-width: min(11.5em, 56%); }
}

/* ---------- Agenda ---------- */
.agenda-liste { border-block-start: 1px solid var(--linie); }
.agenda-zeile {
  position: relative; display: grid; grid-template-columns: 5.5rem 1fr auto; gap: var(--space-md) var(--space-lg);
  align-items: center; padding-block: var(--space-lg); border-block-end: 1px solid var(--color-line-soft);
}
.agenda-datum { display: grid; justify-items: start; line-height: 1; }
.agenda-tag { font-family: var(--schrift-titel); font-size: var(--fs-riesig); font-weight: 500; font-variant-numeric: lining-nums; letter-spacing: -0.03em; }
.agenda-monat, .agenda-offen { font-size: var(--font-label-size); font-weight: 600; letter-spacing: var(--font-label-letter-spacing); text-transform: uppercase; color: var(--text-leise); }
.agenda-offen { line-height: 1.3; }
.agenda-text h3 { font-family: var(--schrift-titel); font-size: var(--fs-2); font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; }
.agenda-text h3 a { text-decoration: none; }
.agenda-text h3 a::after { content: ""; position: absolute; inset: 0; }
.agenda-text p { color: var(--text-leise); margin-block-start: 0.35rem; }
.agenda-ort { font-size: var(--font-small-size); }
.agenda-jetzt { display: inline-block; margin-inline-start: 0.5em; color: var(--akzent); font-weight: 600; }
.agenda-pfeil { color: var(--text-leise); transition: transform var(--motion-duration-base) var(--ease-aus), color var(--dauer-kurz) var(--ease-aus); }
@media (hover: hover) {
  .agenda-zeile:hover .agenda-pfeil { transform: translateX(0.5rem); color: var(--akzent); }
  .agenda-zeile:hover h3 { color: var(--akzent); }
}
.agenda-zeile:focus-within .agenda-pfeil { color: var(--akzent); }
.band .agenda-liste { border-color: var(--text); }
.band .agenda-zeile { border-color: color-mix(in oklch, var(--text) 30%, transparent); }
.band .agenda-text p, .band .agenda-offen, .band .agenda-monat, .band .agenda-pfeil { color: var(--text); }
.band h2 { margin-block-end: var(--space-xl); }
@media (min-width: 768px) {
  .agenda-zeile { grid-template-columns: 11rem 1fr auto; padding-block: var(--space-xl); }
}
.leerhinweis { color: var(--text-leise); font-size: var(--fs-1); }
.rueckblick { border-block-start: 1px solid var(--color-line-soft); }
.rueckblick li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem var(--space-lg); padding-block: var(--space-md); border-block-end: 1px solid var(--color-line-soft); }
.rueckblick span { color: var(--text-leise); }
.seite-events h2 { margin-block-end: var(--space-xl); }

/* ---------- Verzeichnis (Kategorien) ---------- */
.verzeichnis-liste { border-block-start: 1px solid var(--linie); }
.verzeichnis-liste a {
  display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: var(--space-md) var(--space-lg);
  padding-block: clamp(0.75rem, 0.4rem + 1.2vw, 1.5rem); border-block-end: 1px solid var(--color-line-soft);
  text-decoration: none; transition: color var(--dauer-kurz) var(--ease-aus);
}
.verzeichnis-name { font-family: var(--schrift-titel); font-size: var(--fs-riesig); font-weight: 500; line-height: 1.08; letter-spacing: -0.02em; padding-block-end: 0.06em; }
.verzeichnis-zahl { font-variant-numeric: tabular-nums; color: var(--text-leise); font-size: var(--fs-1); }
.verzeichnis-liste .symbol { align-self: center; width: 1.75rem; height: 1.75rem; color: var(--text-leise); transition: transform var(--motion-duration-base) var(--ease-aus), color var(--dauer-kurz) var(--ease-aus); }
@media (hover: hover) {
  .verzeichnis-liste a:hover { color: var(--akzent); }
  .verzeichnis-liste a:hover .symbol { transform: translateX(0.5rem); color: var(--akzent); }
}
.verzeichnis-liste a:active { color: var(--color-primary-strong); }

/* ---------- Flaschenkachel und Raster ---------- */
.wein { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; gap: var(--space-md); min-width: 0; }
.wein-kachel {
  position: relative; display: grid; place-items: end center; aspect-ratio: 3 / 4; padding: 7% 0 0;
  background: var(--color-tile); border-radius: var(--radius-l); overflow: clip;
}
.wein-kachel::after {
  /* Standschatten unter der Flasche */
  content: ""; position: absolute; left: 50%; bottom: 3.2%; width: 34%; height: 3%; translate: -50% 0;
  background: radial-gradient(closest-side, rgb(21 25 22 / 0.32), rgb(21 25 22 / 0)); filter: blur(2px);
}
.flasche { position: relative; z-index: 1; height: 100%; width: auto; max-width: 78%; object-fit: contain; object-position: 50% 100%; transition: transform var(--motion-duration-slow) var(--ease-aus); transform-origin: 50% 100%; }
.flasche-leer { display: block; width: 26%; height: 82%; border: 1px dashed var(--color-line); border-radius: 40% 40% 6% 6% / 14% 14% 3% 3%; margin-block-end: 4%; }
@media (hover: hover) {
  .wein:hover .flasche { transform: scale(1.035); }
}
.wein-text { display: grid; align-content: start; gap: 0.2rem; padding-inline-end: 3rem; min-width: 0; overflow-wrap: anywhere; }
.wein-herkunft { font-size: var(--font-label-size); font-weight: 600; letter-spacing: var(--font-label-letter-spacing); text-transform: uppercase; color: var(--text-leise); }
.wein-name { font-family: var(--schrift-text); font-size: var(--fs-0); font-weight: 600; line-height: 1.3; letter-spacing: 0; }
.wein-name a { text-decoration: none; }
.wein-name a::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: var(--radius-l); }
.wein-angaben, .wein-zusatz { font-size: var(--font-small-size); color: var(--text-leise); }
.wein-preis { margin-block-start: 0.25rem; font-weight: 600; }
.wein-statt { font-weight: 400; color: var(--text-leise); margin-inline-end: 0.4em; }
.wein-fehlt { font-size: var(--font-small-size); color: var(--text-leise); }
.wein-dazu {
  position: absolute; z-index: 3; right: 0; bottom: 0; display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border-radius: var(--radius-voll); border: 1px solid var(--linie); background: var(--grund); color: var(--text);
  transition: background-color var(--dauer-kurz) var(--ease-aus), color var(--dauer-kurz) var(--ease-aus), border-color var(--dauer-kurz) var(--ease-aus), transform var(--dauer-kurz) var(--ease-aus);
}
@media (hover: hover) {
  .wein-dazu:hover { background: var(--akzent); color: var(--auf-akzent); border-color: var(--akzent); }
}
.wein-dazu:active { transform: scale(0.94); background: var(--color-primary-strong); color: var(--auf-akzent); }
.wein-dazu[data-gesetzt] { background: var(--text); color: var(--grund); border-color: var(--text); }
.weinraster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl) var(--space-md); }
@media (min-width: 768px) {
  .weinraster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3xl) var(--space-lg); }
}
@media (min-width: 1024px) {
  .weinraster { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .weinraster { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .weinraster-vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Querlauf (Reihe) ---------- */
.reihe { padding-block-end: var(--abstand-sektion); }
.reihe > .inhalt { margin-block-end: var(--space-2xl); }
.pan-fenster { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rand); scrollbar-width: thin; }
.pan-fenster:focus-visible { outline: 3px solid var(--fokus); outline-offset: -3px; }
.pan-spur { position: relative; display: flex; gap: var(--space-lg); width: max-content; padding-inline: max(var(--rand), (100vw - var(--inhalt-max)) / 2); padding-block: 0.5rem; }
.pan-folie { flex: none; width: min(62vw, 15.5rem); scroll-snap-align: start; }
.pan-steuerung { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); margin-block-start: var(--space-lg); }
.pan-steuerung p { font-size: var(--font-small-size); color: var(--text-leise); }
.pan-knoepfe { display: flex; gap: var(--space-sm); }

/* ---------- Herkunft ---------- */
.herkunft-raster { display: grid; gap: var(--space-2xl); }
.herkunft-bild { aspect-ratio: 4 / 5; border-radius: var(--radius-l); }
.herkunft-bild img { width: 100%; height: 100%; object-fit: cover; }
.parallax-rahmen { overflow: clip; }
.herkunft .marken { margin-block-start: var(--space-xl); }
@media (min-width: 1024px) {
  .herkunft-raster { grid-template-columns: 5fr 1fr 6fr; align-items: center; }
  .herkunft-text { grid-column: 3; }
}

/* ---------- Band: Cantinetta und Angebote ---------- */
.band-raster { display: grid; gap: var(--space-2xl); }
.band-raster .knopf { margin-block-start: var(--space-xl); }
.angebote { display: grid; align-content: start; border-block-start: 1px solid var(--text); }
.angebote > div { display: grid; gap: 0.25rem; padding-block: var(--space-lg); border-block-end: 1px solid color-mix(in oklch, var(--text) 30%, transparent); }
.angebote dt { font-size: var(--fs-1); font-weight: 600; }
.angebote-preis { font-family: var(--schrift-titel); font-size: var(--fs-2); font-weight: 500; letter-spacing: -0.01em; }
.angebote-einheit { color: var(--text-leise); }
.band .angebote-einheit { color: var(--text); }
.angebote-text { display: block; margin-block-start: 0.35rem; color: var(--text-leise); }
.angebote-hinweis { padding-block-start: var(--space-md); font-size: var(--font-small-size); }
.angebote-hell { border-color: var(--linie); }
.angebote-hell > div { border-color: var(--color-line-soft); }
address.gross { font-family: var(--schrift-titel); font-size: var(--fs-2); line-height: 1.15; margin-block-start: var(--space-lg); }
@media (min-width: 1024px) {
  .band-raster { grid-template-columns: 6fr 1fr 5fr; align-items: start; }
  .band-raster > :last-child { grid-column: 3; }
}

/* ---------- Ablauf, Fragen ---------- */
.ablauf-raster, .fragen-raster { display: grid; gap: var(--space-2xl); }
.ablauf-liste, .fragen-liste { border-block-start: 1px solid var(--linie); }
.ablauf-liste > div, .fragen-liste > div { display: grid; gap: var(--space-sm); padding-block: var(--space-lg); border-block-end: 1px solid var(--color-line-soft); }
.ablauf-liste dt, .fragen-liste dt { font-size: var(--fs-1); font-weight: 600; line-height: 1.3; }
.ablauf-liste dd, .fragen-liste dd { color: var(--text-leise); max-width: var(--lesemass); }
.ablauf-fuss { color: var(--text-leise); font-size: var(--font-small-size); }
@media (min-width: 1024px) {
  .ablauf-raster, .fragen-raster { grid-template-columns: 4fr 1fr 7fr; }
  .ablauf-liste, .fragen-liste, .ablauf-fuss { grid-column: 3; }
  .ablauf-liste > div { grid-template-columns: 14rem 1fr; gap: var(--space-xl); }
}

/* ---------- Orte ---------- */
.orte h2 { margin-block-end: var(--space-2xl); }
.orte-raster { display: grid; gap: var(--space-xl); }
.ort { display: grid; align-content: start; gap: var(--space-sm); padding-block-start: var(--space-lg); border-block-start: 1px solid var(--linie); }
.ort h2, .ort h3 { font-family: var(--schrift-text); font-size: var(--fs-1); font-weight: 600; line-height: 1.3; letter-spacing: 0; }
.ort p, .ort address { color: var(--text-leise); white-space: pre-line; }
.fuss-block p { white-space: pre-line; }
@media (min-width: 768px) {
  .orte-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Kopf der Unterseiten, Brotkrumen ---------- */
.seitenkopf { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) clamp(1.5rem, 1rem + 2vw, 3rem); }
.seitenkopf h1 { max-width: 14em; }
.einleitung { margin-block-start: var(--space-lg); font-size: var(--fs-1); line-height: 1.5; color: var(--text-leise); max-width: 36em; }
.krumen { margin-block-end: var(--space-lg); font-size: var(--font-small-size); color: var(--text-leise); }
.krumen ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; }
.krumen li + li::before { content: "/"; margin-inline-end: 0.75rem; color: var(--linie); }
.krumen a { text-underline-offset: 0.2em; }
.krumen [aria-current] { color: var(--text); }

/* ---------- Sortiment ---------- */
.sortiment { padding-block-end: var(--abstand-sektion); }
html.liste-bereit .sprungliste { display: none; }
.filter { display: grid; gap: var(--space-lg); padding-block: var(--space-lg); border-block: 1px solid var(--linie); }
.filter-typen { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.filter-felder { display: grid; gap: var(--space-md); }
.filter-stand { font-size: var(--font-small-size); color: var(--text-leise); min-height: 1.5em; }
@media (min-width: 768px) {
  .filter-felder { grid-template-columns: 2fr 1fr 1fr; }
}
.gruppe { padding-block-start: var(--space-3xl); }
.gruppe h2 { margin-block-end: var(--space-xl); }
.leer { display: grid; justify-items: start; gap: var(--space-lg); padding-block: var(--space-3xl); font-size: var(--fs-1); }

/* ---------- Weinseite ---------- */
.weinseite { padding-block-start: var(--space-xl); }
.weinseite-raster { display: grid; gap: var(--space-2xl); padding-block-end: var(--abstand-sektion); }
.wein-kachel-gross { aspect-ratio: 4 / 5; padding-block-start: 5%; max-height: min(44rem, 100svh - var(--oben) - 3rem); width: 100%; }
.wein-kachel-gross .flasche { max-width: 70%; }
.weinseite-text h1 { font-size: var(--fs-2); line-height: 1.08; max-width: 16em; }
.weinseite-eckdaten { margin-block-start: var(--space-md); color: var(--text-leise); font-size: var(--fs-1); line-height: 1.5; }
.kauf { display: grid; gap: var(--space-md); margin-block: var(--space-xl); padding-block: var(--space-lg); border-block: 1px solid var(--linie); }
.kauf-preis { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; }
.kauf-preis .preis { font-family: var(--schrift-titel); font-size: var(--fs-2); font-weight: 500; letter-spacing: -0.01em; line-height: 1.1; }
.kauf-hinweis, .kauf-bedingung, .kauf-ohne-js { font-size: var(--font-small-size); color: var(--text-leise); }
.kauf-zeile { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.kauf-stand { font-size: var(--font-small-size); color: var(--text); min-height: 1.5em; }
html.liste-da .kauf-ohne-js { display: none; }
.menge { display: inline-flex; align-items: stretch; border: 1px solid var(--linie); border-radius: var(--radius-m); background: var(--flaeche); }
.menge-knopf { display: inline-grid; place-items: center; width: 2.75rem; min-height: 3.25rem; border: 0; background: transparent; color: var(--text); }
.menge-feld { width: 3.25rem; border: 0; background: transparent; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; appearance: textfield; -moz-appearance: textfield; }
.menge-feld::-webkit-outer-spin-button, .menge-feld::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.weinseite-abschnitt { margin-block-start: var(--space-2xl); }
.weinseite-abschnitt h2 { font-family: var(--schrift-text); font-size: var(--font-label-size); font-weight: 600; letter-spacing: var(--font-label-letter-spacing); text-transform: uppercase; color: var(--text-leise); margin-block-end: var(--space-md); }
.weinseite-abschnitt p + p { margin-block-start: var(--space-md); }
.angaben { display: grid; border-block-start: 1px solid var(--color-line-soft); }
.angaben > div { display: grid; grid-template-columns: 9rem 1fr; gap: var(--space-md); padding-block: 0.7rem; border-block-end: 1px solid var(--color-line-soft); }
.angaben dt { color: var(--text-leise); }
.angaben-gross > div { padding-block: var(--space-md); }
.angaben-gross dd { font-size: var(--fs-1); font-weight: 600; }
.schlichte-liste li { padding-block: 0.4rem; border-block-end: 1px solid var(--color-line-soft); }
.verwandt { border-block-start: 1px solid var(--color-line-soft); }
@media (min-width: 1024px) {
  .weinseite-raster { grid-template-columns: 5fr 1fr 6fr; align-items: start; }
  .weinseite-bild { position: sticky; top: calc(var(--oben) + var(--space-lg)); }
  .weinseite-text { grid-column: 3; }
}

/* ---------- Eventseite, Cantinetta, Über uns ---------- */
.eventseite-raster, .cantinetta-raster, .ueber-raster { display: grid; gap: var(--space-2xl); padding-block-end: var(--abstand-sektion); }
.cantinetta-raster, .ueber-raster { padding-block-end: 0; }
.eventseite-bild img, .cantinetta-bild img { width: 100%; height: auto; border-radius: var(--radius-l); }
.cantinetta-bild { border-radius: var(--radius-l); }
.eventseite-text { display: grid; align-content: start; gap: var(--space-xl); }
.fliesstext { display: grid; gap: var(--space-md); align-content: start; }
.fliesstext h2 { font-size: var(--fs-1); font-family: var(--schrift-text); font-weight: 600; letter-spacing: 0; line-height: 1.3; margin-block-start: var(--space-xl); }
.fliesstext h2:first-child { margin-block-start: 0; }
.fliesstext ul { list-style: disc; padding-inline-start: 1.25em; display: grid; gap: 0.35rem; }
.rechtstext { max-width: var(--lesemass); }
.hinweis-block { padding: var(--space-md) var(--space-lg); border-inline-start: 3px solid var(--akzent); background: var(--flaeche); }
@media (min-width: 1024px) {
  .eventseite-raster { grid-template-columns: 7fr 5fr; align-items: start; }
  .cantinetta-raster { grid-template-columns: 7fr 5fr; align-items: center; }
  .ueber-raster { grid-template-columns: 7fr 1fr 4fr; }
  .ueber-raster > :last-child { grid-column: 3; }
}

/* ---------- Formulare ---------- */
.formular-raster { display: grid; gap: var(--space-2xl); }
@media (min-width: 1024px) {
  .formular-raster { grid-template-columns: 5fr 1fr 6fr; }
  .formular-raster > .formular { grid-column: 3; }
}
.formular { display: grid; gap: var(--space-lg); align-content: start; }
.formular h2 { font-size: var(--fs-1); font-family: var(--schrift-text); font-weight: 600; letter-spacing: 0; }
.feld { display: grid; gap: var(--space-sm); align-content: start; }
.feld label, .wahl legend { font-weight: 600; font-size: var(--font-small-size); }
.feld-frei { font-weight: 400; color: var(--text-leise); }
.feld-hilfe { font-size: var(--font-small-size); color: var(--text-leise); }
.feld-fehler { font-size: var(--font-small-size); color: var(--akzent); font-weight: 600; }
.feld-fehler:empty { display: none; }
.feld-fehler:not(:empty)::before { content: "Fehler: "; }
.feld input, .feld select, .feld textarea {
  width: 100%; min-height: var(--comp-input-height); padding: var(--comp-input-padding);
  background: var(--comp-input-background-color); color: var(--comp-input-text-color);
  border: var(--comp-input-border-width) solid var(--comp-input-border-color); border-radius: var(--comp-input-rounded);
  transition: border-color var(--dauer-kurz) var(--ease-aus);
}
.feld textarea { min-height: 7.5rem; resize: vertical; }
.feld ::placeholder { color: var(--comp-input-placeholder-color); opacity: 1; }
@media (hover: hover) {
  .feld input:hover, .feld select:hover, .feld textarea:hover { border-color: var(--comp-input-hover-border-color); }
}
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible {
  border-color: var(--comp-input-focus-border-color);
  outline: var(--comp-input-focus-outline-width) solid var(--comp-input-focus-outline-color); outline-offset: var(--comp-input-focus-outline-offset);
}
.feld input:active, .feld select:active, .feld textarea:active { border-color: var(--comp-input-active-border-color); }
.feld input[disabled], .feld select[disabled], .feld textarea[disabled] { background: var(--comp-input-disabled-background-color); color: var(--comp-input-disabled-text-color); }
.feld [aria-invalid="true"] { border-color: var(--akzent); border-width: 2px; }
.feld-zeile { display: grid; gap: var(--space-lg); }
@media (min-width: 480px) {
  .feld-zeile { grid-template-columns: 1fr 1fr; }
  .feld-zeile-plz { grid-template-columns: 7rem 1fr; }
}
.wahl { display: grid; gap: var(--space-sm); }
.wahl-punkt, .haken { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--space-md); align-items: start; }
.wahl-punkt { min-height: 2.75rem; align-items: center; }
.wahl-punkt input, .haken input { width: 1.375rem; height: 1.375rem; margin: 0.15rem 0 0; accent-color: var(--akzent); }
.haken .feld-fehler { grid-column: 2; }
.formular-recht { font-size: var(--font-small-size); color: var(--text-leise); }
.formular-stand { min-height: 1.5em; font-weight: 600; }
.formular-stand[data-art="fehler"] { color: var(--akzent); }
.nicht-ausfuellen { position: absolute; left: -200vw; width: 1px; height: 1px; overflow: hidden; }
.band .feld-hilfe, .band .formular-recht, .band .feld-frei { color: var(--text); }

/* ---------- Bestellliste ---------- */
.bestell-raster { display: grid; gap: var(--space-3xl); }
@media (min-width: 1024px) {
  .bestell-raster { grid-template-columns: 6fr 1fr 5fr; align-items: start; }
  .bestell-raster > .formular { grid-column: 3; }
}
.bestell-liste h2 { font-size: var(--fs-1); font-family: var(--schrift-text); font-weight: 600; letter-spacing: 0; margin-block-end: var(--space-md); }
.positionen { border-block-start: 1px solid var(--linie); }
.position { display: grid; grid-template-columns: 3.5rem 1fr auto; gap: var(--space-md); align-items: center; padding-block: var(--space-md); border-block-end: 1px solid var(--color-line-soft); }
.position-bild { display: grid; place-items: end center; height: 5.5rem; background: var(--color-tile); border-radius: var(--radius-l); overflow: clip; padding-block-start: 0.35rem; }
.position-bild img { height: 100%; width: auto; }
.position-name { font-weight: 600; line-height: 1.3; }
.position-name a { text-decoration: none; }
.position-angaben { font-size: var(--font-small-size); color: var(--text-leise); }
.position-rechts { display: grid; justify-items: end; gap: var(--space-sm); }
.position-preis { font-weight: 600; font-variant-numeric: tabular-nums; }
.position .menge-knopf { min-height: 2.75rem; width: 2.5rem; }
.position .menge-feld { width: 2.75rem; }
.position-weg { background: none; border: 0; padding: 0.5rem 0; min-height: 2.75rem; color: var(--text-leise); text-decoration: underline; text-underline-offset: 0.2em; font-size: var(--font-small-size); }
.bestell-leer { display: grid; justify-items: start; gap: var(--space-lg); padding-block: var(--space-xl); font-size: var(--fs-1); }
.summe { margin-block-start: var(--space-lg); }
.summe > div { display: flex; justify-content: space-between; gap: var(--space-lg); padding-block: 0.5rem; }
.summe dt { color: var(--text-leise); }
.summe dd { font-weight: 600; text-align: end; }
.summe .preis { font-family: var(--schrift-titel); font-size: var(--fs-2); font-weight: 500; line-height: 1.1; }
.summe-lieferung dd { font-weight: 400; color: var(--text-leise); max-width: 22em; }
.bestell-danke { display: grid; justify-items: start; gap: var(--space-lg); padding-block: var(--space-2xl); }

/* ---------- Fehlerseite ---------- */
.fehlerseite { min-height: 60svh; display: grid; align-items: center; }

/* ---------- Fussbereich ---------- */
.fuss { background: var(--leiste-grund); color: var(--leiste-leise); padding-block: var(--space-3xl); margin-block-start: 0; }
.fuss :focus-visible { outline-color: var(--leiste-fokus); }
.fuss-innen { width: min(100% - 2 * var(--rand), var(--inhalt-max)); margin-inline: auto; display: grid; gap: var(--space-2xl); }
.fuss-marke p { margin-block-start: var(--space-md); max-width: 24em; }
.fuss h2 { font-family: var(--schrift-text); font-size: var(--font-label-size); font-weight: 600; letter-spacing: var(--font-label-letter-spacing); text-transform: uppercase; color: var(--leiste-text); margin-block-end: var(--space-md); }
.fuss-block { display: grid; align-content: start; gap: var(--space-sm); font-size: var(--font-small-size); }
.fuss a { color: var(--leiste-text); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.fuss-links { display: flex; flex-wrap: wrap; gap: 0 var(--space-lg); margin-block-start: var(--space-sm); }
.fuss-links a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.fuss-schluss {
  width: min(100% - 2 * var(--rand), var(--inhalt-max)); margin: var(--space-2xl) auto 0; padding-block-start: var(--space-lg);
  border-block-start: 1px solid var(--leiste-linie); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm) var(--space-xl);
  font-size: var(--font-small-size);
}
@media (min-width: 768px) {
  .fuss-innen { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

/* ---------- Event-Leiste: klebt unter der Kopfzeile, auf jeder Seite sichtbar ---------- */
/* Kontrast gerechnet: Text (ink) auf sage hell 9.1:1, dunkel 12.5:1. Der rote Punkt ist Zustand, kein Text. */
.eventleiste { background: var(--color-sage); color: var(--text); border-block-end: 1px solid color-mix(in oklch, var(--text) 18%, transparent); }
.eventleiste-innen {
  width: min(100% - 2 * var(--rand), var(--inhalt-max)); margin-inline: auto; min-height: var(--leiste-hoehe);
  display: flex; align-items: stretch; gap: var(--space-md);
}
.eventleiste-link { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 0.75rem; text-decoration: none; font-size: var(--font-small-size); }
.eventleiste-art { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.eventleiste-titel { flex: 0 1 auto; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eventleiste-termin { display: none; flex: 0 2 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eventleiste-alle { flex: none; display: inline-flex; align-items: center; gap: 0.4em; min-width: 2.75rem; justify-content: flex-end; font-size: var(--font-small-size); font-weight: 600; text-decoration: none; }
.eventleiste-alle-text { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.eventleiste .symbol { transition: transform var(--motion-duration-base) var(--ease-aus); }
.eventleiste .live-punkt { flex: none; margin: 0; }
@media (hover: hover) {
  .eventleiste-link:hover .eventleiste-titel { text-decoration: underline; text-underline-offset: 0.25em; }
  .eventleiste-alle:hover .symbol { transform: translateX(0.25em); }
}
@media (min-width: 480px) {
  .eventleiste-termin { display: block; }
}
@media (min-width: 768px) {
  .eventleiste-art { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; flex: none; }
  .eventleiste-alle-text { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; }
}

/* ---------- Bewegung: Grundzustände für die Muster aus bewegung.js ---------- */
.zeile-mask { padding-block: 0.15em; margin-block: -0.15em; }
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal]:not([data-gezeigt]) { opacity: 0; }
  html.js [data-zeilen]:not([data-gezeigt]) { opacity: 0; }
}
.kurzmeldung {
  position: fixed; z-index: var(--z-overlay); left: 50%; bottom: 1.5rem; translate: -50% 0; max-width: min(92vw, 30rem);
  padding: 0.75rem 1.1rem; background: var(--text); color: var(--grund); border-radius: var(--radius-m); box-shadow: var(--shadow-card);
  font-size: var(--font-small-size); font-weight: 600; opacity: 0; pointer-events: none;
  transition: opacity var(--motion-duration-base) var(--ease-aus);
}
.kurzmeldung[data-sichtbar] { opacity: 1; }
.kurzmeldung a { color: inherit; pointer-events: auto; }

/* Reduzierte Bewegung: keine Verschiebungen, Farbwechsel sofort. Inhalte bleiben vollständig sichtbar. */
@media (prefers-reduced-motion: reduce) {
  .textlink .symbol, .knopf, .agenda-pfeil, .verzeichnis-liste .symbol, .flasche, .wein-dazu, .eventleiste .symbol { transition-duration: 0.01ms; }
  .textlink:hover .symbol, .agenda-zeile:hover .agenda-pfeil, .verzeichnis-liste a:hover .symbol, .wein:hover .flasche, .wein-dazu:active, .eventleiste-alle:hover .symbol { transform: none; }
}

@media print {
  .oben, .fuss, .knopfreihe, .filter { display: none !important; }
  body { background: #fff; color: #000; }
}