/* ============================================================ KI-Kurs „Lernen durch Fragen" — gemeinsames Stylesheet Palette: „Ethereal Luminescence" (aus DESIGN.md) Tiefes Teal als Basis, Sonnenuntergangs-Orange + Gold als Akzente. ============================================================ */ /* ---- Farbtokens & Maße als CSS-Variablen ---- So sind alle Farben an einer Stelle definiert und leicht änderbar. */ :root { --bg: #001717; /* Grundhintergrund */ --surface: #002425; /* Karten-Grundfläche */ --surface-2: #013031; /* etwas hellere Fläche */ --surface-3: #103b3c; /* hellste Fläche / Hover */ --border: rgba(192, 234, 235, 0.15); /* zarte „Lichtkante" */ --border-strong: rgba(192, 234, 235, 0.30); --text: #e3f6f6; /* Haupttext (luminöses Creme-Teal) */ --text-muted: #a9c4c4; /* Nebentext */ --ink: #ffffff; /* helle Schrift auf dunkler FLÄCHE (Tag-Modus: dunkel). NICHT für Schrift auf festen Akzent-Füllungen — dort #fff. */ --teal: #96d1d3; /* Akzent 1 — „Mitnehmen" */ --teal-deep: #004b4d; --orange: #ffb59d; /* Akzent 2 — „Deine eigene Frage" */ --orange-deep: #b83900; --gold: #fcbb37; /* Akzent 3 — NotebookLM */ --gold-deep: #593e00; --on-accent: #00211f; /* dunkler Text auf hellem Akzent */ /* Callout-Wichtigkeitsleiter (leise -> laut): blau/grün/gold/orange/rot + violett = Kurs-KI. *-deep = dunkler Text AUF dem hellen Akzentbalken (Kontrast >= 7:1 im dunklen Theme). */ --blue: #7fb6e6; /* Callout „Beispiel / Gut zu wissen" */ --blue-deep: #06243f; --green: #9bd17a; /* Callout „Tipp" */ --green-deep: #143807; --violet: #c3b3f2; /* Kurs-KI (Frag-die-KI, ki-Callout, NotebookLM) */ --violet-deep: #2a1a5e; --red: #e24b4a; /* „Sehr wichtig" — Rahmen/Akzent */ --red-bar: #b3261e; /* „Sehr wichtig" — Balken, weißer Text (~6.5:1) */ --radius: 16px; --radius-sm: 10px; --maxw: 1240px; --sidebar: 280px; --sidebar-zu: 64px; /* eingeklappte Breite (Desktop) */ --sidebar-akt: var(--sidebar); /* aktive Breite — .is-collapsed schaltet auf --sidebar-zu */ --chat-spur: 50px; /* rechte Reserve, damit der KI-Coach-Tab den Scrollbalken nicht verdeckt */ --topbar-h: 66px; --font-head: "Playfair Display", Georgia, serif; --font-body: "Manrope", system-ui, sans-serif; /* Vom Nutzer wählbare Darstellungsgröße (Einstellungen-Menü, app.js). Default 1.1 = Grundschrift gegenüber dem Ur-Zustand um ~1–2 Punkte angehoben. Wird per JS auf überschrieben (localStorage). */ --font-scale: 1.1; /* ECHTE Fensterhöhe in gezoomten CSS-Pixeln: `zoom` auf skaliert dvh/vh NICHT mit — 100dvh wäre um den Zoom-Faktor zu hoch (Design-Review A4: Seitenleiste/Kapitelfenster ragten unten aus dem Fenster). Immer --vh-voll statt 100dvh/100vh für Layout-Höhen verwenden. */ --vh-voll: calc(100dvh / var(--font-scale)); /* Prompt-Design (Design-Review A7): Prompts sind IMMER weisse Kaesten mit schwarzer Schrift und dunkelblauem Rahmen + Label — sofort erkennbar. */ --prompt-flaeche: #ffffff; --prompt-tinte: #14181d; --prompt-rahmen: #2f5db3; --prompt-blau-tief: #1d3f7a; --prompt-kopf: #e9effb; /* Dunkler Schrift-Halo fuer Text, der direkt auf dem Seiten-Hintergrundbild liegt (Kontrast-Pruefskript A12: ohne Halo faellt Text ueber hellen Bildstellen durch). */ --text-halo: 0 1px 3px rgba(0,16,16,.9), 0 0 12px rgba(0,16,16,.75); --page-bg-image: url("bg07.png"); --course-bg-image: url("bg14-flip-y.png"); } /* ============================================================ TAG-MODUS (Einstellungen → Modus ☀️) — Token-Override. Grundflächen hell, Lese-Schrift dunkel (--ink kippt mit). Akzent-Balken/Chips behalten ihre Farben — dort steht #fff wörtlich im CSS und bleibt korrekt weiß. ============================================================ */ html[data-theme="hell"] { --bg: #eef4f3; --surface: #ffffff; --surface-2: #f1f6f6; --surface-3: #e2eded; --border: rgba(0, 70, 70, 0.18); --border-strong: rgba(0, 70, 70, 0.36); --text: #16302e; --text-muted: #4a6663; --ink: #14302e; /* Akzente, die auch als SCHRIFT auf Flächen dienen, brauchen im Hellen mehr Tiefe */ --teal: #0e6b6e; --orange: #b84a14; --gold: #8a6100; --blue: #1d5d96; --green: #2f6b10; --violet: #5b3fb8; --text-halo: none; --page-bg-image: none; --course-bg-image: none; } html[data-theme="hell"] body { background: var(--bg); } html[data-theme="hell"] body::before, html[data-theme="hell"] body::after { display: none; } html[data-theme="hell"] .glass { background: rgba(255, 255, 255, 0.88); box-shadow: 0 2px 14px rgba(10, 60, 58, 0.08); } /* Kopfbalken-Farben im Hellen: vertiefte Akzente brauchen helle Balken-Schrift, sonst dunkel-auf-dunkel (z. B. callout-head background var(--blue) + --blue-deep). */ html[data-theme="hell"] .callout--info > .callout-head, html[data-theme="hell"] .callout--tipp > .callout-head, html[data-theme="hell"] .callout--ki > .callout-head, html[data-theme="hell"] .step-card-head h4, html[data-theme="hell"] .ask-ki-bar .ask-ki-tag { color: #fff; } * { box-sizing: border-box; } /* `zoom` skaliert wie der Browser-Zoom (inkl. korrekter Viewport-Einheiten). */ html { scroll-behavior: smooth; zoom: var(--font-scale); } body { margin: 0; font-family: var(--font-body); color: var(--text); background: var(--bg); line-height: 1.6; /* Sanfter Teal→Orange-Verlauf als atmosphärischer Untergrund */ background-image: radial-gradient(900px 500px at 80% -10%, rgba(255,181,157,0.10), transparent 60%), radial-gradient(800px 600px at 0% 110%, rgba(150,209,211,0.10), transparent 55%); background-attachment: fixed; } body.login-page { --page-bg-image: url("bg18.png"); } body.course-page { --page-bg-image: var(--course-bg-image); overflow: hidden; } /* Seitenweites, festes Hintergrundbild (bleibt beim Scrollen stehen) */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: var(--page-bg-image) center / cover no-repeat; } /* dunkler Schleier darüber, damit Texte/Karten lesbar bleiben */ body::after { content: ""; position: fixed; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,23,23,.28), rgba(0,23,23,.48)); } h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; line-height: 1.2; } a { color: var(--teal); text-decoration: none; } a:hover { text-decoration: underline; } /* ---- Glas-Karten ---- */ .glass { background: rgba(0, 36, 37, 0.66); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 30px rgba(0,0,0,0.45); } /* ============================================================ Login-Seite ============================================================ */ /* Video + Karte NEBENEINANDER (bricht auf schmalen Fenstern um) — vorher stapelten sie sich übereinander und die Seite musste auf jedem Browser scrollen. */ .login-page { min-height: var(--vh-voll); display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; align-content: center; justify-content: center; gap: 26px; padding: 24px; } /* A16: EIN zentraler Kasten — Branding, Kurstitel, eingebettetes Video, Formular. */ .login-card { width: 100%; max-width: 400px; padding: 20px 24px 18px; text-align: center; } .login-kurstitel { font-family: var(--font-head); font-size: 26px; margin: 2px 0 12px; line-height: 1.1; background: linear-gradient(180deg, #ffe9b0 8%, var(--gold) 55%, var(--orange-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; } .login-card .login-video { max-width: 100%; padding: 0; margin: 0 0 14px; background: transparent; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .login-card h1 { font-size: 17px; margin: 2px 0 4px; } .login-card .brand { justify-content: center; margin-bottom: 6px; } .login-card .brand-logo { width: 28px; height: 28px; } .login-card .brand-text strong { font-size: 16px; } .login-card .brand-text small { font-size: 10.5px; } .login-card h1 { font-size: 20px; color: var(--ink); margin: 2px 0 4px; } .login-card .sub { color: var(--text-muted); margin: 0 0 14px; font-size: 13px; line-height: 1.45; } .login-card form { display: flex; flex-direction: column; gap: 10px; text-align: left; } .login-card label { font-size: 12.5px; color: var(--text-muted); display: flex; flex-direction: column; gap: 5px; font-weight: 600; } .login-card input { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; color: var(--text); font: inherit; font-size: 14.5px; } .login-card input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(252,187,55,.18); } .login-card .password-field { position: relative; display: block; } .login-card .password-field input { width: 100%; padding-right: 48px; } .login-card .password-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--border); background: rgba(0,23,23,.32); color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .login-card .password-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .login-card .password-toggle .eye-closed { display: none; } .login-card .password-toggle.is-visible .eye-open { display: none; } .login-card .password-toggle.is-visible .eye-closed { display: block; } .login-card .password-toggle:hover, .login-card .password-toggle:focus-visible { color: var(--text); border-color: var(--border-strong); outline: none; } .login-card input.input-error { color: var(--orange); border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,181,157,.16); } .login-card input.input-error::placeholder { color: var(--orange); opacity: 1; } .login-card .btn { margin-top: 6px; justify-content: center; width: 100%; } .login-card .err { color: var(--orange); font-size: 13px; margin: 4px 0 0; text-align: center; } .login-card .pw-match { color: var(--orange); font-size: 12.5px; margin: 4px 0 0; } .login-card .ok-msg { color: var(--teal); font-size: 13px; margin: 4px 0 0; text-align: center; } .login-card .hint { color: var(--text-muted); font-size: 12px; margin: 11px 0 0; line-height: 1.4; } .login-card .hint + .hint { margin-top: 4px; } .login-card .hint.forgot-row { margin: 8px 0 0; text-align: right; } .login-card label .opt { color: var(--text-muted); font-weight: 400; } .login-card .legal-consents { display: flex; flex-direction: column; gap: 8px; padding: 10px 0 2px; border-top: 1px solid rgba(255,255,255,.1); } .login-card label.legal-check { flex-direction: row; align-items: flex-start; gap: 9px; color: var(--text-muted); font-size: 12px; line-height: 1.45; font-weight: 500; } .login-card label.legal-check input { width: 16px; height: 16px; min-width: 16px; margin: 2px 0 0; padding: 0; accent-color: var(--gold); } .login-card label.legal-check a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; } .legal-page { min-height: var(--vh-voll); padding: 28px 18px; background: var(--bg); color: var(--text); } .legal-doc { width: min(860px, 100%); margin: 0 auto; padding: 28px; text-align: left; } .legal-doc .brand { justify-content: flex-start; margin-bottom: 20px; } .legal-doc h1 { margin: 0 0 6px; color: var(--ink); font-size: 30px; line-height: 1.15; } .legal-doc .legal-meta { margin: 0 0 22px; color: var(--text-muted); font-size: 13px; } .legal-doc h2 { margin: 24px 0 8px; color: var(--ink); font-size: 18px; line-height: 1.25; } .legal-doc p, .legal-doc li { color: var(--text-muted); font-size: 14.5px; line-height: 1.65; } .legal-doc ul { padding-left: 20px; } .legal-doc a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; } .legal-doc .legal-back { margin-top: 26px; } .mobile-app-hint[hidden] { display: none !important; } .mobile-app-hint { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 20px; } .mobile-app-hint__backdrop { position: absolute; inset: 0; background: rgba(0,18,18,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .mobile-app-hint__box { position: relative; z-index: 1; width: min(430px, 100%); padding: 26px 24px; text-align: center; } .mobile-app-hint__eyebrow { display: inline-block; margin-bottom: 10px; color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; } .mobile-app-hint__box h2 { margin: 0 0 10px; color: #fff; font-size: 24px; line-height: 1.2; } .mobile-app-hint__box p { margin: 0; color: var(--text-muted); font-size: 14px; line-height: 1.55; } .mobile-app-hint__note { margin-top: 16px; padding: 12px 14px; border: 1px solid rgba(252,187,55,.28); border-left: 3px solid var(--gold); border-radius: 8px; background: rgba(252,187,55,.1); text-align: left; } .mobile-app-hint__note strong { display: block; margin-bottom: 4px; color: var(--gold); font-size: 13px; } .mobile-app-hint__note span { display: block; color: var(--text-muted); font-size: 13.5px; line-height: 1.45; } .mobile-app-hint__closing { margin-top: 14px !important; } .mobile-app-hint__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; } .mobile-app-hint__actions .btn { width: 100%; justify-content: center; } .pw-rules { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; } .pw-rules li { position: relative; padding-left: 20px; font-size: 12.5px; color: var(--text-muted); } .pw-rules li::before { content: "○"; position: absolute; left: 2px; top: -1px; color: var(--text-muted); font-size: 12px; } .pw-rules li.ok { color: var(--teal); } .pw-rules li.ok::before { content: "✓"; color: var(--teal); } .video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #000; } .video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } /* Video klein, Vergrößern-Knopf öffnet die große Mittel-Ansicht (A1/A16). */ .login-video { width: 100%; max-width: 340px; padding: 6px; } .login-video .video-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 4px 4px 8px; } .login-video .video-bar-label { color: var(--text-muted); font-size: 11.5px; } .video-zoom { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--border); background: rgba(255,255,255,.06); color: var(--text); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; } .video-zoom:hover, .video-zoom:focus-visible { border-color: var(--border-strong); background: rgba(255,255,255,.11); outline: none; } .video-zoom svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .video-backdrop { position: fixed; inset: 0; z-index: 390; background: rgba(0,18,18,.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .video-backdrop[hidden] { display: none; } .login-video.is-expanded { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 400; width: min(92vw, 960px); max-width: none; margin: 0; background: rgba(0, 30, 31, .96); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; } /* ============================================================ Kopfzeile (globale Navigation) ============================================================ */ .topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 20px; padding: 14px 24px; background: rgba(0, 18, 18, 0.75); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); } /* Hellmodus: heller, leicht durchscheinender Kopf — sonst dunkle Marken-/Navi-Schrift auf dunklem Balken. */ html[data-theme="hell"] .topbar { background: rgba(243, 250, 249, .82); } .brand { display: flex; align-items: center; gap: 11px; text-decoration: none; } .brand:hover { text-decoration: none; } .brand-logo { width: 36px; height: 36px; object-fit: contain; flex: 0 0 auto; filter: drop-shadow(0 0 10px rgba(255,181,157,.25)); } .brand-text { display: flex; flex-direction: column; line-height: 1.05; } .brand-text strong { font-family: var(--font-head); font-size: 19px; font-weight: 700; color: var(--text); letter-spacing: .3px; } .brand-text small { font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #ffc62b; margin-top: 2px; text-shadow: 0 0 10px rgba(255,198,43,.25); } .topnav { display: flex; align-items: center; gap: 18px; margin-left: 8px; min-width: 0; } .topnav a { color: var(--text-muted); font-size: 15px; } .topnav a:hover, .topnav a.active { color: var(--text); text-decoration: none; } .topbar .spacer { flex: 1; } /* Kopf-Navigation: "Start"-Aufklappmenü + Modul-Liste (additiv) */ .topnav-menu { position: relative; } .topnav-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; color: var(--text-muted); font-size: 15px; } .topnav-menu > summary::-webkit-details-marker { display: none; } .topnav-menu > summary:hover { color: var(--text); } .topnav-menu > summary .chev { font-size: 11px; transition: transform .18s; } .topnav-menu[open] > summary { color: var(--text); } .topnav-menu[open] > summary .chev { transform: rotate(180deg); } .topnav-dropdown { position: absolute; top: calc(100% + 10px); left: 0; z-index: 60; min-width: 184px; display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 16px 40px rgba(0,0,0,.4); } .topnav-dropdown a { display: block; padding: 8px 12px; border-radius: 7px; color: var(--text-muted); font-size: 14px; } .topnav-dropdown a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; } .topnav-dropdown a.active { color: var(--teal); } /* Modul-Block im Aufklappmenü (v.a. mobil sichtbar). */ .topnav-dd-mods { margin: 4px 0; padding: 4px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } /* Auf Desktop stehen die Module als Pills oben -> im Menü ausgeblendet. */ @media (min-width: 901px) { .topnav-dd-mods { display: none; } } /* Modul-Navigation als EIN zusammenhängender, unterteilter Balken (Segmented) statt loser Kreise — feiner und passt zum Menü. Design-System §3 (.seg): Haarlinien-Trenner, aktives Feld = Gold-Tint. */ .topnav-mods { display: inline-flex; align-items: center; gap: 9px; min-width: 0; } .topnav-mods-label { color: var(--text-muted); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; flex: 0 0 auto; } /* Kapsel: bei sehr engem Fenster/großer Schrift sanft horizontal scrollbar statt die Kopfzeile zu sprengen (Scrollbalken ausgeblendet). */ .topnav-bar { display: inline-flex; align-items: stretch; min-width: 0; max-width: 100%; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } .topnav-bar::-webkit-scrollbar { display: none; } .topnav-mod { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 32px; padding: 5px 11px; border: 0; border-radius: 0; color: var(--text-muted); font-size: 13px; font-weight: 600; line-height: 1; } .topnav-mod + .topnav-mod { border-left: 1px solid var(--border); } .topnav-mod:hover { color: var(--text); background: rgba(255,255,255,.04); text-decoration: none; } .topnav-mod.active { color: var(--gold); background: rgba(252,187,55,.14); } /* Fokus innenliegend (outline-offset negativ), sonst von overflow der Kapsel beschnitten. */ .topnav-mod:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; } /* Mini-Fortschritt + Reset in der Kopfzeile */ .topprogress { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-muted); } .topprogress .bar { width: 120px; } .btn-ghost { background: transparent; color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; } .btn-ghost:hover { color: var(--text); border-color: var(--border-strong); } .menu-toggle { display: none; background: none; border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: 18px; } /* Immer sichtbarer „KI Coach"-Knopf in der Kopfzeile */ .btn-coach { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 8px 15px; border-radius: 10px; font: inherit; font-weight: 700; font-size: 13.5px; color: var(--on-accent); text-decoration: none; border: 1px solid rgba(255,255,255,.14); background: linear-gradient(180deg, var(--gold), var(--orange-deep)); box-shadow: 0 1px 2px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.2); transition: filter .15s; } .btn-coach:hover { text-decoration: none; filter: brightness(1.07); } .btn-notebook { display: inline-flex; align-items: center; white-space: nowrap; padding: 8px 14px; border-radius: 999px; font: inherit; font-weight: 800; font-size: 13px; color: var(--teal); text-decoration: none; border: 1px solid rgba(150,209,211,.38); background: rgba(150,209,211,.11); } .btn-notebook:hover { color: var(--ink); border-color: rgba(150,209,211,.65); text-decoration: none; } /* NotebookLM Hover-Menü (eigener Link) */ .notebook-menu { position: relative; display: inline-flex; } .notebook-dropdown { position: absolute; top: 100%; right: 0; margin-top: 8px; width: 290px; padding: 16px; box-sizing: border-box; background: rgba(14,26,38,.97); border: 1px solid rgba(150,209,211,.30); border-radius: 14px; box-shadow: 0 18px 40px rgba(0,0,0,.45); z-index: 120; color: #eaf2f4; text-align: left; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s ease, transform .16s ease, visibility .16s; } /* unsichtbare Brücke, damit das Menü beim Rübergehen nicht zuklappt */ .notebook-dropdown::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 12px; } .notebook-menu:hover .notebook-dropdown, .notebook-menu:focus-within .notebook-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .notebook-dropdown .nb-title { display: block; font-size: 13px; font-weight: 800; color: #eaf2f4; } .notebook-dropdown .nb-hint { margin: 6px 0 10px; font-size: 12px; line-height: 1.4; color: rgba(234,242,244,.72); } .notebook-dropdown .nb-input { width: 100%; box-sizing: border-box; padding: 9px 11px; font: inherit; font-size: 13px; color: #eaf2f4; background: rgba(255,255,255,.06); border: 1px solid rgba(150,209,211,.40); border-radius: 9px; } .notebook-dropdown .nb-input:focus { outline: none; border-color: rgba(150,209,211,.85); background: rgba(255,255,255,.10); } .notebook-dropdown .nb-actions { display: flex; gap: 8px; margin-top: 10px; } .notebook-dropdown .nb-actions button { flex: 1; padding: 8px 10px; font: inherit; font-weight: 700; font-size: 12px; border-radius: 999px; cursor: pointer; border: 1px solid rgba(150,209,211,.40); } .notebook-dropdown .nb-save { color: #08151f; background: var(--teal, #96d1d3); border-color: transparent; } .notebook-dropdown .nb-save:hover { filter: brightness(1.08); } .notebook-dropdown .nb-reset { color: #eaf2f4; background: transparent; } .notebook-dropdown .nb-reset:hover { background: rgba(255,255,255,.08); } .notebook-dropdown .nb-status { display: block; margin-top: 9px; font-size: 12px; min-height: 1em; color: #8fe0b5; } .notebook-dropdown .nb-status.err { color: #f3a9a0; } /* Einstellungen — Header-Button (⚙) + Klick-Popover (Schriftgröße) */ .settings-menu { position: relative; display: inline-flex; } .btn-settings { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; padding: 8px 12px; border-radius: 999px; font: inherit; font-weight: 800; font-size: 13px; line-height: 1; color: var(--text-muted); cursor: pointer; border: 1px solid var(--border); background: var(--surface-2); } .btn-settings:hover { color: var(--ink); border-color: var(--border-strong); } .btn-settings .ic { font-size: 15px; line-height: 1; } .settings-popover { position: absolute; top: 100%; right: 0; margin-top: 8px; width: 280px; padding: 16px; box-sizing: border-box; max-height: min(560px, calc(100dvh - 90px)); overflow-y: auto; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 14px; box-shadow: 0 18px 40px rgba(0,0,0,.45); z-index: 120; color: var(--text); text-align: left; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s ease, transform .16s ease, visibility .16s; } .settings-menu.open .settings-popover { opacity: 1; visibility: visible; transform: translateY(0); } .settings-popover .settings-title { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; } .settings-popover .settings-hint { margin: 0 0 12px; font-size: 12px; line-height: 1.4; color: var(--text-muted); } .settings-seg { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; } .settings-seg .seg-btn { min-height: 40px; padding: 8px 6px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted); font: inherit; font-weight: 700; cursor: pointer; transition: background .16s, color .16s, border-color .16s; } .settings-seg .seg-btn:hover { color: var(--text); border-color: var(--border-strong); } .settings-seg .seg-btn.active { background: rgba(252,187,55,.14); color: var(--gold); border-color: rgba(252,187,55,.5); } .settings-seg .seg-btn:nth-child(1) { font-size: 12px; } .settings-seg .seg-btn:nth-child(2) { font-size: 13px; } .settings-seg .seg-btn:nth-child(3) { font-size: 14.5px; } .settings-seg .seg-btn:nth-child(4) { font-size: 16px; } /* Modus-Umschalter (🌙/☀️): Symbole groß genug, Abstand zur Schriftgrößen-Gruppe */ .settings-popover .settings-title + .settings-seg { margin-bottom: 14px; } .settings-seg .seg-btn[data-theme-wahl] { font-size: 18px; } /* Gruppen-Abstände + Kontingent-Block im Einstellungs-Menü */ .settings-popover .settings-title { margin-top: 12px; } .settings-popover .settings-title:first-child { margin-top: 0; } .settings-quota { margin-bottom: 4px; } .settings-konto { margin-bottom: 4px; } /* Konto-Bereich der Einstellungen (Kurs zurücksetzen / Passwort / Account) */ .settings-konto { display: grid; gap: 8px; } .settings-action { width: 100%; min-height: 38px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; text-align: left; } .settings-action:hover { border-color: var(--border-strong); } .settings-action-go { background: var(--teal); color: var(--on-accent); text-align: center; } .settings-action-danger { background: rgba(226,75,74,.16); border-color: rgba(226,75,74,.55); color: #ffb4b3; text-align: center; } .settings-action-danger:hover { background: var(--red-bar); color: #fff; border-color: var(--red-bar); } .settings-fold { border: 1px solid var(--border); border-radius: 10px; padding: 0; } .settings-fold > summary { list-style: none; cursor: pointer; padding: 9px 10px; font-size: 13px; font-weight: 700; color: var(--text); } .settings-fold > summary::-webkit-details-marker { display: none; } .settings-fold > summary::before { content: "▸ "; color: var(--teal); } .settings-fold[open] > summary::before { content: "▾ "; } .settings-fold-danger > summary { color: #ffb4b3; } .settings-form { display: grid; gap: 8px; padding: 4px 10px 12px; } .settings-form input { width: 100%; box-sizing: border-box; padding: 9px 11px; font: inherit; font-size: 13px; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; } .settings-form input:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; } .settings-form-status { margin: 0; font-size: 12px; line-height: 1.45; color: var(--gold); min-height: 0; } /* Sicherheitsfrage-Dialog: "Nein" vorbelegt/fokussiert (gefüllt, sicher), "Ja" bewusst zurückhaltend — bei Lösch-Fragen rot (danger). */ .confirm-overlay { position: fixed; inset: 0; z-index: 400; background: rgba(0, 18, 18, .78); display: flex; align-items: center; justify-content: center; padding: 18px; } .confirm-box { width: min(440px, 100%); padding: 20px 22px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border-strong); box-shadow: 0 22px 60px rgba(0,0,0,.5); } .confirm-text { margin: 0 0 16px; color: var(--text); font-size: 15px; line-height: 1.6; font-weight: 500; } .confirm-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; } .confirm-actions button { min-height: 42px; padding: 9px 18px; border-radius: 10px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; } .confirm-nein { background: var(--teal); color: var(--on-accent); border: 0; } .confirm-nein:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; } .confirm-ja { background: transparent; color: var(--text-muted); border: 1px solid var(--border-strong); } .confirm-ja:hover { color: var(--text); border-color: var(--text-muted); } .confirm-ja.danger { color: #ffb4b3; border-color: rgba(226,75,74,.55); } .confirm-ja.danger:hover { background: var(--red-bar); color: #fff; border-color: var(--red-bar); } html[data-theme="hell"] .confirm-ja.danger { color: #a02622; } html[data-theme="hell"] .confirm-ja.danger:hover { color: #fff; } /* Hellmodus-Korrekturen Einstellungen: --teal vertieft (dunkel) -> heller Text auf „go"; Gefahr-Text dunkelrot statt hellrosa (sonst auf hellem Grund unleserlich). */ html[data-theme="hell"] .settings-action-go { color: #fff; } html[data-theme="hell"] .settings-action-danger { color: #a02622; background: rgba(226,75,74,.10); } html[data-theme="hell"] .settings-fold-danger > summary { color: #a02622; } /* Kontingent — Header-Button + Klick-Popover */ .quota-menu { position: relative; display: inline-flex; } .btn-quota { display: inline-flex; align-items: center; white-space: nowrap; padding: 8px 14px; border-radius: 999px; font: inherit; font-weight: 800; font-size: 13px; color: var(--gold); text-decoration: none; cursor: pointer; border: 1px solid rgba(252,187,55,.38); background: rgba(252,187,55,.10); } .btn-quota:hover { color: var(--ink); border-color: rgba(252,187,55,.65); } .quota-popover { position: absolute; top: 100%; right: 0; margin-top: 8px; width: 300px; padding: 16px; box-sizing: border-box; background: rgba(14,26,38,.97); border: 1px solid rgba(150,209,211,.30); border-radius: 14px; box-shadow: 0 18px 40px rgba(0,0,0,.45); z-index: 120; color: #eaf2f4; text-align: left; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s ease, transform .16s ease, visibility .16s; } .quota-menu.open .quota-popover { opacity: 1; visibility: visible; transform: translateY(0); } .quota-popover .quota-title { display: block; font-size: 13px; font-weight: 800; color: #eaf2f4; margin-bottom: 12px; } .quota-popover .quota-loading, .quota-popover .quota-error { margin: 0; font-size: 12.5px; color: rgba(234,242,244,.72); } .quota-popover .quota-error { color: #f3a9a0; } .quota-row + .quota-row { margin-top: 13px; } .quota-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .quota-head .quota-label { font-size: 13px; font-weight: 700; color: #eaf2f4; } .quota-head .quota-values { font-size: 12px; color: rgba(234,242,244,.78); white-space: nowrap; } .quota-row.exceeded .quota-head .quota-values { color: #f3a9a0; } .quota-bar { margin-top: 6px; height: 7px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.10); border: 1px solid var(--border); } .quota-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--teal, #96d1d3); transition: width .25s ease; } .quota-bar-fill.exceeded { background: #e8675a; } .quota-reset { display: block; margin-top: 5px; font-size: 11.5px; color: rgba(234,242,244,.62); } /* Hinweis-Kasten im Download-Bereich */ .download-hint { max-width: 720px; margin: 0 0 20px; padding: 16px 20px; border-left: 3px solid var(--gold); } .download-hint p { margin: 0; color: var(--text-muted); font-size: 14.5px; line-height: 1.55; } .download-hint p + p { margin-top: 8px; } .download-hint strong { color: var(--text); } #download .group-label { display: inline-block; font-size: 15px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); text-shadow: var(--text-halo); background: rgba(0,20,20,.66); padding: 4px 12px; border-radius: 8px; } #download .group-label.trainer { color: var(--orange); } /* ============================================================ Layout: Seitenleiste + Inhalt ============================================================ */ .layout { display: flex; gap: 0; align-items: flex-start; } body.course-page .layout { height: calc(var(--vh-voll) - var(--topbar-h)); overflow: hidden; } .sidebar { position: sticky; top: var(--topbar-h); width: var(--sidebar-akt); flex: 0 0 var(--sidebar-akt); transition: flex-basis .22s ease, width .22s ease; height: calc(var(--vh-voll) - var(--topbar-h)); overflow-y: auto; padding: 22px 16px; border-right: 1px solid var(--border); background: var(--surface); } /* Einklappbare Seitenleiste (Desktop) — Auftraggeber 2026-06-17 */ .sidebar.is-collapsed { --sidebar-akt: var(--sidebar-zu); overflow: hidden; } .sidebar.is-collapsed .sidebar-tree, .sidebar.is-collapsed .mode-panel, .sidebar.is-collapsed > h3 { display: none; } .sidebar-collapse { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; margin: 0 0 12px; padding: 7px 9px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; color: var(--text-muted); font-weight: 700; font-size: 12px; cursor: pointer; transition: background .15s ease, color .15s ease; } .sidebar-collapse:hover { background: var(--surface-3); color: var(--text); } .sidebar-collapse .chev { transition: transform .2s ease; font-size: 14px; } .sidebar.is-collapsed .sidebar-collapse { justify-content: center; } .sidebar.is-collapsed .sidebar-collapse .lbl { display: none; } .sidebar.is-collapsed .sidebar-collapse .chev { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { .sidebar, .sidebar-collapse, .sidebar-collapse .chev { transition: none; } } @media (max-width: 900px) { /* Am Handy gilt der Burger/Drawer — Einklappen ist hier wirkungslos. */ .sidebar.is-collapsed { --sidebar-akt: var(--sidebar); } .sidebar.is-collapsed .sidebar-tree, .sidebar.is-collapsed .mode-panel, .sidebar.is-collapsed > h3 { display: revert; } .sidebar-collapse { display: none; } body.course-page .content { padding-right: 0; } /* Chat-Reserve nur am Desktop */ } .sidebar h3 { font-family: var(--font-body); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin: 18px 8px 8px; } .sidebar .group-label { color: var(--gold); } .sidebar .group-label.trainer { color: var(--orange); } .navmod { margin-bottom: 6px; } .navmod > summary { list-style: none; cursor: pointer; padding: 9px 10px; border-radius: 8px; display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 600; font-size: 14px; } .navmod > summary::-webkit-details-marker { display: none; } .navmod > summary:hover { background: var(--surface-2); } .navmod > summary .chev { margin-left: auto; transition: transform .2s; color: var(--text-muted); font-size: 12px; } .navmod[open] > summary .chev { transform: rotate(90deg); } .navmod .blocks { padding: 2px 0 8px 14px; } .navmod .blocks a { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 7px; color: var(--text-muted); font-size: 13.5px; } .navmod .blocks a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; } .navmod .blocks a.active { background: rgba(150,209,211,0.16); color: var(--teal); } .navmod .blocks a .dot { width: 14px; height: 14px; flex: 0 0 14px; border-radius: 50%; border: 1.5px solid var(--border-strong); } .navmod .blocks a.done .dot { background: var(--teal); border-color: var(--teal); box-shadow: 0 0 8px rgba(150,209,211,.5); } /* ============================================================ UNTERKAPITEL-KREISE (Lesefortschritt) — Sidebar + Kapitel-Footer leer = ungelesen · rot-orange gefüllt = gelesen · Ring = aktiver Abschnitt ============================================================ */ .uk-dots { display: flex; flex-wrap: wrap; align-items: center; } .uk-dot { appearance: none; -webkit-appearance: none; padding: 0; cursor: pointer; border-radius: 50%; background: transparent; border: 1.5px solid var(--border-strong); transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .12s ease; } .uk-dot:hover { border-color: var(--orange); transform: scale(1.18); } .uk-dot.read { background: var(--orange); border-color: var(--orange); } /* Aktueller Abschnitt („du bist hier") — gut sichtbares Hellgrün, auch auf dunklem Grund. Überschreibt bewusst die rot-orange Lese-Farbe, damit die Position immer heraussticht. */ .uk-dot.active, .uk-dot.read.active { background: var(--green); border-color: var(--green); box-shadow: 0 0 0 2px rgba(155,209,122,.45), 0 0 10px 2px rgba(155,209,122,.85); transform: scale(1.25); } /* Sidebar: kompakte Reihe unter dem Kapiteltitel (bricht bei Bedarf in 2. Zeile um) */ .navmod .blocks .navblock { display: block; } .uk-dots-side { gap: 5px; padding: 1px 10px 6px 32px; } .uk-dots-side .uk-dot { width: 8px; height: 8px; } /* Footer: größere, klickbare Reihe unter den Zurück/Weiter-Buttons */ .uk-dots-footer { grid-column: 1 / -1; justify-content: center; gap: 9px; padding-top: 2px; } .uk-dots-footer .uk-dot { width: 11px; height: 11px; } .uk-dots-footer:empty { display: none; } /* ============================================================ LERNKARTEN (Modul „Tipps und Tricks") — ein Tipp pro Karte, links/rechts wegklicken (Pfeile + Wischen) mit Slide-Animation. Fortschritt/Position zeigen die uk-dots im Footer (wie im Grundkurs). ============================================================ */ .tipp-cardwrap { display: flex; align-items: stretch; gap: 12px; width: 100%; } .tipp-card { flex: 1 1 auto; min-width: 0; position: relative; overflow: hidden; display: flex; flex-direction: column; } .tipp-arrow { flex: 0 0 auto; align-self: center; appearance: none; -webkit-appearance: none; cursor: pointer; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--border-strong); background: rgba(255,255,255,.05); color: var(--text); font-size: 1.6rem; line-height: 1; display: flex; align-items: center; justify-content: center; transition: border-color .15s ease, color .15s ease, transform .12s ease, opacity .15s ease; } .tipp-arrow:hover:not(:disabled) { border-color: var(--orange); color: var(--orange); transform: scale(1.08); } .tipp-arrow:disabled { opacity: .25; cursor: default; } .tipp-card-zaehler { font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 8px; } .tipp-card-titel { margin: 0 0 12px; } .tipp-card-body { margin: 0; } @keyframes tippKarteRechts { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: none; } } @keyframes tippKarteLinks { from { opacity: 0; transform: translateX(-36px); } to { opacity: 1; transform: none; } } .tipp-card-inner { animation: tippKarteRechts .26s ease both; } .tipp-cardwrap[data-dir="prev"] .tipp-card-inner { animation-name: tippKarteLinks; } @media (prefers-reduced-motion: reduce) { .tipp-card-inner { animation: none; } } @media (max-width: 560px) { .tipp-cardwrap { gap: 5px; } .tipp-arrow { width: 38px; height: 38px; font-size: 1.3rem; } } /* Startseite mit Modul-Seitenleiste: Lese-/Fragen-Umschalter dort ausblenden (nur im Kapitel sinnvoll) */ .home-page .mode-panel, .home-page .mode-hint { display: none; } /* Modus-Reiter (oben in der Seitenleiste) */ .mode-panel { padding: 12px; margin-bottom: 14px; border: 1px solid rgba(252,187,55,.34); border-left: 4px solid var(--gold); border-radius: 8px; background: rgba(252,187,55,.055); box-shadow: 0 12px 28px rgba(0,0,0,.16); } /* Titelzeile als hinterlegter Balken, Text zentriert (Auftraggeber 2026-06-11); das i-Info-Symbol bleibt rechts verankert. */ .mode-title { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 9px; padding: 8px 30px 8px 12px; border-radius: 9px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.12); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .mode-title .mode-info { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); margin-left: 0; } .mode-title-icon { color: var(--gold); font-size: 13px; } .modetabs { display: grid; grid-template-columns: 1fr; gap: 8px; } .modetab { display: flex; align-items: center; gap: 8px; width: 100%; padding: 11px 12px; border: 1.5px solid var(--border); background: var(--surface-2); color: var(--text-muted); border-radius: 10px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 800; text-align: left; transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .12s ease, color .16s ease; } .modetab span { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-weight: 900; transition: background .16s ease, color .16s ease; } /* Ruhezustand: beide Buttons sind bereits farblich unterscheidbar */ .modetab.questions { border-color: rgba(252,187,55,.34); background: rgba(252,187,55,.07); color: var(--text); } .modetab.reading { border-color: rgba(150,209,211,.34); background: rgba(150,209,211,.07); color: var(--text); } .modetab.questions span { background: rgba(252,187,55,.18); color: var(--gold); } .modetab.reading span { background: rgba(150,209,211,.18); color: var(--teal); } /* Mouseover: deutlich kräftiger + leichtes Anheben */ .modetab.questions:hover { border-color: rgba(252,187,55,.7); background: rgba(252,187,55,.15); box-shadow: 0 6px 16px rgba(252,187,55,.16); transform: translateY(-1px); } .modetab.reading:hover { border-color: rgba(150,209,211,.7); background: rgba(150,209,211,.15); box-shadow: 0 6px 16px rgba(150,209,211,.16); transform: translateY(-1px); } .modetab.questions:hover span { background: rgba(252,187,55,.3); } .modetab.reading:hover span { background: rgba(150,209,211,.3); } /* Aktiv: kräftigste Hervorhebung mit Farbring + gefülltem Icon */ .modetab.questions.active { background: rgba(252,187,55,.22); color: #fff; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(252,187,55,.28), 0 8px 18px rgba(252,187,55,.2); } .modetab.reading.active { background: rgba(150,209,211,.22); color: #fff; border-color: var(--teal); box-shadow: 0 0 0 2px rgba(150,209,211,.28), 0 8px 18px rgba(150,209,211,.2); } .modetab.questions.active span { background: var(--gold); color: var(--on-accent); } .modetab.reading.active span { background: var(--teal); color: var(--on-accent); } .modetab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* Kapitel-Header: Modus-Umschalter (m01) + Play/Stopp-Knopf nebeneinander. */ .header-audio-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } /* Play/Stopp-Knopf im Header (Auftraggeber 2026-06-13: neben der Kurs-Umschaltung). ▶ grün / ■ spielt rot / wartet orange-pulsierend. */ .ap-play-header { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 auto; border: 1.5px solid rgba(110,231,183,.5); background: rgba(16,185,129,.16); color: #6ee7b7; border-radius: 999px; cursor: pointer; font-size: 15px; line-height: 1; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease; } .ap-play-header:hover { background: rgba(16,185,129,.26); } .ap-play-header.spielt { border-color: #ef4444; background: rgba(239,68,68,.22); color: #fca5a5; } .ap-play-header.wartet { border-color: #f97316; background: rgba(249,115,22,.26); color: #fdba74; animation: ap-puls-h 1.5s infinite; } @keyframes ap-puls-h { 50% { box-shadow: 0 0 0 5px rgba(249,115,22,.2); } } html[data-theme=hell] .ap-play-header { color: #047857; border-color: rgba(4,120,87,.5); background: rgba(4,120,87,.1); } /* Steuerleiste (Auftraggeber 2026-06-14): ↺ Zurück | ▶/⏸ Play-Pause | ■ Stopp. Play/Pause ist der große Knopf (.ap-play-header), Zurück + Stopp sind kleiner. */ .ap-ctrls { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; } .ap-ctrl.ap-back, .ap-ctrl.ap-stop { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 auto; border: 1.5px solid rgba(255,255,255,.28); background: rgba(255,255,255,.08); color: rgba(255,255,255,.82); border-radius: 999px; cursor: pointer; font-size: 13px; line-height: 1; transition: background .15s ease, border-color .15s ease, opacity .15s ease; } .ap-ctrl.ap-back:hover, .ap-ctrl.ap-stop:hover { background: rgba(255,255,255,.18); } .ap-ctrl.ap-stop { color: #fca5a5; border-color: rgba(239,68,68,.45); } .ap-ctrl.ap-stop:hover { background: rgba(239,68,68,.2); } .ap-ctrl.aus { opacity: .4; } html[data-theme=hell] .ap-ctrl.ap-back, html[data-theme=hell] .ap-ctrl.ap-stop { color: #14302e; border-color: rgba(0,60,60,.35); background: rgba(0,60,60,.07); } html[data-theme=hell] .ap-ctrl.ap-stop { color: #b91c1c; border-color: rgba(185,28,28,.4); } /* Kurs-Modus-Umschalter OBEN im Kapitel-Header (nur m01) — kompakt + horizontal, sichtbar ohne das Seitenmenü zu öffnen (Auftraggeber 2026-06-13). */ .header-modeswitch { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .header-modeswitch .modetab { width: auto; padding: 7px 12px; border-radius: 999px; font-size: 12px; white-space: nowrap; } .header-modeswitch .modetab span { width: 18px; height: 18px; font-size: 12px; } @media (max-width: 720px) { /* Auf schmalen Schirmen: beide Knöpfe teilen sich die Breite. */ .header-modeswitch { width: 100%; } .header-modeswitch .modetab { flex: 1 1 0; justify-content: center; } } .mode-hint { margin: 14px 0 14px; padding: 0 4px; color: var(--text-muted); font-size: 12.5px; line-height: 1.35; } /* Info-Icon + Tooltip-Bubble am Titel "Kurs Modus" */ .mode-info { margin-left: auto; position: relative; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(252,187,55,.16); color: var(--gold); font-size: 11px; font-weight: 900; font-style: normal; letter-spacing: 0; text-transform: none; cursor: help; } .mode-info:hover, .mode-info:focus-visible { background: rgba(252,187,55,.3); outline: none; } .mode-tip { position: absolute; top: calc(100% + 9px); right: -4px; width: 232px; padding: 11px 13px; background: #00211f; color: var(--text); border: 1px solid rgba(252,187,55,.4); border-radius: 10px; box-shadow: 0 16px 34px rgba(0,0,0,.45); font-size: 11.5px; font-weight: 600; line-height: 1.5; letter-spacing: 0; text-transform: none; opacity: 0; visibility: hidden; transform: translateY(-5px); transition: opacity .16s ease, transform .16s ease, visibility .16s; z-index: 60; } .mode-tip::before { content: ""; position: absolute; bottom: 100%; right: 8px; border: 6px solid transparent; border-bottom-color: rgba(252,187,55,.4); } .mode-tip strong { color: #fff; font-weight: 800; } .mode-info:hover .mode-tip, .mode-info:focus .mode-tip, .mode-info:focus-within .mode-tip { opacity: 1; visibility: visible; transform: translateY(0); } /* Lese-Ansicht (Normal-Modus) */ .lesson { padding: 22px 26px; margin: 8px 0 4px; line-height: 1.7; color: var(--text); font-size: 16px; } .lesson h1, .lesson h2, .lesson h3 { font-family: var(--font-head); color: var(--ink); margin: 20px 0 8px; line-height: 1.3; } .lesson h2 { font-size: 23px; } .lesson h3 { font-size: 18px; color: var(--blue); } .lesson p { margin: 11px 0; } .lesson ul, .lesson ol { margin: 10px 0 10px 22px; } .lesson li { margin: 5px 0; } .lesson strong { color: var(--ink); } .lesson blockquote { border-left: 3px solid var(--gold); background: rgba(252,187,55,.07); margin: 14px 0; padding: 10px 16px; border-radius: 6px; color: var(--text-muted); } .lesson code { background: var(--surface-3); padding: 1px 6px; border-radius: 4px; font-size: .9em; } .lesson table { width: 100%; border-collapse: collapse; margin: 16px 0; overflow: hidden; border-radius: 7px; } .lesson th, .lesson td { border: 1px solid var(--border); padding: 9px 10px; text-align: left; vertical-align: top; } .lesson th { color: var(--ink); background: rgba(150,209,211,.10); font-weight: 800; } .lesson td { color: var(--text-muted); background: rgba(255,255,255,.035); } .lesson img { max-width: 100%; height: auto; border-radius: 7px; } .content { flex: 1; min-width: 0; padding: 0; } body.course-page .content { height: 100%; overflow: hidden; padding-right: var(--chat-spur); } .wrap { max-width: 920px; margin: 0 auto; padding: 0 28px; } /* Fester Kapitelplayer */ .content .wrap#modulinhalt { max-width: 1080px; height: calc(var(--vh-voll) - var(--topbar-h)); padding: 10px 22px 14px; } body.course-page .content .wrap#modulinhalt { height: calc(100% - 8px); } .chapter-player { position: relative; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; height: 100%; min-height: 0; border: 1px solid var(--border); border-radius: var(--radius); /* Lesefläche auf Marken-Fläche (Token, themen-fähig) — harmoniert mit der neuen Seitenleiste; früher hartkodiertes Marineblau (inkonsistent + im Hell unlesbar). */ background: var(--surface); box-shadow: var(--shadow); } .chapter-player > * { position: relative; z-index: 1; } .chapter-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 14px 18px 12px; border-bottom: 1px solid var(--border); background: var(--surface-2); } .chapter-header-main { min-width: 0; } .chapter-header h1 { color: var(--ink); margin: 4px 0 0; font-size: clamp(21px,2.6vw,30px); line-height: 1.12; } .chapter-kicker { margin: 6px 0 0; color: var(--text-muted); font-size: 12px; font-weight: 700; } /* Kapitel-Beschreibung klar vom Titel absetzen (sonst klebt sie durch den globalen negativen Rand direkt darunter und wirkt wie Teil der Überschrift). */ .chapter-header .blocksummary { margin: 9px 0 0; line-height: 1.5; color: var(--text-muted); } .chapter-header-tools { min-width: 170px; display: grid; gap: 9px; justify-items: end; flex: 0 0 auto; } .chapter-header .progress-row { min-width: 150px; width: 100%; } .chapter-notebook-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 32px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(150,209,211,.45); background: rgba(150,209,211,.13); color: var(--teal); font-size: 12.5px; font-weight: 800; text-decoration: none; white-space: nowrap; } .chapter-notebook-btn:hover { color: #fff; border-color: rgba(150,209,211,.72); background: rgba(150,209,211,.20); text-decoration: none; } .chapter-notebook-btn span { color: var(--gold); font-size: 12px; } .chapter-scroll { min-height: 0; overflow: auto; padding: 12px 18px 12px; scroll-behavior: auto; background: transparent; } .chapter-scroll:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; } .lesson-stream { min-height: 240px; margin-top: 2px; margin-bottom: 2px; padding-top: 18px; padding-bottom: 18px; } .chapter-footer { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,auto) minmax(0,1fr); gap: 12px; align-items: center; padding: 9px 12px; border-top: 1px solid var(--border); background: var(--surface-2); } /* min-width:0 + flex-wrap: bei mittlerer Breite/Zoom umbrechen statt aus dem Fenster ragen. */ .chapter-footer-nav { grid-column: 2; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; } .chapter-nav-btn { min-height: 32px; min-width: 78px; max-width: 100%; padding: 5px 12px; font-size: 12.5px; white-space: normal; overflow-wrap: break-word; } .chapter-footer button:disabled { opacity:.42; cursor:not-allowed; } /* „Weiter" = klare Vorwärts-Aktion: warmer Marken-Gradient statt unauffälligem Ghost. */ .chapter-footer .chapter-nav-btn[data-next] { background: linear-gradient(180deg, var(--gold), var(--orange-deep)); color: var(--on-accent); border-color: rgba(255,255,255,.14); font-weight: 800; box-shadow: 0 1px 2px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.2); transition: filter .15s; } .chapter-footer .chapter-nav-btn[data-next]:hover { filter: brightness(1.07); } .chapter-footer .chapter-nav-btn[data-next]:disabled { opacity:.42; box-shadow:none; filter:none; } .chapter-done { grid-column: 3; justify-self: end; display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 13px; white-space: nowrap; } .chapter-done input { width: 16px; height: 16px; accent-color: var(--teal); } .chapter-confirm-backdrop { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; background: rgba(0, 18, 18, .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .chapter-confirm { width: min(420px, 100%); padding: 24px; text-align: center; } .chapter-confirm h2 { margin: 0 0 8px; color: var(--ink); font-size: 24px; } .chapter-confirm p { margin: 0; color: var(--text-muted); font-size: 14px; } .chapter-confirm-actions { display: flex; justify-content: center; gap: 10px; margin-top: 20px; } .chapter-confirm-actions .btn-coach, .chapter-confirm-actions .btn-ghost { min-width: 92px; justify-content: center; } /* ============================================================ Startseite ============================================================ */ /* Video unterhalb des Heros, bewusst begrenzt — nicht bildschirmfüllend (A2). */ .course-intro-video { padding: 26px 0 0; } .intro-video { max-width: 680px; margin: 0 auto; padding: 8px; } .intro-video-caption { margin: 10px 6px 4px; color: var(--text-muted); font-size: 13.5px; line-height: 1.5; text-align: center; } /* Hero kompakt (Design-Review A2): ein Blickfang — der Kurstitel — statt vieler konkurrierender Großelemente; Branding klein darüber, alles in eine Bildschirmhöhe. */ .hero { position: relative; overflow: hidden; padding: 48px 28px 42px; text-align: center; /* Rand statt Kante-an-Kante + Rundung (Design-Review A6) */ margin: 16px 18px 0; border-radius: var(--radius); } .hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background: url("bg07.png") center/cover no-repeat; opacity: .95; } .hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(120% 80% at 50% 0%, rgba(0,23,23,.42), rgba(0,23,23,.60) 55%, rgba(0,23,23,.92) 100%); } .hero > * { position: relative; z-index: 2; } .eyebrow { display: inline-block; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--border-strong); border-radius: 999px; padding: 6px 14px; margin-bottom: 22px; background: rgba(0,20,20,.55); text-shadow: var(--text-halo); } .hero-brand { display: flex; align-items: center; justify-content: center; gap: 11px; margin-bottom: 16px; } .hero-brand img { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 0 12px rgba(255,181,157,.3)); } .hero-brand-text { display: flex; flex-direction: column; line-height: 1.05; text-align: left; } .hero-brand-text strong { font-family: var(--font-head); font-size: 20px; font-weight: 700; color: var(--text); letter-spacing: .3px; } .hero-brand-text small { font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #ffc62b; margin-top: 2px; text-shadow: var(--text-halo); } .hero-title { font-family: var(--font-head); font-size: clamp(38px, 5.5vw, 58px); margin: 0 0 6px; line-height: 1.08; background: linear-gradient(180deg, #ffe9b0 8%, var(--gold) 55%, var(--orange-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero .claim { font-size: clamp(17px, 2.2vw, 21px); font-weight: 600; color: var(--ink); margin: 0 0 8px; } .hero .motto { font-size: 15px; color: var(--teal); font-style: italic; margin: 0 auto 22px; } .hero p.lead { max-width: 640px; margin: 0 auto 30px; color: var(--text); font-size: 18px; } /* Haupt-Knopf: bewusst zurückhaltend — kompakte Größe, sanfte Rundung statt Pille, Verlauf "von oben beleuchtet" + feiner Schatten statt Neon-Halo, Hover hellt nur leicht auf (kein Springen). Wirkt wertiger als der frühere Glow-Pillen-Look. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; font: inherit; font-weight: 600; font-size: 14.5px; letter-spacing: .01em; padding: 11px 22px; border-radius: 11px; border: 1px solid rgba(255,255,255,.14); color: var(--on-accent); background: linear-gradient(180deg, var(--gold), var(--orange-deep)); box-shadow: 0 1px 2px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.22); transition: filter .15s, box-shadow .15s; } .btn:hover { filter: brightness(1.07); box-shadow: 0 2px 7px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.22); text-decoration: none; } .btn.secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--border-strong); box-shadow: none; } .btn.secondary:hover { filter: none; border-color: rgba(255,255,255,.3); } .hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .hero-course-cta { min-width: min(280px, 100%); justify-content: center; } /* „So funktioniert dieser Kurs" */ .section { padding: 56px 0 0; } .section h2 { font-size: 30px; text-align: center; margin: 0 0 8px; text-shadow: var(--text-halo); } .section .sub { text-align: center; color: var(--ink); margin: 0 auto 34px; max-width: 620px; text-shadow: var(--text-halo); } .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 16px; } .step { min-height: 178px; padding: 22px 18px; display: flex; flex-direction: column; align-items: flex-start; } .step .n { font-family: var(--font-head); font-size: 30px; color: var(--gold); line-height: 1; } .step h4 { margin: 12px 0 6px; font-size: 17px; } .step p { margin: 0; color: var(--text-muted); font-size: 14px; } /* NotebookLM */ .notebook-section { padding-top: 58px; } .notebook-panel { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); gap: 22px; padding: 30px; border-color: rgba(150,209,211,.28); } .notebook-panel::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(135deg, rgba(150,209,211,.12), transparent 46%), linear-gradient(315deg, rgba(252,187,55,.12), transparent 48%); } .notebook-panel > * { position: relative; z-index: 1; } .notebook-copy h2 { text-align: left; margin: 8px 0 12px; font-size: clamp(28px,3vw,38px); color: var(--ink); } .notebook-copy p { color: var(--text); max-width: 680px; margin: 0; } .notebook-video-placeholder { display: grid; place-items: center; width: 100%; max-width: 680px; height: 150px; margin: 0 0 16px; border: 1px dashed rgba(252,187,55,.48); border-radius: 10px; background: linear-gradient(135deg, rgba(252,187,55,.16), rgba(150,209,211,.08)), rgba(0,23,23,.38); color: var(--gold); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; box-shadow: inset 0 0 30px rgba(0,0,0,.18); } .notebook-video-placeholder span { padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(252,187,55,.35); background: rgba(0,23,23,.42); font-size: 12px; } .notebook-features { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 22px; } .notebook-features span { border: 1px solid rgba(150,209,211,.24); border-radius: 999px; padding: 5px 10px; color: var(--teal); background: rgba(150,209,211,.08); font-size: 12.5px; font-weight: 700; } .notebook-actions { display: flex; gap: 12px; flex-wrap: wrap; } .notebook-card { align-self: stretch; padding: 18px; border-radius: 8px; border: 1px solid rgba(252,187,55,.28); background: rgba(0,23,23,.42); } .notebook-card strong { color: var(--gold); } .notebook-card ul { margin: 12px 0 0 18px; padding: 0; color: var(--text-muted); font-size: 14px; } .notebook-card li { margin: 7px 0; } /* Modul-Kacheln */ .cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } /* Breite Fenster: 3 Spalten -> der Modul-Abschnitt passt in eine Bildschirmhoehe (A6) */ @media (min-width: 1100px) { .cards { grid-template-columns: repeat(3, 1fr); } } .mcard { position: relative; overflow: hidden; padding: 22px; display: flex; flex-direction: column; gap: 12px; transition: transform .2s, border-color .2s; } .mcard:hover { transform: translateY(-3px); border-color: var(--border-strong); text-decoration: none; } /* Mouseover-Info (A3): Kurzbeschreibung des Moduls als einblendendes Overlay. */ .mcard-info { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 18px 20px; background: rgba(0,18,18,.93); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); color: var(--text); font-size: 13.5px; line-height: 1.55; opacity: 0; transition: opacity .18s ease; pointer-events: none; } .mcard-info-label { display: block; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); } .mcard:hover .mcard-info, .mcard:focus-visible .mcard-info { opacity: 1; } @media (hover: none) { .mcard-info { display: none; } } .mcard .chip { align-self: flex-start; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; } .chip.teilnehmer { color: var(--teal); background: rgba(150,209,211,.12); } .chip.trainer { color: var(--orange); background: rgba(255,181,157,.12); } .mcard h3 { margin: 0; font-size: 21px; color: var(--text); } .mcard p { margin: 0; color: var(--text-muted); font-size: 14px; } /* ---- Fortschrittsbalken (überall genutzt) ---- */ .bar { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; } .bar > i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--teal), var(--gold)); transition: width .4s ease; } .bar.small { height: 6px; } .progress-row { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--text-muted); } .progress-row .bar { flex: 1; } /* Download & Druck */ .downloads { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; } .dl { display: flex; align-items: center; gap: 14px; padding: 16px 18px; text-decoration: none; background: rgba(0,24,24,.85); transition: transform .2s, border-color .2s; } .dl:hover { transform: translateY(-2px); border-color: var(--border-strong); text-decoration: none; } .dl .ic { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; background: rgba(252,187,55,.14); color: var(--gold); } .dl .t { color: var(--text); font-weight: 600; display: block; } .dl .s { color: var(--text); font-size: 13px; } .dl.dl-featured { border-color: rgba(255,181,157,.4); background: linear-gradient(rgba(255,181,157,.07), rgba(255,181,157,.07)), rgba(0,24,24,.88); } .dl.dl-featured .ic { background: rgba(255,181,157,.16); color: var(--orange); } /* Cache-Hinweis */ .notice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; margin: 36px 0 0; border-left: 3px solid var(--gold); } .notice .ico { color: var(--gold); } .notice p { margin: 0; font-size: 14px; color: var(--text-muted); } /* ============================================================ Kapitel-/Kapitelseite ============================================================ */ .crumbs { font-size: 13px; color: var(--text-muted); padding: 22px 0 0; } .crumbs a { color: var(--text-muted); } .blockhead { padding: 8px 0 6px; } .blockhead h1 { font-size: clamp(28px, 4vw, 40px); margin: 6px 0 10px; color: var(--ink); } .blockhead .intro { color: var(--text); font-size: 17px; max-width: 720px; } .blocksummary { max-width: 760px; color: var(--text-muted); font-size: 16px; margin: -2px 0 12px; } .blockprog { margin: 18px 0 6px; max-width: 360px; } /* Medien aus generator_v2.py */ .lesson-media-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 16px 0 18px; } .lesson-media { position: relative; margin: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: rgba(6, 20, 24, .58); box-shadow: var(--shadow-soft); } .lesson-media img, .lesson-media video { display: block; width: 100%; height: auto; max-height: 420px; object-fit: cover; background: #061418; } .lesson-media video { aspect-ratio: 16 / 9; } .lesson-media figcaption { padding: 10px 12px; color: var(--text-muted); font-size: 13.5px; line-height: 1.45; border-top: 1px solid var(--border); background: rgba(255,255,255,.035); } .media-expand-btn { position: absolute; top: 10px; right: 10px; z-index: 2; width: 34px; height: 34px; border-radius: 999px; border: 1px solid rgba(150,209,211,.62); background: rgba(0,18,18,.72); color: var(--teal); font: inherit; font-size: 18px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-soft); } .media-expand-btn:hover { color: var(--ink); border-color: var(--gold); } .media-overlay { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 24px; background: rgba(0, 18, 18, .78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .media-overlay-panel { position: relative; width: min(1100px, 96vw); padding: 12px; border-color: rgba(150,209,211,.36); background: rgba(0,23,23,.88); } .media-overlay-panel video { display: block; width: 100%; max-height: min(calc(78dvh / var(--font-scale)), 720px); aspect-ratio: 16 / 9; background: #000; border-radius: 8px; } .media-overlay-panel iframe { display: block; width: 100%; height: min(calc(78dvh / var(--font-scale)), 720px); aspect-ratio: 16 / 9; border: 0; background: #000; border-radius: 8px; } .media-overlay-close { position: absolute; top: -14px; right: -14px; z-index: 2; width: 36px; height: 36px; border-radius: 999px; border: 1px solid rgba(150,209,211,.62); background: rgba(0,18,18,.95); color: var(--text); font: inherit; font-size: 24px; line-height: 1; cursor: pointer; box-shadow: var(--shadow-soft); } .media-overlay-close:hover { color: var(--ink); border-color: var(--gold); } /* NotebookLM-Aufruf (Kurs-KI-Familie -> violett wie .callout--ki / .ask-ki) */ /* A11: klar dunkler Kasten + weisser Lesetext (vorher wirkte er hell mit blass-gruener Schrift ueber dem Hintergrundbild). Farbe nur in Kante/Label (Lesbarkeits-Regel). */ .callout-nb { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; margin: 24px 0 8px; border: 1px solid rgba(195,179,242,.30); border-left: 4px solid var(--violet); background: rgba(10,16,32,.82); } .callout-nb .ico { color: var(--violet); font-size: 22px; } .callout-nb h4 { margin: 0 0 4px; color: var(--violet); font-family: var(--font-body); font-weight: 700; font-size: 15px; } .callout-nb p { margin: 0; font-size: 14.5px; color: var(--ink); } /* ── Typisierte Callouts (:::callout ) — Element-Stylebook Ebene 2 (Web+App identisch). Design „Kopfbalken": Icon+Label dunkel auf hellem Akzentbalken, Lesetext darunter IMMER neutral hell (Farbe nur im Rahmen — Lesbarkeits-Konvention wie GitHub-Alerts/Material). Ausnahme „wichtig": dunkelroter Balken mit weißem Text (lauteste Stufe, sparsam!). ── */ .callout { margin: 22px 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .callout-head { display: flex; align-items: center; gap: 9px; padding: 8px 14px; line-height: 1.35; } .callout-ico { flex: 0 0 auto; font-size: 15px; line-height: 1; } .callout-label { font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; font-weight: 800; } .callout-body { padding: 12px 15px 13px; min-width: 0; } .callout-body > :first-child { margin-top: 0; } .callout-body > :last-child { margin-bottom: 0; } .callout-body p { font-size: 14.5px; color: var(--text); margin: 8px 0 0; line-height: 1.65; } /* Box-Design VARIANTE C (Auftraggeber-Wahl 2026-06-10, s. design-varianten.html): leise Boxen treten einheitlich DUNKEL zurueck (Farbe nur im Kopfbalken); "Zum Merken" = INVERTIERT: helle Box, schwarze Schrift — die eine Kernbotschaft pro Kapitel traegt den staerksten Kontrast der Seite. "Sehr wichtig" (rot) bleibt dunkel, aber dichter/waermer als die leisen Stufen. */ .callout--info { border-color: rgba(255,255,255,.10); background: rgba(0,20,20,.72); } .callout--info > .callout-head { background: var(--blue); color: var(--blue-deep); } .callout--tipp { border-color: rgba(255,255,255,.10); background: rgba(0,20,20,.72); } .callout--tipp > .callout-head { background: var(--green); color: var(--green-deep); } .callout--merken { border: 1.5px solid var(--gold); background: #fdf6e3; box-shadow: 0 4px 18px rgba(0,0,0,.35); } .callout--merken > .callout-head { background: var(--gold); color: #3a2700; } .callout--merken .callout-body :is(p, li, strong) { color: #1c1607; } .callout--merken .callout-body p { font-weight: 500; } .callout--merken .callout-body a { color: var(--prompt-blau-tief); } .callout--ki { border-color: rgba(195,179,242,.26); background: rgba(0,20,20,.72); } .callout--ki > .callout-head { background: var(--violet); color: var(--violet-deep); } .callout--warnung { border-color: rgba(255,255,255,.10); background: rgba(0,20,20,.72); } .callout--warnung > .callout-head { background: var(--orange); color: #4a1b00; } .callout--wichtig { border-color: rgba(226,75,74,.40); background: rgba(58,12,12,.88); } .callout--wichtig > .callout-head { background: var(--red-bar); color: #ffffff; } /* ── Aufklapp-/Kursfassungs-Boxen (:::ausklapp / :::kursfassung) — deutlich klickbar: Kopfzeile wie ein Knopf (Pfeil dreht beim Öffnen, Hover, „Aufklappen"-Etikett). Vorher ungestylt (nacktes
) -> Klickbarkeit war unsichtbar. ── */ .lesson-collapse { margin: 20px 0; border: 1px solid rgba(150,209,211,.35); border-radius: 12px; background: rgba(150,209,211,.05); overflow: hidden; } .lesson-collapse > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 11px 14px; font-weight: 700; font-size: 14.5px; color: var(--teal); background: rgba(150,209,211,.10); transition: background .18s; } .lesson-collapse > summary::-webkit-details-marker { display: none; } .lesson-collapse > summary::before { content: "▸"; font-size: 15px; line-height: 1; transition: transform .18s; } .lesson-collapse[open] > summary::before { transform: rotate(90deg); } .lesson-collapse > summary::after { content: "Aufklappen"; margin-left: auto; flex: 0 0 auto; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px; } .lesson-collapse[open] > summary::after { content: "Zuklappen"; } .lesson-collapse > summary:hover { background: rgba(150,209,211,.16); } .lesson-collapse-body { padding: 12px 15px 13px; } .lesson-collapse-body > :first-child { margin-top: 0; } .lesson-collapse-body > :last-child { margin-bottom: 0; } /* ── Kopierbarer Prompt-Kasten (prompt-Fence) — Web+App identisch. A7: weisser Kasten, schwarze Schrift, dunkelblauer Rahmen, Label "Prompt". ── */ .prompt-box { margin: 18px 0; border: 1.5px solid var(--prompt-rahmen); border-radius: 10px; background: var(--prompt-flaeche); overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.28); } .prompt-box-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 12px; background: var(--prompt-kopf); border-bottom: 1px solid var(--prompt-rahmen); } .prompt-box-tag { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; font-weight: 800; color: var(--prompt-blau-tief); } .prompt-box-copy { flex: 0 0 auto; font-size: 13px; padding: 4px 11px; border-radius: 7px; border: 1px solid var(--prompt-rahmen); background: #fff; color: var(--prompt-blau-tief); cursor: pointer; font-weight: 600; } .prompt-box-copy:hover { background: var(--prompt-blau-tief); border-color: var(--prompt-blau-tief); color: #fff; } .prompt-box-text { margin: 0; padding: 12px 14px; white-space: pre-wrap; word-break: break-word; font-size: 13.5px; line-height: 1.55; color: var(--prompt-tinte); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* Fragen-Modus: Einführung (Klartext, Abschnitt 0 — wie der Lesemodus beginnt) */ .q-stream { display: block; } .q-intro { padding: 2px 2px 4px; } .q-intro-kicker { margin: 0 0 8px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; } .q-intro-text { margin: 0 0 16px; font-size: 16px; line-height: 1.6; color: var(--text); } .q-intro-howto { display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; border-radius: var(--radius-sm); border: 1px solid rgba(150,209,211,.30); border-left: 3px solid var(--teal); background: rgba(150,209,211,.07); } .q-intro-howto-ico { color: var(--teal); font-size: 17px; line-height: 1.5; flex: 0 0 auto; } .q-intro-howto p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text); } .q-intro-howto strong { color: var(--text); } /* Fragenkarte (eine Frage je Abschnitt) — Kopf mit Schritt-Zähler + farbiger Nummer */ .qcard { padding: 18px 20px; margin: 16px 0; transition: border-color .2s; } .qcard-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 13px; } .qcard-step { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); } .qcard-step-nr { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: rgba(150,209,211,.14); color: var(--teal); border: 1px solid rgba(150,209,211,.40); font-family: var(--font-head); font-size: 15px; transition: background .18s, color .18s, border-color .18s; } .qcard.done .qcard-step-nr { background: var(--teal); color: var(--on-accent); border-color: var(--teal); box-shadow: 0 0 10px rgba(150,209,211,.4); } .qcard.eigene .qcard-step-nr { background: rgba(255,181,157,.14); color: var(--orange); border-color: rgba(255,181,157,.40); } .qcard.eigene.done .qcard-step-nr { background: var(--orange); color: var(--on-accent); border-color: var(--orange); } /* Prompt-Eingabemaske (Platzhalter-Prompts mit eigenen Angaben) — Dialog */ .prompt-dialog-backdrop { position: fixed; inset: 0; z-index: 410; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(0,18,18,.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .prompt-dialog { width: min(560px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto; padding: 20px 22px; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--surface); box-shadow: 0 22px 60px rgba(0,0,0,.5); } /* Farbig hinterlegter Kopf (Kurs-KI-Indigo) — Vollband bis an die Dialogkanten. */ .pd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: -20px -22px 16px; padding: 15px 20px; background: linear-gradient(135deg, #2f1f63, #241550); border-bottom: 1px solid rgba(195,179,242,.42); border-radius: var(--radius) var(--radius) 0 0; } .pd-head h2 { margin: 0; font-family: var(--font-head); font-size: 20px; color: #fff; } .pd-close { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.10); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; } .pd-close:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.4); } .pd-intro { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: var(--text-muted); } .pd-field + .pd-field { margin-top: 14px; } .pd-q { display: block; font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 3px; } .pd-hint { margin: 0 0 7px; font-size: 12.5px; color: var(--text-muted); } .pd-in { width: 100%; box-sizing: border-box; resize: vertical; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); padding: 10px 12px; font: inherit; font-size: 15px; } .pd-in:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); } /* EIN Mikrofon-Knopf (füllt das zuletzt angetippte Feld) + Hinweis */ .pd-voice { display: flex; align-items: center; gap: 10px; margin-top: 12px; } .pd-voice-hint { font-size: 12.5px; color: var(--text-muted); } .pd-mic { flex: 0 0 auto; width: 44px; height: 40px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .pd-mic:hover { color: var(--teal); border-color: var(--teal); } .pd-mic.is-recording { background: var(--orange); color: var(--on-accent); border-color: transparent; animation: micRecPulse 1.1s infinite ease-in-out; } .pd-preview-wrap { margin-top: 18px; } .pd-preview-label { display: block; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; margin-bottom: 6px; } .pd-preview-label small { letter-spacing: 0; text-transform: none; font-weight: 500; font-size: 11.5px; } .pd-preview { width: 100%; box-sizing: border-box; resize: vertical; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); padding: 12px 13px; font: inherit; font-size: 14.5px; line-height: 1.5; } .pd-preview:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; } html[data-theme="hell"] .pd-in:focus-visible, html[data-theme="hell"] .pd-preview:focus-visible { outline-color: var(--teal-deep); border-color: var(--teal-deep); } .pd-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 18px; } .pd-actions button { min-height: 42px; padding: 9px 18px; border-radius: 10px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; } .qcard.done { border-color: rgba(150,209,211,.45); } .qtop { display: flex; gap: 14px; align-items: flex-start; } .qnum { font-family: var(--font-head); font-size: 22px; color: var(--teal); line-height: 1.2; flex: 0 0 auto; min-width: 26px; } .qbody { flex: 1; min-width: 0; } .qtext { font-size: 18px; color: var(--prompt-tinte); margin: 0; } .qactions { display: flex; gap: 10px; align-items: center; margin-top: 14px; flex-wrap: wrap; } /* Checkbox „erledigt" */ .check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; font-size: 14px; color: var(--text-muted); } .check input { position: absolute; opacity: 0; width: 0; height: 0; } .check .box { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--border-strong); display: inline-flex; align-items: center; justify-content: center; transition: all .15s; } .check .box::after { content: "✓"; color: var(--on-accent); font-size: 13px; opacity: 0; } .check input:checked + .box { background: var(--teal); border-color: var(--teal); box-shadow: 0 0 10px rgba(150,209,211,.5); } .check input:checked + .box::after { opacity: 1; } .check input:checked ~ .lbl { color: var(--teal); } .check input:focus-visible + .box { outline: 2px solid var(--gold); outline-offset: 2px; } .btn-copy { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted); border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 13px; cursor: pointer; } .btn-copy:hover { color: var(--text); border-color: var(--border-strong); } /* „Mitnehmen" (aufklappbar) */ .mitnehmen { margin-top: 14px; border-top: 1px dashed var(--border); padding-top: 10px; } .mitnehmen > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; color: var(--teal); font-size: 13.5px; font-weight: 600; } .mitnehmen > summary::-webkit-details-marker { display: none; } .mitnehmen > summary .tag { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; background: rgba(150,209,211,.14); color: var(--teal); padding: 2px 8px; border-radius: 999px; } .mitnehmen p { margin: 10px 0 2px; font-size: 14px; color: var(--text-muted); } /* „Deine eigene Frage" — wärmster Akzent */ .qcard.eigene { border: 1px solid rgba(255,181,157,.40); border-left: 4px solid var(--orange); background: rgba(255,181,157,.05); } .qcard.eigene .qnum { color: var(--orange); } /* Fragetext bleibt schwarz auf weiss (A7) */ .qcard.eigene .badge { display: inline-block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--orange); background: rgba(255,181,157,.14); padding: 3px 10px; border-radius: 999px; margin-bottom: 8px; } .qcard.eigene .check input:checked + .box { background: var(--orange); border-color: var(--orange); box-shadow: 0 0 10px rgba(255,181,157,.5); } .qcard.eigene .check input:checked ~ .lbl { color: var(--orange); } /* Frage als anklickbarer Prompt (Fragenmodus): Klick -> an die Kurs-KI, Kopier-Icon daneben. .qtext (18px/Farbe) bleibt erhalten; hier nur Button-Reset. */ .qtext-row { display: flex; align-items: flex-start; gap: 10px; } /* Mini-Etikett "Prompt" ueber der klickbaren Frage (A7) */ .prompt-tag-mini { display: inline-block; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; font-weight: 800; color: var(--prompt-blau-tief); background: var(--prompt-kopf); border: 1px solid var(--prompt-rahmen); border-radius: 5px 5px 0 0; border-bottom: none; padding: 2px 9px; margin: 0 0 -1px 0; position: relative; z-index: 1; } .qtext-ask { flex: 1 1 auto; min-width: 0; text-align: left; white-space: normal; overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; cursor: pointer; position: relative; font-family: inherit; background: var(--prompt-flaeche); color: var(--prompt-tinte); border: 1.5px solid var(--prompt-rahmen); border-radius: 0 var(--radius-sm) var(--radius-sm) var(--radius-sm); padding: 11px 13px 11px 34px; transition: background .18s, border-color .18s, transform .15s; box-shadow: 0 1px 6px rgba(0,0,0,.25); } .qtext-ask::before { content: "✦"; position: absolute; left: 13px; top: 11px; color: var(--prompt-blau-tief); font-weight: 700; } .qtext-ask:hover { background: var(--prompt-kopf); transform: translateY(-1px); } .qtext-ask:focus-visible { outline: 2px solid var(--prompt-rahmen); outline-offset: 2px; } .qcopy-icon { flex: 0 0 auto; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted); cursor: pointer; font-size: 15px; transition: color .18s, border-color .18s, background .18s; } .qcopy-icon:hover { color: var(--gold); border-color: rgba(252,187,55,.45); background: rgba(252,187,55,.10); } .qcopy-icon svg, .ask-ki-copy svg { width: 16px; height: 16px; display: block; } .qcard.eigene .qtext-ask:hover { background: rgba(255,181,157,.10); border-color: rgba(255,181,157,.38); } .qcard.eigene .qcopy-icon:hover { color: var(--orange); border-color: rgba(255,181,157,.45); background: rgba(255,181,157,.10); } /* ============================================================ "Frag die Kurs-KI" — interaktiver Hybrid-Fragepunkt (Lesemodus, kursweit) ============================================================ */ /* Frag-die-Kurs-KI-Box: echter violetter Kopfbalken + weisse Ueberschrift (wie callout-head, Stylebook-Regel "Farbe nur im Balken, max. Kontrast"; Auftraggeber 2026-06-12). Box randlos, Balken spannt volle Breite, Inhalt eigener Innenabstand. */ .ask-ki { margin: 20px 0; padding: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(195,179,242,.34); border-left: 4px solid var(--violet); background: rgba(0,20,20,.72); } .ask-ki-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; background: var(--violet); margin-bottom: 0; } .ask-ki-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; font-weight: 800; color: var(--violet-deep); } .ask-ki-copy { flex: 0 0 auto; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--violet-deep); background: rgba(255,255,255,.55); color: var(--violet-deep); cursor: pointer; font-size: 15px; transition: color .18s, border-color .18s, background .18s; } .ask-ki-copy:hover { color: #fff; border-color: var(--violet-deep); background: var(--violet-deep); } /* Inhalt (Frage-Knopf + Hint) bekommt eigenen Innenabstand, da .ask-ki randlos ist. */ .ask-ki > .ask-ki-hint { margin: 0 14px 14px; } .ask-ki-q { display: block; width: calc(100% - 28px); box-sizing: border-box; margin: 13px 14px; text-align: left; white-space: normal; overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; cursor: pointer; position: relative; font-family: var(--font-body); font-size: 16.5px; line-height: 1.5; font-weight: 600; color: var(--prompt-tinte); background: var(--prompt-flaeche); border: 1.5px solid var(--prompt-rahmen); border-radius: var(--radius-sm); box-shadow: 0 1px 6px rgba(0,0,0,.25); padding: 12px 14px 12px 38px; transition: border-color .18s, background .18s, transform .15s; } .ask-ki-q::before { content: "✦"; position: absolute; left: 14px; top: 12px; color: var(--prompt-blau-tief); font-weight: 700; } .ask-ki-q:hover { background: var(--prompt-kopf); transform: translateY(-1px); } .ask-ki-q:focus-visible { outline: 2px solid var(--prompt-rahmen); outline-offset: 2px; } /* [Platzhalter]-Chip sitzt auf dem WEISSEN Frage-Knopf -> dunkler Chip mit heller Schrift (P7-Kontrastregel; vorher Hell-Lila auf Weiss = unlesbar, Befund 2026-06-11). */ .ask-ki-var { color: #fff; background: var(--violet-deep); border-radius: 5px; padding: 0 5px; font-style: normal; font-weight: 600; } /* "Darauf achten" = Achtung/Gegenprobe-Stufe (A8): Orange-Kante, abgesetzter warmer Hintergrund, Lesetext WEISS und kraeftiger (nicht mehr duenn/hellgruen). */ .ask-ki-hint { font-size: 14px; color: var(--ink); font-weight: 500; margin: 10px 0 0; line-height: 1.6; background: rgba(184,57,0,.13); border: 1px solid rgba(255,181,157,.32); border-left: 3px solid var(--orange); border-radius: var(--radius-sm); padding: 10px 13px; } .ask-ki-hint-tag { display: inline-block; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--orange); background: rgba(255,181,157,.16); padding: 2px 8px; border-radius: 999px; margin-right: 8px; font-weight: 800; } .ask-ki-hint strong { color: var(--ink); } .ask-ki-hint-liste { margin: 6px 0 0; padding-left: 20px; } .ask-ki-hint-liste li { margin: 3px 0; } /* Anbieter-Karte (Modul 09 "Was geht mit KI") — je Anbieter eine abgehobene Karte */ .anbieter-card { margin: 22px 0; padding: 18px 20px 20px; border: 1px solid var(--border); border-left: 4px solid var(--teal); border-radius: var(--radius); background: linear-gradient(180deg, rgba(150,209,211,.06), rgba(150,209,211,.02)); } /* V7 v2 (Auftraggeber-Spez): Karte zugeklappt = nur Name+Badges; Klick klappt Profil + Funktions-Tabelle auf; Standard-Frage-Zeile IN der offenen Karte. */ /* Kopfzeile farblich abgesetzt (Auftraggeber 2026-06-10 nacht): Firmenname hebt sich vom Erklärtext darunter ab, besonders im aufgeklappten Zustand. */ .anbieter-head { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; padding: 9px 13px; margin: -18px -20px 0; border-radius: 11px 11px 0 0; background: linear-gradient(180deg, rgba(195,179,242,.16), rgba(195,179,242,.08)); border-bottom: 1px solid rgba(195,179,242,.22); transition: background .15s; } details.anbieter-card[open] > .anbieter-head { background: linear-gradient(180deg, rgba(195,179,242,.24), rgba(195,179,242,.10)); border-bottom: 1px solid rgba(195,179,242,.38); margin-bottom: 14px; } .anbieter-head::-webkit-details-marker { display: none; } .anbieter-head:hover { background: linear-gradient(180deg, rgba(195,179,242,.28), rgba(195,179,242,.14)); } .anbieter-head:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; } .anbieter-chev { margin-left: auto; color: var(--text-muted); font-size: 12px; transition: transform .2s; } details.anbieter-card[open] > .anbieter-head .anbieter-chev { transform: rotate(90deg); } .anbieter-frage-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); } .anbieter-frage-btn { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--violet); background: rgba(195,179,242,.08); border: 1px solid rgba(195,179,242,.32); border-radius: 9px; padding: 8px 13px; transition: background .15s, border-color .15s; } .anbieter-frage-btn:hover { background: rgba(195,179,242,.16); border-color: rgba(195,179,242,.5); } .anbieter-card .anbieter-name { margin: 0 0 4px; font-size: 20px; color: var(--ink); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .anbieter-body > p:first-child { margin-top: 6px; color: var(--text); } .anbieter-body table { width: 100%; border-collapse: collapse; margin: 14px 0 4px; border-radius: 7px; overflow: hidden; } .anbieter-body th, .anbieter-body td { border: 1px solid var(--border); padding: 8px 11px; text-align: left; vertical-align: top; } .anbieter-body th { color: var(--ink); background: rgba(150,209,211,.12); font-weight: 800; font-size: 14px; } .anbieter-body td { color: var(--text-muted); background: rgba(255,255,255,.025); font-size: 14.5px; } .anbieter-body td:first-child { color: var(--teal); font-weight: 700; white-space: nowrap; } .anbieter-body .ask-ki { margin: 14px 0 2px; } /* Zurück/Weiter */ .pager { display: flex; justify-content: space-between; gap: 14px; margin-top: 40px; } .pager a { flex: 1; padding: 16px 18px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); } .pager a:hover { border-color: var(--border-strong); text-decoration: none; } .pager a.next { text-align: right; } .pager .k { display: block; font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; } /* „kopiert!"-Hinweis */ .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--teal); color: var(--on-accent); padding: 10px 20px; border-radius: 999px; font-weight: 600; font-size: 14px; opacity: 0; pointer-events: none; transition: all .3s; z-index: 100; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ============================================================ Responsiv ============================================================ */ /* ============================================================ Nutzer-Leiste in der Kopfzeile ============================================================ */ .profilbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .profilbar .who { font-size: 12px; color: var(--text-muted); } .profilbar .user-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--text); } /* Schlanke Profilleiste (2026-06-12): E-Mail pur + Token-Verbrauchs-Balken */ .profilbar .user-mail { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--text-muted); } .token-balken { width: 90px; height: 8px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.13); border: 1px solid var(--border); flex: 0 0 auto; } .token-balken i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--teal), var(--gold)); transition: width .4s ease; } .token-balken.voll i { background: var(--red-bar); } html[data-theme="hell"] .token-balken { background: rgba(0,60,60,.12); } /* ============================================================ Bild-Bänder zwischen Abschnitten ============================================================ */ .quoteband { position: relative; overflow: hidden; margin: 64px 0 8px; border-radius: var(--radius); padding: 64px 28px; text-align: center; } .quoteband::before { content: ""; position: absolute; inset: 0; z-index: 0; background: url("band.png") center/cover no-repeat; opacity: .9; } .quoteband::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,23,23,.55), rgba(0,23,23,.78)); } .quoteband > * { position: relative; z-index: 2; } .quoteband .q { font-family: var(--font-head); font-style: italic; font-size: clamp(20px,3vw,30px); color: var(--ink); margin: 0 auto; max-width: 760px; } .quoteband .by { color: var(--gold); font-size: 14px; margin-top: 12px; letter-spacing: .04em; } /* Modul-Kopfbanner (Bild direkt als background-image am Element gesetzt) */ .modhead { position: relative; overflow: hidden; border-radius: var(--radius); margin: 22px 0 10px; padding: 56px 28px; background-size: cover; background-position: center; min-height: 180px; } .modhead::after { content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, rgba(0,23,23,.25), rgba(0,23,23,.72)); } .modhead > * { position: relative; z-index: 2; } .modhead h1 { font-size: clamp(26px,4vw,38px); color:#fff; margin: 8px 0 0; text-shadow: 0 2px 12px rgba(0,0,0,.5); } .modhead p { color: #eef; margin: 8px 0 0; max-width: 680px; text-shadow: 0 1px 6px rgba(0,0,0,.5); } /* Kapitel-Abschnitt mit eigenem Hintergrundbild (Bild je Kapitel per inline-Style) */ .blockband { position: relative; overflow: hidden; border-radius: var(--radius); margin: 30px 0; padding: 30px 26px 14px; background-size: cover; background-position: center; } .blockband::before { content:""; position:absolute; inset:0; z-index:0; background: linear-gradient(180deg, rgba(0,23,23,.38), rgba(0,23,23,.60) 45%, rgba(0,23,23,.80)); } .blockband > * { position: relative; z-index: 1; } .blockband .blockhead h1 { text-shadow: 0 2px 12px rgba(0,0,0,.55); } /* Sektion mit zartem Bild-Hintergrund (z. B. Trainer-Bereich) */ .section.onimage { position: relative; overflow: hidden; border-radius: var(--radius); padding: 44px 28px; margin-top: 64px; } .section.onimage::before { content:""; position:absolute; inset:0; z-index:0; background: url("dawn.png") center/cover no-repeat; opacity:.5; } .section.onimage::after { content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, rgba(0,23,23,.78), rgba(0,23,23,.9)); } .section.onimage > * { position: relative; z-index: 2; } /* Trainer-Inhalte: standardmäßig verborgen, per JS eingeblendet */ .trainer-only[hidden] { display: none !important; } /* ============================================================ Integrierter Kurschat ============================================================ */ .course-chat { position: fixed; right: 0; top: 76px; bottom: 18px; width: min(380px, calc(100vw - 28px)); z-index: 80; transform: translateX(calc(100% - 50px)); transition: transform .25s ease; pointer-events: none; } body.course-chat-open .course-chat { transform: translateX(0); } body.course-chat-expanded .course-chat { width: min(760px, calc(100vw - 28px)); } .course-chat-tab { position: absolute; left: 0; bottom: 96px; width: 50px; height: 100px; border: 1px solid rgba(179,38,30,.55); border-right: 0; border-radius: 14px 0 0 14px; background: var(--red); /* gut sichtbarer Rot-Ton (Palette „sehr wichtig") */ color: #fff; display: grid; place-items: center; align-content: center; gap: 2px; font-weight: 800; font-size: 12px; cursor: pointer; pointer-events: auto; box-shadow: var(--shadow); } .course-chat-tab span { font-size: 15px; line-height: 1; } .course-chat-tab b { line-height: 1; } .course-chat-tab small { color: rgba(255,255,255,.88); font-size: 10px; line-height: 1; } .course-chat-box { height: 100%; margin-left: 50px; display: grid; grid-template-rows: auto 1fr auto auto; overflow: hidden; border: 1px solid var(--border-strong); border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); background: var(--bg); box-shadow: var(--shadow); backdrop-filter: blur(18px); pointer-events: auto; } .course-chat-title { display: flex; align-items: center; gap: 10px; min-width: 0; } .course-chat-title-icon { width: 36px; height: 36px; flex: 0 0 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; color: #d9cdfb; background: rgba(195,179,242,.18); border: 1px solid rgba(195,179,242,.42); } .course-chat-title-icon svg, .course-chat-avatar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .course-chat-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px; /* Farbig hinterlegter Kopf (Kurs-KI-Indigo) — hebt sich klar vom Gesprächs- körper ab (Auftraggeber 2026-06-18: „oben farbig hinterlegen, dunkles Blau"). */ background: linear-gradient(135deg, #2f1f63, #241550); border-bottom: 1px solid rgba(195,179,242,.42); } .course-chat-head strong { display: block; color: #fff; } .course-chat-head small { display: block; color: rgba(227,246,246,.74); margin-top: 2px; } /* Aktionsknöpfe sitzen auf dem dunklen Band -> hell/transluzent statt Flächenton. */ .course-chat-head .course-chat-expand, .course-chat-head .course-chat-close { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); color: #fff; } .course-chat-head .course-chat-expand:hover, .course-chat-head .course-chat-close:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.4); } .course-chat-head-actions { display: flex; align-items: center; gap: 8px; } .course-chat-expand { min-width: 36px; height: 34px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; font-size: 17px; font-weight: 800; cursor: pointer; } .course-chat-expand:hover { border-color: var(--gold); color: #fff; } .course-chat-close { width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 22px; line-height: 1; cursor: pointer; } .course-chat-log { min-height: 0; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; } .course-chat-msg { max-width: 92%; display: flex; gap: 8px; align-items: flex-start; } .course-chat-avatar { width: 28px; height: 28px; flex: 0 0 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); } .course-chat-bubble { min-width: 0; padding: 11px 13px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); } .course-chat-msg p, .course-chat-msg li { margin: 0; color: #fff; font-size: 14px; line-height: 1.45; } .course-chat-msg p + p { margin-top: 9px; } .course-chat-msg ul { margin: 8px 0 0 18px; padding: 0; } .course-chat-msg li { margin: 4px 0; } .course-chat-msg h4 { margin: 2px 0 7px; color: var(--gold); font-family: var(--font-body); font-size: 14px; } .course-chat-msg strong { color: #fff; font-weight: 700; } .course-chat-msg code { padding: 1px 5px; border-radius: 5px; color: var(--gold); background: rgba(252,187,55,.10); font-size: .92em; } .course-chat-msg.assistant { align-self: flex-start; } /* Ruhige neutrale Blasen; Akzent nur im Avatar-Symbol. */ .course-chat-msg.assistant .course-chat-avatar { color: var(--gold); border-color: rgba(252,187,55,.30); } .course-chat-msg.assistant .course-chat-bubble { background: var(--surface); border-color: var(--border); } .course-chat-msg.user { align-self: flex-end; flex-direction: row-reverse; } .course-chat-msg.user .course-chat-avatar { color: var(--teal); border-color: rgba(150,209,211,.30); } .course-chat-msg.user .course-chat-bubble { background: var(--surface-2); border-color: var(--border-strong); } .course-chat-msg.thinking { min-width: 142px; } /* Anklickbarer Kurs-Sprung-Link im KI-Coach (springt direkt ins Kapitel) */ .course-chat-bubble a.chat-jump { color: var(--teal); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .course-chat-bubble a.chat-jump:hover { color: var(--gold); } /* Abgesetzte Kontingent-Hinweiskarte (HTTP 429) */ .course-chat-msg.quota .course-chat-avatar { color: var(--gold); border-color: rgba(252,187,55,.30); } .course-chat-msg.quota .course-chat-bubble { background: rgba(252,187,55,.06); border-color: rgba(252,187,55,.28); border-left: 3px solid var(--gold); } /* Chat-Verlauf: Leiste oben, Sitzungs-Trenner, Loeschen, vergangene Nachrichten */ .course-chat-history-bar { align-self: stretch; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 4px 2px 8px; border-bottom: 1px dashed var(--border); } .course-chat-history-hint { color: var(--text-muted); font-size: 12px; line-height: 1.4; } .course-chat-history-clear, .course-chat-session-del { border: 1px solid var(--border); background: transparent; color: var(--text-muted); font: inherit; font-size: 12px; border-radius: 999px; padding: 3px 10px; cursor: pointer; white-space: nowrap; } .course-chat-session-del { padding: 2px 8px; line-height: 1; } .course-chat-history-clear:hover, .course-chat-session-del:hover { border-color: rgba(255,120,120,.6); color: #ff9d9d; } .course-chat-session-sep { align-self: stretch; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; color: var(--text-muted); } .course-chat-session-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); } .course-chat-confirm { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); flex-wrap: wrap; } .course-chat-confirm button { border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; font-size: 12px; border-radius: 999px; padding: 3px 10px; cursor: pointer; } .course-chat-confirm button.danger { border-color: rgba(255,120,120,.55); color: #ff9d9d; background: rgba(255,90,90,.10); } .course-chat-confirm button.danger:hover { background: rgba(255,90,90,.18); color: #ffb3b3; } .course-chat-msg.is-history { opacity: .82; } .course-chat-msg.is-history .course-chat-bubble { background: rgba(255,255,255,.03); } .typing-dots { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; } .typing-dots i { width: 5px; height: 5px; border-radius: 999px; background: var(--gold); opacity: .35; animation: typingPulse 1s infinite ease-in-out; } .typing-dots i:nth-child(2) { animation-delay: .16s; } .typing-dots i:nth-child(3) { animation-delay: .32s; } @keyframes typingPulse { 0%, 80%, 100% { transform: translateY(0); opacity: .35; } 40% { transform: translateY(-4px); opacity: 1; } } .course-chat-form { display: block; padding: 12px; border-top: 1px solid var(--border); } .course-chat-input-wrap { position: relative; min-width: 0; } .course-chat-form textarea { width: 100%; min-height: 44px; max-height: 130px; resize: vertical; border-radius: 14px; /* Helles Eingabefeld (hellblau→weiß) mit dunkler Schrift — besserer Kontrast beim Tippen (Auftraggeber 2026-06-18). */ border: 1px solid #b8d2ea; background: linear-gradient(180deg, #eaf3fc, #ffffff); color: #122236; padding: 11px 100px 11px 13px; font: inherit; font-size: 14px; display: block; } .course-chat-form textarea::placeholder { color: #5d728a; } .course-chat-form textarea:focus-visible { border-color: var(--teal); outline: 2px solid var(--teal); outline-offset: 1px; } .course-chat-form button { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; border: 0; border-radius: 999px; padding: 0; background: var(--gold); color: var(--on-accent); font-weight: 800; cursor: pointer; } .course-chat-send span[aria-hidden="true"] { font-size: 15px; line-height: 1; } .course-chat-form .course-chat-record { position: absolute; right: 52px; bottom: 7px; width: 36px; height: 36px; min-height: 36px; min-width: 36px; padding: 0; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); font-size: 10px; line-height: 1; box-shadow: none; } /* Tap-Ziel auf >=44px erweitern, ohne die kompakte Optik aufzublaehen. */ .course-chat-form .course-chat-record::after, .course-chat-form .course-chat-send::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; } /* Senden: solides Gold (on-accent-Symbol), ohne plumpen Glow-Halo. */ .course-chat-form .course-chat-send { position: absolute; right: 8px; bottom: 7px; width: 36px; height: 36px; min-width: 36px; min-height: 36px; } /* Hellmodus: --gold ist dort vertieft (dunkel) -> Symbol hell, sonst dunkel-auf-dunkel. */ html[data-theme="hell"] .course-chat-form .course-chat-send, html[data-theme="hell"] .course-chat-form .course-chat-send.stop { color: #fff; } .course-chat-form .course-chat-record:hover { border-color: var(--gold); color: var(--text); } .course-chat-form .course-chat-record svg { width: 17px; height: 17px; display: block; margin: 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .course-chat-form .course-chat-record.recording { background: var(--orange); color: var(--on-accent); border-color: transparent; animation: micRecPulse 1.1s infinite ease-in-out; } /* Mikrofon blinkt waehrend der Aufnahme: man sieht, dass man reinsprechen kann. */ .course-chat-form .course-chat-record.recording svg { animation: micBlink 1s infinite ease-in-out; } @keyframes micBlink { 0%, 100% { opacity: 1; } 50% { opacity: .2; } } @keyframes micRecPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(255,181,157,.18); } 50% { box-shadow: 0 0 0 8px rgba(255,181,157,.05); } } .course-chat-form.transcribing .course-chat-record { cursor: progress; opacity: .75; } .course-chat-form .course-chat-send.stop { min-width: 32px; background: var(--orange); color: var(--on-accent); } .course-chat-form.busy .course-chat-record { opacity: .55; cursor: not-allowed; } .course-chat-form.busy .course-chat-send { cursor: pointer; } @keyframes micPulse { 0%, 100% { transform: scale(.8); opacity: .65; } 50% { transform: scale(1.15); opacity: 1; } } .course-chat-note { margin: 0; padding: 0 14px 14px; color: var(--text-muted); font-size: 12px; line-height: 1.35; } @media (max-width: 900px) { .step { min-height: 164px; } .cards { grid-template-columns: 1fr; } .notebook-panel { grid-template-columns: 1fr; padding: 22px; } .notebook-copy h2 { text-align: center; } .notebook-copy p { text-align: center; } .notebook-video-placeholder { margin-left: auto; margin-right: auto; } .notebook-features, .notebook-actions { justify-content: center; } /* Kopf-Navigation bleibt mobil bedienbar: nur das "Start"-Aufklappmenü (enthält Module + alte Einträge). Die Inline-Modul-Pills haben oben keinen Platz und werden ausgeblendet — die Module stehen dafür IM Menü. */ .topnav { display: flex; gap: 8px; margin-left: 4px; flex: 0 0 auto; } .topnav-mods { display: none; } .topnav-menu { flex: 0 0 auto; } .topnav-menu > summary { font-size: 14px; } .topnav-dropdown { left: 0; max-height: calc(70dvh / var(--font-scale)); overflow-y: auto; } .menu-toggle { display: inline-block; } .sidebar { position: fixed; left: 0; top: var(--topbar-h); z-index: 40; transform: translateX(-100%); transition: transform .25s; width: 86%; max-width: 320px; background: var(--surface); box-shadow: 0 18px 50px rgba(0,0,0,.45); } .sidebar.open { transform: translateX(0); } .content .wrap#modulinhalt { height: calc(var(--vh-voll) - var(--topbar-h)); padding: 8px; } .chapter-player { border-radius: 0; border-left: 0; border-right: 0; } .chapter-header { display: block; padding: 13px 14px 10px; } .chapter-header-tools { margin-top: 12px; justify-items: stretch; min-width: 0; } .chapter-notebook-btn { width: 100%; } .chapter-header .progress-row { margin-top: 12px; min-width: 0; } /* Handy: schmale Außenränder -> mehr Lese-/Prompt-Breite (Auftraggeber 2026-06-18: „zu viel Rand am Handy"). Player ist hier ohnehin randlos. */ .chapter-scroll { padding: 13px 10px 72px; } .lesson { padding: 18px 15px; } .chapter-footer { position: sticky; bottom: 0; grid-template-columns: 1fr; padding: 8px; gap: 7px; } .chapter-done { grid-column: auto; justify-self: center; } .chapter-footer-nav { grid-column: auto; order: -1; } .topprogress .label { display: none; } .course-chat { top: var(--topbar-h); bottom: 0; transform: translateX(calc(100% - 48px)); } body.course-chat-expanded .course-chat { width: calc(100vw - 8px); } .course-chat-box { border-radius: 0; } .course-chat-tab { bottom: 132px; width: 48px; } } @media (max-width: 560px) { .steps { grid-template-columns: 1fr; } .step { min-height: auto; } .hero-course-cta { width: 100%; } } /* ============================================================ PROJEKT-WERKSTATT (Modul 08) — additiv, bestehende Tokens ============================================================ */ /* Schwierigkeit / Meta-Badges */ .wk-stars { display: inline-flex; gap: 2px; } .wk-star { color: var(--border-strong); font-size: 14px; line-height: 1; } .wk-star.on { color: var(--gold); } .wk-meta-item { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--text-muted); background: rgba(150,209,211,.10); border: 1px solid var(--border); padding: 3px 10px; border-radius: 999px; } /* (B) Projekt-Übersicht im Einführungskapitel */ .wk-overview { margin-top: 8px; } .wk-card-grid { display: grid; gap: 14px; margin-top: 14px; } .wk-card { padding: 0; overflow: hidden; } .wk-card-open { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; width: 100%; text-align: left; background: none; border: 0; color: inherit; cursor: pointer; font: inherit; padding: 18px 20px 14px; } .wk-card-open:hover .wk-card-titel { color: var(--gold); } .wk-card-nr { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); font-weight: 700; } .wk-card-titel { font-family: var(--font-head); font-size: 21px; color: var(--text); line-height: 1.2; transition: color .15s; } .wk-card-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .wk-card-summary { font-size: 14px; color: var(--text); } .wk-card-mehr { margin: 0 20px 16px; } .wk-card-mehr p { color: var(--text-muted); } .wk-card-go { margin-top: 6px; } .wk-list { margin: 6px 0 2px; padding-left: 20px; } .wk-list li { font-size: 14px; color: var(--text-muted); margin: 4px 0; } /* (C) Projektseite — Steckbrief-Kopf */ .chapter-projekt .chapter-scroll { padding-bottom: 40px; } .wk-steckbrief { padding: 20px 22px; margin: 4px 0 18px; } .wk-badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .wk-steckbrief-details { margin-top: 14px; display: grid; gap: 10px; } .wk-steckbrief-details .mitnehmen { margin-top: 0; } .wk-steckbrief-details .mitnehmen:first-child { margin-top: 0; border-top: 0; padding-top: 0; } .wk-intro { margin: 0 0 22px; } /* Steckbrief-Fakten als abgesetzte Kästen mit Farbbalken — nicht mehr grün-auf-grün. Jeder der drei Punkte (Ergebnis/Vorbereitung/Lernziel) hat eine eigene Farbe + Kopfbalken, damit es nicht monoton wirkt (Auftraggeber 2026-06-12, P7-Kontrast). */ .wk-fakt { border: 1px solid var(--border); border-left: 4px solid var(--teal); border-radius: var(--radius-sm); padding: 0; overflow: hidden; background: rgba(0,30,31,.35); } .wk-fakt > summary { padding: 9px 14px; background: rgba(150,209,211,.10); border-bottom: 1px solid transparent; } .wk-fakt[open] > summary { border-bottom-color: var(--border); } .wk-fakt > summary .tag { color: #fff; } .wk-fakt p, .wk-fakt .wk-list { padding: 0 14px; } .wk-fakt p { padding-top: 10px; padding-bottom: 10px; } .wk-fakt .wk-list { padding-top: 10px; padding-bottom: 10px; padding-left: 32px; } /* Ergebnis = Gold (das Ziel), Vorbereitung = Blau (was du mitbringst), Lernziel = Teal */ .wk-fakt-ergebnis { border-left-color: var(--gold); } .wk-fakt-ergebnis > summary { background: rgba(252,187,55,.12); color: var(--gold); } .wk-fakt-ergebnis > summary .tag { background: var(--gold); color: #2a1c00; } .wk-fakt-vorbereitung { border-left-color: var(--blue); } .wk-fakt-vorbereitung > summary { background: rgba(127,182,230,.14); color: var(--blue); } .wk-fakt-vorbereitung > summary .tag { background: var(--blue); color: var(--blue-deep); } .wk-fakt-lernziel { border-left-color: var(--teal); } .wk-fakt-lernziel > summary { background: rgba(150,209,211,.12); color: var(--teal); } .wk-fakt-lernziel > summary .tag { background: var(--teal); color: #04201f; } /* Schritte */ .wk-steps { display: grid; gap: 22px; margin: 8px 0 22px; } .wk-step { border-left: 3px solid rgba(150,209,211,.35); padding-left: 18px; } /* Werkstatt als Schritt-Stepper (paginiert, ein Prompt pro Seite) */ .wk-stepwrap { display: block; } .wk-stepwrap .wk-steps { margin: 0; } .wk-overview > * + * { margin-top: 16px; } .wk-probier-step { border-left: 3px solid rgba(255,181,157,.5); padding-left: 18px; } .wk-probier-step .wk-probier-tag { display: inline-block; color: var(--orange); font-size: 12px; font-weight: 700; letter-spacing: .03em; margin: 0 0 6px; } .wk-probier-step h3 { margin: 0 0 10px; } .wk-step-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; } .wk-step-nr { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-head); font-size: 17px; color: var(--on-accent); background: linear-gradient(45deg, var(--teal-deep), var(--teal)); } .wk-step-title h3 { margin: 0; font-size: 19px; color: var(--text); } .wk-step-ziel { margin: 4px 0 0; font-size: 14.5px; color: var(--text-muted); } .wk-step-erklaer { display: grid; gap: 4px; margin: 4px 0; } /* Prompt-Karte — A7: weisse Flaeche, schwarze Schrift, dunkelblauer Rahmen + Label */ .wk-prompt { padding: 0; margin: 12px 0; background: var(--prompt-flaeche); border: 1.5px solid var(--prompt-rahmen); border-radius: 10px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.28); } .wk-prompt::before { content: "Prompt"; display: block; padding: 6px 14px; background: var(--prompt-kopf); border-bottom: 1px solid var(--prompt-rahmen); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; font-weight: 800; color: var(--prompt-blau-tief); } .wk-prompt-text { margin: 0; padding: 12px 14px 0; white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 13.5px; line-height: 1.55; color: var(--prompt-tinte); } .wk-var { color: var(--prompt-blau-tief); background: rgba(47,93,179,.12); border-radius: 5px; padding: 0 3px; font-style: normal; font-weight: 700; } code.wk-var { font-size: 12.5px; } .wk-prompt-ziel { margin: 8px 14px 0; padding: 7px 11px; border-radius: 8px; background: var(--prompt-kopf); border: 1px solid var(--prompt-rahmen); color: var(--prompt-blau-tief); font-size: 13px; font-weight: 600; } .wk-prompt-actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 14px 14px; align-items: center; } /* Kopier-Knopf auf weisser Prompt-Flaeche: dunkelblau statt hell-auf-dunkel */ .wk-prompt .btn-copy { background: #fff; border: 1px solid var(--prompt-rahmen); color: var(--prompt-blau-tief); font-weight: 600; } .wk-prompt .btn-copy:hover { background: var(--prompt-blau-tief); border-color: var(--prompt-blau-tief); color: #fff; } .wk-ask-ki { cursor: pointer; border: 0; } /* Werkstatt-Übungsmaterial — prominent (A15): eigener Kasten mit Gold-Kante, zwei klare Wege (Kopieren / Datei laden) + Ansicht. */ .wk-material { margin-top: 16px; border: 1px solid rgba(252,187,55,.4); border-left: 4px solid var(--gold); border-radius: 10px; background: rgba(252,187,55,.07); padding: 14px 16px; } .wk-material-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .wk-material-tag { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; color: var(--gold); } .wk-material-titel { color: var(--ink); font-size: 15.5px; } .wk-material-erkl { margin: 6px 0 10px; color: var(--text); font-size: 13.5px; line-height: 1.55; } .wk-material-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; } .wk-material-copy { cursor: pointer; border: 0; } .wk-material-body { margin-top: 10px; } /* "Worauf du achtest" + Warnungs-Tag — wie .ask-ki-hint: Achtung-Stufe Orange, Text weiss (A8) */ .wk-achten { font-size: 14.5px; color: var(--ink); font-weight: 500; margin: 12px 0 0; background: rgba(184,57,0,.13); border: 1px solid rgba(255,181,157,.32); border-left: 3px solid var(--orange); border-radius: var(--radius-sm); padding: 12px 14px; } .wk-achten-tag { display: inline-block; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--orange); background: rgba(255,181,157,.16); padding: 2px 8px; border-radius: 999px; margin-right: 8px; font-weight: 800; } .wk-muster { display: block; color: var(--text-muted); } .mitnehmen .tag.warn { color: var(--orange); background: rgba(255,181,157,.16); } .wk-warn-details > summary { color: var(--orange); } .wk-hinweis { margin: 12px 0 0; border-color: rgba(150,209,211,.30); border-left-color: var(--teal); background: rgba(150,209,211,.06); } .wk-hinweis .ico { color: var(--teal); } /* Anpass-Hinweis */ .wk-anpass { margin: 18px 0; } .wk-anpass-vars { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px !important; } /* =========================================================================== WERKSTATT-PERSONALISIERUNG (W1) — "Mach es zu DEINEM Projekt" Kurs-KI-Familie (Violett), weil die Box mit der Kurs-KI spricht. =========================================================================== */ .wk-vorhaben { margin: 18px 0; padding: 0; border: 1px solid rgba(195,179,242,.34); border-left: 4px solid var(--violet); border-radius: var(--radius); background: rgba(195,179,242,.07); } .wk-vorhaben-details { padding: 14px 18px 16px; } .wk-vorhaben-summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-weight: 700; } .wk-vorhaben-summary::-webkit-details-marker { display: none; } .wk-vorhaben-tag { display: inline-block; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; font-weight: 800; color: #fff; background: var(--violet-deep); padding: 4px 12px; border-radius: 999px; } .wk-vorhaben-frei { font-size: 12px; color: var(--text-muted); font-weight: 600; font-style: italic; } .wk-vorhaben-intro { margin: 10px 0 14px; color: var(--text); font-size: 14px; line-height: 1.55; } .wk-vorhaben-fragen { display: flex; flex-direction: column; gap: 14px; } .wk-frage-label { display: block; color: var(--ink); font-weight: 600; font-size: 14px; margin-bottom: 6px; line-height: 1.5; } .wk-frage-eingabe { display: flex; gap: 8px; align-items: flex-start; } .wk-frage-input { flex: 1; font-family: inherit; font-size: 14px; line-height: 1.55; background: var(--prompt-flaeche); color: var(--prompt-tinte); border: 1.5px solid var(--prompt-rahmen); border-radius: var(--radius-sm); padding: 9px 11px; resize: vertical; min-height: 44px; } .wk-frage-input:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; } .wk-frage-input:disabled { background: var(--surface-2); color: var(--text-muted); border-color: var(--border); } .wk-mikro { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; border: 1.5px solid var(--prompt-rahmen); background: #fff; font-size: 18px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .wk-mikro:hover { background: var(--violet-deep); border-color: var(--violet-deep); } .wk-mikro.is-recording { background: var(--orange); border-color: var(--orange); animation: wkPuls 1.1s ease-in-out infinite; } @keyframes wkPuls { 0%,100% { box-shadow: 0 0 0 0 rgba(184,57,0,.5); } 50% { box-shadow: 0 0 0 7px rgba(184,57,0,0); } } .wk-vorhaben-datenschutz { margin: 14px 0 0; padding: 10px 13px; border-radius: var(--radius-sm); background: rgba(0,30,31,.4); border: 1px solid var(--border); color: var(--text-muted); font-size: 12.5px; line-height: 1.55; } .wk-vorhaben-datenschutz strong { color: var(--text); } .wk-vorhaben-login { margin: 12px 0 0; color: var(--gold); font-size: 13.5px; font-weight: 600; } .wk-vorhaben-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; align-items: center; } .wk-anpassen { cursor: pointer; border: 0; } .wk-anpassen:disabled { opacity: .5; cursor: not-allowed; } .wk-vorhaben-status { margin: 10px 0 0; color: var(--text); font-size: 13.5px; min-height: 0; line-height: 1.5; } /* Fertig-Zustand (Bestaetigung statt Formular) */ .wk-vorhaben.is-fertig { padding: 14px 18px 16px; border-left-color: var(--teal); background: rgba(150,209,211,.07); } .wk-vorhaben-head { margin-bottom: 8px; } .wk-vorhaben.is-fertig .wk-vorhaben-tag { background: var(--teal); color: #04201f; } .wk-vorhaben-verstanden { margin: 0 0 8px; color: var(--text); font-size: 14px; line-height: 1.55; } .wk-vorhaben-verstanden strong { color: var(--ink); } .wk-vorhaben-offen { margin: 8px 0; padding: 9px 12px; border-radius: var(--radius-sm); background: rgba(252,187,55,.08); border: 1px solid rgba(252,187,55,.3); font-size: 13px; color: var(--text); } .wk-vorhaben-offen ul { margin: 4px 0 0; padding-left: 20px; } .wk-vorhaben-hinweis { margin: 8px 0 0; color: var(--text-muted); font-size: 13px; } .wk-reset { color: var(--text-muted); } /* Personalisierte Prompt-Karte: Abzeichen + "Original anzeigen"-Umschalter */ .wk-prompt.is-personal { border-color: var(--teal); } .wk-prompt-badge { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 14px; background: rgba(150,209,211,.16); border-bottom: 1px solid rgba(150,209,211,.4); } .wk-badge-tag { font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; font-weight: 800; color: #04201f; background: var(--teal); padding: 3px 10px; border-radius: 999px; } .wk-orig-toggle { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--prompt-blau-tief); background: #fff; border: 1px solid var(--prompt-rahmen); border-radius: 999px; padding: 3px 11px; } .wk-orig-toggle:hover { background: var(--prompt-blau-tief); border-color: var(--prompt-blau-tief); color: #fff; } .wk-prompt.is-personal::before { content: "Dein Prompt"; } /* Schritt-Eingabefeld (Klasse B: Dokumente/Zwischenergebnisse, clientseitig) */ .wk-schritt-eingabe { margin: 12px 0 0; padding: 12px 14px; border-radius: var(--radius-sm); background: rgba(0,30,31,.5); border: 1px dashed var(--prompt-rahmen); } .wk-schritt-hinweis { margin: 0 0 10px; color: var(--text); font-size: 13px; line-height: 1.5; } .wk-schritt-feld { display: block; margin-bottom: 10px; } .wk-schritt-label { display: block; color: var(--text-muted); font-size: 12.5px; font-weight: 600; margin-bottom: 5px; } .wk-schritt-input { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 13.5px; line-height: 1.5; background: var(--prompt-flaeche); color: var(--prompt-tinte); border: 1.5px solid var(--prompt-rahmen); border-radius: var(--radius-sm); padding: 8px 10px; resize: vertical; } .wk-schritt-input:focus-visible { outline: 2px solid var(--prompt-rahmen); outline-offset: 2px; } .wk-schritt-apply { cursor: pointer; border: 0; margin-top: 2px; } /* "Probier den Unterschied" — Warnstil, zugeklappt */ .wk-probier { margin: 18px 0; border: 1px solid rgba(255,181,157,.34); border-left: 4px solid var(--orange); background: rgba(255,181,157,.05); border-radius: var(--radius); } .wk-probier > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px 18px; color: var(--text); font-weight: 700; font-size: 15px; } .wk-probier > summary::-webkit-details-marker { display: none; } .wk-probier-tag { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--orange); background: rgba(255,181,157,.16); padding: 3px 10px; border-radius: 999px; } .wk-probier-body { padding: 0 18px 18px; } .wk-probier-body .lesson { padding: 0; background: none; border: 0; box-shadow: none; margin-bottom: 12px; } /* Transfer / Reflexion */ .wk-transfer { padding: 20px 22px; margin: 22px 0 8px; } .wk-transfer .lesson { padding: 0; background: none; border: 0; box-shadow: none; } .wk-transfer-frage { margin-top: 14px; padding: 14px 16px; border-radius: var(--radius-sm); border: 1px solid rgba(252,187,55,.30); border-left: 4px solid var(--gold); background: rgba(252,187,55,.06); } .wk-transfer-tag { display: inline-block; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: 6px; } .wk-transfer-frage p { margin: 0; font-size: 16px; color: var(--text); } @media (max-width: 720px) { .wk-step { padding-left: 14px; } .wk-prompt-actions { flex-direction: column; align-items: stretch; } .wk-prompt-actions .btn-coach, .wk-prompt-actions .btn-copy { justify-content: center; text-align: center; } } /* ============================================================ SCROLL-MODUS — additiv, nur für Projektseiten + Werkstatt-Intro (Body-Klasse .course-scroll wird in app.js renderChapter() gesetzt). Ziel: Aktionsfenster kleiner, Hauptfenster scrollbar (Stream + darunter die Projekt-Übersicht erreichbar), Seitenleiste unabhängig scrollbar. Normale Lese-/Fragen-Kapitel sind NICHT betroffen (keine Klasse gesetzt). ============================================================ */ /* overflow:visible (nicht auto) -> die normale Dokument-/Viewport-Scrollbar greift; auto auf body würde einen geklammerten, kürzeren Innen-Scroll erzeugen. */ body.course-page.course-scroll { overflow: visible; } /* Layoutkette aus dem Vollhöhen-Lock lösen, damit die SEITE scrollt. */ body.course-page.course-scroll .layout { height: auto; min-height: calc(var(--vh-voll) - var(--topbar-h)); overflow: visible; } body.course-page.course-scroll .content { height: auto; overflow: visible; } body.course-page.course-scroll .content .wrap#modulinhalt { height: auto; } /* Aktionsfenster wächst mit dem Inhalt statt feste Resthöhe zu beanspruchen. grid-template-rows von "auto 1fr auto" auf reine auto-Zeilen, damit die mittlere Zeile (.chapter-scroll) nicht künstlich gestreckt wird. */ body.course-page.course-scroll .chapter-player { height: auto; max-height: none; overflow: visible; grid-template-rows: auto auto auto; } /* Innerer Scroll entfällt -> Stream + Übersichtsboxen fließen in den Seiten-Scroll. */ body.course-page.course-scroll .chapter-scroll { overflow: visible; min-height: 0; /* Platz für den unten klebenden Footer (v.a. mobil). */ padding-bottom: 24px; } /* Aktionsfenster KLEINER in der Relation: Lese-/Stream-Bereich begrenzen, damit der Stream nicht die ganze Höhe einnimmt und die Übersicht sichtbar wird. */ body.course-page.course-scroll .lesson-stream { max-height: calc(var(--vh-voll) - var(--topbar-h) - 320px); min-height: 200px; overflow: auto; } /* Seitenleiste unabhängig scrollbar halten, während die Seite scrollt. Nur Desktop: auf Mobil bleibt die Sidebar das fixierte Off-Canvas-Menü. */ @media (min-width: 901px) { body.course-page.course-scroll .sidebar { position: sticky; top: var(--topbar-h); align-self: flex-start; height: auto; max-height: calc(var(--vh-voll) - var(--topbar-h)); overflow-y: auto; } } @media (max-width: 900px) { body.course-page.course-scroll .content .wrap#modulinhalt { height: auto; } /* Auf Mobil keine künstliche Stream-Höhe — die ganze Seite scrollt ohnehin. */ body.course-page.course-scroll .lesson-stream { max-height: none; overflow: visible; } } /* ============================================================ Sidebar: Modulname (-> Eröffnungsseite) vs. Pfeil (-> Kapitel auf/zu) Löst das alte
/-Verhalten ab (zwei klare Klickziele). ============================================================ */ .navmod-head { display: flex; align-items: stretch; gap: 2px; } .navmod-name { flex: 1 1 auto; text-align: left; background: none; border: 0; cursor: pointer; color: var(--text); font: inherit; font-weight: 600; font-size: 14px; padding: 8px 8px 8px 10px; border-radius: 8px; line-height: 1.3; } .navmod-name:hover { background: var(--surface-2); } .navmod-name.active-mod { background: rgba(150,209,211,0.16); color: var(--teal); } .navmod-toggle { flex: 0 0 auto; width: 36px; background: none; border: 0; cursor: pointer; color: var(--text-muted); border-radius: 8px; display: flex; align-items: center; justify-content: center; } .navmod-toggle:hover { background: var(--surface-2); color: var(--text); } .navmod-toggle .chev { font-size: 12px; transition: transform .2s; display: inline-block; } .navmod.open .navmod-toggle .chev { transform: rotate(90deg); } .navmod .blocks { display: none; } .navmod.open .blocks { display: block; } /* ============================================================ Modul-Eröffnungsseite (Vorstellungsseite) ============================================================ */ .modul-intro { max-width: 980px; margin: 0 auto; padding: 0 0 60px; } .modul-intro-head { position: relative; overflow: hidden; border-radius: var(--radius); margin: 22px 0 18px; padding: 34px 30px; min-height: 200px; background-size: cover; background-position: center; } .modul-intro-head::after { content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, rgba(8,16,28,.30), rgba(8,16,28,.80)); } .modul-intro-head-inner { position: relative; z-index: 2; display: flex; align-items: center; gap: 24px; } .modul-intro-head-text { flex: 1 1 0; min-width: 0; } .modul-intro-head-video { flex: 0 0 clamp(180px, 34%, 360px); } .modul-intro-head-video .intro-video { max-width: 100%; margin: 0; border-radius: 8px; overflow: hidden; } .modul-intro-head-video .intro-video.glass { background: rgba(0,0,0,.5); } .modul-intro-head-video .video-frame { padding-top: 56.25%; position: relative; border-radius: 6px; overflow: hidden; } .modul-intro-head h1 { font-size: clamp(22px,3.4vw,38px); color:#fff; margin: 8px 0 0; text-shadow: 0 2px 12px rgba(0,0,0,.5); } .modul-intro-head--video h1 { font-size: clamp(18px,2.6vw,30px); } .modul-intro-head .chapter-kicker { color:#cfe3ff; font-size: 15px; font-weight: 600; letter-spacing: .04em; margin: 0; text-shadow: 0 1px 6px rgba(0,0,0,.5); } .modul-intro-meta { color:#eef; margin: 8px 0 0; font-size: 14px; text-shadow: 0 1px 6px rgba(0,0,0,.5); } /* Knopf mittig (Design-Review A5) — display:block + margin auto, gilt für alle Module. */ .modul-intro-start { display: block; margin: 18px auto 0; font-size: 16px; padding: 12px 22px; } @media(max-width:600px){ .modul-intro-head-inner { flex-direction: column; } .modul-intro-head-video { flex: none; width: 100%; } } .modul-intro-body { display: flex; flex-direction: column; gap: 18px; } .modul-intro-text { font-size: 16px; } .video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; object-fit: contain; background:#000; } .video-frame img.intro-media-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .intro-video-cap { color: var(--text-muted); font-size: 13px; margin: 8px 2px 0; } .intro-video-ph .video-frame { background: linear-gradient(135deg, #1a2740, #0e1726); display: flex; align-items: center; justify-content: center; } .intro-video-ph-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #9fb6d6; font-size: 14px; } .intro-video-ph-icon { font-size: 30px; width: 64px; height: 64px; border-radius: 50%; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); } /* Kapitelliste auf der Eröffnungsseite (leichte Karten, aktive Links) */ .mi-kapitel-titel { display: inline-block; font-size: 18px; margin: 8px 0 12px; text-shadow: var(--text-halo); background: rgba(0,20,20,.62); padding: 4px 12px; border-radius: 8px; } .mi-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 12px; } .mi-card { padding: 4px; display: flex; flex-direction: column; position: relative; } .mi-card-open { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; display: flex; flex-direction: column; gap: 4px; padding: 12px 12px 10px; border-radius: 10px; color: var(--text); } .mi-card-open:hover { background: var(--surface-2); } .mi-card-nr { color: var(--text); font-size: 12px; font-weight: 700; letter-spacing: .03em; } .mi-card-titel { font-weight: 600; font-size: 15px; line-height: 1.3; } .mi-card-metas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 2px; } .mi-card-meta { color: var(--text-muted); font-size: 12px; } .mi-card-mehr { margin: 0 8px 8px; } /* Kurzüberblick lesbarer (weiß statt Teal-Grün) + Akkordeon nur mobil, Desktop = Hover-Popover */ .mi-card-mehr > summary { color: var(--text); } .mi-card-mehr > summary .tag { color: var(--text); background: rgba(150,209,211,.20); } .mi-card-mehr p { color: var(--text); } .mi-card-pop { display: none; } @media (hover: hover) and (pointer: fine) { .mi-card-mehr { display: none; } /* kein Tap-Akkordeon am Desktop */ .mi-card:hover, .mi-card:focus-within { z-index: 5; } /* Popover über Nachbarkarten */ .mi-card-pop { display: block; position: absolute; left: 8px; right: 8px; top: calc(100% - 6px); z-index: 40; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-3); border: 1px solid var(--border-strong); box-shadow: 0 14px 34px rgba(0,0,0,.5); opacity: 0; transform: translateY(-6px); pointer-events: none; /* opacity statt visibility -> Text bleibt im A11y-Baum */ transition: opacity .15s ease, transform .15s ease; } .mi-card:hover .mi-card-pop, .mi-card:focus-within .mi-card-pop { opacity: 1; transform: translateY(0); pointer-events: auto; } .mi-card-pop-tag { display: inline-block; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--text); background: rgba(150,209,211,.20); padding: 2px 8px; border-radius: 999px; margin-bottom: 6px; } .mi-card-pop p { margin: 0; font-size: 14px; color: var(--text); line-height: 1.5; } } /* Task F: Abschnitts-Indikator in der Kapitel-Fußzeile + etwas Luft zwischen Abschnitten */ .chapter-section-indicator { color: var(--text-muted); font-size: 12.5px; font-weight: 600; white-space: nowrap; padding: 0 4px; } .lesson-stream h3 { margin-top: 1.4em; } .lesson-stream h3:first-child { margin-top: .2em; } .lesson-stream h4 { margin-top: 1.05em; } /* ---- Schritt-Karten (Generator :::schritte, Markup-Spec E10) ---- Gleichförmige Unterabschnitte (z. B. die 5 Säulen) als klar getrennte Karten: Kopfbalken-Box mit Nummern-Kreis + Titel, Inhalt im Rahmen-Kasten. Standard = .step-stapel (alle Karten untereinander). Opt-in = .step-carousel (Marker-Schlusswort "blättern"): eine Karte sichtbar, ◄ ► blättert — nur für kurze Textstücke, bei denen Karte UND Umschalter ohne Scrollen sichtbar sind. */ .step-stapel { margin: 26px 0; } .step-stapel .step-card + .step-card { margin-top: 20px; } .step-carousel { margin: 26px 0; outline: none; } .step-carousel:focus-visible { border-radius: var(--radius); box-shadow: 0 0 0 2px var(--border-strong); } .step-card { border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface-2); overflow: hidden; } .step-carousel .step-card { display: none; } .step-carousel .step-card.aktiv { display: block; animation: stepCardEin .25s ease; } @keyframes stepCardEin { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .step-carousel .step-card.aktiv { animation: none; } } /* Kopfbalken-Kontrast-Regel (Auftraggeber 2026-06-11): Der Kopf muss sich IMMER deutlich vom Inhaltsblock abheben — helles Blau + dunkle Schrift, gleiche Farbfamilie wie der callout--info-Balken (Kontrast >= 7:1). */ .step-card-head { display: flex; align-items: center; gap: 12px; padding: 13px 18px; background: var(--blue); border-bottom: 1px solid var(--border); } .step-card-num { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--blue-deep); color: #fff; font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; } .lesson .step-card-head h4, .step-card-head h4 { margin: 0; font-family: var(--font-head); font-size: 18px; color: var(--blue-deep); line-height: 1.3; } .step-card-body { padding: 8px 18px 14px; } .step-card-body > :last-child { margin-bottom: 8px; } /* Umschalter (Auftraggeber 2026-06-11): dominant — weißer Kasten, schwarze Schrift, deutlich erkennbare Pfeil-Knöpfe (Design-Familie der Prompt-Kästen). */ .step-nav { display: flex; align-items: center; justify-content: center; gap: 12px; width: max-content; margin: 14px auto 0; padding: 7px 10px; background: var(--prompt-flaeche); border: 1.5px solid var(--prompt-rahmen); border-radius: 999px; box-shadow: 0 3px 12px rgba(0,0,0,.35); } .step-btn { background: var(--prompt-blau-tief); color: #fff; border: none; border-radius: 50%; width: 38px; height: 38px; font: inherit; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .step-btn:hover:not(:disabled) { background: var(--prompt-rahmen); } .step-btn:disabled { opacity: .3; cursor: default; } .step-indicator { color: var(--prompt-tinte); font-size: 15px; font-weight: 700; min-width: 120px; text-align: center; } /* ---- Scroll-Hinweis (Stylebook P8) ---- Zwei wippende Pfeile am unteren Rand des Kapitelfensters, solange darunter noch ungelesener Inhalt liegt. Verschwindet beim ersten Scrollen; nach dem Gelernt-Merker (localStorage, app.js zeigeScrollHinweis) nie wieder. */ .scroll-hinweis { position: sticky; bottom: 10px; display: flex; flex-direction: column; align-items: center; width: max-content; margin: 0 auto; padding: 3px 16px 7px; background: var(--prompt-flaeche); border: 1.5px solid var(--prompt-rahmen); border-radius: 999px; box-shadow: 0 3px 12px rgba(0,0,0,.35); color: var(--prompt-tinte); pointer-events: none; z-index: 5; animation: scrollHinweisWippen 1.6s ease-in-out infinite; } .scroll-hinweis span { display: block; line-height: .5; font-size: 22px; font-weight: 700; } @keyframes scrollHinweisWippen { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } @media (prefers-reduced-motion: reduce) { .scroll-hinweis { animation: none; } } /* Fenster-Variante: für Ansichten, die in der SEITE scrollen (Modul-Eröffnung, Werkstatt-Intro). Fixierter Träger unten, das wippende Element sitzt darin. */ .scroll-hinweis-fixed { position: fixed; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; pointer-events: none; z-index: 40; } .scroll-hinweis-fixed .scroll-hinweis { position: static; margin: 0; }