/* ─────────────────────────────────────────────────────────────
   Hopp – Polterabend (/polterabend/ und Ratgeber)   Präfix .pa-
   Welt: der Saal vor dem Fest. Bernstein, Honiggold, Creme,
   ein Hauch Magenta von der Leinwand.
   Signatur: Goldkonfetti, das ganz leise im Hintergrund fällt,
   und der Zeitstrahl, der sich beim Scrollen selbst zeichnet.
   ───────────────────────────────────────────────────────────── */
.pa {
  --pa-canvas: #140d07;
  --pa-panel: #1e140b;
  --pa-panel-2: #281a0e;
  --pa-line: rgba(232,168,58,.24);
  --pa-gold: #eaa93a;
  --pa-gold-soft: #d6a54e;
  --pa-gold-hover: #f6bd55;
  --pa-ink: #f6eedf;
  --pa-ink-2: #cdbca2;
  --pa-magenta: #d94b8f;
  --pa-display: 'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif;
  --pa-sans: 'DM Sans', system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --pa-mono: 'DM Mono', ui-monospace, Menlo, monospace;
  --pa-ease: cubic-bezier(.22,.61,.36,1);
  --pa-ease-out: cubic-bezier(.16,1,.3,1);
  background: var(--pa-canvas);
  color: var(--pa-ink);
  font-family: var(--pa-sans);
  position: relative;
}
html, body { overflow-x: hidden; overflow-x: clip; }
.pa *, .pa *::before, .pa *::after { box-sizing: border-box; }

/* Eine Umgebung: Bühnenlicht, das langsam atmet, und Konfetti im Flüsterton */
.pa::before {
  content: ""; position: fixed; inset: -20%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 30% at 20% 18%, rgba(234,169,58,.08), transparent 70%),
    radial-gradient(30% 26% at 84% 72%, rgba(217,75,143,.05), transparent 70%);
  animation: pa-atem 60s ease-in-out infinite alternate;
}
.pa::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image:
    radial-gradient(1.6px 3px at 12% 10%, rgba(234,169,58,.55), transparent),
    radial-gradient(1.4px 2.6px at 33% 40%, rgba(246,238,223,.35), transparent),
    radial-gradient(1.8px 3px at 57% 22%, rgba(234,169,58,.45), transparent),
    radial-gradient(1.4px 2.4px at 78% 55%, rgba(217,75,143,.35), transparent),
    radial-gradient(1.6px 3px at 91% 14%, rgba(234,169,58,.5), transparent),
    radial-gradient(1.4px 2.6px at 46% 78%, rgba(234,169,58,.4), transparent);
  background-size: 520px 640px;
  animation: pa-konfetti 48s linear infinite;
}
@keyframes pa-atem { from { transform: translate3d(-2%, -1%, 0) } to { transform: translate3d(2%, 2%, 0) } }
@keyframes pa-konfetti { from { background-position: 0 -640px } to { background-position: 60px 0 } }
.pa > * { position: relative; z-index: 1; }

