/* ===========================================================================
   Schützen Motto Sause — Stylesheet
   Konzept: „Festplakat trifft Sommerfest" — helles Papier, plakatige
   Bebas-Headlines, Vereinsgrün dominant, Gelb als Textmarker, Wimpel und
   gedrehte Sticker als verspielte Akzente. Seriöse Basis, fröhliche Details.
   =========================================================================== */

/* --- Schriften (selbst gehostet, kein Google-CDN → DSGVO-sauber) --------- */

@font-face {
  font-family: "Bebas Neue";
  src: url("/fonts/bebas-neue-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/fonts/source-sans-3-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/fonts/source-sans-3-latin-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* --- Basis --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

/* Das hidden-Attribut muss IMMER gewinnen — auch gegen display:flex von
   Komponenten wie .consent oder .nav__liste. Ohne diese Regel bleibt z. B.
   der Cookie-Banner nach dem Klick sichtbar. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: .95;
  letter-spacing: .015em;
  text-transform: uppercase;
  margin: 0 0 var(--raum-2);
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: .04em; }

p { margin: 0 0 var(--raum-2); max-width: 68ch; text-wrap: pretty; }
.gedaempft { color: var(--fg-muted); }

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Gelber Textmarker — das verspielte Signature-Element der Seite */
.marker {
  background: linear-gradient(104deg,
    transparent 0 3%, var(--gelb) 3.5% 96%, transparent 96.5%);
  padding: 0 .18em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* --- Layout -------------------------------------------------------------- */

.huelle { width: min(100% - 2.5rem, var(--breite)); margin-inline: auto; }
.sektion { padding-block: var(--raum-6); }
.sektion--eng { padding-block: var(--raum-5); }

.raster { display: grid; gap: var(--raum-3); }
@media (min-width: 48rem) {
  .raster--2 { grid-template-columns: repeat(2, 1fr); }
  .raster--3 { grid-template-columns: repeat(3, 1fr); }
}

.karte {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--raum-3);
  box-shadow: var(--shadow);
}

/* Grüner Info-Streifen (Datum · Ort · Einlass) */
.band {
  background: var(--brand);
  color: var(--fg);
  border-block: 3px solid var(--fg);
}
.band__inhalt {
  display: flex; flex-wrap: wrap; gap: var(--raum-2) var(--raum-4);
  align-items: baseline; justify-content: center;
  padding-block: var(--raum-2);
  font-family: var(--font-display);
  font-size: var(--step-1);
  letter-spacing: .05em; text-transform: uppercase;
}
/* Auf breiten Schirmen laeuft das Band in EINER Zeile — die Werte duerfen
   deshalb nicht in sich umbrechen (sonst haengt z. B. "e.V." allein). */
.band__wert { white-space: nowrap; }

/* --- Wimpelkette ---------------------------------------------------------- */

.wimpel { display: block; width: 100%; height: 26px; }

/* --- Navigation ----------------------------------------------------------- */

.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  padding-block: var(--raum-1);
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
/* Die Flaeche liegt auf dem <header> (volle Breite), die Ausrichtung des
   Inhalts auf diesem inneren Container (auf Inhaltsbreite begrenzt). */
.nav__innen {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--raum-3);
}
.nav__marke {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-display); font-size: var(--step-1);
  letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; color: var(--fg);
}
.nav__marke svg { width: 34px; height: 34px; flex: none; }
.nav__liste { display: flex; align-items: center; gap: var(--raum-3); list-style: none; margin: 0; padding: 0; }
.nav__liste a { color: var(--fg-muted); font-weight: 700; text-decoration: none; transition: color var(--dur-fast) var(--ease); }
.nav__liste a:hover, .nav__liste a[aria-current="page"] { color: var(--fg); }
.nav__liste a[aria-current="page"] { box-shadow: inset 0 -0.45em var(--gelb); }

