@import url("../fonts/fonts.css");

/* =========================================================
   CSD Bergstraße, Design System
   Retro / Memphis / Vaporwave, abgeleitet von Plakat & Flyer
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  /* Marke */
  --pink:        #ED3E9C;
  --pink-dk:     #C42A80;
  --pink-lt:     #FF8FCB;
  --purple:      #3E1F66;
  --purple-dk:   #29124A;
  --purple-lt:   #6B44A8;
  --teal:        #2FB3AE;
  --teal-dk:     #1C8481;
  --cyan:        #7FE0E4;
  --yellow:      #FDC22E;
  --yellow-dk:   #D99A0E;

  /* Neutral */
  --ink:         #1E1233;
  --ink-soft:    #4A3A63;
  --paper:       #FFF7FC;
  --paper-2:     #FFEDF7;
  --white:       #FFFFFF;

  /* Progress-Pride-Flagge: die sechs Regenbogenstreifen ... */
  --rb-red:      #E8413A;
  --rb-orange:   #F2892E;
  --rb-yellow:   #FBD02E;
  --rb-green:    #43A047;
  --rb-blue:     #2A6DB5;
  --rb-purple:   #7B3FA0;
  /* ... und der Chevron. Braun und Schwarz gehoeren zwingend dazu, die
     stehen fuer BIPoC in der Community und duerfen nirgends fehlen. */
  --pr-white:    #FFFFFF;
  --pr-pink:     #F7A8B8;
  --pr-blue:     #6BCFF6;
  --pr-brown:    #7A4A22;
  --pr-black:    #1A1A1A;

  /* Schrift */
  --f-display: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --f-body:    "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-pixel:   "Silkscreen", "Courier New", monospace;

  /* Maße */
  --wrap:      1120px;
  --radius:    20px;
  --radius-lg: 30px;
  --shadow:    7px 7px 0 var(--ink);
  --shadow-sm: 4px 4px 0 var(--ink);
  --header-h:  68px;
}

/* ---------- 2. Reset & Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
img { height: auto; }

/* Die Bilder stecken in <picture>, damit moderne Browser die kleineren
   WebP-Dateien bekommen und aeltere weiterhin PNG und JPG. display:contents
   sorgt dafuer, dass das picture selbst keinen Kasten erzeugt. Dadurch
   greifen alle bestehenden Regeln wie .brand img oder .logo-wall img
   unveraendert weiter und am Layout aendert sich nichts.

   Das source dabei ausdruecklich ausblenden! Es steht naemlich nicht in der
   Liste der Elemente, die der Browser von sich aus auf display:none setzt.
   Normalerweise faellt das nicht auf, weil es im picture steckt. Sobald das
   picture aber display:contents hat, rutscht das source eine Ebene hoch und
   wird im Elternteil zu einem echten Raster- oder Flexelement. Im Grusswort
   hat es dadurch die schmale Bildspalte belegt und den Text in die naechste
   Zeile geschoben. */
picture { display: contents; }
picture > source { display: none; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 800;
  line-height: 1.05;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.2rem, 1.4rem + 4.2vw, 4.3rem); }
h2 { font-size: clamp(1.75rem, 1.25rem + 2.4vw, 2.9rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.8vw, 1.55rem); }
h4 { font-size: 1.08rem; font-weight: 700; }

p, ul, ol { margin: 0 0 1.1em; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--yellow); color: var(--ink); }