/* ─── Scroll-Hero ─── */
.pa .sh { --accent: var(--pa-gold); --poster-ink: var(--pa-ink); }
.pa .sh-band h1, .pa .sh-band h2 {
  font-family: var(--pa-display); font-weight: 800; text-transform: none; letter-spacing: -0.025em;
  line-height: .98; font-size: clamp(40px, 5vw, 80px);
}
.pa .sh-band .sh-em { color: var(--pa-gold); }
.pa .sh-kick { font-family: var(--pa-mono); font-weight: 500; letter-spacing: .2em; }
.pa .sh-band p.sh-sub { font-family: var(--pa-sans); max-width: 32ch; }
.pa .sh-static-title { font-family: var(--pa-display); font-weight: 800; text-transform: none; letter-spacing: -0.02em; line-height: 1; font-size: clamp(40px, 11vw, 66px); }
.pa .sh .hero-cta.primary, .pa .sh .hero-cta.primary:link, .pa .sh .hero-cta.primary:visited { background: var(--pa-gold) !important; border-color: var(--pa-gold) !important; }
.pa .sh .hero-cta.primary span { color: #1d1206 !important; }
.pa .sh .hero-cta.primary:hover { background: var(--pa-gold-hover) !important; border-color: var(--pa-gold-hover) !important; }
.pa .sh-band:not(.is-right):not(.is-both) { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.pa .sh-band:not(.is-right):not(.is-both) .sh-col { width: min(36vw, 580px); max-width: 100%; }
.pa .sh-band:not(.is-right):not(.is-both) .sh-col + .sh-col { margin-top: 26px; }
.pa .sh-band:not(.is-right) .sh-ctas { justify-content: flex-start; }

/* ─── Bausteine ─── */
.pa-wrap { width: min(1180px, 100% - 32px); margin: 0 auto; }
.pa-schmal { width: min(760px, 100% - 32px); }
.pa-kick { font-family: var(--pa-mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--pa-gold-soft); margin: 0 0 14px; }
.pa-h1, .pa-h2 { font-family: var(--pa-display); font-weight: 800; letter-spacing: -0.025em; line-height: 1.02; margin: 0 0 18px; color: var(--pa-ink); text-transform: none; }
.pa-h1 { font-size: clamp(40px, 6.4vw, 78px); }
.pa-h2 { font-size: clamp(32px, 4.4vw, 56px); }
.pa-h1 em, .pa-h2 em, .pa-sorglos-h em { font-style: normal; color: var(--pa-gold); }
.pa-lead { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--pa-ink-2); max-width: 52ch; margin: 0 0 28px; }
.pa a { color: var(--pa-gold); }
.pa-btn, .pa a.pa-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 26px; background: var(--pa-gold); color: #1d1206; border: 1px solid var(--pa-gold); font-family: var(--pa-mono); font-weight: 500; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; border-radius: 3px; cursor: pointer; transition: background .3s var(--pa-ease), transform .3s var(--pa-ease), color .3s var(--pa-ease); }
.pa-btn:hover { background: var(--pa-gold-hover); transform: translateY(-1px); }
.pa-btn.is-ghost, .pa a.pa-btn.is-ghost { background: transparent; color: var(--pa-gold); }
.pa-btn.is-ghost:hover { background: rgba(234,169,58,.12); }
.pa-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.pa a:focus-visible, .pa button:focus-visible, .pa input:focus-visible, .pa select:focus-visible, .pa textarea:focus-visible, .pa summary:focus-visible { outline: 2px solid var(--pa-gold); outline-offset: 3px; }
.pa-hero-ohne { padding: clamp(80px, 14vw, 160px) 0 clamp(60px, 9vw, 110px); }

/* Einstieg beim Scrollen */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--pa-ease-out), transform .9s var(--pa-ease-out); }
[data-reveal].in { opacity: 1; transform: none; }
.pa-no-js [data-reveal] { opacity: 1; transform: none; }

/* ─── Angebote ─── */
.pa-angebote { padding: clamp(72px, 10vw, 130px) 0 clamp(56px, 8vw, 100px); }
.pa-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.pa-karte { position: relative; display: flex; flex-direction: column; background: linear-gradient(180deg, var(--pa-panel-2), var(--pa-panel)); border: 1px solid var(--pa-line); border-radius: 6px; padding: 30px 26px 26px; transition-delay: calc(var(--i, 0) * 90ms); }
.pa-karte:nth-child(2) { --i: 1; } .pa-karte:nth-child(3) { --i: 2; }
.pa-karte.is-top { border-color: rgba(234,169,58,.6); box-shadow: 0 0 0 1px rgba(234,169,58,.18), 0 30px 60px -30px rgba(234,169,58,.35); }
.pa-karte-nr { position: absolute; top: 22px; right: 24px; font-family: var(--pa-mono); font-size: 12px; color: var(--pa-gold-soft); letter-spacing: .2em; }
.pa-karte-band { align-self: flex-start; font-family: var(--pa-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #1d1206; background: var(--pa-gold); padding: 5px 9px; border-radius: 2px; margin-bottom: 14px; }
.pa-karte-name { font-family: var(--pa-display); font-weight: 800; font-size: clamp(26px, 2.4vw, 32px); letter-spacing: -0.02em; line-height: 1.05; margin: 0 40px 8px 0; color: var(--pa-ink); text-transform: none; }
.pa-karte-fuer { color: var(--pa-ink-2); margin: 0 0 18px; line-height: 1.5; }
.pa-karte-preis { font-family: var(--pa-display); font-weight: 600; font-size: 22px; color: var(--pa-gold); margin: 0 0 6px; }
.pa-karte-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-family: var(--pa-mono); font-size: 12px; letter-spacing: .06em; color: var(--pa-ink-2); margin: 0 0 18px; }
.pa-karte-kern { font-weight: 600; margin: 0 0 14px; line-height: 1.45; }
.pa-karte-liste { list-style: none; padding: 0; margin: 0 0 26px; flex: 1; }
.pa-karte-liste li { position: relative; padding: 8px 0 8px 22px; border-top: 1px solid rgba(232,168,58,.12); color: var(--pa-ink-2); line-height: 1.45; font-size: 15px; }
.pa-karte-liste li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 8px; height: 8px; border-radius: 50%; background: var(--pa-gold); box-shadow: 0 0 10px rgba(234,169,58,.6); }
.pa-karte-btn { width: 100%; }
.pa-karte-link { display: block; text-align: center; margin-top: 12px; font-size: 14px; }

