/* ============================================================
   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) Badges (Status)
   16) Swatches (Farbkacheln)
   17) Tabellen (inkl. Sticky Column, mobil)
   18) Formulare (inkl. States)
   19) Nach-oben-Pfeil
   ============================================================ */


/* 1) Fonts – self-hosted */
@font-face{
  font-family:"Oswald";
  src:url("fonts/oswald-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Oswald";
  src:url("fonts/oswald-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Lato";
  src:url("fonts/lato-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Lato";
  src:url("fonts/lato-700.woff2") format("woff2");
  font-weight:700; font-style:normal; 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;
  --mm-anthrazit:#4E5258;

  /* Badge-Token (allgemein) */
  --mm-badge-gruen: var(--mm-gruen);
  --mm-badge-rot:   var(--mm-rot);
  --mm-badge-gelb:  var(--mm-gelb);
  --mm-badge-blau:  var(--mm-blau);
  --mm-badge-lila:  var(--mm-lila);

  /* Layout */
  --container:1200px;
  --container-pad:1rem;     /* wird auf XS leicht erhöht */
  --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:1.6; -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 }


/* 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 */
}
.section{ padding:var(--space-8) 0 }
.section--alt{ background:linear-gradient(180deg, var(--mm-kacheln), transparent) }

.grid{ display:grid; gap:var(--space-5) }
.grid--3{ grid-template-columns:repeat(3,1fr) }

/* klassische Breakpoints */
@media (max-width:960px){ .grid--3{ grid-template-columns:1fr 1fr } }
@media (max-width:640px){ .grid--3{ grid-template-columns:1fr } }

/* Container Queries (responsiver ohne harte Breakpoints) */
@container (max-width:700px){ .grid--3{ grid-template-columns:1fr 1fr } }
@container (max-width:460px){ .grid--3{ grid-template-columns:1fr } }

/* XS mehr Innenabstand */
@media (max-width:480px){ :root{ --container-pad:1.25rem } }


/* 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__cta{ display:flex; gap:.5rem }

/* Drawer */
.drawer{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:99 }
.drawer.open{ display:block }
.drawer__panel{
  margin-left:auto; width:min(82vw,360px); height:100%;
  background:#121212; border-left:1px solid var(--mm-rahmen);
  padding:1rem; overflow:auto;
}
.drawer__panel nav{ padding-top:.9rem }
.drawer__panel nav a{ display:block; padding:.75rem .5rem; border-radius:10px; color:#ddd }
.drawer__panel nav a:hover{ background:#1e1e1e; color:#fff }
.drawer__panel .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 }
}


/* 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{ outline:2px solid var(--mm-rot); outline-offset:2px }
.button:not(.button--primary):not(.button--secondary):not(.button--special):not(.button--special-violet):hover{ background:#222 }

.button--primary{ background:var(--mm-rot); border-color:#a80000; color:var(--mm-weiss) }
.button--primary:hover{ filter:brightness(1.08) }

.button--secondary{ background:var(--mm-kacheln); border-color:var(--mm-rahmen); color:#fff }
.button--secondary:hover{ filter:brightness(1.05) }

.button--special{ background:var(--mm-gelb); border-color:#5f4400; color:var(--mm-weiss) }
.button--special:hover{ filter:brightness(1.08) }

.button--special-violet{ background:var(--mm-lila); border-color:#3d0099; color:var(--mm-weiss) }
.button--special-violet:hover{ filter:brightness(1.08) }


/* 8) Hero */
.hero{
  padding:clamp(3rem,6vw,6rem) 0;
  background:
    radial-gradient(1200px 400px at 10% -20%, rgba(204,0,0,.22), transparent),
    radial-gradient(900px 360px at 100% 0%, rgba(90,58,142,.22), transparent),
    linear-gradient(180deg, #0d0d0d, #0f0f0f);
}
.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__media{ position:relative; aspect-ratio:16 / 9; background:linear-gradient(135deg, #222, #101010); overflow:hidden; display:block }
.card__media img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block }
.card__media .media-ph{ color:#777; font-weight:700; letter-spacing:.08em; display:grid; place-items:center; height:100% }
.card__body{ padding:var(--space-5) }
.card__title{ margin-bottom:.25rem }
.card__meta{ color:#9aa0a6; font-size:.9rem }


/* 10) FAQ */
details{ background:#121212; border:1px solid var(--mm-rahmen); border-radius:12px; padding:.75rem 1rem }
details + details{ margin-top:.75rem }
summary{ cursor:pointer; font-weight:600 }
details[open]{ background:#141414 }


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


/* 14) Links im Fließtext (nur Text dunkler, kein Hintergrund) */
main a:not(.button):not(.nav a):not(.logo):not(.cookie__link):not(#nav-toggle){
  text-decoration:underline; text-underline-offset:2px; color:#ddd; transition:color .2s ease;
}
main a:not(.button):not(.nav a):not(.logo):not(.cookie__link):not(#nav-toggle):hover{ color:#aaa }
.footer nav a:hover{ color:#aaa }


/* 15) Badges (Status) */
.status .badge{
  display:inline-block; padding:.25em .6em; border-radius:.5rem; font-weight:700; color:#fff;
}
.status .badge-open{   background:var(--mm-badge-gruen) }
.status .badge-closed{ background:var(--mm-badge-rot) }
.status .badge-stop{   background:var(--mm-badge-gelb) }
.status .badge-info{   background:var(--mm-badge-blau) }
.status .badge-violet{ background:var(--mm-badge-lila) }


/* 16) Swatches (Farbkacheln) */
.swatches{ display:grid; gap:var(--space-4); grid-template-columns:repeat(auto-fit,minmax(160px,1fr)) }
.swatch{ border:1px solid var(--mm-rahmen); border-radius:12px; overflow:hidden; background:#111 }
.swatch__chip{ height:84px; background:var(--color)!important }
.swatch__meta{ padding:.6rem .75rem }


/* 17) Tabellen (mobil + sticky) */
.table-wrap{ overflow:auto; -webkit-overflow-scrolling:touch; border-radius:12px }
.table{ width:100%; border-collapse:collapse; font-size:.95rem; min-width:640px }
.table thead th{
  text-align:left; color:var(--mm-weiss); background:var(--mm-rahmen);
  position:sticky; top:0; z-index:2;
}
.table th,.table td{ padding:.65rem .75rem; border-bottom:1px solid var(--mm-rahmen) }
.table tbody tr:nth-child(odd){ background:var(--mm-kacheln) }
.table tbody tr:nth-child(even){ background:#151515 }
.table tbody tr:hover{ background:#1d1d1d }

/* Sticky erste Spalte */
.table td:first-child, .table th:first-child{
  position:sticky; left:0; z-index:3; background:#141414;
}


/* 18) Formulare (inkl. States) */
.form{ display:grid; gap:1rem; max-width:720px }
.field{ display:grid; gap:.35rem }
.field label{ font-weight:600 }
.field input,.field select,.field textarea{
  background:var(--mm-kacheln); border:1px solid var(--mm-rahmen); color:var(--mm-weiss);
  border-radius:10px; padding:.6rem .75rem;
}
.field input::placeholder,.field textarea::placeholder{ color:var(--mm-text) }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:2px solid var(--mm-rot); border-color:var(--mm-rot);
}
/* Fehler & Disabled */
.field :is(input,select,textarea):user-invalid{ border-color:#c43; outline-color:#c43 }
.field :is(input,select,textarea):disabled{ opacity:.6; cursor:not-allowed }
/* Speziell: Datenschutz-Label normalgewichtig */
.field label[for="datenschutz_ok"]{ font-weight:400 }


/* 19) Nach-oben-Pfeil */
.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:hover{ filter:brightness(1.08) }
.to-top.show{ opacity:1; pointer-events:auto; transform:translateY(0) }
.to-top svg{ width:18px; height:18px; display:block }


/* 20) Filmstrip (laufende Galerie) */
.filmstrip{ overflow:hidden; position:relative }
.filmstrip__track{ display:flex; gap:.25rem; align-items:center; will-change:transform; animation:filmstrip-scroll var(--t, 40s) linear infinite }
.filmstrip:hover .filmstrip__track{ animation-play-state:paused }
.filmstrip__item{ flex:0 0 auto; margin:0 }
.filmstrip__item img{ display:block; height:440px; width:auto; border-radius:.35rem }
@media (max-width:600px){ .filmstrip__item img{ height:320px } }
@media (prefers-reduced-motion: reduce){ .filmstrip__track{ animation:none } }
@keyframes filmstrip-scroll{ to{ transform:translateX(-50%) } }


/* 21) Grids – Sonderaufteilung für Event-Karten (Desktop) */
@media (min-width: 900px){
  .grid--3-split-3-2-3{ grid-template-columns: 3fr 2fr 3fr; }
}