/* Nur Kopfzeile, Fusszeile und Schnellleiste – fuer Seiten, die
   ansonsten unveraendert bleiben (z. B. die Anmeldung). */

:root {
  /* Farben ---------------------------------------------------- */
  --tinte:        #0d0d0d;
  --tinte-70:     #45454a;
  --tinte-45:     #74747c;
  --papier:       #ffffff;
  --papier-warm:  #f6f6f2;
  --linie:        #e3e3dc;
  --linie-dunkel: rgba(255,255,255,0.14);

  /* Direkt aus logo-transparent.png ausgelesen:
     Grün #20F600 (29.747 Bildpunkte), Orange #F25F1C (5.675).
     Das Logo-Grün hat auf Weiß nur 1,47:1 Kontrast – als Textfarbe
     unbrauchbar. Deshalb zwei abgeleitete Stufen aus derselben Farbe. */
  --signal:       #20f600;   /* Logo-Grün – nur Flächen, dunkler Text darauf (13,2:1) */
  --signal-dunkel:#1cd800;   /* Hover */
  --signal-tief:  #118200;   /* Text – haelt 4,5:1 auch auf den warmen Flaechen */
  --warm:         #f25f1c;   /* Logo-Orange – Flächen */
  --warm-tief:    #c04c16;   /* Logo-Orange als Text – ebenfalls auf allen Flaechen */
  --stern:        #f5a623;

  /* Abstände (4px-Raster) -------------------------------------- */
  --r1: .25rem;  --r2: .5rem;   --r3: .75rem;  --r4: 1rem;
  --r5: 1.5rem;  --r6: 2rem;    --r7: 3rem;    --r8: 4rem;
  --r9: 6rem;    --r10: 8rem;

  /* Schrift ---------------------------------------------------- */
  --schrift:  'DM Sans VF', 'DM Sans', system-ui, sans-serif;
  --display:  'Barlow Condensed', 'DM Sans', sans-serif;

  --t-mikro: .72rem;
  --t-klein: .875rem;
  --t-basis: 1rem;
  --t-lead:  clamp(1rem, 1.5vw, 1.28rem);
  --t-h3:    clamp(1.15rem, 2.2vw, 1.6rem);
  --t-h2:    clamp(1.6rem, 6.2vw, 4.4rem);
  --t-h1:    clamp(1.95rem, 8.2vw, 6.6rem);

  --radius:      14px;
  --radius-voll: 999px;
  --bahn:        1180px;
}



/* Nur für Screenreader */
.nur-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* Bahn / Abschnitt -------------------------------------------- */
.bahn      { max-width: var(--bahn); margin: 0 auto; padding: 0 var(--r5); }

.bahn--eng { max-width: 780px; }


/* Icons -------------------------------------------------------- */
.ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.18em; }

.ic--gr { width: 1.6em; height: 1.6em; }

.sterne { display: inline-flex; gap: .1em; color: var(--stern); line-height: 1; }

.sterne .ic { width: 1em; height: 1em; vertical-align: 0; }


/* ============================================================
   KOPFLEISTE
   ============================================================ */
.kopfleiste {
  position: sticky; top: 0; z-index: 900;
  background: rgba(13,13,13,.82); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linie-dunkel);
}

.kopfleiste__innen {
  display: flex; align-items: center; justify-content: space-between; gap: var(--r5);
  height: 68px;
}

.kopfleiste__logo img { height: 34px; width: auto; }

.kopfleiste__menue { display: flex; align-items: center; gap: var(--r6); }

.kopfleiste__menue a {
  color: rgba(255,255,255,.78); font-size: var(--t-klein); font-weight: 600;
  transition: color .18s;
}

.kopfleiste__menue a:hover { color: var(--papier); }

.kopfleiste__burger { display: none; background: none; border: 0; color: var(--papier); padding: var(--r2); cursor: pointer; }

  .kopfleiste__burger { display: inline-flex; }

  .kopfleiste__menue--offen {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; left: 0; right: 0; top: 68px;
    background: rgba(13,13,13,.97); border-bottom: 1px solid var(--linie-dunkel);
    padding: var(--r3) var(--r5) var(--r5);
  }

  .kopfleiste__menue--offen a { padding: var(--r3) 0; border-bottom: 1px solid var(--linie-dunkel); font-size: 1rem; }

  .kopfleiste__menue--offen .knopf { margin-top: var(--r4); }