/* ---------- 3. Utilities ---------- */
.wrap { width: min(var(--wrap), 100% - 2.4rem); margin-inline: auto; }
.wrap--narrow { width: min(760px, 100% - 2.4rem); }
.center { text-align: center; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip-link {
  position: absolute; left: 0.75rem; top: -100px; z-index: 999;
  background: var(--yellow); color: var(--ink);
  font-family: var(--f-display); font-weight: 800;
  padding: 0.7rem 1.2rem; border: 3px solid var(--ink); border-radius: 999px;
  text-decoration: none; transition: top 0.18s;
}
.skip-link:focus { top: 0.75rem; }

/* ---------- 4. Sektionen & Farbbänder ---------- */
.sec {
  position: relative;
  padding-block: clamp(3.2rem, 7vw, 6rem);
  isolation: isolate;
}
.sec--pink   { background: var(--pink);      color: var(--white); }
.sec--purple { background: var(--purple);    color: var(--white); }
.sec--teal   { background: var(--teal);      color: var(--white); }
.sec--yellow { background: var(--yellow);    color: var(--ink); }
.sec--paper  { background: var(--paper);     color: var(--ink); }
.sec--paper2 { background: var(--paper-2);   color: var(--ink); }
.sec--white  { background: var(--white);     color: var(--ink); }
.sec--tight  { padding-block: clamp(2.2rem, 4.5vw, 3.4rem); }

/* Extra Platz unten, sonst laeuft der Text in die Risskante rein */
.sec:has(> .torn--bottom) { padding-bottom: clamp(4.6rem, 9vw, 7.5rem); }

/* Risskante wie auf dem Plakat. Die Farbe kommt ueber currentColor, gesetzt
   wird sie mit einer .torn--to-* Klasse, und zwar immer in der Farbe der
   naechsten Sektion. Klingt verdreht, ist aber genau richtig herum. */
.torn {
  position: absolute; left: 0; width: 100%;
  height: clamp(26px, 3.6vw, 54px);
  display: block; pointer-events: none; z-index: 2;
}
.torn--bottom { bottom: -1px; }
.torn--top    { top: -1px; transform: scaleY(-1); }
.torn--to-pink   { color: var(--pink); }
.torn--to-purple { color: var(--purple); }
.torn--to-teal   { color: var(--teal); }
.torn--to-paper  { color: var(--paper); }
.torn--to-paper2 { color: var(--paper-2); }
.torn--to-white  { color: var(--white); }
.torn--to-yellow { color: var(--yellow); }

/* ---------- Konfetti-Overlay ----------
   Der Verlauf liegt auf einer eigenen ::before-Ebene, die etwas groesser ist
   als ihr Container. So kann sie driften, ohne dass an den Raendern eine
   Kante auftaucht. Bewegt wird ausschliesslich per transform, damit die GPU
   die Arbeit macht und das Ganze auf dem Handy keinen Akku frisst. */
.confetti-layer,
.hero__confetti,
.page-hero__confetti {
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none;
}
.confetti-layer::before,
.hero__confetti::before,
.page-hero__confetti::before {
  content: ""; position: absolute; inset: -72px;
  background: url("../img/confetti.svg") center / cover no-repeat;
  /* rund 2 px pro Sekunde, mehr soll es bewusst nicht sein */
  animation: konfetti-drift 32s ease-in-out infinite alternate;
  animation-play-state: paused;
}
/* laeuft nur, solange der Abschnitt wirklich im Bild ist */
.is-drifting::before { animation-play-state: running; }

@keyframes konfetti-drift {
  from { transform: translate3d(0, 0, 0)        rotate(0.0001deg); }
  to   { transform: translate3d(-52px, -30px, 0) rotate(0.0001deg); }
}

.confetti-layer { z-index: -1; opacity: 0.5; }
/* auf hellem Grund deutlich zurueckgenommen, sonst stoert es beim Lesen */
.sec--paper .confetti-layer,
.sec--white .confetti-layer,
.sec--paper2 .confetti-layer { opacity: 0.15; }

/* ---------- 5. Typo-Spezialitäten ---------- */
/* Die gelbe Plakatschrift. Der Umriss besteht aus mehreren text-shadows,
   weil -webkit-text-stroke die Buchstaben von innen auffrisst und die
   Rundungen dabei kaputt macht. */
.display {
  font-family: var(--f-display);
  font-weight: 800;
  color: var(--yellow);
  line-height: 0.95;
  text-shadow:
     3px 0 0 var(--purple-dk), -3px 0 0 var(--purple-dk),
     0 3px 0 var(--purple-dk), 0 -3px 0 var(--purple-dk),
     2px 2px 0 var(--purple-dk), -2px 2px 0 var(--purple-dk),
     2px -2px 0 var(--purple-dk), -2px -2px 0 var(--purple-dk),
     7px 8px 0 rgba(41, 18, 74, 0.9);
}

/* Motto in Pixelschrift mit dem Farbversatz vom Plakat. Nie als einzige
   Quelle fuer eine Information benutzen, dafuer ist es zu schwer lesbar. */
.pixel {
  font-family: var(--f-pixel);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--purple-dk);
  text-shadow: 3px 0 0 var(--cyan), -3px 0 0 var(--pink-lt);
  text-transform: uppercase;
  text-wrap: balance;
}
.pixel--light { color: var(--white); text-shadow: 3px 0 0 var(--cyan), -3px 0 0 var(--pink); }
.pixel--sm { font-size: clamp(0.72rem, 0.6rem + 0.6vw, 0.95rem); }

