/* =========================================================================
   Stash & Sound — Halloween Session · 31.10.26 · Luna Kiel
   dist/styles.css — Editorial Club-Landing, nach design/halloween-mockup-v2.png
   Kein Framework, kein Build.
   ========================================================================= */

:root{
  /* Farben */
  --void:#080808;
  --void-2:#0d0c0c;
  --anth:#111010;
  --anth-2:#151414;
  --cream:#f5efdf;
  --cream-2:#d5cdba;
  --dim:#8d867a;
  --ember:#ff7a18;
  --ember-soft:#ffb066;
  --hashy:#e3121b;
  --ok:#8cc63f;

  /* Linien */
  --line:rgba(245,239,223,.13);
  --line-soft:rgba(245,239,223,.08);
  --line-strong:rgba(245,239,223,.28);

  /* Typo */
  --display:"Archivo","Archivo Black","Arial Black","Helvetica Neue",Arial,sans-serif;
  --body:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* Maße */
  --shell-max:1600px;
  --gutter:clamp(18px,5.86vw,94px);
  --bar-h:78px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--void);
  color:var(--cream);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}

::selection{ background:var(--ember); color:#140c08; }

img{ max-width:100%; height:auto; }

a{ color:inherit; }

.dim{ color:var(--dim); }

/* Sichtbare Fokus-Stile überall */
:focus-visible{
  outline:2px solid var(--ember);
  outline-offset:3px;
}
:focus:not(:focus-visible){ outline:none; }

.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:200;
  padding:12px 18px;
  background:var(--ember);
  color:#140c08;
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
}
.skip-link:focus{ left:12px; top:12px; }

.shell{
  width:100%;
  max-width:var(--shell-max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ============================ TOP BAR ============================ */
.topbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:80;
  background:linear-gradient(180deg,rgba(8,8,8,.74) 0%,rgba(8,8,8,.54) 62%,rgba(8,8,8,.40) 100%);
  backdrop-filter:blur(9px) saturate(1.08);
  -webkit-backdrop-filter:blur(9px) saturate(1.08);
  border-bottom:1px solid rgba(245,239,223,.10);
  transition:background .3s ease,border-color .3s ease;
}
.topbar.is-solid{
  background:rgba(8,8,8,.93);
  border-bottom-color:rgba(245,239,223,.14);
}
.topbar-inner{
  min-height:var(--bar-h);
  display:grid;
  grid-template-columns:1fr auto 1fr;   /* Wortmarke links · Navigation mittig · CTA rechts */
  align-items:center;
  gap:clamp(16px,3vw,40px);
}

/* --- Wortmarke: bestehendes JPG, per CSS beschnitten und freigestellt ---
   Der schwarze Hintergrund des JPGs wird über eine Luminanz-Maske
   transparent; als Rückfallebene blendet der Screen-Modus den Rest weg. */
.brand{
  display:flex;
  align-items:center;
  text-decoration:none;
  flex:0 0 auto;
}
.brand-mark{
  position:relative;
  display:block;
  width:112px;
  aspect-ratio:993/504;
  overflow:hidden;
}
.brand-mark img{
  position:absolute;
  left:-6.04%;      /* beschneidet auf die weiße Wortmarke (60..1052 / 301..804) */
  top:-59.72%;
  width:111.78%;
  max-width:none;   /* sonst begrenzt die globale img-Regel den Ausschnitt */
  height:auto;
  display:block;
  mix-blend-mode:screen;
  -webkit-mask-image:url("assets/logo.jpg");
  mask-image:url("assets/logo.jpg");
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  mask-mode:luminance;
}

.topnav{
  display:flex;
  gap:clamp(20px,2.6vw,38px);
  justify-self:center;
}
.topnav a{
  position:relative;
  font-size:15px;
  font-weight:500;
  letter-spacing:.01em;
  color:rgba(245,239,223,.92);
  text-decoration:none;
  padding:6px 0;
  transition:color .18s ease;
}
.topnav a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .22s ease;
}
.topnav a:hover{ color:var(--ember-soft); }
.topnav a:hover::after{ transform:scaleX(1); }

.topbar-cta{
  flex:0 0 auto;
  justify-self:end;
  padding:.8em 1.35em;
  font-size:14px;
}

@media (max-width:860px){
  .topbar-inner{ grid-template-columns:1fr auto; }
  .topnav{ display:none; }
  .topbar-cta{ justify-self:end; }
}
@media (max-width:420px){
  .brand-mark{ width:88px; }
  .topbar-cta{ padding:.72em 1.1em; font-size:13px; }
}

/* ============================ BUTTONS ============================ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55em;
  padding:.95em 1.7em;
  border:1px solid transparent;
  border-radius:999px;
  font-family:var(--body);
  font-weight:600;
  font-size:clamp(15px,1.1vw,17px);
  line-height:1;
  letter-spacing:.01em;
  text-decoration:none;
  cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .12s ease,box-shadow .18s ease;
}
.btn-primary{
  background:var(--cream);
  color:#140c08;
  box-shadow:0 14px 34px rgba(0,0,0,.38);
}
.btn-primary:hover{ background:#fffaf0; }
.btn-primary:active{ transform:translateY(1px); }
.btn-outline{
  border-color:rgba(245,239,223,.72);
  color:var(--cream);
  background:transparent;
}
.btn-outline:hover{
  border-color:var(--cream);
  background:rgba(245,239,223,.12);
}
.btn-arrow{ display:inline-block; transition:transform .18s ease; }
.btn:hover .btn-arrow{ transform:translate(2px,-2px); }

/* ============================ HERO ============================ */
.hero{
  position:relative;
  isolation:isolate;
  display:flex;
  min-height:clamp(520px,58vw,1180px);
  overflow:hidden;
  background:#0b0607;
}
.hero-media{
  position:absolute;
  inset:0;
  z-index:-1;
  overflow:hidden;
}
.hero-media picture{
  display:block;
  width:100%;
  height:100%;
}
/* Standbild und Loop teilen exakt dieselbe Box und denselben Crop —
   kein Sprung und kein Layoutshift beim Wechsel Standbild -> Loop.
   Bewusst KEIN Zeiger-Transform: die Kamera bleibt stabil. */
