/* ============================================================ Kampagnen-Skins, Teil 4: Karte, Rezept, Sammelalbum. 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 kampagnen-skins-galerie.css: 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 stehen. Ausnahmen mit Begruendung: Karte und Rezept. Schriften: selbst gehostet aus /assets/fonts/kampagnen-fonts.css, durchgehend die Originale der Entwuerfe. Karte: Cabin Condensed und Lora. Rezept: Bitter, Nunito Sans und Caveat. Sammelalbum: Playfair Display, Courier Prime und Inter. Alle benutzten Schnitte stehen in kampagnen-fonts.css (Stand: 113 Schnitte). ============================================================ */ /* ------------------------------------------------------------ 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-karte .p-bonus-stack, body.skin-rezept .p-bonus-stack, body.skin-sammelalbum .p-bonus-stack { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; overflow: visible; } body.skin-karte .p-bonus-stack::before, body.skin-rezept .p-bonus-stack::before, body.skin-sammelalbum .p-bonus-stack::before { display: none; } /* ============================================================ 1) KARTE Ein Kartenblatt aus dem Wanderatlas: Papierton, Hoehenlinien im Hintergrund, Kartenausschnitt mit Eckmarken, Boni als Wegpunkte. Lora fuer alles Gesetzte, Cabin Condensed fuer die Randangaben. Hier wird --p-accent gesetzt: das Kartenrot traegt Eckmarken, Wegpunkt-Sterne, Kompassnadel und Button. Ein beliebiger Kundenton loest das Kartenblatt optisch auf. ============================================================ */ body.skin-karte, [data-mode="light"] body.skin-karte, body.skin-karte[data-mode="light"] { --p-bg: #EDE3CC; --p-fg: #2E2A22; --p-muted: #6A6152; --p-card: #F6EEDC; --p-border: #C4AE84; --p-accent: #A8332B; --p-accent-fg: #F6EEDC; /* Randangaben des Blattes. Gegenueber dem Entwurf (#7E7462) abgedunkelt, sonst bleiben die Versal-Labels bei 3.6:1. */ --sk-rand: #675E4B; --sk-rahmen: #8E7A52; --sk-strich: #C4AE84; --sk-gruen: #4F6B54; --sk-schirm: linear-gradient(155deg, #2C3A31 0%, #17201B 100%); --sk-schatten: 0 24px 60px -34px rgba(46,42,34,0.6); /* Hoehenlinien und Verlaufslinien. Liegen im Hintergrund des Dokuments, nie ueber der Inhaltsspalte. */ --sk-linien: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 1580'%3E%3Cg fill='none' stroke='%23B79E70' stroke-width='1.1'%3E%3Cellipse cx='230' cy='300' rx='120' ry='82'/%3E%3Cellipse cx='230' cy='300' rx='180' ry='126'/%3E%3Cellipse cx='230' cy='300' rx='248' ry='176'/%3E%3Cellipse cx='230' cy='300' rx='322' ry='232'/%3E%3Cellipse cx='1080' cy='880' rx='130' ry='94'/%3E%3Cellipse cx='1080' cy='880' rx='196' ry='142'/%3E%3Cellipse cx='1080' cy='880' rx='268' ry='196'/%3E%3Cellipse cx='1080' cy='880' rx='348' ry='256'/%3E%3Cellipse cx='520' cy='1380' rx='150' ry='96'/%3E%3Cellipse cx='520' cy='1380' rx='228' ry='146'/%3E%3Cellipse cx='520' cy='1380' rx='312' ry='200'/%3E%3C/g%3E%3Cg fill='none' stroke='%237C9A86' stroke-width='1.4' opacity='0.7'%3E%3Cpath d='M0 640 C 180 600, 300 700, 460 668 S 760 600, 940 660 S 1180 700, 1280 664'/%3E%3Cpath d='M0 1120 C 220 1080, 340 1170, 520 1140 S 820 1076, 1000 1136 S 1200 1170, 1280 1140'/%3E%3C/g%3E%3C/svg%3E"); /* Vier gleiche Eckmarken des Ausschnitts. */ --sk-ecke-lo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2 8V2h6' fill='none' stroke='%23A8332B' stroke-width='2'/%3E%3C/svg%3E"); --sk-ecke-ro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M18 8V2h-6' fill='none' stroke='%23A8332B' stroke-width='2'/%3E%3C/svg%3E"); --sk-ecke-lu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2 12v6h6' fill='none' stroke='%23A8332B' stroke-width='2'/%3E%3C/svg%3E"); --sk-ecke-ru: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M18 12v6h-6' fill='none' stroke='%23A8332B' stroke-width='2'/%3E%3C/svg%3E"); /* Fadenkreuz, geschlossen und mittig, umschliesst den Play-Button. */ --sk-fadenkreuz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 190 190'%3E%3Cg fill='none' stroke='%23E5C48A'%3E%3Ccircle cx='95' cy='95' r='74' stroke-width='1.2' opacity='0.55'/%3E%3Ccircle cx='95' cy='95' r='54' stroke-width='1' opacity='0.4'/%3E%3Cpath d='M95 12v26M95 152v26M12 95h26M152 95h26' stroke-width='1.4' opacity='0.7'/%3E%3C/g%3E%3C/svg%3E"); /* Wegpunkt-Stern vor jedem Bonus. */ --sk-stern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1l2 4.6 4.6.5-3.5 3.2 1 4.7L8 11.6 3.9 14l1-4.7L1.4 6.1 6 5.6 8 1z' fill='%23A8332B'/%3E%3C/svg%3E"); /* Kompassrose, sitzt ruhig in der Ecke des Wegpunkt-Blocks. */ --sk-kompass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 82 82'%3E%3Ccircle cx='41' cy='41' r='34' fill='none' stroke='%23C4AE84' stroke-width='1.2'/%3E%3Ccircle cx='41' cy='41' r='26' fill='none' stroke='%23C4AE84' stroke-width='0.8' opacity='0.7'/%3E%3Cpath d='M41 9l7 30-7 6-7-6 7-30z' fill='%23A8332B'/%3E%3Cpath d='M41 73l-7-30 7-6 7 6-7 30z' fill='%238E7A52' opacity='0.6'/%3E%3C/svg%3E"); } /* Nachtfassung: dasselbe Blatt auf dem Tisch unter der Lampe. Papier wird zu Leinen im Dunkeln, die Linien glimmen nur noch. */ [data-mode="dark"] body.skin-karte, body.skin-karte[data-mode="dark"] { --p-bg: #1C1F19; --p-fg: #EDE3CC; --p-muted: #A79C85; --p-card: #272B22; --p-border: #4C5140; --p-accent: #E4715C; --p-accent-fg: #1C1F19; --sk-rand: #B0A488; --sk-rahmen: #6E7458; --sk-strich: #4C5140; --sk-gruen: #8FB495; --sk-schirm: linear-gradient(155deg, #202B24 0%, #101711 100%); --sk-schatten: 0 34px 80px -40px rgba(0,0,0,0.85); --sk-linien: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 1580'%3E%3Cg fill='none' stroke='%234A5140' stroke-width='1.1'%3E%3Cellipse cx='230' cy='300' rx='120' ry='82'/%3E%3Cellipse cx='230' cy='300' rx='180' ry='126'/%3E%3Cellipse cx='230' cy='300' rx='248' ry='176'/%3E%3Cellipse cx='230' cy='300' rx='322' ry='232'/%3E%3Cellipse cx='1080' cy='880' rx='130' ry='94'/%3E%3Cellipse cx='1080' cy='880' rx='196' ry='142'/%3E%3Cellipse cx='1080' cy='880' rx='268' ry='196'/%3E%3Cellipse cx='1080' cy='880' rx='348' ry='256'/%3E%3Cellipse cx='520' cy='1380' rx='150' ry='96'/%3E%3Cellipse cx='520' cy='1380' rx='228' ry='146'/%3E%3Cellipse cx='520' cy='1380' rx='312' ry='200'/%3E%3C/g%3E%3Cg fill='none' stroke='%233E5C4A' stroke-width='1.4' opacity='0.8'%3E%3Cpath d='M0 640 C 180 600, 300 700, 460 668 S 760 600, 940 660 S 1180 700, 1280 664'/%3E%3Cpath d='M0 1120 C 220 1080, 340 1170, 520 1140 S 820 1076, 1000 1136 S 1200 1170, 1280 1140'/%3E%3C/g%3E%3C/svg%3E"); --sk-ecke-lo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2 8V2h6' fill='none' stroke='%23E4715C' stroke-width='2'/%3E%3C/svg%3E"); --sk-ecke-ro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M18 8V2h-6' fill='none' stroke='%23E4715C' stroke-width='2'/%3E%3C/svg%3E"); --sk-ecke-lu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2 12v6h6' fill='none' stroke='%23E4715C' stroke-width='2'/%3E%3C/svg%3E"); --sk-ecke-ru: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M18 12v6h-6' fill='none' stroke='%23E4715C' stroke-width='2'/%3E%3C/svg%3E"); --sk-fadenkreuz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 190 190'%3E%3Cg fill='none' stroke='%23E8CF9B'%3E%3Ccircle cx='95' cy='95' r='74' stroke-width='1.2' opacity='0.5'/%3E%3Ccircle cx='95' cy='95' r='54' stroke-width='1' opacity='0.36'/%3E%3Cpath d='M95 12v26M95 152v26M12 95h26M152 95h26' stroke-width='1.4' opacity='0.66'/%3E%3C/g%3E%3C/svg%3E"); --sk-stern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1l2 4.6 4.6.5-3.5 3.2 1 4.7L8 11.6 3.9 14l1-4.7L1.4 6.1 6 5.6 8 1z' fill='%23E4715C'/%3E%3C/svg%3E"); --sk-kompass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 82 82'%3E%3Ccircle cx='41' cy='41' r='34' fill='none' stroke='%234C5140' stroke-width='1.2'/%3E%3Ccircle cx='41' cy='41' r='26' fill='none' stroke='%234C5140' stroke-width='0.8' opacity='0.7'/%3E%3Cpath d='M41 9l7 30-7 6-7-6 7-30z' fill='%23E4715C'/%3E%3Cpath d='M41 73l-7-30 7-6 7 6-7 30z' fill='%236E7458' opacity='0.7'/%3E%3C/svg%3E"); } body.skin-karte { background-color: var(--p-bg); background-image: var(--sk-linien); background-repeat: no-repeat; background-position: 50% 0; background-size: 1600px auto; color: var(--p-fg); font-family: 'Cabin Condensed', 'Roboto Condensed', 'Segoe UI', system-ui, sans-serif; } body.skin-karte .p-wrap { --sk-spalte: 1180px; max-width: var(--sk-spalte); padding: 30px 40px 48px; } /* Kopfzeile: links die Empfehlung, rechts die Blattangabe */ body.skin-karte .p-empfehlung { max-width: 1180px; margin-inline: auto; justify-content: space-between; font-size: 0.9rem; color: var(--p-muted); opacity: 1; padding-top: 10px; } body.skin-karte .p-empfehlung::after { content: "Blatt 360 · Maßstab 1 zu 1"; font-size: 0.82rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sk-rand); } body.skin-karte .p-empfehlung .p-empfehlung-avatar, body.skin-karte .p-empfehlung .p-empfehlung-foto { border-radius: 50%; background: var(--p-accent); color: var(--p-accent-fg); border: 0; font-family: Lora, Georgia, 'Times New Roman', serif; font-weight: 400; } body.skin-karte .p-empfehlung .p-empfehlung-text b { color: var(--p-fg); font-weight: 700; } /* Titel im Kartenfeld */ body.skin-karte .p-hero { text-align: left; padding-top: 40px; margin-bottom: 24px; } body.skin-karte .p-hero h1 { font-family: Lora, Georgia, 'Times New Roman', serif; font-weight: 500; font-size: clamp(2.2rem, 5.4vw, 3.9rem); line-height: 1.08; letter-spacing: -0.012em; color: var(--p-fg); max-width: 21ch; } body.skin-karte .p-sub { font-family: Lora, Georgia, 'Times New Roman', serif; font-size: 1.06rem; line-height: 1.75; color: var(--p-muted); margin-left: 0; margin-right: 0; max-width: 56ch; } /* Kartenausschnitt: Papierrahmen mit vier gleichen Eckmarken. Die Marken sitzen an den Ecken des Rahmens, nicht frei im Feld. */ body.skin-karte .p-video, body.skin-karte .p-audio { position: relative; background-color: var(--p-card); background-image: var(--sk-ecke-lo), var(--sk-ecke-ro), var(--sk-ecke-lu), var(--sk-ecke-ru); background-repeat: no-repeat; background-size: 20px 20px; background-position: 6px 6px, right 6px top 6px, 6px calc(100% - 6px), right 6px bottom 6px; border: 2px solid var(--sk-rahmen); border-radius: 0; padding: 16px; margin: 36px 0 34px; box-shadow: var(--sk-schatten); } body.skin-karte .p-audio-label { font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sk-rand); margin-bottom: 12px; } /* Das Fadenkreuz haengt am Bildrahmen, nicht am ganzen Block, sonst schwebt es neben der Zeile „Video ansehen" im Leeren. */ body.skin-karte .p-video-wrap { position: relative; border: 1px solid var(--sk-rahmen); border-radius: 0; background: var(--sk-schirm); box-shadow: none; } body.skin-karte .p-video-wrap::before { content: ""; position: absolute; left: 50%; top: 50%; width: 190px; height: 190px; margin: -95px 0 0 -95px; background-image: var(--sk-fadenkreuz); background-repeat: no-repeat; background-size: 190px 190px; pointer-events: none; z-index: 1; transition: opacity .3s ease; } /* Waehrend die Wiedergabe laeuft, gehoert das Bild dem Video. */ body.skin-karte .p-video-wrap.is-playing::before { opacity: 0; } body.skin-karte .p-video-play .p-video-play-core { width: 78px; height: 78px; background: var(--p-accent); color: var(--p-accent-fg); border: 0; box-shadow: none; } body.skin-karte .p-video-play .p-video-play-hint { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: #F6EEDC; } /* Fliesstext im Kartenfeld, zweispaltig auf breiten Schirmen */ body.skin-karte .p-body { font-family: Lora, Georgia, 'Times New Roman', serif; font-size: 1rem; line-height: 1.86; color: var(--p-fg); max-width: none; margin-inline: 0; } @media (min-width: 900px) { body.skin-karte .p-body { columns: 2; column-gap: 44px; } body.skin-karte .p-body img, body.skin-karte .p-body blockquote, body.skin-karte .p-body table { break-inside: avoid; } } body.skin-karte .p-body blockquote { border-left: 3px solid var(--p-accent); color: var(--p-muted); } /* Legende und Aufbruch: ein Kasten aus Kartenpapier */ body.skin-karte .p-cta-block { margin-top: 38px; background: var(--p-card); border: 1px solid var(--sk-strich); border-radius: 0; padding: 24px 28px 26px; display: flex; align-items: center; justify-content: space-between; gap: 34px; flex-wrap: wrap; } body.skin-karte .p-cta-block > * { min-width: 0; } body.skin-karte .p-countdown { background: transparent; border: 0; padding: 0; } body.skin-karte .p-countdown .p-countdown-label { font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sk-rand); text-align: left; margin-bottom: 10px; } body.skin-karte .p-countdown .p-countdown-grid { justify-content: flex-start; margin: 0; gap: 22px; } body.skin-karte .p-countdown-box .p-cd-flip { background: transparent; box-shadow: none; aspect-ratio: auto; border-radius: 0; } body.skin-karte .p-countdown-box .p-cd-flip::before, body.skin-karte .p-countdown-box .p-cd-flip::after { display: none; } body.skin-karte .p-countdown-box .p-cd-flip .p-cd-num { font-family: Lora, Georgia, 'Times New Roman', serif; font-weight: 600; font-size: clamp(1.8rem, 5.4vw, 2.25rem); color: var(--p-fg); text-shadow: none; letter-spacing: 0; } body.skin-karte .p-countdown-box:last-child .p-cd-flip .p-cd-num { color: var(--p-accent); } body.skin-karte .p-countdown-box .p-cd-unit { font-size: 0.78rem; letter-spacing: 0.04em; text-transform: none; color: var(--p-muted); font-weight: 400; } body.skin-karte .p-cta-wrap { text-align: right; margin-top: 0; } body.skin-karte .p-cta { background: var(--p-accent); color: var(--p-accent-fg); font-family: 'Cabin Condensed', 'Roboto Condensed', 'Segoe UI', sans-serif; font-weight: 700; font-size: 1.06rem; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 0; padding: 16px 42px; box-shadow: none; } body.skin-karte .p-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgba(0,0,0,0.55); } /* Boni als Wegpunkte, jeder mit Stern, dazu die Kompassrose */ body.skin-karte .p-bonus-stack { margin-top: 34px; background: var(--p-card); border: 1px solid var(--sk-strich); border-radius: 0; padding: 24px 26px 26px; background-image: var(--sk-kompass); background-repeat: no-repeat; background-position: right 24px top 22px; background-size: 82px 82px; } body.skin-karte .p-bonus-stack-head { padding-right: 110px; } body.skin-karte .p-bonus-stack-eyebrow { color: var(--sk-rand); opacity: 1; letter-spacing: 0.2em; font-weight: 400; } body.skin-karte .p-bonus-stack-title { font-family: Lora, Georgia, 'Times New Roman', serif; font-weight: 600; font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--p-fg); } /* Verlaufs-Text zurueck auf einfarbig, sonst verschwindet er im Papier. -webkit-text-fill-color muss mit gesetzt werden: die Grundfassung faerbt das hervorgehobene Wort ueber diese Eigenschaft, und sie schlaegt color. Ohne sie steht hier eine fremde Farbe. */ body.skin-karte .p-bonus-stack-title em, body.skin-karte .p-redeem-title em { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--p-accent); -webkit-text-fill-color: var(--p-accent); } body.skin-karte .p-bonus-stack-gift { display: none; } body.skin-karte .p-bonus-stack-divider { background: var(--sk-strich); width: 46px; height: 1px; } body.skin-karte .p-bonus-stack-list { grid-template-columns: 1fr; gap: 0; } body.skin-karte .p-bonus-card { border-bottom: 1px solid var(--sk-strich); } body.skin-karte .p-bonus-card:last-child { border-bottom: 0; } body.skin-karte .p-bonus-link { background: transparent; border: 0; border-radius: 0; padding: 16px 4px; grid-template-columns: 20px 84px 1fr; gap: 16px; align-items: center; } body.skin-karte .p-bonus-link::before { content: ""; width: 16px; height: 16px; background-image: var(--sk-stern); background-repeat: no-repeat; background-size: 16px 16px; } body.skin-karte .p-bonus-link::after { display: none; } body.skin-karte .p-bonus-link:hover { transform: none; box-shadow: none; background: color-mix(in srgb, var(--p-accent) 9%, transparent); } body.skin-karte .p-bonus-stack .p-bonus-cover-wrap { width: 84px; height: 84px; border-radius: 0; border: 1px solid var(--sk-strich); background: var(--p-bg); box-shadow: none; } body.skin-karte .p-bonus-stack .p-bonus-typebadge { background: var(--p-accent); color: var(--p-accent-fg); border-radius: 0; border: 0; } body.skin-karte .p-bonus-body .p-bonus-title { font-family: Lora, Georgia, 'Times New Roman', serif; font-weight: 600; font-size: 1.06rem; color: var(--p-fg); } body.skin-karte .p-bonus-body .p-bonus-desc { color: var(--p-muted); opacity: 1; font-size: 0.88rem; } body.skin-karte .p-bonus-body .p-bonus-value { background: transparent; color: var(--sk-rand); border: 1px solid var(--sk-strich); border-radius: 0; box-shadow: none; font-weight: 700; letter-spacing: 0.08em; } body.skin-karte .p-bonus-body .p-bonus-btn { background: transparent; color: var(--p-accent); border: 1px solid var(--p-accent); border-radius: 0; box-shadow: none; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.78rem; } body.skin-karte .p-bonus-link:hover .p-bonus-btn { background: var(--p-accent); color: var(--p-accent-fg); transform: none; box-shadow: none; } /* Fusszeile am Kartenrand */ body.skin-karte .p-foot { margin-top: 40px; border-top: 1px solid var(--sk-strich); padding-top: 20px; color: var(--p-muted); } body.skin-karte .p-foot-links button, body.skin-karte .p-foot-links a { color: var(--p-muted); font-size: 0.8rem; } body.skin-karte .p-foot-meta, body.skin-karte .p-foot-ki, body.skin-karte .p-foot-copy { color: var(--p-fg); } @media (max-width: 640px) { body.skin-karte { background-size: 900px auto; } body.skin-karte .p-wrap { padding: 22px 16px 36px; } body.skin-karte .p-empfehlung { flex-wrap: wrap; gap: 8px; } body.skin-karte .p-empfehlung::after { flex-basis: 100%; letter-spacing: 0.14em; } body.skin-karte .p-hero { padding-top: 26px; } body.skin-karte .p-video, body.skin-karte .p-audio { padding: 12px; margin: 26px 0; } body.skin-karte .p-video-wrap::before { width: 130px; height: 130px; margin: -65px 0 0 -65px; background-size: 130px 130px; } body.skin-karte .p-cta-block { padding: 18px 16px 20px; gap: 20px; } body.skin-karte .p-countdown .p-countdown-grid { gap: 12px; } body.skin-karte .p-cta-wrap { text-align: left; width: 100%; } body.skin-karte .p-cta { display: flex; justify-content: center; width: 100%; padding: 16px 20px; letter-spacing: 0.08em; } body.skin-karte .p-bonus-stack { padding: 18px 14px 20px; background-position: right 12px top 14px; background-size: 56px 56px; } body.skin-karte .p-bonus-stack-head { padding-right: 70px; } body.skin-karte .p-bonus-link { grid-template-columns: 16px 58px 1fr; gap: 12px; } body.skin-karte .p-bonus-stack .p-bonus-cover-wrap { width: 58px; height: 58px; } } /* ============================================================ 2) REZEPT Eine Seite aus dem Kuechenheft: Kuechentuch-Streifen oben, Zutaten links im Kasten, Zubereitung rechts in Schritten, Boni als Beilagen, Countdown als Ofenuhr. Bitter fuer die Ueberschriften, Nunito Sans fuer den Satz, Caveat fuer die handschriftlichen Notizen. Auch hier wird --p-accent gesetzt: das Tomatenrot traegt die Schritt-Ziffern, die Mengenangaben und den Button. Ohne diese Signalfarbe kippt die Kuechenheft-Anmutung. ============================================================ */ body.skin-rezept, [data-mode="light"] body.skin-rezept, body.skin-rezept[data-mode="light"] { --p-bg: #FBF6EC; --p-fg: #2C2620; --p-muted: #6B6157; --p-card: #F3EAD8; --p-border: #E0D3B9; --p-accent: #C2402C; --p-accent-fg: #FBF6EC; --sk-kraut: #4C6B3C; /* Handschrift. Gegenueber dem Entwurf (#8A7C6C) abgedunkelt, sonst liegt die Notiz bei 3.8:1. */ --sk-notiz: #756A5D; --sk-strich: #CFC0A2; --sk-foto: #FFFFFF; --sk-schirm: linear-gradient(160deg, #33291F 0%, #1C1712 100%); /* Der Ofen-Kasten steht bewusst gegen die Seite. */ --sk-ofen-bg: #2C2620; --sk-ofen-fg: #F6EFE2; --sk-ofen-muted: #C9BCA6; --sk-ofen-zahl: #F08163; --sk-schatten: 0 22px 54px -32px rgba(44,38,32,0.55); /* Kuechentuch: breiter Streifen oben, dazu ein sehr feines Karo im Hintergrund. Beides liegt hinter dem Satz, nie darueber. */ --sk-tuch: repeating-linear-gradient(90deg, #C2402C 0 26px, #FBF6EC 26px 52px); --sk-karo: rgba(194,64,44,0.045); } /* Abendfassung: dieselbe Seite bei Licht ueber dem Herd. Papier wird dunkles Holz, der Ofenkasten leuchtet jetzt hell. */ [data-mode="dark"] body.skin-rezept, body.skin-rezept[data-mode="dark"] { --p-bg: #211C17; --p-fg: #F6EFE2; --p-muted: #A99C8B; --p-card: #2C2620; --p-border: #463E34; --p-accent: #E2604A; --p-accent-fg: #211C17; --sk-kraut: #7FA867; --sk-notiz: #B5A794; --sk-strich: #4E4536; --sk-foto: #2C2620; --sk-schirm: linear-gradient(160deg, #2A211A 0%, #141010 100%); --sk-ofen-bg: #F1E7D6; --sk-ofen-fg: #211C17; --sk-ofen-muted: #5F5647; --sk-ofen-zahl: #B03A22; --sk-schatten: 0 26px 60px -34px rgba(0,0,0,0.8); --sk-tuch: repeating-linear-gradient(90deg, #E2604A 0 26px, #211C17 26px 52px); --sk-karo: rgba(226,96,74,0.06); } body.skin-rezept { background-color: var(--p-bg); background-image: var(--sk-tuch), repeating-linear-gradient(0deg, var(--sk-karo) 0 1px, transparent 1px 34px), repeating-linear-gradient(90deg, var(--sk-karo) 0 1px, transparent 1px 34px); background-repeat: no-repeat, repeat, repeat; background-position: 0 0, 0 30px, 0 30px; background-size: 100% 26px, auto, auto; color: var(--p-fg); font-family: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif; } body.skin-rezept .p-wrap { --sk-spalte: 1180px; max-width: var(--sk-spalte); padding: 26px 40px 48px; } /* Kopf des Rezepts */ body.skin-rezept .p-empfehlung { max-width: 1180px; margin-inline: auto; justify-content: space-between; font-size: 0.88rem; color: var(--p-muted); opacity: 1; padding-top: 42px; } body.skin-rezept .p-empfehlung::after { content: "aus meinem Küchenheft, Seite 360"; font-family: Caveat, 'Segoe Script', cursive; font-weight: 500; font-size: 1.3rem; color: var(--sk-notiz); } body.skin-rezept .p-empfehlung .p-empfehlung-avatar, body.skin-rezept .p-empfehlung .p-empfehlung-foto { border-radius: 50%; background: var(--sk-kraut); color: var(--p-bg); border: 0; font-family: Bitter, Georgia, 'Times New Roman', serif; font-weight: 500; } body.skin-rezept .p-empfehlung .p-empfehlung-text b { color: var(--p-fg); font-weight: 700; } /* Titel und Kurzangaben */ body.skin-rezept .p-hero { text-align: left; padding-top: 30px; margin-bottom: 22px; } body.skin-rezept .p-hero h1 { font-family: Bitter, Georgia, 'Times New Roman', serif; font-weight: 700; font-size: clamp(2.1rem, 5.2vw, 3.5rem); line-height: 1.08; letter-spacing: -0.015em; color: var(--p-fg); max-width: 20ch; } body.skin-rezept .p-sub { font-size: 1.04rem; line-height: 1.7; color: var(--p-muted); margin-left: 0; margin-right: 0; max-width: 54ch; } /* Gerichtfoto: weisser Rand, Bildunterschrift in Handschrift. Die Zeile „Video ansehen" rutscht unter das Bild, wie im Entwurf. */ body.skin-rezept .p-video, body.skin-rezept .p-audio { display: flex; flex-direction: column; background: var(--sk-foto); border: 1px solid var(--p-border); border-radius: 0; padding: 14px 14px 16px; margin: 26px 0 32px; box-shadow: var(--sk-schatten); } body.skin-rezept .p-audio-label { order: 2; font-family: Caveat, 'Segoe Script', cursive; font-weight: 500; font-size: 1.24rem; color: var(--sk-notiz); margin: 11px 0 0; } body.skin-rezept .p-video-wrap { border: 0; border-radius: 0; background: var(--sk-schirm); box-shadow: none; margin-top: 0; } body.skin-rezept .p-video-play .p-video-play-core { width: 84px; height: 84px; background: var(--p-accent); color: var(--p-accent-fg); border: 0; box-shadow: 0 12px 32px -12px rgba(0,0,0,0.6); } body.skin-rezept .p-video-play .p-video-play-hint { font-family: Caveat, 'Segoe Script', cursive; font-weight: 500; font-size: 1.16rem; letter-spacing: 0.02em; color: #FBF6EC; } /* Zutaten links im Kasten, Zubereitung rechts in Schritten. Der erste Absatz wird zum Zutaten-Kasten, alle weiteren zu nummerierten Arbeitsschritten. Unter 720px bricht das einspaltig um, der Kasten liegt dann ueber den Schritten. */ body.skin-rezept .p-body { display: flow-root; counter-reset: sk-schritt; max-width: none; margin-inline: 0; font-size: 1rem; line-height: 1.85; color: var(--p-fg); } /* Nur wenn wirklich mehrere Absaetze da sind. Bei einem einzigen Absatz bliebe sonst ein schmaler Kasten mit leerer Flaeche daneben. */ body.skin-rezept .p-body > p:first-of-type:not(:last-of-type) { float: left; width: 340px; margin: 0 44px 24px 0; padding: 24px 26px 26px; background: var(--p-card); border: 1px solid var(--p-border); font-size: 0.98rem; line-height: 1.75; color: var(--p-fg); } body.skin-rezept .p-body > p:first-of-type:not(:last-of-type)::before { content: "Zutaten"; display: block; font-family: Bitter, Georgia, 'Times New Roman', serif; font-weight: 700; font-size: 1.24rem; line-height: 1.2; color: var(--p-fg); margin-bottom: 14px; } body.skin-rezept .p-body > p:first-of-type:last-of-type { float: none; width: auto; margin: 0 0 16px; padding: 0; background: none; border: 0; } body.skin-rezept .p-body > p:not(:first-of-type) { position: relative; counter-increment: sk-schritt; padding-left: 48px; margin-bottom: 20px; } body.skin-rezept .p-body > p:not(:first-of-type)::before { content: counter(sk-schritt); position: absolute; left: 0; top: 3px; width: 32px; height: 32px; border-radius: 50%; background: var(--p-accent); color: var(--p-accent-fg); font-family: Bitter, Georgia, 'Times New Roman', serif; font-weight: 700; font-size: 1rem; line-height: 32px; text-align: center; } body.skin-rezept .p-body blockquote { font-family: Caveat, 'Segoe Script', cursive; font-weight: 500; font-size: 1.3rem; line-height: 1.45; border-left: 3px solid var(--sk-kraut); color: var(--sk-notiz); } /* Beilagen: der Bonus-Block mit gruener Kante */ body.skin-rezept .p-bonus-stack { margin-top: 36px; background: var(--p-card); border-left: 6px solid var(--sk-kraut); border-radius: 0; padding: 24px 28px 26px; } /* Die Handschrift-Farbe ist gegen die Seite gerechnet. Der Bonus-Block liegt aber auf dem etwas dunkleren Kartenpapier, dort bleiben nur 4.42:1. Hier steht deshalb der gedaempfte Schrift-Ton der Vorlage. */ body.skin-rezept .p-bonus-stack-eyebrow { color: var(--p-muted); -webkit-text-fill-color: var(--p-muted); opacity: 1; letter-spacing: 0.16em; font-weight: 700; } body.skin-rezept .p-bonus-stack-title { font-family: Bitter, Georgia, 'Times New Roman', serif; font-weight: 700; font-size: clamp(1.3rem, 2.8vw, 1.7rem); color: var(--p-fg); } body.skin-rezept .p-bonus-stack-title em, body.skin-rezept .p-redeem-title em { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--p-accent); -webkit-text-fill-color: var(--p-accent); } body.skin-rezept .p-bonus-stack-gift { display: none; } body.skin-rezept .p-bonus-stack-divider { background: var(--sk-strich); height: 1px; width: 46px; } body.skin-rezept .p-bonus-link { background: var(--p-bg); border: 1px solid var(--p-border); border-radius: 0; padding: 16px 18px; align-items: center; } body.skin-rezept .p-bonus-link::after { display: none; } body.skin-rezept .p-bonus-link:hover { transform: none; border-color: var(--p-accent); box-shadow: 0 12px 26px -16px rgba(0,0,0,0.4); } body.skin-rezept .p-bonus-stack .p-bonus-cover-wrap { width: 76px; height: 76px; border-radius: 0; border: 1px solid var(--p-border); background: var(--sk-foto); box-shadow: none; } body.skin-rezept .p-bonus-stack .p-bonus-typebadge { background: var(--sk-kraut); color: var(--p-bg); border-radius: 0; border: 0; } body.skin-rezept .p-bonus-link { grid-template-columns: 76px 1fr; gap: 14px; } body.skin-rezept .p-bonus-body .p-bonus-title { color: var(--p-fg); font-weight: 700; font-size: 1rem; } body.skin-rezept .p-bonus-body .p-bonus-desc { color: var(--p-muted); opacity: 1; font-size: 0.86rem; } body.skin-rezept .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-weight: 700; } body.skin-rezept .p-bonus-body .p-bonus-btn { background: var(--sk-kraut); color: var(--p-bg); border-radius: 0; box-shadow: none; font-weight: 700; letter-spacing: 0.04em; font-size: 0.84rem; } body.skin-rezept .p-bonus-link:hover .p-bonus-btn { transform: none; box-shadow: none; } /* Garzeit und Button im dunklen Ofen-Kasten */ body.skin-rezept .p-cta-block { margin-top: 30px; background: var(--sk-ofen-bg); color: var(--sk-ofen-fg); border-radius: 0; padding: 26px 32px; display: flex; align-items: center; justify-content: space-between; gap: 34px; flex-wrap: wrap; } body.skin-rezept .p-cta-block > * { min-width: 0; } body.skin-rezept .p-countdown { background: transparent; border: 0; padding: 0; } body.skin-rezept .p-countdown .p-countdown-label { font-family: Caveat, 'Segoe Script', cursive; font-weight: 500; font-size: 1.3rem; letter-spacing: 0; text-transform: none; color: var(--sk-ofen-muted); text-align: left; margin-bottom: 8px; } body.skin-rezept .p-countdown .p-countdown-grid { justify-content: flex-start; margin: 0; gap: 20px; } body.skin-rezept .p-countdown-box .p-cd-flip { background: transparent; box-shadow: none; aspect-ratio: auto; border-radius: 0; } body.skin-rezept .p-countdown-box .p-cd-flip::before, body.skin-rezept .p-countdown-box .p-cd-flip::after { display: none; } body.skin-rezept .p-countdown-box .p-cd-flip .p-cd-num { font-family: Bitter, Georgia, 'Times New Roman', serif; font-weight: 700; font-size: clamp(1.8rem, 5.4vw, 2.25rem); color: var(--sk-ofen-fg); text-shadow: none; } body.skin-rezept .p-countdown-box:last-child .p-cd-flip .p-cd-num { color: var(--sk-ofen-zahl); } body.skin-rezept .p-countdown-box .p-cd-unit { font-size: 0.78rem; letter-spacing: 0.04em; text-transform: none; color: var(--sk-ofen-muted); font-weight: 400; } /* Alles Uebrige im Kasten erbt sonst die Seitenfarbe und wird blass. */ body.skin-rezept .p-cta-block .p-cd-sep, body.skin-rezept .p-cta-block .p-cd-unit-inline, body.skin-rezept .p-cta-block .p-cd-bartext, body.skin-rezept .p-cta-block .p-cd-minimaltext, body.skin-rezept .p-cta-block .p-countdown-expired { color: var(--sk-ofen-fg); } body.skin-rezept .p-cta-wrap { text-align: right; margin-top: 0; } body.skin-rezept .p-cta { background: var(--p-accent); color: var(--p-accent-fg); font-family: Bitter, Georgia, 'Times New Roman', serif; font-weight: 700; font-size: 1.06rem; letter-spacing: 0.04em; border-radius: 4px; padding: 17px 44px; box-shadow: none; } body.skin-rezept .p-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(0,0,0,0.5); } body.skin-rezept .p-foot { margin-top: 34px; border-top: 1px solid var(--p-border); padding-top: 18px; color: var(--p-muted); } body.skin-rezept .p-foot-links button, body.skin-rezept .p-foot-links a { color: var(--p-muted); font-size: 0.82rem; } body.skin-rezept .p-foot-meta, body.skin-rezept .p-foot-ki, body.skin-rezept .p-foot-copy { color: var(--p-fg); } @media (max-width: 720px) { body.skin-rezept .p-body > p:first-of-type:not(:last-of-type) { float: none; width: 100%; margin: 0 0 24px; } } @media (max-width: 640px) { body.skin-rezept .p-wrap { padding: 20px 16px 36px; } body.skin-rezept .p-empfehlung { flex-wrap: wrap; gap: 8px; padding-top: 38px; } body.skin-rezept .p-empfehlung::after { flex-basis: 100%; font-size: 1.14rem; } body.skin-rezept .p-hero { padding-top: 20px; } body.skin-rezept .p-video, body.skin-rezept .p-audio { padding: 10px 10px 12px; margin: 20px 0 26px; } body.skin-rezept .p-body > p:not(:first-of-type) { padding-left: 42px; } body.skin-rezept .p-bonus-stack { padding: 18px 16px 20px; border-left-width: 5px; } body.skin-rezept .p-bonus-link { grid-template-columns: 58px 1fr; gap: 12px; } body.skin-rezept .p-bonus-stack .p-bonus-cover-wrap { width: 58px; height: 58px; } body.skin-rezept .p-cta-block { padding: 20px 16px; gap: 20px; } body.skin-rezept .p-countdown .p-countdown-grid { gap: 12px; } body.skin-rezept .p-cta-wrap { text-align: left; width: 100%; } body.skin-rezept .p-cta { display: flex; justify-content: center; width: 100%; padding: 17px 20px; } } /* ============================================================ 3) SAMMELALBUM Eine Albumseite auf dunklem Tisch: Foto in vier Halteecken, leicht schief eingeklebt, Boni als Sammelbilder aus Karton, Countdown als Stempel. Playfair Display fuer die Ueberschriften, Courier Prime fuer die Albumbeschriftung, Inter fuer den Satz. --p-accent bleibt die Kundenfarbe: Halteecken, Stempel und Sammelbilder tragen die Vorlage auch ohne Gold. ============================================================ */ body.skin-sammelalbum, [data-mode="dark"] body.skin-sammelalbum, body.skin-sammelalbum[data-mode="dark"] { --p-bg: #241E1A; --p-fg: #EFE6D6; --p-muted: #B3A48D; --p-card: #3A2E26; --p-border: #574A3B; --sk-gold: #C8A26A; --sk-mono: #B5A78F; --sk-stempel: #E08A72; --sk-bild-bg: #F5EEDE; --sk-bild-kopf: #E3D6BC; --sk-bild-fg: #241E1A; --sk-bild-muted: #6E6152; --sk-bild-ziffer: #8E5A3C; --sk-schirm: linear-gradient(158deg, #2E2721 0%, #16120F 100%); --sk-pergament: linear-gradient(150deg, rgba(240,230,206,0.07) 0%, rgba(240,230,206,0.02) 42%, rgba(240,230,206,0.06) 100%); --sk-schatten: 0 40px 100px -46px rgba(0,0,0,0.9); --sk-foto-schatten: 0 26px 58px -30px rgba(0,0,0,0.85); /* Vier gleiche Halteecken: Dreieck mit sichtbarer Papierkante. */ --sk-halt-lo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46'%3E%3Cpath d='M2 44V2h42L2 44z' fill='%23241E1A' opacity='0.9'/%3E%3Cpath d='M2 44V2h42' fill='none' stroke='%23C8A26A' stroke-width='1.4' opacity='0.6'/%3E%3C/svg%3E"); --sk-halt-ro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46'%3E%3Cpath d='M44 44V2H2l42 42z' fill='%23241E1A' opacity='0.9'/%3E%3Cpath d='M44 44V2H2' fill='none' stroke='%23C8A26A' stroke-width='1.4' opacity='0.6'/%3E%3C/svg%3E"); --sk-halt-lu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46'%3E%3Cpath d='M2 2v42h42L2 2z' fill='%23241E1A' opacity='0.9'/%3E%3Cpath d='M2 2v42h42' fill='none' stroke='%23C8A26A' stroke-width='1.4' opacity='0.6'/%3E%3C/svg%3E"); --sk-halt-ru: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46'%3E%3Cpath d='M44 2v42H2L44 2z' fill='%23241E1A' opacity='0.9'/%3E%3Cpath d='M44 2v42H2' fill='none' stroke='%23C8A26A' stroke-width='1.4' opacity='0.6'/%3E%3C/svg%3E"); } /* Tagfassung: dasselbe Album am Fenster. Der Tisch wird zu hellem Leinen, die Albumseite zu Kraftpapier, das Gold zu dunklem Ocker, damit die Beschriftung auf hellem Grund bestehen bleibt. */ [data-mode="light"] body.skin-sammelalbum, body.skin-sammelalbum[data-mode="light"] { --p-bg: #E6DFD2; --p-fg: #241E1A; --p-muted: #6B6155; --p-card: #F2EADA; --p-border: #D0C3AB; --sk-gold: #7C5F25; --sk-mono: #6B6155; --sk-stempel: #A8412E; --sk-bild-bg: #FFFBF2; --sk-bild-kopf: #EADFC6; --sk-bild-fg: #241E1A; --sk-bild-muted: #6B6155; --sk-bild-ziffer: #7B4728; --sk-schirm: linear-gradient(158deg, #3A322A 0%, #1B1713 100%); --sk-pergament: linear-gradient(150deg, rgba(120,96,54,0.07) 0%, rgba(120,96,54,0.02) 42%, rgba(120,96,54,0.06) 100%); --sk-schatten: 0 40px 90px -50px rgba(60,48,32,0.65); --sk-foto-schatten: 0 24px 50px -30px rgba(60,48,32,0.6); --sk-halt-lo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46'%3E%3Cpath d='M2 44V2h42L2 44z' fill='%23C9BCA0' opacity='0.95'/%3E%3Cpath d='M2 44V2h42' fill='none' stroke='%237C5F25' stroke-width='1.4' opacity='0.7'/%3E%3C/svg%3E"); --sk-halt-ro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46'%3E%3Cpath d='M44 44V2H2l42 42z' fill='%23C9BCA0' opacity='0.95'/%3E%3Cpath d='M44 44V2H2' fill='none' stroke='%237C5F25' stroke-width='1.4' opacity='0.7'/%3E%3C/svg%3E"); --sk-halt-lu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46'%3E%3Cpath d='M2 2v42h42L2 2z' fill='%23C9BCA0' opacity='0.95'/%3E%3Cpath d='M2 2v42h42' fill='none' stroke='%237C5F25' stroke-width='1.4' opacity='0.7'/%3E%3C/svg%3E"); --sk-halt-ru: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46'%3E%3Cpath d='M44 2v42H2L44 2z' fill='%23C9BCA0' opacity='0.95'/%3E%3Cpath d='M44 2v42H2' fill='none' stroke='%237C5F25' stroke-width='1.4' opacity='0.7'/%3E%3C/svg%3E"); } body.skin-sammelalbum { background: var(--p-bg); color: var(--p-fg); font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; } /* Die Albumseite selbst: Karton mit Pergament-Zwischenblatt darueber */ body.skin-sammelalbum .p-wrap { --sk-spalte: 1080px; max-width: var(--sk-spalte); background-color: var(--p-card); background-image: var(--sk-pergament); box-shadow: var(--sk-schatten); padding: 46px 58px 52px; margin-top: 34px; margin-bottom: 30px; } /* Kopfzeile der Albumseite */ body.skin-sammelalbum .p-empfehlung { max-width: 1080px; margin-inline: auto; justify-content: space-between; font-size: 0.86rem; color: var(--p-muted); opacity: 1; padding-top: 46px; } body.skin-sammelalbum .p-empfehlung::after { content: "ALBUM 2026 · SEITE 07"; font-family: 'Courier Prime', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; letter-spacing: 0.2em; color: var(--sk-mono); } body.skin-sammelalbum .p-empfehlung .p-empfehlung-avatar, body.skin-sammelalbum .p-empfehlung .p-empfehlung-foto { border-radius: 50%; background: var(--p-accent); color: var(--p-accent-fg); border: 0; font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; font-weight: 500; } body.skin-sammelalbum .p-empfehlung .p-empfehlung-text b { color: var(--p-fg); font-weight: 600; } /* Titel, mittig ueber dem Foto */ body.skin-sammelalbum .p-hero { text-align: center; padding-top: 40px; margin-bottom: 0; } body.skin-sammelalbum .p-hero h1 { font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; font-weight: 500; font-size: clamp(2.3rem, 6vw, 4rem); line-height: 1.06; letter-spacing: -0.012em; color: var(--p-fg); } body.skin-sammelalbum .p-sub { max-width: 560px; margin: 20px auto 0; font-size: 1.02rem; line-height: 1.75; color: var(--p-muted); text-align: center; } /* Das Foto: Papierrand, Bildunterschrift darunter, leicht schief eingeklebt. Die Neigung ist Deko fuer den Ruhezustand. */ body.skin-sammelalbum .p-video, body.skin-sammelalbum .p-audio { display: flex; flex-direction: column; width: 100%; max-width: 780px; margin: 46px auto 0; background: var(--sk-bild-bg); border: 0; border-radius: 0; padding: 16px 16px 26px; box-shadow: var(--sk-foto-schatten); transform: rotate(-1deg); transform-origin: 50% 45%; transition: transform 260ms cubic-bezier(0.23, 1, 0.32, 1); } /* Das Aufrichten beim Abspielen macht Abschnitt N in kampagnen-skins.css zentral fuer alle Vorlagen. Hier steht nur die Neigung selbst. */ body.skin-sammelalbum .p-audio-label { order: 2; justify-content: center; font-family: 'Courier Prime', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.84rem; letter-spacing: 0.02em; color: var(--sk-bild-muted); margin: 16px 0 0; } /* Die vier Halteecken haengen am Bildrahmen, nicht am ganzen Block. .p-video-wrap hat sonst overflow:hidden und ein belegtes ::after, deshalb hier overflow:visible und ::before. */ body.skin-sammelalbum .p-video-wrap { position: relative; overflow: visible; border: 0; border-radius: 0; background: var(--sk-schirm); box-shadow: none; margin-top: 0; } body.skin-sammelalbum .p-video-wrap::before { content: ""; position: absolute; inset: -9px; background-image: var(--sk-halt-lo), var(--sk-halt-ro), var(--sk-halt-lu), var(--sk-halt-ru); background-repeat: no-repeat; background-size: 46px 46px; background-position: left top, right top, left bottom, right bottom; pointer-events: none; z-index: 3; } body.skin-sammelalbum .p-video-wrap video { border-radius: 0; } body.skin-sammelalbum .p-video-play .p-video-play-core { width: 80px; height: 80px; background: var(--sk-bild-bg); color: var(--sk-bild-fg); border: 0; box-shadow: none; } body.skin-sammelalbum .p-video-play .p-video-play-hint { font-family: 'Courier Prime', ui-monospace, monospace; font-size: 0.76rem; letter-spacing: 0.06em; color: #F5EEDE; } /* Beschriftung der Seite, zweispaltig auf breiten Schirmen */ body.skin-sammelalbum .p-body { max-width: 860px; margin: 56px auto 0; font-size: 1.02rem; line-height: 1.86; color: var(--p-fg); } @media (min-width: 900px) { body.skin-sammelalbum .p-body { columns: 2; column-gap: 40px; } body.skin-sammelalbum .p-body img, body.skin-sammelalbum .p-body blockquote, body.skin-sammelalbum .p-body table { break-inside: avoid; } } body.skin-sammelalbum .p-body blockquote { border-left: 3px solid var(--sk-gold); color: var(--p-muted); } /* Sammelbilder: Karton-Karten, in beiden Fassungen hell bedruckt */ body.skin-sammelalbum .p-bonus-stack { max-width: 860px; margin: 50px auto 0; } body.skin-sammelalbum .p-bonus-stack-eyebrow { font-family: 'Courier Prime', ui-monospace, monospace; font-weight: 400; font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sk-gold); opacity: 1; } body.skin-sammelalbum .p-bonus-stack-title { font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; font-weight: 500; font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--p-fg); } body.skin-sammelalbum .p-bonus-stack-title em, body.skin-sammelalbum .p-redeem-title em { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--sk-gold); -webkit-text-fill-color: var(--sk-gold); } body.skin-sammelalbum .p-bonus-stack-gift { display: none; } body.skin-sammelalbum .p-bonus-stack-divider { background: var(--sk-gold); height: 1px; width: 46px; } body.skin-sammelalbum .p-bonus-stack-list { gap: 26px; } body.skin-sammelalbum .p-bonus-link { background: var(--sk-bild-bg); color: var(--sk-bild-fg); border: 0; border-radius: 0; padding: 12px 12px 16px; grid-template-columns: 76px 1fr; gap: 14px; align-items: center; box-shadow: 0 16px 38px -22px rgba(0,0,0,0.75); } body.skin-sammelalbum .p-bonus-link::after { display: none; } body.skin-sammelalbum .p-bonus-link:hover { transform: translateY(-3px) rotate(-0.6deg); box-shadow: 0 22px 46px -22px rgba(0,0,0,0.8); } body.skin-sammelalbum .p-bonus-stack .p-bonus-cover-wrap { width: 76px; height: 76px; border-radius: 0; border: 0; background: var(--sk-bild-kopf); box-shadow: none; } body.skin-sammelalbum .p-bonus-stack .p-bonus-typebadge { background: var(--sk-bild-ziffer); color: var(--sk-bild-bg); border-radius: 0; border: 0; } body.skin-sammelalbum .p-bonus-body .p-bonus-title { font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; font-weight: 500; font-size: 1.08rem; line-height: 1.35; color: var(--sk-bild-fg); } body.skin-sammelalbum .p-bonus-body .p-bonus-desc { color: var(--sk-bild-muted); opacity: 1; font-size: 0.86rem; } body.skin-sammelalbum .p-bonus-body .p-bonus-value { background: transparent; color: var(--sk-bild-ziffer); border: 1px solid var(--sk-bild-ziffer); border-radius: 0; box-shadow: none; font-family: 'Courier Prime', ui-monospace, monospace; font-weight: 400; letter-spacing: 0.06em; } body.skin-sammelalbum .p-bonus-body .p-bonus-btn { background: var(--sk-bild-ziffer); color: var(--sk-bild-bg); border-radius: 0; box-shadow: none; font-family: 'Courier Prime', ui-monospace, monospace; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; } body.skin-sammelalbum .p-bonus-link:hover .p-bonus-btn { transform: none; box-shadow: none; } /* Stempel-Countdown links, Button rechts */ body.skin-sammelalbum .p-cta-block { max-width: 860px; margin: 46px auto 0; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; } body.skin-sammelalbum .p-cta-block > * { min-width: 0; } /* Der Countdown ist der Stempel: doppelter Rahmen, gedreht, halbdeckend, Beschriftung in gesperrten Versalien. */ body.skin-sammelalbum .p-countdown { background: transparent; border: 3px double var(--sk-stempel); border-radius: 0; padding: 14px 22px 12px; color: var(--sk-stempel); transform: rotate(-2deg); opacity: 0.94; width: fit-content; } body.skin-sammelalbum .p-countdown .p-countdown-label { font-family: 'Courier Prime', ui-monospace, monospace; font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--sk-stempel); text-align: left; margin-bottom: 7px; } body.skin-sammelalbum .p-countdown .p-countdown-grid { justify-content: flex-start; margin: 0; gap: 16px; } body.skin-sammelalbum .p-countdown-box .p-cd-flip { background: transparent; box-shadow: none; aspect-ratio: auto; border-radius: 0; } body.skin-sammelalbum .p-countdown-box .p-cd-flip::before, body.skin-sammelalbum .p-countdown-box .p-cd-flip::after { display: none; } body.skin-sammelalbum .p-countdown-box .p-cd-flip .p-cd-num { font-family: 'Courier Prime', ui-monospace, monospace; font-weight: 700; font-size: clamp(1.6rem, 5vw, 2rem); color: var(--sk-stempel); text-shadow: none; } body.skin-sammelalbum .p-countdown-box .p-cd-unit { font-family: 'Courier Prime', ui-monospace, monospace; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sk-stempel); font-weight: 400; } body.skin-sammelalbum .p-cta-block .p-cd-sep, body.skin-sammelalbum .p-cta-block .p-cd-unit-inline, body.skin-sammelalbum .p-cta-block .p-cd-bartext, body.skin-sammelalbum .p-cta-block .p-cd-minimaltext, body.skin-sammelalbum .p-cta-block .p-countdown-expired { color: var(--sk-stempel); } body.skin-sammelalbum .p-cta-wrap { text-align: right; margin-top: 0; } body.skin-sammelalbum .p-cta { background: var(--p-accent); color: var(--p-accent-fg); font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; font-weight: 700; font-size: 1.12rem; letter-spacing: 0.06em; border-radius: 0; padding: 17px 46px; box-shadow: none; } body.skin-sammelalbum .p-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -18px rgba(0,0,0,0.7); } /* Die Fusszeile liegt auf dem Tisch neben dem Album, nicht auf der Albumseite. Sie steht deshalb ausserhalb der Kartonflaeche. */ body.skin-sammelalbum .p-foot { max-width: 1080px; margin: 0 auto; border-top: 0; padding-top: 4px; color: var(--p-muted); } body.skin-sammelalbum .p-foot-links button, body.skin-sammelalbum .p-foot-links a { color: var(--p-muted); font-size: 0.8rem; } body.skin-sammelalbum .p-foot-meta, body.skin-sammelalbum .p-foot-ki, body.skin-sammelalbum .p-foot-copy { color: var(--p-muted); } @media (prefers-reduced-motion: reduce) { body.skin-sammelalbum .p-video, body.skin-sammelalbum .p-audio { transition: none; } } @media (max-width: 720px) { body.skin-sammelalbum .p-wrap { padding: 26px 18px 34px; margin-top: 18px; } body.skin-sammelalbum .p-empfehlung { flex-wrap: wrap; gap: 8px; padding-top: 30px; } body.skin-sammelalbum .p-empfehlung::after { flex-basis: 100%; letter-spacing: 0.14em; } body.skin-sammelalbum .p-hero { padding-top: 24px; } body.skin-sammelalbum .p-video, body.skin-sammelalbum .p-audio { transform: none; padding: 10px 10px 18px; margin-top: 30px; } body.skin-sammelalbum .p-video-wrap::before { background-size: 30px 30px; inset: -6px; } body.skin-sammelalbum .p-body { margin-top: 34px; } body.skin-sammelalbum .p-bonus-stack { margin-top: 34px; } body.skin-sammelalbum .p-bonus-stack-list { gap: 16px; } body.skin-sammelalbum .p-bonus-link { grid-template-columns: 58px 1fr; gap: 12px; } body.skin-sammelalbum .p-bonus-stack .p-bonus-cover-wrap { width: 58px; height: 58px; } /* Gedrehter Stempel wuerde auf dem Handy seitlich anstossen. */ body.skin-sammelalbum .p-countdown { transform: none; width: 100%; padding: 14px 16px 12px; } body.skin-sammelalbum .p-countdown .p-countdown-grid { gap: 10px; } body.skin-sammelalbum .p-cta-block { margin-top: 30px; gap: 22px; } body.skin-sammelalbum .p-cta-wrap { text-align: left; width: 100%; } body.skin-sammelalbum .p-cta { display: flex; justify-content: center; width: 100%; padding: 17px 20px; } } /* ============================================================ Gemeinsame Schlussregeln fuer alle drei Vorlagen ============================================================ */ /* Bedienflaechen bleiben auf dem Handy greifbar. */ @media (max-width: 640px) { body.skin-karte .p-cta, body.skin-rezept .p-cta, body.skin-sammelalbum .p-cta { min-height: 52px; align-items: center; } body.skin-karte .p-foot-links button, body.skin-karte .p-foot-links a, body.skin-rezept .p-foot-links button, body.skin-rezept .p-foot-links a, body.skin-sammelalbum .p-foot-links button, body.skin-sammelalbum .p-foot-links a { min-height: 44px; display: inline-flex; align-items: center; } body.skin-karte .p-bonus-link, body.skin-rezept .p-bonus-link, body.skin-sammelalbum .p-bonus-link { min-height: 44px; } body.skin-karte .p-bonus-body .p-bonus-btn, body.skin-rezept .p-bonus-body .p-bonus-btn, body.skin-sammelalbum .p-bonus-body .p-bonus-btn { min-height: 44px; display: inline-flex; align-items: center; } } /* Nichts darf seitlich aus der Seite laufen. */ body.skin-karte, body.skin-rezept, body.skin-sammelalbum { overflow-x: hidden; } @media (prefers-reduced-motion: reduce) { body.skin-karte .p-cta:hover, body.skin-rezept .p-cta:hover, body.skin-sammelalbum .p-cta:hover { transform: none; } body.skin-karte .p-video-wrap::before { transition: none; } body.skin-rezept .p-bonus-link:hover { transform: none; } body.skin-sammelalbum .p-bonus-link:hover { transform: none; } }