/* Kleines Kapitel-Label, sitzt immer direkt ueber einer Ueberschrift */
.eyebrow {
  display: inline-block;
  font-family: var(--f-pixel);
  font-size: clamp(0.66rem, 0.6rem + 0.3vw, 0.8rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.45em 0.9em;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  border: 2px solid var(--ink);
  margin-bottom: 1rem;
}
.sec--yellow .eyebrow { background: var(--purple); color: var(--white); }

.lead { font-size: 1.12em; font-weight: 600; }

/* Marker-Hervorhebung */
mark, .mark {
  background: var(--yellow);
  color: var(--ink);
  padding: 0.05em 0.3em;
  border-radius: 6px;
  font-weight: 700;
}

/* ---------- 6. Buttons ----------
   Sacken beim Klick nach unten weg. Das gibt Nutzer*innen auch ohne
   Farbwechsel eine klare Rueckmeldung, dass etwas passiert ist. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  font-family: var(--f-display); font-weight: 800;
  font-size: 1.02rem; line-height: 1.15;
  padding: 0.72em 1.5em;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--yellow); color: var(--ink);
  text-decoration: none; cursor: pointer;
  box-shadow: 0 5px 0 var(--ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.btn:hover  { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.btn:active { transform: translateY(5px); box-shadow: 0 0 0 var(--ink); }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }

.btn--pink  { background: var(--pink);  color: var(--white); }
.btn--cyan  { background: var(--cyan);  color: var(--ink); }
.btn--white { background: var(--white); color: var(--ink); }
.btn--ghost {
  background: transparent; color: currentColor;
  border-color: currentColor; box-shadow: 0 5px 0 currentColor;
}
.btn--ghost:hover  { box-shadow: 0 2px 0 currentColor; }
.btn--ghost:active { box-shadow: 0 0 0 currentColor; }
.btn--sm { font-size: 0.9rem; padding: 0.55em 1.1em; border-width: 2px; box-shadow: 0 4px 0 var(--ink); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.btn-row--center { justify-content: center; }

/* ---------- 7. Header & Navigation ---------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: var(--white);
  border-bottom: 3px solid var(--ink);
}
.header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: var(--header-h);
  padding-block: 0.5rem;
}
.brand { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; flex: none; }
.brand img { height: clamp(34px, 7vw, 44px); width: auto; }
.brand__text {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(0.98rem, 0.85rem + 0.5vw, 1.2rem);
  line-height: 1; color: var(--ink);
}
.brand__text small {
  display: block; font-family: var(--f-body); font-weight: 700;
  font-size: 0.68em; color: var(--pink-dk); letter-spacing: 0.02em;
}

.nav-toggle {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--f-display); font-weight: 800; font-size: 0.95rem;
  background: var(--yellow); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 999px;
  padding: 0.42em 0.9em; cursor: pointer;
}
.nav-toggle__bars { display: grid; gap: 3px; }
.nav-toggle__bars span {
  display: block; width: 18px; height: 2.5px; background: var(--ink); border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.nav ul { list-style: none; margin: 0; padding: 0; }
.nav a {
  display: block; text-decoration: none;
  font-family: var(--f-display); font-weight: 700;
  color: var(--ink); border-radius: 999px;
  transition: background 0.15s, color 0.15s;
}
.nav a[aria-current] { background: var(--pink); color: var(--white); }

/* Auf dem Handy faehrt die Navigation als Drawer von oben rein. Der Body
   wird solange festgestellt, damit man nicht ausversehen dahinter scrollt. */
@media (max-width: 899px) {
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    background: var(--white);
    border-bottom: 3px solid var(--ink);
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    transform: translateY(-120%);
    transition: transform 0.28s cubic-bezier(0.3, 0.9, 0.4, 1);
    box-shadow: 0 12px 24px rgba(30, 18, 51, 0.18);
  }
  .nav[data-open="true"] { transform: translateY(0); }
  .nav ul { padding: 0.7rem 1.2rem 1.3rem; display: grid; gap: 0.2rem; }
  .nav a { padding: 0.75rem 1rem; font-size: 1.08rem; border-bottom: 2px solid var(--paper-2); border-radius: 12px; }
  .nav li:last-child a { border-bottom: 0; }
}