.hero-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 0%;
}
/* Lesbarkeits-Verlauf: links abgedunkelt, unten leicht abgesoftet. */
.hero-scrim{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(6,4,6,.74) 0%,rgba(6,4,6,.44) 26%,rgba(6,4,6,.12) 48%,rgba(6,4,6,0) 62%),
    linear-gradient(180deg,rgba(6,4,6,.42) 0%,rgba(6,4,6,0) 18%,rgba(6,4,6,0) 58%,rgba(6,4,6,.58) 100%);
}
.hero-inner{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:28px;
  padding-top:calc(var(--bar-h) + 64px);
  padding-bottom:30px;
}

.hero-copy{ max-width:min(100%,66vw,1180px); }

.eyebrow{
  margin:0;
  font-size:clamp(10px,.78vw,13px);
  font-weight:500;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:rgba(245,239,223,.84);
}

.hero-title{
  margin:8px 0 0;
  font-family:var(--display);
  font-weight:900;
  font-stretch:87.5%;
  font-size:clamp(46px,10.6vw,166px);
  line-height:.77;
  letter-spacing:-.012em;
  text-transform:uppercase;
  color:var(--cream);
}
.hero-title .line{
  display:block;
  width:max-content;
  white-space:nowrap;
}

.hero-sponsor{
  margin:22px 0 0;
  font-size:clamp(10px,.78vw,13px);
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:rgba(245,239,223,.74);
}
.hero-sponsor b{ color:var(--cream); font-weight:700; }

.hero-when{ margin-top:44px; }
.when-date,
.when-place{
  margin:0;
  font-family:var(--display);
  font-weight:800;
  font-stretch:87.5%;
  font-size:clamp(30px,2.86vw,44px);
  line-height:1.02;
  letter-spacing:.004em;
  color:var(--cream);
}
.when-day{
  margin:6px 0 0;
  font-size:clamp(15px,1.45vw,22px);
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--cream-2);
}
.when-place{ margin-top:2px; text-transform:uppercase; }

.hero-lede{
  margin:10px 0 0;
  font-size:clamp(16px,1.35vw,21px);
  color:var(--cream-2);
}

.hero-actions{ margin-top:22px; }
/* Haupt-CTA im Hero: 270 x 52 px mit 20 px Text (Mockup). */
.hero-actions .btn{
  min-width:270px;
  padding:16px 30px;
  font-size:20px;
}

.hero-note{
  margin:14px 0 0;
  font-size:clamp(10px,.76vw,12px);
  font-weight:500;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:rgba(245,239,223,.72);
}

/* Mobile Ergänzungen: die Adresse im Infoblock und die Einlass-Notiz sind
   nur auf dem Telefon sichtbar. Auf Desktop trägt der Facts-Block der
   Nacht-Sektion dieselben Angaben — keine Dopplung. */
.when-address,
.mobile-entry-note{ display:none; }

/* Dekorative Icons (Kalender, Ort, Info-Zeichen): global ausgeblendet,
   nur in der mobilen Ebene sichtbar. */
.mobile-only{ display:none; }

/* Ebenfalls nur mobil: die abweichenden Schreibweisen (vierstelliges Jahr,
   die Chips im Infoblock, der kurze Hinweis- und Ledetext). Die
   Desktop-Fassung bleibt die sichtbare Variante.
   Der Hinweisblock blendet ueber .notice-box .notice-short aus: diese
   Regel ist specificitaetsstarker als .notice-box p und laesst den
   Desktop-Wortlaut deshalb unangetastet sichtbar. */
.year-long,
.mobile-flags,
.lede-short,
.notice-box .notice-short{ display:none; }

.hero-strip{
  display:flex;
  align-items:center;
  gap:clamp(14px,2.2vw,32px);
}
.strip-rule{
  flex:1 1 auto;
  height:1px;
  background:rgba(245,239,223,.30);
}
.strip-text{
  margin:0;
  font-size:clamp(10px,.78vw,12px);
  font-weight:500;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:rgba(245,239,223,.88);
  white-space:nowrap;
}

/* ============================ SEKTIONEN ============================ */
.section-title{
  margin:0;
  font-family:var(--display);
  font-weight:900;
  font-stretch:87.5%;
  font-size:clamp(36px,5.6vw,86px);
  line-height:.94;
  letter-spacing:-.008em;
  text-transform:uppercase;
  color:var(--cream);
  /* Deutsche Komposita wie "Tagesmitgliedschaft" sind breiter als jede Spalte.
     Hyphenation trennt sie an der Silbengrenze ("Tagesmitglied-schaft"), die
     break-word-Regel ist die harte Garantie, dass nie horizontal überläuft. */
  hyphens:auto;
  overflow-wrap:break-word;
}
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:20px 32px;
}
.section-meta{
  display:flex;
  align-items:center;
  gap:16px;
  margin:0;
  font-size:clamp(10px,.76vw,12px);
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--cream-2);
  white-space:nowrap;
}
.meta-rule{
  width:clamp(40px,7vw,120px);
  height:1px;
  background:rgba(245,239,223,.38);
}

