/* =========================================================================
   Feinschliff — wird nach stil.css und stil-modern.css geladen.
   Alles hier ist Politur: Typografie, Verhalten beim Scrollen, Bedienung auf
   dem Handy. Nichts davon ändert Inhalte oder Struktur; fällt die Datei aus,
   bleibt die Seite vollständig benutzbar.
   ========================================================================= */

/* --- 1. Zeilenumbruch nach Sinn statt nach Zufall ------------------------ */
/* balance: kurze Überschriften bekommen gleich lange Zeilen statt einer
   langen und einem einzelnen Wort darunter.
   pretty: im Fließtext bleibt kein einzelnes Wort als letzte Zeile stehen. */
h1, h2, h3, h4,
.anriss-titel, .projekt-titel, .zert-titel, .kachel h3,
.leuchtturm h3, .leuchtturm-unter, .such-titel, .marke-name, .band-text {
  text-wrap: balance;
}
p, li, dd, .fuehrung, .projekt-org, .verein-seit, .kf-wert {
  text-wrap: pretty;
}

/* --- 2. Die Kopfzeile kennt ihre eigene Höhe ----------------------------- */
/* modern.js schreibt --kopf-h beim Laden und bei jeder Größenänderung.
   Der Wert hier ist nur das Netz, falls das Skript nicht läuft. */
:root { --kopf-h: 73px; }

/* --- 3. Jahresüberschriften bleiben beim Scrollen stehen ----------------- */
/* Auf Zeitachse und Ehrenamt scrollt man an achtzig Einträgen vorbei. Bleibt
   die Jahreszahl oben kleben, weiß man jederzeit, wo man ist. */
.jahrgruppe .jahrkopf {
  position: sticky;
  top: calc(var(--kopf-h) + .3rem);
  z-index: 5;
  margin-inline: -.7rem;
  padding: .4rem .7rem;
  border-radius: 999px;
  /* Volldeckend: Ein durchscheinender Streifen sieht aus, als läge ein
     Schleier über dem Text darunter. */
  background: var(--grund);
}
@media (prefers-reduced-motion: reduce) {
  .jahrgruppe .jahrkopf { position: static; background: none; backdrop-filter: none; }
}

/* --- 4. Kapitelleiste: Jahreszahlen statt Strichen ----------------------- */
/* Vorher waren nur Striche zu sehen und die Jahreszahl erst beim Überfahren.
   Das sah aus wie ein Darstellungsfehler. Jetzt steht die Zahl da. */
.jahrleiste {
  gap: 0;
  padding: .5rem .45rem;
  border-radius: 16px;
}
.jahrleiste a {
  width: auto; height: auto;
  display: flex; align-items: center; gap: .45rem;
  padding: .2rem .45rem;
  border-radius: 8px;
}
.jahrleiste a::before {
  position: static; transform: none;
  width: 10px; height: 2px;
  background: var(--linie-zart);
  flex-shrink: 0;
}
.jahrleiste a span {
  position: static; transform: none;
  opacity: 1;
  font-size: .68rem; font-weight: 600;
  /* Nicht --tinte-zart: Die Jahreszahlen stehen jetzt dauerhaft da und
     müssen deshalb den Kontrastwert 4,5:1 erreichen. */
  color: var(--tinte-weich);
  font-variant-numeric: tabular-nums;
  transition: color var(--uebergang);
}
.jahrleiste a:hover span { color: var(--tinte); }
.jahrleiste a[data-aktiv="ja"] span { color: var(--akzent); font-weight: 700; }
.jahrleiste a[data-aktiv="ja"]::before { width: 14px; }
.jahrleiste a:hover::before { width: 14px; }

/* --- 5. Bauteile richten sich nach ihrem eigenen Platz ------------------- */
/* Nicht mehr „wie breit ist das Fenster", sondern „wie breit ist die Karte".
   Dadurch sieht eine Kachel in einer schmalen Spalte richtig aus, egal wie
   groß der Bildschirm ist. */
.kachel-gitter, .koennen-gitter, .leuchtturm-gitter, .verein-gitter {
  container-type: inline-size;
}
.kachel { container-type: inline-size; }
@container (max-width: 320px) {
  .kachel-liste li { font-size: .88rem; }
  .kachel h3 { font-size: 1.05rem; }
}

/* --- 6. Bedienelemente ---------------------------------------------------*/
:root { accent-color: var(--marke-600); }
:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 3px;
}

/* --- 7. Kopfbereich: Rahmen des Porträts passt sich an ------------------- */
/* Im dunklen Modus wirkte der weiße Rahmen wie ein Fremdkörper. */
:root[data-thema="dunkel"] .portraet-huelle,
:root[data-thema="dunkel"] .held .portraet-huelle {
  background: color-mix(in srgb, #fff 12%, transparent);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .8);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) .portraet-huelle {
    background: color-mix(in srgb, #fff 12%, transparent);
    box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .8);
  }
}