.nav__schalter { display: none; }
@media (max-width: 61.99rem) {
  .nav__schalter {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    background: none; border: 1px solid var(--border);
    border-radius: var(--radius); color: var(--fg); cursor: pointer;
  }
  .nav__liste {
    position: absolute; inset: 100% 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--border);
    padding: var(--raum-2) 1.25rem;
    box-shadow: var(--shadow);
  }
  .nav__liste[hidden] { display: none; }
  .nav__liste a { display: block; padding: .75rem 0; }
}

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .75rem 1.6rem;
  border: 2px solid transparent; border-radius: 999px;
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primaer { background: var(--accent); color: var(--accent-fg); box-shadow: var(--shadow); }
.btn--primaer:hover { background: color-mix(in oklab, var(--accent) 88%, black); }
.btn--sekundaer { background: transparent; color: var(--fg); border-color: var(--fg); }
.btn--sekundaer:hover { border-color: var(--accent); color: var(--accent); }
.btn--gelb { background: var(--gelb); color: var(--fg); border-color: var(--fg); box-shadow: var(--shadow); }
.btn--gelb:hover { background: color-mix(in oklab, var(--gelb) 85%, white); }

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

.hero { position: relative; overflow: clip; }
.hero__bild { position: absolute; inset: 0; }
/* Bildausschnitt: Desktop zeigt die rechte Motivhälfte (Hut, Krüge, Scheibe). */
.hero__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 72% center; }
/* Das Kundenfoto ist warm-dunkel: links abdunkeln, damit die helle
   Plakat-Schrift sitzt — rechts bleibt das Motiv (Hut, Krüge) sichtbar. */
.hero__bild::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgb(22 17 10 / .82) 0%,
    rgb(22 17 10 / .62) 42%,
    rgb(22 17 10 / .18) 72%,
    rgb(22 17 10 / .05) 100%);
}
.hero__inhalt {
  position: relative; z-index: 1;
  padding-block: clamp(6rem, 14vw, 11rem) clamp(4rem, 9vw, 7rem);
  max-width: 52rem;
  color: #fdfcf6;
}
.hero__aug {
  display: inline-block;
  font-weight: 700; font-size: var(--step--1);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gelb);
  margin-bottom: var(--raum-2);
}
.hero__titel { margin-bottom: var(--raum-1); color: inherit; text-shadow: 0 2px 18px rgb(0 0 0 / .35); }
.hero__titel .marker { color: var(--fg); }
/* Motto — zweite Stimme unter dem Titel, im Plakat-Duktus */
.hero__motto {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, .95rem + 1.6vw, 2.1rem);
  letter-spacing: .04em; text-transform: uppercase; line-height: 1.05;
  color: var(--gelb);
  margin: 0 0 var(--raum-2);
  text-shadow: 0 2px 14px rgb(0 0 0 / .45);
  max-width: 20ch;
}
.hero__logo { margin-bottom: var(--raum-2); filter: drop-shadow(0 4px 16px rgb(0 0 0 / .45)); }
.hero__untertitel { font-size: var(--step-1); font-family: var(--font-body); font-weight: 400; line-height: 1.4; max-width: 36ch; color: rgb(253 252 246 / .92); }
.hero__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--raum-2); margin-top: var(--raum-3); }

/* Mobil: Das Motiv (Hut, Krüge, Scheibe) liegt nebeneinander im Querformat —
   ein zugeschnittener Cover-Ausschnitt würde es zerschneiden. Deshalb zeigen wir
   das GANZE Bild als Bahn oben (kein Crop) und den Text darunter auf dunklem Band. */
