/* =========================================================================
   Leeraner Miniaturland – Designsystem
   Basis: Strukturplanung Webseite / Designsystem v1
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Design Tokens
   ------------------------------------------------------------------------- */
:root {
  /* Markenfarben */
  --ml-blue:        #014896;
  --ml-blue-dark:   #01356f;
  --ml-blue-deep:   #012a58;
  --ml-yellow:      #FFE236;
  --ml-yellow-dark: #F5D200;
  --ml-white:       #FFFEFC;

  /* UI-Farben */
  --text:           #102033;
  --text-secondary: #52606D;
  --text-muted:     #59646F;
  --border:         #DDE3E9;
  --surface:        #F5F7F9;
  --surface-blue:   #EEF3F9;

  /* Abstände (8px-System) */
  --s-4: 4px;   --s-8: 8px;   --s-16: 16px; --s-24: 24px;
  --s-32: 32px; --s-48: 48px; --s-64: 64px; --s-80: 80px;
  --s-96: 96px; --s-128: 128px;

  /* Radien */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 24px;

  /* Layout */
  --container: 1280px;
  --measure: 760px;
  --gutter: 48px;

  /* Sektionsabstände */
  --section-y: 96px;
  --section-y-lg: 128px;
  --section-y-sm: 72px;

  /* Header */
  --header-h: 88px;

  /* Motion */
  --t-fast: 180ms cubic-bezier(.4, 0, .2, 1);
  --t-mid:  260ms cubic-bezier(.4, 0, .2, 1);
  --t-slow: 460ms cubic-bezier(.22, .61, .36, 1);

  /* Schatten – sparsam */
  --shadow-soft: 0 8px 30px rgba(16, 32, 51, .08);
  --shadow-lift: 0 18px 48px rgba(16, 32, 51, .12);
}

@media (max-width: 1279px) { :root { --gutter: 32px; } }
@media (max-width: 767px) {
  :root {
    --gutter: 20px;
    --section-y: 64px;
    --section-y-lg: 80px;
    --section-y-sm: 48px;
    --header-h: 68px;
  }
}

/* -------------------------------------------------------------------------
   2. Reset / Basis
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ml-white);
  color: var(--text);
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
@media (max-width: 767px) { body { font-size: 16px; line-height: 1.625; } }

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

h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--ml-blue); font-weight: 700; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
figure { margin: 0; }

a { color: var(--ml-blue); text-decoration: none; }
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--ml-blue);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-blue a:focus-visible,
.on-blue button:focus-visible { outline-color: var(--ml-yellow); }

::selection { background: var(--ml-yellow); color: var(--text); }

/* -------------------------------------------------------------------------
   3. Typografie-Skala
   ------------------------------------------------------------------------- */
.h1, h1 { font-size: 56px; line-height: 1.10; letter-spacing: -.02em; font-weight: 700; }
.h2, h2 { font-size: 40px; line-height: 1.20; letter-spacing: -.015em; font-weight: 700; }
.h3, h3 { font-size: 28px; line-height: 1.25; letter-spacing: -.01em; font-weight: 600; }
.h4, h4 { font-size: 22px; line-height: 1.35; font-weight: 600; }

.lead { font-size: 20px; line-height: 1.6; font-weight: 400; color: var(--text-secondary); }
.small { font-size: 14px; line-height: 1.5; }
.meta { font-size: 14px; line-height: 1.5; font-weight: 500; color: var(--text-muted); }

@media (max-width: 767px) {
  .h1, h1 { font-size: 38px; line-height: 42px; }
  .h2, h2 { font-size: 32px; line-height: 38px; }
  .h3, h3 { font-size: 24px; line-height: 30px; }
  .h4, h4 { font-size: 20px; line-height: 27px; }
  .lead { font-size: 18px; line-height: 29px; }
}

/* Eyebrow – kleines Label über Überschriften, mit gelbem Strich */
.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ml-blue);
  margin-bottom: var(--s-16);
}
.eyebrow::before {
  content: ""; width: 28px; height: 4px; flex: none;
  background: var(--ml-yellow); border-radius: 2px;
}
.on-blue .eyebrow { color: var(--ml-yellow); }
.eyebrow--center { justify-content: center; }

.prose { max-width: var(--measure); color: var(--text-secondary); }
.prose p + p { margin-top: var(--s-16); }
.prose strong { color: var(--text); font-weight: 600; }
.prose a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--ml-yellow); }
.prose a:hover { color: var(--ml-blue-dark); }
.prose ul { margin-top: var(--s-16); padding-left: 22px; }
.prose li { margin-bottom: 8px; }

.text-blue { color: var(--ml-blue); }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }

/* -------------------------------------------------------------------------
   4. Layout
   ------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(920px + var(--gutter) * 2); }

.section { padding-block: var(--section-y); }
.section--lg { padding-block: var(--section-y-lg); }
.section--sm { padding-block: var(--section-y-sm); }
.section--tight-top { padding-top: var(--s-48); }
.section--surface { background: var(--surface); }
.section--blue { background: var(--ml-blue); color: var(--ml-white); }

.on-blue, .section--blue { color: var(--ml-white); }
.on-blue h1, .on-blue h2, .on-blue h3, .on-blue h4,
.section--blue h1, .section--blue h2, .section--blue h3, .section--blue h4 { color: var(--ml-white); }
.section--blue .lead, .on-blue .lead, .section--blue .prose, .on-blue .prose { color: rgba(255, 254, 252, .82); }
.section--blue a, .on-blue a { color: var(--ml-white); }
.section--blue .prose strong, .on-blue .prose strong { color: var(--ml-white); }

/* Section-Kopf */
.section-head { max-width: 780px; margin-bottom: var(--s-48); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head p { margin-top: var(--s-16); }

.section-head--split {
  max-width: none; display: flex; align-items: flex-end;
  justify-content: space-between; gap: var(--s-48); flex-wrap: wrap;
}
.section-head--split > div:first-child { max-width: 640px; }

.grid { display: grid; gap: var(--s-32); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1023px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); gap: var(--s-24); }
}

.stack > * + * { margin-top: var(--s-16); }
.stack-lg > * + * { margin-top: var(--s-32); }

/* Maßstabs-Linie: thematische Trennlinie (Modellbau-Skala) */
.rule-scale {
  height: 10px;
  background-image:
    linear-gradient(to right, var(--border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border), var(--border));
  background-size: 12px 10px, 100% 1px;
  background-repeat: repeat-x, no-repeat;
  background-position: 0 0, 0 100%;
}
.on-blue .rule-scale, .section--blue .rule-scale {
  background-image:
    linear-gradient(to right, rgba(255,226,54,.45) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,254,252,.25), rgba(255,254,252,.25));
}

/* -------------------------------------------------------------------------
   5. Buttons
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 14px 24px;
  font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1;
  border-radius: var(--r-md); border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: background-color var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn--primary { background: var(--ml-yellow); color: var(--text); border-color: var(--ml-yellow); }
.btn--primary:hover { background: var(--ml-yellow-dark); border-color: var(--ml-yellow-dark); box-shadow: 0 6px 18px rgba(245, 210, 0, .35); }

.btn--secondary { background: var(--ml-blue); color: var(--ml-white); border-color: var(--ml-blue); }
.btn--secondary:hover { background: var(--ml-blue-dark); border-color: var(--ml-blue-dark); }

.btn--outline { background: transparent; color: var(--ml-blue); border: 1.5px solid var(--ml-blue); }
.btn--outline:hover { background: var(--ml-blue); color: var(--ml-white); }

.on-blue .btn--outline, .section--blue .btn--outline { color: var(--ml-white); border-color: rgba(255, 254, 252, .55); }
.on-blue .btn--outline:hover, .section--blue .btn--outline:hover { background: var(--ml-white); color: var(--ml-blue); border-color: var(--ml-white); }
.section--blue .btn--secondary, .on-blue .btn--secondary { background: var(--ml-blue-deep); border-color: var(--ml-blue-deep); }

.btn--sm { min-height: 40px; padding: 10px 18px; font-size: 15px; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-16); }

/* Textlink mit Pfeil */
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 16px; color: var(--ml-blue);
  padding-bottom: 3px;
  background-image: linear-gradient(var(--ml-yellow), var(--ml-yellow));
  background-size: 0% 3px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size var(--t-mid), gap var(--t-fast);
}
.link-arrow:hover { background-size: 100% 3px; gap: 12px; }
.link-arrow svg { width: 18px; height: 18px; }
.on-blue .link-arrow, .section--blue .link-arrow { color: var(--ml-white); }

/* -------------------------------------------------------------------------
   6. Medien / Bild-Platzhalter
   ------------------------------------------------------------------------- */
.media {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg); background: var(--surface-blue);
  isolation: isolate;
}
.media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.media--16x9 { aspect-ratio: 16 / 9; }
.media--3x2  { aspect-ratio: 3 / 2; }
.media--4x3  { aspect-ratio: 4 / 3; }
.media--1x1  { aspect-ratio: 1 / 1; }
.media--portrait { aspect-ratio: 3 / 4; }
.media--xl { border-radius: var(--r-2xl); }

/* Platzhalter-Muster, solange kein Bild vorhanden ist */
.media::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    repeating-linear-gradient(135deg, rgba(1, 72, 150, .06) 0 12px, transparent 12px 24px),
    var(--surface-blue);
}
.media.is-empty::after {
  content: attr(data-placeholder);
  position: absolute; inset: auto 16px 16px 16px;
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  color: var(--ml-blue); opacity: .55;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.media.is-empty img { display: none; }

/* Das Platzhalterbild trägt Schrift. Würde es wie ein Foto formatfüllend
   beschnitten, wäre die Schrift in hohen oder sehr breiten Rahmen halb weg –
   deshalb hier vollständig einpassen und den Rest in Hausblau auffüllen.
   Über den Dateinamen statt über eine Klasse: sobald das echte Foto
   eingesetzt wird, greift die Regel von selbst nicht mehr. */
.media img[src$="/platzhalter.webp"],
.media-bleed > img[src$="/platzhalter.webp"],
img[src$="/platzhalter.webp"] {
  object-fit: contain;
  background: var(--ml-blue);
}

/* Dasselbe für die randlosen Bänder. Ohne das bliebe dort eine dunkelblaue
   Fläche stehen, auf der nur der Alt-Text klebt. */
.media-bleed.is-empty {
  background:
    repeating-linear-gradient(135deg, rgba(1, 72, 150, .06) 0 12px, transparent 12px 24px),
    var(--surface-blue);
}
.media-bleed.is-empty > img { display: none; }
.media-bleed.is-empty::after {
  content: attr(data-placeholder);
  background: none; inset: auto var(--gutter) 16px var(--gutter);
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  color: var(--ml-blue); opacity: .55;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.media-zoom:hover img { transform: scale(1.04); }

figcaption { margin-top: var(--s-8); font-size: 14px; color: var(--text-muted); }

/* -------------------------------------------------------------------------
   7. Header
   ------------------------------------------------------------------------- */
.skip-link {
  position: absolute; left: var(--gutter); top: 8px; z-index: 1000;
  transform: translateY(-200%);
  background: var(--ml-yellow); color: var(--text);
  padding: 12px 20px; border-radius: var(--r-md); font-weight: 600;
  transition: transform var(--t-fast);
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--ml-blue);
  border-bottom: 1px solid rgba(255, 254, 252, .14);
  transition: box-shadow var(--t-mid), background-color var(--t-mid);
}
.site-header.is-scrolled { box-shadow: 0 6px 28px rgba(1, 42, 88, .28); }

.header-inner {
  display: flex; align-items: center; gap: var(--s-32);
  height: var(--header-h);
}

.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 58px; width: auto; }
@media (max-width: 1100px) { .brand img { height: 46px; } }
@media (max-width: 480px) { .brand img { height: 38px; } }

