/* =====================================================================
   MISS GIN — Site-Layer
   Baut auf design-system.css auf (Farb-Tokens, Buttons, Cards, Badges).

   Aufbau dieser Datei:
     1  Basis und Zugänglichkeit
     2  Layout-Raster
     3  Kopfzeile und Navigation
     4  Hero-Varianten
     5  BAUSTEINE  ← der eigentliche Werkzeugkasten
     6  Formulare
     7  Fusszeile
     8  Story-Page
     9  Hinweiskästen (nur bis zum Livegang)

   Zu Abschnitt 5: Diese Bausteine sind bewusst als geschlossenes Set
   gebaut. Jeder hat eine Fläche, eine klare Typo-Hierarchie und einen
   Hover-Zustand — nicht nur eine Linie und drei Textgrössen. Neue Seiten
   werden aus diesen Teilen zusammengesetzt, nicht neu erfunden.
   ===================================================================== */

/* =====================================================================
   1 · BASIS
   ===================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--mg-white);
  color: var(--mg-ink);
  font-family: var(--mg-font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* height:auto gehoert zwingend zu max-width:100%. Sonst behaelt das Bild die
   im HTML-Attribut angegebene Hoehe bei, waehrend die Breite schrumpft —
   Ergebnis: verzerrte Bilder (v.a. in Chrome). Bloecke, die bewusst eine
   feste Hoehe oder aspect-ratio setzen, ueberschreiben das weiter unten. */
img { max-width: 100%; height: auto; }
a { color: inherit; }

/* --------------------------------------------- Gold auf hellem Grund ---
   --mg-gold (#cba33a) ist auf Schwarz hervorragend (8,84:1) und auf
   hellem Papier unlesbar: gegen --mg-paper sind es 2,16:1, gegen Weiss
   2,38:1. Verlangt sind 4,5:1. Betroffen war ausgerechnet das, worauf
   es auf einer Event-Seite ankommt — die Uhrzeiten des Ablaufs und die
   Weiterklick-Zeilen der Terminkarten.

   Loesung ist ein ZWEITES Token, kein Ersatz: --mg-gold-tief (5,27:1
   auf Papier, 5,79:1 auf Weiss). --mg-gold bleibt unangetastet fuer
   Schwarzflaechen, Knopfflaechen und die Eckwinkel — dort ist es
   korrekt und traegt die Marke.

   --mg-fokus schaltet denselben Wechsel fuer den Fokusring: der goldene
   Ring erreichte auf hellen Flaechen 2,16:1, WCAG 1.4.11 verlangt 3:1
   fuer Fokusindikatoren. Die Variable wird auf hellen Sektionen
   umgesetzt und vererbt sich an alles darin.
   ----------------------------------------------------------------------- */
:root {
  --mg-gold-tief: #7d6215;
  --mg-fokus: var(--mg-gold);
}

.mg-section--white,
.mg-section--paper,
.mg-panel--white,
.mg-panel,
.mg-faq,
.mg-eventcards { --mg-fokus: var(--mg-gold-tief); }

:focus-visible {
  outline: 3px solid var(--mg-fokus);
  outline-offset: 3px;
}

/* Textakzente auf hellen Flaechen. Bewusst kontextabhaengig notiert:
   dieselben Bausteine stehen anderswo auf Schwarz und muessen dort das
   helle Gold behalten. */
.mg-section--white .mg-eyebrow,
.mg-section--paper .mg-eyebrow,
.mg-panel .mg-eyebrow,
.mg-section--white .mg-timeline__zeit,
.mg-section--paper .mg-timeline__zeit,
.mg-section--white .mg-timeline__year,
.mg-section--paper .mg-timeline__year { color: var(--mg-gold-tief); }

/* Formularfelder tragen scharfe Kanten — das ist Teil der Etikett-
   Formensprache und in design-system.css fuer .mg-form korrekt gesetzt.
   .mg-newsletter__input zieht dort aber --mg-radius-button (100px) und
   war damit das einzige runde Feld der Website. Korrektur gehoert
   hierher, weil design-system.css beim Extrahieren ueberschrieben wird. */
.mg-newsletter__input { border-radius: var(--mg-radius-card, 0); }

.mg-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--mg-gold);
  color: #000;
  padding: 12px 20px;
  font-family: var(--mg-font-heading);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
}
.mg-skip-link:focus { left: 0; }

.mg-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* =====================================================================
   2 · LAYOUT
   ===================================================================== */
:root {
  --mg-gutter: clamp(20px, 5vw, 56px);
  --mg-section-y: clamp(60px, 8vw, 100px);
  --mg-maxw: 1280px;
  --mg-narrow: 980px;

  /* Flächen, die es im Design-System noch nicht gab */
  --mg-ink-soft: #56514a;          /* Fliesstext, waermer als reines Grau */
  --mg-surface-dark: #0e0e0e;      /* Karten auf schwarzem Grund */
  --mg-gold-soft: rgba(203, 163, 58, 0.55);

  /* --- Etikett-Sprache -------------------------------------------------
     Die Container tragen keinen geschlossenen Rahmen mehr, sondern zwei
     diagonale Eckwinkel — abgeleitet von den gravierten Rahmen auf Miss
     Gins Flaschenetiketten. Dazu ein blasses Lotus-Ornament als Gravur.
     Ein umlaufender 1px-Rahmen mit Akzentbalken ist die Standardlösung
     aus jedem Baukasten; das hier gehört dieser Marke.                   */
  --mg-ecke: 20px;               /* Länge der Eckwinkel                  */
  --mg-ecke-hover: 34px;
  --mg-ecke-abstand: 12px;       /* Abstand vom Kartenrand               */
  --mg-ornament: url("../img/lotus-mark.svg");
}

.mg-section {
  position: relative;
  padding: var(--mg-section-y) var(--mg-gutter);
}
/* Feines Korn auf allen Flächen. Kaum bewusst wahrnehmbar, nimmt den
   Hintergründen aber das perfekt Glatte, das digital wirkt. */
.mg-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23k)' opacity='0.05'/%3E%3C/svg%3E");
}
.mg-section > * { position: relative; z-index: 1; }
.mg-section--tight { padding-block: clamp(38px, 5vw, 60px); }
.mg-section--dark { background: var(--mg-black); color: var(--mg-white); }
.mg-section--paper { background: var(--mg-paper); }
.mg-section--white { background: var(--mg-white); }

.mg-shell { max-width: var(--mg-maxw); margin-inline: auto; width: 100%; }
.mg-shell--narrow { max-width: var(--mg-narrow); }

/* Typo-Helfer */
.mgx-h1 {
  font-family: var(--mg-font-heading);
  text-transform: uppercase;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: 0.004em;
  margin: 0;
}
.mgx-h2 {
  font-family: var(--mg-font-heading);
  text-transform: uppercase;
  font-weight: 700;
  line-height: 0.96;
  letter-spacing: 0.006em;
  margin: 0;
  color: var(--mg-ink);
}
.mgx-body {
  font-family: var(--mg-font-body);
  line-height: 1.62;
  color: var(--mg-ink-soft);
  margin: 0;
}
.mgx-prodcta { font-size: 0.84rem; padding: 9px 16px; }

.mg-section--dark .mgx-h2,
.mg-section--dark .mg-section-header__title { color: var(--mg-white); }
.mg-section--dark .mgx-body,
.mg-section--dark .mg-section-header__lead { color: rgba(255, 255, 255, 0.7); }

/* ---------------------------------------------- Abschnitts-Kopf ----- */
/* Die Augenbraue bekommt einen kurzen Goldstrich. Kleines Detail, aber
   es verankert den Block und nimmt ihm das Beliebige. */
.mg-eyebrow {
  position: relative;
  padding-left: 26px;
}
.mg-eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.56em;
  width: 16px;
  height: 2px;
  background: currentColor;
}
.mg-section-header--center .mg-eyebrow { padding: 0 26px; }
.mg-section-header--center .mg-eyebrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0.56em;
  width: 16px;
  height: 2px;
  background: currentColor;
}

.mg-section-header { max-width: 760px; margin-bottom: clamp(34px, 4.5vw, 52px); }
.mg-section-header__title { text-wrap: balance; margin: 12px 0 0; }
.mg-section-header__lead { margin: 16px 0 0; }
.mg-section-header--center { margin-inline: auto; text-align: center; }

/* --wide heisst: so breit wie das Raster darunter. Dazu gehoert auch
   dieselbe Ausrichtung — margin-inline:auto. Ohne das klebte der Kopf am
   linken Seitenrand, waehrend Karten und Raster darunter zentriert sind.
   Bei 1440px waren das 24 Pixel Versatz, bei 1920px schon 264. */
.mg-section-header--wide { max-width: var(--mg-maxw); margin-inline: auto; }

/* Abschnitts-Kopf als Zeile: Titel links, Knopf rechts.
   Braucht zwingend flex-direction:row. Der Baustein selbst ist eine
   Spalte (design-system.css setzt flex-direction:column), und in einer
   Spalte richtet align-items:flex-end nicht den Knopf rechts aus,
   sondern schiebt den gesamten Kopf an den rechten Rand. Genau das war
   auf der Startseite und der Events-Seite passiert. */
