/* ============================================================
   A) STUDIO. Regieraum: Monitor ueber die volle Breite,
      Aufnahme-Leiste oben, Angebots-Konsole neben der Headline
   ============================================================ */
body.skin-studio {
    --p-bg: #0B0D12;
    --p-fg: #ECEFF4;
    --p-muted: #9AA3B2;
    --p-card: #12161F;
    /* Der Entwurf zeigt #1F2634. Das steht mit 1.2:1 auf dem Grund und
       die Kanten waeren nicht zu sehen, deshalb aufgehellt. */
    --p-border: #313B4E;
    /* Die Flaeche, auf der der Monitor sitzt: tiefer als der Seitengrund */
    --s-ledge: #05070A;
    --s-bar: #0E1118;
    background: var(--p-bg);
    font-family: 'Sora', system-ui, sans-serif;
}

/* Aufnahme-Leiste ganz oben, ueber die volle Breite */
body.skin-studio .p-empfehlung {
    max-width: none;
    margin: 0;
    padding: 14px clamp(16px, 4vw, 44px);
    padding-right: 78px;
    background: var(--s-bar);
    border-bottom: 1px solid var(--p-border);
    color: var(--p-muted);
    opacity: 1;
    font-size: 0.86rem;
}
body.skin-studio .p-empfehlung-avatar {
    background: var(--p-border);
    color: var(--p-fg);
    border-radius: 50%;
    font-weight: 600;
}
body.skin-studio .p-empfehlung-text b { color: var(--p-fg); font-weight: 600; }
/* Aufnahme-Plakette rechts, der Punkt davor ist der Kunden-Akzent */
body.skin-studio .p-empfehlung::after {
    content: "Aufnahme";
    margin-left: auto;
    padding: 6px 13px 6px 27px;
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--p-accent) 45%, transparent);
    background:
        radial-gradient(circle at 13px 50%, var(--p-accent) 0 4px, transparent 4px),
        color-mix(in srgb, var(--p-accent) 14%, transparent);
    color: var(--p-accent-ink);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}
@media (max-width: 900px) {
    /* Unter der schwebenden Bedienzeile durchtauchen */
    body.skin-studio .p-empfehlung { margin-top: 56px; }
}
@media (max-width: 560px) {
    body.skin-studio .p-empfehlung { padding-right: 66px; }
    body.skin-studio .p-empfehlung::after { content: "REC"; letter-spacing: 0.08em; }
}

