/* ============================================================ AVISON — Farbvarianten zum A/B-Testen B Klassisch warm · C Erdig · D Kühl und klar · E Spannung ERZEUGT von skripte/palette_b.py — nicht von Hand ändern. Greift nur, wenn am data-palette steht (palette.js). ============================================================ */ /* ==================== B — Klassisch warm ==================== */ :root:where([data-palette="b"]) { --bg: #eee0cb; --bg-rgb: 238, 224, 203; --bg-soft: #f7efe3; --paper: #f7efe3; --ink: #1e252e; --ink-dim: rgba(30, 37, 46, 0.65); --ink-faint: rgba(30, 37, 46, 0.22); --accent: #420b10; --accent-soft: rgba(66, 11, 16, 0.12); --accent-line: rgba(66, 11, 16, 0.5); --on-accent: #f7efe3; --olive: #474e2d; --shadow-rgb: 30, 37, 46; --nav-bg: #eee0cb; --panel-bg: #420b10; --panel-fg: #eee0cb; --panel-dim: rgba(238, 224, 203, 0.85); --panel-em: #1e252e; --panel-cta-bg: #eee0cb; --panel-cta-fg: #1e252e; --panel-faint: rgba(238, 224, 203, 0.3); --frame: rgba(238, 224, 203, 0.9); --footer-bg: #f7efe3; --footer-fg: #1e252e; --footer-dim: rgba(30, 37, 46, 0.66); --footer-line: rgba(30, 37, 46, 0.28); --footer-rule: rgba(30, 37, 46, 0.16); --footer-em: #420b10; --hero-bg: #1e252e; --hero-fg: #420b10; --particle-glow: #420b10; --particle-base: #1e252e; --chip-bg: #80a1c1; --chip-fg: #1e252e; } :root[data-palette="b"] .preloader { --preloader-bg: #420b10; --preloader-fg: #eee0cb; } :root[data-palette="b"] .preloader__strich { background: rgba(238, 224, 203, 0.22); } :root[data-palette="b"] .hero__play { background: #420b10; color: #eee0cb; } :root[data-palette="b"] .hero__play:focus-visible { outline: 2px solid #f7efe3; } :root[data-palette="b"] .polaroid figcaption { color: rgba(30, 37, 46, 0.88); } :root[data-palette="b"] .kontakt { background: #420b10; --footer-bg: #420b10; --footer-fg: #f7efe3; --footer-dim: rgba(247, 239, 227, 0.85); --footer-line: rgba(247, 239, 227, 0.45); --footer-rule: rgba(247, 239, 227, 0.2); --footer-em: #eee0cb; } :root[data-palette="b"] .kontakt .contact__submit { background: #1e252e; color: #eee0cb; } :root[data-palette="b"] .kontakt .contact__submit { --wimpern-farbe: #1e252e; } :root[data-palette="b"] div.schluss.flaeche { background: #420b10; } :root[data-palette="b"] .work__media .work__name { color: #eee0cb; } :root[data-palette="b"] .work__media:has(.work__name)::after { background: linear-gradient(to top, rgba(22, 28, 35, 0.55), rgba(22, 28, 35, 0)); } :root[data-palette="b"] body[data-page="home"] { --bg: #420b10; --bg-rgb: 66, 11, 16; --ink: #f7efe3; --ink-dim: rgba(247, 239, 227, 0.9); --ink-faint: rgba(247, 239, 227, 0.3); --accent: #eee0cb; --accent-soft: rgba(238, 224, 203, 0.16); --accent-line: rgba(238, 224, 203, 0.55); --on-accent: #1e252e; --nav-bg: #420b10; --panel-bg: #eee0cb; --panel-fg: #1e252e; --panel-dim: rgba(30, 37, 46, 0.72); --panel-em: #420b10; --panel-faint: rgba(30, 37, 46, 0.22); --panel-cta-bg: #1e252e; --panel-cta-fg: #eee0cb; --frame: rgba(30, 37, 46, 0.9); --footer-bg: #eee0cb; --footer-fg: #1e252e; --footer-dim: rgba(30, 37, 46, 0.68); --footer-line: rgba(30, 37, 46, 0.32); --footer-rule: rgba(30, 37, 46, 0.16); --footer-em: #420b10; --chip-bg: #1e252e; --chip-fg: #eee0cb; } :root[data-palette="b"] .footer { --foot-bg: #1e252e; --foot-fg: #eee0cb; --foot-dim: rgba(238, 224, 203, 0.7); --foot-faint: rgba(238, 224, 203, 0.16); --foot-em: #420b10; --foot-on-em: #f7efe3; } :root[data-palette="b"] .footer__mark { --logo-main: #eee0cb; --logo-detail: #420b10; } :root[data-palette="b"] .footer__mail { border-bottom: 1px solid rgba(238, 224, 203, 0.35); } @supports (appearance: base-select) { :root[data-palette="b"] .contact__field select::picker(select) { background: #eee0cb; color: #1e252e; box-shadow: 0 18px 40px -18px rgba(30, 37, 46, 0.55); } } @supports (appearance: base-select) { :root[data-palette="b"] .contact__field select option { color: #1e252e; } } @supports (appearance: base-select) { :root[data-palette="b"] .contact__field select option:hover, :root[data-palette="b"] .contact__field select option:focus-visible { background: #420b10; color: #eee0cb; } } :root[data-palette="b"] .contact__submit.is-sent { background: #474e2d; color: #f7efe3; } :root[data-palette="b"] .footer__kontakt { --footer-bg: #1e252e; --footer-fg: #eee0cb; --footer-dim: rgba(238, 224, 203, 0.7); --footer-line: rgba(238, 224, 203, 0.32); --footer-em: #420b10; } :root[data-palette="b"] .footer__kontakt .contact__submit { background: #420b10; color: #f7efe3; --wimpern-farbe: #420b10; } :root[data-palette="b"] .polaroid { --wimpern-farbe: #420b10; } :root:where([data-palette="b"]) { --hero-fg: #eee0cb; --particle-glow: #80a1c1; --panel-em: #80a1c1; } :root[data-palette="b"] .footer { --foot-em: #80a1c1; --foot-on-em: #1e252e; } /* ==================== C — Erdig ==================== */ :root:where([data-palette="c"]) { --bg: #eee0cb; --bg-rgb: 238, 224, 203; --bg-soft: #f7efe3; --paper: #f7efe3; --ink: #420b10; --ink-dim: rgba(66, 11, 16, 0.65); --ink-faint: rgba(66, 11, 16, 0.22); --accent: #474e2d; --accent-soft: rgba(71, 78, 45, 0.12); --accent-line: rgba(71, 78, 45, 0.5); --on-accent: #f7efe3; --olive: #420b10; --shadow-rgb: 66, 11, 16; --nav-bg: #eee0cb; --panel-bg: #474e2d; --panel-fg: #eee0cb; --panel-dim: rgba(238, 224, 203, 0.85); --panel-em: #420b10; --panel-cta-bg: #eee0cb; --panel-cta-fg: #420b10; --panel-faint: rgba(238, 224, 203, 0.3); --frame: rgba(238, 224, 203, 0.9); --footer-bg: #f7efe3; --footer-fg: #420b10; --footer-dim: rgba(66, 11, 16, 0.66); --footer-line: rgba(66, 11, 16, 0.28); --footer-rule: rgba(66, 11, 16, 0.16); --footer-em: #474e2d; --hero-bg: #420b10; --hero-fg: #474e2d; --particle-glow: #474e2d; --particle-base: #420b10; --chip-bg: #420b10; --chip-fg: #eee0cb; } :root[data-palette="c"] .preloader { --preloader-bg: #474e2d; --preloader-fg: #eee0cb; } :root[data-palette="c"] .preloader__strich { background: rgba(238, 224, 203, 0.22); } :root[data-palette="c"] .hero__play { background: #474e2d; color: #eee0cb; } :root[data-palette="c"] .hero__play:focus-visible { outline: 2px solid #f7efe3; } :root[data-palette="c"] .polaroid figcaption { color: rgba(66, 11, 16, 0.88); } :root[data-palette="c"] .kontakt { background: #474e2d; --footer-bg: #474e2d; --footer-fg: #f7efe3; --footer-dim: rgba(247, 239, 227, 0.85); --footer-line: rgba(247, 239, 227, 0.45); --footer-rule: rgba(247, 239, 227, 0.2); --footer-em: #eee0cb; } :root[data-palette="c"] .kontakt .contact__submit { background: #420b10; color: #eee0cb; } :root[data-palette="c"] .kontakt .contact__submit { --wimpern-farbe: #420b10; } :root[data-palette="c"] div.schluss.flaeche { background: #474e2d; } :root[data-palette="c"] .work__media .work__name { color: #eee0cb; } :root[data-palette="c"] .work__media:has(.work__name)::after { background: linear-gradient(to top, rgba(42, 7, 10, 0.55), rgba(42, 7, 10, 0)); } :root[data-palette="c"] body[data-page="home"] { --bg: #474e2d; --bg-rgb: 71, 78, 45; --ink: #f7efe3; --ink-dim: rgba(247, 239, 227, 0.9); --ink-faint: rgba(247, 239, 227, 0.3); --accent: #eee0cb; --accent-soft: rgba(238, 224, 203, 0.16); --accent-line: rgba(238, 224, 203, 0.55); --on-accent: #420b10; --nav-bg: #474e2d; --panel-bg: #eee0cb; --panel-fg: #420b10; --panel-dim: rgba(66, 11, 16, 0.72); --panel-em: #474e2d; --panel-faint: rgba(66, 11, 16, 0.22); --panel-cta-bg: #420b10; --panel-cta-fg: #eee0cb; --frame: rgba(66, 11, 16, 0.9); --footer-bg: #eee0cb; --footer-fg: #420b10; --footer-dim: rgba(66, 11, 16, 0.68); --footer-line: rgba(66, 11, 16, 0.32); --footer-rule: rgba(66, 11, 16, 0.16); --footer-em: #474e2d; --chip-bg: #420b10; --chip-fg: #eee0cb; } :root[data-palette="c"] .footer { --foot-bg: #420b10; --foot-fg: #eee0cb; --foot-dim: rgba(238, 224, 203, 0.7); --foot-faint: rgba(238, 224, 203, 0.16); --foot-em: #474e2d; --foot-on-em: #f7efe3; } :root[data-palette="c"] .footer__mark { --logo-main: #eee0cb; --logo-detail: #474e2d; } :root[data-palette="c"] .footer__mail { border-bottom: 1px solid rgba(238, 224, 203, 0.35); } @supports (appearance: base-select) { :root[data-palette="c"] .contact__field select::picker(select) { background: #eee0cb; color: #420b10; box-shadow: 0 18px 40px -18px rgba(66, 11, 16, 0.55); } } @supports (appearance: base-select) { :root[data-palette="c"] .contact__field select option { color: #420b10; } } @supports (appearance: base-select) { :root[data-palette="c"] .contact__field select option:hover, :root[data-palette="c"] .contact__field select option:focus-visible { background: #474e2d; color: #eee0cb; } } :root[data-palette="c"] .contact__submit.is-sent { background: #420b10; color: #f7efe3; } :root[data-palette="c"] .footer__kontakt { --footer-bg: #420b10; --footer-fg: #eee0cb; --footer-dim: rgba(238, 224, 203, 0.7); --footer-line: rgba(238, 224, 203, 0.32); --footer-em: #474e2d; } :root[data-palette="c"] .footer__kontakt .contact__submit { background: #474e2d; color: #f7efe3; --wimpern-farbe: #474e2d; } :root[data-palette="c"] .polaroid { --wimpern-farbe: #474e2d; } :root:where([data-palette="c"]) { --hero-fg: #eee0cb; --hero-bg: #2a070a; } :root[data-palette="c"] .footer { --foot-em: #eee0cb; --foot-on-em: #420b10; } /* ==================== D — Kühl und klar ==================== */ :root:where([data-palette="d"]) { --bg: #1e252e; --bg-rgb: 30, 37, 46; --bg-soft: #27303b; --paper: #27303b; --ink: #eee0cb; --ink-dim: rgba(238, 224, 203, 0.65); --ink-faint: rgba(238, 224, 203, 0.22); --accent: #80a1c1; --accent-soft: rgba(128, 161, 193, 0.12); --accent-line: rgba(128, 161, 193, 0.5); --on-accent: #27303b; --olive: #80a1c1; --shadow-rgb: 238, 224, 203; --nav-bg: #1e252e; --panel-bg: #80a1c1; --panel-fg: #1e252e; --panel-dim: rgba(30, 37, 46, 0.85); --panel-em: #eee0cb; --panel-cta-bg: #1e252e; --panel-cta-fg: #eee0cb; --panel-faint: rgba(30, 37, 46, 0.3); --frame: rgba(30, 37, 46, 0.9); --footer-bg: #27303b; --footer-fg: #eee0cb; --footer-dim: rgba(238, 224, 203, 0.66); --footer-line: rgba(238, 224, 203, 0.28); --footer-rule: rgba(238, 224, 203, 0.16); --footer-em: #80a1c1; --hero-bg: #eee0cb; --hero-fg: #80a1c1; --particle-glow: #80a1c1; --particle-base: #eee0cb; --chip-bg: #eee0cb; --chip-fg: #1e252e; } :root[data-palette="d"] .preloader { --preloader-bg: #80a1c1; --preloader-fg: #1e252e; } :root[data-palette="d"] .preloader__strich { background: rgba(30, 37, 46, 0.22); } :root[data-palette="d"] .hero__play { background: #80a1c1; color: #1e252e; } :root[data-palette="d"] .hero__play:focus-visible { outline: 2px solid #27303b; } :root[data-palette="d"] .polaroid figcaption { color: rgba(238, 224, 203, 0.88); } :root[data-palette="d"] .kontakt { background: #80a1c1; --footer-bg: #80a1c1; --footer-fg: #27303b; --footer-dim: rgba(39, 48, 59, 0.85); --footer-line: rgba(39, 48, 59, 0.45); --footer-rule: rgba(39, 48, 59, 0.2); --footer-em: #1e252e; } :root[data-palette="d"] .kontakt .contact__submit { background: #eee0cb; color: #1e252e; } :root[data-palette="d"] .kontakt .contact__submit { --wimpern-farbe: #eee0cb; } :root[data-palette="d"] div.schluss.flaeche { background: #80a1c1; } :root[data-palette="d"] .work__media .work__name { color: #1e252e; } :root[data-palette="d"] .work__media:has(.work__name)::after { background: linear-gradient(to top, rgba(13, 17, 23, 0.55), rgba(13, 17, 23, 0)); } :root[data-palette="d"] body[data-page="home"] { --bg: #80a1c1; --bg-rgb: 128, 161, 193; --ink: #27303b; --ink-dim: rgba(39, 48, 59, 0.9); --ink-faint: rgba(39, 48, 59, 0.3); --accent: #1e252e; --accent-soft: rgba(30, 37, 46, 0.16); --accent-line: rgba(30, 37, 46, 0.55); --on-accent: #eee0cb; --nav-bg: #80a1c1; --panel-bg: #1e252e; --panel-fg: #eee0cb; --panel-dim: rgba(238, 224, 203, 0.72); --panel-em: #80a1c1; --panel-faint: rgba(238, 224, 203, 0.22); --panel-cta-bg: #eee0cb; --panel-cta-fg: #1e252e; --frame: rgba(238, 224, 203, 0.9); --footer-bg: #1e252e; --footer-fg: #eee0cb; --footer-dim: rgba(238, 224, 203, 0.68); --footer-line: rgba(238, 224, 203, 0.32); --footer-rule: rgba(238, 224, 203, 0.16); --footer-em: #80a1c1; --chip-bg: #eee0cb; --chip-fg: #1e252e; } :root[data-palette="d"] .footer { --foot-bg: #eee0cb; --foot-fg: #1e252e; --foot-dim: rgba(30, 37, 46, 0.7); --foot-faint: rgba(30, 37, 46, 0.16); --foot-em: #80a1c1; --foot-on-em: #27303b; } :root[data-palette="d"] .footer__mark { --logo-main: #1e252e; --logo-detail: #80a1c1; } :root[data-palette="d"] .footer__mail { border-bottom: 1px solid rgba(30, 37, 46, 0.35); } @supports (appearance: base-select) { :root[data-palette="d"] .contact__field select::picker(select) { background: #1e252e; color: #eee0cb; box-shadow: 0 18px 40px -18px rgba(238, 224, 203, 0.55); } } @supports (appearance: base-select) { :root[data-palette="d"] .contact__field select option { color: #eee0cb; } } @supports (appearance: base-select) { :root[data-palette="d"] .contact__field select option:hover, :root[data-palette="d"] .contact__field select option:focus-visible { background: #80a1c1; color: #1e252e; } } :root[data-palette="d"] .contact__submit.is-sent { background: #80a1c1; color: #27303b; } :root[data-palette="d"] .footer__kontakt { --footer-bg: #eee0cb; --footer-fg: #1e252e; --footer-dim: rgba(30, 37, 46, 0.7); --footer-line: rgba(30, 37, 46, 0.32); --footer-em: #80a1c1; } :root[data-palette="d"] .footer__kontakt .contact__submit { background: #80a1c1; color: #27303b; --wimpern-farbe: #80a1c1; } :root[data-palette="d"] .polaroid { --wimpern-farbe: #80a1c1; } :root:where([data-palette="d"]) { --hero-bg: #1e252e; --shadow-rgb: 5, 8, 12; color-scheme: dark; } :root[data-palette="d"] body { --shadow-rgb: 5, 8, 12; } :root[data-palette="d"] .nav:not(.is-scrolled) { --accent: #eee0cb; } :root[data-palette="d"] .footer { --foot-em: #1e252e; --foot-on-em: #eee0cb; } /* ==================== E — Spannung ==================== */ :root:where([data-palette="e"]) { --bg: #eee0cb; --bg-rgb: 238, 224, 203; --bg-soft: #f7efe3; --paper: #f7efe3; --ink: #1e252e; --ink-dim: rgba(30, 37, 46, 0.65); --ink-faint: rgba(30, 37, 46, 0.22); --accent: #420b10; --accent-soft: rgba(66, 11, 16, 0.12); --accent-line: rgba(66, 11, 16, 0.5); --on-accent: #f7efe3; --olive: #80a1c1; --shadow-rgb: 30, 37, 46; --nav-bg: #eee0cb; --panel-bg: #420b10; --panel-fg: #eee0cb; --panel-dim: rgba(238, 224, 203, 0.85); --panel-em: #1e252e; --panel-cta-bg: #eee0cb; --panel-cta-fg: #1e252e; --panel-faint: rgba(238, 224, 203, 0.3); --frame: rgba(238, 224, 203, 0.9); --footer-bg: #f7efe3; --footer-fg: #1e252e; --footer-dim: rgba(30, 37, 46, 0.66); --footer-line: rgba(30, 37, 46, 0.28); --footer-rule: rgba(30, 37, 46, 0.16); --footer-em: #420b10; --hero-bg: #1e252e; --hero-fg: #420b10; --particle-glow: #420b10; --particle-base: #1e252e; --chip-bg: #80a1c1; --chip-fg: #420b10; } :root[data-palette="e"] .preloader { --preloader-bg: #420b10; --preloader-fg: #eee0cb; } :root[data-palette="e"] .preloader__strich { background: rgba(238, 224, 203, 0.22); } :root[data-palette="e"] .hero__play { background: #420b10; color: #eee0cb; } :root[data-palette="e"] .hero__play:focus-visible { outline: 2px solid #f7efe3; } :root[data-palette="e"] .polaroid figcaption { color: rgba(30, 37, 46, 0.88); } :root[data-palette="e"] .kontakt { background: #420b10; --footer-bg: #420b10; --footer-fg: #f7efe3; --footer-dim: rgba(247, 239, 227, 0.85); --footer-line: rgba(247, 239, 227, 0.45); --footer-rule: rgba(247, 239, 227, 0.2); --footer-em: #eee0cb; } :root[data-palette="e"] .kontakt .contact__submit { background: #1e252e; color: #eee0cb; } :root[data-palette="e"] .kontakt .contact__submit { --wimpern-farbe: #1e252e; } :root[data-palette="e"] div.schluss.flaeche { background: #420b10; } :root[data-palette="e"] .work__media .work__name { color: #eee0cb; } :root[data-palette="e"] .work__media:has(.work__name)::after { background: linear-gradient(to top, rgba(22, 28, 35, 0.55), rgba(22, 28, 35, 0)); } :root[data-palette="e"] body[data-page="home"] { --bg: #420b10; --bg-rgb: 66, 11, 16; --ink: #f7efe3; --ink-dim: rgba(247, 239, 227, 0.9); --ink-faint: rgba(247, 239, 227, 0.3); --accent: #eee0cb; --accent-soft: rgba(238, 224, 203, 0.16); --accent-line: rgba(238, 224, 203, 0.55); --on-accent: #1e252e; --nav-bg: #420b10; --panel-bg: #eee0cb; --panel-fg: #1e252e; --panel-dim: rgba(30, 37, 46, 0.72); --panel-em: #420b10; --panel-faint: rgba(30, 37, 46, 0.22); --panel-cta-bg: #1e252e; --panel-cta-fg: #eee0cb; --frame: rgba(30, 37, 46, 0.9); --footer-bg: #eee0cb; --footer-fg: #1e252e; --footer-dim: rgba(30, 37, 46, 0.68); --footer-line: rgba(30, 37, 46, 0.32); --footer-rule: rgba(30, 37, 46, 0.16); --footer-em: #420b10; --chip-bg: #1e252e; --chip-fg: #eee0cb; } :root[data-palette="e"] .footer { --foot-bg: #1e252e; --foot-fg: #eee0cb; --foot-dim: rgba(238, 224, 203, 0.7); --foot-faint: rgba(238, 224, 203, 0.16); --foot-em: #420b10; --foot-on-em: #f7efe3; } :root[data-palette="e"] .footer__mark { --logo-main: #eee0cb; --logo-detail: #420b10; } :root[data-palette="e"] .footer__mail { border-bottom: 1px solid rgba(238, 224, 203, 0.35); } @supports (appearance: base-select) { :root[data-palette="e"] .contact__field select::picker(select) { background: #eee0cb; color: #1e252e; box-shadow: 0 18px 40px -18px rgba(30, 37, 46, 0.55); } } @supports (appearance: base-select) { :root[data-palette="e"] .contact__field select option { color: #1e252e; } } @supports (appearance: base-select) { :root[data-palette="e"] .contact__field select option:hover, :root[data-palette="e"] .contact__field select option:focus-visible { background: #420b10; color: #eee0cb; } } :root[data-palette="e"] .contact__submit.is-sent { background: #80a1c1; color: #f7efe3; } :root[data-palette="e"] .footer__kontakt { --footer-bg: #1e252e; --footer-fg: #eee0cb; --footer-dim: rgba(238, 224, 203, 0.7); --footer-line: rgba(238, 224, 203, 0.32); --footer-em: #420b10; } :root[data-palette="e"] .footer__kontakt .contact__submit { background: #420b10; color: #f7efe3; --wimpern-farbe: #420b10; } :root[data-palette="e"] .polaroid { --wimpern-farbe: #420b10; } :root:where([data-palette="e"]) { --hero-fg: #80a1c1; --particle-glow: #80a1c1; --panel-bg: #80a1c1; --panel-fg: #420b10; --panel-dim: rgba(66, 11, 16, 0.85); --panel-em: #1e252e; --panel-faint: rgba(66, 11, 16, 0.3); --panel-cta-bg: #420b10; --panel-cta-fg: #eee0cb; } :root[data-palette="e"] body[data-page="home"] { --chip-bg: #420b10; /* der Knopf schwebt auch über dem Steel-Blue-Block */ --chip-fg: #eee0cb; } :root[data-palette="e"] .footer { --foot-bg: #420b10; --foot-em: #80a1c1; --foot-on-em: #420b10; } :root[data-palette="e"] .kontakt { background: #80a1c1; --footer-bg: #80a1c1; --footer-fg: #420b10; --footer-dim: rgba(66, 11, 16, 0.85); --footer-line: rgba(66, 11, 16, 0.45); --footer-rule: rgba(66, 11, 16, 0.2); --footer-em: #420b10; } :root[data-palette="e"] div.schluss.flaeche { background: #80a1c1; } :root[data-palette="e"] .kontakt .contact__submit { background: #420b10; color: #eee0cb; }