/* ============================================================ Kampagnen-Skins, Teil 4: Buehne 2, Atelier, Fahrplan. 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-*). Die Bausteine darunter arbeiten nur mit diesen Variablen, damit keine Farbe je nur in einem Zweig existiert. --p-accent ist die Farbwahl des Kunden und bleibt stehen. Einzige Ausnahme mit Begruendung: Fahrplan (Anzeigetafel-Gelb). Schriften: nur Schnitte aus /assets/fonts/kampagnen-fonts.css. Cormorant Garamond und Jost fuer Buehne 2, Spectral und Karla fuer Atelier, Oswald und IBM Plex Sans fuer Fahrplan. Alle Gewichte wie im Entwurf. Beim Fahrplan traegt nur das Titelband Oswald 500, jede andere Anzeige steht in Oswald 400: im Entwurf hat von 25 Oswald-Stellen genau eine ein eigenes Gewicht, das ist die Ueberschrift, alle uebrigen erben die 400 der Seite. ============================================================ */ /* ------------------------------------------------------------ Gemeinsamer Ausgangspunkt fuer den Bonus-Block. Die Grundfassung bringt Leuchtrand, Radius, Schatten und einen Verlaufs-Rahmen als ::before mit. Alle drei Vorlagen bauen den Block selbst, deshalb wird er hier einmal zurueckgesetzt. Flaeche, Rahmen und Schrift- farben setzt danach jede Vorlage in BEIDEN Fassungen. ------------------------------------------------------------ */ body.skin-buehne2 .p-bonus-stack, body.skin-atelier .p-bonus-stack, body.skin-fahrplan .p-bonus-stack { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; overflow: visible; } body.skin-buehne2 .p-bonus-stack::before, body.skin-atelier .p-bonus-stack::before, body.skin-fahrplan .p-bonus-stack::before { display: none; } /* Lesbarer Akzent im Bonus-Block. Der reine Kundenton traegt als Schrift nicht: Gelb auf Papier und Gruen auf Papier liegen unter 1.5:1. Gemessen ueber alle 19 Paletten und beide Fassungen reicht ein Drittel Kundenton, der Rest Textfarbe, fuer mindestens 4.7:1. Die Farbe kippt mit dem Modus, weil --p-fg in beiden Fassungen gesetzt ist. */ body.skin-buehne2, body.skin-atelier { --sk-bonus-akzent: color-mix(in srgb, var(--p-accent) 36%, var(--p-fg)); } /* ============================================================ 1) BUEHNE 2 Dunkles Haus, ein Lichtkegel von der Traverse, das Video steht im Spot. Cormorant Garamond fuer alles Grosse, Jost fuer den Rest. Der Kegel wird aus --p-accent gemischt, damit die Farb- wahl des Kunden das Licht faerbt. ============================================================ */ body.skin-buehne2, [data-mode="dark"] body.skin-buehne2, body.skin-buehne2[data-mode="dark"] { --p-bg: #070A16; --p-fg: #E8E5DC; --p-muted: #8A8FA8; --p-card: #0C1122; --p-border: #232941; --sk-hell: #FBF4E4; --sk-leise: #7B8098; --sk-fliess: #CFCEC6; --sk-flaeche: rgba(255,255,255,0.025); --sk-linie: rgba(255,255,255,0.07); --sk-schirm: radial-gradient(ellipse 70% 80% at 50% 40%, #17203C 0%, #080C1A 74%); --sk-rahmen-schatten: 0 46px 120px -50px color-mix(in srgb, var(--p-accent) 32%, transparent), 0 24px 70px -30px rgba(0,0,0,0.9); --sk-kegel: radial-gradient(ellipse 46% 40% at 50% 22%, color-mix(in srgb, var(--p-accent) 20%, transparent) 0%, color-mix(in srgb, var(--p-accent) 10%, transparent) 34%, color-mix(in srgb, var(--p-accent) 4%, transparent) 58%, transparent 78%); --sk-reflex: radial-gradient(ellipse 50% 50% at 50% 50%, color-mix(in srgb, var(--p-accent) 10%, transparent) 0%, transparent 72%); /* Traverse mit drei Scheinwerfern, gezeichnet als Inline-SVG. */ --sk-traverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 314 34'%3E%3Cg fill='none' stroke='%236C7392' stroke-width='1.2'%3E%3Cpath d='M4 3h18l-3 15H7L4 3z'/%3E%3Cpath d='M13 0v3'/%3E%3Cpath d='M148 3h18l-3 15h-12l-3-15z'/%3E%3Cpath d='M157 0v3'/%3E%3Cpath d='M292 3h18l-3 15h-12l-3-15z'/%3E%3Cpath d='M301 0v3'/%3E%3C/g%3E%3Cellipse cx='13' cy='19.5' rx='6.5' ry='2' fill='%23E9C87A' opacity='0.45'/%3E%3Cellipse cx='157' cy='19.5' rx='6.5' ry='2' fill='%23F3D68F' opacity='0.85'/%3E%3Cellipse cx='301' cy='19.5' rx='6.5' ry='2' fill='%23E9C87A' opacity='0.45'/%3E%3C/svg%3E"); } /* Matinee: dasselbe Haus bei Tageslicht, Saallicht an. Der Kegel wird zur warmen Bahn von oben, die Traverse bekommt dunkle Streben, sonst verschwindet sie im hellen Raum. */ [data-mode="light"] body.skin-buehne2, body.skin-buehne2[data-mode="light"] { --p-bg: #F4F1E8; --p-fg: #1A1B26; --p-muted: #5C6079; --p-card: #FFFFFF; --p-border: #DCD6C6; --sk-hell: #14151F; --sk-leise: #6A6E85; --sk-fliess: #2E2F3C; --sk-flaeche: rgba(26,27,38,0.03); --sk-linie: rgba(26,27,38,0.12); --sk-schirm: radial-gradient(ellipse 70% 80% at 50% 40%, #2C3454 0%, #14182A 74%); --sk-rahmen-schatten: 0 40px 90px -50px color-mix(in srgb, var(--p-accent) 40%, transparent), 0 20px 50px -28px rgba(26,27,38,0.35); --sk-kegel: radial-gradient(ellipse 46% 40% at 50% 22%, color-mix(in srgb, var(--p-accent) 16%, transparent) 0%, color-mix(in srgb, var(--p-accent) 8%, transparent) 34%, color-mix(in srgb, var(--p-accent) 3%, transparent) 58%, transparent 78%); --sk-reflex: radial-gradient(ellipse 50% 50% at 50% 50%, color-mix(in srgb, var(--p-accent) 9%, transparent) 0%, transparent 72%); --sk-traverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 314 34'%3E%3Cg fill='none' stroke='%235A5F78' stroke-width='1.2'%3E%3Cpath d='M4 3h18l-3 15H7L4 3z'/%3E%3Cpath d='M13 0v3'/%3E%3Cpath d='M148 3h18l-3 15h-12l-3-15z'/%3E%3Cpath d='M157 0v3'/%3E%3Cpath d='M292 3h18l-3 15h-12l-3-15z'/%3E%3Cpath d='M301 0v3'/%3E%3C/g%3E%3Cellipse cx='13' cy='19.5' rx='6.5' ry='2' fill='%23B08A2E' opacity='0.5'/%3E%3Cellipse cx='157' cy='19.5' rx='6.5' ry='2' fill='%238A6A1E' opacity='0.9'/%3E%3Cellipse cx='301' cy='19.5' rx='6.5' ry='2' fill='%23B08A2E' opacity='0.5'/%3E%3C/svg%3E"); } body.skin-buehne2 { background-color: var(--p-bg); background-image: var(--sk-kegel), var(--sk-reflex); background-repeat: no-repeat, no-repeat; background-position: 50% -240px, 50% 690px; background-size: 1040px 1180px, 800px 190px; color: var(--p-fg); font-family: Jost, system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 300; } body.skin-buehne2 .p-wrap { --sk-spalte: 1000px; max-width: var(--sk-spalte); position: relative; padding: 78px 40px 54px; } /* Traverse ganz oben, ruhig und ohne Beruehrung mit dem Text */ body.skin-buehne2 .p-wrap::before { content: ""; position: absolute; top: 22px; left: 50%; margin-left: -157px; width: 314px; height: 34px; background-image: var(--sk-traverse); background-repeat: no-repeat; background-size: 314px 34px; opacity: 0.55; pointer-events: none; } /* Empfehlung im Halbdunkel, mittig unter der Traverse */ body.skin-buehne2 .p-empfehlung { justify-content: center; gap: 11px; font-size: 0.82rem; font-weight: 300; letter-spacing: 0.14em; text-transform: uppercase; color: var(--p-muted); opacity: 1; } body.skin-buehne2 .p-empfehlung .p-empfehlung-avatar, body.skin-buehne2 .p-empfehlung .p-empfehlung-foto { width: 34px; height: 34px; border-radius: 50%; background: transparent; border: 1px solid color-mix(in srgb, var(--p-accent) 45%, transparent); color: var(--p-accent); font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; font-size: 1.06rem; text-transform: none; } body.skin-buehne2 .p-empfehlung .p-empfehlung-text b { color: var(--p-fg); font-weight: 400; } body.skin-buehne2 .p-empfehlung .p-empfehlung-satz { text-transform: none; letter-spacing: 0.02em; } /* Titel im Licht */ body.skin-buehne2 .p-hero { text-align: center; padding-top: 34px; margin-bottom: 8px; } body.skin-buehne2 .p-hero h1 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(2.6rem, 6.6vw, 4.9rem); font-weight: 300; line-height: 1.04; letter-spacing: -0.012em; color: var(--sk-hell); margin: 0; } body.skin-buehne2 .p-sub { margin: 26px auto 0; max-width: 560px; font-size: 1.04rem; font-weight: 300; line-height: 1.8; color: var(--p-muted); text-align: center; } /* Das Video steht im Kegel. Beschriftung wandert unter das Bild, damit sie als Programmzeile gelesen wird. */ body.skin-buehne2 .p-video, body.skin-buehne2 .p-audio { display: flex; flex-direction: column; background: transparent; border: 0; border-radius: 0; padding: 0; margin: 52px auto 0; max-width: 820px; } body.skin-buehne2 .p-audio-label { order: 2; justify-content: space-between; margin: 14px 0 0; font-size: 0.78rem; font-weight: 300; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sk-leise); } body.skin-buehne2 .p-audio-label::after { content: "Hauptprogramm"; letter-spacing: 0.16em; } body.skin-buehne2 .p-video-wrap { margin-top: 0; border-radius: 0; border: 1px solid color-mix(in srgb, var(--p-accent) 30%, transparent); background: var(--sk-schirm); box-shadow: var(--sk-rahmen-schatten); } body.skin-buehne2 .p-video-wrap::after { border-radius: 0; } body.skin-buehne2 .p-video-play .p-video-play-core { flex: 0 0 auto; width: 84px; height: 84px; background: color-mix(in srgb, var(--p-accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--p-accent) 65%, transparent); color: var(--p-accent); box-shadow: none; } body.skin-buehne2 .p-video-play .p-video-play-hint { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase; color: #FBF4E4; } /* Programmtext im Halbdunkel */ body.skin-buehne2 .p-body { max-width: 66ch; margin-inline: auto; margin-top: 60px; font-size: 1.02rem; font-weight: 300; line-height: 1.86; color: var(--sk-fliess); } body.skin-buehne2 .p-body p:first-of-type { font-size: 1.06rem; color: var(--p-fg); } body.skin-buehne2 .p-body h2, body.skin-buehne2 .p-body h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; color: var(--sk-hell); } /* Vorhang faellt: Countdown ohne Kaesten, Zahlen im Antiqua-Schnitt */ body.skin-buehne2 .p-cta-block { margin-top: 46px; padding-top: 30px; border-top: 1px solid var(--sk-linie); display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; } body.skin-buehne2 .p-countdown { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0; text-align: left; } body.skin-buehne2 .p-countdown .p-countdown-label { font-size: 0.72rem; font-weight: 300; letter-spacing: 0.24em; text-transform: uppercase; color: var(--sk-leise); text-align: left; } body.skin-buehne2 .p-countdown .p-countdown-grid { justify-content: flex-start; margin: 12px 0 0; gap: 22px; } body.skin-buehne2 .p-countdown-box { flex: 0 0 auto; min-width: 0; max-width: none; } body.skin-buehne2 .p-countdown-box .p-cd-flip { background: transparent; box-shadow: none; aspect-ratio: auto; border-radius: 0; } body.skin-buehne2 .p-countdown-box .p-cd-flip::before, body.skin-buehne2 .p-countdown-box .p-cd-flip::after { display: none; } body.skin-buehne2 .p-countdown-box .p-cd-flip .p-cd-num { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 300; font-size: clamp(2.1rem, 6vw, 2.6rem); line-height: 1; color: var(--sk-hell); text-shadow: none; letter-spacing: 0; } body.skin-buehne2 .p-countdown-box:last-child .p-cd-flip .p-cd-num { color: color-mix(in srgb, var(--p-accent) 80%, var(--sk-hell)); } body.skin-buehne2 .p-countdown-box .p-cd-unit { font-size: 0.66rem; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sk-leise); } body.skin-buehne2 .p-cd-bartext, body.skin-buehne2 .p-cd-minimaltext { color: var(--p-fg); } body.skin-buehne2 .p-cta-wrap { text-align: right; margin-top: 0; } body.skin-buehne2 .p-cta { border-radius: 0; font-family: Jost, system-ui, sans-serif; font-weight: 500; font-size: 0.94rem; letter-spacing: 0.2em; text-transform: uppercase; padding: 18px 46px; margin-top: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--p-accent) 82%, #FFFFFF), var(--p-accent)); box-shadow: 0 20px 50px -22px color-mix(in srgb, var(--p-accent) 60%, transparent); } body.skin-buehne2 .p-cta:hover { transform: translateY(-2px); box-shadow: 0 24px 56px -22px color-mix(in srgb, var(--p-accent) 70%, transparent); } /* Zugaben: Setlist mit Nummern und Haarlinien */ body.skin-buehne2 .p-bonus-stack { margin-top: 58px; padding: 30px 36px 32px; background: var(--sk-flaeche); border: 1px solid var(--sk-linie); } body.skin-buehne2 .p-bonus-stack-head { margin-bottom: 8px; } body.skin-buehne2 .p-bonus-stack-eyebrow { color: var(--sk-bonus-akzent); -webkit-text-fill-color: var(--sk-bonus-akzent); opacity: 1; font-weight: 400; letter-spacing: 0.28em; text-transform: uppercase; font-size: 0.72rem; } body.skin-buehne2 .p-bonus-stack-title { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; font-size: clamp(1.5rem, 3vw, 2rem); color: var(--sk-hell); } /* -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-buehne2 .p-bonus-stack-title em, body.skin-buehne2 .p-redeem-title em { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--sk-bonus-akzent); -webkit-text-fill-color: var(--sk-bonus-akzent); } body.skin-buehne2 .p-bonus-stack-gift { display: none; } body.skin-buehne2 .p-bonus-stack-divider { background: var(--p-accent); width: 34px; height: 1px; } body.skin-buehne2 .p-bonus-stack-list { grid-template-columns: 1fr; gap: 0; counter-reset: sk-zugabe; } body.skin-buehne2 .p-bonus-card { counter-increment: sk-zugabe; } body.skin-buehne2 .p-bonus-card + .p-bonus-card { border-top: 1px solid var(--sk-linie); } body.skin-buehne2 .p-bonus-link { background: transparent; border: 0; border-radius: 0; padding: 18px 2px; grid-template-columns: 26px 64px 1fr; gap: 20px; align-items: center; } body.skin-buehne2 .p-bonus-link::before { content: counter(sk-zugabe); font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.5rem; line-height: 1; color: var(--sk-leise); } body.skin-buehne2 .p-bonus-link::after { display: none; } body.skin-buehne2 .p-bonus-link:hover { transform: none; box-shadow: none; background: color-mix(in srgb, var(--p-accent) 7%, transparent); } body.skin-buehne2 .p-bonus-stack .p-bonus-cover-wrap { width: 64px; height: 64px; border-radius: 0; border: 1px solid var(--sk-linie); background: var(--p-card); box-shadow: none; } body.skin-buehne2 .p-bonus-stack .p-bonus-typebadge { background: var(--p-card); color: var(--p-fg); border-radius: 0; border: 0; } body.skin-buehne2 .p-bonus-body .p-bonus-title { font-family: Jost, system-ui, sans-serif; font-weight: 400; font-size: 1.04rem; color: var(--p-fg); } body.skin-buehne2 .p-bonus-body .p-bonus-desc { color: var(--p-muted); opacity: 1; font-weight: 300; font-size: 0.86rem; } body.skin-buehne2 .p-bonus-body .p-bonus-value { background: transparent; color: var(--p-muted); border: 0; border-radius: 0; box-shadow: none; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: 1.06rem; letter-spacing: 0.02em; padding: 0; } body.skin-buehne2 .p-bonus-body .p-bonus-btn { background: transparent; color: var(--p-fg); border: 0; border-bottom: 1px solid color-mix(in srgb, var(--p-accent) 60%, transparent); border-radius: 0; box-shadow: none; padding: 6px 0; font-weight: 400; font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; } body.skin-buehne2 .p-bonus-link:hover .p-bonus-btn { transform: none; box-shadow: none; } body.skin-buehne2 .p-foot { margin-top: 56px; border-top: 1px solid var(--sk-linie); padding-top: 26px; color: var(--p-muted); font-weight: 300; } body.skin-buehne2 .p-foot-links button, body.skin-buehne2 .p-foot-links a { color: var(--p-muted); font-weight: 300; } body.skin-buehne2 .p-foot-meta, body.skin-buehne2 .p-foot-ki, body.skin-buehne2 .p-foot-copy { color: var(--p-fg); font-weight: 300; } @media (max-width: 640px) { body.skin-buehne2 .p-wrap { padding: 66px 18px 40px; } body.skin-buehne2 .p-wrap::before { transform: scale(0.7); transform-origin: 50% 0; } body.skin-buehne2 .p-video, body.skin-buehne2 .p-audio { margin-top: 34px; } body.skin-buehne2 .p-audio-label { flex-wrap: wrap; gap: 6px; } body.skin-buehne2 .p-body { margin-top: 36px; } body.skin-buehne2 .p-cta-block { gap: 24px; } body.skin-buehne2 .p-countdown .p-countdown-grid { gap: 14px; } body.skin-buehne2 .p-cta-wrap { text-align: left; width: 100%; } body.skin-buehne2 .p-cta { display: flex; justify-content: center; width: 100%; padding: 18px 20px; letter-spacing: 0.12em; } body.skin-buehne2 .p-bonus-stack { padding: 22px 16px 24px; } body.skin-buehne2 .p-bonus-link { grid-template-columns: 20px 52px 1fr; gap: 12px; } body.skin-buehne2 .p-bonus-stack .p-bonus-cover-wrap { width: 52px; height: 52px; } } /* ============================================================ 2) ATELIER Grundierte Leinwand als Untergrund, das Video steht als Bildtraeger auf einer Staffelei, die Boni liegen im Farbkasten. Spectral fuer die Antiqua, Karla fuer den Satz. Die Signalfarbe des Entwurfs (Zinnoberrot) ist die Rolle von --p-accent, die Farbwahl des Kunden bleibt also erhalten. ============================================================ */ body.skin-atelier, [data-mode="light"] body.skin-atelier, body.skin-atelier[data-mode="light"] { --p-bg: #C9C2B4; --p-fg: #2B2721; /* gegenueber dem Entwurf (#5C554A) abgedunkelt: auf der Leinwand lag der Nebentext sonst bei 4.1:1. */ --p-muted: #514A3F; --p-card: #F3EFE6; --p-border: #BDB4A2; --sk-papier: #F3EFE6; --sk-tafel: #EDE7DA; --sk-rahmen: #D6CEBD; --sk-linie: #BDB4A2; --sk-leinwand: linear-gradient(160deg, #3A342B 0%, #211D18 100%); --sk-band-bg: #2B2721; --sk-band-fg: #EFE9DC; --sk-band-muted: #B5AC99; --sk-band-akzent: color-mix(in srgb, var(--p-accent) 70%, #EFE9DC); --sk-schatten: 0 30px 70px -34px rgba(43,39,33,0.65); --sk-wolken: radial-gradient(ellipse 40% 30% at 18% 12%, rgba(238,233,222,0.75), rgba(238,233,222,0) 70%), radial-gradient(ellipse 45% 35% at 82% 30%, rgba(226,219,203,0.70), rgba(226,219,203,0) 70%), radial-gradient(ellipse 55% 40% at 40% 88%, rgba(200,192,178,0.70), rgba(200,192,178,0) 72%); /* Staffelei-Beine und Farbklecks, beide als Inline-SVG. */ --sk-staffelei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 126'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M232 0 L112 120' stroke='%2393815F' stroke-width='14'/%3E%3Cpath d='M468 0 L588 120' stroke='%2393815F' stroke-width='14'/%3E%3Cpath d='M350 6 L350 112' stroke='%237E6D51' stroke-width='12'/%3E%3Cpath d='M158 74 L542 74' stroke='%23A08D69' stroke-width='10'/%3E%3C/g%3E%3C/svg%3E"); } /* Nachtatelier: dieselbe Werkstatt bei Arbeitslicht. Die Leinwand wird zum gedaempften Karton, das Papier zu warmem Ton, der Balken unten kippt ins Helle, damit er weiter heraussticht. */ [data-mode="dark"] body.skin-atelier, body.skin-atelier[data-mode="dark"] { --p-bg: #221F1A; --p-fg: #F0EADC; --p-muted: #A79C8A; --p-card: #2E2A23; --p-border: #4B4438; --sk-papier: #2E2A23; --sk-tafel: #37322A; --sk-rahmen: #4B4438; --sk-linie: #4B4438; --sk-leinwand: linear-gradient(160deg, #16130F 0%, #0B0907 100%); --sk-band-bg: #EFE9DC; --sk-band-fg: #221F1A; --sk-band-muted: #5F584B; --sk-band-akzent: color-mix(in srgb, var(--p-accent) 70%, #221F1A); --sk-schatten: 0 34px 80px -38px rgba(0,0,0,0.85); --sk-wolken: radial-gradient(ellipse 40% 30% at 18% 12%, rgba(72,65,54,0.70), rgba(72,65,54,0) 70%), radial-gradient(ellipse 45% 35% at 82% 30%, rgba(60,54,45,0.70), rgba(60,54,45,0) 70%), radial-gradient(ellipse 55% 40% at 40% 88%, rgba(45,41,34,0.75), rgba(45,41,34,0) 72%); --sk-staffelei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 126'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M232 0 L112 120' stroke='%236A5B41' stroke-width='14'/%3E%3Cpath d='M468 0 L588 120' stroke='%236A5B41' stroke-width='14'/%3E%3Cpath d='M350 6 L350 112' stroke='%23594C36' stroke-width='12'/%3E%3Cpath d='M158 74 L542 74' stroke='%23776849' stroke-width='10'/%3E%3C/g%3E%3C/svg%3E"); } body.skin-atelier { background-color: var(--p-bg); background-image: var(--sk-wolken); background-repeat: no-repeat; background-attachment: fixed; color: var(--p-fg); font-family: Karla, system-ui, -apple-system, 'Segoe UI', sans-serif; } body.skin-atelier .p-wrap { --sk-spalte: 1120px; max-width: var(--sk-spalte); padding: 40px 44px 52px; } /* Werkstatt-Schild oben */ body.skin-atelier .p-empfehlung { justify-content: flex-start; font-size: 0.84rem; color: var(--p-muted); opacity: 1; } body.skin-atelier .p-empfehlung::after { content: "Atelier"; margin-left: auto; font-family: Spectral, Georgia, serif; font-style: italic; font-size: 0.86rem; letter-spacing: 0.1em; color: var(--p-muted); } body.skin-atelier .p-empfehlung .p-empfehlung-avatar, body.skin-atelier .p-empfehlung .p-empfehlung-foto { width: 34px; height: 34px; border-radius: 50%; background: var(--p-accent); color: var(--p-accent-fg); border: 0; font-family: Spectral, Georgia, serif; font-weight: 400; font-size: 1.02rem; } body.skin-atelier .p-empfehlung .p-empfehlung-text b { color: var(--p-fg); font-weight: 700; } /* Titel: Antiqua, linksbuendig, darunter der Pinselstrich */ body.skin-atelier .p-hero { text-align: left; padding-top: 34px; margin-bottom: 0; } body.skin-atelier .p-hero h1 { font-family: Spectral, Georgia, serif; font-size: clamp(2.3rem, 5.4vw, 3.75rem); font-weight: 300; line-height: 1.06; letter-spacing: -0.015em; color: var(--p-fg); margin: 0; max-width: 22ch; } body.skin-atelier .p-sub { margin: 20px 0 0; max-width: 56ch; font-size: 1.02rem; line-height: 1.75; color: var(--p-muted); text-align: left; } /* Pinselstrich unter dem Vorspann. Kurz und waagerecht, damit er nirgends durch Text oder Button laeuft. */ body.skin-atelier .p-sub::after { content: ""; display: block; width: 84px; height: 3px; margin-top: 22px; background: var(--p-accent); } /* Bildtraeger auf der Staffelei. Die Neigung ist Deko im Ruhezustand, beim Abspielen richtet sich der Traeger auf. */ body.skin-atelier .p-video, body.skin-atelier .p-audio { position: relative; display: flex; flex-direction: column; background: var(--sk-papier); border: 0; border-radius: 0; padding: 22px 22px 56px; margin: 44px 0 138px; box-shadow: var(--sk-schatten); transform: rotate(-1deg); transform-origin: 50% 40%; 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. */ /* Die Beine sitzen unter dem Traeger, sie kreuzen keinen Inhalt. */ body.skin-atelier .p-video::after, body.skin-atelier .p-audio::after { content: ""; position: absolute; left: 0; right: 0; bottom: -118px; height: 126px; background-image: var(--sk-staffelei); background-repeat: no-repeat; background-position: center top; background-size: 100% 126px; pointer-events: none; } /* Farbklecks auf dem Traeger, unten rechts im Papierrand */ body.skin-atelier .p-video::before, body.skin-atelier .p-audio::before { content: ""; position: absolute; right: 22px; bottom: 10px; width: 96px; height: 46px; background-color: var(--p-accent); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 46'%3E%3Cpath d='M16 26c-8-6-4-17 6-19 8-2 11 3 19 2 7-1 10-5 17-3 9 3 12 9 20 10 8 1 12 4 11 9-2 7-14 9-27 9-9 0-17-1-25-2-9-1-16-2-21-6z' fill='%23000'/%3E%3Ccircle cx='82' cy='8' r='3.4' fill='%23000' opacity='0.75'/%3E%3Ccircle cx='9' cy='34' r='2.4' fill='%23000' opacity='0.6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 46'%3E%3Cpath d='M16 26c-8-6-4-17 6-19 8-2 11 3 19 2 7-1 10-5 17-3 9 3 12 9 20 10 8 1 12 4 11 9-2 7-14 9-27 9-9 0-17-1-25-2-9-1-16-2-21-6z' fill='%23000'/%3E%3Ccircle cx='82' cy='8' r='3.4' fill='%23000' opacity='0.75'/%3E%3Ccircle cx='9' cy='34' r='2.4' fill='%23000' opacity='0.6'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 96px 46px; mask-size: 96px 46px; opacity: 0.92; pointer-events: none; } /* Bildunterschrift unten links auf dem Traeger */ body.skin-atelier .p-audio-label { order: 2; margin: 14px 0 0; font-family: Spectral, Georgia, serif; font-style: italic; font-size: 1.02rem; color: var(--p-muted); } body.skin-atelier .p-video-wrap { margin-top: 0; border: 2px solid var(--sk-rahmen); border-radius: 0; background: var(--sk-leinwand); box-shadow: none; } body.skin-atelier .p-video-wrap::after { border-radius: 0; } body.skin-atelier .p-video-play .p-video-play-core { flex: 0 0 auto; width: 82px; height: 82px; background: var(--p-accent); color: var(--p-accent-fg); border: 0; box-shadow: 0 12px 30px -12px color-mix(in srgb, var(--p-accent) 80%, transparent); } body.skin-atelier .p-video-play .p-video-play-hint { font-family: Spectral, Georgia, serif; font-weight: 400; font-style: italic; font-size: 0.94rem; letter-spacing: 0.04em; color: #F3EFE6; } body.skin-atelier .p-body { max-width: 66ch; margin-inline: 0; font-size: 1rem; line-height: 1.85; color: var(--p-fg); } body.skin-atelier .p-body p:first-of-type { font-size: 1.04rem; } body.skin-atelier .p-body h2, body.skin-atelier .p-body h3 { font-family: Spectral, Georgia, serif; font-weight: 600; color: var(--p-fg); } /* Farbkasten: die Boni liegen als Tuben nebeneinander */ body.skin-atelier .p-bonus-stack { margin-top: 40px; padding: 30px 34px 32px; background: color-mix(in srgb, var(--sk-papier) 86%, transparent); border: 1px solid var(--sk-linie); } body.skin-atelier .p-bonus-stack-eyebrow { color: var(--p-muted); opacity: 1; letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.74rem; font-weight: 400; } body.skin-atelier .p-bonus-stack-title { font-family: Spectral, Georgia, serif; font-weight: 600; font-size: clamp(1.3rem, 2.8vw, 1.6rem); color: var(--p-fg); } body.skin-atelier .p-bonus-stack-title em, body.skin-atelier .p-redeem-title em { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--sk-bonus-akzent); -webkit-text-fill-color: var(--sk-bonus-akzent); } body.skin-atelier .p-bonus-stack-gift { display: none; } body.skin-atelier .p-bonus-stack-divider { background: var(--p-accent); width: 46px; height: 3px; } body.skin-atelier .p-bonus-stack-list { gap: 22px; } body.skin-atelier .p-bonus-link { background: var(--sk-tafel); border: 1px solid var(--sk-linie); border-radius: 0; padding: 16px 18px; grid-template-columns: 88px 1fr; gap: 16px; align-items: center; } body.skin-atelier .p-bonus-link::after { display: none; } body.skin-atelier .p-bonus-link:hover { transform: none; border-color: var(--p-accent); box-shadow: 0 14px 30px -18px rgba(0,0,0,0.5); } body.skin-atelier .p-bonus-stack .p-bonus-cover-wrap { width: 88px; height: 88px; border-radius: 0; border: 1px solid var(--sk-rahmen); background: var(--sk-papier); box-shadow: none; } /* Typ-Marke auf der Bildkachel: bis hierher lag sie auf dem reinen Kundenton mit der Palette-Gegenfarbe darauf. Bei hellen Toenen (Aprikose, Flieder) sind das 2.5:1. Sie steht jetzt wie in den uebrigen Vorlagen auf dem Schrift-Ton der Vorlage, das traegt in beiden Fassungen. */ body.skin-atelier .p-bonus-stack .p-bonus-typebadge { background: var(--p-fg); color: var(--sk-papier); border-radius: 0; border: 0; } body.skin-atelier .p-bonus-body .p-bonus-title { font-weight: 700; font-size: 1rem; color: var(--p-fg); } body.skin-atelier .p-bonus-body .p-bonus-desc { font-family: Spectral, Georgia, serif; font-style: italic; font-size: 0.88rem; color: var(--p-muted); opacity: 1; } body.skin-atelier .p-bonus-body .p-bonus-value { background: transparent; color: var(--p-muted); border: 1px solid var(--sk-linie); border-radius: 0; box-shadow: none; font-weight: 700; letter-spacing: 0.06em; } body.skin-atelier .p-bonus-body .p-bonus-btn { background: transparent; color: var(--p-fg); border: 1px solid var(--p-accent); border-radius: 0; box-shadow: none; font-weight: 700; font-size: 0.82rem; letter-spacing: 0.04em; } body.skin-atelier .p-bonus-link:hover .p-bonus-btn { background: var(--p-accent); color: var(--p-accent-fg); transform: none; box-shadow: none; } /* Trocknungszeit und Button in einem geschlossenen Balken */ body.skin-atelier .p-cta-block { margin-top: 30px; background: var(--sk-band-bg); color: var(--sk-band-fg); padding: 26px 34px; display: flex; align-items: center; justify-content: space-between; gap: 34px; flex-wrap: wrap; } body.skin-atelier .p-countdown { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0; text-align: left; } body.skin-atelier .p-countdown .p-countdown-label { font-family: Spectral, Georgia, serif; font-style: italic; font-weight: 400; font-size: 0.92rem; letter-spacing: 0; text-transform: none; color: var(--sk-band-muted); text-align: left; } body.skin-atelier .p-countdown .p-countdown-grid { justify-content: flex-start; margin: 9px 0 0; gap: 20px; } body.skin-atelier .p-countdown-box { flex: 0 0 auto; min-width: 0; max-width: none; } body.skin-atelier .p-countdown-box .p-cd-flip { background: transparent; box-shadow: none; aspect-ratio: auto; border-radius: 0; } body.skin-atelier .p-countdown-box .p-cd-flip::before, body.skin-atelier .p-countdown-box .p-cd-flip::after { display: none; } body.skin-atelier .p-countdown-box .p-cd-flip .p-cd-num { font-family: Karla, system-ui, sans-serif; font-weight: 700; font-size: clamp(1.9rem, 5.4vw, 2.25rem); line-height: 1; color: var(--sk-band-fg); text-shadow: none; } body.skin-atelier .p-countdown-box:last-child .p-cd-flip .p-cd-num { color: var(--sk-band-akzent); } body.skin-atelier .p-countdown-box .p-cd-unit { font-size: 0.78rem; font-weight: 400; letter-spacing: 0.02em; text-transform: none; color: var(--sk-band-muted); } /* Alles Uebrige im Balken erbt sonst die Seitenfarbe und wird blass. */ body.skin-atelier .p-cta-block .p-cd-sep, body.skin-atelier .p-cta-block .p-cd-unit-inline, body.skin-atelier .p-cta-block .p-cd-bartext, body.skin-atelier .p-cta-block .p-cd-minimaltext, body.skin-atelier .p-cta-block .p-countdown-expired { color: var(--sk-band-fg); } body.skin-atelier .p-cta-wrap { text-align: right; margin-top: 0; } body.skin-atelier .p-cta { background: var(--p-accent); color: var(--p-accent-fg); border-radius: 0; font-family: Karla, system-ui, sans-serif; font-weight: 700; font-size: 1.02rem; letter-spacing: 0.06em; padding: 17px 44px; margin-top: 0; box-shadow: none; } body.skin-atelier .p-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(0,0,0,0.5); } body.skin-atelier .p-foot { margin-top: 34px; border-top: 0; flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; text-align: left; gap: 34px; color: var(--p-muted); } body.skin-atelier .p-foot-links { justify-content: flex-start; } body.skin-atelier .p-foot-links button, body.skin-atelier .p-foot-links a { color: var(--p-muted); } body.skin-atelier .p-foot-meta, body.skin-atelier .p-foot-ki, body.skin-atelier .p-foot-copy { color: var(--p-fg); text-align: right; max-width: 560px; } @media (prefers-reduced-motion: reduce) { body.skin-atelier .p-video, body.skin-atelier .p-audio { transition: none; } } @media (max-width: 900px) { body.skin-atelier .p-bonus-stack-list { grid-template-columns: 1fr; } } @media (max-width: 640px) { body.skin-atelier { background-attachment: scroll; } body.skin-atelier .p-wrap { padding: 24px 18px 40px; } body.skin-atelier .p-empfehlung::after { display: none; } body.skin-atelier .p-video, body.skin-atelier .p-audio { transform: none; padding: 12px 12px 44px; margin: 30px 0 96px; } body.skin-atelier .p-video::after, body.skin-atelier .p-audio::after { bottom: -80px; height: 88px; background-size: 100% 88px; } body.skin-atelier .p-video::before, body.skin-atelier .p-audio::before { width: 68px; height: 33px; right: 12px; bottom: 8px; -webkit-mask-size: 68px 33px; mask-size: 68px 33px; } body.skin-atelier .p-cta-block { padding: 20px 18px; gap: 20px; } body.skin-atelier .p-countdown .p-countdown-grid { gap: 12px; } body.skin-atelier .p-cta-wrap { width: 100%; text-align: left; } body.skin-atelier .p-cta { display: flex; justify-content: center; width: 100%; padding: 16px 20px; } body.skin-atelier .p-bonus-stack { padding: 22px 16px 24px; } body.skin-atelier .p-bonus-link { grid-template-columns: 64px 1fr; gap: 12px; } body.skin-atelier .p-bonus-stack .p-bonus-cover-wrap { width: 64px; height: 64px; } body.skin-atelier .p-foot { flex-direction: column; align-items: flex-start; gap: 14px; } body.skin-atelier .p-foot-meta, body.skin-atelier .p-foot-ki, body.skin-atelier .p-foot-copy { text-align: left; } } /* ============================================================ 3) FAHRPLAN Bahnhofs-Anzeigetafel: Fallblatt-Kacheln, gelbe Laufschrift als Titel, Ticket-Block fuer die Boni. Oswald fuer alle Anzeigen, IBM Plex Sans fuer den Satz. Hier wird --p-accent gesetzt: ohne das Anzeigetafel-Gelb sind Kacheln, Titelband und Einstiegs-Button nicht wiederzuerkennen, ein beliebiger Kundenton loest die Tafel-Anmutung auf. ============================================================ */ body.skin-fahrplan, [data-mode="dark"] body.skin-fahrplan, body.skin-fahrplan[data-mode="dark"] { --p-bg: #0B1A33; --p-fg: #E6ECF5; --p-muted: #8FA4C6; --p-card: #0E2244; --p-border: #1B3762; --p-accent: #F5C542; --p-accent-fg: #071224; --sk-tafel: #071224; --sk-tafel-fg: #E6ECF5; --sk-kachel: #142A4C; --sk-schild: #6A82A8; --sk-ticket: #E8EDF5; --sk-ticket-fg: #0B1A33; --sk-ticket-muted: #4B5E7E; --sk-ticket-linie: #C7D0DE; --sk-schirm: linear-gradient(165deg, #12264A 0%, #050C18 100%); } /* Tagfahrplan: die Halle bei Tageslicht. Die Tafeln bleiben dunkel, weil eine Anzeigetafel dunkel ist, die Halle drumherum wird hell. */ [data-mode="light"] body.skin-fahrplan, body.skin-fahrplan[data-mode="light"] { --p-bg: #EEF2F8; --p-fg: #0B1A33; --p-muted: #4A5E80; --p-card: #FFFFFF; --p-border: #C3CFE0; --p-accent: #F5C542; --p-accent-fg: #071224; --sk-tafel: #0B1A33; --sk-tafel-fg: #E6ECF5; --sk-kachel: #16305A; --sk-schild: #9DB2D2; --sk-ticket: #FFFFFF; --sk-ticket-fg: #0B1A33; --sk-ticket-muted: #4A5E80; --sk-ticket-linie: #C3CFE0; --sk-schirm: linear-gradient(165deg, #12264A 0%, #050C18 100%); } body.skin-fahrplan { background: var(--p-bg); color: var(--p-fg); font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Spaltenbreite und Seitenrand stehen am body, weil die Tafel-Kopfzeile (.p-empfehlung) ausserhalb von .p-wrap liegt und dieselbe Breite und denselben Rand braucht. Beide Bloecke lesen dieselbe Variable. */ --sk-spalte: 1180px; --sk-rand: 56px; } body.skin-fahrplan .p-wrap { max-width: var(--sk-spalte); padding: 0 var(--sk-rand) 46px; } /* Kopf der Anzeigetafel */ body.skin-fahrplan .p-empfehlung { max-width: var(--sk-spalte); margin: 0 auto; padding: 20px var(--sk-rand) 22px; background: var(--sk-tafel); color: var(--sk-schild); box-shadow: inset 0 -3px 0 var(--p-border); justify-content: flex-end; gap: 11px; font-size: 0.82rem; opacity: 1; } body.skin-fahrplan .p-empfehlung::before { content: "GLEIS 36"; margin-right: auto; background: var(--sk-kachel); color: var(--p-accent); font-family: Oswald, 'Roboto Condensed', sans-serif; font-size: 1.32rem; line-height: 1; letter-spacing: 0.1em; padding: 8px 14px 10px; box-shadow: inset 0 -1px 0 rgba(0,0,0,0.5); } body.skin-fahrplan .p-empfehlung .p-empfehlung-avatar, body.skin-fahrplan .p-empfehlung .p-empfehlung-foto { width: 33px; height: 33px; border-radius: 50%; background: var(--p-accent); color: var(--p-accent-fg); border: 0; font-family: Oswald, 'Roboto Condensed', sans-serif; font-weight: 400; font-size: 1.06rem; } body.skin-fahrplan .p-empfehlung .p-empfehlung-text { color: var(--sk-schild); } body.skin-fahrplan .p-empfehlung .p-empfehlung-text b { color: var(--sk-tafel-fg); font-weight: 600; } /* Titel als gelbe Laufschrift-Zeile ueber die volle Spaltenbreite. Das Band liegt an der Ueberschrift, nicht am ganzen Kopfbereich: sonst stuende der Vorspann in Blau auf Gelb. */ body.skin-fahrplan .p-hero { margin: 0 0 26px; padding: 0; background: transparent; text-align: left; } body.skin-fahrplan .p-hero h1 { display: block; background: var(--p-accent); color: var(--p-accent-fg); margin: 0 calc(-1 * var(--sk-rand)) 26px; padding: 16px var(--sk-rand) 18px; font-family: Oswald, 'Roboto Condensed', sans-serif; font-weight: 500; font-size: clamp(1.9rem, 4.4vw, 2.9rem); line-height: 1.1; letter-spacing: 0.02em; } body.skin-fahrplan .p-sub { margin: 0 0 26px; max-width: 68ch; font-size: 1.06rem; line-height: 1.7; color: var(--p-muted); text-align: left; } /* Video im Anzeigerahmen */ body.skin-fahrplan .p-video, body.skin-fahrplan .p-audio { background: var(--sk-tafel); border: 1px solid var(--p-border); border-radius: 0; padding: 12px; margin: 26px 0; } body.skin-fahrplan .p-audio-label { font-family: Oswald, 'Roboto Condensed', sans-serif; font-size: 0.84rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sk-schild); margin-bottom: 10px; } body.skin-fahrplan .p-video-wrap { margin-top: 0; border: 0; border-radius: 0; background: var(--sk-schirm); box-shadow: none; } body.skin-fahrplan .p-video-wrap::after { border-radius: 0; } body.skin-fahrplan .p-video-play .p-video-play-core { flex: 0 0 auto; width: 82px; height: 82px; background: var(--p-accent); color: var(--p-accent-fg); border: 0; box-shadow: 0 0 46px rgba(245,197,66,0.35); } body.skin-fahrplan .p-video-play .p-video-play-hint { font-family: Oswald, 'Roboto Condensed', sans-serif; font-weight: 400; font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: #E6ECF5; } body.skin-fahrplan .p-body { max-width: 70ch; margin-inline: 0; font-size: 1rem; line-height: 1.85; color: var(--p-fg); } body.skin-fahrplan .p-body p:first-of-type { color: var(--p-fg); } body.skin-fahrplan .p-body h2, body.skin-fahrplan .p-body h3 { font-family: Oswald, 'Roboto Condensed', sans-serif; font-weight: 400; letter-spacing: 0.06em; } /* Ticket: die Zusatzleistungen auf hellem Fahrschein */ body.skin-fahrplan .p-bonus-stack { margin-top: 34px; padding: 24px 26px 26px; background: var(--sk-ticket); color: var(--sk-ticket-fg); border: 1px solid var(--sk-ticket-linie); } /* Der Fahrschein liegt im Nachtfahrplan hell auf dunkler Halle. Zwei Dinge aus der Grundfassung ziehen dagegen und muessen hier ausdruecklich zurueckgenommen werden: 1) Die Listenzeile bekommt von aussen die Karten-Flaeche der Seite (--p-card, im Dunkeln tiefblau) und legt sie ueber den Fahrschein. Die Ticket-Schrift stand damit dunkel auf dunkel, 1.1:1. 2) Die Ueberschrift wird von aussen ueber -webkit-text-fill-color auf die Seiten-Schriftfarbe gesetzt, im Dunkeln also fast weiss. Auf dem hellen Fahrschein blieb davon nichts uebrig, 1.01:1. Beides gilt in beiden Fassungen, weil der Fahrschein in beiden hell ist, deshalb steht es ohne Modus-Bedingung. */ body.skin-fahrplan .p-bonus-card { background: transparent; } body.skin-fahrplan .p-bonus-stack-eyebrow { font-family: Oswald, 'Roboto Condensed', sans-serif; font-size: 0.86rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sk-ticket-muted); opacity: 1; font-weight: 400; } body.skin-fahrplan .p-bonus-stack-title { font-family: Oswald, 'Roboto Condensed', sans-serif; font-weight: 400; font-size: clamp(1.4rem, 3vw, 1.8rem); letter-spacing: 0.04em; color: var(--sk-ticket-fg); -webkit-text-fill-color: var(--sk-ticket-fg); } /* Das Anzeigetafel-Gelb ist als Schrift auf dem hellen Fahrschein zu schwach, deshalb steht hier ein abgedunkeltes Gelb. Es braucht auch -webkit-text-fill-color, sonst faerbt die Grundfassung das Wort. */ body.skin-fahrplan .p-bonus-stack-title em, body.skin-fahrplan .p-redeem-title em { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #6F5500; -webkit-text-fill-color: #6F5500; } body.skin-fahrplan .p-bonus-stack-gift { display: none; } /* Der Trenner ist der Fahrtverlauf: eine kurze waagerechte Strecke mit zwei Halten. Er steht allein in der Kopfzeile und kreuzt keinen Inhalt. */ body.skin-fahrplan .p-bonus-stack-divider { width: 140px; height: 10px; background: radial-gradient(circle 5px at 5px 5px, var(--p-accent) 96%, transparent 100%) no-repeat, radial-gradient(circle 5px at 135px 5px, var(--p-accent) 96%, transparent 100%) no-repeat, linear-gradient(var(--sk-ticket-linie), var(--sk-ticket-linie)) no-repeat 5px 4px / 130px 2px; border-radius: 0; } body.skin-fahrplan .p-bonus-stack-list { grid-template-columns: 1fr; gap: 0; } body.skin-fahrplan .p-bonus-card + .p-bonus-card { border-top: 1px solid var(--sk-ticket-linie); } body.skin-fahrplan .p-bonus-link { background: transparent; border: 0; border-radius: 0; padding: 16px 2px; grid-template-columns: 72px 1fr; gap: 16px; align-items: center; } body.skin-fahrplan .p-bonus-link::after { display: none; } body.skin-fahrplan .p-bonus-link:hover { transform: none; box-shadow: none; background: rgba(11,26,51,0.05); } body.skin-fahrplan .p-bonus-stack .p-bonus-cover-wrap { width: 72px; height: 72px; border-radius: 0; border: 1px solid var(--sk-ticket-linie); background: var(--sk-ticket); box-shadow: none; } body.skin-fahrplan .p-bonus-stack .p-bonus-typebadge { background: var(--sk-ticket-fg); color: var(--sk-ticket); border-radius: 0; border: 0; } body.skin-fahrplan .p-bonus-body .p-bonus-title { color: var(--sk-ticket-fg); font-weight: 600; font-size: 0.98rem; } body.skin-fahrplan .p-bonus-body .p-bonus-desc { color: var(--sk-ticket-muted); opacity: 1; font-size: 0.86rem; } body.skin-fahrplan .p-bonus-body .p-bonus-value { background: transparent; font-weight: 400; color: var(--sk-ticket-muted); border: 0; border-radius: 0; box-shadow: none; font-family: Oswald, 'Roboto Condensed', sans-serif; font-size: 0.94rem; letter-spacing: 0.04em; padding: 0; } body.skin-fahrplan .p-bonus-body .p-bonus-btn { background: var(--sk-ticket-fg); color: var(--sk-ticket); border: 0; border-radius: 0; box-shadow: none; font-family: Oswald, 'Roboto Condensed', sans-serif; font-weight: 400; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; } body.skin-fahrplan .p-bonus-link:hover .p-bonus-btn { background: var(--p-accent); color: var(--p-accent-fg); transform: none; box-shadow: none; } /* Abfahrt in: Fallblatt-Kacheln und der Einstiegs-Button */ body.skin-fahrplan .p-cta-block { margin-top: 26px; background: var(--sk-tafel); border: 1px solid var(--p-border); padding: 22px 24px 24px; } body.skin-fahrplan .p-countdown { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0; max-width: none; text-align: left; } body.skin-fahrplan .p-countdown .p-countdown-label { font-family: Oswald, 'Roboto Condensed', sans-serif; font-weight: 400; font-size: 0.84rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sk-schild); text-align: left; } body.skin-fahrplan .p-countdown .p-countdown-grid { justify-content: flex-start; max-width: none; margin: 16px 0 0; gap: 14px; } body.skin-fahrplan .p-countdown-box { flex: 0 0 auto; min-width: 0; max-width: none; gap: 5px; } body.skin-fahrplan .p-countdown-box .p-cd-flip { width: auto; aspect-ratio: auto; border-radius: 0; background: var(--sk-kachel); box-shadow: inset 0 -1px 0 rgba(0,0,0,0.5); padding: 8px 14px 10px; } body.skin-fahrplan .p-countdown-box .p-cd-flip::before, body.skin-fahrplan .p-countdown-box .p-cd-flip::after { display: none; } body.skin-fahrplan .p-countdown-box .p-cd-flip .p-cd-num { font-family: Oswald, 'Roboto Condensed', sans-serif; font-weight: 400; font-size: clamp(1.6rem, 5vw, 2.1rem); line-height: 1; color: var(--p-accent); text-shadow: none; } body.skin-fahrplan .p-countdown-box:last-child .p-cd-flip { background: var(--p-accent); } body.skin-fahrplan .p-countdown-box:last-child .p-cd-flip .p-cd-num { color: var(--p-accent-fg); } body.skin-fahrplan .p-countdown-box .p-cd-unit { font-size: 0.68rem; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sk-schild); } /* Die uebrigen Countdown-Bauformen stehen sonst in Seitenfarbe auf der Tafel. */ body.skin-fahrplan .p-cta-block .p-cd-sep, body.skin-fahrplan .p-cta-block .p-cd-unit-inline, body.skin-fahrplan .p-cta-block .p-cd-bartext, body.skin-fahrplan .p-cta-block .p-cd-minimaltext, body.skin-fahrplan .p-cta-block .p-countdown-expired { color: var(--sk-tafel-fg); } body.skin-fahrplan .p-cta-wrap { margin-top: 18px; text-align: left; } body.skin-fahrplan .p-cta { display: flex; justify-content: center; width: 100%; background: var(--p-accent); color: var(--p-accent-fg); border-radius: 0; font-family: Oswald, 'Roboto Condensed', sans-serif; font-weight: 400; font-size: 1.24rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 15px 24px; margin-top: 0; box-shadow: none; } body.skin-fahrplan .p-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(0,0,0,0.6); } /* Fusszeile wie eine Hinweistafel in der Halle */ body.skin-fahrplan .p-foot { margin-top: 38px; background: var(--sk-tafel); border-top: 0; padding: 18px 24px; flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; text-align: left; gap: 34px; color: var(--sk-schild); } body.skin-fahrplan .p-foot-links { justify-content: flex-start; } body.skin-fahrplan .p-foot-links button, body.skin-fahrplan .p-foot-links a { color: var(--sk-schild); } body.skin-fahrplan .p-foot-links button:hover, body.skin-fahrplan .p-foot-links a:hover { color: var(--sk-tafel-fg); } body.skin-fahrplan .p-foot-meta, body.skin-fahrplan .p-foot-ki, body.skin-fahrplan .p-foot-copy { color: var(--sk-tafel-fg); text-align: right; max-width: 560px; } @media (max-width: 640px) { body.skin-fahrplan { --sk-rand: 16px; } body.skin-fahrplan .p-wrap { padding-bottom: 34px; } body.skin-fahrplan .p-empfehlung { flex-wrap: wrap; gap: 10px; padding-top: 16px; padding-bottom: 18px; } body.skin-fahrplan .p-empfehlung::before { margin-right: 0; font-size: 1.06rem; padding: 6px 10px 8px; } body.skin-fahrplan .p-hero { margin-bottom: 22px; } body.skin-fahrplan .p-hero h1 { margin-bottom: 20px; } body.skin-fahrplan .p-video, body.skin-fahrplan .p-audio { padding: 8px; } body.skin-fahrplan .p-countdown .p-countdown-grid { flex-wrap: wrap; gap: 10px; } body.skin-fahrplan .p-countdown-box .p-cd-flip { padding: 7px 11px 9px; } body.skin-fahrplan .p-cta { font-size: 1.06rem; padding: 15px 18px; letter-spacing: 0.08em; } body.skin-fahrplan .p-bonus-stack { padding: 18px 16px 20px; } body.skin-fahrplan .p-bonus-link { grid-template-columns: 56px 1fr; gap: 12px; } body.skin-fahrplan .p-bonus-stack .p-bonus-cover-wrap { width: 56px; height: 56px; } body.skin-fahrplan .p-foot { flex-direction: column; align-items: flex-start; gap: 14px; padding: 16px; } body.skin-fahrplan .p-foot-meta, body.skin-fahrplan .p-foot-ki, body.skin-fahrplan .p-foot-copy { text-align: left; } }