.mg-section-header--zeile {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* =====================================================================
   3 · KOPFZEILE
   ===================================================================== */
.mg-header {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px var(--mg-gutter);
  background: var(--mg-black);
  color: var(--mg-white);
  transition: background-color 0.25s ease;
}
.mg-header--overlay {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: transparent;
}
.mg-header--overlay.is-stuck {
  background: rgba(0, 0, 0, 0.94);
  backdrop-filter: blur(8px);
}

.mg-header__logo { display: flex; align-items: center; flex: none; }
.mg-header__logo img { height: 56px; width: auto; display: block; }

.mg-nav {
  display: flex;
  gap: clamp(12px, 1.8vw, 26px);
  font-family: var(--mg-font-heading);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}
.mg-nav a {
  text-decoration: none;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.mg-nav a:hover { color: var(--mg-gold); }
.mg-nav a[aria-current="page"] {
  color: var(--mg-gold);
  border-bottom-color: var(--mg-gold);
}

.mg-header__actions { display: flex; align-items: center; gap: 12px; flex: none; }

.mg-burger {
  display: none;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  padding: 0;
}
.mg-burger__bars,
.mg-burger__bars::before,
.mg-burger__bars::after {
  display: block;
  width: 18px; height: 2px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.mg-burger__bars { position: relative; }
.mg-burger__bars::before,
.mg-burger__bars::after { content: ""; position: absolute; left: 0; }
.mg-burger__bars::before { top: -6px; }
.mg-burger__bars::after { top: 6px; }
.mg-burger[aria-expanded="true"] .mg-burger__bars { background: transparent; }
.mg-burger[aria-expanded="true"] .mg-burger__bars::before { transform: translateY(6px) rotate(45deg); }
.mg-burger[aria-expanded="true"] .mg-burger__bars::after { transform: translateY(-6px) rotate(-45deg); }

/* Sechs Menuepunkte brauchen frueher Platz als fuenf. */
@media (max-width: 1120px) {
  .mg-burger { display: inline-flex; }
  .mg-header,
  .mg-header--overlay { position: sticky; background: var(--mg-black); }
  .mg-header__logo img { height: 46px; }

  .mg-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--mg-black);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    padding: 8px var(--mg-gutter) 20px;
    font-size: 17px;
    display: none;
  }
  .mg-nav.is-open { display: flex; }
  .mg-nav a { padding: 15px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
  .mg-nav a[aria-current="page"] { border-bottom-color: var(--mg-gold); }
  .mg-header__actions .mg-btn { display: none; }
}

/* =====================================================================
   4 · HERO
   ===================================================================== */
.mg-fullhero {
  position: relative;
  min-height: min(88vh, 760px);
  display: grid;
  place-items: center;
  color: #fff;
  overflow: hidden;
  text-align: center;
  padding: clamp(90px, 14vw, 150px) var(--mg-gutter) clamp(56px, 9vw, 96px);
}
.mg-fullhero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.mg-fullhero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.3) 38%,
    rgba(0, 0, 0, 0.84) 100%
  );
}
.mg-fullhero__inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  max-width: 900px;
}
.mg-fullhero__title { font-size: clamp(2.9rem, 8.5vw, 6.25rem); margin-top: 18px; max-width: 14ch; }
.mg-fullhero__title em { color: var(--mg-gold); font-style: normal; }
.mg-fullhero__lead {
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(1rem, 1.6vw, 1.19rem);
  max-width: 50ch;
  margin-top: 22px;
}
.mg-fullhero__actions {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 14px; margin-top: 30px;
}
.mg-fullhero .mg-btn--outline { color: #fff; border-color: rgba(255, 255, 255, 0.6); }
.mg-fullhero .mg-btn--outline:hover { background: #fff; color: var(--mg-ink); }

/* Seitenkopf der Unterseiten — mit Bild hinterlegbar */
.mg-pagehead {
  position: relative;
  background: var(--mg-black);
  color: #fff;
  padding: clamp(52px, 8vw, 96px) var(--mg-gutter);
  overflow: hidden;
}
.mg-pagehead__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Hochformate werden hier stark beschnitten — der Bildausschnitt
     liegt deshalb im oberen Drittel, wo bei Portraits das Gesicht sitzt. */
  object-position: center 28%;
  opacity: 0.42;
}
.mg-pagehead--image::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.45) 70%);
}
.mg-pagehead__inner {
  position: relative; z-index: 2;
  max-width: var(--mg-maxw);
  margin-inline: auto;
}
.mg-pagehead__title { font-size: clamp(2.3rem, 6vw, 4.2rem); color: #fff; margin-top: 12px; text-wrap: balance; }
.mg-pagehead__lead {
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(1rem, 1.5vw, 1.13rem);
  max-width: 58ch;
  margin-top: 18px;
  line-height: 1.62;
}
.mg-pagehead__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---------------------------------------------------------------------
   Poster-Kopf der Event-Detailseiten (event-*.html)

   Eine Event-Seite ist ein digitaler Aushang. Sie wird per WhatsApp
   weitergeleitet, aus der Instagram-Bio geoeffnet oder von einem QR-Code
   auf Papier — fast immer auf dem Handy, fast immer von jemandem, der
   die Seite nie zuvor gesehen hat. Deshalb muss der erste Bildschirm
   drei Fragen beantworten, ohne dass gescrollt wird: was, wann, wo.

   Unterschied zum normalen Seitenkopf: mehr Hoehe, der Text sitzt unten
   statt mittig, und das Foto ist deutlich praesenter (0.62 statt 0.42).
   Beim Aushang traegt das Bild, nicht die Ueberschrift.
   --------------------------------------------------------------------- */
.mg-pagehead--poster {
  min-height: min(76vh, 660px);
  display: flex;
  align-items: flex-end;
  padding-block: clamp(64px, 11vw, 120px) clamp(38px, 6vw, 62px);
}
/* Der Poster-Kopf ist ein Flex-Container (damit der Text unten sitzt).
   Ohne width:100% schrumpft der Inhaltsblock als Flex-Item auf seine
   Textbreite, und das margin-inline:auto des Bausteins zentriert ihn
   dann mitten im Bild statt ihn am Raster links auszurichten. */
.mg-pagehead--poster .mg-pagehead__inner { width: 100%; }

.mg-pagehead--poster .mg-pagehead__img {
  opacity: 0.62;
  /* Mittig statt oberes Drittel: Auf Eventfotos steht die Szene in der
     Bildmitte, nicht wie bei Portraits im oberen Bereich. */
  object-position: center 45%;
}
/* Verlauf von unten statt von links. Ein seitlicher Verlauf verdunkelt
   genau die Bildmitte, in der bei Raum- und Eventfotos das Motiv liegt. */
.mg-pagehead--poster.mg-pagehead--image::after {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.26) 32%,
    rgba(0, 0, 0, 0.9) 100%
  );
}
.mg-pagehead--poster .mg-pagehead__title { max-width: 17ch; }
.mg-pagehead--poster .mg-pagehead__lead { max-width: 46ch; margin-top: 14px; }

/* Die Datumszeile. Steht bewusst NACH der Ueberschrift und nicht davor:
   Zuerst weckt das Motto Interesse, dann liefert das Datum den Grund
   zu handeln. Umgekehrt liest sich die Seite wie ein Behoerdenaushang. */
.mg-eventdate {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  margin-top: 22px;
  font-family: var(--mg-font-heading);
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(1.25rem, 2.6vw, 1.85rem);
  line-height: 1.05;
  letter-spacing: 0.05em;
  color: var(--mg-gold);
  font-variant-numeric: tabular-nums;
}
.mg-eventdate__sep {
  color: rgba(255, 255, 255, 0.3);
  font-weight: 400;
}

/* Die Faktenzeile unter den Knoepfen: Eintritt, Anmeldung, Adresse.
   Bei einem Event ohne Anmeldung sind das die drei Angaben, wegen deren
   Fehlen sonst jemand anruft — oder eben nicht kommt. */
.mg-eventfacts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.93rem;
  color: rgba(255, 255, 255, 0.82);
}
.mg-eventfacts li { display: flex; align-items: center; gap: 10px; }
.mg-eventfacts li::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  background: var(--mg-gold);
}

/* =====================================================================
   5 · BAUSTEINE
   ===================================================================== */

/* ---------------------------------------------------------------------
   5.1 · Statement-Band
   Das goldene Band. Frueher: dünne schwarze Kanten oben und unten, kleine
   Schrift, wirkte wie ein Trennstrich. Jetzt: randlose Fläche, Lichtverlauf
   von oben, grosse Schrift, optional Augenbraue und Handlungsaufruf.
   --------------------------------------------------------------------- */
