/* ============================================================
   Kampagnen-Skins: 3 fertig gestaltete Erscheinungsbilder fuer
   die ausgelieferten Bibliothek-Kampagnen.

   Aufbau: Der Skin setzt Grundfarben, Typografie und die Bauweise
   der Bausteine. Die AKZENTFARBE (--p-accent) bleibt frei und kommt
   aus der Farbwelt-Wahl des Kunden, damit jeder Kunde seine eigene
   Handschrift hat.

   Die Reihenfolge der Bausteine bleibt in allen Skins die geprueft
   verkaufende: Headline, Video, Angebot, Text, Boni, Einloesen.
   ============================================================ */

/* ------------------------------------------------------------
   A) BUEHNE — dunkel, das Video ist der Hauptdarsteller
   ------------------------------------------------------------ */
body.skin-buehne {
    --p-bg: #08080C;
    --p-fg: #F2EFE9;
    --p-muted: #8B8578;
    --p-card: #101017;
    /* Rahmen aufgehellt: bei #1E1E28 lag der Kontrast zum Grund bei 1.21:1,
       die Kanten waren praktisch unsichtbar. */
    --p-border: #373744;
    background: var(--p-bg);
}
.skin-buehne .p-wrap { --sk-spalte: 1120px; max-width: var(--sk-spalte); }
.skin-buehne .p-hero { text-align: center; padding-top: 14px; }
.skin-buehne .p-hero h1 {
    font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    font-size: clamp(2.2rem, 5.2vw, 3.9rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.03em;
    text-wrap: balance;
}
.skin-buehne .p-sub { font-size: clamp(1rem, 1.6vw, 1.22rem); color: var(--p-muted); max-width: 620px; margin-left: auto; margin-right: auto; }

/* Lichtschein hinter dem Video */
.skin-buehne .p-video { position: relative; }
.skin-buehne .p-video::before {
    content: ""; position: absolute; inset: -50px -30px 30px; pointer-events: none;
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--p-accent) 18%, transparent), transparent 70%);
}
.skin-buehne .p-video-wrap {
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--p-accent) 30%, transparent);
    box-shadow: 0 50px 120px -30px rgba(0,0,0,0.9);
}

/* Angebots-Leiste: Countdown und Button als eine Einheit */
.skin-buehne .p-cta-block {
    background: linear-gradient(135deg, color-mix(in srgb, var(--p-accent) 12%, transparent), color-mix(in srgb, var(--p-accent) 3%, transparent));
    border: 1px solid color-mix(in srgb, var(--p-accent) 30%, transparent);
    border-radius: 18px;
    padding: 26px 34px;
    margin-top: 40px;
}
.skin-buehne .p-cta {
    font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    border-radius: 12px;
    box-shadow: 0 16px 44px -12px color-mix(in srgb, var(--p-accent) 70%, transparent);
}
.skin-buehne .p-countdown-box { background: transparent; border: 0; }
.skin-buehne .p-cd-num { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 800; }
.skin-buehne .p-body { max-width: 780px; margin-left: auto; margin-right: auto; font-size: 1.05rem; line-height: 1.8; }
.skin-buehne .p-body p:first-of-type { font-size: 1.3rem; line-height: 1.6; color: var(--p-fg); font-weight: 500; }
.skin-buehne .p-bonus-card { background: var(--p-card); border: 1px solid var(--p-border); border-radius: 16px; }
.skin-buehne .p-bonus-stack-title { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 700; letter-spacing: -0.02em; }

/* ------------------------------------------------------------
   B) BRIEF — die Seite liegt als Blatt auf dem Schreibtisch
   ------------------------------------------------------------ */
