/* ============================================================
   MaisMaze – Layout CSS
   Struktur:
   1) Fonts
   2) Design Tokens (Farben, Abstände, Größen)
   3) Reset & Base
   4) Typografie
   5) Layout-Container & Grids (inkl. Container Queries)
   6) Header, Navigation, Drawer (Mobile)
   7) Buttons
   8) Hero
   9) Cards
   10) FAQ
   11) Footer
   12) Cookies (Option B)
   13) Utilities
   14) Links im Fließtext
   15) Formulare & Inputs
   16) Tabellen
   17) Badges, Label, Kachelüberschriften
   18) Responsive Feinheiten
   ============================================================ */


/* 1) Fonts */
/* (Beispiel: Lato + Display-Font für Headlines) */
@font-face{
  font-family:'CreepyGirl';
  src:local('CreepyGirl');
  font-display:swap;
}

/* 2) Design Tokens */
:root{
  /* Primärfarben */
  --mm-rot:#CC0000;
  --mm-weiss:#FFFFFF;
  --mm-text:#B3B3B3;
  --mm-hintergrund:#0F0F0F;
  --mm-kacheln:#161616;
  --mm-rahmen:#222222;

  /* Sekundärfarben (Reihenfolge wie besprochen) */
  --mm-gruen:#008542;
  --mm-gelb:#996600;
  --mm-orange:#CC4400;
  --mm-lila:#6600CC;
  --mm-blau:#0066CC;

  /* Akzent & Neutrale */
  --mm-gold:#8C6B00;
  --mm-anthrazit:#4E5258;
  --mm-schatten:rgba(0,0,0,.6);

  /* Hintergründe gestuft (dunkel → weniger dunkel) */
  --bg-0:#050505;
  --bg-1:#0F0F0F;
  --bg-2:#141414;
  --bg-3:#181818;

  /* Success / Warn / Info */
  --color-success:#148F55;
  --color-warn:#D98E04;
  --color-danger:#B00020;
  --color-info:#2386E6;

  /* Layout-Container */
  --container:1120px;
  --container-wide:1320px;
  --container-pad:1rem;

  /* Typografie-Baseline */
  --font-base:16px;
  --font-scale:1.12;
  --leading:1.6;

  /* Radius */
  --radius:16px;

  /* Spacing Scale */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;

  /* Logo */
  --logo-h-desktop:48px;
  --logo-h-mobile:32px;
}