body.skin-studio .p-wrap { --sk-spalte: 1180px; max-width: var(--sk-spalte); padding-top: 30px; }
body.skin-studio .p-hero { text-align: left; }
body.skin-studio .p-hero h1 {
    font-family: 'Sora', system-ui, sans-serif;
    font-size: clamp(2rem, 4.4vw, 2.9rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
    text-wrap: balance;
}
body.skin-studio .p-sub {
    color: var(--p-muted);
    font-size: clamp(1rem, 1.5vw, 1.08rem);
    line-height: 1.65;
    margin-left: 0;
}

/* Monitor: bricht seitlich aus der Inhaltsspalte aus und sitzt auf
   einer eigenen, tieferen Flaeche */
body.skin-studio .p-video {
    margin: 0 -24px 30px;
    padding: 0 0 20px;
    background: var(--s-ledge);
}
body.skin-studio .p-audio-label {
    padding: 12px clamp(16px, 4vw, 44px) 0;
    margin-bottom: 0;
    color: var(--p-muted);
}
body.skin-studio .p-video-wrap {
    border-radius: 0;
    border: 0;
    border-top: 1px solid var(--p-border);
    border-bottom: 1px solid var(--p-border);
    margin-top: 10px;
    box-shadow: none;
}
body.skin-studio .p-video-wrap::after { box-shadow: none; border-radius: 0; }
/* Kapitel-Leiste unter dem Monitor: der erste Abschnitt in Akzentfarbe */
body.skin-studio .p-video::after {
    content: "";
    display: block;
    height: 5px;
    margin: 12px clamp(16px, 4vw, 44px) 0;
    border-radius: 3px;
    background-image:
        linear-gradient(var(--p-accent), var(--p-accent)),
        linear-gradient(color-mix(in srgb, var(--p-fg) 22%, transparent), color-mix(in srgb, var(--p-fg) 22%, transparent));
    background-size: 20% 100%, 100% 100%;
    background-repeat: no-repeat;
}

/* Angebots-Konsole */
body.skin-studio .p-cta-block {
    background: var(--p-card);
    border: 1px solid var(--p-border);
    border-radius: 14px;
    padding: 22px;
    margin-top: 30px;
}
body.skin-studio .p-cta {
    font-family: 'Sora', system-ui, sans-serif;
    font-weight: 800;
    border-radius: 10px;
    box-shadow: 0 14px 34px -14px color-mix(in srgb, var(--p-accent) 70%, transparent);
}
body.skin-studio .p-countdown {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 4px 0 10px;
    margin-top: 0;
}
body.skin-studio .p-countdown-box { background: transparent; border: 0; }
body.skin-studio .p-cd-num { font-family: 'Sora', system-ui, sans-serif; font-weight: 800; }
body.skin-studio .p-body {
    font-size: 1.04rem;
    line-height: 1.75;
    color: var(--p-muted);
}
body.skin-studio .p-body p:first-of-type { color: var(--p-fg); font-size: 1.16rem; font-weight: 400; }

body.skin-studio .p-bonus-stack {
    border-radius: 16px;
    border: 1px solid var(--p-border);
    background: var(--p-card);
    color: var(--p-fg);
}
body.skin-studio .p-bonus-stack-title { font-family: 'Sora', system-ui, sans-serif; font-weight: 800; letter-spacing: -0.02em; }
body.skin-studio .p-bonus-card,
body.skin-studio .p-bonus-link {
    background: color-mix(in srgb, var(--p-fg) 4%, var(--p-card));
    border: 1px solid var(--p-border);
    border-radius: 12px;
    color: var(--p-fg);
}
body.skin-studio .p-bonus-title { color: var(--p-fg); }
body.skin-studio .p-bonus-desc { color: var(--p-muted); }
body.skin-studio .p-bonus-cover-wrap {
    background: linear-gradient(135deg, color-mix(in srgb, var(--p-fg) 12%, var(--p-card)), var(--p-card));
    border: 1px solid var(--p-border);
    border-radius: 8px;
    box-shadow: none;
}
body.skin-studio .p-foot { border-top: 1px solid var(--p-border); color: var(--p-muted); }

/* Headline links, Konsole rechts, Monitor darueber ueber beide Spalten */
@media (min-width: 1000px) {
    body.skin-studio .p-wrap {
        display: grid;
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        column-gap: 44px;
        align-items: start;
    }
    body.skin-studio .p-wrap > * { grid-column: 1 / -1; }
    body.skin-studio .p-wrap > .p-video,
    body.skin-studio .p-wrap > .p-audio { grid-row: 1; margin-left: calc(-1 * clamp(16px, 4vw, 44px)); margin-right: calc(-1 * clamp(16px, 4vw, 44px)); }
    body.skin-studio .p-wrap > .p-hero { grid-column: 1; grid-row: 2; margin: 0; }
    body.skin-studio .p-wrap > .p-cta-block { grid-column: 2; grid-row: 2; margin: 0; }
    body.skin-studio .p-wrap > .p-body { grid-row: 3; margin-top: 46px; }
    body.skin-studio .p-wrap > .p-lead { grid-row: 4; }
    body.skin-studio .p-wrap > .p-bonus-stack { grid-row: 5; }
    body.skin-studio .p-wrap > .p-redeem { grid-row: 6; }
    body.skin-studio .p-wrap > .p-foot { grid-row: 7; }
    body.skin-studio .p-cta-wrap { margin-top: 16px; }
    body.skin-studio .p-cta { width: 100%; justify-content: center; }
    /* In der schmalen Konsole muessen alle 4 Einheiten nebeneinander
       bleiben, sonst rutscht eine Box allein in die zweite Reihe. */
    body.skin-studio .p-countdown-box { min-width: 56px; max-width: 96px; }
    body.skin-studio .p-cd-num { font-size: clamp(1.5rem, 2.4vw, 2.2rem); }
}

/* Studio bei Tageslicht: derselbe Regieraum mit offenem Fenster.
   Der Monitor bleibt die dunkle Flaeche, alles andere wird zu Papier
   und hellem Metall. */
[data-mode="light"] body.skin-studio,
body.skin-studio[data-mode="light"] {
    --p-bg: #F1F3F7;
    --p-fg: #10131A;
    --p-muted: #545E70;
    --p-card: #FFFFFF;
    --p-border: #BAC3D2;
    --s-ledge: #E2E7EE;
    --s-bar: #FFFFFF;
}
[data-mode="light"] body.skin-studio .p-video-wrap,
body.skin-studio[data-mode="light"] .p-video-wrap {
    border-top-color: var(--p-border);
    border-bottom-color: var(--p-border);
    box-shadow: 0 22px 50px -30px rgba(16, 19, 26, 0.55);
}
[data-mode="light"] body.skin-studio .p-cta-block,
body.skin-studio[data-mode="light"] .p-cta-block {
    box-shadow: 0 18px 42px -28px rgba(16, 19, 26, 0.5);
}
[data-mode="light"] body.skin-studio .p-bonus-card,
[data-mode="light"] body.skin-studio .p-bonus-link,
body.skin-studio[data-mode="light"] .p-bonus-card,
body.skin-studio[data-mode="light"] .p-bonus-link {
    background: var(--p-card);
    box-shadow: 0 12px 28px -24px rgba(16, 19, 26, 0.5);
}
[data-mode="light"] body.skin-studio .p-bonus-stack,
body.skin-studio[data-mode="light"] .p-bonus-stack {
    background: color-mix(in srgb, var(--p-fg) 3%, var(--p-card));
}


/* ============================================================
   B) BOUTIQUE. Auslage: viel Luft, Cormorant-Garamond-Headline,
      Haarlinien statt Kaesten, Angebot als Zeile
   ============================================================ */
body.skin-boutique {
    --p-bg: #FBF7F3;
    --p-fg: #2E2724;
    --p-muted: #6B5F55;
    --p-card: #F3EBE3;
    --p-border: #CDB9A6;
    background: var(--p-bg);
    font-family: 'Jost', system-ui, sans-serif;
    font-weight: 400;
}

body.skin-boutique .p-wrap { --sk-spalte: 900px; max-width: var(--sk-spalte); padding-top: 48px; }
body.skin-boutique .p-empfehlung {
    justify-content: center;
    color: var(--p-muted);
    opacity: 1;
    font-weight: 300;
    margin-top: 26px;
}
body.skin-boutique .p-empfehlung-avatar {
    background: var(--p-card);
    color: var(--p-accent-ink);
    font-weight: 500;
}
body.skin-boutique .p-empfehlung-text b { color: var(--p-fg); font-weight: 400; }

body.skin-boutique .p-hero { text-align: center; }
body.skin-boutique .p-hero h1 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(2.3rem, 5.6vw, 3.9rem);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.01em;
    max-width: 800px;
    margin: 0 auto;
    text-wrap: balance;
}
/* Die Haarlinie zwischen Ueberschrift und Unterzeile */
body.skin-boutique .p-hero h1::after {
    content: "";
    display: block;
    width: 56px;
    height: 1px;
    margin: 26px auto 22px;
    background: color-mix(in srgb, var(--p-accent) 45%, var(--p-border));
}
body.skin-boutique .p-sub {
    font-family: 'Jost', system-ui, sans-serif;
    font-weight: 300;
    font-size: 1.02rem;
    line-height: 1.75;
    color: var(--p-muted);
    max-width: 520px;
    margin: 0 auto;
}