/* Desktop: horizontal */
@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .nav ul { display: flex; align-items: center; gap: 0.25rem; }
  .nav a { padding: 0.5rem 0.85rem; font-size: 1rem; }
  .nav a:hover { background: var(--paper-2); }
  .nav a[aria-current]:hover { background: var(--pink-dk); }
  .nav .nav__cta a {
    background: var(--yellow); border: 2.5px solid var(--ink); margin-left: 0.4rem;
    box-shadow: 0 3px 0 var(--ink);
  }
  .nav .nav__cta a:hover { background: var(--yellow); transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
}

/* ---------- 8. Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--white);
  background:
    linear-gradient(180deg, var(--purple-dk) 0%, var(--purple) 34%, #8B2E86 68%, var(--pink) 100%);
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(5rem, 10vw, 8rem);
}
.hero__sun {
  position: absolute; left: 50%; bottom: 1%;
  translate: -50% 0;
  width: min(76vw, 560px); aspect-ratio: 1;
  z-index: -3;
  opacity: 0.62;
  pointer-events: none;
}
@media (min-width: 700px) {
  .hero__sun { width: min(52vw, 520px); bottom: -4%; }
}
.hero__confetti { z-index: -2; opacity: 0.62; }

/* Das Regenbogenband soll links und rechts aus dem Bild herauslaufen.
   Deshalb ist es breiter als der Hero und haengt auf beiden Seiten ueber,
   sonst sieht man die abgeschnittene Kante mitten auf der Seite. */
.hero__ribbon {
  position: absolute; top: 0; left: -12%; right: auto;
  width: 124%; max-width: none; z-index: -1;
  pointer-events: none; opacity: 0.97;
}
@media (min-width: 1100px) {
  .hero__ribbon { top: -2%; left: -6%; width: 112%; }
}
.palm {
  position: absolute; bottom: -3%; z-index: -1;
  width: clamp(110px, 19vw, 235px);
  color: #5B2382;
  opacity: 0.9; pointer-events: none;
}
.palm--l { left: -3%; transform: rotate(-6deg); }
.palm--r { right: -2%; transform: rotate(7deg) scaleX(-1); color: #7A2E9B; }

.hero__inner { position: relative; z-index: 1; text-align: center; }

.hero__badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--cyan); color: var(--ink);
  border: 3px solid var(--purple-dk); border-radius: 999px;
  padding: 0.45em 1.1em;
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(0.85rem, 0.78rem + 0.35vw, 1.05rem);
  box-shadow: 4px 4px 0 var(--purple-dk);
  margin-bottom: 1.3rem;
}
.hero__badge svg { width: 1.15em; height: 1.15em; }

.hero h1 { margin-bottom: 0.35em; }
.hero__date {
  display: block;
  font-size: clamp(1.6rem, 1rem + 3.2vw, 3.2rem);
  margin-bottom: 0.08em;
}
.hero__motto {
  font-size: clamp(1.05rem, 0.72rem + 1.7vw, 2.1rem);
  margin: 0 auto 1.5rem;
  max-width: 18ch;
}
.hero__meta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.4rem;
  font-weight: 700; font-size: 1.02rem;
  margin-bottom: 1.8rem;
}
.hero__meta span { display: inline-flex; align-items: center; gap: 0.42rem; }
.hero__meta svg { width: 1.15em; height: 1.15em; flex: none; color: var(--cyan); }

