/* ========================================================================== theme-gpg.css – GPG-Archiv-/Akten-Theme Ueberschreibt base.css Custom Properties und ergaenzt GPG-spezifische Komponentenstyles. Designsprache: Archiv-Feeling, Pergament, dezente Bordueren. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Custom Properties – GPG-Farbpalette -------------------------------------------------------------------------- */ :root { /* Farben */ --color-primary: #1B2A4A; /* Navy – Header, Buttons, Ueberschriften */ --color-secondary: #C9A84C; /* Gold – Akzente, Fortschritt, Codes */ --color-background: #F5F0E8; /* Pergament – Seitenhintergrund */ --color-surface: #EDE8DD; /* Leinen – Karten, Aufgabenbereiche */ --color-text: #2C2416; /* Dunkelbraun – Fliesstext */ --color-success: #2D6A4F; /* Gruen – Richtig-Feedback */ --color-error: #9B2226; /* Rot – Falsch-Feedback */ --color-tipp: #4A6FA5; /* Blaugrau – Tipp-Bereiche */ /* Erweiterte Farben */ --color-primary-light: #2a3f6a; --color-secondary-light: #d4b86a; --color-surface-dark: #ddd8cc; --color-border: #c5bfb3; --color-muted: #6b6358; /* Typografie */ --font-heading: Georgia, "Times New Roman", serif; --font-body: system-ui, -apple-system, "Segoe UI", sans-serif; --font-code: "Courier New", Courier, monospace; --font-fragebogen: 'Architects Daughter', cursive; /* Fragebogen-Farbschema (Notizbuch-Stil) */ --fb-primary: #2952A3; --fb-highlight: #FFF176; --fb-success: #388E3C; --fb-error: #C62828; --fb-hint: #78909C; --fb-bg: #FFFFFF; --fb-grid: #E8E8E8; } /* -------------------------------------------------------------------------- 2. Typografie -------------------------------------------------------------------------- */ h1 { font-family: var(--font-heading); font-size: var(--text-3xl); color: var(--color-primary); margin-bottom: var(--space-md); } h2 { font-family: var(--font-heading); font-size: var(--text-2xl); color: var(--color-primary); margin-bottom: var(--space-sm); } h3 { font-family: var(--font-heading); font-size: var(--text-xl); color: var(--color-primary); margin-bottom: var(--space-sm); } p { margin-bottom: var(--space-md); } code, .code-text { font-family: var(--font-code); font-size: var(--text-lg); background-color: var(--color-surface); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); } /* -------------------------------------------------------------------------- 3. Seiten-Layout (GPG-Archiv-Stil) -------------------------------------------------------------------------- */ /* E5: Akten-Grund. Der frueher per Overlay gesetzte Dark-Look ist jetzt Default; das Pergament-Verlaufsbild entfaellt (das Overlay hat es per background-Shorthand ohnehin neutralisiert). */ body { background: var(--akte-bg); color: var(--akte-ink); font-family: var(--akte-font-body); font-size: var(--akte-fs-body); } /* E5: Die Spiel-Uebersicht ist der Schreibtisch, auf dem die Dossiers liegen. Sie behaelt die Site-Basistypografie — ihr Look setzt Schriften pro Komponente; den Akten-Fliesstext erben nur die Mappen. Die Scope-Klasse `uebersicht` am trennt beide Welten, seit der Akten-Look in der geteilten Schicht liegt (vorher lag die Uebersicht in einer eigenen Datei, die nur index.html lud). */ body.uebersicht { font-family: var(--font-body); font-size: 1rem; background: var(--akte-desk); background-image: radial-gradient(ellipse at 30% 15%, rgba(255, 220, 150, .10), transparent 55%), radial-gradient(ellipse at 70% 85%, rgba(0, 0, 0, .45), transparent 60%), repeating-linear-gradient(90deg, rgba(255, 255, 255, .015) 0 4px, transparent 4px 11px); color: var(--akte-label); } /* Header der Uebersicht: kein Navy-Balken, sondern freier Tisch */ body.uebersicht > header { background: transparent; border-bottom: none; text-align: left; padding: 40px 40px 8px; position: relative; } /* Klebeband ueber dem Aktenlabel */ body.uebersicht > header::after { content: ""; position: absolute; top: 28px; left: 210px; width: 78px; height: 18px; background: rgba(255, 243, 200, .5); transform: rotate(-4deg); box-shadow: 0 2px 4px rgba(0, 0, 0, .25); } body.uebersicht .header__meta { margin-top: 14px; padding-left: 8px; font-family: var(--akte-font-mono); font-size: 12px; letter-spacing: 1.5px; color: #d6c39a; text-align: left; } body.uebersicht main { max-width: 1120px; padding: 8px 40px 56px; } /* Fussleiste. font-size/opacity standen frueher als Inline-Style im HTML und wurden nur vom !important des Overlays ueberstimmt — jetzt stehen sie hier. */ body.uebersicht > footer { background: var(--color-primary); border-top: 4px solid var(--color-secondary); text-align: right; padding: 14px 40px; font-size: 0.8rem; opacity: 0.6; } body.uebersicht > footer a { font-family: var(--akte-font-mono); font-size: 12px; letter-spacing: 1.5px; color: var(--color-secondary); } /* E5: Akten-Label. Text kommt aus data.json (meta.akten_label bzw. mappen[i].akten_label) und wird von der Engine ins DOM gerendert — das CSS zeigt nur noch an. Frueher standen die Texte als CSS-content im Game-Overlay und waren damit pro Spiel unveraenderlich. */ body > header .akten-label { display: block; font-family: var(--akte-font-mono); font-size: 11px; letter-spacing: 3px; color: var(--akte-gold-light); margin-bottom: 8px; } /* Auf der Uebersicht sitzt das Label im aufgeklebten Titel-Schild (rot, kleiner) */ body.uebersicht header .akten-label { font-size: 10px; color: var(--color-error); text-transform: uppercase; margin-bottom: 6px; } /* E5: Akten-Header statt simpler Navy-Bar */ header { background: var(--color-primary); color: #fff; text-align: left; border-bottom: 4px solid var(--color-secondary); padding: 22px 32px 18px; position: relative; } header h1 { color: #fff; } header .header__meta { font-size: var(--text-sm); color: var(--color-secondary-light); margin-top: var(--space-xs); text-align: left; } footer { background-color: var(--color-primary); color: var(--color-surface); border-top: 3px solid var(--color-secondary); } footer a { color: var(--color-secondary); } footer a:hover { text-decoration: underline; } /* -------------------------------------------------------------------------- 4. Mappe-Karten (Uebersicht auf index.html) -------------------------------------------------------------------------- */ /* E5: Die Uebersicht ist eine Pinnwand — jede Mappe ein angehefteten Dossier. Das Raster braucht den body.uebersicht-Scope, weil die Spaltenregeln der Responsive-Sektion (14) sonst spaeter in der Kaskade gewinnen wuerden. */ body.uebersicht .mappen-uebersicht { display: grid; grid-template-columns: 1fr 1fr; gap: 56px 72px; margin-top: 8px; padding: 12px 20px 0; } @media (max-width: 720px) { body.uebersicht .mappen-uebersicht { grid-template-columns: 1fr; gap: 44px; } } /* Spieltitel als schraeg aufgeklebtes Aktenlabel */ #game-titel { display: inline-block; box-sizing: border-box; width: fit-content; max-width: min(660px, 92%); height: auto; background: var(--akte-label); color: var(--color-primary); font-family: var(--akte-font-display); font-size: 34px; line-height: 1.12; letter-spacing: -.4px; padding: 16px 32px 18px; margin: 0; border-radius: 2px; box-shadow: 0 8px 18px rgba(0, 0, 0, .4); transform: rotate(-1.2deg); transform-origin: left center; position: relative; overflow: visible; white-space: normal; text-wrap: balance; } /* Treppen-Versatz fuer den Ablauf-Lesefluss */ .mappe-karte:nth-child(2) { margin-top: 22px; } .mappe-karte:nth-child(3) { margin-top: 12px; } .mappe-karte:nth-child(4) { margin-top: 34px; } @media (max-width: 720px) { body.uebersicht .mappe-karte { margin-top: 0; } } .mappe-karte { background: var(--akte-dossier); background-image: repeating-linear-gradient(0deg, transparent 0 22px, rgba(122, 90, 40, .05) 22px 23px); border: 1px solid #d8c89c; border-radius: 2px; padding: 30px 32px 26px 46px; box-shadow: 0 1px 0 rgba(0, 0, 0, .04) inset, 0 22px 30px rgba(20, 12, 4, .35), 0 4px 6px rgba(20, 12, 4, .18); position: relative; overflow: visible; transition: transform .15s; } .mappe-karte:nth-child(odd) { transform: rotate(-1.4deg); } .mappe-karte:nth-child(even) { transform: rotate(1.1deg); } .mappe-karte:hover { transform: rotate(0deg) translateY(-3px); box-shadow: 0 28px 40px rgba(20, 12, 4, .42), 0 6px 8px rgba(20, 12, 4, .22); } /* Lochung am linken Rand */ .mappe-karte::before { content: ""; position: absolute; left: 16px; top: 34px; width: 10px; height: 10px; border-radius: 50%; background: #1a140a; box-shadow: 0 0 0 0 transparent, 0 34px 0 #1a140a, 0 68px 0 #1a140a; } /* Messing-Pin oben mittig — Farbe nach Status */ .mappe-karte::after { content: ""; position: absolute; top: -12px; left: 50%; margin-left: -13px; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #e6cf88 0%, var(--akte-pin-open) 70%); box-shadow: 0 4px 5px rgba(0, 0, 0, .45); border: 1px solid rgba(0, 0, 0, .3); } .mappe-karte--completed::after { background: radial-gradient(circle at 35% 35%, #7bbf97 0%, var(--color-success) 70%); } .mappe-karte--current::after { background: radial-gradient(circle at 35% 35%, #e6cf88 0%, var(--akte-pin-open) 70%); } .mappe-karte--locked::after { background: radial-gradient(circle at 35% 35%, #c96b6e 0%, var(--color-error) 70%); } .mappe-karte__titel { font-family: var(--akte-font-display); font-size: 27px; line-height: 1.12; letter-spacing: -.3px; color: var(--akte-dossier-ink); margin: 0 0 12px; } /* Dossier-Meta-Zeile im Kacheltitel — Text aus data.json (meta.dossier_label) */ .mappe-karte__dossier-label { display: block; font-family: var(--akte-font-mono); font-size: 11px; letter-spacing: 1.5px; color: var(--akte-dossier-meta); text-transform: uppercase; margin-bottom: 8px; font-weight: 400; } .mappe-karte__beschreibung { font-family: var(--akte-font-mono); font-size: 13.5px; line-height: 1.55; color: #3a2f1a; } /* Aktions-Fusszeile / Link als Stempel-Button */ .mappe-karte__link { display: inline-block; margin-top: 20px; padding: 9px 20px; background: var(--color-primary); color: var(--akte-dossier); font-family: var(--akte-font-mono); font-size: 13px; font-weight: bold; letter-spacing: 1px; border-radius: 2px; min-height: 0; border-top: 1px dashed transparent; transition: background-color var(--transition-fast); } .mappe-karte--completed .mappe-karte__link { background: transparent; color: var(--color-success); border: 1.5px solid var(--color-success); } /* Status-Stempel (rotiert, oben rechts) — Text kommt aus der Engine */ .mappe-karte--completed .mappe-karte__titel, .mappe-karte--current .mappe-karte__titel, .mappe-karte--locked .mappe-karte__titel { padding-right: 90px; } .mappe-karte--completed > .mappe-karte__beschreibung::after, .mappe-karte--current > .mappe-karte__beschreibung::after, .mappe-karte--locked > .mappe-karte__beschreibung::after { content: none; } .rd-stempel { position: absolute; top: 20px; right: 22px; font-family: var(--akte-font-mono); font-size: 13px; font-weight: 700; letter-spacing: 2px; border: 3px solid currentColor; padding: 4px 10px; border-radius: 2px; text-transform: uppercase; pointer-events: none; opacity: .8; } .mappe-karte--completed .rd-stempel { color: var(--color-success); transform: rotate(-12deg); } .mappe-karte--current .rd-stempel { color: var(--color-error); transform: rotate(-9deg); } .mappe-karte--locked .rd-stempel { color: var(--akte-dossier-meta); transform: rotate(6deg); opacity: .55; } /* Gesperrtes Dossier gedaempft */ .mappe-karte--locked { filter: grayscale(.5) brightness(.94); opacity: .72; pointer-events: none; } .mappe-karte--locked::after { opacity: 1; } /* -------------------------------------------------------------------------- 5. Mappe-Seite (mappe-X.html) -------------------------------------------------------------------------- */ .mappe__header { text-align: center; margin-bottom: var(--space-xl); padding-bottom: var(--space-lg); border-bottom: 2px solid var(--color-border); } /* E5: Aktentitel im Header — linksbuendig auf Navy, ohne Pergament-Kachel */ .mappe__titel { font-family: var(--akte-font-display); font-size: 32px; color: #fff; text-align: left; letter-spacing: -.3px; line-height: 1.15; margin: 0 0 10px; } /* E5: Beschreibung als handschriftliche Randnotiz am Goldstrich */ .mappe__beschreibung { font-family: var(--font-fragebogen); font-style: normal; font-size: 18px; color: var(--akte-gold-light); border-left: 2px solid var(--color-secondary); padding-left: 12px; display: inline-block; max-width: 640px; margin-inline: auto; margin-top: var(--space-sm); text-align: left; } /* v3.8 U9: Einstieg-Block zentriert */ .mappe__einstieg { text-align: center; max-width: 800px; margin-inline: auto; padding: var(--space-xl, 2rem) var(--space-lg, 1.5rem); } /* E5: Leitfrage als gerahmter Handschrift-Block (gewinnender Ort gegenueber der allgemeinen .einstieg__problemstellung-Regel in Sektion 17) */ .mappe__einstieg .einstieg__problemstellung { display: inline-block; padding: 14px 28px; border: 2px solid var(--color-secondary); background: rgba(201, 168, 76, .08); font-family: var(--font-fragebogen); font-size: 22px; color: #fff; font-weight: 600; margin-top: 18px; line-height: 1.4; } /* E5: Fussleiste als Navy-Band ueber die volle Mappenbreite (negative Margins heben das main-Padding auf), Buttons als Gold-Konturstempel. */ .mappe__navigation { display: flex; justify-content: space-between; align-items: center; background: var(--color-primary); padding: 16px 24px; margin: 40px -32px -60px; border-top: 4px solid var(--color-secondary); gap: var(--space-sm); flex-wrap: wrap; } .mappe__nav-btn { padding: 8px 16px; background: transparent; color: var(--akte-gold-light); font-family: var(--akte-font-mono); font-size: 12px; font-weight: bold; letter-spacing: 1.5px; text-transform: uppercase; border: 1.5px solid var(--color-secondary); border-radius: 2px; min-height: 0; transition: background-color var(--transition-fast); } #nav-mappe-info { font-family: var(--akte-font-mono); font-size: 11px; color: rgba(255, 255, 255, .6); letter-spacing: 1.5px; } .mappe__nav-btn--disabled { opacity: 0.5; pointer-events: none; } /* -------------------------------------------------------------------------- 5b. E5: Leitfragen-Strip + Stempelfeld (Engine-gerendert, s. escape-engine.js) -------------------------------------------------------------------------- */ .rd-leitfrage-strip { position: sticky; top: 0; z-index: 30; background: #2a2218; border-bottom: 1px solid #4a3e2c; padding: 10px 32px; display: flex; align-items: center; gap: 16px; box-shadow: 0 4px 10px rgba(0, 0, 0, .06); } .rd-leitfrage-strip__label { font-family: var(--akte-font-mono); font-size: 10px; letter-spacing: 2px; color: var(--akte-muted); text-transform: uppercase; flex-shrink: 0; } .rd-leitfrage-strip__text { font-family: var(--font-fragebogen); font-size: 17px; color: var(--akte-gold-light); font-weight: 600; flex: 1; line-height: 1.3; } /* Stempelfeld statt Fortschrittsbalken: eine Zelle je Aufgabe */ .rd-stempelfeld { display: flex; gap: 5px; flex-shrink: 0; } .rd-stempelfeld__cell { width: 24px; height: 24px; border: 1.5px solid var(--akte-border); background: transparent; display: flex; align-items: center; justify-content: center; font-family: var(--akte-font-mono); font-size: 12px; color: var(--akte-muted); } .rd-stempelfeld__cell--solved { border-color: var(--color-success); background: rgba(45, 106, 79, .12); color: var(--color-success); } .rd-stempelfeld__cell--solved::before { content: "✓"; transform: rotate(-8deg); font-weight: 700; font-size: 16px; } /* -------------------------------------------------------------------------- 6. Fortschrittsbalken -------------------------------------------------------------------------- */ .fortschritt { width: 100%; max-width: 400px; margin-inline: auto; margin-top: var(--space-md); } .fortschritt__label { font-size: var(--text-sm); color: var(--color-muted); text-align: center; margin-bottom: var(--space-xs); } .fortschritt__track { width: 100%; height: 12px; background-color: var(--color-surface-dark); border-radius: 6px; overflow: hidden; } .fortschritt__bar { height: 100%; background-color: var(--color-secondary); border-radius: 6px; width: 0%; transition: width var(--transition-slow); } /* -------------------------------------------------------------------------- 7. Aufgaben-Karten -------------------------------------------------------------------------- */ .aufgabe { background-color: var(--color-surface); border: 2px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-lg); margin-bottom: var(--space-xl); box-shadow: var(--shadow-card); } .aufgabe--solved { border-color: var(--color-success); } /* E5: Kopfzeile ohne Trennlinie — die Aufgabenkarte traegt die Struktur */ .aufgabe__header { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; padding: 0; } .aufgabe__nummer { font-size: var(--text-sm); color: var(--color-muted); font-weight: bold; } /* E5: Typ-Kennzeichnung als dezenter Aktenvermerk statt Farb-Pille */ .aufgabe__typ-badge { background: transparent; color: var(--akte-muted); font-family: var(--akte-font-mono); font-size: 10px; padding: 0; border: none; border-radius: var(--radius-sm); letter-spacing: 1.5px; text-transform: uppercase; margin-left: auto; } .aufgabe__titel { font-family: var(--font-heading); font-size: var(--text-xl); color: var(--color-primary); margin-bottom: var(--space-md); } .aufgabe__frage { font-size: var(--text-lg); margin-bottom: var(--space-lg); line-height: 1.5; } .aufgabe__body { padding-left: 0; margin-bottom: 10px; font-size: 14px; } /* Multiple-Choice-Optionen */ .aufgabe__optionen { display: flex; flex-direction: column; gap: 6px; } .aufgabe__option { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md); background-color: #fff; border: 2px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; transition: border-color var(--transition-fast), background-color var(--transition-fast); } .aufgabe__option:hover { border-color: var(--color-primary); background-color: var(--color-background); } .aufgabe__option--selected { border-color: var(--color-secondary); background-color: rgba(201, 168, 76, 0.1); } .aufgabe__option--correct { border-color: var(--color-success); background-color: rgba(45, 106, 79, 0.1); } .aufgabe__option--incorrect { border-color: var(--color-error); background-color: rgba(155, 34, 38, 0.1); } .aufgabe__input { flex-shrink: 0; } .aufgabe__label { flex: 1; } /* Zuordnung (Dropdown) */ .aufgabe__zuordnung { display: flex; flex-direction: column; gap: 6px; } .aufgabe__zuordnung-zeile { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 6px 10px; font-size: 13px; background: rgba(0, 0, 0, .2); border: 1px solid #4a3e2c; border-radius: 3px; color: #e0d8c5; } .aufgabe__zuordnung-begriff { font-weight: bold; } .aufgabe__zuordnung-pfeil { color: var(--akte-muted); font-size: 14px; } .aufgabe__zuordnung-select { width: 100%; font-family: var(--akte-font-body); font-size: 13px; padding: 4px 6px; border: 1px solid #4a3e2c; border-radius: 2px; background: #1a1410; color: #e0d8c5; min-height: 0; min-width: 0; } .aufgabe__zuordnung-zeile--correct { border-color: var(--color-success); background-color: rgba(45, 106, 79, 0.05); } .aufgabe__zuordnung-zeile--incorrect { border-color: var(--color-error); background-color: rgba(155, 34, 38, 0.05); } /* Lueckentext — E5: Luecke als goldener Markierstreifen (Font/Farbe s. Sektion 19c) */ .aufgabe__lueckentext { font-size: 14px; line-height: 1.65; color: #e0d8c5; } /* Optik der Luecke steht in Sektion 19c — nur dort schlaegt sie die spaetere --pool-Regel (Antwortpool-Modus). */ .aufgabe__luecke { display: inline-block; min-width: 120px; border: none; border-bottom: 2px dashed var(--color-primary); background: transparent; text-align: center; padding: var(--space-xs); margin: 0 var(--space-xs); } .aufgabe__luecke:focus { border-bottom-style: solid; border-bottom-color: var(--color-secondary); } .aufgabe__luecke--correct { border-bottom-color: var(--color-success); border-bottom-style: solid; } .aufgabe__luecke--incorrect { border-bottom-color: var(--color-error); border-bottom-style: solid; } /* v3.6b: Antwortpool (Drag & Drop) */ .aufgabe__antwortpool { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; margin-top: 0.8em; background: #f4f1eb; border: 1px dashed #c4b89a; border-radius: 4px; min-height: 2.2em; transition: border-color 0.15s, background 0.15s; } .aufgabe__antwortpool--dragover { border-color: var(--color-primary, #1B2A4A); background: rgba(27, 42, 74, 0.04); } .aufgabe__pool-wort { display: inline-block; padding: 2px 8px; background: #e8e2d4; color: var(--color-text, #2C2416); border: 1px solid #b8a88a; border-radius: 3px; font-family: var(--font-code); font-size: 0.85em; line-height: 1.4; cursor: grab; transition: opacity 0.15s, transform 0.1s, box-shadow 0.1s; user-select: none; } .aufgabe__pool-wort:hover { background: #d9d0be; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,0.12); } .aufgabe__pool-wort--selected { outline: 2px solid #5a7a4a; outline-offset: 1px; background: #d4e0cc; } .aufgabe__pool-wort--used { opacity: 0.25; cursor: default; transform: none; box-shadow: none; } .aufgabe__pool-wort--dragging { opacity: 0.4; } /* v3.6b: Luecken im Pool-Modus — inline, lesefluss-freundlich */ .aufgabe__luecke--pool { display: inline; padding: 0 4px; border: none; border-bottom: 1.5px dashed var(--color-primary); background: transparent; text-align: center; font-family: inherit; font-size: inherit; line-height: inherit; cursor: pointer; vertical-align: baseline; min-width: 3em; transition: border-color 0.15s, background 0.15s; } /* Leere Luecke: Unterstrich-Platzhalter */ .aufgabe__luecke--pool:empty::after { content: '\00a0\00a0\00a0\00a0\00a0\00a0'; opacity: 0.3; } .aufgabe__luecke--pool.aufgabe__luecke--dragover { border-bottom-color: var(--color-secondary, #6b8e5a); background: rgba(107, 142, 90, 0.08); } .aufgabe__luecke--pool.aufgabe__luecke--filled { border-bottom-style: solid; background: rgba(232, 220, 200, 0.5); font-family: var(--font-code); cursor: grab; } .aufgabe__luecke--pool.aufgabe__luecke--correct { border-bottom-color: var(--color-success); border-bottom-style: solid; } .aufgabe__luecke--pool.aufgabe__luecke--incorrect { border-bottom-color: var(--color-error); border-bottom-style: solid; } .aufgabe__luecke--pool.aufgabe__luecke--dragging { opacity: 0.4; } /* Reihenfolge */ /* Reihenfolge — E5: kompakte Karteizeilen mit Gold-Nummernscheibe */ .aufgabe__reihenfolge { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-direction: column; gap: 4px; } .aufgabe__reihenfolge-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; font-size: 13px; background: rgba(0, 0, 0, .2); border: 1px solid #4a3e2c; border-radius: 3px; color: #e0d8c5; } .aufgabe__reihenfolge-nummer { width: 20px; height: 20px; flex-shrink: 0; background: var(--color-secondary); color: #1a1410; border-radius: 50%; min-width: 2rem; text-align: center; display: inline-flex; align-items: center; justify-content: center; font-family: var(--akte-font-mono); font-size: 10px; font-weight: 700; } .aufgabe__reihenfolge-text { flex: 1; line-height: 1.4; } .aufgabe__reihenfolge-buttons { display: flex; flex-direction: column; gap: 1px; flex-shrink: 0; } .aufgabe__reihenfolge-btn { width: 22px; height: 16px; padding: var(--space-xs) var(--space-sm); background: var(--color-secondary); color: #1a1410; border: none; border-radius: 2px; font-size: 9px; line-height: 1; cursor: pointer; min-height: 0; min-width: 0; } /* Freitext-Code */ .aufgabe__freitext { width: 100%; } .aufgabe__textarea { width: 100%; min-height: 90px; padding: 10px; border: 1px solid #4a3e2c; border-radius: 3px; background: rgba(0, 0, 0, .3); color: #e0d8c5; font-family: var(--akte-font-body); font-size: 14px; line-height: 1.5; resize: vertical; } /* Submit-Button fuer Aufgaben — E5: Notiz-Stempel statt Vollflaechen-Button. Beschriftung kommt aus ::before, der Engine-Text im Button wird ausgeblendet. */ .aufgabe__submit { display: inline-flex; align-items: center; gap: var(--space-sm); margin-top: 4px; color: #fff; border: none; border-radius: 2px; font-weight: bold; letter-spacing: 1.5px; text-transform: uppercase; min-height: 0; cursor: pointer; transition: background-color var(--transition-fast); } .aufgabe__submit::before { content: "Antwort eintragen"; } .aufgabe__submit > * { display: none; } .aufgabe__submit:disabled { opacity: 0.5; cursor: not-allowed; } /* -------------------------------------------------------------------------- 8. Feedback-Bereiche -------------------------------------------------------------------------- */ .aufgabe__feedback { margin-top: var(--space-md); padding: var(--space-md); border-radius: var(--radius-sm); font-weight: bold; display: none; /* Standardmaessig versteckt */ } .aufgabe__feedback--visible { display: block; } .aufgabe__feedback--success { background-color: rgba(45, 106, 79, 0.1); border: 2px solid var(--color-success); color: var(--color-success); } .aufgabe__feedback--error { background-color: rgba(155, 34, 38, 0.1); border: 2px solid var(--color-error); color: var(--color-error); } .aufgabe__feedback--info { background-color: rgba(74, 111, 165, 0.1); border: 2px solid var(--color-tipp); color: var(--color-tipp); } /* -------------------------------------------------------------------------- 9. Tipp-Bereiche -------------------------------------------------------------------------- */ .aufgabe__tipps { margin-top: var(--space-lg); border-top: 1px dashed var(--color-border); padding-top: var(--space-md); } .tipp { margin-bottom: var(--space-sm); } .tipp__trigger { display: inline-flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); background-color: var(--color-tipp); color: #fff; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: bold; transition: background-color var(--transition-fast); width: 100%; justify-content: flex-start; } .tipp__trigger::before { content: "💡"; } .tipp__trigger:hover { background-color: #3a5f95; } .tipp__trigger--used { opacity: 0.7; } .tipp__inhalt { max-height: 0; overflow: hidden; transition: max-height var(--transition-normal), padding var(--transition-normal); background-color: rgba(74, 111, 165, 0.05); border-radius: 0 0 var(--radius-sm) var(--radius-sm); padding: 0 var(--space-md); } .tipp__inhalt--visible { max-height: 200px; padding: var(--space-md); } .tipp--stufe-1 .tipp__trigger { background-color: var(--color-tipp); } .tipp--stufe-2 .tipp__trigger { background-color: #3e609a; } .tipp--stufe-3 .tipp__trigger { background-color: #2f4a7a; } /* -------------------------------------------------------------------------- 10. Code-Eingabe -------------------------------------------------------------------------- */ .code-eingabe { text-align: center; margin-top: var(--space-xl); padding: var(--space-xl); background-color: var(--color-surface); border: 2px dashed var(--color-secondary); border-radius: var(--radius-lg); } .code-eingabe__label { font-family: var(--font-heading); font-size: var(--text-xl); color: var(--color-primary); margin-bottom: var(--space-md); display: block; } .code-eingabe__label::before { content: "🔑 "; } .code__input { font-family: var(--font-code); font-size: var(--text-2xl); text-align: center; text-transform: uppercase; letter-spacing: 0.3em; padding: var(--space-md) var(--space-lg); border: 3px solid var(--color-primary); border-radius: var(--radius-md); max-width: 300px; width: 100%; } .code__submit { display: inline-flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-md); padding: var(--space-md) var(--space-xl); background-color: var(--color-secondary); color: var(--color-primary); font-weight: bold; font-size: var(--text-lg); border-radius: var(--radius-md); transition: background-color var(--transition-fast), transform var(--transition-fast); } .code__submit:hover { background-color: var(--color-secondary-light); transform: scale(1.02); } .code-eingabe--success { border-color: var(--color-success); background-color: rgba(45, 106, 79, 0.05); } .code-eingabe--error { border-color: var(--color-error); } /* -------------------------------------------------------------------------- 11. Narrativ-Bereich -------------------------------------------------------------------------- */ /* E5: Briefing-Notiz auf dem Schreibtisch — ohne Kachel, ohne Schriftrollen-Icon */ .narrativ { padding: 0 8px 20px; margin: 0 0 20px; font-style: normal; line-height: 1.8; } #narrativ-text { font-family: var(--akte-font-mono); font-size: 14px; line-height: 1.6; color: #f0dfb4; max-width: 720px; margin: 0; } /* -------------------------------------------------------------------------- 12. Lehrkraft-Bereich -------------------------------------------------------------------------- */ .lehrkraft__gate { text-align: center; padding: var(--space-2xl); } .lehrkraft__gate-label { font-family: var(--font-heading); font-size: var(--text-xl); margin-bottom: var(--space-md); } .lehrkraft__loesungen { margin-top: var(--space-xl); } .lehrkraft__mappe-block { background-color: var(--color-surface); border: 2px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-lg); margin-bottom: var(--space-lg); } .lehrkraft__code-display { font-family: var(--font-code); font-size: var(--text-2xl); color: var(--color-secondary); background-color: var(--color-primary); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); display: inline-block; letter-spacing: 0.2em; } .lehrkraft__controls { display: flex; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 2px solid var(--color-border); } .lehrkraft__btn { padding: var(--space-sm) var(--space-lg); background-color: var(--color-primary); color: #fff; border-radius: var(--radius-sm); font-weight: bold; transition: background-color var(--transition-fast); } .lehrkraft__btn:hover { background-color: var(--color-primary-light); } .lehrkraft__btn--danger { background-color: var(--color-error); } .lehrkraft__btn--danger:hover { background-color: #7a1a1e; } .lehrkraft__btn--unlock { margin-top: var(--space-sm); margin-bottom: var(--space-md); } .lehrkraft__aufgabe-detail { margin-bottom: var(--space-md); padding-left: var(--space-md); border-left: 3px solid var(--color-border); } .lehrkraft__tipp-liste { list-style: disc; padding-left: var(--space-lg); } .lehrkraft__gate-hinweis { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); } .lehrkraft__inhalt--hidden { display: none; } .lehrkraft__gate--hidden { display: none; } /* -------------------------------------------------------------------------- 13. Animationen (Keyframes) -------------------------------------------------------------------------- */ /* Richtige Antwort – gruener Glow */ @keyframes richtig-glow { 0% { box-shadow: 0 0 0 0 rgba(45, 106, 79, 0.4); } 50% { box-shadow: 0 0 20px 4px rgba(45, 106, 79, 0.3); } 100% { box-shadow: 0 0 0 0 rgba(45, 106, 79, 0); } } .animate-success { animation: richtig-glow 600ms ease-out; } /* Falsche Antwort – rotes Shake */ @keyframes falsch-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } } .animate-error { animation: falsch-shake 400ms ease-out; } /* Mappe freigeschaltet – goldener Effekt */ @keyframes mappe-unlock { 0% { transform: scale(0.95); opacity: 0.8; border-color: var(--color-border); } 50% { transform: scale(1.02); border-color: var(--color-secondary); } 100% { transform: scale(1); opacity: 1; border-color: var(--color-success); } } .animate-unlock { animation: mappe-unlock 800ms ease-out; } /* -------------------------------------------------------------------------- 14. Responsive Anpassungen -------------------------------------------------------------------------- */ /* Mobile (< 640px) */ @media (max-width: 639px) { .aufgabe__zuordnung-zeile { grid-template-columns: 1fr; gap: var(--space-xs); } .aufgabe__zuordnung-pfeil { transform: rotate(90deg); text-align: center; } .mappe__navigation { flex-direction: column; } .mappe__nav-btn { width: 100%; text-align: center; } .code__input { font-size: var(--text-xl); letter-spacing: 0.15em; } } /* Tablet (640px – 1024px) */ @media (min-width: 640px) { .mappen-uebersicht { grid-template-columns: repeat(2, 1fr); } } /* Desktop (> 1024px) */ @media (min-width: 1024px) { .mappen-uebersicht { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } } /* -------------------------------------------------------------------------- 15. v3.5: Erarbeitung 2/3-1/3 Grid (Material dominant, Fragebogen sticky) -------------------------------------------------------------------------- */ /* E5: Mappen-Kolumne — einspaltig als Basis (tablet-tauglich, kein Sticky-Spalt unter 1024px), zweispaltig ab 1024px: Material links, Sicherungsheft sticky rechts. */ main.mappe { max-width: 760px; padding: 28px 32px 60px; } .mappe__erarbeitung { display: block; } @media (min-width: 1024px) { main.mappe { max-width: 1320px; padding: 28px 40px 60px; } .mappe__erarbeitung { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 36px; align-items: start; } .erarbeitung__materialien { min-width: 0; max-width: none; margin: 0; } .erarbeitung__aufgaben { position: sticky; top: 88px; align-self: start; max-height: calc(100vh - 110px); overflow-y: auto; margin-top: 0; } } /* Wider layout for 2-column mode */ @media (min-width: 1024px) { .mappe { max-width: var(--max-width-wide, 1400px); } } /* -------------------------------------------------------------------------- 16. v1: Material-Typ-Styles (BEM) -------------------------------------------------------------------------- */ /* Basis — E5: Aktenpapier mit Schlagschatten statt gerundeter Leinen-Kachel */ .material { margin: 36px 0; padding: 24px 28px; background: var(--akte-paper); position: relative; box-shadow: 0 2px 8px rgba(20, 12, 4, .08); } /* Kontext-Praefix ist NOETIG, nicht kosmetisch: der RTL-Block am Dateiende setzt `.material * { font-family: inherit }` und steht spaeter in der Kaskade. Ohne das Praefix (0,2,0 statt 0,1,0) faellt der Aktentitel auf den Fliesstext zurueck. Gilt ebenso fuer .material__flag. */ .material .material__titel { font-family: var(--akte-font-display); font-size: 24px; color: var(--akte-gold-light); margin: 8px 0 14px; line-height: 1.2; letter-spacing: -.2px; } /* Quellenzeile sitzt auf dem dunklen Aktengrund (--akte-paper #2A211A), nicht auf hellem Pergament. Mit --color-muted (#6b6358) waere sie dunkel-auf-dunkel: gemessen 2,67:1, also unter WCAG-AA. --akte-muted ist die Rolle "gedaempfter Text auf Aktengrund" und bringt 7,04:1 — dezenter als der Fliesstext (12:1), aber lesbar. Gleiche Klasse von Befund wie der frueher gefixte figcaption-Kontrast. */ .material__quelle { font-size: 0.85em; color: var(--akte-muted, #B8AC95); } /* v3.5b: Material-Flag (M1, M2, ...) — E5: Reiter auf der Aktenkante */ .material .material__flag { position: absolute; top: -1px; left: 16px; background: var(--color-primary); color: #fff; font-family: var(--akte-font-mono); font-size: 11px; font-weight: 600; padding: 4px 12px; letter-spacing: 1.5px; line-height: 1.3; min-height: auto; min-width: auto; text-transform: uppercase; } /* Darstellungstext (Aktenpapier-Grund kommt aus .material) */ .material--darstellung { border-left: 4px solid var(--color-primary); } /* Quellentext (Cremepapier-Grund + Rahmen s. E5-Block am Sektionsende) */ .material--quelle { font-style: italic; } /* v3.5b: Blocksatz fuer Textmaterialien */ .material--darstellung .material__inhalt, .material--quelle .material__inhalt, .material--tagebuch .tagebuch__text { text-align: justify; hyphens: auto; -webkit-hyphens: auto; } .material--quelle cite { display: block; margin-top: var(--space-sm); font-style: normal; } /* Bildquelle — E5: Foto im Abzugsrahmen, Bildunterschrift handschriftlich */ .material--bild img { max-width: 100%; height: auto; border-radius: var(--radius-sm); } .material--bild { background: transparent; border: none; box-shadow: none; padding: 0; text-align: center; } .material--bild figcaption { font-family: var(--font-fragebogen); font-size: 16px; /* nicht hart Dunkelbraun: sonst braun-auf-braun, --akte-ink adaptiert */ color: var(--akte-ink); text-align: left; margin-top: 14px; padding: 0 4px; } /* Karte — E5: Kartenblatt im Goldrahmen, linksbuendig */ .material--karte { background: transparent; border: none; box-shadow: none; padding: 0; text-align: left; } .material--karte img, .material--karte svg { max-width: 100%; height: auto; } /* Zeitleiste */ .material--zeitleiste .zeitleiste__liste { list-style: none; padding-left: var(--space-md); border-left: 3px solid var(--color-primary); } .zeitleiste__liste li { margin-bottom: var(--space-sm); position: relative; } .zeitleiste__liste li::before { content: ''; position: absolute; left: calc(-1 * var(--space-md) - 7px); top: 0.5em; width: 12px; height: 12px; border-radius: 50%; background: var(--color-primary); } .zeitleiste__datum { font-weight: bold; display: block; } /* Statistik */ .material--statistik table { width: 100%; border-collapse: collapse; } .material--statistik th, .material--statistik td { padding: var(--space-xs) var(--space-sm); border: 1px solid var(--color-border); text-align: left; } .material--statistik th { background: var(--color-surface); font-weight: bold; } /* Tagebuch (Cremepapier-Grund + Rahmen s. E5-Block am Sektionsende) */ .material--tagebuch { font-family: 'Georgia', serif; } .material--tagebuch .tagebuch__text { line-height: 1.8; } /* ── E5: Akten-Materialoptik (absorbiert aus vendor/redesign.css) ───────── Reihenfolge ist bewusst: die Typ-Regeln muessen NACH .material stehen (gleiche Spezifitaet), der Media-Platzhalter ganz zuletzt. */ .material p, .material__inhalt p { font-family: var(--akte-font-body); font-size: var(--akte-fs-body); line-height: 1.7; margin-bottom: 12px; hyphens: auto; text-align: justify; } /* Quelle / Tagebuch — Cremepapier (im Akten-Look dunkel, ohne Linien-Raster) */ .material--tagebuch, .material--quelle { background: #2a2218; border: 1px solid #4a3e2c; border-left: none; } .material--tagebuch .material__titel, .material--quelle .material__titel { font-style: italic; } .material--tagebuch .tagebuch__ort { display: block; font-family: var(--font-fragebogen); font-size: 16px; color: var(--akte-gold-light); margin-bottom: 14px; text-align: right; border-bottom: 1px dashed #4a3e2c; padding-bottom: 8px; } .material--tagebuch .tagebuch__text p { font-style: italic; color: #d6c39a; line-height: 1.85; font-size: calc(var(--akte-fs-body) + 1px); } /* Karte — Kartenblatt im Goldrahmen mit Gitternetz */ .material--karte .material__flag { top: -1px; left: 0; position: relative; display: inline-block; margin-bottom: 6px; } .material--karte .rd-karte-frame { background: linear-gradient(135deg, #f5e6c0 0%, #e8d29a 100%); border: 2px solid var(--color-secondary); height: auto; min-height: 120px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; color: #5a4a2a; font-family: var(--akte-font-mono); font-size: 13px; letter-spacing: 1.5px; margin-top: 8px; } .material--karte.material--karte--dark .rd-karte-frame { background: linear-gradient(135deg, #2a3f5f 0%, #1B2A4A 100%); border-color: #0c1424; color: #d6c39a; } .rd-karte-frame::before { content: ""; position: absolute; inset: 0; opacity: .25; background-image: repeating-linear-gradient(0deg, transparent 0 39px, currentColor 39px 40px), repeating-linear-gradient(90deg, transparent 0 39px, currentColor 39px 40px); } .material--karte figcaption { font-family: var(--akte-font-body); font-size: 14px; color: var(--akte-muted); margin-top: 10px; line-height: 1.5; } .material--karte figcaption strong { color: var(--akte-ink); display: block; margin-bottom: 6px; font-style: normal; line-height: 1.4; } .material--karte figcaption em { display: block; font-style: italic; line-height: 1.5; } /* Bild — Foto im Abzugsrahmen (leicht gekippt, mit Passepartout) */ .material--bild .material__flag { top: -1px; left: 0; position: relative; display: inline-block; margin-bottom: 6px; } .material--bild .rd-foto-mount { display: inline-block; background: #fafafa; padding: 12px 12px 50px; box-shadow: 0 8px 18px rgba(20, 12, 4, .28); transform: rotate(-.6deg); margin-top: 8px; } .material--bild .rd-foto-stage { width: auto; max-width: 100%; height: auto; min-height: 120px; background: linear-gradient(135deg, #4a4640 0%, #2a2622 100%); color: #a8a098; display: flex; align-items: center; justify-content: center; font-family: var(--akte-font-mono); font-size: 13px; letter-spacing: 1.5px; } /* Rahmen-Adaption: Bild-Frames wachsen mit dem Artefakt-Aspekt; das Bild bleibt intrinsisch + gekappt, nie Overflow (Foto) / Crop (Karte) / Misfit (Tafelbild). */ .material--bild .rd-foto-stage img, .material--karte .rd-karte-frame img { display: block; width: auto; height: auto; max-width: min(480px, 100%); max-height: 520px; } .sicherung__tafelbild-frame img, .sicherung__tafelbild-frame svg { display: block; max-width: 100%; height: auto; } /* Statistik: der Producer authort das inline-SVG mit dunklen Text-Fills fuer HELLEN Grund. Im Akten-Look waere das dunkel-auf-dunkel (gemessen 1.8-2.1:1). Loesung: der Chart sitzt auf einer hellen "Daten-Papier"-Karte — alle authored Farben bleiben erhalten und legibel. */ .material--statistik .statistik__grafik { background: #f7f3e8; border: 1px solid rgba(0, 0, 0, 0.10); border-radius: 8px; padding: 12px 14px; margin: 10px 0 6px; } .material--statistik .statistik__grafik svg { display: block; max-width: 100%; height: auto; margin: 0 auto; } /* Grauer Platzhalter fuer Materialien ohne echte src (frueher media-placeholder.css). Muss NACH den .rd-foto-stage-/.rd-karte-frame-img-Regeln stehen — gleiche Spezifitaet, die spaetere Regel gewinnt. */ .material--bild img[src=""], .material--bild img:not([src]), .material--karte img[src=""], .material--karte img:not([src]) { display: block; width: 100%; min-height: 180px; background: #c8c8c8; content: ''; } /* -------------------------------------------------------------------------- 17. v1: Einstieg + Sicherung Styles -------------------------------------------------------------------------- */ /* E5: Einstieg ohne Leinen-Kachel — der Akten-Look traegt den Block selbst */ .mappe__einstieg { margin-bottom: var(--space-xl); padding: 28px 0; border-radius: var(--radius-md); } .mappe__einstieg:empty { display: none; } .einstieg__narrativ { font-family: var(--akte-font-body); font-style: italic; font-size: calc(var(--akte-fs-body) + 2px); color: var(--akte-ink); line-height: 1.65; margin-bottom: 14px; } .einstieg__problemstellung { font-size: 1.1em; font-weight: 600; margin-top: var(--space-md); } /* E5: Sicherung ohne Kachel, mit Phasen-Vermerk (game-agnostisch) */ .mappe__sicherung { margin-top: 40px; padding: 32px 0; border-radius: var(--radius-md); } .mappe__sicherung::before { content: "PHASE 3 · SICHERUNG"; display: block; font-family: var(--akte-font-mono); font-size: 11px; letter-spacing: 2.5px; color: var(--akte-muted); text-transform: uppercase; margin-bottom: 14px; text-align: center; } .sicherung__tafelbild { margin-bottom: var(--space-lg); } /* egg-v2 Tafelbild-Sicherung */ .sicherung__tafelbild-frame { width: 100%; min-height: 120px; border: 1px solid var(--color-secondary); border-radius: 4px; background: var(--akte-paper); } .sicherung__tafelbild svg { max-width: 100%; height: auto; } .sicherung__zusammenfassung { margin-bottom: var(--space-md); } .sicherung__ueberleitung { font-style: italic; color: var(--color-muted); } /* -------------------------------------------------------------------------- 17b. v3: Tafelbild-Erweiterungen (Merksaetze, Kernerkenntnisse, Hefteintrag) -------------------------------------------------------------------------- */ .sicherung__merksaetze { margin-top: var(--space-lg); padding: var(--space-md); background-color: rgba(37, 99, 235, 0.05); border-left: 4px solid var(--tb-kernbegriff, #2563eb); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .sicherung__merksaetze h3 { font-family: var(--font-heading); font-size: var(--text-lg); color: var(--color-primary); margin-bottom: var(--space-sm); } .sicherung__merksaetze ul { list-style: none; padding-left: 0; } .sicherung__merksaetze li { padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-border); line-height: 1.6; } .sicherung__merksaetze li:last-child { border-bottom: none; } .sicherung__kernerkenntnisse { margin-top: var(--space-lg); padding: var(--space-md); background-color: rgba(5, 150, 105, 0.05); border-left: 4px solid var(--color-success); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .sicherung__kernerkenntnisse h3 { font-family: var(--font-heading); font-size: var(--text-lg); color: var(--color-primary); margin-bottom: var(--space-sm); } .sicherung__kernerkenntnisse ul { list-style: disc; padding-left: var(--space-lg); } .sicherung__kernerkenntnisse li { padding: var(--space-xs) 0; line-height: 1.6; } .sicherung__hefteintrag { margin-top: var(--space-lg); padding: var(--space-lg); background-color: #fff; border: 2px solid var(--color-secondary); border-radius: var(--radius-md); position: relative; } .sicherung__hefteintrag::before { content: "📓"; position: absolute; top: var(--space-sm); right: var(--space-sm); font-size: var(--text-xl); } .sicherung__hefteintrag h3 { font-family: var(--font-heading); font-size: var(--text-lg); color: var(--color-primary); margin-bottom: var(--space-sm); } .sicherung__hefteintrag p { line-height: 1.8; font-size: var(--text-base); } .sicherung__reflexionsimpuls { margin-top: var(--space-md); font-size: var(--text-base); color: var(--color-muted); } /* v3.9.2: Historisches Zitat */ .sicherung__zitat { margin: var(--space-lg) 0; padding: var(--space-md) var(--space-lg); background-color: #fdf6e3; border-left: 4px solid var(--color-primary); border-radius: var(--radius-sm); } .sicherung__zitat-text { margin: 0; font-family: var(--font-serif, Georgia, serif); font-size: var(--text-lg); font-style: italic; line-height: 1.6; color: var(--color-text); quotes: "„" """ "‚" "'"; } .sicherung__zitat-text::before { content: open-quote; } .sicherung__zitat-text::after { content: close-quote; } .sicherung__zitat-urheber { margin-top: var(--space-sm); font-size: var(--text-sm); font-weight: 600; color: var(--color-primary); text-align: right; } .sicherung__zitat-kontext { margin-top: var(--space-xs); font-size: var(--text-sm); line-height: 1.5; color: var(--color-muted); font-style: normal; } /* -------------------------------------------------------------------------- 17c. v3.1: Hefteintrag (SCPL — CSS-basiert) -------------------------------------------------------------------------- */ :root { --he-line-h: 32px; --he-bg: #fefcf3; --he-line: #c8d4e0; --he-title: #1a365d; --he-text: #2d3748; --he-accent-red: #c53030; --he-accent-blue: #2b6cb0; --he-accent-green: #276749; --he-arrow: #718096; --he-merk-bg: #fffde7; --he-merk-border: #f0c929; --he-font-hand: 'Caveat', cursive; --he-font-clean: 'Patrick Hand', cursive; --he-shadow: 0 2px 12px rgba(0,0,0,0.08); } .hefteintrag { background: var(--he-bg); border: 1px solid #d4c5a0; border-radius: 4px; box-shadow: var(--he-shadow), inset 0 0 30px rgba(0,0,0,0.02); padding: 0 2.5rem 0 3.5rem; position: relative; background-image: repeating-linear-gradient( transparent, transparent calc(var(--he-line-h) - 1px), var(--he-line) calc(var(--he-line-h) - 1px), var(--he-line) var(--he-line-h) ); background-size: 100% var(--he-line-h); background-position: 0 0; } .hefteintrag::before { content: ''; position: absolute; left: 2.5rem; top: 0; bottom: 0; width: 2px; background: #e88c8c; opacity: 0.5; } .hefteintrag::after { content: ''; position: absolute; left: 0.8rem; top: 50%; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #bbb; transform: translateY(-50%); } .hefteintrag__datum { position: absolute; top: 0; right: 1rem; font-family: var(--he-font-clean); font-size: 0.9rem; color: #a0aec0; line-height: var(--he-line-h); height: var(--he-line-h); } .hefteintrag__stundenfrage { font-family: var(--he-font-hand); font-size: 1.6rem; font-weight: 700; color: var(--he-title); text-decoration: underline; text-decoration-color: var(--he-accent-blue); text-underline-offset: 4px; line-height: var(--he-line-h); padding-top: var(--he-line-h); min-height: calc(var(--he-line-h) * 2); } .hefteintrag__inhalt { font-family: var(--he-font-clean); font-size: 1.1rem; color: var(--he-text); line-height: var(--he-line-h); } .hefteintrag__fachbegriff { font-family: var(--he-font-hand); font-weight: 700; font-size: 1.15rem; } .hefteintrag__fachbegriff--rot { color: var(--he-accent-red); } .hefteintrag__fachbegriff--blau { color: var(--he-accent-blue); } .hefteintrag__fachbegriff--gruen { color: var(--he-accent-green); } .hefteintrag__pfeil { display: flex; align-items: center; gap: 0.3rem; color: var(--he-arrow); font-family: var(--he-font-clean); font-size: 0.95rem; line-height: var(--he-line-h); height: var(--he-line-h); padding-left: 0.2rem; } .hefteintrag__pfeil svg { width: 14px; height: 18px; flex-shrink: 0; } .hefteintrag__spacer { height: var(--he-line-h); } .hefteintrag__spacer-half { height: calc(var(--he-line-h) / 2); } .hefteintrag__gegenueber { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; line-height: var(--he-line-h); } .hefteintrag__gegenueber-col { padding: 0 0.4rem; } .hefteintrag__gegenueber-col h4 { font-family: var(--he-font-hand); font-size: 1.15rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; line-height: var(--he-line-h); } .hefteintrag__gegenueber-col:first-child h4 { color: var(--he-accent-red); text-decoration-color: var(--he-accent-red); } .hefteintrag__gegenueber-col:last-child h4 { color: var(--he-accent-blue); text-decoration-color: var(--he-accent-blue); } .hefteintrag__gegenueber-col ul { list-style: none; padding: 0; font-family: var(--he-font-clean); font-size: 1rem; line-height: var(--he-line-h); } .hefteintrag__gegenueber-vs { display: flex; align-items: center; justify-content: center; font-family: var(--he-font-hand); font-size: 1.3rem; font-weight: 700; color: #a0aec0; padding: 0 0.2rem; } .hefteintrag__merkbox { background: var(--he-merk-bg); border: 2px solid var(--he-merk-border); border-radius: 4px; padding: 0 0.8rem; margin: 0; line-height: var(--he-line-h); } .hefteintrag__merkbox-text { font-family: var(--he-font-hand); font-size: 1.2rem; font-weight: 600; color: var(--he-title); line-height: var(--he-line-h); } .hefteintrag__transfer { font-family: var(--he-font-clean); font-size: 1rem; color: #718096; font-style: italic; margin-top: 0.5rem; padding-left: 3.5rem; } /* -------------------------------------------------------------------------- 18. v1: Tafelbild CSS-Variablen -------------------------------------------------------------------------- */ :root { --tb-kernbegriff: #2563eb; --tb-kategorie: #7c3aed; --tb-ursache: #dc2626; --tb-wirkung: #059669; --tb-akteur: #d97706; --tb-ereignis: #6b7280; --tb-ghost: #d1d5db; --tb-verbindung: #374151; --tb-label: #4b5563; } /* -------------------------------------------------------------------------- 19. v1: material_referenz Verweis-Style -------------------------------------------------------------------------- */ .aufgabe__material-verweis { font-size: 0.9em; color: var(--color-muted); margin-bottom: var(--space-sm); } .aufgabe__material-verweis a { color: var(--color-primary); text-decoration: underline; } .aufgabe__material-verweis a:hover { color: var(--color-primary-light); } /* -------------------------------------------------------------------------- 19b. v3.5: Material-Überleitungen (optimiert — zentriert, Pfeil, Gradient) -------------------------------------------------------------------------- */ /* E5: Karteikarte mit Pin + Pfeil statt Gradient-Band mit Dreieck */ .material-ueberleitung { text-align: left; padding: 0; margin: 28px auto; max-width: 540px; position: relative; transform: rotate(-1deg); } .material-ueberleitung:nth-of-type(even) { transform: rotate(1.2deg); } .material-ueberleitung::before { display: none; } .material-ueberleitung__text { background: #FFF4B8; border: 1px solid #E8D27A; padding: 18px 22px 16px 46px; border-radius: 2px; font-family: var(--font-fragebogen); font-style: normal; font-size: 18px; color: #2A1F0F; line-height: 1.45; max-width: none; margin-inline: auto; position: relative; box-shadow: 0 6px 14px rgba(20, 12, 4, .18), 0 1px 0 rgba(0, 0, 0, .05) inset; } /* Pin */ .material-ueberleitung__text::before { content: ""; position: absolute; top: -10px; left: 14px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--akte-gold-light) 0%, var(--color-secondary) 70%); box-shadow: 0 3px 4px rgba(0, 0, 0, .4); border: 1px solid #8a7530; } /* Pfeil-Glyph fuer die Brueckenfunktion */ .material-ueberleitung__text::after { content: "↳"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 22px; color: rgba(0, 0, 0, .35); font-family: Georgia, serif; } /* -------------------------------------------------------------------------- 19c. v3.5: Fragebogen — Notizbuch-Stil (Arbeitsblatt-Metapher) -------------------------------------------------------------------------- */ /* E5: Das Sicherungsheft ist eine Aktenmappe, kein kariertes Notizblatt — das Karo-Raster entfaellt, margin-top schlaegt bewusst den 0-Wert aus Sektion 15 (spaetere Regel gewinnt), wie es das Overlay auch tat. */ .erarbeitung__aufgaben { margin-top: 48px; background: #1a1410; border: 1px solid #4a3e2c; border-radius: 4px; box-shadow: 0 8px 22px rgba(20, 12, 4, .10); padding: 0; } /* Lochrand oben — im Akten-Look ausgeblendet */ .fragebogen__lochrand { display: none; background: var(--fb-primary); height: 36px; border-radius: 8px 8px 0 0; align-items: center; justify-content: center; gap: 40px; position: relative; } .fragebogen__lochrand::before, .fragebogen__lochrand::after, .fragebogen__lochrand span { content: ''; width: 14px; height: 14px; border-radius: 50%; background: var(--color-background, #F5F0E8); box-shadow: inset 0 1px 2px rgba(0,0,0,0.15); } /* Fragebogen Header — E5: Navy-Balken mit Goldkante */ .fragebogen__header { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; background: var(--color-primary); border-bottom: 3px solid var(--color-secondary); border-radius: 4px 4px 0 0; } .fragebogen__titel { font-family: var(--akte-font-display); font-size: 19px; color: #fff; font-weight: 700; margin: 0; line-height: 1.2; } /* Game-agnostische Aktenbezeichnung (kein Datenfeld noetig) */ .fragebogen__titel::before { content: "SICHERUNGSHEFT"; display: block; font-family: var(--akte-font-mono); font-size: 10px; letter-spacing: 2.5px; color: var(--akte-gold-light); margin-bottom: 4px; font-weight: 400; } /* Fragebogen Inner (Aufgaben-Bereich) */ .fragebogen__inner { padding: 16px; display: flex; flex-direction: column; gap: 14px; font-size: 1rem; line-height: 1.5em; position: relative; z-index: 1; } /* E5: Jede Aufgabe ist eine eigenstaendige Karte mit Status-Akzent links. Kein :last-of-type-Sonderfall mehr — die Karte hat rundum einen Rahmen. */ .erarbeitung__aufgaben .aufgabe { background: #2a2218; border: 1px solid #4a3e2c; border-left: 4px solid #4a3e2c; border-radius: 3px; box-shadow: none; padding: 14px 16px; margin: 0; } .erarbeitung__aufgaben .aufgabe--solved { background: #1f2820; border-left-color: var(--color-success); } /* Aufgaben-Nummer als Gold-Scheibe (Stempel-Anmutung) */ .erarbeitung__aufgaben .aufgabe__nummer { font-family: var(--akte-font-mono); display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; min-height: 26px; min-width: 26px; border-radius: 50%; border: 1.5px solid var(--color-secondary); background: var(--color-secondary); color: #1a1410; font-size: 12px; font-weight: 600; flex-shrink: 0; } /* Frage-Text — E5: ruhige Lese-Typo statt Textmarker-Band */ .erarbeitung__aufgaben .aufgabe__frage { font-family: var(--akte-font-body); font-size: 16px; line-height: 1.4; letter-spacing: 0; background: none; color: #f0e8d0; font-weight: 600; font-style: normal; padding: 0; margin: 0 0 12px; border-radius: 2px; display: block; } /* MC-Optionen als abgesetzte Zeilen */ .erarbeitung__aufgaben .aufgabe__option { font-family: var(--akte-font-body); font-size: 14px; background: rgba(0, 0, 0, .2); border: 1px solid #4a3e2c; border-radius: 3px; color: #e0d8c5; padding: 8px 10px; gap: var(--space-sm); cursor: pointer; transition: background 150ms ease; } /* BEFUND E5 (unveraendert uebernommen, nicht repariert): Im Overlay ueberstimmte der [data-bg="dark"]-Zweig von .aufgabe__option (0,2,0) den Korrekt-State (0,1,0) — Fuellung und Rahmenfarbe der richtigen Antwort waren nie sichtbar, nur Randbreite und Fettung. E5 ist eine Migration, kein Redesign; ob der Korrekt-State sichtbar werden soll, entscheidet ein eigener Schritt. */ .erarbeitung__aufgaben .aufgabe__option--correct { border-left-width: 3px; font-weight: 600; } /* Custom Radio-Buttons */ .erarbeitung__aufgaben .aufgabe__option input[type="radio"] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; min-width: 18px; min-height: 18px; border: 2px solid var(--fb-primary); border-radius: 50%; flex-shrink: 0; position: relative; cursor: pointer; background: transparent; padding: 0; } .erarbeitung__aufgaben .aufgabe__option input[type="radio"]:checked { border-color: var(--fb-primary); background: var(--fb-primary); } .erarbeitung__aufgaben .aufgabe__option input[type="radio"]:checked::after { content: ''; position: absolute; top: 3px; left: 3px; width: 8px; height: 8px; border-radius: 50%; background: white; } /* Feedback im Fragebogen */ .erarbeitung__aufgaben .aufgabe__feedback--success { border: none; border-left: 3px solid var(--fb-success); background-color: rgba(56, 142, 60, 0.1); color: var(--fb-success); } .erarbeitung__aufgaben .aufgabe__feedback--error { border: none; border-left: 3px solid var(--fb-error); background-color: rgba(198, 40, 40, 0.1); color: var(--fb-error); } /* Submit-Button im Fragebogen */ .erarbeitung__aufgaben .aufgabe__submit { background: var(--color-primary); font-family: var(--akte-font-mono); font-size: 11px; padding: 7px 14px; } /* Solved State — gruene Quittung statt Aktionsflaeche */ .erarbeitung__aufgaben .aufgabe--solved .aufgabe__nummer { background: var(--color-success); border-color: var(--color-success); color: #fff; } .aufgabe--solved .aufgabe__nummer::before { content: "✓"; font-family: var(--akte-font-body); font-size: 14px; } .aufgabe--solved .aufgabe__nummer-text { display: none; } .erarbeitung__aufgaben .aufgabe--solved .aufgabe__submit { background: transparent; color: var(--color-success); border: 1.5px solid var(--color-success); } .aufgabe--solved .aufgabe__submit::before { content: "✓ NOTIERT"; } /* v3.5h: Lösungswort-Bereich (initial unsichtbar, bis alle Aufgaben gelöst) */ .loesungswort-bereich { display: none; max-width: 700px; margin: 2em auto; padding: 1.5em; background-color: var(--fragebogen-bg, #f8f9fa); background-image: repeating-linear-gradient( var(--fragebogen-grid, rgba(41,82,163,0.08)) 0px, var(--fragebogen-grid, rgba(41,82,163,0.08)) 1px, transparent 1px, transparent 1.5em ), repeating-linear-gradient( 90deg, var(--fragebogen-grid, rgba(41,82,163,0.08)) 0px, var(--fragebogen-grid, rgba(41,82,163,0.08)) 1px, transparent 1px, transparent 1.5em ); border-radius: 8px; border: 2px solid var(--fb-primary, #2952A3); } /* v3.5h: Sichtbar wenn alle Aufgaben gelöst */ .loesungswort-bereich--aktiv { display: block; } /* Lückentext im Fragebogen — E5: goldener Markierstreifen. Muss hier stehen (0,2,0), sonst gewinnt die --pool-Regel weiter oben. */ .erarbeitung__aufgaben .aufgabe__luecke { background: rgba(201, 168, 76, .12); border-bottom: 1.5px solid var(--color-secondary); border-radius: 2px; padding: 1px 6px; font-family: var(--akte-font-body); font-weight: 600; font-style: normal; color: var(--akte-gold-light); } .erarbeitung__aufgaben .aufgabe__luecke--correct { background: rgba(45, 106, 79, .18); border-bottom-color: var(--color-success); color: #6FAB8B; } /* Code-Eingabe im Fragebogen */ .erarbeitung__aufgaben .code-eingabe { border: none; background: transparent; padding: var(--space-md) 0; border-top: 2px solid var(--fb-grid); } .erarbeitung__aufgaben .code-eingabe__label { font-family: var(--font-fragebogen); color: var(--fb-primary); } .erarbeitung__aufgaben .code__input { border: 2px dashed var(--fb-primary); font-family: var(--font-fragebogen); color: var(--fb-primary); } /* v3.5c: Tipp-Pillen + Akkordeon */ .erarbeitung__aufgaben .aufgabe__tipps { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; margin-top: 8px; border-top: none; padding: 0; } .erarbeitung__aufgaben .tipp { display: inline-flex; margin-bottom: 0; } /* E5: Tipp-Pille in Blaugrau-Kontur statt Vollflaeche. Die frueheren Zustandsvarianten (--active, :hover, --used-Einfaerbung) lagen unter dem Overlay-!important brach; sie bleiben bewusst weg, damit die Migration auch im Zustandsverhalten regressionsfrei ist. */ .erarbeitung__aufgaben .tipp__trigger { width: auto; padding: 3px 9px; font-family: var(--akte-font-mono); font-size: 10px; letter-spacing: 1px; border-radius: 12px; background: rgba(120, 160, 210, .15); color: #94B5DB; border: 1px solid rgba(120, 160, 210, .35); min-height: 0; min-width: auto; cursor: pointer; } .erarbeitung__aufgaben .tipp__trigger::before { content: none; } .erarbeitung__aufgaben .tipp__trigger--used { opacity: 1; } .erarbeitung__aufgaben .tipp__trigger--used::after { content: ' \2713'; } /* v3.5e: Gesperrte Tipps */ .tipp__trigger--gesperrt { opacity: 0.35; pointer-events: none; cursor: default; } .erarbeitung__aufgaben .tipp__trigger--gesperrt { opacity: 0.35; pointer-events: none; cursor: default; } .aufgabe__tipp-inhalt-area { max-height: 0; overflow: hidden; transition: max-height var(--transition-normal, 300ms ease), padding var(--transition-normal, 300ms ease); background-color: rgba(120, 144, 156, 0.08); border-radius: 0 0 var(--radius-sm, 4px) var(--radius-sm, 4px); padding: 0 var(--space-md, 1rem); font-size: 0.9rem; line-height: 1.6; margin-top: var(--space-xs, 0.25rem); } .aufgabe__tipp-inhalt-area.tipp__inhalt--visible { max-height: 300px; padding: var(--space-md, 1rem); } .tipp__material-verweis { display: block; margin-bottom: var(--space-xs, 0.25rem); font-weight: 600; } .tipp__material-verweis a { color: var(--fb-primary); text-decoration: underline; } /* v3.5c: Loesungscode-Sektion */ .loesungscode-sektion { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 2px solid var(--fb-primary); text-align: center; } .loesungscode__titel { font-family: var(--font-fragebogen); font-size: 1.2rem; color: var(--fb-primary); margin-bottom: var(--space-sm); } .loesungscode__hinweis { font-family: var(--font-fragebogen); font-size: 0.9rem; color: var(--fb-hint); margin-bottom: var(--space-md); } .code-buchstaben { display: flex; justify-content: center; gap: 4px; margin-bottom: var(--space-md); flex-wrap: wrap; } .code-buchstaben__feld { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; min-width: 40px; min-height: 40px; border: 2px solid var(--fb-primary); border-radius: 4px; font-family: var(--font-fragebogen); font-size: 1.4rem; font-weight: 600; color: #ccc; background: transparent; } .code-buchstaben__feld--geloest { color: var(--fb-primary); border-color: var(--fb-success); background: rgba(56, 142, 60, 0.05); } /* v3.5d: Komplett-Animation bei allen Aufgaben geloest */ .code-buchstaben--komplett { padding: var(--space-md); border: 2px solid var(--fb-primary); border-radius: 8px; background: rgba(41, 82, 163, 0.03); } .code-buchstaben--komplett .code-buchstaben__feld { border-color: var(--fb-primary); background: rgba(41, 82, 163, 0.08); transition: all 300ms ease; } .code-buchstaben__feld--reveal { transform: scale(1.15); color: var(--fb-primary); font-weight: 700; } /* v3.5d: Eliminierte MC-Option */ .aufgabe__option--eliminated { text-decoration: line-through; opacity: 0.5; pointer-events: none; } /* v3.5e: Mappe-Statistik (Tipp-Counter + Fehlversuche) */ .mappe-statistik { display: flex; gap: 1.2em; font-family: var(--font-fragebogen); font-size: 0.8rem; padding: 4px 0; } .tipp-counter { color: #4A6FA5; } .fehlversuche { color: var(--fb-error); } .fehlversuche--null { color: var(--fb-hint); } .mappe-statistik__label { font-weight: 600; margin-right: 0.3em; } .mappe-statistik__wert { font-variant-numeric: tabular-nums; } /* v3.5e: Drag-and-Drop Lösungswort-Puzzle */ .code-hinweis { font-family: var(--font-fragebogen); font-size: 0.9rem; color: var(--fb-hint); margin-bottom: var(--space-md); text-align: center; } .code-ziel { display: flex; justify-content: center; gap: 6px; margin-bottom: var(--space-lg); flex-wrap: wrap; } .code-ziel__feld { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-width: 44px; min-height: 44px; border: 2px dashed var(--fb-primary); border-radius: 6px; font-family: var(--font-fragebogen); font-size: 1.5rem; font-weight: 700; color: #ccc; background: transparent; transition: all 200ms ease; } .code-ziel__feld--drag-over { border-color: var(--fb-gold, #C9A84C); background: rgba(201, 168, 76, 0.1); transform: scale(1.05); } .code-ziel__feld--korrekt { border-style: solid; border-color: var(--fb-primary); background: rgba(41, 82, 163, 0.12); color: var(--fb-primary); } .code-ziel__feld--falsch { border-color: var(--fb-error); background: rgba(198, 40, 40, 0.12); animation: feldFalsch 600ms ease; } @keyframes feldFalsch { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } } .code-ziel__feld--reveal { transform: scale(1.15); transition: transform 300ms ease; } .code-ziel--komplett { padding: var(--space-sm); border: 2px solid var(--fb-success, #388E3C); border-radius: 8px; background: rgba(56, 142, 60, 0.05); } .code-pool { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; min-height: 48px; padding: var(--space-sm); } .code-pool__buchstabe { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 2px solid var(--fb-gold, #C9A84C); border-radius: 6px; font-family: var(--font-fragebogen); font-size: 1.3rem; font-weight: 700; color: var(--fb-primary); background: rgba(201, 168, 76, 0.08); cursor: grab; user-select: none; -webkit-user-select: none; transition: transform 200ms ease, opacity 200ms ease; } .code-pool__buchstabe:active { cursor: grabbing; } .code-pool__buchstabe--dragging { opacity: 0.4; transform: scale(0.95); } .code-pool__buchstabe--erscheint { animation: buchstabeErscheint 300ms ease forwards; } @keyframes buchstabeErscheint { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } .code-pool__buchstabe--touch-ghost { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } /* -------------------------------------------------------------------------- 19e. v3.5: Aufgaben-Fortschritt (Dots statt Balken) -------------------------------------------------------------------------- */ .aufgaben-fortschritt { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md) 0; border-top: 1px solid var(--fb-grid); margin-top: var(--space-md); } .aufgaben-fortschritt__text { font-family: var(--font-fragebogen); font-size: 0.85rem; color: var(--fb-hint); white-space: nowrap; } .aufgaben-fortschritt__dots { display: flex; gap: 6px; } .aufgaben-fortschritt__dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--fb-hint); background: transparent; transition: all 200ms ease; } .aufgaben-fortschritt__dot--solved { border-color: var(--fb-success); background: var(--fb-success); } .aufgaben-fortschritt__dot--current { border-color: var(--fb-primary); background: var(--fb-primary); box-shadow: 0 0 0 3px rgba(41, 82, 163, 0.2); } /* -------------------------------------------------------------------------- 20a. v3.8 U2: Sticky-Stundenfrage -------------------------------------------------------------------------- */ .sticky-stundenfrage { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: var(--color-surface, #EDE8DD); box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: var(--space-xs, 0.25rem) var(--space-md, 1rem); text-align: center; font-size: 1rem; font-weight: 600; color: var(--color-primary); transform: translateY(-100%); transition: transform 0.3s ease-out; } .sticky-stundenfrage--visible { transform: translateY(0); } /* v3.8: Material-Links in Tipps */ .tipp__material-link { text-decoration: underline; color: var(--color-primary); cursor: pointer; } .tipp__material-link:hover { text-decoration: underline; opacity: 0.8; } /* v3.8: Scroll-Offset fuer Fixed Header */ [id^="mat-"] { scroll-margin-top: 4rem; } /* -------------------------------------------------------------------------- 20b. v3.8 U4: Quellenangaben per Default hidden (JS-gesteuert) -------------------------------------------------------------------------- */ body.quellen-hidden .material__quelle, body.quellen-hidden figcaption .material__quelle-teil, body.quellen-hidden .material__inhalt > cite, body.quellen-hidden .material__inhalt cite { display: none; } .quellen-toggle { position: fixed; bottom: var(--space-md, 1rem); right: var(--space-md, 1rem); z-index: 90; background: var(--color-surface, #EDE8DD); color: var(--color-muted, #6b6358); border: 1px solid var(--color-border, #c5bfb3); border-radius: 6px; padding: 0.4em 0.8em; font-size: 0.8rem; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.1); transition: background 0.2s ease; } .quellen-toggle:hover { background: var(--color-surface-dark, #ddd8cc); } /* -------------------------------------------------------------------------- 20. Print-Stylesheet (Lehrkraft-Seite) -------------------------------------------------------------------------- */ @media print { .lehrkraft__gate, .lehrkraft__controls, .mappe__navigation, .tipp__trigger, .aufgabe__submit, .sticky-stundenfrage, .quellen-toggle { display: none !important; } .aufgabe { page-break-inside: avoid; border: 1px solid #ccc; box-shadow: none; } .lehrkraft__code-display { color: #000; background-color: #eee; } .tipp__inhalt { max-height: none; padding: var(--space-sm); } /* v3: Hefteintrag-Druck */ .sicherung__hefteintrag { border: 2px solid #000; padding: 1rem; page-break-inside: avoid; } .sicherung__hefteintrag::before { display: none; } .sicherung__merksaetze { border-left: 3px solid #333; page-break-inside: avoid; } .sicherung__kernerkenntnisse { border-left: 3px solid #333; page-break-inside: avoid; } .sicherung__tafelbild svg { max-width: 100%; page-break-inside: avoid; } /* v3.1: Hefteintrag-Druck */ .hefteintrag { box-shadow: none; border: 1px solid #ccc; page-break-inside: avoid; } .hefteintrag__transfer { display: none; } /* v3.5: Fragebogen-Druck */ .erarbeitung__aufgaben { background-image: none !important; box-shadow: none !important; } .fragebogen__lochrand { display: none !important; } .aufgaben-fortschritt { display: none !important; } .material__flag { display: none !important; } } /* -------------------------------------------------------------------------- Teilfragen-Denkgerüst (v3.9) -------------------------------------------------------------------------- */ .aufgabe__teilfragen { margin: 0.75rem 0; padding: 0.75rem 1rem; background: var(--color-surface, #f8f8f4); border-left: 3px solid var(--color-primary, #8B4513); border-radius: 0 4px 4px 0; } .aufgabe__teilfragen-label { font-weight: 600; font-size: 0.9rem; margin: 0 0 0.5rem 0; color: var(--color-text, #333); } .aufgabe__teilfragen-liste { margin: 0; padding-left: 1.25rem; list-style: decimal; } .aufgabe__teilfragen-liste li { font-size: 0.9rem; line-height: 1.4; margin-bottom: 0.35rem; color: var(--color-text, #333); } /* ============================================================ STR-11 Wave 1 AU-1: Vergleich (L4) + Begruendung (L5) ============================================================ */ /* Vergleich — Strukturraster */ .aufgabe--vergleich .vergleich__raster { width: 100%; border-collapse: collapse; margin: 0.75rem 0; font-size: 0.95rem; } .aufgabe--vergleich .vergleich__raster th, .aufgabe--vergleich .vergleich__raster td { border: 1px solid var(--color-border, #bbb); padding: 0.5rem 0.6rem; text-align: left; vertical-align: top; } .aufgabe--vergleich .vergleich__raster thead th { background: var(--color-bg-muted, #f2ece0); font-weight: 600; } .aufgabe--vergleich .vergleich__raster tbody th[scope="row"] { background: var(--color-bg-muted, #f7f2e5); font-weight: 600; width: 28%; } .aufgabe--vergleich .vergleich__zelle { width: 100%; box-sizing: border-box; padding: 0.35rem 0.5rem; min-height: 2.5rem; resize: vertical; font-family: inherit; font-size: inherit; line-height: 1.4; border: 1px solid var(--color-border, #bbb); border-radius: 3px; background: #fff; } .aufgabe--vergleich .vergleich__zelle:focus { outline: 2px solid var(--color-accent, #8b6a3b); outline-offset: 1px; } /* Begruendung — CER-Felder */ .aufgabe--begruendung .cer { display: block; margin: 0.75rem 0; padding: 0.6rem 0.75rem; border-left: 4px solid var(--color-border, #bbb); background: var(--color-bg-muted, #f9f5ea); border-radius: 0 4px 4px 0; } .aufgabe--begruendung .cer--claim { border-left-color: #8b6a3b; } .aufgabe--begruendung .cer--evidence { border-left-color: #5f7a3d; } .aufgabe--begruendung .cer--reasoning { border-left-color: #3d5a7a; } .aufgabe--begruendung .cer__label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.3rem; color: var(--color-text, #333); } .aufgabe--begruendung .cer__textarea { width: 100%; box-sizing: border-box; padding: 0.5rem 0.6rem; font: inherit; border: 1px solid var(--color-border, #bbb); border-radius: 3px; background: #fff; resize: vertical; } .aufgabe--begruendung .cer__textarea:focus { outline: 2px solid var(--color-accent, #8b6a3b); outline-offset: 1px; } /* Quellenkritik — W-Fragen (AU-3) */ .aufgabe--quellenkritik .quellenkritik__material-ref { font-style: italic; margin-bottom: 0.75rem; color: var(--color-text-muted, #555); } .aufgabe--quellenkritik .quellenkritik__frage-block { display: block; margin: 0.6rem 0; padding: 0.5rem 0.75rem; border-left: 3px solid var(--color-accent, #8b6a3b); border-radius: 0 4px 4px 0; } .aufgabe--quellenkritik .quellenkritik__frage { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.3rem; color: var(--color-text, #333); } .aufgabe--quellenkritik .quellenkritik__antwort { width: 100%; box-sizing: border-box; padding: 0.5rem 0.6rem; min-height: 2.5rem; font-family: inherit; font-size: inherit; line-height: 1.4; border: 1px solid var(--color-border, #bbb); border-radius: 3px; background: #fff; resize: vertical; } .aufgabe--quellenkritik .quellenkritik__antwort:focus { outline: 2px solid var(--color-accent, #8b6a3b); outline-offset: 1px; } .aufgabe--quellenkritik .quellenkritik__muster { font-size: 0.85rem; color: var(--color-text-muted, #666); margin-top: 0.25rem; font-style: italic; } /* ============================================================================ Differenzierungs-MVP v1 — STR-09-NEU (2026-05-07) ============================================================================ */ /* --- Sprachbutton --- */ .sprachbutton-wrapper { position: relative; display: inline-block; margin-top: 0.5rem; } .sprachbutton { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.8rem; background: var(--color-bg-elev, #fff); border: 1px solid var(--color-border, #ccc); border-radius: 4px; cursor: pointer; font: inherit; color: var(--color-text, #222); line-height: 1.2; } .sprachbutton:hover, .sprachbutton:focus-visible { border-color: var(--color-accent, #ff9800); outline: none; } .sprachbutton:focus-visible { outline: 2px solid var(--color-accent, #ff9800); outline-offset: 2px; } .sprachbutton__icon { font-size: 1.1em; } .sprachbutton__label { font-weight: 600; letter-spacing: 0.04em; } .sprachbutton__menu { position: absolute; top: 100%; right: 0; margin-top: 0.25rem; padding: 0.25rem 0; list-style: none; background: var(--color-bg-elev, #fff); border: 1px solid var(--color-border, #ccc); border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 50; min-width: 12rem; } .sprachbutton__item { display: block; width: 100%; padding: 0.5rem 1rem; background: none; border: 0; font: inherit; text-align: left; cursor: pointer; color: var(--color-text, #222); } .sprachbutton__item:hover, .sprachbutton__item:focus-visible { background: var(--color-bg-soft, #f3f6fa); outline: none; } .sprachbutton__item[dir="rtl"] { text-align: right; } /* --- Glossar-Trigger inline --- */ .glossar-trigger { border: 0; border-bottom: 1px dashed currentColor; background: none; padding: 0; margin: 0; font: inherit; color: inherit; cursor: help; line-height: inherit; } .glossar-trigger:hover, .glossar-trigger[aria-expanded="true"] { background: rgba(255, 152, 0, 0.12); border-bottom-style: solid; } .glossar-trigger:focus-visible { outline: 2px solid var(--color-accent, #ff9800); outline-offset: 2px; border-radius: 2px; } /* --- Glossar-Tooltip Popover --- */ .glossar-tooltip { position: absolute; max-width: 280px; padding: 0.75rem 1rem; background: var(--color-bg-elev, #fff); color: var(--color-text, #222); border: 1px solid var(--color-border, #ccc); border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.18); font-size: 0.92rem; line-height: 1.45; z-index: 100; pointer-events: auto; } .glossar-tooltip[dir="rtl"] { text-align: right; font-family: 'Noto Sans Arabic', 'Tahoma', system-ui, sans-serif; } /* --- KI-Hilfe als dezentes Icon am linken Materialrand (Hotfix 2026-05-07) --- */ .ki-hilfe-icon { position: absolute; top: 0.5rem; left: -2.25rem; width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: 50%; color: var(--color-text-muted, #888); cursor: pointer; opacity: 0.55; transition: opacity 140ms ease-in-out, color 140ms ease-in-out, background 140ms ease-in-out; } .ki-hilfe-icon:hover, .ki-hilfe-icon:focus-visible { opacity: 1; color: var(--color-accent, #ff9800); background: rgba(0, 0, 0, 0.04); outline: none; } .ki-hilfe-icon:focus-visible { outline: 2px solid var(--color-accent, #ff9800); outline-offset: 2px; } .ki-hilfe-icon__svg, .ki-hilfe-icon__check { display: block; } .ki-hilfe-icon__check { display: none; color: #2e7d32; } .ki-hilfe-icon--kopiert { opacity: 1; color: #2e7d32; } .ki-hilfe-icon--kopiert .ki-hilfe-icon__svg { display: none; } .ki-hilfe-icon--kopiert .ki-hilfe-icon__check { display: block; } /* Bei schmalen Screens: Icon nach innen rutschen, damit es nicht abgeschnitten wird */ @media (max-width: 720px) { .ki-hilfe-icon { left: 0.25rem; top: 0.25rem; } } /* --- Mini-Toast für duck.ai-Tab-Open-Hinweis --- */ .ki-hilfe-toast { display: inline-block; padding: 0.4rem 0.7rem; background: var(--color-text, #222); color: #fff; border-radius: 4px; font-size: 0.82rem; line-height: 1.3; box-shadow: 0 2px 8px rgba(0,0,0,0.18); z-index: 50; white-space: nowrap; max-width: 280px; white-space: normal; pointer-events: none; opacity: 0; animation: kiHilfeToastFadeIn 180ms ease-out forwards; } .ki-hilfe-toast--error { background: #b53a17; } .ki-hilfe-toast--fade { opacity: 0; transition: opacity 380ms ease-in; } @keyframes kiHilfeToastFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 720px) { .ki-hilfe-toast { max-width: 200px; font-size: 0.78rem; } } /* RTL-Variante: Icon rechts statt links */ [dir="rtl"] .ki-hilfe-icon, .aufgabe--rtl .ki-hilfe-icon { left: auto; right: -2.25rem; } @media (max-width: 720px) { [dir="rtl"] .ki-hilfe-icon, .aufgabe--rtl .ki-hilfe-icon { right: 0.25rem; } } /* --- RTL-Spiegelung NUR fuer Aufgaben-/Tooltip-/KI-Container, NICHT fuer Material --- */ .aufgabe--rtl .aufgabe__frage, .aufgabe--rtl .aufgabe__option { text-align: right; direction: rtl; } .aufgabe--rtl .aufgabe__option[dir="rtl"] { direction: rtl; } /* --- Webfont AR Fallback-Stack --- */ :root { --diff-font-arabic: 'Noto Sans Arabic', 'Tahoma', system-ui, sans-serif; } [lang="ar"], [dir="rtl"] { font-family: var(--diff-font-arabic); } /* Material-Container bleibt LTR + DE-Schrift */ .material, .material *, .material__inhalt, .material__inhalt * { direction: ltr; font-family: inherit; } /* --- Aufgaben-Hinweis "nur DE verfügbar" --- */ .aufgabe__nur-de-hinweis { font-size: 0.85em; font-style: italic; color: var(--color-text-muted, #666); margin-left: 0.4em; } /* ============================================================ 21. E5: Akten-Token-Block (2026-07) Vereinigt die vendor-Namensraeume --rd-* (Mappen, Dark-Zweig) und --op-* (Uebersicht). Rollennamen analog tokens.css, Praefix --akte- gegen Kollision mit der Site-Kette. Wertgleiche Rollen nutzen die --color-*-Tokens aus Sektion 1. ============================================================ */ :root { --akte-bg: #1F1812; --akte-paper: #2A211A; --akte-cream: #2A211A; --akte-ink: #E8E0D0; --akte-muted: #B8AC95; --akte-border: #4a3e2c; --akte-gold-light: #E0C57E; --akte-font-body: 'Spectral', Georgia, serif; --akte-font-display: 'IM Fell English', Georgia, serif; --akte-font-mono: 'Special Elite', 'Courier New', monospace; --akte-fs-body: 17px; /* Uebersicht (Schreibtisch/Dossier) */ --akte-desk: #3A2616; --akte-dossier: #FAF3E3; --akte-dossier-ink: #2A1F0F; --akte-dossier-meta: #5A4A2A; --akte-label: #F5E6C0; --akte-pin-open: #D4A017; }