body.skin-boutique .p-video-wrap {
    border-radius: 2px;
    border: 0;
    box-shadow: 0 24px 60px -30px rgba(46, 39, 36, 0.45);
}
body.skin-boutique .p-video-wrap::after { box-shadow: none; border-radius: 2px; }

/* Angebot ohne Kasten: nur Luft, eine Zeile, ein ruhiger Button */
body.skin-boutique .p-cta-block {
    background: transparent;
    border: 0;
    padding: 0;
    margin-top: 46px;
    text-align: center;
}
body.skin-boutique .p-countdown {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}
body.skin-boutique .p-countdown-box { background: transparent; border: 0; }
body.skin-boutique .p-countdown-label { font-weight: 400; letter-spacing: 0.28em; font-size: clamp(0.72rem, 1.4vw, 0.82rem); }
body.skin-boutique .p-cd-num { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; }
body.skin-boutique .p-cta {
    background: var(--p-fg);
    color: var(--p-bg);
    font-family: 'Jost', system-ui, sans-serif;
    font-weight: 400;
    font-size: 0.98rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 0;
    padding: 18px 52px;
    box-shadow: none;
}
body.skin-boutique .p-cta:hover {
    background: color-mix(in srgb, var(--p-fg) 84%, var(--p-bg));
    box-shadow: none;
}

body.skin-boutique .p-body {
    max-width: 660px;
    font-size: 0.99rem;
    line-height: 1.9;
    font-weight: 300;
    color: var(--p-muted);
}
body.skin-boutique .p-body p:first-of-type {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.6rem;
    line-height: 1.45;
    font-weight: 400;
    color: var(--p-fg);
}

/* Boni als Inventarliste mit Haarlinien statt Karten */
body.skin-boutique .p-bonus-stack {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 40px 0 0;
    color: var(--p-fg);
}
body.skin-boutique .p-bonus-stack::before { display: none; }
body.skin-boutique .p-bonus-stack-eyebrow { letter-spacing: 0.28em; font-weight: 400; }
body.skin-boutique .p-bonus-stack-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 500;
    letter-spacing: 0;
}
body.skin-boutique .p-bonus-stack-list { grid-template-columns: 1fr; gap: 0; }
body.skin-boutique .p-bonus-card,
body.skin-boutique .p-bonus-link {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--p-border);
    border-radius: 0;
    box-shadow: none;
    color: var(--p-fg);
    padding: 18px 0;
    grid-template-columns: 72px 1fr;
}
body.skin-boutique .p-bonus-cover-wrap {
    width: 72px;
    height: 72px;
    border-radius: 0;
    border: 1px solid var(--p-border);
    background: var(--p-card);
    box-shadow: none;
}
body.skin-boutique .p-bonus-title { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 1.14rem; color: var(--p-fg); }
body.skin-boutique .p-bonus-desc { color: var(--p-muted); font-weight: 300; }
/* Der Wert steht als ruhige Zeile, nicht als Farbpille */
body.skin-boutique .p-bonus-value {
    background: none;
    box-shadow: none;
    padding: 0;
    color: var(--p-muted);
    font-weight: 400;
    letter-spacing: 0.06em;
}
body.skin-boutique .p-bonus-btn {
    background: none;
    box-shadow: none;
    border: 1px solid var(--p-border);
    border-radius: 0;
    color: var(--p-fg);
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.76rem;
}
body.skin-boutique .p-foot { border-top: 1px solid var(--p-border); font-weight: 300; color: var(--p-muted); }

