/* * Theme-System: alle Farben/Schatten ausschließlich über CSS-Variablen, * damit Light/Dark nur durch Umschalten des Variablen-Sets entsteht (siehe * [data-theme="dark"] { color-scheme: dark; --bg: #151515; --surface: #1d1d1c; --surface-alt: #272725; --border: #343432; --border-soft: #2b2b29; --text: #f4f4f2; --text-muted: #b5b5b0; --text-faint: #8f8f8a; --accent: #f4f4f2; --accent-strong: #d8d8d4; --on-accent: #171717; --input-bg: #191918; --input-border: #3a3a37; --secondary-bg: #1d1d1c; --secondary-hover-bg: #292927; --danger-bg: #7a2f2f; --danger-hover: #9a3a3a; --danger-border: #7a2f2f; --danger-text: #ffffff; --status-error-text: #d98f8f; --score-low-bg: #33201f; --score-low-border: #603434; --score-low-text: #d48787; --score-mid-bg: #322b18; --score-mid-border: #5c4c28; --score-mid-text: #d7b65e; --score-high-bg: #1f2b22; --score-high-border: #3a5240; --score-high-text: #88b78c; --tint-hover: rgba(255,255,255,.06); --focus-ring: rgba(244,244,242,.14); --shadow-card: 0 1px 2px rgba(0,0,0,.35); --shadow-result: 0 3px 14px rgba(0,0,0,.4); } [data-theme="dark"] unten) statt durch verstreute harte Farbwerte im * restlichen CSS. Das data-theme-Attribut sitzt auf und wird sehr * früh (kleines Inline-Script im von index.html, VOR dem Laden * dieser Datei) sowie zur Laufzeit vom Umschalter-Button in app.js * gesetzt - siehe THEME_STORAGE_KEY dort. */ :root { color-scheme: light; /* Flächen - sehr helles, dezent lila getöntes Grundklima statt reinem Weiß, damit sich Karten sichtbar (aber ruhig) davon abheben. Kein sichtbarer "Buntlook" - Grauton mit minimalem kühlem Einschlag. */ --bg: #f6f5fa; --surface: #ffffff; --surface-alt: #f9f8fc; --border: #d8d3e2; --border-soft: #e6e1ee; /* Text */ --text: #111111; --text-muted: #5f5a68; --text-faint: #8f899a; /* Akzente: neutrales Dunkelgrau mit demselben ganz leichten kühlen Einschlag wie der Hintergrund - kein sichtbares Lila, nur stimmig zum Gesamtbild statt eines reinen Kohlegraus. */ --accent: #66616f; --accent-strong: #514d59; --on-accent: #ffffff; /* Inputs */ --input-bg: #ffffff; --input-border: #d3cddf; /* Sekundärer Button */ --secondary-bg: #ffffff; --secondary-hover-bg: #f1eef7; /* Destruktive Aktionen ("Löschen") - einziger bewusst farbiger Akzent, sehr zurückhaltendes Dunkelrot statt kräftigem Rot. */ --danger-bg: #7a2f2f; --danger-hover: #5f2323; --danger-border: #7a2f2f; --danger-text: #ffffff; /* Fehlermeldungstext (.status.error) - eigene Variable statt direkt --danger-bg, damit sich Button- und Textkontrast unabhängig voneinander fein abstimmen lassen (im Dark Theme muss der Text heller sein als die Button-Fläche, um auf dunklem Grund lesbar zu bleiben). */ --status-error-text: #7a2f2f; /* Gedeckte, dezente Bewertungsfarben (Prüfmodus-Score) - kein Rot/Gelb/ Grün als Ampelfarbe, siehe .rating-score.rating-* weiter unten. */ --score-low-bg: #ecdcdc; --score-low-border: #d9baba; --score-low-text: #7a3b3b; --score-mid-bg: #ece3c9; --score-mid-border: #ddcca0; --score-mid-text: #7a5c1e; --score-high-bg: #dce8dc; --score-high-border: #bcd6bc; --score-high-text: #3f6b46; /* Sehr dezente, kaum wahrnehmbare Hover-/Fokus-Tönungen - bewusst ohne Buntfarbe, nur abgeleitet vom jeweiligen Theme (hell -> abdunkeln, dunkel -> aufhellen). */ --tint-hover: rgba(17, 17, 17, 0.045); --focus-ring: rgba(17, 17, 17, 0.08); /* Karten deutlich runder als Buttons/Inputs - "bewusst gestaltetes Werkzeug" statt Formular, siehe .panel unten. */ --radius: 14px; --radius-sm: 10px; /* Sehr dezente, leicht warm-violett getönte Schatten (statt reinem Schwarz) - passend zum getönten Hintergrund, aber weiterhin kaum wahrnehmbar. */ --shadow-card: 0 1px 2px rgba(40, 35, 50, 0.06); --shadow-result: 0 2px 10px rgba(40, 35, 50, 0.08); } /* * Dunkles, leicht lila-graues Theme (bewusst kein reines Schwarz/Weiß) - * aktiviert über [data-theme="dark"] auf . Überschreibt ausschließlich * die Variablen oben; der Rest des CSS bleibt unverändert, da er nirgends * harte Farbwerte statt der Variablen verwendet (Ausnahme: einzelne, bewusst * theme-neutrale Schwarzschatten wie bei .primary-button, siehe dort). */ [data-theme="dark"] { color-scheme: dark; --bg: #15131a; --surface: #1f1c27; --surface-alt: #282431; --border: #4a4357; --border-soft: #393344; --text: #f4f1f8; --text-muted: #b8b0c4; --text-faint: #8f879b; --accent: #7b7488; --accent-strong: #958da3; --on-accent: #ffffff; --input-bg: #181620; --input-border: #4a4357; --secondary-bg: #211e29; --secondary-hover-bg: #2b2733; --danger-bg: #7a2f2f; --danger-hover: #9a3a3a; --danger-border: #7a2f2f; --danger-text: #ffffff; --status-error-text: #d98f8f; --score-low-bg: #33201f; --score-low-border: #603434; --score-low-text: #b55b5b; --score-mid-bg: #322b18; --score-mid-border: #5c4c28; --score-mid-text: #c9a646; --score-high-bg: #1f2b22; --score-high-border: #3a5240; --score-high-text: #6f9f73; --tint-hover: rgba(255, 255, 255, 0.06); --focus-ring: rgba(244, 241, 248, 0.14); --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-result: 0 3px 14px rgba(0, 0, 0, 0.4); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: Arial, Helvetica, sans-serif; line-height: 1.5; } /* Nutzt auf Desktop nahezu die volle Breite - nur noch moderate, feste 16px-Seitenränder (width: calc(100% - 32px)) statt einer schmalen, zentrierten Spalte, gedeckelt bei 1720px auf sehr breiten Bildschirmen. max-width fängt den Fall ab, in dem width größer als 1720px würde (CSS klemmt den berechneten Wert automatisch am max-width) - keine horizontale Scrollbar, da die Breite nie über 100% - 32px hinausgeht. */ main { max-width: 1180px; width: calc(100% - 32px); margin: 0 auto; padding: 16px 0 48px; display: flex; flex-direction: column; gap: 18px; } /* Kompakter Header: Titel + Moduswechsel als eine zusammengehörige Gruppe links, Theme-Umschalter rechts - spart deutlich vertikalen Platz gegenüber einer eigenen, breiten Umschalter-Zeile darunter. Bricht auf schmalen Bildschirmen per flex-wrap sauber um. */ .app-header { max-width: 1180px; width: calc(100% - 32px); margin: 0 auto; padding: 14px 0; border-bottom: 1px solid var(--border-soft); } .app-header-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .header-actions { position: relative; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .account-button { min-height: 34px; padding: 6px 14px; font-size: 0.85rem; } .account-popover { position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; width: min(300px, calc(100vw - 32px)); padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-result); } .account-email { margin-bottom: 10px; color: var(--text-muted); font-size: 0.86rem; overflow-wrap: anywhere; } .auth-page { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; } .auth-page[hidden], #appShell[hidden] { display: none !important; } .auth-card { width: min(420px, 100%); background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); box-shadow: var(--shadow-result); padding: 26px; } .auth-card h2 { margin: 6px 0 8px; font-size: 2rem; letter-spacing: -0.04em; } .auth-intro { margin: 0 0 22px; color: var(--text-muted); line-height: 1.55; } .auth-card form { display: grid; gap: 14px; } .auth-card label { display: grid; gap: 7px; color: var(--text); font-size: 0.9rem; font-weight: 700; } .auth-card .text-input { max-width: none; } .auth-card .primary-button { margin-top: 4px; width: 100%; } /* Titel und Moduswechsel gehören optisch zusammen - ein gemeinsamer Abstand von 20px (im gewünschten 16-24px-Bereich) statt weit auseinander auf entgegengesetzten Seiten des Headers. Eigene flex-wrap-Gruppe, damit Titel+Switch auf schmalen Bildschirmen zusammenbleiben und nur der Theme-Umschalter bei Bedarf in eine eigene Zeile fällt. */ .header-left { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; min-width: 0; } .brand-block { min-width: 150px; } .eyebrow { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em; color: var(--text-muted); } .app-header h1 { font-size: clamp(1.7rem, 4vw, 2.25rem); line-height: 1; font-weight: 800; letter-spacing: -0.04em; margin: 4px 0 0; color: var(--text); } /* Theme-Umschalter (Hell/Dunkel) - sitzt rechts im Header, bewusst als kompakter, sekundär gestalteter Button (kein eigenes Buntfarben-Icon- Design). Nutzt dieselben Theme-Variablen wie .secondary-button, damit er sich in Light und Dark automatisch stimmig einfügt: helle Fläche/grauer Rand/dunkler Text im Light Theme, dunkle Fläche/heller Text/sichtbarer Rand im Dark Theme. */ .theme-toggle { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; background: var(--secondary-bg); border-color: var(--border); color: var(--text); } .theme-toggle:hover:not(:disabled) { background: var(--secondary-hover-bg); border-color: var(--border); color: var(--text); } /* .btn.theme-toggle statt nur .theme-toggle: höhere Selektor-Spezifität als die allgemeine .btn-Regel (min-height: 44px u. a.) - gleiches Muster wie bei .btn.mode-tab weiter unten, sonst bliebe der Button trotz dieser Regel in voller Buttongröße statt kompakt. */ .btn.theme-toggle { min-height: 34px; padding: 6px 14px; font-size: 0.85rem; } .theme-toggle-icon { font-size: 0.95rem; line-height: 1; } /* Moduswahl (Prüfen/Memento) - kompakte, in den Header integrierte Segment-Control statt einer großen eigenen Zeile: bewusst ruhiger als die Hauptaktionsbuttons im Arbeitsbereich. Ein heller "Track" mit zwei Tabs, aktiver Tab = weiße Fläche mit dunklem Rahmen und fetterer Schrift, inaktiver Tab = nahezu unsichtbar bis Hover. Nutzt weiterhin dieselben primary-/secondary-button-Klassen wie zuvor (keine JS-Änderung nötig, siehe setMode() in app.js) - hier nur mit spezifischeren Selektoren gezielt überschrieben, damit echte Primary-Buttons wie "Text prüfen" optisch weiterhin die stärkste Aktion auf der Seite bleiben. inline-flex statt flex + kein flex:1 auf den Tabs: die Control ist jetzt nur so breit wie ihr Inhalt, nicht mehr volle Breite. */ .mode-switch { display: inline-flex; flex-shrink: 0; gap: 3px; padding: 3px; background: var(--surface-alt); border: 1px solid var(--border-soft); border-radius: calc(var(--radius-sm) + 4px); } /* .btn.mode-tab statt nur .mode-tab: höhere Selektor-Spezifität als die allgemeine .btn-Regel (die u. a. min-height: 44px setzt) - sonst würde die spätere .btn-Regel bei gleicher Spezifität gewinnen und die Tabs blieben trotz dieser Regel 44px hoch statt kompakt. */ .btn.mode-tab { border-radius: var(--radius-sm); padding: 6px 16px; min-height: 30px; font-size: 0.85rem; } .mode-tab.primary-button { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 800; box-shadow: none; } .mode-tab.primary-button:hover:not(:disabled) { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent); } .mode-tab.secondary-button { background: transparent; border-color: transparent; color: var(--text-muted); font-weight: 600; } .mode-tab.secondary-button:hover:not(:disabled) { background: var(--tint-hover); border-color: transparent; color: var(--text); } .mode-panel { display: flex; flex-direction: column; gap: 20px; } /* Gemeinsamer Ergebnisbereich im Prüfmodus (Bewertung + Verbesserter Text): auf schmalen Bildschirmen eine Spalte (DOM-Reihenfolge = gestapelte Reihenfolge: Bewertung vor Verbesserter Text), ab 900px zweispaltig - links eine kompakte Bewertungs-Sidebar (~28%), rechts der deutlich breitere Hauptbereich für den verbesserten Text. align-items:start verhindert, dass die kürzere Sidebar künstlich auf die Höhe der Hauptspalte gestreckt wird. */ .proofread-result-grid { display: grid; grid-template-columns: 1fr; gap: 20px; } @media (min-width: 900px) { .proofread-result-grid { grid-template-columns: minmax(240px, 28%) 1fr; align-items: start; } } .proofread-result-sidebar, .proofread-result-main { margin: 0; } .panel { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 20px; } /* Ergebnis-/Dokumentbereiche (Bewertung, Memento-Notiz, Verbesserter Text) heben sich minimal von reinen Eingabe-Karten ab - etwas kräftigerer Schatten, sonst identische Kartenoptik (keine neue Fläche/Farbe). */ .panel-result { box-shadow: var(--shadow-result); } /* Vereinheitlichte Beschriftung für alle Bereichs-Labels (Rohnotiz, Memento-Notiz, Text zum Prüfen, Bewertung, Verbesserter Text) UND den "Einstellungen"-Aufklapper - gleiche Schriftfamilie/-größe/-gewicht überall (dezente Großbuchstaben-"Eyebrow"-Optik statt normalem Fließtext, wie in ruhigen professionellen Werkzeugen üblich). Nur display/cursor/padding bleiben je Element unterschiedlich (Label vs. klickbarer ). */ .panel > label, .settings-grid label, .settings-panel summary { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px; } .panel > label, .settings-grid label { display: block; } .text-area, .text-input { width: 100%; background: var(--input-bg); color: var(--text); border: 1px solid var(--input-border); border-radius: var(--radius-sm); padding: 14px; font-size: 1rem; font-family: inherit; line-height: 1.55; resize: vertical; } /* Mehrzeilige Felder (Rohnotiz, Memento-Notiz, Prüfen-Ein-/Ausgabe, Prompts) nutzen die volle, breite Panel-Breite. Einzeilige Felder (API-Modus, Modell, Keys, Worker-URL, Graph ID) bleiben dagegen bewusst auf eine gut lesbare Breite begrenzt - sonst würden z. B. ein API-Key-Feld oder ein Dropdown auf großen Bildschirmen unnötig und schlecht lesbar über die volle Container-Breite gezogen. */ .text-input { max-width: 480px; } .text-area:focus, .text-input:focus { outline: none; border-color: var(--accent-strong); box-shadow: 0 0 0 3px var(--focus-ring); } /* Placeholder-Text dezent, aber in beiden Themes klar erkennbar (statt dem browserabhängigen Default) - nutzt denselben gedämpften Grauton wie die Tastenkürzel-Hinweise. */ .text-area::placeholder, .text-input::placeholder { color: var(--text-faint); opacity: 1; } /* Etwas weniger hoch als früher (war 180px) - reduziert die vertikale Gesamthöhe insbesondere im Prüfmodus spürbar, bleibt aber per resize:vertical frei vergrößerbar. Betrifft die Eingabefelder Rohnotiz und Text zum Prüfen. */ .text-area-large { min-height: 130px; } /* "Dokumentvorschau"-Optik für Ergebnisbereiche (Memento-Notiz, Verbesserter Text): mehr Innenabstand, größere Zeilenhöhe, etwas größere Schrift und ein minimal helleres Rahmenlicht als normale Eingabefelder - bleiben technisch editierbare