/* 3) Reset & Base */
*{ box-sizing:border-box }
html,body{ height:100% }
html{ scroll-behavior:smooth }
body{
  margin:0; background:var(--mm-hintergrund); color:var(--mm-text);
  font-family:'Lato',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji",
  "Segoe UI Emoji";
  line-height:var(--leading); -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
:focus-visible{ outline:2px solid var(--mm-rot); outline-offset:2px }

main{ display:block; }

/* Hilfswrapper für Seitenaufbau (optional) */
.page{
  min-height:100vh; display:flex; flex-direction:column;
}
.page__main{
  flex:1 0 auto;
  padding: var(--space-2) var(--space-2) var(--space-5); /* Grundabstand für alle Seiten */
}


/* 4) Typografie */
h1,h2,h3,h4{
  font-family:'Oswald','Gloucester MT Extra Condensed',Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
  margin:0 0 var(--space-4);
}
h1{ font-size:clamp(2rem,4vw,3rem); letter-spacing:.5px; text-wrap:balance }
h2{ font-size:clamp(1.5rem,2.8vw,2.25rem); text-wrap:balance }
h3{ font-size:clamp(1.25rem,2.2vw,1.5rem) }
p{ margin:0 0 var(--space-4); text-wrap:pretty; hyphens:auto }
main p{ max-width:65ch } /* angenehme Zeilenlänge */


/* 5) Layout-Container & Grids */
.container{
  width:min(calc(100% - 2 * var(--container-pad)), var(--container));
  margin-inline:auto;
  container-type:inline-size; /* erlaubt @container queries */
}
.container--wide{
  width:min(calc(100% - 2 * var(--container-pad)), var(--container-wide));
  margin-inline:auto;
  container-type:inline-size;
}

.section{
  padding:var(--space-7) 0;
}
.section--tight{
  padding:var(--space-5) 0;
}

.grid{
  display:grid; gap:var(--space-5);
}
@media (min-width:768px){
  .grid--2{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .grid--3{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}


/* 6) Header, Navigation, Drawer */
.header{
  position:sticky; top:0; z-index:100;
  backdrop-filter:saturate(180%) blur(8px);
  background:rgba(15,15,15,.8);
  border-bottom:1px solid var(--mm-rahmen);
}
.header__bar{ display:flex; align-items:center; justify-content:space-between; padding:.6rem 0 }
.logo{ display:flex; gap:.75rem; align-items:center }
.logo__img{ height:var(--logo-h-desktop); width:auto; display:block }
@media (max-width:900px){ .logo__img{ height:var(--logo-h-mobile) } }

.nav{ display:flex; gap:1rem; align-items:center }
.nav a{ padding:.5rem .75rem; border-radius:10px; color:#ddd }
.nav a[aria-current="page"], .nav a:hover{ background:#1c1c1c; color:#fff }

.header__meta{
  display:flex; align-items:center; gap:.75rem;
  font-size:.85rem; color:#aaa;
}
.header__meta-item{ display:flex; align-items:center; gap:.25rem }

/* Mobile Navigation / Drawer Trigger */
.hr{ margin:.5rem 0 }

/* Hamburger */
#nav-toggle{ display:none }
.hamburger{
  display:inline-flex; align-items:center; justify-content:center; flex-direction:column;
  gap:4px; width:48px; height:48px;
  background:var(--mm-rot); border:1px solid #a80000; border-radius:10px; padding:0; cursor:pointer;
}
.hamburger:hover{ filter:brightness(1.08) }
.hamburger span{
  display:block; height:2px; width:22px; background:#fff; border-radius:1px; transition:transform .2s ease, opacity .2s ease;
}
.hamburger.open span:nth-child(1){ transform:translateY(6px) rotate(45deg) }
.hamburger.open span:nth-child(2){ opacity:0 }
.hamburger.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg) }
@media (max-width:900px){
  .nav{ display:none }
  #nav-toggle{ display:inline-flex }
}

/* Drawer */
.drawer{
  position:fixed; inset:0; z-index:90; display:none;
}
.drawer.open{ display:block }
.drawer__backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.6);
}
.drawer__panel{
  position:absolute; inset:auto 0 0 0;
  background:#111; border-top:1px solid var(--mm-rahmen);
  border-radius:20px 20px 0 0;
  padding:1rem 1rem 1.5rem; max-height:80vh; overflow:auto;
  box-shadow:0 -20px 40px rgba(0,0,0,.75);
}
.drawer__header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:1rem;
}
.drawer__title{
  font-family:'Oswald',system-ui,sans-serif;
  text-transform:uppercase; letter-spacing:.12em; font-size:.85rem; color:#bbb;
}
.drawer__close{
  width:36px; height:36px; border-radius:999px;
  border:1px solid var(--mm-rahmen); background:#181818;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
}
.drawer__nav{
  display:flex; flex-direction:column; gap:.25rem;
}
.drawer__nav a{
  padding:.65rem .75rem; border-radius:12px; color:#ddd;
  display:flex; align-items:center; justify-content:space-between;
}
.drawer__nav a span:first-child{ display:flex; align-items:center; gap:.5rem }
.drawer__nav a[aria-current="page"], .drawer__nav a:hover{
  background:#1b1b1b; color:#fff;
}


/* 7) Buttons */
button, input, select, textarea { font: inherit; line-height: inherit; color: inherit; }
button{ -webkit-appearance:none; appearance:none; background:transparent; border:0; }
.button{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-size:1rem; line-height:1.15; min-height:44px;
  padding:.65rem 1rem; border-radius:12px;
  border:1px solid var(--mm-rahmen); background:#1a1a1a; color:#fff;
  cursor:pointer; transition:background .2s ease, filter .2s ease;
}
a.button{ text-decoration:none }
.button:focus-visible,
.icon-button:focus-visible{
  outline:2px solid var(--mm-rot);
  outline-offset:2px;
}
.button:hover{ filter:brightness(1.08) }

.button--primary{
  background:var(--mm-rot); border-color:#a80000;
}
.button--primary:hover{
  filter:brightness(1.05);
}
/* Secondary (Dunkelgrau) – Crew */
.button--secondary{
  background:var(--mm-kacheln);
  border-color:var(--mm-rahmen);
  color:#fff;
}
.button--secondary:hover{
  filter:brightness(1.06);
}
.button--sm{
  min-height:36px; padding:.4rem .75rem; font-size:.9rem;
}
.button--full{
  width:100%; justify-content:center;
}

