/* ============================================================ Kampagnen-Skins, Teil 8: Horror, Noir, Okkult. Drei Vorlagen aus derselben Ecke, jede in zwei vollwertigen Fassungen. Der Modus steht als data-mode an UND an , deshalb ist jede modusabhaengige Regel doppelt geschrieben. Der Modus setzt ausschliesslich Farb-Variablen (--p-* und die skin-eigenen --sk-*), die Bausteine darunter arbeiten nur noch mit diesen Variablen. Die dunkle Fassung folgt dem Entwurf. Die helle ist kein Umkehr-Bild, sondern eine eigene Lesart: Horror wird zum Filmplakat auf hellem Papier mit tiefen Grautoenen, Noir zum Zeitungsdruck bei Tageslicht, Okkult zum gealterten Pergament. --p-accent ist die Farbwahl des Kunden und bleibt stehen. Zwei Ausnahmen, jeweils an Ort und Stelle begruendet: Horror (Blutrot) und Okkult (Gold). Noir arbeitet dagegen durchgehend mit dem Kundenton und hebt bzw. senkt ihn per color-mix, damit er auf beiden Gruenden lesbar bleibt. ------------------------------------------------------------ DER NEBEL ------------------------------------------------------------ body::before und body::after liegen als zwei feste, gegen- laeufig treibende Schleier ueber der Flaeche. Beide haengen auf z-index -1 und pointer-events: none, liegen also HINTER dem gesamten Inhalt und ueber nichts als dem Seitengrund. Sie bestehen nur aus weichen radialen Verlaeufen in unterschiedlichen Groessen, ohne Bilddatei. Sobald das Video laeuft, ziehen sie in 900 ms ab. Das Markup liefert dafuer .p-video-wrap.is-playing (bzw. .p-audio-wrap.is-playing) tief im Aufbau, der Schleier haengt am Seitenkoerper, deshalb :has(). Browser ohne :has() lassen den Schleier stehen. Das ist hinnehmbar, weil die Deckkraft von vornherein so niedrig ist, dass er auch dauerhaft nicht stoert: die staerkste Stelle liegt bei 6 Prozent Alpha, und er liegt ohnehin hinter der Schrift. Verteilung: Horror bekommt Nebel (Pflicht), Noir bekommt Rauch statt Nebel, Okkult bekommt Kerzendunst. ============================================================ */ /* ------------------------------------------------------------ Gemeinsamer Ausgangspunkt fuer den Bonus-Block. Die Grundfassung bringt Leuchtrand, Radius, Schlagschatten und einen Verlaufs-Rahmen als ::before mit. Alle drei Vorlagen bauen den Block selbst, deshalb wird er hier einmal zurueckgesetzt. Flaeche, Rahmen und Schriftfarben setzt danach jede Vorlage in BEIDEN Fassungen ausdruecklich. ------------------------------------------------------------ */ body.skin-horror .p-bonus-stack, body.skin-noir .p-bonus-stack, body.skin-okkult .p-bonus-stack { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; overflow: visible; } body.skin-horror .p-bonus-stack::before, body.skin-noir .p-bonus-stack::before, body.skin-okkult .p-bonus-stack::before { display: none; } /* Lesbarer Kundenton im Bonus-Block der Akte. Der Ton der Vorlage ist gegen den Saal gerechnet. Im Bonus-Block steht er auf dem hellen Aktenblatt, dort kippen helle Kundenfarben (Gruen, Gelb, Tuerkis) unter 3:1. Ein gutes Drittel Kundenton, der Rest Schriftfarbe, haelt ueber alle 19 Paletten und beide Fassungen mindestens 4.7:1. */ body.skin-noir { --sk-bonus-ton: color-mix(in srgb, var(--p-accent) 36%, var(--p-fg)); } /* Das Rot der Fundstuecke steht im Nachtdruck auf dem Bodenschein der Seite, nicht auf reinem Schwarz. Dort bleiben von #D9524A nur 3.91:1, deshalb ist es fuer den Bonus-Block aufgehellt. Am Tag traegt das Blutrot auf Papier mit 5.98:1 und bleibt wie es ist. */ body.skin-horror, [data-mode="dark"] body.skin-horror, body.skin-horror[data-mode="dark"] { --sk-rot-bonus: #EC7C74; } [data-mode="light"] body.skin-horror, body.skin-horror[data-mode="light"] { --sk-rot-bonus: #8E211C; } /* ------------------------------------------------------------ Die Schleier-Mechanik, einmal fuer alle drei. Die Flaeche ist absichtlich groesser als das Fenster (inset: -22%), damit die Drift keine Kante hereinschiebt. ------------------------------------------------------------ */ body.skin-horror::before, body.skin-horror::after, body.skin-noir::before, body.skin-okkult::before { content: ""; position: fixed; inset: -22%; z-index: -1; pointer-events: none; background-repeat: no-repeat; opacity: 1; transition: opacity 900ms ease; will-change: transform; } /* Zwei Bewegungen, gegenlaeufig und sehr langsam. */ @keyframes skDunstRechts { from { transform: translate3d(-2.5%, 0.6%, 0) scale(1.02); } to { transform: translate3d(3.5%, -1.4%, 0) scale(1.09); } } @keyframes skDunstLinks { from { transform: translate3d(3%, -1%, 0) scale(1.08); } to { transform: translate3d(-3%, 1.2%, 0) scale(1.01); } } /* Abziehen, sobald das Medium laeuft: der Blick gehoert dem Video. */ body.skin-horror:has(.p-video-wrap.is-playing)::before, body.skin-horror:has(.p-video-wrap.is-playing)::after, body.skin-horror:has(.p-audio-wrap.is-playing)::before, body.skin-horror:has(.p-audio-wrap.is-playing)::after, body.skin-noir:has(.p-video-wrap.is-playing)::before, body.skin-noir:has(.p-audio-wrap.is-playing)::before, body.skin-okkult:has(.p-video-wrap.is-playing)::before, body.skin-okkult:has(.p-audio-wrap.is-playing)::before { opacity: 0; } @media (prefers-reduced-motion: reduce) { body.skin-horror::before, body.skin-horror::after, body.skin-noir::before, body.skin-okkult::before { animation: none; transform: none; transition: none; } } /* ============================================================ 1) HORROR Ein Filmplakat im kalten Gegenlicht. Das Video sitzt hinter einer angelaufenen Scheibe mit Kratzern, die Boni sind Fundstuecke. IM Fell English SC nur fuer Titel und kurze Versal-Marken, Barlow fuer alles, was gelesen werden muss. Hier wird --p-accent gesetzt: das Blutrot traegt den Titel- strich, die Kante der Fundstuecke, die letzte Countdown-Zahl und den Button. Ein beliebiger Kundenton (Tuerkis, Violett) nimmt der Vorlage genau das, was sie ausmacht. ============================================================ */ body.skin-horror, [data-mode="dark"] body.skin-horror, body.skin-horror[data-mode="dark"] { --p-bg: #07080A; --p-fg: #D9DCE0; --p-muted: #98A3AD; --p-card: #0D1014; --p-border: #262C33; --p-accent: #8E211C; --p-accent-fg: #F7F1EF; /* Rot als Schriftfarbe: #C4413A aus dem Entwurf kommt auf dem Schwarz nur auf 3.96:1. Fuer die kleinen Versal-Marken zu wenig, deshalb aufgehellt auf 5.0:1. */ --sk-rot-text: #D9524A; --sk-rot-linie: #8E211C; --sk-kalt: #A3C4D6; --sk-marke: #7B8590; --sk-schirm: radial-gradient(ellipse 72% 84% at 50% 70%, #141C22 0%, #06080B 76%); --sk-scheibe-1: rgba(198,214,224,0.16); --sk-scheibe-2: rgba(160,182,196,0.07); --sk-scheibe-3: rgba(220,232,240,0.13); --sk-kratzer: rgba(230,240,246,0.34); --sk-rahmen: #262C33; --sk-schatten: 0 40px 96px -44px rgba(0,0,0,0.95); --sk-grund: radial-gradient(ellipse 46% 46% at 50% 104%, rgba(150,186,206,0.16) 0%, rgba(120,158,180,0.07) 34%, rgba(7,8,10,0) 72%); --sk-nebel-a: rgba(176,201,216,0.065); --sk-nebel-b: rgba(146,174,192,0.048); } /* Tagfassung: dasselbe Plakat, aber gedruckt. Kaltes Papiergrau, tiefe Graustufen, das Blutrot bleibt die einzige Farbe. */ [data-mode="light"] body.skin-horror, body.skin-horror[data-mode="light"] { --p-bg: #E8E6E1; --p-fg: #14161A; --p-muted: #545C64; --p-card: #F4F2EE; --p-border: #C6C3BC; --p-accent: #8E211C; --p-accent-fg: #FBF4F2; --sk-rot-text: #8E211C; --sk-rot-linie: #8E211C; --sk-kalt: #3F5261; --sk-marke: #545C64; /* Der Bildschirm bleibt dunkel, auch auf hellem Papier. */ --sk-schirm: radial-gradient(ellipse 72% 84% at 50% 70%, #1E2830 0%, #0A0D11 78%); --sk-scheibe-1: rgba(214,226,234,0.20); --sk-scheibe-2: rgba(176,196,210,0.09); --sk-scheibe-3: rgba(232,242,248,0.16); --sk-kratzer: rgba(236,244,250,0.38); --sk-rahmen: #B7B3AB; --sk-schatten: 0 30px 66px -40px rgba(20,22,26,0.55); --sk-grund: radial-gradient(ellipse 46% 46% at 50% 104%, rgba(86,110,128,0.14) 0%, rgba(86,110,128,0.06) 36%, rgba(232,230,225,0) 72%); --sk-nebel-a: rgba(96,116,134,0.055); --sk-nebel-b: rgba(78,98,116,0.045); } body.skin-horror { background-color: var(--p-bg); background-image: var(--sk-grund); background-attachment: fixed; background-repeat: no-repeat; color: var(--p-fg); font-family: Barlow, system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 400; } body.skin-horror .p-wrap { --sk-spalte: 1120px; max-width: var(--sk-spalte); padding: 30px 40px 60px; } /* Der Nebel: drei weiche Ballen je Schicht, unterschiedlich gross, die beiden Schichten treiben gegeneinander. */ body.skin-horror::before { background-image: radial-gradient(closest-side circle, var(--sk-nebel-a) 0%, transparent 100%), radial-gradient(closest-side circle, var(--sk-nebel-b) 0%, transparent 100%), radial-gradient(closest-side circle, var(--sk-nebel-a) 0%, transparent 100%); background-size: 84vmax 84vmax, 54vmax 54vmax, 104vmax 104vmax; background-position: 6% 22%, 74% 6%, 38% 88%; animation: skDunstRechts 96s ease-in-out infinite alternate; } body.skin-horror::after { background-image: radial-gradient(closest-side circle, var(--sk-nebel-b) 0%, transparent 100%), radial-gradient(closest-side circle, var(--sk-nebel-a) 0%, transparent 100%); background-size: 96vmax 96vmax, 66vmax 66vmax; background-position: 88% 62%, 18% 54%; animation: skDunstLinks 124s ease-in-out infinite alternate; } /* Empfehlungs-Zeile: mittig, mit rot gerandetem Initial */ body.skin-horror .p-empfehlung { justify-content: center; gap: 11px; padding-top: 14px; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sk-marke); opacity: 1; } body.skin-horror .p-empfehlung .p-empfehlung-avatar, body.skin-horror .p-empfehlung .p-empfehlung-foto { width: 36px; height: 36px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--sk-rot-linie) 70%, transparent); background: var(--p-card); color: var(--sk-rot-text); font-family: 'IM Fell English SC', Georgia, serif; font-weight: 400; } body.skin-horror .p-empfehlung .p-empfehlung-text b { color: var(--p-fg); font-weight: 400; } body.skin-horror .p-empfehlung .p-empfehlung-satz { text-transform: none; letter-spacing: 0.02em; } /* Plakat-Kopf */ body.skin-horror .p-wrap > .p-hero { position: relative; text-align: center; background: transparent; border: 0; border-radius: 0; padding: 44px 0 0; margin: 0 auto 8px; max-width: 920px; } body.skin-horror .p-hero::before { content: "Heute im Programm"; display: block; font-family: 'IM Fell English SC', Georgia, serif; font-size: 0.9rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--sk-marke); margin-bottom: 22px; } body.skin-horror .p-hero h1 { font-family: 'IM Fell English SC', Georgia, serif; font-weight: 400; font-size: clamp(2.5rem, 6.6vw, 5rem); line-height: 1.04; letter-spacing: 0.004em; color: var(--p-fg); margin: 0; text-shadow: 0 0 34px color-mix(in srgb, var(--sk-kalt) 18%, transparent); } /* Schmaler roter Strich als Titel-Abschluss. Klar begrenzt unter der Zeile, damit er nie wie eine durchlaufende Linie wirkt. */ body.skin-horror .p-hero::after { content: ""; display: block; width: 108px; height: 3px; margin: 30px auto 0; background: var(--sk-rot-linie); } body.skin-horror .p-sub { max-width: 60ch; margin: 26px auto 0; font-size: 1.06rem; font-weight: 300; line-height: 1.82; color: var(--p-muted); } /* Video hinter angelaufener Scheibe. Die Neigung gilt nur im Ruhezustand, aufgerichtet wird zentral in kampagnen-skins.css (Abschnitt N). */ body.skin-horror .p-video, body.skin-horror .p-audio { position: relative; max-width: 940px; margin: 50px auto 0; background: transparent; border: 0; border-radius: 0; padding: 0; transform: rotate(-0.8deg); } body.skin-horror .p-audio-label { justify-content: center; font-family: 'IM Fell English SC', Georgia, serif; font-size: 0.84rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--sk-marke); margin-bottom: 14px; } /* Bildunterschrift unter dem Rahmen */ body.skin-horror .p-video::after { content: "Hauptfilm"; display: block; padding-top: 14px; font-family: 'IM Fell English SC', Georgia, serif; font-size: 0.8rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sk-marke); } body.skin-horror .p-video-wrap, body.skin-horror .p-audio-wrap { position: relative; border: 1px solid var(--sk-rahmen); border-radius: 0; background: var(--sk-schirm); box-shadow: var(--sk-schatten), 0 0 0 8px color-mix(in srgb, var(--p-fg) 3%, transparent); overflow: hidden; } /* Die angelaufene Scheibe: milchiger Schleier, oben dichter, dazu fuenf feine Kratzer als Inline-SVG. Liegt ueber dem Standbild und unter dem Play-Button, verschwindet mit dem ersten Bild. */ body.skin-horror .p-video-wrap::before, body.skin-horror .p-audio-wrap::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 860 484' preserveAspectRatio='none'%3E%3Cg stroke='%23EAF2F8' fill='none' stroke-width='1'%3E%3Cpath d='M84 120 L276 34' stroke-opacity='0.30'/%3E%3Cpath d='M112 158 L238 108' stroke-opacity='0.18'/%3E%3Cpath d='M588 408 L762 320' stroke-opacity='0.24'/%3E%3Cpath d='M618 372 L710 342' stroke-opacity='0.14'/%3E%3Cpath d='M40 232 L114 220' stroke-opacity='0.13'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(ellipse 60% 55% at 28% 24%, var(--sk-scheibe-3) 0%, transparent 70%), linear-gradient(168deg, var(--sk-scheibe-1) 0%, var(--sk-scheibe-2) 38%, transparent 72%); background-size: 100% 100%, 100% 100%, 100% 100%; background-repeat: no-repeat; opacity: 1; transition: opacity 520ms ease; } body.skin-horror .p-video-wrap.is-playing::before, body.skin-horror .p-audio-wrap.is-playing::before { opacity: 0; } body.skin-horror .p-video-wrap::after, body.skin-horror .p-audio-wrap::after { border-radius: 0; box-shadow: 0 0 0 1px color-mix(in srgb, var(--sk-kalt) 16%, transparent) inset; } body.skin-horror .p-video-play .p-video-play-core, body.skin-horror .p-audio-play .p-audio-play-core { width: 88px; height: 88px; border-radius: 50%; background: rgba(10,14,18,0.55); border: 1px solid color-mix(in srgb, var(--sk-kalt) 60%, transparent); color: #E6EAEE; box-shadow: 0 0 46px color-mix(in srgb, var(--sk-kalt) 22%, transparent); } body.skin-horror .p-video-play .p-video-play-hint { font-family: 'IM Fell English SC', Georgia, serif; font-size: 0.82rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 400; color: #ECEEF0; } /* Fliesstext: ruhige Leseschrift, nichts Verspieltes */ body.skin-horror .p-body { max-width: 66ch; margin: 58px auto 0; font-size: 1.06rem; font-weight: 400; line-height: 1.86; color: var(--p-fg); } body.skin-horror .p-body p + p { font-weight: 300; color: var(--p-muted); line-height: 1.9; } /* Boni als Fundstuecke: Liste mit roter Kante und Nummer */ body.skin-horror .p-bonus-stack { max-width: 860px; margin: 56px auto 0; } body.skin-horror .p-bonus-stack-head { display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 20px; padding-bottom: 18px; text-align: left; } body.skin-horror .p-bonus-stack-eyebrow { font-family: 'IM Fell English SC', Georgia, serif; font-size: 0.88rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--sk-rot-bonus); -webkit-text-fill-color: var(--sk-rot-bonus); opacity: 1; } body.skin-horror .p-bonus-stack-eyebrow::after { content: " · Fundstücke"; } body.skin-horror .p-bonus-stack-title { font-family: 'IM Fell English SC', Georgia, serif; font-weight: 400; font-size: clamp(1.5rem, 3vw, 2rem); color: var(--p-fg); } /* -webkit-text-fill-color muss mit gesetzt werden: die Grundfassung faerbt das hervorgehobene Wort ueber diese Eigenschaft, und sie schlaegt color. Ohne sie steht hier eine fremde Farbe. */ body.skin-horror .p-bonus-stack-title em, body.skin-horror .p-redeem-title em { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--sk-rot-bonus); -webkit-text-fill-color: var(--sk-rot-bonus); } body.skin-horror .p-bonus-stack-gift { display: none; } body.skin-horror .p-bonus-stack-divider { display: none; } body.skin-horror .p-bonus-stack-list { grid-template-columns: 1fr; gap: 12px; } body.skin-horror .p-bonus-card { counter-increment: sk-fund; } body.skin-horror .p-bonus-stack-list { counter-reset: sk-fund; } body.skin-horror .p-bonus-link { background: var(--p-card); border: 1px solid var(--p-border); border-left: 3px solid var(--sk-rot-linie); border-radius: 0; grid-template-columns: 46px 78px 1fr; gap: 20px; align-items: center; padding: 16px 22px; } body.skin-horror .p-bonus-link::before { content: "0" counter(sk-fund); font-family: 'IM Fell English SC', Georgia, serif; font-size: 1.8rem; line-height: 1; color: var(--p-muted); } body.skin-horror .p-bonus-link::after { display: none; } body.skin-horror .p-bonus-link:hover { transform: none; box-shadow: none; border-color: var(--sk-rot-linie); background: color-mix(in srgb, var(--sk-rot-linie) 10%, var(--p-card)); } body.skin-horror .p-bonus-stack .p-bonus-cover-wrap { width: 78px; height: 78px; border-radius: 0; border: 1px solid var(--p-border); background: var(--sk-schirm); box-shadow: none; } body.skin-horror .p-bonus-stack .p-bonus-typebadge { background: var(--sk-rot-linie); color: var(--p-accent-fg); border-radius: 0; border: 0; } body.skin-horror .p-bonus-body .p-bonus-title { font-family: Barlow, system-ui, sans-serif; font-weight: 500; font-size: 1.04rem; color: var(--p-fg); } body.skin-horror .p-bonus-body .p-bonus-desc { color: var(--p-muted); opacity: 1; font-weight: 300; } body.skin-horror .p-bonus-body .p-bonus-value { background: transparent; color: var(--p-muted); border: 1px solid var(--p-border); border-radius: 0; box-shadow: none; font-weight: 400; letter-spacing: 0.1em; } body.skin-horror .p-bonus-body .p-bonus-btn { background: transparent; color: var(--sk-rot-text); border: 1px solid color-mix(in srgb, var(--sk-rot-linie) 70%, transparent); border-radius: 0; box-shadow: none; font-family: 'IM Fell English SC', Georgia, serif; font-size: 0.86rem; letter-spacing: 0.16em; text-transform: uppercase; } body.skin-horror .p-bonus-link:hover .p-bonus-btn { transform: none; box-shadow: none; background: var(--sk-rot-linie); color: var(--p-accent-fg); border-color: var(--sk-rot-linie); } /* Letzte Vorstellung: Countdown links, Button rechts, ein Kasten */ body.skin-horror .p-cta-block { display: flex; align-items: center; justify-content: space-between; gap: 36px; flex-wrap: wrap; max-width: 860px; margin: 46px auto 0; background: var(--p-card); border: 1px solid var(--p-border); border-radius: 0; padding: 26px 32px; } body.skin-horror .p-countdown { background: transparent; border: 0; padding: 0; } body.skin-horror .p-countdown .p-countdown-label { font-family: 'IM Fell English SC', Georgia, serif; font-size: 0.8rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--sk-marke); text-align: left; } body.skin-horror .p-countdown .p-countdown-grid { justify-content: flex-start; margin: 0; gap: 24px; } body.skin-horror .p-countdown-box .p-cd-flip { background: transparent; box-shadow: none; aspect-ratio: auto; border-radius: 0; } body.skin-horror .p-countdown-box .p-cd-flip::before, body.skin-horror .p-countdown-box .p-cd-flip::after { display: none; } body.skin-horror .p-countdown-box .p-cd-flip .p-cd-num { font-family: 'IM Fell English SC', Georgia, serif; font-weight: 400; font-size: clamp(2rem, 5.4vw, 2.7rem); line-height: 1; color: var(--p-fg); text-shadow: none; letter-spacing: 0; } body.skin-horror .p-countdown-box:last-child .p-cd-flip .p-cd-num { color: var(--sk-rot-text); } body.skin-horror .p-countdown-box .p-cd-unit { font-size: 0.72rem; letter-spacing: 0.16em; color: var(--sk-marke); font-weight: 400; } body.skin-horror .p-cta-block .p-cd-sep, body.skin-horror .p-cta-block .p-cd-unit-inline, body.skin-horror .p-cta-block .p-cd-bartext, body.skin-horror .p-cta-block .p-cd-minimaltext, body.skin-horror .p-cta-block .p-countdown-expired { color: var(--p-fg); } body.skin-horror .p-cta-wrap { text-align: right; margin-top: 0; } body.skin-horror .p-cta { margin-top: 0; background: var(--p-accent); color: var(--p-accent-fg); font-family: 'IM Fell English SC', Georgia, serif; font-weight: 400; font-size: 1.1rem; letter-spacing: 0.2em; text-transform: uppercase; border-radius: 0; padding: 17px 46px; box-shadow: 0 18px 44px -20px color-mix(in srgb, var(--p-accent) 85%, transparent); } body.skin-horror .p-cta:hover { transform: translateY(-2px); box-shadow: 0 22px 52px -20px color-mix(in srgb, var(--p-accent) 95%, transparent); } body.skin-horror .p-foot { max-width: 780px; margin: 52px auto 0; text-align: center; border-top: 1px solid var(--p-border); padding-top: 26px; color: var(--p-muted); } body.skin-horror .p-foot-links { justify-content: center; } body.skin-horror .p-foot-links button, body.skin-horror .p-foot-links a { color: var(--p-muted); font-weight: 300; } body.skin-horror .p-foot-meta, body.skin-horror .p-foot-ki, body.skin-horror .p-foot-copy { color: var(--p-fg); font-weight: 300; } @media (max-width: 820px) { body.skin-horror .p-cta-block { justify-content: center; text-align: center; } body.skin-horror .p-cta-wrap { text-align: center; width: 100%; } body.skin-horror .p-countdown .p-countdown-label { text-align: center; } body.skin-horror .p-countdown .p-countdown-grid { justify-content: center; } } @media (max-width: 640px) { body.skin-horror .p-wrap { padding: 22px 16px 44px; } body.skin-horror .p-wrap > .p-hero { padding-top: 30px; } body.skin-horror .p-hero::before { letter-spacing: 0.28em; font-size: 0.8rem; } body.skin-horror .p-video, body.skin-horror .p-audio { transform: none; margin-top: 32px; } body.skin-horror .p-body { margin-top: 36px; font-size: 1rem; } body.skin-horror .p-bonus-stack { margin-top: 38px; } body.skin-horror .p-bonus-stack-head { flex-wrap: wrap; gap: 6px; } body.skin-horror .p-bonus-link { grid-template-columns: 34px 58px 1fr; gap: 12px; padding: 14px; } body.skin-horror .p-bonus-link::before { font-size: 1.3rem; } body.skin-horror .p-bonus-stack .p-bonus-cover-wrap { width: 58px; height: 58px; } body.skin-horror .p-cta-block { padding: 20px 16px; gap: 22px; } body.skin-horror .p-countdown .p-countdown-grid { gap: 14px; } body.skin-horror .p-cta { display: flex; justify-content: center; padding: 17px 20px; letter-spacing: 0.14em; } } /* ============================================================ 2) NOIR Ein Vorfuehrraum mit Jalousien-Licht im Kopf, Leinwand in der Mitte, Aktennotiz darunter. Playfair Display fuer die Titel, Special Elite fuer Marken und Akten-Beschriftung, Barlow fuer den Satz. --p-accent bleibt hier ausdruecklich beim Kunden. Das Gold des Entwurfs ist Stimmung, nicht Bedeutung: jeder Kundenton haelt die Vorlage zusammen, solange er hell genug steht. Dafuer wird er per color-mix je Modus angehoben oder abgesenkt. ============================================================ */ body.skin-noir, [data-mode="dark"] body.skin-noir, body.skin-noir[data-mode="dark"] { --p-bg: #0B0B0C; --p-fg: #DEDEDC; --p-muted: #9A9A96; --p-card: #101011; --p-border: #232325; --sk-kopf: #111112; --sk-saal: #08080A; --sk-hell: #F5F3EE; --sk-rahmen: #131315; --sk-rahmen-kante: #2C2C2F; --sk-linie: #1E1E20; --sk-schirm: radial-gradient(ellipse 74% 82% at 50% 46%, #212124 0%, #0A0A0C 78%); /* Kundenton auf Schwarz: um mindestens einen Schritt aufgehellt, damit auch kleine Versal-Marken ueber 4.5:1 bleiben. */ --sk-ton: color-mix(in srgb, var(--p-accent) 82%, #F5F3EE); --sk-ton-linie: color-mix(in srgb, var(--p-accent) 55%, transparent); --sk-jalousie: rgba(244,240,228,0.115); --sk-jalousie-aus: linear-gradient(96deg, rgba(11,11,12,0) 0%, rgba(11,11,12,0.24) 42%, rgba(11,11,12,0.88) 78%, rgba(11,11,12,0.97) 100%); --sk-rauch: rgba(226,226,222,0.045); --sk-rauch-2: rgba(200,200,196,0.030); --sk-strahl: radial-gradient(ellipse 40% 46% at 50% 22%, rgba(238,234,220,0.09) 0%, rgba(210,206,192,0.035) 46%, rgba(8,8,10,0) 74%); } /* Tagfassung: dieselbe Akte im Tageslicht. Zeitungspapier statt Schwarz, die Jalousie wirft Schatten statt Licht. */ [data-mode="light"] body.skin-noir, body.skin-noir[data-mode="light"] { --p-bg: #E9E7E1; --p-fg: #17171A; --p-muted: #55554F; --p-card: #FBFAF7; --p-border: #CFCCC4; --sk-kopf: #DCD9D1; --sk-saal: #D4D1C9; --sk-hell: #101013; --sk-rahmen: #F3F1EC; --sk-rahmen-kante: #BCB8AE; --sk-linie: #CFCCC4; --sk-schirm: radial-gradient(ellipse 74% 82% at 50% 46%, #2A2A2E 0%, #101013 78%); /* Kundenton auf Papier: abgesenkt, sonst verschwinden helle Toene (Gelb, Tuerkis) im Weiss. */ --sk-ton: color-mix(in srgb, var(--p-accent) 72%, #101013); --sk-ton-linie: color-mix(in srgb, var(--p-accent) 60%, transparent); --sk-jalousie: rgba(24,24,26,0.075); --sk-jalousie-aus: linear-gradient(96deg, rgba(233,231,225,0) 0%, rgba(233,231,225,0.28) 42%, rgba(233,231,225,0.88) 78%, rgba(233,231,225,0.97) 100%); --sk-rauch: rgba(70,70,66,0.045); --sk-rauch-2: rgba(90,90,84,0.030); --sk-strahl: radial-gradient(ellipse 40% 46% at 50% 22%, rgba(255,252,242,0.55) 0%, rgba(250,246,234,0.22) 46%, rgba(212,209,201,0) 74%); } body.skin-noir { background: var(--p-bg); color: var(--p-fg); font-family: Barlow, system-ui, -apple-system, 'Segoe UI', sans-serif; } body.skin-noir .p-wrap { --sk-spalte: 1120px; max-width: var(--sk-spalte); padding: 26px 40px 54px; } /* Statt Nebel: Zigarettenrauch. Eine einzige, sehr weiche Schwade, oben rechts angesetzt, die langsam nach links zieht. Zwei Ballen reichen, mehr wirkt auf dem Zeitungspapier der Tagfassung wie ein Druckfehler. */ body.skin-noir::before { background-image: radial-gradient(closest-side ellipse, var(--sk-rauch) 0%, transparent 100%), radial-gradient(closest-side ellipse, var(--sk-rauch-2) 0%, transparent 100%); background-size: 74vmax 62vmax, 96vmax 70vmax; background-position: 82% 4%, 54% 46%; animation: skDunstLinks 112s ease-in-out infinite alternate; } /* Empfehlungs-Zeile auf dem Boden des Saals, ueber dem Kopfband */ body.skin-noir .p-empfehlung { justify-content: flex-start; padding-top: 10px; font-family: 'Special Elite', 'Courier Prime', monospace; font-size: 0.8rem; letter-spacing: 0.06em; color: var(--p-muted); opacity: 1; } body.skin-noir .p-empfehlung .p-empfehlung-avatar, body.skin-noir .p-empfehlung .p-empfehlung-foto { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--p-accent); color: var(--p-accent-fg); font-family: 'Playfair Display', Georgia, serif; font-weight: 700; } body.skin-noir .p-empfehlung .p-empfehlung-text b { color: var(--p-fg); font-weight: 600; } /* KOPFBEREICH: hier und nur hier liegen die Jalousien-Streifen. Sie sind an .p-hero gebunden, das overflow: hidden traegt, und laufen nach rechts weich aus. Damit endet der Effekt hart mit dem Kopfband und kann nirgends wie ein Darstellungsfehler quer durch Text oder Button laufen. */ body.skin-noir .p-wrap > .p-hero { position: relative; overflow: hidden; text-align: left; background: var(--sk-kopf); border: 0; border-bottom: 1px solid var(--p-border); border-radius: 0; margin: 14px -40px 0; padding: 40px 40px 52px; } body.skin-noir .p-hero::before { content: ""; position: absolute; inset: -80px -60px; pointer-events: none; background-image: repeating-linear-gradient(102deg, var(--sk-jalousie) 0px, var(--sk-jalousie) 26px, rgba(0,0,0,0) 26px, rgba(0,0,0,0) 74px); } body.skin-noir .p-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--sk-jalousie-aus); } body.skin-noir .p-hero h1 { position: relative; z-index: 1; font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: clamp(2.2rem, 5.8vw, 4.4rem); line-height: 1.05; letter-spacing: -0.018em; color: var(--sk-hell); max-width: 18ch; margin: 0; text-shadow: 0 2px 26px color-mix(in srgb, var(--sk-kopf) 80%, transparent); } body.skin-noir .p-sub { position: relative; z-index: 1; max-width: 48ch; margin: 24px 0 0; font-size: 1.06rem; font-weight: 300; line-height: 1.8; color: var(--p-muted); } /* VORFUEHRRAUM: das Video als Leinwand, mit Projektorstrahl. Die Neigung gilt nur im Ruhezustand, das Aufrichten kommt zentral aus kampagnen-skins.css (Abschnitt N). */ body.skin-noir .p-video, body.skin-noir .p-audio { position: relative; overflow: hidden; background: var(--sk-saal); border: 0; border-radius: 0; margin: 0 -40px; padding: 50px 40px 44px; } body.skin-noir .p-video::before, body.skin-noir .p-audio::before { content: ""; position: absolute; left: 50%; top: -180px; width: 840px; max-width: 130%; height: 760px; transform: translateX(-50%); pointer-events: none; background: var(--sk-strahl); } body.skin-noir .p-video > *, body.skin-noir .p-audio > * { position: relative; z-index: 1; } body.skin-noir .p-audio-label { max-width: 900px; margin: 0 auto 12px; font-family: 'Special Elite', 'Courier Prime', monospace; font-size: 0.78rem; letter-spacing: 0.06em; color: var(--p-muted); } body.skin-noir .p-video-wrap, body.skin-noir .p-audio-wrap { max-width: 900px; margin: 0 auto; border: 12px solid var(--sk-rahmen); border-radius: 0; background: var(--sk-schirm); box-shadow: 0 44px 100px -46px rgba(0,0,0,0.95), 0 0 0 1px var(--sk-rahmen-kante); transform: rotate(-0.7deg); } body.skin-noir .p-video-wrap::after, body.skin-noir .p-audio-wrap::after { border-radius: 0; box-shadow: none; background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 34%, rgba(0,0,0,0.28) 100%); } body.skin-noir .p-video-play .p-video-play-core, body.skin-noir .p-audio-play .p-audio-play-core { width: 84px; height: 84px; border-radius: 50%; background: rgba(10,10,12,0.6); border: 1px solid color-mix(in srgb, var(--p-accent) 70%, transparent); color: color-mix(in srgb, var(--p-accent) 82%, #F5F3EE); box-shadow: none; } body.skin-noir .p-video-play .p-video-play-hint { font-family: 'Special Elite', 'Courier Prime', monospace; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: none; font-weight: 400; color: #F5F3EE; } /* AKTENNOTIZ: links die Aktenmarke, rechts der Satz. Auf dem Handy klappt die Marke ueber den Text. */ body.skin-noir .p-body { position: relative; max-width: 62ch; margin: 44px auto 0; padding-left: 200px; font-size: 1.06rem; font-weight: 400; line-height: 1.86; color: var(--p-fg); } body.skin-noir .p-body::before { content: "Der Fall"; position: absolute; left: 0; top: 6px; width: 168px; font-family: 'Special Elite', 'Courier Prime', monospace; font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sk-ton); } body.skin-noir .p-body p + p { font-weight: 300; color: var(--p-muted); line-height: 1.9; } /* BEIGELEGT: die Boni als Anlage in einem Kasten */ body.skin-noir .p-bonus-stack { max-width: 900px; margin: 46px auto 0; background: var(--p-card); border: 1px solid var(--p-border); padding: 26px 32px 30px; } /* Kopf des Blocks als Zeile. Der Trennstrich braucht flex-basis: 100%, sonst haengt er als drittes Element in derselben Zeile und sieht aus wie eine Linie quer durch die Ueberschrift. */ body.skin-noir .p-bonus-stack-head { display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 20px; text-align: left; } body.skin-noir .p-bonus-stack-eyebrow { font-family: 'Special Elite', 'Courier Prime', monospace; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sk-bonus-ton); -webkit-text-fill-color: var(--sk-bonus-ton); opacity: 1; } body.skin-noir .p-bonus-stack-eyebrow::after { content: " · beigelegt"; } body.skin-noir .p-bonus-stack-title { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--p-fg); } body.skin-noir .p-bonus-stack-title em, body.skin-noir .p-redeem-title em { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--sk-bonus-ton); -webkit-text-fill-color: var(--sk-bonus-ton); } body.skin-noir .p-bonus-stack-gift { display: none; } body.skin-noir .p-bonus-stack-divider { background: var(--sk-ton-linie); flex-basis: 100%; width: 100%; height: 1px; margin-top: 6px; } body.skin-noir .p-bonus-stack-list { grid-template-columns: 1fr; gap: 0; counter-reset: sk-anlage; } body.skin-noir .p-bonus-card { counter-increment: sk-anlage; border-bottom: 1px solid var(--p-border); } body.skin-noir .p-bonus-card:last-child { border-bottom: 0; } body.skin-noir .p-bonus-link { background: transparent; border: 0; border-radius: 0; grid-template-columns: 26px 72px 1fr; gap: 20px; align-items: center; padding: 16px 2px; } body.skin-noir .p-bonus-link::before { content: counter(sk-anlage); font-family: 'Special Elite', 'Courier Prime', monospace; font-size: 0.92rem; color: var(--p-muted); } body.skin-noir .p-bonus-link::after { display: none; } body.skin-noir .p-bonus-link:hover { transform: none; box-shadow: none; background: color-mix(in srgb, var(--p-accent) 9%, transparent); } body.skin-noir .p-bonus-stack .p-bonus-cover-wrap { width: 72px; height: 72px; border-radius: 0; border: 1px solid var(--p-border); background: var(--sk-schirm); box-shadow: none; } /* Die Typ-Marke stand als Kundenton mit Kunden-Schriftfarbe auf dem Bild. Beides waehlt der Kunde frei, und bei Weiss auf Gruen bleiben davon 2.93:1, bei Weiss auf Orange 3.56:1. Fuer eine 10-Pixel-Marke in Versalien ist das zu wenig. Sie traegt deshalb die beiden festen Toene der Vorlage: --sk-hell kippt mit dem Modus, --p-card ist immer dessen Gegenstueck. Damit steht sie in beiden Fassungen ueber 15:1 und bleibt vom Kundenton unabhaengig. */ body.skin-noir .p-bonus-stack .p-bonus-typebadge { background: var(--sk-hell); color: var(--p-card); border-radius: 0; border: 0; font-family: 'Special Elite', 'Courier Prime', monospace; } body.skin-noir .p-bonus-body .p-bonus-title { font-weight: 500; font-size: 1.04rem; color: var(--p-fg); } body.skin-noir .p-bonus-body .p-bonus-desc { color: var(--p-muted); opacity: 1; font-weight: 300; } body.skin-noir .p-bonus-body .p-bonus-value { background: transparent; color: var(--p-muted); border: 1px solid var(--p-border); border-radius: 0; box-shadow: none; font-weight: 400; } /* Die Aufschrift des Buttons stand im --sk-ton der Vorlage. Der ist gegen den Saal gerechnet und traegt auf dem hellen Aktenblatt nicht: Gold kommt auf 3.79:1, Gelb auf 2.82:1. Der Bonus-Block hat dafuer seinen eigenen Ton, derselbe wie bei Kennzeile und Wert. Er haelt in beiden Fassungen ueber alle Paletten mindestens 4.9:1. */ body.skin-noir .p-bonus-body .p-bonus-btn { background: transparent; color: var(--sk-bonus-ton); border: 1px solid var(--sk-ton-linie); border-radius: 0; box-shadow: none; font-family: 'Special Elite', 'Courier Prime', monospace; font-size: 0.84rem; letter-spacing: 0.06em; } body.skin-noir .p-bonus-link:hover .p-bonus-btn { transform: none; box-shadow: none; border-color: var(--p-accent); } /* SPERRFRIST: Countdown und Button frei auf der Seite */ body.skin-noir .p-cta-block { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; max-width: 900px; margin: 40px auto 0; background: transparent; border: 0; padding: 0; } body.skin-noir .p-countdown { background: transparent; border: 0; padding: 0; } body.skin-noir .p-countdown .p-countdown-label { font-family: 'Special Elite', 'Courier Prime', monospace; font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--p-muted); text-align: left; } body.skin-noir .p-countdown .p-countdown-grid { justify-content: flex-start; margin: 0; gap: 24px; } body.skin-noir .p-countdown-box .p-cd-flip { background: transparent; box-shadow: none; aspect-ratio: auto; border-radius: 0; } body.skin-noir .p-countdown-box .p-cd-flip::before, body.skin-noir .p-countdown-box .p-cd-flip::after { display: none; } body.skin-noir .p-countdown-box .p-cd-flip .p-cd-num { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: clamp(2rem, 5.6vw, 2.8rem); line-height: 1; color: var(--sk-hell); text-shadow: none; } body.skin-noir .p-countdown-box:last-child .p-cd-flip .p-cd-num { color: var(--sk-ton); } body.skin-noir .p-countdown-box .p-cd-unit { font-family: 'Special Elite', 'Courier Prime', monospace; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: none; color: var(--p-muted); font-weight: 400; } body.skin-noir .p-cta-wrap { text-align: right; margin-top: 0; } body.skin-noir .p-cta { margin-top: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--p-accent) 76%, #FFFFFF), var(--p-accent)); color: var(--p-accent-fg); font-family: Barlow, system-ui, sans-serif; font-weight: 500; font-size: 0.94rem; letter-spacing: 0.22em; text-transform: uppercase; border-radius: 0; padding: 18px 48px; box-shadow: 0 20px 48px -22px color-mix(in srgb, var(--p-accent) 70%, transparent); } body.skin-noir .p-cta:hover { transform: translateY(-2px); box-shadow: 0 24px 54px -22px color-mix(in srgb, var(--p-accent) 85%, transparent); } body.skin-noir .p-foot { max-width: 900px; margin: 50px auto 0; border-top: 1px solid var(--sk-linie); padding-top: 22px; color: var(--p-muted); } body.skin-noir .p-foot-links button, body.skin-noir .p-foot-links a { font-family: 'Special Elite', 'Courier Prime', monospace; font-size: 0.76rem; color: var(--p-muted); } body.skin-noir .p-foot-meta, body.skin-noir .p-foot-ki, body.skin-noir .p-foot-copy { color: var(--p-fg); font-weight: 300; } @media (max-width: 820px) { body.skin-noir .p-cta-block { justify-content: center; } body.skin-noir .p-cta-wrap { text-align: center; width: 100%; } body.skin-noir .p-countdown .p-countdown-label { text-align: center; } body.skin-noir .p-countdown .p-countdown-grid { justify-content: center; } } @media (max-width: 640px) { body.skin-noir .p-wrap { padding: 18px 16px 44px; } body.skin-noir .p-wrap > .p-hero { margin: 12px -16px 0; padding: 28px 16px 34px; } body.skin-noir .p-hero h1 { max-width: none; } body.skin-noir .p-video, body.skin-noir .p-audio { margin: 0 -16px; padding: 30px 16px 28px; } body.skin-noir .p-video-wrap, body.skin-noir .p-audio-wrap { border-width: 7px; transform: none; } body.skin-noir .p-body { padding-left: 0; padding-top: 26px; margin-top: 30px; font-size: 1rem; } body.skin-noir .p-body::before { top: 0; width: auto; } body.skin-noir .p-bonus-stack { padding: 18px 16px 22px; margin-top: 34px; } body.skin-noir .p-bonus-stack-head { flex-wrap: wrap; gap: 6px; } body.skin-noir .p-bonus-link { grid-template-columns: 20px 56px 1fr; gap: 12px; } body.skin-noir .p-bonus-stack .p-bonus-cover-wrap { width: 56px; height: 56px; } body.skin-noir .p-countdown .p-countdown-grid { gap: 14px; } body.skin-noir .p-cta { display: flex; justify-content: center; padding: 18px 20px; letter-spacing: 0.14em; } } /* ============================================================ 3) OKKULT Ein Buch auf Leder. Goldrahmen, Kapitel-Initiale, das Video im Kreis aus feinen Linien. Cinzel nur fuer Titel und kurze Marken, EB Garamond fuer den Satz. Hier wird --p-accent gesetzt: das Gold traegt Rahmen, Ring, Initiale, Verzeichnis und Button. Ohne Gold ist der Buchdeckel ein grauer Kasten, die Vorlage waere nicht wiederzuerkennen. Die Fusszeile steht im Markup INNERHALB von .p-wrap. Sie bleibt deshalb auf dem Buchdeckel und bekommt eine goldene Haarlinie als Abschluss, statt sie mit negativen Abstaenden aus dem Deckel herauszubrechen. Das waere fragil und saehe auf dem Handy nach Fehler aus. ============================================================ */ body.skin-okkult, [data-mode="dark"] body.skin-okkult, body.skin-okkult[data-mode="dark"] { --p-bg: #0A0806; --p-fg: #E6DCC4; --p-muted: #B7AC90; --p-card: #14100A; --p-border: #3A2A14; --p-accent: #C9A84C; --p-accent-fg: #14100A; --sk-gold: #C9A84C; --sk-gold-hell: #E5C666; --sk-gold-matt: #9A8A66; --sk-gold-linie: rgba(201,168,76,0.30); --sk-gold-linie-schwach: rgba(201,168,76,0.14); --sk-gold-flaeche: rgba(201,168,76,0.035); /* Das Siegelrot des Entwurfs (#8C1F2A) kommt auf dem Leder nur auf 2.2:1. Als Linienfarbe im Ring bleibt es, als Schrift- farbe wird es aufgehellt. */ --sk-siegel-text: #CE5A62; --sk-deckel: linear-gradient(158deg, #1A120C 0%, #120C08 46%, #0D0906 100%); --sk-schirm: radial-gradient(ellipse 72% 82% at 50% 48%, #1C1409 0%, #080604 78%); --sk-leder: radial-gradient(ellipse 70% 44% at 50% 2%, rgba(201,168,76,0.13) 0%, rgba(120,92,40,0.05) 40%, rgba(10,8,6,0) 68%), repeating-linear-gradient(63deg, rgba(255,236,190,0.016) 0px, rgba(255,236,190,0.016) 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 7px), repeating-linear-gradient(-58deg, rgba(255,236,190,0.014) 0px, rgba(255,236,190,0.014) 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 9px); --sk-dunst: rgba(201,168,76,0.055); --sk-ring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 700' fill='none'%3E%3Cg stroke='%23C9A84C' stroke-width='1'%3E%3Ccircle cx='350' cy='350' r='330' stroke-opacity='.42'/%3E%3Ccircle cx='350' cy='350' r='318' stroke-opacity='.18'/%3E%3Ccircle cx='350' cy='350' r='272' stroke-opacity='.28' stroke-dasharray='3 9'/%3E%3Cpath d='M350 20v26M350 654v26M20 350h26M654 350h26' stroke-opacity='.5'/%3E%3Cpath d='M117 117l19 19M583 117l-19 19M117 583l19-19M583 583l-19-19' stroke-opacity='.32'/%3E%3Cpath d='M350 96 570 223v254L350 604 130 477V223z' stroke-opacity='.16'/%3E%3C/g%3E%3Ccircle cx='350' cy='350' r='238' stroke='%238C1F2A' stroke-width='1' stroke-opacity='.55'/%3E%3C/svg%3E"); --sk-raute: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' fill='none'%3E%3Cg stroke='%23C9A84C'%3E%3Cpath d='M0 7h56M144 7h56' stroke-opacity='.45'/%3E%3Cpath d='M100 1.3 105.7 7 100 12.7 94.3 7z'/%3E%3C/g%3E%3C/svg%3E"); } /* Tagfassung: dasselbe Buch aufgeschlagen bei Tageslicht. Gealtertes Pergament statt Leder, das Gold wird zu einer dunkleren Vergoldung, damit es auf hellem Grund traegt. */ [data-mode="light"] body.skin-okkult, body.skin-okkult[data-mode="light"] { --p-bg: #E4D9BE; --p-fg: #24190C; --p-muted: #5C4F35; --p-card: #F2E9D2; --p-border: #C3B085; --p-accent: #6B5110; --p-accent-fg: #FBF5E6; --sk-gold: #6B5110; --sk-gold-hell: #8A6B1C; --sk-gold-matt: #6B5F42; --sk-gold-linie: rgba(107,81,16,0.38); --sk-gold-linie-schwach: rgba(107,81,16,0.18); --sk-gold-flaeche: rgba(107,81,16,0.05); --sk-siegel-text: #8C1F2A; --sk-deckel: linear-gradient(158deg, #FBF5E6 0%, #F4EAD2 46%, #EADFC2 100%); --sk-schirm: radial-gradient(ellipse 72% 82% at 50% 48%, #2A2110 0%, #100C06 78%); --sk-leder: radial-gradient(ellipse 70% 44% at 50% 2%, rgba(255,240,200,0.55) 0%, rgba(200,175,120,0.18) 40%, rgba(228,217,190,0) 68%), repeating-linear-gradient(63deg, rgba(120,94,44,0.030) 0px, rgba(120,94,44,0.030) 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 7px), repeating-linear-gradient(-58deg, rgba(120,94,44,0.026) 0px, rgba(120,94,44,0.026) 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 9px); --sk-dunst: rgba(150,120,54,0.050); --sk-ring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 700' fill='none'%3E%3Cg stroke='%236B5110' stroke-width='1'%3E%3Ccircle cx='350' cy='350' r='330' stroke-opacity='.55'/%3E%3Ccircle cx='350' cy='350' r='318' stroke-opacity='.26'/%3E%3Ccircle cx='350' cy='350' r='272' stroke-opacity='.36' stroke-dasharray='3 9'/%3E%3Cpath d='M350 20v26M350 654v26M20 350h26M654 350h26' stroke-opacity='.6'/%3E%3Cpath d='M117 117l19 19M583 117l-19 19M117 583l19-19M583 583l-19-19' stroke-opacity='.4'/%3E%3Cpath d='M350 96 570 223v254L350 604 130 477V223z' stroke-opacity='.2'/%3E%3C/g%3E%3Ccircle cx='350' cy='350' r='238' stroke='%238C1F2A' stroke-width='1' stroke-opacity='.6'/%3E%3C/svg%3E"); --sk-raute: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' fill='none'%3E%3Cg stroke='%236B5110'%3E%3Cpath d='M0 7h56M144 7h56' stroke-opacity='.55'/%3E%3Cpath d='M100 1.3 105.7 7 100 12.7 94.3 7z'/%3E%3C/g%3E%3C/svg%3E"); } body.skin-okkult { background-color: var(--p-bg); background-image: var(--sk-leder); background-attachment: fixed; color: var(--p-fg); font-family: 'EB Garamond', Georgia, serif; } /* Kein Nebel und kein Staub: einzelne Koerner auf dunklem Grund lesen sich schnell als Dreck auf dem Bildschirm. Stattdessen Kerzendunst, ein einziger warmer Schein, der ganz langsam atmet und beim Abspielen genauso abzieht wie der Nebel. */ body.skin-okkult::before { background-image: radial-gradient(closest-side ellipse, var(--sk-dunst) 0%, transparent 100%), radial-gradient(closest-side ellipse, var(--sk-dunst) 0%, transparent 100%); background-size: 88vmax 66vmax, 58vmax 50vmax; background-position: 46% 2%, 76% 68%; animation: skDunstRechts 140s ease-in-out infinite alternate; } /* Empfehlungs-Zeile auf dem Leder, ueber dem Buchdeckel */ body.skin-okkult .p-empfehlung { justify-content: center; gap: 12px; padding-top: 16px; font-family: Cinzel, Georgia, serif; font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sk-gold-matt); opacity: 1; } body.skin-okkult .p-empfehlung .p-empfehlung-avatar, body.skin-okkult .p-empfehlung .p-empfehlung-foto { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--sk-gold-linie); background: var(--p-card); color: var(--sk-gold); font-family: Cinzel, Georgia, serif; font-weight: 600; } body.skin-okkult .p-empfehlung .p-empfehlung-text b { color: var(--p-fg); font-weight: 600; } body.skin-okkult .p-empfehlung .p-empfehlung-satz { text-transform: none; letter-spacing: 0.02em; } /* Der Buchdeckel: die ganze Spalte ist der Einband, zwei Goldrahmen liegen als Zierrahmen darin. */ body.skin-okkult .p-wrap { --sk-spalte: 1120px; max-width: var(--sk-spalte); position: relative; background: var(--sk-deckel); border: 1px solid var(--p-border); box-shadow: 0 46px 110px -48px rgba(0,0,0,0.8), inset 0 0 0 1px var(--sk-gold-linie-schwach); margin-top: 18px; padding: 46px 62px 54px; } body.skin-okkult .p-wrap::before, body.skin-okkult .p-wrap::after { content: ""; position: absolute; pointer-events: none; border: 1px solid var(--sk-gold-linie); } body.skin-okkult .p-wrap::before { inset: 16px; } body.skin-okkult .p-wrap::after { inset: 22px; border-color: var(--sk-gold-linie-schwach); } /* Titel mit Kapitel-Marke und Zierraute */ body.skin-okkult .p-wrap > .p-hero { position: relative; text-align: center; background: transparent; border: 0; border-radius: 0; padding: 34px 0 0; margin: 0 auto; max-width: 900px; } body.skin-okkult .p-hero::before { content: "Erstes Kapitel"; display: block; font-family: Cinzel, Georgia, serif; font-size: 0.76rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--sk-siegel-text); margin-bottom: 20px; } body.skin-okkult .p-hero h1 { font-family: Cinzel, Georgia, serif; font-weight: 600; font-size: clamp(2rem, 5vw, 3.9rem); line-height: 1.14; letter-spacing: 0.006em; color: var(--p-fg); margin: 0; text-shadow: 0 2px 22px var(--sk-gold-linie-schwach); } body.skin-okkult .p-hero::after { content: ""; display: block; width: 200px; height: 14px; margin: 22px auto 0; background-image: var(--sk-raute); background-repeat: no-repeat; background-position: center; background-size: 200px 14px; } body.skin-okkult .p-sub { max-width: 56ch; margin: 22px auto 0; font-size: 1.1rem; line-height: 1.8; color: var(--p-muted); } /* Das Video im Kreis aus feinen Linien. .p-video-wrap traegt overflow: hidden und ein belegtes ::after, deshalb liegt der Kreis in ::before, und die Huelle wird auf overflow: visible gestellt, damit er ueberstehen darf. Der Kreis sitzt auf z-index -1, .p-video wird dafuer zum eigenen Stapel (z-index: 0), sonst rutscht er unter den Buchdeckel. Der Kreis ragt oben und unten weit ueber das Videofeld hinaus. Dieser Platz wird ueber die Abstaende ausdruecklich reserviert (--sk-ring-luft), sonst legt er sich auf Titel und Fliesstext. --sk-ring-weite steuert den Durchmesser, beide wachsen und schrumpfen zusammen. */ body.skin-okkult .p-video, body.skin-okkult .p-audio { --sk-ring-weite: 128%; --sk-ring-luft: 240px; position: relative; z-index: 0; max-width: 660px; margin: var(--sk-ring-luft) auto; background: transparent; border: 0; border-radius: 0; padding: 0; } body.skin-okkult .p-audio-label { justify-content: center; font-family: Cinzel, Georgia, serif; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sk-gold-matt); margin-bottom: 14px; } body.skin-okkult .p-video::after, body.skin-okkult .p-audio::after { content: "Tafel I"; display: block; padding-top: 12px; font-family: Cinzel, Georgia, serif; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sk-gold-matt); } body.skin-okkult .p-video-wrap, body.skin-okkult .p-audio-wrap { position: relative; overflow: visible; border: 1px solid var(--sk-gold-linie); border-radius: 0; background: var(--sk-schirm); box-shadow: 0 0 60px -10px color-mix(in srgb, var(--sk-gold) 24%, transparent); } body.skin-okkult .p-video-wrap::before, body.skin-okkult .p-audio-wrap::before { content: ""; position: absolute; left: 50%; top: 50%; width: var(--sk-ring-weite); aspect-ratio: 1; transform: translate(-50%, -50%); z-index: -1; pointer-events: none; background-image: var(--sk-ring); background-repeat: no-repeat; background-position: center; background-size: contain; } body.skin-okkult .p-video-wrap::after, body.skin-okkult .p-audio-wrap::after { border-radius: 0; box-shadow: 0 0 0 1px var(--sk-gold-linie-schwach) inset; } body.skin-okkult .p-video-play .p-video-play-core, body.skin-okkult .p-audio-play .p-audio-play-core { width: 78px; height: 78px; border-radius: 50%; background: rgba(20,14,8,0.72); border: 1px solid color-mix(in srgb, var(--sk-gold) 70%, transparent); color: #E5C666; box-shadow: none; } body.skin-okkult .p-video-play .p-video-play-hint { font-family: Cinzel, Georgia, serif; font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 400; color: #F0E6CD; } /* Fliesstext mit Initiale */ body.skin-okkult .p-body { max-width: 64ch; margin: 0 auto; font-size: 1.12rem; line-height: 1.86; color: var(--p-fg); } body.skin-okkult .p-body > p:first-of-type::first-letter { float: left; font-family: Cinzel, Georgia, serif; font-size: 3.4em; line-height: 0.86; padding: 6px 14px 0 0; color: var(--sk-gold); } body.skin-okkult .p-body p + p { color: var(--p-muted); line-height: 1.9; font-size: 1.04rem; } /* Verzeichnis der Beigaben, mit roemischen Ziffern */ body.skin-okkult .p-bonus-stack { max-width: 760px; margin: 40px auto 0; background: var(--sk-gold-flaeche); border: 1px solid var(--sk-gold-linie); padding: 24px 30px 28px; } body.skin-okkult .p-bonus-stack-head { display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 20px; text-align: left; } body.skin-okkult .p-bonus-stack-eyebrow { font-family: Cinzel, Georgia, serif; font-size: 0.74rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--sk-gold); opacity: 1; } body.skin-okkult .p-bonus-stack-eyebrow::after { content: " · Verzeichnis"; } body.skin-okkult .p-bonus-stack-title { font-family: Cinzel, Georgia, serif; font-weight: 600; font-size: clamp(1.3rem, 2.8vw, 1.7rem); color: var(--p-fg); } body.skin-okkult .p-bonus-stack-title em, body.skin-okkult .p-redeem-title em { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--sk-gold); } body.skin-okkult .p-bonus-stack-gift { display: none; } body.skin-okkult .p-bonus-stack-divider { background: var(--sk-gold-linie); flex-basis: 100%; width: 100%; height: 1px; margin-top: 6px; } body.skin-okkult .p-bonus-stack-list { grid-template-columns: 1fr; gap: 0; counter-reset: sk-tafel; } body.skin-okkult .p-bonus-card { counter-increment: sk-tafel; border-bottom: 1px solid var(--sk-gold-linie-schwach); } body.skin-okkult .p-bonus-card:last-child { border-bottom: 0; } body.skin-okkult .p-bonus-link { background: transparent; border: 0; border-radius: 0; grid-template-columns: 38px 74px 1fr; gap: 22px; align-items: center; padding: 16px 2px; } body.skin-okkult .p-bonus-link::before { content: counter(sk-tafel, upper-roman) "."; font-family: Cinzel, Georgia, serif; font-size: 1.1rem; color: var(--sk-siegel-text); } body.skin-okkult .p-bonus-link::after { display: none; } body.skin-okkult .p-bonus-link:hover { transform: none; box-shadow: none; background: color-mix(in srgb, var(--sk-gold) 10%, transparent); } body.skin-okkult .p-bonus-stack .p-bonus-cover-wrap { width: 74px; height: 74px; border-radius: 0; border: 1px solid var(--sk-gold-linie); background: var(--sk-schirm); box-shadow: none; } body.skin-okkult .p-bonus-stack .p-bonus-typebadge { background: var(--sk-gold); color: var(--p-accent-fg); border-radius: 0; border: 0; font-family: Cinzel, Georgia, serif; } body.skin-okkult .p-bonus-body .p-bonus-title { font-family: 'EB Garamond', Georgia, serif; font-weight: 500; font-size: 1.08rem; color: var(--p-fg); } body.skin-okkult .p-bonus-body .p-bonus-desc { color: var(--p-muted); opacity: 1; } body.skin-okkult .p-bonus-body .p-bonus-value { background: transparent; color: var(--p-muted); border: 1px solid var(--sk-gold-linie); border-radius: 0; box-shadow: none; } body.skin-okkult .p-bonus-body .p-bonus-btn { background: transparent; color: var(--sk-gold); border: 1px solid var(--sk-gold-linie); border-radius: 0; box-shadow: none; font-family: Cinzel, Georgia, serif; font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; } body.skin-okkult .p-bonus-link:hover .p-bonus-btn { transform: none; box-shadow: none; border-color: var(--sk-gold); color: var(--sk-gold-hell); } /* Das Siegel schliesst in: Frist und Button */ body.skin-okkult .p-cta-block { display: flex; align-items: center; justify-content: space-between; gap: 34px; flex-wrap: wrap; max-width: 760px; margin: 36px auto 0; background: transparent; border: 0; padding: 0; } body.skin-okkult .p-countdown { background: transparent; border: 0; padding: 0; } body.skin-okkult .p-countdown .p-countdown-label { font-family: Cinzel, Georgia, serif; font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--sk-gold-matt); text-align: left; } body.skin-okkult .p-countdown .p-countdown-grid { justify-content: flex-start; margin: 0; gap: 22px; } body.skin-okkult .p-countdown-box .p-cd-flip { background: transparent; box-shadow: none; aspect-ratio: auto; border-radius: 0; } body.skin-okkult .p-countdown-box .p-cd-flip::before, body.skin-okkult .p-countdown-box .p-cd-flip::after { display: none; } body.skin-okkult .p-countdown-box .p-cd-flip .p-cd-num { font-family: Cinzel, Georgia, serif; font-weight: 400; font-size: clamp(1.9rem, 5.2vw, 2.5rem); line-height: 1; color: var(--p-fg); text-shadow: none; } body.skin-okkult .p-countdown-box:last-child .p-cd-flip .p-cd-num { color: var(--sk-gold); } body.skin-okkult .p-countdown-box .p-cd-unit { font-family: Cinzel, Georgia, serif; font-size: 0.7rem; letter-spacing: 0.16em; color: var(--sk-gold-matt); font-weight: 400; } body.skin-okkult .p-cta-wrap { text-align: right; margin-top: 0; } body.skin-okkult .p-cta { margin-top: 0; background: linear-gradient(180deg, var(--sk-gold-hell), var(--sk-gold)); color: var(--p-accent-fg); font-family: Cinzel, Georgia, serif; font-weight: 600; font-size: 0.94rem; letter-spacing: 0.2em; text-transform: uppercase; border-radius: 0; padding: 17px 44px; box-shadow: 0 20px 48px -22px color-mix(in srgb, var(--sk-gold) 70%, transparent); } body.skin-okkult .p-cta:hover { transform: translateY(-2px); box-shadow: 0 24px 54px -22px color-mix(in srgb, var(--sk-gold) 85%, transparent); } body.skin-okkult .p-foot { max-width: 760px; margin: 44px auto 0; text-align: center; border-top: 1px solid var(--sk-gold-linie-schwach); padding-top: 22px; color: var(--p-muted); } body.skin-okkult .p-foot-links { justify-content: center; } body.skin-okkult .p-foot-links button, body.skin-okkult .p-foot-links a { color: var(--p-muted); font-size: 0.86rem; } body.skin-okkult .p-foot-meta, body.skin-okkult .p-foot-ki, body.skin-okkult .p-foot-copy { color: var(--p-fg); } /* Mittlere Breiten: Kreis und reservierter Platz schrumpfen gemeinsam, sonst laeuft der Ring seitlich aus der Seite. */ @media (max-width: 1000px) { body.skin-okkult .p-video, body.skin-okkult .p-audio { --sk-ring-weite: 124%; --sk-ring-luft: 180px; max-width: 540px; } } @media (max-width: 820px) { body.skin-okkult .p-cta-block { justify-content: center; text-align: center; } body.skin-okkult .p-cta-wrap { text-align: center; width: 100%; } body.skin-okkult .p-countdown .p-countdown-label { text-align: center; } body.skin-okkult .p-countdown .p-countdown-grid { justify-content: center; } } @media (max-width: 640px) { body.skin-okkult .p-wrap { padding: 26px 18px 34px; margin-top: 10px; } body.skin-okkult .p-wrap::before { inset: 8px; } body.skin-okkult .p-wrap::after { inset: 13px; } body.skin-okkult .p-wrap > .p-hero { padding-top: 22px; } body.skin-okkult .p-hero::before { letter-spacing: 0.26em; } body.skin-okkult .p-hero::after { width: 150px; background-size: 150px 14px; } /* Der Linienkreis wird auf dem Handy eng gefuehrt: bei 390 Pixeln Fensterbreite bleibt er innerhalb der Seite. */ body.skin-okkult .p-video, body.skin-okkult .p-audio { --sk-ring-weite: 112%; --sk-ring-luft: 96px; max-width: 100%; } body.skin-okkult .p-body { font-size: 1.06rem; } body.skin-okkult .p-bonus-stack { padding: 18px 16px 22px; margin-top: 34px; } body.skin-okkult .p-bonus-stack-head { flex-wrap: wrap; gap: 6px; } body.skin-okkult .p-bonus-link { grid-template-columns: 30px 56px 1fr; gap: 12px; } body.skin-okkult .p-bonus-stack .p-bonus-cover-wrap { width: 56px; height: 56px; } body.skin-okkult .p-countdown .p-countdown-grid { gap: 14px; } body.skin-okkult .p-cta { display: flex; justify-content: center; padding: 17px 20px; letter-spacing: 0.14em; } } /* ============================================================ Gemeinsame Schlussregeln fuer alle drei Vorlagen ============================================================ */ /* Nichts darf seitlich aus der Seite laufen. */ body.skin-horror, body.skin-noir, body.skin-okkult { overflow-x: hidden; } /* Bedienflaechen bleiben auf dem Handy greifbar (44 Pixel Regel). */ @media (max-width: 640px) { body.skin-horror .p-cta, body.skin-noir .p-cta, body.skin-okkult .p-cta { min-height: 52px; align-items: center; } body.skin-horror .p-foot-links button, body.skin-horror .p-foot-links a, body.skin-noir .p-foot-links button, body.skin-noir .p-foot-links a, body.skin-okkult .p-foot-links button, body.skin-okkult .p-foot-links a { min-height: 44px; display: inline-flex; align-items: center; } body.skin-horror .p-bonus-link, body.skin-noir .p-bonus-link, body.skin-okkult .p-bonus-link { min-height: 44px; } body.skin-horror .p-bonus-body .p-bonus-btn, body.skin-noir .p-bonus-body .p-bonus-btn, body.skin-okkult .p-bonus-body .p-bonus-btn { min-height: 44px; display: inline-flex; align-items: center; } } @media (prefers-reduced-motion: reduce) { body.skin-horror .p-cta:hover, body.skin-noir .p-cta:hover, body.skin-okkult .p-cta:hover { transform: none; } body.skin-horror .p-video-wrap::before, body.skin-horror .p-audio-wrap::before { transition: none; } }