.buehne .bahn { position: relative; z-index: 2; padding-top: var(--r8); padding-bottom: var(--r8); }


/* ============================================================
   SCHNELLLEISTE (Handy)
   Absichtlich zurückhaltend: schmal, gedeckt, ohne zweiten
   Signalknopf – die vorige Fassung mit zwei fetten Pillen wirkte
   aufdringlich. Erscheint erst, wenn die Bühne durchgescrollt ist.
   ============================================================ */
.schnell {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 850;
  display: none; align-items: center; gap: var(--r3);
  padding: .55rem var(--r4) calc(.55rem + env(safe-area-inset-bottom, 0px));
  background: rgba(13,13,13,.9); backdrop-filter: blur(12px);
  border-top: 1px solid var(--linie-dunkel);
  transform: translateY(110%); transition: transform .26s ease;
}

.schnell--sichtbar { transform: translateY(0); }

.schnell__text { flex: 1; font-size: var(--t-mikro); color: rgba(255,255,255,.6); line-height: 1.35; }

.schnell__text b { display: block; color: var(--papier); font-size: var(--t-klein); font-weight: 700; }

.schnell__wa {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.22); color: var(--papier);
}

.schnell__wa:hover { border-color: rgba(255,255,255,.5); }

.schnell__an {
  flex: none; padding: .6rem 1.15rem; border-radius: var(--radius-voll);
  background: var(--signal); color: #072b00; font-weight: 700; font-size: var(--t-klein);
}


/* ============================================================
   FUSS
   ============================================================ */
.fuss { background: var(--tinte); color: rgba(255,255,255,.6); padding: var(--r8) 0 var(--r6); font-size: var(--t-klein); }

.fuss__gitter { display: grid; gap: var(--r6); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.fuss__titel { color: var(--papier); font-weight: 700; margin-bottom: var(--r3); font-size: var(--t-klein); letter-spacing: .04em; }

.fuss a:hover { color: var(--signal); }

.fuss__zeile {
  margin-top: var(--r7); padding-top: var(--r5); border-top: 1px solid var(--linie-dunkel);
  display: flex; flex-wrap: wrap; gap: var(--r3) var(--r5); justify-content: space-between;
  font-size: var(--t-mikro); color: rgba(255,255,255,.42);
}

.stimme__wer, .zeit__wann, .ort__tage, .schnell__text b { font-weight: 640; }

.knopf, .klasse, .zeit, .stimme, .erfolg__bild, .textlink,
.kopfleiste__menue a, .schnell { transition-timing-function: var(--kurve); }


/* --- Dunkle Flaechen: feine Koernung gegen Bandenbildung ------ */
.tafel--tinte, .buehne, .fuss { position: relative; }

.tafel--tinte::after, .fuss::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}

.tafel--tinte > *, .fuss > * { position: relative; z-index: 1; }


/* --- Kopfleiste: erst transparent, beim Scrollen fester ------- */
.kopfleiste { transition: background-color .3s var(--kurve), border-color .3s var(--kurve); }

.kopfleiste--gescrollt { background: rgba(13,13,13,.94); }

.haltung-band .bahn { position: relative; z-index: 2; }



/* Der Anmelde-Knopf in der Kopfleiste erbte die Linkfarbe der
   Navigation (78 % Weiß) – auf dem hellen Logo-Grün ergab das
   1,47:1 und war praktisch unlesbar. */
.kopfleiste__menue a.knopf--haupt { color: #0d0d0d; }

.kopfleiste__menue a.knopf--haupt:hover { color: #0d0d0d; }


/* ------------------------------------------------------------
   NAVIGATION – echte Seitennavigation statt Sprungmarken
   ------------------------------------------------------------ */
.kopfleiste__menue { gap: var(--r5); }

.kopfleiste__menue a { white-space: nowrap; }

  .kopfleiste__menue a { font-size: .82rem; }

@media (max-width: 860px) {
  .kopfleiste__menue { display: none; }
  .kopfleiste__burger { display: inline-flex; }
  .kopfleiste__menue--offen {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; left: 0; right: 0; top: 68px;
    background: rgba(13,13,13,.97); border-bottom: 1px solid var(--linie-dunkel);
    padding: var(--r3) var(--r5) var(--r5);
  }
  .kopfleiste__menue--offen a { padding: var(--r3) 0; border-bottom: 1px solid var(--linie-dunkel); font-size: 1rem; }
  .kopfleiste__menue--offen .knopf { margin-top: var(--r4); }
}