/* ============================================================ Kampagnen-Skins, Teil 5: Neuronal, Hologramm, Arcade. Drei Vorlagen, jede in zwei vollwertigen Fassungen. Der Modus steht als data-mode an UND an , deshalb ist jede modusabhaengige Regel doppelt geschrieben. Bauweise wie in den anderen Teilen: der Modus setzt nur Farb- Variablen (--p-* und die skin-eigenen --sk-*), die Bausteine darunter arbeiten ausschliesslich mit diesen Variablen. So existiert keine Farbe je nur in einem Zweig. --p-accent ist die Farbwahl des Kunden und bleibt stehen. Ausnahmen mit Begruendung: Hologramm (Tuerkis) und Arcade (Magenta), siehe die jeweiligen Abschnitte. Deko: keine externen Quellen. Netz, Messleisten, Pegelbalken, Bildroehren-Zeilen und Joystick sind CSS-Verlaeufe oder Inline-SVG als data-URI. ============================================================ */ /* ------------------------------------------------------------ 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-neuronal .p-bonus-stack, body.skin-hologramm .p-bonus-stack, body.skin-arcade .p-bonus-stack { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; overflow: visible; } body.skin-neuronal .p-bonus-stack::before, body.skin-hologramm .p-bonus-stack::before, body.skin-arcade .p-bonus-stack::before { display: none; } /* Lesbarer Kundenton im Bonus-Block des Netzes. Der zentrale --p-accent-ink mischt 58 Prozent Kundenfarbe unter die Schrift. Auf dem hellen Netz reicht das nicht: der Block hat keine eigene Flaeche, die Kennzeile steht direkt auf dem Violett der Seite, und ein gelber Kundenton faellt dort auf 2.92:1, Gold auf 3.78:1. Mit einem guten Drittel Kundenfarbe bleibt der Ton erkennbar und traegt in beiden Fassungen ueber alle Paletten mindestens 5.3:1. Die Mischung kippt mit dem Modus, weil --p-fg in beiden gesetzt ist. */ body.skin-neuronal { --sk-bonus-ton: color-mix(in srgb, var(--p-accent) 36%, var(--p-fg)); } /* ============================================================ 1) NEURONAL Ein verzweigtes Netz laeuft am linken und rechten Seitenrand nach innen und endet im Video: dem Ausgabe-Knoten. Sora fuer Ueberschriften und Zahlen, Inter fuer den Satz. --p-accent bleibt die Kundenfarbe: sie ist der Ton des Ausgabe-Knotens (Leuchtring, Play-Taste, letzte Countdown-Zahl). Das Violett des Netzes kommt aus --sk-netzfarbe und ist fest, damit die Vorlage bei jeder Kundenfarbe wiedererkennbar bleibt. ============================================================ */ body.skin-neuronal, [data-mode="dark"] body.skin-neuronal, body.skin-neuronal[data-mode="dark"] { --p-bg: #0A0916; --p-fg: #EDEAF9; --p-muted: #A79FD0; --p-card: #141030; --p-border: #3B2E7A; --sk-flaeche: linear-gradient(160deg, #17123A 0%, #0D0A22 100%); --sk-flaeche-fest: #17123A; --sk-panel: linear-gradient(120deg, #14103A 0%, #0C0A24 100%); --sk-label: #9A92CC; --sk-titel: #FFFFFF; --sk-violett: #7B5AE0; --sk-schirm: radial-gradient(circle at 50% 48%, #17123A 0%, #070613 76%); --sk-leiste: rgba(63, 216, 232, 0.07); --sk-schein: radial-gradient(ellipse 680px 520px at 50% 22%, rgba(27, 20, 66, 0.85) 0%, rgba(16, 12, 38, 0.5) 46%, rgba(10, 9, 22, 0) 100%); --sk-netz-deckung: 0.7; /* Das Netz als Inline-SVG. Es liegt hinter allem und wird zur Seitenmitte hin ausgeblendet, damit keine Linie eine Textzeile kreuzt. Rechts wird dasselbe Bild gespiegelt gesetzt. */ --sk-netz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 830'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cg stroke='%235B3FBF' stroke-width='1.4' opacity='.75'%3E%3Cpath d='M50 120Q95 140 140 180M50 120Q95 210 140 320M50 250Q95 205 140 180M50 250Q95 285 140 320M50 380Q95 340 140 320M50 380Q95 420 140 460M50 510Q95 480 140 460M50 510Q95 550 140 600M50 640Q95 615 140 600M50 745Q95 690 140 600'/%3E%3C/g%3E%3Cg stroke='%237B5AE0' stroke-width='1.7' opacity='.85'%3E%3Cpath d='M140 180Q190 205 235 250M140 320Q190 275 235 250M140 320Q190 355 235 400M140 460Q190 425 235 400M140 460Q190 500 235 550M140 600Q190 580 235 550'/%3E%3C/g%3E%3Cg stroke='%233FD8E8' stroke-width='2.1' opacity='.9'%3E%3Cpath d='M235 250Q264 300 282 362M235 400Q262 428 282 462M235 550Q264 556 282 562'/%3E%3C/g%3E%3C/g%3E%3Cg fill='%231B1442' stroke='%236A4FD0' stroke-width='1.6'%3E%3Ccircle cx='50' cy='120' r='4.5'/%3E%3Ccircle cx='50' cy='250' r='4.5'/%3E%3Ccircle cx='50' cy='380' r='4.5'/%3E%3Ccircle cx='50' cy='510' r='4.5'/%3E%3Ccircle cx='50' cy='640' r='4.5'/%3E%3Ccircle cx='50' cy='745' r='4.5'/%3E%3Ccircle cx='140' cy='180' r='5.5'/%3E%3Ccircle cx='140' cy='320' r='5.5'/%3E%3Ccircle cx='140' cy='460' r='5.5'/%3E%3Ccircle cx='140' cy='600' r='5.5'/%3E%3C/g%3E%3Cg fill='%230F2E3A' stroke='%233FD8E8' stroke-width='2.2'%3E%3Ccircle cx='235' cy='250' r='8'/%3E%3Ccircle cx='235' cy='400' r='8'/%3E%3Ccircle cx='235' cy='550' r='8'/%3E%3C/g%3E%3C/svg%3E"); } /* Tagfassung: dasselbe Netz auf einer hellen Arbeitsflaeche. Auf Weiss traegt kein Leuchten, deshalb liegen die Linien hier kraeftiger und dunkler, und die Knoten sind gefuellt statt angestrahlt. */ [data-mode="light"] body.skin-neuronal, body.skin-neuronal[data-mode="light"] { --p-bg: #F5F3FC; --p-fg: #16122E; --p-muted: #5A5280; --p-card: #FFFFFF; --p-border: #D2C9EE; --sk-flaeche: linear-gradient(160deg, #FFFFFF 0%, #F2EEFC 100%); --sk-flaeche-fest: #FFFFFF; --sk-panel: linear-gradient(120deg, #FFFFFF 0%, #EFEAFB 100%); --sk-label: #5A5280; --sk-titel: #16122E; --sk-violett: #56309E; --sk-schirm: radial-gradient(circle at 50% 48%, #2A2258 0%, #100D26 76%); --sk-leiste: rgba(86, 48, 158, 0.08); --sk-schein: radial-gradient(ellipse 680px 520px at 50% 22%, rgba(214, 204, 246, 0.75) 0%, rgba(238, 233, 252, 0.45) 46%, rgba(245, 243, 252, 0) 100%); --sk-netz-deckung: 0.85; --sk-netz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 830'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cg stroke='%238C79C9' stroke-width='1.6'%3E%3Cpath d='M50 120Q95 140 140 180M50 120Q95 210 140 320M50 250Q95 205 140 180M50 250Q95 285 140 320M50 380Q95 340 140 320M50 380Q95 420 140 460M50 510Q95 480 140 460M50 510Q95 550 140 600M50 640Q95 615 140 600M50 745Q95 690 140 600'/%3E%3C/g%3E%3Cg stroke='%23684BC0' stroke-width='2'%3E%3Cpath d='M140 180Q190 205 235 250M140 320Q190 275 235 250M140 320Q190 355 235 400M140 460Q190 425 235 400M140 460Q190 500 235 550M140 600Q190 580 235 550'/%3E%3C/g%3E%3Cg stroke='%23146C82' stroke-width='2.4'%3E%3Cpath d='M235 250Q264 300 282 362M235 400Q262 428 282 462M235 550Q264 556 282 562'/%3E%3C/g%3E%3C/g%3E%3Cg fill='%23FFFFFF' stroke='%23684BC0' stroke-width='1.8'%3E%3Ccircle cx='50' cy='120' r='4.5'/%3E%3Ccircle cx='50' cy='250' r='4.5'/%3E%3Ccircle cx='50' cy='380' r='4.5'/%3E%3Ccircle cx='50' cy='510' r='4.5'/%3E%3Ccircle cx='50' cy='640' r='4.5'/%3E%3Ccircle cx='50' cy='745' r='4.5'/%3E%3Ccircle cx='140' cy='180' r='5.5'/%3E%3Ccircle cx='140' cy='320' r='5.5'/%3E%3Ccircle cx='140' cy='460' r='5.5'/%3E%3Ccircle cx='140' cy='600' r='5.5'/%3E%3C/g%3E%3Cg fill='%23146C82' stroke='%23146C82' stroke-width='2.2'%3E%3Ccircle cx='235' cy='250' r='8'/%3E%3Ccircle cx='235' cy='400' r='8'/%3E%3Ccircle cx='235' cy='550' r='8'/%3E%3C/g%3E%3C/svg%3E"); } body.skin-neuronal { position: relative; background-color: var(--p-bg); background-image: var(--sk-schein); background-repeat: no-repeat; background-position: center top; background-size: 100% 900px; color: var(--p-fg); font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; } body.skin-neuronal .p-empfehlung, body.skin-neuronal .p-wrap, body.skin-neuronal .p-foot { position: relative; z-index: 1; } body.skin-neuronal .p-wrap { --sk-spalte: 1180px; max-width: var(--sk-spalte); padding: 40px 40px 56px; } /* Die beiden Netz-Aeste. Sie haengen AUSSERHALB der Inhaltsspalte, je einer im linken und im rechten Rand: so kann keine Linie je eine Textzeile kreuzen, egal wie breit das Fenster ist. Ist der Rand schmaler als der Ast, laeuft dessen aeusseres Ende aus dem Bild, was zum Motiv passt. Zur Spalte hin blendet der Ast aus. Unter 1080 Pixeln bleibt kein Rand mehr uebrig, dort entfaellt die Zeichnung ganz. */ body.skin-neuronal .p-wrap::before, body.skin-neuronal .p-wrap::after { content: ""; position: absolute; top: 0; /* Breite ist der tatsaechlich freie Rand, hoechstens die volle Zeichnung. So steht nie etwas seitlich ueber, und die Seite bekommt keine waagerechte Bildlaufleiste. */ width: min(300px, max(0px, calc((100vw - 100% - 20px) / 2))); height: 830px; background-image: var(--sk-netz); background-repeat: no-repeat; background-position: right top; background-size: 300px 830px; opacity: var(--sk-netz-deckung); pointer-events: none; z-index: 0; -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 52%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 52%, rgba(0,0,0,0) 100%); } body.skin-neuronal .p-wrap::before { right: 100%; } body.skin-neuronal .p-wrap::after { left: 100%; transform: scaleX(-1); } @media (max-width: 1079px) { body.skin-neuronal .p-wrap::before, body.skin-neuronal .p-wrap::after { display: none; } } /* Kopfzeile: die Empfehlung als kleiner Knoten in einer Pille */ body.skin-neuronal .p-empfehlung { justify-content: center; font-size: 0.88rem; color: var(--p-muted); opacity: 1; margin-top: 34px; } body.skin-neuronal .p-empfehlung .p-empfehlung-avatar, body.skin-neuronal .p-empfehlung .p-empfehlung-foto { border-radius: 50%; background: var(--p-accent); color: var(--p-accent-fg); border: 0; font-family: Sora, 'Segoe UI', system-ui, sans-serif; font-weight: 700; } body.skin-neuronal .p-empfehlung .p-empfehlung-text b { color: var(--sk-titel); font-weight: 600; } /* Ueberschrift in der Mitte des Netzes. Der Kindschafts-Selektor ist Absicht: die Seite setzt fuer die Zeile direkt unter der Empfehlung ein eigenes padding-top, das sonst gewinnt. */ body.skin-neuronal .p-wrap > .p-hero { text-align: center; padding-top: 26px; margin-top: 0; margin-bottom: 8px; } body.skin-neuronal .p-hero h1 { font-family: Sora, 'Segoe UI', system-ui, sans-serif; font-weight: 700; font-size: clamp(2.2rem, 5.6vw, 3.9rem); line-height: 1.06; letter-spacing: -0.03em; color: var(--sk-titel); max-width: 18ch; margin-inline: auto; } body.skin-neuronal .p-sub { font-size: 1.06rem; line-height: 1.68; color: var(--p-muted); max-width: 54ch; margin: 18px auto 0; text-align: center; } /* Der Ausgabe-Knoten: das Video mit Leuchthof und Kopfleiste. Die Kopfleiste ist die vorhandene Zeile „Video ansehen", sie steht ohnehin genau ueber dem Bild. Am Bild selbst haengt nur der Rahmen, deshalb bleibt dort overflow: hidden stehen. */ body.skin-neuronal .p-video, body.skin-neuronal .p-audio { position: relative; margin: 42px auto 34px; max-width: 860px; background: transparent; border: 0; padding: 0; } body.skin-neuronal .p-video::before, body.skin-neuronal .p-audio::before { content: ""; position: absolute; inset: -60px -50px -40px; background: radial-gradient(ellipse at 50% 55%, color-mix(in srgb, var(--p-accent) 20%, transparent) 0%, transparent 68%); pointer-events: none; z-index: 0; animation: skNeuroAtem 6.5s ease-in-out infinite; } /* Ein einziges ruhig atmendes Element je Vorlage, und es liegt ausserhalb des Fliesstexts. */ @keyframes skNeuroAtem { 0%, 100% { opacity: 0.72; transform: scale(0.985); } 50% { opacity: 1; transform: scale(1.015); } } body.skin-neuronal .p-video > *, body.skin-neuronal .p-audio > * { position: relative; z-index: 1; } body.skin-neuronal .p-audio-label { justify-content: flex-start; gap: 10px; margin-bottom: 0; padding: 10px 16px; background: var(--sk-leiste); border: 1px solid color-mix(in srgb, var(--p-accent) 35%, var(--p-border)); border-bottom: 0; border-radius: 16px 16px 0 0; font-family: Sora, 'Segoe UI', system-ui, sans-serif; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--p-accent-ink, var(--p-accent)); } body.skin-neuronal .p-audio-label::after { content: "Ausgabe-Knoten"; margin-left: auto; letter-spacing: 0.16em; color: var(--sk-label); } body.skin-neuronal .p-video-wrap, body.skin-neuronal .p-audio-wrap { margin-top: 0; border: 1px solid color-mix(in srgb, var(--p-accent) 62%, var(--p-border)); border-radius: 0 0 16px 16px; background: var(--sk-schirm); box-shadow: 0 0 0 8px color-mix(in srgb, var(--p-accent) 7%, transparent), 0 0 90px color-mix(in srgb, var(--sk-violett) 34%, transparent); } body.skin-neuronal .p-video-wrap::after { border-radius: 0 0 16px 16px; } body.skin-neuronal .p-video-play .p-video-play-core { width: 92px; height: 92px; background: var(--p-accent); color: var(--p-accent-fg); border: 0; box-shadow: 0 0 60px color-mix(in srgb, var(--p-accent) 50%, transparent); } body.skin-neuronal .p-video-play .p-video-play-hint { font-family: Sora, 'Segoe UI', system-ui, sans-serif; font-size: 0.72rem; letter-spacing: 0.18em; color: #FFFFFF; } /* Der Satz laeuft wie im Entwurf zweispaltig, ab Notebook-Breite */ body.skin-neuronal .p-body { font-size: 1.02rem; line-height: 1.85; color: var(--p-fg); max-width: 900px; margin-inline: auto; } @media (min-width: 900px) { body.skin-neuronal .p-body { columns: 2; column-gap: 40px; } body.skin-neuronal .p-body img, body.skin-neuronal .p-body blockquote, body.skin-neuronal .p-body table { break-inside: avoid; } } body.skin-neuronal .p-body p:first-of-type { color: var(--sk-titel); } /* Fenster und Zugang in einem Kasten: Frist links, Button rechts */ body.skin-neuronal .p-cta-block { margin-top: 36px; padding: 26px 30px 28px; background: var(--sk-panel); border: 1px solid color-mix(in srgb, var(--p-accent) 55%, var(--p-border)); border-radius: 16px; box-shadow: 0 0 70px color-mix(in srgb, var(--p-accent) 12%, transparent); display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; } body.skin-neuronal .p-countdown { background: transparent; border: 0; padding: 0; margin: 0; max-width: none; flex: 1 1 300px; } body.skin-neuronal .p-countdown .p-countdown-label { font-family: Sora, 'Segoe UI', system-ui, sans-serif; font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sk-label); text-align: left; margin-bottom: 10px; } body.skin-neuronal .p-countdown .p-countdown-grid { justify-content: flex-start; margin: 0; gap: 18px; } body.skin-neuronal .p-countdown-box .p-cd-flip { background: transparent; box-shadow: none; aspect-ratio: auto; border-radius: 0; } body.skin-neuronal .p-countdown-box .p-cd-flip::before, body.skin-neuronal .p-countdown-box .p-cd-flip::after { display: none; } body.skin-neuronal .p-countdown-box .p-cd-flip .p-cd-num { font-family: Sora, 'Segoe UI', system-ui, sans-serif; font-weight: 700; font-size: clamp(1.9rem, 5.6vw, 2.5rem); color: var(--sk-titel); text-shadow: none; font-variant-numeric: tabular-nums; } body.skin-neuronal .p-countdown-box:last-child .p-cd-flip .p-cd-num { color: var(--p-accent-ink, var(--p-accent)); } body.skin-neuronal .p-countdown-box .p-cd-unit { font-family: Sora, 'Segoe UI', system-ui, sans-serif; font-size: 0.7rem; letter-spacing: 0.1em; color: var(--sk-label); font-weight: 400; } body.skin-neuronal .p-cd-bartext, body.skin-neuronal .p-cd-minimaltext, body.skin-neuronal .p-cd-sep, body.skin-neuronal .p-cd-unit-inline { color: var(--p-fg); } body.skin-neuronal .p-cta-wrap { flex: 0 1 auto; text-align: right; margin-top: 0; } body.skin-neuronal .p-cta { margin-top: 0; background: linear-gradient(100deg, var(--p-accent) 0%, var(--sk-violett) 100%); color: var(--p-accent-fg); font-family: Sora, 'Segoe UI', system-ui, sans-serif; font-weight: 700; border-radius: 10px; box-shadow: 0 0 44px color-mix(in srgb, var(--p-accent) 32%, transparent); } body.skin-neuronal .p-cta:hover { transform: translateY(-2px); box-shadow: 0 0 58px color-mix(in srgb, var(--p-accent) 45%, transparent); } /* Aktivierte Knoten: die Boni als Karten mit Knotenring */ body.skin-neuronal .p-bonus-stack { margin-top: 44px; } body.skin-neuronal .p-bonus-stack-eyebrow { font-family: Sora, 'Segoe UI', system-ui, sans-serif; font-size: 0.76rem; letter-spacing: 0.22em; color: var(--sk-bonus-ton); -webkit-text-fill-color: var(--sk-bonus-ton); opacity: 1; } body.skin-neuronal .p-bonus-stack-title { font-family: Sora, 'Segoe UI', system-ui, sans-serif; font-weight: 600; font-size: clamp(1.5rem, 3.2vw, 2rem); color: var(--sk-titel); } body.skin-neuronal .p-bonus-stack-title em, body.skin-neuronal .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-neuronal .p-bonus-stack-gift { display: none; } body.skin-neuronal .p-bonus-stack-divider { background: var(--sk-violett); height: 2px; width: 46px; } body.skin-neuronal .p-bonus-stack-list { gap: 18px; } body.skin-neuronal .p-bonus-link { position: relative; background: var(--sk-flaeche); border: 1px solid var(--p-border); border-radius: 14px; padding: 20px 22px; } body.skin-neuronal .p-bonus-link::after { display: none; } body.skin-neuronal .p-bonus-link:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--p-accent) 60%, var(--p-border)); box-shadow: 0 0 40px color-mix(in srgb, var(--sk-violett) 26%, transparent); } body.skin-neuronal .p-bonus-stack .p-bonus-cover-wrap { border-radius: 12px; border: 1px solid var(--p-border); background: var(--sk-flaeche-fest); box-shadow: 0 0 0 5px color-mix(in srgb, var(--p-accent) 8%, transparent); } body.skin-neuronal .p-bonus-stack .p-bonus-typebadge { background: var(--sk-flaeche-fest); color: var(--p-fg); border: 1px solid var(--p-border); border-radius: 999px; } body.skin-neuronal .p-bonus-body .p-bonus-title { font-family: Sora, 'Segoe UI', system-ui, sans-serif; font-weight: 600; font-size: 1.06rem; color: var(--sk-titel); } body.skin-neuronal .p-bonus-body .p-bonus-desc { color: var(--p-muted); opacity: 1; } body.skin-neuronal .p-bonus-body .p-bonus-value { background: transparent; color: var(--sk-bonus-ton); border: 1px solid color-mix(in srgb, var(--p-accent) 45%, var(--p-border)); border-radius: 999px; box-shadow: none; font-family: Sora, 'Segoe UI', system-ui, sans-serif; font-weight: 400; letter-spacing: 0.08em; } body.skin-neuronal .p-bonus-body .p-bonus-btn { background: transparent; color: var(--p-fg); border: 1px solid var(--p-border); border-radius: 8px; box-shadow: none; font-family: Sora, 'Segoe UI', system-ui, sans-serif; font-weight: 400; font-size: 0.84rem; letter-spacing: 0.06em; } body.skin-neuronal .p-bonus-link:hover .p-bonus-btn { transform: none; box-shadow: none; border-color: var(--p-accent); color: var(--p-accent-ink, var(--p-accent)); } body.skin-neuronal .p-foot { margin-top: 56px; border-top: 1px solid var(--p-border); padding-top: 26px; color: var(--p-muted); } body.skin-neuronal .p-foot-links button, body.skin-neuronal .p-foot-links a { color: var(--p-muted); font-size: 0.8rem; } body.skin-neuronal .p-foot-meta, body.skin-neuronal .p-foot-ki, body.skin-neuronal .p-foot-copy { color: var(--p-fg); } @media (prefers-reduced-motion: reduce) { body.skin-neuronal .p-video::before, body.skin-neuronal .p-audio::before { animation: none; opacity: 0.85; transform: none; } } @media (max-width: 860px) { body.skin-neuronal .p-cta-wrap { flex: 1 1 100%; text-align: center; } body.skin-neuronal .p-cta { display: flex; justify-content: center; width: 100%; } } @media (max-width: 640px) { body.skin-neuronal .p-wrap { padding: 24px 16px 40px; } body.skin-neuronal .p-video, body.skin-neuronal .p-audio { margin: 28px 0 26px; } body.skin-neuronal .p-video::before, body.skin-neuronal .p-audio::before { inset: -24px -18px -18px; } body.skin-neuronal .p-audio-label { font-size: 0.66rem; letter-spacing: 0.14em; padding: 9px 12px; } body.skin-neuronal .p-audio-label::after { letter-spacing: 0.1em; } body.skin-neuronal .p-cta-block { padding: 18px 16px 20px; gap: 18px; } body.skin-neuronal .p-countdown .p-countdown-grid { gap: 10px; } body.skin-neuronal .p-bonus-link { padding: 14px; } } /* ============================================================ 2) HOLOGRAMM Eine Projektion mit abgeschraegten Ecken, Eckmarken am Bild und Messleisten an den Seiten. Chakra Petch fuer Anzeigen und Zahlen, Inter fuer den Satz. Hier wird --p-accent gesetzt: das Tuerkis ist die Projektions- farbe. Ohne sie sind Eckmarken, Kanten und Messwerte nur noch Kaesten, die Vorlage waere nicht wiederzuerkennen. ============================================================ */ body.skin-hologramm, [data-mode="dark"] body.skin-hologramm, body.skin-hologramm[data-mode="dark"] { --p-bg: #030A16; --p-fg: #D7EFEC; --p-muted: #8FC3C0; --p-card: #091C2C; --p-border: #1E4A52; --p-accent: #4FE3D2; --p-accent-fg: #032019; --sk-panel: linear-gradient(140deg, rgba(10, 36, 56, 0.94) 0%, rgba(5, 20, 34, 0.9) 100%); --sk-panel-fest: #0A2438; --sk-panel-still: rgba(6, 22, 38, 0.9); --sk-kante: color-mix(in srgb, var(--p-accent) 55%, transparent); --sk-kante-stark: var(--p-accent); --sk-kante-staerke: 1px; --sk-label: #6FA3A2; --sk-titel: #FFFFFF; --sk-titel-schein: 0 0 34px rgba(79, 227, 210, 0.45); --sk-schirm: radial-gradient(ellipse at 50% 52%, rgba(79, 227, 210, 0.16) 0%, #04101E 72%); --sk-leiste: rgba(79, 227, 210, 0.09); --sk-schein: radial-gradient(ellipse 550px 450px at 50% 32%, rgba(79, 227, 210, 0.1) 0%, rgba(3, 10, 22, 0) 70%); --sk-saum-rot: rgba(255, 72, 150, 0.3); --sk-saum-blau: rgba(72, 168, 255, 0.3); --sk-marke-staerke: 2px; } /* Tagfassung: dieselbe Anzeige auf einer hellen Werkbank. Eine Projektion leuchtet auf Weiss nicht, also traegt hier die Linie: Kanten und Eckmarken werden dicker und dunkler, Leuchten und Schriftschein fallen weg. */ [data-mode="light"] body.skin-hologramm, body.skin-hologramm[data-mode="light"] { --p-bg: #E9F1F0; --p-fg: #0C2220; --p-muted: #3E5D5A; --p-card: #FFFFFF; --p-border: #9FBDB9; --p-accent: #0A6F66; --p-accent-fg: #FFFFFF; --sk-panel: linear-gradient(140deg, #FFFFFF 0%, #F2F8F7 100%); --sk-panel-fest: #FFFFFF; --sk-panel-still: #FFFFFF; --sk-kante: #0A6F66; --sk-kante-stark: #06413C; --sk-kante-staerke: 2px; --sk-label: #3E5D5A; --sk-titel: #06413C; --sk-titel-schein: none; --sk-schirm: radial-gradient(ellipse at 50% 52%, #17403C 0%, #08211F 72%); --sk-leiste: #DCEBE9; --sk-schein: none; --sk-saum-rot: rgba(180, 32, 92, 0.34); --sk-saum-blau: rgba(28, 84, 150, 0.34); --sk-marke-staerke: 3px; } /* Die abgeschraegte Ecke ist der Bauteil dieser Vorlage. Sie kommt in drei Groessen, damit grosse Flaechen und kleine Zeilen im gleichen Winkel geschnitten sind. */ body.skin-hologramm { --sk-fase-l: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px); --sk-fase-m: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); --sk-fase-s: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px); background-color: var(--p-bg); background-image: var(--sk-schein); background-repeat: no-repeat; background-position: center top; background-size: 100% 1000px; color: var(--p-fg); font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; } body.skin-hologramm .p-wrap { --sk-spalte: 1240px; max-width: var(--sk-spalte); position: relative; padding: 30px 40px 40px; } /* Messleisten links und rechts, rein aus Verlaeufen gezeichnet: Skala, Pegelbalken und ein Ring, der zu drei Vierteln gefuellt ist. Sie brauchen Platz, deshalb erscheinen sie erst ab 1200 Pixeln und die Spalte bekommt dann breitere Innenraender. */ body.skin-hologramm .p-wrap::before, body.skin-hologramm .p-wrap::after { display: none; content: ""; position: absolute; top: 92px; width: 124px; height: 520px; color: var(--sk-kante); pointer-events: none; background-repeat: no-repeat; } @media (min-width: 1200px) { body.skin-hologramm .p-wrap { padding-left: 176px; padding-right: 176px; } body.skin-hologramm .p-wrap::before, body.skin-hologramm .p-wrap::after { display: block; } body.skin-hologramm .p-wrap::before { left: 34px; background-image: repeating-linear-gradient(180deg, currentColor 0 1px, transparent 1px 26px), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-size: 16px 100%, 9px 12px, 9px 20px, 9px 28px, 9px 38px, 9px 30px, 9px 21px, 9px 13px; background-position: left top, left 26px bottom 300px, left 39px bottom 300px, left 52px bottom 300px, left 65px bottom 300px, left 78px bottom 300px, left 91px bottom 300px, left 104px bottom 300px; background-repeat: repeat-y, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; } body.skin-hologramm .p-wrap::after { right: 34px; /* Ring: der Kegel faerbt drei Viertel, die beiden Kreise darueber stanzen Mitte und Aussenkante frei, damit aus dem Quadrat eine Scheibe wird. */ background-image: radial-gradient(circle at 50% 50%, transparent 0 25px, var(--p-bg) 25px), radial-gradient(circle at 50% 50%, var(--p-bg) 0 18px, transparent 18px), conic-gradient(currentColor 0 75%, color-mix(in srgb, currentColor 22%, transparent) 75% 100%), repeating-linear-gradient(180deg, currentColor 0 1px, transparent 1px 26px); background-size: 78px 78px, 78px 78px, 78px 78px, 16px 100%; background-position: center 10px, center 10px, center 10px, right top; background-repeat: no-repeat, no-repeat, no-repeat, repeat-y; } } /* Kopfleiste der Anzeige */ body.skin-hologramm .p-empfehlung { justify-content: flex-start; max-width: var(--sk-spalte, 1240px); margin-inline: auto; padding-inline: 40px; margin-top: 30px; font-family: 'Chakra Petch', 'Roboto Condensed', system-ui, sans-serif; font-size: 0.86rem; letter-spacing: 0.06em; color: var(--p-muted); opacity: 1; } body.skin-hologramm .p-empfehlung::after { content: "Projektion aktiv"; margin-left: auto; font-size: 0.76rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--sk-label); } body.skin-hologramm .p-empfehlung .p-empfehlung-avatar, body.skin-hologramm .p-empfehlung .p-empfehlung-foto { border-radius: 50%; border: 1px solid var(--p-accent); background: color-mix(in srgb, var(--p-accent) 16%, transparent); color: var(--p-accent-ink, var(--p-accent)); font-family: 'Chakra Petch', 'Roboto Condensed', system-ui, sans-serif; font-weight: 700; } body.skin-hologramm .p-empfehlung .p-empfehlung-text b { color: var(--sk-titel); font-weight: 600; } /* Titel auf einer geschnittenen Flaeche. Kindschafts-Selektor wie bei Neuronal, sonst gewinnt das padding-top der Seite. */ body.skin-hologramm .p-wrap > .p-hero { position: relative; text-align: left; margin: 6px 0 20px; padding: 34px 38px 36px; background: var(--sk-kante); clip-path: var(--sk-fase-l); } body.skin-hologramm .p-wrap > .p-hero::before { content: ""; position: absolute; inset: var(--sk-kante-staerke); background: var(--sk-panel); clip-path: var(--sk-fase-l); z-index: 0; } body.skin-hologramm .p-wrap > .p-hero > * { position: relative; z-index: 1; } body.skin-hologramm .p-hero h1 { font-family: 'Chakra Petch', 'Roboto Condensed', system-ui, sans-serif; font-weight: 700; font-size: clamp(2.1rem, 5.4vw, 3.8rem); line-height: 1.04; letter-spacing: -0.01em; color: var(--sk-titel); text-shadow: var(--sk-titel-schein); } body.skin-hologramm .p-sub { margin: 16px 0 0; max-width: 58ch; font-size: 1.04rem; line-height: 1.7; color: var(--p-muted); } /* Projektionsflaeche: geschnittene Ecken, Eckmarken im Bild, und ein Farbsaum, der ueber die Kante hinaussteht. Der Saum liegt als drop-shadow am Element: eine Schlagschatten-Regel wuerde am Beschnitt abgeschnitten, ein Filter nicht. */ body.skin-hologramm .p-video, body.skin-hologramm .p-audio { background: transparent; border: 0; padding: 0; margin: 20px 0; } body.skin-hologramm .p-audio-label { padding: 10px 20px; margin-bottom: 8px; background: var(--sk-leiste); border: var(--sk-kante-staerke) solid var(--sk-kante); clip-path: var(--sk-fase-m); font-family: 'Chakra Petch', 'Roboto Condensed', system-ui, sans-serif; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--p-accent-ink, var(--p-accent)); } body.skin-hologramm .p-audio-label::after { content: "Projektionsfläche A"; margin-left: auto; color: var(--sk-label); letter-spacing: 0.14em; } body.skin-hologramm .p-video-wrap, body.skin-hologramm .p-audio-wrap { margin-top: 0; border: var(--sk-kante-staerke) solid var(--sk-kante-stark); border-radius: 0; background: var(--sk-schirm); clip-path: var(--sk-fase-l); box-shadow: none; filter: drop-shadow(-4px 5px 0 var(--sk-saum-rot)) drop-shadow(4px -5px 0 var(--sk-saum-blau)); } body.skin-hologramm .p-video-wrap::after { display: none; } /* Eckmarken, vier Winkel aus je zwei Strichen */ body.skin-hologramm .p-video-wrap::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; --sk-m: var(--p-accent); background-image: linear-gradient(var(--sk-m), var(--sk-m)), linear-gradient(var(--sk-m), var(--sk-m)), linear-gradient(var(--sk-m), var(--sk-m)), linear-gradient(var(--sk-m), var(--sk-m)), linear-gradient(var(--sk-m), var(--sk-m)), linear-gradient(var(--sk-m), var(--sk-m)), linear-gradient(var(--sk-m), var(--sk-m)), linear-gradient(var(--sk-m), var(--sk-m)); background-size: 24px var(--sk-marke-staerke), var(--sk-marke-staerke) 24px, 24px var(--sk-marke-staerke), var(--sk-marke-staerke) 24px, 24px var(--sk-marke-staerke), var(--sk-marke-staerke) 24px, 24px var(--sk-marke-staerke), var(--sk-marke-staerke) 24px; background-position: left 18px top 18px, left 18px top 18px, right 18px top 18px, right 18px top 18px, left 18px bottom 18px, left 18px bottom 18px, right 18px bottom 18px, right 18px bottom 18px; background-repeat: no-repeat; } body.skin-hologramm .p-video-play .p-video-play-core { width: 96px; height: 96px; background: color-mix(in srgb, var(--p-accent) 20%, transparent); border: 1px solid var(--p-accent); color: var(--p-accent); box-shadow: 0 0 56px color-mix(in srgb, var(--p-accent) 40%, transparent); } body.skin-hologramm .p-video-play .p-video-play-hint { font-family: 'Chakra Petch', 'Roboto Condensed', system-ui, sans-serif; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: #FFFFFF; } /* Bericht: geschnittene Flaeche, zweispaltig ab Notebook-Breite */ body.skin-hologramm .p-body { position: relative; margin: 20px 0 0; padding: 26px 30px 28px; max-width: none; background: var(--sk-kante); clip-path: var(--sk-fase-m); font-size: 1rem; line-height: 1.82; color: var(--p-fg); } body.skin-hologramm .p-body::before { content: ""; position: absolute; inset: var(--sk-kante-staerke); background: var(--sk-panel-still); clip-path: var(--sk-fase-m); z-index: 0; } body.skin-hologramm .p-body > * { position: relative; z-index: 1; } @media (min-width: 900px) { body.skin-hologramm .p-body { columns: 2; column-gap: 34px; } body.skin-hologramm .p-body img, body.skin-hologramm .p-body blockquote, body.skin-hologramm .p-body table { break-inside: avoid; } } /* Freigabe: Frist links, Button rechts, in einer geschnittenen Flaeche */ body.skin-hologramm .p-cta-block { position: relative; margin-top: 20px; padding: 26px 30px 28px; background: var(--sk-kante); clip-path: var(--sk-fase-l); display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; } body.skin-hologramm .p-cta-block::before { content: ""; position: absolute; inset: var(--sk-kante-staerke); background: var(--sk-panel); clip-path: var(--sk-fase-l); z-index: 0; } body.skin-hologramm .p-cta-block > * { position: relative; z-index: 1; } body.skin-hologramm .p-countdown { background: transparent; border: 0; padding: 0; margin: 0; max-width: none; flex: 1 1 300px; } body.skin-hologramm .p-countdown .p-countdown-label { font-family: 'Chakra Petch', 'Roboto Condensed', system-ui, sans-serif; font-size: 0.74rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--sk-label); text-align: left; margin-bottom: 10px; } body.skin-hologramm .p-countdown .p-countdown-grid { justify-content: flex-start; margin: 0; gap: 16px; } body.skin-hologramm .p-countdown-box .p-cd-flip { background: transparent; box-shadow: none; aspect-ratio: auto; border-radius: 0; } body.skin-hologramm .p-countdown-box .p-cd-flip::before, body.skin-hologramm .p-countdown-box .p-cd-flip::after { display: none; } body.skin-hologramm .p-countdown-box .p-cd-flip .p-cd-num { font-family: 'Chakra Petch', 'Roboto Condensed', system-ui, sans-serif; font-weight: 700; font-size: clamp(1.9rem, 5.6vw, 2.5rem); color: var(--sk-titel); text-shadow: var(--sk-titel-schein); font-variant-numeric: tabular-nums; } body.skin-hologramm .p-countdown-box:last-child .p-cd-flip .p-cd-num { color: var(--p-accent-ink, var(--p-accent)); } body.skin-hologramm .p-countdown-box .p-cd-unit { font-family: 'Chakra Petch', 'Roboto Condensed', system-ui, sans-serif; font-size: 0.72rem; letter-spacing: 0.1em; color: var(--sk-label); font-weight: 400; } body.skin-hologramm .p-cd-bartext, body.skin-hologramm .p-cd-minimaltext, body.skin-hologramm .p-cd-sep, body.skin-hologramm .p-cd-unit-inline { color: var(--p-fg); } body.skin-hologramm .p-cta-wrap { flex: 0 1 auto; text-align: right; margin-top: 0; } body.skin-hologramm .p-cta { margin-top: 0; background: var(--p-accent); color: var(--p-accent-fg); font-family: 'Chakra Petch', 'Roboto Condensed', system-ui, sans-serif; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 0; clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); box-shadow: none; } body.skin-hologramm .p-cta:hover { transform: translateY(-2px); box-shadow: none; } /* Abrufbare Datensaetze: die Boni als Zeilen mit Kennung */ body.skin-hologramm .p-bonus-stack { margin-top: 20px; } body.skin-hologramm .p-bonus-stack-eyebrow { font-family: 'Chakra Petch', 'Roboto Condensed', system-ui, sans-serif; font-size: 0.74rem; letter-spacing: 0.24em; color: var(--sk-label); opacity: 1; } body.skin-hologramm .p-bonus-stack-title { font-family: 'Chakra Petch', 'Roboto Condensed', system-ui, sans-serif; font-weight: 700; font-size: clamp(1.5rem, 3.2vw, 2rem); color: var(--sk-titel); } body.skin-hologramm .p-bonus-stack-title em, body.skin-hologramm .p-redeem-title em { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--p-accent-ink, var(--p-accent)); } body.skin-hologramm .p-bonus-stack-gift { display: none; } body.skin-hologramm .p-bonus-stack-divider { background: var(--p-accent); height: 2px; width: 40px; } body.skin-hologramm .p-bonus-stack-list { counter-reset: sk-datensatz; grid-template-columns: 1fr; gap: 12px; } body.skin-hologramm .p-bonus-card { counter-increment: sk-datensatz; } body.skin-hologramm .p-bonus-link { position: relative; background: var(--sk-panel-fest); border: var(--sk-kante-staerke) solid var(--sk-kante); border-radius: 0; clip-path: var(--sk-fase-m); padding: 16px 20px; grid-template-columns: 74px 78px 1fr; gap: 18px; align-items: center; } body.skin-hologramm .p-bonus-link::before { content: "DS-00" counter(sk-datensatz); font-family: 'Chakra Petch', 'Roboto Condensed', system-ui, sans-serif; font-size: 0.78rem; letter-spacing: 0.14em; color: var(--p-accent-ink, var(--p-accent)); } body.skin-hologramm .p-bonus-link::after { display: none; } body.skin-hologramm .p-bonus-link:hover { transform: none; box-shadow: none; border-color: var(--sk-kante-stark); background: color-mix(in srgb, var(--p-accent) 10%, var(--sk-panel-fest)); } body.skin-hologramm .p-bonus-stack .p-bonus-cover-wrap { width: 78px; height: 78px; border-radius: 0; border: 1px solid var(--p-border); background: var(--sk-panel-fest); box-shadow: none; clip-path: var(--sk-fase-s); } body.skin-hologramm .p-bonus-stack .p-bonus-typebadge { background: var(--p-accent); color: var(--p-accent-fg); border-radius: 0; border: 0; font-family: 'Chakra Petch', 'Roboto Condensed', system-ui, sans-serif; letter-spacing: 0.08em; } body.skin-hologramm .p-bonus-body .p-bonus-title { font-family: 'Chakra Petch', 'Roboto Condensed', system-ui, sans-serif; font-weight: 600; font-size: 1.06rem; color: var(--sk-titel); } body.skin-hologramm .p-bonus-body .p-bonus-desc { color: var(--p-muted); opacity: 1; } body.skin-hologramm .p-bonus-body .p-bonus-value { background: transparent; color: var(--p-accent-ink, var(--p-accent)); border: 1px solid var(--sk-kante); border-radius: 0; box-shadow: none; font-family: 'Chakra Petch', 'Roboto Condensed', system-ui, sans-serif; letter-spacing: 0.08em; } body.skin-hologramm .p-bonus-body .p-bonus-btn { background: transparent; color: var(--p-accent-ink, var(--p-accent)); border: 1px solid var(--sk-kante); border-radius: 0; box-shadow: none; font-family: 'Chakra Petch', 'Roboto Condensed', system-ui, sans-serif; font-weight: 600; letter-spacing: 0.08em; font-size: 0.84rem; } body.skin-hologramm .p-bonus-link:hover .p-bonus-btn { transform: none; box-shadow: none; background: var(--p-accent); color: var(--p-accent-fg); } body.skin-hologramm .p-foot { margin-top: 30px; border-top: 1px solid var(--p-border); padding-top: 20px; color: var(--p-muted); } body.skin-hologramm .p-foot-links button, body.skin-hologramm .p-foot-links a { color: var(--p-muted); font-size: 0.8rem; } body.skin-hologramm .p-foot-meta, body.skin-hologramm .p-foot-ki, body.skin-hologramm .p-foot-copy { color: var(--p-fg); } @media (max-width: 860px) { body.skin-hologramm .p-cta-wrap { flex: 1 1 100%; text-align: center; } body.skin-hologramm .p-cta { display: flex; justify-content: center; width: 100%; } } @media (max-width: 640px) { body.skin-hologramm .p-wrap { padding: 20px 16px 32px; } body.skin-hologramm .p-empfehlung { padding-inline: 16px; flex-wrap: wrap; gap: 8px; } body.skin-hologramm .p-empfehlung::after { letter-spacing: 0.16em; font-size: 0.7rem; } body.skin-hologramm .p-wrap > .p-hero { padding: 22px 20px 24px; } body.skin-hologramm .p-audio-label { font-size: 0.66rem; letter-spacing: 0.1em; padding: 9px 14px; } body.skin-hologramm .p-audio-label::after { display: none; } body.skin-hologramm .p-video-wrap::before { background-size: 16px 2px, 2px 16px, 16px 2px, 2px 16px, 16px 2px, 2px 16px, 16px 2px, 2px 16px; } body.skin-hologramm .p-body { padding: 18px 16px 20px; } body.skin-hologramm .p-cta-block { padding: 18px 16px 20px; gap: 18px; } body.skin-hologramm .p-countdown .p-countdown-grid { gap: 10px; } /* Die Kennung wandert ueber den Titel, sonst bleibt fuer den Text keine Zeile mehr uebrig. */ body.skin-hologramm .p-bonus-link { grid-template-columns: 62px 1fr; gap: 12px; padding: 14px; } body.skin-hologramm .p-bonus-link::before { grid-column: 1 / -1; } body.skin-hologramm .p-bonus-stack .p-bonus-cover-wrap { width: 62px; height: 62px; } } /* ============================================================ 3) ARCADE Ein Automat: Leuchtkasten oben, Bildroehre in der Mitte, Bedienfeld unten. Bungee fuer die grossen Zeilen, IBM Plex Sans fuer den Satz, Press Start 2P ausschliesslich fuer Ziffern. Auch hier wird --p-accent gesetzt: Magenta ist die Farbe des Leuchtkastens und der Automatenkante. Mit einem beliebigen Kundenton bliebe ein Kasten ohne Spielhalle uebrig. Press Start 2P hat keine brauchbaren Umlaute, deshalb steht sie NUR an den Countdown-Ziffern und nirgends im Satz. ============================================================ */ body.skin-arcade, [data-mode="dark"] body.skin-arcade, body.skin-arcade[data-mode="dark"] { --p-bg: #120725; --p-fg: #E8DFF7; --p-muted: #A797CE; --p-card: #150829; --p-border: #4B1E86; --p-accent: #FF2E88; --p-accent-fg: #FFFFFF; --sk-gehaeuse: linear-gradient(180deg, #33125E 0%, #240C46 100%); --sk-gehaeuse-kante: #4B1E86; --sk-marquee: linear-gradient(180deg, #FF2E88 0%, #C21A66 100%); --sk-marquee-fg: #FFFFFF; --sk-marquee-sub: #FFE3EF; --sk-marquee-schatten: 0 4px 0 #7C0F3E; --sk-gold: #FFD23F; --sk-gold-tief: #E2A80F; --sk-gold-kante: #FFF1C2; --sk-gold-sockel: #8A6400; --sk-mint: #3BF0C0; --sk-mint-fg: #05020C; --sk-tafel: #150829; --sk-tafel-fg: #E8DFF7; --sk-label: #A797CE; --sk-titel: #FFFFFF; --sk-dunkel: #2A1246; --sk-schirm: radial-gradient(ellipse at 50% 50%, #1E0B3C 0%, #05020C 78%); --sk-roehre-rand: #1D0B36; --sk-zeilen: rgba(255, 255, 255, 0.045); /* Gold und Mint als Schriftfarbe: im Dunkeln die vollen Toene. */ --sk-gold-text: #FFD23F; --sk-mint-text: #3BF0C0; } /* Tagfassung: derselbe Automat in einer hellen Halle. Der Kasten bleibt ein Kasten, aber Gehaeuse und Bedienfeld kippen ins Helle, der Leuchtkasten wird satter, damit Weiss darauf noch traegt. Die Bildroehre bleibt dunkel: ein Bildschirm ist dunkel, auch am Tag. */ [data-mode="light"] body.skin-arcade, body.skin-arcade[data-mode="light"] { --p-bg: #F1EAFA; --p-fg: #221039; --p-muted: #58407F; --p-card: #FFFFFF; --p-border: #B79AE0; --p-accent: #B01259; --p-accent-fg: #FFFFFF; --sk-gehaeuse: linear-gradient(180deg, #E4D6F7 0%, #D3C0EE 100%); --sk-gehaeuse-kante: #8B5FCB; --sk-marquee: linear-gradient(180deg, #C0135F 0%, #91104A 100%); --sk-marquee-fg: #FFFFFF; --sk-marquee-sub: #FFE3EF; --sk-marquee-schatten: 0 4px 0 #5E0730; --sk-gold: #F2B300; --sk-gold-tief: #C88E00; --sk-gold-kante: #FFE79A; --sk-gold-sockel: #7A5600; --sk-mint: #05745B; --sk-mint-fg: #FFFFFF; --sk-tafel: #FFFFFF; --sk-tafel-fg: #221039; --sk-label: #58407F; --sk-titel: #221039; --sk-dunkel: #221039; --sk-schirm: radial-gradient(ellipse at 50% 50%, #24104A 0%, #05020C 78%); --sk-roehre-rand: #6B49A8; --sk-zeilen: rgba(255, 255, 255, 0.05); /* Gold und Mint sind auf hellem Grund zu blass fuer Schrift, deshalb bekommen die beiden Schrift-Rollen am Tag einen dunkleren Ton. Flaechen behalten das helle Gold. */ --sk-gold-text: #8A5B00; --sk-mint-text: #05745B; } body.skin-arcade { background: var(--p-bg); color: var(--p-fg); font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; } /* Kopfzeile ueber dem Automaten: Spieler und Credits */ body.skin-arcade .p-empfehlung { justify-content: flex-start; max-width: var(--sk-spalte, 1200px); margin-inline: auto; padding-inline: 22px; margin-top: 28px; font-size: 0.88rem; color: var(--p-muted); opacity: 1; } body.skin-arcade .p-empfehlung::after { content: "Credits 01"; margin-left: auto; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--p-muted); } body.skin-arcade .p-empfehlung .p-empfehlung-avatar, body.skin-arcade .p-empfehlung .p-empfehlung-foto { border-radius: 0; background: var(--sk-gold); color: var(--sk-dunkel); border: 0; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 700; } body.skin-arcade .p-empfehlung .p-empfehlung-text b { color: var(--sk-titel); font-weight: 600; } /* Das Gehaeuse */ body.skin-arcade .p-wrap { --sk-spalte: 1200px; max-width: var(--sk-spalte); background: var(--sk-gehaeuse); border: 4px solid var(--sk-gehaeuse-kante); border-radius: 22px; padding: 22px 22px 26px; margin-top: 14px; margin-bottom: 24px; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.75); } /* Leuchtkasten oben. Kindschafts-Selektor wie bei den anderen beiden, sonst gewinnt das padding-top der Seite. */ body.skin-arcade .p-wrap > .p-hero { text-align: center; margin-top: 0; margin-bottom: 20px; padding: 22px 28px 24px; background: var(--sk-marquee); border: 4px solid var(--sk-gold); border-radius: 12px; box-shadow: 0 0 44px color-mix(in srgb, var(--p-accent) 34%, transparent); } body.skin-arcade .p-hero h1 { font-family: Bungee, Impact, 'Arial Black', sans-serif; font-weight: 400; font-size: clamp(1.9rem, 5.2vw, 3.5rem); line-height: 1.04; letter-spacing: 0.01em; color: var(--sk-marquee-fg); text-shadow: var(--sk-marquee-schatten); } body.skin-arcade .p-sub { margin: 14px auto 0; max-width: 46ch; font-size: 1.04rem; font-weight: 500; line-height: 1.6; color: var(--sk-marquee-sub); text-align: center; } /* Die Bildroehre */ body.skin-arcade .p-video, body.skin-arcade .p-audio { background: transparent; border: 0; padding: 0; margin: 20px 0; } body.skin-arcade .p-audio-label { justify-content: flex-start; margin-bottom: 10px; padding: 11px 18px; background: var(--sk-tafel); border: 3px solid var(--sk-gehaeuse-kante); border-radius: 10px; font-weight: 600; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sk-tafel-fg); } body.skin-arcade .p-audio-label::after { content: "Spiel 01"; margin-left: auto; color: var(--sk-mint-text, var(--p-muted)); letter-spacing: 0.14em; } body.skin-arcade .p-video-wrap, body.skin-arcade .p-audio-wrap { position: relative; margin-top: 0; background: var(--sk-schirm); border: 14px solid var(--sk-roehre-rand); border-radius: 46px / 34px; box-shadow: inset 0 0 0 2px var(--sk-gehaeuse-kante); } body.skin-arcade .p-video-wrap::after { display: none; } /* Bildroehren-Zeilen, sehr dezent, ueber dem Bild */ body.skin-arcade .p-video-wrap::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background-image: repeating-linear-gradient(180deg, var(--sk-zeilen) 0 1px, transparent 1px 4px); } body.skin-arcade .p-video-play .p-video-play-core { width: 100px; height: 100px; border-radius: 0; background: var(--sk-mint); color: var(--sk-mint-fg); border: 0; box-shadow: 0 0 0 6px #05020C, 0 0 0 10px var(--sk-mint), 0 0 60px rgba(59, 240, 192, 0.4); } body.skin-arcade .p-video-play .p-video-play-hint { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: 0.76rem; letter-spacing: 0.16em; color: #FFFFFF; } /* Anleitung im Bedienfeld */ body.skin-arcade .p-body { margin: 20px 0 0; padding: 22px 24px 24px; max-width: none; background: var(--sk-tafel); border: 3px solid var(--sk-gehaeuse-kante); border-radius: 12px; font-size: 1rem; line-height: 1.8; color: var(--sk-tafel-fg); } @media (min-width: 900px) { body.skin-arcade .p-body { columns: 2; column-gap: 26px; } body.skin-arcade .p-body img, body.skin-arcade .p-body blockquote, body.skin-arcade .p-body table { break-inside: avoid; } } /* Restzeit und Einwurf. Der Joystick steht als Zeichnung links im Feld und weicht, sobald daneben kein Platz mehr ist. */ body.skin-arcade .p-cta-block { margin-top: 20px; padding: 20px 24px 22px; background: var(--sk-tafel); border: 3px solid var(--p-accent); border-radius: 12px; display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; background-repeat: no-repeat; background-position: left 20px center; } @media (min-width: 900px) { body.skin-arcade .p-cta-block { padding-left: 160px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 86 96' width='86' height='96'%3E%3Cellipse cx='43' cy='82' rx='30' ry='11' fill='%230F0620'/%3E%3Cellipse cx='43' cy='78' rx='30' ry='11' fill='%233A1668' stroke='%235D2AA3' stroke-width='2'/%3E%3Crect x='38' y='34' width='10' height='44' rx='5' fill='%23C9C4D8'/%3E%3Ccircle cx='43' cy='26' r='21' fill='%23FF2E88'/%3E%3Ccircle cx='36' cy='19' r='7' fill='%23FF7FB5'/%3E%3C/svg%3E"); } } body.skin-arcade .p-countdown { background: transparent; border: 0; padding: 0; margin: 0; max-width: none; flex: 1 1 260px; } body.skin-arcade .p-countdown .p-countdown-label { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: 0.76rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sk-label); text-align: left; margin-bottom: 10px; } body.skin-arcade .p-countdown .p-countdown-grid { justify-content: flex-start; margin: 0; gap: 16px; } body.skin-arcade .p-countdown-box .p-cd-flip { background: transparent; box-shadow: none; aspect-ratio: auto; border-radius: 0; } body.skin-arcade .p-countdown-box .p-cd-flip::before, body.skin-arcade .p-countdown-box .p-cd-flip::after { display: none; } /* Nur hier steht die Pixelschrift: reine Ziffern. */ body.skin-arcade .p-countdown-box .p-cd-flip .p-cd-num { font-family: 'Press Start 2P', ui-monospace, SFMono-Regular, monospace; font-weight: 400; font-size: clamp(1.1rem, 3.6vw, 1.6rem); line-height: 1.5; color: var(--sk-tafel-fg); text-shadow: none; } body.skin-arcade .p-countdown-box:last-child .p-cd-flip .p-cd-num { color: var(--p-accent-ink, var(--p-accent)); } body.skin-arcade .p-countdown-box .p-cd-unit { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; color: var(--sk-label); } body.skin-arcade .p-cd-bartext, body.skin-arcade .p-cd-minimaltext, body.skin-arcade .p-cd-sep, body.skin-arcade .p-cd-unit-inline { color: var(--sk-tafel-fg); } body.skin-arcade .p-countdown-expired { color: var(--sk-tafel-fg); } /* Der Button ist der Einwurfschlitz: Muenze rein, Spiel laeuft */ body.skin-arcade .p-cta-wrap { flex: 0 1 auto; text-align: right; margin-top: 0; } body.skin-arcade .p-cta { margin-top: 0; gap: 16px; background: linear-gradient(180deg, var(--sk-gold) 0%, var(--sk-gold-tief) 100%); color: var(--sk-dunkel); border: 3px solid var(--sk-gold-kante); border-radius: 8px; font-family: Bungee, Impact, 'Arial Black', sans-serif; font-weight: 400; letter-spacing: 0.04em; box-shadow: 0 6px 0 var(--sk-gold-sockel); } body.skin-arcade .p-cta .p-cta-label::before { content: ""; display: inline-block; vertical-align: middle; width: 10px; height: 30px; margin-right: 16px; border-radius: 3px; background: var(--sk-dunkel); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8); } body.skin-arcade .p-cta:hover { transform: translateY(2px); box-shadow: 0 4px 0 var(--sk-gold-sockel); } /* Eingesammelt: die Boni als Extras */ body.skin-arcade .p-bonus-stack { margin-top: 20px; } body.skin-arcade .p-bonus-stack-eyebrow { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: 0.78rem; letter-spacing: 0.2em; color: var(--sk-mint-text, var(--p-muted)); opacity: 1; } /* Die Kennzeile hat keine eigene Flaeche unter sich: der Bonus-Block ist durchsichtig, sie steht direkt auf dem Gehaeuse-Verlauf der Seite. In der Tagfassung endet der bei #D3C0EE, und das Mint der Vorlage kommt dort nur auf 3.43:1. Fuer die Kennzeile wird es deshalb abgedunkelt, der Farbton bleibt derselbe. Auf dem hellsten wie auf dem dunkelsten Punkt des Verlaufs sind es damit ueber 5:1. */ [data-mode="light"] body.skin-arcade .p-bonus-stack-eyebrow, body.skin-arcade[data-mode="light"] .p-bonus-stack-eyebrow { color: #04553F; -webkit-text-fill-color: #04553F; } body.skin-arcade .p-bonus-stack-title { font-family: Bungee, Impact, 'Arial Black', sans-serif; font-weight: 400; font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.16; color: var(--sk-titel); } body.skin-arcade .p-bonus-stack-title em, body.skin-arcade .p-redeem-title em { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--p-accent-ink, var(--p-accent)); } body.skin-arcade .p-bonus-stack-gift { display: none; } body.skin-arcade .p-bonus-stack-divider { background: var(--sk-gold); height: 4px; width: 52px; border-radius: 2px; } body.skin-arcade .p-bonus-stack-list { gap: 14px; } body.skin-arcade .p-bonus-link { background: var(--sk-tafel); border: 3px solid var(--sk-gehaeuse-kante); border-radius: 10px; padding: 14px 16px; } body.skin-arcade .p-bonus-link::after { display: none; } body.skin-arcade .p-bonus-link:hover { transform: translateY(-3px); border-color: var(--p-accent); box-shadow: 0 6px 0 color-mix(in srgb, var(--p-accent) 45%, transparent); } body.skin-arcade .p-bonus-stack .p-bonus-cover-wrap { border-radius: 6px; border: 3px solid var(--sk-gehaeuse-kante); background: var(--p-bg); box-shadow: none; } body.skin-arcade .p-bonus-stack .p-bonus-typebadge { background: var(--sk-gold); color: var(--sk-dunkel); border: 0; border-radius: 4px; font-weight: 700; } body.skin-arcade .p-bonus-body .p-bonus-title { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: 1rem; line-height: 1.3; color: var(--sk-titel); } body.skin-arcade .p-bonus-body .p-bonus-desc { color: var(--p-muted); opacity: 1; } body.skin-arcade .p-bonus-body .p-bonus-value { background: transparent; color: var(--sk-gold-text, var(--sk-gold)); border: 2px solid var(--sk-gold-text, var(--sk-gold)); border-radius: 4px; box-shadow: none; font-weight: 700; letter-spacing: 0.06em; } body.skin-arcade .p-bonus-body .p-bonus-btn { background: var(--sk-mint); color: var(--sk-mint-fg); border: 0; border-radius: 6px; box-shadow: 0 4px 0 color-mix(in srgb, var(--sk-mint) 55%, #000); font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 700; letter-spacing: 0.06em; font-size: 0.84rem; } body.skin-arcade .p-bonus-link:hover .p-bonus-btn { transform: translateY(2px); box-shadow: 0 2px 0 color-mix(in srgb, var(--sk-mint) 55%, #000); } body.skin-arcade .p-foot { margin-top: 24px; border-top: 0; padding-top: 4px; color: var(--p-muted); } body.skin-arcade .p-foot-links button, body.skin-arcade .p-foot-links a { color: var(--p-muted); font-size: 0.8rem; } body.skin-arcade .p-foot-meta, body.skin-arcade .p-foot-ki, body.skin-arcade .p-foot-copy { color: var(--p-fg); } @media (max-width: 860px) { body.skin-arcade .p-cta-wrap { flex: 1 1 100%; text-align: center; } body.skin-arcade .p-cta { display: flex; justify-content: center; width: 100%; } } @media (max-width: 640px) { /* Das Gehaeuse wird schmaler: duennere Kante, kleinerer Radius, weniger Innenrand. Sonst frisst der Automat die Seite auf. */ body.skin-arcade .p-wrap { border-width: 2px; border-radius: 14px; padding: 14px 12px 18px; margin-inline: 8px; } body.skin-arcade .p-empfehlung { padding-inline: 14px; flex-wrap: wrap; gap: 8px; } body.skin-arcade .p-wrap > .p-hero { padding: 16px 14px 18px; border-width: 3px; } body.skin-arcade .p-audio-label { font-size: 0.7rem; letter-spacing: 0.08em; padding: 10px 12px; } body.skin-arcade .p-video-wrap, body.skin-arcade .p-audio-wrap { border-width: 8px; border-radius: 26px / 20px; } body.skin-arcade .p-body { padding: 16px 14px 18px; } body.skin-arcade .p-cta-block { padding: 16px 14px 18px; gap: 16px; } body.skin-arcade .p-countdown .p-countdown-grid { gap: 10px; } body.skin-arcade .p-countdown-box .p-cd-flip .p-cd-num { font-size: 1rem; } body.skin-arcade .p-bonus-link { padding: 12px; border-width: 2px; } } /* ============================================================ Gemeinsame Schlussregeln fuer alle drei Vorlagen ============================================================ */ /* Nichts darf seitlich aus der Seite laufen. */ body.skin-neuronal, body.skin-hologramm, body.skin-arcade { overflow-x: hidden; } /* Bedienflaechen bleiben auf dem Handy greifbar. */ @media (max-width: 640px) { body.skin-neuronal .p-cta, body.skin-hologramm .p-cta, body.skin-arcade .p-cta { min-height: 52px; align-items: center; } body.skin-neuronal .p-foot-links button, body.skin-neuronal .p-foot-links a, body.skin-hologramm .p-foot-links button, body.skin-hologramm .p-foot-links a, body.skin-arcade .p-foot-links button, body.skin-arcade .p-foot-links a { min-height: 44px; display: inline-flex; align-items: center; } body.skin-neuronal .p-bonus-link, body.skin-hologramm .p-bonus-link, body.skin-arcade .p-bonus-link { min-height: 44px; } body.skin-neuronal .p-bonus-btn, body.skin-hologramm .p-bonus-btn, body.skin-arcade .p-bonus-btn { min-height: 44px; display: inline-flex; align-items: center; } } @media (prefers-reduced-motion: reduce) { body.skin-neuronal .p-cta:hover, body.skin-hologramm .p-cta:hover, body.skin-arcade .p-cta:hover { transform: none; } body.skin-neuronal .p-bonus-link:hover, body.skin-arcade .p-bonus-link:hover { transform: none; } body.skin-arcade .p-bonus-link:hover .p-bonus-btn { transform: none; } }