/* --- 8. Navigation auf dem Handy: ganze Fläche statt Klappe -------------- */
@media (max-width: 860px) {
  .nav {
    /* Nicht position: fixed — die Kopfzeile hat backdrop-filter und wird
       dadurch selbst zum Bezugsrahmen für fixierte Kinder. Absolut unter der
       Kopfzeile plus ausgerechnete Höhe führt zum selben Bild und
       funktioniert überall. */
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    height: calc(100dvh - var(--kopf-h));
    padding: 1.4rem clamp(1.15rem, .6rem + 2.4vw, 2.5rem) 2rem;
    /* Deckend, nicht durchscheinend: Die Kopfzeile hat selbst schon einen
       backdrop-filter, und ein zweiter darin lässt in Chromium den
       Hintergrund durchschlagen — die Seite schimmerte durch die
       Navigation hindurch. */
    background: var(--grund);
    border-bottom: 0;
    box-shadow: none;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* Ein- und Ausblenden statt hartem Ein/Aus: Die Fläche bleibt im Fluss und
     wird über Sichtbarkeit geschaltet, dadurch hat sie auch beim Schließen
     eine Bewegung. */
  .nav {
    display: flex;
    opacity: 0;
    visibility: hidden;
    translate: 0 -10px;
    transition: opacity .26s ease, translate .26s cubic-bezier(.2,.7,.3,1),
                visibility .26s;
  }
  .nav[data-offen="ja"] {
    display: flex;
    opacity: 1;
    visibility: visible;
    translate: none;
  }
  .nav a {
    font-size: clamp(1.35rem, 1.1rem + 2.2vw, 1.9rem);
    font-family: var(--schrift-anzeige, inherit);
    font-weight: 620;
    letter-spacing: -.03em;
    color: var(--tinte);
    padding: .5em 0;
    border-bottom: 1px solid var(--linie-zart);
  }
  /* Die Einträge kommen nacheinander herein — kurz, ohne Zappeln. */
  .nav[data-offen="ja"] a {
    animation: nav-herein .32s cubic-bezier(.2, .7, .3, 1) backwards;
  }
  .nav[data-offen="ja"] a:nth-child(1) { animation-delay: .02s; }
  .nav[data-offen="ja"] a:nth-child(2) { animation-delay: .05s; }
  .nav[data-offen="ja"] a:nth-child(3) { animation-delay: .08s; }
  .nav[data-offen="ja"] a:nth-child(4) { animation-delay: .11s; }
  .nav[data-offen="ja"] a:nth-child(5) { animation-delay: .14s; }
  .nav[data-offen="ja"] a:nth-child(6) { animation-delay: .17s; }
  .nav[data-offen="ja"] a:nth-child(7) { animation-delay: .20s; }
}
@keyframes nav-herein {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nav[data-offen="ja"] a { animation: none; }
}

/* --- 9. Sprungziele unter der Kopfzeile ---------------------------------- */
:target, [id] { scroll-margin-top: calc(var(--kopf-h) + 1.2rem); }

/* --- 10. Hinter der offenen Navigation steht die Seite still ------------- */
/* :has() erspart dafür eine Zeile Javascript. */
@media (max-width: 860px) {
  body:has(.nav[data-offen="ja"]) { overflow: hidden; }
}

/* --- 11. Der Filter der Kompetenzen bleibt in Reichweite ---------------- */
@media (min-width: 720px) {
  .kfilter {
    position: sticky;
    top: calc(var(--kopf-h) + .4rem);
    z-index: 6;
    /* Eigener Grund, sonst scrollen die Kompetenzen sichtbar dahinter durch. */
    background: var(--grund);
    padding-block: .6rem;
    margin-inline: -.7rem;
    padding-inline: .7rem;
    border-radius: 14px;
  }
}

/* --- 12. Karten bekommen beim Überfahren eine Lichtkante ---------------- */
/* Ein Verlauf im Rahmen statt einer einfarbigen Linie — fällt kaum auf und
   macht trotzdem den Unterschied zwischen „Kasten" und „Fläche mit Tiefe". */
@media (hover: hover) {
  .kachel, .koennen, .zert, .anriss, .verein, .projekt {
    position: relative;
  }
  .kachel::before, .koennen::before, .zert::before, .anriss::before {
    /* ::before, weil ::after in stil-modern.css bereits den Lichtkegel unter
       dem Zeiger trägt — den wollen wir behalten. */
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(140deg,
      color-mix(in srgb, var(--marke-500) 55%, transparent),
      transparent 42%,
      color-mix(in srgb, var(--akzent) 35%, transparent));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--uebergang);
    pointer-events: none;
  }
  .kachel:hover::before, .koennen:hover::before,
  .zert:hover::before, .anriss:hover::before { opacity: 1; }
}

@media print {
  .kachel::before, .koennen::before, .zert::before, .anriss::before { display: none !important; }
}

/* --- 13. Abbinder in der Navigationsfläche ------------------------------ */
.nav-fuss { display: none; }
@media (max-width: 860px) {
  .nav-fuss {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin-top: auto;
    padding-top: 1.6rem;
    font-size: .92rem;
  }
  .nav-fuss a {
    font-family: var(--schrift, inherit);
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--marke-600);
    padding: 0;
    border-bottom: 0;
    overflow-wrap: anywhere;
  }
  .nav-fuss span { color: var(--tinte-zart); font-size: .85rem; }
}

