/* Zweitkarriere-CI fuer den Shortquiz. Nur Optik, keine Struktur- oder Funktionsaenderung. * Varianten per . Tokens aus branding/build/palette.json. * A „Ruhig hell“ · B „Petrol-Bühne“ · C „Stufen“ */ :root { --zk-petrol: #0F4C4A; --zk-petrol-dark: #0B3A38; --zk-apricot: #F2A77E; --zk-terrakotta: #B84A2F; --zk-creme: #FAF6F0; --zk-sand: #EFE6D8; --zk-salbei: #D5E5DD; --zk-tinte: #1F2A2E; --zk-schiefer: #5B6B6E; } html[data-zk-theme] body { background: var(--zk-creme); color: var(--zk-tinte); } html[data-zk-theme] .font-display { font-family: Fraunces, Georgia, serif; font-optical-sizing: auto; } /* ---------- gemeinsam: Fortschritt, Antwortkarten, Video-Platzhalter ---------- */ html[data-zk-theme] .bar-fill { background: var(--zk-petrol) !important; } html[data-zk-theme] .bar-fill + *, html[data-zk-theme] .h-1\.5.w-full.overflow-hidden.rounded-full { background: var(--zk-sand) !important; } html[data-zk-theme] fieldset legend { color: var(--zk-petrol); } html[data-zk-theme] fieldset button[data-page-target] { box-shadow: 0 6px 18px rgba(15, 76, 74, .10); } html[data-zk-theme] fieldset button[data-page-target]:hover { box-shadow: 0 0 0 2px var(--zk-petrol), 0 10px 24px rgba(15, 76, 74, .16); } html[data-zk-theme] wistia-player:not(:defined) { display: block; min-height: 180px; background: var(--zk-sand) center/56px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Ccircle cx='28' cy='28' r='28' fill='%230F4C4A'/%3E%3Cpath d='M23 18l16 10-16 10z' fill='%23FAF6F0'/%3E%3C/svg%3E"); } html[data-zk-theme] wistia-player:not(:defined) { position: relative; cursor: pointer; min-height: 0; aspect-ratio: 16 / 9; } html[data-zk-theme] wistia-player:not(:defined)::after { content: "Tippen zum Abspielen · Wistia (USA)"; position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font: 500 11px Inter, system-ui, sans-serif; color: var(--zk-schiefer); } html[data-zk-theme] figure figcaption { color: var(--zk-petrol); } /* ---------- A: Ruhig hell ---------- */ html[data-zk-theme="a"] header { background: #fff; border-bottom: 1px solid var(--zk-sand); } html[data-zk-theme="a"] header .ps-logo-row { padding: 14px 0; } html[data-zk-theme="a"] h1 > span { color: var(--zk-petrol); background: linear-gradient(transparent 62%, rgba(242, 167, 126, .55) 62%, rgba(242, 167, 126, .55) 92%, transparent 92%); padding: 0 .08em; } html[data-zk-theme="a"] .hero-rise.rounded-full { background: rgba(242, 167, 126, .22) !important; border-color: rgba(242, 167, 126, .7) !important; color: var(--zk-petrol) !important; } html[data-zk-theme="a"] fieldset button[data-page-target] { background: #fff; border: 1px solid var(--zk-sand); } /* ---------- B: Petrol-Bühne ---------- */ html[data-zk-theme="b"] section[data-page-name] > header { background: var(--zk-petrol); } html[data-zk-theme="b"] section[data-page-name] > header img { content: url("/logo-negativ.svg"); } html[data-zk-theme="b"] section[data-page-name="Start"] .pt-4.pb-6.text-center { position: relative; padding-bottom: 36px; margin-bottom: 20px; } html[data-zk-theme="b"] section[data-page-name="Start"] .pt-4.pb-6.text-center::before { content: ""; position: absolute; inset: 0 -100vw; z-index: -1; background: radial-gradient(60% 80% at 85% 10%, rgba(242, 167, 126, .22), transparent 60%), var(--zk-petrol); } html[data-zk-theme="b"] section[data-page-name="Start"] .pt-4.pb-6.text-center h1 { color: var(--zk-creme) !important; } html[data-zk-theme="b"] section[data-page-name="Start"] .pt-4.pb-6.text-center h1 > span { color: var(--zk-apricot) !important; } html[data-zk-theme="b"] section[data-page-name="Start"] .pt-4.pb-6.text-center p { color: rgba(250, 246, 240, .82) !important; } html[data-zk-theme="b"] .hero-rise.rounded-full { background: var(--zk-apricot) !important; border-color: var(--zk-apricot) !important; color: var(--zk-petrol) !important; } html[data-zk-theme="b"] section[data-page-name] { isolation: isolate; overflow-x: clip; } /* ---------- C: Stufen ---------- */ html[data-zk-theme="c"] section[data-page-name] { position: relative; isolation: isolate; overflow-x: clip; } html[data-zk-theme="c"] section[data-page-name]::before { content: ""; position: absolute; z-index: -1; top: 560px; right: -140px; width: 380px; height: 380px; opacity: .06; background: url("/bildmarke.svg") center/contain no-repeat; } html[data-zk-theme="c"] header .ps-logo-row { padding: 10px 0 4px; } html[data-zk-theme="c"] h1 > span { color: var(--zk-terrakotta) !important; } html[data-zk-theme="c"] .hero-rise.rounded-full { background: var(--zk-salbei) !important; border-color: transparent !important; color: var(--zk-petrol) !important; } html[data-zk-theme="c"] .h-1\.5.w-full.overflow-hidden.rounded-full { height: 10px; border-radius: 4px !important; -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(25% - 4px), transparent calc(25% - 4px) 25%); mask: repeating-linear-gradient(90deg, #000 0 calc(25% - 4px), transparent calc(25% - 4px) 25%); } html[data-zk-theme="c"] .bar-fill { border-radius: 4px !important; } html[data-zk-theme="c"] fieldset button[data-page-target] { border-radius: 22px !important; } html[data-zk-theme="c"] fieldset legend::before { content: ""; display: block; width: 34px; height: 34px; margin: 0 auto 10px; background: url("/bildmarke.svg") center/contain no-repeat; }