.main-nav { margin-left: auto; }
.main-nav > ul { display: flex; align-items: center; gap: var(--s-4); list-style: none; }
.main-nav a {
  display: block; position: relative;
  padding: 10px 12px; border-radius: var(--r-sm);
  font-size: 16px; font-weight: 600; line-height: 1; color: var(--ml-white);
  transition: background-color var(--t-fast), color var(--t-fast);
}
.main-nav a:hover { background: rgba(255, 254, 252, .14); }
.main-nav a[aria-current="page"]::after,
.main-nav .has-sub.is-active > a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 1px;
  height: 3px; background: var(--ml-yellow); border-radius: 2px;
}

/* Dropdown */
.has-sub { position: relative; }
.subnav {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 20;
  min-width: 260px; padding: var(--s-8);
  background: var(--ml-white); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-soft);
  list-style: none;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
}
.has-sub:hover .subnav, .has-sub:focus-within .subnav { opacity: 1; visibility: visible; transform: translateY(0); }
.subnav a { padding: 11px 14px; font-weight: 500; }
.subnav a:hover { background: var(--surface-blue); }
.subnav .sub-note { display: block; font-size: 13px; font-weight: 400; color: var(--text-muted); margin-top: 2px; }

.header-actions { display: flex; align-items: center; gap: var(--s-16); flex: none; }

/* Sprachumschalter – Pille mit Globus, ausgeschriebener Sprache und Menü */
.lang-switch { position: relative; }

.lang-pill {
  display: inline-flex; align-items: center; gap: 9px;
  height: 44px; padding: 0 16px;
  background: transparent;
  border: 1px solid rgba(255, 254, 252, .38);
  border-radius: 999px;
  font-family: inherit; font-size: 15px; font-weight: 600;
  color: var(--ml-white); cursor: pointer; white-space: nowrap;
  transition: background-color var(--t-fast), border-color var(--t-fast);
}
.lang-pill:hover { background: rgba(255, 254, 252, .14); border-color: rgba(255, 254, 252, .6); }
.lang-pill .globe { width: 18px; height: 18px; flex: none; opacity: .9; }
.lang-pill .chev { width: 14px; height: 14px; flex: none; opacity: .8; transition: transform var(--t-fast); }
.lang-switch.is-open .lang-pill { background: rgba(255, 254, 252, .16); border-color: rgba(255, 254, 252, .6); }
.lang-switch.is-open .lang-pill .chev { transform: rotate(180deg); }

.lang-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 40;
  min-width: 200px; padding: 6px; list-style: none;
  background: var(--ml-white);
  border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: 0 12px 36px rgba(1, 42, 88, .22);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
}
.lang-switch.is-open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }

/* Die Einträge sind Links, keine Knöpfe: jede Sprache hat eine eigene Adresse,
   damit Suchmaschinen sie einzeln indexieren können. */
.lang-menu a {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 12px; background: none; border: 0; border-radius: var(--r-sm);
  font-family: inherit; font-size: 15px; font-weight: 500; color: var(--text);
  text-align: left; text-decoration: none; cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.lang-menu a:hover { background: var(--surface-blue); color: var(--ml-blue); }
.lang-menu a[aria-current="true"] { font-weight: 700; color: var(--ml-blue); background: var(--surface-blue); }
.lang-menu .lang-check { width: 16px; height: 16px; margin-left: auto; flex: none; opacity: 0; color: var(--ml-blue); }
.lang-menu a[aria-current="true"] .lang-check { opacity: 1; }

/* Variante auf hellem Grund (mobiles Menü liegt auf Blau, daher hier nicht nötig) */
.lang-switch--light .lang-pill { border-color: var(--border); color: var(--ml-blue); }
.lang-switch--light .lang-pill:hover { background: var(--surface-blue); border-color: var(--ml-blue); }
.lang-switch--light .lang-menu { right: auto; left: 0; }

/* Burger */
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: transparent; border: 1px solid rgba(255, 254, 252, .3); border-radius: var(--r-sm);
  cursor: pointer; color: var(--ml-white);
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; position: relative; transition: background-color var(--t-fast); }
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform var(--t-fast), top var(--t-fast);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-open .nav-toggle span { background: transparent; }
.nav-open .nav-toggle span::before { top: 0; transform: rotate(45deg); }
.nav-open .nav-toggle span::after { top: 0; transform: rotate(-45deg); }

.mobile-cta { display: none; }

@media (max-width: 1100px) {
  .nav-toggle { display: inline-flex; }
  .header-inner { gap: var(--s-16); }
  /* Im mobilen Menü liegt die Navigation als Overlay außerhalb des Flusses.
     Ohne diese Zeile rutschen Korb und Menüknopf direkt neben das Logo. */
  .header-actions { margin-left: auto; }
  .main-nav {
    position: fixed; inset: var(--header-h) 0 0 0;
    background: var(--ml-blue);
    padding: var(--s-24) var(--gutter) var(--s-64);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--t-mid);
    margin-left: 0;
  }
  .nav-open .main-nav { transform: translateX(0); }
  body.nav-open { overflow: hidden; }
  .main-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav > ul > li > a { padding: 15px 4px; font-size: 20px; border-bottom: 1px solid rgba(255, 254, 252, .18); border-radius: 0; }
  .main-nav a[aria-current="page"]::after, .main-nav .has-sub.is-active > a::after { display: none; }
  .main-nav > ul > li > a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--ml-yellow); padding-left: 14px; }
  .subnav {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; background: none; padding: 6px 0 14px 12px; min-width: 0;
    border-left: 2px solid rgba(255, 254, 252, .25); margin: 10px 0 10px 4px; border-radius: 0;
  }
  .subnav a { font-size: 16px; padding: 9px 10px; color: rgba(255, 254, 252, .88); }
  .subnav a:hover { background: rgba(255, 254, 252, .14); }
  .subnav a[aria-current="page"] { background: rgba(255, 254, 252, .16); color: var(--ml-white); }
  .subnav .sub-note { color: rgba(255, 254, 252, .6); }
  .header-cta-desktop { display: none; }
  .mobile-cta { display: flex; gap: var(--s-16); margin-top: var(--s-32); flex-wrap: wrap; align-items: center; }
  .header-actions .lang-switch { display: none; }
}
@media (min-width: 1101px) { .mobile-cta .lang-switch { display: none; } }

/* -------------------------------------------------------------------------
   8. Hero
   ------------------------------------------------------------------------- */
.hero { position: relative; padding-top: var(--s-64); padding-bottom: var(--s-96); }
.hero::before {
  content: ""; position: absolute; top: 0; right: 0; width: 44%; height: 78%;
  background: var(--surface-blue); z-index: -2;
  border-bottom-left-radius: 140px;
}
@media (max-width: 1023px) { .hero::before { display: none; } }

.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: var(--s-64); align-items: center;
}
.hero-content { max-width: 620px; }
.hero h1 { margin-bottom: var(--s-24); }
.hero h1 .accent { position: relative; display: inline-block; z-index: 0; }
.hero h1 .accent::after {
  content: ""; position: absolute; left: -3px; right: -3px; bottom: .04em; height: .26em;
  background: var(--ml-yellow); z-index: -1; border-radius: 3px;
}
.hero .lead { margin-bottom: var(--s-32); }

.hero-figure { position: relative; }
.hero-figure .media { border-radius: var(--r-2xl); }
.hero-badge {
  position: absolute; left: -36px; bottom: -30px; z-index: 2;
  background: var(--ml-blue); color: var(--ml-white);
  padding: 20px 26px; border-radius: var(--r-xl);
  box-shadow: var(--shadow-lift);
  max-width: 250px;
}
.hero-badge .hb-value { font-size: 34px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--ml-yellow); }
.hero-badge .hb-label { font-size: 14px; font-weight: 500; line-height: 1.4; color: rgba(255,254,252,.85); margin-top: 4px; }
@media (max-width: 1023px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-48); }
  .hero { padding-top: var(--s-32); padding-bottom: var(--s-64); }
  .hero-badge { left: 16px; bottom: -22px; padding: 16px 20px; }
}

/* Status-Pille (heute geöffnet) */
.status-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px 8px 12px; margin-bottom: var(--s-24);
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--text);
}
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #1F8F4B; flex: none; box-shadow: 0 0 0 4px rgba(31, 143, 75, .18); }
.status-pill.is-closed .status-dot { background: #B23A2B; box-shadow: 0 0 0 4px rgba(178, 58, 43, .16); }
.status-pill .sp-sep { color: var(--border); }
.status-pill .sp-time { color: var(--text-secondary); font-weight: 500; }

/* Seiten-Header für Unterseiten */
.page-hero { padding-top: var(--s-48); padding-bottom: var(--s-48); background: var(--surface); border-bottom: 1px solid var(--border); }
.page-hero .breadcrumb { margin-bottom: var(--s-24); }
.page-hero h1 { max-width: 940px; }
.page-hero .lead { margin-top: var(--s-24); max-width: var(--measure); }

.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; font-size: 14px; color: var(--text-muted); }
.breadcrumb li + li::before { content: "/"; margin-right: 8px; color: #C3CCD6; }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--ml-blue); }

/* -------------------------------------------------------------------------
   9. Cards
   ------------------------------------------------------------------------- */
.card {
  display: flex; flex-direction: column;
  background: var(--ml-white); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
  transition: border-color var(--t-mid), transform var(--t-mid), box-shadow var(--t-mid);
}
.card-body { padding: var(--s-24) var(--s-24) var(--s-32); display: flex; flex-direction: column; gap: var(--s-8); flex: 1; }
.card-body p { color: var(--text-secondary); }
.card-body .link-arrow { margin-top: auto; padding-top: var(--s-16); align-self: flex-start; }
.card .media { border-radius: 0; }

a.card:hover, .card--link:hover { border-color: var(--ml-blue); transform: translateY(-3px); box-shadow: var(--shadow-soft); }
a.card:hover .media img, .card--link:hover .media img { transform: scale(1.04); }
a.card { color: inherit; }

.card--plain { border: 0; background: transparent; }
.card--plain .media { border-radius: var(--r-lg); }
.card--plain .card-body { padding: var(--s-24) 0 0; }
.card--pad { padding: var(--s-32); }
@media (max-width: 767px) { .card--pad { padding: var(--s-24); } }

.card-tag {
  display: inline-flex; align-items: center; align-self: flex-start;
  padding: 5px 11px; border-radius: 999px;
  background: var(--ml-yellow); color: var(--text);
  font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.card-tag--blue { background: var(--surface-blue); color: var(--ml-blue); }

/* Große Feature-Cards (Ausstellung / Park / Minigolf) */
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-32); }
@media (max-width: 1023px) { .feature-grid { grid-template-columns: minmax(0, 1fr); } }

.feature {
  position: relative; display: flex; flex-direction: column;
  border-radius: var(--r-xl); overflow: hidden; background: var(--ml-white);
  border: 1px solid var(--border);
  transition: transform var(--t-mid), box-shadow var(--t-mid), border-color var(--t-mid);
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); border-color: var(--ml-blue); }
.feature:hover .media img { transform: scale(1.05); }
.feature .media { border-radius: 0; aspect-ratio: 4 / 3; }
.feature-body { padding: var(--s-32) var(--s-24); display: flex; flex-direction: column; gap: var(--s-16); flex: 1; }
.feature-body p { color: var(--text-secondary); flex: 1; }
.feature-num {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ml-white); color: var(--ml-blue);
  font-size: 15px; font-weight: 700;
}
@media (max-width: 1023px) { .feature .media { aspect-ratio: 16 / 9; } }

