/* Unterseiten für Anlässe, Städte und Hilfe (HTML erzeugt von
   scripts/build_seo_seiten.py und scripts/build_hilfe_seiten.py; diese CSS-Datei
   wird von Hand gepflegt). Farben ausschließlich aus design.md: Weiß, Schwarz,
   Rot; Rosa und Gelb nur sparsam. */
@font-face { font-family:'Fredoka'; font-weight:500 700; font-display:swap; src:url("font-fredoka-3.woff2") format('woff2'); }
@font-face { font-family:'Nunito'; font-weight:400 800; font-display:swap; src:url("font-nunito-5.woff2") format('woff2'); }
@font-face { font-family:'Press Start 2P'; font-weight:400; font-display:swap; src:url("font-press-start-2p-5.woff2") format('woff2'); }

:root { --rot:#C01E25; --weiss:#FFFFFF; --rosa:#FFDAE4; --gelb:#FFFCB3; --schwarz:#000000; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--weiss); color:var(--schwarz); font-family:'Nunito',sans-serif; font-size:17px; line-height:1.6; }
a { color:var(--rot); }
img { max-width:100%; height:auto; display:block; }

.kopf { position:sticky; top:0; z-index:10; background:var(--weiss); border-bottom:2px solid var(--schwarz); }
.kopf-innen { max-width:1100px; margin:0 auto; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.kopf-innen img { height:32px; width:auto; transform:rotate(-2deg); }
.knopf { display:inline-block; background:var(--rot); color:var(--weiss); border:2px solid var(--schwarz); border-radius:999px; box-shadow:2px 2px 0 var(--schwarz); padding:10px 20px; font-family:'Fredoka',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:15px; text-decoration:none; white-space:nowrap; }
.knopf:hover { transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--schwarz); }
.knopf.hell { background:var(--gelb); color:var(--schwarz); }

.pfad { max-width:1100px; margin:0 auto; padding:14px 16px 0; font-size:14px; }
.pfad a { color:var(--schwarz); }

.held { border-bottom:1px solid var(--schwarz); }
.held-innen { max-width:1100px; margin:0 auto; padding:34px 16px 54px; display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; }
.marke { font-family:'Press Start 2P',monospace; font-size:10px; color:var(--rot); letter-spacing:.04em; }
h1 { font-family:'Fredoka',sans-serif; font-weight:700; color:var(--rot); font-size:clamp(36px,6vw,64px); line-height:1; margin:14px 0 0; }
.held p.einleitung { font-size:19px; font-weight:600; margin:18px 0 26px; }
.held-bild { border:2px solid var(--schwarz); border-radius:22px; box-shadow:6px 6px 0 var(--schwarz); overflow:hidden; background:var(--gelb); }
.held-bild img { width:100%; aspect-ratio:4/5; object-fit:cover; }
.knoepfe { display:flex; flex-wrap:wrap; gap:14px; }

.band { border-bottom:1px solid var(--schwarz); }
.band.rosa { background:var(--rosa); }
.band.gelb { background:var(--weiss); } /* Gelb nur noch sparsam: Band bleibt weiß */
.band-innen { max-width:860px; margin:0 auto; padding:56px 16px; }
h2 { font-family:'Fredoka',sans-serif; font-weight:700; font-size:clamp(28px,4vw,42px); line-height:1.05; margin:0 0 16px; }
h3 { font-family:'Fredoka',sans-serif; font-weight:700; font-size:21px; margin:0 0 6px; }
.band p { margin:0 0 14px; }

.fakten { list-style:none; padding:0; margin:22px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.fakten li { background:var(--weiss); border:2px solid var(--schwarz); border-radius:16px; box-shadow:2px 2px 0 var(--schwarz); padding:14px 16px; font-weight:600; }
.fakten strong { display:block; font-family:'Fredoka',sans-serif; font-size:19px; }

.preis-tabelle { width:100%; border-collapse:collapse; margin:10px 0 14px; background:var(--weiss); }
.preis-tabelle td { border:2px solid var(--schwarz); padding:10px 12px; }
.preis-tabelle td:last-child { text-align:right; font-weight:800; white-space:nowrap; }
.preis-tabelle s { opacity:.55; font-weight:600; margin-right:.3em; }
.preis-tabelle s[hidden] { display:none; }

.faq-karte { background:var(--weiss); border:2px solid var(--schwarz); border-radius:18px; box-shadow:3px 3px 0 var(--schwarz); padding:20px 22px; margin:0 0 16px; }
.faq-karte p { margin:0; }

.cta { background:var(--rot); color:var(--weiss); text-align:center; border-bottom:2px solid var(--schwarz); }
.cta h2 { color:var(--weiss); }
.cta .band-innen { padding:60px 16px; }

.links { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.links a { background:var(--rosa); color:var(--schwarz); border:2px solid var(--schwarz); border-radius:999px; box-shadow:2px 2px 0 var(--schwarz); padding:6px 14px; font-family:'Fredoka',sans-serif; font-weight:700; text-decoration:none; }

.fuss { background:var(--schwarz); color:var(--weiss); font-size:14px; }
.fuss-innen { max-width:1100px; margin:0 auto; padding:26px 16px; display:flex; flex-wrap:wrap; gap:10px 18px; justify-content:space-between; }
.fuss a { color:var(--weiss); }

/* ---- Hilfe-Seiten (design.md, Abschnitt „Hilfe-Seiten“) ---- */
.held.schlicht .held-innen { grid-template-columns:1fr; padding-bottom:40px; }
.held .dauer, .hilfe-karte .dauer { display:inline-block; font-family:'Press Start 2P',monospace; font-size:10px; letter-spacing:.04em; background:var(--gelb); border:2px solid var(--schwarz); border-radius:999px; padding:8px 14px; margin:0; text-transform:uppercase; line-height:1.4; }
.band-innen.breit { max-width:1100px; }

.hilfe-karten { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.hilfe-karte { display:flex; flex-direction:column; align-items:flex-start; gap:8px; background:var(--weiss); color:var(--schwarz); text-decoration:none; border:2px solid var(--schwarz); border-radius:18px; box-shadow:3px 3px 0 var(--schwarz); padding:22px; }
.hilfe-karte:hover { transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--schwarz); }
.hilfe-karte h2 { color:var(--rot); font-size:30px; margin:6px 0 0; }
.hilfe-karte p { margin:0; font-weight:600; }
.hilfe-karte .mehr { margin-top:auto; padding-top:10px; font-family:'Fredoka',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--rot); }

.schritte { list-style:none; margin:0; padding:0; display:grid; gap:22px; }
.schritt { display:grid; grid-template-columns:auto 1fr; gap:18px; background:var(--weiss); border:2px solid var(--schwarz); border-radius:18px; box-shadow:3px 3px 0 var(--schwarz); padding:22px; scroll-margin-top:80px; }
.schritt-nr { font-family:'Press Start 2P',monospace; font-size:22px; color:var(--rot); line-height:1.2; padding-top:4px; }
.schritt-inhalt { min-width:0; }
.schritt-inhalt p { margin:0 0 12px; }
.schritt-inhalt h3 { font-size:24px; }
.danach { margin:26px 0 0; font-weight:600; }

.bild-rahmen { margin:14px 0 4px; border:2px solid var(--schwarz); border-radius:18px; box-shadow:3px 3px 0 var(--schwarz); overflow:hidden; background:var(--gelb); }
.bild-rahmen img { width:100%; height:auto; }

.hinweis { background:var(--gelb); border:2px solid var(--schwarz); border-radius:18px; box-shadow:3px 3px 0 var(--schwarz); padding:18px 22px; margin:0 0 22px; }
.hinweis h3 { margin:0 0 6px; }
.hinweis p, .hinweis ul { margin:0 0 8px; }
.band.gelb .hinweis { background:var(--weiss); }

.taste { display:inline-block; font-family:'Press Start 2P',monospace; font-size:.62em; letter-spacing:.02em; line-height:1.5; background:var(--weiss); color:var(--schwarz); border:2px solid var(--schwarz); border-radius:8px; box-shadow:2px 2px 0 var(--schwarz); padding:3px 7px; margin:0 1px; vertical-align:.08em; }
.band.rosa .schritt .taste, .band.rosa .faq-karte .taste { background:var(--rosa); }
.faq-karte { scroll-margin-top:80px; }
.faq-karte ul { margin:0 0 12px; padding-left:22px; }
.faq-karte p { margin:0 0 12px; }
.faq-karte .bild-rahmen { margin-top:6px; max-width:420px; }
.zentriert { justify-content:center; margin-top:22px; }

@media (max-width: 760px) {
  .held-innen { grid-template-columns:1fr; gap:28px; padding-top:22px; }
  .held-bild { max-width:420px; }
  .fakten { grid-template-columns:1fr; }
  .kopf-innen .knopf { padding:8px 14px; font-size:13px; }
  .hilfe-karten { grid-template-columns:1fr; }
  .schritt { grid-template-columns:1fr; gap:6px; padding:18px; }
  .zentriert { flex-direction:column; align-items:stretch; }
  .zentriert .knopf { text-align:center; white-space:normal; }
}