/* WP9a: Ergänzungen zum Original-2025-Stylesheet in /resources/styles.css.
   CI-Farben, Abstände, Breakpoints und Komponenten bleiben dort definiert. */
[hidden] { display: none !important; }
.sr-only, .skip-link:not(:focus) { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip-link:focus { position:fixed; top:1rem; left:1rem; z-index:100; padding:1rem; background:white; color:#254a5d; }
:focus-visible { outline:3px solid #ffb81c; outline-offset:4px; }
main:focus { outline:none; }
.nowrap { white-space:nowrap; }
/* Native buttons retain the exact 2025 input/button treatment. */
button { font:inherit; }
/* Frage in allen Zuständen im dunklen Streifen-Lila (auf #D9D5EC 4,8:1, AA).
   WP23: Antworttext und Links (erben die Farbe, bleiben unterstrichen) im selben Lila, auf Weiß 6,9:1. */
.akkordeon .akkordeon-button { border:0; border-radius:0; width:100%; text-align:left; font-family:inherit; color:#5B4CA9; }
.akkordeon .akkordeon-inner { color:#5B4CA9; }
/* Shared by start and game FAQs. Alternative: --accordion-arrow-bg:#bb16a3. */
:root { --accordion-arrow-bg:#9164ff; }
.akkordeon .akkordeon-button::before { background-color:var(--accordion-arrow-bg); }
.akkordeon .akkordeon-button::after { background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 50 50' style='enable-background:new 0 0 50 50;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D%0A%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M25,35.8c-0.5,0-0.9-0.2-1.2-0.5L5.6,17.1c-0.7-0.7-0.7-1.7,0-2.4C6.3,14,7.3,14,8,14.7l17,17l17-17 c0.7-0.7,1.7-0.7,2.4,0c0.7,0.7,0.7,1.7,0,2.4L26.2,35.3C25.9,35.6,25.5,35.8,25,35.8z'/%3E%3C/g%3E%3C/svg%3E"); }
.akkordeon .akkordeon-button:is(:hover, :focus-visible, .active) { background-color:#D9D5EC; }
.akkordeon .akkordeon-button:hover { text-decoration:underline; text-underline-offset:.2em; }
.akkordeon .akkordeon-button:focus-visible { outline:3px solid #254a5d; outline-offset:3px; }
.signup_form .button { width:100%; }
.signup_form .button:disabled { background-color:#b7dcc6; cursor:not-allowed; }
.button { text-decoration:none; box-sizing:border-box; }
/* Retain the drawn 2025 checkbox; its actual input now remains focusable. */
.checkbox-field { position:relative; margin-top:10px; }
.checkbox-field input[type="checkbox"] { visibility:visible; opacity:0; position:absolute; top:0; left:10px; width:24px; height:24px; margin:0; cursor:pointer; z-index:1; }
.checkbox-field input:focus-visible + label::before { outline:3px solid #ffb81c; outline-offset:3px; }
.checkbox-field input + label { min-height:24px; position:relative; line-height:24px; }
/* Keep the drawn box out of the text flow so every line shares the same inset. */
.checkbox-field input + label::before { position:absolute; top:0; left:-2.8rem; margin:0; }
.signup_form input[type="email"],
.signup_form input[type="email"]::placeholder { text-align:left; }
input[aria-invalid="true"] { border-color:#bb16a3; }
/* WP23: E-Mail-Felder wie die Checkboxen: Kontur 2px #e1d9fc (weißer Hintergrund bleibt), Fehler = Magenta-Kontur,
   Fokus = derselbe gelbe Ring wie bei den Checkboxen. Er ersetzt den Petrol-Rahmen von 2025 und bleibt auch im
   Fehlerzustand sichtbar (Sprunglinks im Fehlerbanner setzen den Fokus dort hinein; Magenta + Petrol sahen gleich aus wie nur Magenta). */
.signup_form input[type="email"]:not([aria-invalid="true"]) { border-color:#e1d9fc; }
.signup_form input[type="email"]:focus-visible { outline:3px solid #ffb81c; outline-offset:3px; }
.checkbox-field input[aria-invalid="true"] + label::before { border-color:#bb16a3; }
.error-summary { box-sizing:border-box; text-align:center; background:#bb16a3; color:white; }
.error-summary ul { list-style:none; padding:0; margin:0; }
/* WP29: Fokus nur zum Vorlesen/Hinscrollen nach dem Neuladen – wie main kein Ring (sonst gelber Strich unter dem Banner); die Links behalten ihren. */
#form-errors:focus { outline:none; }
.error-summary p { margin:0; }
/* WP29: Schlichter Text unter dem Feld statt weißem Kasten (sah aus wie ein zweites Eingabefeld). Weiß fett hält auf
   beiden Streifentönen mind. 4,5:1, Magenta direkt auf Lila nicht – Magenta trägt nur das Warnsymbol (docs/wp29-report.md).
   Checkboxen: Text bündig mit dem Label-Text (3.5rem), Symbol davor. */
.signup_form .field-error { display:flex; gap:.4em; margin:4px 0 10px; color:white; font-size:.875rem; font-weight:700; line-height:1.4; text-align:left; overflow-wrap:anywhere; }
.signup_form .field-error::before { content:""; flex:none; width:1.15em; height:1.15em; margin-top:.1em; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23fff'/%3E%3Ccircle cx='10' cy='10' r='8.5' fill='%23bb16a3'/%3E%3Cpath fill='%23fff' d='M8.8 4.6h2.4l-.4 6.9H9.2z'/%3E%3Ccircle cx='10' cy='14.5' r='1.3' fill='%23fff'/%3E%3C/svg%3E") center/contain no-repeat; }
.checkbox-field .field-error { margin:6px 0 10px calc(3.5rem - 1.55em); }
/* WP22: Helllila Kontur und Haken auf transparenter Box – #c4b2fa fiel auf Desktop bis 2,91:1, #e1d9fc hält überall mind. 4:1 (docs/wp22-report.md).
   Hover zeigt nur einen blassen Vorschau-Haken, damit er nicht wie „angehakt“ aussieht; :checked steht danach und gewinnt. */
.checkbox-field input + label::before { border-color:#e1d9fc; background-color:transparent; }
.checkbox-field input:hover + label::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath fill='%23e1d9fc' fill-opacity='.35' d='M3.8,26.2l5.8-5.8l9.6,9.4L40.4,8.6l5.9,5.8L19.2,41.4L3.8,26.2z'/%3E%3C/svg%3E"); }
.checkbox-field input:checked + label::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath fill='%23e1d9fc' d='M3.8,26.2l5.8-5.8l9.6,9.4L40.4,8.6l5.9,5.8L19.2,41.4L3.8,26.2z'/%3E%3C/svg%3E"); }
/* WP21: Auf der Spielseite nullt der vollbreite Block alle Kinder-Abstände – Überschrift wieder absetzen. */
.inner_content > .faq-section > h2 { margin-bottom:.83em; }
/* WP22: Überschriften schlicht weiß ohne Kontur – die weiße Kontur stammte aus dem 2025-Layout. */
h1 { color:white; }
h1::before { content:none; }
/* Keep original geometry, including the heading/form gap and the icon circles. */
.form_wrapper h1 { max-width:960px; }
.big_animation > img { height:auto; }
/* Legal pages: 700/900px columns and bold inline headings. */
.legal-content { overflow-wrap:anywhere; }
.legal-content h2, .legal-content h3 { font-size:inherit; text-align:left; text-transform:none; margin:1em 0 0; }
.legal-content h2 + p, .legal-content h3 + p { margin-top:0; }
.status-section { text-align:center; }
.inner_content > .status-section > p { margin:2rem auto; }
/* Meldung ohne Beschreibung (z. B. 404): derselbe Abstand zum Button wie mit Beschreibung. */
.inner_content > .status-section > h1 + .button { margin-top:2rem; }
/* WP28: Countdown-Seite mit dem Startseiten-Keyvisual. Etwas kleiner als dort, damit Überschrift und Zähler auf
   1440 × 900 samt Startdatum noch im ersten Bild stehen; ohne die 2025-Überlappung, die nur dem Formularblock gilt. */
.countdown-page .hero-kv { margin-bottom:0; }
.countdown-page .inner_content > .status-section { margin-top:0; padding-top:0; }
.countdown-page .status-section h1 { margin-top:1rem; }
/* WP31: ruhiger wie der 2025-Teaser – ohne Schläger und Starburst, Motivformen unverändert. Schriftzug kompakt:
   Die zweite Zeile rückt in die Lücke, die auf der Startseite der Schläger füllt, und steht bündig unter der ersten.
   Eingerückt läge „& WIN“ dort über den linken Luftschlangen des Baums. */
.countdown-page :is(.kv-burst, .kv-stick) { display:none; }
.countdown-page .hero-kv__line:first-child { top:calc(110 * var(--pt)); }
.countdown-page .hero-kv__line:last-child { left:calc(64.1 * var(--pt)); top:calc(200 * var(--pt)); }
/* Countdown-Seite ohne Schnee. Der 10.000-€-Störer groß rechts neben dem Baum, auf halber Höhe; Keyvisual schmaler, damit Überschrift, Zähler, Datum und Schlusssatz ins erste Bild passen. */
.countdown-page .hero-kv { max-width:640px; }
.countdown-page .hero-kv__badge { left:calc(748 * var(--pt)); top:calc(255 * var(--pt)); width:max(calc(170 * var(--pt)), 96px); right:auto; translate:-50% -50%; }
/* Zähler im Stil des 10.000-€-Störers: Kreise, Navy, Inter Black, leicht gedreht. WP31: Cyan (CI-Highlight) statt Gelb,
   damit der Störer der einzige gelbe Kreis bleibt; Navy auf Cyan 6,4:1. */
.countdown { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.inner_content > .status-section > .countdown { margin-top:1.5rem; }
.countdown__unit { display:flex; flex-direction:column; align-items:center; justify-content:center; width:clamp(76px, 20vw, 124px); aspect-ratio:1; border-radius:50%; background:#59e9e9; color:#254a5d; font-family:"Inter Hero", "Inter", Arial, sans-serif; font-weight:900; text-transform:uppercase; rotate:var(--tilt); }
.countdown__unit:nth-child(1) { --tilt:-6deg; }
.countdown__unit:nth-child(2) { --tilt:4deg; }
.countdown__unit:nth-child(3) { --tilt:-3deg; }
.countdown__unit:nth-child(4) { --tilt:7deg; }
/* Ab vier Stellen (nur bei sehr weit entferntem Start) wird die Zahl kleiner, damit sie im Kreis bleibt. */
.countdown__value { font-size:calc(clamp(30px, 8vw, 52px) * 3 / max(3, var(--digits, 1))); line-height:1; }
.countdown__name { margin-top:.2em; font-size:clamp(9px, 2.4vw, 12px); letter-spacing:.06em; }
.inner_content > .status-section > .status-date { margin-top:1.25rem; font-weight:bold; white-space:nowrap; }
@media (prefers-reduced-motion:no-preference) {
  /* Kreise springen nach dem Keyvisual-Intro nacheinander auf, wie der Störer (kv-pop aus hero-kv.css). */
  .countdown__unit { animation:kv-pop .45s cubic-bezier(.34, 1.56, .64, 1) backwards; }
  .countdown__unit:nth-child(1) { animation-delay:1.5s; }
  .countdown__unit:nth-child(2) { animation-delay:1.6s; }
  .countdown__unit:nth-child(3) { animation-delay:1.7s; }
  .countdown__unit:nth-child(4) { animation-delay:1.8s; }
}
/* WP34: Vollständiges Danke-Motiv im normalen Fluss. Die festen 2025-Breiten
   schnitten auf schmalen Displays seitliche Dekoration ab. */
.thanks-page .thank_you_image { position:relative; top:auto; width:100%; max-width:900px; margin:0 auto; overflow:visible; z-index:auto !important; }
.thanks-page .thank_you_image .big_animation { width:100% !important; max-width:100%; margin:0 auto; transform:none; }
.thanks-page .thank_you_image + .thank_you_text { margin-top:0; }
.thanks-page .thank_you_image + .thank_you_text h1 { margin-top:1rem; }
.thank_you_text { text-align:center; }
.thank_you_text .thanks-text, .thank_you_text .mail-help { max-width:600px; margin:1rem auto; }
/* The 2025 animation slot now hosts the approved Piñata, with no component overrides. */
.game-hero { position:relative; text-align:center; }
.game-hero h1 { margin-bottom:1rem; }
.game-stage { width:100%; aspect-ratio:760 / 650; max-width:700px; margin:1.5rem auto 0; position:relative; }
.has-result .game-instructions { visibility:hidden; }
.game-instructions p { margin:.5rem auto; font-size:1rem; }
.game-stage > .game-value-badge { position:absolute; top:0; right:0; width:clamp(88px, 22%, 146px); height:auto; z-index:2; pointer-events:none; }
/* WP20: Faden, Bruchstücke, Konfetti und Gewinnkarte dürfen über den Rahmen hinaus (Karte gleitet hinter der Überschrift herein).
   Partikel liegen auf einer festen Ebene über dem Fenster; Text bleibt über dem Faden. */
.game-stage .pinata { overflow:visible; }
.game-stage .pinata-fx { position:fixed; z-index:3; }
.game-instructions { position:relative; z-index:2; }
.scroll-cue { display:inline-block; margin:1.5rem auto 0; }
.inner_content > .reward_text { width:90%; max-width:780px; }
.reward_text h2 { text-transform:uppercase; font-size:1.17em; margin-top:2rem; }
.reward_text p { margin:2rem auto 0; }
.reward_text .result-note { font-size:1rem; }
.no-script-result { text-align:center; }
.no-script-result img { width:min(80%,420px); }
@media (max-width:599px) {
  .game-hero h1 { font-size:1.5rem; }
  /* The old animation needed 10rem padding plus the heading's 3rem margin.
     Account for the inherited -3rem section overlap without changing the hero. */
  .start-page .form_wrapper { padding-top:6rem !important; }
  .start-page .form_wrapper h1 { margin-top:0; }
}
/* Ankerlinks (z. B. „So bekommst du deinen Gewinn ↓“) gleiten statt zu springen; bei reduzierter Bewegung springen sie weiter. */
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto !important; } }
/* Original domain information bubble, now usable by keyboard and touch. */
.infobubble summary { list-style:none; }
.infobubble summary::-webkit-details-marker { display:none; }
.infobubble[open] .infobubble-popup { visibility:visible; z-index:20; }
.infobubble-popup { max-width:90vw; overflow-wrap:anywhere; }
.signup-notice { background:#bb16a3; color:white; }
.signup-notice strong { display:block; }
.error-summary { margin-bottom:0; }

/* Full-width fields; the desktop information control sits beside the column. */
.signup_form .form-field { position:relative; }
.signup_form .infobubble:not(.text-infobubble) { top:18px; right:-37px; width:25px; height:25px; z-index:21; }
.signup_form .infobubble:not([open]) .infobubble-popup { visibility:hidden; }
.signup_form .infobubble-bubble { display:block; position:relative; }
/* Expand the 25px circle to a 44px touch target without enlarging its visual. */
.signup_form .infobubble-bubble::after { content:""; position:absolute; inset:-9.5px; }
.signup_form .infobubble-popup { top:100%; margin-top:12px; width:300px; min-width:0; max-width:calc(90vw - 10px); text-align:left; }
/* Keep the hover path into the readable popup continuous across the gap. */
.signup_form .infobubble-popup::before { content:""; position:absolute; top:-12px; left:0; right:0; height:12px; }
@media (max-width:799px) {
  .signup_form .infobubble:not(.text-infobubble) { right:12px; }
  .signup_form #email { padding-right:56px; }
}
/* Test-Vorschau-Chip (nur mit allow_date_preview): fest unten links am Browserfenster. */
.date-preview { position:fixed; left:.5rem; bottom:.5rem; z-index:101; width:fit-content; max-width:calc(100% - 1rem); box-sizing:border-box;
  margin:0; padding:.375rem .875rem; border-radius:9999px;
  background:#254a5d; color:#fff; font:700 .875rem/1.4 "Inter", Arial, sans-serif; }
.date-preview a { color:#64eb9b; text-decoration:underline; }
.date-preview a:hover { text-decoration:none; }
.date-preview a:focus-visible { outline-offset:1px; }
/* Elements scrolled into view by keyboard focus stay clear of the badge. */
html:has(.date-preview) { scroll-padding-bottom:3.5rem; }
@media (max-width:599px) { .countdown-page .hero-kv { padding-top:0; } .countdown-page .hero-kv__badge { left:auto; right:4px; translate:0 -50%; } }