/* ============================================================ Kampagnen-Skins, Teil 8: Kachel, Manifest, Beipackzettel. Drei Vorlagen, die keine Stimmung behaupten, sondern eine Gattung: ein Werkzeug (Kachel), ein Fachtext (Manifest), ein Merkblatt (Beipackzettel). Ihre Wirkung haengt an Zurueckhaltung, deshalb steht hier bewusst wenig Schmuck. Jede Vorlage kommt in zwei vollwertigen Fassungen. Der Modus steht als data-mode an UND an , deshalb ist jede modusabhaengige Regel doppelt geschrieben. Bauweise wie in den frueheren Teilen: der Modus setzt ausschliesslich Farb-Variablen (--p-* und die skin-eigenen --sk-*). Alles darunter arbeitet nur noch mit diesen Variablen, damit keine Farbe je nur in einem Zweig existiert. --p-accent ist die Farbwahl des Kunden und bleibt in allen drei Vorlagen stehen. Beim Manifest ist sie sogar der einzige Farbpunkt der Seite. Schriften: selbst gehostet aus kampagnen-fonts.css. Kachel nutzt Space Grotesk (400/500/700), Beipackzettel IBM Plex Sans (400/500/600). Das Manifest war auf Archivo entworfen, davon liegt nur der 400er im Bestand: es laeuft deshalb auf Barlow, der einzigen Grotesk mit dem vollen Schnittsatz 300 bis 700. ============================================================ */ /* ------------------------------------------------------------ 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-kachel .p-bonus-stack, body.skin-manifest .p-bonus-stack, body.skin-beipackzettel .p-bonus-stack { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; overflow: visible; } body.skin-kachel .p-bonus-stack::before, body.skin-manifest .p-bonus-stack::before, body.skin-beipackzettel .p-bonus-stack::before { display: none; } /* Das Geschenk-Emoji ueber der Bonus-Ueberschrift ist in allen drei Vorlagen ein Fremdkoerper: ein Werkzeug, ein Fachtext und ein Merkblatt schmuecken nicht. */ body.skin-kachel .p-bonus-stack-gift, body.skin-manifest .p-bonus-stack-gift, body.skin-beipackzettel .p-bonus-stack-gift { display: none; } /* Bedienflaechen bleiben ueberall mindestens 44 Pixel hoch. */ body.skin-kachel .p-cta, body.skin-manifest .p-cta, body.skin-beipackzettel .p-cta, body.skin-kachel .p-bonus-btn, body.skin-manifest .p-bonus-btn, body.skin-beipackzettel .p-bonus-btn { min-height: 44px; align-items: center; } /* ============================================================ 1) KACHEL Ein Werkzeug, kein Prospekt. Alles sitzt in gleich gebauten Kacheln: 14 Pixel Radius, feine Kante, enge Fugen. Der Fliesstext und der Angebots-Kasten stehen ab Notebook-Breite nebeneinander, genau wie im Entwurf. Space Grotesk, weil die Ziffern dort ruhig und technisch sind. ============================================================ */ /* Grundfassung: dunkel, so war die Vorlage entworfen. */ body.skin-kachel, [data-mode="dark"] body.skin-kachel, body.skin-kachel[data-mode="dark"] { --p-bg: #101216; --p-fg: #E4E7EB; --p-muted: #98A2AE; --p-card: #171A20; --p-border: #262B33; /* Das Versal-Label im Entwurf (#626C79) liegt auf der Kachel bei 3.5:1. Fuer 11 Pixel grosse Schrift zu wenig, deshalb heller. */ --sk-label: #8B95A2; --sk-titel: #F2F4F7; --sk-zahl: #F2F4F7; --sk-schirm: #0C0E11; --sk-schirm-fg: #2C333C; --sk-fuge: #2B313A; --sk-schatten: none; --sk-hover: #1C2027; } /* Tagfassung: dieselben Kacheln auf hellem Arbeitsblatt. Der Grund ist leicht grau, sonst verschwindet die weisse Kachel darin. */ [data-mode="light"] body.skin-kachel, body.skin-kachel[data-mode="light"] { --p-bg: #EEF0F3; --p-fg: #14171C; --p-muted: #5A636E; --p-card: #FFFFFF; --p-border: #DBDFE5; --sk-label: #636C78; --sk-titel: #0E1116; --sk-zahl: #0E1116; --sk-schirm: #E3E7EC; --sk-schirm-fg: #B4BCC6; --sk-fuge: #D3D8DF; --sk-schatten: 0 1px 2px rgba(20,23,28,0.06); --sk-hover: #F6F8FA; } body.skin-kachel { background: var(--p-bg); color: var(--p-fg); font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; } body.skin-kachel .p-wrap { --sk-spalte: 1180px; max-width: var(--sk-spalte); padding: 20px 26px 30px; } /* Die Empfehlung ist die schmale Kachel ganz oben. Sie steht ausserhalb von .p-wrap und braucht die Breite deshalb selbst. */ body.skin-kachel .p-empfehlung { max-width: 1180px; margin: 22px auto 0; padding: 14px 22px; background: var(--p-card); border: 1px solid var(--p-border); border-radius: 14px; box-shadow: var(--sk-schatten); color: var(--p-muted); opacity: 1; font-size: 0.95rem; } body.skin-kachel .p-empfehlung .p-empfehlung-avatar, body.skin-kachel .p-empfehlung .p-empfehlung-foto { width: 30px; height: 30px; border-radius: 50%; background: var(--sk-hover); border: 1px solid var(--p-border); color: var(--p-fg); font-weight: 700; font-size: 0.82rem; } body.skin-kachel .p-empfehlung .p-empfehlung-text b { color: var(--p-fg); font-weight: 500; } body.skin-kachel .p-empfehlung-satz { color: var(--p-muted); } /* Der Kachel-Baustein: jede Sektion sieht gleich aus. */ body.skin-kachel .p-hero, body.skin-kachel .p-video, body.skin-kachel .p-audio, body.skin-kachel .p-body, body.skin-kachel .p-cta-block, body.skin-kachel .p-cta-wdh, body.skin-kachel .p-bonus-link, body.skin-kachel .p-redeem { background: var(--p-card); border: 1px solid var(--p-border); border-radius: 14px; box-shadow: var(--sk-schatten); } body.skin-kachel .p-hero { text-align: left; padding: 30px 30px 26px; margin: 14px 0 0; } body.skin-kachel .p-hero h1 { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: clamp(2rem, 4.4vw, 2.9rem); line-height: 1.06; letter-spacing: -0.025em; color: var(--sk-titel); margin: 0; } body.skin-kachel .p-sub { margin: 12px 0 0; font-size: 1.02rem; line-height: 1.65; color: var(--p-muted); max-width: 60ch; margin-left: 0; margin-right: 0; } /* Video: eigene Kachel, der Schirm darin nochmal abgesetzt. */ body.skin-kachel .p-video, body.skin-kachel .p-audio { padding: 26px 30px 28px; margin: 14px 0 0; } body.skin-kachel .p-audio-label { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sk-label); margin-bottom: 14px; } body.skin-kachel .p-video-wrap, body.skin-kachel .p-audio-wrap { border: 1px solid var(--sk-fuge); border-radius: 10px; background: var(--sk-schirm); box-shadow: none; } body.skin-kachel .p-video-play .p-video-play-core, body.skin-kachel .p-audio-play .p-audio-play-core { width: 76px; height: 76px; flex: 0 0 auto; aspect-ratio: 1; border-radius: 50%; background: var(--p-accent); color: var(--p-accent-fg); border: 0; box-shadow: none; } body.skin-kachel .p-video-play .p-video-play-hint { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: #E4E7EB; } /* Fliesstext-Kachel */ body.skin-kachel .p-body { padding: 28px 30px 26px; margin: 14px 0 0; font-size: 1rem; line-height: 1.8; color: var(--p-fg); max-width: none; } body.skin-kachel .p-body h2, body.skin-kachel .p-body h3 { font-weight: 700; letter-spacing: -0.02em; color: var(--sk-titel); } /* Angebots-Kachel: Frist und Button. Sie darf mehrfach vorkommen, deshalb nichts, was nur einmal Sinn ergibt. */ body.skin-kachel .p-cta-block { padding: 24px 28px 26px; margin: 14px 0 0; } body.skin-kachel .p-countdown { background: transparent; border: 0; padding: 0; } body.skin-kachel .p-countdown .p-countdown-label { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sk-label); text-align: left; margin-bottom: 12px; } body.skin-kachel .p-countdown .p-countdown-grid { justify-content: flex-start; margin: 0; gap: 18px; } body.skin-kachel .p-countdown-box { min-width: 0; } body.skin-kachel .p-countdown-box .p-cd-flip { background: transparent; box-shadow: none; aspect-ratio: auto; border-radius: 0; } body.skin-kachel .p-countdown-box .p-cd-flip::before, body.skin-kachel .p-countdown-box .p-cd-flip::after { display: none; } body.skin-kachel .p-countdown-box .p-cd-flip .p-cd-num { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: clamp(1.9rem, 5vw, 2.1rem); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--sk-zahl); text-shadow: none; } body.skin-kachel .p-countdown-box .p-cd-unit { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sk-label); font-weight: 400; } body.skin-kachel .p-cta-wrap { text-align: left; margin-top: 18px; } body.skin-kachel .p-cta { display: flex; justify-content: center; width: 100%; background: var(--p-accent); color: var(--p-accent-fg); font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; border-radius: 9px; padding: 15px 30px; box-shadow: none; } body.skin-kachel .p-cta:hover { transform: translateY(-1px); box-shadow: none; } /* Wiederholter Button: dieselbe Kachel, nur ohne Frist. */ body.skin-kachel .p-cta-wdh { padding: 24px 28px 26px; margin: 14px 0 0; text-align: left; } body.skin-kachel .p-cta-wdh-vertrauen { margin: 0; font-size: 0.94rem; color: var(--p-muted); } body.skin-kachel .p-cta-wdh .p-cta-wrap { margin-top: 12px; } /* Boni: zwei gleich grosse Kacheln nebeneinander, Wert unten. Im Markup steht der Wert zuerst, per Reihenfolge wandert er ans Ende der Kachel, so wie im Entwurf. */ body.skin-kachel .p-bonus-stack { margin: 22px 0 0; } body.skin-kachel .p-bonus-stack-head { margin-bottom: 12px; } body.skin-kachel .p-bonus-stack-eyebrow { color: var(--sk-label); opacity: 1; letter-spacing: 0.2em; font-weight: 400; } body.skin-kachel .p-bonus-stack-title { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: clamp(1.2rem, 2.4vw, 1.5rem); letter-spacing: -0.02em; color: var(--sk-titel); -webkit-text-fill-color: var(--sk-titel); } body.skin-kachel .p-bonus-stack-title em, body.skin-kachel .p-redeem-title em { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--p-accent-ink); -webkit-text-fill-color: var(--p-accent-ink); } body.skin-kachel .p-bonus-stack-divider { background: var(--sk-label); width: 34px; height: 1px; } body.skin-kachel .p-bonus-stack-list { gap: 14px; } body.skin-kachel .p-bonus-card { background: transparent; border: 0; } body.skin-kachel .p-bonus-link { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 24px; color: var(--p-fg); } body.skin-kachel .p-bonus-link::after { display: none; } body.skin-kachel .p-bonus-link:hover { transform: none; background: var(--sk-hover); border-color: var(--sk-fuge); box-shadow: none; } body.skin-kachel .p-bonus-stack .p-bonus-cover-wrap { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 10px; border: 1px solid var(--sk-fuge); background: var(--sk-schirm); box-shadow: none; } body.skin-kachel .p-bonus-stack .p-bonus-typebadge { background: var(--p-card); color: var(--p-muted); border: 1px solid var(--p-border); border-radius: 6px; } body.skin-kachel .p-bonus-body { display: flex; flex-direction: column; gap: 12px; } body.skin-kachel .p-bonus-body .p-bonus-title { order: 1; font-weight: 500; font-size: 1.18rem; line-height: 1.35; color: var(--sk-titel); } body.skin-kachel .p-bonus-body .p-bonus-desc { order: 2; color: var(--p-muted); opacity: 1; font-size: 0.95rem; line-height: 1.6; } body.skin-kachel .p-bonus-body .p-bonus-value { order: 3; align-self: flex-start; background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; color: var(--sk-zahl); font-weight: 700; font-size: 1.7rem; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } body.skin-kachel .p-bonus-body .p-bonus-btn { order: 4; align-self: flex-start; background: transparent; color: var(--p-fg); border: 1px solid var(--p-border); border-radius: 9px; box-shadow: none; padding: 10px 18px; font-weight: 500; font-size: 0.86rem; } body.skin-kachel .p-bonus-link:hover .p-bonus-btn { transform: none; box-shadow: none; border-color: var(--p-accent); } /* Einloese-Kachel */ body.skin-kachel .p-redeem { padding: 26px 28px 28px; margin: 14px 0 0; } body.skin-kachel .p-redeem-title { color: var(--sk-titel); -webkit-text-fill-color: var(--sk-titel); } body.skin-kachel .p-foot { border-top: 0; margin-top: 26px; padding: 22px 20px 6px; color: var(--p-muted); } body.skin-kachel .p-foot-links button, body.skin-kachel .p-foot-links a { color: var(--p-muted); font-size: 0.8rem; } body.skin-kachel .p-foot-meta, body.skin-kachel .p-foot-ki, body.skin-kachel .p-foot-copy { color: var(--p-muted); font-weight: 400; } /* Das Bento-Raster: ab Notebook-Breite stehen Fliesstext und Angebots-Kachel nebeneinander, wie in der zweiten Reihe des Entwurfs. Alles andere laeuft ueber die volle Breite. Der Nebeneinander-Fall gilt nur, wenn zwischen beiden nichts anderes steht, sonst zerfaellt die Zuordnung der Zeilen. */ @media (min-width: 940px) { body.skin-kachel .p-wrap { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; align-items: start; } body.skin-kachel .p-wrap > * { grid-column: 1 / -1; margin-top: 0; margin-bottom: 0; } body.skin-kachel .p-wrap:not(:has(> .p-lead)) > .p-body { grid-column: 1 / 2; } body.skin-kachel .p-wrap:not(:has(> .p-lead)) > .p-cta-block { grid-column: 2 / 3; } /* Ein Angebots-Kasten ohne Button und ohne Frist waere eine leere Kachel neben dem Text. */ body.skin-kachel .p-cta-block:not(:has(.p-cta-wrap)):not(:has(.p-countdown)) { display: none; } body.skin-kachel .p-bonus-stack-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 939px) { body.skin-kachel .p-bonus-stack-list { grid-template-columns: 1fr; } } @media (max-width: 640px) { body.skin-kachel .p-empfehlung { margin-top: 14px; padding: 12px 16px; border-radius: 12px; } body.skin-kachel .p-wrap { padding: 14px 14px 26px; } body.skin-kachel .p-hero { padding: 22px 20px 20px; } body.skin-kachel .p-video, body.skin-kachel .p-audio { padding: 18px 16px 20px; } body.skin-kachel .p-body { padding: 22px 20px 20px; } body.skin-kachel .p-cta-block, body.skin-kachel .p-cta-wdh { padding: 20px 18px 22px; } body.skin-kachel .p-bonus-link { padding: 18px; } body.skin-kachel .p-countdown .p-countdown-grid { gap: 12px; } body.skin-kachel .p-redeem { padding: 20px 18px 22px; } } /* ============================================================ 2) MANIFEST Ein Fachtext, der seine Behauptung gross an den Anfang stellt. Eine Ueberschrift ueber die volle Breite, ein einziger duenner Strich, danach eine schmale Textspalte. Die Akzentfarbe des Kunden ist der einzige Farbpunkt der Seite. Entworfen war die Vorlage auf Archivo. Im Bestand liegt davon nur der 400er, eine 116 Pixel grosse Zeile braucht aber 700. Barlow ist die einzige vorhandene Grotesk mit 300 bis 700 und traegt den Satz in derselben Haltung. ============================================================ */ /* Grundfassung: hell, so war die Vorlage entworfen. */ body.skin-manifest, [data-mode="light"] body.skin-manifest, body.skin-manifest[data-mode="light"] { --p-bg: #FBFAF8; --p-fg: #0B0B0B; --p-muted: #45433F; --p-card: #F1EFEB; --p-border: #DEDAD3; --sk-linie: #0B0B0B; --sk-haar: #DEDAD3; /* Entwurf: #8A8781. Auf dem Papier sind das 3.2:1, fuer 11 Pixel Versalien zu wenig. */ --sk-leise: #6E6B64; --sk-neben: #55534F; --sk-schirm: #F1EFEB; --sk-schirm-fg: #D6D2CA; } /* Nachtfassung: derselbe Satzspiegel auf dunklem Papier. Die Zurueckhaltung bleibt, es kommt kein Leuchten dazu. */ [data-mode="dark"] body.skin-manifest, body.skin-manifest[data-mode="dark"] { --p-bg: #0C0C0B; --p-fg: #F7F5F1; --p-muted: #BDB9B0; --p-card: #171715; --p-border: #34332E; --sk-linie: #F7F5F1; --sk-haar: #34332E; --sk-leise: #948F86; --sk-neben: #ADA89E; --sk-schirm: #171715; --sk-schirm-fg: #33322C; } body.skin-manifest { background: var(--p-bg); color: var(--p-fg); font-family: Barlow, 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 400; } /* Die Spalte ist breit, damit die Ueberschrift Platz hat. Der Fliesstext bekommt darin seine eigene, schmale Begrenzung. */ body.skin-manifest .p-wrap { --sk-spalte: 1180px; --sk-satz: 740px; max-width: var(--sk-spalte); padding: 52px 56px 46px; } body.skin-manifest .p-empfehlung { max-width: 1180px; margin: 40px auto 0; padding: 0 56px; justify-content: flex-start; gap: 11px; font-size: 0.9rem; color: var(--sk-neben); opacity: 1; } body.skin-manifest .p-empfehlung .p-empfehlung-avatar, body.skin-manifest .p-empfehlung .p-empfehlung-foto { width: 26px; height: 26px; border-radius: 50%; background: transparent; border: 1px solid var(--p-fg); color: var(--p-fg); font-weight: 700; font-size: 0.72rem; } body.skin-manifest .p-empfehlung .p-empfehlung-text b { color: var(--p-fg); font-weight: 600; } /* Die Behauptung: ueber die volle Breite, darunter ein Strich. */ body.skin-manifest .p-hero { text-align: left; padding: 34px 0 0; margin: 0; } /* Ein einziger duenner Strich, direkt unter der Behauptung. Die Unterzeile haengt darunter, so wie im Entwurf. */ body.skin-manifest .p-hero h1 { font-family: Barlow, 'Archivo', system-ui, sans-serif; font-weight: 700; font-size: clamp(2.6rem, 9vw, 7.2rem); line-height: 0.94; letter-spacing: -0.04em; color: var(--p-fg); margin: 0 0 22px; padding-bottom: 44px; border-bottom: 1px solid var(--sk-linie); } body.skin-manifest .p-sub { margin: 0; max-width: 620px; font-size: 1.32rem; font-weight: 500; line-height: 1.45; color: var(--p-fg); } /* Video: mittig und deutlich schmaler als die Textspalte, ohne Rahmen. Die Beschriftung steht im Markup davor und wandert per Reihenfolge unter das Bild, wie im Entwurf. */ body.skin-manifest .p-video, body.skin-manifest .p-audio { display: flex; flex-direction: column; width: min(520px, 100%); margin: 56px auto 0; background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; } body.skin-manifest .p-audio-label { order: 2; justify-content: center; margin: 9px 0 0; font-size: 0.78rem; color: var(--sk-leise); } body.skin-manifest .p-video-wrap, body.skin-manifest .p-audio-wrap { border: 0; border-radius: 0; background: var(--sk-schirm); box-shadow: none; } body.skin-manifest .p-video-play .p-video-play-core, body.skin-manifest .p-audio-play .p-audio-play-core { width: 66px; height: 66px; flex: 0 0 auto; aspect-ratio: 1; border-radius: 50%; background: var(--p-accent); color: var(--p-accent-fg); border: 0; box-shadow: none; } body.skin-manifest .p-video-play .p-video-play-hint { font-size: 0.78rem; letter-spacing: 0.02em; color: var(--sk-schirm-fg); } /* Der Satz: schmale Spalte, erster Absatz eine Spur groesser. */ body.skin-manifest .p-body { max-width: var(--sk-satz); margin: 66px 0 0; font-size: 1.06rem; line-height: 1.85; color: var(--p-muted); } body.skin-manifest .p-body p:first-of-type { font-size: 1.42rem; line-height: 1.6; font-weight: 500; color: var(--p-fg); } body.skin-manifest .p-body h2, body.skin-manifest .p-body h3 { font-weight: 700; letter-spacing: -0.03em; color: var(--p-fg); } /* Frist und Button, ohne Kasten. Darf mehrfach auftreten. */ body.skin-manifest .p-cta-block { max-width: var(--sk-satz); margin: 52px 0 0; background: transparent; border: 0; padding: 0; } body.skin-manifest .p-countdown { background: transparent; border: 0; padding: 0; } body.skin-manifest .p-countdown .p-countdown-label { font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--sk-leise); text-align: left; margin-bottom: 10px; } body.skin-manifest .p-countdown .p-countdown-grid { justify-content: flex-start; margin: 0; gap: 26px; } body.skin-manifest .p-countdown-box { min-width: 0; } body.skin-manifest .p-countdown-box .p-cd-flip { background: transparent; box-shadow: none; aspect-ratio: auto; border-radius: 0; } body.skin-manifest .p-countdown-box .p-cd-flip::before, body.skin-manifest .p-countdown-box .p-cd-flip::after { display: none; } body.skin-manifest .p-countdown-box .p-cd-flip .p-cd-num { font-family: Barlow, 'Archivo', system-ui, sans-serif; font-weight: 700; font-size: clamp(2rem, 6vw, 2.75rem); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--p-fg); text-shadow: none; } body.skin-manifest .p-countdown-box .p-cd-unit { font-size: 0.86rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--sk-neben); } body.skin-manifest .p-cta-wrap { text-align: left; margin-top: 26px; } body.skin-manifest .p-cta { background: var(--p-accent); color: var(--p-accent-fg); font-family: Barlow, 'Archivo', system-ui, sans-serif; font-weight: 600; font-size: 1.02rem; letter-spacing: 0; border-radius: 0; padding: 17px 40px; box-shadow: none; } body.skin-manifest .p-cta:hover { transform: translateY(-1px); box-shadow: none; } body.skin-manifest .p-cta-wdh { max-width: var(--sk-satz); margin: 52px 0 0; text-align: left; } body.skin-manifest .p-cta-wdh-vertrauen { margin: 0 0 14px; font-size: 0.94rem; color: var(--sk-neben); } body.skin-manifest .p-cta-wdh .p-cta-wrap { margin-top: 0; } /* Boni: nummerierte Zeilen im selben Satzspiegel, mit Haarlinie. */ body.skin-manifest .p-bonus-stack { max-width: var(--sk-satz); margin: 62px 0 0; } body.skin-manifest .p-bonus-stack-head { margin-bottom: 16px; } body.skin-manifest .p-bonus-stack-eyebrow { color: var(--sk-leise); opacity: 1; letter-spacing: 0.24em; font-weight: 400; } body.skin-manifest .p-bonus-stack-title { font-family: Barlow, 'Archivo', system-ui, sans-serif; font-weight: 700; font-size: clamp(1.4rem, 3vw, 1.9rem); letter-spacing: -0.03em; color: var(--p-fg); -webkit-text-fill-color: var(--p-fg); } body.skin-manifest .p-bonus-stack-title em, body.skin-manifest .p-redeem-title em { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--p-accent-ink); -webkit-text-fill-color: var(--p-accent-ink); } body.skin-manifest .p-bonus-stack-divider { background: var(--sk-linie); width: 100%; height: 1px; max-width: none; } body.skin-manifest .p-bonus-stack-list { grid-template-columns: 1fr; gap: 0; counter-reset: sk-pos; } body.skin-manifest .p-bonus-card { counter-increment: sk-pos; background: transparent; border: 0; border-bottom: 1px solid var(--sk-haar); border-radius: 0; } body.skin-manifest .p-bonus-link { display: grid; grid-template-columns: 34px 96px 1fr; align-items: center; gap: 20px; background: transparent; border: 0; border-radius: 0; padding: 20px 0 16px; color: var(--p-fg); } body.skin-manifest .p-bonus-link::before { content: counter(sk-pos, decimal-leading-zero); font-size: 0.94rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--p-accent-ink); } body.skin-manifest .p-bonus-link::after { display: none; } body.skin-manifest .p-bonus-link:hover { transform: none; box-shadow: none; background: var(--p-card); } body.skin-manifest .p-bonus-stack .p-bonus-cover-wrap { width: 96px; height: 64px; border-radius: 0; border: 1px solid var(--sk-haar); background: var(--sk-schirm); box-shadow: none; } body.skin-manifest .p-bonus-stack .p-bonus-typebadge { background: var(--p-fg); color: var(--p-bg); border: 0; border-radius: 0; font-size: 0.6rem; } body.skin-manifest .p-bonus-body { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 20px; row-gap: 6px; } body.skin-manifest .p-bonus-body .p-bonus-title { grid-column: 1; font-size: 1.16rem; font-weight: 500; color: var(--p-fg); } body.skin-manifest .p-bonus-body .p-bonus-value { grid-column: 2; grid-row: 1; justify-self: end; background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; font-size: 0.95rem; font-weight: 400; font-variant-numeric: tabular-nums; color: var(--sk-leise); } body.skin-manifest .p-bonus-body .p-bonus-desc { grid-column: 1 / -1; color: var(--sk-neben); opacity: 1; font-size: 0.95rem; line-height: 1.6; } body.skin-manifest .p-bonus-body .p-bonus-btn { grid-column: 1 / -1; justify-self: start; background: transparent; color: var(--p-fg); border: 0; border-bottom: 1px solid var(--p-accent-ink); border-radius: 0; box-shadow: none; padding: 8px 0; font-weight: 500; font-size: 0.9rem; } body.skin-manifest .p-bonus-link:hover .p-bonus-btn { transform: none; box-shadow: none; } body.skin-manifest .p-redeem { max-width: var(--sk-satz); background: transparent; border: 0; border-top: 1px solid var(--sk-linie); border-radius: 0; padding: 26px 0 0; margin-top: 52px; } body.skin-manifest .p-redeem-title { color: var(--p-fg); -webkit-text-fill-color: var(--p-fg); } body.skin-manifest .p-foot { margin-top: 78px; padding-top: 20px; border-top: 1px solid var(--sk-haar); text-align: left; align-items: flex-start; color: var(--sk-leise); } body.skin-manifest .p-foot-links { justify-content: flex-start; } body.skin-manifest .p-foot-links button, body.skin-manifest .p-foot-links a { color: var(--sk-leise); font-size: 0.8rem; } body.skin-manifest .p-foot-meta, body.skin-manifest .p-foot-ki, body.skin-manifest .p-foot-copy { color: var(--sk-leise); } @media (max-width: 860px) { body.skin-manifest .p-wrap { padding: 30px 22px 34px; } body.skin-manifest .p-empfehlung { padding: 0 22px; margin-top: 22px; } body.skin-manifest .p-hero h1 { margin-bottom: 26px; } body.skin-manifest .p-sub { font-size: 1.14rem; } body.skin-manifest .p-body { margin-top: 40px; } body.skin-manifest .p-body p:first-of-type { font-size: 1.2rem; } body.skin-manifest .p-video, body.skin-manifest .p-audio { margin-top: 36px; } body.skin-manifest .p-countdown .p-countdown-grid { gap: 16px; } body.skin-manifest .p-cta { display: flex; justify-content: center; width: 100%; } body.skin-manifest .p-bonus-link { grid-template-columns: 30px 1fr; gap: 12px; align-items: start; } body.skin-manifest .p-bonus-stack .p-bonus-cover-wrap { display: none; } body.skin-manifest .p-bonus-body { grid-template-columns: 1fr; } body.skin-manifest .p-bonus-body .p-bonus-value { grid-column: 1; grid-row: auto; justify-self: start; } body.skin-manifest .p-foot { margin-top: 48px; } } /* ============================================================ 3) BEIPACKZETTEL Ein Merkblatt. Kopfzeile mit kraeftigem Strich, Abschnitte mit Versal-Marken und Haarlinie darunter, die Boni als Positions- liste, die Abbildung mit Bildunterschrift. IBM Plex Sans, weil das die Schrift der Beipackzettel ist. Der Angebots-Kasten uebernimmt die zweispaltige Anlage des Entwurfs: Angaben links, Handlung rechts. Auf schmalen Bildschirmen bricht das einspaltig um. ============================================================ */ /* Grundfassung: hell, so war die Vorlage entworfen. */ body.skin-beipackzettel, [data-mode="light"] body.skin-beipackzettel, body.skin-beipackzettel[data-mode="light"] { --p-bg: #FCFCFA; --p-fg: #1A1A18; --p-muted: #45453F; --p-card: #F2F2EE; --p-border: #C9C9C2; --sk-stark: #1A1A18; --sk-strich: #C9C9C2; --sk-haar: #E2E2DC; /* Entwurf: #6E6E68. Auf dem Blatt sind das 4.4:1, knapp unter der Schwelle, deshalb eine Spur dunkler. */ --sk-leise: #63635C; --sk-neben: #55554F; --sk-abb: #F2F2EE; --sk-abb-fg: #C4C4BC; } /* Nachtfassung: dasselbe Merkblatt unter Lampenlicht. Es bleibt sachlich, es wird nicht stimmungsvoll: kein warmer Ton, kein Leuchten, nur ein neutral abgedunkeltes Blatt. */ [data-mode="dark"] body.skin-beipackzettel, body.skin-beipackzettel[data-mode="dark"] { --p-bg: #131316; --p-fg: #E9E9E5; --p-muted: #C2C2BC; --p-card: #1B1B1F; --p-border: #3B3B40; --sk-stark: #E9E9E5; --sk-strich: #3B3B40; --sk-haar: #2B2B30; --sk-leise: #97978F; --sk-neben: #ACACA4; --sk-abb: #1B1B1F; --sk-abb-fg: #45454A; } body.skin-beipackzettel { background: var(--p-bg); color: var(--p-fg); font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; } body.skin-beipackzettel .p-wrap { --sk-spalte: 1180px; --sk-satz: 760px; max-width: var(--sk-spalte); padding: 30px 52px 40px; } /* Kopf des Merkblatts: Empfehlungszeile ueber einem kraeftigen Strich. */ body.skin-beipackzettel .p-empfehlung { max-width: 1180px; margin: 44px auto 0; padding: 0 52px 14px; justify-content: flex-start; gap: 10px; font-size: 0.86rem; color: var(--sk-neben); opacity: 1; position: relative; } body.skin-beipackzettel .p-empfehlung::after { content: ""; position: absolute; left: 52px; right: 52px; bottom: 0; height: 2px; background: var(--sk-stark); } body.skin-beipackzettel .p-empfehlung .p-empfehlung-avatar, body.skin-beipackzettel .p-empfehlung .p-empfehlung-foto { width: 26px; height: 26px; border-radius: 50%; background: transparent; border: 1px solid var(--p-border); color: var(--p-fg); font-weight: 700; font-size: 0.72rem; } body.skin-beipackzettel .p-empfehlung .p-empfehlung-text b { color: var(--p-fg); font-weight: 600; } body.skin-beipackzettel .p-hero { text-align: left; padding: 26px 0 0; margin-bottom: 0; max-width: var(--sk-satz); } body.skin-beipackzettel .p-hero::before { content: "Merkblatt zur Anwendung"; display: block; font-size: 0.68rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--sk-leise); margin-bottom: 12px; } body.skin-beipackzettel .p-hero h1 { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: clamp(1.9rem, 4vw, 2.5rem); line-height: 1.14; letter-spacing: -0.022em; color: var(--p-fg); margin: 0; } body.skin-beipackzettel .p-sub { margin: 14px 0 0; max-width: var(--sk-satz); margin-left: 0; margin-right: 0; font-size: 1.04rem; line-height: 1.7; color: var(--p-muted); } /* Abbildung: einfacher Rahmen, Bildunterschrift darunter. Die Beschriftung steht im Markup vor dem Bild und wandert per Reihenfolge nach unten. */ body.skin-beipackzettel .p-video, body.skin-beipackzettel .p-audio { display: flex; flex-direction: column; max-width: var(--sk-satz); margin: 30px 0 0; background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; } body.skin-beipackzettel .p-audio-label { order: 2; margin: 8px 0 0; font-size: 0.78rem; color: var(--sk-leise); } body.skin-beipackzettel .p-video-wrap, body.skin-beipackzettel .p-audio-wrap { border: 1px solid var(--sk-strich); border-radius: 0; background: var(--sk-abb); box-shadow: none; } body.skin-beipackzettel .p-video-play .p-video-play-core, body.skin-beipackzettel .p-audio-play .p-audio-play-core { width: 66px; height: 66px; flex: 0 0 auto; aspect-ratio: 1; border-radius: 50%; background: var(--p-accent); color: var(--p-accent-fg); border: 0; box-shadow: none; } body.skin-beipackzettel .p-video-play .p-video-play-hint { font-size: 0.78rem; letter-spacing: 0.02em; color: var(--sk-abb-fg); } /* Der Merkblatt-Text. Zwischenueberschriften werden zu Abschnitts-Marken mit Haarlinie, wie im Entwurf. */ body.skin-beipackzettel .p-body { max-width: var(--sk-satz); margin: 34px 0 0; font-size: 0.98rem; line-height: 1.8; color: var(--p-muted); } body.skin-beipackzettel .p-body h2, body.skin-beipackzettel .p-body h3 { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--p-fg); margin: 34px 0 0; padding-bottom: 10px; border-bottom: 1px solid var(--sk-strich); } body.skin-beipackzettel .p-body h2 + p, body.skin-beipackzettel .p-body h3 + p { margin-top: 14px; } /* Angebots-Kasten: Angaben links, Handlung rechts. Er kann mehrfach auf der Seite stehen, deshalb nichts Abschliessendes. */ body.skin-beipackzettel .p-cta-block { margin: 40px 0 0; padding: 22px 0 0; border-top: 1px solid var(--sk-strich); background: transparent; } body.skin-beipackzettel .p-countdown { background: transparent; border: 0; padding: 0; } body.skin-beipackzettel .p-countdown .p-countdown-label { font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sk-leise); text-align: left; margin-bottom: 9px; } body.skin-beipackzettel .p-countdown .p-countdown-grid { justify-content: flex-start; margin: 0; gap: 16px; } body.skin-beipackzettel .p-countdown-box { min-width: 0; } body.skin-beipackzettel .p-countdown-box .p-cd-flip { background: transparent; box-shadow: none; aspect-ratio: auto; border-radius: 0; } body.skin-beipackzettel .p-countdown-box .p-cd-flip::before, body.skin-beipackzettel .p-countdown-box .p-cd-flip::after { display: none; } body.skin-beipackzettel .p-countdown-box .p-cd-flip .p-cd-num { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: clamp(1.5rem, 4.6vw, 1.65rem); font-variant-numeric: tabular-nums; color: var(--p-fg); text-shadow: none; } body.skin-beipackzettel .p-countdown-box .p-cd-unit { font-size: 0.72rem; font-weight: 400; letter-spacing: 0.04em; text-transform: none; color: var(--sk-leise); } body.skin-beipackzettel .p-cta-wrap { text-align: left; margin-top: 0; } body.skin-beipackzettel .p-cta { background: var(--p-accent); color: var(--p-accent-fg); font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: 1rem; letter-spacing: 0; border-radius: 4px; padding: 15px 34px; box-shadow: none; } body.skin-beipackzettel .p-cta:hover { transform: translateY(-1px); box-shadow: none; } body.skin-beipackzettel .p-cta-wdh { max-width: var(--sk-satz); margin: 30px 0 0; text-align: left; } body.skin-beipackzettel .p-cta-wdh-vertrauen { margin: 0 0 11px; font-size: 0.94rem; color: var(--sk-neben); } body.skin-beipackzettel .p-cta-wdh .p-cta-wrap { margin-top: 0; } /* Boni als Positionsliste */ body.skin-beipackzettel .p-bonus-stack { max-width: var(--sk-satz); margin: 40px 0 0; } body.skin-beipackzettel .p-bonus-stack-head { margin-bottom: 0; } body.skin-beipackzettel .p-bonus-stack-eyebrow { color: var(--sk-leise); opacity: 1; letter-spacing: 0.22em; font-weight: 400; } body.skin-beipackzettel .p-bonus-stack-title { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: clamp(1.1rem, 2.2vw, 1.3rem); letter-spacing: -0.01em; color: var(--p-fg); -webkit-text-fill-color: var(--p-fg); } body.skin-beipackzettel .p-bonus-stack-title em, body.skin-beipackzettel .p-redeem-title em { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--p-accent-ink); -webkit-text-fill-color: var(--p-accent-ink); } body.skin-beipackzettel .p-bonus-stack-divider { background: var(--sk-strich); width: 100%; height: 1px; max-width: none; margin-top: 10px; } body.skin-beipackzettel .p-bonus-stack-list { grid-template-columns: 1fr; gap: 0; counter-reset: sk-pos; margin-top: 0; } body.skin-beipackzettel .p-bonus-card { counter-increment: sk-pos; background: transparent; border: 0; border-bottom: 1px solid var(--sk-haar); border-radius: 0; } body.skin-beipackzettel .p-bonus-link { display: grid; grid-template-columns: 54px 84px 1fr; align-items: center; gap: 16px; background: transparent; border: 0; border-radius: 0; padding: 13px 0; color: var(--p-fg); } body.skin-beipackzettel .p-bonus-link::before { content: "Pos. " counter(sk-pos); font-size: 0.86rem; font-variant-numeric: tabular-nums; color: var(--sk-leise); white-space: nowrap; } body.skin-beipackzettel .p-bonus-link::after { display: none; } body.skin-beipackzettel .p-bonus-link:hover { transform: none; box-shadow: none; background: var(--p-card); } body.skin-beipackzettel .p-bonus-stack .p-bonus-cover-wrap { width: 84px; height: 56px; border-radius: 0; border: 1px solid var(--sk-strich); background: var(--sk-abb); box-shadow: none; } body.skin-beipackzettel .p-bonus-stack .p-bonus-typebadge { background: var(--p-fg); color: var(--p-bg); border: 0; border-radius: 0; font-size: 0.6rem; } body.skin-beipackzettel .p-bonus-body { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 16px; row-gap: 5px; } body.skin-beipackzettel .p-bonus-body .p-bonus-title { grid-column: 1; font-size: 0.98rem; font-weight: 500; color: var(--p-fg); } body.skin-beipackzettel .p-bonus-body .p-bonus-value { grid-column: 2; grid-row: 1; justify-self: end; background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; font-size: 0.95rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--p-fg); } body.skin-beipackzettel .p-bonus-body .p-bonus-desc { grid-column: 1 / -1; color: var(--sk-neben); opacity: 1; font-size: 0.95rem; line-height: 1.6; } body.skin-beipackzettel .p-bonus-body .p-bonus-btn { grid-column: 1 / -1; justify-self: start; background: transparent; color: var(--p-fg); border: 1px solid var(--sk-strich); border-radius: 4px; box-shadow: none; padding: 9px 16px; font-weight: 500; font-size: 0.86rem; } body.skin-beipackzettel .p-bonus-link:hover .p-bonus-btn { transform: none; box-shadow: none; border-color: var(--p-accent); } body.skin-beipackzettel .p-redeem { max-width: var(--sk-satz); background: transparent; border: 0; border-top: 2px solid var(--sk-stark); border-radius: 0; padding: 24px 0 0; margin-top: 40px; } body.skin-beipackzettel .p-redeem-title { color: var(--p-fg); -webkit-text-fill-color: var(--p-fg); } body.skin-beipackzettel .p-foot { margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--sk-haar); text-align: left; align-items: flex-start; color: var(--sk-leise); } body.skin-beipackzettel .p-foot-links { justify-content: flex-start; } body.skin-beipackzettel .p-foot-links button, body.skin-beipackzettel .p-foot-links a { color: var(--sk-leise); font-size: 0.8rem; } body.skin-beipackzettel .p-foot-meta, body.skin-beipackzettel .p-foot-ki, body.skin-beipackzettel .p-foot-copy { color: var(--sk-leise); } /* Zweispaltige Anlage des Angebots-Kastens: die Angaben (Frist) stehen links in der schmalen Spalte, die Handlung rechts. */ @media (min-width: 860px) { body.skin-beipackzettel .p-cta-block { max-width: var(--sk-spalte); display: grid; grid-template-columns: 300px minmax(0, 1fr); align-items: start; gap: 60px; } /* Bewusst ohne Trennstrich zwischen den Spalten: eine senkrechte Linie neben Frist und Button liest sich schnell als Darstellungs- fehler. Der Abstand trennt genug, so wie im Entwurf. */ body.skin-beipackzettel .p-cta-block > .p-countdown { padding-right: 0; } body.skin-beipackzettel .p-cta-block > .p-cta-wrap { max-width: var(--sk-satz); } } @media (max-width: 859px) { body.skin-beipackzettel .p-wrap { padding: 22px 18px 32px; } body.skin-beipackzettel .p-empfehlung { padding: 0 18px 12px; margin-top: 22px; } body.skin-beipackzettel .p-empfehlung::after { left: 18px; right: 18px; } body.skin-beipackzettel .p-cta-block { margin-top: 30px; } body.skin-beipackzettel .p-cta-wrap { margin-top: 18px; } body.skin-beipackzettel .p-countdown .p-countdown-grid { gap: 12px; } body.skin-beipackzettel .p-cta { display: flex; justify-content: center; width: 100%; } body.skin-beipackzettel .p-bonus-link { grid-template-columns: 54px 1fr; gap: 12px; align-items: start; } body.skin-beipackzettel .p-bonus-stack .p-bonus-cover-wrap { display: none; } body.skin-beipackzettel .p-bonus-body { grid-template-columns: 1fr; } body.skin-beipackzettel .p-bonus-body .p-bonus-value { grid-column: 1; grid-row: auto; justify-self: start; } } /* ------------------------------------------------------------ Ruhe-Wunsch des Systems achten. Diese drei Vorlagen bewegen ohnehin nichts von sich aus, die Hover-Verschiebung bleibt aber ebenfalls aus. ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { body.skin-kachel .p-cta:hover, body.skin-manifest .p-cta:hover, body.skin-beipackzettel .p-cta:hover { transform: none; } }