/* Split-Block: Bild + Text nebeneinander */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-64); align-items: center; }
.split--wide-media { grid-template-columns: 1.12fr 1fr; }
.split--reverse .split-media { order: 2; }
@media (max-width: 1023px) {
  .split, .split--wide-media { grid-template-columns: minmax(0, 1fr); gap: var(--s-32); }
  .split--reverse .split-media { order: 0; }
}
.split-content { max-width: 560px; }
.split-content h2 { margin-bottom: var(--s-16); }
.split-content .prose { margin-bottom: var(--s-24); }

/* Bild-Duo mit Versatz */
.media-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-16); align-items: start; }
.media-duo > :last-child { margin-top: var(--s-48); }
@media (max-width: 767px) { .media-duo > :last-child { margin-top: 0; } }

/* -------------------------------------------------------------------------
   10. Fakten / Zahlenband
   ------------------------------------------------------------------------- */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fact { padding: var(--s-8) var(--s-32); border-left: 1px solid var(--border); }
.fact:first-child { border-left: 0; padding-left: 0; }
.section--blue .fact, .on-blue .fact { border-color: rgba(255, 254, 252, .22); }
.fact-value {
  font-size: 46px; font-weight: 800; line-height: 1.05; letter-spacing: -.03em;
  color: var(--ml-blue); font-variant-numeric: tabular-nums;
}
.section--blue .fact-value, .on-blue .fact-value { color: var(--ml-yellow); }
.fact-label { margin-top: var(--s-8); font-size: 15px; font-weight: 500; color: var(--text-secondary); }
.section--blue .fact-label, .on-blue .fact-label { color: rgba(255, 254, 252, .78); }
@media (max-width: 1023px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-32) 0; }
  .fact:nth-child(odd) { border-left: 0; padding-left: 0; }
  .fact-value { font-size: 38px; }
}
@media (max-width: 480px) { .facts { grid-template-columns: minmax(0, 1fr); } .fact { border-left: 0; padding-left: 0; } }

/* -------------------------------------------------------------------------
   11. Öffnungszeiten & Preise
   ------------------------------------------------------------------------- */
.hours-list { list-style: none; }
.hours-list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-16);
  padding: 13px 0; border-bottom: 1px solid var(--border);
  font-size: 16px;
}
.section--blue .hours-list li, .on-blue .hours-list li { border-color: rgba(255,254,252,.2); }
.hours-list li:last-child { border-bottom: 0; }
.hours-list .hd { font-weight: 600; }
.hours-list .ht { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.section--blue .hours-list .ht, .on-blue .hours-list .ht { color: rgba(255,254,252,.8); }
.hours-list li.is-today { position: relative; }
.hours-list li.is-today .hd { color: var(--ml-blue); }
.section--blue .hours-list li.is-today .hd, .on-blue .hours-list li.is-today .hd { color: var(--ml-yellow); }
.hours-list li.is-today::before {
  content: ""; position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 22px; background: var(--ml-yellow); border-radius: 2px;
}

.price-table { width: 100%; border-collapse: collapse; font-size: 17px; }
.price-table caption { text-align: left; padding-bottom: var(--s-16); color: var(--text-muted); font-size: 14px; }
.price-table th, .price-table td { padding: 16px 12px; text-align: left; border-bottom: 1px solid var(--border); }
.price-table thead th { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ml-blue); }
.price-table tbody th { font-weight: 600; color: var(--text); }
.price-table td { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.price-table td.price { font-weight: 700; color: var(--text); white-space: nowrap; }
.price-table th:first-child, .price-table td:first-child { padding-left: 0; }
.price-table th:last-child, .price-table td:last-child { padding-right: 0; text-align: right; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.price-card { display: flex; flex-direction: column; gap: var(--s-16); }
.price-card .price-big { font-size: 44px; font-weight: 800; letter-spacing: -.03em; color: var(--ml-blue); line-height: 1; }
.price-card .price-big small { font-size: 16px; font-weight: 600; color: var(--text-muted); letter-spacing: 0; }
.price-card.is-featured { border-color: var(--ml-blue); border-width: 2px; position: relative; }
.price-card.is-featured::before {
  content: attr(data-badge); position: absolute; top: -13px; left: var(--s-32);
  background: var(--ml-yellow); color: var(--text); font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px;
}

.check-list { list-style: none; display: grid; gap: 12px; }
.check-list li { display: flex; align-items: flex-start; gap: 12px; color: var(--text-secondary); font-size: 16px; }
.check-list svg { width: 20px; height: 20px; flex: none; color: var(--ml-blue); margin-top: 3px; }
.on-blue .check-list li, .section--blue .check-list li { color: rgba(255,254,252,.85); }
.on-blue .check-list svg, .section--blue .check-list svg { color: var(--ml-yellow); }

/* -------------------------------------------------------------------------
   12. Info-Zeilen / Icon-Blöcke
   ------------------------------------------------------------------------- */
.info-row { display: flex; align-items: flex-start; gap: var(--s-16); }
.info-row > svg { width: 24px; height: 24px; flex: none; color: var(--ml-blue); margin-top: 2px; }
.on-blue .info-row > svg { color: var(--ml-yellow); }
.info-row .ir-title { font-weight: 600; font-size: 17px; }
.info-row .ir-text { color: var(--text-secondary); font-size: 16px; }
.on-blue .info-row .ir-text { color: rgba(255,254,252,.8); }

.icon-badge {
  width: 56px; height: 56px; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--surface-blue); color: var(--ml-blue);
}
.icon-badge svg { width: 28px; height: 28px; }
.icon-badge--yellow { background: var(--ml-yellow); color: var(--text); }
.on-blue .icon-badge { background: rgba(255,254,252,.12); color: var(--ml-yellow); }

/* -------------------------------------------------------------------------
   13. Aktuelles / News
   ------------------------------------------------------------------------- */
.news-item { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--s-32); align-items: center; padding: var(--s-32) 0; border-bottom: 1px solid var(--border); }
.news-item:first-of-type { border-top: 1px solid var(--border); }
@media (max-width: 767px) { .news-item { grid-template-columns: minmax(0, 1fr); gap: var(--s-16); } }

/* -------------------------------------------------------------------------
   14. Galerie
   ------------------------------------------------------------------------- */
.gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s-16); }
.gallery > * { grid-column: span 4; }
.gallery > .g-wide { grid-column: span 8; }
.gallery > .g-tall { grid-column: span 4; grid-row: span 2; }
@media (max-width: 767px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery > *, .gallery > .g-wide, .gallery > .g-tall { grid-column: span 1; grid-row: auto; }
}

.scroller { display: flex; gap: var(--s-16); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s-16); }
.scroller > * { flex: 0 0 clamp(240px, 30vw, 360px); scroll-snap-align: start; }
.scroller::-webkit-scrollbar { height: 8px; }
.scroller::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }

/* -------------------------------------------------------------------------
   15. Crosslink (externe Gastro-Seite)
   ------------------------------------------------------------------------- */
.crosslink {
  display: grid; grid-template-columns: 1.05fr 1fr;
  border-radius: var(--r-2xl); overflow: hidden; background: var(--ml-blue); color: var(--ml-white);
}
/* Der Block liegt auf Blau – Überschriften und Text müssen hell sein */
.crosslink h1, .crosslink h2, .crosslink h3, .crosslink h4 { color: var(--ml-white); }
.crosslink .prose, .crosslink .lead { color: rgba(255, 254, 252, .85); }
.crosslink .prose strong { color: var(--ml-white); }
.crosslink .eyebrow { color: var(--ml-yellow); }
.crosslink .check-list li { color: rgba(255, 254, 252, .88); }
.crosslink .check-list svg { color: var(--ml-yellow); }
.crosslink .btn--outline { color: var(--ml-white); border-color: rgba(255, 254, 252, .55); }
.crosslink .btn--outline:hover { background: var(--ml-white); color: var(--ml-blue); border-color: var(--ml-white); }
.crosslink a:focus-visible, .crosslink button:focus-visible { outline-color: var(--ml-yellow); }
.crosslink .cl-body { padding: var(--s-64) var(--s-48); display: flex; flex-direction: column; justify-content: center; gap: var(--s-24); }
.crosslink .media { border-radius: 0; height: 100%; min-height: 360px; }
@media (max-width: 1023px) {
  .crosslink { grid-template-columns: minmax(0, 1fr); }
  .crosslink .cl-body { padding: var(--s-32) var(--s-24) var(--s-48); }
  /* Hochkant statt 16:9: am Rechner ist die Bildspalte so hoch wie der Text
     daneben und landet dabei bei etwa 4:5. Bliebe es hier quer, bräuchte
     dieselbe Datei zwei völlig verschiedene Zuschnitte. */
  .crosslink .media { min-height: 0; aspect-ratio: 4 / 5; }
}
.ext-hint { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: rgba(255,254,252,.72); }
.ext-hint svg { width: 15px; height: 15px; }
.ext-ico { width: 15px; height: 15px; }

/* -------------------------------------------------------------------------
   16. Accordion (FAQ)
   ------------------------------------------------------------------------- */
.accordion { border-top: 1px solid var(--border); }
.accordion details { border-bottom: 1px solid var(--border); }
.accordion summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-16);
  padding: 22px 0; cursor: pointer; list-style: none;
  font-size: 19px; font-weight: 600; color: var(--ml-blue);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: ""; flex: none; width: 11px; height: 11px;
  border-right: 2px solid var(--ml-blue); border-bottom: 2px solid var(--ml-blue);
  transform: rotate(45deg) translate(-3px, -3px); transition: transform var(--t-fast);
}
.accordion details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.accordion .acc-body { padding: 0 0 24px; color: var(--text-secondary); max-width: var(--measure); }
.accordion .acc-body p + p { margin-top: var(--s-16); }

/* -------------------------------------------------------------------------
   17. Footer
   ------------------------------------------------------------------------- */
.site-footer { background: var(--ml-blue); color: var(--ml-white); padding-top: var(--s-80); }
.site-footer h2, .site-footer h3, .site-footer h4 { color: var(--ml-white); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: var(--s-48); padding-bottom: var(--s-64); }
@media (max-width: 1023px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-32); } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }

.footer-title { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ml-yellow); margin-bottom: var(--s-16); }
.footer-list { list-style: none; display: grid; gap: 10px; }
.footer-list a, .site-footer address a { color: rgba(255, 254, 252, .82); font-size: 16px; font-style: normal; }
.footer-list a:hover, .site-footer address a:hover { color: var(--ml-yellow); }
.site-footer address { font-style: normal; color: rgba(255, 254, 252, .82); line-height: 1.7; }
.footer-brand .footer-logo { height: 60px; width: auto; margin-bottom: var(--s-24); }
.footer-brand p { color: rgba(255, 254, 252, .75); max-width: 330px; font-size: 16px; }

.social-row { display: flex; gap: 10px; margin-top: var(--s-24); }
.social-row a {
  width: 42px; height: 42px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  border: 1px solid rgba(255, 254, 252, .28); color: var(--ml-white);
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.social-row a:hover { background: var(--ml-yellow); border-color: var(--ml-yellow); color: var(--text); }
.social-row svg { width: 19px; height: 19px; }

.footer-bottom {
  border-top: 1px solid rgba(255, 254, 252, .18);
  padding: var(--s-24) 0 var(--s-32);
  display: flex; flex-wrap: wrap; gap: var(--s-16) var(--s-32);
  align-items: center; justify-content: space-between;
  font-size: 14px; color: rgba(255, 254, 252, .7);
}
.footer-bottom ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-24); }
.footer-bottom a { color: rgba(255, 254, 252, .7); }
.footer-bottom a:hover { color: var(--ml-yellow); }