@media (max-width: 47.99rem) {
  .hero { min-height: 0; display: block; background: var(--fg); }
  .hero__bild {
    position: relative; inset: auto;
    width: 100%; height: auto; aspect-ratio: 2358 / 1000;
  }
  .hero__bild img { object-position: center; }
  .hero__bild::after { display: none; }        /* kein Schleier — Text steht unter dem Bild */
  .hero__inhalt { color: #fdfcf6; padding-block: var(--raum-4) var(--raum-5); }
  /* Das Logo steht im Header schon direkt darueber — zweimal untereinander
     wirkt wie ein Fehler und kostet die Haelfte des ersten Bildschirms. */
  .hero__logo { display: none; }
}

/* --- Mobil: Kopf und Eckdaten-Band --------------------------------------- */
@media (max-width: 47.99rem) {
  /* Der Kopf klebt oben (sticky). Halbtransparent + Weichzeichner liess beim
     Scrollen das Hero-Bild durchscheinen — als blitze oben ein Streifen durch.
     Auf dem Handy deshalb deckend. */
  .nav {
    background: var(--bg);
    backdrop-filter: none;
  }

  /* Das Band trug drei Angaben nebeneinander: auf 375 px brach es auf drei
     Zeilen um, die Trennsterne rutschten irgendwohin und "e.V." blieb allein
     stehen. Mobil deshalb gestapelt, ohne Sterne, in kleinerer Schrift.
     Gemessen bei 375 px: 228 px -> 71 px Bandhoehe. */
  .band__inhalt {
    flex-direction: column;
    align-items: center;      /* baseline richtet in der Spalte nicht mittig aus */
    gap: .25rem;              /* drei Angaben, die als drei Fakten lesbar bleiben */
    padding-block: .55rem;
    font-size: var(--step-0);
    letter-spacing: .04em;
    line-height: 1.25;
    text-align: center;
  }
  .band__stern { display: none; }
  /* Passt eine Angabe doch nicht in ihre Zeile, soll sie gleichmaessig brechen
     statt ein einzelnes Wort haengen zu lassen ("e.V."). */
  .band__wert { white-space: normal; text-wrap: balance; }
}

/* Heller Sekundär-Button für dunkle Flächen */
.btn--hell { background: transparent; color: #fdfcf6; border-color: #fdfcf6; }
.btn--hell:hover { border-color: var(--gelb); color: var(--gelb); }

/* Gedrehter Sticker — Save the Date */
.sticker {
  position: absolute; z-index: 1;
  right: clamp(.5rem, 6vw, 6rem); top: clamp(4.5rem, 9vw, 7.5rem);
  display: grid; place-items: center; text-align: center;
  width: clamp(7rem, 14vw, 10.5rem); aspect-ratio: 1;
  background: var(--gelb); color: var(--fg);
  border: 3px solid var(--fg); border-radius: 50%;
  rotate: 9deg;
  font-family: var(--font-display); font-size: clamp(1rem, 2vw, 1.5rem);
  line-height: 1.02; letter-spacing: .04em; text-transform: uppercase;
  padding: 1rem;
  box-shadow: var(--shadow);
  transition: rotate var(--dur) var(--ease), scale var(--dur) var(--ease);
}
.sticker:hover { rotate: 3deg; scale: 1.04; }
.sticker small { display: block; font-family: var(--font-body); font-weight: 700; font-size: .66em; letter-spacing: .08em; }
@media (max-width: 47.99rem) { .sticker { display: none; } }

/* --- Wertmarken-Sektion (SMS Chips) ---------------------------------------- */

.chips-hero {
  background:
    radial-gradient(circle at 12% 18%, color-mix(in oklab, var(--gelb) 34%, transparent) 0 16%, transparent 17%),
    radial-gradient(circle at 88% 82%, color-mix(in oklab, var(--brand) 22%, transparent) 0 14%, transparent 15%),
    var(--bg-elev);
  border: 3px solid var(--fg);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 3rem);
  box-shadow: var(--shadow);
}
.chips-hero__kicker {
  display: inline-block; margin: 0 0 .4rem;
  font-weight: 700; font-size: var(--step--1);
  letter-spacing: .18em; text-transform: uppercase; color: var(--accent);
}
.chips-hero__titel { font-size: var(--step-3); margin-bottom: var(--raum-2); }
.chips-hero__text { max-width: 62ch; }
.chips-hero__karten { display: grid; gap: var(--raum-2); margin-top: var(--raum-3); }
@media (min-width: 48rem) { .chips-hero__karten { grid-template-columns: repeat(3, 1fr); } }

.chips-karte {
  background: #ffffff; border: 2px solid var(--border);
  border-radius: var(--radius); padding: var(--raum-3);
}
.chips-karte--gut { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--gelb) 45%, transparent); }
.chips-karte--essen { border-color: var(--brand); }
.chips-karte__label { margin: 0 0 .3rem; font-size: var(--step--1); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); }
.chips-karte__zahl { margin: 0 0 .3rem; font-family: var(--font-display); font-size: var(--step-2); letter-spacing: .02em; color: var(--accent); }
.chips-karte__zahl span { color: var(--fg-muted); }
.chips-karte__note { margin: 0; font-size: var(--step--1); color: var(--fg-muted); }
.chips-hero__frist {
  margin: var(--raum-3) 0 0; padding-top: var(--raum-2);
  border-top: 2px dashed var(--brand);
  font-weight: 700;
}

/* --- Ticket-Karten (Shop) -------------------------------------------------- */