/* ---------- 9. Countdown ---------- */
.countdown {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 0.55rem;
  margin-top: 2rem;
}
.countdown__item {
  min-width: clamp(64px, 17vw, 92px);
  margin: 0;
  background: var(--purple-dk);
  border: 3px solid var(--white);
  border-radius: 16px;
  padding: 0.55rem 0.5rem 0.45rem;
  box-shadow: 4px 4px 0 rgba(41, 18, 74, 0.55);
}
.countdown__num {
  display: block;
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(1.5rem, 1rem + 2.2vw, 2.4rem);
  line-height: 1; color: var(--yellow);
  font-variant-numeric: tabular-nums;
}
.countdown__label {
  display: block; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em; opacity: 0.92;
}
.countdown__done {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(1.2rem, 1rem + 1.4vw, 1.8rem);
  color: var(--yellow);
}

/* ---------- 10. Fakten-Karten ---------- */
.facts {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}
.fact {
  background: var(--white); color: var(--ink);
  border: 3px solid var(--ink); border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.3rem 1.2rem;
  text-align: center;
}
.fact__icon {
  width: 2.6rem; height: 2.6rem; margin: 0 auto 0.6rem;
  display: grid; place-items: center;
  background: var(--yellow); border: 2.5px solid var(--ink); border-radius: 50%;
}
.fact__icon svg { width: 1.35rem; height: 1.35rem; }
.fact__label {
  font-family: var(--f-pixel); font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--pink-dk); margin-bottom: 0.35rem;
}
.fact__value { font-family: var(--f-display); font-weight: 800; font-size: 1.32rem; line-height: 1.2; }
.fact__note { font-size: 0.9rem; color: var(--ink-soft); margin-top: 0.2rem; }

/* ---------- 11. Karten & Raster ---------- */
.grid { display: grid; gap: 1.2rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }

.card {
  background: var(--white); color: var(--ink);
  border: 3px solid var(--ink); border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(1.15rem, 3vw, 1.7rem);
}
.card h3 { margin-bottom: 0.45em; }
.card__tag {
  display: inline-block;
  font-family: var(--f-pixel); font-size: 0.64rem;
  text-transform: uppercase; letter-spacing: 0.05em;
  background: var(--cyan); border: 2px solid var(--ink);
  border-radius: 999px; padding: 0.3em 0.7em; margin-bottom: 0.7rem;
}
.card--pink  { background: var(--pink);   color: var(--white); }
.card--teal  { background: var(--teal);   color: var(--white); }
.card--yellow{ background: var(--yellow); color: var(--ink); }
.card--cyan  { background: var(--cyan);   color: var(--ink); }
.card--pink .card__tag, .card--teal .card__tag { background: var(--yellow); }

/* Anklickbare Kachel */
a.card { text-decoration: none; display: block; transition: transform 0.14s, box-shadow 0.14s; }
a.card:hover { transform: translate(-2px, -2px); box-shadow: 10px 10px 0 var(--ink); }
a.card .card__more { font-family: var(--f-display); font-weight: 800; display: inline-flex; align-items: center; gap: 0.35em; margin-top: 0.6rem; }
a.card .card__more svg { width: 1em; height: 1em; transition: transform 0.14s; }
a.card:hover .card__more svg { transform: translateX(4px); }

/* Chips fuer kurze Aufzaehlungen wie die Staende auf dem Festplatz */
.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; padding: 0; margin: 0; }
.chips li {
  font-family: var(--f-display); font-weight: 700;
  background: var(--white); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 999px;
  padding: 0.4em 1em; box-shadow: var(--shadow-sm);
}
.chips--alt li:nth-child(4n+1) { background: var(--yellow); }
.chips--alt li:nth-child(4n+2) { background: var(--cyan); }
.chips--alt li:nth-child(4n+3) { background: var(--pink-lt); }
.chips--alt li:nth-child(4n+4) { background: var(--white); }