/* -------------------------------------------------------------------------
   18. Formular
   ------------------------------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-24); }
@media (max-width: 767px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 15px; font-weight: 600; color: var(--text); }
.field .hint { font-size: 14px; color: var(--text-muted); }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: 16px; color: var(--text);
  padding: 13px 16px; min-height: 48px;
  background: var(--ml-white); border: 1px solid var(--border); border-radius: var(--r-md);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: #C3CCD6; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--ml-blue); box-shadow: 0 0 0 3px rgba(1, 72, 150, .12); outline: none;
}
.field textarea { min-height: 150px; resize: vertical; }
.field-check { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: var(--text-secondary); }
.field-check input { min-height: 0; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--ml-blue); flex: none; }

/* -------------------------------------------------------------------------
   19. Hinweisboxen
   ------------------------------------------------------------------------- */
.note {
  display: flex; gap: var(--s-16); align-items: flex-start;
  padding: var(--s-24); border-radius: var(--r-md);
  background: var(--surface-blue); color: var(--text-secondary); font-size: 16px;
}
.note > svg { width: 22px; height: 22px; flex: none; color: var(--ml-blue); margin-top: 1px; }
.note strong { color: var(--text); font-weight: 600; }
.note--yellow { background: #FFF8CC; }
.note--yellow > svg { color: #8A6D00; }

/* -------------------------------------------------------------------------
   20. Animation / Reveal
   ------------------------------------------------------------------------- */
.js-ready [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--t-slow), transform var(--t-slow); }
.js-ready [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-ready [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Utilities */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mt-0 { margin-top: 0; } .mt-16 { margin-top: var(--s-16); } .mt-24 { margin-top: var(--s-24); }
.mt-32 { margin-top: var(--s-32); } .mt-48 { margin-top: var(--s-48); } .mt-64 { margin-top: var(--s-64); }
.mb-0 { margin-bottom: 0; } .mb-16 { margin-bottom: var(--s-16); } .mb-24 { margin-bottom: var(--s-24); }
.mb-32 { margin-bottom: var(--s-32); } .mb-48 { margin-bottom: var(--s-48); }
.mb-64 { margin-bottom: var(--s-64); }
.center { text-align: center; }
.measure { max-width: var(--measure); }
.measure-center { max-width: var(--measure); margin-inline: auto; }
.nowrap { white-space: nowrap; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s-24); flex-wrap: wrap; }

@media print {
  .site-header, .site-footer, .nav-toggle, .lang-switch { display: none !important; }
  body { font-size: 12pt; }
}

/* -------------------------------------------------------------------------
   21. Timeline (Über uns)
   ------------------------------------------------------------------------- */
.timeline { display: grid; gap: var(--s-48); padding-left: var(--s-32); border-left: 2px solid var(--border); }
.timeline-item { position: relative; }
.timeline-item::before {
  content: ""; position: absolute; left: calc(var(--s-32) * -1 - 9px); top: 8px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--ml-yellow); box-shadow: 0 0 0 4px var(--ml-white);
}
.timeline-year {
  font-size: 14px; font-weight: 700; letter-spacing: .1em;
  color: var(--ml-blue); margin-bottom: 6px; font-variant-numeric: tabular-nums;
}
.timeline-item h3 { margin-bottom: var(--s-8); }
@media (max-width: 767px) { .timeline { padding-left: var(--s-24); gap: var(--s-32); } .timeline-item::before { left: -33px; width: 14px; height: 14px; } }

/* Aktive Unterseite auch im Dropdown / Mobile-Menü markieren */
.subnav a[aria-current="page"] { color: var(--ml-blue); background: var(--surface-blue); }
.subnav a[aria-current="page"] span:first-child { font-weight: 700; }

/* -------------------------------------------------------------------------
   22. Vollflächige Bild- / Video- / GIF-Flächen
   ------------------------------------------------------------------------- */
.media-bleed {
  position: relative; width: 100%; overflow: hidden;
  background: var(--ml-blue-deep); isolation: isolate;
}
.media-bleed > img,
.media-bleed > video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Der Hero füllt exakt die restliche Bildschirmhöhe unter dem Header –
   sonst bleibt unten ein heller Streifen stehen.
   dvh statt svh: dvh entspricht immer dem tatsächlich sichtbaren Bereich.
   svh wäre die kleinstmögliche Höhe und ließe je nach Browser eine Lücke.
   Die 1px kommen von der Trennlinie unter dem Header. */
.media-bleed--hero {
  height: calc(100vh - var(--header-h) - 1px);
  height: calc(100dvh - var(--header-h) - 1px);
  min-height: 540px;
}
.media-bleed--band { height: clamp(300px, 44vw, 620px); }
.media-bleed--strip { height: clamp(220px, 30vw, 420px); }

/* Abdunklung, damit Text auf jedem Motiv lesbar bleibt */
.media-bleed::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(1, 42, 88, .92) 0%, rgba(1, 42, 88, .55) 38%, rgba(1, 42, 88, .12) 68%, rgba(1, 42, 88, .28) 100%);
}
.media-bleed--plain::after { background: linear-gradient(to top, rgba(1, 42, 88, .35), rgba(1, 42, 88, .05)); }
.media-bleed--none::after { display: none; }

.bleed-content {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding-bottom: clamp(40px, 6vw, 80px);
}
.bleed-content--center {
  inset: 0; display: flex; align-items: center;
  padding-bottom: 0;
}

/* Startseiten-Hero */
.hero-full { position: relative; }

/* Auf schmalen Bildschirmen darf der Hero mitwachsen.
   -------------------------------------------------------------------------
   Sonst passiert Folgendes: Der Hero ist exakt bildschirmhoch, der Textblock
   hängt absolut am unteren Rand. Wird der Block höher als der Hero – auf dem
   Handy schnell der Fall, weil die Statuszeile umbricht und die Überschrift
   drei Zeilen braucht – wächst er nach OBEN heraus und verschwindet hinter
   dem klebenden Kopf. Gemeldet am 05.10.2026: Die Zeile „Heute geschlossen"
   war auf dem Handy oben abgeschnitten.

   Lösung: Bild und Text in dieselbe Rasterzelle legen. Der Text steht dann im
   normalen Fluss und bestimmt die Höhe, das Bild füllt sie aus. Bildschirmhoch
   bleibt der Hero über min-height – er wird nur nie kleiner als sein Inhalt. */
@media (max-width: 700px) {
  .hero-full {
    display: grid;
    min-height: calc(100vh - var(--header-h) - 1px);
    min-height: calc(100dvh - var(--header-h) - 1px);
  }
  .hero-full > .media-bleed--hero,
  .hero-full > .bleed-content {
    grid-area: 1 / 1;
  }
  .hero-full > .media-bleed--hero {
    height: auto;
    min-height: 0;
  }
  .hero-full > .bleed-content {
    position: static;
    align-self: end;
    padding-top: var(--s-48);
  }
}
.hero-full h1 { color: var(--ml-white); max-width: 16ch; }
.hero-full .lead { color: rgba(255, 254, 252, .9); max-width: 54ch; margin-top: var(--s-24); }
.hero-full .btn-row { margin-top: var(--s-32); }
.hero-full .accent { color: var(--ml-yellow); }

/* Kennzahlen-Leiste unter dem Hero */
.hero-meta {
  display: flex; flex-wrap: wrap; gap: var(--s-32) var(--s-48);
  margin-top: var(--s-48); padding-top: var(--s-24);
  border-top: 1px solid rgba(255, 254, 252, .25);
}
.hero-meta > div { min-width: 120px; }
.hero-meta .hm-value {
  font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; letter-spacing: -.02em;
  color: var(--ml-yellow); line-height: 1.1; font-variant-numeric: tabular-nums;
}
.hero-meta .hm-label { font-size: 14px; font-weight: 500; color: rgba(255, 254, 252, .8); margin-top: 4px; }
@media (max-width: 767px) { .hero-meta { gap: var(--s-24) var(--s-32); } }

/* Status-Pille auf dunklem Bild */
.status-pill--media {
  background: rgba(255, 254, 252, .16); border-color: rgba(255, 254, 252, .32);
  color: var(--ml-white); backdrop-filter: blur(6px);
}
.status-pill--media .sp-time { color: rgba(255, 254, 252, .78); }
.status-pill--media .sp-sep { color: rgba(255, 254, 252, .4); }

/* Bildunterschrift auf vollflächigen Bändern */
.bleed-caption {
  position: absolute; right: var(--gutter); bottom: 16px; z-index: 2;
  font-size: 13px; color: rgba(255, 254, 252, .7);
}

/* Vollflächiges Band mit Textkarte darüber */
.band-card {
  background: var(--ml-blue); color: var(--ml-white);
  padding: var(--s-48); border-radius: var(--r-2xl);
  max-width: 560px;
}
.band-card h2 { color: var(--ml-white); }
.band-card .prose { color: rgba(255, 254, 252, .85); }
@media (max-width: 767px) { .band-card { padding: var(--s-32) var(--s-24); } }

/* -------------------------------------------------------------------------
   23. Ticket-Karten (mehrere Preismodelle)
   ------------------------------------------------------------------------- */
.ticket-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-24); }
@media (max-width: 1023px) { .ticket-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ticket-grid { grid-template-columns: minmax(0, 1fr); } }

.ticket {
  display: flex; flex-direction: column; gap: var(--s-8);
  padding: var(--s-32) var(--s-24);
  background: var(--ml-white); border: 1px solid var(--border); border-radius: var(--r-lg);
}
.ticket .t-name { font-size: 17px; font-weight: 700; color: var(--ml-blue); }
.ticket .t-note { font-size: 14px; color: var(--text-muted); }
.ticket .t-price {
  margin-top: auto; padding-top: var(--s-16);
  font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.ticket .t-price small { font-size: 14px; font-weight: 600; color: var(--text-muted); letter-spacing: 0; }
.ticket--accent { border-color: var(--ml-blue); border-width: 2px; }

/* -------------------------------------------------------------------------
   24. Rechtstexte (Impressum / Datenschutz)
   ------------------------------------------------------------------------- */
.legal { max-width: 760px; }
.legal h2 { font-size: 24px; line-height: 1.3; margin-top: var(--s-48); margin-bottom: var(--s-16); }
.legal h2:first-child { margin-top: 0; }
.legal p { color: var(--text-secondary); }
.legal p + p { margin-top: var(--s-16); }
.legal address { font-style: normal; color: var(--text-secondary); line-height: 1.8; }
.legal a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--ml-yellow); }
.legal dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px var(--s-32); color: var(--text-secondary); }
.legal dt { font-weight: 600; color: var(--text); }
@media (max-width: 560px) { .legal dl { grid-template-columns: minmax(0, 1fr); gap: 2px; } .legal dd { margin: 0 0 12px; } }

/* -------------------------------------------------------------------------
   Rechtstexte des Anwalts (Datenschutzerklärung, AGB)
   -------------------------------------------------------------------------
   Beide kommen aus demselben Generator und werden unverändert eingebunden;
   hier wird nur ihre Struktur lesbar gemacht:
     ul.index       Inhaltsübersicht mit Sprungmarken (beide Texte)
     ul.m-elements  Datenarten/Zwecke/Rechtsgrundlagen (Datenschutzerklärung)
     ul.glossary    Begriffserklärungen am Ende (Datenschutzerklärung)
     ol[type=a]     die a), b), c) der AGB-Paragrafen
   ------------------------------------------------------------------------- */
.legal--doc h3 { font-size: 19px; line-height: 1.35; margin: var(--s-32) 0 var(--s-16); }
.legal--doc ul,
.legal--doc ol { color: var(--text-secondary); padding-left: 20px; }
.legal--doc li { margin-bottom: 6px; }
.legal--doc li::marker { color: var(--ml-blue); }
.legal--doc strong { color: var(--text); }

/* Die AGB nummerieren ihre Absätze mit a), b), c). Etwas Luft nach dem Zeichen,
   sonst kleben die Buchstaben am Text. */
.legal--doc ol[type="a"] { padding-left: 24px; }
.legal--doc ol[type="a"] > li { padding-left: 4px; margin-bottom: 10px; }