/* Boutique bei Abendlicht: derselbe Laden nach Ladenschluss, warmes
   Dunkelbraun statt Leinen. Die Haarlinien bleiben die Bauweise. */
[data-mode="dark"] body.skin-boutique,
body.skin-boutique[data-mode="dark"] {
    --p-bg: #1F1A17;
    --p-fg: #F4EEE7;
    --p-muted: #B0A296;
    --p-card: #29221E;
    --p-border: #544940;
}
[data-mode="dark"] body.skin-boutique .p-video-wrap,
body.skin-boutique[data-mode="dark"] .p-video-wrap {
    box-shadow: 0 24px 60px -26px rgba(0, 0, 0, 0.8);
}
[data-mode="dark"] body.skin-boutique .p-cta,
body.skin-boutique[data-mode="dark"] .p-cta {
    background: var(--p-fg);
    color: var(--p-bg);
}
[data-mode="dark"] body.skin-boutique .p-cta:hover,
body.skin-boutique[data-mode="dark"] .p-cta:hover {
    background: color-mix(in srgb, var(--p-fg) 84%, var(--p-bg));
}
[data-mode="dark"] body.skin-boutique .p-body,
body.skin-boutique[data-mode="dark"] .p-body { color: var(--p-muted); }
[data-mode="dark"] body.skin-boutique .p-body p:first-of-type,
body.skin-boutique[data-mode="dark"] .p-body p:first-of-type { color: var(--p-fg); }
[data-mode="dark"] body.skin-boutique .p-bonus-cover-wrap,
body.skin-boutique[data-mode="dark"] .p-bonus-cover-wrap { background: var(--p-card); }
[data-mode="dark"] body.skin-boutique .p-bonus-title,
body.skin-boutique[data-mode="dark"] .p-bonus-title { color: var(--p-fg); }
[data-mode="dark"] body.skin-boutique .p-bonus-desc,
[data-mode="dark"] body.skin-boutique .p-bonus-value,
body.skin-boutique[data-mode="dark"] .p-bonus-desc,
body.skin-boutique[data-mode="dark"] .p-bonus-value { color: var(--p-muted); }
[data-mode="dark"] body.skin-boutique .p-bonus-btn,
body.skin-boutique[data-mode="dark"] .p-bonus-btn { color: var(--p-fg); border-color: var(--p-border); }


/* ============================================================
   C) WERKSTATT. Bauplan: Gitternetz, harte Kanten, Eckwinkel
      am Video, Angebot als Stueckliste
   ============================================================ */
body.skin-werkstatt {
    --p-bg: #0F1B2A;
    --p-fg: #DCE6F2;
    --p-muted: #9DB0C6;
    --p-card: #142434;
    --p-border: #3F5470;
    --w-grid: rgba(120, 170, 220, 0.07);
    background: var(--p-bg);
    background-image:
        linear-gradient(var(--w-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--w-grid) 1px, transparent 1px);
    background-size: 40px 40px;
    font-family: 'Roboto Condensed', system-ui, sans-serif;
}

body.skin-werkstatt .p-wrap { --sk-spalte: 1120px; max-width: var(--sk-spalte); padding-top: 34px; }
/* Kopfzeile wie ein Planstempel */
body.skin-werkstatt .p-empfehlung {
    max-width: none;
    padding: 16px clamp(16px, 3.5vw, 48px);
    padding-right: 78px;
    margin: 0;
    border-bottom: 1px solid var(--p-border);
    font-family: 'Roboto Mono', ui-monospace, monospace;
    font-size: 0.76rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--p-muted);
    opacity: 1;
}
body.skin-werkstatt .p-empfehlung-avatar,
body.skin-werkstatt .p-empfehlung-foto {
    border-radius: 0;
    background: transparent;
    border: 1px solid var(--p-border);
    color: var(--p-fg);
    font-weight: 500;
}
body.skin-werkstatt .p-empfehlung-text b { color: var(--p-fg); font-weight: 500; }
body.skin-werkstatt .p-empfehlung::after {
    content: "Maßstab 1:1";
    margin-left: auto;
    color: var(--p-muted);
    white-space: nowrap;
}
@media (max-width: 900px) { body.skin-werkstatt .p-empfehlung { margin-top: 56px; } }
@media (max-width: 640px) {
    body.skin-werkstatt .p-empfehlung { padding-right: 66px; }
    body.skin-werkstatt .p-empfehlung::after { display: none; }
}

body.skin-werkstatt .p-hero { text-align: left; }
body.skin-werkstatt .p-hero h1 {
    font-family: 'Roboto Condensed', system-ui, sans-serif;
    font-size: clamp(2.2rem, 6vw, 3.6rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.015em;
    text-transform: uppercase;
}
body.skin-werkstatt .p-sub {
    font-family: 'Roboto Mono', ui-monospace, monospace;
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--p-muted);
    margin-left: 0;
}
/* Der Akzent-Strich vor der Unterzeile */
body.skin-werkstatt .p-sub::before {
    content: "";
    display: inline-block;
    width: 64px;
    height: 2px;
    margin-right: 14px;
    vertical-align: middle;
    background: var(--p-accent);
}

