/* ============================================================================ Vorlesen einmal anders (Nele Diercks) – Theme Alles Projektspezifische: Schriften, Farbpalette (Beeren-Rose), die 5 Kontrastmodi, die Theme-Varianten und die Logo-Filter. Struktur/Layout kommt aus css/engine.css (geteilt). Reihenfolge im : engine.css ZUERST, dann theme.css. Warum manches literal statt var(): - :visited -> Chromium loest Custom-Properties dort aus Datenschutz auf die :root-Werte auf (= rosa), ohne literale Modusfarben waeren besuchte Links im Dunkel-/Blaufiltermodus dunkel auf dunkel. - Logo-Filter -> haengen am konkreten Logo (Nele: dunkle Wortmarke, die im Dunkelmodus invertiert werden muss). ========================================================================== */ /* --- Schriften (self-hosted) --- */ /* DM Sans variable */ @font-face { font-family: 'DM Sans'; src: url('fonts/dmsans-var-normal-latin-ext.woff2') format('woff2'); font-weight: 100 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'DM Sans'; src: url('fonts/dmsans-var-normal-latin.woff2') format('woff2'); font-weight: 100 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'DM Sans'; src: url('fonts/dmsans-var-italic-latin-ext.woff2') format('woff2'); font-weight: 100 700; font-style: italic; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'DM Sans'; src: url('fonts/dmsans-var-italic-latin.woff2') format('woff2'); font-weight: 100 700; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Merriweather variable */ @font-face { font-family: 'Merriweather'; src: url('fonts/merriweather-var-latin-ext.woff2') format('woff2'); font-weight: 400 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Merriweather'; src: url('fonts/merriweather-var-latin.woff2') format('woff2'); font-weight: 400 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* --- Marken-Haken der geteilten Engine (engine.css liest diese Namen) --- */ /* Akzent als RGB-Tripel: engine.css baut daraus rgba(...) fuer Schatten, Fokusringe und Puls-Animationen. Muss zu --c-accent passen. */ --c-accent-rgb: 168,52,90; --c-hero-overlay: linear-gradient(135deg,rgba(60,18,34,0.42) 0%,rgba(120,40,50,0.24) 50%,rgba(80,28,40,0.38) 100%); --c-hero-glow: radial-gradient(circle,rgba(224,151,106,0.12),transparent 70%); --c-page-hero-overlay: rgba(50,55,60,0.3); --logo-filter-dark: brightness(0) invert(1); --logo-filter-high: brightness(0); --c-bg:#fdf8f4;--c-bg-primary:#fffdfb;--c-bg-secondary:#f7ede4;--c-bg-tertiary:#ecdccd; --c-bg-glass:rgba(255,253,251,0.74);--c-bg-glass-heavy:rgba(255,253,251,0.9); --c-text:#2b2724;--c-text-secondary:#5f5650;--c-text-tertiary:#6e635b; --c-link:#a8345a;--c-link-hover:#7f2742;--c-accent:#a8345a;--c-accent-2:#7f2742; --c-green:#2e8b78;--c-orange:#e07a3f;--c-teal:#3a9d8e;--c-warm:#b07a52; --c-border:rgba(70,45,35,0.09);--c-border-strong:rgba(70,45,35,0.18); --c-shadow:rgba(90,55,45,0.05);--c-shadow-md:rgba(90,55,45,0.09);--c-shadow-lg:rgba(90,55,45,0.14); --c-focus:#a8345a;--c-on-hero-btn:#7f2742;--c-on-hero-btn-hover:#5f1d31;--c-tts-word:#ffd60a;--c-tts-word-text:#2b2724; --gradient-hero:linear-gradient(135deg,#7a2440 0%,#a8345a 50%,#c25a4e 100%); --gradient-accent:linear-gradient(135deg,#a8345a,#e0976a); --f-body:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,sans-serif; --f-display:'Merriweather',Georgia,serif; --f-heading:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,sans-serif; --f-size-base:17px;--f-scale:1;--line-height:1.65; --letter-tight:-0.022em;--letter-body:-0.01em; --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;--s-8:32px; --s-10:40px;--s-12:48px;--s-16:64px;--s-20:80px;--s-24:96px; --max-w:1120px;--radius-sm:10px;--radius-md:16px;--radius-lg:22px;--radius-xl:28px; --blur:20px;--blur-heavy:40px; --ease-out:cubic-bezier(0.25,1,0.5,1);--ease-spring:cubic-bezier(0.34,1.56,0.64,1); --duration:0.35s;--duration-slow:0.6s; } [data-contrast="high"]{--c-bg:#fff;--c-bg-primary:#fff;--c-bg-secondary:#f0f0f0;--c-bg-tertiary:#e0e0e0;--c-bg-glass:rgba(255,255,255,0.95);--c-bg-glass-heavy:rgba(255,255,255,0.98);--c-text:#000;--c-text-secondary:#1a1a1a;--c-text-tertiary:#333;--c-border:rgba(0,0,0,0.3);--c-border-strong:rgba(0,0,0,0.6);--c-link:#00338a;--c-link-hover:#001f5c;--c-accent:#00338a;--c-accent-2:#001f5c;--c-focus:#cc6600;--c-tts-word:#ff8c00;--c-tts-word-text:#000;--gradient-hero:linear-gradient(135deg,#000 0%,#1a1a1a 50%,#333 100%);--gradient-accent:linear-gradient(135deg,#00338a,#0055cc);line-height:1.8;letter-spacing:0.02em} [data-contrast="dark"]{--c-bg:#000;--c-bg-primary:#1c1c1e;--c-bg-secondary:#2c2c2e;--c-bg-tertiary:#3a3a3c;--c-bg-glass:rgba(28,28,30,0.78);--c-bg-glass-heavy:rgba(28,28,30,0.92);--c-text:#f5f5f7;--c-text-secondary:#a1a1a6;--c-text-tertiary:#8e8e93;--c-link:#6ba4dc;--c-link-hover:#8fbde8;--c-accent:#6ba4dc;--c-accent-2:#8fbde8;--c-border:rgba(255,255,255,0.08);--c-border-strong:rgba(255,255,255,0.18);--c-shadow:rgba(0,0,0,0.3);--c-shadow-lg:rgba(0,0,0,0.5);--c-focus:#ffb340;--c-tts-word:#ff9f0a;--c-tts-word-text:#000;--gradient-hero:linear-gradient(135deg,#000 0%,#1c1c1e 50%,#2c2c2e 100%);--gradient-accent:linear-gradient(135deg,#6ba4dc,#5ac8fa)} [data-contrast="sepia"]{--c-bg:#f4ecd8;--c-bg-primary:#faf5e6;--c-bg-secondary:#ede5d0;--c-bg-tertiary:#e0d5be;--c-bg-glass:rgba(244,236,216,0.85);--c-bg-glass-heavy:rgba(244,236,216,0.92);--c-text:#3e2f1c;--c-text-secondary:#5a4a36;--c-text-tertiary:#5a4a36;--c-link:#6b4226;--c-link-hover:#8b5e3c;--c-accent:#6b4226;--c-accent-2:#8b5e3c;--c-border:rgba(62,47,28,0.1);--c-border-strong:rgba(62,47,28,0.2);--c-shadow:rgba(62,47,28,0.06);--c-shadow-md:rgba(62,47,28,0.1);--c-shadow-lg:rgba(62,47,28,0.15);--c-focus:#8b5e3c;--c-tts-word:#e8c97a;--c-tts-word-text:#3e2f1c;--gradient-hero:linear-gradient(135deg,#3e2f1c 0%,#5a4a36 40%,#7a6a56 100%);--gradient-accent:linear-gradient(135deg,#6b4226,#c49a6c)} [data-contrast="bluefilter"]{--c-bg:#1a1410;--c-bg-primary:#241e18;--c-bg-secondary:#2e2620;--c-bg-tertiary:#3a3028;--c-bg-glass:rgba(36,30,24,0.85);--c-bg-glass-heavy:rgba(36,30,24,0.92);--c-text:#e8d5b8;--c-text-secondary:#c4a882;--c-text-tertiary:#b8a080;--c-link:#d4a060;--c-link-hover:#e8b878;--c-accent:#d4a060;--c-accent-2:#e8b878;--c-border:rgba(232,213,184,0.08);--c-border-strong:rgba(232,213,184,0.18);--c-shadow:rgba(0,0,0,0.4);--c-shadow-md:rgba(0,0,0,0.5);--c-shadow-lg:rgba(0,0,0,0.6);--c-focus:#e8b878;--c-tts-word:#d4a060;--c-tts-word-text:#1a1410;--gradient-hero:linear-gradient(135deg,#1a1410 0%,#2e2620 50%,#3a3028 100%);--gradient-accent:linear-gradient(135deg,#d4a060,#e8b878)} [data-contrast="high"] html,[data-contrast="high"]{font-size:calc(var(--f-size-base)*var(--f-scale)*1.1)} /* --- aus der Engine ausgelagert (projektspezifisch) --- */ [data-contrast="dark"] main p a:visited,[data-contrast="dark"] main li a:visited,[data-contrast="dark"] main dd a:visited,[data-contrast="dark"] .breadcrumb a:visited{color:#6ba4dc} [data-contrast="bluefilter"] main p a:visited,[data-contrast="bluefilter"] main li a:visited,[data-contrast="bluefilter"] main dd a:visited,[data-contrast="bluefilter"] .breadcrumb a:visited{color:#d4a060} [data-contrast="sepia"] main p a:visited,[data-contrast="sepia"] main li a:visited,[data-contrast="sepia"] main dd a:visited,[data-contrast="sepia"] .breadcrumb a:visited{color:#6b4226} [data-contrast="high"] main p a:visited,[data-contrast="high"] main li a:visited,[data-contrast="high"] main dd a:visited,[data-contrast="high"] .breadcrumb a:visited{color:#00338a} [data-contrast="normal"][data-theme="koralle"]{--c-bg:#fdf7f2;--c-bg-secondary:#f8ebe1;--c-bg-tertiary:#eed9c9;--c-link:#b04a30;--c-link-hover:#8a3826;--c-accent:#b54d33;--c-accent-2:#8a3826;--c-focus:#b54d33;--gradient-hero:linear-gradient(135deg,#7e2f1c 0%,#b54d33 50%,#cf6b46 100%);--gradient-accent:linear-gradient(135deg,#b54d33,#e6a45e)} [data-contrast="normal"][data-theme="bernstein"]{--c-bg:#fdf9f0;--c-bg-secondary:#f6edd9;--c-bg-tertiary:#ecdcb8;--c-link:#8f5519;--c-link-hover:#744414;--c-accent:#9a5d1e;--c-accent-2:#744414;--c-focus:#9a5d1e;--gradient-hero:linear-gradient(135deg,#6e4413 0%,#9a5d1e 50%,#c08433 100%);--gradient-accent:linear-gradient(135deg,#9a5d1e,#d9a850)} [data-contrast="normal"][data-theme="pflaume"]{--c-bg:#fbf6f8;--c-bg-secondary:#f2e7ee;--c-bg-tertiary:#e6d3e0;--c-link:#844070;--c-link-hover:#66305a;--c-accent:#8a4570;--c-accent-2:#66305a;--c-focus:#8a4570;--gradient-hero:linear-gradient(135deg,#5e2b54 0%,#8a4570 50%,#a85f8c 100%);--gradient-accent:linear-gradient(135deg,#8a4570,#c283a0)} [data-contrast="normal"][data-theme="salbei"]{--c-bg:#faf8f0;--c-bg-secondary:#eef0e0;--c-bg-tertiary:#dde2c8;--c-link:#506b2c;--c-link-hover:#3e5422;--c-accent:#54702f;--c-accent-2:#3e5422;--c-focus:#54702f;--gradient-hero:linear-gradient(135deg,#3a4f22 0%,#54702f 50%,#6f8c41 100%);--gradient-accent:linear-gradient(135deg,#54702f,#9bb06a)} [data-contrast="sepia"] .stat__number { -webkit-text-fill-color: #c49a6c; background: none; } [data-contrast="bluefilter"] .stat__number { -webkit-text-fill-color: #e8b878; background: none; } @media(prefers-contrast:more){[data-contrast="normal"]{--c-text:#000;--c-text-secondary:#1a1a1a;--c-text-tertiary:#333;--c-bg:#fff;--c-bg-primary:#fff;--c-bg-secondary:#f0f0f0;--c-border-strong:rgba(0,0,0,0.5)}} [data-contrast="dark"]{--c-on-accent:#15110c;--c-text-tertiary:#9a9aa0} [data-contrast="bluefilter"]{--c-on-accent:#15110c} [data-contrast="dark"] .site-logo__img { [data-contrast="high"] .site-logo__img { [data-contrast="sepia"] .site-logo__img { filter: sepia(0.3); } [data-contrast="bluefilter"] .site-logo__img { filter: brightness(0) invert(1) sepia(0.5) hue-rotate(-20deg); }