/* Inhaltsübersicht: zweispaltig und ohne Aufzählungspunkte, sonst wird es eine
   40 Zeilen lange Wand vor dem eigentlichen Text. */
.legal--doc ul.index {
  list-style: none; padding: var(--s-24); margin-bottom: var(--s-48);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  columns: 2; column-gap: var(--s-32);
}
.legal--doc ul.index li { margin-bottom: 4px; break-inside: avoid; }
.legal--doc ul.index a { text-decoration: none; }
.legal--doc ul.index a:hover { text-decoration: underline; }
@media (max-width: 640px) { .legal--doc ul.index { columns: 1; } }

/* Metadatenblock unter jedem Verarbeitungsabschnitt: abgesetzt, damit man ihn
   vom Fließtext unterscheiden kann. */
.legal--doc ul.m-elements {
  list-style: none; padding: var(--s-16) var(--s-24); margin: var(--s-16) 0 var(--s-32);
  border-left: 3px solid var(--ml-yellow); background: var(--surface);
  font-size: 15px;
}
.legal--doc ul.m-elements li { margin-bottom: 8px; }
.legal--doc ul.m-elements li:last-child { margin-bottom: 0; }

.legal--doc ul.glossary { list-style: none; padding-left: 0; }
.legal--doc ul.glossary li { margin-bottom: var(--s-16); }

/* Hinweis über dem Text: warum er nur auf Deutsch dasteht. */
.legal-note {
  display: flex; gap: var(--s-16); align-items: flex-start;
  max-width: 760px; margin-bottom: var(--s-48);
  padding: var(--s-24); border-radius: var(--r-md);
  background: var(--surface-blue); border: 1px solid var(--ml-blue);
}
.legal-note svg { width: 22px; height: 22px; flex: none; color: var(--ml-blue); margin-top: 2px; }
.legal-note p { margin: 0; color: var(--text-secondary); }
.legal-note .legal-note-title { font-weight: 600; color: var(--ml-blue); margin-bottom: 6px; }

/* Buttons und Links auf vollflächigen Bildern / im Band-Kasten */
.bleed-content .btn--outline,
.band-card .btn--outline {
  color: var(--ml-white); border-color: rgba(255, 254, 252, .6); background: transparent;
}
.bleed-content .btn--outline:hover,
.band-card .btn--outline:hover {
  background: var(--ml-white); color: var(--ml-blue); border-color: var(--ml-white);
}
.bleed-content .btn--secondary,
.band-card .btn--secondary { background: var(--ml-blue-deep); border-color: var(--ml-blue-deep); }
.bleed-content .link-arrow, .band-card .link-arrow { color: var(--ml-white); }
.bleed-content a:focus-visible, .bleed-content button:focus-visible,
.band-card a:focus-visible { outline-color: var(--ml-yellow); }

/* -------------------------------------------------------------------------
   25. Blaue Flächen – zentrale Korrektur
   Jeder Baustein, der auf Miniaturland-Blau liegt, muss helle Schrift führen.
   Diese Liste ist die einzige Quelle dafür; neue blaue Blöcke hier eintragen.
   ------------------------------------------------------------------------- */
.on-blue,
.section--blue,
.crosslink,
.band-card,
.site-footer {
  color: var(--ml-white);
}
.on-blue h1, .on-blue h2, .on-blue h3, .on-blue h4, .on-blue h5,
.section--blue h1, .section--blue h2, .section--blue h3, .section--blue h4, .section--blue h5,
.crosslink h1, .crosslink h2, .crosslink h3, .crosslink h4,
.band-card h1, .band-card h2, .band-card h3, .band-card h4 { color: var(--ml-white); }

.on-blue .eyebrow,
.section--blue .eyebrow,
.crosslink .eyebrow,
.band-card .eyebrow,
.bleed-content .eyebrow { color: var(--ml-yellow); }

.on-blue .lead, .on-blue .prose, .on-blue .meta,
.section--blue .lead, .section--blue .prose, .section--blue .meta,
.crosslink .lead, .crosslink .prose,
.band-card .lead, .band-card .prose { color: rgba(255, 254, 252, .85); }

.on-blue .prose strong, .section--blue .prose strong,
.crosslink .prose strong, .band-card .prose strong { color: var(--ml-white); }

.on-blue .info-row > svg, .section--blue .info-row > svg,
.on-blue .check-list svg, .section--blue .check-list svg,
.crosslink .check-list svg, .band-card .check-list svg { color: var(--ml-yellow); }

.on-blue .check-list li, .section--blue .check-list li,
.crosslink .check-list li, .band-card .check-list li { color: rgba(255, 254, 252, .88); }

.on-blue .icon-badge, .section--blue .icon-badge,
.crosslink .icon-badge, .band-card .icon-badge {
  background: rgba(255, 254, 252, .14); color: var(--ml-yellow);
}

.on-blue .fact-value, .section--blue .fact-value { color: var(--ml-yellow); }
.on-blue .fact-label, .section--blue .fact-label { color: rgba(255, 254, 252, .8); }
.on-blue .fact, .section--blue .fact { border-color: rgba(255, 254, 252, .22); }

.on-blue .timeline, .section--blue .timeline { border-color: rgba(255, 254, 252, .25); }
.on-blue .timeline-year, .section--blue .timeline-year { color: var(--ml-yellow); }
.on-blue .timeline-item::before, .section--blue .timeline-item::before { box-shadow: 0 0 0 4px var(--ml-blue); }

.on-blue a, .section--blue a, .crosslink a, .band-card a { color: var(--ml-white); }
.on-blue a:focus-visible, .section--blue a:focus-visible,
.crosslink a:focus-visible, .band-card a:focus-visible,
.on-blue button:focus-visible, .section--blue button:focus-visible { outline-color: var(--ml-yellow); }

/* -------------------------------------------------------------------------
   26. Buttons behalten ihre Farbe – auch in blauen Abschnitten
   Die Kontextregeln oben färben Links hell; Buttons sind davon ausgenommen,
   sonst stünde weiße Schrift auf gelbem Grund.
   ------------------------------------------------------------------------- */
.btn.btn--primary,
a.btn.btn--primary { background: var(--ml-yellow); color: var(--text); border-color: var(--ml-yellow); }
.btn.btn--primary:hover,
a.btn.btn--primary:hover { background: var(--ml-yellow-dark); border-color: var(--ml-yellow-dark); color: var(--text); }
.btn.btn--secondary, a.btn.btn--secondary { color: var(--ml-white); }
.main-nav .btn.btn--primary { color: var(--text); }

/* Rückfallfarbe, falls ein Hero-Bild nicht lädt: Text bleibt lesbar */
.hero-full, .media-bleed { background-color: var(--ml-blue-deep); }

/* Trennstrich in der Statuszeile ist reine Dekoration */
.status-pill .sp-sep { color: #A7B2BD; }

/* Im mobilen Menü sitzt die Sprachpille ganz unten – das Menü klappt daher
   nach oben auf, sonst läge es außerhalb des sichtbaren Bereichs. */
.mobile-cta .lang-menu {
  top: auto; bottom: calc(100% + 10px);
  left: auto; right: 0;
  transform: translateY(6px);
}
.mobile-cta .lang-switch.is-open .lang-menu { transform: translateY(0); }

/* -------------------------------------------------------------------------
   27. Dropdown im blauen Header
   Die Hauptnavigation ist weiß, das aufklappende Panel aber hell –
   die Links darin brauchen deshalb wieder dunkle Schrift.
   ------------------------------------------------------------------------- */
.main-nav .subnav a { color: var(--text); }
.main-nav .subnav a:hover { color: var(--ml-blue); background: var(--surface-blue); }
.main-nav .subnav a[aria-current="page"] { color: var(--ml-blue); background: var(--surface-blue); }
.main-nav .subnav a[aria-current="page"] span:first-child { font-weight: 700; }
.main-nav .subnav .sub-note { color: var(--text-muted); }

/* Auf dem Smartphone liegt das Untermenü auf der blauen Fläche */
@media (max-width: 1100px) {
  .main-nav .subnav a { color: rgba(255, 254, 252, .9); }
  .main-nav .subnav a:hover,
  .main-nav .subnav a[aria-current="page"] { color: var(--ml-white); background: rgba(255, 254, 252, .16); }
  .main-nav .subnav .sub-note { color: rgba(255, 254, 252, .62); }
}

/* -------------------------------------------------------------------------
   28. Größeres Logo
   Viele Besucherinnen und Besucher sind über 60 – die Wortmarke soll auf
   Anhieb lesbar sein. Der Header wächst dafür mit.
   ------------------------------------------------------------------------- */
:root { --header-h: 108px; }
@media (max-width: 1100px) { :root { --header-h: 88px; } }
@media (max-width: 767px)  { :root { --header-h: 78px; } }

.brand img { height: 80px; }
@media (max-width: 1100px) { .brand img { height: 62px; } }
@media (max-width: 767px)  { .brand img { height: 54px; } }
@media (max-width: 400px)  { .brand img { height: 46px; } }

/* Etwas mehr Luft in der Navigation, damit der Header ruhig bleibt */
@media (min-width: 1101px) {
  .main-nav a { font-size: 17px; padding: 12px 14px; }
  .subnav a { font-size: 16px; }
}

/* -------------------------------------------------------------------------
   29. Karte mit Klick-to-Load
   Vor der Zustimmung liegt über der Fläche ein Hinweis-Panel. Erst der
   Klick erzeugt das iframe – vorher geht keine Anfrage nach draußen.
   ------------------------------------------------------------------------- */
.map-block { position: relative; width: 100%; }

.map-canvas {
  position: relative; width: 100%; overflow: hidden;
  height: clamp(380px, 56vh, 620px);
  background:
    repeating-linear-gradient(135deg, rgba(1, 72, 150, .05) 0 14px, transparent 14px 28px),
    var(--surface-blue);
}
.map-canvas iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

.map-consent {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-16); text-align: center;
  padding: var(--s-32) var(--gutter);
}
.map-block.is-loaded .map-consent { display: none; }

.map-consent .map-icon {
  width: 56px; height: 56px; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--ml-white); color: var(--ml-blue);
  box-shadow: var(--shadow-soft);
}
.map-consent .map-icon svg { width: 28px; height: 28px; }
.map-consent h3 { font-size: 22px; }
.map-consent p { max-width: 620px; color: var(--text-secondary); font-size: 16px; }
.map-consent a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--ml-yellow); }
.map-consent .btn { margin-top: var(--s-8); }

.map-source {
  display: none;
  padding: 10px var(--gutter); font-size: 13px; color: var(--text-muted);
  background: var(--surface); border-top: 1px solid var(--border);
}
.map-block.is-loaded .map-source { display: block; }

/* Buttons zu den Karten-Apps */
.map-apps { padding-block: var(--s-48); }
.map-apps .btn-row { margin-top: var(--s-24); }
.map-apps .map-hint {
  display: flex; gap: var(--s-16); align-items: flex-start;
  margin-top: var(--s-24); max-width: var(--measure);
  font-size: 15px; color: var(--text-secondary);
}
.map-apps .map-hint svg { width: 20px; height: 20px; flex: none; color: var(--ml-blue); margin-top: 2px; }

/* Das globale `svg { display: block }` schiebt Icons in Fließtext in eine
   eigene Zeile. Innerhalb von Textlinks laufen sie deshalb wieder inline mit. */
.ext-ico {
  display: inline-block;
  vertical-align: -3px;
  margin-left: 5px;
}
.btn .ext-ico, .link-arrow .ext-ico, .ext-hint .ext-ico { margin-left: 0; vertical-align: baseline; }
.nowrap-icon { white-space: nowrap; }

/* Logo im Footer deutlich größer – gleiche Begründung wie im Header:
   die Wortmarke soll auch aus Entfernung lesbar sein. */