body.skin-werkstatt .p-video-wrap {
    border: 2px solid var(--p-border);
    border-radius: 0;
    box-shadow: none;
    background: color-mix(in srgb, var(--p-bg) 70%, #000);
}
/* Die 4 Eckwinkel in Akzentfarbe. Ein Pseudo-Element, 8 Striche.
   Sitzt innen, weil der Rahmen seinen Inhalt beschneidet. */
body.skin-werkstatt .p-video-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
    border-radius: 0;
    box-shadow: none;
    background-repeat: no-repeat;
    background-image:
        linear-gradient(var(--p-accent), var(--p-accent)),
        linear-gradient(var(--p-accent), var(--p-accent)),
        linear-gradient(var(--p-accent), var(--p-accent)),
        linear-gradient(var(--p-accent), var(--p-accent)),
        linear-gradient(var(--p-accent), var(--p-accent)),
        linear-gradient(var(--p-accent), var(--p-accent)),
        linear-gradient(var(--p-accent), var(--p-accent)),
        linear-gradient(var(--p-accent), var(--p-accent));
    background-size: 18px 2px, 2px 18px, 18px 2px, 2px 18px, 18px 2px, 2px 18px, 18px 2px, 2px 18px;
    background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%;
}

/* Angebot als Stueckliste */
body.skin-werkstatt .p-cta-block {
    border: 2px solid var(--p-accent);
    border-radius: 0;
    background: color-mix(in srgb, var(--p-accent) 6%, transparent);
    padding: 24px;
    margin-top: 34px;
}
body.skin-werkstatt .p-countdown {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0 0 14px;
    margin-top: 0;
}
body.skin-werkstatt .p-countdown-box { background: transparent; border: 0; }
body.skin-werkstatt .p-countdown-label { font-family: 'Roboto Mono', ui-monospace, monospace; letter-spacing: 0.12em; font-size: clamp(0.78rem, 1.5vw, 0.92rem); }
body.skin-werkstatt .p-cd-num { font-family: 'Roboto Mono', ui-monospace, monospace; font-weight: 500; }
body.skin-werkstatt .p-cd-unit { font-family: 'Roboto Mono', ui-monospace, monospace; }
body.skin-werkstatt .p-cta {
    font-family: 'Roboto Condensed', system-ui, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    justify-content: center;
}
body.skin-werkstatt .p-body { font-size: 1rem; line-height: 1.8; color: var(--p-muted); }
body.skin-werkstatt .p-body p:first-of-type { font-size: 1.22rem; line-height: 1.6; font-weight: 700; color: var(--p-fg); }

body.skin-werkstatt .p-bonus-stack {
    background: color-mix(in srgb, var(--p-accent) 5%, var(--p-card));
    border: 1px solid var(--p-border);
    border-radius: 0;
    color: var(--p-fg);
}
body.skin-werkstatt .p-bonus-stack::before { display: none; }
body.skin-werkstatt .p-bonus-stack-eyebrow { font-family: 'Roboto Mono', ui-monospace, monospace; letter-spacing: 0.12em; }
body.skin-werkstatt .p-bonus-stack-title {
    font-family: 'Roboto Condensed', system-ui, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
}
body.skin-werkstatt .p-bonus-card,
body.skin-werkstatt .p-bonus-link {
    background: var(--p-card);
    border: 1px solid var(--p-border);
    border-radius: 0;
    box-shadow: none;
    color: var(--p-fg);
}
body.skin-werkstatt .p-bonus-cover-wrap {
    border-radius: 0;
    border: 1px solid var(--p-border);
    background: color-mix(in srgb, var(--p-fg) 8%, var(--p-card));
    box-shadow: none;
}
body.skin-werkstatt .p-bonus-title { color: var(--p-fg); }
body.skin-werkstatt .p-bonus-desc { color: var(--p-muted); }
body.skin-werkstatt .p-bonus-value { border-radius: 0; }
body.skin-werkstatt .p-bonus-btn { border-radius: 0; text-transform: uppercase; letter-spacing: 0.04em; }
body.skin-werkstatt .p-foot {
    font-family: 'Roboto Mono', ui-monospace, monospace;
    text-transform: uppercase;
    font-size: 0.78rem;
    border-top: 1px solid var(--p-border);
    color: var(--p-muted);
}
body.skin-werkstatt .p-foot-links { font-family: 'Roboto Mono', ui-monospace, monospace; font-size: 0.78rem; text-transform: uppercase; }
body.skin-werkstatt .p-foot-meta { font-family: 'Roboto Mono', ui-monospace, monospace; font-size: 0.72rem; text-transform: none; }

/* Werkstatt am Tag: derselbe Plan, aber auf Papier gedruckt.
   Das Gitternetz kippt von Lichtlinien auf Bleistiftlinien. */