/* ─── Ablauf ─── */
.pa-ablauf { padding: clamp(56px, 8vw, 110px) 0; }
.pa-zeit { position: relative; margin: 40px 0 0; padding: 0 0 0 44px; max-width: 720px; }
.pa-zeit-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.pa-zeit-linie { position: absolute; left: 10px; top: 6px; bottom: 6px; width: 10px; height: calc(100% - 12px); overflow: visible; }
.pa-zeit-linie path { fill: none; stroke: var(--pa-gold); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--pa-zeit, 0)); filter: drop-shadow(0 0 6px rgba(234,169,58,.5)); }
.pa-zeit-schritt { position: relative; }
.pa-zeit-punkt { position: absolute; left: -40px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--pa-canvas); border: 2px solid var(--pa-gold); transition: background .6s var(--pa-ease); }
.pa-zeit-schritt.in .pa-zeit-punkt { background: var(--pa-gold); box-shadow: 0 0 14px rgba(234,169,58,.7); }
.pa-zeit-schritt h3 { font-family: var(--pa-display); font-weight: 800; font-size: 24px; margin: 0 0 4px; color: var(--pa-ink); text-transform: none; letter-spacing: -0.01em; }
.pa-zeit-schritt p { margin: 0; color: var(--pa-ink-2); line-height: 1.55; }

/* ─── Das gibt's nur hier ─── */
.pa-usp { padding: clamp(56px, 8vw, 110px) 0; background: linear-gradient(180deg, transparent, rgba(40,26,14,.6) 30%, rgba(40,26,14,.6) 70%, transparent); }
.pa-usp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--pa-line); border: 1px solid var(--pa-line); border-radius: 6px; overflow: hidden; margin-top: 36px; }
.pa-usp-feld { background: var(--pa-canvas); padding: 28px 24px; }
.pa-usp-feld h3 { font-family: var(--pa-display); font-weight: 800; font-size: 21px; margin: 0 0 8px; color: var(--pa-gold); text-transform: none; letter-spacing: -0.01em; }
.pa-usp-feld p { margin: 0; color: var(--pa-ink-2); line-height: 1.5; font-size: 15px; }

/* ─── Wann ─── */
.pa-wann { padding: clamp(56px, 8vw, 110px) 0; }
.pa-wann-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 70px); align-items: start; }
.pa-hinweis { border-left: 3px solid var(--pa-magenta); padding: 4px 0 4px 16px; color: var(--pa-ink); line-height: 1.5; max-width: 48ch; }
.pa-zeiten { margin: 0; border: 1px solid var(--pa-line); border-radius: 6px; overflow: hidden; }
.pa-zeiten-z { display: flex; justify-content: space-between; gap: 16px; padding: 13px 20px; border-top: 1px solid rgba(232,168,58,.12); font-family: var(--pa-mono); font-size: 14px; }
.pa-zeiten-z:first-child { border-top: 0; }
.pa-zeiten-z dt { color: var(--pa-ink); }
.pa-zeiten-z dd { margin: 0; color: var(--pa-gold); }
.pa-zeiten-z.is-zu dd { color: var(--pa-ink-2); }

