/* ============================================================ 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 */ --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; --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; --page-bg-image: url("bg07.png"); --course-bg-image: url("bg14-flip-y.png"); } * { 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 ============================================================ */ .login-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 28px; } .login-card { width: 100%; max-width: 430px; padding: 38px 34px; text-align: center; } .login-card .brand { justify-content: center; margin-bottom: 16px; } .login-card h1 { font-size: 30px; color: #fff; margin: 6px 0 4px; } .login-card .sub { color: var(--text-muted); margin: 0 0 24px; font-size: 15px; } .login-card form { display: flex; flex-direction: column; gap: 14px; text-align: left; } .login-card label { font-size: 13px; color: var(--text-muted); display: flex; flex-direction: column; gap: 6px; font-weight: 600; } .login-card input { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; color: var(--text); font: inherit; font-size: 15px; } .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: 8px; justify-content: center; width: 100%; } .login-card .err { color: var(--orange); font-size: 13.5px; 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: 13.5px; margin: 4px 0 0; text-align: center; } .login-card .hint { color: var(--text-muted); font-size: 12.5px; margin: 20px 0 0; } .login-card .hint.forgot-row { margin: 10px 0 0; text-align: right; } .login-card label .opt { color: var(--text-muted); font-weight: 400; } .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; } .login-video { width: 100%; max-width: 430px; 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); } .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; } .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: rgba(6, 24, 50, .97); 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: rgba(190,221,255,.10); 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; } } .topnav-mods { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } .topnav-mods-label { color: var(--text-muted); font-size: 12px; font-weight: 800; letter-spacing: .02em; margin-right: 2px; } .topnav-mod { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); font-size: 13.5px; font-weight: 700; } .topnav-mod:hover { color: var(--text); border-color: var(--border-strong); text-decoration: none; } .topnav-mod.active { color: var(--teal); border-color: var(--teal); background: rgba(150,209,211,.12); } /* 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: 999px; font: inherit; font-weight: 700; font-size: 13.5px; color: var(--on-accent); text-decoration: none; background: linear-gradient(45deg, var(--orange-deep), var(--gold)); box-shadow: 0 0 14px rgba(252,187,55,.30); } .btn-coach:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 0 20px rgba(252,187,55,.45); } .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: #fff; 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: #fff; } .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: #fff; 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: #fff; 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; 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; } .settings-menu.open .settings-popover { opacity: 1; visibility: visible; transform: translateY(0); } .settings-popover .settings-title { display: block; font-size: 13px; font-weight: 800; color: #fff; margin-bottom: 4px; } .settings-popover .settings-hint { margin: 0 0 12px; font-size: 12px; line-height: 1.4; color: rgba(234,242,244,.72); } .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: #fff; border-color: var(--border-strong); } .settings-seg .seg-btn.active { background: var(--teal); color: var(--on-accent); border-color: transparent; } .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; } /* 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: #fff; 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: #fff; 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: #fff; } .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 { font-size: 15px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); } #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(100dvh - var(--topbar-h)); overflow: hidden; } .sidebar { position: sticky; top: var(--topbar-h); width: var(--sidebar); flex: 0 0 var(--sidebar); height: calc(100dvh - var(--topbar-h)); overflow-y: auto; padding: 22px 16px; border-right: 1px solid rgba(190,221,255,.18); background: linear-gradient(180deg, rgba(14, 42, 84, .78), rgba(5, 20, 48, .92)), var(--course-bg-image) center / cover no-repeat, rgba(5, 20, 48, .94); } .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: rgba(190,221,255,.10); } .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: rgba(190,221,255,.10); 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); } .uk-dot.active { border-color: var(--orange); box-shadow: 0 0 0 2px rgba(184,57,0,.30), 0 0 8px rgba(255,181,157,.55); } .uk-dot.read.active { background: var(--orange); box-shadow: 0 0 0 2px rgba(184,57,0,.45), 0 0 9px rgba(255,181,157,.7); } /* 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; } /* 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); } .mode-title { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .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; } .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: #fff; margin: 20px 0 8px; line-height: 1.3; } .lesson h2 { font-size: 23px; } .lesson h3 { font-size: 18px; color: var(--teal); } .lesson p { margin: 11px 0; } .lesson ul, .lesson ol { margin: 10px 0 10px 22px; } .lesson li { margin: 5px 0; } .lesson strong { color: #fff; } .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: #fff; 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; } .wrap { max-width: 920px; margin: 0 auto; padding: 0 28px; } /* Fester Kapitelplayer */ .content .wrap#modulinhalt { max-width: 1080px; height: calc(100vh - 57px); 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); /* Content-Fläche im dunklen Marineblau der Seitenleiste (leichter Türkis-Einschlag), statt des früheren hellblauen Tons — sonst war helle Schrift schlecht lesbar. */ background: rgba(5, 20, 48, .62); box-shadow: var(--shadow); } .chapter-player::before { content:""; position:absolute; inset:0; z-index:0; /* Dunkles, deckendes Overlay (wie .sidebar) — das Hintergrundbild scheint nur noch dezent durch, die Fläche bleibt dunkel und harmoniert mit der Seitenleiste. */ background: linear-gradient(180deg, rgba(10, 38, 62, .90), rgba(4, 18, 42, .95)), var(--course-bg-image) center / cover no-repeat; opacity:.98; } .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 rgba(190,221,255,.18); background: rgba(18, 48, 92, .42); } .chapter-header-main { min-width: 0; } .chapter-header h1 { color:#fff; 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: rgba(226,238,255,.86); } .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: linear-gradient(180deg, rgba(28, 70, 126, .03), rgba(12, 34, 68, .10)); } .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: 1fr auto 1fr; gap: 12px; align-items: center; padding: 9px 12px; border-top: 1px solid rgba(190,221,255,.18); background: rgba(12, 36, 76, .62); } .chapter-footer-nav { grid-column: 2; display: flex; gap: 8px; align-items: center; justify-content: center; } .chapter-nav-btn { min-height: 32px; min-width: 78px; padding: 5px 12px; font-size: 12.5px; } .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(45deg, var(--orange-deep), var(--gold)); color: var(--on-accent); border-color: transparent; font-weight: 800; box-shadow: 0 0 14px rgba(252,187,55,.32); } .chapter-footer .chapter-nav-btn[data-next]:hover { box-shadow: 0 0 20px rgba(252,187,55,.5); transform: translateY(-1px); } .chapter-footer .chapter-nav-btn[data-next]:disabled { opacity:.42; box-shadow:none; transform: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: #fff; 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 ============================================================ */ .course-intro-video { padding: 32px 0 0; } .intro-video { padding: 10px; } .hero { position: relative; overflow: hidden; padding: 96px 28px 88px; text-align: center; } .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,.10), rgba(0,23,23,.55) 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; } .hero h1 { font-size: clamp(34px, 5vw, 60px); margin: 0 0 10px; color: #fff; } .hero .motto { font-size: clamp(16px, 2.2vw, 21px); color: var(--teal); font-style: italic; margin: 0 auto 26px; } .hero p.lead { max-width: 640px; margin: 0 auto 30px; color: var(--text); font-size: 18px; } .btn { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font: inherit; font-weight: 700; font-size: 16px; padding: 13px 26px; border-radius: 999px; border: none; color: var(--on-accent); background: linear-gradient(45deg, var(--orange-deep), var(--gold)); box-shadow: 0 0 22px rgba(252,187,55,.28); transition: transform .2s, box-shadow .2s; } .btn:hover { transform: translateY(-2px); box-shadow: 0 0 30px rgba(252,187,55,.45); text-decoration: none; } .btn.secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--border-strong); box-shadow: none; } .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; } .section .sub { text-align: center; color: var(--text-muted); margin: 0 auto 34px; max-width: 620px; } .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: #fff; } .notebook-copy p { color: var(--text); max-width: 680px; margin: 0; } .notebook-video-placeholder { display: grid; place-items: center; width: 100%; max-width: 680px; aspect-ratio: 16 / 9; margin: 0 0 18px; 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; } .mcard { 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; } .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; 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-muted); font-size: 13px; } .dl.dl-featured { border-color: rgba(255,181,157,.4); background: rgba(255,181,157,.05); } .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: #fff; } .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: #fff; 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(78vh, 720px); aspect-ratio: 16 / 9; background: #000; border-radius: 8px; } .media-overlay-panel iframe { display: block; width: 100%; height: min(78vh, 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: #fff; border-color: var(--gold); } /* NotebookLM-Aufruf (Kurs-KI-Familie -> violett wie .callout--ki / .ask-ki) */ .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(195,179,242,.06); } .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: 14px; color: var(--text-muted); } /* ── 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; } .callout--info { border-color: rgba(127,182,230,.30); background: rgba(127,182,230,.06); } .callout--info > .callout-head { background: var(--blue); color: var(--blue-deep); } .callout--tipp { border-color: rgba(155,209,122,.30); background: rgba(155,209,122,.06); } .callout--tipp > .callout-head { background: var(--green); color: var(--green-deep); } .callout--merken { border-color: rgba(252,187,55,.32); background: rgba(252,187,55,.06); } .callout--merken > .callout-head { background: var(--gold); color: #3a2700; } .callout--ki { border-color: rgba(195,179,242,.32); background: rgba(195,179,242,.06); } .callout--ki > .callout-head { background: var(--violet); color: var(--violet-deep); } .callout--warnung { border-color: rgba(255,181,157,.32); background: rgba(255,181,157,.06); } .callout--warnung > .callout-head { background: var(--orange); color: #4a1b00; } .callout--wichtig { border-color: rgba(226,75,74,.40); background: rgba(226,75,74,.08); } .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 ── */ .prompt-box { margin: 18px 0; border: 1px solid var(--border); border-radius: 10px; background: rgba(255,255,255,.03); overflow: hidden; } .prompt-box-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--border); } .prompt-box-tag { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; font-weight: 700; color: var(--gold); } .prompt-box-copy { flex: 0 0 auto; font-size: 13px; padding: 4px 11px; border-radius: 7px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; } .prompt-box-copy:hover { color: var(--gold); border-color: rgba(252,187,55,.45); background: rgba(252,187,55,.10); } .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(--text); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* Fragenkarte */ .qcard { padding: 18px 20px; margin: 16px 0; transition: border-color .2s; } .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(--text); 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, .qcard.eigene .qtext { color: var(--orange); } .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; } .qtext-ask { flex: 1 1 auto; min-width: 0; text-align: left; white-space: normal; cursor: pointer; position: relative; font-family: inherit; background: rgba(0,23,23,.35); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 13px 11px 34px; transition: background .18s, border-color .18s, transform .15s; } .qtext-ask::before { content: "✦"; position: absolute; left: 13px; top: 11px; color: var(--gold); font-weight: 700; } .qtext-ask:hover { background: rgba(252,187,55,.10); border-color: rgba(252,187,55,.40); transform: translateY(-1px); } .qtext-ask:focus-visible { outline: 2px solid var(--gold); 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) ============================================================ */ .ask-ki { margin: 20px 0; padding: 14px 16px 16px; border-radius: var(--radius); border: 1px solid rgba(195,179,242,.34); border-left: 4px solid var(--violet); background: rgba(195,179,242,.07); } .ask-ki-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; } .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); } .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(--border); background: var(--surface-2); color: var(--text-muted); cursor: pointer; font-size: 15px; transition: color .18s, border-color .18s, background .18s; } .ask-ki-copy:hover { color: var(--violet); border-color: rgba(195,179,242,.45); background: rgba(195,179,242,.12); } .ask-ki-q { display: block; width: 100%; text-align: left; white-space: normal; cursor: pointer; position: relative; font-family: var(--font-body); font-size: 16.5px; line-height: 1.5; font-weight: 600; color: var(--text); background: rgba(0,23,23,.4); border: 1px solid var(--border); border-radius: var(--radius-sm); 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(--violet); font-weight: 700; } .ask-ki-q:hover { border-color: rgba(195,179,242,.5); background: rgba(195,179,242,.10); transform: translateY(-1px); } .ask-ki-q:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; } .ask-ki-var { color: var(--violet); background: rgba(195,179,242,.14); border-radius: 5px; padding: 0 4px; font-style: normal; } .ask-ki-hint { font-size: 14px; color: var(--text-muted); margin: 10px 0 0; line-height: 1.6; background: rgba(150,209,211,.07); border: 1px solid var(--border); 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(--teal); background: rgba(150,209,211,.14); padding: 2px 8px; border-radius: 999px; margin-right: 8px; font-weight: 700; } .ask-ki-hint strong { color: var(--text); } /* 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)); } .anbieter-card .anbieter-name { margin: 0 0 4px; font-size: 20px; color: #fff; 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: #fff; 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: 8px; 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); } /* ============================================================ 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: #fff; 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(150,209,211,.62); border-right: 0; border-radius: 14px 0 0 14px; background: rgba(150,209,211,.94); color: #002323; 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: #003b3b; 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: rgba(0,18,18,.96); 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: var(--gold); background: rgba(252,187,55,.13); border: 1px solid rgba(252,187,55,.25); } .course-chat-title-icon svg, .course-chat-avatar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .course-chat-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px; border-bottom: 1px solid var(--border); } .course-chat-head strong { display: block; color: var(--text); } .course-chat-head small { display: block; color: var(--text-muted); margin-top: 2px; } .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: 30px; height: 30px; flex: 0 0 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--border); background: rgba(255,255,255,.045); } .course-chat-bubble { min-width: 0; padding: 11px 13px; border-radius: 12px; border: 1px solid var(--border); } .course-chat-msg p, .course-chat-msg li { margin: 0; color: var(--text); 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; } .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; } .course-chat-msg.assistant .course-chat-avatar { color: var(--gold); border-color: rgba(252,187,55,.28); background: rgba(252,187,55,.10); } .course-chat-msg.assistant .course-chat-bubble { background: rgba(150,209,211,.08); border-color: rgba(150,209,211,.24); } .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); background: rgba(150,209,211,.10); } .course-chat-msg.user .course-chat-bubble { background: rgba(255,224,161,.10); border-color: rgba(252,187,55,.20); } .course-chat-msg.thinking { min-width: 142px; } /* Abgesetzte Kontingent-Hinweiskarte (HTTP 429) */ .course-chat-msg.quota .course-chat-avatar { color: var(--gold); border-color: rgba(252,187,55,.30); background: rgba(252,187,55,.12); } .course-chat-msg.quota .course-chat-bubble { background: rgba(252,187,55,.08); border-color: rgba(252,187,55,.32); border-left: 3px solid var(--gold); } .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: 12px; border: 1px solid rgba(190,221,255,.24); /* Dunkles Marineblau wie die Seitenleiste — sonst ist das Feld heller (helle Schrift auf hellblauem Grund schlecht lesbar). Gleicher Ton wie .sidebar-Basis. */ background: rgba(5, 20, 48, .94); color: #fff; padding: 11px 86px 11px 13px; font: inherit; font-size: 14px; display: block; } .course-chat-form textarea::placeholder { color: rgba(227,246,246,.62); } .course-chat-form textarea:focus-visible { outline: 2px solid rgba(150,209,211,.75); border-color: rgba(150,209,211,.72); } .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: 45px; bottom: 7px; width: 32px; height: 32px; min-height: 32px; min-width: 32px; padding: 0; border-radius: 999px; background: rgba(0, 23, 23, .72); color: var(--text); border: 1px solid var(--border); font-size: 10px; line-height: 1; box-shadow: none; } .course-chat-form .course-chat-send { position: absolute; right: 7px; bottom: 7px; width: 32px; height: 32px; min-width: 32px; min-height: 32px; box-shadow: 0 0 0 3px rgba(252,187,55,.10); } .course-chat-form .course-chat-record:hover { border-color: var(--gold); color: #fff; } .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: 70vh; 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: linear-gradient(180deg, rgba(14, 42, 84, .86), rgba(5, 20, 48, .96)), var(--course-bg-image) center / cover no-repeat, rgba(5, 20, 48, .98); } .sidebar.open { transform: translateX(0); } .content .wrap#modulinhalt { height: calc(100dvh - 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; } .chapter-scroll { padding: 14px 14px 72px; } .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-muted); } .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: 12px; display: grid; gap: 4px; } .wk-steckbrief-details .mitnehmen { margin-top: 8px; } .wk-steckbrief-details .mitnehmen:first-child { margin-top: 0; border-top: 0; padding-top: 0; } .wk-intro { margin: 0 0 22px; } /* 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 */ .wk-prompt { padding: 14px 16px; margin: 12px 0; background: rgba(0,23,23,.55); } .wk-prompt-text { margin: 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(--text); } .wk-var { color: var(--gold); background: rgba(252,187,55,.12); border-radius: 5px; padding: 0 3px; font-style: normal; } code.wk-var { font-size: 12.5px; } .wk-prompt-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; align-items: center; } .wk-ask-ki { cursor: pointer; border: 0; } /* Werkstatt-Übungsmaterial (Kopf-Bereich): Kopier-Zugang + ausklappbare Anzeige */ .wk-material { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; } .wk-material-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .wk-material-copy { cursor: pointer; border: 0; } .wk-material-body { margin-top: 10px; } /* "Worauf du achtest" + Warnungs-Tag */ .wk-achten { font-size: 14.5px; color: var(--text); margin: 12px 0 0; background: rgba(150,209,211,.07); border: 1px solid var(--border); 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(--teal); background: rgba(150,209,211,.14); padding: 2px 8px; border-radius: 999px; margin-right: 8px; } .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; } /* "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(100dvh - 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(100dvh - 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(100dvh - 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: rgba(190,221,255,.10); } .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: rgba(190,221,255,.10); 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; } .modul-intro-head h1 { font-size: clamp(26px,4vw,40px); color:#fff; margin: 8px 0 0; text-shadow: 0 2px 12px rgba(0,0,0,.5); } .modul-intro-head .chapter-kicker { color:#cfe3ff; } .modul-intro-meta { color:#eef; margin: 8px 0 0; font-size: 14px; text-shadow: 0 1px 6px rgba(0,0,0,.5); } .modul-intro-start { margin-top: 18px; font-size: 16px; padding: 12px 22px; } .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 { font-size: 18px; margin: 8px 0 12px; } .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: rgba(190,221,255,.08); } .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; }