/* ---------- 12. Zeitstrahl / Programm ----------
   Die Punkte haengen absolut am Textkasten statt am Listenpunkt. Nur so
   sitzen sie unabhaengig von der Textlaenge immer auf gleicher Hoehe. */
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline::before {
  content: ""; position: absolute;
  left: clamp(52px, 12vw, 74px); top: 0.6rem; bottom: 0.6rem;
  width: 5px; border-radius: 3px;
  /* volle Progress-Pride-Reihenfolge, harte Kanten statt weicher Verlauf */
  background: linear-gradient(180deg,
    var(--pr-black)  0%,     var(--pr-black)  9.09%,
    var(--pr-brown)  9.09%,  var(--pr-brown)  18.18%,
    var(--pr-blue)   18.18%, var(--pr-blue)   27.27%,
    var(--pr-pink)   27.27%, var(--pr-pink)   36.36%,
    var(--pr-white)  36.36%, var(--pr-white)  45.45%,
    var(--rb-red)    45.45%, var(--rb-red)    54.54%,
    var(--rb-orange) 54.54%, var(--rb-orange) 63.63%,
    var(--rb-yellow) 63.63%, var(--rb-yellow) 72.72%,
    var(--rb-green)  72.72%, var(--rb-green)  81.81%,
    var(--rb-blue)   81.81%, var(--rb-blue)   90.90%,
    var(--rb-purple) 90.90%, var(--rb-purple) 100%);
}
.tl-item {
  position: relative;
  display: grid;
  grid-template-columns: clamp(52px, 12vw, 74px) 1fr;
  gap: 0 clamp(0.9rem, 3vw, 1.5rem);
  padding-bottom: 1.15rem;
}
.tl-item:last-child { padding-bottom: 0; }
.tl-time {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.2rem);
  line-height: 1.5; text-align: right; color: var(--yellow);
  font-variant-numeric: tabular-nums;
}
.tl-body {
  position: relative;
  background: rgba(255, 255, 255, 0.08);
  border: 2.5px solid rgba(255, 255, 255, 0.32);
  border-radius: 14px;
  padding: 0.6rem 0.95rem 0.7rem;
}
.tl-body::before {
  content: ""; position: absolute;
  left: calc(-1 * clamp(0.9rem, 3vw, 1.5rem) - 10px); top: 0.85rem;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--yellow); border: 3px solid var(--purple);
}
.tl-title { font-family: var(--f-display); font-weight: 800; font-size: 1.1rem; line-height: 1.25; }
.tl-note { font-size: 0.93rem; opacity: 0.9; margin-top: 0.1rem; }
.tl-item--highlight .tl-body { background: var(--pink); border-color: var(--white); }
.tl-item--highlight .tl-body::before { background: var(--cyan); }

/* ---------- 13. Hinweis-/Awareness-Box ---------- */
.notice {
  border: 4px solid var(--ink);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow);
  padding: clamp(1.3rem, 3.5vw, 2.1rem);
  position: relative;
}
.notice__head {
  display: flex; align-items: center; gap: 0.7rem;
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(1.15rem, 1rem + 0.9vw, 1.5rem);
  margin-bottom: 0.7rem;
}
.notice__head svg { width: 1.6rem; height: 1.6rem; flex: none; color: var(--pink-dk); }
.notice ul { padding-left: 1.15rem; }
.notice li { margin-bottom: 0.45em; }

/* ---------- 14. Grußwort / Zitat ---------- */
.quote {
  display: grid; gap: clamp(1.2rem, 3vw, 2.2rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 760px) { .quote { grid-template-columns: 190px 1fr; } }
.quote__portrait {
  width: 100%; max-width: 190px; aspect-ratio: 1;
  object-fit: cover;
  border: 4px solid var(--cyan); border-radius: 22px;
  background: var(--purple-lt);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.28);
}
/* Bildnachweis unter einem Foto. Wird gerade nirgends gebraucht, bleibt
   aber liegen: sobald mal ein Bild dazukommt, bei dem die Urheber*in
   genannt werden muss, ist die Klasse schon da. Dann das Bild in ein
   <figure> packen und eine <figcaption class="bildnachweis"> ergaenzen. */