/* --- Die Nacht gehört uns ---
   Kein zweites Bild: links der kurze Einstieg, rechts die Fakten als flache
   Spalten mit duennen Linien. */
.nacht{
  padding:clamp(54px,7vw,108px) 0 clamp(56px,7.6vw,118px);
  background:var(--void);
}
/* Diese Überschrift bleibt ruhiger als die Hero-Schrift. */
.nacht .section-title{ font-size:clamp(32px,3.4vw,56px); }
.nacht-grid{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(28px,4vw,72px);
  align-items:start;
  margin-top:clamp(30px,4vw,62px);
}

.nacht-lede{
  margin:0;
  max-width:42ch;
  font-size:clamp(15.5px,1.05vw,17px);
  line-height:1.62;
  color:var(--cream-2);
}

/* The Code als eine ruhige Zeile statt eines konkurrierenden Blocks. */
.code-line{
  margin:22px 0 0;
  padding-top:18px;
  border-top:1px solid var(--line);
  font-size:14px;
  line-height:1.6;
  color:var(--cream-2);
}
.code-k{
  display:block;
  margin-bottom:6px;
  font-size:10px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--dim);
}

/* Fakten: flache Zellen mit eigener Oberkante. */
.facts{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px 40px;
  margin:0;
  padding:0;
  list-style:none;
}
.facts li{
  padding-top:14px;
  border-top:1px solid var(--line);
}
.fact-k{
  display:block;
  font-size:10px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--dim);
}
.fact-v{
  display:block;
  margin-top:6px;
  font-size:16px;
  font-weight:600;
  color:var(--cream);
}
.fact-sub{
  display:block;
  margin-top:4px;
  font-size:13.5px;
  font-weight:500;
  color:var(--dim);
}

/* Nacht-Grid: auf schmalen Bildschirmen untereinander. */
@media (max-width:900px){
  .nacht-grid{ grid-template-columns:1fr; }
}

/* ============================ ANMELDUNG ============================ */
.anmeldung{
  padding:clamp(48px,6.4vw,96px) 0 clamp(56px,7vw,108px);
  border-top:1px solid var(--line-soft);
  background:var(--void-2);
}
.anmeldung-lede{
  margin:18px 0 0;
  max-width:52ch;
  font-size:clamp(15px,1.05vw,16.5px);
  color:var(--cream-2);
}
.anmeldung-grid{
  display:grid;
  grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);
  gap:clamp(20px,2.6vw,36px);
  margin-top:clamp(26px,3.2vw,44px);
  align-items:start;
}
@media (max-width:1023px){
  .anmeldung-grid{ grid-template-columns:1fr; }
}

.panel{
  min-width:0;
  border:1px solid var(--line);
  background:linear-gradient(180deg,var(--anth),#0b0a0a);
}
.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px 14px;
  padding:18px 22px;
  border-bottom:1px solid var(--line);
}
.panel-head-title{
  min-width:0;
  font-family:var(--display);
  font-weight:800;
  font-stretch:87.5%;
  font-size:clamp(16px,1.3vw,19px);
  letter-spacing:.01em;
  text-transform:uppercase;
  color:var(--cream);
  overflow-wrap:break-word;
}
.panel-head-title em{ font-style:normal; color:var(--ember); }
.panel-head-meta{
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--dim);
  white-space:nowrap;
}

