/* =========================================================
   GraJuKl – Grabau Jugendklub
   Stil passend zum Logo "GRAJUKL": bunte Pinselfarben,
   dunkle Schrift, viel Weiß, Konfetti-Punkte.
   Farben und Schriften zentral hier ändern.
   ========================================================= */

/* Schriften liegen lokal im Ordner fonts/ (DSGVO-freundlich, kein Google-Server) */
@font-face { font-family: "Permanent Marker"; src: url("../fonts/permanent-marker.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../fonts/nunito-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../fonts/nunito-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../fonts/nunito-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  /* Logo-Farben */
  --rot: #d6282d;
  --orange: #e8703a;
  --pink: #d9407f;
  --gruen: #77a32e;
  --blau: #1499b0;
  --gelb: #f2b01e;
  --lila: #8a3fa3;
  --tinte: #1b1a22;          /* schwarzer Pinselstrich wie hinter "Grabauer Jugend Klub" */

  /* abgeleitete Töne */
  --rot-hell: #fbe9e9;
  --gruen-hell: #eef7e8;
  --blau-hell: #e5f4f6;
  --gelb-hell: #fff6df;
  --lila-hell: #f3eaf7;

  --text: #1e1d2b;
  --text-leise: #575668;
  --hintergrund: #ffffff;
  --karte: #ffffff;
  --linie: #ecebf1;
  --radius: 22px;
  --schatten: 0 8px 24px rgba(30, 29, 43, 0.08);
  --breite: 1120px;

  --schrift: "Nunito", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --schrift-titel: "Permanent Marker", "Comic Sans MS", "Segoe Print", cursive;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 1.07rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--hintergrund);
}
img { max-width: 100%; display: block; }
a { color: var(--blau); font-weight: 700; }
a:hover { color: var(--rot); }
h1, h2 { font-family: var(--schrift-titel); font-weight: 400; line-height: 1.15; margin: 0 0 .5em; letter-spacing: .01em; }
h1 { font-size: clamp(2.2rem, 5.5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.8vw, 2.4rem); }
h3 { font-family: var(--schrift); font-weight: 800; font-size: 1.25rem; line-height: 1.3; margin: 0 0 .5em; }
p { margin: 0 0 1em; }

/* Pinselstrich unter Überschriften (wie unter "JUGENDKLUB") */
h2::after {
  content: ""; display: block; width: 120px; height: 12px; margin-top: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M3 8 C 35 2, 80 2, 117 6' stroke='%231e1d2b' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;
}
.kasten h2::after, .advent-teaser h2::after { display: none; }

/* Überschriften reihum in Logo-Farben */
main section:nth-of-type(5n+1) h2 { color: var(--rot); }
main section:nth-of-type(5n+2) h2 { color: var(--blau); }
main section:nth-of-type(5n+3) h2 { color: var(--gruen); }
main section:nth-of-type(5n+4) h2 { color: var(--lila); }
main section:nth-of-type(5n+5) h2 { color: var(--gelb); }
.f1 { color: var(--rot); } .f2 { color: var(--orange); } .f3 { color: var(--blau); }

.container { max-width: var(--breite); margin: 0 auto; padding: 0 20px; }
.abschnitt { padding: 60px 0; position: relative; }
.abschnitt.farbig { background: var(--blau-hell); }
.abschnitt.warm { background: var(--gelb-hell); }
.einleitung { font-size: 1.15rem; color: var(--text-leise); max-width: 720px; }
.platzhalter-text { background: #fff27a; padding: 0 .25em; border-radius: 4px; color: var(--tinte); }

/* Konfetti-Punkte am Rand (Startseite, Seitenköpfe) – nur links und rechts, nie hinter dem Text */
.konfetti { position: relative; }
.konfetti > .container { position: relative; z-index: 1; }
.konfetti::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle, var(--rot) 0 7px, transparent 8px),
    radial-gradient(circle, var(--blau) 0 5px, transparent 6px),
    radial-gradient(circle, var(--gelb) 0 8px, transparent 9px),
    radial-gradient(circle, var(--gruen) 0 4px, transparent 5px),
    radial-gradient(circle, var(--lila) 0 6px, transparent 7px);
  background-size: 413px 287px, 297px 353px, 521px 409px, 233px 271px, 359px 317px;
  background-position: 37px 51px, 171px 203px, 289px 17px, 83px 149px, 241px 97px;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 6%, transparent 13%, transparent 87%, #000 94%);
          mask-image: linear-gradient(90deg, #000 0, #000 6%, transparent 13%, transparent 87%, #000 94%);
  opacity: .8;
}

/* ---------- Kopfzeile & Navigation ---------- */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(30, 29, 43, .05);
}
.kopf .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 78px; }
.logo { display: block; flex: none; }
.logo img { height: 70px; width: auto; transition: transform .2s; }
.logo:hover img { transform: rotate(-2deg) scale(1.04); }

.konfetti-leiste {
  height: 6px;
  background: linear-gradient(90deg,
    var(--rot) 0 14.3%, var(--orange) 14.3% 28.6%, var(--gelb) 28.6% 42.9%, var(--gruen) 42.9% 57.1%,
    var(--blau) 57.1% 71.4%, var(--lila) 71.4% 85.7%, var(--pink) 85.7% 100%);
}