/* ─── Fotos ─── */
.pa-fotos { padding: clamp(56px, 8vw, 100px) 0; }
.pa-fotos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 30px; }
.pa-fotos-grid figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; }
.pa-fotos-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ─── Fragen ─── */
.pa-faq { padding: clamp(56px, 8vw, 110px) 0; }
.pa-faq-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(28px, 5vw, 70px); }
.pa-faq-tel { color: var(--pa-ink-2); }
.pa-faq-liste details { border-top: 1px solid var(--pa-line); padding: 18px 0; }
.pa-faq-liste details:last-child { border-bottom: 1px solid var(--pa-line); }
.pa-faq-liste summary { cursor: pointer; list-style: none; font-weight: 600; font-size: 18px; display: flex; justify-content: space-between; gap: 16px; }
.pa-faq-liste summary::-webkit-details-marker { display: none; }
.pa-faq-liste summary::after { content: "+"; color: var(--pa-gold); font-family: var(--pa-mono); transition: transform .3s var(--pa-ease); }
.pa-faq-liste details[open] summary::after { transform: rotate(45deg); }
.pa-faq-liste p { color: var(--pa-ink-2); line-height: 1.6; margin: 12px 0 0; }

/* ─── Anfrage ─── */
.pa-anfrage { padding: clamp(64px, 9vw, 120px) 0 clamp(80px, 10vw, 140px); }
.pa-anfrage-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.pa-direkt { color: var(--pa-ink-2); line-height: 1.7; }
.pa-form, .pa-danke { background: var(--pa-panel); border: 1px solid var(--pa-line); border-radius: 6px; padding: clamp(22px, 3vw, 34px); }
.pa-feld-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pa-feld { display: block; margin: 0 0 16px; border: 0; padding: 0; min-width: 0; }
.pa-feld > span, .pa-feld legend { display: block; font-family: var(--pa-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--pa-ink-2); margin-bottom: 7px; }
.pa-feld input, .pa-feld select, .pa-feld textarea { width: 100%; min-height: 48px; padding: 11px 13px; background: var(--pa-canvas); color: var(--pa-ink); border: 1px solid rgba(232,168,58,.3); border-radius: 3px; font: inherit; font-size: 16px; color-scheme: dark; }
.pa-feld textarea { min-height: 90px; resize: vertical; }
.pa-feld input:focus, .pa-feld select:focus, .pa-feld textarea:focus { border-color: var(--pa-gold); outline: none; }
.pa-feld .ist-fehler, .pa-wahl.ist-fehler { border-color: var(--pa-magenta) !important; }
.pa-wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.pa-wahl legend { width: 100%; }
.pa-wahl label { position: relative; cursor: pointer; }
.pa-wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pa-wahl span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid rgba(232,168,58,.3); border-radius: 999px; color: var(--pa-ink-2); transition: all .25s var(--pa-ease); }
.pa-wahl input:checked + span { background: var(--pa-gold); border-color: var(--pa-gold); color: #1d1206; font-weight: 600; }
.pa-wahl input:focus-visible + span { outline: 2px solid var(--pa-gold); outline-offset: 2px; }
.pa-datum-hinweis { margin: -6px 0 16px; padding: 10px 14px; border-left: 3px solid var(--pa-magenta); background: rgba(217,75,143,.08); line-height: 1.45; font-size: 15px; }
.pa-mehr { margin: 4px 0 20px; }
.pa-mehr summary { cursor: pointer; color: var(--pa-gold); margin-bottom: 14px; }
.pa-check { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; color: var(--pa-ink-2); font-size: 15px; margin: 0 0 18px; cursor: pointer; }
.pa-check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--pa-gold); flex: none; }
.pa-senden { width: 100%; }
.pa-form-note { font-size: 13px; color: var(--pa-ink-2); margin: 12px 0 0; }
.pa-form-fehler { margin: 0 0 16px; padding: 12px 14px; background: rgba(217,75,143,.12); border-left: 3px solid var(--pa-magenta); }
.pa-danke-h { font-family: var(--pa-display); font-weight: 800; font-size: 28px; margin: 0 0 10px; color: var(--pa-gold); }
.pa-danke p { line-height: 1.55; }