.mg-band {
  position: relative;
  isolation: isolate;
  background: var(--mg-gold);
  color: #000;
  text-align: center;
  padding: clamp(46px, 7vw, 84px) var(--mg-gutter);
  overflow: hidden;
}
.mg-band::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(
    130% 90% at 50% -10%,
    rgba(255, 255, 255, 0.38) 0%,
    rgba(255, 255, 255, 0) 62%
  );
}
.mg-band__inner {
  max-width: 1080px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.mg-band__eyebrow {
  font-family: var(--mg-font-heading);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-weight: 600;
  font-size: 0.8rem;
  color: rgba(0, 0, 0, 0.62);
}
.mg-band__text {
  font-family: var(--mg-font-heading);
  text-transform: uppercase;
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: 0.004em;
  font-size: clamp(2.1rem, 5.6vw, 4rem);
  margin: 0;
  text-wrap: balance;
}
.mg-band__cta { margin-top: 6px; }
.mg-band .mg-btn--outline { border-color: rgba(0, 0, 0, 0.7); color: #000; }
.mg-band .mg-btn--outline:hover { background: #000; color: var(--mg-gold); }

/* Kleiner, wenn das Band nur als Atempause zwischen zwei Abschnitten dient */
.mg-band--slim { padding-block: clamp(30px, 4vw, 48px); }
.mg-band--slim .mg-band__text { font-size: clamp(1.5rem, 3.4vw, 2.3rem); }

/* Schwarze Variante mit Goldschrift */
.mg-band--dark { background: var(--mg-black); color: var(--mg-gold); }
.mg-band--dark::before {
  background: radial-gradient(
    130% 90% at 50% -10%,
    rgba(203, 163, 58, 0.16) 0%,
    rgba(203, 163, 58, 0) 60%
  );
}
.mg-band--dark .mg-band__eyebrow { color: rgba(255, 255, 255, 0.5); }

/* ---------------------------------------------------------------------
   5.2 · Feature-Karten
   Ersetzt das alte Nummern-Raster. Der Unterschied: eine echte Fläche mit
   Rand, die Ordnungszahl als leise Gold-Marke statt als schwarzer Klotz,
   und der Titel als eigentlicher Anker.
   --------------------------------------------------------------------- */
.mg-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.5vw, 20px);
  max-width: var(--mg-maxw);
  margin-inline: auto;
}
.mg-features--2 { grid-template-columns: repeat(2, 1fr); }
.mg-features--4 { grid-template-columns: repeat(4, 1fr); }

.mg-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: clamp(30px, 2.8vw, 40px) clamp(26px, 2.4vw, 34px) clamp(32px, 2.8vw, 40px);
  text-decoration: none;

  /* Fläche statt Kasten: leicht wärmer als der Untergrund, mit einem
     kaum sichtbaren Verlauf, damit sie nicht wie ein flaches UI-Panel wirkt.
     Dazu das Lotus-Ornament als Gravur in der unteren Ecke. */
  background-color: var(--mg-white);
  background-image:
    var(--mg-ornament),
    linear-gradient(168deg, rgba(203, 163, 58, 0.05) 0%, rgba(203, 163, 58, 0) 46%);
  background-repeat: no-repeat;
  background-position: right -20px bottom -24px, 0 0;
  background-size: 112px, 100% 100%;
  border: 0;
  transition: background-color 0.25s ease, background-size 0.4s ease;
}

/* Zwei diagonale Eckwinkel statt eines umlaufenden Rahmens.
   Das Motiv stammt von den gravierten Rahmen der Flaschenetiketten. */
.mg-feature::before,
.mg-feature::after {
  content: "";
  position: absolute;
  width: var(--mg-ecke);
  height: var(--mg-ecke);
  border: 1px solid var(--mg-gold);
  pointer-events: none;
  transition: width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              height 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.25s ease;
}
.mg-feature::before {
  top: var(--mg-ecke-abstand);
  left: var(--mg-ecke-abstand);
  border-right: 0;
  border-bottom: 0;
}
.mg-feature::after {
  bottom: var(--mg-ecke-abstand);
  right: var(--mg-ecke-abstand);
  border-left: 0;
  border-top: 0;
}

/* Beim Überfahren wachsen die Winkel und das Ornament rückt heran —
   kein Anheben, kein Schlagschatten. Beides wirkt wie ein Bedienelement,
   nicht wie ein gedrucktes Etikett. */
.mg-feature:hover {
  background-color: #fdfcf9;
  background-size: 130px, 100% 100%;
}
.mg-feature:hover::before,
.mg-feature:hover::after {
  width: var(--mg-ecke-hover);
  height: var(--mg-ecke-hover);
}

.mg-feature__num {
  font-family: var(--mg-font-heading);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  color: var(--mg-gold);
  font-variant-numeric: tabular-nums;
}
.mg-feature__title {
  font-family: var(--mg-font-heading);
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(1.28rem, 1.7vw, 1.6rem);
  line-height: 1;
  letter-spacing: 0.012em;
  color: var(--mg-ink);
  margin: 2px 0 0;
  text-wrap: balance;
}
.mg-feature__text {
  font-size: 0.97rem;
  line-height: 1.62;
  color: var(--mg-ink-soft);
  margin: 0;
}