[data-mode="light"] body.skin-werkstatt,
body.skin-werkstatt[data-mode="light"] {
    --p-bg: #EDF1F6;
    --p-fg: #10202F;
    --p-muted: #4E6076;
    --p-card: #FFFFFF;
    --p-border: #9FB2C8;
    --w-grid: rgba(40, 80, 125, 0.10);
}
[data-mode="light"] body.skin-werkstatt .p-video-wrap,
body.skin-werkstatt[data-mode="light"] .p-video-wrap {
    background: #0A1420;
    box-shadow: 0 20px 46px -30px rgba(16, 32, 47, 0.6);
}
[data-mode="light"] body.skin-werkstatt .p-bonus-stack,
body.skin-werkstatt[data-mode="light"] .p-bonus-stack {
    background: color-mix(in srgb, var(--p-accent) 5%, var(--p-card));
}
[data-mode="light"] body.skin-werkstatt .p-body,
body.skin-werkstatt[data-mode="light"] .p-body { color: var(--p-muted); }
[data-mode="light"] body.skin-werkstatt .p-body p:first-of-type,
body.skin-werkstatt[data-mode="light"] .p-body p:first-of-type { color: var(--p-fg); }
[data-mode="light"] body.skin-werkstatt .p-bonus-title,
body.skin-werkstatt[data-mode="light"] .p-bonus-title { color: var(--p-fg); }
[data-mode="light"] body.skin-werkstatt .p-bonus-desc,
body.skin-werkstatt[data-mode="light"] .p-bonus-desc { color: var(--p-muted); }
[data-mode="light"] body.skin-werkstatt .p-bonus-cover-wrap,
body.skin-werkstatt[data-mode="light"] .p-bonus-cover-wrap {
    background: color-mix(in srgb, var(--p-fg) 6%, var(--p-card));
}


/* Kopf des Gespraechs */
/* Der Empfehlungssatz ist hier Teil des Gespraechs und bleibt sichtbar */

/* Headline als erste Sprechblase */

/* Video als geteiltes Medium */

/* Fliesstext als Blase */

/* Antwort-Leiste: Frist links, Button rechts, alles in einer Pille */
/* In der Antwort-Leiste steht die Frist als Zeile, nicht als Klapp-Uhr:
   die Kaesten der Seite werden hier flachgelegt. */
@media (max-width: 700px) {
    /* Auf dem Handy wird aus der Pille eine Karte, sonst steht der Button
       neben einer Frist, die keinen Platz mehr hat */
}


/* ============================================================
   E) RETRO. Siebziger-Plakat: Sonne hinter der Headline,
      Alfa-Slab-Schrift mit Schlagschatten, dicke Tuschekanten,
      Angebot als Banderole
   ============================================================ */