/* ─── Ratgeber-Querverweise ─── */
.pa-mehr-lesen { padding: clamp(48px, 7vw, 90px) 0 clamp(80px, 10vw, 120px); }
.pa-rg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 18px; }
.pa-rg-karte, .pa a.pa-rg-karte { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 20px 22px; border: 1px solid var(--pa-line); border-radius: 6px; color: var(--pa-ink); text-decoration: none; font-weight: 600; transition: border-color .3s var(--pa-ease), transform .3s var(--pa-ease); }
.pa-rg-karte:hover { border-color: var(--pa-gold); transform: translateY(-2px); }
.pa-rg-karte span:last-child { color: var(--pa-gold); }

/* ─── Ratgeber-Seiten ─── */
.pa-rg-kopf { padding: clamp(110px, 14vw, 170px) 0 clamp(24px, 4vw, 40px); }
.pa-brot { font-family: var(--pa-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--pa-ink-2); display: flex; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
.pa-brot a { color: var(--pa-gold-soft); text-decoration: none; }
.pa-rg-text { padding-bottom: clamp(40px, 6vw, 70px); font-size: 18px; line-height: 1.7; color: var(--pa-ink-2); }
.pa-rg-text h2 { font-family: var(--pa-display); font-weight: 800; font-size: clamp(26px, 3vw, 36px); letter-spacing: -0.02em; line-height: 1.1; color: var(--pa-ink); margin: 2.2em 0 .6em; text-transform: none; scroll-margin-top: 90px; }
.pa-rg-text strong { color: var(--pa-ink); }
.pa-rg-text ul, .pa-rg-text ol { padding-left: 1.2em; }
.pa-rg-text li { margin: .45em 0; }
.pa-rg-text li::marker { color: var(--pa-gold); }
.pa-intro { font-size: clamp(19px, 1.8vw, 22px); color: var(--pa-ink); line-height: 1.6; }
.pa-inhalt { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 10px; }
.pa-inhalt a { font-family: var(--pa-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 8px 12px; border: 1px solid var(--pa-line); border-radius: 999px; text-decoration: none; color: var(--pa-ink-2); }
.pa-inhalt a:hover { border-color: var(--pa-gold); color: var(--pa-gold); }
.pa-aufgaben li { padding-left: 4px; }
.pa-ck { margin-top: 26px; }
.pa-sorglos { padding: 0 0 clamp(20px, 4vw, 40px); }
.pa-sorglos-box { border: 1px solid rgba(234,169,58,.55); border-radius: 8px; padding: clamp(26px, 4vw, 44px); background: radial-gradient(120% 140% at 0% 0%, rgba(234,169,58,.14), transparent 60%), var(--pa-panel); }
.pa-sorglos-h { font-family: var(--pa-display); font-weight: 800; font-size: clamp(28px, 3.4vw, 42px); letter-spacing: -0.02em; line-height: 1.05; margin: 0 0 12px; color: var(--pa-ink); }
.pa-sorglos-box p { color: var(--pa-ink-2); line-height: 1.6; max-width: 52ch; }

/* ─── Handy-Leiste ─── */
.pa-leiste { display: none; }
@media (max-width: 720px) {
  .pa-leiste { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(20,13,7,.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1px solid rgba(232,168,58,.25); transform: translateY(110%); transition: transform .4s cubic-bezier(.16,1,.3,1); }
  .pa-leiste.is-sichtbar { transform: none; }
  .pa-leiste-btn { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 3px; font-family: 'DM Mono', ui-monospace, monospace; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; border: 1px solid #eaa93a; color: #eaa93a; }
  .pa-leiste-btn.is-primary { background: #eaa93a; color: #1d1206; }
  body.pa-hat-leiste { padding-bottom: 72px; }
  .hopp-mbar { display: none !important; }
}

/* ─── Breakpoints ─── */
@media (max-width: 1000px) {
  .pa-karten { grid-template-columns: 1fr; max-width: 560px; }
  .pa-usp-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .pa-wann-grid, .pa-faq-grid, .pa-anfrage-grid { grid-template-columns: 1fr; }
  .pa-feld-reihe { grid-template-columns: 1fr; gap: 0; }
  .pa .sh-band:not(.is-right):not(.is-both) .sh-col { width: 100%; }
}
@media (max-width: 480px) {
  .pa-usp-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .pa::before, .pa::after { animation: none; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .pa-zeit-linie path { stroke-dashoffset: 0; }
}
body.pa-pause .pa::before, body.pa-pause .pa::after { animation-play-state: paused; }
.pa .hopp-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pa-rg-text p { margin: 0 0 1em; }