.bildnachweis {
  font-size: 0.75rem;
  line-height: 1.35;
  opacity: 0.78;
  margin-top: 0.5rem;
  max-width: 190px;
}
.quote blockquote { margin: 0; font-size: 1.05em; }
.quote cite { font-style: normal; display: block; margin-top: 1.1rem; }
.quote cite b { display: block; font-family: var(--f-display); font-size: 1.15rem; }
.quote cite span { display: block; font-size: 0.92rem; opacity: 0.85; }

/* ---------- 15. Spendenkonto ---------- */
.iban-box {
  background: var(--white); color: var(--ink);
  border: 4px solid var(--ink); border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: clamp(1.2rem, 3.5vw, 2rem);
}
.iban-row {
  display: grid; gap: 0.15rem 1rem;
  grid-template-columns: 1fr;
  padding: 0.75rem 0;
  border-bottom: 2px dashed var(--paper-2);
}
.iban-row:last-of-type { border-bottom: 0; }
@media (min-width: 620px) { .iban-row { grid-template-columns: 190px 1fr; align-items: baseline; } }
.iban-row dt {
  font-family: var(--f-pixel); font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--pink-dk);
}
.iban-row dd {
  margin: 0; font-family: var(--f-display); font-weight: 700;
  font-size: 1.08rem; word-break: break-word;
}
.iban-row dd.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 1rem; letter-spacing: 0.02em; }
.copy-btn { margin-top: 1.2rem; }
.copy-btn[data-copied="true"] { background: var(--cyan); }

/* ---------- 16. Partner-Logos ----------
   Solange wir die Logodateien der Unterstuetzer*innen nicht vorliegen haben,
   stehen sie hier schlicht als Text. Sieht ruhiger aus als schlecht
   freigestellte PNGs in acht verschiedenen Groessen. */
.partners {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: clamp(1.2rem, 4vw, 2.8rem);
}
.partners li { list-style: none; }
.partner {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(0.9rem, 0.85rem + 0.3vw, 1.05rem);
  color: var(--ink-soft); text-align: center;
  display: grid; gap: 0.15rem;
}
.partner b { display: block; color: var(--ink); font-size: 1.1em; }

/* Logowand fuer Foerder- und Partnerlogos.
   Die Hoehe wird vorgegeben, die Breite ergibt sich. So stehen Logos in
   voellig unterschiedlichen Seitenverhaeltnissen trotzdem optisch gleich
   gross nebeneinander, ohne dass man jede Datei einzeln zurechtschneidet. */
.logo-wall {
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center;
  gap: clamp(1rem, 3.5vw, 2.4rem);
  list-style: none; padding: 0; margin: 0;
}
.logo-wall img {
  height: clamp(48px, 8vw, 72px);
  width: auto; max-width: 260px;
  object-fit: contain;
}

/* Die Förderleiste kam als eine sehr breite Datei. Sie liegt jetzt in
   Blöcken vor, alle mit derselben Ausgangshöhe. Dadurch reicht eine
   gemeinsame Höhenangabe und der Maßstab untereinander bleibt genau so,
   wie er in der freigegebenen Vorlage war. Etwas größer als bei den
   übrigen Logos, sonst ist die Feinschrift beim Ministerium nicht mehr
   zu entziffern. */
.logo-wall--foerderung img {
  height: clamp(72px, 21vw, 100px);
  max-width: min(100%, 420px);
}
.logo-wall--foerderung { gap: clamp(1.4rem, 4vw, 2.6rem) 1.6rem; }

/* Platzhalter, solange die echten Logodateien noch fehlen.
   Bewusst als gestrichelter Kasten, damit niemand ausversehen damit
   online geht und denkt, das sei so gewollt. */
.logo-slot {
  display: grid; place-content: center; gap: 0.3rem;
  min-width: clamp(160px, 32vw, 215px);
  min-height: clamp(68px, 11vw, 90px);
  padding: 0.75rem 1rem;
  border: 3px dashed var(--ink);
  border-radius: 14px;
  background: repeating-linear-gradient(45deg,
    transparent 0 9px, rgba(30, 18, 51, 0.055) 9px 18px);
  text-align: center;
}
.logo-slot b {
  font-family: var(--f-display); font-weight: 800;
  font-size: 0.95rem; line-height: 1.2;
}
.logo-slot span {
  font-family: var(--f-pixel); font-size: 0.55rem;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--pink-dk);
}