/* Auf hellem Grund: warme Papierfläche, damit die Karte nicht verschwindet */
.mg-feature--paper { background-color: var(--mg-paper); }
.mg-feature--paper:hover { background-color: #faf7f0; }

/* Auf schwarzem Grund */
.mg-feature--dark {
  background-color: var(--mg-surface-dark);
  background-image:
    var(--mg-ornament),
    linear-gradient(168deg, rgba(203, 163, 58, 0.08) 0%, rgba(203, 163, 58, 0) 46%);
}
.mg-feature--dark:hover { background-color: #151515; }
.mg-feature--dark .mg-feature__title { color: #fff; }
.mg-feature--dark .mg-feature__text { color: rgba(255, 255, 255, 0.68); }

@media (max-width: 1000px) {
  .mg-features,
  .mg-features--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .mg-features,
  .mg-features--2,
  .mg-features--4 { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   5.3 · Leistungs-Index
   Ersetzt die vier kleinen Kästen, die auf Schwarz untergingen. Ganze
   Zeilenbreite, klare Rhythmik, Hover auf der kompletten Zeile.
   --------------------------------------------------------------------- */
.mg-index { max-width: var(--mg-maxw); margin-inline: auto; }
.mg-index__row {
  display: grid;
  grid-template-columns: 72px minmax(170px, 0.9fr) 1.5fr auto;
  gap: clamp(14px, 2.2vw, 34px);
  align-items: start;
  padding: clamp(22px, 2.4vw, 30px) clamp(8px, 1.2vw, 18px);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.mg-index__row:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
.mg-index__row:hover { background: rgba(203, 163, 58, 0.1); }

.mg-index__num {
  font-family: var(--mg-font-heading);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  line-height: 1;
  color: rgba(255, 255, 255, 0.3);
  font-variant-numeric: tabular-nums;
  transition: color 0.2s ease;
}
.mg-index__title {
  font-family: var(--mg-font-heading);
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(1.35rem, 2.2vw, 1.95rem);
  line-height: 1;
  letter-spacing: 0.012em;
  color: #fff;
  margin: 0;
  transition: color 0.2s ease;
}
.mg-index__text {
  font-size: 0.97rem;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.66);
  margin: 0;
}
.mg-index__arrow {
  justify-self: end;
  align-self: center;
  color: var(--mg-gold);
  font-size: 1.4rem;
  line-height: 1;
  transition: transform 0.2s ease;
}
.mg-index__row:hover .mg-index__num,
.mg-index__row:hover .mg-index__title { color: var(--mg-gold); }
.mg-index--light .mg-index__row:hover .mg-index__title { color: var(--mg-gold-tief); }
.mg-index__row:hover .mg-index__arrow { transform: translateX(6px); }

/* Helle Variante für Papier- und Weissflächen */
.mg-index--light .mg-index__row { border-color: var(--mg-line-soft); }
.mg-index--light .mg-index__num { color: rgba(17, 17, 17, 0.22); }
.mg-index--light .mg-index__title { color: var(--mg-ink); }
.mg-index--light .mg-index__text { color: var(--mg-ink-soft); }
.mg-index--light .mg-index__row:hover { background: rgba(203, 163, 58, 0.09); }

@media (max-width: 820px) {
  .mg-index__row {
    grid-template-columns: 46px 1fr auto;
    row-gap: 8px;
    align-items: baseline;
  }
  .mg-index__text { grid-column: 2 / -1; }
  .mg-index__arrow { grid-row: 1; align-self: baseline; }
}

/* ---------------------------------------------------------------------
   5.4 · Metazeile
   Preis · Dauer · Gruppengrösse · Alter, direkt unter der Überschrift.
   Besucher entscheiden damit in Sekunden, ob ein Format für sie passt.
   --------------------------------------------------------------------- */
.mg-meta {
  display: flex;
  flex-wrap: nowrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mg-meta li {
  padding: 2px clamp(12px, 1.4vw, 22px);
  border-left: 1px solid var(--mg-line);
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.mg-meta li:first-child { padding-left: 0; border-left: 0; }
.mg-meta li:last-child { padding-right: 0; }
.mg-meta__value {
  font-family: var(--mg-font-heading);
  font-weight: 700;
  font-size: clamp(1.02rem, 1.15vw, 1.32rem);
  line-height: 1.05;
  color: var(--mg-ink);
}
.mg-meta__label {
  font-family: var(--mg-font-heading);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  font-size: 0.68rem;
  line-height: 1.25;
  color: var(--mg-muted);
}
.mg-meta--dark li { border-color: rgba(255, 255, 255, 0.22); }
.mg-meta--dark .mg-meta__value { color: var(--mg-gold); }
.mg-meta--dark .mg-meta__label { color: rgba(255, 255, 255, 0.6); }

/* Auf sehr schmalen Geräten untereinander, dann mit Querlinien statt
   senkrechten Trennern — sonst stehen die Striche im Nichts. */
@media (max-width: 480px) {
  .mg-meta { flex-direction: column; gap: 12px; }
  .mg-meta li {
    padding: 12px 0 0;
    border-left: 0;
    border-top: 1px solid var(--mg-line);
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
  }
  .mg-meta li:first-child { padding-top: 0; border-top: 0; }
  .mg-meta--dark li { border-top-color: rgba(255, 255, 255, 0.22); }
}

/* ---------------------------------------------------------------------
   5.5 · Häkchenliste — „Was dich erwartet"
   --------------------------------------------------------------------- */
.mg-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
}
.mg-checklist li {
  position: relative;
  padding-left: 32px;
  line-height: 1.55;
  color: var(--mg-ink-soft);
}
.mg-checklist li::before {
  content: "";
  position: absolute;
  left: 2px; top: 0.36em;
  width: 13px; height: 7px;
  border-left: 2px solid var(--mg-gold);
  border-bottom: 2px solid var(--mg-gold);
  transform: rotate(-45deg);
}
.mg-checklist--dark li { color: rgba(255, 255, 255, 0.78); }

/* ---------------------------------------------------------------------
   5.6 · Terminliste
   Bewusst Liste statt Kalenderraster: Besucher fragen „was kommt als
   Nächstes", nicht „was ist am 14.". Mobil ausserdem deutlich robuster.
   --------------------------------------------------------------------- */
.mg-dates { max-width: var(--mg-maxw); margin-inline: auto; }
.mg-date {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: clamp(18px, 2.4vw, 34px);
  align-items: center;
  padding: clamp(18px, 2vw, 24px) 0;
  border-top: 1px solid var(--mg-line-soft);
}
.mg-date:last-child { border-bottom: 1px solid var(--mg-line-soft); }

.mg-date__cal {
  background: var(--mg-black);
  color: #fff;
  text-align: center;
  padding: 12px 6px 10px;
  align-self: start;
}
.mg-date__day {
  display: block;
  font-family: var(--mg-font-heading);
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 0.9;
}
.mg-date__mon {
  display: block;
  font-family: var(--mg-font-heading);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
  font-size: 0.72rem;
  color: var(--mg-gold);
  margin-top: 6px;
}
.mg-date__title {
  font-family: var(--mg-font-heading);
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  line-height: 1;
  letter-spacing: 0.012em;
  margin: 0 0 8px;
  color: var(--mg-ink);
}
.mg-date__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 0.9rem;
  color: var(--mg-muted);
  margin: 0;
}
.mg-date__action { display: flex; align-items: center; gap: 12px; }

/* Ausverkaufte Termine bleiben stehen — sie belegen, dass etwas läuft. */
.mg-date--ausverkauft .mg-date__cal { background: var(--mg-muted); }
.mg-date--ausverkauft .mg-date__title { color: var(--mg-muted); }

@media (max-width: 700px) {
  .mg-date {
    grid-template-columns: 68px 1fr;
    row-gap: 14px;
  }
  .mg-date__action { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------------
   5.7 · Öffnungszeiten
   Geschlossene Tage werden ausdrücklich aufgeführt — die häufigste
   Ursache für Fehlbesuche bei kleinen Läden.
   --------------------------------------------------------------------- */
.mg-hours { width: 100%; border-collapse: collapse; font-size: 1rem; }
.mg-hours th,
.mg-hours td { padding: 12px 0; border-bottom: 1px solid var(--mg-line-soft); }
.mg-hours th {
  text-align: left;
  font-family: var(--mg-font-heading);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  font-size: 0.86rem;
}
.mg-hours td { text-align: right; font-variant-numeric: tabular-nums; }
.mg-hours tr[data-geschlossen] th,
.mg-hours tr[data-geschlossen] td { color: var(--mg-muted); }

/* ---------------------------------------------------------------------
   5.8 · Häufige Fragen
   --------------------------------------------------------------------- */
.mg-faq { max-width: var(--mg-narrow); margin-inline: auto; }
.mg-faq__item { border-bottom: 1px solid var(--mg-line-soft); }
.mg-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--mg-font-heading);
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  letter-spacing: 0.014em;
  line-height: 1.15;
  transition: color 0.15s ease;
}
.mg-faq__item summary::-webkit-details-marker { display: none; }
/* --mg-gold liegt auf Weiss bei 2,38:1. Die aufgeklappte Frage ist
   Fliesstext-Groesse, also gilt 4,5:1 — daher das tiefe Gold. */
.mg-faq__item summary:hover { color: var(--mg-gold-tief); }
.mg-faq__item summary::after {
  content: "";
  flex: none;
  width: 14px; height: 14px;
  border-right: 2px solid var(--mg-gold);
  border-bottom: 2px solid var(--mg-gold);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform 0.2s ease;
}
.mg-faq__item[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.mg-faq__item p {
  margin: 0 0 20px;
  max-width: 68ch;
  color: var(--mg-ink-soft);
  line-height: 1.65;
}

/* ---------------------------------------------------------------------
   5.9 · Zeitstrahl
   --------------------------------------------------------------------- */
.mg-timeline {
  position: relative;
  padding-left: 36px;
  max-width: 720px;
  list-style: none;
  margin: 0;
}
.mg-timeline::before {
  content: "";
  position: absolute;
  left: 5px; top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--mg-gold) 0%, rgba(203, 163, 58, 0.12) 100%);
}
.mg-timeline__item { position: relative; padding-bottom: clamp(28px, 3vw, 40px); }
.mg-timeline__item:last-child { padding-bottom: 0; }
.mg-timeline__item::before {
  content: "";
  position: absolute;
  left: -36px; top: 6px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--mg-gold);
  box-shadow: 0 0 0 4px var(--mg-paper);
}
/* __zeit ist derselbe Baustein mit Uhrzeit statt Jahreszahl — der
   Ablauf eines Abends auf den Event-Seiten. Eigener Name, weil
   „mg-timeline__year" fuer eine Uhrzeit beim naechsten Lesen verwirrt. */
.mg-timeline__year,
.mg-timeline__zeit {
  font-family: var(--mg-font-heading);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--mg-gold);
  font-variant-numeric: tabular-nums;
}

/* Der Punkt auf der Linie traegt einen Ring in der Hintergrundfarbe,
   damit die Linie hinter ihm nicht durchscheint. Auf weissen Flaechen
   muss der Ring deshalb weiss sein statt papierfarben. */
.mg-section--white .mg-timeline__item::before {
  box-shadow: 0 0 0 4px var(--mg-white);
}
.mg-timeline__title {
  font-family: var(--mg-font-heading);
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  line-height: 1;
  margin: 8px 0 8px;
}
.mg-timeline__text { color: var(--mg-ink-soft); line-height: 1.62; margin: 0; }

/* ---------------------------------------------------------------------
   5.10 · Zitat
   --------------------------------------------------------------------- */
.mg-quote {
  margin: 0;
  border-left: 4px solid var(--mg-gold);
  padding-left: clamp(20px, 3vw, 32px);
}
.mg-quote p {
  font-family: var(--mg-font-heading);
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.008em;
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  color: var(--mg-ink);
  margin: 0;
  text-wrap: balance;
}
.mg-quote footer {
  font-family: var(--mg-font-body);
  text-transform: none;
  font-size: 0.94rem;
  color: var(--mg-muted);
  margin-top: 14px;
}
.mg-quote--dark p { color: #fff; }
.mg-quote--dark footer { color: rgba(255, 255, 255, 0.6); }

/* ---------------------------------------------------------------------
   5.11 · Split — Text neben Bild
   --------------------------------------------------------------------- */
.mg-split {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
  max-width: var(--mg-maxw);
  margin-inline: auto;
}
.mg-split--reverse { grid-template-columns: 0.88fr 1.12fr; }
.mg-split--even { grid-template-columns: 1fr 1fr; }
.mg-split__text { display: flex; flex-direction: column; gap: 20px; }
.mg-split__title { font-size: clamp(2rem, 4.4vw, 3.25rem); text-wrap: balance; }
.mg-split__media { overflow: hidden; }
.mg-split__media img {
  width: 100%; height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}
.mg-split__media--wide img { aspect-ratio: 4 / 3; }

/* Eine Spalte im Split, die kein Bild ist, sondern ein Panel — auf
   bonus.html das Anmeldeformular. Auf dem Handy gehoert es nach oben:
   wer einen QR-Code scannt, will sich eintragen und nicht erst eine
   Argumenteliste durchscrollen. */
.mg-split__panel { align-self: start; }

@media (max-width: 900px) {
  .mg-split,
  .mg-split--reverse,
  .mg-split--even { grid-template-columns: 1fr; }
  .mg-split--reverse .mg-split__media { order: -1; }
  .mg-split__panel { order: -1; }
  .mg-split__media img { aspect-ratio: 4 / 3; }
}

/* ---------------------------------------------------------------------
   5.12 · Produkt-Spotlight
   --------------------------------------------------------------------- */
.mg-spotlight {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: var(--mg-black);
  color: #fff;
}
.mg-spotlight__media { position: relative; min-height: 440px; }
.mg-spotlight__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.mg-spotlight__body {
  padding: clamp(40px, 6vw, 84px) var(--mg-gutter);
  display: flex; flex-direction: column; justify-content: center;
  gap: 18px;
}
.mg-spotlight__title { color: #fff; font-size: clamp(2.4rem, 5.5vw, 3.9rem); }
.mg-spotlight__text { color: rgba(255, 255, 255, 0.82); font-size: 1.12rem; max-width: 42ch; }
.mg-spotlight .mg-badge { align-self: flex-start; }

@media (max-width: 900px) {
  .mg-spotlight { grid-template-columns: 1fr; }
  .mg-spotlight__media { min-height: 0; aspect-ratio: 4 / 3; }
}

/* ---------------------------------------------------------------------
   5.13 · Kaufzeile
   --------------------------------------------------------------------- */
.mg-buyline,
.mg-spotlight__buy {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 22px; margin-top: 18px;
}
.mg-buyline .mg-price__current { font-size: 2rem; }
.mg-spotlight .mg-spotlight__buy .mg-price__current { color: #fff; font-size: 2rem; }

/* ---------------------------------------------------------------------
   5.14 · Produktraster und freie Plätze
   --------------------------------------------------------------------- */
.mg-products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 24px);
  max-width: var(--mg-maxw);
  margin-inline: auto;
}
.mg-products--4 { grid-template-columns: repeat(4, 1fr); }
.mg-products .mg-card { max-width: none; }
.mg-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Produktkarten ohne Kastenrahmen. Das Bild steht frei auf der Fläche,
   darunter eine feine Linie — wie in einem gedruckten Katalog. Ein
   umrandeter Kasten um ein Produktfoto ist Baukasten-Optik. */
.mg-products .mg-card {
  background: transparent;
  border: 0;
  transition: none;
}
.mg-products .mg-card .mg-card__body {
  padding: 18px 2px 20px;
  border-bottom: 1px solid var(--mg-line-soft);
  transition: border-color 0.25s ease;
}
.mg-products .mg-card:hover .mg-card__body { border-bottom-color: var(--mg-gold); }
.mg-products .mg-card .mg-card__title { transition: color 0.2s ease; }
.mg-products .mg-card:hover .mg-card__title { color: var(--mg-gold-tief); }
.mg-products .mg-card__media { background: var(--mg-paper); }

/* Platzhalter für künftige Sets und Zusammenstellungen. Bewusst sichtbar
   als frei erkennbar — nicht als fertiges Produkt getarnt. */
.mg-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  min-height: 100%;
  padding: 40px 30px;
  border: 0;
  background-color: rgba(203, 163, 58, 0.04);
  background-image: var(--mg-ornament);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 168px;
  color: var(--mg-muted);
}
/* Gleiche Eckwinkel wie die Feature-Karte, nur gestrichelt — das
   signalisiert „reserviert", ohne den generischen Strichelkasten. */
.mg-slot::before,
.mg-slot::after {
  content: "";
  position: absolute;
  width: 24px; height: 24px;
  border: 1px dashed var(--mg-line);
  pointer-events: none;
}
.mg-slot::before {
  top: var(--mg-ecke-abstand); left: var(--mg-ecke-abstand);
  border-right: 0; border-bottom: 0;
}
.mg-slot::after {
  bottom: var(--mg-ecke-abstand); right: var(--mg-ecke-abstand);
  border-left: 0; border-top: 0;
}
.mg-slot > * { position: relative; z-index: 1; }
.mg-slot__plus {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--mg-line);
  display: grid; place-items: center;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--mg-gold);
}
.mg-slot__title {
  font-family: var(--mg-font-heading);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 1.15rem;
  color: var(--mg-ink);
  margin: 0;
}
.mg-slot__text { font-size: 0.9rem; line-height: 1.55; margin: 0; max-width: 26ch; }

