/* Seiten-eigene Styles für pokemon-kindergeburtstag.html.
   Am 18.10.2026 aus dem <style>-Block der Seite ausgelagert, damit die
   Content-Security-Policy ohne Inline-<style> auskommt (style-src-elem 'self').
   Cache-Busting: ?v= im <link> zusammen mit style.css hochzählen. */

/* Seiten-eigene Bausteine Kindergeburtstag — nutzt nur Tokens aus style.css */
.kg-preis { font-family: var(--f-display); font-weight: 700; font-size: clamp(3rem, 2rem + 4vw, 4.5rem); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.kg-preis--karte { font-size: clamp(2.5rem, 1.8rem + 2vw, 3.25rem); white-space: nowrap; }
.kg-mitnahme { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 760px) { .kg-mitnahme { grid-template-columns: repeat(3, 1fr); } }
.kg-mitnahme .sammelkarte { display: grid; gap: var(--s-3); align-content: start; }
.kg-mitnahme strong { font-family: var(--f-display); font-size: 1.15rem; }
.kg-mitnahme p { margin: 0; color: var(--tinte-2); font-size: var(--t-klein); }
.kg-beweis { max-width: 46rem; }
.kg-beweis .zitat { font-size: var(--t-h2); margin-top: 0; }
.kg-foto-platz { border: 2px dashed var(--linie); border-radius: var(--r-karte); padding: var(--s-7) var(--s-5); text-align: center; color: var(--tinte-schwach); font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; }
.kg-preisbox { display: grid; gap: var(--s-6); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .kg-preisbox { grid-template-columns: 1.1fr .9fr; } }
.kg-preiskarte { padding: var(--s-6); }
.kg-preiskarte .kg-zusatz { margin: var(--s-4) 0 0; font-weight: 600; }
.kg-preiskarte .kg-klein { font-size: var(--t-klein); color: var(--tinte-schwach); margin: var(--s-2) 0 0; }
.kg-tabelle { width: 100%; border-collapse: collapse; font-size: var(--t-klein); }
.kg-tabelle th, .kg-tabelle td { text-align: left; padding: var(--s-3) var(--s-2); border-bottom: 1px solid var(--linie); vertical-align: top; }
.kg-tabelle td:last-child, .kg-tabelle th:last-child { text-align: right; white-space: nowrap; font-weight: 600; }
.kg-tabelle .orte { display: block; color: var(--tinte-schwach); font-weight: 400; }
.kg-tausch { margin: var(--s-4) 0 0; padding-inline-start: 1.2em; display: grid; gap: var(--s-2); }
.kg-schritt-zeit { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-schwach); }
.kg-hinweis { margin-top: var(--s-7); padding: var(--s-5); border-radius: var(--r-2); background: var(--papier); border-left: 4px solid var(--gelb); }
.kg-hinweis p { margin: 0; }
.kg-fussnote { font-size: var(--t-klein); color: var(--tinte-schwach); margin-top: var(--s-3); }
.kg-blick { padding-block: var(--s-8) 0; }
.kg-blick .tipp { max-width: 46rem; margin: 0; }
.kg-blick h2 { margin-bottom: var(--s-3); }
.kg-blick .tipp { max-width: 52rem; }
.kg-blick-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.kg-blick-liste li { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--s-3); align-items: baseline; font-size: 1.0625rem; line-height: 1.45; }
.kg-blick-label { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-2); }
@media (max-width: 520px) { .kg-blick-liste { gap: var(--s-3); } .kg-blick-liste li { grid-template-columns: 1fr; gap: 0; } }
/* Zitat: globale .zitat hängt -64px in den Rand (Artikel-Layout) – hier nicht */
.kg-beweis .zitat { margin: 0 0 var(--s-5); }
/* Paket-Kachel oben bündig mit dem Textblock statt senkrecht mittig */
@media (min-width: 900px) { .hero-inner { align-items: start; } }
.kg-prokind { font-size: var(--t-klein); color: var(--tinte-2); }
.kg-prokind strong { font-family: var(--f-display); font-size: 1.15rem; color: var(--tinte); }
.kg-prokind-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin: var(--s-4) 0 0; }
.kg-prokind-grid > div { display: grid; gap: var(--s-1); align-content: start; background: var(--gelb-t); border: 1px solid var(--linie); border-radius: var(--r-2); padding: var(--s-3) var(--s-4); }
.kg-prokind-betrag { font-family: var(--f-display); font-weight: 700; font-size: 1.75rem; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kg-prokind-grid span:last-child { font-size: var(--t-klein); color: var(--tinte-2); line-height: 1.4; }
/* ---- Layout-Straffung 18.10. (nur diese Seite; globale style.css unverändert) ----
   Abstands-Skala nur aus vorhandenen Tokens (--s-*). Ziel: dichter Rhythmus,
   Knöpfe im ersten Bildschirm, keine Zickzack-Zeitleiste mehr. */
.hero { padding-block: clamp(40px, 6vw, 80px); }
@media (min-width: 900px) { .hero { min-height: 0; } }
.hero h1 { font-size: clamp(2.25rem, 1.2rem + 3.6vw, 4.25rem); line-height: .98; margin-bottom: var(--s-4); }
.hero-lead { margin-bottom: var(--s-5); }
.section { padding-block: clamp(48px, 6vw, 88px); }
.section-head { margin-bottom: var(--s-6); }
.kg-beweis .zitat { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); }
.kg-preis { font-size: clamp(2.75rem, 2rem + 2.5vw, 3.75rem); }
.cta-final h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem); }
/* Ablauf + Buchen: nebeneinander statt Zickzack */
@media (min-width: 900px) {
  .zeitstrahl { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-6); align-items: start; }
  .zeitstrahl::before { display: none; }
  .schritt, .schritt:nth-child(odd), .schritt:nth-child(even) {
    width: auto; justify-self: stretch; text-align: left; padding: 64px 0 0;
  }
  .schritt .nummer, .schritt:nth-child(odd) .nummer, .schritt:nth-child(even) .nummer { left: 0; right: auto; top: 0; }
  .schritt:nth-child(odd) p { margin-left: 0; }
}
@media (max-width: 899px) { .zeitstrahl { gap: var(--s-5); } }
/* Handy: Mitnahme-Karten quer (Symbol links), Hero-Liste dichter */
@media (max-width: 759px) {
  .kg-mitnahme .sammelkarte { grid-template-columns: 48px 1fr; column-gap: var(--s-4); row-gap: var(--s-1); padding: var(--s-4); }
  .kg-mitnahme .sammelkarte .icon-kreis { grid-row: span 2; }
  .hero .checkliste { gap: var(--s-3); }
}
.kg-preisliste { margin-top: var(--s-5); grid-template-columns: 1fr; gap: var(--s-3); }
@media (min-width: 1100px) { .kg-preisliste { grid-template-columns: 1fr 1fr; column-gap: var(--s-5); } }
/* FAQ: ab 1000 px zweispaltig */
.faq .answer p { font-size: 1.0625rem; }
@media (min-width: 1000px) {
  .faq { max-width: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s-8); align-items: start; border-top: 0; }
  .faq details:nth-child(-n+2) { border-top: 1px solid var(--tinte); }
}