.ticket {
  position: relative;
  background: #ffffff;
  border: 2px dashed var(--brand);
  border-radius: var(--radius-lg);
  padding: var(--raum-3) var(--raum-3) var(--raum-3) calc(var(--raum-3) + 1rem);
  box-shadow: var(--shadow);
  overflow: clip;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.ticket:hover { transform: translateY(-3px) rotate(-.4deg); }
/* Abrisskante links */
.ticket::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 1rem;
  background: radial-gradient(circle at 0 50%, var(--bg) 6px, var(--brand) 6.5px 7.5px, transparent 8px);
  background-size: 1rem 1.6rem;
  background-repeat: repeat-y;
}
.ticket h3 { margin-bottom: .3rem; }
.ticket__preis {
  font-family: var(--font-display); font-size: var(--step-2);
  letter-spacing: .02em; color: var(--accent);
}
.ticket__meta { font-size: var(--step--1); color: var(--fg-muted); margin-bottom: var(--raum-2); }
/* Chips-Badge neben dem Preis — macht den Gegenwert sofort sichtbar */
.ticket__chips {
  display: inline-block; margin-left: .5rem; vertical-align: middle;
  background: var(--gelb); color: var(--fg); border: 1px solid var(--fg);
  border-radius: 999px; padding: .1rem .6rem;
  font-family: var(--font-body); font-size: var(--step--1); font-weight: 700;
  letter-spacing: 0;
}

/* Statistik-Diagramm im Admin (reines CSS, keine externe Bibliothek) */
.stat-balken { display: grid; gap: var(--raum-2); margin-block: var(--raum-3); max-width: 44rem; }
.stat-zeile { display: grid; grid-template-columns: 12rem 1fr auto; gap: var(--raum-2); align-items: center; }
.stat-zeile__spur { background: var(--bg-sunken); border-radius: 999px; height: 1.5rem; overflow: hidden; }
.stat-zeile__fuell { height: 100%; background: var(--accent); border-radius: 999px; min-width: 2px; }
.stat-zeile--essen .stat-zeile__fuell { background: var(--brand); }
.stat-zeile__wert { font-family: var(--font-display); font-size: var(--step-1); letter-spacing: .03em; }
@media (max-width: 47.99rem) { .stat-zeile { grid-template-columns: 1fr; gap: .35rem; } }

/* --- Speisekarte ----------------------------------------------------------- */

.menue { max-width: 44rem; }
.menue h3 { border-bottom: 3px solid var(--gelb); padding-bottom: .3rem; margin-top: var(--raum-4); }
.menue dl { margin: 0; }
.menue .zeile {
  display: flex; align-items: baseline; gap: .6rem;
  padding-block: .45rem;
}
.menue dt { flex: none; font-weight: 700; }
.menue .punkte { flex: 1; border-bottom: 2px dotted var(--border); translate: 0 -.35em; min-width: 2rem; }
.menue dd { flex: none; margin: 0; font-family: var(--font-display); font-size: var(--step-1); letter-spacing: .03em; }
.menue .zusatz { font-size: var(--step--1); color: var(--fg-muted); font-weight: 400; display: block; }

/* --- Programm / Zeitleiste -------------------------------------------------- */

.zeitplan { list-style: none; margin: 0; padding: 0; max-width: 40rem; }
.zeitplan li {
  display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--raum-2);
  padding-block: var(--raum-2);
  border-bottom: 1px solid var(--border);
}
.zeitplan .zeit { font-family: var(--font-display); font-size: var(--step-1); color: var(--accent); letter-spacing: .03em; }

/* --- Zwei-Klick-Karte ------------------------------------------------------- */

.karte-rahmen { position: relative; border-radius: var(--radius-lg); overflow: clip; border: 1px solid var(--border); box-shadow: var(--shadow); }
.karte-rahmen iframe { display: block; width: 100%; height: 24rem; border: 0; }
[data-extern-platzhalter] iframe { display: none; }
.karte-hinweis {
  display: grid; place-items: center; gap: var(--raum-2);
  min-height: 24rem; text-align: center; padding: var(--raum-3);
  background:
    radial-gradient(circle at 20% 30%, color-mix(in oklab, var(--brand) 14%, transparent) 0 12%, transparent 13%),
    radial-gradient(circle at 80% 70%, color-mix(in oklab, var(--gelb) 30%, transparent) 0 10%, transparent 11%),
    var(--bg-elev);
}
[data-extern-platzhalter="0"] .karte-hinweis, .karte-rahmen:not([data-extern-platzhalter]) .karte-hinweis { display: none; }

