/* ============================================================ REFORMERWERK – Farbvarianten (nur Beige / Braun / Sand / Weiss) Umschaltbar via Kern bleibt IMMER Beige (#ead1c2) + Sand (#c39d85). Kein Gr\u00fcn, kein Rot, kein Blau – rein warme, helle T\u00f6ne. "beige" ist die Basis aus styles.css (kein Attribut n\u00f6tig). ============================================================ */ /* Navy · das originale Dunkelblau (dunkler Hero, weisse Schrift) */ [data-theme="navy"] { --navy: #11396e; --navy-dark: #0c2a53; --sand-dark: #a97e63; --cream: #f6ece4; --ink: #1c2531; --muted: #6b7280; --shadow: 0 18px 40px -20px rgba(17, 57, 110, .35); --shadow-sm: 0 8px 24px -14px rgba(17, 57, 110, .35); --hero-text: var(--white); --hero-o1: rgba(17, 57, 110, .55); --hero-o2: rgba(12, 42, 83, .35); --hero-base: linear-gradient(160deg, #b9b4ae 0%, #d7d2cc 45%, #c8c2ba 100%); --hero-glow: radial-gradient(1200px 600px at 80% -10%, rgba(234, 209, 194, .4), transparent 60%), radial-gradient(900px 500px at 0% 110%, rgba(17, 57, 110, .35), transparent 55%); --hero-eyebrow: var(--beige); --hero-accent: var(--beige); --hero-sub: rgba(255, 255, 255, .92); --hero-title-shadow: 0 6px 30px rgba(0, 0, 0, .25); --ghost-color: var(--white); --ghost-border: rgba(255, 255, 255, .7); --ghost-hover: rgba(255, 255, 255, .14); } /* feine Trennlinien im Navy-Look */ [data-theme="navy"] .day, [data-theme="navy"] .how-card, [data-theme="navy"] .price-list li { border-color: rgba(17, 57, 110, .12); } [data-theme="navy"] .img-placeholder span { color: rgba(17, 57, 110, .55); } /* Sand · warme Karamell-/Logo-Akzente */ [data-theme="sand"] { --navy: #96683e; --navy-dark: #7a5330; --sand-dark: #a9764f; --cream: #fbf7f1; --ink: #40342a; --muted: #9f8c7c; --shadow: 0 18px 40px -20px rgba(122, 83, 48, .30); --shadow-sm: 0 8px 24px -14px rgba(122, 83, 48, .26); } /* Espresso · tiefes, dunkles Braun */ [data-theme="espresso"] { --navy: #4a382c; --navy-dark: #33261d; --sand-dark: #a97e63; --cream: #f8f4ef; --ink: #352a22; --muted: #97897c; --shadow: 0 18px 40px -20px rgba(51, 38, 29, .32); --shadow-sm: 0 8px 24px -14px rgba(51, 38, 29, .28); } /* Taupe · warmes Greige */ [data-theme="taupe"] { --navy: #6f6258; --navy-dark: #554940; --sand-dark: #a68a72; --cream: #f8f5f1; --ink: #38312b; --muted: #9a9188; --shadow: 0 18px 40px -20px rgba(85, 73, 64, .28); --shadow-sm: 0 8px 24px -14px rgba(85, 73, 64, .24); } /* Mocha · mittleres Milchkaffee-Braun */ [data-theme="mocha"] { --navy: #7c5a44; --navy-dark: #5f4433; --sand-dark: #a97e63; --cream: #f9f5f0; --ink: #3e3128; --muted: #9c8a7d; --shadow: 0 18px 40px -20px rgba(95, 68, 51, .30); --shadow-sm: 0 8px 24px -14px rgba(95, 68, 51, .26); } /* Cr\u00e8me · hellste, fast weisse Variante mit sanftem Braun */ [data-theme="creme"] { --navy: #8f7256; --navy-dark: #6f573f; --sand-dark: #b08f6f; --cream: #fdfbf8; --ink: #4a3f34; --muted: #a89a8b; --shadow: 0 18px 40px -20px rgba(111, 87, 63, .24); --shadow-sm: 0 8px 24px -14px rgba(111, 87, 63, .20); } /* Beige · Blau · warme Beige-Basis mit sanft-modernen, gedaempften Blau-Buttons */ [data-theme="beige-blau"] { --navy: #4a6a8f; /* gedaempftes Stahlblau fuer Buttons */ --navy-dark: #3b5674; /* Hover */ /* warme Beige-Basis bleibt erhalten */ --sand-dark: #a97e63; --cream: #faf6f1; --ink: #3c332d; --muted: #9c8d80; --shadow: 0 18px 40px -20px rgba(59, 86, 116, .30); --shadow-sm: 0 8px 24px -14px rgba(59, 86, 116, .26); /* Eyebrows/Akzente dezent ins Blau ziehen, ohne harten Kontrast */ --hero-eyebrow: #4a6a8f; --hero-accent: #4a6a8f; }