.foerder-hinweis {
  max-width: 66ch; margin-inline: auto;
  font-size: 0.95rem;
}

/* ---------- 17. Footer ---------- */
.footer {
  background: var(--purple-dk); color: var(--white);
  padding-block: clamp(2.6rem, 6vw, 4rem) 1.5rem;
  position: relative;
}
.footer__grid {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  margin-bottom: 2.2rem;
}
.footer h3 { font-size: 1.15rem; margin-bottom: 0.7rem; color: var(--yellow); }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.45rem; }
.footer a { color: var(--white); text-decoration: none; border-bottom: 2px solid transparent; }
.footer a:hover { border-bottom-color: var(--cyan); }
.footer__brand img { height: 62px; width: auto; margin-bottom: 0.9rem; }
.footer__social { display: flex; gap: 0.6rem; margin-top: 0.9rem; }
.footer__social a {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 2.5px solid var(--white); border-radius: 50%;
  transition: background 0.15s, color 0.15s;
}
.footer__social a:hover { background: var(--cyan); color: var(--purple-dk); border-color: var(--cyan); }
.footer__social svg { width: 20px; height: 20px; }
.footer__bottom {
  border-top: 2px solid rgba(255, 255, 255, 0.22);
  padding-top: 1.3rem;
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem;
  justify-content: space-between; align-items: center;
  font-size: 0.9rem;
}
.footer__bottom nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }

/* ---------- 18. Unterseiten-Hero ---------- */
.page-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(160deg, var(--purple-dk), var(--purple) 55%, var(--purple-lt));
  color: var(--white);
  padding-block: clamp(2.6rem, 6vw, 4.4rem) clamp(3.6rem, 8vw, 5.6rem);
  text-align: center;
}
.page-hero__confetti { z-index: -1; opacity: 0.4; }
.page-hero p { max-width: 62ch; margin-inline: auto; }

/* ---------- 19. Rechtstexte ---------- */
.legal { max-width: 74ch; }
.legal h2 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); margin-top: 2.2rem; }
.legal h2:first-child { margin-top: 0; }
.legal h3 { font-size: 1.15rem; margin-top: 1.6rem; }
.legal address { font-style: normal; }
/* Redaktioneller Hinweis an das Orga-Team. Absichtlich auffaellig, damit
   niemand damit live geht. Wird auch ausserhalb der Rechtstexte benutzt. */
.todo {
  background: var(--yellow); border: 3px dashed var(--ink); border-radius: 14px;
  padding: 0.8rem 1rem; font-weight: 700;
}
.legal a { color: var(--pink-dk); font-weight: 700; }

/* ---------- 20. Scroll-Reveal ----------
   Bewusst an .js-ready gekoppelt. Die Klasse setzt main.js erst, wenn es
   wirklich laeuft. Ohne JavaScript wird hier also gar nichts erst versteckt
   und niemand guckt auf eine leere Seite, weil ein Skript nicht geladen hat. */
.js-ready .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.js-ready .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- 21. Reduzierte Bewegung ----------
   Wer im Betriebssystem Bewegung reduziert hat, bekommt hier alles
   ruhiggestellt, inklusive Konfetti-Drift und weichem Scrollen. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js-ready .reveal { opacity: 1; transform: none; }
}

/* ---------- 22. Druck ----------
   Damit Helfer*innen sich den Ablauf ausdrucken koennen, ohne eine halbe
   Patrone Farbe zu verbrauchen. */
@media print {
  .header, .footer__social, .nav-toggle, .torn, .confetti-layer,
  .hero__confetti, .hero__ribbon, .hero__sun, .palm, .countdown { display: none !important; }
  body { background: #fff; color: #000; }
  .sec, .hero, .page-hero { background: #fff !important; color: #000 !important; padding-block: 1rem; }
  .display, .tl-time { color: #000; text-shadow: none; }
  .pixel { color: #000; text-shadow: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}