/* Freiplatz neben einer Event-Karte. Bewusst sichtbar statt weggelassen:
   „es steht noch nichts fest" ist eine ehrliche Antwort und fuehrt zum
   Newsletter — eine einzelne Karte allein im Raster sieht dagegen aus,
   als waere etwas kaputt. */
.mg-slot--event { min-height: 300px; }

@media (max-width: 1000px) {
  .mg-products,
  .mg-products--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .mg-products,
  .mg-products--4 { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   5.15 · Kennzahlen
   --------------------------------------------------------------------- */
.mg-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2.4vw, 32px);
  max-width: var(--mg-maxw);
  margin-inline: auto;
}
.mg-stat { border-top: 2px solid var(--mg-gold); padding-top: 18px; }
.mg-stat__value {
  font-family: var(--mg-font-heading);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  line-height: 1;
  color: var(--mg-ink);
}
.mg-stat__label {
  font-family: var(--mg-font-heading);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-weight: 600;
  font-size: 0.76rem;
  color: var(--mg-muted);
  margin-top: 9px;
  display: block;
}
.mg-section--dark .mg-stat__value { color: #fff; }
.mg-section--dark .mg-stat__label { color: rgba(255, 255, 255, 0.6); }

@media (max-width: 760px) { .mg-stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------------------------------------------------------------------
   5.16 · Vertrauensleiste
   --------------------------------------------------------------------- */
.mg-trust {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2.4vw, 28px);
  max-width: var(--mg-maxw);
  margin-inline: auto;
}
.mg-trust__item { display: flex; flex-direction: column; gap: 7px; }
.mg-trust__label {
  font-family: var(--mg-font-heading);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--mg-ink);
}
.mg-trust__text { font-size: 0.88rem; color: var(--mg-muted); line-height: 1.55; margin: 0; }

@media (max-width: 760px) { .mg-trust { grid-template-columns: repeat(2, 1fr); } }

/* ---------------------------------------------------------------------
   5.17 · Newsletter
   --------------------------------------------------------------------- */
.mg-newsletter { max-width: var(--mg-maxw); margin-inline: auto; }
.mg-newsletter--dark .mg-newsletter__title { color: #fff; }

/* ---------------------------------------------------------------------
   5.18 · Fliesstext
   --------------------------------------------------------------------- */
.mg-prose {
  max-width: 72ch;
  margin-inline: auto;
  font-size: 1.06rem;
  line-height: 1.72;
  color: var(--mg-ink);
}
.mg-prose h2 {
  font-family: var(--mg-font-heading);
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(1.6rem, 3.4vw, 2.25rem);
  line-height: 1;
  letter-spacing: 0.006em;
  margin: 2.2em 0 0.6em;
}
.mg-prose h2:first-child { margin-top: 0; }
.mg-prose h3 {
  font-family: var(--mg-font-heading);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.31rem;
  letter-spacing: 0.02em;
  margin: 1.8em 0 0.5em;
}
.mg-prose p { margin: 0 0 1.1em; }
.mg-prose ul, .mg-prose ol { margin: 0 0 1.3em; padding-left: 1.3em; }
.mg-prose li { margin-bottom: 0.5em; }
.mg-prose a { color: var(--mg-red); text-decoration: underline; text-underline-offset: 3px; }
.mg-prose__lead { font-size: 1.25rem; line-height: 1.6; color: var(--mg-ink); font-weight: 500; }
.mg-prose dt { font-weight: 700; margin-top: 1em; }
.mg-prose dd { margin: 0 0 0.4em; }

.mg-figure { margin: clamp(32px, 5vw, 48px) 0; }
/* height:auto ist hier Pflicht: die HTML-Attribute width/height reservieren
   nur den Platz gegen Layout-Sprünge. Ohne height:auto erzwingt Chrome das
   Attribut-Seitenverhältnis und verzerrt das Bild. */
.mg-figure img { width: 100%; height: auto; display: block; }
.mg-figure figcaption { font-size: 0.88rem; color: var(--mg-muted); margin-top: 10px; }

/* ---------------------------------------------------------------------
   5.19 · Fotoreihe

   Fuer „so war es beim letzten Mal". Wer unentschlossen ist, entscheidet
   sich an Fotos — nicht an der Beschreibung. Das gilt besonders bei
   Abenden ohne Anmeldung: Es gibt kein Ticket, das man kauft und dann
   wahrnimmt, sondern nur den Eindruck „da will ich hin".

   Bewusst ohne Lightbox. Ein Klick, der ein Bild gross oeffnet, braucht
   JavaScript, Tastaturbedienung und eine Schliessen-Logik — fuer sechs
   Fotos in einem Raster lohnt das nicht. Wer genauer schauen will,
   zoomt auf dem Handy ohnehin.
   --------------------------------------------------------------------- */
.mg-gallery {
  display: grid;
  /* Drei Spalten wie beim Feature-Raster. auto-fit waere flexibler,
     ergibt auf breiten Schirmen aber vier Spalten — und damit bei sechs
     Fotos eine Reihe mit vier und eine mit zwei. Drei Spalten fuellen
     sich bei drei und bei sechs Fotos sauber auf. */
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.2vw, 16px);
  max-width: var(--mg-maxw);
  margin-inline: auto;
}
.mg-gallery__bild {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--mg-paper);
}
.mg-gallery__bild img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.mg-gallery__bild:hover img { transform: scale(1.045); }