body.skin-retro {
    --p-bg: #FFF3E0;
    --p-fg: #2A1B12;
    --p-muted: #75583F;
    --p-card: #FFE8C4;
    /* Die Kante IST hier die Tusche, deshalb so dunkel wie die Schrift */
    --p-border: #2A1B12;
    /* Die Banderole hat eine eigene Flaeche und eigene Schriftfarben */
    --r-band: #2A1B12;
    --r-band-fg: #FFF3E0;
    --r-band-muted: #C9AE99;
    --r-sonne: color-mix(in srgb, var(--p-accent) 40%, #FFD98A);
    background: var(--p-bg);
    font-family: 'Karla', system-ui, sans-serif;
    position: relative;
}
/* Die Sonne hinter dem Aufmacher. Reines CSS, kein Bild. */
body.skin-retro::before {
    content: "";
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    /* Die Sonne bleibt bewusst schmaler als das Fenster, sonst schiebt sie
       die Seite auf dem Handy waagerecht auf. */
    width: min(620px, 92vw);
    height: min(620px, 92vw);
    border-radius: 50%;
    background: radial-gradient(circle at center,
        color-mix(in srgb, var(--r-sonne) 55%, #FFFFFF) 0%,
        var(--r-sonne) 42%,
        var(--p-accent) 74%,
        transparent 76%);
    opacity: 0.28;
    pointer-events: none;
    z-index: 0;
}
body.skin-retro .p-empfehlung,
body.skin-retro .p-wrap { position: relative; z-index: 1; }

body.skin-retro .p-wrap { --sk-spalte: 1080px; max-width: var(--sk-spalte); }
body.skin-retro .p-empfehlung { justify-content: center; color: var(--p-muted); opacity: 1; }
body.skin-retro .p-empfehlung-avatar {
    background: var(--p-accent);
    color: var(--p-accent-fg);
    font-weight: 700;
}
body.skin-retro .p-empfehlung-text b { color: var(--p-fg); font-weight: 700; }

body.skin-retro .p-hero { text-align: center; }
body.skin-retro .p-hero h1 {
    font-family: 'Alfa Slab One', Georgia, serif;
    font-weight: 400;
    font-size: clamp(2.1rem, 6.4vw, 4.1rem);
    line-height: 1;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--p-fg);
    text-shadow: 4px 4px 0 color-mix(in srgb, var(--p-accent) 55%, #FFD25E);
}
body.skin-retro .p-sub {
    font-family: 'Karla', system-ui, sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--p-muted);
    max-width: 540px;
    margin: 22px auto 0;
}
@media (max-width: 640px) {
    body.skin-retro .p-hero h1 { text-shadow: 3px 3px 0 color-mix(in srgb, var(--p-accent) 55%, #FFD25E); }
}

body.skin-retro .p-video-wrap {
    border: 6px solid var(--p-border);
    border-radius: 22px;
    box-shadow: 0 18px 0 -6px var(--p-accent);
}
body.skin-retro .p-video-wrap::after { box-shadow: none; border-radius: 16px; }

/* Angebot als Banderole. Sie bringt eine eigene Flaeche mit, deshalb
   werden Textfarbe und Akzent-Schrift hier neu gesetzt: sonst rechnet
   die Akzent-Schrift mit der Seitenfarbe und verschwindet auf dem
   dunklen Band. */
body.skin-retro .p-cta-block {
    background: var(--r-band);
    color: var(--r-band-fg);
    --p-fg: #FFF3E0;
    --p-muted: var(--r-band-muted);
    --p-accent-ink: color-mix(in srgb, var(--p-accent) 58%, #FFF3E0);
    border-radius: 18px;
    padding: 30px 36px;
    margin-top: 44px;
}
body.skin-retro .p-countdown {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0 0 12px;
    margin-top: 0;
}
body.skin-retro .p-countdown-box { background: transparent; border: 0; }
body.skin-retro .p-cd-flip .p-cd-num,
body.skin-retro .p-cta-block .p-cd-flip .p-cd-num {
    font-family: 'Alfa Slab One', Georgia, serif;
    font-weight: 400;
}
body.skin-retro .p-cta {
    font-family: 'Alfa Slab One', Georgia, serif;
    font-weight: 400;
    font-size: 1.24rem;
    text-transform: uppercase;
    border-radius: 14px;
    padding: 18px 44px;
    box-shadow: none;
}
body.skin-retro .p-body { font-size: 1.02rem; line-height: 1.8; color: var(--p-muted); }
body.skin-retro .p-body p:first-of-type { font-size: 1.26rem; line-height: 1.55; font-weight: 700; color: var(--p-fg); }

body.skin-retro .p-bonus-stack {
    background: var(--p-bg);
    border: 3px solid var(--p-border);
    border-radius: 20px;
    box-shadow: none;
    color: var(--p-fg);
}
body.skin-retro .p-bonus-stack::before { display: none; }
body.skin-retro .p-bonus-stack-title { font-family: 'Alfa Slab One', Georgia, serif; font-weight: 400; text-transform: uppercase; letter-spacing: 0; }
body.skin-retro .p-bonus-stack-eyebrow { font-weight: 700; letter-spacing: 0.2em; }
body.skin-retro .p-bonus-card,
body.skin-retro .p-bonus-link {
    background: var(--p-card);
    border: 3px solid var(--p-border);
    border-radius: 16px;
    box-shadow: none;
    color: var(--p-fg);
}
body.skin-retro .p-bonus-cover-wrap {
    background: color-mix(in srgb, var(--p-accent) 30%, var(--p-card));
    border: 2px solid var(--p-border);
    border-radius: 10px;
    box-shadow: none;
}
body.skin-retro .p-bonus-title { color: var(--p-fg); font-weight: 700; }
body.skin-retro .p-bonus-desc { color: var(--p-muted); }
body.skin-retro .p-bonus-btn { border-radius: 999px; font-weight: 700; }
body.skin-retro .p-foot { border-top: 3px solid var(--p-border); color: var(--p-muted); font-weight: 600; }

/* Retro bei Nacht: das Plakat haengt im Schaufenster nach Feierabend.
   Der Tuschekasten kippt von dunkler Kante auf helle Kante, damit die
   dicken Konturen weiter die Bauweise tragen. Die Banderole wird eine
   Spur heller als der Grund, sonst verschwindet sie darin. */
[data-mode="dark"] body.skin-retro,
body.skin-retro[data-mode="dark"] {
    --p-bg: #1E1409;
    --p-fg: #FFEFD6;
    --p-muted: #BFA184;
    --p-card: #2C1E11;
    --p-border: #FFE0A8;
    --r-band: #3B2812;
    --r-band-fg: #FFEFD6;
    --r-band-muted: #C9AE99;
    --r-sonne: color-mix(in srgb, var(--p-accent) 55%, #A8631E);
}
[data-mode="dark"] body.skin-retro::before,
body.skin-retro[data-mode="dark"]::before { opacity: 0.32; }
[data-mode="dark"] body.skin-retro .p-cta-block,
body.skin-retro[data-mode="dark"] .p-cta-block {
    --p-fg: #FFEFD6;
    --p-muted: var(--r-band-muted);
    --p-accent-ink: color-mix(in srgb, var(--p-accent) 58%, #FFEFD6);
    border: 3px solid var(--p-border);
    color: var(--r-band-fg);
}
[data-mode="dark"] body.skin-retro .p-body,
body.skin-retro[data-mode="dark"] .p-body { color: var(--p-muted); }
[data-mode="dark"] body.skin-retro .p-body p:first-of-type,
body.skin-retro[data-mode="dark"] .p-body p:first-of-type { color: var(--p-fg); }
[data-mode="dark"] body.skin-retro .p-bonus-stack,
body.skin-retro[data-mode="dark"] .p-bonus-stack { background: var(--p-card); }
[data-mode="dark"] body.skin-retro .p-bonus-card,
[data-mode="dark"] body.skin-retro .p-bonus-link,
body.skin-retro[data-mode="dark"] .p-bonus-card,
body.skin-retro[data-mode="dark"] .p-bonus-link { background: color-mix(in srgb, var(--p-fg) 7%, var(--p-card)); }
[data-mode="dark"] body.skin-retro .p-bonus-title,
body.skin-retro[data-mode="dark"] .p-bonus-title { color: var(--p-fg); }
[data-mode="dark"] body.skin-retro .p-bonus-desc,
body.skin-retro[data-mode="dark"] .p-bonus-desc { color: var(--p-muted); }
[data-mode="dark"] body.skin-retro .p-bonus-cover-wrap,
body.skin-retro[data-mode="dark"] .p-bonus-cover-wrap {
    background: color-mix(in srgb, var(--p-accent) 26%, var(--p-card));
}


/* ============================================================
   F) Gemeinsame Pflichten aller 5 Vorlagen
   ============================================================ */

/* Ueberschriften und Bonus-Titel tragen immer die Textfarbe. Der
   Verlaufs-Text der Seite wuerde auf eigenen Flaechen verschwinden. */
body.skin-studio .p-bonus-stack-title,
body.skin-boutique .p-bonus-stack-title,
body.skin-werkstatt .p-bonus-stack-title,
body.skin-retro .p-bonus-stack-title,
body.skin-studio .p-redeem-title,
body.skin-boutique .p-redeem-title,
body.skin-werkstatt .p-redeem-title,
body.skin-retro .p-redeem-title {
    background: none;
    background-image: none;
    -webkit-text-fill-color: var(--p-fg);
    color: var(--p-fg);
}
body.skin-studio .p-bonus-stack-divider,
body.skin-boutique .p-bonus-stack-divider,
body.skin-werkstatt .p-bonus-stack-divider,
body.skin-retro .p-bonus-stack-divider {
    background: linear-gradient(90deg, var(--p-accent-ink), transparent);
}

/* Auf dem Handy darf nichts seitlich ueberstehen und keine Bedienflaeche
   kleiner als 44px werden. */
@media (max-width: 640px) {
    body.skin-studio .p-wrap,
    body.skin-boutique .p-wrap,
    body.skin-werkstatt .p-wrap,
    body.skin-retro .p-wrap { padding-left: 16px; padding-right: 16px; }

    body.skin-studio .p-video { margin-left: -16px; margin-right: -16px; }
    body.skin-boutique .p-hero h1::after { margin: 20px auto 18px; }
    body.skin-retro .p-cta-block { padding: 22px 18px; }
    body.skin-retro .p-video-wrap { border-width: 4px; border-radius: 16px; }

    body.skin-studio .p-cta,
    body.skin-boutique .p-cta,
    body.skin-werkstatt .p-cta,
    body.skin-retro .p-cta { min-height: 52px; padding-left: 26px; padding-right: 26px; }

    body.skin-studio .p-bonus-btn,
    body.skin-boutique .p-bonus-btn,
    body.skin-werkstatt .p-bonus-btn,
    body.skin-retro .p-bonus-btn {
        /* flex-shrink: 0, sonst drueckt die Karte den Button unter die
           44px zusammen und er ist mit dem Finger schwer zu treffen. */
        min-height: 44px;
        flex-shrink: 0;
        padding-top: 11px;
        padding-bottom: 11px;
    }

    body.skin-studio .p-foot-links a,
    body.skin-studio .p-foot-links button,
    body.skin-boutique .p-foot-links a,
    body.skin-boutique .p-foot-links button,
    body.skin-werkstatt .p-foot-links a,
    body.skin-werkstatt .p-foot-links button,
    body.skin-retro .p-foot-links a,
    body.skin-retro .p-foot-links button { min-height: 44px; display: inline-flex; align-items: center; }
}

/* Wer weniger Bewegung eingestellt hat, bekommt keine. Diese Vorlagen
   bringen selbst keine Animation mit, nur weiche Farb- und Schatten-
   Uebergaenge an den Flaechen, die hier stillgelegt werden. */
@media (prefers-reduced-motion: reduce) {
    body.skin-studio .p-video-wrap,
    body.skin-boutique .p-video-wrap,
    body.skin-werkstatt .p-video-wrap,
    body.skin-retro .p-video-wrap,
    body.skin-studio .p-bonus-link,
    body.skin-boutique .p-bonus-link,
    body.skin-werkstatt .p-bonus-link,
    body.skin-retro .p-bonus-link,
    body.skin-studio .p-cta,
    body.skin-boutique .p-cta,
    body.skin-werkstatt .p-cta,
    body.skin-retro .p-cta { transition: none; }
}