body.skin-brief {
    --p-bg: #EDEAE3;
    --p-fg: #23201C;
    /* etwas dunkler als vorher (#7A736A), damit gedaempfter Text auch
       ausserhalb des Blattes auf 4.5:1 kommt */
    --p-muted: #6E675D;
    --p-card: #FDFBF6;
    /* Rahmen dunkler: #DDD3C2 auf dem Blatt waren nur 1.43:1 */
    --p-border: #C7BAA4;
    background: var(--p-bg);
    font-family: Newsreader, Georgia, serif;
}
.skin-brief .p-wrap {
    --sk-spalte: 880px; max-width: var(--sk-spalte);
    background: var(--p-card);
    box-shadow: 0 30px 80px -24px rgba(35,32,28,0.4);
    padding: 62px 78px 56px;
    margin-top: 34px;
    margin-bottom: 46px;
}
.skin-brief .p-hero { text-align: left; }
.skin-brief .p-hero h1 {
    font-family: Newsreader, Georgia, serif;
    font-size: clamp(1.9rem, 3.6vw, 2.85rem);
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -0.015em;
}
.skin-brief .p-sub { font-size: 1.14rem; line-height: 1.75; color: #3D3830; margin-left: 0; }
.skin-brief .p-body { font-size: 1.06rem; line-height: 1.85; color: #3D3830; }

/* Video wie ein eingeklebtes Foto, mit Klebestreifen.
   Der Streifen haengt am Bild-Rahmen, NICHT am Video-Block: der beginnt mit
   der Zeile "Video ansehen", der Streifen schwebte dadurch neben der
   Beschriftung im Leeren statt auf der Bildkante zu kleben. */
.skin-brief .p-video { position: relative; padding-top: 14px; }
.skin-brief .p-video-wrap {
    /* Der Streifen muss ueber die Kante ragen, sonst klebt er nichts fest.
       Die abgeschnittenen Ecken sind hier zu vernachlaessigen, der Rahmen
       hat im Brief ohnehin nur 2px Radius. */
    overflow: visible;
}
.skin-brief .p-video-wrap::before {
    content: ""; position: absolute; top: -16px; left: 50%; z-index: 3;
    transform: translateX(-50%) rotate(-2.4deg);
    width: 122px; height: 30px;
    pointer-events: none;
    /* Klebeband, nicht brauner Balken. Drei Dinge machen den Unterschied:
       es ist durchscheinend (man sieht das dunkle Video darunter als
       milchigen Schleier), es glaenzt schraeg, und die kurzen Enden sind
       abgerissen statt sauber geschnitten. */
    background:
        linear-gradient(112deg,
            rgba(255,255,255,0.10) 0%,
            rgba(255,255,255,0.42) 26%,
            rgba(255,255,255,0.16) 42%,
            rgba(255,255,255,0.34) 62%,
            rgba(255,255,255,0.12) 100%),
        rgba(246,242,232,0.46);
    -webkit-backdrop-filter: saturate(1.2) brightness(1.06) blur(0.4px);
    backdrop-filter: saturate(1.2) brightness(1.06) blur(0.4px);
    /* Gerissene Enden links und rechts */
    clip-path: polygon(
        3% 0%, 97% 0%, 100% 17%, 96% 34%, 100% 52%, 97% 70%, 100% 86%, 96% 100%,
        4% 100%, 0% 86%, 3% 70%, 0% 52%, 4% 34%, 0% 17%);
    box-shadow: 0 2px 6px rgba(35,32,28,0.22);
}
/* Feine Kante am oberen und unteren Rand: echtes Band wirft dort eine Linie,
   ohne die sieht der Streifen aus wie ein Farbfleck. */
.skin-brief .p-video-wrap::after {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--p-accent) 24%, transparent) inset;
}
.skin-brief .p-video-wrap {
    border: 11px solid #FFFFFF;
    border-bottom-width: 14px;
    border-radius: 2px;
    outline: 1px solid #E4DCCC;
    box-shadow: 0 14px 34px -12px rgba(35,32,28,0.42);
}
/* Angebot als gestempelter Kasten */
.skin-brief .p-cta-block {
    border: 2px solid var(--p-fg);
    border-radius: 0;
    padding: 26px 30px;
    margin-top: 30px;
}
.skin-brief .p-cta {
    font-family: Inter, system-ui, sans-serif;
    border-radius: 0;
    box-shadow: none;
    font-weight: 700;
}
.skin-brief .p-countdown-box { background: transparent; border: 0; }
.skin-brief .p-cd-num { font-family: Newsreader, Georgia, serif; font-weight: 700; }
.skin-brief .p-bonus-card { background: #F6F1E6; border: 1px solid var(--p-border); border-radius: 2px; }
.skin-brief .p-bonus-stack-title { font-family: Newsreader, Georgia, serif; }
.skin-brief .p-foot { border-top: 1px dashed var(--p-border); }
@media (max-width: 720px) {
    .skin-brief .p-wrap { padding: 34px 22px 32px; margin-top: 14px; }
    .skin-brief .p-video-wrap { border-width: 7px; border-bottom-width: 9px; }
}

/* ------------------------------------------------------------
   C) SHOP — hell und modern, Video und Angebot nebeneinander
   ------------------------------------------------------------ */
body.skin-shop {
    --p-bg: #F6F7FB;
    --p-fg: #131722;
    --p-muted: #6A7185;
    --p-card: #FFFFFF;
    /* #E3E7F0 lag bei 1.16:1 auf dem Grund, die Karten hatten keine Kante */
    --p-border: #BFC5D3;
    background: var(--p-bg);
    font-family: Outfit, system-ui, sans-serif;
}
.skin-shop .p-wrap { --sk-spalte: 1180px; max-width: var(--sk-spalte); }
.skin-shop .p-hero h1 {
    font-family: Outfit, system-ui, sans-serif;
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.025em;
    text-wrap: balance;
}
.skin-shop .p-sub { color: #5A6178; font-size: 1.06rem; line-height: 1.6; }
.skin-shop .p-video-wrap { border-radius: 18px; border: 0; box-shadow: 0 30px 70px -26px rgba(19,23,34,0.55); }
/* Angebot als weisse Karte */
.skin-shop .p-cta-block {
    background: var(--p-card);
    border: 1px solid var(--p-border);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 16px 40px -22px rgba(19,23,34,0.35);
}
.skin-shop .p-cta {
    width: 100%;
    border-radius: 12px;
    font-weight: 700;
    box-shadow: 0 14px 34px -12px color-mix(in srgb, var(--p-accent) 70%, transparent);
}
.skin-shop .p-countdown-box { background: #F2F4FA; border: 1px solid var(--p-border); border-radius: 10px; }
.skin-shop .p-body { max-width: 720px; margin-left: auto; margin-right: auto; font-size: 1.02rem; line-height: 1.8; color: #5A6178; }
.skin-shop .p-body p:first-of-type { font-size: 1.24rem; line-height: 1.6; color: var(--p-fg); font-weight: 500; }
.skin-shop .p-bonus-card { background: var(--p-card); border: 1px solid var(--p-border); border-radius: 16px; box-shadow: 0 10px 26px -20px rgba(19,23,34,0.4); }

/* Split-Hero ab Notebook-Breite: Video links, Angebot rechts.
   Alles andere laeuft darunter in voller Breite weiter. */
@media (min-width: 1000px) {
    .skin-shop .p-wrap {
        display: grid;
        grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
        column-gap: 44px;
        align-items: center;
    }
    .skin-shop .p-wrap > * { grid-column: 1 / -1; }
    .skin-shop .p-wrap > .p-video,
    .skin-shop .p-wrap > .p-audio { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
    .skin-shop .p-wrap > .p-hero { grid-column: 2; grid-row: 1; align-self: end; margin: 0 0 4px; text-align: left; }
    .skin-shop .p-wrap > .p-cta-block { grid-column: 2; grid-row: 2; align-self: start; margin: 0; }
    .skin-shop .p-wrap > .p-body { grid-row: 3; margin-top: 54px; }
    .skin-shop .p-wrap > .p-bonus-stack { grid-row: 4; }
    .skin-shop .p-wrap > .p-redeem { grid-row: 5; }
    .skin-shop .p-wrap > .p-foot { grid-row: 6; }
    .skin-shop .p-cta-wrap { text-align: left; margin-top: 16px; }
    .skin-shop .p-countdown-box { min-width: 56px; }
    .skin-shop .p-cd-num { font-size: clamp(1.3rem, 2vw, 1.8rem); }
}

/* ============================================================
   Hell/Dunkel je Skin
   Der Umschalter oben rechts setzt data-mode am <html>. Jeder Skin
   hat deshalb beide Stimmungen: seine Grundfassung (oben) und die
   Gegenfassung hier. Die Akzentfarbe bleibt in beiden gleich.
   ============================================================ */

/* Buehne ist von Haus aus dunkel, hier die helle Kino-Fassung */
[data-mode="light"] body.skin-buehne,
body.skin-buehne[data-mode="light"] {
    --p-bg: #F4F2ED;
    --p-fg: #16161B;
    --p-muted: #6A665D;
    --p-card: #FFFFFF;
    /* vorher #E2DED4 mit 1.20:1, damit war die Kante nicht zu sehen */
    --p-border: #CBC4B5;
}
[data-mode="light"] .skin-buehne .p-video-wrap , body.skin-buehne[data-mode="light"] .p-video-wrap { box-shadow: 0 40px 90px -34px rgba(22,22,27,0.5); }
[data-mode="light"] .skin-buehne .p-bonus-card , body.skin-buehne[data-mode="light"] .p-bonus-card { box-shadow: 0 12px 30px -22px rgba(22,22,27,0.4); }

/* Brief ist von Haus aus Papier, hier die Nachtfassung */
[data-mode="dark"] body.skin-brief,
body.skin-brief[data-mode="dark"] {
    --p-bg: #17150F;
    --p-fg: #F0EADC;
    --p-muted: #A79C87;
    --p-card: #221E17;
    /* vorher #3A3327 mit 1.33:1 auf dem Nacht-Blatt */
    --p-border: #4A4234;
}
[data-mode="dark"] .skin-brief .p-wrap , body.skin-brief[data-mode="dark"] .p-wrap { box-shadow: 0 30px 80px -20px rgba(0,0,0,0.75); }
/* Beide Selektor-Formen fuer BEIDE Elemente: vorher fiel .p-sub aus der
   body-Fassung heraus und blieb im Dunkel-Modus dunkelbraun auf dunkel. */
[data-mode="dark"] .skin-brief .p-sub,
[data-mode="dark"] .skin-brief .p-body,
body.skin-brief[data-mode="dark"] .p-sub,
body.skin-brief[data-mode="dark"] .p-body { color: #D8CFBB; }
[data-mode="dark"] .skin-brief .p-video-wrap , body.skin-brief[data-mode="dark"] .p-video-wrap { border-color: #2E2920; outline-color: #3A3327; }
[data-mode="dark"] .skin-brief .p-bonus-card , body.skin-brief[data-mode="dark"] .p-bonus-card { background: #1D1A14; }
[data-mode="dark"] .skin-brief .p-foot , body.skin-brief[data-mode="dark"] .p-foot { border-top-color: var(--p-border); }

/* Shop ist von Haus aus hell, hier die Nachtfassung */
[data-mode="dark"] body.skin-shop,
body.skin-shop[data-mode="dark"] {
    --p-bg: #0D111C;
    --p-fg: #EEF1F8;
    --p-muted: #939BB0;
    --p-card: #151A28;
    /* vorher #232A3C mit 1.32:1 auf dem Nacht-Grund */
    --p-border: #313A52;
}
/* .p-sub war in der body-Fassung vergessen und blieb dunkelgrau auf dunkel */
[data-mode="dark"] .skin-shop .p-sub,
[data-mode="dark"] .skin-shop .p-body,
body.skin-shop[data-mode="dark"] .p-sub,
body.skin-shop[data-mode="dark"] .p-body { color: #A8B0C4; }
[data-mode="dark"] .skin-shop .p-body p:first-of-type , body.skin-shop[data-mode="dark"] .p-body p:first-of-type { color: var(--p-fg); }
[data-mode="dark"] .skin-shop .p-countdown-box , body.skin-shop[data-mode="dark"] .p-countdown-box { background: #1B2132; border-color: #262E42; }
[data-mode="dark"] .skin-shop .p-cta-block , body.skin-shop[data-mode="dark"] .p-cta-block { box-shadow: 0 20px 50px -26px rgba(0,0,0,0.85); }
[data-mode="dark"] .skin-shop .p-bonus-card , body.skin-shop[data-mode="dark"] .p-bonus-card { box-shadow: none; }

/* ------------------------------------------------------------
   D) MAGAZIN — Reportage: grosse Serif-Headline, Text in Spalten
   ------------------------------------------------------------ */
body.skin-magazin {
    --p-bg: #FBF8F3;
    --p-fg: #1A1714;
    --p-muted: #6E665C;
    --p-card: #F4EFE6;
    /* vorher #DDD5C8 mit 1.37:1 auf dem Papier-Grund */
    --p-border: #CDC3B1;
    background: var(--p-bg);
    font-family: 'Work Sans', system-ui, sans-serif;
}
.skin-magazin .p-wrap { --sk-spalte: 1060px; max-width: var(--sk-spalte); }
.skin-magazin .p-hero { text-align: left; border-bottom: 1px solid var(--p-fg); padding-bottom: 26px; }
.skin-magazin .p-hero h1 {
    font-family: Fraunces, Georgia, serif;
    font-size: clamp(2.3rem, 5.4vw, 4.1rem);
    font-weight: 900;
    line-height: 0.99;
    letter-spacing: -0.035em;
}
.skin-magazin .p-sub { font-size: 1.1rem; line-height: 1.65; color: #4C443B; max-width: 560px; margin-left: 0; }
.skin-magazin .p-video-wrap { border-radius: 0; border: 0; box-shadow: none; }
/* Fliesstext in 2 Spalten mit Initial, wie im Blatt */
.skin-magazin .p-body { font-size: 1.03rem; line-height: 1.82; color: #332E28; }
@media (min-width: 900px) {
    .skin-magazin .p-body { columns: 2; column-gap: 46px; }
    .skin-magazin .p-body p { break-inside: avoid; }
}
.skin-magazin .p-body p:first-of-type::first-letter {
    float: left; font-family: Fraunces, Georgia, serif; font-size: 4.2em;
    line-height: 0.82; font-weight: 900; padding: 6px 12px 0 0; color: var(--p-accent);
}
/* Angebot als Anzeige im Blatt */
.skin-magazin .p-cta-block { border: 1px solid var(--p-fg); border-radius: 0; padding: 30px 32px; margin-top: 46px; background: var(--p-card); }
.skin-magazin .p-cta { border-radius: 0; font-weight: 600; box-shadow: none; }
.skin-magazin .p-countdown-box { background: transparent; border: 0; }
.skin-magazin .p-cd-num { font-family: Fraunces, Georgia, serif; font-weight: 900; }
.skin-magazin .p-bonus-card { background: var(--p-card); border: 1px solid var(--p-border); border-radius: 0; }
.skin-magazin .p-bonus-stack-title { font-family: Fraunces, Georgia, serif; font-weight: 900; }
.skin-magazin .p-foot { border-top: 1px solid var(--p-fg); }
[data-mode="dark"] body.skin-magazin,
body.skin-magazin[data-mode="dark"] {
    /* Rahmen von #362F26 (1.40:1) aufgehellt */
    --p-bg: #16130F; --p-fg: #F3EEE4; --p-muted: #9C9184; --p-card: #211C16; --p-border: #453C31;
}
[data-mode="dark"] .skin-magazin .p-body,
body.skin-magazin[data-mode="dark"] .p-body { color: #DCD4C6; }
[data-mode="dark"] .skin-magazin .p-sub,
body.skin-magazin[data-mode="dark"] .p-sub { color: #BCB2A3; }

/* PFLICHT-KENNZEICHNUNG — NICHT ENTFERNEN, NICHT AUSBLENDEN.

   Der Magazin-Skin gibt einer bezahlten Werbeseite die Anmutung einer
   redaktionellen Reportage: Serif-Aufmacher, Spaltensatz, Initiale.
   Nach Paragraf 3 Absatz 3 UWG in Verbindung mit Anhang Nummer 11 ist ein
   vom Unternehmer finanzierter, redaktionell aufgemachter Inhalt ohne
   sofort erkennbaren Werbehinweis unzulaessig. Anerkannt sind praktisch nur
   die Woerter „Anzeige" und „Werbung". „Advertorial", „Sponsored" oder ein
   Hinweis erst im Fussbereich reichen nicht.

   Deshalb haengt die Kennzeichnung an .p-wrap::before und nicht am Hero:
   .p-wrap ist der aeusserste Block der Seite, sein ::before steht damit noch
   vor der Ueberschrift und ist ohne Scrollen sichtbar. .p-hero::before und
   ::after bleiben frei fuer die Gestaltung, ein spaeterer Deko-Eingriff kann
   die Kennzeichnung also nicht versehentlich ueberschreiben.

   Farben: Tinte auf Papier, invertiert als Stempel. Gemessener Kontrast
   16,8:1 im Hellmodus und 16,1:1 im Dunkelmodus, beides weit ueber den
   geforderten 4,5:1. Schriftgroesse 1,06rem liegt ueber dem Fliesstext des
   Skins (1,03rem). Es gibt bewusst KEINE Regel, die das Element auf kleinen
   Bildschirmen versteckt. */
body.skin-magazin .p-wrap::before {
    /* Bewusst schon im content in Versalien, damit die Kennzeichnung auch
       dann steht, wenn irgendwo text-transform zurueckgesetzt wird. */
    content: "ANZEIGE";
    display: block;
    width: max-content;
    max-width: 100%;
    margin: 0 0 20px;
    padding: 7px 16px 6px;
    background: var(--p-fg);
    color: var(--p-bg);
    font-family: 'Work Sans', system-ui, sans-serif;
    font-size: 1.06rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    text-align: left;
}
@media (max-width: 640px) {
    /* Auf dem Handy nur etwas enger gesperrt, damit die Zeile nicht
       umbricht. Sichtbarkeit und Groesse bleiben unangetastet. */
    body.skin-magazin .p-wrap::before {
        letter-spacing: 0.18em;
        margin-bottom: 16px;
    }
}

/* ------------------------------------------------------------
   E) NEON — Tech: Gitternetz, Leuchtkanten, Terminal-Angebot
   ------------------------------------------------------------ */
body.skin-neon {
    --p-bg: #05070C;
    --p-fg: #E8F1F5;
    --p-muted: #7C8A93;
    --p-card: #0B1018;
    /* vorher #16202C mit 1.23:1, die Gitter-Kanten waren nicht sichtbar */
    --p-border: #2C3949;
    background: var(--p-bg);
    font-family: 'Space Grotesk', system-ui, sans-serif;
    background-image:
        linear-gradient(color-mix(in srgb, var(--p-accent) 5%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--p-accent) 5%, transparent) 1px, transparent 1px);
    background-size: 56px 56px;
}
.skin-neon .p-wrap { --sk-spalte: 1100px; max-width: var(--sk-spalte); }
.skin-neon .p-hero { text-align: center; padding-top: 10px; }
.skin-neon .p-hero h1 {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: clamp(2.1rem, 4.8vw, 3.7rem);
    font-weight: 700;
    line-height: 1.03;
    letter-spacing: -0.035em;
    text-shadow: 0 0 34px color-mix(in srgb, var(--p-accent) 40%, transparent);
}
/* Unterzeile an --p-muted gebunden: die feste Farbe #94A3AB stand im hellen
   Modus mit 2.39:1 auf dem Grund und war kaum zu lesen. */
.skin-neon .p-sub { color: var(--p-muted); max-width: 580px; margin-left: auto; margin-right: auto; }
.skin-neon .p-video-wrap {
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--p-accent) 45%, transparent);
    box-shadow: 0 0 60px -18px color-mix(in srgb, var(--p-accent) 60%, transparent);
}
/* Angebot als Terminal-Fenster */
.skin-neon .p-cta-block {
    background: color-mix(in srgb, var(--p-accent) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--p-accent) 32%, transparent);
    border-radius: 14px;
    padding: 26px;
    margin-top: 34px;
}
.skin-neon .p-cta {
    border-radius: 10px;
    font-weight: 700;
    box-shadow: 0 0 40px -6px color-mix(in srgb, var(--p-accent) 60%, transparent);
}
.skin-neon .p-countdown-box { background: rgba(232,241,245,0.04); border: 1px solid color-mix(in srgb, var(--p-accent) 20%, transparent); border-radius: 8px; }
.skin-neon .p-cd-num { font-family: 'JetBrains Mono', monospace; font-weight: 700; }
.skin-neon .p-cd-unit { font-family: 'JetBrains Mono', monospace; }
.skin-neon .p-body { max-width: 760px; margin-left: auto; margin-right: auto; color: #94A3AB; line-height: 1.8; }
.skin-neon .p-body p:first-of-type { font-size: 1.26rem; color: var(--p-fg); font-weight: 500; }
.skin-neon .p-bonus-card { background: rgba(232,241,245,0.03); border: 1px solid color-mix(in srgb, var(--p-accent) 18%, transparent); border-radius: 12px; }
.skin-neon .p-foot-links button, .skin-neon .p-foot-meta { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; }
[data-mode="light"] body.skin-neon,
body.skin-neon[data-mode="light"] {
    /* Rahmen von #D5E1E8 (1.23:1) abgedunkelt */
    --p-bg: #F2F6F8; --p-fg: #0B1620; --p-muted: #5A6B78; --p-card: #FFFFFF; --p-border: #B8C8D3;
}
[data-mode="light"] .skin-neon .p-hero h1,
body.skin-neon[data-mode="light"] .p-hero h1 { text-shadow: none; }
[data-mode="light"] .skin-neon .p-body,
body.skin-neon[data-mode="light"] .p-body { color: #4A5A66; }

/* ------------------------------------------------------------
   F) MINIMAL — viel Luft, duenne Linien, keine Kaesten
   ------------------------------------------------------------ */
body.skin-minimal {
    --p-bg: #FFFFFF;
    --p-fg: #141414;
    /* #8A8A8A schaffte auf Weiss nur 3.45:1, auf der Karte 3.31:1 */
    --p-muted: #737373;
    --p-card: #FAFAFA;
    /* #EAEAEA lag bei 1.20:1, die duennen Linien waren der ganze Skin */
    --p-border: #CBCBCB;
    background: var(--p-bg);
    font-family: 'Instrument Sans', system-ui, sans-serif;
}
.skin-minimal .p-wrap { --sk-spalte: 980px; max-width: var(--sk-spalte); }
.skin-minimal .p-hero { text-align: center; padding-top: 18px; }
.skin-minimal .p-hero h1 {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: clamp(2.2rem, 5vw, 4rem);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.02em;
}
/* an --p-muted gebunden: fest #6B6B6B stand im Dunkel-Modus mit 3.67:1 */
.skin-minimal .p-sub { color: var(--p-muted); max-width: 480px; margin-left: auto; margin-right: auto; font-size: 1.05rem; }
.skin-minimal .p-video-wrap { border-radius: 6px; border: 1px solid var(--p-border); box-shadow: none; }
/* Angebot ohne Kasten: nur Luft und eine Pille */
.skin-minimal .p-cta-block { background: transparent; border: 0; padding: 0; margin-top: 54px; text-align: center; }
.skin-minimal .p-cta { border-radius: 999px; font-weight: 500; box-shadow: none; background: var(--p-fg); color: var(--p-bg); }
/* Der Button traegt die Textfarbe als Flaeche, beim Ueberfahren wird sie
   eine Spur zurueckgenommen. Feste Farben gehen hier nicht, sonst stand im
   Dunkel-Modus fast schwarze Schrift auf fast schwarzem Button. */
.skin-minimal .p-cta:hover { background: color-mix(in srgb, var(--p-fg) 86%, var(--p-bg)); }
.skin-minimal .p-countdown-box { background: transparent; border: 0; }
.skin-minimal .p-cd-num { font-family: 'Instrument Sans', system-ui, sans-serif; font-weight: 600; }
.skin-minimal .p-body { max-width: 620px; margin-left: auto; margin-right: auto; font-size: 1rem; line-height: 1.85; color: #5C5C5C; }
.skin-minimal .p-body p:first-of-type { font-family: 'Instrument Serif', Georgia, serif; font-size: 1.5rem; line-height: 1.45; color: var(--p-fg); }
.skin-minimal .p-bonus-card { background: transparent; border: 0; border-top: 1px solid var(--p-border); border-radius: 0; box-shadow: none; }
.skin-minimal .p-bonus-stack-title { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; }
.skin-minimal .p-foot { border-top: 1px solid var(--p-border); }
[data-mode="dark"] body.skin-minimal,
body.skin-minimal[data-mode="dark"] {
    /* Rahmen von #232323 (1.24:1) aufgehellt */
    --p-bg: #0C0C0C; --p-fg: #F2F2F2; --p-muted: #949494; --p-card: #141414; --p-border: #333333;
}
[data-mode="dark"] .skin-minimal .p-cta,
body.skin-minimal[data-mode="dark"] .p-cta { background: #F2F2F2; color: #0C0C0C; }
[data-mode="dark"] .skin-minimal .p-body,
body.skin-minimal[data-mode="dark"] .p-body { color: #ADADAD; }

/* ------------------------------------------------------------
   G) TICKET — die Seite ist eine Eintrittskarte
   ------------------------------------------------------------ */
body.skin-ticket {
    /* --p-bg ist die Flaeche, auf der der Inhalt WIRKLICH sitzt, also die
       Karte. Vorher stand hier der dunkle Grund, gleichzeitig war --p-fg
       ebenfalls #14171F: alles, was var(--p-bg) als Flaeche und var(--p-fg)
       als Schrift nimmt (Einloese-Kasten, Modal-Schliesser), war unlesbar. */
    --p-bg: #F5F3EE;
    --p-fg: #14171F;
    --p-muted: #575D69;
    --p-card: #E7E3D9;
    --p-border: #B4AFA2;
    /* Der dunkle Grund neben der Karte hat jetzt eine eigene Variable. */
    --p-desk: #14171F;
    background: var(--p-desk);
    font-family: Barlow, system-ui, sans-serif;
}
/* Der Inhalt liegt als Karte auf dunklem Grund, mit Stanzloechern */
.skin-ticket .p-wrap {
    position: relative;
    --sk-spalte: 1000px; max-width: var(--sk-spalte);
    background: var(--p-bg);
    color: var(--p-fg);
    padding: 46px 52px 42px;
    margin-top: 30px;
    margin-bottom: 46px;
    box-shadow: 0 40px 90px -30px rgba(0,0,0,0.8);
}
.skin-ticket .p-wrap::before,
.skin-ticket .p-wrap::after {
    content: ""; position: absolute; left: -14px; width: 28px; height: 28px;
    border-radius: 50%; background: var(--p-desk);
}
.skin-ticket .p-wrap::before { top: 32%; }
.skin-ticket .p-wrap::after  { top: 66%; }
.skin-ticket .p-hero { text-align: left; }
.skin-ticket .p-hero h1 {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: clamp(2.4rem, 5.6vw, 4.1rem);
    font-weight: 400;
    line-height: 0.94;
    letter-spacing: 0.005em;
    text-transform: uppercase;
}
.skin-ticket .p-sub { color: var(--p-muted); font-size: 1.06rem; margin-left: 0; }
.skin-ticket .p-video-wrap { border: 3px solid var(--p-fg); border-radius: 0; box-shadow: none; }
/* Angebot als Coupon-Abschnitt */
.skin-ticket .p-cta-block {
    background: var(--p-card);
    border: 0;
    border-top: 3px dashed var(--p-fg);
    border-radius: 0;
    padding: 26px 0 0;
    margin-top: 34px;
}
.skin-ticket .p-cta {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 1.35rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 0;
    box-shadow: none;
}
.skin-ticket .p-countdown-box { background: transparent; border: 0; }
.skin-ticket .p-cd-num { font-family: 'Bebas Neue', Impact, sans-serif; }
.skin-ticket .p-body { color: #3A4049; line-height: 1.8; }
.skin-ticket .p-bonus-card { background: var(--p-card); border: 0; border-bottom: 1px dashed var(--p-border); border-radius: 0; }
.skin-ticket .p-bonus-stack-title { font-family: 'Bebas Neue', Impact, sans-serif; letter-spacing: 0.04em; }
.skin-ticket .p-foot { border-top: 1px dashed var(--p-border); }
/* Nachtfassung: die Karte wird dunkel, deshalb muessen ALLE Variablen
   mitgehen. Vorher blieben --p-fg, --p-muted und --p-card in der hellen
   Fassung stehen, damit stand dunkle Schrift auf dunkler Karte. */
[data-mode="dark"] body.skin-ticket,
body.skin-ticket[data-mode="dark"] {
    --p-bg: #1C2029;
    --p-fg: #EDE9E0;
    --p-muted: #A2A8B4;
    --p-card: #242934;
    --p-border: #4A5162;
    --p-desk: #05070B;
    background: var(--p-desk);
}
[data-mode="dark"] .skin-ticket .p-hero h1,
body.skin-ticket[data-mode="dark"] .p-hero h1 { color: var(--p-fg); }
[data-mode="dark"] .skin-ticket .p-sub,
[data-mode="dark"] .skin-ticket .p-body,
body.skin-ticket[data-mode="dark"] .p-sub,
body.skin-ticket[data-mode="dark"] .p-body { color: var(--p-muted); }
[data-mode="dark"] .skin-ticket .p-cta-block,
body.skin-ticket[data-mode="dark"] .p-cta-block { background: transparent; border-top-color: var(--p-border); }

/* ------------------------------------------------------------
   H) POP — laut, jung, harte Konturen und Schatten
   ------------------------------------------------------------ */
body.skin-pop {
    --p-bg: #FFE96B;
    --p-fg: #1B1B1B;
    --p-muted: #4A4A4A;
    --p-card: #FFF8E0;
    --p-border: #1B1B1B;
    background: var(--p-bg);
    font-family: Archivo, system-ui, sans-serif;
}
.skin-pop .p-wrap { --sk-spalte: 1120px; max-width: var(--sk-spalte); }
.skin-pop .p-hero { text-align: left; }
.skin-pop .p-hero h1 {
    font-family: Archivo, system-ui, sans-serif;
    font-size: clamp(2.6rem, 7vw, 5.6rem);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -0.045em;
    text-transform: uppercase;
}
.skin-pop .p-sub { font-size: 1.2rem; font-weight: 600; color: var(--p-fg); margin-left: 0; max-width: 560px; }
.skin-pop .p-video-wrap { border: 5px solid var(--p-border); border-radius: 0; box-shadow: 14px 14px 0 var(--p-border); }
.skin-pop .p-cta-block {
    background: var(--p-card);
    border: 5px solid var(--p-border);
    border-radius: 0;
    box-shadow: 10px 10px 0 var(--p-border);
    padding: 26px 28px;
    margin-top: 46px;
}
.skin-pop .p-cta {
    border: 4px solid var(--p-border);
    border-radius: 0;
    box-shadow: none;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}
.skin-pop .p-countdown-box { background: transparent; border: 0; }
.skin-pop .p-cd-num { font-weight: 900; }
.skin-pop .p-body { background: var(--p-card); border: 5px solid var(--p-border); padding: 30px 34px; margin-top: 40px; line-height: 1.75; }
.skin-pop .p-body p:first-of-type { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.015em; color: var(--p-fg); }
.skin-pop .p-bonus-card { background: var(--p-card); border: 4px solid var(--p-border); border-radius: 0; box-shadow: 8px 8px 0 var(--p-border); }
.skin-pop .p-bonus-stack-title { font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; }
.skin-pop .p-foot { border-top: 5px solid var(--p-border); }
[data-mode="dark"] body.skin-pop,
body.skin-pop[data-mode="dark"] {
    --p-bg: #1B1B1B; --p-fg: #FFE96B; --p-muted: #C9C9C9; --p-card: #262626; --p-border: #FFE96B;
}
[data-mode="dark"] .skin-pop .p-video-wrap,
[data-mode="dark"] .skin-pop .p-cta-block,
[data-mode="dark"] .skin-pop .p-body,
[data-mode="dark"] .skin-pop .p-bonus-card,
body.skin-pop[data-mode="dark"] .p-video-wrap,
body.skin-pop[data-mode="dark"] .p-cta-block,
body.skin-pop[data-mode="dark"] .p-body,
body.skin-pop[data-mode="dark"] .p-bonus-card { border-color: #FFE96B; box-shadow: 10px 10px 0 #FFE96B; }
[data-mode="dark"] .skin-pop .p-cta,
body.skin-pop[data-mode="dark"] .p-cta { border-color: #FFE96B; }

/* ------------------------------------------------------------
   I) DOSSIER — eine Akte auf dem Schreibtisch
   ------------------------------------------------------------ */
body.skin-dossier {
    /* wie beim Ticket: --p-bg ist die Akte selbst, der Schreibtisch bekommt
       eine eigene Variable. Vorher war --p-bg der dunkle Tisch, --p-fg aber
       fast schwarz: alles auf var(--p-bg) war unlesbar. */
    --p-bg: #EFE9DA;
    --p-fg: #211E19;
    --p-muted: #5C5546;
    --p-card: #E5DDC9;
    --p-border: #BFB49A;
    --p-desk: #3A3630;
    background: var(--p-desk);
    font-family: 'Source Sans 3', system-ui, sans-serif;
}
.skin-dossier .p-wrap {
    position: relative;
    --sk-spalte: 940px; max-width: var(--sk-spalte);
    background: var(--p-bg);
    color: var(--p-fg);
    padding: 52px 62px 48px;
    margin-top: 44px;
    margin-bottom: 48px;
    box-shadow: 0 34px 80px -26px rgba(0,0,0,0.65);
}
/* Bueroklammer am oberen Rand */
.skin-dossier .p-wrap::before {
    content: ""; position: absolute; top: -20px; left: auto; right: 210px;
    width: 26px; height: 62px;
    border: 4px solid #9AA0A6; border-radius: 13px; border-bottom-color: transparent;
    transform: rotate(-8deg);
}
.skin-dossier .p-hero { text-align: left; }
.skin-dossier .p-hero h1 {
    font-family: 'Special Elite', 'Courier New', monospace;
    font-size: clamp(1.8rem, 3.6vw, 2.8rem);
    font-weight: 400;
    line-height: 1.2;
}
.skin-dossier .p-sub { color: #3F3A31; font-size: 1.1rem; line-height: 1.7; margin-left: 0; }
.skin-dossier .p-video-wrap { border: 10px solid var(--p-fg); border-bottom-width: 32px; border-radius: 0; box-shadow: 0 12px 30px -12px rgba(0,0,0,0.6); }
.skin-dossier .p-cta-block { border: 2px solid var(--p-fg); border-radius: 0; padding: 24px 28px; margin-top: 34px; background: transparent; }
.skin-dossier .p-cta {
    font-family: 'Special Elite', 'Courier New', monospace;
    letter-spacing: 0.06em;
    border-radius: 0;
    box-shadow: none;
}
.skin-dossier .p-countdown-box { background: transparent; border: 0; }
.skin-dossier .p-cd-num { font-family: 'Special Elite', 'Courier New', monospace; }
.skin-dossier .p-cd-unit { font-family: 'Special Elite', 'Courier New', monospace; font-size: 0.7rem; }
.skin-dossier .p-body { color: #3F3A31; line-height: 1.82; }
.skin-dossier .p-bonus-card { background: var(--p-card); border: 0; border-left: 4px solid var(--p-accent); border-radius: 0; }
.skin-dossier .p-bonus-stack-title { font-family: 'Special Elite', 'Courier New', monospace; }
.skin-dossier .p-foot { border-top: 1px solid var(--p-border); }
/* Nachtfassung: die Akte wird dunkel, deshalb wandern ALLE Variablen mit.
   Vorher blieben --p-fg und --p-card hell, damit war jede Schrift auf
   var(--p-fg) und jede Flaeche auf var(--p-card) im Dunkeln falsch herum. */
[data-mode="dark"] body.skin-dossier,
body.skin-dossier[data-mode="dark"] {
    --p-bg: #262219;
    --p-fg: #EFE9DA;
    --p-muted: #ABA18C;
    --p-card: #2E291F;
    --p-border: #564E3E;
    --p-desk: #1A1815;
    background: var(--p-desk);
}
[data-mode="dark"] .skin-dossier .p-hero h1,
body.skin-dossier[data-mode="dark"] .p-hero h1 { color: var(--p-fg); }
[data-mode="dark"] .skin-dossier .p-sub,
[data-mode="dark"] .skin-dossier .p-body,
body.skin-dossier[data-mode="dark"] .p-sub,
body.skin-dossier[data-mode="dark"] .p-body { color: #CFC5AE; }
[data-mode="dark"] .skin-dossier .p-cta-block,
body.skin-dossier[data-mode="dark"] .p-cta-block { border-color: var(--p-border); }

/* ============================================================
   Lesbarkeit ausserhalb des Blattes
   Bei Skins, die ein helles Blatt auf dunklen Grund legen (Brief,
   Dossier, Ticket), stehen Empfehlungs-Zeile und Fusszeile NEBEN
   dem Blatt. Sie duerfen nicht die Blatt-Textfarben erben, sonst
   sind sie unlesbar.
   ============================================================ */
.skin-brief .p-empfehlung,
.skin-dossier .p-empfehlung,
.skin-ticket .p-empfehlung { color: #B9B2A4; opacity: 1; }
.skin-brief .p-empfehlung-text b,
.skin-dossier .p-empfehlung-text b,
.skin-ticket .p-empfehlung-text b { color: #F2ECDC; }
.skin-brief .p-empfehlung-avatar,
.skin-dossier .p-empfehlung-avatar,
.skin-ticket .p-empfehlung-avatar { background: rgba(255,255,255,0.14); color: #F2ECDC; }
/* Im hellen Modus liegt das Blatt auf hellem Grund: dann normale Farben */
[data-mode="light"] .skin-brief .p-empfehlung,
body.skin-brief[data-mode="light"] .p-empfehlung { color: #6B655C; }
[data-mode="light"] .skin-brief .p-empfehlung-text b,
body.skin-brief[data-mode="light"] .p-empfehlung-text b { color: #23201C; }
[data-mode="light"] .skin-brief .p-empfehlung-avatar,
body.skin-brief[data-mode="light"] .p-empfehlung-avatar { background: rgba(35,32,28,0.1); color: #23201C; }

/* Richtigstellung: die Fusszeile steht NICHT neben dem Blatt, sie liegt im
   Markup innerhalb von .p-wrap und damit auf dem Papier. Das feste #A79E8B
   kam dort auf 2.40:1 (Ticket) bzw. 2.19:1 (Dossier). Jetzt folgt sie den
   Blatt-Farben und stimmt in beiden Modi. */
.skin-dossier .p-foot, .skin-ticket .p-foot { color: var(--p-muted); }
.skin-dossier .p-foot-links button, .skin-ticket .p-foot-links button { color: var(--p-muted); }
.skin-dossier .p-foot-links button:hover, .skin-ticket .p-foot-links button:hover { color: var(--p-fg); }

/* ============================================================
   Bonus-Block: Titel und Eyebrow muessen auf JEDEM Untergrund
   lesbar sein. Die Skins setzen sie deshalb explizit.
   ============================================================ */
.skin-brief .p-bonus-stack-title,
.skin-dossier .p-bonus-stack-title,
.skin-ticket .p-bonus-stack-title,
.skin-magazin .p-bonus-stack-title,
.skin-minimal .p-bonus-stack-title,
.skin-pop .p-bonus-stack-title { color: var(--p-fg); -webkit-text-fill-color: var(--p-fg); background: none; }
.skin-brief .p-bonus-stack-eyebrow,
.skin-dossier .p-bonus-stack-eyebrow,
.skin-ticket .p-bonus-stack-eyebrow,
.skin-magazin .p-bonus-stack-eyebrow,
.skin-minimal .p-bonus-stack-eyebrow,
.skin-pop .p-bonus-stack-eyebrow { color: var(--p-accent); }
.skin-brief .p-bonus-card, .skin-dossier .p-bonus-card, .skin-ticket .p-bonus-card { color: var(--p-fg); }
/* Die frueheren Sonderfarben fuer Ticket und Dossier im Dunkel-Modus sind
   weggefallen: --p-fg wandert dort jetzt selbst mit dem Modus. */

/* ============================================================
   Deko der Erzaehl-Skins: Aktenreiter und Stempel beim Dossier,
   Abriss-Perforation beim Ticket. Reine CSS-Zutaten, kein Markup.
   ============================================================ */
.skin-dossier .p-wrap {
    /* Platz fuer den Aktenreiter oben */
    margin-top: 66px;
}
.skin-dossier .p-hero::before {
    /* attr() liest nur Attribute des EIGENEN Elements, data-slug steht aber
       am body. Die Aktennummer kommt deshalb als vererbte CSS-Variable
       (--p-akte, gesetzt in layout.php aus Jahr und Seiten-Nummer). */
    content: "AKTE " var(--p-akte, "");
    position: absolute; top: -34px; left: 0;
    font-family: 'Special Elite', 'Courier New', monospace;
    font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase;
    background: #C8B896; color: #3A3630;
    padding: 8px 20px 6px; border-radius: 5px 5px 0 0;
}
.skin-dossier .p-hero { position: relative; }
.skin-dossier .p-hero::after {
    content: "GEPRÜFT";
    position: absolute; top: 4px; right: 0;
    transform: rotate(9deg);
    font-family: 'Special Elite', 'Courier New', monospace;
    font-size: 0.82rem; letter-spacing: 0.12em;
    border: 3px solid #A33B2A; color: #A33B2A;
    padding: 8px 13px; opacity: 0.8;
}
@media (max-width: 720px) { .skin-dossier .p-hero::after { display: none; } }
/* Der Stempel im Dunkel-Modus: das dunkle Rot kam auf der Nacht-Akte nur auf
   2.3:1. Heller Ton, gleiche Anmutung. */
[data-mode="dark"] .skin-dossier .p-hero::after,
body.skin-dossier[data-mode="dark"] .p-hero::after { border-color: #E07A63; color: #E07A63; }


/* Kopfzeile der Akte: die Empfehlungs-Zeile bekommt ihr Formular-Label und
   die Schreibmaschinen-Optik aus dem Entwurf. */
.skin-dossier .p-empfehlung {
    font-family: 'Special Elite', 'Courier New', monospace;
    letter-spacing: 0.01em;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--p-border);
}
.skin-dossier .p-empfehlung { flex-wrap: wrap; }
.skin-dossier .p-empfehlung::before {
    content: "VORGANG " var(--p-akte, "");
    /* Volle Breite erzwingen, sonst stellt der Flex-Container die Zeile
       neben das Foto statt darueber. */
    flex: 0 0 100%; width: 100%;
    font-size: 0.72rem; letter-spacing: 0.12em;
    color: var(--p-muted);
    margin-bottom: 8px;
}

/* Befund-Marke ueber dem Fliesstext, wie im Entwurf. */
.skin-dossier .p-body::before {
    content: "BEFUND";
    display: block;
    font-family: 'Special Elite', 'Courier New', monospace;
    font-size: 0.8rem; letter-spacing: 0.12em;
    color: var(--p-muted);
    margin-bottom: 12px;
}

/* Anlagen statt Boni: die Ueberschrift des Bonus-Blocks bekommt im Dossier
   die Akten-Sprache und eine durchgezogene Linie darunter. */
.skin-dossier .p-bonus-stack-eyebrow {
    font-family: 'Special Elite', 'Courier New', monospace;
    letter-spacing: 0.12em;
}

/* ============================================================
   J) AKZENT-SCHRIFT (--p-accent-ink)
   Die Akzentfarbe kommt vom Kunden und kann sehr hell (Gold) oder sehr
   dunkel (Blau) sein. Als Flaeche ist das egal, als SCHRIFT nicht: Gold
   auf weissem Papier liegt bei 2.3:1, Blau auf schwarzem Grund bei 2.9:1.
   Deshalb bekommt jede Schrift, die den Akzent traegt, eine gemischte
   Fassung: 58 Prozent Akzent, der Rest die Textfarbe des Skins. Die
   Mischung kippt automatisch mit dem Modus, weil --p-fg mitkippt.
   Geprueft mit Gold #C9A84C, Blau #2563EB, Orange #EA580C, Rot #DC2626
   auf allen 18 Flaechen: schlechtester Wert 3.66:1.
   ============================================================ */
body[class*="skin-"] {
    --p-accent-ink: color-mix(in srgb, var(--p-accent) 58%, var(--p-fg));
}
body[class*="skin-"] .p-bonus-stack-eyebrow,
body[class*="skin-"] .p-redeem-eyebrow,
body[class*="skin-"] .p-countdown-label,
body[class*="skin-"] .p-countdown-box .p-cd-unit,
body[class*="skin-"] .p-cd-bartext [data-cd-d],
body[class*="skin-"] .p-cd-bartext [data-cd-h],
body[class*="skin-"] .p-cd-bartext [data-cd-m],
body[class*="skin-"] .p-cd-bartext [data-cd-s],
body[class*="skin-"] .p-cd-minimaltext [data-cd-d],
body[class*="skin-"] .p-cd-minimaltext [data-cd-h],
body[class*="skin-"] .p-cd-minimaltext [data-cd-m],
body[class*="skin-"] .p-cd-minimaltext [data-cd-s],
body[class*="skin-"] .p-countdown.is-expired .p-countdown-expired,
body[class*="skin-"] .wsk-bb-steps li::marker,
body[class*="skin-"] .wsk-bb-divider,
body[class*="skin-"] .wsk-bb-val,
body[class*="skin-"] .p-redeem-locknote-text strong,
body[class*="skin-"] .p-redeem-locknote-count,
body[class*="skin-"] .p-redeem-success-scroll,
body[class*="skin-"] .p-body a,
body[class*="skin-"] .p-modal-body a { color: var(--p-accent-ink); }
/* Der Unterstrich der Textlinks darf ruhig der reine Akzent bleiben */
body[class*="skin-"] .p-body a:hover { color: var(--p-accent-ink); }
/* Initial im Magazin-Fliesstext: gleiche Rechnung, es ist Schrift */
.skin-magazin .p-body p:first-of-type::first-letter { color: var(--p-accent-ink); }

/* ============================================================
   K) VERLAUFS-SCHRIFT ABSCHALTEN
   Die Seite setzt bei „So holst du dir die Boni" und beim Bonus-Titel ein
   Wort per background-clip:text in einen Verlauf, der zur helleren Seite
   hin mit Weiss gemischt wird. Auf hellem Papier (Brief, Shop hell,
   Magazin, Minimal, Ticket, Dossier, Pop, Neon hell, Buehne hell) lief
   die zweite Haelfte ins Weisse und das Wort verschwand. Auf Skins mit
   eigener Flaeche unter der Ueberschrift war es teilweise weg.
   Hier wird der Verlauf fuer ALLE Skins durch einfarbige Schrift ersetzt.
   Die Auswahl braucht ein Attribut-Selektor plus zwei Klassen, damit sie
   auch die Klon-Fassung (.wsk-clone-theme) sicher ueberschreibt.
   ============================================================ */
body[class*="skin-"] .p-bonus-stack-title em,
body[class*="skin-"] .p-redeem-title em {
    background: none;
    background-image: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: var(--p-accent-ink);
    color: var(--p-accent-ink);
}
/* Die Ueberschriften selbst tragen in JEDEM Skin die Textfarbe, damit kein
   geerbter Verlauf und keine Flaeche sie schluckt. */
body[class*="skin-"] .p-bonus-stack-title,
body[class*="skin-"] .p-redeem-title {
    background: none;
    -webkit-text-fill-color: var(--p-fg);
    color: var(--p-fg);
}

/* ============================================================
   L) BONUS-BLOCK AM SEITENENDE
   Der Block (.p-bonus-stack) bringt aus der Seite eigene Flaechen mit,
   die auf dunkle Skins gerechnet sind: die Karten legen einen weissen
   Schleier auf, die Cover-Kachel ist innen fast schwarz, und die
   Schriftfarbe wird nur geerbt. Bei den Skins mit hellem Blatt auf
   dunklem Grund (Brief, Ticket, Dossier, Magazin) ging das schief:
   im Dunkel-Modus stand die helle Blatt-Schrift auf der hellen
   Block-Flaeche und der ganze Block war praktisch leer.
   Deshalb bekommt der Block hier in JEDEM Skin und in BEIDEN Modi
   eigene Farben, alle aus den Skin-Variablen abgeleitet.
   ============================================================ */
body[class*="skin-"] .p-bonus-stack {
    /* gleicher Aufbau wie in der Seite, aber hier explizit und in beiden
       Modi richtig: der Akzent-Schimmer liegt auf der Karten-Flaeche */
    background:
        radial-gradient(110% 140% at 100% 0%, color-mix(in srgb, var(--p-accent) 14%, transparent) 0%, transparent 55%),
        radial-gradient(90% 120% at 0% 100%, color-mix(in srgb, var(--p-accent) 10%, transparent) 0%, transparent 60%),
        var(--p-card);
    color: var(--p-fg);
    border: 1px solid color-mix(in srgb, var(--p-accent) 35%, var(--p-border));
}
/* Die einzelne Bonus-Karte sitzt auf der Karten-Flaeche und setzt sich
   ueber ihre Kante ab. Ein eingefaerbter Ton waere huebsch, kostet aber
   gedaempften Text den noetigen Kontrast, deshalb bleibt die Flaeche. */
body[class*="skin-"] .p-bonus-card,
body[class*="skin-"] .p-bonus-link {
    background: var(--p-card);
    border-color: var(--p-border);
    color: var(--p-fg);
}
body[class*="skin-"] .p-bonus-title { color: var(--p-fg); }
body[class*="skin-"] .p-bonus-desc { color: var(--p-muted); opacity: 1; }
/* Cover-Kachel: statt der fast schwarzen Fuellung ein Ton aus dem Skin,
   sonst ist auf Papier ein schwarzes Loch neben dem Bild. */
body[class*="skin-"] .p-bonus-cover-wrap {
    background: color-mix(in srgb, var(--p-fg) 10%, var(--p-card));
    border-color: var(--p-border);
}
/* Der Trenner unter der Ueberschrift laeuft vom Akzent ins Nichts und
   braucht auf hellem Papier eine sichtbare Startfarbe. */
body[class*="skin-"] .p-bonus-stack-divider {
    background: linear-gradient(90deg, var(--p-accent-ink), transparent);
}
/* Beim Dossier bleibt die Akte-Anmutung: die Karte behaelt ihren
   Akzent-Streifen links, aber Flaeche und Schrift kommen aus dem Modus. */
.skin-dossier .p-bonus-card {
    border: 0;
    border-left: 4px solid var(--p-accent-ink);
    border-radius: 0;
}
/* Beim Ticket bleibt die gestrichelte Abrisskante */
.skin-ticket .p-bonus-card {
    border: 0;
    border-bottom: 1px dashed var(--p-border);
    border-radius: 0;
}

/* ============================================================
   M) GROSSE BILDSCHIRME
   Die Vorlagen hatten feste Spaltenbreiten zwischen 800 und 1240 Pixeln.
   Auf einem breiten Monitor blieb links und rechts sehr viel Leere, die
   Seite wirkte verloren. Ab 1700 Pixeln waechst jede Spalte deshalb um
   knapp ein Fuenftel mit, gedeckelt bei 1560, damit keine Vorlage ihre
   Bauweise verliert. Skins ohne eigene Breite starten beim Standardwert.

   Der Fliesstext wird dabei ausdruecklich NICHT breiter: ueber etwa 80
   Zeichen je Zeile findet das Auge den Zeilenanfang nicht mehr zuverlaessig.
   Video, Angebot und Boni duerfen die neue Breite dagegen voll nutzen.
   ============================================================ */
@media (min-width: 1700px) {
    body[class*="skin-"][data-width] .p-wrap {
        max-width: min(calc(var(--sk-spalte, 1240px) * 1.18), 1560px);
    }
    /* Lesbare Zeilenlaenge halten. Magazin und Zeitung sind ausgenommen,
       die setzen ihren Text ohnehin in Spalten. */
    body[class*="skin-"][data-width] .p-body,
    body[class*="skin-"][data-width] .p-sub {
        max-width: 78ch;
    }
    body.skin-magazin[data-width] .p-body,
    body.skin-zeitung[data-width] .p-body,
    body.skin-magazin[data-width] .p-sub,
    body.skin-zeitung[data-width] .p-sub {
        max-width: none;
    }
}
/* Sehr breite Monitore: die Spalte darf noch etwas weiter, der Text nicht. */
@media (min-width: 2100px) {
    body[class*="skin-"][data-width] .p-wrap {
        max-width: min(calc(var(--sk-spalte, 1240px) * 1.32), 1720px);
    }
}

/* ============================================================
   N) GENEIGTE MEDIEN RICHTEN SICH BEIM ABSPIELEN AUF
   Mehrere Vorlagen legen das Video schraeg aufs Blatt: als Polaroid, als
   Beweisfoto, als eingestecktes Sammelbild. Als Deko im Ruhezustand ist das
   gewollt. Zum Ansehen nicht: den Kopf neigt niemand.

   Gilt zentral fuer JEDE Vorlage, damit es bei neuen nicht vergessen wird.
   Die Neigung selbst bleibt beim jeweiligen Skin, hier wird sie nur fuer die
   Dauer der Wiedergabe zurueckgenommen.
   ============================================================ */
body[class*="skin-"] .p-video,
body[class*="skin-"] .p-audio,
body[class*="skin-"] .p-video-wrap,
body[class*="skin-"] .p-audio-wrap {
    transition: transform 260ms cubic-bezier(0.23, 1, 0.32, 1);
}
body[class*="skin-"] .p-video:has(.p-video-wrap.is-playing),
body[class*="skin-"] .p-audio:has(.p-audio-wrap.is-playing),
body[class*="skin-"] .p-video-wrap.is-playing,
body[class*="skin-"] .p-audio-wrap.is-playing {
    transform: rotate(0deg) !important;
}
@media (prefers-reduced-motion: reduce) {
    body[class*="skin-"] .p-video,
    body[class*="skin-"] .p-audio,
    body[class*="skin-"] .p-video-wrap,
    body[class*="skin-"] .p-audio-wrap { transition: none; }
}