/* Eine Bildunterschrift fuer die ganze Reihe statt je Foto. Sechs
   einzelne Bildunterschriften zerhacken das Raster optisch. */
.mg-gallery__note {
  max-width: var(--mg-maxw);
  margin: 16px auto 0;
  font-size: 0.88rem;
  color: var(--mg-muted);
}
.mg-section--dark .mg-gallery__note { color: rgba(255, 255, 255, 0.55); }

/* ------------------------------------------------- Event-Seiten-Teile ---
   Diese vier Klassen ersetzen Inline-Stile, die in der Event-Vorlage
   standen. Die Regel im Projekt lautet: CSS gehoert in diese Datei, sonst
   laesst sich eine Aenderung nicht an einer Stelle machen — und bei einer
   VORLAGE vervielfaeltigt sich jeder Inline-Stil mit jeder Kopie. */

/* Der zweite Kalender-Einstieg im Steckbrief. Er war als --sm gesetzt und
   damit die kleinste Flaeche der Seite: 146 x 41 px, unter dem 44-px-
   Minimum — ausgerechnet bei der einen Aktion, die die Seite rechtfertigt.
   Jetzt volle Knopfgroesse ueber die ganze Panelbreite. */
.mg-panel__cta {
  margin: 18px 0 0;
  display: grid;
  gap: 8px;
  justify-items: start;
}
.mg-panel__cta .mg-btn { width: 100%; justify-content: center; }
.mg-panel__cta-note {
  font-size: 0.84rem;
  color: var(--mg-muted);
}

.mg-split__closer { font-size: 0.95rem; }
.mg-panel__adresse { margin-bottom: 14px; }
.mg-panel__weg {
  font-size: 0.92rem;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid rgba(17, 17, 17, 0.1);
}

.mg-todo--breit {
  max-width: var(--mg-maxw);
  margin: 32px auto 0;
}
.mg-todo--imblock { margin-top: 28px; }

.mg-split__lead { color: var(--mg-ink); font-size: 1.06rem; }
.mg-split__panels { display: grid; gap: 24px; }
.mg-panel__foto { width: 100%; margin-bottom: 16px; }
.mg-newsletter__status { font-size: 0.85rem; }

/* Umriss-Knopf auf einem Foto. Stand als Inline-Stil im Poster-Kopf und
   gehoert hierher, weil jede Event-Kopie ihn sonst mitschleppt. */
.mg-btn--auf-bild {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}
.mg-btn--auf-bild:hover {
  color: var(--mg-ink);
  background: #fff;
  border-color: #fff;
}

@media (max-width: 1000px) { .mg-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .mg-gallery { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------
   5.20 · Event-Karten (Beitragskasten)

   Die Terminliste auf events.html war eine Zeilenliste ohne Bilder — gut
   fuer „was kommt als Naechstes", schlecht als Einstieg in eine eigene
   Seite pro Termin. Eine Zeile mit vier Metaangaben laedt niemanden zum
   Weiterklicken ein; ein Foto mit Motto tut es.

   Formensprache wie bei den Produktkarten: Das Foto steht frei oben,
   die Eckwinkel sitzen auf dem Textkoerper darunter. Ein Goldwinkel auf
   einem hellen Foto waere schlicht nicht zu sehen.
   --------------------------------------------------------------------- */
.mg-eventcards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2vw, 26px);
  max-width: var(--mg-maxw);
  margin-inline: auto;
}
.mg-eventcards--2 { grid-template-columns: repeat(2, 1fr); }

.mg-eventcard {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.mg-eventcard__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--mg-paper);
}
.mg-eventcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.mg-eventcard:hover .mg-eventcard__media img { transform: scale(1.045); }

/* Der Datumsblock liegt auf dem Foto, nicht daneben. Damit steht das
   Datum auch dann im Bild, wenn die Karte quer durch einen Feed geteilt
   oder abfotografiert wird. Optik identisch zu .mg-date__cal. */
.mg-eventcard__cal {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  background: var(--mg-black);
  color: #fff;
  text-align: center;
  padding: 11px 14px 9px;
  min-width: 74px;
}
.mg-eventcard__day {
  display: block;
  font-family: var(--mg-font-heading);
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}
.mg-eventcard__mon {
  display: block;
  font-family: var(--mg-font-heading);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
  font-size: 0.72rem;
  color: var(--mg-gold);
  margin-top: 5px;
}
.mg-eventcard__badge { position: absolute; top: 12px; right: 12px; z-index: 2; }

.mg-eventcard__body {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: clamp(22px, 2.2vw, 30px) clamp(20px, 2vw, 26px) clamp(24px, 2.2vw, 30px);
  background-color: var(--mg-paper);
  background-image:
    var(--mg-ornament),
    linear-gradient(168deg, rgba(203, 163, 58, 0.05) 0%, rgba(203, 163, 58, 0) 46%);
  background-repeat: no-repeat;
  background-position: right -22px bottom -26px, 0 0;
  background-size: 108px, 100% 100%;
  transition: background-color 0.25s ease, background-size 0.4s ease;
}
.mg-eventcard__body::before,
.mg-eventcard__body::after {
  content: "";
  position: absolute;
  width: var(--mg-ecke);
  height: var(--mg-ecke);
  border: 1px solid var(--mg-gold);
  pointer-events: none;
  transition: width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              height 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.mg-eventcard__body::before {
  top: var(--mg-ecke-abstand);
  left: var(--mg-ecke-abstand);
  border-right: 0;
  border-bottom: 0;
}
.mg-eventcard__body::after {
  bottom: var(--mg-ecke-abstand);
  right: var(--mg-ecke-abstand);
  border-left: 0;
  border-top: 0;
}
.mg-eventcard:hover .mg-eventcard__body {
  background-color: #faf7f0;
  background-size: 126px, 100% 100%;
}
.mg-eventcard:hover .mg-eventcard__body::before,
.mg-eventcard:hover .mg-eventcard__body::after {
  width: var(--mg-ecke-hover);
  height: var(--mg-ecke-hover);
}
.mg-eventcard__body > * { position: relative; z-index: 1; }

.mg-eventcard__format {
  font-family: var(--mg-font-heading);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 600;
  font-size: 0.72rem;
  color: var(--mg-gold-tief);
}
.mg-eventcard__title {
  font-family: var(--mg-font-heading);
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(1.22rem, 1.7vw, 1.5rem);
  line-height: 1.02;
  letter-spacing: 0.012em;
  color: var(--mg-ink);
  margin: 0;
  text-wrap: balance;
  transition: color 0.2s ease;
}
.mg-eventcard:hover .mg-eventcard__title { color: var(--mg-gold-tief); }
.mg-eventcard__text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--mg-ink-soft);
  margin: 0;
}
.mg-eventcard__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 0.86rem;
  color: var(--mg-muted);
  margin: 0;
}
.mg-eventcard__more {
  margin-top: auto;
  padding-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mg-font-heading);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--mg-gold-tief);
}
.mg-eventcard__more::after {
  content: "→";
  transition: transform 0.2s ease;
}
.mg-eventcard:hover .mg-eventcard__more::after { transform: translateX(5px); }

/* Vergangene Termine bleiben als Rueckblick stehen — sie belegen, dass
   regelmaessig etwas stattfindet. Aber sie duerfen nicht mit den
   kommenden verwechselt werden, deshalb Foto entsaettigt und
   Datumsblock grau. */
.mg-eventcard--vorbei .mg-eventcard__media img { filter: grayscale(1); opacity: 0.72; }
/* Der Datumsblock wird grau, aber nicht unlesbar. --mg-muted (#666) trug
   das goldene Monatskuerzel nur mit 2,42:1 — auf Schwarz sind es 8,84:1.
   Also dunkleres Grau und ein helles Kuerzel statt Gold: der Block liest
   sich weiter als „vorbei", ohne dass das Datum verschwindet. */