.footer-brand .footer-logo { height: 132px; margin-bottom: var(--s-32); }
@media (max-width: 1023px) { .footer-brand .footer-logo { height: 112px; } }
@media (max-width: 560px)  { .footer-brand .footer-logo { height: 96px; } }

/* Der Logo-Block braucht dadurch etwas mehr Spalte */
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.7fr 1fr 1fr 1.1fr; } }

/* -------------------------------------------------------------------------
   30. Galerie – ruhiges, gleichmäßiges Raster
   Die frühere Mischung aus breiten und hohen Kacheln riss Lücken ins
   Raster. Alle Bilder haben jetzt dasselbe Format und dieselbe Größe.
   ------------------------------------------------------------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-24);
}
.gallery > * { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; }
@media (max-width: 1023px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-16); } }
@media (max-width: 560px)  { .gallery { grid-template-columns: minmax(0, 1fr); } }

/* -------------------------------------------------------------------------
   31. Statuszeile im Hero – ohne Glaseffekt
   Die milchige Pille wirkte wie ein Fremdkörper über dem Foto. Jetzt steht
   dort nur noch eine schlichte Zeile mit Punkt, direkt über der Headline.
   ------------------------------------------------------------------------- */
.status-pill--media {
  background: none;
  border: 0;
  backdrop-filter: none;
  padding: 0;
  margin-bottom: var(--s-24);
  font-size: 15px;
  letter-spacing: .01em;
  color: var(--ml-white);
  text-shadow: 0 1px 14px rgba(1, 42, 88, .55);
}
.status-pill--media .sp-time { color: rgba(255, 254, 252, .82); font-weight: 500; }
.status-pill--media .sp-sep { color: rgba(255, 254, 252, .45); }
.status-pill--media .status-dot { box-shadow: 0 0 0 4px rgba(1, 42, 88, .35); }

/* -------------------------------------------------------------------------
   32. Partner-Laufband
   Die Logos sind sehr unterschiedlich: Hoch- und Querformate, transparente
   PNGs neben JPGs mit eingebranntem Hintergrund. Einheitliche weiße Kacheln
   mit viel Innenabstand fangen das auf – jedes Logo wird nur eingepasst,
   nie beschnitten oder verzerrt.
   ------------------------------------------------------------------------- */
.partners { overflow: hidden; }

.marquee {
  position: relative;
  overflow: hidden;
  padding-block: 4px;
  /* Die Ränder laufen weich aus, damit nichts hart abgeschnitten wirkt */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll var(--marquee-duration, 90s) linear infinite;
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track,
.marquee.is-paused .marquee-track { animation-play-state: paused; }

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee-row {
  display: flex;
  align-items: stretch;
  gap: var(--s-24);
  padding-right: var(--s-24);
  list-style: none;
  margin: 0;
}

.partner-tile {
  flex: 0 0 auto;
  width: 220px; height: 124px;
  display: grid; place-items: center;
  padding: 18px;
  background: var(--ml-white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
/* Feste Höhe statt max-height: 100% – bei Grid-Items lösen Prozentwerte
   nicht auf, hohe Logos ragten dadurch aus der Kachel heraus.
   88 px = Kachelhöhe 124 minus 2 × 18 px Innenabstand. */
.partner-tile img {
  max-width: 100%;
  max-height: 88px;
  width: auto; height: auto;
  object-fit: contain;
}
a.partner-tile:hover {
  border-color: var(--ml-blue);
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
}

/* Pause-Taste: bewegte Inhalte müssen anhaltbar sein (WCAG 2.2.2) */
.marquee-toggle {
  display: inline-flex; align-items: center; gap: 9px;
  height: 44px; padding: 0 18px;
  background: transparent;
  border: 1.5px solid var(--ml-blue); border-radius: 999px;
  font-family: inherit; font-size: 15px; font-weight: 600; color: var(--ml-blue);
  cursor: pointer; white-space: nowrap;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.marquee-toggle:hover { background: var(--ml-blue); color: var(--ml-white); }
.marquee-toggle svg { width: 16px; height: 16px; }
.marquee-toggle .icon-play { display: none; }
.marquee-toggle[aria-pressed="true"] .icon-play { display: block; }
.marquee-toggle[aria-pressed="true"] .icon-pause { display: none; }

@media (max-width: 767px) {
  .partner-tile { width: 172px; height: 100px; padding: 14px; }
  .partner-tile img { max-height: 72px; }
}

/* Ohne Bewegung: ruhiges Raster statt Laufband */
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee-track { animation: none; width: 100%; flex-wrap: wrap; }
  .marquee-row { flex-wrap: wrap; justify-content: center; padding-right: 0; }
  .marquee-row[data-clone] { display: none; }
  .marquee-toggle { display: none; }
}

/* -------------------------------------------------------------------------
   33. Menüpunkte mit Untermenü
   „Erlebnis" und „Besuch" sind Buttons, keine Links: Ein Klick öffnet das
   Untermenü, statt sofort auf eine Unterseite zu springen. Der kleine
   Pfeil zeigt an, dass sich dort etwas aufklappt.
   ------------------------------------------------------------------------- */
.main-nav .nav-parent {
  display: flex; align-items: center; gap: 7px;
  position: relative;
  padding: 12px 14px; border: 0; border-radius: var(--r-sm);
  background: transparent; cursor: pointer;
  font-family: inherit; font-size: 17px; font-weight: 600; line-height: 1;
  color: var(--ml-white);
  transition: background-color var(--t-fast);
}
.main-nav .nav-parent:hover { background: rgba(255, 254, 252, .14); }
.main-nav .nav-chev {
  width: 13px; height: 13px; flex: none; opacity: .75;
  transition: transform var(--t-fast);
}
.has-sub.is-open > .nav-parent { background: rgba(255, 254, 252, .14); }
.has-sub.is-open > .nav-parent .nav-chev { transform: rotate(180deg); }

/* Aktive Gruppe bekommt denselben gelben Strich wie ein aktiver Link */
.main-nav .has-sub.is-active > .nav-parent::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 1px;
  height: 3px; background: var(--ml-yellow); border-radius: 2px;
}

/* Am Rechner öffnet zusätzlich das Überfahren mit der Maus */
@media (min-width: 1101px) {
  .has-sub:hover > .subnav,
  .has-sub:focus-within > .subnav,
  .has-sub.is-open > .subnav { opacity: 1; visibility: visible; transform: translateY(0); }
}

/* Auf dem Smartphone klappt das Untermenü auf und zu */
@media (max-width: 1100px) {
  .main-nav .nav-parent {
    width: 100%; justify-content: space-between;
    padding: 15px 4px; font-size: 20px; border-radius: 0;
    border-bottom: 1px solid rgba(255, 254, 252, .18);
  }
  .main-nav .nav-parent:hover { background: transparent; }
  .main-nav .nav-chev { width: 16px; height: 16px; }
  .has-sub > .subnav { display: none; }
  .has-sub.is-open > .subnav { display: block; }
  .has-sub.is-active > .nav-parent { box-shadow: inset 4px 0 0 var(--ml-yellow); padding-left: 14px; }
  .main-nav .has-sub.is-active > .nav-parent::after { display: none; }
}

/* -------------------------------------------------------------------------
   34. Öffnungs-Status
   Die wichtigste Information im Aufmacher: Kann ich jetzt hinfahren?
   Als blasse Zeile auf dem Foto ging sie unter. Jetzt eine solide helle
   Plakette – maximaler Kontrast gegen das Bild, ohne dem gelben Button
   die Aufmerksamkeit zu nehmen.
   ------------------------------------------------------------------------- */
.status-pill {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 11px 20px 11px 16px;
  border-radius: 999px;
  font-size: 16px; font-weight: 700; line-height: 1.2;
  color: var(--text);
  background: var(--ml-white);
  border: 1px solid var(--border);
}
.status-pill .sp-state { white-space: nowrap; }
.status-pill .sp-time {
  padding-left: 12px;
  border-left: 1px solid var(--border);
  font-weight: 500; color: var(--text-secondary);
  white-space: nowrap;
}
.status-pill .status-dot {
  width: 11px; height: 11px; border-radius: 50%; flex: none;
  background: #1F8F4B; box-shadow: 0 0 0 4px rgba(31, 143, 75, .18);
}
.status-pill.is-closed .status-dot {
  background: #C0392B; box-shadow: 0 0 0 4px rgba(192, 57, 43, .18);
}

/* Auf dem Foto: kein Rahmen, dafür etwas Abhebung und mehr Abstand nach unten */
.status-pill--media {
  background: var(--ml-white);
  border: 0;
  padding: 12px 22px 12px 18px;
  margin-bottom: var(--s-32);
  font-size: 17px;
  color: var(--text);
  text-shadow: none;
  box-shadow: 0 8px 26px rgba(1, 42, 88, .30);
}
.status-pill--media .sp-time { color: var(--text-secondary); border-left-color: #D6DBE1; }
.status-pill--media .status-dot { width: 12px; height: 12px; }

@media (max-width: 560px) {
  .status-pill { font-size: 15px; gap: 10px; padding: 10px 16px 10px 13px; flex-wrap: wrap; }
  .status-pill .sp-time { padding-left: 10px; }
}

/* Dritter Zustand: heute wird noch geöffnet, gerade aber nicht.
   Weder grün noch rot – „geschlossen“ wäre hier schlicht falsch. */
.status-pill.is-soon .status-dot {
  background: #C77700; box-shadow: 0 0 0 4px rgba(199, 119, 0, .18);
}

/* =========================================================================
   35. Öffnungszeiten mit Saisons
   -------------------------------------------------------------------------
   Seit die Zeiten im Winter wechseln, stehen auf der Preisseite beide
   Saisons untereinander. Die gerade gültige bekommt einen Rahmen und eine
   Marke, damit man nicht die falsche Tabelle abliest.
   ========================================================================= */
.hours-season + .hours-season { margin-top: 24px; }

.hours-season-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.hours-season.is-current .hours-season-head { color: var(--ml-blue); }

.hs-now {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--ml-yellow);
  color: #241F00;
  text-transform: uppercase;
}

.hours-season:not(.is-current) .hours-list { opacity: .72; }

.hours-season-note {
  margin-top: 8px;
  max-width: 46ch;
}

/* Auf blauen Flächen (Footer) muss die Marke die Farben mitdrehen. */
.on-blue .hours-season-head,
.section--blue .hours-season-head { color: rgba(255,255,255,.72); }

.on-blue .hours-season.is-current .hours-season-head,
.section--blue .hours-season.is-current .hours-season-head { color: var(--ml-white); }

/* =========================================================================
   36. Shop
   -------------------------------------------------------------------------
   Der Shop läuft ohne JavaScript: jeder Knopf ist ein abgeschicktes
   Formular. Deshalb tauchen hier Formulare an Stellen auf, an denen sonst
   ein Link stünde – .cart-form nimmt ihnen den Blockabstand wieder.
   ========================================================================= */

/* --- Warenkorb im Kopf --- */
.cart-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: var(--ml-white);
  transition: background-color .18s ease;
}

.cart-link:hover { background: rgba(255, 255, 255, .14); }
.cart-link svg { width: 22px; height: 22px; display: block; }

/* Außerhalb des Shops ist das Symbol nur ein zweiter Weg dorthin. Am
   Rechner steht daneben schon der Shop-Knopf – dort also weglassen. */
@media (min-width: 1101px) { .cart-link--small { display: none; } }

.cart-count {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--ml-yellow);
  color: #241F00;
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
}

/* --- Produktraster --- */
.shop-group { margin-top: 64px; }

.shop-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

.shop-group-head h2 { margin: 0; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 32px;
  margin-top: 32px;
}