/* --- Formular --------------------------------------------------------------- */

.feld { display: grid; gap: .4rem; margin-bottom: var(--raum-2); }
.feld label { font-weight: 700; font-size: var(--step--1); }
.feld input, .feld textarea, .feld select {
  min-height: 48px; padding: .65rem .9rem;
  background: #ffffff; color: var(--fg);
  border: 1px solid var(--border); border-radius: var(--radius);
  font: inherit;
}
.feld textarea { min-height: 9rem; resize: vertical; }
.feld input:focus-visible, .feld textarea:focus-visible { border-color: var(--accent); }
.honigtopf { position: absolute; left: -9999px; }   /* Spam-Falle, nie ausfüllen */

/* Newsletter-Zeile */
.newsletter-form { display: flex; flex-wrap: wrap; gap: var(--raum-1); max-width: 34rem; }
.newsletter-form input[type="email"] {
  flex: 1 1 14rem; min-height: 48px; padding: .65rem .9rem;
  background: #ffffff; color: var(--fg);
  border: 1px solid var(--border); border-radius: 999px; font: inherit;
}

/* --- Footer ------------------------------------------------------------------ */

.fuss { border-top: 1px solid var(--border); padding-block: var(--raum-4); color: var(--fg-muted); font-size: var(--step--1); }
.fuss a { color: inherit; }
.fuss__zeilen { display: flex; flex-wrap: wrap; gap: var(--raum-3); justify-content: space-between; }

/* --- Cookie-Banner ------------------------------------------------------------ */

.consent {
  position: fixed; inset: auto 1rem 1rem; z-index: var(--z-banner);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--raum-2);
  max-width: 46rem; margin-inline: auto;
  background: #ffffff; color: var(--fg);
  border: 2px solid var(--fg); border-radius: var(--radius-lg);
  padding: var(--raum-3); box-shadow: var(--shadow);
}
.consent p { margin: 0; flex: 1 1 18rem; font-size: var(--step--1); }
.consent__aktionen { display: flex; gap: var(--raum-1); }
/* Ablehnen muss gleichwertig aussehen — kein Dark Pattern. */

/* --- Scroll-Reveal ------------------------------------------------------------
   Versteckt wird nur unter html.js (setzt main.js) — ohne JavaScript bleibt
   jeder Inhalt sichtbar. */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.js [data-reveal].sichtbar { opacity: 1; transform: none; }
[data-reveal][data-verzoegerung="1"] { transition-delay: 90ms; }
[data-reveal][data-verzoegerung="2"] { transition-delay: 180ms; }
[data-reveal][data-verzoegerung="3"] { transition-delay: 270ms; }

/* --- Reduced Motion ----------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .btn:hover, .ticket:hover { transform: none; }
}

/* --- Shop-Ergänzungen ---------------------------------------------------------- */

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.demo-banner {
  background: var(--fg); color: var(--gelb);
  text-align: center; padding: .55rem 1rem; font-size: var(--step--1); font-weight: 700;
}

.korb-zahl {
  display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem;
  padding-inline: .35rem; border-radius: 999px;
  background: var(--gelb); color: var(--fg); border: 1px solid var(--fg);
  font-size: .78rem; font-weight: 700;
}