.mg-eventcard--vorbei .mg-eventcard__cal { background: #4a4a4a; }
.mg-eventcard--vorbei .mg-eventcard__mon { color: rgba(255, 255, 255, 0.82); }
.mg-eventcard--vorbei .mg-eventcard__title { color: var(--mg-muted); }

@media (max-width: 1000px) {
  .mg-eventcards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .mg-eventcards,
  .mg-eventcards--2 { grid-template-columns: 1fr; }
}

/* =====================================================================
   6 · FORMULARE
   ===================================================================== */
.mg-form { display: grid; gap: 18px; max-width: 660px; }
/* display:grid schlaegt sonst das hidden-Attribut. site.js blendet das
   Newsletter-Formular nach dem Absenden damit aus. */
.mg-form[hidden] { display: none; }
.mg-form__row { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
.mg-form label {
  display: block;
  font-family: var(--mg-font-heading);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  font-size: 0.82rem;
  margin-bottom: 7px;
}
.mg-form input,
.mg-form select,
.mg-form textarea {
  width: 100%;
  font-family: var(--mg-font-body);
  font-size: 1rem;
  padding: 13px 16px;
  border: 1px solid var(--mg-line);
  border-radius: 0;
  background: var(--mg-white);
  color: var(--mg-ink);
  transition: border-color 0.2s ease;
}
.mg-form textarea { min-height: 140px; resize: vertical; }
.mg-form input:focus,
.mg-form select:focus,
.mg-form textarea:focus { border-color: var(--mg-gold); outline: none; }
.mg-form__hint { font-size: 0.85rem; color: var(--mg-muted); margin: 0; }
.mg-form__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

@media (max-width: 620px) { .mg-form__row { grid-template-columns: 1fr; } }

/* --------------------------------------------- Einwilligungs-Zeilen ---
   Checkboxen brauchen das Gegenteil dessen, was .mg-form label macht:
   kein Block, keine Versalien, keine Sperrung — sondern Fließtext neben
   einem kleinen Kaestchen. Deshalb hier eine eigene Zeile statt eines
   Sonderfalls in der allgemeinen Regel.
   ----------------------------------------------------------------------- */
.mg-form__check {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  align-items: start;
}
.mg-form__check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  padding: 0;
  accent-color: var(--mg-gold-tief);
  border: 1px solid var(--mg-line);
  border-radius: 0;
  flex: none;
}
.mg-form__check label {
  font-family: var(--mg-font-body);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--mg-muted);
  margin-bottom: 0;
}
.mg-form__check label a { color: var(--mg-gold-tief); }

/* ------------------------------------------------- Erfolgszustand -----
   Steht als hidden im HTML und wird von site.js eingeblendet, sobald das
   Formular abgeschickt wurde. Ohne JavaScript bleibt es unsichtbar und
   das Formular verhaelt sich wie ein normales POST in einen neuen Tab.
   ----------------------------------------------------------------------- */
.mg-form__erfolg { display: grid; gap: 10px; }
/* display:grid schlaegt das hidden-Attribut — ohne diese Zeile steht der
   Erfolgstext von Anfang an unter dem Formular. */
.mg-form__erfolg[hidden] { display: none; }
.mg-form__erfolg p { margin: 0; }
.mg-form__erfolg-titel {
  font-family: var(--mg-font-heading);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--mg-ink);
}

/* Kontaktkarte und Info-Flächen — dieselbe Etikett-Sprache wie die
   Feature-Karten, damit die Seite eine Handschrift behält. */
.mg-contact,
.mg-panel {
  position: relative;
  background-color: var(--mg-paper);
  background-image:
    var(--mg-ornament),
    linear-gradient(168deg, rgba(203, 163, 58, 0.05) 0%, rgba(203, 163, 58, 0) 46%);
  background-repeat: no-repeat;
  background-position: right -30px bottom -34px, 0 0;
  background-size: 132px, 100% 100%;
  border: 0;
  padding: clamp(30px, 3.2vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-self: start;
}
.mg-contact::before, .mg-contact::after,
.mg-panel::before, .mg-panel::after {
  content: "";
  position: absolute;
  width: var(--mg-ecke);
  height: var(--mg-ecke);
  border: 1px solid var(--mg-gold);
  pointer-events: none;
}
.mg-contact::before, .mg-panel::before {
  top: var(--mg-ecke-abstand); left: var(--mg-ecke-abstand);
  border-right: 0; border-bottom: 0;
}
.mg-contact::after, .mg-panel::after {
  bottom: var(--mg-ecke-abstand); right: var(--mg-ecke-abstand);
  border-left: 0; border-top: 0;
}
.mg-contact > *, .mg-panel > * { position: relative; z-index: 1; }
.mg-panel--white { background-color: var(--mg-white); }
.mg-panel h3 {
  font-family: var(--mg-font-heading);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.014em;
  margin: 0;
}
.mg-contact h3 {
  font-family: var(--mg-font-heading);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.014em;
  margin: 0;
}
/* Beschreibungslisten in Kontaktkarte und Panel — dieselbe Optik, damit
   der Steckbrief auf den Event-Seiten aussieht wie die Kontaktangaben
   sonst auf der Website. */
.mg-contact dl,
.mg-panel dl { margin: 0; display: grid; gap: 14px; }
.mg-contact dt,
.mg-panel dt {
  font-family: var(--mg-font-heading);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-weight: 600;
  font-size: 0.72rem;
  color: var(--mg-muted);
}
.mg-contact dd,
.mg-panel dd { margin: 3px 0 0; line-height: 1.55; }

/* =====================================================================
   7 · FUSSZEILE
   ===================================================================== */
.mg-footer {
  background: var(--mg-black);
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.88rem;
  padding: clamp(44px, 6vw, 60px) var(--mg-gutter) 28px;
}
.mg-footer__inner {
  max-width: var(--mg-maxw);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 32px;
}
.mg-footer__brand img { height: 54px; width: auto; display: block; margin-bottom: 14px; }
.mg-footer__tag { max-width: 34ch; line-height: 1.6; margin: 0; }
.mg-footer h2 {
  font-family: var(--mg-font-heading);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--mg-gold);
  margin: 0 0 14px;
}
.mg-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.mg-footer a { text-decoration: none; transition: color 0.15s ease; }
.mg-footer a:hover { color: var(--mg-gold); }

.mg-footer__bottom {
  max-width: var(--mg-maxw);
  margin: 36px auto 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.66);
}
.mg-footer__legal { display: flex; flex-wrap: wrap; gap: 18px; }

@media (max-width: 900px) {
  .mg-footer__inner { grid-template-columns: 1fr 1fr; }
  .mg-footer__brand { grid-column: 1 / -1; }
}

/* Trefferflaechen am Daumen. Die Fusszeilenlinks waren 17 px hoch, die
   Rechtsleiste 21 px, „AGB" mass 27 x 21 px — unter dem 44-px-Minimum
   liegt die Fehlgrifffrequenz sprunghaft hoeher, und die Rechtslinks
   sind genau die, die jemand im Zweifel wirklich braucht.

   Nur unter 900 px, weil dort mit dem Finger gezielt wird. Der Abstand
   zwischen den Zeilen sinkt gleichzeitig, weil das Innenabstand-Polster
   die Trennung uebernimmt — sonst waechst die Fusszeile ins Uferlose. */
@media (max-width: 900px) {
  .mg-footer ul { gap: 0; }
  .mg-footer nav a,
  .mg-footer__legal a,
  .mg-agenote a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 44px;
  }
  .mg-footer__legal { gap: 4px 20px; }
  .mg-agenote a { min-height: 0; padding: 12px 0; display: inline-block; }

  /* --sm ergab 41px Hoehe und blieb damit knapp unter dem Minimum. */
  .mg-btn--sm { min-height: 44px; }
}
@media (max-width: 480px) { .mg-footer__inner { grid-template-columns: 1fr; } }

/* Jugendschutzhinweis — muss lesbar sein, nicht nur formal vorhanden */
.mg-agenote {
  background: var(--mg-black);
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
  font-size: 0.82rem;
  padding: 14px var(--mg-gutter);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin: 0;
}
.mg-agenote a { color: var(--mg-gold); }

/* =====================================================================
   8 · STORY-PAGE
   ===================================================================== */
.mg-storybar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px var(--mg-gutter);
  background: var(--mg-black);
}
.mg-storybar img { height: 46px; width: auto; display: block; }
.mg-storybar__note {
  font-family: var(--mg-font-heading);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
}

.mg-storyhero {
  background: var(--mg-paper);
  padding: clamp(48px, 8vw, 88px) var(--mg-gutter) clamp(36px, 5vw, 56px);
  text-align: center;
}
.mg-storyhero__inner { max-width: 900px; margin-inline: auto; }
.mg-storyhero__title { font-size: clamp(2.3rem, 6.4vw, 4.4rem); margin-top: 16px; text-wrap: balance; }
.mg-storyhero__lead {
  font-size: clamp(1.05rem, 2vw, 1.31rem);
  color: var(--mg-ink-soft);
  max-width: 56ch;
  margin: 20px auto 0;
  line-height: 1.6;
}

.mg-offer {
  background: var(--mg-black);
  color: #fff;
  padding: clamp(48px, 7vw, 84px) var(--mg-gutter);
}
.mg-offer__inner {
  max-width: 1040px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}