.navi ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; flex-wrap: wrap; }
.navi a {
  display: block; padding: 8px 14px; border-radius: 999px;
  text-decoration: none; color: var(--tinte); font-weight: 800; font-size: .97rem;
  transition: background .15s, color .15s, transform .15s;
}
.navi li:nth-child(5n+1) a { --c: var(--rot); }
.navi li:nth-child(5n+2) a { --c: var(--orange); }
.navi li:nth-child(5n+3) a { --c: var(--blau); }
.navi li:nth-child(5n+4) a { --c: var(--gelb); }
.navi li:nth-child(5n+5) a { --c: var(--lila); }
.navi li:nth-child(6) a { --c: var(--pink); }
.navi a:hover { color: var(--c); transform: translateY(-1px); }
.navi a[aria-current="page"] { background: var(--c); color: #fff; transform: rotate(-2deg); }

.menue-knopf {
  display: none; border: 0; background: var(--tinte); color: #fff;
  border-radius: 12px; padding: 9px 16px; font: inherit; font-weight: 800; cursor: pointer;
}

@media (max-width: 960px) {
  .menue-knopf { display: block; }
  .logo img { height: 52px; }
  .navi { display: none; position: absolute; left: 0; right: 0; top: 100%;
          background: #fff; box-shadow: 0 10px 20px rgba(30,29,43,.08); }
  .navi.offen { display: block; }
  .navi ul { flex-direction: column; padding: 10px 20px 16px; }
  .navi a { border-radius: 12px; padding: 12px 14px; }
  .navi a[aria-current="page"] { transform: none; }
}

/* ---------- Seitenkopf / Hero ---------- */
.hero { padding: 40px 0 64px; }
.hero .container { display: grid; grid-template-columns: 1.05fr 1fr; gap: 44px; align-items: center; }
.hero-logo { width: min(440px, 100%); height: auto; margin: 0 0 12px -8px; }
.hero h1 { color: var(--tinte); }
.hero p { font-size: 1.18rem; color: var(--text-leise); }
@media (max-width: 860px) { .hero .container { grid-template-columns: 1fr; } }

.seitenkopf { padding: 52px 0 28px; }
.seitenkopf h1 { color: var(--tinte); }
.seitenkopf p { font-size: 1.18rem; color: var(--text-leise); max-width: 720px; }

/* ---------- Bilder mit Platzhalter ---------- */
.bild {
  position: relative; margin: 0;
  border-radius: var(--radius); overflow: hidden;
  background: repeating-linear-gradient(45deg, var(--blau-hell) 0 14px, #f4fafd 14px 28px);
  aspect-ratio: 4 / 3;
  box-shadow: var(--schatten);
}
.bild.breit { aspect-ratio: 16 / 9; }
.bild::before {
  content: "Bild folgt: " attr(data-datei);
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  padding: 16px; color: var(--blau); font-size: .9rem; font-weight: 800;
}
.bild img { position: relative; width: 100%; height: 100%; object-fit: cover; }
.bild figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 14px;
  background: linear-gradient(transparent, rgba(0,0,0,.55)); color: #fff; font-size: .92rem; font-weight: 700;
}
.hero .bild, .zwei .bild { border: 8px solid #fff; transform: rotate(2deg); box-shadow: 0 14px 34px rgba(30,29,43,.14); }
.hero .bild { outline: 4px dashed var(--gelb); outline-offset: 10px; }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px; border-radius: 999px;
  background: var(--rot); color: #fff; font-weight: 800; text-decoration: none;
  border: 3px solid var(--rot);
  box-shadow: 0 4px 0 rgba(30,29,43,.18);
  transition: transform .15s, box-shadow .15s, background .15s;
}
.knopf:hover { color: #fff; transform: translateY(-2px) rotate(-1deg); box-shadow: 0 6px 0 rgba(30,29,43,.18); }
.knopf.zweit { background: #fff; color: var(--tinte); border-color: var(--tinte); }
.knopf.zweit:hover { background: var(--tinte); color: #fff; }
.knopf.klein { padding: 8px 18px; font-size: .95rem; }
.knopf-reihe { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }

/* ---------- Karten / Raster ---------- */
.raster { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.karte {
  --c: var(--rot); --ch: var(--rot-hell);
  background: var(--karte); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--schatten);
  border: 2px solid var(--linie); border-top: 8px solid var(--c);
  display: flex; flex-direction: column;
  transition: transform .2s;
}
.karte:hover { transform: translateY(-4px) rotate(-.4deg); }
.raster > .karte:nth-child(5n+2) { --c: var(--gruen); --ch: var(--gruen-hell); }
.raster > .karte:nth-child(5n+3) { --c: var(--blau);  --ch: var(--blau-hell); }
.raster > .karte:nth-child(5n+4) { --c: var(--gelb);  --ch: var(--gelb-hell); }
.raster > .karte:nth-child(5n+5) { --c: var(--lila);  --ch: var(--lila-hell); }
.karte .bild { margin: -24px -24px 18px; border-radius: 12px 12px 0 0; box-shadow: none; }
.karte p:last-of-type { flex: 1; }
.karte .knopf { align-self: flex-start; background: var(--c); border-color: var(--c); }
.symbol {
  font-size: 1.8rem; line-height: 1; margin-bottom: 14px;
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ch);
}

/* Aktionen */
.aktion-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .94rem; color: var(--text-leise); margin-bottom: 10px; }
.aktion-meta strong { color: var(--text); }
.datum-schild {
  display: inline-block; background: var(--c, var(--tinte)); color: #fff;
  border-radius: 10px; padding: 4px 12px; font-weight: 800; font-size: .9rem; margin-bottom: 12px;
  align-self: flex-start; transform: rotate(-1.5deg);
}
.datum-schild .platzhalter-text { color: var(--tinte); }

/* Kasten (Newsletter, Ideen) */
.kasten {
  border-radius: calc(var(--radius) + 6px); padding: 40px;
  background: var(--blau); color: #fff;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: center;
  position: relative; overflow: hidden;
}
.kasten > * { position: relative; }
.kasten h2 { color: #fff !important; }
.kasten p { color: #f2f9fd; margin: 0; }
.kasten .knopf-reihe { justify-content: flex-end; }
.kasten .knopf { background: var(--gelb); border-color: var(--gelb); color: var(--tinte); }
.kasten.orange { background: var(--orange); }
.kasten.orange p { color: #fff3ec; }
.kasten.orange .knopf { background: var(--tinte); border-color: var(--tinte); color: #fff; }
@media (max-width: 760px) {
  .kasten { grid-template-columns: 1fr; padding: 28px; }
  .kasten .knopf-reihe { justify-content: flex-start; }
}

/* Zeitstrahl (Rückblick) */
.zeitstrahl { list-style: none; padding: 0; margin: 0; border-left: 5px dotted var(--blau); }
.zeitstrahl li { position: relative; padding: 0 0 28px 30px; }
.zeitstrahl li::before {
  content: ""; position: absolute; left: -14px; top: 4px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--rot); border: 4px solid #fff; box-shadow: 0 0 0 2px var(--rot);
}
.zeitstrahl li:nth-child(2)::before { background: var(--orange); box-shadow: 0 0 0 2px var(--orange); }
.zeitstrahl li:nth-child(3)::before { background: var(--gelb); box-shadow: 0 0 0 2px var(--gelb); }
.zeitstrahl li:nth-child(4)::before { background: var(--lila); box-shadow: 0 0 0 2px var(--lila); }
.zeitstrahl .jahr { font-weight: 800; color: var(--tinte); }

/* Zitat */
.zitat {
  font-family: var(--schrift-titel); font-size: clamp(1.3rem, 3vw, 1.8rem); line-height: 1.35;
  text-align: center; color: var(--tinte); max-width: 820px; margin: 0 auto;
}

/* Zwei Spalten */
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 860px) { .zwei { grid-template-columns: 1fr; } }

/* ---------- Adventskalender ---------- */
.advent-teaser {
  display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center;
  background: var(--rot); color: #fff;
  border-radius: calc(var(--radius) + 6px); padding: 30px 34px;
  box-shadow: 0 10px 0 rgba(30,29,43,.08);
}
.advent-teaser h2 { color: #fff !important; margin-bottom: .2em; }
.advent-teaser p { margin: 0; color: #ffe9e8; }
.advent-teaser .stern { font-size: 3.2rem; line-height: 1; color: var(--gelb); }
.advent-teaser .knopf { background: #fff; color: var(--rot); border-color: #fff; }
@media (max-width: 760px) { .advent-teaser { grid-template-columns: 1fr; } }

.status-schild {
  display: inline-block; padding: 4px 14px; border-radius: 999px;
  font-size: .88rem; font-weight: 800; background: var(--gelb); color: var(--tinte); margin-bottom: 12px;
  transform: rotate(-2deg);
}

.tuerchen-raster { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.tuerchen {
  --c: var(--rot);
  background: #fff; border: 3px dashed var(--c); border-radius: 16px;
  padding: 14px; min-height: 132px; display: flex; flex-direction: column;
}
.tuerchen:nth-child(5n+2) { --c: var(--gruen); }
.tuerchen:nth-child(5n+3) { --c: var(--blau); }
.tuerchen:nth-child(5n+4) { --c: var(--gelb); }
.tuerchen:nth-child(5n+5) { --c: var(--lila); }
.tuerchen .nummer { font-family: var(--schrift-titel); font-size: 2.1rem; color: var(--c); line-height: 1; }
.tuerchen .wochentag { font-size: .82rem; color: var(--text-leise); margin-bottom: 8px; }
.tuerchen .gastgeber { font-weight: 800; font-size: .95rem; }
.tuerchen .ort { font-size: .86rem; color: var(--text-leise); }
.tuerchen.vergeben { border-style: solid; background: var(--c); color: #fff; }
.tuerchen.vergeben .nummer, .tuerchen.vergeben .wochentag, .tuerchen.vergeben .ort { color: #fff; }
.tuerchen.frei a { margin-top: auto; font-size: .88rem; color: var(--tinte); }
.tuerchen.heute { box-shadow: 0 0 0 5px var(--tinte); }

.schritte { counter-reset: schritt; list-style: none; padding: 0; display: grid; gap: 18px; }
.schritte li { counter-increment: schritt; position: relative; padding-left: 58px; }
.schritte li::before {
  content: counter(schritt); position: absolute; left: 0; top: -4px;
  width: 42px; height: 42px; border-radius: 50%; background: var(--rot); color: #fff;
  display: grid; place-items: center; font-family: var(--schrift-titel); font-size: 1.2rem;
}
.schritte li:nth-child(2)::before { background: var(--gruen); }
.schritte li:nth-child(3)::before { background: var(--blau); }
.schritte li:nth-child(4)::before { background: var(--lila); }

/* ---------- Kontakt ---------- */
.kontakt-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.kontakt-liste li { display: flex; gap: 12px; align-items: baseline; }
.kontakt-liste span:first-child { width: 28px; flex: none; }

/* ---------- Rechtstexte ---------- */
.rechtstext { max-width: 780px; }
.rechtstext h2 { font-family: var(--schrift); font-weight: 800; font-size: 1.3rem; margin-top: 1.6em; color: var(--tinte) !important; }
.rechtstext h2::after { display: none; }
.hinweis {
  background: var(--gelb-hell); border: 2px solid var(--gelb); color: var(--tinte);
  border-radius: 14px; padding: 14px 18px; margin-bottom: 24px; font-size: .95rem;
}

/* ---------- Fußzeile ---------- */
.fuss { background: var(--tinte); color: #d9d8e6; padding: 0 0 28px; margin-top: 48px; }
.fuss::before {
  content: ""; display: block; height: 8px; margin-bottom: 40px;
  background: linear-gradient(90deg,
    var(--rot) 0 14.3%, var(--orange) 14.3% 28.6%, var(--gelb) 28.6% 42.9%, var(--gruen) 42.9% 57.1%,
    var(--blau) 57.1% 71.4%, var(--lila) 71.4% 85.7%, var(--pink) 85.7% 100%);
}
.fuss .container { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 28px; }
.fuss-logo { width: 220px; height: auto; background: #fff; border-radius: 16px; padding: 8px 12px; margin-bottom: 14px; transform: rotate(-2deg); }
.fuss h3 { color: #fff; font-size: 1.05rem; }
.fuss a { color: #fff; font-weight: 700; }
.fuss a:hover { color: var(--gelb); }
.fuss ul { list-style: none; padding: 0; margin: 0; }
.fuss li { margin-bottom: 6px; }
.fuss .unterzeile { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.15); padding-top: 18px; font-size: .9rem; }
@media (max-width: 760px) { .fuss .container { grid-template-columns: 1fr; } }

/* Sichtbarkeit nach Jahreszeit (wird per JavaScript gesteuert) */
[data-advent-zeige][hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

@media (max-width: 700px) { .konfetti::before { display: none; } }

/* Heller Zweit-Knopf auf farbigem Kasten */
.knopf.zweit-hell { background: transparent; color: #fff; border-color: #fff; }
.knopf.zweit-hell:hover { background: #fff; color: var(--tinte); }
.kasten .knopf-reihe { gap: 10px; }

/* ---------- Große Aktion (z. B. Halloween) ---------- */
.aktion-gross { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.aktion-gross .bild { border: 8px solid #fff; transform: rotate(-1.5deg); box-shadow: 0 14px 34px rgba(30,29,43,.16); }
.bild.quer { aspect-ratio: 3 / 2; }
@media (max-width: 860px) { .aktion-gross { grid-template-columns: 1fr; } }

.steckbrief {
  margin-top: 32px; display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.steckbrief > div {
  background: #fff; border: 2px solid var(--linie); border-radius: 16px; padding: 14px 16px;
  font-weight: 700; line-height: 1.45; border-left: 6px solid var(--orange);
}
.steckbrief > div:nth-child(2) { border-left-color: var(--lila); }
.steckbrief > div:nth-child(3) { border-left-color: var(--gruen); }
.steckbrief > div:nth-child(4) { border-left-color: var(--blau); }
.steckbrief span {
  display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-leise); font-weight: 800; margin-bottom: 4px;
}
.steckbrief .wichtig { background: var(--tinte); color: #fff; border-color: var(--tinte); border-left-color: var(--rot); }
.steckbrief .wichtig span { color: var(--gelb); }
[data-ablauf][hidden] { display: none !important; }

/* ---------- Rückblick-Highlight mit Foto-Collage ---------- */
.rueckblick-highlight {
  background: #fff; border-radius: calc(var(--radius) + 6px); padding: 32px;
  box-shadow: var(--schatten); margin-bottom: 32px; border-top: 8px solid var(--rot);
}
.collage { position: relative; padding: 0 70px 60px 0; }
.collage .bild { border: 8px solid #fff; box-shadow: 0 12px 30px rgba(30,29,43,.18); }
.collage .bild.quer { aspect-ratio: 4 / 3; transform: rotate(-2deg); }
.collage .bild.hoch {
  position: absolute; right: 0; bottom: 0; width: 38%; aspect-ratio: 3 / 4; transform: rotate(4deg);
}
h3.gross { font-family: var(--schrift-titel); font-weight: 400; font-size: clamp(1.6rem, 3.5vw, 2.2rem); color: var(--rot); }
@media (max-width: 860px) { .rueckblick-highlight { padding: 20px; } .collage { padding: 0 40px 50px 0; } }

/* ---------- Wundertüte: Waldtiere, Bericht, Galerie ---------- */
.wundertuete { border-top-color: var(--gruen); }
.wundertuete h3.gross { color: var(--gruen); }
.wundertuete .aktion-gross .bild { transform: rotate(1.5deg); }
.waldtiere { list-style: none; padding: 0; margin: 28px 0 8px; display: flex; flex-wrap: wrap; gap: 10px; }
.waldtiere li {
  display: flex; align-items: center; gap: 8px; padding: 8px 16px 8px 10px;
  background: var(--gruen-hell); border-radius: 999px; font-size: .95rem;
}
.waldtiere li:nth-child(2) { background: var(--rot-hell); }
.waldtiere li:nth-child(3) { background: var(--gelb-hell); }
.waldtiere li:nth-child(4) { background: var(--lila-hell); }
.waldtiere li:nth-child(5) { background: var(--blau-hell); }
.waldtiere span { font-size: 1.4rem; line-height: 1; }
.waldtiere b { font-weight: 800; }
.bericht { columns: 2 340px; column-gap: 40px; margin-top: 18px; }
.bericht p { break-inside: avoid; }
.galerie { display: grid; gap: 12px; grid-template-columns: repeat(5, 1fr); margin-top: 12px; }
.galerie figure { margin: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 1 / 1; background: var(--gruen-hell); }
.galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.galerie figure:hover img { transform: scale(1.06); }
@media (max-width: 760px) { .galerie { grid-template-columns: repeat(2, 1fr); } .galerie figure:first-child { grid-column: span 2; aspect-ratio: 16 / 10; } }

/* ---------- Vogelfutter ---------- */
.vogelfutter { border-top-color: var(--blau); }
.vogelfutter h3.gross { color: var(--blau); }
.vogelfutter .aktion-gross { grid-template-columns: 1fr 1.1fr; }
.vogelfutter .bild { transform: rotate(2deg); }
.unterschrift { font-family: var(--schrift-titel); font-size: 1.15rem; color: var(--text-leise); margin-top: 6px; }
@media (max-width: 860px) {
  .vogelfutter .aktion-gross { grid-template-columns: 1fr; }
  .vogelfutter .aktion-gross > div { order: 2; }
}

/* ---------- Lichterfest ---------- */
.lichterfest { border-top-color: var(--orange); }
.lichterfest h3.gross { color: var(--orange); }
.lichterfest .bild { transform: rotate(-2deg); }
/* Wundertüte: Bild rechts, damit sich die Seiten abwechseln */
@media (min-width: 861px) {
  .wundertuete .aktion-gross { grid-template-columns: 1fr 1.1fr; }
  .wundertuete .aktion-gross > .bild { order: 2; }
}

/* ---------- Neuigkeit "Webseite online" ---------- */
.neuigkeit { border-top-color: var(--lila); margin-bottom: 0; }
.neuigkeit h2 { color: var(--lila) !important; }
.neuigkeit .bild { transform: rotate(-1.5deg); }
.neuigkeit .knopf-reihe { margin-top: 6px; }
.bild-link { display: block; text-decoration: none; color: inherit; }
.bild-link .bild { transition: transform .2s; }
.bild-link:hover .bild { transform: rotate(0deg) scale(1.02); }
.bild-link figcaption { font-size: 1rem; }

/* ---------- Porträt Kontakt ---------- */
.zwei .bild.portrait { aspect-ratio: 3 / 4; max-width: 380px; justify-self: center; transform: rotate(2.5deg); }
.bild.portrait img { object-position: center top; }

/* ---------- Artikel & weitere Pläne ---------- */
.artikel details { margin: 4px 0 14px; }
.artikel summary { cursor: pointer; font-weight: 800; color: var(--blau); }
.artikel details[open] summary { margin-bottom: 10px; }
.artikel p:last-of-type { flex: initial; }
.pdf-link { margin-top: auto; font-size: .95rem; }
.pdf-link::before { content: "⬇ "; }
.zwei-karten { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.zwei-karten .karte p:last-of-type { flex: initial; }
.mitmach-hinweis { background: var(--gelb-hell); border-radius: 12px; padding: 12px 14px; margin-top: auto; }

/* ---------- Unterseiten (Artikel zum Lesen) ---------- */
.zurueck { display: table; margin-bottom: 14px; font-size: .95rem; text-decoration: none; }
.artikel-bild { max-width: 980px; margin: 0 auto 36px; transform: rotate(-.8deg); border: 8px solid #fff; }
.artikel-text { max-width: 760px; margin: 0 auto; font-size: 1.12rem; }
.artikel-text > p:first-child::first-letter {
  font-family: var(--schrift-titel); float: left; font-size: 3.4rem; line-height: .9; padding: 6px 8px 0 0; color: var(--rot);
}
.zwei-karten .karte .bild-link { margin: -24px -24px 18px; }
.zwei-karten .karte .bild-link .bild { border-radius: 12px 12px 0 0; box-shadow: none; }
.zwei-karten .karte .knopf { margin-top: auto; }
.zwei-karten .karte { overflow: hidden; }

/* ---------- Türchen mit Bild ---------- */
.tuerchen { padding: 0 0 14px; overflow: hidden; }
.tuerchen > *:not(.tuer-bild) { margin-left: 14px; margin-right: 14px; }
.tuer-bild { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; margin-bottom: 10px; transition: transform .3s; }
.tuerchen:hover .tuer-bild { transform: scale(1.05); }
.tuerchen .nummer { display: none; }
.tuerchen .wochentag { font-weight: 800; color: var(--tinte); font-size: .88rem; }
.tuerchen.vergeben .wochentag { color: #fff; }
.tuerchen-raster { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.artikel > .bild-link { margin: -24px -24px 18px; }
.artikel > .bild-link .bild { border-radius: 12px 12px 0 0; box-shadow: none; }
.artikel { overflow: hidden; }
.artikel .knopf { align-self: flex-start; }
.raster.drei { grid-template-columns: repeat(3, 1fr); }
#idee .raster { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
@media (max-width: 900px) { .raster.drei { grid-template-columns: 1fr; } }
.raster.drei .artikel p:last-of-type { flex: 1; }
.raster.drei .artikel .bild { aspect-ratio: 3 / 2; }

/* Zeitstrahl quer (Rückblick) */
.zeitstrahl-quer { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; border-left: 0; border-top: 5px dotted var(--blau); padding-top: 26px; }
.zeitstrahl-quer li { padding: 0; }
.zeitstrahl-quer li::before { left: 0; top: -40px; }
.zeitstrahl-quer .jahr { display: block; font-size: .9rem; }
.zeitstrahl-quer a { font-weight: 800; }
.zeitstrahl-quer li { font-size: .95rem; color: var(--text-leise); }
@media (max-width: 760px) {
  .zeitstrahl-quer { grid-template-columns: 1fr; border-top: 0; border-left: 5px dotted var(--blau); padding: 0; }
  .zeitstrahl-quer li { padding: 0 0 18px 30px; }
  .zeitstrahl-quer li::before { left: -14px; top: 4px; }
}
.rueckblick-highlight { scroll-margin-top: 100px; }

/* ---------- Spaß im Garten ---------- */
.garten { border-top-color: var(--pink); }
.garten h3.gross { color: var(--pink); }
.garten .aktion-gross { grid-template-columns: 1fr 1.1fr; }
.garten .aktion-gross .bild { transform: rotate(2deg); border: 8px solid #fff; box-shadow: 0 14px 34px rgba(30,29,43,.16); }
.galerie-6 { grid-template-columns: repeat(6, 1fr); margin-top: 28px; }
.zeitstrahl-quer { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 860px) {
  .garten .aktion-gross { grid-template-columns: 1fr; }
  .garten .aktion-gross > div { order: 2; }
  .galerie-6 { grid-template-columns: repeat(3, 1fr); }
  .galerie-6 figure:first-child { grid-column: auto; aspect-ratio: 1 / 1; }
}

/* Bildseiten im Rückblick abwechseln: Apfelsaft L, Garten R, Vogelfutter L, Lichterfest R, Wundertüte L */
@media (min-width: 861px) {
  .vogelfutter .aktion-gross { grid-template-columns: 1.1fr 1fr; }
  .vogelfutter .aktion-gross > .bild { order: -1; }
  .lichterfest .aktion-gross { grid-template-columns: 1fr 1.1fr; }
  .lichterfest .aktion-gross > .bild { order: 2; }
  .wundertuete .aktion-gross { grid-template-columns: 1.1fr 1fr; }
  .wundertuete .aktion-gross > .bild { order: -1; }
}
.rueckblick-highlight { overflow: hidden; }
@media (max-width: 760px) { .zeitstrahl-quer { grid-template-columns: 1fr; } }

/* ---------- Gipsfiguren ---------- */
.gips { border-top-color: var(--gelb); }
.gips h3.gross { color: var(--orange); }
@media (min-width: 861px) {
  .gips .aktion-gross { grid-template-columns: 1fr 1.1fr; }
  .gips .aktion-gross > .bild { order: 2; transform: rotate(1.5deg); }
  .zeitstrahl-quer { grid-template-columns: repeat(7, 1fr); }
}

/* ---------- Steine bemalen ---------- */
.steine { border-top-color: var(--gruen); }
.steine h3.gross { color: var(--gruen); }
.steine .mitmach-hinweis { margin-top: 4px; }
@media (min-width: 861px) {
  .steine .aktion-gross { grid-template-columns: 1.1fr 1fr; }
  .steine .aktion-gross > .bild { transform: rotate(-1.5deg); }
  .zeitstrahl-quer { grid-template-columns: repeat(8, 1fr); gap: 12px; }
  .zeitstrahl-quer li { font-size: .88rem; }
}
.galerie-3 { grid-template-columns: repeat(3, 1fr); margin-top: 28px; }
.galerie-3 figure { aspect-ratio: 4 / 3; }
@media (max-width: 760px) { .galerie-3 { grid-template-columns: 1fr; } .galerie-3 figure:first-child { grid-column: auto; } }

/* Vorbereitungsfoto (Gipsfiguren) */
.vorbereitung { margin: 28px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; }
.vorbereitung img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; }
.vorbereitung figcaption { font-size: 1rem; color: var(--text-leise); font-style: italic; }
@media (max-width: 760px) { .vorbereitung { grid-template-columns: 1fr; } }
.garten .galerie-6 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 860px) { .garten .galerie-6 { grid-template-columns: repeat(2, 1fr); } .garten .galerie-6 figure:first-child { grid-column: span 2; aspect-ratio: 16 / 10; } }

/* Startseite: "Herzlich willkommen!" komplett in CI-Farben */
h1.bunt span { display: inline-block; }
h1.bunt span:nth-child(odd) { transform: rotate(-3deg); }
h1.bunt span:nth-child(even) { transform: rotate(2deg) translateY(2px); }
.c-rot { color: var(--rot); } .c-orange { color: var(--orange); } .c-gelb { color: var(--gelb); }
.c-gruen { color: var(--gruen); } .c-blau { color: var(--blau); } .c-lila { color: var(--lila); } .c-pink { color: var(--pink); }

/* Rückblick: Bildseiten nach neuer Reihenfolge (V L, Li R, A L, W R, G L, Gi R, S L) */
@media (min-width: 861px) {
  #wundertuete .aktion-gross { grid-template-columns: 1fr 1.1fr; }
  #wundertuete .aktion-gross > .bild { order: 2; transform: rotate(1.5deg); }
  #garten .aktion-gross { grid-template-columns: 1.1fr 1fr; }
  #garten .aktion-gross > .bild { order: -1; transform: rotate(-2deg); }
}
h1.bunt .wort { display: inline-block; white-space: nowrap; transform: none; }
h1.bunt .wort span:nth-child(odd) { transform: rotate(-3deg); }
h1.bunt .wort span:nth-child(even) { transform: rotate(2deg) translateY(2px); }

/* Steine bemalen: echtes Foto im Hochformat statt Grafik */
.bild.hochkant { aspect-ratio: 3 / 4; max-height: 560px; margin: 0 auto; width: 100%; max-width: 420px; }
#steine .aktion-gross > .bild { transform: rotate(-1.5deg); border: 8px solid #fff; box-shadow: 0 14px 34px rgba(30,29,43,.16); }
.galerie-2 { grid-template-columns: repeat(2, 1fr); margin-top: 28px; }
.galerie-2 figure { aspect-ratio: 4 / 3; }
@media (max-width: 760px) { .galerie-2 { grid-template-columns: 1fr; } .galerie-2 figure:first-child { grid-column: auto; } }

/* Über uns: Team */
.team { border-top-color: var(--blau); margin-bottom: 0; }
.team .bild { transform: rotate(-1.5deg); border: 8px solid #fff; box-shadow: 0 14px 34px rgba(30,29,43,.16); }

/* ---------- Partner & Links ---------- */
.partner-raster { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
.partner-karte { flex-direction: row; gap: 24px; align-items: center; text-decoration: none; color: var(--text); font-weight: 400; }
.partner-karte:hover { color: var(--text); }
.partner-karte h3 { margin-bottom: .3em; }
.partner-karte p { margin-bottom: .6em; color: var(--text-leise); }
.partner-logo { flex: none; width: 120px; height: 140px; display: grid; place-items: center; }
.partner-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.partner-url { font-weight: 800; color: var(--blau); }
.partner-karte:hover .partner-url { color: var(--rot); }
.raster-partner > .karte:nth-child(2) { --c: var(--gruen); }
.partner-raster > .karte:nth-child(2) { border-top-color: var(--gruen); }
@media (max-width: 520px) { .partner-karte { flex-direction: column; text-align: center; } }
.partner-raster > .karte:nth-child(3) { border-top-color: var(--orange); }
.partner-karte.ohne-link .partner-url { color: var(--text-leise); font-style: italic; font-weight: 700; }
.partner-karte.ohne-link:hover { transform: none; }
.partner-logo img[src*="dorfflohmarkt"] { border-radius: 14px; width: 120px; height: 120px; object-fit: cover; }
.partner-raster > .karte:nth-child(4) { border-top-color: var(--lila); }
.partner-logo img[src*="tauschhaus"] { border-radius: 14px; width: 120px; height: 120px; object-fit: cover; }

/* Tauschhaus-Plakat */
.plakat { margin: 0 auto; max-width: 720px; border-radius: 18px; overflow: hidden; box-shadow: 0 14px 34px rgba(30,29,43,.16); border: 8px solid #fff; }
.plakat img { width: 100%; height: auto; }

/* ---------- Rückblick: automatische Seitenwechsel & Farben (überschreibt Einzelregeln) ---------- */
@media (min-width: 861px) {
  .rueckblick-highlight.seite-l .aktion-gross, .rueckblick-highlight.seite-l.aktion-gross { grid-template-columns: 1.1fr 1fr !important; }
  .rueckblick-highlight.seite-l .aktion-gross > .bild, .rueckblick-highlight.seite-l .aktion-gross > .collage, .rueckblick-highlight.seite-l.aktion-gross > .collage { order: -1 !important; }
  .rueckblick-highlight.seite-r .aktion-gross, .rueckblick-highlight.seite-r.aktion-gross { grid-template-columns: 1fr 1.1fr !important; }
  .rueckblick-highlight.seite-r .aktion-gross > .bild, .rueckblick-highlight.seite-r .aktion-gross > .collage, .rueckblick-highlight.seite-r.aktion-gross > .collage { order: 2 !important; }
}
.rueckblick-highlight .aktion-gross > .bild { border: 8px solid #fff; box-shadow: 0 14px 34px rgba(30,29,43,.16); }
.rueckblick-highlight.seite-l .aktion-gross > .bild { transform: rotate(-1.5deg); }
.rueckblick-highlight.seite-r .aktion-gross > .bild { transform: rotate(1.5deg); }
@media (max-width: 860px) { .rueckblick-highlight .aktion-gross > div { order: 2; } }
.farbe-pink { border-top-color: var(--pink); } .farbe-pink h3.gross { color: var(--pink); }
.farbe-blau { border-top-color: var(--blau); } .farbe-blau h3.gross { color: var(--blau); }
.farbe-rot { border-top-color: var(--rot); } .farbe-rot h3.gross { color: var(--rot); }
.farbe-gelb { border-top-color: var(--gelb); } .farbe-gelb h3.gross { color: var(--orange); }
.farbe-orange { border-top-color: var(--orange); } .farbe-orange h3.gross { color: var(--orange); }
.farbe-lila { border-top-color: var(--lila); } .farbe-lila h3.gross { color: var(--lila); }

/* Zeitstrahl mit vielen Stationen: mehrere Reihen */
.zeitstrahl-quer { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; border-top: 0 !important; border-left: 0 !important; gap: 30px 14px !important; padding: 14px 0 0 !important; }
.zeitstrahl-quer li { border-top: 5px dotted var(--blau); padding: 22px 6px 0 0 !important; font-size: .9rem !important; }
.zeitstrahl-quer li::before { left: 0 !important; top: -14px !important; }
.zeitstrahl-quer li:nth-child(5n+1)::before { background: var(--rot); box-shadow: 0 0 0 2px var(--rot); }
.zeitstrahl-quer li:nth-child(5n+2)::before { background: var(--orange); box-shadow: 0 0 0 2px var(--orange); }
.zeitstrahl-quer li:nth-child(5n+3)::before { background: var(--gruen); box-shadow: 0 0 0 2px var(--gruen); }
.zeitstrahl-quer li:nth-child(5n+4)::before { background: var(--blau); box-shadow: 0 0 0 2px var(--blau); }
.zeitstrahl-quer li:nth-child(5n+5)::before { background: var(--lila); box-shadow: 0 0 0 2px var(--lila); }
.bild.quadrat { aspect-ratio: 1 / 1; max-width: 480px; width: 100%; justify-self: center; }
.feen-galerie figure { aspect-ratio: 3 / 4; }
.galerie-5 { grid-template-columns: repeat(5, 1fr); margin-top: 28px; }
.galerie-5 figure { aspect-ratio: 3 / 4; }
@media (max-width: 860px) { .galerie-5 { grid-template-columns: repeat(2, 1fr); } .galerie-5 figure:nth-child(2) { grid-column: span 2; aspect-ratio: 4 / 3; } .galerie-5 figure:first-child { grid-column: auto; aspect-ratio: 3 / 4; } }

/* ---------- Zeitleiste kompakt (Punkte mit Tooltip) ---------- */
.zeitleiste { display: flex; gap: 0; align-items: flex-start; margin: 40px 0 6px; position: relative; }
.zl-jahr { flex: var(--n) 1 0; min-width: 70px; position: relative; padding: 0 6px; }
.zl-jahr + .zl-jahr { border-left: 2px solid var(--linie); }
.zl-punkte { position: relative; display: flex; justify-content: space-around; align-items: center; height: 34px; }
.zl-punkte::before { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; border-top: 5px dotted var(--blau); transform: translateY(-50%); }
.zl-label { display: block; text-align: center; font-family: var(--schrift-titel); font-size: 1.25rem; color: var(--tinte); margin-top: 8px; }
.zl-punkt { position: relative; z-index: 1; width: 24px; height: 24px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 0 0 2px currentColor; background: currentColor; transition: transform .15s; }
.zl-punkt.c0 { color: var(--rot); } .zl-punkt.c1 { color: var(--orange); } .zl-punkt.c2 { color: var(--gelb); }
.zl-punkt.c3 { color: var(--gruen); } .zl-punkt.c4 { color: var(--blau); } .zl-punkt.c5 { color: var(--lila); } .zl-punkt.c6 { color: var(--pink); }
.zl-punkt:hover, .zl-punkt:focus-visible { transform: scale(1.35); outline: none; }
.zl-punkt::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(4px);
  background: var(--tinte); color: #fff; font: 700 .88rem/1.35 var(--schrift); white-space: nowrap;
  padding: 8px 12px; border-radius: 10px; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 5;
}
.zl-punkt::before {
  content: ""; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--tinte); opacity: 0; transition: opacity .15s;
}
.zl-punkt:hover::after, .zl-punkt:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.zl-punkt:hover::before, .zl-punkt:focus-visible::before { opacity: 1; }
.zl-jahr:first-child .zl-punkt:first-child::after { left: -10px; transform: none; }
.zl-jahr:last-child .zl-punkt:last-child::after { left: auto; right: -10px; transform: none; }
.zl-hinweis { font-size: .9rem; color: var(--text-leise); margin-top: 14px; }
@media (max-width: 760px) {
  .zeitleiste { flex-direction: column; gap: 10px; }
  .zl-jahr { width: 100%; border-left: 0 !important; display: grid; grid-template-columns: 60px 1fr; align-items: center; padding: 0; }
  .zl-label { order: -1; margin: 0; text-align: left; }
  .zl-punkte { justify-content: flex-start; gap: 14px; padding-left: 8px; }
  .zl-punkt::after { white-space: normal; width: 200px; left: 0; transform: none; }
  
}
@media (max-width: 760px) { .zl-punkte::before { left: 0; right: 0; } .zeitleiste { overflow: hidden; padding-top: 4px; } .zl-hinweis::after { content: " Auf dem Handy springt ein Tipp direkt zum Bericht."; } }
.galerie-4 { grid-template-columns: repeat(4, 1fr); margin-top: 28px; }
.galerie-4 figure { aspect-ratio: 4 / 3; }
@media (max-width: 760px) { .galerie-4 { grid-template-columns: repeat(2, 1fr); } .galerie-4 figure:first-child { grid-column: auto; aspect-ratio: 4 / 3; } }

/* ---------- Chronik 2000–2019 ---------- */
.ch-zahlen { display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 0 22px; }
.ch-zahlen div { background: #fff; border-radius: 16px; padding: 12px 18px; box-shadow: var(--schatten); display: flex; align-items: baseline; gap: 8px; }
.ch-zahlen b { font-family: var(--schrift-titel); font-weight: 400; font-size: 1.6rem; color: var(--rot); }
.ch-zahlen div:nth-child(2) b { color: var(--blau); } .ch-zahlen div:nth-child(3) b { color: var(--gruen); font-size: 1.2rem; }
.ch-zahlen span { color: var(--text-leise); font-size: .95rem; }
.ch-suche { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.ch-suche input { flex: 1 1 280px; max-width: 460px; font: inherit; padding: 10px 16px; border-radius: 999px; border: 2px solid var(--linie); background: #fff; }
.ch-suche input:focus { outline: none; border-color: var(--blau); }
#ch-treffer { color: var(--text-leise); font-size: .92rem; }
.ch-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 10px; align-items: start; }
.ch-jahr { background: #fff; border-radius: 14px; box-shadow: 0 3px 10px rgba(30,29,43,.06); overflow: hidden; }
.ch-jahr[open] { grid-column: 1 / -1; }
.ch-jahr summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; }
.ch-jahr summary::-webkit-details-marker { display: none; }
.ch-jahr summary::after { content: "+"; font-weight: 800; font-size: 1.3rem; color: var(--blau); margin-left: 10px; }
.ch-jahr[open] summary::after { content: "–"; }
.ch-j { font-family: var(--schrift-titel); font-size: 1.4rem; color: var(--tinte); }
.ch-n { margin-left: auto; color: var(--text-leise); font-size: .9rem; }
.ch-jahr:nth-child(7n+1) .ch-j { color: var(--rot); } .ch-jahr:nth-child(7n+2) .ch-j { color: var(--orange); }
.ch-jahr:nth-child(7n+3) .ch-j { color: var(--gelb); } .ch-jahr:nth-child(7n+4) .ch-j { color: var(--gruen); }
.ch-jahr:nth-child(7n+5) .ch-j { color: var(--blau); } .ch-jahr:nth-child(7n+6) .ch-j { color: var(--lila); } .ch-jahr:nth-child(7n+7) .ch-j { color: var(--pink); }
.ch-jahr ul { list-style: none; margin: 0; padding: 4px 18px 16px; columns: 2 320px; column-gap: 32px; }
.ch-jahr li { display: flex; gap: 12px; padding: 5px 0; border-bottom: 1px dashed var(--linie); break-inside: avoid; font-size: .95rem; line-height: 1.4; }
.ch-d { flex: none; width: 5.2em; color: var(--text-leise); font-variant-numeric: tabular-nums; }
.ch-t small { display: block; color: var(--text-leise); font-size: .85rem; }
.ch-jahr li.aus .ch-t { color: var(--text-leise); }
.ch-aus { display: inline-block; margin-left: 6px; font-size: .72rem; font-weight: 800; background: var(--linie); color: var(--text-leise); border-radius: 6px; padding: 1px 6px; vertical-align: middle; }
.ch-note { margin: 0 18px 4px; font-size: .88rem; font-style: italic; color: var(--text-leise); }
.ch-jahr li.versteckt { display: none; }

/* Startseite: "Seit 2000"-Schild */
.seit-schild { display: inline-block; margin: 2px 0 14px; padding: 6px 16px; border-radius: 999px; background: var(--gelb-hell); border: 2px dashed var(--gelb); color: var(--tinte); font-weight: 700; text-decoration: none; transform: rotate(-1.5deg); }
.seit-schild b { font-family: var(--schrift-titel); font-weight: 400; color: var(--rot); font-size: 1.15rem; }
.seit-schild:hover { color: var(--tinte); transform: rotate(0); background: #fff; }
.bild-oben img { object-position: center 18%; }
/* quadratische Grafik auf der Unterseite Grabau leuchtet vollständig zeigen */
.artikel-bild[data-datei="bilder/grabau-leuchtet-2.jpg"] { aspect-ratio: 1 / 1; max-width: 680px; }
.farbe-gruen { border-top-color: var(--gruen); } .farbe-gruen h3.gross { color: var(--gruen); }
.text-oben { max-width: 820px; }
#fahrradtour .galerie-5 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { #fahrradtour .galerie-5 { grid-template-columns: repeat(2, 1fr); } #fahrradtour .galerie-5 figure:nth-child(2) { grid-column: auto; aspect-ratio: 3 / 4; } }
.team-bild { margin: 0 auto; max-width: 900px; border-radius: 20px; overflow: hidden; border: 8px solid #fff; box-shadow: 0 14px 34px rgba(30,29,43,.16); transform: rotate(-.8deg); }
.team-bild img { width: 100%; height: auto; display: block; }

/* ---------- Team-Namen als bunte Namensschilder ---------- */
.team-namen { text-align: center; margin-top: 34px; }
.team-titel { font-family: var(--schrift-titel); font-size: 1.6rem; color: var(--tinte); margin-bottom: 14px; }
.team-namen ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 18px; }
.team-namen li {
  --c: var(--rot);
  background: #fff; border: 3px solid var(--c); border-radius: 14px;
  padding: 10px 20px 8px; box-shadow: 0 6px 0 var(--c);
  font-family: var(--schrift-titel); font-size: 1.35rem; line-height: 1.1; color: var(--tinte);
  transition: transform .2s;
}
.team-namen li .vn { color: var(--c); }
.team-namen li:nth-child(1) { --c: var(--rot);    transform: rotate(-3deg); }
.team-namen li:nth-child(2) { --c: var(--orange); transform: rotate(2deg) translateY(6px); }
.team-namen li:nth-child(3) { --c: var(--gruen);  transform: rotate(-1.5deg); }
.team-namen li:nth-child(4) { --c: var(--blau);   transform: rotate(3deg) translateY(4px); }
.team-namen li:nth-child(5) { --c: var(--lila);   transform: rotate(-2.5deg); }
.team-namen li:hover { transform: rotate(0) scale(1.08); }
.team-namen li:nth-child(5) { --c: var(--pink); transform: rotate(-2.5deg); }
.team-namen li:nth-child(6) { --c: var(--lila); transform: rotate(2deg) translateY(5px); }
/* 7 Namensschilder: alle Logo-Farben */
.team-namen li:nth-child(1) { --c: var(--rot);    transform: rotate(-3deg); }
.team-namen li:nth-child(2) { --c: var(--orange); transform: rotate(2deg) translateY(6px); }
.team-namen li:nth-child(3) { --c: var(--gelb);   transform: rotate(-1.5deg); }
.team-namen li:nth-child(4) { --c: var(--gruen);  transform: rotate(2.5deg) translateY(4px); }
.team-namen li:nth-child(5) { --c: var(--blau);   transform: rotate(-2deg); }
.team-namen li:nth-child(6) { --c: var(--pink);   transform: rotate(2deg) translateY(5px); }
.team-namen li:nth-child(7) { --c: var(--lila);   transform: rotate(-2.5deg); }
.team-namen li:hover { transform: rotate(0) scale(1.08); }
/* 8 Namensschilder */
.team-namen li:nth-child(7) { --c: var(--rot);  transform: rotate(-2deg) translateY(3px); }
.team-namen li:nth-child(8) { --c: var(--lila); transform: rotate(2.5deg); }
.team-namen li:hover { transform: rotate(0) scale(1.08); }