/* ============================================================ 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-soft: #f7efe3; --paper: #f7efe3; --ink: #1e252e; --ink-dim: rgba(30, 37, 46, 0.65); --ink-faint: rgba(30, 37, 46, 0.22); --accent: #420b10; --on-accent: #f7efe3; --panel-bg: #420b10; --panel-fg: #eee0cb; --panel-dim: rgba(238, 224, 203, 0.85); --shadow-rgb: 30, 37, 46; } :root[data-palette="b"] .sp-head--ueber { color: #f7efe3; } :root[data-palette="b"] .sp-head--ueber .sp-head__back { color: rgba(247, 239, 227, 0.85); border-color: rgba(247, 239, 227, 0.4); } :root[data-palette="b"] .sp-head--ueber .sp-head__back:hover { color: #f7efe3; } :root[data-palette="b"] .sp-hero { background: #1e252e; color: #f7efe3; } :root[data-palette="b"] .sp-hero__text .sp-facts { color: rgba(247, 239, 227, 0.82); } :root[data-palette="b"] .sp-next a:hover, :root[data-palette="b"] .sp-next a:focus-visible { color: #420b10; } :root[data-palette="b"] .cs-leistungen { background: #420b10; color: #f7efe3; } :root[data-palette="b"] .cs-kachel__text { color: #1e252e; } :root[data-palette="b"] .footer .footer__mark { --logo-main: #420b10; --logo-detail: #eee0cb; } :root[data-palette="b"] .cs-ton { background: rgba(30, 37, 46, 0.62); color: #f7efe3; } :root[data-palette="b"] .cs-ton:hover { background: rgba(30, 37, 46, 0.85); } :root[data-palette="b"] .cs-ton:focus-visible { outline: 2px solid #f7efe3; } :root[data-palette="b"] .cs-gross__zu { background: rgba(247, 239, 227, 0.14); color: #f7efe3; } :root[data-palette="b"] .cs-gross__zu:hover { background: rgba(247, 239, 227, 0.3); } :root[data-palette="b"] .cs-gross__zu:focus-visible { outline: 2px solid #f7efe3; } :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[data-palette="b"] { --bg: #eee0cb; --bg-soft: #f7efe3; --paper: #f7efe3; --ink: #1e252e; --ink-dim: rgba(30, 37, 46, 0.65); --ink-faint: rgba(30, 37, 46, 0.22); --shadow-rgb: 30, 37, 46; } /* ==================== C — Erdig ==================== */ :root:where([data-palette="c"]) { --bg: #eee0cb; --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; --on-accent: #f7efe3; --panel-bg: #474e2d; --panel-fg: #eee0cb; --panel-dim: rgba(238, 224, 203, 0.85); --shadow-rgb: 66, 11, 16; } :root[data-palette="c"] .sp-head--ueber { color: #f7efe3; } :root[data-palette="c"] .sp-head--ueber .sp-head__back { color: rgba(247, 239, 227, 0.85); border-color: rgba(247, 239, 227, 0.4); } :root[data-palette="c"] .sp-head--ueber .sp-head__back:hover { color: #f7efe3; } :root[data-palette="c"] .sp-hero { background: #420b10; color: #f7efe3; } :root[data-palette="c"] .sp-hero__text .sp-facts { color: rgba(247, 239, 227, 0.82); } :root[data-palette="c"] .sp-next a:hover, :root[data-palette="c"] .sp-next a:focus-visible { color: #474e2d; } :root[data-palette="c"] .cs-leistungen { background: #474e2d; color: #f7efe3; } :root[data-palette="c"] .cs-kachel__text { color: #420b10; } :root[data-palette="c"] .footer .footer__mark { --logo-main: #474e2d; --logo-detail: #eee0cb; } :root[data-palette="c"] .cs-ton { background: rgba(66, 11, 16, 0.62); color: #f7efe3; } :root[data-palette="c"] .cs-ton:hover { background: rgba(66, 11, 16, 0.85); } :root[data-palette="c"] .cs-ton:focus-visible { outline: 2px solid #f7efe3; } :root[data-palette="c"] .cs-gross__zu { background: rgba(247, 239, 227, 0.14); color: #f7efe3; } :root[data-palette="c"] .cs-gross__zu:hover { background: rgba(247, 239, 227, 0.3); } :root[data-palette="c"] .cs-gross__zu:focus-visible { outline: 2px solid #f7efe3; } :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[data-palette="c"] { --bg: #eee0cb; --bg-soft: #f7efe3; --paper: #f7efe3; --ink: #420b10; --ink-dim: rgba(66, 11, 16, 0.65); --ink-faint: rgba(66, 11, 16, 0.22); --shadow-rgb: 66, 11, 16; } /* ==================== D — Kühl und klar ==================== */ :root:where([data-palette="d"]) { --bg: #1e252e; --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; --on-accent: #27303b; --panel-bg: #80a1c1; --panel-fg: #1e252e; --panel-dim: rgba(30, 37, 46, 0.85); --shadow-rgb: 238, 224, 203; } :root[data-palette="d"] .sp-head--ueber { color: #27303b; } :root[data-palette="d"] .sp-head--ueber .sp-head__back { color: rgba(39, 48, 59, 0.85); border-color: rgba(39, 48, 59, 0.4); } :root[data-palette="d"] .sp-head--ueber .sp-head__back:hover { color: #27303b; } :root[data-palette="d"] .sp-hero { background: #eee0cb; color: #27303b; } :root[data-palette="d"] .sp-hero__text .sp-facts { color: rgba(39, 48, 59, 0.82); } :root[data-palette="d"] .sp-next a:hover, :root[data-palette="d"] .sp-next a:focus-visible { color: #80a1c1; } :root[data-palette="d"] .cs-leistungen { background: #80a1c1; color: #27303b; } :root[data-palette="d"] .cs-kachel__text { color: #eee0cb; } :root[data-palette="d"] .footer .footer__mark { --logo-main: #80a1c1; --logo-detail: #1e252e; } :root[data-palette="d"] .cs-ton { background: rgba(238, 224, 203, 0.62); color: #27303b; } :root[data-palette="d"] .cs-ton:hover { background: rgba(238, 224, 203, 0.85); } :root[data-palette="d"] .cs-ton:focus-visible { outline: 2px solid #27303b; } :root[data-palette="d"] .cs-gross__zu { background: rgba(39, 48, 59, 0.14); color: #27303b; } :root[data-palette="d"] .cs-gross__zu:hover { background: rgba(39, 48, 59, 0.3); } :root[data-palette="d"] .cs-gross__zu:focus-visible { outline: 2px solid #27303b; } :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[data-palette="d"] { --bg: #1e252e; --bg-soft: #27303b; --paper: #27303b; --ink: #eee0cb; --ink-dim: rgba(238, 224, 203, 0.65); --ink-faint: rgba(238, 224, 203, 0.22); --shadow-rgb: 238, 224, 203; } /* ==================== E — Spannung ==================== */ :root:where([data-palette="e"]) { --bg: #eee0cb; --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; --on-accent: #f7efe3; --panel-bg: #420b10; --panel-fg: #eee0cb; --panel-dim: rgba(238, 224, 203, 0.85); --shadow-rgb: 30, 37, 46; } :root[data-palette="e"] .sp-head--ueber { color: #f7efe3; } :root[data-palette="e"] .sp-head--ueber .sp-head__back { color: rgba(247, 239, 227, 0.85); border-color: rgba(247, 239, 227, 0.4); } :root[data-palette="e"] .sp-head--ueber .sp-head__back:hover { color: #f7efe3; } :root[data-palette="e"] .sp-hero { background: #1e252e; color: #f7efe3; } :root[data-palette="e"] .sp-hero__text .sp-facts { color: rgba(247, 239, 227, 0.82); } :root[data-palette="e"] .sp-next a:hover, :root[data-palette="e"] .sp-next a:focus-visible { color: #420b10; } :root[data-palette="e"] .cs-leistungen { background: #420b10; color: #f7efe3; } :root[data-palette="e"] .cs-kachel__text { color: #1e252e; } :root[data-palette="e"] .footer .footer__mark { --logo-main: #420b10; --logo-detail: #eee0cb; } :root[data-palette="e"] .cs-ton { background: rgba(30, 37, 46, 0.62); color: #f7efe3; } :root[data-palette="e"] .cs-ton:hover { background: rgba(30, 37, 46, 0.85); } :root[data-palette="e"] .cs-ton:focus-visible { outline: 2px solid #f7efe3; } :root[data-palette="e"] .cs-gross__zu { background: rgba(247, 239, 227, 0.14); color: #f7efe3; } :root[data-palette="e"] .cs-gross__zu:hover { background: rgba(247, 239, 227, 0.3); } :root[data-palette="e"] .cs-gross__zu:focus-visible { outline: 2px solid #f7efe3; } :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[data-palette="e"] { --bg: #eee0cb; --bg-soft: #f7efe3; --paper: #f7efe3; --ink: #1e252e; --ink-dim: rgba(30, 37, 46, 0.65); --ink-faint: rgba(30, 37, 46, 0.22); --shadow-rgb: 30, 37, 46; }