/* ============================================================
   MaisMaze – Zentrales Stylesheet (/assets/maismaze.css)
   ------------------------------------------------------------
   Konsolidiert / aufgeräumt:
   - Public: sticky Header, normaler Footer (static)
   - Crew: fixed Header/Footer via body.is-crew + Bottom-Navigation
   - Cookie + ToTop stoppen vor Footer (Public & Crew)
   ============================================================ */

/* ------------------------------------------------------------
   1) Fonts
   ------------------------------------------------------------ */
@font-face{
  font-family:'CreepyGirl';
  src:local('CreepyGirl');
  font-display:swap;
}

/* ------------------------------------------------------------
   2) Design Tokens
   ------------------------------------------------------------ */
:root{
  /* Primaerfarben */
  --mm-rot:#CC0000;
  --mm-weiss:#FFFFFF;
  --mm-text:#B3B3B3;
  --mm-hintergrund:#0F0F0F;
  --mm-hintergrund-dunkel:#050505;
  --mm-kacheln:#161616;
  --mm-rahmen:#222222;
  --mm-hintergrund-rot:#330000;

  /* Sekundaerfarben */
  --mm-gruen:#008542;
  --mm-gelb:#996600;
  --mm-lila:#6600CC;
  --mm-blau:#0066CC;
  --mm-kacheln-dunkel:#121212;
  --mm-rahmen-dunkel:#1A1A1A;

  /* Akzent & Neutrale */
  --mm-kacheln-rot:#4A0000;
  --mm-rahmen-rot:#660000;
  --mm-anthrazit:#4E5258;
  --mm-schatten:rgba(0,0,0,.6);

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

  /* Abschnittsverlaeufe */
  --mm-rot-dunkel:#2b000a;
  --mm-rot-tief:#180008;

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

  /* Typo */
  --leading:1.6;

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

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

  /* Glass */
  --glass-blur:10px;
  --glass-border:rgba(255,255,255,.10);
  --glass-border-strong:rgba(255,255,255,.14);
  --glass-shadow:0 30px 90px rgba(0,0,0,.55);
  --glass-inset:0 0 0 1px rgba(255,255,255,.03) inset;

  /* Crew Header/Footer Maße */
  --header-h-mobile:60px;
  --footer-h-mobile:64px;
  --logo-h-mobile:32px;
  --logo-h-desktop:48px;

  /* Public Footer-„Sperrzone“ für Cookie/ToTop (damit nichts überdeckt) */
  --footer-h-public:28px;
}

@media (min-width:768px){
  :root{
    --header-h-mobile:70px;
    --footer-h-mobile:70px;
    --footer-h-public:30px;
  }
}

/* ------------------------------------------------------------
   3) Reset & Base
   ------------------------------------------------------------ */