.tabelle { width: 100%; border-collapse: collapse; margin-block: var(--raum-3); }
.tabelle th, .tabelle td { text-align: left; padding: .7rem .6rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.tabelle thead th { font-size: var(--step--1); text-transform: uppercase; letter-spacing: .06em; color: var(--fg-muted); }
.tabelle tfoot th { font-weight: 700; }
/* Storno-Belege optisch abheben — sie mindern den Saldo. */
.tabelle tbody tr.ist-storno,
.tabelle--karten tbody tr.ist-storno { color: var(--fg-muted); }
.tabelle--karten tbody tr.ist-storno { border-style: dashed; }

/* Zeile eines bereits eingelassenen Gastes (Gaesteliste). */
.tabelle tbody tr.ist-drin { background: var(--bg-elev); }

/* Der Wrapper faengt breite Inhalte ab, ohne dass die SEITE scrollt.
   overflow gehoert auf den Wrapper, nicht auf das <table> selbst: overflow-x
   direkt auf einem Tabellen-Element klippt in manchen Browsern nicht
   zuverlaessig. Fuer Tabellen mit .tabelle--karten wird der Wrapper mobil
   stillgelegt — dort gibt es gar nichts mehr zu scrollen. */
.tabelle-scroll { overflow-x: auto; }

/* --- Tabelle als gestapelte Karten (Handy) --------------------------------
   Seitliches Scrollen ist auf dem Handy keine Lesbarkeit: Ticketname links
   und Betrag rechts sind nie gleichzeitig sichtbar. Unter 768 px wird jede
   Zeile deshalb zu einer Karte, in der die Werte UNTEREINANDER stehen. Die
   Spaltenueberschrift kommt aus data-label an der Zelle.

   ARIA: display:block nimmt der Tabelle die eingebaute Semantik. Damit
   Screenreader weiterhin Zeilen und Zellen erkennen, tragen die Elemente im
   Markup ausdrueckliche role-Attribute (role="table"/"row"/"cell"). */
@media (max-width: 47.99rem) {
  .tabelle-scroll:has(.tabelle--karten) { overflow-x: visible; }

  .tabelle--karten,
  .tabelle--karten tbody,
  .tabelle--karten tfoot,
  .tabelle--karten tr,
  .tabelle--karten td,
  .tabelle--karten tfoot th { display: block; width: 100%; }

  /* Kopfzeile entfaellt — die Beschriftung steht in jeder Karte selbst. */
  .tabelle--karten thead { display: none; }

  .tabelle--karten tbody tr {
    margin-bottom: var(--raum-2);
    padding: var(--raum-2);
    background: var(--bg-elev);
    border: 2px solid var(--border);
    border-radius: var(--radius);
  }
  .tabelle--karten td {
    padding: .3rem 0;
    border-bottom: 0;
    white-space: normal;      /* Betraege duerfen umbrechen statt abzuschneiden */
    overflow-wrap: anywhere;
  }
  /* Beschriftung und Wert nebeneinander, Wert rechts — bei Platznot untereinander */
  .tabelle--karten td[data-label] {
    display: flex; flex-wrap: wrap; gap: .2rem .75rem;
    justify-content: space-between; align-items: baseline;
  }
  .tabelle--karten td[data-label]::before {
    content: attr(data-label);
    flex: none;
    font-size: var(--step--1); font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--fg-muted);
  }
  /* Die erste Zelle traegt den Namen — die bekommt die Karte als Ueberschrift. */
  .tabelle--karten td[data-titel] {
    display: block;
    margin-bottom: .35rem; padding-top: 0;
    font-family: var(--font-display); font-size: var(--step-1);
    letter-spacing: .02em;
  }
  .tabelle--karten td[data-titel]::before { content: none; }
  /* Der Zusatz unter dem Kartentitel (Chips-Hinweis, Bestellnummer, Slug) darf
     die Display-Schrift des Titels NICHT erben — sonst schreit er genauso laut. */
  .tabelle--karten td[data-titel] .gedaempft {
    display: block;
    font-family: var(--font-body); font-size: var(--step--1);
    font-weight: 400; letter-spacing: normal; text-transform: none;
  }
  /* Formulare in der Karte fuellen die Breite und bleiben gut tippbar.
     Die Eingaben in den Admin-Tabellen tragen keine .feld-/.menge-form-Klasse,
     waeren also nur rund 22 px hoch — auf dem Handy zu klein zum Treffen. */
  .tabelle--karten td form { width: 100%; }
  .tabelle--karten td .btn { min-height: 44px; }
  .tabelle--karten td input:not([type="hidden"]):not([type="checkbox"]),
  .tabelle--karten td select {
    min-height: 44px; padding: .4rem .6rem;
    background: #ffffff; color: var(--fg);
    border: 1px solid var(--border); border-radius: var(--radius); font: inherit;
  }
  /* Ankreuzfeld bleibt quadratisch, wird aber groesser (Mindestmass 24 px). */
  .tabelle--karten td input[type="checkbox"] { width: 1.6rem; height: 1.6rem; accent-color: var(--accent); }
  .tabelle--karten td label { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; }

  /* Bereits eingelassene Gaeste: Als Karte hat jede Zeile denselben hellen
     Hintergrund, die alte Einfaerbung waere unsichtbar. Deshalb gruener
     Rahmen und Farbstich — am Einlass muss das auf einen Blick erkennbar sein. */
  .tabelle--karten tbody tr.ist-drin {
    background: color-mix(in oklab, var(--brand) 16%, var(--bg-elev));
    border-color: var(--brand);
  }

  /* Gesamtsumme deutlich abgesetzt statt als Tabellenfuss. */
  .tabelle--karten tfoot tr {
    display: flex; flex-wrap: wrap; gap: .3rem .75rem;
    justify-content: space-between; align-items: baseline;
    margin-top: var(--raum-2); padding: var(--raum-2);
    background: var(--gelb); color: var(--fg);
    border: 3px solid var(--fg); border-radius: var(--radius);
  }
  .tabelle--karten tfoot th,
  .tabelle--karten tfoot td { width: auto; padding: 0; border: 0; }
  /* Der BETRAG ist die wichtige Angabe — er steht in der Zelle, die
     Beschriftung daneben etwas kleiner. */
  .tabelle--karten tfoot th { font-family: var(--font-display); font-size: var(--step-1); }
  .tabelle--karten tfoot td { font-family: var(--font-display); font-size: var(--step-2); font-weight: 700; }
  .tabelle--karten tfoot td:empty { display: none; }
}

