/* ============================================================ Kampagnen-Skins, Teil 6: Comic, Manga, Anime. Drei gezeichnete 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-*), alle Bausteine darunter arbeiten ausschliesslich mit diesen Variablen. So existiert keine Farbe nur in einem Zweig. --p-accent ist normalerweise die Farbwahl des Kunden und bleibt stehen. Comic und Manga setzen sie, Begruendung steht jeweils im Kopf der Vorlage. Anime laesst sie unangetastet. Alle Muster (Halbton, Screentone, Speedlines, Wolken) sind CSS-Verlaeufe. Keine externen Quellen, keine Fremdbilder. ============================================================ */ /* ------------------------------------------------------------ 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-comic .p-bonus-stack, body.skin-manga .p-bonus-stack, body.skin-anime .p-bonus-stack { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; overflow: visible; } body.skin-comic .p-bonus-stack::before, body.skin-manga .p-bonus-stack::before, body.skin-anime .p-bonus-stack::before { display: none; } /* ============================================================ 1) COMIC Ein Heft: schwere Tuschrahmen um jedes Panel, Halbton-Raster, Erzaehlkasten in Gelb, Sprechblase mit Zipfel, Sammelkarten fuer die Boni. Bangers fuer die Schilder, Source Sans 3 fuer alles, was gelesen werden muss. Hier wird --p-accent gesetzt: das Heft lebt vom Dreiklang aus Signalrot, Gelb und Blau. Ein beliebiger Kundenton im Play- Button, in den Kartenkoepfen und unter dem Button loest den Heft-Eindruck auf. ============================================================ */ body.skin-comic, [data-mode="light"] body.skin-comic, body.skin-comic[data-mode="light"] { --p-bg: #E8DFC8; --p-fg: #1B1A1F; --p-muted: #4A4640; --p-card: #FFF6E2; --p-border: #1B1A1F; --p-accent: #D8262C; --p-accent-fg: #FFF6E2; --sk-linie: #1B1A1F; --sk-panel: #FFF6E2; --sk-gelb: #FFD91C; --sk-gelb-raster: #E0A800; --sk-blau: #2C6BD8; --sk-blau-raster: #0E3F91; --sk-held-fg: #FFF6E2; --sk-erz-fg: #1B1A1F; --sk-schirm: #131218; --sk-speed: rgba(27, 26, 31, 0.42); /* Die beiden dunklen Balken (Kopfleiste und Bonus-Kopf) drehen sich in der Nachtfassung um. Deshalb tragen sie eigene Farben statt der Panel-Toene, sonst stuende Gelb auf Creme. */ --sk-kopf-bg: #1B1A1F; --sk-kopf-fg: #FFF6E2; --sk-kopf-akzent: #FFD91C; --sk-schatten: 7px 7px 0 var(--sk-linie); } /* Nachtdruck: dasselbe Heft unter der Nachttischlampe. Die Tusche kehrt sich um, die Rahmen stehen jetzt hell auf dunklem Papier, Gelb und Blau werden gedaempft statt grell. */ [data-mode="dark"] body.skin-comic, body.skin-comic[data-mode="dark"] { --p-bg: #17161B; --p-fg: #F4ECDA; --p-muted: #B8AF9C; --p-card: #262430; --p-border: #F4ECDA; --p-accent: #FF5F52; --p-accent-fg: #2A0A06; --sk-linie: #F4ECDA; --sk-panel: #262430; --sk-gelb: #FFD54A; --sk-gelb-raster: #7A5C00; --sk-blau: #1D3C74; --sk-blau-raster: #0B1F44; --sk-held-fg: #FFF6E2; --sk-erz-fg: #17161B; --sk-schirm: #0A0A0D; --sk-speed: rgba(244, 236, 218, 0.42); --sk-kopf-bg: #F4ECDA; --sk-kopf-fg: #26242F; --sk-kopf-akzent: #9E2A22; --sk-schatten: 7px 7px 0 var(--sk-linie); } body.skin-comic { --sk-spalte: 1180px; --sk-rand: 40px; background: var(--p-bg); color: var(--p-fg); font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 400; } body.skin-comic .p-wrap { --sk-spalte: 1180px; max-width: var(--sk-spalte); padding: 26px var(--sk-rand) 48px; } /* Heft-Kopfleiste ueber der Seite */ body.skin-comic .p-empfehlung { max-width: var(--sk-spalte); margin-inline: auto; justify-content: space-between; background: var(--sk-kopf-bg); border: 4px solid var(--sk-kopf-bg); padding: 9px 18px; color: var(--sk-kopf-akzent); opacity: 1; font-family: Bangers, 'Source Sans 3', Impact, sans-serif; font-size: 1.12rem; letter-spacing: 0.06em; } body.skin-comic .p-empfehlung::after { content: "SONDERAUSGABE"; color: var(--sk-kopf-fg); font-size: 0.98rem; letter-spacing: 0.14em; } body.skin-comic .p-empfehlung .p-empfehlung-avatar, body.skin-comic .p-empfehlung .p-empfehlung-foto { flex-shrink: 0; border-radius: 50%; border: 0; background: var(--sk-kopf-akzent); color: var(--sk-kopf-bg); font-family: Bangers, 'Source Sans 3', Impact, sans-serif; font-size: 1.06rem; } body.skin-comic .p-empfehlung .p-empfehlung-text b { color: var(--sk-kopf-akzent); font-weight: 400; } body.skin-comic .p-empfehlung .p-empfehlung-satz { color: var(--sk-kopf-fg); } /* Titel-Panel: Blau mit Halbton, Schrift mit harter Tuschekante */ body.skin-comic .p-wrap > .p-hero { position: relative; text-align: left; margin: 18px 0 14px; padding: 28px 30px 32px; border: 5px solid var(--sk-linie); background-color: var(--sk-blau); background-image: radial-gradient(var(--sk-blau-raster) 2px, transparent 2.4px); background-size: 9px 9px; } body.skin-comic .p-hero h1 { font-family: Bangers, 'Source Sans 3', Impact, sans-serif; font-weight: 400; font-size: clamp(2.6rem, 7vw, 4.8rem); line-height: 0.96; letter-spacing: 0.015em; color: var(--sk-held-fg); text-shadow: 4px 4px 0 var(--sk-linie); } /* Untertitel als Sprechblase mit Zipfel */ body.skin-comic .p-sub { position: relative; display: block; max-width: 46ch; margin: 26px 0 14px; padding: 15px 20px; background: var(--sk-panel); border: 4px solid var(--sk-linie); border-radius: 22px; color: var(--p-fg); font-size: 1.06rem; font-weight: 600; line-height: 1.6; } body.skin-comic .p-sub::before, body.skin-comic .p-sub::after { content: ""; position: absolute; left: 34px; width: 0; height: 0; border-style: solid; } body.skin-comic .p-sub::before { bottom: -26px; border-width: 26px 20px 0 0; border-color: var(--sk-linie) transparent transparent transparent; } body.skin-comic .p-sub::after { bottom: -18px; border-width: 20px 14px 0 0; border-color: var(--sk-panel) transparent transparent transparent; } /* Splash-Panel: Video mit Bewegungslinien ausserhalb der Bildkante. .p-video bekommt einen eigenen Stapelkontext, damit die Linien hinter dem Bild, aber vor der Seite liegen. */ body.skin-comic .p-video, body.skin-comic .p-audio { position: relative; z-index: 0; background: transparent; border: 0; border-radius: 0; padding: 0; margin: 44px 0 40px; } body.skin-comic .p-audio-label { display: inline-flex; background: var(--sk-gelb); border: 3px solid var(--sk-linie); padding: 7px 13px; margin-bottom: 14px; color: var(--sk-erz-fg); font-family: Bangers, 'Source Sans 3', Impact, sans-serif; font-size: 1.02rem; letter-spacing: 0.06em; } body.skin-comic .p-video-wrap, body.skin-comic .p-audio-wrap { border: 5px solid var(--sk-linie); border-radius: 0; background: var(--sk-schirm); box-shadow: none; overflow: visible; } body.skin-comic .p-video-wrap::after { display: none; } body.skin-comic .p-video-wrap::before { content: ""; position: absolute; inset: -34px; z-index: -1; pointer-events: none; background: repeating-conic-gradient( from 0deg at 50% 50%, var(--sk-speed) 0deg 0.6deg, transparent 0.6deg 3.2deg ); } body.skin-comic .p-video-play .p-video-play-core { width: 112px; height: 112px; border-radius: 50%; background: var(--p-accent); color: var(--p-accent-fg); border: 5px solid var(--sk-linie); box-shadow: 6px 6px 0 var(--sk-linie); } body.skin-comic .p-video-play .p-video-play-hint, body.skin-comic .p-audio-play .p-audio-play-hint { font-family: Bangers, 'Source Sans 3', Impact, sans-serif; font-size: 1.05rem; letter-spacing: 0.08em; color: #FFF6E2; } /* Erzaehl-Panel: Papier mit Halbton in der Ecke */ body.skin-comic .p-body { position: relative; max-width: none; margin-inline: 0; padding: 26px 30px 28px; border: 5px solid var(--sk-linie); background-color: var(--sk-panel); background-image: radial-gradient(color-mix(in srgb, var(--p-accent) 34%, transparent) 2.4px, transparent 2.8px); background-size: 10px 10px; background-repeat: no-repeat; background-position: right -30px bottom -30px; color: var(--p-fg); font-size: 1.04rem; line-height: 1.78; } body.skin-comic .p-body::before { content: "WAS IM HEFT STEHT"; display: inline-block; margin-bottom: 14px; padding: 6px 12px; background: var(--sk-gelb); border: 3px solid var(--sk-linie); color: var(--sk-erz-fg); font-family: Bangers, 'Source Sans 3', Impact, sans-serif; font-size: 1rem; letter-spacing: 0.06em; } body.skin-comic .p-body p:first-of-type { font-weight: 600; } body.skin-comic .p-body blockquote { border-left: 5px solid var(--p-accent); color: var(--p-fg); font-style: normal; font-weight: 600; } /* Aktions-Panel: Frist und Button */ body.skin-comic .p-cta-block { margin-top: 22px; padding: 24px 26px 28px; border: 5px solid var(--sk-linie); background-color: var(--sk-blau); background-image: radial-gradient(var(--sk-blau-raster) 2.2px, transparent 2.6px); background-size: 9px 9px; color: var(--sk-held-fg); } body.skin-comic .p-countdown { background: transparent; border: 0; padding: 0; } body.skin-comic .p-countdown .p-countdown-label { font-family: Bangers, 'Source Sans 3', Impact, sans-serif; font-size: 1.04rem; letter-spacing: 0.14em; color: var(--sk-gelb); text-align: left; } body.skin-comic .p-countdown .p-countdown-grid { justify-content: flex-start; margin: 0; gap: 18px; } body.skin-comic .p-countdown-box .p-cd-flip { background: transparent; box-shadow: none; aspect-ratio: auto; border-radius: 0; } body.skin-comic .p-countdown-box .p-cd-flip::before, body.skin-comic .p-countdown-box .p-cd-flip::after { display: none; } body.skin-comic .p-countdown-box .p-cd-flip .p-cd-num { font-family: Bangers, 'Source Sans 3', Impact, sans-serif; font-weight: 400; font-size: clamp(2.2rem, 6vw, 3rem); color: var(--sk-held-fg); text-shadow: 3px 3px 0 var(--sk-linie); letter-spacing: 0.02em; } body.skin-comic .p-countdown-box:last-child .p-cd-flip .p-cd-num { color: var(--sk-gelb); } body.skin-comic .p-countdown-box .p-cd-unit { font-family: Bangers, 'Source Sans 3', Impact, sans-serif; font-size: 0.9rem; letter-spacing: 0.08em; color: var(--sk-held-fg); font-weight: 400; } body.skin-comic .p-cta-block .p-cd-sep, body.skin-comic .p-cta-block .p-cd-unit-inline, body.skin-comic .p-cta-block .p-cd-bartext, body.skin-comic .p-cta-block .p-cd-minimaltext, body.skin-comic .p-cta-block .p-countdown-expired { color: var(--sk-held-fg); } body.skin-comic .p-cta-wrap { text-align: left; margin-top: 22px; } body.skin-comic .p-cta { background: var(--sk-gelb); color: var(--sk-erz-fg); border: 4px solid var(--sk-panel); border-radius: 0; font-family: Bangers, 'Source Sans 3', Impact, sans-serif; font-weight: 400; font-size: 1.5rem; letter-spacing: 0.06em; padding: 14px 40px; box-shadow: 7px 7px 0 var(--p-accent); } body.skin-comic .p-cta:hover { transform: translate(2px, 2px); box-shadow: 5px 5px 0 var(--p-accent); } /* Die Boni als Sammelkarten. Das Raster bricht ueber minmax() von selbst auf eine Spalte um, sobald der Platz fehlt. */ body.skin-comic .p-bonus-stack { margin-top: 26px; } body.skin-comic .p-bonus-stack-head { padding: 14px 18px; background: var(--sk-kopf-bg); border: 4px solid var(--sk-kopf-bg); margin-bottom: 14px; } body.skin-comic .p-bonus-stack-eyebrow { color: var(--sk-kopf-akzent); opacity: 1; font-family: Bangers, 'Source Sans 3', Impact, sans-serif; font-size: 0.98rem; letter-spacing: 0.14em; font-weight: 400; } body.skin-comic .p-bonus-stack-title { font-family: Bangers, 'Source Sans 3', Impact, sans-serif; font-weight: 400; font-size: clamp(1.6rem, 3.4vw, 2.3rem); letter-spacing: 0.02em; /* Die zentrale Regel in kampagnen-skins.css setzt hier zusaetzlich -webkit-text-fill-color. Ohne Gegenwert bliebe die Schrift dunkel auf dem schwarzen Kopfbalken. */ color: var(--sk-kopf-fg); -webkit-text-fill-color: var(--sk-kopf-fg); } body.skin-comic .p-bonus-stack-title em { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--sk-kopf-akzent); -webkit-text-fill-color: var(--sk-kopf-akzent); } /* Die Einloese-Box liegt auf Papier, nicht auf dem Balken. */ body.skin-comic .p-redeem-title { font-family: Bangers, 'Source Sans 3', Impact, sans-serif; font-weight: 400; color: var(--p-fg); -webkit-text-fill-color: var(--p-fg); } body.skin-comic .p-redeem-title em { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--p-accent); -webkit-text-fill-color: var(--p-accent); } body.skin-comic .p-bonus-stack-gift { display: none; } body.skin-comic .p-bonus-stack-divider { background: var(--sk-kopf-akzent); height: 3px; width: 60px; } body.skin-comic .p-bonus-stack-list { counter-reset: sk-karte; grid-template-columns: repeat(auto-fit, minmax(min(100%, 296px), 1fr)); gap: 14px; } body.skin-comic .p-bonus-card { counter-increment: sk-karte; } body.skin-comic .p-bonus-link { background: var(--sk-panel); border: 5px solid var(--sk-linie); border-radius: 0; padding: 56px 16px 18px; grid-template-columns: 74px 1fr; gap: 14px; overflow: hidden; } /* Kartenkopf statt Leuchtschleier: ::after wird komplett neu belegt */ body.skin-comic .p-bonus-link::after { content: "SAMMELKARTE " counter(sk-karte); position: absolute; top: 0; left: 0; right: 0; bottom: auto; z-index: 2; opacity: 1; background: var(--p-accent); border-bottom: 4px solid var(--sk-linie); padding: 7px 14px; color: var(--p-accent-fg); font-family: Bangers, 'Source Sans 3', Impact, sans-serif; font-size: 1.02rem; letter-spacing: 0.08em; pointer-events: none; } body.skin-comic .p-bonus-link:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--sk-linie); border-color: var(--sk-linie); } body.skin-comic .p-bonus-stack .p-bonus-cover-wrap { width: 74px; height: 74px; border-radius: 0; border: 3px solid var(--sk-linie); background-color: var(--sk-gelb); background-image: radial-gradient(var(--sk-gelb-raster) 2.4px, transparent 2.8px); background-size: 10px 10px; box-shadow: none; } body.skin-comic .p-bonus-stack .p-bonus-typebadge { background: var(--sk-linie); color: var(--sk-panel); border: 0; border-radius: 0; font-family: Bangers, 'Source Sans 3', Impact, sans-serif; letter-spacing: 0.06em; } body.skin-comic .p-bonus-body .p-bonus-title { font-family: Bangers, 'Source Sans 3', Impact, sans-serif; font-weight: 400; font-size: 1.36rem; line-height: 1.12; letter-spacing: 0.02em; color: var(--p-fg); } body.skin-comic .p-bonus-body .p-bonus-desc { color: var(--p-muted); opacity: 1; font-size: 0.96rem; line-height: 1.55; } body.skin-comic .p-bonus-body .p-bonus-value { background: var(--sk-gelb); color: var(--sk-erz-fg); border: 3px solid var(--sk-linie); border-radius: 0; box-shadow: none; font-family: Bangers, 'Source Sans 3', Impact, sans-serif; letter-spacing: 0.06em; } body.skin-comic .p-bonus-body .p-bonus-btn { background: var(--sk-gelb); color: var(--sk-erz-fg); border: 3px solid var(--sk-linie); border-radius: 0; box-shadow: 4px 4px 0 var(--sk-linie); font-family: Bangers, 'Source Sans 3', Impact, sans-serif; font-weight: 400; font-size: 1.02rem; letter-spacing: 0.06em; } body.skin-comic .p-bonus-link:hover .p-bonus-btn { transform: none; box-shadow: 4px 4px 0 var(--sk-linie); } /* Impressum-Kasten des Hefts */ body.skin-comic .p-foot { margin-top: 24px; padding: 18px 22px 20px; border: 4px solid var(--sk-linie); border-radius: 0; background: var(--sk-panel); color: var(--p-muted); } body.skin-comic .p-foot-links button, body.skin-comic .p-foot-links a { color: var(--p-fg); font-weight: 600; opacity: 1; } body.skin-comic .p-foot-meta, body.skin-comic .p-foot-ki, body.skin-comic .p-foot-copy { color: var(--p-muted); } @media (max-width: 760px) { body.skin-comic { --sk-rand: 16px; } body.skin-comic .p-empfehlung { padding: 8px 14px; font-size: 0.98rem; gap: 10px; } body.skin-comic .p-empfehlung::after { display: none; } body.skin-comic .p-wrap > .p-hero { padding: 20px 18px 24px; border-width: 4px; } body.skin-comic .p-sub { padding: 13px 16px; font-size: 1rem; } body.skin-comic .p-video, body.skin-comic .p-audio { margin: 30px 0 28px; } body.skin-comic .p-video-wrap::before { inset: -14px; } body.skin-comic .p-video-play .p-video-play-core { width: 84px; height: 84px; border-width: 4px; } body.skin-comic .p-body { padding: 18px 16px 20px; border-width: 4px; font-size: 1rem; } body.skin-comic .p-cta-block { padding: 18px 16px 22px; border-width: 4px; } body.skin-comic .p-countdown .p-countdown-grid { gap: 10px; } body.skin-comic .p-cta-wrap { text-align: center; } body.skin-comic .p-cta { display: flex; justify-content: center; width: 100%; padding: 14px 18px; box-shadow: 5px 5px 0 var(--p-accent); } body.skin-comic .p-bonus-link { padding: 52px 14px 16px; grid-template-columns: 62px 1fr; gap: 12px; border-width: 4px; } body.skin-comic .p-bonus-stack .p-bonus-cover-wrap { width: 62px; height: 62px; } body.skin-comic .p-foot { padding: 16px; } } /* ============================================================ 2) MANGA Kapitelseite in Schwarzweiss: Panels mit dicker Kante, Screentone-Punkte, Speedlines um das Bild, ein leicht geneigtes Video und eine Randspalte fuer die Boni. Anton fuer die Schilder, Noto Sans fuer den Satz. Auch hier wird --p-accent gesetzt: das eine Rot ist in einer sonst schwarzweissen Seite das einzige Signal. Ein beliebiger Kundenton wuerde die Vorlage zu einer normalen bunten Seite machen. ============================================================ */ body.skin-manga, [data-mode="light"] body.skin-manga, body.skin-manga[data-mode="light"] { --p-bg: #F2F0EE; --p-fg: #0B0B0C; --p-muted: #4C4948; --p-card: #FFFFFF; --p-border: #0B0B0C; --p-accent: #D5182A; --p-accent-fg: #FFFFFF; --sk-linie: #0B0B0C; --sk-panel: #FFFFFF; --sk-flaeche-fg: #FFFFFF; --sk-ton: rgba(11, 11, 12, 0.28); --sk-ton-fein: rgba(11, 11, 12, 0.22); --sk-speed: #FFFFFF; --sk-schirm: #0B0B0C; --sk-rand-fg: #6E6B69; /* Die Schlussflaeche dreht sich in der Nachtfassung um. Sie bekommt deshalb eigene Farben, sonst stuende das Rot einmal auf Schwarz und einmal auf Creme und waere jedes Mal zu schwach. */ --sk-block-bg: #0B0B0C; --sk-block-fg: #F2F0EE; --sk-block-akzent: #FF6B72; } /* Nachtkapitel: dieselbe Seite als Negativdruck. Die Tuschekante steht hell auf schwarzem Papier, der Screentone wird zu feinem Lichtstaub. */ [data-mode="dark"] body.skin-manga, body.skin-manga[data-mode="dark"] { --p-bg: #0D0D0F; --p-fg: #EDEAE6; --p-muted: #B0ABA6; --p-card: #191A1D; --p-border: #EDEAE6; --p-accent: #FF4A57; --p-accent-fg: #1A0508; --sk-linie: #EDEAE6; --sk-panel: #191A1D; --sk-flaeche-fg: #EDEAE6; --sk-ton: rgba(237, 234, 230, 0.24); --sk-ton-fein: rgba(237, 234, 230, 0.18); --sk-speed: #EDEAE6; --sk-schirm: #050506; --sk-rand-fg: #9C9793; --sk-block-bg: #EDEAE6; --sk-block-fg: #141416; --sk-block-akzent: #B01623; } body.skin-manga { --sk-spalte: 1180px; --sk-rand: 44px; background: var(--p-bg); color: var(--p-fg); font-family: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 400; } body.skin-manga .p-wrap { --sk-spalte: 1180px; max-width: var(--sk-spalte); padding: 24px var(--sk-rand) 46px; } /* Kapitelzeile */ body.skin-manga .p-empfehlung { max-width: var(--sk-spalte); margin-inline: auto; justify-content: space-between; color: var(--p-muted); opacity: 1; font-size: 0.88rem; font-weight: 500; } body.skin-manga .p-empfehlung::after { content: "KAPITEL 01"; font-family: Anton, 'Noto Sans', Impact, sans-serif; font-size: 0.92rem; letter-spacing: 0.3em; color: var(--p-accent); } body.skin-manga .p-empfehlung .p-empfehlung-avatar, body.skin-manga .p-empfehlung .p-empfehlung-foto { flex-shrink: 0; border-radius: 50%; border: 0; background: var(--sk-linie); color: var(--p-bg); font-family: Anton, 'Noto Sans', Impact, sans-serif; font-size: 0.94rem; } body.skin-manga .p-empfehlung .p-empfehlung-text b { color: var(--p-fg); font-weight: 700; } /* Titel-Panel mit Screentone-Feld rechts */ body.skin-manga .p-wrap > .p-hero { position: relative; display: flex; flex-direction: column; align-items: flex-start; text-align: left; overflow: hidden; margin: 18px 0 18px; padding: 32px 34px 36px; border: 4px solid var(--sk-linie); background: var(--sk-panel); } body.skin-manga .p-hero::before { content: ""; position: absolute; top: 0; right: 0; width: 320px; height: 100%; background-image: radial-gradient(var(--sk-ton) 1.5px, transparent 1.8px); background-size: 6px 6px; pointer-events: none; } /* Szenen-Schild: liegt per order vor dem Titel, ohne Extra-Element */ body.skin-manga .p-hero::after { content: "SZENE 01"; order: -1; position: relative; display: inline-block; margin-bottom: 16px; padding: 6px 12px; background: var(--p-accent); color: var(--p-accent-fg); font-family: Anton, 'Noto Sans', Impact, sans-serif; font-size: 0.86rem; letter-spacing: 0.18em; } body.skin-manga .p-hero h1 { position: relative; font-family: Anton, 'Noto Sans', Impact, sans-serif; font-weight: 400; font-size: clamp(2.4rem, 7vw, 5rem); line-height: 0.94; letter-spacing: -0.01em; text-transform: uppercase; color: var(--p-fg); } body.skin-manga .p-sub { position: relative; max-width: 52ch; margin: 18px 0 0; font-size: 1.06rem; font-weight: 500; line-height: 1.68; color: var(--p-fg); text-align: left; } /* Bild-Panel: leicht geneigt, Speedlines laufen nach aussen. Die Neigung steht allein als rotate(), damit die zentrale Regel in kampagnen-skins.css sie beim Abspielen zurueckdrehen kann. Sie sitzt am Panel und nicht am Bildrahmen: ein transform am Rahmen wuerde einen eigenen Stapelkontext aufmachen und die Speedlines hinter der schwarzen Bildflaeche verschwinden lassen. */ body.skin-manga .p-video, body.skin-manga .p-audio { position: relative; z-index: 0; background: transparent; border: 0; border-radius: 0; padding: 0; margin: 40px 0 46px; transform: rotate(-1.5deg); } body.skin-manga .p-audio-label { display: inline-flex; background: var(--sk-linie); color: var(--p-bg); padding: 6px 12px; margin-bottom: 12px; font-family: Anton, 'Noto Sans', Impact, sans-serif; font-size: 0.84rem; letter-spacing: 0.22em; text-transform: uppercase; } body.skin-manga .p-video-wrap, body.skin-manga .p-audio-wrap { border: 4px solid var(--sk-linie); border-radius: 0; background: var(--sk-schirm); box-shadow: none; overflow: visible; } body.skin-manga .p-video-wrap::after { display: none; } body.skin-manga .p-video-wrap::before { content: ""; position: absolute; inset: -40px; z-index: -1; pointer-events: none; background: repeating-conic-gradient( from 0deg at 50% 50%, var(--sk-speed) 0deg 0.55deg, transparent 0.55deg 2.6deg ); opacity: 0.55; } body.skin-manga .p-video-play .p-video-play-core { width: 104px; height: 104px; border-radius: 50%; background: var(--sk-panel); color: var(--p-accent); border: 5px solid var(--sk-linie); box-shadow: none; } body.skin-manga .p-video-play .p-video-play-hint, body.skin-manga .p-audio-play .p-audio-play-hint { font-family: Anton, 'Noto Sans', Impact, sans-serif; font-size: 0.84rem; letter-spacing: 0.2em; text-transform: uppercase; color: #FFFFFF; } /* Text-Panel. Zwei Spalten ohne Trennlinie: eine senkrechte Linie quer durch den Satz liest sich auf einer Seite wie ein Fehler. */ body.skin-manga .p-body { position: relative; overflow: hidden; max-width: none; margin-inline: 0; padding: 26px 30px 28px; border: 4px solid var(--sk-linie); background: var(--sk-panel); color: var(--p-fg); font-size: 1.02rem; line-height: 1.8; } body.skin-manga .p-body::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 180px; height: 180px; border-radius: 50%; background-image: radial-gradient(var(--sk-ton-fein) 1.8px, transparent 2.1px); background-size: 7px 7px; pointer-events: none; } @media (min-width: 900px) { body.skin-manga .p-body { columns: 2; column-gap: 34px; } body.skin-manga .p-body img, body.skin-manga .p-body blockquote, body.skin-manga .p-body table { break-inside: avoid; } } body.skin-manga .p-body blockquote { border-left: 4px solid var(--p-accent); color: var(--p-fg); font-style: normal; font-weight: 700; } /* Schlussflaeche: gefuellter Block mit schraeg angeschnittener Oberkante. Gefuellt, nicht gerahmt, damit kein halber Rahmen entsteht. */ body.skin-manga .p-cta-block { position: relative; overflow: hidden; margin-top: 24px; padding: 52px 32px 32px; background-color: var(--sk-block-bg); background-image: radial-gradient(color-mix(in srgb, var(--sk-block-fg) 34%, transparent) 1.4px, transparent 1.7px); background-size: 9px 9px; color: var(--sk-block-fg); clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 100%); } body.skin-manga .p-countdown { background: transparent; border: 0; padding: 0; } body.skin-manga .p-countdown .p-countdown-label { font-family: Anton, 'Noto Sans', Impact, sans-serif; font-size: 0.84rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--sk-block-akzent); text-align: left; } body.skin-manga .p-countdown .p-countdown-grid { justify-content: flex-start; margin: 0; gap: 16px; } body.skin-manga .p-countdown-box .p-cd-flip { background: transparent; box-shadow: none; aspect-ratio: auto; border-radius: 0; } body.skin-manga .p-countdown-box .p-cd-flip::before, body.skin-manga .p-countdown-box .p-cd-flip::after { display: none; } body.skin-manga .p-countdown-box .p-cd-flip .p-cd-num { font-family: Anton, 'Noto Sans', Impact, sans-serif; font-weight: 400; font-size: clamp(2rem, 6vw, 2.9rem); line-height: 1; color: var(--sk-block-fg); text-shadow: none; } body.skin-manga .p-countdown-box:last-child .p-cd-flip .p-cd-num { color: var(--sk-block-akzent); } body.skin-manga .p-countdown-box .p-cd-unit { font-family: Anton, 'Noto Sans', Impact, sans-serif; font-size: 0.82rem; letter-spacing: 0.12em; color: var(--sk-block-fg); font-weight: 400; } body.skin-manga .p-cta-block .p-cd-sep, body.skin-manga .p-cta-block .p-cd-unit-inline, body.skin-manga .p-cta-block .p-cd-bartext, body.skin-manga .p-cta-block .p-cd-minimaltext, body.skin-manga .p-cta-block .p-countdown-expired { color: var(--sk-block-fg); } body.skin-manga .p-cta-wrap { text-align: left; margin-top: 22px; } body.skin-manga .p-cta { background: var(--p-accent); color: var(--p-accent-fg); border-radius: 0; font-family: Anton, 'Noto Sans', Impact, sans-serif; font-weight: 400; font-size: 1.32rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 16px 44px; box-shadow: none; } body.skin-manga .p-cta:hover { transform: translateY(-2px); box-shadow: none; } /* Randspalte: Kopf links, Karten rechts. Bricht unter 900 px von selbst auf eine Spalte um. */ body.skin-manga .p-bonus-stack { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 26px; align-items: start; margin-top: 40px; padding-top: 26px; border-top: 3px solid var(--sk-linie); } @media (max-width: 900px) { body.skin-manga .p-bonus-stack { grid-template-columns: minmax(0, 1fr); gap: 18px; } } body.skin-manga .p-bonus-stack-head { margin: 0; } body.skin-manga .p-bonus-stack-eyebrow { font-family: Anton, 'Noto Sans', Impact, sans-serif; font-size: 0.82rem; letter-spacing: 0.2em; color: var(--sk-rand-fg); opacity: 1; font-weight: 400; } body.skin-manga .p-bonus-stack-eyebrow::after { content: " · RANDNOTIZ"; } body.skin-manga .p-bonus-stack-title { font-family: Anton, 'Noto Sans', Impact, sans-serif; font-weight: 400; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.06; text-transform: uppercase; color: var(--p-fg); -webkit-text-fill-color: var(--p-fg); } body.skin-manga .p-bonus-stack-title em, body.skin-manga .p-redeem-title em { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--p-accent); -webkit-text-fill-color: var(--p-accent); } body.skin-manga .p-redeem-title { font-family: Anton, 'Noto Sans', Impact, sans-serif; font-weight: 400; color: var(--p-fg); -webkit-text-fill-color: var(--p-fg); } body.skin-manga .p-bonus-stack-gift { display: none; } body.skin-manga .p-bonus-stack-divider { background: var(--p-accent); height: 3px; width: 48px; } body.skin-manga .p-bonus-stack-list { grid-template-columns: minmax(0, 1fr); gap: 16px; } body.skin-manga .p-bonus-link { background: var(--sk-panel); border: 4px solid var(--sk-linie); border-radius: 0; padding: 16px; grid-template-columns: 78px 1fr; gap: 16px; align-items: center; } body.skin-manga .p-bonus-link::after { display: none; } body.skin-manga .p-bonus-link:hover { transform: none; box-shadow: none; background: color-mix(in srgb, var(--p-accent) 10%, var(--sk-panel)); } body.skin-manga .p-bonus-stack .p-bonus-cover-wrap { width: 78px; height: 78px; border-radius: 0; border: 0; background: var(--sk-linie); box-shadow: none; } body.skin-manga .p-bonus-stack .p-bonus-typebadge { background: var(--p-accent); color: var(--p-accent-fg); border: 0; border-radius: 0; font-family: Anton, 'Noto Sans', Impact, sans-serif; letter-spacing: 0.08em; } body.skin-manga .p-bonus-body .p-bonus-title { font-family: Anton, 'Noto Sans', Impact, sans-serif; font-weight: 400; font-size: 1.18rem; line-height: 1.16; color: var(--p-fg); } body.skin-manga .p-bonus-body .p-bonus-desc { color: var(--p-muted); opacity: 1; font-size: 0.95rem; line-height: 1.55; } body.skin-manga .p-bonus-body .p-bonus-value { background: transparent; color: var(--p-accent); border: 2px solid var(--p-accent); border-radius: 0; box-shadow: none; font-family: Anton, 'Noto Sans', Impact, sans-serif; letter-spacing: 0.08em; } body.skin-manga .p-bonus-body .p-bonus-btn { background: var(--sk-linie); color: var(--p-bg); border-radius: 0; box-shadow: none; font-family: Anton, 'Noto Sans', Impact, sans-serif; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; } body.skin-manga .p-bonus-link:hover .p-bonus-btn { transform: none; box-shadow: none; background: var(--p-accent); color: var(--p-accent-fg); } body.skin-manga .p-foot { margin-top: 40px; padding-top: 20px; border-top: 3px solid var(--sk-linie); color: var(--sk-rand-fg); } body.skin-manga .p-foot-links button, body.skin-manga .p-foot-links a { color: var(--p-fg); font-weight: 500; opacity: 1; } body.skin-manga .p-foot-meta, body.skin-manga .p-foot-ki, body.skin-manga .p-foot-copy { color: var(--p-muted); } @media (max-width: 760px) { body.skin-manga { --sk-rand: 16px; } body.skin-manga .p-empfehlung { gap: 10px; font-size: 0.84rem; } body.skin-manga .p-empfehlung::after { letter-spacing: 0.18em; } body.skin-manga .p-wrap > .p-hero { padding: 22px 18px 26px; } body.skin-manga .p-hero::before { width: 150px; } body.skin-manga .p-video, body.skin-manga .p-audio { margin: 30px 0 34px; } body.skin-manga .p-video-wrap::before { inset: -18px; } body.skin-manga .p-video-play .p-video-play-core { width: 82px; height: 82px; border-width: 4px; } body.skin-manga .p-body { padding: 18px 16px 20px; font-size: 1rem; } body.skin-manga .p-cta-block { padding: 42px 18px 26px; } body.skin-manga .p-countdown .p-countdown-grid { gap: 10px; } body.skin-manga .p-cta-wrap { text-align: center; } body.skin-manga .p-cta { display: flex; justify-content: center; width: 100%; padding: 16px 18px; letter-spacing: 0.08em; } body.skin-manga .p-bonus-link { grid-template-columns: 62px 1fr; gap: 12px; padding: 14px; } body.skin-manga .p-bonus-stack .p-bonus-cover-wrap { width: 62px; height: 62px; } } /* ============================================================ 3) ANIME Warmer Cel-Look: Himmel mit weichem Verlauf, harte Lichtkanten, runde Karten mit versetztem Vollton-Schatten statt Weichzeichner. Baloo 2 fuer die Ueberschriften, Nunito Sans fuer den Satz. --p-accent bleibt hier die Farbwahl des Kunden: die Vorlage traegt ihre Stimmung ueber Himmel, Zimmerton und Lichtkanten, der Button darf dem Kunden gehoeren. ============================================================ */ body.skin-anime, [data-mode="light"] body.skin-anime, body.skin-anime[data-mode="light"] { --p-bg: #FFF6EA; --p-fg: #23343A; --p-muted: #55666C; --p-card: #FFFFFF; --p-border: #EBD9C4; --sk-himmel: linear-gradient(178deg, #FFD3A8 0%, #FFC29A 26%, #F6C6B4 48%, #A9DFDA 76%, #7FD3CE 100%); --sk-himmel-fg: #1F3D42; --sk-himmel-sub: #24484C; --sk-titel-schatten: #FFF3E2; --sk-gestirn: rgba(255, 255, 255, 0.95); --sk-wolke: rgba(255, 255, 255, 0.85); --sk-zimmer: #F3E3D0; --sk-schatten: #E2CDB6; --sk-schatten-tief: #C9A98C; --sk-teal: #2C7A76; --sk-teal-flaeche: #7FD3CE; --sk-warm: #C24A1E; --sk-warm-flaeche: #FFC48A; --sk-glanz: rgba(255, 229, 186, 0.9); --sk-glanz-fein: rgba(255, 255, 255, 0.55); --sk-schirm: radial-gradient(circle at 50% 42%, #2C5A64 0%, #16313A 78%); --sk-abschluss: linear-gradient(160deg, #2C5A64 0%, #1C3F48 100%); --sk-abschluss-fg: #FFFFFF; --sk-abschluss-muted: #CFE2E4; --sk-abschluss-akzent: #FFC48A; /* Eigener, sehr leiser Glanz fuer die dunkle Schlussflaeche. Der Zimmer-Glanz waere hier so hell, dass die Kante wie ein Fehler wirkt. */ --sk-block-glanz: rgba(255, 255, 255, 0.09); } /* Abendfolge: dieselbe Szene nach Sonnenuntergang. Der Himmel geht in Violett und Nachtblau, aus dem Sonnenglanz wird Mondlicht, das Zimmer liegt im Dunkeln. */ [data-mode="dark"] body.skin-anime, body.skin-anime[data-mode="dark"] { --p-bg: #191426; --p-fg: #F2E8DC; --p-muted: #B4A8BE; --p-card: #241E33; --p-border: #3B3350; --sk-himmel: linear-gradient(178deg, #4A3766 0%, #6B4470 26%, #7A4A63 48%, #2E4A63 76%, #1F3A52 100%); --sk-himmel-fg: #FFF4E6; --sk-himmel-sub: #CFDCE4; --sk-titel-schatten: #221534; --sk-gestirn: rgba(255, 246, 226, 0.72); --sk-wolke: rgba(255, 246, 226, 0.20); --sk-zimmer: #221D30; --sk-schatten: #120E1C; --sk-schatten-tief: #0C0914; --sk-teal: #6FC7C2; --sk-teal-flaeche: #2F6E6C; --sk-warm: #FFA772; --sk-warm-flaeche: #8A4E25; --sk-glanz: rgba(255, 218, 168, 0.16); --sk-glanz-fein: rgba(255, 255, 255, 0.12); --sk-schirm: radial-gradient(circle at 50% 42%, #2A4C57 0%, #101C24 78%); --sk-abschluss: linear-gradient(160deg, #2A2440 0%, #171223 100%); --sk-abschluss-fg: #F2E8DC; --sk-abschluss-muted: #B9AEC6; --sk-abschluss-akzent: #FFC48A; --sk-block-glanz: rgba(255, 255, 255, 0.07); } body.skin-anime { --sk-spalte: 1160px; --sk-rand: 40px; background: var(--p-bg); color: var(--p-fg); font-family: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 400; } body.skin-anime .p-wrap { --sk-spalte: 1160px; max-width: var(--sk-spalte); padding: 20px var(--sk-rand) 44px; } /* Empfehlung als Sprech-Pille mit hartem Cel-Schatten */ body.skin-anime .p-empfehlung { max-width: var(--sk-spalte); margin-inline: auto; justify-content: flex-start; width: fit-content; padding: 8px 20px 8px 8px; background: var(--p-card); border-radius: 999px; box-shadow: 0 6px 0 var(--sk-schatten); color: var(--p-fg); opacity: 1; font-size: 0.94rem; font-weight: 700; } body.skin-anime .p-empfehlung .p-empfehlung-avatar, body.skin-anime .p-empfehlung .p-empfehlung-foto { flex-shrink: 0; border-radius: 50%; border: 0; background: var(--p-accent); color: var(--p-accent-fg); font-family: 'Baloo 2', 'Nunito Sans', system-ui, sans-serif; font-weight: 800; font-size: 1.06rem; } /* Nunito Sans liegt nur in 400/600/700 vor, deshalb hier 700 statt 800. */ body.skin-anime .p-empfehlung .p-empfehlung-text b { color: var(--p-fg); font-weight: 700; } /* Himmel: Verlauf, Gestirn oben rechts, zwei weiche Wolken */ body.skin-anime .p-wrap > .p-hero { position: relative; overflow: hidden; text-align: left; margin: 16px 0 0; padding: 44px 46px 70px; border-radius: 34px; background-image: radial-gradient(circle at 84% 6%, var(--sk-gestirn) 0%, transparent 22%), radial-gradient(ellipse 220px 70px at 68% 62%, var(--sk-wolke) 0%, var(--sk-wolke) 52%, transparent 54%), radial-gradient(ellipse 150px 52px at 92% 34%, var(--sk-wolke) 0%, var(--sk-wolke) 52%, transparent 54%), var(--sk-himmel); } body.skin-anime .p-hero h1 { position: relative; max-width: 20ch; font-family: 'Baloo 2', 'Nunito Sans', system-ui, sans-serif; font-weight: 800; font-size: clamp(2.3rem, 6.4vw, 4.6rem); line-height: 1.02; letter-spacing: -0.01em; color: var(--sk-himmel-fg); text-shadow: 0 5px 0 var(--sk-titel-schatten); } body.skin-anime .p-sub { position: relative; max-width: 48ch; margin: 20px 0 0; font-size: 1.14rem; font-weight: 700; line-height: 1.65; color: var(--sk-himmel-sub); text-align: left; } /* Zimmer: das Video liegt in einer runden Flaeche, die sich unter den Himmel schiebt. Der harte Lichtkeil laeuft ueber den Rahmen. */ body.skin-anime .p-video, body.skin-anime .p-audio { position: relative; z-index: 1; margin: -30px 0 34px; padding: 24px; border: 0; border-radius: 30px; background-color: var(--sk-zimmer); background-image: linear-gradient( 114deg, var(--sk-glanz) 0%, var(--sk-glanz) 30%, transparent 30%, transparent 100% ); box-shadow: 0 16px 0 var(--sk-schatten); } body.skin-anime .p-audio-label { position: relative; color: var(--sk-warm); font-family: 'Baloo 2', 'Nunito Sans', system-ui, sans-serif; font-weight: 700; font-size: 0.94rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 12px; } body.skin-anime .p-video-wrap, body.skin-anime .p-audio-wrap { position: relative; border: 0; border-radius: 20px; background: var(--sk-schirm); box-shadow: 0 8px 0 var(--sk-schatten-tief); overflow: hidden; } body.skin-anime .p-video-wrap::after { display: none; } body.skin-anime .p-video-play .p-video-play-core { width: 106px; height: 106px; border-radius: 50%; background: var(--p-card); color: var(--p-accent); border: 0; box-shadow: 0 8px 0 var(--sk-schatten-tief); } body.skin-anime .p-video-play .p-video-play-hint, body.skin-anime .p-audio-play .p-audio-play-hint { font-family: 'Baloo 2', 'Nunito Sans', system-ui, sans-serif; font-weight: 700; font-size: 0.94rem; letter-spacing: 0.1em; color: #FFFFFF; } /* Erzaehlteil */ body.skin-anime .p-body { max-width: 66ch; margin-inline: 0; color: var(--p-fg); font-size: 1.06rem; line-height: 1.82; } body.skin-anime .p-body::before { content: "WORUM ES GEHT"; display: block; margin-bottom: 14px; color: var(--sk-warm); font-family: 'Baloo 2', 'Nunito Sans', system-ui, sans-serif; font-weight: 700; font-size: 0.94rem; letter-spacing: 0.16em; } body.skin-anime .p-body p:first-of-type { font-weight: 600; } body.skin-anime .p-body blockquote { border-left: 5px solid var(--sk-teal); border-radius: 0 14px 14px 0; background: var(--p-card); padding: 14px 18px; color: var(--p-fg); font-style: normal; } /* Abschluss: dunkle Karte mit Cel-Glanzkante */ body.skin-anime .p-cta-block { position: relative; overflow: hidden; margin-top: 34px; padding: 30px 34px 34px; border-radius: 26px; background-image: linear-gradient( 114deg, var(--sk-block-glanz) 0%, var(--sk-block-glanz) 34%, transparent 34%, transparent 100% ), var(--sk-abschluss); color: var(--sk-abschluss-fg); } body.skin-anime .p-countdown { background: transparent; border: 0; padding: 0; } body.skin-anime .p-countdown .p-countdown-label { font-family: 'Baloo 2', 'Nunito Sans', system-ui, sans-serif; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sk-abschluss-akzent); text-align: left; } body.skin-anime .p-countdown .p-countdown-grid { justify-content: flex-start; margin: 0; gap: 18px; } body.skin-anime .p-countdown-box .p-cd-flip { background: transparent; box-shadow: none; aspect-ratio: auto; border-radius: 0; } body.skin-anime .p-countdown-box .p-cd-flip::before, body.skin-anime .p-countdown-box .p-cd-flip::after { display: none; } body.skin-anime .p-countdown-box .p-cd-flip .p-cd-num { font-family: 'Baloo 2', 'Nunito Sans', system-ui, sans-serif; font-weight: 800; font-size: clamp(2rem, 6vw, 2.9rem); line-height: 1; color: var(--sk-abschluss-fg); text-shadow: none; } body.skin-anime .p-countdown-box:last-child .p-cd-flip .p-cd-num { color: var(--sk-abschluss-akzent); } body.skin-anime .p-countdown-box .p-cd-unit { font-family: 'Baloo 2', 'Nunito Sans', system-ui, sans-serif; font-weight: 700; font-size: 0.86rem; letter-spacing: 0.06em; color: var(--sk-abschluss-muted); } body.skin-anime .p-cta-block .p-cd-sep, body.skin-anime .p-cta-block .p-cd-unit-inline, body.skin-anime .p-cta-block .p-cd-bartext, body.skin-anime .p-cta-block .p-cd-minimaltext, body.skin-anime .p-cta-block .p-countdown-expired { color: var(--sk-abschluss-fg); } body.skin-anime .p-cta-wrap { text-align: left; margin-top: 22px; } body.skin-anime .p-cta { background: var(--p-accent); color: var(--p-accent-fg); border-radius: 999px; font-family: 'Baloo 2', 'Nunito Sans', system-ui, sans-serif; font-weight: 800; font-size: 1.24rem; letter-spacing: 0.01em; padding: 16px 44px; box-shadow: 0 7px 0 color-mix(in srgb, var(--p-accent) 45%, #000000); } body.skin-anime .p-cta:hover { transform: translateY(3px); box-shadow: 0 4px 0 color-mix(in srgb, var(--p-accent) 45%, #000000); } /* Die Boni als Item-Karten */ body.skin-anime .p-bonus-stack { margin-top: 38px; } body.skin-anime .p-bonus-stack-eyebrow { color: var(--sk-warm); opacity: 1; font-family: 'Baloo 2', 'Nunito Sans', system-ui, sans-serif; font-weight: 700; font-size: 0.94rem; letter-spacing: 0.16em; } body.skin-anime .p-bonus-stack-title { font-family: 'Baloo 2', 'Nunito Sans', system-ui, sans-serif; font-weight: 800; font-size: clamp(1.6rem, 3.4vw, 2.2rem); line-height: 1.16; color: var(--p-fg); -webkit-text-fill-color: var(--p-fg); } body.skin-anime .p-bonus-stack-title em, body.skin-anime .p-redeem-title em { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--sk-warm); -webkit-text-fill-color: var(--sk-warm); } body.skin-anime .p-redeem-title { font-family: 'Baloo 2', 'Nunito Sans', system-ui, sans-serif; font-weight: 800; color: var(--p-fg); -webkit-text-fill-color: var(--p-fg); } body.skin-anime .p-bonus-stack-gift { display: none; } body.skin-anime .p-bonus-stack-divider { background: var(--sk-teal-flaeche); height: 4px; width: 52px; border-radius: 999px; } body.skin-anime .p-bonus-stack-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 20px; } body.skin-anime .p-bonus-link { background: var(--p-card); border: 0; border-radius: 22px; padding: 20px 22px; grid-template-columns: 78px 1fr; gap: 18px; align-items: center; box-shadow: 0 10px 0 var(--sk-schatten); } body.skin-anime .p-bonus-link::after { display: none; } body.skin-anime .p-bonus-link:hover { transform: translateY(3px); box-shadow: 0 7px 0 var(--sk-schatten); } body.skin-anime .p-bonus-stack .p-bonus-cover-wrap { width: 78px; height: 78px; border: 0; border-radius: 20px; background: linear-gradient(155deg, var(--sk-teal-flaeche) 0%, var(--sk-teal) 58%, var(--sk-teal) 100%); box-shadow: inset 0 10px 14px -10px var(--sk-glanz-fein); } body.skin-anime .p-bonus-stack .p-bonus-typebadge { background: var(--p-card); color: var(--p-fg); border: 0; border-radius: 999px; font-family: 'Baloo 2', 'Nunito Sans', system-ui, sans-serif; font-weight: 700; } body.skin-anime .p-bonus-body .p-bonus-title { font-family: 'Baloo 2', 'Nunito Sans', system-ui, sans-serif; font-weight: 800; font-size: 1.22rem; line-height: 1.2; color: var(--p-fg); } body.skin-anime .p-bonus-body .p-bonus-desc { color: var(--p-muted); opacity: 1; font-size: 0.96rem; line-height: 1.5; } body.skin-anime .p-bonus-body .p-bonus-value { background: transparent; color: var(--sk-warm); border: 0; border-radius: 0; box-shadow: none; padding-left: 0; font-family: 'Baloo 2', 'Nunito Sans', system-ui, sans-serif; font-weight: 800; font-size: 1rem; } body.skin-anime .p-bonus-body .p-bonus-btn { background: var(--sk-teal); color: var(--p-card); border: 0; border-radius: 999px; box-shadow: 0 5px 0 color-mix(in srgb, var(--sk-teal) 55%, #000000); font-family: 'Baloo 2', 'Nunito Sans', system-ui, sans-serif; font-weight: 700; } body.skin-anime .p-bonus-link:hover .p-bonus-btn { transform: none; box-shadow: 0 5px 0 color-mix(in srgb, var(--sk-teal) 55%, #000000); } body.skin-anime .p-foot { margin-top: 40px; padding-top: 22px; border-top: 2px solid var(--p-border); color: var(--p-muted); } body.skin-anime .p-foot-links button, body.skin-anime .p-foot-links a { color: var(--p-fg); font-weight: 600; opacity: 1; } body.skin-anime .p-foot-meta, body.skin-anime .p-foot-ki, body.skin-anime .p-foot-copy { color: var(--p-muted); } @media (max-width: 760px) { body.skin-anime { --sk-rand: 16px; } body.skin-anime .p-empfehlung { padding: 7px 16px 7px 7px; font-size: 0.88rem; } body.skin-anime .p-wrap > .p-hero { padding: 30px 20px 52px; border-radius: 26px; } body.skin-anime .p-sub { font-size: 1.04rem; } body.skin-anime .p-video, body.skin-anime .p-audio { margin: -24px 0 28px; padding: 14px; border-radius: 24px; } body.skin-anime .p-video-wrap, body.skin-anime .p-audio-wrap { border-radius: 16px; } body.skin-anime .p-video-play .p-video-play-core { width: 82px; height: 82px; } body.skin-anime .p-body { font-size: 1.02rem; } body.skin-anime .p-cta-block { padding: 22px 18px 26px; border-radius: 22px; } body.skin-anime .p-countdown .p-countdown-grid { gap: 10px; } body.skin-anime .p-cta-wrap { text-align: center; } body.skin-anime .p-cta { display: flex; justify-content: center; width: 100%; padding: 16px 18px; } body.skin-anime .p-bonus-link { grid-template-columns: 62px 1fr; gap: 14px; padding: 16px; border-radius: 18px; } body.skin-anime .p-bonus-stack .p-bonus-cover-wrap { width: 62px; height: 62px; border-radius: 16px; } } /* ============================================================ Gemeinsame Schlussregeln fuer alle drei Vorlagen ============================================================ */ /* Nichts darf seitlich aus der Seite laufen. Comic und Manga legen Speedlines ueber die Bildkante hinaus, die duerfen keine Querleiste erzeugen. */ body.skin-comic, body.skin-manga, body.skin-anime { overflow-x: hidden; } /* Bedienflaechen bleiben auf dem Handy greifbar. */ @media (max-width: 760px) { body.skin-comic .p-cta, body.skin-manga .p-cta, body.skin-anime .p-cta { min-height: 54px; align-items: center; } body.skin-comic .p-foot-links button, body.skin-comic .p-foot-links a, body.skin-manga .p-foot-links button, body.skin-manga .p-foot-links a, body.skin-anime .p-foot-links button, body.skin-anime .p-foot-links a { min-height: 44px; display: inline-flex; align-items: center; } body.skin-comic .p-bonus-link, body.skin-manga .p-bonus-link, body.skin-anime .p-bonus-link { min-height: 44px; } body.skin-comic .p-bonus-body .p-bonus-btn, body.skin-manga .p-bonus-body .p-bonus-btn, body.skin-anime .p-bonus-body .p-bonus-btn { min-height: 44px; display: inline-flex; align-items: center; } } @media (prefers-reduced-motion: reduce) { body.skin-comic .p-cta:hover, body.skin-manga .p-cta:hover, body.skin-anime .p-cta:hover { transform: none; } body.skin-comic .p-bonus-link:hover, body.skin-anime .p-bonus-link:hover { transform: none; } }