/* --- 14. Tippziele groß genug ------------------------------------------- */
/* WCAG 2.2 verlangt für Bedienelemente mindestens 24 × 24 Pixel. Ausgenommen
   sind Verweise mitten im Satz — die bleiben, wie sie sind. Betroffen waren
   die Verweise im Fußbereich, die Brotkrumen und die kleinen Domain-Chips
   unter den Projekten: alle zwischen 16 und 23 Pixel hoch. */
.fuss li a,
.fuss-unten nav a,
.brotkrumen a,
.verweis,
.projekt-org a,
.anriss-mehr,
.kfilter-feld input {
  /* 26 statt 24: Bei gebrochenen Pixelwerten landet man sonst knapp darunter. */
  min-height: 26px;
}
.fuss li a, .fuss-unten nav a, .brotkrumen a, .projekt-org a {
  display: inline-flex;
  align-items: center;
}
@media (pointer: coarse) {
  /* Auf dem Handy dürfen die Ziele großzügiger sein — dort wird getippt,
     nicht gezielt. */
  .fuss li a { min-height: 40px; }
  .fuss-unten nav a { min-height: 36px; }
  .verweis, .projekt-org a { min-height: 32px; }
  .brotkrumen a { min-height: 32px; }
}

/* --- 15. Die Kopfzeile bei großer Schrift -------------------------------- */
/* Die Kopfzeile richtet ihre Kinder nach rechts aus. Wächst die Schrift,
   schiebt sich der Namenszug deshalb nach LINKS aus dem Bild — bei 200 %
   Schriftgröße fehlten bis zu 190 Pixel. Er darf jetzt schrumpfen und
   notfalls mit drei Punkten enden. */
.kopf-innen { min-width: 0; }
.marke { flex: 0 1 auto; min-width: 0; overflow: hidden; }
.marke-text { min-width: 0; overflow: hidden; }
.marke-name, .marke-rolle {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- 16. Umschaltpunkt der Navigation in em ----------------------------- */
/* 53.75em entspricht bei Standardschrift genau den bisherigen 860 px. Der
   Unterschied: em-Grenzen reagieren auf die Schriftgröße des Browsers. Wer
   die Schrift verdoppelt, bekommt deshalb auch auf einem breiten Bildschirm
   die Menütaste statt einer gequetschten Navigationsleiste. */
@media (max-width: 53.75em) {
  .nav-schalter { display: inline-flex; }
  .nav {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    height: calc(100dvh - var(--kopf-h));
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1.4rem clamp(1.15rem, .6rem + 2.4vw, 2.5rem) 2rem;
    background: var(--grund);
    border-bottom: 0;
    box-shadow: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    opacity: 0;
    visibility: hidden;
    translate: 0 -10px;
    transition: opacity .26s ease, translate .26s cubic-bezier(.2,.7,.3,1),
                visibility .26s;
  }
  .nav[data-offen="ja"] { opacity: 1; visibility: visible; translate: none; }
  .nav a {
    font-size: clamp(1.35rem, 1.1rem + 2.2vw, 1.9rem);
    font-family: var(--schrift-anzeige, inherit);
    font-weight: 620;
    letter-spacing: -.03em;
    color: var(--tinte);
    padding: .5em 0;
    border-bottom: 1px solid var(--linie-zart);
    white-space: normal;
  }
  .nav a::after { display: none; }
  .nav-fuss { display: flex; }
  body:has(.nav[data-offen="ja"]) { overflow: hidden; }
}

/* --- 17. Jahresüberschrift bei großer Schrift --------------------------- */
/* „2026 · geplant · 5 Projekte · ——— Linie" passt bei doppelter Schrift auf
   schmalen Geräten nicht mehr in eine Zeile. Statt seitlich herauszuragen,
   bricht die Zeile jetzt um. */
.jahrkopf {
  flex-wrap: wrap;
  row-gap: .25rem;
  min-width: 0;
}
.jahrkopf h2 { min-width: 0; }
.jahrkopf .zaehler {
  flex-shrink: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* --- 18. Lange Domainnamen in den Chips --------------------------------- */
/* „junge-buehne-sindelfingen.de" ist bei doppelter Schrift breiter als ein
   schmales Gerät. Der Chip darf jetzt immer umbrechen, nicht erst unter
   400 Pixeln. */
.verweis {
  max-width: 100%;
  min-width: 0;
  flex-wrap: wrap;
  overflow-wrap: anywhere;
}

/* --- 19. Auf Papier -------------------------------------------------------*/
@media print {
  /* Die Abschnittsnummern sind Bildschirmschmuck und stiften im Ausdruck
     nur Verwirrung. */
  .abschnitt-kopf .vorzeile::after { display: none !important; }
  .jahrgruppe .jahrkopf { position: static; background: none; margin-inline: 0; }
  .nav-fuss { display: none !important; }
}