/* ============================================================ Kampagnen-Skins, Teil 3: Galerie, Terminal, Postkarte, Zeitung, Vinyl. Jede Vorlage kommt in zwei vollwertigen Fassungen. Der Modus steht als data-mode an UND an , deshalb ist jede modusabhaengige Regel doppelt geschrieben. Bauweise: der Modus setzt ausschliesslich Farb-Variablen (--p-* und die skin-eigenen --sk-*). Die Bausteine darunter arbeiten nur noch mit diesen Variablen, damit keine Farbe je nur in einem Zweig existiert. --p-accent ist die Farbwahl des Kunden und bleibt stehen. Ausnahmen mit Begruendung: Terminal und Zeitung. ============================================================ */ /* ------------------------------------------------------------ Gemeinsamer Ausgangspunkt fuer den Bonus-Block. Die Grundfassung bringt Leuchtrand, Radius, Schlagschatten und einen Verlaufs-Rahmen als ::before mit. Alle fuenf Vorlagen bauen den Block selbst, deshalb wird er hier einmal zurueckgesetzt. Fläche, Rahmen und Schriftfarben setzt danach jede Vorlage in BEIDEN Fassungen ausdruecklich. ------------------------------------------------------------ */ body.skin-galerie .p-bonus-stack, body.skin-terminal .p-bonus-stack, body.skin-postkarte .p-bonus-stack, body.skin-zeitung .p-bonus-stack, body.skin-vinyl .p-bonus-stack { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; overflow: visible; } body.skin-galerie .p-bonus-stack::before, body.skin-terminal .p-bonus-stack::before, body.skin-postkarte .p-bonus-stack::before, body.skin-zeitung .p-bonus-stack::before, body.skin-vinyl .p-bonus-stack::before { display: none; } /* ============================================================ 1) GALERIE Weisser Ausstellungsraum, gerahmtes Werk, Wandschild-Typografie. Cormorant Garamond fuer die Ueberschriften, Inter fuer den Rest. ============================================================ */ body.skin-galerie, [data-mode="light"] body.skin-galerie, body.skin-galerie[data-mode="light"] { --p-bg: #FAF9F6; --p-fg: #1A1A18; --p-muted: #6E6A62; --p-card: #FFFFFF; --p-border: #E3DED2; /* Messington der Wandschilder. Gegenueber dem Entwurf (#8A7C5E) abgedunkelt, sonst bleiben die kleinen Versal-Labels bei 3.9:1. */ --sk-deko: #756744; --sk-mat: #FFFFFF; --sk-rahmen: #1A1A18; --sk-rule: #E3DED2; --sk-leinwand: #14140F; --sk-band-bg: #1A1A18; --sk-band-fg: #FAF9F6; --sk-spot: none; --sk-schatten: 0 30px 60px -40px rgba(26,26,24,0.4); } /* Abendfassung: derselbe Saal nach Schliessung, Werk im Spot. */ [data-mode="dark"] body.skin-galerie, body.skin-galerie[data-mode="dark"] { --p-bg: #14140F; --p-fg: #F2EFE6; --p-muted: #A39C8C; --p-card: #1C1C16; --p-border: #454338; --sk-deko: #C2B48C; --sk-mat: #1C1C16; --sk-rahmen: #0A0A07; --sk-rule: #3A382E; --sk-leinwand: #080806; --sk-band-bg: #F2EFE6; --sk-band-fg: #14140F; --sk-spot: radial-gradient(120% 80% at 50% -20%, rgba(242,239,230,0.10), transparent 70%); --sk-schatten: 0 40px 90px -46px rgba(0,0,0,0.9); } body.skin-galerie { background: var(--p-bg); color: var(--p-fg); font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 300; } body.skin-galerie .p-wrap { --sk-spalte: 1080px; max-width: var(--sk-spalte); padding: 34px 40px 54px; } /* Kopfzeile wie die Zeile ueber dem Kabinett */ body.skin-galerie .p-empfehlung { justify-content: space-between; font-size: 0.78rem; letter-spacing: 0.06em; color: var(--p-muted); opacity: 1; padding-top: 8px; } body.skin-galerie .p-empfehlung .p-empfehlung-avatar, body.skin-galerie .p-empfehlung .p-empfehlung-foto { border-radius: 50%; border: 1px solid var(--p-border); background: transparent; color: var(--p-fg); font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; } body.skin-galerie .p-empfehlung .p-empfehlung-text b { color: var(--p-fg); font-weight: 400; } /* Titel der Ausstellung: gross, leicht, linksbuendig */ body.skin-galerie .p-hero { text-align: left; padding-top: 74px; margin-bottom: 26px; } body.skin-galerie .p-hero h1 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(2.5rem, 6vw, 4.6rem); font-weight: 300; line-height: 1.06; letter-spacing: -0.015em; color: var(--p-fg); max-width: 20ch; } body.skin-galerie .p-sub { font-size: 1.04rem; font-weight: 300; line-height: 1.85; color: var(--p-muted); max-width: 52ch; margin-left: 0; margin-right: 0; } /* Das Werk: Passepartout, schwerer Rahmen, Spot von oben */ body.skin-galerie .p-video, body.skin-galerie .p-audio { position: relative; background: var(--sk-mat); border: 1px solid var(--p-border); border-radius: 0; padding: 30px; margin: 56px 0 44px; box-shadow: var(--sk-schatten); background-image: var(--sk-spot); } body.skin-galerie .p-audio-label { font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--sk-deko); margin-bottom: 14px; } body.skin-galerie .p-video-wrap { border: 12px solid var(--sk-rahmen); border-radius: 0; background: var(--sk-leinwand); box-shadow: none; } body.skin-galerie .p-video-play .p-video-play-core { width: 76px; height: 76px; border-radius: 50%; background: transparent; border: 1px solid color-mix(in srgb, var(--p-accent) 70%, #FAF9F6); color: #FAF9F6; box-shadow: none; } body.skin-galerie .p-video-play .p-video-play-hint { font-family: 'Cormorant Garamond', Georgia, serif; letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.72rem; color: #FAF9F6; } /* Saaltext */ body.skin-galerie .p-body { font-size: 1.02rem; font-weight: 300; line-height: 1.9; color: var(--p-fg); max-width: 64ch; margin-inline: 0; } body.skin-galerie .p-body p:first-of-type { font-size: 1.14rem; line-height: 1.9; } /* Letzter Tag: Zahlen im Antiqua-Schnitt, ohne Kasten */ body.skin-galerie .p-cta-block { margin-top: 68px; padding-top: 30px; border-top: 1px solid var(--sk-rule); } body.skin-galerie .p-countdown { background: transparent; border: 0; padding: 0; } body.skin-galerie .p-countdown .p-countdown-label { font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--sk-deko); text-align: left; } body.skin-galerie .p-countdown .p-countdown-grid { justify-content: flex-start; margin: 0; gap: 26px; } body.skin-galerie .p-countdown-box .p-cd-flip { background: transparent; box-shadow: none; aspect-ratio: auto; border-radius: 0; } body.skin-galerie .p-countdown-box .p-cd-flip::before, body.skin-galerie .p-countdown-box .p-cd-flip::after { display: none; } body.skin-galerie .p-countdown-box .p-cd-flip .p-cd-num { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 300; font-size: clamp(2.4rem, 6vw, 3.1rem); color: var(--p-fg); text-shadow: none; letter-spacing: 0; } body.skin-galerie .p-countdown-box .p-cd-unit { font-size: 0.64rem; letter-spacing: 0.2em; color: var(--sk-deko); font-weight: 400; } /* Eintritt: Schild in Druckfarbe, Akzent des Kunden als Unterkante */ body.skin-galerie .p-cta-wrap { text-align: left; } body.skin-galerie .p-cta { background: var(--sk-band-bg); color: var(--sk-band-fg); border-radius: 0; font-family: Inter, system-ui, sans-serif; font-weight: 400; font-size: 0.95rem; letter-spacing: 0.18em; text-transform: uppercase; padding: 18px 44px; box-shadow: inset 0 -3px 0 var(--p-accent); } body.skin-galerie .p-cta:hover { transform: translateY(-1px); box-shadow: inset 0 -3px 0 var(--p-accent); } /* Katalog: die Boni als Positionsliste mit Haarlinien */ body.skin-galerie .p-bonus-stack { margin-top: 70px; padding-top: 30px; border-top: 1px solid var(--sk-rule); background: transparent; border-radius: 0; } body.skin-galerie .p-bonus-stack-eyebrow { color: var(--sk-deko); opacity: 1; letter-spacing: 0.28em; font-weight: 400; } body.skin-galerie .p-bonus-stack-title { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; font-size: clamp(1.5rem, 3vw, 2rem); color: var(--p-fg); } /* Verlaufs-Text zurueck auf einfarbig, sonst verschwindet er im Saal. */ body.skin-galerie .p-bonus-stack-title em, body.skin-galerie .p-redeem-title em { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--sk-deko); } body.skin-galerie .p-bonus-stack-gift { display: none; } body.skin-galerie .p-bonus-stack-divider { background: var(--sk-deko); width: 34px; height: 1px; } body.skin-galerie .p-bonus-stack-list { gap: 0; grid-template-columns: 1fr; } body.skin-galerie .p-bonus-card { border-top: 1px solid var(--sk-rule); } body.skin-galerie .p-bonus-card:last-child { border-bottom: 1px solid var(--sk-rule); } body.skin-galerie .p-bonus-link { background: transparent; border: 0; border-radius: 0; padding: 20px 4px; grid-template-columns: 88px 1fr; gap: 24px; align-items: center; } body.skin-galerie .p-bonus-link::after { display: none; } body.skin-galerie .p-bonus-link:hover { transform: none; box-shadow: none; background: color-mix(in srgb, var(--sk-deko) 8%, transparent); } body.skin-galerie .p-bonus-stack .p-bonus-cover-wrap { width: 88px; height: 88px; border-radius: 0; border: 1px solid var(--sk-rule); background: var(--sk-mat); box-shadow: none; } body.skin-galerie .p-bonus-stack .p-bonus-typebadge { background: var(--sk-band-bg); color: var(--sk-band-fg); border-radius: 0; border: 0; } body.skin-galerie .p-bonus-body .p-bonus-title { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: 1.24rem; color: var(--p-fg); } body.skin-galerie .p-bonus-body .p-bonus-desc { color: var(--p-muted); opacity: 1; font-weight: 300; font-size: 0.86rem; } body.skin-galerie .p-bonus-body .p-bonus-value { background: transparent; color: var(--sk-deko); border: 1px solid var(--sk-rule); border-radius: 0; box-shadow: none; font-weight: 400; letter-spacing: 0.12em; } body.skin-galerie .p-bonus-body .p-bonus-btn { background: transparent; color: var(--p-fg); border-bottom: 1px solid var(--sk-deko); border-radius: 0; box-shadow: none; padding: 6px 0; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.76rem; } body.skin-galerie .p-bonus-link:hover .p-bonus-btn { transform: none; box-shadow: none; } body.skin-galerie .p-foot { border-top: 1px solid var(--sk-rule); margin-top: 90px; padding-top: 26px; color: var(--p-muted); } body.skin-galerie .p-foot-links button, body.skin-galerie .p-foot-links a { font-weight: 300; color: var(--p-muted); } body.skin-galerie .p-foot-meta, body.skin-galerie .p-foot-ki, body.skin-galerie .p-foot-copy { color: var(--p-fg); font-weight: 300; } @media (max-width: 640px) { body.skin-galerie .p-wrap { padding: 22px 18px 40px; } body.skin-galerie .p-hero { padding-top: 40px; } body.skin-galerie .p-video, body.skin-galerie .p-audio { padding: 14px; margin: 34px 0 30px; } body.skin-galerie .p-video-wrap { border-width: 7px; } body.skin-galerie .p-countdown .p-countdown-grid { gap: 16px; } body.skin-galerie .p-cta { display: flex; justify-content: center; padding: 18px 20px; letter-spacing: 0.12em; } body.skin-galerie .p-bonus-link { grid-template-columns: 64px 1fr; gap: 14px; } body.skin-galerie .p-bonus-stack .p-bonus-cover-wrap { width: 64px; height: 64px; } } /* ============================================================ 2) TERMINAL Ein Fenster mit Eingabezeilen. JetBrains Mono durchgehend. Hier wird --p-accent gesetzt: ohne das Bernstein der Eingabe- marke und das Gruen der Statuszeilen ist die Vorlage nicht wiederzuerkennen, ein beliebiger Kundenton wuerde die Terminal-Anmutung aufloesen. ============================================================ */ body.skin-terminal, [data-mode="dark"] body.skin-terminal, body.skin-terminal[data-mode="dark"] { --p-bg: #0B0E0C; --p-fg: #C7D3C7; --p-muted: #8FA08F; --p-card: #141915; /* Rahmen leicht angehoben, bei #232C24 waren die Kanten unsichtbar. */ --p-border: #33422F; --p-accent: #FFB454; --p-accent-fg: #0B0E0C; --sk-gruen: #5CC46A; --sk-hell: #ECF3EC; --sk-leiste: #1B221C; --sk-fuss: #0E120F; --sk-schirm: #090C0A; } /* Tagfassung: dasselbe Fenster auf einem hellen Schreibtisch. */ [data-mode="light"] body.skin-terminal, body.skin-terminal[data-mode="light"] { --p-bg: #F1F4EE; --p-fg: #1B211A; --p-muted: #566152; --p-card: #FFFFFF; --p-border: #C9D3C4; --p-accent: #9A5B00; --p-accent-fg: #FFF7EC; --sk-gruen: #1E7A33; --sk-hell: #0E120D; --sk-leiste: #E4E9DF; --sk-fuss: #E9EDE4; --sk-schirm: #14180F; } body.skin-terminal { background: var(--p-bg); color: var(--p-fg); font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } body.skin-terminal .p-wrap { --sk-spalte: 1080px; max-width: var(--sk-spalte); background: var(--p-bg); padding: 62px 40px 40px; position: relative; } /* Fensterleiste mit den drei Punkten */ body.skin-terminal .p-wrap::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 42px; background-color: var(--sk-leiste); border-bottom: 1px solid var(--p-border); background-image: radial-gradient(circle 5.5px at 22px 21px, #E05A4A 97%, transparent 100%), radial-gradient(circle 5.5px at 40px 21px, #E0B14A 97%, transparent 100%), radial-gradient(circle 5.5px at 58px 21px, var(--sk-gruen) 97%, transparent 100%); background-repeat: no-repeat; } body.skin-terminal .p-empfehlung { justify-content: flex-end; font-size: 0.74rem; color: var(--p-muted); opacity: 1; } body.skin-terminal .p-empfehlung .p-empfehlung-avatar, body.skin-terminal .p-empfehlung .p-empfehlung-foto { border-radius: 50%; background: var(--p-accent); color: var(--p-accent-fg); font-weight: 700; border: 0; } body.skin-terminal .p-empfehlung .p-empfehlung-text b { color: var(--p-fg); } /* Ueberschrift als Ausgabe hinter einer Eingabezeile */ body.skin-terminal .p-hero { text-align: left; border-left: 3px solid var(--p-accent); padding: 4px 0 4px 22px; margin: 30px 0 26px; } body.skin-terminal .p-hero::before { content: "$ status --content-plan"; display: block; font-size: 0.86rem; color: var(--sk-gruen); margin-bottom: 14px; } body.skin-terminal .p-hero h1 { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: clamp(1.9rem, 4.4vw, 3rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; color: var(--sk-hell); } body.skin-terminal .p-sub { font-size: 0.98rem; line-height: 1.7; color: var(--p-muted); margin-left: 0; margin-right: 0; max-width: 62ch; } /* Video als Unterfenster mit Dateileiste */ body.skin-terminal .p-video, body.skin-terminal .p-audio { background: transparent; border: 0; padding: 0; margin: 26px 0; } body.skin-terminal .p-audio-label { font-size: 0.86rem; color: var(--p-fg); margin-bottom: 10px; } body.skin-terminal .p-audio-label::before { content: "$ "; color: var(--sk-gruen); font-weight: 700; } body.skin-terminal .p-video-wrap { border: 1px solid var(--p-border); border-radius: 8px; background: var(--sk-schirm); box-shadow: none; overflow: hidden; } body.skin-terminal .p-video-play .p-video-play-core { width: 88px; height: 88px; background: var(--p-accent); color: var(--p-accent-fg); border: 0; box-shadow: 0 0 60px rgba(255,180,84,0.28); } body.skin-terminal .p-video-play .p-video-play-hint { font-size: 0.74rem; letter-spacing: 0.04em; color: #C7D3C7; } /* Beschreibung als man-page, eingerueckt */ body.skin-terminal .p-body { font-size: 0.94rem; line-height: 1.85; color: var(--p-fg); max-width: 84ch; margin-inline: 0; padding-left: 20px; border-left: 1px solid var(--p-border); } body.skin-terminal .p-body p:first-of-type { color: var(--sk-hell); } /* Frist als Kasten */ body.skin-terminal .p-cta-block { margin-top: 34px; margin-left: 20px; border: 1px solid var(--p-border); border-radius: 8px; background: var(--p-card); padding: 24px 28px; } body.skin-terminal .p-countdown { background: transparent; border: 0; padding: 0; } body.skin-terminal .p-countdown .p-countdown-label { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--p-muted); text-align: left; } body.skin-terminal .p-countdown .p-countdown-grid { justify-content: flex-start; margin: 0; gap: 14px; } body.skin-terminal .p-countdown-box .p-cd-flip { background: transparent; box-shadow: none; aspect-ratio: auto; border-radius: 0; } body.skin-terminal .p-countdown-box .p-cd-flip::before, body.skin-terminal .p-countdown-box .p-cd-flip::after { display: none; } body.skin-terminal .p-countdown-box .p-cd-flip .p-cd-num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 700; font-size: clamp(1.8rem, 5.4vw, 2.2rem); color: var(--sk-hell); text-shadow: none; } body.skin-terminal .p-countdown-box:last-child .p-cd-flip .p-cd-num { color: var(--p-accent); } body.skin-terminal .p-countdown-box .p-cd-unit { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: none; color: var(--p-muted); font-weight: 400; } body.skin-terminal .p-cta { background: var(--p-accent); color: var(--p-accent-fg); font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 700; border-radius: 6px; letter-spacing: 0; box-shadow: none; } body.skin-terminal .p-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -10px rgba(0,0,0,0.6); } body.skin-terminal .p-cta .p-cta-label::before { content: "./"; opacity: 0.7; } /* Boni als Paket-Installation, durchnummeriert */ body.skin-terminal .p-bonus-stack { margin-top: 40px; } body.skin-terminal .p-bonus-stack-head::before { content: "$ install boni"; display: block; font-size: 0.86rem; color: var(--sk-gruen); margin-bottom: 12px; } body.skin-terminal .p-bonus-stack-eyebrow { color: var(--p-muted); opacity: 1; } body.skin-terminal .p-bonus-stack-title { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 700; color: var(--sk-hell); } body.skin-terminal .p-bonus-stack-title em, body.skin-terminal .p-redeem-title em { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--p-accent); } body.skin-terminal .p-bonus-stack-gift { display: none; } body.skin-terminal .p-bonus-stack-divider { background: var(--sk-gruen); height: 2px; } body.skin-terminal .p-bonus-stack-list { counter-reset: sk-paket; gap: 12px; } body.skin-terminal .p-bonus-card { counter-increment: sk-paket; position: relative; } body.skin-terminal .p-bonus-card::before { content: "[" counter(sk-paket) "]"; position: absolute; top: 10px; left: 16px; z-index: 2; font-size: 0.78rem; color: var(--sk-gruen); pointer-events: none; } body.skin-terminal .p-bonus-link { background: var(--p-card); border: 1px solid var(--p-border); border-radius: 8px; padding: 34px 18px 18px; } body.skin-terminal .p-bonus-link::after { display: none; } body.skin-terminal .p-bonus-link:hover { transform: none; border-color: var(--sk-gruen); box-shadow: none; } body.skin-terminal .p-bonus-stack .p-bonus-cover-wrap { border-radius: 4px; border: 1px solid var(--p-border); background: var(--sk-schirm); box-shadow: none; } body.skin-terminal .p-bonus-stack .p-bonus-typebadge { background: var(--sk-leiste); color: var(--p-fg); border-radius: 3px; } body.skin-terminal .p-bonus-body .p-bonus-title { color: var(--sk-hell); font-weight: 700; } body.skin-terminal .p-bonus-body .p-bonus-desc { color: var(--p-muted); opacity: 1; } body.skin-terminal .p-bonus-body .p-bonus-value { background: transparent; color: var(--p-muted); border: 1px solid var(--p-border); border-radius: 3px; box-shadow: none; } body.skin-terminal .p-bonus-body .p-bonus-btn { background: transparent; color: var(--p-accent); border: 1px solid var(--p-accent); border-radius: 4px; box-shadow: none; font-weight: 500; } body.skin-terminal .p-bonus-link:hover .p-bonus-btn { background: var(--p-accent); color: var(--p-accent-fg); transform: none; box-shadow: none; } /* blinkende Eingabemarke unter der Paketliste */ body.skin-terminal .p-bonus-stack::after { content: ""; display: block; width: 9px; height: 17px; margin: 20px 0 0; background: var(--p-fg); animation: skTermCursor 1.1s steps(1) infinite; } @keyframes skTermCursor { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } body.skin-terminal .p-foot { margin-top: 34px; background: var(--sk-fuss); border-top: 1px solid var(--p-border); padding: 24px 24px 30px; color: var(--p-muted); } body.skin-terminal .p-foot-links button, body.skin-terminal .p-foot-links a { color: var(--p-muted); font-size: 0.76rem; } body.skin-terminal .p-foot-meta, body.skin-terminal .p-foot-ki, body.skin-terminal .p-foot-copy { color: var(--p-fg); } @media (prefers-reduced-motion: reduce) { body.skin-terminal .p-bonus-stack::after { animation: none; opacity: 1; } } @media (max-width: 640px) { body.skin-terminal .p-wrap { padding: 54px 16px 32px; } body.skin-terminal .p-hero { padding-left: 14px; } body.skin-terminal .p-body { padding-left: 12px; } body.skin-terminal .p-cta-block { margin-left: 0; padding: 18px 16px; } body.skin-terminal .p-countdown .p-countdown-grid { gap: 8px; } body.skin-terminal .p-cta { display: flex; justify-content: center; } body.skin-terminal .p-foot { padding: 20px 16px 26px; } } /* ============================================================ 3) POSTKARTE Eine Karte auf dem Tisch, mit Marke, Poststempel und Handschrift. Caveat fuer das Geschriebene, Lora fuer den Satz. ============================================================ */ body.skin-postkarte, [data-mode="light"] body.skin-postkarte, body.skin-postkarte[data-mode="light"] { --p-bg: #C9D9DE; --p-fg: #2E2A24; /* gegenueber dem Entwurf (#7C7263) abgedunkelt: auf dem Papier lag der Nebentext sonst bei 4.16:1. */ --p-muted: #6F6555; --p-card: #F7F0E1; --p-border: #DCCBA6; --sk-terra: #9C4520; --sk-terra-flaeche: #A94E27; --sk-mitbringsel: #EFE4CD; --sk-strich: #C0A87F; --sk-marke: #F2B441; --sk-marke-rand: #FFFDF7; --sk-stempel: #4A5B60; --sk-tisch-fg: #4A5B60; --sk-foto: #FFFDF7; --sk-schirm: linear-gradient(155deg, #3B5B63, #1E3238); } /* Nachtfassung: dieselbe Karte auf einem dunklen Schreibtisch, Papier waermer und gedaempft statt gleissend. */ [data-mode="dark"] body.skin-postkarte, body.skin-postkarte[data-mode="dark"] { --p-bg: #16232A; --p-fg: #F0E7D4; --p-muted: #ADA089; --p-card: #2A2419; --p-border: #574A36; --sk-terra: #E38155; --sk-terra-flaeche: #E38155; --sk-mitbringsel: #3A3122; --sk-strich: #6B5C3F; --sk-marke: #E0A83C; --sk-marke-rand: #3A3122; --sk-stempel: #8FA9B0; --sk-tisch-fg: #B9C9CE; --sk-foto: #3A3122; --sk-schirm: linear-gradient(155deg, #24414A, #101E23); } body.skin-postkarte { background: var(--p-bg); color: var(--p-fg); font-family: Lora, Georgia, serif; } body.skin-postkarte .p-wrap { position: relative; --sk-spalte: 1080px; max-width: var(--sk-spalte); background: var(--p-card); box-shadow: 0 40px 90px -40px rgba(0,0,0,0.55); padding: 40px 44px 44px; margin-top: 48px; margin-bottom: 34px; } /* Kein Mittelfalz: im Entwurf liegen Bildseite und Schreibseite nebeneinander, die echte Seite laeuft aber einspaltig. Eine senkrechte Linie quer durch Text, Countdown und Button sieht dort nach kaputter Seite aus. Die Karte bekommt ihre Anmutung stattdessen ueber Papierton, Kante und Schatten. */ /* Briefmarke oben rechts, gezeichnet als Inline-SVG */ body.skin-postkarte .p-wrap::before { content: ""; position: absolute; top: 34px; right: 40px; width: 84px; height: 100px; background-color: var(--sk-marke); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 100'%3E%3Cg fill='none' stroke='%232E2A24' stroke-width='2'%3E%3Crect x='18' y='28' width='48' height='40' rx='2'/%3E%3Cpath d='M24 62l12-16 9 11 7-8 12 13'/%3E%3Ccircle cx='32' cy='41' r='4'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; border: 5px solid var(--sk-marke-rand); box-shadow: 0 0 0 1px var(--p-border); transform: rotate(2deg); pointer-events: none; z-index: 2; } /* Poststempel neben der Marke */ body.skin-postkarte .p-empfehlung { position: relative; justify-content: flex-start; font-size: 0.8rem; color: var(--p-muted); opacity: 1; padding-right: 150px; } body.skin-postkarte .p-empfehlung::after { content: "POSTAMT\ALUFTPOST"; white-space: pre; position: absolute; top: -18px; right: 156px; width: 96px; height: 96px; border: 2px solid var(--sk-stempel); border-radius: 50%; color: var(--sk-stempel); font-family: Lora, Georgia, serif; font-size: 0.6rem; letter-spacing: 0.16em; line-height: 1.9; text-align: center; display: flex; align-items: center; justify-content: center; transform: rotate(-11deg); opacity: 0.8; pointer-events: none; } body.skin-postkarte .p-empfehlung .p-empfehlung-avatar, body.skin-postkarte .p-empfehlung .p-empfehlung-foto { border-radius: 50%; background: var(--sk-terra-flaeche); color: var(--p-card); font-family: Caveat, 'Segoe Script', cursive; font-weight: 700; font-size: 1.05rem; border: 0; } body.skin-postkarte .p-empfehlung .p-empfehlung-text b { color: var(--p-fg); font-weight: 600; } /* Grusszeile und Handschrift */ body.skin-postkarte .p-hero { text-align: left; padding-top: 26px; padding-right: 150px; } body.skin-postkarte .p-hero::before { content: "Hallo,"; display: block; font-family: Caveat, 'Segoe Script', cursive; font-weight: 500; font-size: 1.5rem; color: var(--p-muted); margin-bottom: 8px; } body.skin-postkarte .p-hero h1 { font-family: Caveat, 'Segoe Script', cursive; font-weight: 700; font-size: clamp(2.4rem, 6vw, 3.9rem); line-height: 1.02; letter-spacing: 0; color: var(--p-fg); } body.skin-postkarte .p-sub { font-family: Caveat, 'Segoe Script', cursive; font-weight: 500; font-size: 1.32rem; line-height: 1.6; color: var(--p-fg); margin-left: 0; margin-right: 0; max-width: 46ch; } /* Video als aufgeklebtes Foto */ body.skin-postkarte .p-video, body.skin-postkarte .p-audio { display: flex; flex-direction: column; background: var(--sk-foto); border: 0; border-radius: 0; padding: 12px 12px 34px; margin: 34px 0 32px; box-shadow: 0 14px 34px -16px rgba(0,0,0,0.5); transform: rotate(-1.2deg); transform-origin: 50% 40%; transition: transform 260ms cubic-bezier(0.23, 1, 0.32, 1); } /* Sobald das Video laeuft, richtet sich das Foto auf: schraeg gucken kann niemand. Die Neigung ist Deko fuer den Ruhezustand, nicht fuers Ansehen. */ body.skin-postkarte .p-video:has(.p-video-wrap.is-playing), body.skin-postkarte .p-audio:has(.p-audio-wrap.is-playing) { transform: rotate(0deg); } @media (prefers-reduced-motion: reduce) { body.skin-postkarte .p-video, body.skin-postkarte .p-audio { transition: none; } } body.skin-postkarte .p-audio-label { order: 2; font-family: Caveat, 'Segoe Script', cursive; font-weight: 500; font-size: 1.16rem; color: var(--p-muted); margin: 8px 0 0; } body.skin-postkarte .p-video-wrap { border: 0; border-radius: 0; background: var(--sk-schirm); box-shadow: none; } body.skin-postkarte .p-video-play .p-video-play-core { width: 78px; height: 78px; background: var(--sk-marke); color: #2E2A24; border: 0; box-shadow: none; } body.skin-postkarte .p-video-play .p-video-play-hint { font-family: Caveat, 'Segoe Script', cursive; font-size: 1.05rem; color: #F7F0E1; } body.skin-postkarte .p-body { font-size: 0.98rem; line-height: 1.85; color: var(--p-fg); max-width: 58ch; margin-inline: 0; } body.skin-postkarte .p-body p:first-of-type { font-family: Caveat, 'Segoe Script', cursive; font-weight: 500; font-size: 1.32rem; line-height: 1.6; } /* Adressfeld unten: Gueltigkeit und Karte einloesen */ body.skin-postkarte .p-cta-block { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--p-border); } body.skin-postkarte .p-countdown { background: transparent; border: 0; padding: 0; } body.skin-postkarte .p-countdown .p-countdown-label { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--p-muted); font-family: Lora, Georgia, serif; } body.skin-postkarte .p-countdown .p-countdown-grid { gap: 16px; } body.skin-postkarte .p-countdown-box .p-cd-flip { background: transparent; box-shadow: none; aspect-ratio: auto; border-radius: 0; } body.skin-postkarte .p-countdown-box .p-cd-flip::before, body.skin-postkarte .p-countdown-box .p-cd-flip::after { display: none; } body.skin-postkarte .p-countdown-box .p-cd-flip .p-cd-num { font-family: Lora, Georgia, serif; font-weight: 600; font-size: clamp(1.6rem, 5vw, 1.9rem); color: var(--p-fg); text-shadow: none; } body.skin-postkarte .p-countdown-box .p-cd-unit { font-size: 0.74rem; text-transform: none; letter-spacing: 0.04em; color: var(--p-muted); font-weight: 400; } body.skin-postkarte .p-cta-wrap { margin-top: 18px; } body.skin-postkarte .p-cta { display: flex; justify-content: center; width: 100%; background: var(--p-accent); color: var(--p-accent-fg); font-family: Lora, Georgia, serif; font-weight: 600; font-size: 1.06rem; letter-spacing: 0.02em; border-radius: 0; padding: 16px; box-shadow: none; } body.skin-postkarte .p-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -12px rgba(0,0,0,0.45); } /* Boni als Mitbringsel im Koffer */ body.skin-postkarte .p-bonus-stack { margin-top: 40px; } body.skin-postkarte .p-bonus-stack-eyebrow { color: var(--p-muted); opacity: 1; letter-spacing: 0.2em; font-weight: 400; } body.skin-postkarte .p-bonus-stack-title { font-family: Caveat, 'Segoe Script', cursive; font-weight: 700; font-size: clamp(1.6rem, 3.4vw, 2.1rem); color: var(--p-fg); } body.skin-postkarte .p-bonus-stack-title em, body.skin-postkarte .p-redeem-title em { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--sk-terra); } body.skin-postkarte .p-bonus-stack-divider { background: var(--sk-strich); height: 1px; } body.skin-postkarte .p-bonus-link { background: var(--sk-mitbringsel); border: 1px dashed var(--sk-strich); border-radius: 0; padding: 16px; } body.skin-postkarte .p-bonus-link::after { display: none; } body.skin-postkarte .p-bonus-link:hover { transform: rotate(-0.6deg); border-color: var(--sk-terra); box-shadow: 0 12px 26px -14px rgba(0,0,0,0.45); } body.skin-postkarte .p-bonus-stack .p-bonus-cover-wrap { border-radius: 0; border: 4px solid var(--sk-foto); background: var(--sk-foto); box-shadow: 0 8px 18px -12px rgba(0,0,0,0.5); } body.skin-postkarte .p-bonus-stack .p-bonus-typebadge { background: var(--sk-terra-flaeche); color: #F7F0E1; border-radius: 0; } body.skin-postkarte .p-bonus-body .p-bonus-title { color: var(--p-fg); font-weight: 600; font-size: 1.02rem; } body.skin-postkarte .p-bonus-body .p-bonus-desc { color: var(--p-muted); opacity: 1; } body.skin-postkarte .p-bonus-body .p-bonus-value { background: transparent; color: var(--sk-terra); border: 1px dashed var(--sk-strich); border-radius: 0; box-shadow: none; } body.skin-postkarte .p-bonus-body .p-bonus-btn { background: transparent; color: var(--sk-terra); border: 1px solid var(--sk-terra); border-radius: 0; box-shadow: none; font-family: Caveat, 'Segoe Script', cursive; font-weight: 700; font-size: 1.02rem; } body.skin-postkarte .p-bonus-link:hover .p-bonus-btn { transform: none; box-shadow: none; } /* Die Fusszeile liegt auf dem Tisch, nicht auf der Karte: sie braucht deshalb eigene Farben, sonst erbt sie Papiertoene. */ body.skin-postkarte .p-foot { background: transparent; border-top: 0; text-align: center; color: var(--sk-tisch-fg); padding-top: 4px; } body.skin-postkarte .p-foot-links { justify-content: center; } body.skin-postkarte .p-foot-links button, body.skin-postkarte .p-foot-links a { color: var(--sk-tisch-fg); } body.skin-postkarte .p-foot-links button:hover, body.skin-postkarte .p-foot-links a:hover { color: var(--sk-tisch-fg); } body.skin-postkarte .p-foot-meta, body.skin-postkarte .p-foot-ki, body.skin-postkarte .p-foot-copy { color: var(--sk-tisch-fg); } @media (max-width: 720px) { body.skin-postkarte .p-wrap { padding: 26px 18px 32px; margin-top: 24px; } body.skin-postkarte .p-wrap::before { width: 54px; height: 64px; top: 20px; right: 18px; border-width: 4px; background-size: 54px 64px; } body.skin-postkarte .p-empfehlung { padding-right: 78px; } body.skin-postkarte .p-empfehlung::after { display: none; } body.skin-postkarte .p-hero { padding-right: 78px; padding-top: 16px; } body.skin-postkarte .p-video, body.skin-postkarte .p-audio { transform: none; padding: 8px 8px 24px; } body.skin-postkarte .p-countdown .p-countdown-grid { gap: 10px; } } /* ============================================================ 4) ZEITUNG Titelseite mit Kopflinien, Spaltensatz, Initiale und Kastenanzeige. Playfair Display, Source Serif 4, Oswald. Auch hier wird --p-accent gesetzt: das Signalrot ist die Blattfarbe. Ein beliebiger Kundenton in den Ressortzeilen und im Redaktionsschluss laesst die Titelseite auseinander- fallen. ============================================================ */ body.skin-zeitung, [data-mode="light"] body.skin-zeitung, body.skin-zeitung[data-mode="light"] { --p-bg: #F4F1E7; --p-fg: #1A1A1A; --p-muted: #6B665C; --p-card: #FBF9F2; --p-border: #C7C0AD; --p-accent: #C0281E; --p-accent-fg: #F4F1E7; --sk-linie: #1A1A1A; --sk-rule: #C7C0AD; --sk-band-bg: #1A1A1A; --sk-band-fg: #F4F1E7; --sk-band-muted: #A8A193; --sk-schirm: linear-gradient(160deg, #3B3830, #17150F); } /* Spaetausgabe: dasselbe Blatt in Nachtdruck, der Anzeigenkasten kippt ins Helle, damit er weiter aus der Seite heraussticht. */ [data-mode="dark"] body.skin-zeitung, body.skin-zeitung[data-mode="dark"] { --p-bg: #14130F; --p-fg: #EDE8DA; --p-muted: #A8A092; --p-card: #1D1B15; --p-border: #423E31; --p-accent: #F0564A; --p-accent-fg: #1A1208; --sk-linie: #EDE8DA; --sk-rule: #423E31; --sk-band-bg: #EDE8DA; --sk-band-fg: #14130F; --sk-band-muted: #4A463C; --sk-schirm: linear-gradient(160deg, #2A2720, #0C0B08); } body.skin-zeitung { background: var(--p-bg); color: var(--p-fg); font-family: 'Source Serif 4', Georgia, serif; } body.skin-zeitung .p-wrap { --sk-spalte: 1180px; max-width: var(--sk-spalte); padding: 26px 40px 34px; } /* Ressortzeile zwischen zwei Kopflinien */ body.skin-zeitung .p-empfehlung { justify-content: space-between; border-top: 3px solid var(--sk-linie); border-bottom: 3px solid var(--sk-linie); padding: 9px 0; margin-bottom: 26px; font-family: Oswald, 'Roboto Condensed', sans-serif; font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--p-muted); opacity: 1; } body.skin-zeitung .p-empfehlung::after { content: "Ressort Empfehlung"; color: var(--p-accent); } body.skin-zeitung .p-empfehlung .p-empfehlung-avatar, body.skin-zeitung .p-empfehlung .p-empfehlung-foto { border-radius: 50%; background: var(--sk-band-bg); color: var(--sk-band-fg); border: 0; font-size: 0.7rem; } body.skin-zeitung .p-empfehlung .p-empfehlung-text b { color: var(--p-fg); } /* Aufmacher */ body.skin-zeitung .p-hero { text-align: center; margin-bottom: 26px; } body.skin-zeitung .p-hero::before { content: "Der Fall, den jeder kennt"; display: block; font-family: Oswald, 'Roboto Condensed', sans-serif; font-size: 0.8rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--p-accent); margin-bottom: 10px; } body.skin-zeitung .p-hero h1 { font-family: 'Playfair Display', Georgia, serif; font-weight: 900; font-size: clamp(2.4rem, 7vw, 5.4rem); line-height: 0.98; letter-spacing: -0.025em; color: var(--p-fg); } body.skin-zeitung .p-sub { max-width: 780px; margin: 16px auto 0; font-size: 1.14rem; line-height: 1.6; font-weight: 600; color: var(--p-fg); text-align: center; } /* Aufmacherfoto mit Bildunterschrift */ body.skin-zeitung .p-video, body.skin-zeitung .p-audio { display: flex; flex-direction: column; background: transparent; border: 0; border-radius: 0; padding: 0; margin: 26px 0; } body.skin-zeitung .p-audio-label { order: 2; margin: 8px 0 0; padding-bottom: 10px; border-bottom: 1px solid var(--sk-rule); font-size: 0.84rem; font-style: italic; color: var(--p-muted); } body.skin-zeitung .p-audio-label::before { content: "Foto"; font-family: Oswald, 'Roboto Condensed', sans-serif; font-style: normal; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--p-accent); margin-right: 10px; } body.skin-zeitung .p-video-wrap { border: 1px solid var(--sk-linie); border-radius: 0; background: var(--sk-schirm); box-shadow: none; } body.skin-zeitung .p-video-play .p-video-play-core { width: 92px; height: 92px; background: var(--p-accent); color: var(--p-accent-fg); border: 0; box-shadow: none; } body.skin-zeitung .p-video-play .p-video-play-hint { font-family: Oswald, 'Roboto Condensed', sans-serif; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.72rem; color: #F4F1E7; } /* Spaltensatz mit Initiale */ body.skin-zeitung .p-body { max-width: 1040px; margin-inline: auto; font-size: 0.98rem; line-height: 1.75; color: var(--p-fg); } @media (min-width: 900px) { body.skin-zeitung .p-body { columns: 2; column-gap: 34px; column-rule: 1px solid var(--sk-rule); text-align: justify; hyphens: auto; } body.skin-zeitung .p-body img, body.skin-zeitung .p-body blockquote, body.skin-zeitung .p-body table { break-inside: avoid; } } body.skin-zeitung .p-body > p:first-of-type::first-letter { float: left; font-family: 'Playfair Display', Georgia, serif; font-weight: 900; font-size: 3.6em; line-height: 0.82; padding: 5px 9px 0 0; color: var(--p-fg); } body.skin-zeitung .p-body blockquote { border-left: 3px solid var(--p-accent); font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 1.18rem; line-height: 1.4; color: var(--p-fg); } /* Redaktionsschluss: geschlossener Kasten in Gegenfarbe */ body.skin-zeitung .p-cta-block { background: var(--sk-band-bg); color: var(--sk-band-fg); border-radius: 0; padding: 20px 24px 24px; margin-top: 34px; max-width: 420px; margin-left: auto; margin-right: auto; } body.skin-zeitung .p-countdown { background: transparent; border: 0; padding: 0; } body.skin-zeitung .p-countdown .p-countdown-label { font-family: Oswald, 'Roboto Condensed', sans-serif; font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sk-band-muted); } body.skin-zeitung .p-countdown .p-countdown-grid { gap: 10px; } body.skin-zeitung .p-countdown-box .p-cd-flip { background: transparent; box-shadow: none; aspect-ratio: auto; border-radius: 0; } body.skin-zeitung .p-countdown-box .p-cd-flip::before, body.skin-zeitung .p-countdown-box .p-cd-flip::after { display: none; } body.skin-zeitung .p-countdown-box .p-cd-flip .p-cd-num { font-family: Oswald, 'Roboto Condensed', sans-serif; font-weight: 600; font-size: clamp(1.7rem, 5.4vw, 2rem); color: var(--sk-band-fg); text-shadow: none; } body.skin-zeitung .p-countdown-box .p-cd-unit { font-family: Oswald, 'Roboto Condensed', sans-serif; font-size: 0.72rem; letter-spacing: 0.08em; color: var(--sk-band-muted); font-weight: 400; } /* Alles Uebrige im Kasten erbt sonst die Seitenfarbe und wird blass. */ body.skin-zeitung .p-cta-block .p-cd-sep, body.skin-zeitung .p-cta-block .p-cd-unit-inline, body.skin-zeitung .p-cta-block .p-cd-bartext, body.skin-zeitung .p-cta-block .p-cd-minimaltext { color: var(--sk-band-fg); } /* Der Abgelaufen-Hinweis steht sonst in Signalrot auf Schwarz (2.4:1). */ body.skin-zeitung .p-cta-block .p-countdown-expired { color: var(--sk-band-fg); } body.skin-zeitung .p-cta-wrap { margin-top: 14px; } body.skin-zeitung .p-cta { display: flex; justify-content: center; width: 100%; background: var(--p-accent); color: var(--p-accent-fg); font-family: Oswald, 'Roboto Condensed', sans-serif; font-weight: 400; font-size: 1.02rem; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 0; padding: 15px; box-shadow: none; } body.skin-zeitung .p-cta:hover { transform: translateY(-2px); box-shadow: none; } /* Boni als Kastenanzeige mit doppeltem Rahmen */ body.skin-zeitung .p-bonus-stack { margin-top: 34px; border: 3px double var(--sk-linie); background: var(--p-card); padding: 22px 24px 26px; border-radius: 0; } body.skin-zeitung .p-bonus-stack-head { align-items: center; text-align: center; } body.skin-zeitung .p-bonus-stack-eyebrow { font-family: Oswald, 'Roboto Condensed', sans-serif; font-size: 0.68rem; letter-spacing: 0.2em; color: var(--p-accent); opacity: 1; } body.skin-zeitung .p-bonus-stack-title { font-family: 'Playfair Display', Georgia, serif; font-weight: 900; font-size: clamp(1.3rem, 2.8vw, 1.7rem); color: var(--p-fg); justify-content: center; } body.skin-zeitung .p-bonus-stack-title em, body.skin-zeitung .p-redeem-title em { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--p-accent); } body.skin-zeitung .p-bonus-stack-gift { display: none; } body.skin-zeitung .p-bonus-stack-divider { background: var(--sk-rule); width: 100%; height: 1px; margin-top: 12px; } body.skin-zeitung .p-bonus-link { background: transparent; border: 0; border-bottom: 1px solid var(--sk-rule); border-radius: 0; padding: 16px 4px; } body.skin-zeitung .p-bonus-link::after { display: none; } body.skin-zeitung .p-bonus-link:hover { transform: none; box-shadow: none; background: color-mix(in srgb, var(--p-accent) 8%, transparent); } body.skin-zeitung .p-bonus-stack .p-bonus-cover-wrap { border-radius: 0; border: 1px solid var(--sk-linie); background: var(--p-card); box-shadow: none; } body.skin-zeitung .p-bonus-stack .p-bonus-typebadge { background: var(--sk-band-bg); color: var(--sk-band-fg); border-radius: 0; font-family: Oswald, 'Roboto Condensed', sans-serif; } body.skin-zeitung .p-bonus-body .p-bonus-title { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; color: var(--p-fg); } body.skin-zeitung .p-bonus-body .p-bonus-desc { color: var(--p-muted); opacity: 1; } body.skin-zeitung .p-bonus-body .p-bonus-value { background: transparent; color: var(--p-accent); border: 1px solid var(--p-accent); border-radius: 0; box-shadow: none; font-family: Oswald, 'Roboto Condensed', sans-serif; } body.skin-zeitung .p-bonus-body .p-bonus-btn { background: var(--p-accent); color: var(--p-accent-fg); border-radius: 0; box-shadow: none; font-family: Oswald, 'Roboto Condensed', sans-serif; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; } body.skin-zeitung .p-bonus-link:hover .p-bonus-btn { transform: none; box-shadow: none; } body.skin-zeitung .p-foot { margin-top: 34px; border-top: 3px solid var(--sk-linie); padding-top: 16px; color: var(--p-muted); } body.skin-zeitung .p-foot-links button, body.skin-zeitung .p-foot-links a { font-family: Oswald, 'Roboto Condensed', sans-serif; font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--p-muted); } body.skin-zeitung .p-foot-meta, body.skin-zeitung .p-foot-ki, body.skin-zeitung .p-foot-copy { color: var(--p-fg); } @media (max-width: 640px) { body.skin-zeitung .p-wrap { padding: 18px 16px 28px; } body.skin-zeitung .p-empfehlung { flex-wrap: wrap; gap: 8px; font-size: 0.68rem; } body.skin-zeitung .p-empfehlung::after { flex-basis: 100%; } body.skin-zeitung .p-body { text-align: left; hyphens: none; } body.skin-zeitung .p-cta-block { max-width: none; padding: 16px; } body.skin-zeitung .p-bonus-stack { padding: 16px 14px 20px; } } /* PFLICHT-KENNZEICHNUNG — NICHT ENTFERNEN, NICHT AUSBLENDEN. Der Zeitungs-Skin verkleidet eine bezahlte Werbeseite als Titelseite: Kopflinien, Ressortzeile, Spaltensatz, Bildunterschrift. Nach Paragraf 3 Absatz 3 UWG in Verbindung mit Anhang Nummer 11 ist ein vom Unternehmer finanzierter, redaktionell aufgemachter Inhalt ohne sofort erkennbaren Werbehinweis unzulaessig. Anerkannt sind praktisch nur die Woerter „Anzeige" und „Werbung". „Advertorial", „Sponsored", „Partnerinhalt" oder ein Hinweis erst im Fussbereich genuegen nicht. Anker ist .p-wrap::before, nicht .p-empfehlung und nicht .p-hero: - .p-empfehlung wird nur gerendert, wenn eine Empfehlung hinterlegt ist, und ist ein Flex-Container, dessen ::after hier schon die Ressortzeile traegt. Eine Kennzeichnung darin saehe zudem wie eine Rubrik aus. - .p-hero::before ist bereits von der Dachzeile belegt. .p-wrap ist der aeussere Block der Seite, sein ::before steht damit ueber dem gesamten redaktionellen Teil und ist ohne Scrollen sichtbar. Optik: voller Balken in der Blattfarbe quer ueber den Satzspiegel, wie ein gesetzter Anzeigenvermerk im Kopf. Gemessener Kontrast 15,4:1 in der Tagausgabe und 15,2:1 in der Nachtausgabe, weit ueber den geforderten 4,5:1. Schriftgroesse 1,05rem liegt ueber dem Fliesstext des Skins (0,98rem). Es gibt bewusst KEINE Regel, die den Balken auf kleinen Bildschirmen versteckt. */ body.skin-zeitung .p-wrap::before { /* Schon im content in Versalien, damit die Kennzeichnung auch dann steht, wenn irgendwo text-transform zurueckgesetzt wird. */ content: "ANZEIGE"; display: block; margin: 0 0 18px; padding: 8px 14px 7px; background: var(--sk-band-bg); color: var(--sk-band-fg); font-family: Oswald, 'Roboto Condensed', sans-serif; font-size: 1.05rem; font-weight: 600; line-height: 1.25; letter-spacing: 0.34em; text-transform: uppercase; text-align: center; } @media (max-width: 640px) { /* Auf dem Handy nur die Sperrung reduziert, damit der Balken einzeilig bleibt. Der Balken selbst bleibt in voller Groesse sichtbar. */ body.skin-zeitung .p-wrap::before { letter-spacing: 0.22em; margin-bottom: 14px; } } /* ============================================================ 5) VINYL Plattenhuelle mit Rillen, Seite A und Seite B, Pegelanzeige. Bebas Neue fuer die Schilder, Space Grotesk fuer den Satz. ============================================================ */ body.skin-vinyl, [data-mode="dark"] body.skin-vinyl, body.skin-vinyl[data-mode="dark"] { --p-bg: #0E1130; --p-fg: #F1E7D0; --p-muted: #9A9BC0; --p-card: #151947; --p-border: #383E8C; --sk-teal: #38D6C4; --sk-huelle: linear-gradient(150deg, #21255E 0%, #14173C 55%, #0B0E28 100%); --sk-huelle-rand: #343A7E; --sk-schirm: radial-gradient(circle at 50% 55%, #1B2050 0%, #070917 72%); --sk-rille: rgba(56,214,196,0.22); --sk-rille-hof: rgba(56,214,196,0.06); --sk-linie: #23285C; --sk-pegel-aus: #23285C; } /* Tagfassung: dieselbe Huelle als Sonnen-Pressung auf Karton, die Rillen werden zu geprägten Linien statt zu Leuchtspuren. */ [data-mode="light"] body.skin-vinyl, body.skin-vinyl[data-mode="light"] { --p-bg: #EFE7D6; --p-fg: #1E1B33; --p-muted: #57547A; --p-card: #FBF6EA; --p-border: #C9C0AA; --sk-teal: #0B6B60; --sk-huelle: linear-gradient(150deg, #FBF6EA 0%, #F2EAD8 55%, #E6DCC4 100%); --sk-huelle-rand: #C9C0AA; --sk-schirm: radial-gradient(circle at 50% 55%, #2B2850 0%, #14122A 72%); --sk-rille: rgba(11,107,96,0.28); --sk-rille-hof: rgba(11,107,96,0.07); --sk-linie: #D8CFB8; --sk-pegel-aus: #D8CFB8; } body.skin-vinyl { background: var(--p-bg); color: var(--p-fg); font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif; } body.skin-vinyl .p-wrap { --sk-spalte: 1120px; max-width: var(--sk-spalte); padding: 38px 40px 46px; } body.skin-vinyl .p-empfehlung { justify-content: space-between; font-size: 0.82rem; color: var(--p-muted); opacity: 1; } body.skin-vinyl .p-empfehlung::after { content: "LP 001 · 33 1/3"; font-family: 'Bebas Neue', Impact, sans-serif; font-size: 0.92rem; letter-spacing: 0.32em; color: var(--sk-teal); } body.skin-vinyl .p-empfehlung .p-empfehlung-avatar, body.skin-vinyl .p-empfehlung .p-empfehlung-foto { border-radius: 50%; background: var(--p-accent); color: var(--p-accent-fg); font-family: 'Bebas Neue', Impact, sans-serif; font-size: 1.06rem; border: 0; } body.skin-vinyl .p-empfehlung .p-empfehlung-text b { color: var(--p-fg); font-weight: 700; } body.skin-vinyl .p-hero { text-align: left; padding-top: 30px; margin-bottom: 20px; } body.skin-vinyl .p-hero::before { content: "SEITE A"; display: block; font-family: 'Bebas Neue', Impact, sans-serif; font-size: 0.86rem; letter-spacing: 0.3em; color: var(--p-accent); margin-bottom: 8px; } body.skin-vinyl .p-hero h1 { font-family: 'Bebas Neue', Impact, sans-serif; font-weight: 400; font-size: clamp(2.6rem, 6.6vw, 4.6rem); line-height: 0.9; letter-spacing: 0.01em; color: var(--p-fg); } body.skin-vinyl .p-sub { font-size: 0.98rem; line-height: 1.7; color: var(--p-muted); margin-left: 0; margin-right: 0; max-width: 60ch; } /* Das Video sitzt in der Huelle, mit Rillen-Kreis dahinter */ body.skin-vinyl .p-video, body.skin-vinyl .p-audio { position: relative; background: var(--sk-huelle); border: 1px solid var(--sk-huelle-rand); border-radius: 0; padding: 34px; margin: 30px 0 34px; overflow: hidden; box-shadow: 0 40px 90px -40px rgba(0,0,0,0.9); } body.skin-vinyl .p-video::after, body.skin-vinyl .p-audio::after { content: ""; position: absolute; right: -140px; bottom: -140px; width: 420px; height: 420px; border-radius: 50%; border: 1px solid var(--sk-rille); box-shadow: 0 0 0 24px var(--sk-rille-hof), 0 0 0 52px var(--sk-rille-hof), 0 0 0 84px var(--sk-rille-hof); pointer-events: none; } body.skin-vinyl .p-video > *, body.skin-vinyl .p-audio > * { position: relative; z-index: 1; } body.skin-vinyl .p-audio-label { font-family: 'Bebas Neue', Impact, sans-serif; font-size: 0.86rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--sk-teal); margin-bottom: 12px; } body.skin-vinyl .p-video-wrap { border: 1px solid var(--sk-huelle-rand); border-radius: 0; background: var(--sk-schirm); box-shadow: none; } body.skin-vinyl .p-video-play .p-video-play-core { width: 80px; height: 80px; background: var(--sk-teal); color: #070917; border: 0; box-shadow: 0 0 52px var(--sk-rille); } body.skin-vinyl .p-video-play .p-video-play-hint { font-family: 'Bebas Neue', Impact, sans-serif; letter-spacing: 0.2em; font-size: 0.86rem; color: #F1E7D0; } /* Klappentext */ body.skin-vinyl .p-body { font-size: 1rem; line-height: 1.8; color: var(--p-fg); max-width: 66ch; margin-inline: 0; } body.skin-vinyl .p-body::before { content: "LINER NOTES"; display: block; font-family: 'Bebas Neue', Impact, sans-serif; font-size: 0.86rem; letter-spacing: 0.3em; color: var(--sk-teal); margin-bottom: 15px; } body.skin-vinyl .p-body p:first-of-type { font-size: 1.04rem; color: var(--p-fg); } /* Pegelanzeige statt Countdown-Kaesten */ body.skin-vinyl .p-cta-block { background: var(--p-card); border: 1px solid var(--p-border); border-radius: 0; padding: 22px 24px 24px; margin-top: 34px; } body.skin-vinyl .p-countdown { background: transparent; border: 0; padding: 0; } body.skin-vinyl .p-countdown .p-countdown-label { font-family: 'Bebas Neue', Impact, sans-serif; font-size: 0.82rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--p-muted); text-align: left; } body.skin-vinyl .p-countdown .p-countdown-grid { justify-content: flex-start; margin: 0; gap: 26px; } body.skin-vinyl .p-countdown-box .p-cd-flip { background: transparent; box-shadow: none; aspect-ratio: auto; border-radius: 0; flex-direction: column; gap: 7px; overflow: visible; } body.skin-vinyl .p-countdown-box .p-cd-flip::after { display: none; } /* Fuenf ansteigende Balken, aus einem Streifen geschnitten */ body.skin-vinyl .p-countdown-box .p-cd-flip::before { content: ""; position: static; display: block; width: 47px; height: 30px; transform: none; background: repeating-linear-gradient(90deg, var(--sk-teal) 0 7px, transparent 7px 10px); clip-path: polygon(0 70%, 14% 70%, 14% 52%, 29% 52%, 29% 33%, 44% 33%, 44% 14%, 58% 14%, 58% 0, 100% 0, 100% 100%, 0 100%); z-index: 0; } body.skin-vinyl .p-countdown-box:last-child .p-cd-flip::before { background: repeating-linear-gradient(90deg, var(--p-accent) 0 7px, transparent 7px 10px); } body.skin-vinyl .p-countdown-box .p-cd-flip .p-cd-num { font-family: 'Bebas Neue', Impact, sans-serif; font-weight: 400; font-size: clamp(1.8rem, 5.4vw, 2.2rem); line-height: 0.9; color: var(--p-fg); text-shadow: none; } body.skin-vinyl .p-countdown-box:last-child .p-cd-flip .p-cd-num { color: var(--p-accent); } body.skin-vinyl .p-countdown-box .p-cd-unit { font-size: 0.66rem; letter-spacing: 0.2em; color: var(--p-muted); font-weight: 400; } body.skin-vinyl .p-cta { display: flex; justify-content: center; width: 100%; background: var(--p-accent); color: var(--p-accent-fg); font-family: 'Bebas Neue', Impact, sans-serif; font-weight: 400; font-size: 1.42rem; letter-spacing: 0.14em; text-transform: uppercase; border-radius: 0; padding: 15px; box-shadow: none; } body.skin-vinyl .p-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(0,0,0,0.8); } /* Seite B: die Boni als Titelliste */ body.skin-vinyl .p-bonus-stack { margin-top: 34px; border-top: 1px solid var(--p-border); padding-top: 22px; background: transparent; border-radius: 0; } body.skin-vinyl .p-bonus-stack-eyebrow { font-family: 'Bebas Neue', Impact, sans-serif; font-size: 0.86rem; letter-spacing: 0.3em; color: var(--p-accent); opacity: 1; } body.skin-vinyl .p-bonus-stack-eyebrow::after { content: " · SEITE B"; } body.skin-vinyl .p-bonus-stack-title { font-family: 'Bebas Neue', Impact, sans-serif; font-weight: 400; font-size: clamp(1.6rem, 3.4vw, 2.1rem); letter-spacing: 0.04em; color: var(--p-fg); } body.skin-vinyl .p-bonus-stack-title em, body.skin-vinyl .p-redeem-title em { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--sk-teal); } body.skin-vinyl .p-bonus-stack-gift { display: none; } body.skin-vinyl .p-bonus-stack-divider { background: var(--sk-teal); height: 2px; } body.skin-vinyl .p-bonus-stack-list { counter-reset: sk-track; gap: 0; grid-template-columns: 1fr; } body.skin-vinyl .p-bonus-card { counter-increment: sk-track; border-bottom: 1px solid var(--sk-linie); } body.skin-vinyl .p-bonus-link { background: transparent; border: 0; border-radius: 0; padding: 14px 4px; grid-template-columns: 34px 78px 1fr; gap: 14px; align-items: center; } body.skin-vinyl .p-bonus-link::before { content: "B" counter(sk-track); font-family: 'Bebas Neue', Impact, sans-serif; font-size: 1.14rem; color: var(--sk-teal); } body.skin-vinyl .p-bonus-link::after { display: none; } body.skin-vinyl .p-bonus-link:hover { transform: none; box-shadow: none; background: color-mix(in srgb, var(--sk-teal) 10%, transparent); } body.skin-vinyl .p-bonus-stack .p-bonus-cover-wrap { width: 78px; height: 78px; border-radius: 0; border: 1px solid var(--p-border); background: var(--p-card); box-shadow: none; } body.skin-vinyl .p-bonus-stack .p-bonus-typebadge { background: var(--p-card); color: var(--p-fg); border-radius: 0; font-family: 'Bebas Neue', Impact, sans-serif; letter-spacing: 0.08em; } body.skin-vinyl .p-bonus-body .p-bonus-title { color: var(--p-fg); font-weight: 500; } body.skin-vinyl .p-bonus-body .p-bonus-desc { color: var(--p-muted); opacity: 1; } body.skin-vinyl .p-bonus-body .p-bonus-value { background: transparent; color: var(--sk-teal); border: 1px solid var(--sk-teal); border-radius: 0; box-shadow: none; font-family: 'Bebas Neue', Impact, sans-serif; letter-spacing: 0.1em; } body.skin-vinyl .p-bonus-body .p-bonus-btn { background: transparent; color: var(--p-fg); border: 1px solid var(--p-border); border-radius: 0; box-shadow: none; font-family: 'Bebas Neue', Impact, sans-serif; letter-spacing: 0.12em; font-size: 0.94rem; } body.skin-vinyl .p-bonus-link:hover .p-bonus-btn { transform: none; box-shadow: none; border-color: var(--sk-teal); color: var(--sk-teal); } body.skin-vinyl .p-foot { margin-top: 38px; border-top: 1px solid var(--sk-linie); padding-top: 20px; color: var(--p-muted); } body.skin-vinyl .p-foot-links button, body.skin-vinyl .p-foot-links a { color: var(--p-muted); font-size: 0.78rem; } body.skin-vinyl .p-foot-meta, body.skin-vinyl .p-foot-ki, body.skin-vinyl .p-foot-copy { color: var(--p-fg); } @media (max-width: 640px) { body.skin-vinyl .p-wrap { padding: 24px 16px 34px; } body.skin-vinyl .p-empfehlung { flex-wrap: wrap; gap: 8px; } body.skin-vinyl .p-empfehlung::after { letter-spacing: 0.18em; font-size: 0.8rem; } body.skin-vinyl .p-video, body.skin-vinyl .p-audio { padding: 16px; } body.skin-vinyl .p-video::after, body.skin-vinyl .p-audio::after { right: -180px; bottom: -180px; } body.skin-vinyl .p-countdown .p-countdown-grid { gap: 12px; } body.skin-vinyl .p-countdown-box .p-cd-flip::before { width: 34px; height: 22px; background-size: 7px 100%; } body.skin-vinyl .p-bonus-link { grid-template-columns: 26px 56px 1fr; gap: 10px; } body.skin-vinyl .p-bonus-stack .p-bonus-cover-wrap { width: 56px; height: 56px; } } /* ============================================================ Gemeinsame Schlussregeln fuer alle fuenf Vorlagen ============================================================ */ /* Bedienflaechen bleiben auf dem Handy greifbar. */ @media (max-width: 640px) { body.skin-galerie .p-cta, body.skin-terminal .p-cta, body.skin-postkarte .p-cta, body.skin-zeitung .p-cta, body.skin-vinyl .p-cta { min-height: 52px; align-items: center; } body.skin-galerie .p-foot-links button, body.skin-galerie .p-foot-links a, body.skin-terminal .p-foot-links button, body.skin-terminal .p-foot-links a, body.skin-postkarte .p-foot-links button, body.skin-postkarte .p-foot-links a, body.skin-zeitung .p-foot-links button, body.skin-zeitung .p-foot-links a, body.skin-vinyl .p-foot-links button, body.skin-vinyl .p-foot-links a { min-height: 44px; display: inline-flex; align-items: center; } body.skin-galerie .p-bonus-link, body.skin-terminal .p-bonus-link, body.skin-postkarte .p-bonus-link, body.skin-zeitung .p-bonus-link, body.skin-vinyl .p-bonus-link { min-height: 44px; } } /* Nichts darf seitlich aus der Seite laufen. */ body.skin-galerie, body.skin-terminal, body.skin-postkarte, body.skin-zeitung, body.skin-vinyl { overflow-x: hidden; } @media (prefers-reduced-motion: reduce) { body.skin-galerie .p-cta:hover, body.skin-terminal .p-cta:hover, body.skin-postkarte .p-cta:hover, body.skin-zeitung .p-cta:hover, body.skin-vinyl .p-cta:hover { transform: none; } body.skin-postkarte .p-bonus-link:hover { transform: none; } }