/* ============================================================ Kampagnen-Skin: ACM Stil-Anlehnung an die Farbwelt einer beworbenen Verkaufsseite: tiefes Schwarz als Grund, ein Gold-Dreiklang als einzige Signalfarbe, Pillen-Buttons, Glasflaechen und eine feine Lichtkante oben auf jeder Karte. Uebernommen sind ausschliesslich Farbwerte, Schrift-Charakter, Formensprache und Aufbau-Prinzip. KEINE Kopie: keine Wortmarke, kein Logo, keine fremden Bilder, keine fremden Texte, keine Emoji-Bestueckung, keine Zahlen der Zielseite. Alle Zeichen der Seite bleiben Inline-SVG aus dem eigenen Markup. Zwei vollwertige Fassungen. Der Modus steht als data-mode an UND an , deshalb ist jede modusabhaengige Regel doppelt geschrieben. Die Fassungen setzen ausschliesslich Variablen, die Bausteine darunter arbeiten nur mit diesen. ============================================================ */ /* ------------------------------------------------------------ Bonus-Block auf null. Die Seite bringt fuer den Block Leuchtrand, Verlaufs-Rahmen als ::before, Radius und Schlagschatten mit. Die Vorlage baut ihn selbst, deshalb hier einmal zuruecksetzen. Flaeche, Rahmen und Schriftfarben folgen weiter unten ausdruecklich, in BEIDEN Fassungen. ------------------------------------------------------------ */ body.skin-acm .p-bonus-stack { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; overflow: visible; } body.skin-acm .p-bonus-stack::before { display: none; } /* ============================================================ 1) FARBEN, FASSUNG DUNKEL Die Nachtfassung ist der Ausgangspunkt der Vorlage. --p-accent traegt hier ausnahmsweise nicht den Kundenton, sondern das Gold: die Vorlage lebt von genau diesem einen Farbpaar. Schwarz traegt, Gold fuehrt, sonst nichts. Ein beliebiger Kundenton neben dem Gold der Flaechen wuerde die Wiedererkennung sofort aufloesen, so wie es bei Terminal und Zeitung schon begruendet ist. ============================================================ */ body.skin-acm, [data-mode="dark"] body.skin-acm, body.skin-acm[data-mode="dark"] { --p-bg: #080808; --p-fg: #F0F0F0; /* Der Nebenton der Zielseite ist #777. Auf #080808 liegt der bei 4.06:1 und faellt damit durch. Angehoben auf #9A9A9A: 7.1:1. */ --p-muted: #9A9A9A; --p-card: #131313; --p-border: #34301F; --p-accent: #FFD700; --p-accent-fg: #080808; /* Gold als Schrift traegt auf Schwarz muehelos (14.3:1), deshalb hier voll statt der sonst ueblichen Mischung. */ --p-accent-ink: #FFD700; /* Gold-Dreiklang, in beiden Fassungen gleich: er sitzt nur auf Flaechen, nie auf Schrift. */ --sk-gold-d: #B8960C; --sk-gold: #FFD700; --sk-gold-h: #FFE55C; /* Gold als Schrift, modusabhaengig. */ --sk-ink: #FFD700; /* Zweiter Grund fuer Fuss und Angebots-Kasten */ --sk-grund2: #0F0F0F; /* Glasflaeche der Countdown-Felder und der Empfehlungs-Pille */ --sk-glas: rgba(255,255,255,0.045); /* Feiner Goldrand, nie ein voller Rahmen */ --sk-rand: rgba(255,215,0,0.18); --sk-rand-stark: rgba(255,215,0,0.42); /* Lichtkante oben auf der Karte, laeuft beidseitig aus */ --sk-kante: linear-gradient(90deg, rgba(255,215,0,0) 0%, rgba(255,215,0,0.85) 50%, rgba(255,215,0,0) 100%); /* Weicher Goldschein hinter dem Kopfbereich, einzige Deko */ --sk-glanz: radial-gradient(circle at 50% 0%, rgba(255,215,0,0.11) 0%, rgba(255,215,0,0.035) 42%, rgba(255,215,0,0) 70%); /* Bildflaeche hinter dem Video */ --sk-schirm: linear-gradient(158deg, #17150E 0%, #0B0B0B 52%, #0A0A0A 100%); --sk-schatten: 0 34px 70px rgba(0,0,0,0.6), 0 0 46px rgba(255,215,0,0.07); --sk-leuchten: 0 0 34px rgba(255,215,0,0.32); --sk-leuchten-stark: 0 0 52px rgba(255,215,0,0.48); /* Feld fuer Wertangaben */ --sk-wert-flaeche: rgba(255,215,0,0.07); --sk-wert-rand: rgba(255,215,0,0.2); } /* ============================================================ 2) FARBEN, FASSUNG HELL Kein Umkehren des Schwarz, sondern ein eigenes Blatt: warmes Papier, das den Goldton weiterfuehrt. Gold traegt auf Weiss nicht. Deshalb wandert jede goldene SCHRIFT auf einen dunkleren Messington (#7A5E00, 5.8:1 auf dem Papier), waehrend das helle Gold ausschliesslich als FLAECHE stehen bleibt: Button, Play-Kreis, Wert-Feld. Auf diesen Flaechen sitzt schwarze Schrift und kommt auf 14:1. ============================================================ */ [data-mode="light"] body.skin-acm, body.skin-acm[data-mode="light"] { --p-bg: #FBF9F2; --p-fg: #14130E; --p-muted: #5C5548; --p-card: #FFFFFF; --p-border: #E1D8BE; --p-accent: #7A5E00; --p-accent-fg: #FFFBEE; --p-accent-ink: #7A5E00; --sk-gold-d: #B8960C; --sk-gold: #FFD700; --sk-gold-h: #FFE55C; --sk-ink: #7A5E00; --sk-grund2: #F3EEDF; --sk-glas: #FFFDF6; --sk-rand: rgba(122,94,0,0.24); --sk-rand-stark: rgba(122,94,0,0.5); --sk-kante: linear-gradient(90deg, rgba(122,94,0,0) 0%, rgba(184,150,12,0.85) 50%, rgba(122,94,0,0) 100%); --sk-glanz: radial-gradient(circle at 50% 0%, rgba(255,215,0,0.3) 0%, rgba(255,215,0,0.09) 44%, rgba(255,215,0,0) 70%); --sk-schirm: linear-gradient(158deg, #2A2519 0%, #14130E 52%, #101008 100%); --sk-schatten: 0 30px 60px -34px rgba(40,32,4,0.45), 0 0 40px rgba(255,215,0,0.14); --sk-leuchten: 0 10px 26px -10px rgba(122,94,0,0.5); --sk-leuchten-stark: 0 16px 36px -12px rgba(122,94,0,0.62); --sk-wert-flaeche: #FDF6DF; --sk-wert-rand: rgba(122,94,0,0.26); } /* ============================================================ 3) GRUNDLAGEN Schrift: Inter, wie auf der Zielseite. Selbst gehostet sind davon aber nur 300 bis 600. Die Vorlage lebt von 800 und 900, deshalb tragen alle schweren Schnitte Plus Jakarta Sans, die naechstbeste vorhandene Grotesk mit 800. Inter bleibt in der Rueckfall-Kette, damit der Zeichensatz stimmt. ============================================================ */ body.skin-acm { background: var(--p-bg); color: var(--p-fg); font-family: Inter, 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-weight: 400; --sk-anzeige: Inter, 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } body.skin-acm .p-wrap { --sk-spalte: 1120px; max-width: var(--sk-spalte); padding: 30px 32px 56px; position: relative; } /* Der Goldschein liegt hinter dem Kopfbereich, nicht darueber. Er ist bewusst schwach: der Text soll nicht ueberstrahlt werden. */ body.skin-acm .p-wrap::before { content: ""; position: absolute; top: -120px; left: 50%; width: min(760px, 96vw); height: 620px; transform: translateX(-50%); background: var(--sk-glanz); pointer-events: none; z-index: 0; } body.skin-acm .p-wrap > * { position: relative; z-index: 1; } /* ============================================================ 4) EMPFEHLUNGS-ZEILE Pille mit rundem Kuerzel. Sie ersetzt die Kopfleiste der Zielseite und macht ab der ersten Zeile klar, wer hier spricht. ============================================================ */ body.skin-acm .p-empfehlung { justify-content: center; gap: 12px; padding: 8px 20px 8px 8px; width: max-content; max-width: calc(100% - 32px); margin: 26px auto 0; background: var(--sk-glas); border: 1px solid var(--sk-rand); border-radius: 50px; font-size: 0.88rem; font-weight: 500; color: var(--p-muted); opacity: 1; } body.skin-acm .p-empfehlung .p-empfehlung-avatar, body.skin-acm .p-empfehlung .p-empfehlung-foto { width: 38px; height: 38px; border-radius: 50%; border: 0; background: linear-gradient(135deg, var(--sk-gold-d), var(--sk-gold) 55%, var(--sk-gold-h)); color: #080808; font-family: var(--sk-anzeige); font-weight: 800; font-size: 1.05rem; } body.skin-acm .p-empfehlung .p-empfehlung-text { color: var(--p-muted); } body.skin-acm .p-empfehlung .p-empfehlung-text b { color: var(--p-fg); font-weight: 700; } /* ============================================================ 5) KOPFBEREICH Mittig gesetzt, sehr fette Ueberschrift, zurueckhaltende Unterzeile. Das Verhaeltnis Ueberschrift zu Text liegt bei etwa drei zu eins, wie in der Vorlage. ============================================================ */ body.skin-acm .p-hero { text-align: center; padding-top: 34px; margin-bottom: 10px; } body.skin-acm .p-hero h1 { font-family: var(--sk-anzeige); font-weight: 800; font-size: clamp(2.15rem, 5.4vw, 4.25rem); line-height: 1.06; letter-spacing: -0.025em; color: var(--p-fg); max-width: 18ch; margin-inline: auto; } /* Betonte Woerter der Ueberschrift vollflaechig, kein Verlauf: ein background-clip-Verlauf faellt im Zweifel auf unsichtbar zurueck. */ body.skin-acm .p-hero h1 strong, body.skin-acm .p-hero h1 em, body.skin-acm .p-hero h1 b { font-weight: 800; font-style: normal; color: var(--sk-ink); } body.skin-acm .p-sub { font-size: 1.06rem; font-weight: 400; line-height: 1.7; color: var(--p-muted); max-width: 56ch; margin: 20px auto 0; text-wrap: balance; } body.skin-acm .p-sub strong, body.skin-acm .p-sub b { color: var(--p-fg); font-weight: 600; } /* ============================================================ 6) VIDEO UND AUDIO Gerahmte Flaeche mit Innenkante, oben die Lichtkante. Kein Aufricht-Code: geneigte Medien regelt die Grundlagen-Datei. ============================================================ */ body.skin-acm .p-video, body.skin-acm .p-audio { position: relative; margin: 36px auto 0; max-width: 940px; padding: 10px; background: var(--sk-grund2); border: 1px solid var(--sk-rand); border-radius: 22px; box-shadow: var(--sk-schatten); } body.skin-acm .p-audio-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sk-ink); margin: 6px 4px 10px; } body.skin-acm .p-video-wrap, body.skin-acm .p-audio-wrap { position: relative; border: 0; border-radius: 14px; background: var(--sk-schirm); box-shadow: none; margin-top: 0; overflow: hidden; } /* Signaturelement: die Lichtkante oben, beidseitig auslaufend. Kein angeschnittener Rahmen, kein durchgehender Strich quer ueber die Spalte. */ body.skin-acm .p-video-wrap::before, body.skin-acm .p-audio-wrap::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--sk-kante); pointer-events: none; z-index: 5; } body.skin-acm .p-video-wrap::after { border-radius: 14px; box-shadow: 0 0 0 1px var(--sk-rand) inset; } body.skin-acm .p-video-wrap.is-playing { border: 0; box-shadow: none; } body.skin-acm .p-video-play .p-video-play-core, body.skin-acm .p-audio-play .p-audio-play-core { width: 92px; height: 92px; border: 0; border-radius: 50%; background: linear-gradient(135deg, var(--sk-gold-d), var(--sk-gold) 55%, var(--sk-gold-h)); color: #080808; box-shadow: 0 0 46px rgba(255,215,0,0.38); } body.skin-acm .p-video-play:hover .p-video-play-core { transform: scale(1.07); box-shadow: 0 0 62px rgba(255,215,0,0.52); } body.skin-acm .p-video-play .p-video-play-hint { font-family: var(--sk-anzeige); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: #F0F0F0; } /* ============================================================ 7) FLIESSTEXT Linksbuendig, ruhig, mit weiter Zeilenhoehe. Nie unter 16 Pixel. ============================================================ */ body.skin-acm .p-body { font-size: 1.02rem; line-height: 1.85; color: var(--p-muted); max-width: 66ch; margin-inline: auto; padding-top: 8px; } body.skin-acm .p-body strong, body.skin-acm .p-body b { color: var(--p-fg); font-weight: 600; } body.skin-acm .p-body h2, body.skin-acm .p-body h3 { font-family: var(--sk-anzeige); font-weight: 800; letter-spacing: -0.018em; line-height: 1.22; color: var(--p-fg); } body.skin-acm .p-body h2 { font-size: clamp(1.5rem, 3vw, 2.05rem); } body.skin-acm .p-body h3 { font-size: clamp(1.2rem, 2.2vw, 1.4rem); } body.skin-acm .p-body blockquote { border-left: 2px solid var(--sk-ink); color: var(--p-fg); font-style: normal; } body.skin-acm .p-body img { border-radius: 14px; } /* ============================================================ 8) ANGEBOTS-KASTEN MIT COUNTDOWN Eine ruhige Karte auf zweitem Grund, oben die Lichtkante. Der Countdown sind gleich grosse Glasfelder in einer Reihe. ============================================================ */ body.skin-acm .p-cta-block { position: relative; margin: 52px auto 0; max-width: 940px; padding: 40px 28px 38px; background: var(--sk-grund2); border: 1px solid var(--sk-rand); border-radius: 24px; overflow: hidden; text-align: center; } body.skin-acm .p-cta-block::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--sk-kante); pointer-events: none; } body.skin-acm .p-countdown { background: transparent; border: 0; padding: 0; margin: 0 auto; max-width: none; } body.skin-acm .p-countdown .p-countdown-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--p-muted); margin-bottom: 18px; } body.skin-acm .p-countdown .p-countdown-grid { justify-content: center; gap: 16px; margin: 0; } body.skin-acm .p-countdown-box { min-width: 96px; max-width: 132px; gap: 0; background: var(--sk-glas); border: 1px solid var(--sk-rand); border-radius: 16px; padding: 18px 12px 14px; } body.skin-acm .p-countdown-box .p-cd-flip { background: transparent; box-shadow: none; aspect-ratio: auto; border-radius: 0; border: 0; } body.skin-acm .p-countdown-box .p-cd-flip::before, body.skin-acm .p-countdown-box .p-cd-flip::after { display: none; } body.skin-acm .p-countdown-box .p-cd-flip .p-cd-num, body.skin-acm .p-countdown-color .p-cd-flip .p-cd-num { font-family: var(--sk-anzeige); font-weight: 800; font-size: clamp(2rem, 6vw, 2.7rem); line-height: 1; color: var(--sk-ink); font-variant-numeric: tabular-nums; text-shadow: none; background: transparent; } body.skin-acm .p-countdown-box .p-cd-unit { margin-top: 8px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--p-muted); } body.skin-acm .p-countdown.is-expired .p-countdown-expired { color: var(--p-fg); } /* ============================================================ 9) HANDLUNGSAUFRUF Pillenform mit Gold-Verlauf und schwarzer Schrift, Leuchten statt Schlagschatten. In beiden Fassungen identisch: das ist der Wiedererkennungswert, und schwarz auf Gold traegt ueberall. ============================================================ */ body.skin-acm .p-cta-wrap { text-align: center; margin-top: 22px; } body.skin-acm .p-cta { background: linear-gradient(135deg, var(--sk-gold-d), var(--sk-gold) 52%, var(--sk-gold-h)); color: #080808; font-family: var(--sk-anzeige); font-weight: 800; font-size: 1.02rem; letter-spacing: 0.01em; padding: 19px 46px; border-radius: 50px; box-shadow: var(--sk-leuchten); margin-top: 0; } body.skin-acm .p-cta:hover { transform: translateY(-2px); box-shadow: var(--sk-leuchten-stark); } body.skin-acm .p-cta-groesse-mittel { padding: 21px 52px; font-size: 1.12rem; } body.skin-acm .p-cta-groesse-gross { padding: 24px 62px; font-size: 1.28rem; } /* ------------------------------------------------------------ Wiederholte Handlungsaufrufe. Der Button steht mehrfach auf der Seite, deshalb bekommt die Wiederholung bewusst KEINE Abschluss-Optik: kein Kasten, keine Lichtkante, kein Leuchtrahmen. Nur die Vertrauens-Zeile mit Haken und darunter derselbe Button. ------------------------------------------------------------ */ body.skin-acm .p-cta-wdh { margin: 40px auto; max-width: 940px; padding: 0; background: transparent; border: 0; text-align: center; } body.skin-acm .p-cta-wdh-vertrauen { display: inline-flex; align-items: flex-start; gap: 9px; margin: 0 auto 16px; max-width: 46ch; font-size: 0.92rem; line-height: 1.55; color: var(--p-muted); text-align: left; } /* Haken als Inline-SVG in der Variable, kein Zeichensatz-Symbol und kein Emoji. */ body.skin-acm .p-cta-wdh-vertrauen::before { content: ""; flex: 0 0 auto; width: 16px; height: 16px; margin-top: 3px; background-color: var(--sk-ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.6l4.4 4.4L19 7.4' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.6l4.4 4.4L19 7.4' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; } body.skin-acm .p-cta-wdh .p-cta-wrap { margin-top: 0; } /* ============================================================ 10) BONI Karten mit Glasflaeche, feinem Goldrand und Lichtkante oben. Farben stehen hier ausdruecklich, weil die Grundlagen-Datei den Titel per -webkit-text-fill-color faerbt und die Cover-Kachel sonst als dunkler Klotz auf dem Papier steht. ============================================================ */ body.skin-acm .p-bonus-stack { margin: 56px auto 0; max-width: 940px; } body.skin-acm .p-bonus-stack-head { align-items: center; text-align: center; gap: 8px; margin-bottom: 30px; } body.skin-acm .p-bonus-stack-eyebrow, body.skin-acm .p-bonus-stack .p-bonus-stack-eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sk-ink); opacity: 1; } body.skin-acm .p-bonus-stack-title, body.skin-acm .p-bonus-stack .p-bonus-stack-title, body.skin-acm .p-redeem-title { font-family: var(--sk-anzeige); font-weight: 800; font-size: clamp(1.45rem, 3vw, 2.05rem); line-height: 1.2; letter-spacing: -0.018em; justify-content: center; background: none; color: var(--p-fg); -webkit-text-fill-color: var(--p-fg); } /* Betontes Wort vollflaechig im Goldton der jeweiligen Fassung, nicht als Verlaufsschrift. */ body.skin-acm .p-bonus-stack-title em, body.skin-acm .p-bonus-stack .p-bonus-stack-title em, body.skin-acm .p-redeem-title em { background: none; background-image: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--sk-ink); -webkit-text-fill-color: var(--sk-ink); } /* Das Geschenk-Emoji faellt weg, alle Zeichen sind Inline-SVG. */ body.skin-acm .p-bonus-stack-gift { display: none; } body.skin-acm .p-bonus-stack-divider, body.skin-acm .p-bonus-stack .p-bonus-stack-divider { width: 84px; height: 2px; margin: 6px auto 0; border-radius: 0; /* laeuft nach beiden Seiten aus, wie die Lichtkante */ background: var(--sk-kante); } body.skin-acm .p-bonus-stack-list { gap: 22px; } body.skin-acm .p-bonus-card, body.skin-acm .p-bonus-stack .p-bonus-card { background: transparent; border: 0; } body.skin-acm .p-bonus-link, body.skin-acm .p-bonus-stack .p-bonus-link { position: relative; display: grid; grid-template-columns: 84px 1fr; gap: 18px; padding: 26px 24px 24px; background: var(--sk-glas); border: 1px solid var(--sk-rand); border-radius: 20px; color: var(--p-fg); overflow: hidden; } body.skin-acm .p-bonus-link::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--sk-kante); pointer-events: none; z-index: 2; } body.skin-acm .p-bonus-link::after { display: none; } body.skin-acm .p-bonus-link:hover { transform: translateY(-3px); border-color: var(--sk-rand-stark); box-shadow: 0 30px 60px -30px rgba(0,0,0,0.55), 0 0 30px rgba(255,215,0,0.1); } body.skin-acm .p-bonus-link:focus-visible { outline: 2px solid var(--sk-ink); outline-offset: 3px; } body.skin-acm .p-bonus-stack .p-bonus-cover-wrap { width: 84px; height: 84px; border-radius: 13px; /* nicht die fast schwarze Grundfuellung: die stuende auf dem hellen Papier als Klotz neben dem Bild */ background: var(--sk-wert-flaeche); border: 1px solid var(--sk-wert-rand); box-shadow: none; overflow: hidden; } body.skin-acm .p-bonus-stack .p-bonus-cover { border-radius: 12px; } body.skin-acm .p-bonus-stack .p-bonus-typebadge { background: linear-gradient(135deg, var(--sk-gold-d), var(--sk-gold) 55%, var(--sk-gold-h)); color: #080808; border: 0; border-radius: 50px; font-weight: 700; } body.skin-acm .p-bonus-body .p-bonus-title, body.skin-acm .p-bonus-stack .p-bonus-title { font-family: var(--sk-anzeige); font-weight: 800; font-size: 1.1rem; line-height: 1.35; color: var(--p-fg); } body.skin-acm .p-bonus-body .p-bonus-desc, body.skin-acm .p-bonus-stack .p-bonus-desc { font-size: 0.94rem; line-height: 1.7; color: var(--p-muted); opacity: 1; } body.skin-acm .p-bonus-body .p-bonus-value { background: var(--sk-wert-flaeche); color: var(--sk-ink); border: 1px solid var(--sk-wert-rand); border-radius: 10px; box-shadow: none; font-weight: 800; letter-spacing: 0.01em; } body.skin-acm .p-bonus-body .p-bonus-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 11px 24px; background: linear-gradient(135deg, var(--sk-gold-d), var(--sk-gold) 52%, var(--sk-gold-h)); color: #080808; border: 0; border-radius: 50px; box-shadow: none; font-family: var(--sk-anzeige); font-weight: 800; font-size: 0.9rem; } body.skin-acm .p-bonus-link:hover .p-bonus-btn { transform: none; box-shadow: var(--sk-leuchten); } /* ============================================================ 11) EINLOESE-BLOCK Erbt die Kartenform der Boni, damit kein zweites Formenbild entsteht. ============================================================ */ body.skin-acm .p-redeem { position: relative; background: var(--sk-grund2); border: 1px solid var(--sk-rand); border-radius: 22px; box-shadow: none; overflow: hidden; } body.skin-acm .p-redeem::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--sk-kante); pointer-events: none; } body.skin-acm .p-redeem-eyebrow { color: var(--sk-ink); opacity: 1; } /* ============================================================ 12) FUSSZEILE Auf zweitem Grund, ruhig, ohne Marken-Anmutung. ============================================================ */ body.skin-acm .p-foot { margin-top: 76px; padding: 34px 24px 40px; background: var(--sk-grund2); border-top: 1px solid var(--p-border); border-radius: 22px 22px 0 0; color: var(--p-muted); font-size: 0.95rem; } body.skin-acm .p-foot-links { gap: 8px 24px; flex-wrap: wrap; justify-content: center; } body.skin-acm .p-foot-links button, body.skin-acm .p-foot-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--p-muted); font-size: 0.95rem; } body.skin-acm .p-foot-links button:hover, body.skin-acm .p-foot-links a:hover { color: var(--sk-ink); } body.skin-acm .p-foot-meta, body.skin-acm .p-foot-ki, body.skin-acm .p-foot-copy { color: var(--p-muted); opacity: 1; max-width: 74ch; margin-inline: auto; /* nicht kleiner: unter 15 Pixel ist auch Kleingedrucktes keins mehr */ font-size: 0.95rem; line-height: 1.7; } body.skin-acm .p-foot-copy { color: var(--p-fg); } /* ============================================================ 13) BEWEGUNG Die Vorlage bewegt nichts quer und kippt nichts. Der Goldschein atmet leicht, mehr nicht. ============================================================ */ body.skin-acm .p-wrap::before { animation: skAcmSchein 7s ease-in-out infinite; } @keyframes skAcmSchein { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { body.skin-acm .p-wrap::before { animation: none; opacity: 1; } body.skin-acm .p-cta:hover, body.skin-acm .p-bonus-link:hover { transform: none; } } /* ============================================================ 14) SCHMALE BILDSCHIRME Bei 390 Pixeln bleibt die Spalte innerhalb des Sichtfensters, der Countdown steht dreispaltig im Raster statt in einer Reihe, und die Bonus-Karte klappt auf eine Spalte um. ============================================================ */ @media (max-width: 860px) { body.skin-acm .p-wrap { padding: 24px 22px 46px; } body.skin-acm .p-cta-block { padding: 32px 20px 30px; } } @media (max-width: 640px) { body.skin-acm .p-wrap { padding: 20px 16px 40px; } body.skin-acm .p-wrap::before { top: -80px; height: 420px; } body.skin-acm .p-empfehlung { margin-top: 18px; padding: 7px 16px 7px 7px; font-size: 0.84rem; } body.skin-acm .p-hero { padding-top: 24px; } body.skin-acm .p-hero h1 { max-width: none; } body.skin-acm .p-sub { font-size: 1rem; } body.skin-acm .p-video, body.skin-acm .p-audio { padding: 7px; border-radius: 16px; margin-top: 26px; } body.skin-acm .p-video-wrap, body.skin-acm .p-audio-wrap { border-radius: 11px; } body.skin-acm .p-video-wrap::after { border-radius: 11px; } body.skin-acm .p-video-play .p-video-play-core, body.skin-acm .p-audio-play .p-audio-play-core { width: 72px; height: 72px; } body.skin-acm .p-body { font-size: 1rem; line-height: 1.8; } body.skin-acm .p-cta-block { padding: 28px 14px 28px; border-radius: 18px; } body.skin-acm .p-countdown .p-countdown-grid { gap: 9px; } body.skin-acm .p-countdown-box { min-width: 0; max-width: none; padding: 14px 6px 11px; border-radius: 13px; } body.skin-acm .p-countdown-box .p-cd-unit { font-size: 0.58rem; letter-spacing: 0.1em; } body.skin-acm .p-cta, body.skin-acm .p-cta-groesse-mittel, body.skin-acm .p-cta-groesse-gross { display: flex; justify-content: center; width: 100%; padding: 18px 20px; font-size: 1rem; } body.skin-acm .p-cta-wdh { margin: 32px auto; } body.skin-acm .p-bonus-stack { margin-top: 42px; } body.skin-acm .p-bonus-link, body.skin-acm .p-bonus-stack .p-bonus-link { grid-template-columns: 64px 1fr; gap: 14px; padding: 22px 18px 20px; border-radius: 16px; } body.skin-acm .p-bonus-stack .p-bonus-cover-wrap { width: 64px; height: 64px; border-radius: 11px; } body.skin-acm .p-bonus-body .p-bonus-btn { width: 100%; } body.skin-acm .p-foot { padding: 28px 16px 34px; border-radius: 16px 16px 0 0; } }