*,
*::before,
*::after{ 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;
  overflow-x:hidden;

  /* Default: KEIN Platzhalter (Public scrollt normal) */
  padding-top:0;
  padding-bottom:0;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

:focus-visible{
  outline:2px solid var(--mm-rot);
  outline-offset:2px;
}

.page__main{ padding:var(--space-2) var(--space-2) var(--space-5); }

/* ------------------------------------------------------------
   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; }

.muted{ color:#9aa0a6; }
.kicker{ color:#bbb; text-transform:uppercase; letter-spacing:.14em; font-size:.75rem; }
.lead{ font-size:1.05rem; color:#d0d0d0; }

.hr{ height:1px; background:var(--mm-rahmen); margin:var(--space-6) 0; }

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

.section{
  padding:var(--space-7) 0;
  position:relative;
}
.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) Buttons (inkl. Icon-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;
  min-height:44px;
  padding:.65rem 1rem;
  border-radius:var(--radius-sm);
  border:1px solid var(--mm-rahmen);
  background:#1a1a1a;
  color:#fff;
  font-size:1rem;
  line-height:1.15;
  cursor:pointer;
  transition:filter .2s ease, background .2s ease;
}
a.button{ text-decoration:none; }
.button:hover{ filter:brightness(1.08); }

.button--primary{ background:var(--mm-rot); border-color:#a80000; }
.button--secondary{ background:var(--mm-kacheln); border-color:var(--mm-rahmen); }
.button--special{ background:var(--mm-gelb); border-color:#7b5500; }
.button--special-violet{ background:var(--mm-lila); border-color:#45008a; }
.button--sm{ min-height:36px; padding:.4rem .75rem; font-size:.9rem; }

/* Action-Icons */
.action-icon{ width:16px; height:16px; vertical-align:-3px; margin-right:.45rem; }
.action-icon--only{ margin-right:0; vertical-align:middle; }
.button .action-icon,
.button .action-icon--only{ filter:brightness(0) invert(1); }

/* ------------------------------------------------------------
   7) Cards / Kacheln
   ------------------------------------------------------------ */
.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__title{ margin:0 0 .35rem; }
.card__meta{ color:#9aa0a6; font-size:.9rem; }

.toolbar-card{ background:var(--mm-kacheln); }

/* Glass Varianten */
.card--glass{
  position:relative;
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow), var(--glass-inset);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
}
.card--glass-dark{ background:rgba(0,0,0,.55); }
.card--glass-red{
  background:
    radial-gradient(900px 420px at 30% 10%, rgba(204,0,0,.30) 0%, rgba(0,0,0,0) 62%),
    linear-gradient(135deg, rgba(204,0,0,.14) 0%, rgba(0,0,0,.55) 100%);
}
.card--glass-violet{
  background:
    radial-gradient(900px 420px at 30% 10%, rgba(123,44,255,.42) 0%, rgba(0,0,0,0) 62%),
    radial-gradient(900px 520px at 80% 40%, rgba(11,60,255,.26) 0%, rgba(0,0,0,0) 68%),
    linear-gradient(135deg, rgba(106,0,255,.20) 0%, rgba(11,60,255,.14) 45%, rgba(0,0,0,.55) 100%);
}
.card--glass-gray{
  background:
    radial-gradient(900px 420px at 35% 15%, rgba(255,255,255,.08) 0%, rgba(0,0,0,0) 62%),
    linear-gradient(135deg, rgba(22,22,22,.70) 0%, rgba(0,0,0,.55) 100%);
}

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

/* ------------------------------------------------------------
   8) Abschnittsverlaeufe (A–C)
   ------------------------------------------------------------ */
.section--gradient{ isolation:isolate; }
.section--gradient::before{
  content:"";
  position:absolute;
  inset:-2px 0;
  z-index:-1;
  pointer-events:none;
  filter:saturate(115%) contrast(110%);
}
.section--gradient-red::before{
  background-image:
    radial-gradient(900px 650px at 30% 10%, rgba(204,0,0,.28) 0%, rgba(0,0,0,0) 62%),
    linear-gradient(180deg, var(--mm-rot-dunkel) 0%, var(--mm-rot-tief) 55%, var(--mm-hintergrund) 100%);
}
.section--gradient-blue::before{
  background-image:
    radial-gradient(900px 700px at 70% 25%, rgba(0,102,204,.20) 0%, rgba(0,0,0,0) 68%),
    linear-gradient(180deg, #05001a 0%, #070022 55%, var(--mm-hintergrund) 100%);
}
.section--gradient-gray::before{
  background-image:
    radial-gradient(900px 650px at 40% 10%, rgba(255,255,255,.06) 0%, rgba(0,0,0,0) 62%),
    linear-gradient(180deg, var(--mm-kacheln) 0%, #131313 55%, var(--mm-hintergrund) 100%);
  filter:saturate(105%) contrast(105%);
}

/* Solid Hintergruende */
.section--solid-red{ background:var(--mm-hintergrund-rot); }
.section--solid-bg{ background:var(--mm-hintergrund); }
.section--solid-dark{ background:var(--mm-hintergrund-dunkel); }

/* Divider */
.mm-divider--red{
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(204,0,0,0), rgba(204,0,0,0.95) 20%, rgba(204,0,0,0.95) 80%, rgba(204,0,0,0));
  box-shadow:0 0 0 6px rgba(204,0,0,0.10);
}

/* Full-bleed helper */
.full-bleed-section{
  margin-left:calc(-1 * var(--space-2));
  margin-right:calc(-1 * var(--space-2));
  padding-left:var(--space-2);
  padding-right:var(--space-2);
}
.full-bleed-section--top{
  margin-top:calc(-1 * var(--space-2));
  padding-top:calc(var(--space-7) + var(--space-2));
}

/* ------------------------------------------------------------
   9) Toolbar (D)
   ------------------------------------------------------------ */
.toolbar{
  display:flex;
  align-items:flex-end;
  gap:.6rem;
  flex-wrap:wrap;
}
.toolbar__search{ flex:1 1 320px; min-width:240px; }
.toolbar__filters{ flex:0 1 260px; min-width:220px; }
.toolbar__actions{
  flex:0 0 auto;
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
}
.toolbar__help{ display:block; margin-top:.35rem; font-size:.8rem; color:#999; }

.toolbar__row{
  display:flex;
  gap:.6rem;
  align-items:flex-end;
  flex-wrap:wrap;
}
.toolbar__row .toolbar__search{ flex:1 1 420px; min-width:240px; }
.toolbar__row .toolbar__actions{ flex:0 0 auto; }

.toolbar__filterbar{
  margin-top:.9rem;
  display:flex;
  gap:.6rem;
  align-items:center;
  flex-wrap:wrap;
}
.toolbar__filterlabel{ color:#cfcfcf; font-size:.9rem; }

/* ------------------------------------------------------------
   10) Formulare & Inputs (E)
   ------------------------------------------------------------ */
.field{
  display:flex;
  flex-direction:column;
  gap:.35rem;
  margin-bottom:1rem;
}
.field label,
.field__label{ font-size:.9rem; color:#ccc; }
.field__hint{ font-size:.78rem; color:#9aa0a6; }

.input,
.select,
.textarea{
  width:100%;
  min-height:44px;
  padding:.6rem .75rem;
  border-radius:var(--radius-sm);
  border:1px solid var(--mm-rahmen);
  background:#111;
  color:#f5f5f5;
}
.select{ height:44px; }
.textarea{ min-height:120px; resize:vertical; }

.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible{
  outline:2px solid var(--mm-rot);
  outline-offset:2px;
  border-color:#a80000;
}

.required{ color:var(--mm-rot); font-weight:700; margin-left:.25rem; }

/* Switch */
.switch{ display:inline-flex; align-items:center; gap:.6rem; cursor:pointer; user-select:none; }
.switch input{ position:absolute; opacity:0; width:1px; height:1px; }
.switch__track{
  width:52px;
  height:30px;
  border-radius:999px;
  background:#1b1b1b;
  border:1px solid var(--mm-rahmen);
  position:relative;
  transition:background .2s ease, border-color .2s ease;
}
.switch__thumb{
  width:24px;
  height:24px;
  border-radius:50%;
  background:#fff;
  position:absolute;
  top:2px;
  left:2px;
  transition:transform .2s ease;
}
.switch input:checked + .switch__track{ background:var(--mm-rot); border-color:#a80000; }
.switch input:checked + .switch__track .switch__thumb{ transform:translateX(22px); }
.switch__label{ font-size:.9rem; color:#ddd; }

/* ------------------------------------------------------------
   11) Notices (F)
   ------------------------------------------------------------ */
.notice{
  background:#121212;
  border:1px solid var(--mm-rahmen);
  border-radius:var(--radius);
  box-shadow:0 0 0 1px rgba(255,255,255,.02) inset;
  padding:var(--space-4) var(--space-5);
}
.notice--success{ border-left:4px solid var(--color-success); }
.notice--danger{ border-left:4px solid #cc4444; }
.notice--warn{ border-left:4px solid var(--color-warn); }
.notice__title{ margin:0 0 .35rem; font-weight:700; color:#fff; }
.notice__text{ margin:0; }

/* ------------------------------------------------------------
   12) Accordion (G)
   ------------------------------------------------------------ */
.accordion{
  border-radius:var(--radius);
  border:1px solid var(--mm-rahmen);
  background:#131313;
  overflow:hidden;
}
.accordion__item + .accordion__item{ border-top:1px solid var(--mm-rahmen); }

.accordion summary{
  list-style:none;
  padding:1rem 1.1rem;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  cursor:pointer;
}
.accordion summary::-webkit-details-marker{ display:none; }

.accordion summary::after{
  content:"+";
  font-size:32px;
  line-height:1;
  color:#e6e6e6;
  margin-top:-2px;
  flex:0 0 auto;
}
.accordion details[open] summary::after{ content:"x"; }

.accordion__q{ font-weight:600; margin:0; }
.accordion__a{ padding:0 1.1rem 1rem 1.1rem; font-size:.95rem; color:#d0d0d0; }

/* ------------------------------------------------------------
   13) Badges
   ------------------------------------------------------------ */
.badge{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.25rem .6rem;
  border-radius:999px;
  font-size:.78rem;
  line-height:1.1;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:#ddd;
}
.badge--green{ border-color:rgba(20,143,85,.55); background:rgba(20,143,85,.14); color:#b8f5d4; }
.badge--yellow{ border-color:rgba(217,142,4,.55); background:rgba(217,142,4,.14); color:#ffe4a6; }
.badge--red{ border-color:rgba(176,0,32,.55); background:rgba(176,0,32,.14); color:#ffc0c0; }
.badge--blue{ border-color:rgba(35,134,230,.55); background:rgba(35,134,230,.14); color:#cfe7ff; }
.badge--ghost{ border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.06); color:#cfcfcf; }

.badge.badge-open{ border-color:rgba(20,143,85,.55); background:rgba(20,143,85,.14); color:#b8f5d4; }
.badge.badge-closed{ border-color:rgba(176,0,32,.55); background:rgba(176,0,32,.14); color:#ffc0c0; }
.badge.badge-stop{ border-color:rgba(217,142,4,.55); background:rgba(217,142,4,.14); color:#ffe4a6; }
.badge.badge-info{ border-color:rgba(35,134,230,.55); background:rgba(35,134,230,.14); color:#cfe7ff; }
.badge.badge-violet{ border-color:rgba(102,0,204,.55); background:rgba(102,0,204,.14); color:#e4cfff; }

/* ------------------------------------------------------------
   14) Tabellen (Styleguide)
   ------------------------------------------------------------ */
.table-wrap{
  width:100%;
  overflow:auto;
  border:1px solid var(--mm-rahmen);
  border-radius:var(--radius);
  background:#121212;
}
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:560px;
}
.table thead th{
  text-align:left;
  font-size:.85rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#d6d6d6;
  padding:.85rem 1rem;
  background:#151515;
  border-bottom:1px solid var(--mm-rahmen);
}
.table tbody td{
  padding:.85rem 1rem;
  border-bottom:1px solid rgba(255,255,255,.06);
  color:#d0d0d0;
  vertical-align:top;
}
.table tbody tr:hover td{ background:rgba(255,255,255,.03); }
.table .status{ white-space:nowrap; }

/* ------------------------------------------------------------
   15) Links im Fliesstext
   ------------------------------------------------------------ */
.prose a,
main a{
  text-decoration:underline;
  text-underline-offset:3px;
}
.prose a:hover,
main a:hover{ color:#fff; }

/* ------------------------------------------------------------
   16) Public Header / Navigation / Drawer
   ------------------------------------------------------------ */
.header{
  position:sticky;
  top:0;
  z-index:100;
  backdrop-filter:saturate(180%) blur(8px);
  background:rgba(15,15,15,.80);
  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__cta{ display:flex; gap:.5rem; align-items:center; }

/* Hamburger */
.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); }

.drawer{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  z-index:140; /* vorher 99 -> jetzt über .header */
}
.drawer.open{ display:block; }
.drawer__panel{
  margin-left:auto;
  width:min(420px, 92vw);
  height:100%;
  background:#0f0f0f;
  border-left:1px solid var(--mm-rahmen);

  /* sauber unter Sticky Header starten */
  padding:calc(var(--header-h-mobile) + 1.25rem) 1.25rem 1.25rem;
}
/* Drawer-Titel: wie Kategorie-Überschrift */
#drawer-title{
  font-family:'Oswald','Gloucester MT Extra Condensed',Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.95rem;
  color:#bbb;
}

@media (max-width:900px){
  .nav{ display:none; }
  #nav-toggle{ display:inline-flex; }
}

.navicon{ display:block; width:30px; height:30px; }
.navicon--spacer{ display:inline-block; width:30px; height:30px; }

/* Anchor-Scrolling: Header-Höhe berücksichtigen */
html{
  scroll-padding-top: var(--header-h-mobile);
}

/* Falls du ein Element mit id="start" hast */
#start{
  scroll-margin-top: var(--header-h-mobile);
}

/* ------------------------------------------------------------
   17) Public Footer
   ------------------------------------------------------------ */
.footer{
  position:static;
  background:#0c0c0c;
  border-top:1px solid var(--mm-rahmen);
  padding:0;
  color:#aaa;
}

.footer a{ color:#ddd; }
.footer nav a:hover{ color:#aaa; }

.footer__cols{
  display:grid;
  gap:.75rem;
  grid-template-columns:1fr auto;
  align-items:center;
  min-height:calc(var(--logo-h-desktop) + 1.2rem);
}
.footer__right{ text-align:right; }
.footer__nav{
  display:flex;
  gap:.75rem;
  justify-content:flex-end;
  flex-wrap:wrap;
}
@media (max-width:900px){
  .footer__cols{ min-height:calc(var(--logo-h-mobile) + 1.2rem); }
}

/* ------------------------------------------------------------
   18) Cookie Banner (Public) + ToTop (Public)
   ------------------------------------------------------------ */
.cookie{
  position:fixed;
  left:1rem;
  right:auto;
  bottom:calc(var(--footer-h-public) + 1rem);
  z-index:999;
  display:none;

  max-width:760px;
  width:min(760px, calc(100% - 2rem));
  margin:0;

  background:#121212;
  color:#eee;
  border:1px solid var(--mm-rahmen);
  border-radius:14px;
  padding:1rem;
  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;
}

.to-top{
  position:fixed;
  right:1rem;
  bottom:calc(var(--footer-h-public) + 1rem);
  z-index:120;

  width:44px;
  height:44px;
  border-radius:999px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  background:rgba(16,16,16,.92);
  border:1px solid var(--mm-rahmen);
  box-shadow:0 14px 40px rgba(0,0,0,.45);

  opacity:0;
  pointer-events:none;
  transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease, filter .2s ease;
}
.to-top.show,
.to-top.is-visible{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}
.to-top:hover{ filter:brightness(1.08); }
.to-top img,
.to-top svg{
  width:18px !important;
  height:18px !important;
  display:block;
  flex:0 0 auto;
}

/* ------------------------------------------------------------
   19) Crew Scope: Fixed Header/Footer NUR mit body.is-crew
   ------------------------------------------------------------ */
body.is-crew{
  padding-top:var(--header-h-mobile);
  padding-bottom:calc(var(--footer-h-mobile) + var(--space-4));
}

body.is-crew .header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:110;
  background:rgba(15,15,15,.92);
  border-bottom:1px solid var(--mm-rahmen);
  backdrop-filter:saturate(180%) blur(10px);
}

body.is-crew .header__bar{
  min-height:var(--header-h-mobile);
  padding:.35rem 0;
}

/* Crew Logo */
body.is-crew .logo__img{ height:var(--logo-h-mobile); width:auto; }
@media (min-width:480px){
  body.is-crew .logo__img{ height:40px; }
}
body.is-crew .logo__block{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
}
body.is-crew .logo__subline{
  font-size:.7rem;
  letter-spacing:.18em;
  margin-top:.15rem;
  text-align:center;
  width:100%;
}

/* Crew Mobile: Desktop-Nav aus, Icon-Nav an */
@media (max-width:900px){
  body.is-crew .nav{ display:none; }
  body.is-crew #nav-toggle{ display:inline-flex; }
}

body.is-crew .header__meta{
  display:none;
  gap:.45rem;
  align-items:center;
}
body.is-crew .icon-button{
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  border:1px solid var(--mm-rahmen);
  background:#151515;
  color:#fff;
}
body.is-crew .icon-button:hover{ filter:brightness(1.08); }
body.is-crew .icon-button img{ width:24px; height:24px; display:block; }
body.is-crew .icon-fallback{ font-size:18px; line-height:1; font-weight:700; }

/* Crew Footer fixed */
body.is-crew .footer{
  position:fixed;
  bottom:0; left:0; right:0;
  z-index:105;
  background:#101010;
  border-top:1px solid var(--mm-rahmen);
  padding:0;
  color:#ccc;
}

/* Crew Bottom-Navigation */
body.is-crew .footer__nav{
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  height:var(--footer-h-mobile);
}
body.is-crew .footer__nav-item{ flex:1; min-width:0; }

body.is-crew .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;
  -webkit-tap-highlight-color:transparent;
}
body.is-crew .footer__nav-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  width:24px;
  height:24px;
}
body.is-crew .footer__nav-icon img{
  width:24px;
  height:24px;
  display:block;
}
body.is-crew .footer__nav-label{
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

body.is-crew .footer__nav-button:hover{
  background:#151515;
  color:#f5f5f5;
}
body.is-crew .footer__nav-button[aria-current="page"],
body.is-crew .footer__nav-button--active{
  background:#181818;
  color:var(--mm-weiss);
  box-shadow:0 -2px 0 var(--mm-rot) inset;
}

/* Crew "Mehr"-Overlay */
body.is-crew .crew-menu{
  position:fixed;
  inset:0;
  z-index:120;
  background:rgba(0,0,0,.7);
  display:none;
}
body.is-crew .crew-menu.open{ display:block; }

body.is-crew .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;
}
body.is-crew .crew-menu .drawer__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
}
body.is-crew .crew-menu .drawer__title{
  margin:0;
  white-space:nowrap;
}
body.is-crew .crew-menu .drawer__close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.75rem;
  height:2.75rem;
  flex:0 0 auto;
  padding:0;
  border:1px solid var(--mm-rahmen);
  border-radius:10px;
  background:#151515;
  color:#f5f5f5;
  font-size:1.5rem;
  line-height:1;
  cursor:pointer;
}
body.is-crew .crew-menu .drawer__close:hover{
  background:#1b1b1b;
}
body.is-crew .crew-menu__list{ list-style:none; margin:0; padding:0; }
body.is-crew .crew-menu__item + .crew-menu__item{ margin-top:.5rem; }
body.is-crew .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;
}
body.is-crew .crew-menu__link:hover{ background:#1b1b1b; color:#fff; }

/* Crew: Cookie + ToTop vor Footer anhalten */
body.is-crew .cookie{
  bottom:calc(var(--footer-h-mobile) + 1rem);
}
body.is-crew .to-top{
  bottom:calc(var(--footer-h-mobile) + .75rem);
}

/* ------------------------------------------------------------
   20) Helpers
   ------------------------------------------------------------ */
.page-end-space{ height:calc(2 * 1.6em); }

.sr-only{
  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;
}

/* ------------------------------------------------------------
   21) Responsive Feinheiten
   ------------------------------------------------------------ */
@media (max-width:768px){
  .section{ padding:var(--space-6) 0; }
  .card__body{ padding:var(--space-4); }
}
@media (max-width:480px){
  main p{ max-width:100%; }
}
@media (prefers-reduced-motion:reduce){
  *{ scroll-behavior:auto !important; }
  .button{ transition:none; }
  .section--gradient::before{ filter:none; }
}

/* RSVP / Rückmelde-Schalter: Absage | Vielleicht | Zusage */
.mm-rsvp{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  overflow:hidden;
  background:rgba(0,0,0,.25);
}

.mm-rsvp__input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.mm-rsvp__btn{
  padding:.7rem .9rem;
  text-align:center;
  font-weight:600;
  cursor:pointer;
  user-select:none;
  transition:filter .15s ease, background-color .15s ease, color .15s ease;
  border-right:1px solid rgba(255,255,255,.10);
}

.mm-rsvp__btn:last-of-type{ border-right:none; }

/* Standard (nicht gewählt) */
.mm-rsvp__btn--absage{ color:#ffb3b3; }
.mm-rsvp__btn--vielleicht{ color:#e6e6e6; }
.mm-rsvp__btn--zusage{ color:#bff5c9; }

/* Gewählt (checked) */
.mm-rsvp__input:checked + .mm-rsvp__btn--absage{
  background:rgba(220,53,69,.22);
  color:#fff;
}
.mm-rsvp__input:checked + .mm-rsvp__btn--vielleicht{
  background:rgba(255,255,255,.10);
  color:#fff;
}
.mm-rsvp__input:checked + .mm-rsvp__btn--zusage{
  background:rgba(25,135,84,.22);
  color:#fff;
}

/* Hover */
.mm-rsvp__btn:hover{ filter:brightness(1.1); }

/* Fokus sichtbar (wenn man per Tab auf die Radio-Inputs kommt) */
.mm-rsvp__input:focus + .mm-rsvp__btn{
  outline:2px solid rgba(204,0,0,.75); /* mm-rot-ish */
  outline-offset:-2px;
}

/* Timeline (Mitglieder) */
.mm-timeline{
  --mm-timeline-gutter:3rem;
  --mm-timeline-line:16px;
  --mm-timeline-line-gap:20px;
  position:relative;
  margin-top:1.5rem;
  padding-left:var(--mm-timeline-gutter);
}
.mm-timeline::before{
  content:"";
  position:absolute;
  left:var(--mm-timeline-line);
  top:var(--mm-timeline-line-gap);
  bottom:var(--mm-timeline-line-gap);
  width:2px;
  background:#ffffff;
  z-index:0;
}
.mm-timeline__item{
  position:relative;
  margin-top:1rem;
}
.mm-timeline__item:first-child{ margin-top:0; }
.mm-timeline__marker{
  position:absolute;
  left:calc(var(--mm-timeline-line) - var(--mm-timeline-gutter));
  top:.35rem;
  transform:translateX(-50%);
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
}
.mm-timeline__marker--burst{
  width:34px;
  height:34px;
}
.mm-timeline__marker::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  background:var(--mm-hintergrund);
  z-index:1;
}
.mm-timeline__icon{
  width:22px;
  height:22px;
  display:block;
  position:relative;
  z-index:2;
  filter:drop-shadow(0 0 4px rgba(255,255,255,.35));
}
.mm-timeline__icon--burst{
  width:28px;
  height:28px;
  filter:drop-shadow(0 0 6px rgba(255,210,130,.55));
}
.mm-timeline__highlight-text{
  padding:.25rem 0 .25rem;
  font-weight:600;
}
.mm-timeline__card{ margin-top:.25rem; }
.mm-timeline__year-title{ margin:.2rem 0 .6rem; }
.mm-timeline__table{ margin-top:.35rem; }
.mm-timeline__entries{ margin-top:.35rem; }
.mm-timeline__entry{
  padding:.6rem 0;
  border-top:1px solid var(--mm-rahmen);
}
.mm-timeline__entry:first-child{ border-top:0; }
.mm-timeline__entry-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:.75rem;
  flex-wrap:wrap;
}
.mm-timeline__entry-content{
  flex:1 1 260px;
  min-width:200px;
}
.mm-timeline__entry-actions{
  flex:0 0 auto;
  display:flex;
  align-items:center;
}
.mm-timeline__entry-line{
  display:flex;
  gap:.65rem;
  flex-wrap:wrap;
  align-items:baseline;
}
.mm-timeline__entry-line--muted{ opacity:.85; }
.mm-timeline__meta{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
}
.mm-timeline__meta-icon{
  width:16px;
  height:16px;
  display:block;
  filter:drop-shadow(0 0 4px rgba(255,255,255,.25));
}
.mm-timeline__role{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
}
.mm-timeline__role-icon{
  width:16px;
  height:16px;
  display:block;
  filter:drop-shadow(0 0 4px rgba(255,255,255,.25));
}
.mm-timeline-summary th{
  text-align:right;
  width:32%;
}

@media (max-width: 576px){
  .mm-timeline{ --mm-timeline-gutter:2.5rem; --mm-timeline-line:12px; --mm-timeline-line-gap:18px; }
}