/* Icon-Only Button */
.icon-button{
  width:40px; height:40px; border-radius:999px; display:inline-flex;
  align-items:center; justify-content:center; background:#181818; border:1px solid var(--mm-rahmen);
}

/* ------------------------------------------------------------
   Button-Icons & Responsive Text-Collapse
   - Ein Button-Typ (primary/secondary) + optionale Icon-Slots
   - Auf Wunsch kann der Text auf Mobile „visuell“ ausgeblendet werden
   ------------------------------------------------------------ */

/* Icon + Text Aufbau (BEM) */
.button__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}

/* Standard Icon-Größe */
.button__icon svg,
.button__icon img{
  width:18px;
  height:18px;
  display:block;
}
.button__icon{
  color:currentColor;
}
.button__icon img{
  filter:brightness(0) invert(1);
}
.button__icon svg{
  fill:currentColor;
  stroke:currentColor;
}

/* Kleine Buttons: Icon etwas kleiner */
.button--sm .button__icon svg,
.button--sm .button__icon img{
  width:16px;
  height:16px;
}

/* Text-Span für Buttons (für Collapse-Funktion) */
.button__text{
  display:inline-block;
  white-space:nowrap;
}

/* Nur Icon (fixe Breite) – z.B. für reine Icon-Buttons */
.button--icon-only{
  padding:0;
  width:44px;
  justify-content:center;
  gap:0;
}
.button--icon-only .button__text{
  display:none;
}

/* small + icon-only (z.B. Tabellen-Aktionen) */
.button--sm.button--icon-only{
  width:36px;
}

/*
  Responsive: Text nur visuell ausblenden (bleibt für Screenreader vorhanden).
  Aktiviert durch Klasse .button--collapse-text
*/
@media (max-width: 576px){
  .button--collapse-text{
    padding:0;
    width:44px;
    justify-content:center;
    gap:0;
  }

  .button--sm.button--collapse-text{
    width:36px;
  }

  .button--collapse-text .button__text{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
    border:0 !important;
  }
}