/* --- Hinweisblock direkt vor dem Formular --- */
.notice-box{
  display:flex;
  gap:14px;
  align-items:flex-start;
  margin:22px 22px 0;
  padding:16px 18px;
  border:1px solid rgba(255,122,24,.42);
  background:linear-gradient(100deg,rgba(255,122,24,.12),rgba(255,122,24,.03));
}
.notice-badge{
  flex:0 0 auto;
  padding:5px 9px;
  background:var(--ember);
  color:#1b0c01;
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.notice-box p{
  margin:0;
  min-width:0;
  font-size:13.5px;
  line-height:1.55;
  color:var(--cream-2);
  overflow-wrap:break-word;
}
.notice-box strong{ color:var(--ember-soft); font-weight:600; }

/* --- Formular --- */
form{ padding:22px; display:grid; gap:16px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field-row > *{ min-width:0; }
@media (max-width:520px){ .field-row{ grid-template-columns:1fr; } }

.field{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.field label{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--dim);
}
.field label .req{ color:var(--ember); }
.field input{
  appearance:none;
  width:100%;
  min-width:0;
  padding:13px 14px;
  border:1px solid rgba(245,239,223,.16);
  border-radius:3px;
  background:#0a0908;
  color:var(--cream);
  font-family:var(--body);
  font-size:16px;
  font-weight:500;
  color-scheme:dark;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.field input::placeholder{ color:#6a645a; font-weight:400; }
.field input:hover{ border-color:rgba(245,239,223,.28); }
.field input:focus{
  outline:none;
  border-color:var(--ember);
  background:#0d0b0a;
  box-shadow:0 0 0 3px rgba(255,122,24,.18);
}
.hint{
  margin:0;
  font-size:11px;
  letter-spacing:.06em;
  color:#7d766b;
  min-height:14px;
}
.hint.err{ color:#ff8d80; font-weight:600; }

.field.error input{
  border-color:#ff5a4d;
  box-shadow:0 0 0 3px rgba(255,90,77,.16);
}

/* --- Einwilligungen --- */
.consents{
  margin:6px 0 0;
  padding:16px;
  min-width:0;
  min-inline-size:0; /* fieldset ist sonst min-content-breit und erzwingt Overflow */
  border:1px solid var(--line);
  background:rgba(8,8,8,.55);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.consents legend{
  padding:0 8px;
  font-size:10px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--dim);
}
.consent{
  display:flex;
  gap:12px;
  align-items:flex-start;
  min-width:0;
  padding:12px 13px;
  border:1px solid var(--line-soft);
  background:var(--anth);
  cursor:pointer;
  transition:border-color .15s ease,background .15s ease;
}
.consent > *{ min-width:0; }
.consent:hover{ border-color:rgba(245,239,223,.22); }
.consent.checked{ border-color:rgba(255,122,24,.55); background:rgba(255,122,24,.06); }
.consent.error{ border-color:#ff5a4d; }
.consent input{ position:absolute; opacity:0; width:0; height:0; }
.cbox{
  flex:0 0 21px;
  width:21px;
  height:21px;
  margin-top:1px;
  display:grid;
  place-items:center;
  border:1.5px solid rgba(245,239,223,.28);
  border-radius:3px;
  background:#0a0908;
  transition:background .15s ease,border-color .15s ease;
}
.cbox svg{ opacity:0; transform:scale(.6); transition:opacity .15s ease,transform .15s ease; color:#140c08; }
.consent.checked .cbox{ background:var(--ember); border-color:var(--ember); }
.consent.checked .cbox svg{ opacity:1; transform:scale(1); }
.consent input:focus-visible + .cbox{ outline:2px solid var(--ember); outline-offset:3px; }
.ctxt{
  flex:1 1 auto;
  min-width:0;
  font-size:13.5px;
  line-height:1.5;
  color:var(--cream-2);
  overflow-wrap:break-word;
}
.ctxt b{ color:var(--cream); font-weight:600; }
.ctxt a{ color:var(--ember-soft); text-decoration:underline; text-underline-offset:3px; }
.ctxt .legal{
  display:block;
  margin-top:5px;
  color:#8a8377;
  font-size:11.5px;
  line-height:1.45;
}
.consent-err{
  display:block;
  margin-top:8px;
  padding-left:10px;
  border-left:2px solid #ff5a4d;
  font-size:12.5px;
  line-height:1.5;
  color:#ffa79e;
  overflow-wrap:break-word;
}
.consent.optional{ border-style:dashed; }

.btn-submit{ width:100%; margin-top:4px; }
.btn-submit[disabled]{
  background:#2a2320;
  color:#7a736b;
  box-shadow:none;
  cursor:not-allowed;
  border:1px dashed var(--line);
}
.btn-submit[disabled]:hover{ background:#2a2320; }
.form-note{
  margin:0;
  font-size:11px;
  letter-spacing:.04em;
  line-height:1.65;
  color:var(--dim);
}

/* --- Hinweis, wenn JavaScript nicht verfuegbar ist --- */
.noscript-note{
  margin:22px 22px 0;
  padding:14px 16px;
  border:1px solid rgba(255,122,24,.5);
  background:rgba(255,122,24,.12);
  color:var(--ember-soft);
  font-size:13.5px;
  line-height:1.55;
}

.form-status{
  padding:15px 16px;
  border:1px solid rgba(140,198,63,.45);
  background:rgba(140,198,63,.10);
  color:#dff0c0;
  font-size:14px;
  line-height:1.5;
}
.form-status strong{ color:#fff; }

/* Fehlerzustand der Statuszeile: nicht gruen wie der Erfolgsfall, sondern in
   der Markenfarbe. Dieselbe Flaechenlogik, nur die Tinte wechselt. */
.form-status.is-error{
  border-color:rgba(227,18,27,.55);
  background:rgba(227,18,27,.14);
  color:#f7d6d8;
}
.form-status.is-error strong{ color:#fff; }

/* --- FAQ --- */
.faq-list{ padding:6px 22px 22px; }
.faq-item{ border-bottom:1px solid var(--line-soft); }
.faq-item:last-child{ border-bottom:0; }
.faq-item summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px 0;
  cursor:pointer;
  list-style:none;
  font-family:var(--display);
  font-weight:700;
  font-stretch:87.5%;
  font-size:clamp(15px,1.15vw,17px);
  letter-spacing:.01em;
  text-transform:uppercase;
  color:var(--cream);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-mark{
  position:relative;
  flex:0 0 14px;
  width:14px;
  height:14px;
}
.faq-mark::before,.faq-mark::after{
  content:"";
  position:absolute;
  background:var(--ember);
  transition:transform .18s ease;
}
.faq-mark::before{ left:0; top:6px; width:14px; height:1.5px; }
.faq-mark::after{ left:6px; top:0; width:1.5px; height:14px; }
.faq-item[open] .faq-mark::after{ transform:scaleY(0); }
.faq-item[open] summary{ color:var(--ember-soft); }
.faq-item p{
  margin:0 0 18px;
  max-width:54ch;
  font-size:14.5px;
  line-height:1.6;
  color:var(--cream-2);
  overflow-wrap:break-word;
}
.faq-item p a{ color:var(--ember-soft); text-decoration:underline; text-underline-offset:3px; }

/* Ankerziele unter der klebenden Kopfzeile landen */
#nacht,#infos,#anmeldung,#faq{ scroll-margin-top:calc(var(--bar-h) + 18px); }

/* --- Kompaktere Formular-Abstände auf schmalen Displays --- */
@media (max-width:480px){
  form{ padding:16px; }
  .panel-head{ padding:14px 16px; }
  .notice-box{ margin:16px 16px 0; padding:13px 14px; flex-wrap:wrap; }
  .consents{ padding:12px; }
  .consent{ padding:11px; gap:10px; }
  .faq-list{ padding:4px 16px 16px; }
}

/* ============================ FOOTER ============================ */
.footer{
  border-top:1px solid var(--line);
  padding:clamp(34px,4.4vw,60px) 0 clamp(24px,3vw,40px);
  background:var(--void);
}
.footer-inner{
  display:flex;
  flex-wrap:wrap;
  gap:26px 48px;
  align-items:flex-start;
  justify-content:space-between;
}
.footer-brand{ display:flex; flex-direction:column; gap:14px; }
.footer-mark{
  position:relative;
  display:block;
  width:132px;
  aspect-ratio:993/504;
  overflow:hidden;
}
.footer-mark img{
  position:absolute;
  left:-6.04%;
  top:-59.72%;
  width:111.78%;
  max-width:none;
  height:auto;
  display:block;
  mix-blend-mode:screen;
  -webkit-mask-image:url("assets/logo.jpg");
  mask-image:url("assets/logo.jpg");
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  mask-mode:luminance;
}
.footer-tag{
  margin:0;
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--dim);
}
.footer-nav{ display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; }
.footer-nav a{
  font-size:13.5px;
  font-weight:500;
  color:var(--cream-2);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .15s ease,border-color .15s ease;
}
.footer-nav a:hover{ color:var(--ember-soft); border-bottom-color:var(--ember); }
.footer-base{
  display:flex;
  flex-wrap:wrap;
  gap:8px 24px;
  justify-content:space-between;
  margin-top:clamp(22px,3vw,38px);
  padding-top:18px;
  border-top:1px solid var(--line-soft);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--cream-2);
}

/* ============================ RESPONSIVE HERO ============================ */
@media (max-width:767px){
  /* Auf schmalen Displays beginnt die Szene unter der fixierten Kopfzeile und
     steht als eigener 4:3-Block über der Typografie. Der Ausschnitt liegt
     horizontal auf der Figur, damit Boombox und Kürbisse vollständig bleiben. */
  .hero{
    display:block;
    min-height:0;
    padding-top:var(--bar-h);   /* Bildfläche beginnt unter der fixierten Kopfzeile */
  }
  .hero-media{
    position:relative;
    inset:auto;
    z-index:0;
    aspect-ratio:4/3;
  }
  .hero-media img{ object-position:70% 50%; }
  /* Der Verlauf deckt nur das Bild. Unten wird er deutlich staerker, damit
     der ueberlagerte Titel auf dem Bild lesbar bleibt; die obere Haelfte
     (Gesicht der Figur) bleibt frei. */
  .hero-scrim{
    top:var(--bar-h);
    bottom:auto;
    height:75vw;                /* deckt nur das Bild, nicht die Typografie darunter */
    background:linear-gradient(180deg,rgba(6,4,6,.55) 0%,rgba(6,4,6,0) 28%,rgba(6,4,6,0) 56%,rgba(6,4,6,.46) 76%,rgba(6,4,6,.9) 100%);
  }
  .hero-inner{
    padding-top:34px;
    padding-bottom:30px;
  }
  .hero-copy{ max-width:100%; }
  .hero-title{ font-size:clamp(44px,15.5vw,86px); }
  .hero-when{ margin-top:26px; }
  .hero-strip{
    flex-wrap:wrap;
    justify-content:center;
    gap:10px 16px;
  }
  .strip-text{ white-space:normal; text-align:center; }
  .strip-rule{ flex:1 0 40px; }
}

@media (max-width:420px){
  .hero-title{ font-size:clamp(40px,14.6vw,62px); }
  .hero-lede{ font-size:16px; }
  .hero-actions .btn{ width:100%; }
}

/* ============================ MOBILE — DUNKEL (mobile-hero-4) ============================ */
/* Durchgehend dunkel mit roten Akzenten.
   Reihenfolge auf dem Telefon: Animation mit ueberlagertem Titel -> flache
   Terminzeile (Datum links, Ort rechts) -> Zugang und Einlass -> dunkle
   Anmeldung -> FAQ -> schwarzer Footer.
   Alles hier steht unter max-width:767px, damit Desktop (>=768 px) unangetastet
   bleibt. */
@media (max-width:767px){
  :root{
    --bar-h:54px;      /* kompakte Kopfzeile */
    --gutter:20px;     /* Seitenluft */

    /* Dunkle Palette der mobilen Ebene — nur hier, Desktop bleibt unberuehrt. */
    --m-bg:#101013;         /* Flaeche der Anmeldung und der Terminzeilen */
    --m-surface:#19191d;    /* Eingabefelder */
    --m-text:#f5f2ef;       /* Haupttext */
    --m-text-2:#b8b2b3;     /* Sekundaertext */
    --m-muted:#aaa3a6;      /* gedaempfte Hinweise */
    --m-line:#343439;       /* feine Trennlinien */
    --m-line-2:#6d6773;     /* sichtbarer Rand der Eingabefelder */
    --m-red:#d31325;        /* Markenrot (Aktion, Linien) */
    --m-red-bright:#ff4d57; /* helle Rotakzente (Icons, Links, Fokus) */
  }

  /* ---------- Kopfzeile: Logo zentriert, keine Anmeldeaktion oben ---------- */
  .topbar-inner{
    grid-template-columns:1fr;
    justify-items:center;
    gap:0;
    min-height:var(--bar-h);
  }
  .brand{ justify-self:center; }
  .brand-mark{ width:84px; }
  .topbar-cta{ display:none; }
  /* Der Sprunglink nutzt denselben roten Akzent wie die Hauptaktion. */
  .skip-link{ background:var(--m-red); color:#fff; }

  /* ---------- Hero: der Titel liegt auf dem Bild (mobile-hero-4) ---------- */
  /* Der Textblock rueckt per negativem margin-top um clamp(100px,28vw,130px)
     in die Bildflaeche: die zweizeilige Ueberschrift sitzt sichtbar auf dem
     Bild, der Sponsor an der unteren Ausblendkante. */
  .hero-inner{
    margin-top:calc(-1 * clamp(100px,28vw,130px));
    padding-top:0;
    padding-bottom:0;
  }
  /* Zwei Zeilen, kraeftig gesetzt: bei 375 px ca. 49 px (13 vw). Die
     laengste Zeile misst in Archivo 87.5 % rund 6.1 px je px Schriftgroesse
     und bleibt damit bei 320/375/430 px einzeilig passend (ca. 254/298/341 px
     bei 288/320/390 px Zeilenbreite). Die Schriftgroesse bleibt unveraendert;
     nur ein leichter Schlagschatten hilft ueber dem Bild. */
  .hero-title{
    margin-top:2px;
    font-size:clamp(40px,13vw,72px);
    text-shadow:0 2px 22px rgba(6,4,6,.7);
  }
  .eyebrow,
  .hero-lede,
  .hero-strip,
  .hero-actions{ display:none; }
  .hero-sponsor{
    margin-top:8px;
    font-size:12px;
    text-shadow:0 1px 10px rgba(6,4,6,.65);
  }
  /* "Hashy" traegt als einziges Wort die rote Signaturfarbe. */
  .hero-sponsor b{ color:var(--m-red-bright); }

  /* ---------- Termin, Ort, Adresse, Zugang, Einlass ---------- */
  /* Keine Kohlekarte mehr: Datum und Ort stehen als kompakte zweispaltige
     Zeile direkt unter dem ueberlagerten Titel — links Datum + Wochentag,
     rechts „Luna Kiel“ + Adresse. Der Block hat keinen eigenen Hintergrund
     und laeuft im schwarzen Ausblendverlauf weiter; nur eine feine rote Linie
     trennt ihn vom Titel. Datum 23 px, Ort 21 px, Begleittext 13 px. */
  .hero-when{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
    column-gap:14px;
    row-gap:4px;
    align-items:baseline;
    margin-top:14px;
    padding:10px 0 0;
    border:0;
    border-top:1px solid var(--m-red);   /* einzige feine rote Trennlinie */
    background:transparent;
  }
  /* Die Icons sind global ausgeblendet — mobil erscheint nur die Variante
     der Hinweis-Notiz. */
  .mobile-only{ display:block; }
  /* Kalender- und Ort-Icon sind rein dekorativ und stoeeren die
     Zweispalten-Anordnung — sie bleiben auch mobil ausgeblendet. */
  .when-icon{ display:none; }
  .when-date{
    grid-area:1 / 1 / 2 / 2;
    margin:0;
    font-size:23px;
    line-height:1.02;
    color:var(--m-text);
  }
  .when-day{
    grid-area:2 / 1 / 3 / 2;
    margin:0;
    font-size:13px;
    letter-spacing:.02em;
    text-transform:none;
    color:var(--m-muted);
  }
  .when-day::after{ content:none; }
  /* Mobil steht das vierstellige Jahr: 31.10.2026 statt 31.10.26. */
  .year-short{ display:none; }
  .when-date .year-long{ display:inline; }
  .when-place{
    grid-area:1 / 2 / 2 / 3;
    margin:0;
    font-size:21px;
    line-height:1.05;
    letter-spacing:0;
    text-transform:none;        /* keine ueberfluessige Sperrung */
    color:var(--m-text);
  }
  .when-address{
    display:block;
    grid-area:2 / 2 / 3 / 3;
    margin:2px 0 0;
    font-size:13px;
    line-height:1.4;
    letter-spacing:.01em;
    color:var(--m-muted);
  }

  /* Zugang: 18+ und "Nur fuer Mitglieder" — ohne grosse Pillenrahmen und
     ohne eigene Flaeche, die Zeile laeuft im schwarzen Verlauf weiter. */
  .hero-note{ display:none; }
  .mobile-flags{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:2px 8px;
    margin:0;
    padding:9px 0 0;
    border:0;
    background:transparent;
    font-size:13px;
  }
  .note-sep{ font-size:13px; color:var(--m-muted); }
  .note-chip{
    padding:0;
    border:0;
    font-size:13px;
    letter-spacing:.02em;
    color:var(--m-text-2);
  }
  .note-chip:first-child{ color:var(--m-text); font-weight:700; }

  /* Einlass & Eintritt: Infos folgen — einmal, nur mobil, ohne eigene
     Flaeche und ohne zweite Trennlinie. */
  .mobile-entry-note{
    display:flex;
    align-items:flex-start;
    gap:9px;
    margin:0;
    padding:9px 0 0;
    border:0;
    background:transparent;
    font-size:13px;
    line-height:1.5;
    color:var(--m-text-2);
  }
  .entry-note-icon{ flex:0 0 auto; margin-top:1px; color:var(--m-muted); }

  /* ---------- Die Nacht-Sektion entfällt mobil komplett ---------- */
  .nacht{ display:none; }

  /* ---------- Anmeldung: durchgehend dunkel mit roten Akzenten ---------- */
  /* Der helle Elfenbeinton ist weg: die Anmeldung liegt auf #101013 und
     grenzt sich nur mit einer feinen Linie vom schwarzen Eventbereich ab.
     Desktop sieht weiterhin genau wie vorher aus. */
  .anmeldung{
    margin-top:14px;
    padding:22px 0 30px;
    border-top:1px solid var(--m-line);
    background:var(--m-bg);
    color:var(--m-text);
    color-scheme:dark;          /* native Datumsauswahl folgt der dunklen Flaeche */
  }
  .anmeldung .section-title{
    font-size:clamp(30px,8.6vw,34px);
    color:var(--m-text);
  }
  /* Eine schmale rote Linie unter der Ueberschrift setzt den Akzent. */
  .anmeldung .section-title::after{
    content:"";
    display:block;
    width:48px;
    height:2px;
    margin-top:9px;
    background:var(--m-red);
  }
  /* "für den Abend." ist auf Desktop Teil des Wortlauts, mobil entfaellt es —
     die Ueberschrift bleibt einzeilig und das Formular wird kuerzer. */
  .title-rest{ display:none; }
  /* Der Desktop-Wortlaut der Vorrede ist auf dem Telefon zu lang; die kurze
     Fassung sagt dasselbe und der lange bleibt auf Desktop sichtbar. */
  .anmeldung-lede{
    margin-top:4px;
    font-size:15px;
    line-height:1.5;
    color:var(--m-text-2);
  }
  .lede-full{ display:none; }
  .lede-short{ display:block; }
  .anmeldung-grid{ margin-top:10px; gap:22px; }
  .panel-head{ display:none; }
  .form-note{ display:none; }
  /* Fokusringe auf dunklem Grund in hellem Rot. */
  .anmeldung :focus-visible{ outline-color:var(--m-red-bright); }

  /* Hinweisblock: dunkelroter Ton mit duenner roter Linie links, genau
     eine sichtbare Fassung. Der ausgeschriebene Desktop-Wortlaut waere auf
     dem Telefon vier Zeilen lang — mobil steht dieselbe Aussage kurz. */
  .notice-box{
    display:flex;
    gap:10px;
    align-items:flex-start;
    flex-wrap:nowrap;          /* das Info-Zeichen steht neben dem Text */
    margin:0 0 12px;
    padding:10px 12px;
    border:0;
    border-left:2px solid var(--m-red-bright);
    border-radius:0;
    background:rgba(211,19,37,.14);
  }
  .notice-badge{ display:none; }
  .notice-box .notice-icon{
    flex:0 0 auto;
    margin-top:1px;
    color:var(--m-red-bright);
  }
  /* Mobil wird die kurze Fassung gezeigt: gleiche Aussage, weniger Zeilen.
     Die Desktop-Fassung bleibt unveraendert sichtbar — die Kurzfassungen
     sind global ausgeblendet (Basis-Regeln weiter oben).
     Beide Hinweis-Regeln sind specificitaetsstarker als .notice-box p:
     so wechselt die Textfassung sicher und nie stehen beide Texte. */
  .lede-full,
  .year-short{ display:none; }
  .lede-short{ display:block; }
  .notice-box .notice-full{ display:none; }
  .notice-box .notice-short{ display:block; }
  .notice-box p{
    flex:1 1 auto;
    font-size:13px;
    line-height:1.55;
    color:#f3bcc1;
  }
  .noscript-note{
    margin:0 0 14px;
    padding:12px 14px;
    border:0;
    border-left:2px solid var(--m-red-bright);
    background:rgba(211,19,37,.14);
    color:#f3bcc1;
  }

  /* ---------- Formular: flach, gross, ruhig auf dunklem Grund ---------- */
  /* Keine verschachtelten Rahmen mehr: Panel, Fieldset und Consent-Kaesten
     verschwinden, die Zeilen stehen direkt auf der dunklen Flaeche. Texte,
     Labels, Links, Fehler und Touchziele bleiben unveraendert. */
  .panel-form{ border:0; background:transparent; }
  form{ padding:0; gap:10px; }
  .field{ gap:6px; }
  .field label{
    font-size:13px;
    line-height:1.4;
    font-weight:600;
    letter-spacing:normal;
    text-transform:none;        /* Satzschreibweise statt Sperrung */
    color:var(--m-text);
  }
  .field label .req{ color:var(--m-red-bright); }
  .field input{
    min-height:48px;
    padding:12px 13px;
    font-size:16px;
    font-weight:500;
    border:1px solid var(--m-line-2);
    border-radius:10px;
    background:var(--m-surface);
    color:var(--m-text);
    color-scheme:dark;
  }
  .field input::placeholder{ color:#8f8894; font-weight:400; }
  .field input:hover{ border-color:#8b8490; }
  .field input:focus{
    outline:none;
    border-color:var(--m-red);
    background:#1d1d22;
    box-shadow:0 0 0 3px rgba(211,19,37,.28);
  }
  /* Native Datumsauswahl: dunkles Schema und ein sichtbares Kalendersymbol.
     brightness(0)+invert erzwingt ein helles Symbol in jedem Browser. */
  .field input[type="date"]{
    -webkit-appearance:auto;
    appearance:auto;
  }
  .field input[type="date"]::-webkit-calendar-picker-indicator{
    opacity:1;
    cursor:pointer;
    filter:brightness(0) invert(1);
  }
  .field.error input{
    border-color:#ff6b73;
    box-shadow:0 0 0 3px rgba(255,107,115,.16);
  }
  /* Standardhilfetexte kompakter — Fehlermeldungen bleiben sichtbar. */
  .hint{
    font-size:12.5px;
    line-height:1.4;
    letter-spacing:normal;
    min-height:16px;
    color:var(--m-muted);
  }
  .hint.err{ color:#ffb0b8; font-weight:600; font-size:12.5px; }
  /* Vor- und Nachname ab 360 px zweispaltig, darunter gestapelt. */
  .field-row{ grid-template-columns:1fr 1fr; }

  /* Einwilligungen ohne Kasten — nur feine Trennlinien zwischen den Zeilen */
  .consents{ padding:0; border:0; background:transparent; gap:0; }
  .consents legend{
    padding:0;
    font-size:13px;
    font-weight:600;
    letter-spacing:normal;
    text-transform:none;
    color:var(--m-text);
  }
  .consent{
    padding:12px 0;
    min-height:44px;          /* Touchziel auch bei kurzem Text */
    border:0;
    border-radius:0;
    background:transparent;
    gap:11px;
  }
  .consent + .consent{ border-top:1px solid var(--m-line); }
  .consent.optional{ border-style:solid; }
  .consent.checked{ background:transparent; }
  /* Fehlerzustand bleibt erkennbar: rote Kante statt rotem Kasten. */
  .consent.error{ border-left:2px solid #ff6b73; padding-left:10px; }
  /* Dunkle Kaesten mit sichtbarem grauem Rand, angehakt in Rot. */
  .cbox{
    flex:0 0 22px;
    width:22px;
    height:22px;
    margin-top:1px;
    border:1.5px solid #6d6773;
    border-radius:4px;
    background:#141418;
  }
  .cbox svg{ color:#fff; }
  .consent.checked .cbox{ background:var(--m-red); border-color:var(--m-red); }
  .consent input:focus-visible + .cbox{ outline:2px solid var(--m-red-bright); outline-offset:3px; }
  .ctxt{ font-size:14px; line-height:1.45; color:var(--m-text); }
  .ctxt b{ color:#fff; font-weight:600; }
  .ctxt a{ color:#ff9aa2; text-decoration:underline; text-underline-offset:3px; }
  .ctxt .legal{ margin-top:4px; font-size:12px; line-height:1.45; color:var(--m-muted); }
  .consent-err{
    margin-top:8px;
    padding-left:10px;
    border-left:2px solid #ff6b73;
    font-size:12.5px;
    line-height:1.5;
    color:#ffb0b8;
  }

  /* ---------- Hauptaktion: Markenrot auf dunklem Grund ---------- */
  .btn-submit{
    min-height:50px;
    margin-top:6px;
    border:0;
    border-radius:12px;
    background:var(--m-red);
    color:#fff;
    font-size:16px;
    box-shadow:none;
  }
  .btn-submit:hover{ background:#ad0f1e; }
  .btn-submit:active{ background:#9c0d1a; }
  /* Gesperrt bleibt die Aktion dunkel, aber mit lesbarem Text. */
  .btn-submit[disabled]{
    background:#232329;
    color:#9a949c;
    border:1px dashed #3c3c45;
  }
  .btn-submit[disabled]:hover{ background:#232329; }

  /* Statusmeldung: dunkelgruene Flaeche mit hellgruenem Text, nie hell auf hell. */
  .form-status{
    padding:14px 15px;
    border:1px solid rgba(120,190,90,.35);
    background:rgba(64,124,48,.22);
    color:#d6ecc2;
    font-size:14px;
    line-height:1.5;
  }
  .form-status strong{ color:#eaf7de; }

  /* Fehlerzustand: rote Flaeche statt gruener, gleiche Logik wie oben. */
  .form-status.is-error{
    border-color:rgba(211,19,37,.45);
    background:rgba(211,19,37,.22);
    color:#f4d6d9;
  }
  .form-status.is-error strong{ color:#fff; }

  /* ---------- FAQ: nur Regeln und Filmung ---------- */
  .faq-item.mobile-hide{ display:none; }
  /* Zwei ruhige, regelgetrennte Zeilen direkt auf der dunklen Flaeche. */
  .panel-faq{ border:0; background:transparent; }
  .faq-list{ padding:0; }
  .faq-item{ border-bottom:1px solid var(--m-line); }
  .faq-item:last-child{ border-bottom:0; }
  .faq-item summary{
    padding:15px 0;
    font-size:15px;
    letter-spacing:normal;
    text-transform:none;
    color:var(--m-text);
  }
  .faq-item[open] summary{ color:var(--m-red-bright); }
  .faq-item p{
    margin:0 0 14px;
    max-width:none;
    font-size:14px;
    line-height:1.6;
    color:var(--m-text-2);
  }
  .faq-item p a{ color:#ff9aa2; text-decoration:underline; text-underline-offset:3px; }
  .faq-mark::before,
  .faq-mark::after{ background:var(--m-red-bright); }

  /* ---------- Footer: schwarz, kompakt ---------- */
  .footer{ padding:24px 0 20px; background:var(--void); }
  .footer-brand,
  .footer-nav-sections{ display:none; }
  .footer-nav{ gap:8px 18px; }
  .footer-nav a{ font-size:12.5px; }
  .footer-nav a:hover{ color:var(--m-red-bright); border-bottom-color:var(--m-red); }
  .footer-base{ margin-top:16px; padding-top:13px; font-size:11.5px; }
  .footer-base .dim{ display:none; }
}

/* Sehr schmale Telefone: Namen stapeln, etwas weniger Seitenluft */
@media (max-width:359px){
  :root{ --gutter:16px; }
  .field-row{ grid-template-columns:1fr; }
}

/* ============================ REDUCED MOTION ============================ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  /* Bei Reduced Motion laeuft der Loop nicht automatisch: das Video bleibt
     unsichtbar, bis der Nutzer ihn bewusst startet. Der Schalter bleibt
     erreichbar, deshalb wird das Video hier NICHT per display:none gesperrt. */
}