.menge-form { display: flex; gap: .4rem; align-items: center; }
.menge-form input, .menge-form select { min-height: 44px; padding: .4rem .5rem; background: #ffffff; color: var(--fg); border: 1px solid var(--border); border-radius: var(--radius); font: inherit; }

/* Mengenfeld + Knopf: nebeneinander, beide gross genug zum Tippen. */
.menge-form__zahl { width: 5rem; }
@media (max-width: 47.99rem) {
  .menge-form { flex-wrap: wrap; gap: .5rem; }
  /* Spezifisch genug, um die 44px aus .menge-form input zu ueberschreiben. */
  .menge-form input.menge-form__zahl { width: 5.5rem; min-height: 48px; font-size: var(--step-0); }
  .menge-form .btn { flex: 1 1 auto; min-height: 48px; }
}

/* Bestellübersicht direkt vor dem Bestell-Button (§ 312j) */
.bestell-recap { margin: var(--raum-3) 0 var(--raum-2); padding: var(--raum-2) var(--raum-3);
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); }
.bestell-recap h3 { margin: 0 0 .4rem; font-size: var(--step-0); }
.bestell-recap ul { margin: 0 0 .5rem; padding-left: 1.1rem; }
.bestell-recap li { margin-bottom: .2rem; }
.bestell-recap__summe { margin: 0; font-size: var(--step-1); }
.bestell-recap__summe .gedaempft { display: block; font-size: var(--step--1); font-weight: 400; }

/* Zustimmungs-Checkbox — großzügige Klickfläche, auch mobil gut erreichbar */
.zustimmung { display: flex; gap: .7rem; align-items: flex-start; cursor: pointer;
  padding: .6rem 0; line-height: 1.45; }
.zustimmung input[type="checkbox"] { flex: none; width: 1.5rem; height: 1.5rem; margin-top: .1rem;
  accent-color: var(--accent); cursor: pointer; }
/* Auf dem Handy groesser: 24 px ist das Mindestmass fuer ein Tippziel
   (WCAG 2.5.8). Das umgebende <label> ist ohnehin mitklickbar. */
@media (max-width: 47.99rem) {
  .zustimmung input[type="checkbox"] { width: 1.6rem; height: 1.6rem; }
}

/* --- Bild-Sektionen -------------------------------------------------------------- */

.bildkarte { border-radius: var(--radius-lg); overflow: clip; border: 1px solid var(--border); box-shadow: var(--shadow); }
.bildkarte img { width: 100%; height: 100%; object-fit: cover; }

/* Versetztes Zwei-Spalten-Layout mit Bild — bewusst asymmetrisch */
.split { display: grid; gap: var(--raum-4); align-items: center; }
@media (min-width: 48rem) {
  .split { grid-template-columns: 7fr 5fr; }
  .split--umgekehrt { grid-template-columns: 5fr 7fr; }
  .split--umgekehrt > :first-child { order: 2; }
  .split .bildkarte { rotate: -1.2deg; }
  .split--umgekehrt .bildkarte { rotate: 1.2deg; }
}