/* 8) Hero */
.hero{
  padding:var(--space-7) 0 var(--space-6);
}
.hero__inner{
  display:grid; gap:var(--space-6);
}
@container (min-width:768px){
  .hero__inner{ grid-template-columns:minmax(0,2.1fr) minmax(0,1.4fr) }
}
.hero__eyebrow{ font-size:.8rem; letter-spacing:.12rem; text-transform:uppercase; color:#bbb }
.hero__title{ margin-top:.5rem }
.hero__lead{ max-width:60ch }


/* 9) Cards */
.card{
  background:#121212; border:1px solid var(--mm-rahmen);
  border-radius:var(--radius); overflow:clip;
  box-shadow:0 0 0 1px rgba(255,255,255,.02) inset;
}
.card__body{
  padding:var(--space-5);
}
.card__kicker{
  font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:#aaa;
  margin-bottom:.35rem;
}
.card__title{
  margin-bottom:.5rem;
}
.card__text{
  margin-bottom:0;
}
.card--accent{
  border-color:var(--mm-rot); box-shadow:0 0 0 1px rgba(204,0,0,.35);
}
.card--soft{
  background:radial-gradient(circle at top,#1f1b1b,#111);
}
.card__footer{
  padding:0 var(--space-5) var(--space-5);
  border-top:1px solid rgba(255,255,255,.04);
}


/* 10) FAQ */
.faq{
  border-radius:var(--radius); border:1px solid var(--mm-rahmen);
  background:#131313;
}
.faq__item + .faq__item{
  border-top:1px solid var(--mm-rahmen);
}
.faq__button{
  width:100%; padding:1rem 1.1rem;
  display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem;
  background:transparent; border:0; color:inherit; text-align:left; cursor:pointer;
}
.faq__icon{
  width:22px; height:22px; border-radius:999px;
  border:1px solid var(--mm-rahmen); display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0; margin-top:.15rem; font-size:.9rem;
}
.faq__question{
  font-weight:600; margin:0;
}
.faq__answer{
  padding:0 1.1rem 1rem 3.1rem; font-size:.95rem; color:#d0d0d0;
}


/* 11) Footer */
.footer{ background:#0c0c0c; border-top:1px solid var(--mm-rahmen); padding:var(--space-6) 0; color:#aaa }
.footer a{ color:#ddd }
.footer__cols{ display:grid; gap:1rem; grid-template-columns:1fr auto }


/* 12) Cookies (Option B) */
.cookie{
  position:fixed; inset:auto 1rem 1rem 1rem; z-index:999;
  background:#121212; color:#eee; border:1px solid var(--mm-rahmen); border-radius:14px; padding:1rem;
  display:none; box-shadow:0 20px 40px rgba(0,0,0,.4);
}
.cookie__actions{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.75rem }
.cookie__link{ text-decoration:underline; text-underline-offset:2px; color:#bbb }
.cookie__panel{ display:none; background:#0f0f0f; border:1px solid var(--mm-rahmen); border-radius:10px; padding:.75rem; margin-top:.75rem }
.cookie__switch{ display:flex; align-items:center; justify-content:space-between; padding:.4rem 0 }


/* 13) Utilities */
.muted{ color:#9aa0a6 }
.kicker{ color:#bbb; text-transform:uppercase; letter-spacing:.14em; font-size:.75rem }
.hr{ height:1px; background:var(--mm-rahmen); margin:var(--space-6) 0 }
.shadow{ box-shadow:0 12px 30px rgba(0,0,0,.25) }

.lead{
  font-size:1.05rem; color:#d0d0d0;
}
.chip{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.2rem .55rem; border-radius:999px;
  border:1px solid var(--mm-rahmen); background:#151515; font-size:.8rem; color:#ccc;
}
.chip__dot{
  width:8px; height:8px; border-radius:999px; background:var(--color-success);
}


/* 14) Links im Fließtext (nur Text dunkler, kein Hintergrund) */
.prose a{
  color:#f2f2f2; text-decoration:underline; text-underline-offset:3px;
}
.prose a:hover{
  color:#fff;
}


/* 15) Formulare & Inputs */
.field{
  display:flex; flex-direction:column; gap:.35rem; margin-bottom:1rem;
}
.field__label{
  font-size:.9rem; color:#ccc; display:flex; align-items:center; gap:.35rem;
}
.field__hint{
  font-size:.8rem; color:#999;
}
.field__error{
  font-size:.8rem; color:#ff9999;
}
.input, .select, .textarea{
  width:100%; min-height:44px; padding:.6rem .75rem;
  border-radius:12px; border:1px solid var(--mm-rahmen);
  background:#111; color:#f5f5f5;
}
.select{
  height:44px;
}
.input:focus-visible, .select:focus-visible, .textarea:focus-visible{
  outline:2px solid var(--mm-rot); outline-offset:2px; border-color:#a80000;
}
.textarea{
  min-height:120px; resize:vertical;
}
.checkbox-row{
  display:flex; align-items:center; gap:.5rem; font-size:.9rem;
}
.checkbox-row input[type="checkbox"]{
  width:18px; height:18px; border-radius:4px;
}
.toggle{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  cursor:pointer;
  user-select:none;
}
.toggle input[type="checkbox"]{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
}
.toggle__track{
  width:46px;
  height:26px;
  border-radius:999px;
  background:#1b1b1b;
  border:1px solid var(--mm-rahmen);
  position:relative;
  transition:background .2s ease, border-color .2s ease;
}
.toggle__thumb{
  width:20px;
  height:20px;
  border-radius:50%;
  background:#fff;
  position:absolute;
  top:2px;
  left:2px;
  transition:transform .2s ease;
}
.toggle input[type="checkbox"]:checked + .toggle__track{
  background:var(--mm-rot);
  border-color:#a80000;
}
.toggle input[type="checkbox"]:checked + .toggle__track .toggle__thumb{
  transform:translateX(20px);
}
.toggle__text{
  font-size:.9rem;
  color:#ddd;
}


/* 16) Tabellen */
.table-wrap{
  width:100%; overflow:auto; border-radius:14px; border:1px solid var(--mm-rahmen);
}
table{
  border-collapse:collapse; width:100%; min-width:520px; font-size:.9rem;
}
th, td{
  padding:.6rem .75rem; text-align:left;
}
thead{
  background:#151515; color:#ddd;
}
tbody tr:nth-child(even){
  background:#101010;
}
tbody tr:nth-child(odd){
  background:#0c0c0c;
}
tbody tr:hover{
  background:#181818;
}
th{
  font-weight:600; font-size:.85rem; text-transform:uppercase; letter-spacing:.08em;
}

/* 16b) Termine-Items (Zebra wie Tabellen) */
.termine-item{
  display:grid;
  gap:.2rem;
  padding:.75rem .9rem;
  border-radius:10px;
  border:1px solid var(--mm-rahmen);
}
.termine-item:nth-child(odd){
  background:#0c0c0c;
}
.termine-item:nth-child(even){
  background:#101010;
}


/* 17) Badges, Label, Kachelüberschriften */
.badge{
  display:inline-flex; align-items:center; gap:.3rem;
  border-radius:999px; padding:.2rem .55rem; font-size:.75rem;
  border:1px solid var(--mm-rahmen); background:#171717; color:#ddd;
}
.badge--green{ border-color:var(--color-success); color:#b8f5d4 }
.badge--yellow{ border-color:var(--color-warn); color:#ffe4a6 }
.badge--red{ border-color:var(--color-danger); color:#ffc0c0 }

.tile-title{
  font-family:'Oswald',system-ui,sans-serif;
  text-transform:uppercase; letter-spacing:.14em; font-size:.85rem; color:#bbb;
}
.tile-title + h2{
  margin-top:.4rem;
}


/* 18) Responsive Feinheiten */
@media (max-width:768px){
  .section{
    padding:var(--space-6) 0;
  }
  .header__bar{
    padding:.45rem 0;
  }
  .card__body{
    padding:var(--space-4);
  }
}

/* “Nach oben” Button */
.to-top{
  position:fixed; right:1rem; bottom:1rem; z-index:98;
  width:44px; height:44px; border-radius:12px;
  background:var(--mm-rot); border:1px solid #a80000; color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  opacity:0; pointer-events:none; transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease, filter .2s ease;
}
.to-top.is-visible{
  opacity:1; pointer-events:auto; transform:translateY(0);
}
.to-top svg{ width:18px; height:18px; display:block }


/* ============================================================
   20) CREW – Mobile Header & Footer-Navigation
   - Header dauerhaft fixiert
   - Logo links, Profil-Icon (Geist/Kürbis-Platzhalter) rechts
   - Footer als Bottom-Navigation mit 4 Menüpunkten:
     Start, Crew, Einsatz, Mehr
   - Starke Mobile-Optimierung
   ============================================================ */

/* 20.1) Zusätzliche Layout-Variablen für Crew-Ansicht */
:root{
  --header-h-mobile: 60px;
  --footer-h-mobile: 64px;
}

/* etwas mehr Luft auf größeren Geräten */
@media (min-width: 768px){
  :root{
    --header-h-mobile: 70px;
    --footer-h-mobile: 70px;
  }
}

/* Platz für fixen Header + Footer schaffen */
body{
  padding-top: var(--header-h-mobile);
  /* Footer-Höhe + zusätzlicher Abstand, damit nichts vom Footer überdeckt wirkt */
  padding-bottom: calc(var(--footer-h-mobile) + var(--space-4));
}

/* Cookie-Hinweis und "Nach-oben"-Button über Footer platzieren */
.cookie{
  bottom: calc(var(--footer-h-mobile) + 1rem);
}

.to-top{
  bottom: calc(var(--footer-h-mobile) + .75rem);
}

/* 20.2) Header – dauerhaft fixiert mit Profil-Icon rechts */

.header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 110;
  backdrop-filter: saturate(180%) blur(10px);
  background: rgba(15,15,15,.92);
}

/* Leicht kompakter, für Mobile optimiert */
.header__bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .35rem 0;
  min-height: var(--header-h-mobile);
}

/* Optional: Wrapper für linke Seite (Logo + evtl. Titel) */
.header__left{
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}

/* Logo bleibt links, nur geringfügig kleiner auf sehr kleinen Screens */
.logo__img{
  height: var(--logo-h-mobile);
}

/* Logo-Block mit Subline "CREWPORTAL" unter dem Logo */
.logo__block{
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
}

.logo__subline{
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-top: 0.15rem;
  color: var(--mm-text);
  opacity: 0.9;
}

@media (min-width: 480px){
  .logo__img{
    height: 40px;
  }
}


/* Rechte Seite: Platz für Profil-Icon + ggf. Burger-Menü */
.header__right{
  display: flex;
  align-items: center;
  gap: .35rem;
}

/* Profil-Icon (Geist/Kürbis Platzhalter) rechts im Header */
.header__profile{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--mm-rahmen);
  background: #1c1c1c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem; /* z.B. 👻 oder 🎃 */
  flex-shrink: 0;
  cursor: pointer;
}

.header__profile img{
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

/* Mobile: klassische Hauptnavigation ist im Crew-Bereich optional,
   da der Fokus auf der Bottom-Navigation liegt */
@media (max-width: 900px){
  .nav{
    display: none;
  }

  #nav-toggle{
    display: inline-flex;
  }
}

/* 20.3) Footer als fixierte Bottom-Navigation */

.footer{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 105;
  background: #101010;
  border-top: 1px solid var(--mm-rahmen);
  padding: 0;        /* alte Innenabstände entfernen */
  color: #ccc;
}

/* Alte Footer-Spalten im Crew-Bereich ausblenden (falls vorhanden) */
.footer__cols{
  display: none;
}

/* Container für die 4 Menüpunkte: Start, Crew, Einsatz, Mehr */
.footer__nav{
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  height: var(--footer-h-mobile);
}

/* Jedes Item nimmt gleich viel Platz ein */
.footer__nav-item{
  flex: 1;
  min-width: 0;
}

/* Klickfläche: ganze Flughöhe des Buttons */
.footer__nav-button{
  width: 100%;
  height: 100%;
  padding: .25rem 0 .2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  border: 0;
  background: transparent;
  color: #ccc;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  cursor: pointer;
}

/* Icon über Label – Icons kannst du als Emoji oder SVG setzen */
.footer__nav-icon{
  font-size: 1.3rem;
  line-height: 1;
}

/* Label etwas kompakter, gute Lesbarkeit auf kleineren Screens */
.footer__nav-label{
  line-height: 1.2;
}

/* Hover- und Active-State */
.footer__nav-button:hover{
  background: #151515;
  color: #f5f5f5;
}

/* "Aktiver" Menüpunkt (z.B. mit aria-current="page" oder zusätzlicher Klasse) */
.footer__nav-button[aria-current="page"],
.footer__nav-button--active{
  background: #181818;
  color: var(--mm-weiss);
  box-shadow: 0 -2px 0 var(--mm-rot) inset;
}

/* 20.4) "Mehr" öffnet Crew-Menü (nur Styling – JS muss separat kommen) */

/* Das 4. Item ("Mehr") kann eine eigene Klasse bekommen */
.footer__nav-item--more .footer__nav-button{
  position: relative;
}

/* Overlay für das erweiterte Crew-Menü */
.crew-menu{
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(0,0,0,.7);
  display: none; /* über JS mit .open sichtbar machen */
}

/* Sichtbar, wenn JS die Klasse "open" ergänzt */
.crew-menu.open{
  display: block;
}

/* Panel, das direkt über der Bottom-Navigation liegt */
.crew-menu__panel{
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--footer-h-mobile);
  background: #111;
  border-top: 1px solid var(--mm-rahmen);
  box-shadow: 0 -12px 35px rgba(0,0,0,.8);
  padding: 1rem;
  max-height: 60vh;
  overflow-y: auto;
}

/* Einträge im Mehr-Menü */
.crew-menu__list{
  list-style: none;
  margin: 0;
  padding: 0;
}

.crew-menu__item + .crew-menu__item{
  margin-top: .5rem;
}

.crew-menu__link{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .65rem .75rem;
  border-radius: 10px;
  background: #151515;
  border: 1px solid var(--mm-rahmen);
  color: #ddd;
  font-size: .9rem;
}

.crew-menu__link:hover{
  background: #1b1b1b;
  color: #fff;
}

/* 20.5) Kleine Mobile-Verfeinerungen für Content im Crew-Bereich */

/* im Crew-Bereich volle Breite nutzen */
main p{
  max-width: 100%;
}

/* Karten etwas enger zusammenrücken auf kleinen Screens */
@media (max-width: 480px){
  .section{
    padding: var(--space-5) 0;
  }
  .card__body{
    padding: var(--space-4);
  }
}

/* Tabellen im Crew-Kontext: Scrollbar deutlicher anzeigen */
.table-wrap{
  scrollbar-width: thin;
}