/* ============================================================ THEMES — BlackMagic DSA Charakterverwaltung Anwendung: Lädt NACH allen anderen CSS-Dateien (themes.css ist letzter Link). html[data-theme] gibt höchste Spezifität für sichere Overrides. ============================================================ */ /* ════════════════════════════════════════════════════════════ AGROOSH — Zwergen-Feuer-und-Schmiedegottheit Basalt, glühende Erzadern, Esse und Hammer. ════════════════════════════════════════════════════════════ */ html[data-theme="agroosh"] { --parchment: #1e1208; --parchment-dark: #150d05; --ink: #f0c880; --ink-light: #c89850; --blood: #c04010; --gold: #e07020; --gold-light: #f09030; --bronze: #8a4820; --forest: #5a2808; --forest-light: #8a3818; --stone: #7a5a40; --stone-light: #9a7858; --shadow: rgba(20,8,0,0.72); --glow: rgba(220,100,20,0.42); --tab-active: #c04010; --input-bg: #352a21; /* 10 % Weiß + 90 % #1e1208 */ --input-bg-focus: #40362d; /* 15 % Weiß + 85 % #1e1208 */ } html[data-theme="agroosh"] body { background-color: #150d05 !important; background-image: radial-gradient(ellipse at 50% 120%, rgba(192,64,16,0.55) 0%, rgba(120,30,5,0.25) 40%, transparent 70%), radial-gradient(ellipse at 15% 90%, rgba(224,112,32,0.30) 0%, transparent 45%), radial-gradient(ellipse at 85% 95%, rgba(192,64,16,0.25) 0%, transparent 40%), url('/img/themes/agroosh-stone.svg') !important; background-size: auto, auto, auto, 80px 52px !important; } html[data-theme="agroosh"] .char-sidebar { background: linear-gradient(180deg, #261508 0%, #180e05 60%, #0e0803 100%) !important; border-right-color: rgba(192,64,16,0.55) !important; } html[data-theme="agroosh"] .app-header { background: linear-gradient(90deg, #120a04, #1f1008, #120a04) !important; border-bottom-color: #c04010 !important; box-shadow: 0 4px 28px rgba(192,64,16,0.40) !important; } html[data-theme="agroosh"] .char-main { background: #1e1208 !important; } /*html[data-theme="agroosh"] .info-field input, .info-field select, .info-field textarea { background: #150d05 !important; } */ /* ════════════════════════════════════════════════════════════ WUNDÄRTZTIN — Heilerin, Knochenrichterin & Kräuterkundige Kräftiges Kräutergrün, warmes Leinenweiß, sonnige Hütte. Akzente: Blutrot (Wundversorgung), warmes Goldgelb (Sonnenlicht), tiefes Waldgrün (Kraut & Medizin). ════════════════════════════════════════════════════════════ */ html[data-theme="wundaertztin"] { /* Hintergründe — helles, sonniges Pergament mit Grünstich */ --parchment: #e8f2d8; /* Hauptfläche: helles Kräuterleinen */ --parchment-dark: #c8ddb0; /* Sidebar, tiefere Flächen */ /* Schrift — fast Schwarz, kräftig lesbar */ --ink: #0e1c08; /* Primärtext: sattes Dunkelgrün-Fast-Schwarz */ --ink-light: #2a4818; /* Sekundärtext: tiefes Waldgrün */ /* Akzentfarben */ --blood: #c02828; /* Blutrot — Wunden, kritische Elemente */ --gold: #c88c18; /* Sonnengold — Highlights, aktive Elemente */ --gold-light: #e8aa28; /* Helles Gold — Hover, Glow */ --bronze: #7a5c1e; /* Bronzebraun — Kräutermörser, Holz */ /* Grün-Töne — kräftiger als zuvor */ --forest: #1c5c18; /* Tiefes Waldgrün — Sidebar, schwere Elemente */ --forest-light: #2e8828; /* Mittleres Kräutergrün — Buttons, Borders */ /* Neutrale Töne */ --stone: #5a7848; /* Moos-Graugrün */ --stone-light: #7a9c60; /* Helles Moos */ /* Schatten & Glow */ --shadow: rgba(14,28,8,0.40); /* Kräftiger grüner Schatten */ --glow: rgba(200,140,24,0.35); /* Warmer Sonnengold-Schein */ /* UI-spezifisch */ --tab-active: #c02828; /* Aktiver Tab: Blutrot */ --input-bg: #d8ecc4; /* Etwas dunkler als parchment, gut sichtbar */ --input-bg-focus: #c8e0b0; /* Fokus: noch kräftiger, klar unterscheidbar */ } /* ── Body: sonnige Hütte mit Kräutermuster ── */ html[data-theme="wundaertztin"] body { background-color: #d0e8b8 !important; background-image: /* Sonnenlicht von oben links — warm, golden */ radial-gradient(ellipse at 8% 6%, rgba(255,215,80,0.38) 0%, rgba(200,160,30,0.15) 35%, transparent 65%), /* Sekundäres Sonnenlicht etwas versetzt */ radial-gradient(ellipse at 25% 18%, rgba(240,200,60,0.18) 0%, transparent 45%), /* Kräuter-Grün-Tiefe unten rechts */ radial-gradient(ellipse at 92% 95%, rgba(28,92,24,0.30) 0%, transparent 55%), /* Sanftes Grün mittig */ radial-gradient(ellipse at 50% 50%, rgba(46,136,40,0.08) 0%, transparent 70%), /* SVG-Kachelmuster: Äskulapstab + Kräuter */ url('/img/themes/wundaertztin-herbs.svg') !important; background-size: auto, auto, auto, auto, 200px 200px !important; } /* ── Tab-Content: gleiche Atmosphäre wie Body ── */ html[data-theme="wundaertztin"] .tab-content { background-image: radial-gradient(ellipse at 8% 6%, rgba(255,215,80,0.28) 0%, transparent 60%), radial-gradient(ellipse at 92% 95%, rgba(28,92,24,0.22) 0%, transparent 55%), url('/img/themes/wundaertztin-healer.svg') !important; background-size: auto, auto, 200px 200px !important; } /* ── Sidebar: tiefes Waldgrün, fast wie dicker Kräutersud ── */ html[data-theme="wundaertztin"] .char-sidebar { background: linear-gradient( 180deg, #1a4c14 0%, #123a0e 55%, #0c2a08 100% ) !important; border-right-color: rgba(192,40,40,0.60) !important; /* Blutroter Rand — Heiler-Zeichen */ } /* ── App-Header: dunkles Waldgrün mit goldenem Sonnenstrich ── */ html[data-theme="wundaertztin"] .app-header { background: linear-gradient( 90deg, #122a0c, #1e4418, #2a5820, /* Goldgrüner Hochpunkt in der Mitte */ #1e4418, #122a0c ) !important; border-bottom-color: #c88c18 !important; /* Sonnengold */ box-shadow: 0 4px 24px rgba(14,44,8,0.50), 0 1px 0 rgba(200,140,24,0.40) !important; /* Gold-Glow */ } /* ── Hauptbereich: helles Kräuterleinen ── */ html[data-theme="wundaertztin"] .char-main { background: #e8f2d8 !important; } /* ── Optionale Blutrot-Highlights für kritische UI-Elemente ── (Wunden verbinden, Knochenbrüche richten → rote Akzente) Falls weitere Selektoren benötigt werden, hier ergänzen: */ /* Beispiel: Aktive Tabs bekommen blutrot + gold-Glow */ html[data-theme="wundaertztin"] .tab.active, html[data-theme="wundaertztin"] .tab-btn.active { color: #c02828 !important; border-color: #c02828 !important; text-shadow: 0 0 8px rgba(192,40,40,0.45) !important; } /* ════════════════════════════════════════════════════════════ FERNHÄNDLERIN — Händlerin der Seidenstraße Pflaumenlila, Safrangelb, orientalische Rautenmuster. ════════════════════════════════════════════════════════════ */ html[data-theme="fernhaendlerin"] { --parchment: #241828; --parchment-dark: #180f1c; --ink: #f0d8f8; --ink-light: #c8a8e0; --blood: #9030a0; --gold: #d4a030; --gold-light: #f0c048; --bronze: #7a4898; --forest: #4a2060; --forest-light: #6a3088; --stone: #8a6098; --stone-light: #a888b8; --shadow: rgba(20,10,28,0.68); --glow: rgba(212,160,48,0.38); --tab-active: #9030a0; --input-bg: #3a2f3e; /* 10 % Weiß + 90 % #241828 */ --input-bg-focus: #453b48; /* 15 % Weiß + 85 % #241828 */ } html[data-theme="fernhaendlerin"] body { background-color: #180f1c !important; background-image: radial-gradient(ellipse at 20% 20%, rgba(144,48,160,0.28) 0%, transparent 55%), radial-gradient(ellipse at 80% 80%, rgba(212,160,48,0.20) 0%, transparent 50%), url('/img/themes/fernhaendlerin-geo.svg') !important; background-size: auto, auto, 80px 80px !important; } html[data-theme="fernhaendlerin"] .char-sidebar { background: linear-gradient(180deg, #201228 0%, #160c1e 60%, #0e0814 100%) !important; border-right-color: rgba(144,48,160,0.55) !important; } html[data-theme="fernhaendlerin"] .app-header { background: linear-gradient(90deg, #130920, #201230, #130920) !important; border-bottom-color: #d4a030 !important; box-shadow: 0 4px 24px rgba(144,48,160,0.35) !important; } html[data-theme="fernhaendlerin"] .char-main { background: #241828 !important; } /* ════════════════════════════════════════════════════════════ ELFENKRIEGERIN — Mondlicht & Stahl Mitternachtsblau, Silber, Sternenhimmel, Mondsichel. ════════════════════════════════════════════════════════════ */ html[data-theme="elfenkriegerin"] { --parchment: #0c1828; --parchment-dark: #060f1c; --ink: #d8e8f8; --ink-light: #a8c0e0; --blood: #3070b8; --gold: #b8d0e8; --gold-light: #daeeff; --bronze: #4870a8; --forest: #183858; --forest-light: #285880; --stone: #5070a0; --stone-light: #7890c0; --shadow: rgba(4,10,22,0.72); --glow: rgba(180,215,255,0.22); --tab-active: #3070b8; --input-bg: #242f3e; /* 10 % Weiß + 90 % #0c1828 */ --input-bg-focus: #303b48; /* 15 % Weiß + 85 % #0c1828 */ } html[data-theme="elfenkriegerin"] body { background-color: #060f1c !important; background-image: radial-gradient(ellipse at 70% 10%, rgba(184,208,232,0.18) 0%, transparent 50%), radial-gradient(ellipse at 30% 85%, rgba(48,112,184,0.14) 0%, transparent 45%), url('/img/themes/elfenkriegerin-stars.svg') !important; background-size: auto, auto, 240px 240px !important; } html[data-theme="elfenkriegerin"] .tab-content{ background-image: radial-gradient(ellipse at 70% 10%, rgba(184,208,232,0.18) 0%, transparent 50%), radial-gradient(ellipse at 30% 85%, rgba(48,112,184,0.14) 0%, transparent 45%), url('/img/themes/elfenkriegerin-stars.svg') !important; background-size: auto, auto, 240px 240px !important; } html[data-theme="elfenkriegerin"] .char-sidebar { background: linear-gradient(180deg, #0e1e38 0%, #081428 60%, #040c1c 100%) !important; border-right-color: rgba(48,112,184,0.50) !important; } html[data-theme="elfenkriegerin"] .app-header { background: linear-gradient(90deg, #060f1e, #0e1c30, #060f1e) !important; border-bottom-color: #b8d0e8 !important; box-shadow: 0 4px 24px rgba(48,112,184,0.30) !important; } html[data-theme="elfenkriegerin"] .char-main { background: #0c1828 !important; } /* ════════════════════════════════════════════════════════════ JÄGER — Waldläufer & Spurenleser Laubwald-Grün, Waldboden-Erde, Moos und feuchter Humus. ════════════════════════════════════════════════════════════ */ html[data-theme="jaeger"] { --parchment: #0e1a0a; --parchment-dark: #091205; --ink: #d8ecc8; --ink-light: #a8c890; --blood: #4a8c28; --gold: #7ab840; --gold-light: #9ad858; --bronze: #6b5a32; --forest: #1e4210; --forest-light: #2e6018; --stone: #7a6848; --stone-light: #9a8868; --shadow: rgba(6,12,2,0.70); --glow: rgba(90,160,40,0.38); --tab-active: #3a7a18; --input-bg: #1e2d18; /* 10 % Weiß + 90 % #0e1a0a */ --input-bg-focus: #283820; /* 15 % Weiß + 85 % #0e1a0a */ } html[data-theme="jaeger"] body { background-color: #091205 !important; background-image: radial-gradient(ellipse at 20% 0%, rgba(58,122,24,0.28) 0%, transparent 55%), radial-gradient(ellipse at 80% 100%, rgba(107,90,50,0.22) 0%, transparent 45%), radial-gradient(ellipse at 50% 60%, rgba(30,66,16,0.18) 0%, transparent 50%), url('/img/themes/jaeger-wood.svg') !important; background-size: auto, auto, auto, 240px 120px !important; } html[data-theme="jaeger"] .tab-content{ background-image: radial-gradient(ellipse at 20% 0%, rgba(58,122,24,0.28) 0%, transparent 55%), radial-gradient(ellipse at 80% 100%, rgba(107,90,50,0.22) 0%, transparent 45%), radial-gradient(ellipse at 50% 60%, rgba(30,66,16,0.18) 0%, transparent 50%), url('/img/themes/wundaertztin-herbs.svg') !important; background-size: auto, auto, auto, 240px 120px !important; } html[data-theme="jaeger"] .char-sidebar { background: linear-gradient(180deg, #142010 0%, #0c1809 60%, #070e05 100%) !important; border-right-color: rgba(58,122,24,0.55) !important; } html[data-theme="jaeger"] .app-header { background: linear-gradient(90deg, #0a1508, #121e0c, #0a1508) !important; border-bottom-color: #7ab840 !important; box-shadow: 0 4px 24px rgba(58,122,24,0.36) !important; } html[data-theme="jaeger"] .char-main { background: #0e1a0a !important; } /* ════════════════════════════════════════════════════════════ SCHELM — Narr & Gaukler Grell-bunt, schrill, Harlekin-Karneval. Starke Kontraste auf dunkler Bühne. ════════════════════════════════════════════════════════════ */ html[data-theme="schelm"] { --parchment: #160a20; --parchment-dark: #0d0618; --ink: #ffffff; --ink-light: #f0e0ff; --blood: #ff1493; /* Hot-Pink */ --gold: #ffd700; /* Grell-Gelb */ --gold-light: #ffec40; --bronze: #ff6600; /* Orange */ --forest: #1a0030; --forest-light: #2a0050; --stone: #cc44ff; /* Violett */ --stone-light: #ee88ff; --shadow: rgba(8,0,18,0.72); --glow: rgba(255,20,147,0.40); --tab-active: #ff1493; --input-bg: #2a1840; --input-bg-focus: #382250; } html[data-theme="schelm"] body { background-color: #0d0618 !important; background-image: radial-gradient(ellipse at 10% 20%, rgba(255,20,147,0.22) 0%, transparent 40%), radial-gradient(ellipse at 90% 10%, rgba(255,215,0,0.18) 0%, transparent 35%), radial-gradient(ellipse at 85% 80%, rgba(0,204,255,0.18) 0%, transparent 40%), radial-gradient(ellipse at 15% 85%, rgba(0,255,102,0.14) 0%, transparent 35%), radial-gradient(ellipse at 50% 50%, rgba(204,0,255,0.12) 0%, transparent 50%), url('/img/themes/elfenkriegerin-stars.svg') !important; background-size: auto, auto, auto, auto, auto, 120px 120px !important; } html[data-theme="schelm"] .tab-content { background-image: radial-gradient(ellipse at 10% 20%, rgba(255,20,147,0.16) 0%, transparent 45%), radial-gradient(ellipse at 85% 80%, rgba(0,204,255,0.14) 0%, transparent 40%), url('/img/themes/elfenkriegerin-stars.svg') !important; background-size: auto, auto, 120px 120px !important; } html[data-theme="schelm"] .char-sidebar { background: linear-gradient(180deg, #200a30 0%, #160520 60%, #0d0318 100%) !important; border-right-color: rgba(255,20,147,0.55) !important; } html[data-theme="schelm"] .app-header { background: linear-gradient(90deg, #0d0418, #1a0828, #200a30, #1a0828, #0d0418) !important; border-bottom-color: #ffd700 !important; box-shadow: 0 4px 28px rgba(255,20,147,0.38) !important; } html[data-theme="schelm"] .char-main { background: #160a20 !important; } html[data-theme="schelm"] .tab.active, html[data-theme="schelm"] .tab-btn.active { color: #ffd700 !important; border-color: #ff1493 !important; text-shadow: 0 0 10px rgba(255,20,147,0.55) !important; } /* ════════════════════════════════════════════════════════════ MAGIER — Arkaner Wissender Tiefes Nacht-Indigo, blaue magische Flamme, Funken. Geheimnisvoll und fantasievoll. ════════════════════════════════════════════════════════════ */ html[data-theme="magier"] { --parchment: #080c1e; --parchment-dark: #040810; --ink: #c8d8f8; --ink-light: #8098d8; --blood: #3060e8; /* Elektrisches Blau */ --gold: #30b8ff; /* Blaue Flamme — hell */ --gold-light: #70d8ff; /* Flammen-Cyan */ --bronze: #1840a8; /* Tiefes Kobalt */ --forest: #100828; --forest-light: #1c1040; --stone: #5068b8; --stone-light: #7888d0; --shadow: rgba(2,4,14,0.78); --glow: rgba(48,184,255,0.38); --tab-active: #3060e8; --input-bg: #141830; --input-bg-focus: #1e2240; } html[data-theme="magier"] body { background-color: #040810 !important; background-image: /* Blaue Flamme — Hauptaura Mitte-Unten */ radial-gradient(ellipse at 50% 90%, rgba(48,184,255,0.30) 0%, rgba(30,96,220,0.14) 30%, transparent 60%), /* Funken-Glühen oben links */ radial-gradient(ellipse at 12% 22%, rgba(80,104,184,0.20) 0%, transparent 45%), /* Violetter Mana-Schimmer rechts */ radial-gradient(ellipse at 88% 58%, rgba(100,40,200,0.18) 0%, transparent 40%), /* Zentrale Magie-Aura */ radial-gradient(ellipse at 50% 50%, rgba(24,64,168,0.12) 0%, transparent 60%), url('/img/themes/magier-sparks.svg') !important; background-size: auto, auto, auto, auto, 200px 200px !important; } html[data-theme="magier"] .tab-content { background-image: radial-gradient(ellipse at 50% 90%, rgba(48,184,255,0.22) 0%, rgba(30,96,220,0.10) 30%, transparent 60%), radial-gradient(ellipse at 88% 58%, rgba(100,40,200,0.14) 0%, transparent 40%), url('/img/themes/magier-sparks.svg') !important; background-size: auto, auto, 200px 200px !important; } html[data-theme="magier"] .char-sidebar { background: linear-gradient(180deg, #0e1030 0%, #080c22 60%, #040810 100%) !important; border-right-color: rgba(48,184,255,0.45) !important; } html[data-theme="magier"] .app-header { background: linear-gradient(90deg, #060a1a, #0c1228, #0e1430, #0c1228, #060a1a) !important; border-bottom-color: #30b8ff !important; box-shadow: 0 4px 28px rgba(24,64,168,0.45), 0 1px 0 rgba(48,184,255,0.30) !important; } html[data-theme="magier"] .char-main { background: #080c1e !important; } html[data-theme="magier"] .tab.active, html[data-theme="magier"] .tab-btn.active { color: #70d8ff !important; border-color: #3060e8 !important; text-shadow: 0 0 10px rgba(48,184,255,0.55) !important; } /* ════════════════════════════════════════════════════════════ PIRAT — Thorwaler-Seeräuber Sturmgepeitschte See, Salz in den Adern, Gischt und Fels. Dunkle Tiefsee, verwittertes Holz, Piraten-Rot. ════════════════════════════════════════════════════════════ */ html[data-theme="pirat"] { --parchment: #080f14; --parchment-dark: #040a0d; --ink: #cce8f4; /* Gischt-Weiß */ --ink-light: #88bcd0; --blood: #c03020; /* Piraten-Blut */ --gold: #c89030; /* Altes Messing */ --gold-light: #e8b050; --bronze: #7a4c20; /* Teakholz */ --forest: #082840; /* Tiefsee */ --forest-light: #104870; --stone: #486070; /* Sturm-Grau */ --stone-light: #688090; --shadow: rgba(2,6,10,0.75); --glow: rgba(30,100,160,0.32); --tab-active: #c03020; --input-bg: #141e28; --input-bg-focus: #1e2c38; } html[data-theme="pirat"] body { background-color: #040a0d !important; background-image: /* Gewitterwolken — Sturm-Horizont oben */ radial-gradient(ellipse at 50% 0%, rgba(72,96,112,0.30) 0%, rgba(20,50,70,0.15) 40%, transparent 65%), /* Blut-Rot — Kampf und Gefahr links */ radial-gradient(ellipse at 8% 62%, rgba(192,48,32,0.18) 0%, transparent 35%), /* Tiefsee-Blau rechts-unten */ radial-gradient(ellipse at 92% 88%, rgba(16,72,112,0.28) 0%, transparent 45%), /* Gischt-Schimmer unten mitte */ radial-gradient(ellipse at 50% 100%, rgba(100,160,200,0.12) 0%, transparent 40%), url('/img/themes/pirat-waves.svg') !important; background-size: auto, auto, auto, auto, 160px 80px !important; } html[data-theme="pirat"] .tab-content { background-image: radial-gradient(ellipse at 50% 0%, rgba(72,96,112,0.22) 0%, transparent 55%), radial-gradient(ellipse at 92% 88%, rgba(16,72,112,0.20) 0%, transparent 45%), url('/img/themes/pirat-waves.svg') !important; background-size: auto, auto, 160px 80px !important; } html[data-theme="pirat"] .char-sidebar { background: linear-gradient(180deg, #0c1820 0%, #07101a 60%, #040a0d 100%) !important; border-right-color: rgba(192,48,32,0.55) !important; } html[data-theme="pirat"] .app-header { background: linear-gradient(90deg, #040c12, #081420, #0a1828, #081420, #040c12) !important; border-bottom-color: #c89030 !important; box-shadow: 0 4px 28px rgba(8,40,64,0.55), 0 1px 0 rgba(200,144,48,0.30) !important; } html[data-theme="pirat"] .char-main { background: #080f14 !important; } html[data-theme="pirat"] .tab.active, html[data-theme="pirat"] .tab-btn.active { color: #e8b050 !important; border-color: #c03020 !important; text-shadow: 0 0 8px rgba(192,48,32,0.50) !important; } /* ════════════════════════════════════════════════════════════ THORWALER — Nordischer Krieger Dunkle Erde, Eisen und Rost, Blut-Rot, Runen. Narben, Tätowierungen, Kampf und Kälte des Nordens. ════════════════════════════════════════════════════════════ */ html[data-theme="thorwaler"] { --parchment: #140e08; --parchment-dark: #0c0905; --ink: #e8d4b0; /* Knochen-Pergament */ --ink-light: #c0a870; --blood: #c81818; /* Kampf-Blut */ --gold: #b07820; /* Angelaufenes Eisen-Gold */ --gold-light: #d09830; --bronze: #8a5018; /* Rostiges Eisen */ --forest: #280e04; /* Dunkle Erde */ --forest-light: #481808; --stone: #6a5038; /* Verwitterter Stein */ --stone-light: #8a7050; --shadow: rgba(8,4,0,0.78); --glow: rgba(200,24,24,0.30); --tab-active: #c81818; --input-bg: #261a0e; --input-bg-focus: #302416; } html[data-theme="thorwaler"] body { background-color: #0c0905 !important; background-image: /* Blut-Glut — Kampfleidenschaft links-unten */ radial-gradient(ellipse at 28% 80%, rgba(200,24,24,0.24) 0%, transparent 45%), /* Kalter Norden — Grau-Blau oben rechts */ radial-gradient(ellipse at 72% 5%, rgba(60,70,80,0.22) 0%, transparent 40%), /* Dunkle schwere Erde — Mitte */ radial-gradient(ellipse at 50% 50%, rgba(40,14,4,0.28) 0%, transparent 55%), /* Feuer-Glut rechts-unten */ radial-gradient(ellipse at 90% 90%, rgba(138,80,24,0.18) 0%, transparent 38%), url('/img/themes/thorwaler-runes.svg') !important; background-size: auto, auto, auto, auto, 120px 120px !important; } html[data-theme="thorwaler"] .tab-content { background-image: radial-gradient(ellipse at 28% 80%, rgba(200,24,24,0.18) 0%, transparent 45%), radial-gradient(ellipse at 72% 5%, rgba(60,70,80,0.16) 0%, transparent 40%), url('/img/themes/thorwaler-runes.svg') !important; background-size: auto, auto, 120px 120px !important; } html[data-theme="thorwaler"] .char-sidebar { background: linear-gradient(180deg, #1e1008 0%, #140c05 60%, #0c0802 100%) !important; border-right-color: rgba(200,24,24,0.50) !important; } html[data-theme="thorwaler"] .app-header { background: linear-gradient(90deg, #0a0804, #140e06, #1c1208, #140e06, #0a0804) !important; border-bottom-color: #b07820 !important; box-shadow: 0 4px 28px rgba(8,4,0,0.55), 0 1px 0 rgba(176,120,32,0.28) !important; } html[data-theme="thorwaler"] .char-main { background: #140e08 !important; } html[data-theme="thorwaler"] .tab.active, html[data-theme="thorwaler"] .tab-btn.active { color: #d09830 !important; border-color: #c81818 !important; text-shadow: 0 0 8px rgba(200,24,24,0.48) !important; } /* ════════════════════════════════════════════════════════════ RESPONSIVE — Mobile UI-Anpassungen ════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Logo-Schriftzug "BlackMagic" ausblenden — mehr Platz für Tab-Buttons */ .app-logo { display: none; } }