.product-card { display: flex; flex-direction: column; gap: 16px; }
.pc-art { display: block; border-radius: 16px; overflow: hidden; }
.pc-text { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.pc-text h3 { margin: 0; }
.pc-text h3 a { color: inherit; text-decoration: none; }
.pc-text h3 a:hover { text-decoration: underline; }
.pc-short { margin: 0; color: var(--text-muted); font-size: 15px; }
.cart-form { margin: 4px 0 0; }

/* --- Gestaltete Produktfläche statt Foto --- */
.product-art {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  aspect-ratio: 4 / 3;
  padding: 20px;
  /* Farbe zusätzlich einzeln, damit sie auch ohne Verlauf steht – und
     damit Prüfwerkzeuge den Kontrast überhaupt messen können. */
  background-color: var(--ml-blue);
  background-image: linear-gradient(150deg, var(--ml-blue) 0%, #013468 100%);
  color: var(--ml-white);
  text-align: center;
}

.product-art::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 8px;
  pointer-events: none;
}

.pa-value {
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}

.product-art--voucher .pa-value { color: var(--ml-yellow); }

.pa-brand {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}

/* --- Preise --- */
.product-price {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.product-price--large { font-size: 28px; margin: 8px 0 16px; }

.product-price--onsite {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* --- Kategorie-Umschalter --- */
.category-nav { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; }

.category-pill {
  padding: 9px 18px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  transition: border-color .18s ease, background-color .18s ease;
}

.category-pill:hover { border-color: var(--ml-blue); }

.category-pill.is-current {
  background: var(--ml-blue);
  border-color: var(--ml-blue);
  color: var(--ml-white);
}

/* --- Produktdetail --- */
.product-detail {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.pd-art { border-radius: 20px; overflow: hidden; }
.pd-text h1 { margin: 8px 0 0; }

.buy-row { margin-top: 24px; }

.buy-row .cart-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  margin: 0;
}

.quantity-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }

.quantity-field input {
  width: 88px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font: inherit;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 860px) {
  .product-detail { grid-template-columns: 1fr; }
}

/* --- Rückmeldung nach einer Aktion --- */
.shop-flash {
  margin: 0 0 32px;
  padding: 14px 20px;
  border-radius: 12px;
  background: var(--ml-yellow);
  color: #241F00;
  font-weight: 700;
}

.shop-flash--error {
  background: #FDE7E4;
  color: #7A1F14;
  border: 1px solid #F0B7AE;
}

/* --- Warenkorb und Kasse --- */
.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: clamp(32px, 5vw, 56px);
  align-items: start;
}

@media (max-width: 900px) {
  .cart-layout { grid-template-columns: 1fr; }
}

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

.cart-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
  border-top: 1px solid var(--border);
}

.cart-row:first-child { border-top: 0; padding-top: 0; }
.cr-art { border-radius: 10px; overflow: hidden; }
.cr-art .product-art { aspect-ratio: 1; padding: 8px; gap: 2px; }
.cr-art .product-art::after { inset: 6px; }
.cr-art .pa-value { font-size: 15px; }
.cr-art .pa-brand { display: none; }
.cr-text h3 { margin: 0 0 4px; font-size: 17px; }
.cr-text h3 a { color: inherit; text-decoration: none; }
.cr-text h3 a:hover { text-decoration: underline; }
.cr-text .meta { margin: 0; }

.cr-quantity input {
  width: 76px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.cr-sum { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.cr-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.cr-remove:hover { background: var(--surface); color: var(--text); }
.cr-remove svg { width: 18px; height: 18px; }

@media (max-width: 640px) {
  .cart-row {
    grid-template-columns: 72px minmax(0, 1fr) auto;
    grid-template-areas: "bild text weg" "bild menge summe";
    row-gap: 12px;
  }
  .cr-art { grid-area: bild; }
  .cr-text { grid-area: text; }
  .cr-quantity { grid-area: menge; }
  .cr-sum { grid-area: summe; text-align: right; align-self: center; }
  .cr-remove { grid-area: weg; }
}

.cart-summary {
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  position: sticky;
  top: calc(var(--header-h) + 24px);
}

.cs-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin: 0 0 8px;
  font-variant-numeric: tabular-nums;
}

.cs-row strong { font-size: 20px; }

.sum-list { list-style: none; margin: 0 0 12px; padding: 0; font-variant-numeric: tabular-nums; }

.sum-list li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  font-size: 15px;
}

.sum-list .sum-total {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 19px;
  font-weight: 800;
}

.empty-block { padding: 32px 0 64px; }
.empty-block .btn { margin-top: 16px; }

/* --- Kasse --- */
/* min-width: 0 ist hier Pflicht: ein fieldset bekommt vom Browser eine
   Mindestbreite nach seinem Inhalt, die sich nur so abschalten lässt. Ohne
   sie schiebt das Formular auf schmalen Geräten die ganze Seite nach rechts. */
.checkout-fields fieldset { margin: 0 0 40px; padding: 0; border: 0; min-width: 0; }
.cart-layout > * { min-width: 0; }
.checkout-fields legend { margin-bottom: 16px; padding: 0; }

.choice-group { display: flex; flex-direction: column; gap: 12px; }

.choice-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .18s ease;
}

.choice-card:hover { border-color: var(--ml-blue); }
.choice-card:has(input:checked) { border-color: var(--ml-blue); box-shadow: inset 0 0 0 1px var(--ml-blue); }
.cc-text { display: flex; flex-direction: column; gap: 2px; }
.cc-text .meta { margin: 0; }
.cc-price { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.consent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-size: 14px;
  line-height: 1.5;
}

.consent input { margin-top: 3px; }

input[aria-invalid="true"] { border-color: #C2381F; }

/* --- Bestellbestätigung und Konto --- */
.order-box {
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
}

.order-number { margin: 0 0 24px; font-size: 17px; }

.account-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.account-name { margin: 4px 0 0; font-size: 22px; font-weight: 700; }
.account-head .meta { margin: 2px 0 0; }

.panel-form {
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
}

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

.order-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--border);
}

.order-list li:first-child { border-top: 0; }
.order-list .meta { display: block; margin: 2px 0 0; }
.ol-sum { font-weight: 700; font-variant-numeric: tabular-nums; }

/* --- Zahlung & Versand --- */
.info-list dl { margin: 0; }
.info-line { padding: 20px 0; border-top: 1px solid var(--border); }
.info-line:first-child { border-top: 0; padding-top: 0; }
.info-line dt { font-weight: 700; font-size: 17px; }
.info-line dd { margin: 4px 0 0; color: var(--text-muted); }
.info-price { font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* --- Muster-Widerrufsformular --- */
.withdrawal-sample {
  margin: 24px 0 0;
  padding: 24px 28px;
  border-left: 3px solid var(--ml-blue);
  background: var(--surface);
  border-radius: 0 12px 12px 0;
}

.withdrawal-sample p { margin: 0 0 14px; }
.withdrawal-sample p:last-child { margin-bottom: 0; }

/* --- Kleinigkeiten --- */
.btn--block { display: flex; width: 100%; justify-content: center; }
.btn--sm { padding: 10px 18px; font-size: 15px; }
.page-hero--flat { padding-bottom: 0; }
.field--wide { grid-column: 1 / -1; }

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

/* =========================================================================
   37. Lange Adressen in Rechtstexten
   -------------------------------------------------------------------------
   E-Mail-Adressen und URLs sind ein Wort und schieben die Seite auf dem
   Handy sonst nach rechts.
   ========================================================================= */
.legal a,
.legal code,
.withdrawal-sample { overflow-wrap: anywhere; }

/* =========================================================================
   38. Lange Wörter in Überschriften
   -------------------------------------------------------------------------
   „Allgemeine Geschäftsbedingungen“ passt bei 390 Pixeln in keine Zeile.
   Deutsche Komposita sind hier die Regel, nicht die Ausnahme – deshalb
   trennen Überschriften notfalls, statt die Seite breiter zu machen.
   ========================================================================= */
h1, h2, h3, .h3, .h4 {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* =========================================================================
   39. Linksbündige Textspalte
   -------------------------------------------------------------------------
   .container--narrow zentriert eine schmalere Spalte – dadurch beginnt der
   Text weiter rechts als die Überschrift darüber. Wo beides auf derselben
   Kante stehen soll, steht .text-column im normalen Container.
   ========================================================================= */
.text-column { max-width: 780px; }

/* =========================================================================
   40. Hero-Video
   -------------------------------------------------------------------------
   Der Knopf ist keine Zierde: bewegte Inhalte, die von allein starten und
   länger als fünf Sekunden laufen, müssen sich anhalten lassen.
   ========================================================================= */
.hero-video { background: var(--ml-blue-deep); }

.video-toggle {
  position: absolute;
  right: var(--gutter);
  bottom: 24px;
  /* über .bleed-content (z-index 2), sonst kommt kein Klick durch */
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 254, 252, .45);
  border-radius: 999px;
  background: rgba(1, 42, 88, .55);
  color: var(--ml-white);
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background-color .18s ease, border-color .18s ease;
}

.video-toggle:hover {
  background: rgba(1, 42, 88, .8);
  border-color: var(--ml-white);
}

.video-toggle svg { width: 20px; height: 20px; display: block; }
.video-toggle .vs-play { display: none; }
.video-toggle.is-paused .vs-pause { display: none; }
.video-toggle.is-paused .vs-play { display: block; }

@media (max-width: 700px) {
  .video-toggle { width: 40px; height: 40px; bottom: 16px; }
}

/* Die erste Gruppe schließt direkt an den Seitenkopf an, erst ab der
   zweiten braucht es Abstand zur vorigen. */
.shop-group--first { margin-top: 0; }

/* =========================================================================
   41. Shop-Übersicht ruhiger
   -------------------------------------------------------------------------
   Vorher standen über dem ersten Produkt drei Textblöcke und ein farbiger
   Kasten. Jetzt trägt eine gedämpfte Zeile im Seitenkopf die beiden Fakten,
   und in der Kachel stehen Preis und Knopf nebeneinander statt gestapelt.
   ========================================================================= */
.hero-note {
  margin: var(--s-16) 0 0;
  max-width: 56ch;
  font-size: 15px;
  color: var(--text-muted);
}

.product-card { gap: 14px; }
.pc-text { gap: 6px; }

.pc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin-top: 6px;
}

.pc-foot .cart-form { margin: 0; }
.pc-foot .product-price { white-space: nowrap; }

/* Bei schmalen Kacheln bricht die Zeile um, statt den Knopf zu quetschen. */
@media (max-width: 420px) {
  .pc-foot { flex-wrap: wrap; }
}

/* =========================================================================
   42. Produktseite
   -------------------------------------------------------------------------
   Das Mengenfeld war kaum als Feld zu erkennen – heller Rahmen auf weißem
   Grund. Es hat jetzt dieselbe Höhe wie der Knopf daneben und einen
   sichtbaren Rand.
   ========================================================================= */
.buy-row .cart-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  margin: 0;
}

.quantity-field,
.option-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.quantity-field input,
.option-field select {
  height: 52px;
  padding: 0 14px;
  border: 1px solid var(--text-muted);
  border-radius: 12px;
  background: var(--ml-white);
  font: inherit;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.quantity-field input { width: 96px; }
.option-field select { min-width: 140px; }

.quantity-field input:hover,
.option-field select:hover { border-color: var(--ml-blue); }

.buy-row .btn { height: 52px; }

/* Kategorie über dem Produktnamen ist ein Weg zurück in die Liste. */
.pd-text .eyebrow a {
  color: inherit;
  text-decoration: none;
}

.pd-text .eyebrow a:hover { text-decoration: underline; }

/* Längere Beschreibungen – Material, Pflege, was später dazukommt. */
.product-section { margin-top: var(--s-32); }
.product-section h2 { margin: 0 0 8px; }

/* Getroffene Auswahl in der Warenkorbzeile */
.cr-choice {
  margin: 0 0 4px;
  font-size: 14px;
  color: var(--text-muted);
}

/* =========================================================================
   43. Kasse im Fokusmodus
   -------------------------------------------------------------------------
   Kopf- und Fußzeile sind hier auf das Nötige reduziert. Jeder Menüpunkt
   auf dieser Seite ist eine Gelegenheit, die Bestellung nicht abzuschließen
   – der einzige Weg hinaus führt deshalb zurück in den Warenkorb.
   ========================================================================= */
.checkout-head {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ml-blue);
  border-bottom: 1px solid rgba(255, 254, 252, .14);
}

