/* Hell-Modus für alle bluvstein.itpr.at-Projekte * Aktiviert wenn . Setzt CSS-Variablen * (sowohl Lernplattform/Hobbyraum/Home-Naming als auch willhaben-Naming) * und überschreibt die hartkodierten Foto-Overlays. */ html[data-theme="light"] { /* Lernplattform / Hobbyraum / Home Variablen */ --bg: #f4f1ec; --ink: #2a221a; --ink-soft: #5a4f3f; --muted: #8a7e6c; --amber: #c7762b; --amber-hi: #b66617; --amber-dark: #8f4f10; --ice: #4f87b0; --ice-hi: #2e6488; --danger: #c54430; --ok: #4f8d59; --warn: #a37326; --card-bg: rgba(255, 251, 244, 0.88); --card-border: rgba(199, 118, 43, 0.30); --card-border-hi: rgba(199, 118, 43, 0.65); --divider: rgba(199, 118, 43, 0.18); --input-bg: rgba(255, 253, 250, 0.95); /* willhaben Variablen */ --fg: #2a221a; --card: rgba(255, 251, 244, 0.88); --card-hover: rgba(248, 240, 228, 0.95); --accent: #c7762b; --accent-hi: #b66617; --accent-dark: #8f4f10; --willhaben: #c8102e; --border: rgba(199, 118, 43, 0.30); --err: #c54430; background: #f4f1ec; } html[data-theme="light"] body { color: #2a221a; } /* Foto-Overlay invertieren: helle, fast undurchsichtige Cremehülle statt dunkle */ html[data-theme="light"] body::after { background: radial-gradient(ellipse at center, rgba(255, 251, 244, 0.72) 0%, rgba(255, 251, 244, 0.90) 60%, rgba(248, 240, 228, 0.96) 100%) !important; } /* Card-Schatten dezenter (auf hellem Untergrund stören harte Schatten) */ html[data-theme="light"] .card, html[data-theme="light"] a.card, html[data-theme="light"] .features li, html[data-theme="light"] .steps li, html[data-theme="light"] .tile { box-shadow: 0 2px 10px rgba(120, 80, 30, 0.10), 0 0 30px rgba(199, 118, 43, 0.04) inset !important; } /* Headlines: kein dunkler Schatten */ html[data-theme="light"] h1, html[data-theme="light"] header.hero h1, html[data-theme="light"] header.hero p.lead, html[data-theme="light"] header.hero p.lead strong, html[data-theme="light"] h2, html[data-theme="light"] footer, html[data-theme="light"] .brand-label, html[data-theme="light"] .brand-row, html[data-theme="light"] .hero h1, html[data-theme="light"] .hero p, html[data-theme="light"] .hero-accent { text-shadow: none !important; color: #2a221a; } html[data-theme="light"] .brand-label, html[data-theme="light"] .hero-accent { color: #b66617; } html[data-theme="light"] h1 .accent { color: #b66617; text-shadow: none !important; } /* Hero-Banner: hellerer Overlay über dem Foto */ html[data-theme="light"] .hero { background: linear-gradient(135deg, rgba(255, 251, 244, 0.78), rgba(248, 240, 228, 0.86)), url('/lernplattform/assets/hero.jpg') center/cover no-repeat !important; box-shadow: 0 4px 20px rgba(120, 80, 30, 0.15), inset 0 0 60px rgba(199, 118, 43, 0.05) !important; } html[data-theme="light"] .hero h1 { color: #2a221a; } html[data-theme="light"] .hero p { color: #5a4f3f; } /* Tile-Hover-Effekte */ html[data-theme="light"] .tile { background: linear-gradient(150deg, rgba(255, 251, 244, 0.92), rgba(248, 240, 228, 0.95)) !important; } html[data-theme="light"] .tile strong { color: #2a221a; } html[data-theme="light"] .tile .meta, html[data-theme="light"] .tile span { color: #5a4f3f; } /* Buttons: amber-Gradient bleibt, aber Schatten dezenter */ html[data-theme="light"] .btn { box-shadow: 0 2px 8px rgba(199, 118, 43, 0.20); } /* Btn-Ghost auf hellem Untergrund: dunklerer Text + sichtbarer Border */ html[data-theme="light"] .btn-ghost, html[data-theme="light"] .btn.ghost { color: #5a4f3f; border-color: rgba(199, 118, 43, 0.35); } /* Inputs: heller Hintergrund + dunkle Schrift */ html[data-theme="light"] input[type=text], html[data-theme="light"] input[type=password], html[data-theme="light"] input[type=date], html[data-theme="light"] input[type=time], html[data-theme="light"] input[type=datetime-local], html[data-theme="light"] input[type=email], html[data-theme="light"] input[type=number], html[data-theme="light"] input[type=file], html[data-theme="light"] textarea, html[data-theme="light"] select { color: #2a221a; background: rgba(255, 253, 250, 0.95); } /* Tag/Stack-Pills */ html[data-theme="light"] .tag, html[data-theme="light"] .stack span { background: rgba(255, 251, 244, 0.85); color: #5a4f3f; } /* Kalender-Zellen */ html[data-theme="light"] .cal-day { background: rgba(255, 251, 244, 0.78); } html[data-theme="light"] .cal-day.outside { background: rgba(244, 238, 226, 0.5); } html[data-theme="light"] .cal-day.weekend:not(.outside) { background: rgba(248, 240, 228, 0.78); } html[data-theme="light"] .cal-day.today { background: rgba(255, 246, 230, 0.95) !important; box-shadow: 0 0 0 1px var(--amber), 0 0 14px rgba(199, 118, 43, 0.20); } html[data-theme="light"] .cal-chip { background: rgba(255, 248, 235, 0.95); color: #2a221a; } html[data-theme="light"] .cal-chip:hover { background: rgba(252, 240, 220, 1); color: #2a221a; } html[data-theme="light"] .cal-chip-name { color: #2a221a; } html[data-theme="light"] .cal-chip-title { color: #5a4f3f; } html[data-theme="light"] .cal-pill { background: rgba(255, 251, 244, 0.85); color: #5a4f3f; border-color: rgba(199, 118, 43, 0.35); } html[data-theme="light"] .cal-pill.active { color: #fff; background: linear-gradient(180deg, var(--amber), var(--amber-hi)); } /* Buchungs-Listenkarten */ html[data-theme="light"] .bk { background: rgba(255, 251, 244, 0.85); } html[data-theme="light"] .bk .body strong { color: #2a221a; } /* Status- & Flash-Pills minimal anpassen für hellen Hintergrund */ html[data-theme="light"] .flash-ok { background: rgba(79, 141, 89, 0.14); color: #295a30; border-color: rgba(79, 141, 89, 0.45); } html[data-theme="light"] .flash-err { background: rgba(197, 68, 48, 0.14); color: #6b2014; border-color: rgba(197, 68, 48, 0.45); } html[data-theme="light"] .flash.ok { background: rgba(79, 141, 89, 0.14); color: #295a30; border-color: rgba(79, 141, 89, 0.45); } html[data-theme="light"] .flash.err { background: rgba(197, 68, 48, 0.14); color: #6b2014; border-color: rgba(197, 68, 48, 0.45); } html[data-theme="light"] .status-ok { background: rgba(79,141,89,0.16); color: #295a30; border-color: rgba(79,141,89,0.45); } html[data-theme="light"] .status-err { background: rgba(197,68,48,0.16); color: #6b2014; border-color: rgba(197,68,48,0.45); } html[data-theme="light"] .status-pending { background: rgba(163,115,38,0.16); color: #5d4012; border-color: rgba(163,115,38,0.45); } html[data-theme="light"] .status-warn { background: rgba(138,128,115,0.18); color: #3d362a; border-color: rgba(138,128,115,0.45); } /* Lernen-Page: Quiz-Optionen + Flip-Cards + Lösungs-Boxen */ html[data-theme="light"] .flip { background: linear-gradient(150deg, rgba(255,251,244,0.92), rgba(248,240,228,0.95)); } html[data-theme="light"] .flip .q { color: #2a221a; } html[data-theme="light"] .flip .a { color: #2e6488; } html[data-theme="light"] .flip.open { background: linear-gradient(150deg, rgba(220,235,245,0.85), rgba(244,238,226,0.92)); } html[data-theme="light"] .quiz-item, html[data-theme="light"] .card-lernen { background: rgba(255,251,244,0.85); } html[data-theme="light"] .quiz-option { background: rgba(255,253,250,0.95); color: #2a221a; } html[data-theme="light"] .quiz-option:hover { background: rgba(252,245,232,1); } html[data-theme="light"] .quiz-option.correct { background: rgba(79,141,89,0.18); color: #295a30; border-color: rgba(79,141,89,0.55); } html[data-theme="light"] .quiz-option.wrong { background: rgba(197,68,48,0.16); color: #6b2014; border-color: rgba(197,68,48,0.55); } html[data-theme="light"] .quiz-expl { background: rgba(220,235,245,0.55); color: #2a221a; } html[data-theme="light"] details.loesung .loesung-body { background: rgba(79,141,89,0.16); color: #295a30; border-color: rgba(79,141,89,0.45); } html[data-theme="light"] details.hinweis .hinweis-body { background: rgba(220,235,245,0.55); color: #2a221a; } /* Pre-Boxen, Code */ html[data-theme="light"] pre { background: rgba(248, 240, 228, 0.85); color: #2a221a; } html[data-theme="light"] .note code { background: rgba(220, 235, 245, 0.6); color: #2e6488; } /* willhaben-spezifisch: Topnav */ html[data-theme="light"] nav.top { background: rgba(255, 251, 244, 0.78); } html[data-theme="light"] nav.top a { color: #5a4f3f; } html[data-theme="light"] nav.top .brand { color: #2a221a; } /* Dropzone */ html[data-theme="light"] .dropzone { background: rgba(255, 251, 244, 0.55); color: #5a4f3f; border-color: rgba(199, 118, 43, 0.35); } html[data-theme="light"] .dropzone.drag { background: rgba(252, 240, 220, 0.85); } /* Theme-Toggle-Button */ .theme-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 12px; background: transparent; border: 1px solid var(--card-border, rgba(229,153,72,0.22)); color: var(--ink-soft, #c9bda9); cursor: pointer; font-family: inherit; transition: all .15s; } .theme-toggle:hover { color: var(--amber-hi); border-color: var(--card-border-hi, rgba(245,184,106,0.55)); background: rgba(229,153,72,0.08); } html[data-theme="light"] .theme-toggle { color: #5a4f3f; border-color: rgba(199,118,43,0.35); } html[data-theme="light"] .theme-toggle:hover { color: #b66617; background: rgba(199,118,43,0.10); } .theme-toggle .icon { font-size: 13px; line-height: 1; }