/* Theme Name: Anvil of War Theme URI: https://anvil-of-war.com Author: Anvil of War Description: Warhammer-Community-inspiriertes Theme für anvil-of-war.com — Custom Chapter Worldbuilding. Lore · Colour · Canon. Mehrsprachig DE/EN, linkes Sidebar-Menü, wechselbares Farbschema. Version: 3.44.0 Requires at least: 6.0 Tested up to: 6.7 Requires PHP: 8.0 License: GNU General Public License v2 or later Text Domain: anvil-of-war Tags: dark, custom-menu, featured-images, translation-ready, two-columns */ /* ================================================================ FARBEN: ERSCHEINUNGSBILD × FARBSCHEMA (seit 3.37.0) Zwei Achsen auf : class="ui-mode-light|ui-mode-medium|ui-mode-dark" — das Erscheinungs- bild, im Backend gewählt (Site Options → Design), auf Wunsch auch vom Besucher im Darstellungs-Umschalter. data-scheme="…" — eines von acht Farbschemata. Steht auch auf eigenen Containern (Orden-Dossiers, Namensgenerator); deshalb tragen die Selektoren unten beide Formen. Die Werte stehen NICHT hier, sondern in inc/design-tokens.php. Der Block unten wird von `php tools/design-tokens.php` geschrieben; eine Änderung von Hand macht tests/test-kontraste.php rot. Bis 3.36.0 stand hier nur die helle Palette (2.5.0/2.7.0, im Review vom 07.08.2026 bestätigt) samt einer dunklen Insel für den Hero. Sie gilt als Modus „Hell" unverändert weiter. Regel für jedes Modul: Farben nur über var(--…). Schrift auf einer Akzent- oder Goldfläche ist var(--on-accent) bzw. var(--on-gold), nie #fff — in Mittel und Dunkel sind Akzent und Gold hell. Das prüft tests/test-farbliterale.php. ================================================================ */ /* DESIGN-TOKENS:ANFANG — erzeugt von tools/design-tokens.php aus inc/design-tokens.php. Nicht von Hand ändern. */ /* Rückfall ohne Modus-Klasse: Hell, Salamanders Red. */ :root { color-scheme: light; --bg-body: #ffffff; --bg-nav: #f6f6f4; --bg-card: #f6f6f4; --bg-surface: #ececea; --bg-hover: #e2e2de; --bg-content: #ffffff; --border: #ddbcb3; --border-hi: #c88d7f; --divider: rgba(200,60,20,.2); --text-body: #1a1a17; --text-muted: #55554e; --text-dim: #6a6a63; --text-head: #0c0c0a; --accent: #c63218; --accent-hi: #8f2411; --accent-dim: #8f2411; --gold: #866408; --gold-hi: #604806; --gold-dim: #604806; --lsb-bg: #f6f6f4; --lsb-border: #c8a89d; --lsb-brand: #c63218; --hdr-bg: #f6f6f4; --hdr-border: #c63218; --on-accent: #ffffff; --on-gold: #ffffff; --tint: rgba(0,0,0,.04); --badge-canon-fg: #366f2a; --badge-canon-bg: rgba(74,154,58,.12); --badge-canon-border: #2a5a1a; --badge-custom-fg: #4a617e; --badge-custom-bg: rgba(74,85,128,.12); --badge-custom-border: #384868; --badge-real-fg: #2d6a66; --badge-real-bg: rgba(47,111,107,.12); --badge-real-border: #1f4f4c; --badge-lore-bg: rgba(134,100,8,.06); } html.ui-mode-light { color-scheme: light; } html.ui-mode-medium { color-scheme: dark; } html.ui-mode-dark { color-scheme: dark; } /* ── Hell ── */ html.ui-mode-light[data-scheme="salamanders-red"], html.ui-mode-light [data-scheme="salamanders-red"] { --bg-body: #ffffff; --bg-nav: #f6f6f4; --bg-card: #f6f6f4; --bg-surface: #ececea; --bg-hover: #e2e2de; --bg-content: #ffffff; --border: #ddbcb3; --border-hi: #c88d7f; --divider: rgba(200,60,20,.2); --text-body: #1a1a17; --text-muted: #55554e; --text-dim: #6a6a63; --text-head: #0c0c0a; --accent: #c63218; --accent-hi: #8f2411; --accent-dim: #8f2411; --gold: #866408; --gold-hi: #604806; --gold-dim: #604806; --lsb-bg: #f6f6f4; --lsb-border: #c8a89d; --lsb-brand: #c63218; --hdr-bg: #f6f6f4; --hdr-border: #c63218; --on-accent: #ffffff; --on-gold: #ffffff; --tint: rgba(0,0,0,.04); --badge-canon-fg: #366f2a; --badge-canon-bg: rgba(74,154,58,.12); --badge-canon-border: #2a5a1a; --badge-custom-fg: #4a617e; --badge-custom-bg: rgba(74,85,128,.12); --badge-custom-border: #384868; --badge-real-fg: #2d6a66; --badge-real-bg: rgba(47,111,107,.12); --badge-real-border: #1f4f4c; --badge-lore-bg: rgba(134,100,8,.06); } html.ui-mode-light[data-scheme="salamanders-green"], html.ui-mode-light [data-scheme="salamanders-green"] { --bg-body: #ffffff; --bg-nav: #f6f6f4; --bg-card: #f6f6f4; --bg-surface: #ececea; --bg-hover: #e2e2de; --bg-content: #ffffff; --border: #baccb6; --border-hi: #89a983; --divider: rgba(60,180,60,.2); --text-body: #1a1a17; --text-muted: #55554e; --text-dim: #6a6a63; --text-head: #0c0c0a; --accent: #287923; --accent-hi: #1d5719; --accent-dim: #1d5719; --gold: #80661f; --gold-hi: #5c4916; --gold-dim: #5c4916; --lsb-bg: #f6f6f4; --lsb-border: #a6b7a0; --lsb-brand: #287923; --hdr-bg: #f6f6f4; --hdr-border: #287923; --on-accent: #ffffff; --on-gold: #ffffff; --tint: rgba(0,0,0,.04); --badge-canon-fg: #366f2a; --badge-canon-bg: rgba(74,154,58,.12); --badge-canon-border: #2a5a1a; --badge-custom-fg: #4a617e; --badge-custom-bg: rgba(74,85,128,.12); --badge-custom-border: #384868; --badge-real-fg: #2d6a66; --badge-real-bg: rgba(47,111,107,.12); --badge-real-border: #1f4f4c; --badge-lore-bg: rgba(134,100,8,.06); } html.ui-mode-light[data-scheme="ultramarines-blue"], html.ui-mode-light [data-scheme="ultramarines-blue"] { --bg-body: #ffffff; --bg-nav: #f6f6f4; --bg-card: #f6f6f4; --bg-surface: #ececea; --bg-hover: #e2e2de; --bg-content: #ffffff; --border: #b7bfd5; --border-hi: #8392bb; --divider: rgba(40,80,200,.2); --text-body: #1a1a17; --text-muted: #55554e; --text-dim: #6a6a63; --text-head: #0c0c0a; --accent: #1a40b0; --accent-hi: #132e7f; --accent-dim: #132e7f; --gold: #80661f; --gold-hi: #5c4916; --gold-dim: #5c4916; --lsb-bg: #f6f6f4; --lsb-border: #a2abbf; --lsb-brand: #1a40b0; --hdr-bg: #f6f6f4; --hdr-border: #1a40b0; --on-accent: #ffffff; --on-gold: #ffffff; --tint: rgba(0,0,0,.04); --badge-canon-fg: #366f2a; --badge-canon-bg: rgba(74,154,58,.12); --badge-canon-border: #2a5a1a; --badge-custom-fg: #4a617e; --badge-custom-bg: rgba(74,85,128,.12); --badge-custom-border: #384868; --badge-real-fg: #2d6a66; --badge-real-bg: rgba(47,111,107,.12); --badge-real-border: #1f4f4c; --badge-lore-bg: rgba(134,100,8,.06); } html.ui-mode-light[data-scheme="blood-angels"], html.ui-mode-light [data-scheme="blood-angels"] { --bg-body: #ffffff; --bg-nav: #f6f6f4; --bg-card: #f6f6f4; --bg-surface: #ececea; --bg-hover: #e2e2de; --bg-content: #ffffff; --border: #ddb5b3; --border-hi: #c97f7f; --divider: rgba(200,20,20,.2); --text-body: #1a1a17; --text-muted: #55554e; --text-dim: #6a6a63; --text-head: #0c0c0a; --accent: #c81018; --accent-hi: #900c11; --accent-dim: #900c11; --gold: #8b6300; --gold-hi: #644700; --gold-dim: #644700; --lsb-bg: #f6f6f4; --lsb-border: #c9a09d; --lsb-brand: #c81018; --hdr-bg: #f6f6f4; --hdr-border: #c81018; --on-accent: #ffffff; --on-gold: #ffffff; --tint: rgba(0,0,0,.04); --badge-canon-fg: #366f2a; --badge-canon-bg: rgba(74,154,58,.12); --badge-canon-border: #2a5a1a; --badge-custom-fg: #4a617e; --badge-custom-bg: rgba(74,85,128,.12); --badge-custom-border: #384868; --badge-real-fg: #2d6a66; --badge-real-bg: rgba(47,111,107,.12); --badge-real-border: #1f4f4c; --badge-lore-bg: rgba(134,100,8,.06); } html.ui-mode-light[data-scheme="space-wolves"], html.ui-mode-light [data-scheme="space-wolves"] { --bg-body: #ffffff; --bg-nav: #f6f6f4; --bg-card: #f6f6f4; --bg-surface: #ececea; --bg-hover: #e2e2de; --bg-content: #ffffff; --border: #bec4cf; --border-hi: #909cb2; --divider: rgba(80,120,200,.2); --text-body: #1a1a17; --text-muted: #55554e; --text-dim: #6a6a63; --text-head: #0c0c0a; --accent: #3a5898; --accent-hi: #2a3f6d; --accent-dim: #2a3f6d; --gold: #786a26; --gold-hi: #564c1b; --gold-dim: #564c1b; --lsb-bg: #f6f6f4; --lsb-border: #aab0ba; --lsb-brand: #3a5898; --hdr-bg: #f6f6f4; --hdr-border: #3a5898; --on-accent: #ffffff; --on-gold: #ffffff; --tint: rgba(0,0,0,.04); --badge-canon-fg: #366f2a; --badge-canon-bg: rgba(74,154,58,.12); --badge-canon-border: #2a5a1a; --badge-custom-fg: #4a617e; --badge-custom-bg: rgba(74,85,128,.12); --badge-custom-border: #384868; --badge-real-fg: #2d6a66; --badge-real-bg: rgba(47,111,107,.12); --badge-real-border: #1f4f4c; --badge-lore-bg: rgba(134,100,8,.06); } html.ui-mode-light[data-scheme="dark-angels"], html.ui-mode-light [data-scheme="dark-angels"] { --bg-body: #ffffff; --bg-nav: #f6f6f4; --bg-card: #f6f6f4; --bg-surface: #ececea; --bg-hover: #e2e2de; --bg-content: #ffffff; --border: #b4c5b4; --border-hi: #7e9d7f; --divider: rgba(30,120,40,.2); --text-body: #1a1a17; --text-muted: #55554e; --text-dim: #6a6a63; --text-head: #0c0c0a; --accent: #0e5a1a; --accent-hi: #0a4113; --accent-dim: #0a4113; --gold: #7d681a; --gold-hi: #5a4b13; --gold-dim: #5a4b13; --lsb-bg: #f6f6f4; --lsb-border: #a0b19e; --lsb-brand: #0e5a1a; --hdr-bg: #f6f6f4; --hdr-border: #0e5a1a; --on-accent: #ffffff; --on-gold: #ffffff; --tint: rgba(0,0,0,.04); --badge-canon-fg: #366f2a; --badge-canon-bg: rgba(74,154,58,.12); --badge-canon-border: #2a5a1a; --badge-custom-fg: #4a617e; --badge-custom-bg: rgba(74,85,128,.12); --badge-custom-border: #384868; --badge-real-fg: #2d6a66; --badge-real-bg: rgba(47,111,107,.12); --badge-real-border: #1f4f4c; --badge-lore-bg: rgba(134,100,8,.06); } html.ui-mode-light[data-scheme="imperial-fists"], html.ui-mode-light [data-scheme="imperial-fists"] { --bg-body: #ffffff; --bg-nav: #f6f6f4; --bg-card: #f6f6f4; --bg-surface: #ececea; --bg-hover: #e2e2de; --bg-content: #ffffff; --border: #cfc8ae; --border-hi: #aea175; --divider: rgba(200,160,0,.2); --text-body: #1a1a17; --text-muted: #55554e; --text-dim: #6a6a63; --text-head: #0c0c0a; --accent: #866600; --accent-hi: #604900; --accent-dim: #604900; --gold: #826700; --gold-hi: #5e4a00; --gold-dim: #5e4a00; --lsb-bg: #f6f6f4; --lsb-border: #bab398; --lsb-brand: #866600; --hdr-bg: #f6f6f4; --hdr-border: #866600; --on-accent: #ffffff; --on-gold: #ffffff; --tint: rgba(0,0,0,.04); --badge-canon-fg: #366f2a; --badge-canon-bg: rgba(74,154,58,.12); --badge-canon-border: #2a5a1a; --badge-custom-fg: #4a617e; --badge-custom-bg: rgba(74,85,128,.12); --badge-custom-border: #384868; --badge-real-fg: #2d6a66; --badge-real-bg: rgba(47,111,107,.12); --badge-real-border: #1f4f4c; --badge-lore-bg: rgba(134,100,8,.06); } html.ui-mode-light[data-scheme="midnight"], html.ui-mode-light [data-scheme="midnight"] { --bg-body: #f9f9f8; --bg-nav: #eeeeec; --bg-card: #eeeeec; --bg-surface: #e4e4e0; --bg-hover: #d6d6d0; --bg-content: #f9f9f8; --border: #c9c2a9; --border-hi: #aa9c73; --divider: rgba(90,90,90,.2); --text-body: #1c1c1a; --text-muted: #545249; --text-dim: #66645e; --text-head: #0a0a09; --accent: #7f5f08; --accent-hi: #604806; --accent-dim: #604806; --gold: #7f5f08; --gold-hi: #604806; --gold-dim: #604806; --lsb-bg: #eeeeec; --lsb-border: #b5ad93; --lsb-brand: #866408; --hdr-bg: #eeeeec; --hdr-border: #866408; --on-accent: #ffffff; --on-gold: #ffffff; --tint: rgba(0,0,0,.04); --badge-canon-fg: #366f2a; --badge-canon-bg: rgba(74,154,58,.12); --badge-canon-border: #2a5a1a; --badge-custom-fg: #4a617e; --badge-custom-bg: rgba(74,85,128,.12); --badge-custom-border: #384868; --badge-real-fg: #2d6a66; --badge-real-bg: rgba(47,111,107,.12); --badge-real-border: #1f4f4c; --badge-lore-bg: rgba(134,100,8,.06); } /* ── Mittel ── */ html.ui-mode-medium[data-scheme="salamanders-red"], html.ui-mode-medium [data-scheme="salamanders-red"] { --bg-body: #2a1b1b; --bg-nav: #322020; --bg-card: #322020; --bg-surface: #3b2626; --bg-hover: #462d2d; --bg-content: #2a1b1b; --border: #593131; --border-hi: #a65e5e; --divider: rgba(236,110,64,0.28); --text-body: #e8d8c8; --text-muted: #b28b7b; --text-dim: #b18d7c; --text-head: #f0e0d0; --accent: #ec6e40; --accent-hi: #ef8862; --accent-dim: #95492f; --gold: #e8b820; --gold-hi: #edc851; --gold-dim: #92711e; --lsb-bg: #322020; --lsb-border: #593131; --lsb-brand: #ec6e40; --hdr-bg: #322020; --hdr-border: #ec6e40; --on-accent: #1a0a0a; --on-gold: #1a0a0a; --tint: rgba(255,255,255,.06); --badge-canon-fg: #5cb848; --badge-canon-bg: #1c3a17; --badge-canon-border: #2f6428; --badge-custom-fg: #8aa0bd; --badge-custom-bg: #232c40; --badge-custom-border: #3a4868; --badge-real-fg: #4fb0a9; --badge-real-bg: #12312f; --badge-real-border: #215852; --badge-lore-bg: rgba(232,184,32,0.14); } html.ui-mode-medium[data-scheme="salamanders-green"], html.ui-mode-medium [data-scheme="salamanders-green"] { --bg-body: #1b2a1d; --bg-nav: #203223; --bg-card: #203223; --bg-surface: #263b29; --bg-hover: #2d4631; --bg-content: #1b2a1d; --border: #315938; --border-hi: #4b8955; --divider: rgba(74,182,66,0.28); --text-body: #d1e5ca; --text-muted: #88b080; --text-dim: #8da88d; --text-head: #deefd7; --accent: #4ab642; --accent-hi: #6bc364; --accent-dim: #357731; --gold: #e8c048; --gold-hi: #edce70; --gold-dim: #8c7c35; --lsb-bg: #203223; --lsb-border: #315938; --lsb-brand: #4ab642; --hdr-bg: #203223; --hdr-border: #4ab642; --on-accent: #0a160c; --on-gold: #0a160c; --tint: rgba(255,255,255,.06); --badge-canon-fg: #5cb848; --badge-canon-bg: #1c3a17; --badge-canon-border: #2f6428; --badge-custom-fg: #8aa0bd; --badge-custom-bg: #232c40; --badge-custom-border: #3a4868; --badge-real-fg: #4fb0a9; --badge-real-bg: #12312f; --badge-real-border: #215852; --badge-lore-bg: rgba(232,192,72,0.14); } html.ui-mode-medium[data-scheme="ultramarines-blue"], html.ui-mode-medium [data-scheme="ultramarines-blue"] { --bg-body: #1b1e2a; --bg-nav: #202432; --bg-card: #202432; --bg-surface: #262b3b; --bg-hover: #2d3246; --bg-content: #1b1e2a; --border: #313a59; --border-hi: #6070a7; --divider: rgba(108,147,226,0.28); --text-body: #c8d8f0; --text-muted: #8393c2; --text-dim: #8a92b6; --text-head: #d8e8ff; --accent: #6c93e2; --accent-hi: #86a6e7; --accent-dim: #485e8f; --gold: #e8c048; --gold-hi: #edce70; --gold-dim: #8c773a; --lsb-bg: #202432; --lsb-border: #313a59; --lsb-brand: #6c93e2; --hdr-bg: #202432; --hdr-border: #6c93e2; --on-accent: #080c1a; --on-gold: #080c1a; --tint: rgba(255,255,255,.06); --badge-canon-fg: #5cb848; --badge-canon-bg: #1c3a17; --badge-canon-border: #2f6428; --badge-custom-fg: #8aa0bd; --badge-custom-bg: #232c40; --badge-custom-border: #3a4868; --badge-real-fg: #4fb0a9; --badge-real-bg: #12312f; --badge-real-border: #215852; --badge-lore-bg: rgba(232,192,72,0.14); } html.ui-mode-medium[data-scheme="blood-angels"], html.ui-mode-medium [data-scheme="blood-angels"] { --bg-body: #2a1b1b; --bg-nav: #322020; --bg-card: #322020; --bg-surface: #3b2626; --bg-hover: #462d2d; --bg-content: #2a1b1b; --border: #593131; --border-hi: #a65e5e; --divider: rgba(238,106,106,0.28); --text-body: #f0c8c8; --text-muted: #c28383; --text-dim: #b58989; --text-head: #ffe0e0; --accent: #ee6a6a; --accent-hi: #f18585; --accent-dim: #964646; --gold: #f8c000; --gold-hi: #face38; --gold-dim: #9b760c; --lsb-bg: #322020; --lsb-border: #593131; --lsb-brand: #ee6a6a; --hdr-bg: #322020; --hdr-border: #ee6a6a; --on-accent: #180808; --on-gold: #180808; --tint: rgba(255,255,255,.06); --badge-canon-fg: #5cb848; --badge-canon-bg: #1c3a17; --badge-canon-border: #2f6428; --badge-custom-fg: #8aa0bd; --badge-custom-bg: #232c40; --badge-custom-border: #3a4868; --badge-real-fg: #4fb0a9; --badge-real-bg: #12312f; --badge-real-border: #215852; --badge-lore-bg: rgba(248,192,0,0.14); } html.ui-mode-medium[data-scheme="space-wolves"], html.ui-mode-medium [data-scheme="space-wolves"] { --bg-body: #1b202a; --bg-nav: #202632; --bg-card: #202632; --bg-surface: #262d3b; --bg-hover: #2d3546; --bg-content: #1b202a; --border: #313e59; --border-hi: #5b74a4; --divider: rgba(125,150,206,0.28); --text-body: #c8d4e8; --text-muted: #8898b8; --text-dim: #8796b4; --text-head: #dde8ff; --accent: #7d96ce; --accent-hi: #94a9d7; --accent-dim: #516184; --gold: #e8cc58; --gold-hi: #edd77d; --gold-dim: #8c7f43; --lsb-bg: #202632; --lsb-border: #313e59; --lsb-brand: #7d96ce; --hdr-bg: #202632; --hdr-border: #7d96ce; --on-accent: #0c1018; --on-gold: #0c1018; --tint: rgba(255,255,255,.06); --badge-canon-fg: #5cb848; --badge-canon-bg: #1c3a17; --badge-canon-border: #2f6428; --badge-custom-fg: #8aa0bd; --badge-custom-bg: #232c40; --badge-custom-border: #3a4868; --badge-real-fg: #4fb0a9; --badge-real-bg: #12312f; --badge-real-border: #215852; --badge-lore-bg: rgba(232,204,88,0.14); } html.ui-mode-medium[data-scheme="dark-angels"], html.ui-mode-medium [data-scheme="dark-angels"] { --bg-body: #1b2a20; --bg-nav: #203226; --bg-card: #203226; --bg-surface: #263b2d; --bg-hover: #2d4635; --bg-content: #1b2a20; --border: #31593e; --border-hi: #4b8960; --divider: rgba(40,186,61,0.28); --text-body: #d3e4d3; --text-muted: #84aa89; --text-dim: #80ab88; --text-head: #dcf0dc; --accent: #28ba3d; --accent-hi: #4fc660; --accent-dim: #227930; --gold: #e0c040; --gold-hi: #e7ce6a; --gold-dim: #877c32; --lsb-bg: #203226; --lsb-border: #31593e; --lsb-brand: #28ba3d; --hdr-bg: #203226; --hdr-border: #28ba3d; --on-accent: #050e08; --on-gold: #050e08; --tint: rgba(255,255,255,.06); --badge-canon-fg: #5cb848; --badge-canon-bg: #1c3a17; --badge-canon-border: #2f6428; --badge-custom-fg: #8aa0bd; --badge-custom-bg: #232c40; --badge-custom-border: #3a4868; --badge-real-fg: #4fb0a9; --badge-real-bg: #12312f; --badge-real-border: #215852; --badge-lore-bg: rgba(224,192,64,0.14); } html.ui-mode-medium[data-scheme="imperial-fists"], html.ui-mode-medium [data-scheme="imperial-fists"] { --bg-body: #2a251b; --bg-nav: #322c20; --bg-card: #322c20; --bg-surface: #3b3426; --bg-hover: #463e2d; --bg-content: #2a251b; --border: #594b31; --border-hi: #8c774d; --divider: rgba(232,184,0,0.28); --text-body: #f0e0b0; --text-muted: #c0a060; --text-dim: #c1985a; --text-head: #fff0c0; --accent: #e8b800; --accent-hi: #ecc52e; --accent-dim: #92760c; --gold: #ffd020; --gold-hi: #ffda51; --gold-dim: #9f831e; --lsb-bg: #322c20; --lsb-border: #594b31; --lsb-brand: #e8b800; --hdr-bg: #322c20; --hdr-border: #e8b800; --on-accent: #181000; --on-gold: #181000; --tint: rgba(255,255,255,.06); --badge-canon-fg: #5cb848; --badge-canon-bg: #1c3a17; --badge-canon-border: #2f6428; --badge-custom-fg: #8aa0bd; --badge-custom-bg: #232c40; --badge-custom-border: #3a4868; --badge-real-fg: #4fb0a9; --badge-real-bg: #12312f; --badge-real-border: #215852; --badge-lore-bg: rgba(255,208,32,0.14); } html.ui-mode-medium[data-scheme="midnight"], html.ui-mode-medium [data-scheme="midnight"] { --bg-body: #242320; --bg-nav: #2b2a26; --bg-card: #2b2a26; --bg-surface: #33312e; --bg-hover: #3d3b36; --bg-content: #242320; --border: #4a473f; --border-hi: #7d776b; --divider: rgba(232,184,32,0.28); --text-body: #ded7c9; --text-muted: #a79985; --text-dim: #a49982; --text-head: #ede1ce; --accent: #e8b820; --accent-hi: #ecc548; --accent-dim: #907520; --gold: #e8b820; --gold-hi: #edc851; --gold-dim: #907520; --lsb-bg: #2b2a26; --lsb-border: #4a473f; --lsb-brand: #e8b820; --hdr-bg: #2b2a26; --hdr-border: #e8b820; --on-accent: #0a0a0a; --on-gold: #0a0a0a; --tint: rgba(255,255,255,.06); --badge-canon-fg: #5cb848; --badge-canon-bg: #1c3a17; --badge-canon-border: #2f6428; --badge-custom-fg: #8aa0bd; --badge-custom-bg: #232c40; --badge-custom-border: #3a4868; --badge-real-fg: #4fb0a9; --badge-real-bg: #12312f; --badge-real-border: #215852; --badge-lore-bg: rgba(232,184,32,0.14); } /* ── Dunkel ── */ html.ui-mode-dark[data-scheme="salamanders-red"], html.ui-mode-dark [data-scheme="salamanders-red"] { --bg-body: #1a0a0a; --bg-nav: #241313; --bg-card: #241313; --bg-surface: #2e1c1c; --bg-hover: #381e1e; --bg-content: #1a0a0a; --border: #4a2020; --border-hi: #b14646; --divider: rgba(233,91,39,0.25); --text-body: #e8d8c8; --text-muted: #b08878; --text-dim: #a9806d; --text-head: #f0e0d0; --accent: #e95b27; --accent-hi: #ed794e; --accent-dim: #8c371a; --gold: #e8b820; --gold-hi: #edc851; --gold-dim: #8b6a16; --lsb-bg: #241313; --lsb-border: #4a2020; --lsb-brand: #e95b27; --hdr-bg: #241313; --hdr-border: #e95b27; --on-accent: #1a0a0a; --on-gold: #1a0a0a; --tint: rgba(255,255,255,.05); --badge-canon-fg: #5cb848; --badge-canon-bg: #1c3a17; --badge-canon-border: #2f6428; --badge-custom-fg: #8aa0bd; --badge-custom-bg: #232c40; --badge-custom-border: #3a4868; --badge-real-fg: #4fb0a9; --badge-real-bg: #12312f; --badge-real-border: #215852; --badge-lore-bg: rgba(232,184,32,0.14); } html.ui-mode-dark[data-scheme="salamanders-green"], html.ui-mode-dark [data-scheme="salamanders-green"] { --bg-body: #0a160c; --bg-nav: #112214; --bg-card: #112214; --bg-surface: #182e1c; --bg-hover: #1e3820; --bg-content: #0a160c; --border: #1e3a20; --border-hi: #3e7a41; --divider: rgba(72,176,64,0.25); --text-body: #c8e0c0; --text-muted: #88b080; --text-dim: #7b997b; --text-head: #d8ecd0; --accent: #48b040; --accent-hi: #69be62; --accent-dim: #2c6b29; --gold: #e8c048; --gold-hi: #edce70; --gold-dim: #84742d; --lsb-bg: #112214; --lsb-border: #1e3a20; --lsb-brand: #48b040; --hdr-bg: #112214; --hdr-border: #48b040; --on-accent: #0a160c; --on-gold: #0a160c; --tint: rgba(255,255,255,.05); --badge-canon-fg: #5cb848; --badge-canon-bg: #1c3a17; --badge-canon-border: #2f6428; --badge-custom-fg: #8aa0bd; --badge-custom-bg: #232c40; --badge-custom-border: #3a4868; --badge-real-fg: #4fb0a9; --badge-real-bg: #12312f; --badge-real-border: #215852; --badge-lore-bg: rgba(232,192,72,0.14); } html.ui-mode-dark[data-scheme="ultramarines-blue"], html.ui-mode-dark [data-scheme="ultramarines-blue"] { --bg-body: #080c1a; --bg-nav: #101527; --bg-card: #101527; --bg-surface: #181e34; --bg-hover: #202840; --bg-content: #080c1a; --border: #202860; --border-hi: #545fbf; --divider: rgba(91,135,223,0.25); --text-body: #c8d8f0; --text-muted: #8090c0; --text-dim: #7e86ae; --text-head: #d8e8ff; --accent: #5b87df; --accent-hi: #799de5; --accent-dim: #365086; --gold: #e8c048; --gold-hi: #edce70; --gold-dim: #836f33; --lsb-bg: #101527; --lsb-border: #202860; --lsb-brand: #5b87df; --hdr-bg: #101527; --hdr-border: #5b87df; --on-accent: #080c1a; --on-gold: #080c1a; --tint: rgba(255,255,255,.05); --badge-canon-fg: #5cb848; --badge-canon-bg: #1c3a17; --badge-canon-border: #2f6428; --badge-custom-fg: #8aa0bd; --badge-custom-bg: #232c40; --badge-custom-border: #3a4868; --badge-real-fg: #4fb0a9; --badge-real-bg: #12312f; --badge-real-border: #215852; --badge-lore-bg: rgba(232,192,72,0.14); } html.ui-mode-dark[data-scheme="blood-angels"], html.ui-mode-dark [data-scheme="blood-angels"] { --bg-body: #180808; --bg-nav: #260c0c; --bg-card: #260c0c; --bg-surface: #341010; --bg-hover: #401414; --bg-content: #180808; --border: #501818; --border-hi: #c52727; --divider: rgba(235,76,76,0.25); --text-body: #f0c8c8; --text-muted: #c08080; --text-dim: #ab7979; --text-head: #ffe0e0; --accent: #eb4c4c; --accent-hi: #ef6c6c; --accent-dim: #8c2d2d; --gold: #f8c000; --gold-hi: #face38; --gold-dim: #936d04; --lsb-bg: #260c0c; --lsb-border: #501818; --lsb-brand: #eb4c4c; --hdr-bg: #260c0c; --hdr-border: #eb4c4c; --on-accent: #180808; --on-gold: #180808; --tint: rgba(255,255,255,.05); --badge-canon-fg: #5cb848; --badge-canon-bg: #1c3a17; --badge-canon-border: #2f6428; --badge-custom-fg: #8aa0bd; --badge-custom-bg: #232c40; --badge-custom-border: #3a4868; --badge-real-fg: #4fb0a9; --badge-real-bg: #12312f; --badge-real-border: #215852; --badge-lore-bg: rgba(248,192,0,0.14); } html.ui-mode-dark[data-scheme="space-wolves"], html.ui-mode-dark [data-scheme="space-wolves"] { --bg-body: #0c1018; --bg-nav: #161c28; --bg-card: #161c28; --bg-surface: #202838; --bg-hover: #2a3248; --bg-content: #0c1018; --border: #2a3450; --border-hi: #5a69a1; --divider: rgba(118,144,203,0.25); --text-body: #c8d4e8; --text-muted: #8898b8; --text-dim: #8191b0; --text-head: #dde8ff; --accent: #7690cb; --accent-hi: #8fa4d4; --accent-dim: #46567a; --gold: #e8cc58; --gold-hi: #edd77d; --gold-dim: #85773b; --lsb-bg: #161c28; --lsb-border: #2a3450; --lsb-brand: #7690cb; --hdr-bg: #161c28; --hdr-border: #7690cb; --on-accent: #0c1018; --on-gold: #0c1018; --tint: rgba(255,255,255,.05); --badge-canon-fg: #5cb848; --badge-canon-bg: #1c3a17; --badge-canon-border: #2f6428; --badge-custom-fg: #8aa0bd; --badge-custom-bg: #232c40; --badge-custom-border: #3a4868; --badge-real-fg: #4fb0a9; --badge-real-bg: #12312f; --badge-real-border: #215852; --badge-lore-bg: rgba(232,204,88,0.14); } html.ui-mode-dark[data-scheme="dark-angels"], html.ui-mode-dark [data-scheme="dark-angels"] { --bg-body: #050e08; --bg-nav: #0c160e; --bg-card: #0c160e; --bg-surface: #121e14; --bg-hover: #182818; --bg-content: #050e08; --border: #143018; --border-hi: #317534; --divider: rgba(33,154,51,0.25); --text-body: #b8d4b8; --text-muted: #6a9870; --text-dim: #5f9169; --text-head: #c8e8c8; --accent: #219a33; --accent-hi: #49ac58; --accent-dim: #145b20; --gold: #e0c040; --gold-hi: #e7ce6a; --gold-dim: #7d7027; --lsb-bg: #0c160e; --lsb-border: #143018; --lsb-brand: #219a33; --hdr-bg: #0c160e; --hdr-border: #219a33; --on-accent: #050e08; --on-gold: #050e08; --tint: rgba(255,255,255,.05); --badge-canon-fg: #5cb848; --badge-canon-bg: #1c3a17; --badge-canon-border: #2f6428; --badge-custom-fg: #8aa0bd; --badge-custom-bg: #232c40; --badge-custom-border: #3a4868; --badge-real-fg: #4fb0a9; --badge-real-bg: #12312f; --badge-real-border: #215852; --badge-lore-bg: rgba(224,192,64,0.14); } html.ui-mode-dark[data-scheme="imperial-fists"], html.ui-mode-dark [data-scheme="imperial-fists"] { --bg-body: #181000; --bg-nav: #261c00; --bg-card: #261c00; --bg-surface: #342800; --bg-hover: #403200; --bg-content: #181000; --border: #503c00; --border-hi: #8c6700; --divider: rgba(232,184,0,0.25); --text-body: #f0e0b0; --text-muted: #c0a060; --text-dim: #b88a45; --text-head: #fff0c0; --accent: #e8b800; --accent-hi: #ecc52e; --accent-dim: #8a6c00; --gold: #ffd020; --gold-hi: #ffda51; --gold-dim: #977a12; --lsb-bg: #261c00; --lsb-border: #503c00; --lsb-brand: #e8b800; --hdr-bg: #261c00; --hdr-border: #e8b800; --on-accent: #181000; --on-gold: #181000; --tint: rgba(255,255,255,.05); --badge-canon-fg: #5cb848; --badge-canon-bg: #1c3a17; --badge-canon-border: #2f6428; --badge-custom-fg: #8aa0bd; --badge-custom-bg: #232c40; --badge-custom-border: #3a4868; --badge-real-fg: #4fb0a9; --badge-real-bg: #12312f; --badge-real-border: #215852; --badge-lore-bg: rgba(255,208,32,0.14); } html.ui-mode-dark[data-scheme="midnight"], html.ui-mode-dark [data-scheme="midnight"] { --bg-body: #0a0a0a; --bg-nav: #121212; --bg-card: #121212; --bg-surface: #1a1a1a; --bg-hover: #222222; --bg-content: #0a0a0a; --border: #282828; --border-hi: #656565; --divider: rgba(232,184,32,0.25); --text-body: #d8d0c0; --text-muted: #988870; --text-dim: #8f8268; --text-head: #ece0cc; --accent: #e8b820; --accent-hi: #ecc548; --accent-dim: #846a16; --gold: #e8b820; --gold-hi: #edc851; --gold-dim: #846a16; --lsb-bg: #121212; --lsb-border: #282828; --lsb-brand: #e8b820; --hdr-bg: #121212; --hdr-border: #e8b820; --on-accent: #0a0a0a; --on-gold: #0a0a0a; --tint: rgba(255,255,255,.05); --badge-canon-fg: #5cb848; --badge-canon-bg: #1c3a17; --badge-canon-border: #2f6428; --badge-custom-fg: #8aa0bd; --badge-custom-bg: #232c40; --badge-custom-border: #3a4868; --badge-real-fg: #4fb0a9; --badge-real-bg: #12312f; --badge-real-border: #215852; --badge-lore-bg: rgba(232,184,32,0.14); } /* ── Hero-Insel: Wo der Modus es verlangt, liegt der Hero im Dunkel-Satz seines Schemas ── */ html.ui-mode-light[data-scheme="salamanders-red"] #content .site-hero, html.ui-mode-medium[data-scheme="salamanders-red"] #content .site-hero { --bg-body: #1a0a0a; --bg-nav: #241313; --bg-card: #241313; --bg-surface: #2e1c1c; --bg-hover: #381e1e; --bg-content: #1a0a0a; --border: #4a2020; --border-hi: #b14646; --divider: rgba(233,91,39,0.25); --text-body: #e8d8c8; --text-muted: #b08878; --text-dim: #a9806d; --text-head: #f0e0d0; --accent: #e95b27; --accent-hi: #ed794e; --accent-dim: #8c371a; --gold: #e8b820; --gold-hi: #edc851; --gold-dim: #8b6a16; --lsb-bg: #241313; --lsb-border: #4a2020; --lsb-brand: #e95b27; --hdr-bg: #241313; --hdr-border: #e95b27; --on-accent: #1a0a0a; --on-gold: #1a0a0a; --tint: rgba(255,255,255,.05); --badge-canon-fg: #5cb848; --badge-canon-bg: #1c3a17; --badge-canon-border: #2f6428; --badge-custom-fg: #8aa0bd; --badge-custom-bg: #232c40; --badge-custom-border: #3a4868; --badge-real-fg: #4fb0a9; --badge-real-bg: #12312f; --badge-real-border: #215852; --badge-lore-bg: rgba(232,184,32,0.14); } html.ui-mode-light[data-scheme="salamanders-green"] #content .site-hero, html.ui-mode-medium[data-scheme="salamanders-green"] #content .site-hero { --bg-body: #0a160c; --bg-nav: #112214; --bg-card: #112214; --bg-surface: #182e1c; --bg-hover: #1e3820; --bg-content: #0a160c; --border: #1e3a20; --border-hi: #3e7a41; --divider: rgba(72,176,64,0.25); --text-body: #c8e0c0; --text-muted: #88b080; --text-dim: #7b997b; --text-head: #d8ecd0; --accent: #48b040; --accent-hi: #69be62; --accent-dim: #2c6b29; --gold: #e8c048; --gold-hi: #edce70; --gold-dim: #84742d; --lsb-bg: #112214; --lsb-border: #1e3a20; --lsb-brand: #48b040; --hdr-bg: #112214; --hdr-border: #48b040; --on-accent: #0a160c; --on-gold: #0a160c; --tint: rgba(255,255,255,.05); --badge-canon-fg: #5cb848; --badge-canon-bg: #1c3a17; --badge-canon-border: #2f6428; --badge-custom-fg: #8aa0bd; --badge-custom-bg: #232c40; --badge-custom-border: #3a4868; --badge-real-fg: #4fb0a9; --badge-real-bg: #12312f; --badge-real-border: #215852; --badge-lore-bg: rgba(232,192,72,0.14); } html.ui-mode-light[data-scheme="ultramarines-blue"] #content .site-hero, html.ui-mode-medium[data-scheme="ultramarines-blue"] #content .site-hero { --bg-body: #080c1a; --bg-nav: #101527; --bg-card: #101527; --bg-surface: #181e34; --bg-hover: #202840; --bg-content: #080c1a; --border: #202860; --border-hi: #545fbf; --divider: rgba(91,135,223,0.25); --text-body: #c8d8f0; --text-muted: #8090c0; --text-dim: #7e86ae; --text-head: #d8e8ff; --accent: #5b87df; --accent-hi: #799de5; --accent-dim: #365086; --gold: #e8c048; --gold-hi: #edce70; --gold-dim: #836f33; --lsb-bg: #101527; --lsb-border: #202860; --lsb-brand: #5b87df; --hdr-bg: #101527; --hdr-border: #5b87df; --on-accent: #080c1a; --on-gold: #080c1a; --tint: rgba(255,255,255,.05); --badge-canon-fg: #5cb848; --badge-canon-bg: #1c3a17; --badge-canon-border: #2f6428; --badge-custom-fg: #8aa0bd; --badge-custom-bg: #232c40; --badge-custom-border: #3a4868; --badge-real-fg: #4fb0a9; --badge-real-bg: #12312f; --badge-real-border: #215852; --badge-lore-bg: rgba(232,192,72,0.14); } html.ui-mode-light[data-scheme="blood-angels"] #content .site-hero, html.ui-mode-medium[data-scheme="blood-angels"] #content .site-hero { --bg-body: #180808; --bg-nav: #260c0c; --bg-card: #260c0c; --bg-surface: #341010; --bg-hover: #401414; --bg-content: #180808; --border: #501818; --border-hi: #c52727; --divider: rgba(235,76,76,0.25); --text-body: #f0c8c8; --text-muted: #c08080; --text-dim: #ab7979; --text-head: #ffe0e0; --accent: #eb4c4c; --accent-hi: #ef6c6c; --accent-dim: #8c2d2d; --gold: #f8c000; --gold-hi: #face38; --gold-dim: #936d04; --lsb-bg: #260c0c; --lsb-border: #501818; --lsb-brand: #eb4c4c; --hdr-bg: #260c0c; --hdr-border: #eb4c4c; --on-accent: #180808; --on-gold: #180808; --tint: rgba(255,255,255,.05); --badge-canon-fg: #5cb848; --badge-canon-bg: #1c3a17; --badge-canon-border: #2f6428; --badge-custom-fg: #8aa0bd; --badge-custom-bg: #232c40; --badge-custom-border: #3a4868; --badge-real-fg: #4fb0a9; --badge-real-bg: #12312f; --badge-real-border: #215852; --badge-lore-bg: rgba(248,192,0,0.14); } html.ui-mode-light[data-scheme="space-wolves"] #content .site-hero, html.ui-mode-medium[data-scheme="space-wolves"] #content .site-hero { --bg-body: #0c1018; --bg-nav: #161c28; --bg-card: #161c28; --bg-surface: #202838; --bg-hover: #2a3248; --bg-content: #0c1018; --border: #2a3450; --border-hi: #5a69a1; --divider: rgba(118,144,203,0.25); --text-body: #c8d4e8; --text-muted: #8898b8; --text-dim: #8191b0; --text-head: #dde8ff; --accent: #7690cb; --accent-hi: #8fa4d4; --accent-dim: #46567a; --gold: #e8cc58; --gold-hi: #edd77d; --gold-dim: #85773b; --lsb-bg: #161c28; --lsb-border: #2a3450; --lsb-brand: #7690cb; --hdr-bg: #161c28; --hdr-border: #7690cb; --on-accent: #0c1018; --on-gold: #0c1018; --tint: rgba(255,255,255,.05); --badge-canon-fg: #5cb848; --badge-canon-bg: #1c3a17; --badge-canon-border: #2f6428; --badge-custom-fg: #8aa0bd; --badge-custom-bg: #232c40; --badge-custom-border: #3a4868; --badge-real-fg: #4fb0a9; --badge-real-bg: #12312f; --badge-real-border: #215852; --badge-lore-bg: rgba(232,204,88,0.14); } html.ui-mode-light[data-scheme="dark-angels"] #content .site-hero, html.ui-mode-medium[data-scheme="dark-angels"] #content .site-hero { --bg-body: #050e08; --bg-nav: #0c160e; --bg-card: #0c160e; --bg-surface: #121e14; --bg-hover: #182818; --bg-content: #050e08; --border: #143018; --border-hi: #317534; --divider: rgba(33,154,51,0.25); --text-body: #b8d4b8; --text-muted: #6a9870; --text-dim: #5f9169; --text-head: #c8e8c8; --accent: #219a33; --accent-hi: #49ac58; --accent-dim: #145b20; --gold: #e0c040; --gold-hi: #e7ce6a; --gold-dim: #7d7027; --lsb-bg: #0c160e; --lsb-border: #143018; --lsb-brand: #219a33; --hdr-bg: #0c160e; --hdr-border: #219a33; --on-accent: #050e08; --on-gold: #050e08; --tint: rgba(255,255,255,.05); --badge-canon-fg: #5cb848; --badge-canon-bg: #1c3a17; --badge-canon-border: #2f6428; --badge-custom-fg: #8aa0bd; --badge-custom-bg: #232c40; --badge-custom-border: #3a4868; --badge-real-fg: #4fb0a9; --badge-real-bg: #12312f; --badge-real-border: #215852; --badge-lore-bg: rgba(224,192,64,0.14); } html.ui-mode-light[data-scheme="imperial-fists"] #content .site-hero, html.ui-mode-medium[data-scheme="imperial-fists"] #content .site-hero { --bg-body: #181000; --bg-nav: #261c00; --bg-card: #261c00; --bg-surface: #342800; --bg-hover: #403200; --bg-content: #181000; --border: #503c00; --border-hi: #8c6700; --divider: rgba(232,184,0,0.25); --text-body: #f0e0b0; --text-muted: #c0a060; --text-dim: #b88a45; --text-head: #fff0c0; --accent: #e8b800; --accent-hi: #ecc52e; --accent-dim: #8a6c00; --gold: #ffd020; --gold-hi: #ffda51; --gold-dim: #977a12; --lsb-bg: #261c00; --lsb-border: #503c00; --lsb-brand: #e8b800; --hdr-bg: #261c00; --hdr-border: #e8b800; --on-accent: #181000; --on-gold: #181000; --tint: rgba(255,255,255,.05); --badge-canon-fg: #5cb848; --badge-canon-bg: #1c3a17; --badge-canon-border: #2f6428; --badge-custom-fg: #8aa0bd; --badge-custom-bg: #232c40; --badge-custom-border: #3a4868; --badge-real-fg: #4fb0a9; --badge-real-bg: #12312f; --badge-real-border: #215852; --badge-lore-bg: rgba(255,208,32,0.14); } html.ui-mode-light[data-scheme="midnight"] #content .site-hero, html.ui-mode-medium[data-scheme="midnight"] #content .site-hero { --bg-body: #0a0a0a; --bg-nav: #121212; --bg-card: #121212; --bg-surface: #1a1a1a; --bg-hover: #222222; --bg-content: #0a0a0a; --border: #282828; --border-hi: #656565; --divider: rgba(232,184,32,0.25); --text-body: #d8d0c0; --text-muted: #988870; --text-dim: #8f8268; --text-head: #ece0cc; --accent: #e8b820; --accent-hi: #ecc548; --accent-dim: #846a16; --gold: #e8b820; --gold-hi: #edc851; --gold-dim: #846a16; --lsb-bg: #121212; --lsb-border: #282828; --lsb-brand: #e8b820; --hdr-bg: #121212; --hdr-border: #e8b820; --on-accent: #0a0a0a; --on-gold: #0a0a0a; --tint: rgba(255,255,255,.05); --badge-canon-fg: #5cb848; --badge-canon-bg: #1c3a17; --badge-canon-border: #2f6428; --badge-custom-fg: #8aa0bd; --badge-custom-bg: #232c40; --badge-custom-border: #3a4868; --badge-real-fg: #4fb0a9; --badge-real-bg: #12312f; --badge-real-border: #215852; --badge-lore-bg: rgba(232,184,32,0.14); } /* ── Druck: jedes Erscheinungsbild und der Hero drucken mit dem hellen Satz ── */ @media print { html.ui-mode-light[data-scheme="salamanders-red"] #content .site-hero, html.ui-mode-medium[data-scheme="salamanders-red"], html.ui-mode-medium [data-scheme="salamanders-red"], html.ui-mode-medium[data-scheme="salamanders-red"] #content .site-hero, html.ui-mode-dark[data-scheme="salamanders-red"], html.ui-mode-dark [data-scheme="salamanders-red"], html.ui-mode-dark[data-scheme="salamanders-red"] #content .site-hero { --bg-body: #ffffff; --bg-nav: #f6f6f4; --bg-card: #f6f6f4; --bg-surface: #ececea; --bg-hover: #e2e2de; --bg-content: #ffffff; --border: #ddbcb3; --border-hi: #c88d7f; --divider: rgba(200,60,20,.2); --text-body: #1a1a17; --text-muted: #55554e; --text-dim: #6a6a63; --text-head: #0c0c0a; --accent: #c63218; --accent-hi: #8f2411; --accent-dim: #8f2411; --gold: #866408; --gold-hi: #604806; --gold-dim: #604806; --lsb-bg: #f6f6f4; --lsb-border: #c8a89d; --lsb-brand: #c63218; --hdr-bg: #f6f6f4; --hdr-border: #c63218; --on-accent: #ffffff; --on-gold: #ffffff; --tint: rgba(0,0,0,.04); --badge-canon-fg: #366f2a; --badge-canon-bg: rgba(74,154,58,.12); --badge-canon-border: #2a5a1a; --badge-custom-fg: #4a617e; --badge-custom-bg: rgba(74,85,128,.12); --badge-custom-border: #384868; --badge-real-fg: #2d6a66; --badge-real-bg: rgba(47,111,107,.12); --badge-real-border: #1f4f4c; --badge-lore-bg: rgba(134,100,8,.06); } html.ui-mode-light[data-scheme="salamanders-green"] #content .site-hero, html.ui-mode-medium[data-scheme="salamanders-green"], html.ui-mode-medium [data-scheme="salamanders-green"], html.ui-mode-medium[data-scheme="salamanders-green"] #content .site-hero, html.ui-mode-dark[data-scheme="salamanders-green"], html.ui-mode-dark [data-scheme="salamanders-green"], html.ui-mode-dark[data-scheme="salamanders-green"] #content .site-hero { --bg-body: #ffffff; --bg-nav: #f6f6f4; --bg-card: #f6f6f4; --bg-surface: #ececea; --bg-hover: #e2e2de; --bg-content: #ffffff; --border: #baccb6; --border-hi: #89a983; --divider: rgba(60,180,60,.2); --text-body: #1a1a17; --text-muted: #55554e; --text-dim: #6a6a63; --text-head: #0c0c0a; --accent: #287923; --accent-hi: #1d5719; --accent-dim: #1d5719; --gold: #80661f; --gold-hi: #5c4916; --gold-dim: #5c4916; --lsb-bg: #f6f6f4; --lsb-border: #a6b7a0; --lsb-brand: #287923; --hdr-bg: #f6f6f4; --hdr-border: #287923; --on-accent: #ffffff; --on-gold: #ffffff; --tint: rgba(0,0,0,.04); --badge-canon-fg: #366f2a; --badge-canon-bg: rgba(74,154,58,.12); --badge-canon-border: #2a5a1a; --badge-custom-fg: #4a617e; --badge-custom-bg: rgba(74,85,128,.12); --badge-custom-border: #384868; --badge-real-fg: #2d6a66; --badge-real-bg: rgba(47,111,107,.12); --badge-real-border: #1f4f4c; --badge-lore-bg: rgba(134,100,8,.06); } html.ui-mode-light[data-scheme="ultramarines-blue"] #content .site-hero, html.ui-mode-medium[data-scheme="ultramarines-blue"], html.ui-mode-medium [data-scheme="ultramarines-blue"], html.ui-mode-medium[data-scheme="ultramarines-blue"] #content .site-hero, html.ui-mode-dark[data-scheme="ultramarines-blue"], html.ui-mode-dark [data-scheme="ultramarines-blue"], html.ui-mode-dark[data-scheme="ultramarines-blue"] #content .site-hero { --bg-body: #ffffff; --bg-nav: #f6f6f4; --bg-card: #f6f6f4; --bg-surface: #ececea; --bg-hover: #e2e2de; --bg-content: #ffffff; --border: #b7bfd5; --border-hi: #8392bb; --divider: rgba(40,80,200,.2); --text-body: #1a1a17; --text-muted: #55554e; --text-dim: #6a6a63; --text-head: #0c0c0a; --accent: #1a40b0; --accent-hi: #132e7f; --accent-dim: #132e7f; --gold: #80661f; --gold-hi: #5c4916; --gold-dim: #5c4916; --lsb-bg: #f6f6f4; --lsb-border: #a2abbf; --lsb-brand: #1a40b0; --hdr-bg: #f6f6f4; --hdr-border: #1a40b0; --on-accent: #ffffff; --on-gold: #ffffff; --tint: rgba(0,0,0,.04); --badge-canon-fg: #366f2a; --badge-canon-bg: rgba(74,154,58,.12); --badge-canon-border: #2a5a1a; --badge-custom-fg: #4a617e; --badge-custom-bg: rgba(74,85,128,.12); --badge-custom-border: #384868; --badge-real-fg: #2d6a66; --badge-real-bg: rgba(47,111,107,.12); --badge-real-border: #1f4f4c; --badge-lore-bg: rgba(134,100,8,.06); } html.ui-mode-light[data-scheme="blood-angels"] #content .site-hero, html.ui-mode-medium[data-scheme="blood-angels"], html.ui-mode-medium [data-scheme="blood-angels"], html.ui-mode-medium[data-scheme="blood-angels"] #content .site-hero, html.ui-mode-dark[data-scheme="blood-angels"], html.ui-mode-dark [data-scheme="blood-angels"], html.ui-mode-dark[data-scheme="blood-angels"] #content .site-hero { --bg-body: #ffffff; --bg-nav: #f6f6f4; --bg-card: #f6f6f4; --bg-surface: #ececea; --bg-hover: #e2e2de; --bg-content: #ffffff; --border: #ddb5b3; --border-hi: #c97f7f; --divider: rgba(200,20,20,.2); --text-body: #1a1a17; --text-muted: #55554e; --text-dim: #6a6a63; --text-head: #0c0c0a; --accent: #c81018; --accent-hi: #900c11; --accent-dim: #900c11; --gold: #8b6300; --gold-hi: #644700; --gold-dim: #644700; --lsb-bg: #f6f6f4; --lsb-border: #c9a09d; --lsb-brand: #c81018; --hdr-bg: #f6f6f4; --hdr-border: #c81018; --on-accent: #ffffff; --on-gold: #ffffff; --tint: rgba(0,0,0,.04); --badge-canon-fg: #366f2a; --badge-canon-bg: rgba(74,154,58,.12); --badge-canon-border: #2a5a1a; --badge-custom-fg: #4a617e; --badge-custom-bg: rgba(74,85,128,.12); --badge-custom-border: #384868; --badge-real-fg: #2d6a66; --badge-real-bg: rgba(47,111,107,.12); --badge-real-border: #1f4f4c; --badge-lore-bg: rgba(134,100,8,.06); } html.ui-mode-light[data-scheme="space-wolves"] #content .site-hero, html.ui-mode-medium[data-scheme="space-wolves"], html.ui-mode-medium [data-scheme="space-wolves"], html.ui-mode-medium[data-scheme="space-wolves"] #content .site-hero, html.ui-mode-dark[data-scheme="space-wolves"], html.ui-mode-dark [data-scheme="space-wolves"], html.ui-mode-dark[data-scheme="space-wolves"] #content .site-hero { --bg-body: #ffffff; --bg-nav: #f6f6f4; --bg-card: #f6f6f4; --bg-surface: #ececea; --bg-hover: #e2e2de; --bg-content: #ffffff; --border: #bec4cf; --border-hi: #909cb2; --divider: rgba(80,120,200,.2); --text-body: #1a1a17; --text-muted: #55554e; --text-dim: #6a6a63; --text-head: #0c0c0a; --accent: #3a5898; --accent-hi: #2a3f6d; --accent-dim: #2a3f6d; --gold: #786a26; --gold-hi: #564c1b; --gold-dim: #564c1b; --lsb-bg: #f6f6f4; --lsb-border: #aab0ba; --lsb-brand: #3a5898; --hdr-bg: #f6f6f4; --hdr-border: #3a5898; --on-accent: #ffffff; --on-gold: #ffffff; --tint: rgba(0,0,0,.04); --badge-canon-fg: #366f2a; --badge-canon-bg: rgba(74,154,58,.12); --badge-canon-border: #2a5a1a; --badge-custom-fg: #4a617e; --badge-custom-bg: rgba(74,85,128,.12); --badge-custom-border: #384868; --badge-real-fg: #2d6a66; --badge-real-bg: rgba(47,111,107,.12); --badge-real-border: #1f4f4c; --badge-lore-bg: rgba(134,100,8,.06); } html.ui-mode-light[data-scheme="dark-angels"] #content .site-hero, html.ui-mode-medium[data-scheme="dark-angels"], html.ui-mode-medium [data-scheme="dark-angels"], html.ui-mode-medium[data-scheme="dark-angels"] #content .site-hero, html.ui-mode-dark[data-scheme="dark-angels"], html.ui-mode-dark [data-scheme="dark-angels"], html.ui-mode-dark[data-scheme="dark-angels"] #content .site-hero { --bg-body: #ffffff; --bg-nav: #f6f6f4; --bg-card: #f6f6f4; --bg-surface: #ececea; --bg-hover: #e2e2de; --bg-content: #ffffff; --border: #b4c5b4; --border-hi: #7e9d7f; --divider: rgba(30,120,40,.2); --text-body: #1a1a17; --text-muted: #55554e; --text-dim: #6a6a63; --text-head: #0c0c0a; --accent: #0e5a1a; --accent-hi: #0a4113; --accent-dim: #0a4113; --gold: #7d681a; --gold-hi: #5a4b13; --gold-dim: #5a4b13; --lsb-bg: #f6f6f4; --lsb-border: #a0b19e; --lsb-brand: #0e5a1a; --hdr-bg: #f6f6f4; --hdr-border: #0e5a1a; --on-accent: #ffffff; --on-gold: #ffffff; --tint: rgba(0,0,0,.04); --badge-canon-fg: #366f2a; --badge-canon-bg: rgba(74,154,58,.12); --badge-canon-border: #2a5a1a; --badge-custom-fg: #4a617e; --badge-custom-bg: rgba(74,85,128,.12); --badge-custom-border: #384868; --badge-real-fg: #2d6a66; --badge-real-bg: rgba(47,111,107,.12); --badge-real-border: #1f4f4c; --badge-lore-bg: rgba(134,100,8,.06); } html.ui-mode-light[data-scheme="imperial-fists"] #content .site-hero, html.ui-mode-medium[data-scheme="imperial-fists"], html.ui-mode-medium [data-scheme="imperial-fists"], html.ui-mode-medium[data-scheme="imperial-fists"] #content .site-hero, html.ui-mode-dark[data-scheme="imperial-fists"], html.ui-mode-dark [data-scheme="imperial-fists"], html.ui-mode-dark[data-scheme="imperial-fists"] #content .site-hero { --bg-body: #ffffff; --bg-nav: #f6f6f4; --bg-card: #f6f6f4; --bg-surface: #ececea; --bg-hover: #e2e2de; --bg-content: #ffffff; --border: #cfc8ae; --border-hi: #aea175; --divider: rgba(200,160,0,.2); --text-body: #1a1a17; --text-muted: #55554e; --text-dim: #6a6a63; --text-head: #0c0c0a; --accent: #866600; --accent-hi: #604900; --accent-dim: #604900; --gold: #826700; --gold-hi: #5e4a00; --gold-dim: #5e4a00; --lsb-bg: #f6f6f4; --lsb-border: #bab398; --lsb-brand: #866600; --hdr-bg: #f6f6f4; --hdr-border: #866600; --on-accent: #ffffff; --on-gold: #ffffff; --tint: rgba(0,0,0,.04); --badge-canon-fg: #366f2a; --badge-canon-bg: rgba(74,154,58,.12); --badge-canon-border: #2a5a1a; --badge-custom-fg: #4a617e; --badge-custom-bg: rgba(74,85,128,.12); --badge-custom-border: #384868; --badge-real-fg: #2d6a66; --badge-real-bg: rgba(47,111,107,.12); --badge-real-border: #1f4f4c; --badge-lore-bg: rgba(134,100,8,.06); } html.ui-mode-light[data-scheme="midnight"] #content .site-hero, html.ui-mode-medium[data-scheme="midnight"], html.ui-mode-medium [data-scheme="midnight"], html.ui-mode-medium[data-scheme="midnight"] #content .site-hero, html.ui-mode-dark[data-scheme="midnight"], html.ui-mode-dark [data-scheme="midnight"], html.ui-mode-dark[data-scheme="midnight"] #content .site-hero { --bg-body: #f9f9f8; --bg-nav: #eeeeec; --bg-card: #eeeeec; --bg-surface: #e4e4e0; --bg-hover: #d6d6d0; --bg-content: #f9f9f8; --border: #c9c2a9; --border-hi: #aa9c73; --divider: rgba(90,90,90,.2); --text-body: #1c1c1a; --text-muted: #545249; --text-dim: #66645e; --text-head: #0a0a09; --accent: #7f5f08; --accent-hi: #604806; --accent-dim: #604806; --gold: #7f5f08; --gold-hi: #604806; --gold-dim: #604806; --lsb-bg: #eeeeec; --lsb-border: #b5ad93; --lsb-brand: #866408; --hdr-bg: #eeeeec; --hdr-border: #866408; --on-accent: #ffffff; --on-gold: #ffffff; --tint: rgba(0,0,0,.04); --badge-canon-fg: #366f2a; --badge-canon-bg: rgba(74,154,58,.12); --badge-canon-border: #2a5a1a; --badge-custom-fg: #4a617e; --badge-custom-bg: rgba(74,85,128,.12); --badge-custom-border: #384868; --badge-real-fg: #2d6a66; --badge-real-bg: rgba(47,111,107,.12); --badge-real-border: #1f4f4c; --badge-lore-bg: rgba(134,100,8,.06); } } /* DESIGN-TOKENS:ENDE */ /* ================================================================ DESIGN-TOGGLES (Site Options → Design) Setzen Klassen auf via ASO_Render::ui_toggle_classes(); ohne aktives Plugin greifen einfach die Standardwerte oben/unten. ================================================================ */ /* Karten-Stil: Schatten an/aus */ html.ui-card-shadow .pillar, html.ui-card-shadow .aow-card, html.ui-card-shadow .home-block, html.ui-card-shadow .newsletter-bar, html.ui-card-shadow .chapter-card { box-shadow: 0 2px 12px rgba(0,0,0,.07); } html.ui-card-flat .pillar, html.ui-card-flat .aow-card, html.ui-card-flat .home-block, html.ui-card-flat .newsletter-bar, html.ui-card-flat .chapter-card { box-shadow: none; } /* Ecken: rund/eckig -- überschreibt einfach die Radius-Variablen, auf die schon jeder border-radius im Theme verweist. */ html.ui-corner-sharp { --radius-sm: 0px; --radius-md: 0px; } html.ui-corner-rounded { --radius-sm: 4px; --radius-md: 8px; } /* Trennlinien zwischen Sektionen */ html.ui-divider-none .section-head { border-bottom: none; } /* Hero-Bild-Abdunklung (steuert die Bild-Helligkeit, nicht die Vignette) */ html.ui-hero-light .hero-bg { filter: brightness(.45) saturate(1.2); } html.ui-hero-medium .hero-bg { filter: brightness(.3) saturate(1.2); } html.ui-hero-strong .hero-bg { filter: brightness(.18) saturate(1.2); } /* ================================================================ RESET & BASE ================================================================ */ *,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background: var(--bg-body); color: var(--text-body); font-family: var( --font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif ); font-size: 16px; line-height: 1.65; padding-left: var(--lsb-width, 260px); -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; height: auto; } a { color: var(--gold); text-decoration: none; transition: color .15s ease; } a:hover { color: var(--gold-hi); } :focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; } /* Platzhalter in Eingabefeldern (seit 3.37.1). Ohne eigene Regel nimmt der Browser sein Grau (#757575 in Chrome, dazu 54 % Deckkraft in Firefox) — gebaut für weiße Felder. Auf den Feldern von Mittel und Dunkel fiel es unter 4,5:1 (Suchseite live gemessen: 3,5:1 und 4,1:1). --text-dim ist gegen Grund, Karte, Fläche und Inhaltsfläche geprüft (tests/ test-kontraste.php) — nur --bg-hover trägt es nicht; opacity: 1 hebt den Abschlag von Firefox auf. Module setzen ihre Platzhalter nicht mit opacity herab — tests/test-farbliterale.php hält das fest. */ ::placeholder { color: var(--text-dim); opacity: 1; } /* ================================================================ CSS VARIABLES — LAYOUT ================================================================ */ :root { --lsb-width: 260px; --hdr-height: 62px; --content-max: 1140px; --radius-sm: 4px; --radius-md: 8px; --transition: .2s ease; } /* ================================================================ CSS VARIABLES — SCHRIFTEN (seit 3.7.0) ================================================================ WARUM ES SIE GIBT ----------------- Die drei Schriften standen bis 3.6.4 an rund fuenfundzwanzig Stellen dieser Datei ausgeschrieben -- und in fuenf Plugins noch einmal, jedes mit seinem eigenen Verstaendnis davon, wie die Seite aussieht. Der Chapter Generator setzte fuer ALLES seine Grundschrift, auch fuer Ueberschriften; die Seite nimmt dort Oswald beziehungsweise Cinzel. Genau daran war der Kasten als Fremdkoerper zu erkennen, obwohl seine Grundschrift stimmte. Farben macht dieses Theme seit jeher richtig (--bg-body, --accent, --gold). Schriften waren die Luecke. NICHT IM SCHEMA-BLOCK, und das ist Absicht: Die acht Farbschemata aendern Farben, nicht Schriften. Sie hier zu fuehren hiesse, sie achtmal zu pflegen -- dieselbe Verdopplung, die gerade beseitigt wird. FUER PLUGINS ------------ Jedes Modul konsumiert sie MIT RUECKFALL: font-family: var( --font-body, 'Inter', -apple-system, sans-serif ); Der Rueckfall ist der heutige Wert. Ohne Theme sieht damit alles aus wie vorher -- kein Modul setzt das Theme technisch voraus, und das ist die Hausregel und nicht Hoeflichkeit. DIE ROLLE STEHT IM NAMEN, NICHT DIE SCHRIFT. `--font-display` und nicht `--font-cinzel`: Wer die Schrift eines Tages austauscht, aendert eine Zeile und keine sechs Modulnamen. ================================================================ */ :root { /* Fliesstext, Bedienoberflaeche, Tabellen -- der Normalfall */ --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* Ueberschriften h1-h6, Markenname, Hero-Titel */ --font-heading: 'Oswald', 'Arial Narrow', sans-serif; /* Die grossen Momente: h1 und Zitat-Zuschreibungen (seit 3.6.3) */ --font-display: 'Cinzel', 'Oswald', 'Arial Narrow', serif; } /* ================================================================ TYPOGRAPHY ================================================================ */ h1, h2, h3, h4, h5, h6 { font-family: var( --font-heading, 'Oswald', 'Arial Narrow', sans-serif ); font-weight: 600; color: var(--text-head); letter-spacing: .02em; line-height: 1.2; text-transform: uppercase; } /* Design-Toggle "Überschriften-Stil" (Site Options → Design) */ html.ui-heading-normal h1, html.ui-heading-normal h2, html.ui-heading-normal h3, html.ui-heading-normal h4, html.ui-heading-normal h5, html.ui-heading-normal h6, html.ui-heading-normal .section-title, html.ui-heading-normal .pillar-name { text-transform: none; letter-spacing: 0; } /* * Cinzel nur fuer H1 (seit 3.6.3) -- Hero-Titel, Einzelseiten-/Story-/ * Chapter-Titel. Roemisch-inschriftliche Grossbuchstaben statt der * geraden Grotesk von Oswald, fuer die "edlen" grossen Momente. H2-H6 * bleiben bewusst bei Oswald: eine dritte Schrift durchgaengig einzusetzen * waere kein Akzent mehr, sondern ein Bruch. */ h1 { font-size: clamp(1.8rem, 4vw, 3rem); font-family: var( --font-display, 'Cinzel', 'Oswald', 'Arial Narrow', serif ); font-weight: 700; letter-spacing: .01em; } h2 { font-size: clamp(1.3rem, 2.5vw, 1.875rem); margin: 2rem 0 .875rem; } h3 { font-size: clamp(1.1rem, 2vw, 1.375rem); margin: 1.5rem 0 .625rem; } h4 { font-size: 1.1rem; color: var(--text-muted); } p { margin-bottom: .875rem; max-width: 70ch; } .entry-content h2 { color: var(--gold); border-bottom: 1px solid var(--border-hi); padding-bottom: .5rem; } .entry-content h3 { color: var(--accent-hi); text-transform: none; letter-spacing: .02em; } blockquote { border-left: 3px solid var(--accent); background: var(--bg-card); padding: 1rem 1.5rem; margin: 1.5rem 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--text-muted); font-style: italic; font-size: 1.05rem; } blockquote cite { display: block; margin-top: .5rem; font-style: normal; font-family: var( --font-display, 'Cinzel', 'Oswald', 'Arial Narrow', serif ); font-weight: 500; font-size: .8rem; color: var(--text-dim); letter-spacing: .06em; } blockquote cite::before { content: '— '; } code, kbd { font-family: var( --font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif ); font-size: .85em; background: var(--bg-surface); color: var(--gold-hi); padding: .15em .45em; border-radius: 3px; border: 1px solid var(--border); } pre { font-family: var( --font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif ); background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--accent-dim); padding: 1.25rem; overflow-x: auto; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: .875rem; color: var(--text-muted); margin-bottom: 1.25rem; } hr { border: none; border-top: 1px solid var(--border); margin: 2rem 0; } table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: .9rem; } thead th { font-family: var( --font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif ); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid var(--accent-dim); padding: .6rem 1rem; text-align: left; } tbody td { padding: .5rem 1rem; border-bottom: 1px solid var(--border); color: var(--text-muted); } tbody tr:hover td { background: var(--bg-surface); } /* ================================================================ SITE HEADER ================================================================ */ #site-header { position: sticky; top: 0; z-index: 500; height: var(--hdr-height); background: var(--hdr-bg); border-bottom: 2px solid var(--hdr-border); display: flex; align-items: center; padding: 0 1.5rem; gap: 1rem; /* Subtle top gradient for depth like warhammer-community */ background-image: linear-gradient(to bottom, rgba(255,255,255,.03) 0%, transparent 100%); } /* Logo / Brand */ .site-branding { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; text-decoration: none; } .site-branding img { width: 42px; height: 42px; border-radius: var(--radius-sm); border: 1px solid var(--border-hi); object-fit: cover; } .site-branding .brand-name { font-family: var( --font-heading, 'Oswald', 'Arial Narrow', sans-serif ); font-size: .875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); display: block; line-height: 1; } .site-branding .brand-tagline { font-family: var( --font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif ); font-size: .65rem; letter-spacing: .1em; color: var(--text-dim); text-transform: uppercase; display: block; margin-top: 3px; } /* Primary nav */ #primary-navigation { display: flex; align-items: center; gap: .125rem; flex-wrap: nowrap; } #primary-navigation ul { list-style: none; display: flex; align-items: center; gap: .125rem; margin: 0; padding: 0; } #primary-navigation ul li { position: relative; margin: 0; } #primary-navigation ul li > a { display: block; height: var(--hdr-height); line-height: var(--hdr-height); padding: 0 .75rem; font-family: var( --font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif ); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; transition: color var(--transition), background var(--transition); position: relative; } #primary-navigation ul li > a::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--accent); transform: scaleX(0); transition: transform var(--transition); } #primary-navigation ul li > a:hover, #primary-navigation ul li.current-menu-item > a { color: var(--gold); } #primary-navigation ul li > a:hover::after, #primary-navigation ul li.current-menu-item > a::after { transform: scaleX(1); } /* Dropdowns */ #primary-navigation ul li ul { position: absolute; top: 100%; left: 0; min-width: 200px; background: var(--bg-card); border: 1px solid var(--border-hi); border-top: 2px solid var(--accent); display: none; flex-direction: column; z-index: 200; box-shadow: 0 8px 24px rgba(0,0,0,.5); } #primary-navigation ul li:hover > ul, #primary-navigation ul li:focus-within > ul { display: flex; } #primary-navigation ul li ul li a { height: auto; line-height: 1.4; padding: .625rem 1rem; border-bottom: 1px solid var(--border); font-size: .7rem; } #primary-navigation ul li ul li:last-child a { border-bottom: none; } /* ── Header Actions ── */ .hdr-actions { display: flex; align-items: center; gap: .5rem; border-left: 1px solid var(--border); padding-left: .75rem; margin-left: auto; } /* Scheme Picker Dropdown */ .scheme-picker { position: relative; } .scheme-btn { display: flex; align-items: center; gap: .4rem; background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-muted); padding: .35rem .6rem; border-radius: var(--radius-sm); cursor: pointer; font-family: var( --font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif ); font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; transition: all var(--transition); white-space: nowrap; } .scheme-btn:hover { border-color: var(--accent); color: var(--gold); } .scheme-btn .scheme-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } .scheme-btn .scheme-arrow { font-size: .55rem; transition: transform var(--transition); } .scheme-picker.open .scheme-arrow { transform: rotate(180deg); } .scheme-dropdown { position: absolute; top: calc(100% + 6px); right: 0; width: 220px; background: var(--bg-card); border: 1px solid var(--border-hi); border-top: 2px solid var(--accent); box-shadow: 0 12px 32px rgba(0,0,0,.6); display: none; z-index: 600; border-radius: 0 0 var(--radius-sm) var(--radius-sm); } .scheme-picker.open .scheme-dropdown { display: block; } .scheme-dropdown-title { font-family: var( --font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif ); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); padding: .625rem 1rem .375rem; border-bottom: 1px solid var(--border); } /* Seit 3.37.0 zwei Gruppen: Erscheinungsbild (nur wenn im Backend für Besucher freigegeben) und Farbschema. Beide sind Radiogruppen; der Zustand steht in aria-checked, nicht in einer Klasse. Die Optionen tragen data-wahl statt data-scheme — sonst griffen die Schema- Selektoren für verschachtelte Container und färbten jede Zeile in ihrem eigenen Schema. */ .scheme-gruppe + .scheme-gruppe .scheme-dropdown-title { border-top: 1px solid var(--border); } .modus-optionen { display: flex; gap: .375rem; padding: .625rem 1rem .75rem; } .modus-option { flex: 1; font-family: var( --font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif ); font-size: .65rem; letter-spacing: .06em; text-transform: uppercase; padding: .45rem .25rem; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); cursor: pointer; transition: border-color var(--transition), color var(--transition); } .modus-option:hover { border-color: var(--gold); color: var(--gold); } .modus-option[aria-checked="true"] { background: var(--bg-hover); border-color: var(--accent); color: var(--text-head); } .scheme-option { display: flex; align-items: center; gap: .625rem; padding: .625rem 1rem; cursor: pointer; transition: background var(--transition); border-bottom: 1px solid var(--border); position: relative; } .scheme-option:last-child { border-bottom: none; } .scheme-option:hover { background: var(--bg-hover); } .scheme-option[aria-checked="true"] { background: var(--bg-surface); } .scheme-option[aria-checked="true"]::before { content: '✓'; position: absolute; right: 1rem; color: var(--gold); font-size: .75rem; font-family: sans-serif; } .modus-option:focus-visible, .scheme-option:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: -2px; } /* Der Punkt trägt data-scheme seines Schemas und zeigt damit dessen Akzent und Gold im aktuellen Erscheinungsbild — ohne Farbwert im Skript. */ .scheme-swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(0,0,0,.15); background: linear-gradient(135deg, var(--accent) 50%, var(--gold) 50%); flex-shrink: 0; } .scheme-label { font-family: var( --font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif ); font-size: .7rem; letter-spacing: .04em; color: var(--text-muted); } .scheme-option:hover .scheme-label, .scheme-option[aria-checked="true"] .scheme-label { color: var(--gold); } /* Beim Umschalten des Erscheinungsbilds kein Überblenden: Setzt das Skript diese Klasse für einen Bildaufbau, springen alle Farben zugleich. */ html.aow-ohne-uebergang *, html.aow-ohne-uebergang *::before, html.aow-ohne-uebergang *::after { transition: none !important; } /* Language Switcher */ .lang-switcher { display: flex; gap: 2px; } .lang-btn { font-size: 1rem; line-height: 1; padding: .3rem .4rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: transparent; cursor: pointer; transition: all var(--transition); filter: grayscale(.15); } .lang-btn:hover { border-color: var(--border-hi); filter: grayscale(0); } .lang-btn.active { background: var(--accent-dim); border-color: var(--accent); filter: grayscale(0); } /* Seit 3.39.0 (E21 Block 6) sind die Flaggen Links: gleiches Bild wie die Knoepfe. */ a.lang-btn { display: inline-block; color: inherit; text-decoration: none; } /* Keine Fassung in dieser Sprache (seit 3.40.0, E21 Block 8): Die Flagge bleibt sichtbar, fuehrt aber nirgends hin. */ .lang-btn[aria-disabled="true"] { display: inline-block; filter: grayscale(1); cursor: default; } /* Der Hinweis auf die andere Sprachfassung (seit 3.39.0, E21 Block 6): nur fuer Besucher, deren gespeicherte Wahl nicht die Sprache dieser Adresse ist. */ .lang-hinweis { display: flex; align-items: center; gap: .75rem; margin: 0 0 1rem; padding: .5rem .75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-surface); color: var(--text-muted); font-size: .875rem; } .lang-hinweis a { color: var(--accent); } .lang-hinweis button { margin-left: auto; border: 0; background: transparent; color: inherit; font-size: 1rem; line-height: 1; cursor: pointer; } /* Mobile hamburger */ .menu-toggle { display: none; background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-muted); font-size: 1.1rem; padding: .375rem .625rem; cursor: pointer; border-radius: var(--radius-sm); margin-left: auto; transition: all var(--transition); } .menu-toggle:hover { border-color: var(--accent); color: var(--gold); } /* ================================================================ LEFT SIDEBAR ================================================================ */ #sidebar-nav { position: fixed; top: 0; left: 0; bottom: 0; width: var(--lsb-width); background: var(--lsb-bg); border-right: 1px solid var(--lsb-border); z-index: 400; display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border-hi) transparent; } #sidebar-nav::-webkit-scrollbar { width: 3px; } #sidebar-nav::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 2px; } /* Sidebar brand */ .lsb-brand { display: flex; align-items: center; gap: .625rem; padding: 1rem .875rem .875rem; border-bottom: 1px solid var(--lsb-brand); text-decoration: none; flex-shrink: 0; } .lsb-brand img { width: 32px; height: 32px; border-radius: var(--radius-md); border: 2px solid var(--border-hi); object-fit: cover; } .lsb-brand-name { font-family: var( --font-heading, 'Oswald', 'Arial Narrow', sans-serif ); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); display: block; font-weight: 600; } .lsb-brand-tagline { font-family: var( --font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif ); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); display: block; margin-top: 3px; } /* Social-Media-Icons (gepflegt in Anvil Site Options -> Social Media) */ .lsb-social { display: flex; align-items: center; gap: .5rem; padding: .75rem .875rem; border-bottom: 1px solid var(--border); flex-shrink: 0; } /* --------------------------------------------------------------------------- DAS SUCHFELD DER SEITENLEISTE (Theme 3.17.0) Bis dahin war die Suche nur ueber ihren Menuepunkt erreichbar. Der Kasten nimmt die Masse der Sozial-Icons darueber auf: gleiche Hoehe, gleicher Rahmen, gleiche Rundung -- er soll wie ein Teil der Leiste aussehen und nicht wie ein eingesetztes Formular. --------------------------------------------------------------------------- */ .lsb-suche { display: flex; gap: .35rem; margin: 0 0 1rem; } .lsb-suche input[type="search"] { flex: 1 1 auto; min-width: 0; height: 30px; padding: 0 .5rem; font-family: inherit; font-size: .75rem; color: var(--text-body); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-sm, 4px); } .lsb-suche input[type="search"]::placeholder { color: var(--text-dim); } .lsb-suche input[type="search"]:focus-visible { outline: none; border-color: var(--border-hi); } .lsb-suche button { flex: 0 0 auto; width: 30px; height: 30px; line-height: 1; font-size: 1rem; cursor: pointer; color: var(--text-muted); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-sm, 4px); transition: color .15s, border-color .15s; } .lsb-suche button:hover, .lsb-suche button:focus-visible { color: var(--accent); border-color: var(--border-hi); } .lsb-social-icon { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-sm, 4px); color: var(--text-muted); background: var(--bg-surface); border: 1px solid var(--border); transition: color .15s, border-color .15s, background .15s; text-decoration: none; } .lsb-social-icon:hover, .lsb-social-icon:focus-visible { color: var(--gold); border-color: var(--gold); background: var(--bg-hover); } .mobile-nav-overlay .lsb-social { border-bottom: 0; padding: .5rem 1.25rem 0; } /* Sidebar groups */ .lsb-group { border-bottom: 1px solid var(--border); } .lsb-group-toggle { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .625rem .875rem; background: transparent; border: none; cursor: pointer; text-align: left; transition: background var(--transition); } .lsb-group-toggle:hover { background: var(--bg-hover); } .lsb-group-icon { font-size: .9rem; flex-shrink: 0; width: 16px; text-align: center; } .lsb-group-label { flex: 1; font-family: var( --font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif ); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); font-weight: 700; } .lsb-group-arrow { font-size: .55rem; color: var(--text-dim); transition: transform .25s ease; flex-shrink: 0; } .lsb-group.open > .lsb-group-toggle .lsb-group-arrow { transform: rotate(180deg); } /* --------------------------------------------------------------------------- GETEILTER GRUPPENKOPF (Theme 3.15.0) "Bibliothek" war ein reiner Aufklapp-Knopf; wer darauf klickte, bekam eine Liste, aber nicht die Bibliothek. Ein Element kann nicht beides -- deshalb steht der Name jetzt als LINK neben dem Pfeil-KNOPF. Grid und keine Verschachtelung: Die Regel eine Zeile weiter oben dreht den Pfeil über `.lsb-group.open > .lsb-group-toggle`, und ein Wrapper um Link und Knopf hätte genau diesen Kindselektor gebrochen. So bleiben beide direkte Kinder, und der Body spannt sich über beide Spalten. --------------------------------------------------------------------------- */ .lsb-group-geteilt { display: grid; grid-template-columns: 1fr auto; align-items: stretch; } .lsb-group-geteilt > .lsb-group-body { grid-column: 1 / -1; } /* Der Link trägt dieselbe Höhe und dasselbe Innenmaß wie der Knopf, damit die geteilte Zeile aussieht wie eine einzige. */ .lsb-group-hauptlink { display: flex; align-items: center; gap: .5rem; padding: .625rem .25rem .625rem .875rem; text-decoration: none; transition: background var(--transition); min-width: 0; } .lsb-group-hauptlink:hover { background: var(--bg-hover); } .lsb-group-hauptlink:hover .lsb-group-label { color: var(--gold); } .lsb-group-hauptlink[aria-current="page"] .lsb-group-label { color: var(--gold); } /* Der Pfeil-Knopf wird schmal -- die Fläche für den Namen gehört dem Link. Er bleibt aber breit genug, um mit dem Finger getroffen zu werden. */ .lsb-group-toggle-pfeil { width: auto; min-width: 2.5rem; justify-content: center; padding-left: .5rem; padding-right: .875rem; } .lsb-group-body { overflow: hidden; max-height: 0; transition: max-height .35s ease, padding .3s ease; padding: 0 .75rem; } .lsb-group.open > .lsb-group-body { max-height: 2000px; padding: .25rem .75rem .5rem; } /* Flacher Link-Block ohne Aufklapp-Gruppe (z. B. Ordens Galerie, Ordensgenerator, Namensgenerator, Schmiede) */ .lsb-flat-links { padding: .5rem .75rem; border-bottom: 1px solid var(--border); } /* Sidebar links */ .lsb-link { display: flex; align-items: center; gap: .5rem; padding: .375rem .5rem; border-radius: var(--radius-sm); font-family: var( --font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif ); font-size: .7rem; letter-spacing: .04em; color: var(--text-muted); text-decoration: none; margin-bottom: 2px; border: 1px solid transparent; transition: all var(--transition); } .lsb-link:hover { background: var(--bg-hover); border-color: var(--border); color: var(--text-head); } .lsb-link.current { background: var(--bg-surface); border-color: var(--border-hi); border-left: 2px solid var(--accent); color: var(--gold); } .lsb-link .lsb-ico { font-size: .85rem; flex-shrink: 0; width: 16px; text-align: center; } /* Sub-links */ .lsb-sub { display: block; padding: .25rem .5rem .25rem 2rem; font-family: var( --font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif ); font-size: .65rem; letter-spacing: .03em; color: var(--text-dim); text-decoration: none; border-radius: 3px; margin-bottom: 1px; transition: color var(--transition), background var(--transition); } .lsb-sub:hover { color: var(--text-muted); background: var(--tint); } .lsb-sub::before { content: '↳ '; opacity: .4; } /* ── Bibliothek (seit 27.08.2026) ───────────────────────────────────── Zeilen mit eigenem Symbol tragen KEINEN ↳-Pfeil: Das Symbol steht an genau der Stelle, an der sonst der Pfeil stünde, und beides nebeneinander ergibt eine doppelte Einrückungsmarke. */ .lsb-sub:has(.lsb-sub-icon)::before, .lsb-sub-head::before { content: none; } .lsb-sub-icon { display: inline-block; width: 1.05em; margin-right: .35em; opacity: .55; text-align: center; flex-shrink: 0; } /* Die Zeile „Romane“ ist eine Überschrift innerhalb der Gruppe, kein Link: Sie führt nirgendwohin, sondern benennt, was direkt darunter steht. */ .lsb-sub-head { display: flex; align-items: center; padding: .3rem .5rem .3rem 2rem; font-family: var( --font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif ); font-size: .65rem; letter-spacing: .06em; color: var(--text-muted); font-weight: 600; } /* Zweite Ebene: die einzelnen Romane unter ihrer Überschrift. */ .lsb-sub-2 { display: block; padding: .22rem .5rem .22rem 3.05rem; font-family: var( --font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif ); font-size: .65rem; letter-spacing: .03em; color: var(--text-dim); text-decoration: none; border-radius: 3px; margin-bottom: 1px; transition: color var(--transition), background var(--transition); } .lsb-sub-2:hover { color: var(--text-muted); background: var(--tint); } .lsb-sub-2[aria-current="page"] { color: var(--gold); } /* Die Stückzahl rechts. tabular-nums, damit die Ziffern untereinander stehen und die Spalte nicht bei jeder Zahl leicht springt. Ohne opacity seit 3.37.1: --text-dim ist schon die leiseste geprüfte Stufe (4,5:1 auf --lsb-bg); die zusätzlichen 75 % drückten die Zahl in jedem Erscheinungsbild darunter (Hell 3,1:1, Dunkel 3,4–3,6:1). */ .lsb-count { margin-left: auto; padding-left: .5rem; font-size: .6rem; color: var(--text-dim); font-variant-numeric: tabular-nums; } .lsb-sub:has(.lsb-count) { display: flex; align-items: center; } /* Chapter accordion groups */ .lsb-chapter { margin-bottom: 2px; } .lsb-chapter-toggle { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .375rem .5rem; background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; font-family: var( --font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif ); font-size: .7rem; letter-spacing: .04em; color: var(--text-muted); transition: all var(--transition); text-align: left; } .lsb-chapter-toggle:hover { background: var(--bg-hover); border-color: var(--border); color: var(--text-head); } .lsb-chapter-toggle.open { background: var(--bg-surface); border-color: var(--border-hi); border-left: 2px solid var(--accent); color: var(--gold); } .lsb-chapter-toggle .ch-ico { font-size: .95rem; flex-shrink: 0; } .lsb-chapter-toggle .ch-arrow { margin-left: auto; font-size: .55rem; color: var(--text-dim); transition: transform .25s ease; } .lsb-chapter-toggle.open .ch-arrow { transform: rotate(180deg); } .lsb-chapter-body { overflow: hidden; max-height: 0; transition: max-height .3s ease; } .lsb-chapter-body.open { max-height: 600px; } /* Sidebar footer */ .lsb-footer { margin-top: auto; padding: .75rem; border-top: 1px solid var(--border); } .lsb-ki-note { font-family: var( --font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif ); font-size: .58rem; letter-spacing: .03em; color: var(--text-dim); line-height: 1.5; margin-top: .375rem; } /* ================================================================ PAGE LAYOUT ================================================================ */ #page { display: flex; flex-direction: column; min-height: 100vh; } #content { flex: 1; width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 2rem 1.5rem 4rem; background: var(--bg-content); } .content-with-sidebar { display: grid; grid-template-columns: 1fr 280px; gap: 2.5rem; align-items: start; } /* Ohne rechte Spalte eine Spalte -- sonst bliebe die 280px breite Luecke stehen, obwohl dort nichts mehr steht (seit 3.3.4, siehe single-anvil_chapter.php). */ .content-with-sidebar--allein { grid-template-columns: 1fr; } .content-main { min-width: 0; } /* ================================================================ START-BANNER — großformatiges, optional verlinktes Bild, das den Text-Hero ersetzt, sobald in Site Options → Startseite ein Bild hinterlegt ist (siehe front-page.php). Bewusst schlicht: das Bild selbst transportiert die Botschaft, kein Text-Overlay nötig. ================================================================ */ .site-banner { width: 100%; line-height: 0; /* verhindert Sub-Pixel-Lücke unter dem Bild */ } .site-banner-link { display: block; cursor: pointer; } .site-banner-img { display: block; width: 100%; height: auto; max-height: 72vh; object-fit: cover; } @media (hover: hover) { .site-banner-link:hover .site-banner-img { filter: brightness(.94); } } /* ================================================================ HERO — Warhammer Community Style ================================================================ */ /* EIGENER GRUND SEIT 3.37.1 (Befund beim Kontrastlauf am 18.09.2026) Der Hero ist eine Insel: In Hell und Mittel bekommt er den Dunkel-Satz seines Schemas, alle Schriften darin sind für dunklen Grund gebaut. Den Grund selbst malte aber nur die Vignette (.hero-bg::after) — und ohne eingestelltes Hero-Foto liegt sie über dem, was darunter ist. Im Hellmodus ist das die weiße Seite: Der Schleier hat rechts eine Untergrenze von 52 %, das ergibt Mittelgrau, und der Kicker „ADEPTUS ADMINISTRATUM · SEGMENTUM STRATEGICUS" stand dort bei rund 3:1 (vor 3.37.0: 2,6:1; gerechnet aus der am 18.09.2026 live abgelesenen Vignette). var(--bg-body) ist hier das --bg-body der Insel, also in jedem Erscheinungsbild dunkel; im Druck greift der helle Satz und damit Weiß. Ein eingestelltes Foto liegt darüber (.hero-bg) und ändert nichts. tests/test-kontraste.php hält die Deklaration fest. */ .site-hero { position: relative; overflow: hidden; min-height: 72vh; display: flex; align-items: flex-end; padding: 4rem 2.5rem 3rem; background-color: var(--bg-body); } /* Das Bild selbst kommt nur aus einer Einstellung: Site Options → Startseite („home_hero_image") oder, ohne Site Options, der Customizer („aow_hero_bg"). aow_customizer_css() setzt es dann als background-image mit !important. Bis 3.33.0 stand hier zusätzlich ein Verweis auf images/hero-bg.jpg — eine Datei, die es im Theme nie gab (seit dem ersten Upload, f112668e). Ohne Einstellung fragte die Startseite sie bei jedem Laden ab und bekam einen 404; sichtbar war dort schon immer nur die Vignette. Position, Größe und Wiederholung bleiben, damit ein eingestelltes Bild genauso sitzt wie bisher. */ .hero-bg { position: absolute; inset: 0; background: center / cover no-repeat; filter: brightness(.3) saturate(1.2); z-index: 0; } /* Warhammer Community's characteristic diagonal vignette. SEIT 3.3.6 MIT EINER UNTERGRENZE (Befund 30.07.2026) ---------------------------------------------------- Vorher liefen beide Verläufe nach `transparent` aus — links dunkel, rechts das blanke Hintergrundfoto. Das Foto ist aber in der Mitte und rechts oben nahezu weiß, auch nach `brightness(.3)`. Sämtliche Schriften im Kopfbereich sind für DUNKLEN Grund gestaltet (`--text-muted` ist dort #b08878, `--text-body` #e8d8c8): „ADEPTUS ADMINISTRATUM · SEGMENTUM STRATEGICUS" und „LORE · COLOUR · CANON" standen rechts praktisch auf Weiß und waren kaum zu lesen; mobil verschwand „CANON" fast ganz. Die dritte Ebene ist deshalb ein durchgehender schwarzer Schleier, der NICHT auf transparent ausläuft — er garantiert eine dunkle Untergrenze, ganz gleich, welches Bild dort liegt. Die beiden schemagetönten Verläufe darüber behalten den Bildaufbau bei. Bewusst rgba(0,0,0,…) statt einer Schema-Variablen: Eine Untergrenze, die sich je Schema ändert, ist keine. */ .hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, var(--bg-body) 0%, transparent 55%), linear-gradient(to right, var(--bg-body) 0%, transparent 45%), linear-gradient(to right, rgba(0,0,0,.72) 0%, rgba(0,0,0,.62) 60%, rgba(0,0,0,.52) 100%); } /* Red accent bar across top — signature WH Community element */ .hero-top-bar { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(to right, var(--accent), var(--gold), var(--accent)); z-index: 2; } .hero-content { position: relative; z-index: 2; max-width: 680px; } .hero-eyebrow { font-family: var( --font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif ); font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; /* --accent-hi statt --accent (seit 3.3.6): Innerhalb von .site-hero setzt jedes Schema einen eigenen, HELLEREN Akzentton für den dunklen Grund (z. B. #e8541e statt #c63218). --accent ist der Ton für die helle Seite und stand hier auf Dunkel — „ADEPTUS ADMINISTRATUM · SEGMENTUM STRATEGICUS" war dadurch kaum zu lesen. Die passende Farbe war die ganze Zeit da, sie wurde nur nicht benutzt. */ color: var(--accent-hi); margin-bottom: .75rem; display: flex; align-items: center; gap: .5rem; } .hero-eyebrow::before { content: ''; display: block; width: 2rem; height: 1px; background: var(--accent); } .hero-title { font-family: var( --font-heading, 'Oswald', 'Arial Narrow', sans-serif ); font-size: clamp(2.5rem, 6vw, 4.5rem); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); line-height: 1; margin-bottom: .5rem; text-shadow: 0 2px 20px rgba(0,0,0,.8); } .hero-subtitle { font-family: var( --font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif ); font-size: .8rem; letter-spacing: .15em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 1rem; } .hero-tagline { font-family: var( --font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif ); font-size: 1.2rem; font-style: italic; color: var(--text-body); max-width: 50ch; line-height: 1.6; margin-bottom: 2rem; } .hero-ctas { display: flex; gap: .875rem; flex-wrap: wrap; } /* ================================================================ BUTTONS ================================================================ */ .btn { display: inline-flex; align-items: center; gap: .4rem; font-family: var( --font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif ); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; padding: .625rem 1.25rem; border: 1px solid; cursor: pointer; text-decoration: none; border-radius: var(--radius-sm); transition: all var(--transition); white-space: nowrap; } .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .btn-primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); color: var(--on-accent); } .btn-secondary { background: var(--bg-surface); border-color: var(--border-hi); color: var(--text-body); } .btn-secondary:hover { border-color: var(--gold); color: var(--gold); background: var(--bg-hover); } .btn-gold { background: var(--gold); border-color: var(--gold); color: var(--on-gold); } .btn-gold:hover { background: var(--gold-hi); border-color: var(--gold-hi); color: var(--on-gold); } .btn-ghost { background: transparent; border-color: transparent; color: var(--text-muted); padding-left: 0; } .btn-ghost:hover { color: var(--gold); } .btn-ghost::after { content: ' →'; } /* ================================================================ CARD SYSTEM — Warhammer Community Style ================================================================ */ /* Generic content card */ .aow-card { position: relative; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; transition: border-color var(--transition), transform var(--transition); } .aow-card:hover { border-color: var(--border-hi); transform: translateY(-2px); } /* * Die abgeschnittene Ecke (seit 3.6.3) -- ein wiederkehrendes, schnelles * Detail, das an eine genietete Panzerplatte erinnert, statt eines * generischen abgerundeten Rechtecks. Rein dekorativ (::after), beruehrt * weder Layout noch Klickflaeche. `overflow: hidden` am Elternelement * schneidet die Spitze am gerundeten Rand sauber ab. */ .aow-card::after { content: ''; position: absolute; top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 22px 22px 0; border-color: transparent var(--gold) transparent transparent; opacity: .5; pointer-events: none; transition: opacity var(--transition); } .aow-card:hover::after { opacity: .85; } .aow-card-img { aspect-ratio: 16/9; overflow: hidden; } .aow-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .aow-card:hover .aow-card-img img { transform: scale(1.04); } .aow-card-body { padding: 1.25rem 1.25rem 1rem; } .aow-card-eyebrow { font-family: var( --font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif ); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: .375rem; } .aow-card-title { font-family: var( --font-heading, 'Oswald', 'Arial Narrow', sans-serif ); font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-head); margin-bottom: .5rem; line-height: 1.3; } .aow-card-title a { color: inherit; } .aow-card-title a:hover { color: var(--gold); } .aow-card-excerpt { font-size: .875rem; color: var(--text-muted); line-height: 1.6; margin-bottom: .875rem; } .aow-card-footer { display: flex; justify-content: space-between; align-items: center; padding-top: .75rem; border-top: 1px solid var(--border); } .aow-card-meta { font-family: var( --font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif ); font-size: .6rem; letter-spacing: .06em; color: var(--text-dim); } /* Post Grid */ .post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; margin-top: 1.5rem; } /* ================================================================ CHAPTER CARD — Horizontal layout ================================================================ */ .chapter-card { position: relative; display: grid; grid-template-columns: 180px 1fr; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 1.25rem; transition: border-color var(--transition), transform var(--transition); text-decoration: none; } .chapter-card:hover { border-color: var(--border-hi); transform: translateY(-2px); } /* Coloured top-edge per chapter — WH Community style */ .chapter-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; } /* Dieselbe abgeschnittene Ecke wie bei .aow-card (seit 3.6.3), fuer ein konsistentes Wiedererkennungsmerkmal ueber alle Karten-Typen hinweg. */ .chapter-card::after { content: ''; position: absolute; top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 22px 22px 0; border-color: transparent var(--gold) transparent transparent; opacity: .5; pointer-events: none; transition: opacity var(--transition); } .chapter-card:hover::after { opacity: .85; } .chapter-heraldry { background: var(--bg-surface); display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--border); padding: 1.5rem; font-size: 3rem; min-height: 160px; } .chapter-body { padding: 1.25rem 1.25rem 1rem; } .chapter-designation { font-family: var( --font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif ); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: .25rem; } .chapter-name { font-family: var( --font-heading, 'Oswald', 'Arial Narrow', sans-serif ); font-size: 1.25rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); margin-bottom: .25rem; } .chapter-name-en { font-family: var( --font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif ); font-size: .875rem; font-style: italic; color: var(--text-dim); margin-bottom: .75rem; } .chapter-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .375rem .75rem; margin-bottom: .75rem; } .chapter-meta-item { display: flex; flex-direction: column; } .chapter-meta-label { font-family: var( --font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif ); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); } .chapter-meta-value { font-size: .875rem; color: var(--text-muted); } .chapter-battle-cry { font-style: italic; color: var(--text-muted); border-left: 2px solid var(--accent-dim); padding-left: .625rem; font-size: .9rem; margin-bottom: .75rem; } .chapter-ctas { display: flex; gap: .5rem; margin-top: .5rem; } /* ================================================================ THREE PILLARS ================================================================ */ .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; margin: 2rem 0; } .pillar { background: var(--bg-card); padding: 1.75rem 1.5rem; position: relative; transition: background var(--transition); } .pillar:hover { background: var(--bg-surface); } .pillar-accent { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); } .pillar-num { font-family: var( --font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif ); font-size: .6rem; letter-spacing: .15em; text-transform: uppercase; color: var(--accent); margin-bottom: .625rem; } .pillar-icon { font-size: 1.75rem; margin-bottom: .75rem; } .pillar-name { font-family: var( --font-heading, 'Oswald', 'Arial Narrow', sans-serif ); font-size: 1.05rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); margin-bottom: .875rem; border-bottom: 1px solid var(--border); padding-bottom: .75rem; } .pillar-desc { font-size: .875rem; color: var(--text-muted); line-height: 1.65; margin-bottom: 1rem; } /* ================================================================ HOME BLOCKS — Namensgenerator + frei konfigurierbare Extra-Blöcke ================================================================ */ .home-block-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; margin: 1.5rem 0; } /* --------------------------------------------------------------------------- NEU IM ARCHIV (Theme 3.26.0, W1/I7) Das einzige Raster der Seite, in dem ZWEI Kartensorten nebeneinander stehen: die Werkkarten der Bibliothek (.ast-list-card) und die Kacheln der Dossiers (.ads-karten-kachel). Beide bringen Rahmen, Bild und Schrift selbst mit -- hier stehen nur Spalten und Abstand. 220 px wie .ast-list-grid, nicht 280 px wie .home-block-grid: Dort sind es Textblöcke, hier Karten, und die Bibliothek zeigt dieselben Karten in derselben Breite. Zwei Raster für dieselbe Karte sähen nach zwei Seiten aus. align-items: start -- ohne das zieht die Grid-Vorgabe `stretch` jede Karte auf die Höhe der höchsten ihrer Reihe, und eine Dossierkachel ohne Bild stünde als leeres Feld neben einer Werkkarte mit Bild. --------------------------------------------------------------------------- */ .home-neu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: start; gap: 1.25rem; margin: 1.5rem 0 0; } .home-block { background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: var(--radius-md); padding: 1.75rem; display: flex; flex-direction: column; gap: .75rem; } .home-block-heading { font-size: 1.05rem; margin: 0; } .home-block-text { font-size: .875rem; color: var(--text-muted); line-height: 1.65; margin: 0; flex-grow: 1; } /* ================================================================ HOME KACHELN — "Wichtigste Funktionen" (Theme 3.30.0) Bis 3.36.0 ein fest dunkler Abschnitt mit eigenen Farbwerten, unab- hängig vom Farbschema — die übrige Seite war hell. Seit 3.37.0 folgt er Erscheinungsbild und Schema wie alles andere (Entscheidung vom 16.09.2026). Dabei aufgefallen: Die Kicker-Zeile las var(--gold) aus der hellen Palette und stand auf dem dunklen Band bei 3,3:1. .home-kachel spiegelt die Gold-Eckabschnitt-Optik der .aow-card. ================================================================ */ .home-kacheln-band { background: radial-gradient(120% 140% at 50% -10%, var(--bg-surface), var(--bg-body) 55%); padding: 3.5rem 1.5rem 3rem; } .home-kacheln-inner { max-width: var(--content-max); margin: 0 auto; } .home-kacheln-banner { margin: 0 0 2rem; aspect-ratio: 21/6; max-height: 320px; overflow: hidden; border-radius: var(--radius-md); } .home-kacheln-banner img { display: block; width: 100%; height: 100%; object-fit: cover; } .home-kacheln-eyebrow { font-family: var( --font-heading, 'Oswald', 'Arial Narrow', sans-serif ); text-transform: uppercase; letter-spacing: .16em; font-size: .75rem; color: var(--text-muted); text-align: center; margin: 0 0 .6rem; } .home-kacheln-heading { font-family: var( --font-display, 'Cinzel', 'Oswald', 'Arial Narrow', serif ); text-align: center; color: var(--text-head); font-size: clamp(1.5rem, 4vw, 2.3rem); letter-spacing: .03em; margin: 0 0 .7rem; } .home-kacheln-lede { text-align: center; color: var(--text-muted); max-width: 65ch; margin: 0 auto 2.4rem; font-size: .95rem; line-height: 1.6; } .home-kacheln-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.4rem; } .home-kachel { position: relative; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; transition: transform var(--transition), border-color var(--transition); } .home-kachel::after { content: ''; position: absolute; top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 22px 22px 0; border-color: transparent var(--gold) transparent transparent; opacity: .5; pointer-events: none; transition: opacity var(--transition); } .home-kachel:hover { transform: translateY(-2px); border-color: var(--gold); } .home-kachel:hover::after { opacity: .85; } .home-kachel-cover { position: absolute; inset: 0; z-index: 1; } .home-kachel-cover:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; } .home-kachel-art { aspect-ratio: 16/9; overflow: hidden; background: var(--bg-body); } .home-kachel-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } .home-kachel:hover .home-kachel-art img { transform: scale(1.04); } .home-kachel-body { padding: 1.25rem 1.25rem 1.1rem; position: relative; } .home-kachel-kicker { font-family: var( --font-heading, 'Oswald', 'Arial Narrow', sans-serif ); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); } .home-kachel-title { font-family: var( --font-heading, 'Oswald', 'Arial Narrow', sans-serif ); text-transform: uppercase; letter-spacing: .02em; font-size: 1.05rem; color: var(--text-head); margin: .35rem 0 .45rem; } .home-kachel-text { font-size: .85rem; color: var(--text-muted); margin: 0; line-height: 1.5; } @media (prefers-reduced-motion: reduce) { .home-kachel, .home-kachel-art img, .home-kachel::after { transition: none; } } /* ================================================================ HOME FOOTER GRID — frei konfigurierbare Spalten am Ende der Startseite ================================================================ */ .home-footer-grid { margin-top: 3rem; padding: 1.5rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.5rem; } .home-footer-col-heading { font-size: .8rem; color: var(--gold); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .5rem; } .home-footer-col-text { font-size: .8rem; color: var(--text-muted); line-height: 1.6; margin: 0; } .home-footer-col-link { display: inline-block; margin-top: .5rem; font-size: .75rem; color: var(--gold); text-decoration: underline; } .home-footer-col-link:hover { color: var(--gold-hi); } /* ================================================================ SECTION HEADERS — Warhammer Community style ================================================================ */ .section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1.25rem; padding-bottom: .75rem; border-bottom: 1px solid var(--border); } .section-eyebrow { font-family: var( --font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif ); font-size: .6rem; letter-spacing: .15em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: .25rem; } .section-title { font-family: var( --font-heading, 'Oswald', 'Arial Narrow', sans-serif ); font-size: 1.1rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-head); } /* ================================================================ BADGES / TAGS ================================================================ */ .badge { display: inline-flex; align-items: center; gap: .3rem; font-family: var( --font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif ); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; padding: 2px .5rem; border-radius: var(--radius-sm); border: 1px solid; } .badge-canon { color: var(--badge-canon-fg); border-color: var(--badge-canon-border); background: var(--badge-canon-bg); } .badge-lore { color: var(--gold); border-color: var(--gold-dim); background: var(--badge-lore-bg); } .badge-custom { color: var(--badge-custom-fg); border-color: var(--badge-custom-border); background: var(--badge-custom-bg); } .badge-ki { color: var(--text-dim); border-color: var(--border); background: var(--bg-surface); } /* Realwelt-Fachbegriff: die DRITTE Herkunft eines Glossareintrags. Das Schema kennt sie seit Glossary & Register 0.35.0, das Frontend zeigte bis Theme 3.23.0 nur zwei — „the graduation tower", das Rieselwerk zur Salzgewinnung, für das der Wert eingeführt wurde, trug live die Plakette „GW-Kanon". Eigener Ton, nicht das Gold von .badge-lore: zwei goldene Plaketten mit verschiedener Bedeutung wären keine Unterscheidung. */ .badge-real { color: var(--badge-real-fg); border-color: var(--badge-real-border); background: var(--badge-real-bg); } /* Ohne Modifier (z. B. Codex-Klassifikation/Ausrichtung): derselbe neutrale Ton wie .badge-ki, aber ohne dessen KI-spezifische Bedeutung. */ .badge:not([class*="badge-"]) { color: var(--text-dim); border-color: var(--border); background: var(--bg-surface); } .tag { display: inline-block; font-family: var( --font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif ); font-size: .62rem; padding: 2px 8px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 99px; color: var(--text-dim); } /* ================================================================ DATASHEET SIDEBAR (Chapter pages) ================================================================ */ .datasheet { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 1.5rem; position: sticky; top: calc(var(--hdr-height) + 1.5rem); } .datasheet-header { background: var(--bg-surface); padding: 1.25rem; border-bottom: 1px solid var(--border); text-align: center; position: relative; } .datasheet-header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(to right, var(--accent), var(--gold)); } .datasheet-chapter-name { font-family: var( --font-heading, 'Oswald', 'Arial Narrow', sans-serif ); font-size: .9rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin: .5rem 0 .25rem; } .datasheet-designation { font-family: var( --font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif ); font-size: .6rem; letter-spacing: .08em; color: var(--text-dim); } .datasheet-image { width: 100%; aspect-ratio: 1; object-fit: cover; filter: brightness(.7) contrast(1.1); } .datasheet-body { padding: .25rem 0; } .datasheet-row { display: grid; grid-template-columns: 110px 1fr; border-bottom: 1px solid var(--border); padding: .4rem 1rem; } .datasheet-row:last-child { border-bottom: none; } .datasheet-label { font-family: var( --font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif ); font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); align-self: center; } .datasheet-value { font-size: .875rem; color: var(--text-muted); align-self: center; } /* ================================================================ BREADCRUMB ================================================================ */ .breadcrumb { display: flex; align-items: center; gap: .375rem; flex-wrap: wrap; font-family: var( --font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif ); font-size: .65rem; letter-spacing: .06em; color: var(--text-dim); margin-bottom: 1.5rem; } .breadcrumb a { color: var(--text-dim); } .breadcrumb a:hover { color: var(--text-muted); } .breadcrumb .sep { color: var(--accent-dim); } .breadcrumb .crumb-current { color: var(--text-muted); } /* ================================================================ ENTRY CONTENT (Posts / Articles) ================================================================ */ /* ── Rotierendes Seitenbanner (seit 3.44.0) ──────────────────────── * Steht zwischen Brotkrumen und Überschrift, gebaut wie das Band über * den Startseiten-Kacheln — nur in 8:3 statt 21:6. * * max-height zusammen mit object-fit: cover ist Absicht: Auf breiten * Bildschirmen wäre ein volles 8:3 über 700 px hoch und schöbe die * Überschrift aus dem Bild. Der Beschnitt greift dann oben und unten, * weshalb die Bildprompts das Motiv in die mittleren drei Viertel legen. */ .aow-seitenbanner { margin: 0 0 2rem; } .aow-seitenbanner-bild { display: block; width: 100%; height: auto; aspect-ratio: 8/3; max-height: 420px; object-fit: cover; border-radius: var(--radius-md); } /* Das Signet ist ein Zeichen, kein Bild: nie beschneiden (contain). */ .aow-seitenbanner-signet { display: block; width: 72px; height: 72px; object-fit: contain; margin: 1.25rem 0 0; } @media (max-width: 640px) { .aow-seitenbanner-bild { max-height: 240px; } .aow-seitenbanner-signet { width: 56px; height: 56px; } } /* ── Fehlerseite mit Bild (seit 3.44.0) ─────────────────────────── * Nur wirksam, wenn 404.php ein Bild gefunden hat; ohne Ordner steht * im Markup weder das img noch der Schleier, und .aow-404 ist eine * leere Klasse auf der alten Flex-Box. */ .aow-404 { position: relative; overflow: hidden; } .aow-404-bild { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; } /* Dichte Mitte, offene Ränder — umgekehrt zur Wartungsseite, deren Text * einen eigenen Hof mitbringt. Hier liegt die Schrift direkt auf dem Bild * und braucht den Schleier genau dort, wo sie steht. * * var(--bg-body) statt Schwarz: In Hell hellt derselbe Verlauf auf, in * Dunkel dunkelt er ab. Ein fester Schwarzschleier hätte die dunkle * Schrift des hellen Erscheinungsbilds unlesbar gemacht. */ .aow-404-schleier { position: absolute; inset: 0; z-index: 1; background: radial-gradient( ellipse 72% 64% at 50% 50%, color-mix( in srgb, var(--bg-body) 90%, transparent ) 0%, color-mix( in srgb, var(--bg-body) 66%, transparent ) 56%, color-mix( in srgb, var(--bg-body) 42%, transparent ) 100% ); } .aow-404-inhalt { position: relative; z-index: 2; } .entry-header { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); } .entry-meta-top { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .875rem; font-family: var( --font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif ); font-size: .65rem; letter-spacing: .06em; color: var(--text-dim); } .entry-cat-link { color: var(--accent); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .entry-title { margin-bottom: .5rem; color: var(--gold); } .entry-subtitle { font-family: var( --font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif ); font-size: .7rem; letter-spacing: .08em; color: var(--text-dim); margin-bottom: .875rem; } .entry-content { font-size: 1.0625rem; line-height: 1.8; } .entry-content p { margin-bottom: 1rem; } /* Drop cap for lore articles */ .has-drop-cap .entry-content > p:first-of-type::first-letter { font-family: var( --font-heading, 'Oswald', 'Arial Narrow', sans-serif ); font-size: 4.5em; float: left; line-height: .75; margin: .05em .1em 0 0; color: var(--accent); } /* ================================================================ CODEX DOSSIER FRONTEND (Welten, Legionen, Nachfolgeorden, Referenz) ================================================================ */ /* Platzhaltersymbol auf Farbflaeche statt des grauen Hammers -- Codex- Eintraege setzen nie ein WordPress-Titelbild, sondern ihr eigenes 'cover_image'-Feld, deshalb griff has_post_thumbnail() hier nie. */ .anvilcodex-card-img, .anvilcodex-card-symbol { display: flex; align-items: center; justify-content: center; } .anvilcodex-card-symbol { width: 100%; height: 100%; font-size: 2.25rem; color: var(--accent); } .anvilcodex-single-symbol { display: flex; align-items: center; justify-content: center; height: 160px; margin-bottom: 2rem; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg-surface); font-size: 4rem; color: var(--accent); } .anvilcodex-card-badges { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .875rem; } .anvilcodex-dossier { margin-bottom: 1.5rem; } .anvilcodex-dossier-abschnitt { margin: 2rem 0 1rem; color: var(--gold); } .anvilcodex-feld { margin-bottom: 1.25rem; } .anvilcodex-feld-label { font-family: var( --font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif ); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); margin-bottom: .25rem; } .anvilcodex-feld p, .anvilcodex-feld div { font-size: 1rem; line-height: 1.7; margin: 0; } .anvilcodex-feld ul { margin: 0; padding-left: 1.25rem; line-height: 1.7; } /* Bisher ungestylt -- AnvilCodex_Infobox existierte, hatte aber bis AP2 des Umbau-Briefings keinen einzigen Aufrufer im Frontend. */ .anvilcodex-infobox { display: block; padding: 1rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-surface); } .anvilcodex-infobox-art { display: block; font-family: var( --font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif ); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: .25rem; } .anvilcodex-infobox-titel { margin: 0 0 .5rem; font-size: 1.1rem; } .anvilcodex-infobox-titel a { color: var(--gold); } .anvilcodex-infobox-felder { margin: 0; } .anvilcodex-infobox-felder dt { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); margin-top: .5rem; } .anvilcodex-infobox-felder dd { margin: 0; font-size: .9375rem; } /* ================================================================ GLOSSAR & PERSONENREGISTER (AP3.1/3.2) ================================================================ */ /* Die Hülle trägt data-lang; die Leiste darin bleibt dadurch ein Flex-Container. Ohne sie gewönne die data-lang-Regel (`display: revert`) gegen `display: flex` und die Leiste bräche in eine Spalte um — genau der Fehler, den Theme 3.14.0 an anderer Stelle behoben hat. */ .agl-az-huelle { margin-bottom: 2rem; } .agl-az-sprung { display: flex; flex-wrap: wrap; gap: .35rem; font-family: var( --font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif ); } .agl-az-sprung a { display: inline-flex; align-items: center; justify-content: center; min-width: 1.75rem; height: 1.75rem; padding: 0 .4rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: .75rem; font-weight: 700; color: var(--accent); } .agl-az-sprung a:hover { background: var(--bg-surface); } /* Ein Buchstabe ohne Treffer wird nicht entfernt, sondern stumpf: Die Leiste soll beim Filtern nicht springen, aber auch nirgends hinführen, wo nichts ist. */ .agl-az-sprung a.agl-leer { opacity: .3; pointer-events: none; } /* ---- Die Liste selbst ------------------------------------------------- Ein Flex-Container, weil die sichtbare Reihenfolge der Sprache folgt: jede Zeile und jede Überschrift trägt ihre Position in beiden Sortierungen als --o-de/--o-en, und `order` wählt aus. Das spart die zweite, vollständige Liste im Dokument (die Seite liegt bereits bei 640 KB). Im DOM steht die DEUTSCHE Reihenfolge — Vorlesewerkzeuge folgen dem Dokument, und die Hauptsprache soll dort richtig stehen. */ .agl-glossar-liste { display: flex; flex-direction: column; } .agl-glossar-liste > * { order: var(--o-de, 0); } html[lang="en"] .agl-glossar-liste > * { order: var(--o-en, 0); } .agl-az-buchstabe { color: var(--gold); border-bottom: 1px solid var(--border); padding-bottom: .35rem; margin: 2rem 0 1rem; scroll-margin-top: 5rem; } .agl-glossar-liste > .agl-az-buchstabe.agl-leer { display: none; } .agl-glossar-zeile, .agl-person-zeile { padding: .875rem 0; border-bottom: 1px solid var(--border); } .agl-glossar-zeile:last-child, .agl-person-zeile:last-child { border-bottom: none; } .agl-glossar-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } /* Die Überschrift muss sich die freie Breite nehmen dürfen. Ohne diese Zeile schrumpft sie auf ihre max-content-Breite — und die ist bei einem umbrechenden Flex-Container (dem darin) die Breite des BREITESTEN Kindes, nicht die Summe. Gemessen: das Lemmapaar stand dann grundsätzlich auf zwei Zeilen, obwohl daneben Platz war. */ .agl-glossar-kopf > .agl-glossar-lemma { flex: 1 1 auto; min-width: 0; } .agl-glossar-feld { flex: none; font-family: 'Share Tech Mono', ui-monospace, monospace; font-size: .65rem; letter-spacing: .06em; color: var(--text-dim); background: var(--bg-surface); padding: .1rem .45rem; border-radius: var(--radius-sm); white-space: nowrap; } .agl-glossar-lemma, .agl-person-name { margin: 0 0 .25rem; font-size: 1.0625rem; } .agl-glossar-lemma a, .agl-person-name a { color: var(--text-body, inherit); } .agl-glossar-lemma a:hover, .agl-person-name a:hover { color: var(--gold); } .agl-pfeil { color: var(--accent); } /* Die führende Form steht voll da, die Form der anderen Sprache daneben — sichtbar, aber erkennbar zweitrangig. Welche das ist, entscheidet die Sprache, nicht das Markup: Beide Formen stehen GENAU EINMAL im Dokument (siehe AGL_Frontend::lemma_paar()), `order` dreht sie um, und der Trenner ist ein ::after statt eines Elements. Das doppelt gerenderte Lemma war der größte Einzelposten der Seitengröße. */ .agl-glossar-lemma a, h1.agl-glossar-lemma { display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: .1em; } .agl-lemma { order: 2; color: var(--text-dim); font-size: .9em; font-weight: 400; } html[lang="de"] .agl-lemma-de, html[lang="en"] .agl-lemma-en { order: 1; color: inherit; font-size: inherit; font-weight: inherit; } /* Der Trenner hängt an der FÜHRENDEN Form und entfällt damit von selbst, wenn es nur eine gibt. */ html[lang="de"] .agl-lemma-de:not(:only-child)::after, html[lang="en"] .agl-lemma-en:not(:only-child)::after { content: "·"; color: var(--accent); padding: 0 .35em; } /* ---- Suchfeld ---------------------------------------------------------- */ .agl-suche { position: relative; margin-bottom: 1.25rem; } .agl-suche-feld { width: 100%; font-family: var( --font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif ); font-size: .9375rem; padding: .7rem .9rem .7rem 2.4rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text-body); } .agl-suche-feld:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } .agl-suche-symbol { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--text-dim); pointer-events: none; font-size: 1.1rem; } /* ---- Themenkacheln (erste Filterebene) --------------------------------- */ .agl-kacheln { display: grid; grid-template-columns: repeat( auto-fill, minmax( 13rem, 1fr ) ); gap: .5rem; margin-bottom: 1.25rem; } .agl-kachel { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; text-align: left; padding: .6rem .75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text-body); cursor: pointer; font-family: var( --font-heading, 'Oswald', 'Arial Narrow', sans-serif ); font-size: .8125rem; letter-spacing: .02em; } .agl-kachel:hover { background: var(--bg-hover); } .agl-kachel:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .agl-kachel.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .agl-kachel-anzahl { flex: none; font-family: 'Share Tech Mono', ui-monospace, monospace; font-size: .7rem; opacity: .7; font-variant-numeric: tabular-nums; } /* Die zweite Ebene erscheint erst nach der Wahl eines Themenfeldes. `[hidden]` braucht hier eine ausdrückliche Regel: `.btn` setzt `display: inline-flex`, und eine Klassenregel überstimmt das User-Agent-Stylesheet — ohne diese Zeile blieben die ausgeblendeten Chips sichtbar (bekanntes Muster, siehe .ast-download-modal). */ .agl-sektionsebene[hidden], .anvilcodex-filterleiste .btn[hidden], .agl-kachel[hidden] { display: none !important; } /* Für Beschriftungen, die nur Vorlesewerkzeuge brauchen. */ .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect( 0, 0, 0, 0 ); white-space: nowrap; border: 0; } .agl-glossar-kurz, .agl-person-kurz, .agl-person-auftritte { margin: 0; font-size: .875rem; color: var(--text-muted); } .agl-auftritte { margin: 0; padding-left: 1.25rem; line-height: 1.8; } .agl-auftritt-rolle { color: var(--text-dim); font-size: .85em; } /* ================================================================ PAGINATION ================================================================ */ .pagination { display: flex; justify-content: center; align-items: center; gap: .25rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); } .pagination a, .pagination span { font-family: var( --font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif ); font-size: .65rem; letter-spacing: .06em; padding: .375rem .75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); transition: all var(--transition); } .pagination a:hover { border-color: var(--accent); color: var(--gold); } .pagination .current { border-color: var(--accent); color: var(--gold); background: var(--bg-surface); } /* ================================================================ SITE FOOTER ================================================================ */ #colophon { background: var(--lsb-bg); border-top: 1px solid var(--hdr-border); padding: 2.5rem 1.5rem 1.5rem; } .footer-inner { max-width: var(--content-max); margin: 0 auto; } /* ================================================================ NEWSLETTER BAR (Footer, sitewide, immer sichtbar) ================================================================ */ .newsletter-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.5rem 1.75rem; margin-bottom: 2rem; background: var(--lsb-bg); border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: var(--radius-md); } .newsletter-bar-copy { display: flex; align-items: flex-start; gap: .875rem; min-width: 240px; } .newsletter-bar-icon { font-size: 1.4rem; color: var(--gold); line-height: 1; margin-top: .1rem; } .newsletter-bar-heading { font-family: var( --font-heading, 'Oswald', 'Arial Narrow', sans-serif ); font-size: 1rem; letter-spacing: .06em; color: var(--text-head); margin-bottom: .25rem; } .newsletter-bar-text { font-size: .8rem; color: var(--text-muted); margin: 0; max-width: 40ch; } .newsletter-bar-form { flex-shrink: 0; } .newsletter-bar-form form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } .newsletter-bar-form input[type="email"], .newsletter-bar-form input[type="text"] { background: var(--bg-surface); border: 1px solid var(--border-hi); color: var(--text-body); padding: .55rem .875rem; border-radius: var(--radius-sm); font-family: var( --font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif ); font-size: .9rem; min-width: 220px; } .newsletter-bar-form input[type="submit"], .newsletter-bar-form button[type="submit"] { background: var(--accent); border: 1px solid var(--accent); color: var(--on-accent); padding: .55rem 1.25rem; border-radius: var(--radius-sm); font-family: var( --font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif ); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: all var(--transition); } .newsletter-bar-form input[type="submit"]:hover, .newsletter-bar-form button[type="submit"]:hover { background: var(--accent-hi); border-color: var(--accent-hi); } .newsletter-bar-notice { border-left-color: var(--accent); background: var(--bg-card); } .newsletter-bar-notice p { font-family: var( --font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif ); font-size: .7rem; color: var(--text-muted); margin: 0; } @media (max-width: 600px) { .newsletter-bar { flex-direction: column; align-items: flex-start; } .newsletter-bar-form input[type="email"] { min-width: 0; width: 100%; } } /* NEWSLETTER-PLUGIN: DIE FARBEN FOLGEN DEM ERSCHEINUNGSBILD (seit 3.37.2) Das Plugin bringt ein eigenes Stylesheet (newsletter/style.css) mit festen Farben — Feld #f4f4f4 mit #444, Knopf #444 mit Weiß. Es lädt nach dem Theme, und seine Regeln (.tnp-subscription input[type="email"], …) sind genauso spezifisch wie die unter .newsletter-bar-form oben: Die Farben des Themes griffen dort nie. Im Hellmodus fiel das kaum auf; im Dunkelmodus stand ein fast weißes Feld im Fuß jeder Seite und auf /newsletter/ (gefunden beim Kontrastlauf am 18.09.2026). Hier nur die Farben, mit `html` davor eine Stufe spezifischer als das Plugin; Maße und Schrift bleiben, wie sie sind. Der Platzhalter kommt aus ::placeholder oben (--text-dim, gegen --bg-surface geprüft). */ html .tnp-subscription input[type="email"], html .tnp-subscription input[type="text"], html .tnp-subscription textarea { background-color: var(--bg-surface); border-color: var(--border-hi); color: var(--text-body); } html .tnp-subscription input[type="submit"], html .tnp-subscription input.tnp-submit, html .tnp-subscription button[type="submit"] { background-color: var(--accent); border-color: var(--accent); color: var(--on-accent); } html .tnp-subscription input[type="submit"]:hover, html .tnp-subscription input.tnp-submit:hover, html .tnp-subscription button[type="submit"]:hover { background-color: var(--accent-hi); border-color: var(--accent-hi); } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--border); margin-bottom: 1.5rem; } .footer-brand-name { font-family: var( --font-heading, 'Oswald', 'Arial Narrow', sans-serif ); font-size: 1rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: .375rem; } .footer-brand-tagline { font-family: var( --font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif ); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: .875rem; } .footer-brand-desc { font-size: .875rem; color: var(--text-dim); line-height: 1.6; max-width: 36ch; margin-bottom: .75rem; } .footer-col-title { font-family: var( --font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif ); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: .75rem; padding-bottom: .375rem; border-bottom: 1px solid var(--border); } .footer-nav { list-style: none; } .footer-nav li { margin-bottom: .375rem; } .footer-nav li a { font-size: .875rem; color: var(--text-dim); transition: color var(--transition); } .footer-nav li a:hover { color: var(--text-muted); } .footer-bottom { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; } .footer-legal { font-family: var( --font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif ); font-size: .6rem; letter-spacing: .04em; color: var(--text-dim); line-height: 1.8; } .footer-legal a { color: var(--text-dim); } .footer-legal a:hover { color: var(--text-muted); } .footer-gw { font-family: var( --font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif ); font-size: .6rem; color: var(--text-dim); max-width: 44ch; text-align: right; line-height: 1.6; } /* ================================================================ MOBILE NAV OVERLAY ================================================================ */ .mobile-nav-overlay { display: none; position: fixed; inset: 0; background: var(--lsb-bg); z-index: 800; flex-direction: column; padding: 1.25rem; overflow-y: auto; } .mobile-nav-overlay.open { display: flex; } .mob-nav-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 1rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; } .mob-nav-brand { font-family: var( --font-heading, 'Oswald', 'Arial Narrow', sans-serif ); font-size: .875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); } .mob-nav-close { background: none; border: 1px solid var(--border); color: var(--text-muted); font-size: 1.25rem; line-height: 1; padding: .3rem .6rem; cursor: pointer; border-radius: var(--radius-sm); transition: all var(--transition); } .mob-nav-close:hover { border-color: var(--accent); color: var(--gold); } .mob-nav-links { list-style: none; margin: 0; padding: 0; } .mob-nav-links li { border-bottom: 1px solid var(--border); } .mob-nav-links li a { display: block; padding: .875rem 0; font-family: var( --font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif ); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); transition: color var(--transition); } .mob-nav-links li a:hover { color: var(--gold); } .mob-nav-footer { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); display: flex; gap: .5rem; flex-wrap: wrap; } /* ================================================================ SIDEBAR TOGGLE (Mobile) ================================================================ */ .lsb-mob-toggle { display: none; position: fixed; top: .875rem; left: .875rem; z-index: 600; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-muted); font-size: 1.1rem; padding: .375rem .625rem; cursor: pointer; border-radius: var(--radius-sm); transition: all var(--transition); } .lsb-mob-toggle:hover { border-color: var(--accent); color: var(--gold); } /* ================================================================ RESPONSIVE ================================================================ */ @media (max-width: 1100px) { #content { padding: 1.5rem 1.25rem 3rem; } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { .content-with-sidebar { grid-template-columns: 1fr; } .datasheet { position: static; } .pillars { grid-template-columns: 1fr; } .chapter-card { grid-template-columns: 1fr; } .chapter-heraldry { min-height: 100px; padding: 1rem; } } @media (max-width: 768px) { body { padding-left: 0; } #sidebar-nav { transform: translateX(-100%); transition: transform .3s ease; } #sidebar-nav.mob-open { transform: translateX(0); box-shadow: 4px 0 24px rgba(0,0,0,.6); } .lsb-mob-toggle { display: block; } #primary-navigation { display: none; } .menu-toggle { display: block; } .hdr-actions { gap: .25rem; } .scheme-btn span:not(.scheme-dot):not(.scheme-arrow) { display: none; } #site-header { padding: 0 .875rem 0 3.5rem; } .footer-grid { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; } .footer-gw { text-align: left; } .post-grid { grid-template-columns: 1fr; } .hero-title { font-size: 2rem; } .site-hero { min-height: 55vh; padding: 2rem 1.25rem 2rem; } .site-banner-img { max-height: 45vh; } #content { padding: 1.25rem 1rem 2.5rem; } } @media (max-width: 480px) { .hero-ctas { flex-direction: column; } .chapter-meta-grid { grid-template-columns: 1fr; } } /* ================================================================ UTILITY ================================================================ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -100%; left: 0; background: var(--accent); color: var(--on-accent); padding: .5rem 1rem; font-family: var( --font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif ); font-size: .75rem; z-index: 9999; } .skip-link:focus { top: 0; } /* i18n */ [data-lang] { display: none; } /* REVERT UND NICHT INLINE (Theme 3.14.0). Hier stand `display: inline`, und das war eine Aussage ueber ALLE Elemente mit data-lang -- auch ueber die, die Bloecke sind. Ein
wurde damit zu einem Inline-Kasten: max-width wirkungslos, padding halb, die Box so breit wie ihr Elternteil. Genau so stand das Kapitel-Epigraph auf der Seite. Darunter wurde das fuer p, div, li und h1-h3 einzeln wieder eingefangen -- eine handgefuehrte Liste, in der blockquote fehlte und in der das naechste Blockelement genauso fehlen wuerde. `revert` beantwortet die Frage stattdessen richtig: Es nimmt die Anzeigeart, die das Element ohne Autorregel haette. Ein bleibt inline, ein

wird block, ein

wird block. Die Regel muss dafuer gar nicht wissen, welche Elemente es gibt. Die Sonderregeln darunter bleiben stehen: Sie sind jetzt redundant, aber sie schaden nicht, und die .lsb-social-icon-Zeile darueber wird weiterhin gebraucht -- `revert` faende dort `inline` vor, nicht das gewuenschte `flex`, denn es geht auf den Browserstil zurueck und nicht auf eine andere Autorregel. */ html[lang="de"] [data-lang="de"], html[lang="en"] [data-lang="en"] { display: revert; } /* --------------------------------------------------------------------------- NUR IN EINER SPRACHE VORHANDEN (Theme 3.13.0) Nicht dasselbe wie data-lang, und der Unterschied ist wichtig genug fuer ein eigenes Attribut: data-lang sagt "dieser Text gehoert zu dieser Sprache" und setzt display:inline. Hier geht es um ganze Bausteine -- eine Werk-Kachel, ein Band -- die es in der anderen Sprache GAR NICHT gibt. Sie sind Bloecke oder Flex-Kinder; sie mit data-lang zu versehen hiesse, ihnen display:inline aufzuzwingen und die Regel oben fuer alle paar hundert data-lang-Stellen im Projekt aufzuweichen. Anlass: In der englischen Bibliothek standen die drei unuebersetzten Romane mit deutschem Titel -- weil AST_Render::bi() bei fehlendem Englisch auf Deutsch zurueckfaellt. Fuer eine einzelne fehlende Zeile ist dieser Rueckfall richtig; fuer ein ganzes Werk ist er eine falsche Auskunft, und wer darauf klickt, landet in einem deutschen Text. Die display:none-Regel steht ohne Gegenstueck da: Ein Element mit data-nur-de ist in der deutschen Ansicht ganz normal sichtbar, es braucht dort keine eigene Regel. Nur das Verstecken ist die Ausnahme. --------------------------------------------------------------------------- */ html[lang="en"] [data-nur-de] { display: none !important; } html[lang="de"] [data-nur-en] { display: none !important; } /* Der RSS-Link (seit Theme 3.3.0) traegt data-lang, weil ein nur EIN Ziel haben kann und es zwei Feeds gibt. Die allgemeine i18n-Regel wuerde ihn auf display:inline setzen und damit aus der Flex-Ausrichtung seiner Nachbar-Icons kippen -- 30x30 zentriert wird zu einem Inline-Kasten in Textgroesse. Deshalb hier die passende Anzeigeart nachziehen. */ html[lang="de"] .lsb-social-icon[data-lang="de"], html[lang="en"] .lsb-social-icon[data-lang="en"] { display: flex; } p[data-lang],div[data-lang],li[data-lang],h1[data-lang],h2[data-lang],h3[data-lang] { display: none; } html[lang="de"] p[data-lang="de"], html[lang="de"] div[data-lang="de"], html[lang="de"] li[data-lang="de"], html[lang="de"] h1[data-lang="de"], html[lang="de"] h2[data-lang="de"], html[lang="de"] h3[data-lang="de"], html[lang="en"] p[data-lang="en"], html[lang="en"] div[data-lang="en"], html[lang="en"] li[data-lang="en"], html[lang="en"] h1[data-lang="en"], html[lang="en"] h2[data-lang="en"], html[lang="en"] h3[data-lang="en"] { display: revert; } @media print { #sidebar-nav, #site-header, .hero-ctas, .chapter-ctas { display: none; } body { padding: 0; color: #000; background: #fff; } } /* --------------------------------------------------------------------------- LANGE WERKE: SPRUNGLEISTE, KAPITELANKER, LESEPOSITION (Theme 3.17.0) Ein Roman mit 76 Kapiteln steht auf einer Seite. Das Inhaltsverzeichnis oben ist nach dem dritten Kapitel unerreichbar -- deshalb ein Knopf, der mitfaehrt. Er sitzt unten rechts und nicht oben: Oben klebt bereits der Kopfbereich, und zwei schwebende Dinge am selben Rand verdecken einander. --------------------------------------------------------------------------- */ .aow-sprung-knopf { position: fixed; right: 1rem; bottom: 1rem; z-index: 60; padding: .5rem .9rem; font-family: inherit; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; color: var(--text-body); background: var(--bg-surface); border: 1px solid var(--border-hi); border-radius: var(--radius-sm, 4px); box-shadow: 0 2px 10px rgba(0,0,0,.18); } .aow-sprung-knopf:hover, .aow-sprung-knopf:focus-visible { color: var(--accent); } .aow-sprung-panel { position: fixed; right: 1rem; bottom: 3.4rem; z-index: 60; width: min(22rem, calc(100vw - 2rem)); max-height: min(60vh, 30rem); overflow-y: auto; padding: .75rem; background: var(--bg-surface); border: 1px solid var(--border-hi); border-radius: var(--radius-sm, 4px); box-shadow: 0 4px 18px rgba(0,0,0,.22); } /* Ohne diese Zeile gewinnt die Klassenregel gegen das hidden-Attribut -- dasselbe Paar wie bei .ast-download-modal, siehe dortige Begruendung. */ .aow-sprung-panel[hidden] { display: none; } .aow-sprung-panel ol { margin: 0; padding-left: 1.4rem; } .aow-sprung-panel li { margin: .15rem 0; } .aow-sprung-panel a { font-size: .8rem; color: var(--text-muted); text-decoration: none; } .aow-sprung-panel a:hover, .aow-sprung-panel a:focus-visible { color: var(--accent); } .aow-sprung-panel a.aktiv { color: var(--accent); font-weight: 600; } /* Der Kapitelanker. Zurueckhaltend, bis die Ueberschrift beruehrt wird -- ein Raute-Zeichen neben jeder von 76 Ueberschriften waere Unruhe. */ .ast-kapitel-anker { margin-left: .4rem; font-size: .7em; color: var(--text-dim); text-decoration: none; opacity: 0; transition: opacity .15s; } h2:hover > .ast-kapitel-anker, .ast-kapitel-anker:focus-visible { opacity: 1; } .aow-weiterlesen { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 61; display: flex; align-items: center; gap: .6rem; max-width: calc(100vw - 2rem); padding: .5rem .75rem; font-size: .8rem; color: var(--text-body); background: var(--bg-surface); border: 1px solid var(--border-hi); border-radius: var(--radius-sm, 4px); box-shadow: 0 4px 18px rgba(0,0,0,.22); } .aow-weiterlesen span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aow-weiterlesen button { flex: 0 0 auto; padding: .25rem .6rem; font-family: inherit; font-size: .75rem; cursor: pointer; color: var(--text-body); background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm, 4px); } .aow-weiterlesen button:hover, .aow-weiterlesen button:focus-visible { color: var(--accent); border-color: var(--border-hi); } .aow-weiterlesen-weg { border-color: transparent !important; font-size: 1rem !important; } /* Auf schmalen Geraeten sitzt die Leiste ueber dem Sprungknopf statt neben ihm -- nebeneinander passen beide nicht, und der Knopf gewinnt. */ @media (max-width: 600px) { .aow-weiterlesen { bottom: 3.6rem; left: 1rem; right: 1rem; transform: none; } } @media print { .aow-sprung-knopf, .aow-sprung-panel, .aow-weiterlesen, .ast-kapitel-anker { display: none; } }