.mg-offer__media { overflow: hidden; }
.mg-offer__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.mg-offer__title { color: #fff; font-size: clamp(2rem, 4.6vw, 3.13rem); }
.mg-offer__text { color: rgba(255, 255, 255, 0.8); font-size: 1.08rem; margin-top: 16px; }
.mg-offer__buy { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 28px; }
.mg-offer__buy .mg-price__current { color: #fff; font-size: 2rem; }

@media (max-width: 860px) {
  .mg-offer__inner { grid-template-columns: 1fr; }
  .mg-offer__media img { aspect-ratio: 16 / 10; }
}

/* =====================================================================
   9 · HINWEISKÄSTEN
   Markieren offene Stellen. Vor dem Livegang komplett entfernen.
   ===================================================================== */
.mg-todo {
  border: 1px dashed var(--mg-red);
  background: rgba(164, 35, 37, 0.05);
  color: var(--mg-ink);
  padding: 16px 20px;
  margin: 24px 0;
  font-size: 0.92rem;
  line-height: 1.55;
  border-radius: 2px;
}
.mg-todo > strong:first-child {
  display: block;
  font-family: var(--mg-font-heading);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.82rem;
  color: var(--mg-red);
  margin-bottom: 6px;
}
.mg-todo p { margin: 0 0 0.6em; }
.mg-todo p:last-child { margin-bottom: 0; }
.mg-todo ul { margin: 0 0 0.8em; padding-left: 1.3em; }
.mg-todo li { margin-bottom: 0.35em; }
.mg-todo code {
  font-size: 0.9em;
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 5px;
  border-radius: 3px;
}

/* Auf schwarzen Flaechen muss der Kasten ins Helle kippen. Sonst steht
   dunkler Text auf schwarzem Grund und der Hinweis ist unlesbar —
   ausgerechnet der Hinweis, der vor dem Livegang gelesen werden muss. */
.mg-section--dark .mg-todo {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.86);
  border-color: rgba(220, 90, 92, 0.75);
}
.mg-section--dark .mg-todo > strong:first-child { color: #e8797b; }
.mg-section--dark .mg-todo strong { color: #fff; }
.mg-section--dark .mg-todo code { background: rgba(255, 255, 255, 0.14); }

/* Kurzmarkierung für einzelne Textstellen im Fliesstext.
   Dezent genug, dass ganze Absaetze markiert werden koennen, ohne dass
   die Seite unlesbar wird — aber deutlich genug, dass nichts durchrutscht. */
.mg-tbd {
  background: rgba(164, 35, 37, 0.075);
  box-shadow: inset 0 -1px 0 rgba(164, 35, 37, 0.45);
  padding: 0 3px;
}
/* Auf dunklem Grund umgekehrt */
.mg-section--dark .mg-tbd,
.mg-band .mg-tbd {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.4);
}

/* =====================================================================
   10 · SHOPIFY-SLOT
   ===================================================================== */
.mg-buy { display: inline-flex; align-items: center; }
.mg-buy--block { display: flex; width: 100%; }
.mg-buy .shopify-buy-frame { max-width: 100%; }
.mg-buy[data-shopify-state="pending"] .mg-buy__fallback { display: inline-flex; }
.mg-buy[data-shopify-state="ready"] .mg-buy__fallback { display: none; }

/* =====================================================================
   SORTEN-KARUSSELL (Startseite)
   ---------------------------------------------------------------------
   Kern ist ein simpler Scroll-Container mit scroll-snap. Kein JS noetig,
   damit Wischen funktioniert — das erledigt der Browser. Das JS setzt nur
   die Pfeile, die Tastatursteuerung und den Zaehler obendrauf.
   ===================================================================== */
.mg-carousel-section {
  /* Die Spur laeuft absichtlich bis an den Rand, damit die naechste Karte
     rechts angeschnitten sichtbar ist — das ist der Hinweis "hier geht's
     weiter". Deshalb hebeln wir die Sektions-Innenabstaende seitlich aus. */
  padding-inline: 0;
  overflow: hidden;
}
.mg-carousel { max-width: var(--mg-maxw); margin-inline: auto; }

.mg-carousel__head,
.mg-carousel__hint {
  padding-inline: var(--mg-gutter);
}
.mg-carousel__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(22px, 3vw, 32px);
}

.mg-carousel__nav { display: flex; gap: 10px; flex: none; }
.mg-carousel__btn {
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--mg-line);
  border-radius: 50%;
  background: transparent;
  color: var(--mg-ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.mg-carousel__btn:hover:not(:disabled) {
  background: var(--mg-ink);
  border-color: var(--mg-ink);
  color: #fff;
}
/* Am Anfang bzw. Ende ausgegraut statt versteckt: ein verschwindender
   Knopf laesst das Layout springen. */
.mg-carousel__btn:disabled { opacity: 0.3; cursor: default; }

.mg-carousel__track {
  display: flex;
  gap: clamp(16px, 1.8vw, 24px);
  margin: 0;
  padding: 4px var(--mg-gutter) 6px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--mg-gutter);
  /* Scrollbalken ausblenden — die Pfeile und die angeschnittene Karte
     zeigen deutlich genug, dass es weitergeht. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.mg-carousel__track::-webkit-scrollbar { display: none; }
.mg-carousel__track:focus-visible {
  outline: 3px solid var(--mg-gold);
  outline-offset: 2px;
}

.mg-carousel__item {
  flex: 0 0 auto;
  width: calc((100% - 3 * clamp(16px, 1.8vw, 24px)) / 3.35);
  scroll-snap-align: start;
}
@media (max-width: 1000px) {
  .mg-carousel__item { width: calc((100% - 2 * 16px) / 2.25); }
}
@media (max-width: 640px) {
  .mg-carousel__item { width: 78%; }
  .mg-carousel__head { flex-direction: column; align-items: flex-start; }
}

/* Karten im Karussell muessen gleich hoch sein, sonst wackelt die Reihe. */
.mg-card--slide {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: transparent;
  border: 0;
}
.mg-card--slide .mg-card__media {
  position: relative;
  background: var(--mg-white);
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.mg-card--slide .mg-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.mg-card--slide .mg-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 2px 18px;
  border-bottom: 1px solid var(--mg-line-soft);
  transition: border-color 0.25s ease;
}
.mg-card--slide:hover .mg-card__body { border-bottom-color: var(--mg-gold); }
.mg-card--slide .mg-card__footer { margin-top: auto; }

/* Letzte Karte: Wegweiser statt Produkt. */
.mg-card--mehr a {
  height: 100%;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  text-decoration: none;
  background: var(--mg-white);
  border: 1px dashed var(--mg-line);
  color: var(--mg-ink);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.mg-card--mehr a:hover { border-color: var(--mg-gold); color: var(--mg-gold-tief); }
.mg-card--mehr__plus {
  width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 20px;
}
.mg-card--mehr__text {
  font-family: var(--mg-font-heading);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 14px;
  line-height: 1.5;
}

.mg-carousel__hint {
  margin-top: 18px;
  font-size: 0.86rem;
  color: var(--mg-muted);
  letter-spacing: 0.04em;
}

/* =====================================================================
   WOCHENKALENDER ÖFFNUNGSZEITEN (events.html)
   ---------------------------------------------------------------------
   Waagerechte Zeitachse statt Tabelle. Jeder Tag ist eine Spur von 16 bis
   24 Uhr; der goldene Block darin ist die Oeffnungszeit. Position und
   Breite kommen als Prozentwerte direkt aus dem HTML — so bleibt die
   Darstellung anpassbar, ohne CSS anzufassen.
   ===================================================================== */
.mg-woche { margin-top: 4px; }

.mg-woche__skala {
  display: flex;
  justify-content: space-between;
  /* buendig mit den Spuren: links steht die Tagesabkuerzung. */
  margin-left: 46px;
  margin-bottom: 8px;
  font-family: var(--mg-font-heading);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--mg-muted);
  font-variant-numeric: tabular-nums;
}

.mg-woche__tage { list-style: none; margin: 0; padding: 0; }

.mg-woche__tag {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 3px 0;
}
.mg-woche__name {
  flex: none;
  width: 34px;
  font-family: var(--mg-font-heading);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  font-size: 0.82rem;
}
.mg-woche__tag[data-zu] .mg-woche__name { color: var(--mg-muted); }

.mg-woche__spur {
  position: relative;
  flex: 1;
  height: 30px;
  background: var(--mg-paper);
  border: 1px solid var(--mg-line-soft);
}
/* Feine Rasterlinien alle zwei Stunden. Ohne sie schweben die Bloecke
   im Nichts und die Uhrzeit-Skala oben haette keinen Bezug. */
.mg-woche__spur::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to right,
    var(--mg-line-soft) 0 1px,
    transparent 1px 25%
  );
  opacity: 0.7;
}
.mg-woche__tag[data-zu] .mg-woche__spur { background: transparent; }

.mg-woche__block {
  position: absolute;
  top: 3px; bottom: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mg-gold);
  color: #1a1408;
  font-family: var(--mg-font-heading);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mg-woche__fazit {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--mg-line-soft);
  font-family: var(--mg-font-body);
  line-height: 1.6;
  color: var(--mg-ink-soft);
}
.mg-woche__fazit strong { color: var(--mg-ink); }

@media (max-width: 480px) {
  .mg-woche__skala { margin-left: 34px; }
  .mg-woche__name { width: 26px; font-size: 0.76rem; }
  .mg-woche__tag { gap: 8px; }
  .mg-woche__spur { height: 26px; }
  .mg-woche__block { font-size: 0.68rem; }
}