.checkout-head-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-16);
  min-height: 76px;
}

.checkout-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
  padding: 8px 12px 8px 6px;
  border-radius: var(--r-sm);
  color: var(--ml-white);
  font-weight: 600;
  text-decoration: none;
}

.checkout-back:hover { background: rgba(255, 254, 252, .14); }
.checkout-back svg { width: 20px; height: 20px; flex: none; }

.checkout-brand { justify-self: center; display: flex; }
.checkout-brand img { height: 54px; width: auto; }

.checkout-secure {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: end;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 254, 252, .86);
}

.checkout-secure svg { width: 18px; height: 18px; flex: none; }

@media (max-width: 700px) {
  .checkout-head-inner { min-height: 64px; }
  .checkout-brand img { height: 40px; }
  .checkout-secure span { display: none; }
  .checkout-back span { display: none; }
}

/* --- Schrittanzeige --- */
.steps {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.steps-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-16) var(--s-32);
  list-style: none;
  margin: 0;
  padding: var(--s-24) 0;
}

.step {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-muted);
}

.step a { color: inherit; text-decoration: none; }
.step a:hover { text-decoration: underline; }

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.step--done { color: var(--text); }
.step--done .step-number { border-color: var(--text-muted); }

.step--active { color: var(--ml-blue); }
.step--active .step-number {
  border-color: var(--ml-blue);
  background: var(--ml-blue);
  color: var(--ml-white);
}

/* Die Linie ist ein eigenes Listenelement und dehnt sich zwischen den
   Schritten aus – als ::before am Schritt hing sie schief im Abstand. */
/* Die Linien zeigen den Fortschritt: erledigt ist blau, offen bleibt grau. */
.step-line {
  flex: 1 1 24px;
  max-width: 72px;
  height: 2px;
  border-radius: 2px;
  background: var(--border);
}

.step-line--done { background: var(--ml-blue); }

/* Auf schmalen Bildschirmen passen drei Beschriftungen nicht in eine Zeile.
   Statt umzubrechen – wobei eine Linie ins Leere zeigte – bleibt nur die
   Beschriftung des aktuellen Schritts stehen. Für Vorlesewerkzeuge sind die
   übrigen weiterhin da, nur nicht sichtbar. */
@media (max-width: 620px) {
  .steps-list { gap: 8px; }
  .step { font-size: 14px; gap: 8px; }
  .step-line { flex-basis: 8px; max-width: 40px; }

  .step:not(.step--active) .step-label {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* --- Reduzierte Fußzeile --- */
.checkout-foot {
  margin-top: var(--s-64);
  padding-block: var(--s-32);
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.checkout-foot-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-16) var(--s-32);
  font-size: 14px;
  color: var(--text-muted);
}

.checkout-foot-inner p { margin: 0; }

.checkout-foot-inner ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-16) var(--s-24);
  list-style: none;
  margin: 0;
  padding: 0;
}

.checkout-foot-inner a { color: var(--text-muted); }
.checkout-foot-inner a:hover { color: var(--text); }

/* Kleiner Hinweis unter einem Formularfeld */
.field-hint {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}

/* „(freiwillig)“ hinter einer Feldbeschriftung. Umgekehrt zur üblichen
   Sternchen-Logik: Im Widerrufsformular soll sichtbar sein, wie wenig man
   wirklich ausfüllen muss. */
.field-optional {
  font-weight: 400;
  color: var(--text-muted);
}

/* Honigtopf gegen Bots. Nicht display:none – das erkennen bessere Bots und
   lassen das Feld dann leer. So steht es im Seitenfluss, nur außerhalb des
   sichtbaren Bereichs. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* =========================================================================
   44. Konto-Seiten
   -------------------------------------------------------------------------
   Anmelden, Registrieren und Passwort zurücksetzen liegen auf eigenen
   Seiten. Neben dem Formular steht, wofür ein Konto überhaupt gut ist –
   und der Hinweis, dass es für eine Bestellung nicht nötig ist.
   ========================================================================= */
.account-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 380px);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
  max-width: 1020px;
}

@media (max-width: 900px) {
  .account-layout { grid-template-columns: 1fr; }
}

.panel-foot {
  margin: var(--s-16) 0 0;
  font-size: 15px;
}

.panel-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: var(--s-24) 0 0;
  padding-top: var(--s-24);
  border-top: 1px solid var(--border);
  font-size: 15px;
  color: var(--text-muted);
}

.account-benefits {
  padding: var(--s-32);
  border-radius: var(--r-lg);
  background: var(--surface-blue);
}

.account-benefits h2 { margin: 0 0 var(--s-16); }
.account-benefits .check-list { margin: 0; }
.account-benefits .meta { margin-bottom: 0; }

/* =========================================================================
   45. Bestellbestätigung
   ========================================================================= */
.done-head {
  display: flex;
  align-items: flex-start;
  gap: var(--s-24);
  margin-bottom: var(--s-32);
}

.done-head h1 { margin: 0 0 8px; }

.done-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--ml-blue);
  color: var(--ml-white);
}

.done-check svg { width: 28px; height: 28px; }

@media (max-width: 560px) {
  .done-head { gap: var(--s-16); }
  .done-check { width: 44px; height: 44px; }
  .done-check svg { width: 22px; height: 22px; }
}

.order-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-24);
  margin: 0;
  padding: var(--s-24) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.order-facts dt {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.order-facts dd { margin: 6px 0 0; overflow-wrap: anywhere; }
.order-facts strong { font-size: 18px; }

.flow-list {
  counter-reset: ablauf;
  list-style: none;
  margin: 0;
  padding: 0;
}

.flow-list li {
  position: relative;
  padding-left: 44px;
  margin-bottom: var(--s-16);
  color: var(--text-secondary);
}

.flow-list li::before {
  counter-increment: ablauf;
  content: counter(ablauf);
  position: absolute;
  left: 0;
  top: -2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--surface-blue);
  color: var(--ml-blue);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.order-address {
  font-style: normal;
  line-height: 1.8;
  color: var(--text-secondary);
}

/* =========================================================================
   46. Formularfelder mit Auswahlkästchen und Passwort
   -------------------------------------------------------------------------
   Ein Kästchen ist kein Textfeld: die Regeln für .field input haben ihm
   48 Pixel Mindesthöhe und Innenabstand verpasst, dadurch saß der Haken
   tiefer als sein Text.
   ========================================================================= */
.field input[type="checkbox"],
.field input[type="radio"] {
  width: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.field .consent { font-weight: 400; }

.password-field { position: relative; display: block; }
.password-field input { width: 100%; padding-right: 56px; }

.password-eye {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.password-eye:hover { background: var(--surface); color: var(--text); }
.password-eye svg { width: 20px; height: 20px; }
.password-eye .eye-closed { display: none; }
.password-eye.is-revealed .eye-open { display: none; }
.password-eye.is-revealed .eye-closed { display: block; }

/* --- Passwortregeln --- */
.password-rules {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.password-rules li { position: relative; padding-left: 18px; }

.password-rules li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 1px solid currentColor;
}

.password-rules .is-missing { color: #C2381F; font-weight: 600; }
.password-rules .is-met { color: #1B6B4A; }
.password-rules .is-met::before { background: currentColor; border-color: currentColor; }


/* =========================================================================
   VORSCHAU-HUB — vor dem öffentlichen Start ersatzlos löschen
   =========================================================================
   Gehört zu uebersicht.php, einer internen Wegweiserseite für die Abnahme.
   Beides zusammen löschen: diese Datei bis zum Ende ab dieser Zeile, und
   uebersicht.php. Von der Website hängt nichts davon ab – kein Selektor
   dieses Blocks kommt außerhalb von uebersicht.php vor, alle tragen das
   Präfix hub-.

   Die Seite bindet zwar dieses Stylesheet ein, nutzt vom übrigen Bestand
   aber nur .container, .sr-only und die Farb- und Abstandsvariablen.
   Sie hat bewusst weder Kopf- noch Fußzeile der Website: Wer sie öffnet,
   soll sofort sehen, dass er nicht auf der fertigen Seite ist.
   ========================================================================= */

.hub-page {
  background: var(--ml-white);
  color: var(--text);
}

/* --- Warnbalken ---------------------------------------------------------- */
.hub-warning {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ml-yellow);
  color: #3B2F00;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  padding: 10px var(--s-24);
  text-align: center;
  border-bottom: 2px solid var(--ml-yellow-dark);
}

/* --- Kopf ---------------------------------------------------------------- */
.hub-head {
  padding: var(--s-64) 0 var(--s-48);
  border-bottom: 1px solid var(--border);
}

/* Das Logo ist weiß und gelb auf durchsichtigem Grund – auf der Website steht
   es im blauen Header. Hier bekommt es seine blaue Fläche selbst, sonst wäre
   die Hälfte davon unsichtbar. */
.hub-logo {
  display: block;
  width: 260px;
  max-width: 70%;
  height: auto;
  margin-bottom: var(--s-32);
  padding: var(--s-16) var(--s-24);
  background: var(--ml-blue);
  border-radius: var(--r-md);
  box-sizing: content-box;
}

.hub-head h1 {
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.15;
  margin: 0 0 var(--s-24);
  color: var(--ml-blue);
}

.hub-intro {
  max-width: var(--measure);
  font-size: 18px;
  line-height: 1.65;
  color: var(--text-secondary);
}

.hub-intro p { margin: 0 0 var(--s-16); }
.hub-intro p:last-child { margin-bottom: 0; }
.hub-intro strong { color: var(--text); }

/* --- Liste --------------------------------------------------------------- */
.hub-list {
  list-style: none;
  margin: 0;
  padding: var(--s-64) 0 var(--s-96);
}

.hub-item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: var(--s-24);
  padding: var(--s-32) 0;
  border-bottom: 1px solid var(--border);
}

.hub-item:first-child { padding-top: 0; }
.hub-item:last-child { border-bottom: 0; }

.hub-number {
  grid-row: span 3;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ml-blue);
  color: var(--ml-white);
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

.hub-title {
  margin: 0;
  font-size: 22px;
  line-height: 1.3;
  align-self: center;
}

.hub-title a {
  color: var(--ml-blue);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: var(--ml-yellow);
}

.hub-title a:hover { text-decoration-color: var(--ml-blue); }

.hub-what {
  margin: var(--s-16) 0 0;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: var(--measure);
}

.hub-open {
  margin: var(--s-16) 0 0;
}

.hub-open a {
  display: inline-block;
  padding: 10px var(--s-24);
  background: var(--ml-blue);
  color: var(--ml-white);
  border-radius: var(--r-sm);
  font-weight: 600;
  text-decoration: none;
}

.hub-open a:hover { background: var(--ml-blue-dark); }

/* --- Schmale Bildschirme ------------------------------------------------- */
@media (max-width: 640px) {
  .hub-item {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-8);
  }
  .hub-number {
    grid-row: auto;
    width: 42px;
    height: 42px;
    font-size: 17px;
    margin-bottom: var(--s-8);
  }
  .hub-title { font-size: 20px; }
  .hub-head { padding-top: var(--s-48); }
  .hub-list { padding: var(--s-48) 0; }
}