/* ============================================================ Kampagnen-Vorlage: 30-Minuten-Template Bauart einer Anmelde-Seite fuer ein kurzes Online-Seminar. Uebernommen sind ausschliesslich Farbstimmung, Schrift-Charakter und das Aufbau-Prinzip: langer Nutzen-Titel im Kopf, Argumente als eigene Bloecke untereinander, Video mittendrin, ein Anmelde-Kasten und genau 1 Aufruf-Text. KEINE Kopie: kein Satz, keine Ueberschrift, kein Name, kein Bild und keine Zahl von einer fremden Seite. Jeder Text kommt aus der Seite des Kunden. Der Akzent tritt fast nur als halbtransparenter Schein auf: weiche Leuchtkanten und Schatten, keine harten Flaechen. Einzige Ausnahme ist der Aufruf-Button, der als volle Flaeche steht, damit er als Ziel erkennbar bleibt. Zwei vollwertige Fassungen. Der Modus steht als data-mode an UND an , deshalb ist jede modusabhaengige Regel doppelt geschrieben. Die Fassungen setzen nur Variablen, die Bausteine darunter arbeiten ausschliesslich mit diesen. ============================================================ */ /* ============================================================ 1) FARBEN, FASSUNG DUNKEL Ausgangspunkt der Vorlage: tiefes Blau als Grund, ein einziger Tuerkis-Ton als Signal. --p-accent traegt hier den Tuerkis der Vorlage und nicht den Kundenton. Begruendung wie bei Terminal, Zeitung und Gold auf Schwarz: die Vorlage lebt von genau diesem Paar aus Blau und Tuerkis, ein fremder Ton daneben loest die Wirkung auf. ============================================================ */ body.skin-30minuten, [data-mode="dark"] body.skin-30minuten, body.skin-30minuten[data-mode="dark"] { --p-bg: #0B1424; --p-fg: #EEF3F9; /* Auf #0B1424 kommt #9BAAC2 auf rund 7:1 und bleibt lesbar. */ --p-muted: #9BAAC2; --p-card: #16243F; --p-border: #22355A; --p-accent: #2AAE9E; --p-accent-fg: #04140F; --p-accent-ink: #58D3C3; --sk-grund2: #0E1A2E; --sk-tuerkis: #2AAE9E; --sk-tuerkis-hell: #58D3C3; /* Der Akzent als Schrift. Auf dem tiefen Blau traegt der helle Ton. */ --sk-ink: #58D3C3; /* Glasflaeche fuer Kaesten, Countdown-Felder und Pillen */ --sk-glas: rgba(255, 255, 255, 0.04); /* Kanten: nie ein voller Rahmen, immer nur ein Hauch */ --sk-rand: rgba(42, 174, 158, 0.22); --sk-rand-stark: rgba(42, 174, 158, 0.5); /* Lichtkante oben auf einer Karte, laeuft beidseitig aus */ --sk-kante: linear-gradient(90deg, rgba(42, 174, 158, 0) 0%, rgba(42, 174, 158, 0.8) 50%, rgba(42, 174, 158, 0) 100%); /* Weicher Schein hinter dem Kopfbereich, die einzige Deko */ --sk-schein: radial-gradient(circle at 50% 0%, rgba(42, 174, 158, 0.18) 0%, rgba(42, 174, 158, 0.06) 44%, rgba(42, 174, 158, 0) 72%); --sk-schirm: linear-gradient(158deg, #16243F 0%, #0D1729 54%, #0B1424 100%); --sk-schatten: 0 30px 66px rgba(0, 0, 0, 0.55), 0 0 44px rgba(42, 174, 158, 0.1); --sk-leuchten: 0 0 32px rgba(42, 174, 158, 0.3); --sk-leuchten-stark: 0 0 50px rgba(42, 174, 158, 0.45); --sk-wert-flaeche: rgba(42, 174, 158, 0.09); --sk-wert-rand: rgba(42, 174, 158, 0.24); } /* ============================================================ 2) FARBEN, FASSUNG HELL Kein umgedrehtes Blau, sondern ein eigenes Blatt: ein sehr helles, kuehles Papier, das den Tuerkis weitertraegt. Tuerkis traegt auf Weiss nicht. Deshalb wandert jede tuerkise SCHRIFT auf den dunkleren Ton #0E6B5F (5,9:1 auf dem Papier), waehrend der helle Tuerkis nur als FLAECHE stehen bleibt. ============================================================ */ [data-mode="light"] body.skin-30minuten, body.skin-30minuten[data-mode="light"] { --p-bg: #F4F8FB; --p-fg: #101C2E; --p-muted: #4E5F76; --p-card: #FFFFFF; --p-border: #D7E2EC; --p-accent: #0E6B5F; --p-accent-fg: #F2FBF9; --p-accent-ink: #0E6B5F; --sk-grund2: #E9F1F6; --sk-tuerkis: #2AAE9E; --sk-tuerkis-hell: #58D3C3; --sk-ink: #0E6B5F; --sk-glas: #FFFFFF; --sk-rand: rgba(14, 107, 95, 0.22); --sk-rand-stark: rgba(14, 107, 95, 0.46); --sk-kante: linear-gradient(90deg, rgba(14, 107, 95, 0) 0%, rgba(42, 174, 158, 0.75) 50%, rgba(14, 107, 95, 0) 100%); --sk-schein: radial-gradient(circle at 50% 0%, rgba(42, 174, 158, 0.22) 0%, rgba(42, 174, 158, 0.07) 44%, rgba(42, 174, 158, 0) 72%); --sk-schirm: linear-gradient(158deg, #1B2C49 0%, #101C2E 54%, #0D1729 100%); --sk-schatten: 0 28px 58px -32px rgba(16, 28, 46, 0.42), 0 0 38px rgba(42, 174, 158, 0.12); --sk-leuchten: 0 10px 26px -10px rgba(14, 107, 95, 0.45); --sk-leuchten-stark: 0 16px 36px -12px rgba(14, 107, 95, 0.58); --sk-wert-flaeche: #E6F6F3; --sk-wert-rand: rgba(14, 107, 95, 0.24); } /* ============================================================ 3) GRUNDLAGEN Schrift: Inter, selbst gehostet aus /assets/fonts (siehe kampagnen-fonts.css). Kein Aufruf zu Google Fonts, nirgends. Selbst gehostet liegen 300 bis 900 vor, deshalb kommt die Vorlage ohne eine zweite Schrift aus. ============================================================ */ body.skin-30minuten { background: var(--p-bg); color: var(--p-fg); font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-weight: 400; line-height: 1.62; letter-spacing: -0.004em; } body.skin-30minuten .p-wrap { max-width: 1000px; padding: 30px 28px 56px; position: relative; } /* Der Schein liegt hinter dem Kopfbereich, nicht darueber. Er ist bewusst schwach: der Titel soll nicht ueberstrahlt werden. */ body.skin-30minuten .p-wrap::before { content: ""; position: absolute; top: -130px; left: 50%; width: min(860px, 96vw); height: 600px; transform: translateX(-50%); background: var(--sk-schein); pointer-events: none; z-index: 0; } body.skin-30minuten .p-wrap > * { position: relative; z-index: 1; } /* ============================================================ 4) KOPFBEREICH Der Titel darf lang sein, er traegt den ganzen Nutzen. Deshalb viel Zeilenhoehe, ausgeglichener Umbruch und eine Unterzeile, die den Titel erklaert statt ihn zu wiederholen. ============================================================ */ body.skin-30minuten .p-hero { text-align: center; padding-top: 20px; margin-bottom: 26px; } body.skin-30minuten .p-hero h1 { font-size: clamp(2rem, 4.6vw, 3.15rem); line-height: 1.14; font-weight: 800; letter-spacing: -0.03em; margin: 0 0 18px; text-wrap: balance; } body.skin-30minuten .p-hero h1 .accent, body.skin-30minuten .p-hero h1 strong { color: var(--sk-ink); } body.skin-30minuten .p-sub { font-size: clamp(1.02rem, 1.9vw, 1.2rem); color: var(--p-muted); max-width: 46em; margin: 0 auto; } /* ============================================================ 5) VIDEO UND TON Gerahmt, mit Schein statt Flaeche. Die Regeln fuer den Play-Aufsatz kommen aus der Seite, hier nur Farbe und Kante. ============================================================ */ body.skin-30minuten .p-video, body.skin-30minuten .p-audio { margin: 26px 0; } body.skin-30minuten .p-video-wrap, body.skin-30minuten .p-audio-wrap { border-radius: 18px; border: 1px solid var(--sk-rand); background: var(--sk-schirm); box-shadow: var(--sk-schatten); } body.skin-30minuten .p-video-wrap.is-playing { border-color: var(--sk-rand-stark); box-shadow: var(--sk-schatten), var(--sk-leuchten); } body.skin-30minuten .p-video-play-core, body.skin-30minuten .p-audio-play-core { background: var(--sk-tuerkis); color: #04140F; box-shadow: var(--sk-leuchten-stark); } body.skin-30minuten .p-video-play-hint { color: var(--p-fg); } body.skin-30minuten .p-audio-label { color: var(--sk-ink); letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.76rem; font-weight: 600; } /* ============================================================ 6) ARGUMENT-BLOECKE Jede Zwischen-Ueberschrift oeffnet einen eigenen Block. Die Linie darueber trennt die Bloecke sichtbar, ohne einen Kasten um jeden Absatz zu ziehen. ============================================================ */ body.skin-30minuten .p-body { font-size: 1.05rem; } body.skin-30minuten .p-body h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -0.024em; line-height: 1.2; margin: 48px 0 14px; padding-top: 28px; border-top: 1px solid var(--p-border); position: relative; } /* Kurze Lichtkante ueber jeder Zwischen-Ueberschrift. */ body.skin-30minuten .p-body h2::before { content: ""; position: absolute; top: -1px; left: 0; width: 84px; height: 2px; background: var(--sk-kante); } body.skin-30minuten .p-body h3 { font-size: 1.18rem; font-weight: 700; letter-spacing: -0.012em; color: var(--sk-ink); margin: 28px 0 8px; } body.skin-30minuten .p-body a { color: var(--sk-ink); } body.skin-30minuten .p-body ul li::marker { color: var(--sk-tuerkis); } body.skin-30minuten .p-body blockquote { border-left: 3px solid var(--sk-rand-stark); background: var(--sk-wert-flaeche); border-radius: 0 14px 14px 0; padding: 16px 20px; margin: 24px 0; color: var(--p-fg); } body.skin-30minuten .p-body img { border-radius: 14px; } /* ============================================================ 7) ANMELDE-BLOCK UND AUFRUF Ein einziger Aufruf-Text auf der ganzen Seite. Der Kasten darum macht ihn zum Ziel, der Button traegt als einziges Element die volle Akzent-Flaeche. ============================================================ */ body.skin-30minuten .p-cta-block, body.skin-30minuten .p-cta-wdh { background: var(--sk-glas); border: 1px solid var(--sk-rand); border-radius: 22px; padding: 32px 26px; box-shadow: var(--sk-schatten); position: relative; overflow: hidden; } body.skin-30minuten .p-cta-block::before, body.skin-30minuten .p-cta-wdh::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--sk-kante); } body.skin-30minuten .p-cta-wdh-vertrauen { color: var(--p-muted); } body.skin-30minuten .p-cta { background: var(--sk-tuerkis); color: #04140F; border: 0; border-radius: 999px; padding: 18px 42px; font-weight: 700; box-shadow: var(--sk-leuchten); } body.skin-30minuten .p-cta:hover { background: var(--sk-tuerkis-hell); box-shadow: var(--sk-leuchten-stark); } body.skin-30minuten .p-cta-groesse-gross { padding: 22px 52px; } /* ============================================================ 8) EMPFEHLUNG, BONI, COUNTDOWN, FUSS Alles im ruhigen Karten-Ton, nur die Kante traegt den Akzent. ============================================================ */ body.skin-30minuten .p-empfehlung { background: var(--sk-glas); border: 1px solid var(--sk-rand); border-radius: 999px; } body.skin-30minuten .p-empfehlung-avatar { border-color: var(--sk-rand-stark); } body.skin-30minuten .p-bonus-stack { background: transparent; border: 0; box-shadow: none; padding: 0; } body.skin-30minuten .p-bonus-stack::before { display: none; } body.skin-30minuten .p-bonus-stack-title { color: var(--p-fg); } body.skin-30minuten .p-bonus-stack-eyebrow { color: var(--sk-ink); } body.skin-30minuten .p-bonus-card { background: var(--p-card); border: 1px solid var(--sk-rand); border-radius: 16px; box-shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.5); } body.skin-30minuten .p-bonus-title { color: var(--p-fg); } body.skin-30minuten .p-bonus-desc { color: var(--p-muted); } body.skin-30minuten .p-bonus-value { background: var(--sk-wert-flaeche); border: 1px solid var(--sk-wert-rand); color: var(--sk-ink); border-radius: 999px; } body.skin-30minuten .p-bonus-btn { background: var(--sk-tuerkis); color: #04140F; border-radius: 999px; } body.skin-30minuten .p-countdown-box { background: var(--sk-glas); border: 1px solid var(--sk-rand); border-radius: 14px; } body.skin-30minuten .p-cd-num { color: var(--p-fg); font-weight: 800; } body.skin-30minuten .p-countdown-label { color: var(--p-muted); } body.skin-30minuten .p-foot { border-top: 1px solid var(--p-border); background: var(--sk-grund2); color: var(--p-muted); } body.skin-30minuten .p-foot a { color: var(--sk-ink); } /* ============================================================ 9) RUHIGER MODUS Wer Bewegung abbestellt hat, bekommt keinen Schein und keine laufende Kante, aber dieselbe Lesbarkeit. ============================================================ */ @media (prefers-reduced-motion: reduce) { body.skin-30minuten .p-wrap::before { display: none; } } /* Auf schmalen Geraeten schrumpft der Kasten, nicht der Titel. */ @media (max-width: 640px) { body.skin-30minuten .p-wrap { padding: 22px 16px 44px; } body.skin-30minuten .p-cta-block, body.skin-30minuten .p-cta-wdh { padding: 24px 18px; border-radius: 18px; } body.skin-30minuten .p-cta { padding: 16px 28px; width: 100%; } }