/* =============================================================================
   coolTS — Design System
   Quelle: _pool/design/CoolTS - Brand.pdf (v1.0 Official Brand Manual)
   Domain-Theming ueber Body-Klasse .domain-teacher / .domain-student.
   ============================================================================= */

/* --- Schrift: Manrope, DSGVO-konform selbst gehostet (NICHT via Google CDN) ---
   woff2-Dateien unter /assets/fonts/ ablegen. Solange nicht vorhanden, greift
   der System-Fallback. */
/* latin */
@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("/assets/fonts/manrope-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("/assets/fonts/manrope-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* -----------------------------------------------------------------------------
   Tokens
   ----------------------------------------------------------------------------- */
:root {
	/* Markenfarben (aus den Design-Screens gemessen; Brand-Manual nennt #155EE8,
	   die Screens verwenden aber durchgehend #0169FE) */
	--ct-blue:        #0169FE;   /* CoolTeacher Primary */
	--ct-light-blue:  #068AD4;   /* Teacher Secondary */
	--cs-green:       #14CB75;   /* CoolStudent Primary (aus Screens gemessen; Manual nennt #02C15E) */
	--teal:           #0EA5A4;   /* Bridge */
	--navy:           #112937;   /* Dark bg / Headings */
	--snow:           #F8FAFC;   /* Base bg */

	/* Neutrale Skala */
	--white:          #FFFFFF;
	--gray-100:       #F1F5F9;
	--gray-200:       #E2E8F0;
	--gray-300:       #CBD5E1;
	--gray-500:       #64748B;
	--gray-700:       #334155;

	/* Semantisch */
	--color-bg:            var(--snow);
	--color-surface:       var(--white);
	--color-border:        var(--gray-200);
	--color-text:          var(--navy);
	--color-text-muted:    var(--gray-500);
	--color-success:       var(--cs-green);
	--color-success-text:  #0A7C42;                /* dunkleres Gruen fuer Text auf hellem Grund */
	--color-success-bg:    rgba(2, 193, 94, 0.12); /* Erfolgs-Tint (Badges/Chips) */
	--color-danger:        #EF4444;
	--color-danger-text:   #B91C1C;                /* dunkleres Rot fuer Text */
	--color-danger-bg:     rgba(239, 68, 68, 0.12);/* Danger-Tint */
	--color-warn:          #E8A700;                /* Warn-Akzent (Ampel/Icons) */
	--color-warn-text:     #92400E;                /* Warn-Text */
	--color-warn-bg:       #FEF3C7;                /* Warn-Hintergrund */

	/* Domain-Primaerfarbe (Default teacher; per Body-Klasse ueberschrieben) */
	--color-primary:        var(--ct-blue);
	--color-primary-hover:  #0150E0;
	--color-primary-soft:   rgba(1, 105, 254, 0.10);
	--color-on-primary:     #FFFFFF;

	/* Typo */
	--font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	/* Radien / Schatten / Abstaende (aus UI-Presets) */
	--radius-sm: 8px;
	--radius:    12px;
	--radius-lg: 16px;
	--radius-xl: 24px;
	--radius-pill: 999px;
	--shadow-sm: 0 1px 2px rgba(17, 41, 55, 0.06);
	--shadow-md: 0 8px 24px rgba(17, 41, 55, 0.08);
	--shadow-lg: 0 24px 60px rgba(17, 41, 55, 0.12);
	--space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
	--space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
}

/* Domain-Overrides */
.domain-teacher {
	--color-primary:        var(--ct-blue);
	--color-primary-hover:  #0150E0;
	--color-primary-soft:   rgba(1, 105, 254, 0.10);
}
.domain-student {
	--color-primary:        var(--cs-green);
	--color-primary-hover:  #10B267;
	--color-primary-soft:   rgba(20, 203, 117, 0.10);
}

/* -----------------------------------------------------------------------------
   Reset / Basis
   ----------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.5;
	color: var(--color-text);
	background: var(--color-bg);
	-webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Typo-Hierarchie (Brand Manual, Kap. 03) */
h1, h2, h3, h4 { margin: 0 0 var(--space-4); color: var(--color-text); line-height: 1.15; }
h1 { font-size: 56px; font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: 36px; font-weight: 800; letter-spacing: -0.01em; }
h3 { font-size: 24px; font-weight: 600; }
h4 { font-size: 16px; font-weight: 700; }
p  { margin: 0 0 var(--space-4); }
.text-muted { color: var(--color-text-muted); }
.caption {
	font-size: 12px; font-weight: 500; letter-spacing: 0.015em;
	text-transform: uppercase; color: var(--color-text-muted);
}

/* -----------------------------------------------------------------------------
   Komponenten
   ----------------------------------------------------------------------------- */

/* Pill / Badge */
.pill {
	display: inline-flex; align-items: center; gap: var(--space-2);
	padding: 6px 14px; border-radius: var(--radius-pill);
	background: var(--color-primary-soft); color: var(--color-primary);
	font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
}
.pill__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* Buttons */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
	padding: 17px 22px; border-radius: 14px;
	font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1;
	border: 1px solid transparent; cursor: pointer; text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, opacity .15s ease;
}
.btn:hover { text-decoration: none; }
.btn--block { width: 100%; }
.btn--primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn--primary:hover { background: var(--color-primary-hover); }
.btn--outline {
	background: var(--color-surface); color: var(--color-text); border-color: var(--color-border);
}
.btn--outline:hover { background: var(--gray-100); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* Formularfelder */
.field { margin-bottom: var(--space-5); }
.field__label { display: block; font-weight: 700; font-size: 15px; margin-bottom: var(--space-2); }
.input {
	width: 100%; padding: 14px 16px;
	font-family: inherit; font-size: 16px; color: var(--color-text);
	background: var(--color-surface);
	border: 1px solid var(--color-border); border-radius: var(--radius);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder { color: var(--gray-300); }
.input:focus {
	outline: none; border-color: var(--color-primary);
	box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.field__hint { margin-top: var(--space-2); font-size: 13px; }
.field--error .input { border-color: var(--color-danger); }
.field--error .field__hint { color: var(--color-danger); }

/* Karten */
.card {
	background: var(--color-surface); border: 1px solid var(--color-border);
	border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
	padding: var(--space-6);
	margin-bottom: var(--space-5);
}

/* Trenner "oder" */
.divider {
	display: flex; align-items: center; gap: var(--space-4);
	color: var(--color-text-muted); font-size: 14px; margin: var(--space-5) 0;
}
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }

/* Alerts */
.alert {
	padding: 12px 16px; border-radius: var(--radius); margin-bottom: var(--space-5);
	font-size: 14px; font-weight: 600; border: 1px solid transparent;
}
.alert--error { background: rgba(239, 68, 68, .08); color: var(--color-danger-text); border-color: rgba(239, 68, 68, .25); }
.alert--info  { background: var(--color-primary-soft); color: var(--color-primary); font-weight: 500; }
.alert--info a { word-break: break-all; }

/* Input mit Icon-Button (Passwort-Sichtbarkeit) */
.input-group { position: relative; }
.input-group .input { padding-right: 48px; }
.input-group__toggle {
	position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
	width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
	border: 0; background: transparent; color: var(--gray-500); cursor: pointer; border-radius: var(--radius-sm);
}
.input-group__toggle:hover { color: var(--color-text); background: var(--gray-100); }
.input-group__toggle.is-visible { color: var(--color-primary); }

/* Checkbox-Zeile */
.check {
	display: flex; align-items: flex-start; gap: var(--space-3);
	font-size: 14px; color: var(--color-text-muted); margin-bottom: var(--space-5); cursor: pointer;
}
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--color-primary); flex: none; }

/* -----------------------------------------------------------------------------
   App-Shell (eingeloggt)
   ----------------------------------------------------------------------------- */
.app { min-height: 100vh; display: flex; flex-direction: column; }
.app__main { flex: 1; padding: var(--space-7) 0; }
.container { width: min(1120px, 100% - 48px); margin-inline: auto; }

.topbar {
	display: flex; align-items: center; justify-content: space-between;
	padding: var(--space-3) var(--space-6);
	background: var(--color-surface); border-bottom: 1px solid var(--color-border);
	position: sticky; top: 0; z-index: 10;
}
.topbar__brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--color-text); font-weight: 800; font-size: 18px; }
.topbar__brand:hover { text-decoration: none; }
.topbar__brand img { height: 32px; width: auto; }
.topbar__left { display: flex; align-items: center; gap: var(--space-6); }
.topbar__nav { display: flex; gap: var(--space-2); }
.topbar__nav a { padding: 6px 12px; border-radius: var(--radius-sm); font-weight: 700; color: var(--color-text-muted); font-size: 15px; }
.topbar__nav a:hover { color: var(--color-text); background: var(--gray-100); text-decoration: none; }
.topbar__nav a.is-active { color: var(--color-primary); background: var(--color-primary-soft); }
.topbar__right { display: flex; align-items: center; gap: var(--space-4); }
.topbar__user { font-weight: 600; color: var(--color-text-muted); }

/* Segmented control (Test-Art) */
.segmented { display: flex; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }
.segmented label { flex: 1; text-align: center; padding: 10px; cursor: pointer; font-weight: 600; font-size: 14px; }
.segmented label:has(input:checked) { background: var(--color-primary); color: #fff; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }

/* Punkte-Reihe */
.points-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.points-row .input--sm { width: 64px; }

/* Test-Liste */
.testlist { list-style: none; margin: 0; padding: 0; }
.testrow { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.testrow:last-child { border-bottom: 0; }
.testrow__main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; color: var(--color-text); }
.testrow__main:hover { text-decoration: none; }
.testrow__main:hover .testrow__title { color: var(--color-primary); }
.testrow__title { font-weight: 700; }
.testrow__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--color-text-muted); }

.btn--sm { padding: 9px 14px; font-size: 14px; border-radius: var(--radius-sm); }

.pagehead { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.pagehead__actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; flex-shrink: 0; }
.pagehead__title { font-size: 32px; margin: 0 0 var(--space-1); }
.backlink { display: inline-block; font-size: 14px; font-weight: 600; margin-bottom: var(--space-2); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: start; }
@media (max-width: 860px) { .grid-2 { grid-template-columns: 1fr; } }

/* Upload-Dropzone */
.dropzone {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2);
	text-align: center; padding: var(--space-6); margin-bottom: var(--space-5);
	border: 2px dashed var(--color-border); border-radius: var(--radius-lg);
	background: var(--color-bg); cursor: pointer; transition: border-color .15s ease, background-color .15s ease;
}
.dropzone:hover, .dropzone.is-drag { border-color: var(--color-primary); background: var(--color-primary-soft); }
.dropzone__icon {
	width: 44px; height: 44px; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary);
	display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700;
}
.dropzone__text { font-size: 15px; }
.dropzone__hint { font-size: 13px; color: var(--color-text-muted); }
.dropzone__file { margin-top: var(--space-2); font-weight: 700; color: var(--color-primary); font-size: 14px; }

/* Dokumentliste */
.doclist { list-style: none; margin: 0; padding: 0; }
.doclist__item { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.doclist__item:last-child { border-bottom: 0; }
.doclist__main { flex: 1; display: flex; flex-direction: column; gap: 2px; color: var(--color-text); min-width: 0; }
.doclist__main:hover { text-decoration: none; }
.doclist__main:hover .doclist__title { color: var(--color-primary); }
.doclist__title { font-weight: 700; }
.doclist__meta { font-size: 13px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.empty { padding: var(--space-6) 0; text-align: center; }

/* Status-Badges */
.badge { flex: none; padding: 4px 12px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; white-space: nowrap; }
.badge--uploaded, .badge--extracting, .badge--generating { background: var(--gray-100); color: var(--gray-700); }
.badge--extracted, .badge--ready { background: var(--color-success-bg); color: var(--color-success-text); }
.badge--failed { background: var(--color-danger-bg); color: var(--color-danger-text); }

/* Gliederung */
.outline { list-style: none; margin: 0; padding: 0; }
.outline__item { padding: 6px 0; border-bottom: 1px solid var(--color-border); font-size: 14px; }
.outline__item:last-child { border-bottom: 0; }
.outline__item--l1 { font-weight: 700; }
.outline__item--l2 { padding-left: var(--space-4); color: var(--gray-700); }
.outline__item--l3 { padding-left: var(--space-6); color: var(--color-text-muted); font-size: 13px; }

/* Textvorschau */
.textpreview {
	max-height: 460px; overflow-y: auto; padding: var(--space-4);
	background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius);
	font-size: 13px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; color: var(--gray-700);
}

/* Impact-Streifen (Lehrer-Gamification) */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-bottom: var(--space-5); }
.stat {
	display: flex; align-items: center; gap: var(--space-4);
	background: var(--color-surface); border: 1px solid var(--color-border);
	border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-sm);
}
.stat__icon {
	flex: none; width: 44px; height: 44px; border-radius: var(--radius);
	background: var(--color-primary-soft); color: var(--color-primary);
	display: flex; align-items: center; justify-content: center;
}
.stat__value { font-size: 24px; font-weight: 800; line-height: 1.1; color: var(--color-text); }
.stat__label { font-size: 13px; color: var(--color-text-muted); }
@media (max-width: 720px) { .stats { grid-template-columns: 1fr; } }

/* Toolbar (Suche/Filter/Sortierung) */
.toolbar { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: var(--space-5) 0; }
.toolbar__search { flex: 1 1 240px; }
.toolbar__select { flex: 0 0 auto; width: auto; min-width: 140px; }

/* Skriptliste */
.doctable { display: flex; flex-direction: column; gap: var(--space-2); }
.docrow {
	display: flex; align-items: center; gap: var(--space-4);
	background: var(--color-surface); border: 1px solid var(--color-border);
	border-radius: var(--radius); padding: var(--space-3) var(--space-4);
}
.docrow__main { flex: 1 1 auto; min-width: 0; }
.docrow__title { display: block; font-weight: 700; color: var(--color-text); }
.docrow__title:hover { color: var(--color-primary); text-decoration: none; }
.docrow__meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--color-text-muted); margin-top: 2px; }
.docrow__stats { flex: 0 0 auto; font-size: 13px; color: var(--color-text-muted); text-align: right; }
.docrow__stats strong { color: var(--color-text); }
.docrow__actions { flex: 0 0 auto; display: flex; gap: 4px; }
.tag { background: var(--color-primary-soft); color: var(--color-primary); padding: 2px 8px; border-radius: var(--radius-pill); font-weight: 700; font-size: 12px; }

.iconbtn { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius-sm); cursor: pointer; font-size: 15px; line-height: 1; }
.iconbtn:hover { background: var(--gray-100); }
.iconbtn--danger:hover { background: rgba(239,68,68,.08); border-color: var(--color-danger); }

/* Paginierung */
.pager { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-5); }
.pager__info { font-size: 14px; color: var(--color-text-muted); }

/* Modal */
.modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(17,41,55,.45); }
.modal__box { position: relative; width: min(440px, 100%); background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-6); }
.modal__box h3 { margin-bottom: var(--space-3); }
.modal__actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-5); }

/* Einklappbarer Inhalt */
.disclosure { border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); margin-bottom: var(--space-5); }
.disclosure > summary { cursor: pointer; padding: var(--space-4) var(--space-5); font-weight: 700; color: var(--color-text); list-style-position: inside; }
.disclosure > summary::marker { color: var(--color-text-muted); }
.disclosure[open] > summary { border-bottom: 1px solid var(--color-border); }
.disclosure > form { padding: 0 var(--space-5) var(--space-5); }

/* Trefferquote */
.quote { margin-bottom: var(--space-5); }
.quote__meter { height: 10px; border-radius: var(--radius-pill); background: var(--gray-200); overflow: hidden; margin-bottom: var(--space-2); }
.quote__meter > span { display: block; height: 100%; background: var(--color-success); border-radius: inherit; transition: width .3s ease; }
.quote__label { font-size: 14px; }

/* Inline-Icons (Lucide) */
.ico { display: inline-block; vertical-align: middle; flex: none; }
.btn .ico { margin-right: 2px; }

/* Toasts */
.toasts {
	position: fixed; top: var(--space-5); right: var(--space-5); z-index: 100;
	display: flex; flex-direction: column; gap: var(--space-2); max-width: min(380px, calc(100vw - 32px));
}
.toast {
	display: flex; align-items: flex-start; gap: var(--space-3);
	background: var(--color-surface); border: 1px solid var(--color-border);
	border-left: 4px solid var(--color-primary);
	border-radius: var(--radius); box-shadow: var(--shadow-lg);
	padding: var(--space-3) var(--space-4); font-size: 14px;
	animation: toastIn .2s ease;
}
.toast.is-leaving { opacity: 0; transform: translateX(12px); transition: opacity .2s ease, transform .2s ease; }
.toast__icon { flex: none; margin-top: 1px; }
.toast__msg { flex: 1; color: var(--color-text); }
.toast__close { flex: none; border: 0; background: transparent; color: var(--color-text-muted); cursor: pointer; padding: 0; line-height: 1; }
.toast--success { border-left-color: var(--color-success); }
.toast--success .toast__icon { color: var(--color-success); }
.toast--error { border-left-color: var(--color-danger); }
.toast--error .toast__icon { color: var(--color-danger); }
.toast--info { border-left-color: var(--color-primary); }
.toast--info .toast__icon { color: var(--color-primary); }
@keyframes toastIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

/* Tabs */
.tabbar { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-6); }
.tab {
	display: inline-flex; align-items: center; gap: var(--space-2);
	padding: 12px 16px; border: 0; background: transparent; cursor: pointer;
	font-family: inherit; font-size: 15px; font-weight: 700; color: var(--color-text-muted);
	border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--color-text); }
.tab.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.tab__count { font-size: 12px; font-weight: 700; background: var(--gray-200); color: var(--gray-700); border-radius: var(--radius-pill); padding: 1px 8px; }
.tab.is-active .tab__count { background: var(--color-primary-soft); color: var(--color-primary); }
.tabpanel { display: none; }
.tabpanel.is-active { display: block; animation: fadeIn .15s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Button-Reihe (Aktionen nebeneinander) */
.btnrow { display: flex; gap: var(--space-2); align-items: center; }

/* Fragenliste */
.fragenliste { display: flex; flex-direction: column; gap: var(--space-4); }
.frage { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-sm); transition: opacity .2s ease; }
.frage[data-status="rejected"] { opacity: .55; }
.frage[data-status="approved"] { border-color: var(--color-success); }
.frage__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); font-size: 13px; }
.frage__chapter { color: var(--color-text-muted); }
.frage__points { color: var(--color-text-muted); }
.frage__state { margin-left: auto; font-weight: 700; }
.frage[data-status="approved"] .frage__state { color: var(--color-success); }
.frage[data-status="rejected"] .frage__state { color: var(--color-danger); }
.frage__stem { font-size: 17px; font-weight: 700; margin: 0 0 var(--space-4); }

.chip { padding: 3px 10px; border-radius: var(--radius-pill); font-weight: 700; font-size: 12px; }
.chip--leicht { background: var(--color-success-bg); color: var(--color-success-text); }
.chip--mittel { background: rgba(1,105,254,.10); color: var(--ct-blue); }
.chip--schwer { background: var(--color-danger-bg); color: var(--color-danger-text); }

.optionen { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.option { display: flex; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius); }
.option__mark { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--gray-300); margin-top: 2px; }
.option--correct { background: rgba(2,193,94,.07); border-color: var(--color-success); }
.option--correct .option__mark { border-color: var(--color-success); background: var(--color-success); position: relative; }
.option--correct .option__mark::after { content: "✓"; position: absolute; inset: 0; color: #fff; font-size: 11px; line-height: 14px; text-align: center; font-weight: 700; }
.option__body { display: flex; flex-direction: column; gap: 2px; }
.option__text { font-weight: 600; }
.option--correct .option__text { color: var(--color-success-text); }
.option__rationale { font-size: 13px; color: var(--color-text-muted); }

.beleg { font-size: 13px; color: var(--gray-700); background: var(--color-bg); border-left: 3px solid var(--color-primary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: var(--space-2) var(--space-3); margin-bottom: var(--space-4); }
.beleg__label { display: inline-block; font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: .04em; color: var(--color-primary); margin-right: var(--space-2); }

.frage__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* Inline-Editing */
.frage__edit { display: none; border-top: 1px dashed var(--color-border); margin-top: var(--space-4); padding-top: var(--space-4); }
.frage.is-editing > .frage__head,
.frage.is-editing > .frage__stem,
.frage.is-editing > .optionen,
.frage.is-editing > .beleg,
.frage.is-editing > .frage__actions { display: none; }
.frage.is-editing > .frage__edit { display: block; }
.frage__edit textarea.input { resize: vertical; }
.input--sm { font-size: 13px; padding: 8px 12px; }
.editopt { display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-2); }
.editopt > input[type="radio"] { margin-top: 12px; width: 18px; height: 18px; accent-color: var(--color-success); flex: none; }
.editopt__fields { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.btn--approve { background: var(--color-success); color: #fff; }
.btn--approve:hover { background: #0AA352; }
.btn--reject { background: var(--color-surface); color: var(--color-danger); border-color: var(--color-danger); }
.btn--reject:hover { background: rgba(239,68,68,.08); }
/* Statusabhaengige Sichtbarkeit der Aktionen */
.frage [data-reset] { display: none; }                                   /* "Auf Offen" nur bei entschiedenen Fragen */
.frage[data-status="approved"] [data-reset],
.frage[data-status="rejected"] [data-reset] { display: inline-flex; }
.frage[data-status="approved"] [data-frage-action="approved"] { display: none; }  /* bereits uebernommen */
.frage[data-status="approved"] [data-edit-toggle] { display: none; }              /* uebernommene sind gesperrt */
.frage[data-status="rejected"] [data-frage-action="rejected"] { display: none; }  /* bereits verworfen */

/* -----------------------------------------------------------------------------
   Auth-Layout (Split-Screen, Screens S.3–S.10)
   ----------------------------------------------------------------------------- */
.auth { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.auth__brand {
	position: relative; overflow: hidden;
	display: flex; flex-direction: column; justify-content: space-between;
	padding: var(--space-7);
	color: #fff;
	background-color: var(--color-primary);
	background-image: radial-gradient(rgba(255, 255, 255, .13) 1.5px, transparent 1.6px);
	background-size: 26px 26px;
}
.auth__brandTop { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; opacity: .85; }
.auth__brandTop::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.auth__brandcenter { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-5); }
.auth__watermarkWrap {
	width: min(50%, 480px); aspect-ratio: 1; border-radius: 50%;
	margin-inline: auto;
	background: rgba(255, 255, 255, .25);
	display: flex; align-items: center; justify-content: center;
}
.auth__watermark { width: 88%; height: auto; }
.auth__brand h2 { color: #fff; font-size: clamp(40px, 4.2vw, 56px); line-height: 1.1; max-width: 15ch; margin-inline: auto; }
.auth__brand p  { color: rgba(255,255,255,.85); max-width: 34ch; margin-inline: auto; }
.auth__brandFoot { display: flex; justify-content: space-between; font-size: 13px; opacity: .8; }

.auth__form { display: flex; align-items: center; justify-content: center; padding: var(--space-7); background: var(--color-surface); }
.auth__formInner { width: 100%; max-width: 420px; }
.auth__logo { height: 32px; width: auto; margin-bottom: var(--space-6); }
.auth__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.auth__aside { text-align: right; margin-top: var(--space-2); font-size: 14px; }
.auth__aside a { font-weight: 600; }
.auth__foot { text-align: center; margin-top: var(--space-6); color: var(--color-text-muted); }

/* Mobile: farbiger Kopfblock oben, Formular darunter */
@media (max-width: 860px) {
	.auth { grid-template-columns: 1fr; }
	.auth__brand { padding: var(--space-5); flex-direction: row; align-items: center; gap: var(--space-4); }
	.auth__brandTop, .auth__brandFoot { display: none; }
	.auth__watermarkWrap { width: 84px; flex: none; margin: 0; }
	.auth__brandcenter { flex-direction: row; text-align: left; align-items: center; }
	.auth__brand h2 { font-size: 24px; margin: 0; }
	.auth__brand p { font-size: 14px; }
	.auth__form { padding: var(--space-5); }
	.auth__row { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------------------------
   Coming-Soon-Landing (Screens S.1–S.2)
   ----------------------------------------------------------------------------- */
.site { min-height: 100vh; display: flex; flex-direction: column; }
.site__header, .site__footer {
	display: flex; align-items: center; justify-content: space-between;
	padding: var(--space-5) var(--space-7);
}
.site__footer { color: var(--color-text-muted); font-size: 14px; margin-top: auto; }
.brandmark { height: 56px; width: auto; }

/* Produkt-Landingpage (#71) */
.site__nav { display: flex; align-items: center; gap: var(--space-4); }
.site__navlink { color: var(--color-text-muted); font-weight: 600; text-decoration: none; font-size: 15px; }
.site__navlink:hover { color: var(--color-primary); }
.btn--lg { padding: 14px 26px; font-size: 16px; }
.btn--onprimary { background: #fff; color: var(--color-primary); border: 1px solid #fff; }
.btn--onprimary:hover { background: rgba(255,255,255,.9); }

.lp-hero { max-width: 1120px; margin-inline: auto; padding: clamp(28px, 6vw, 72px) var(--space-6); }
.lp-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 5vw, 56px); align-items: center; }
.lp-hero__content h1 { margin: var(--space-4) 0 var(--space-3); font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.1; }
.lp-lead { color: var(--color-text-muted); max-width: 48ch; font-size: 1.05rem; }
.lp-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-5); }
.lp-actions--center { justify-content: center; }
.lp-cross-inline { margin-top: var(--space-5); color: var(--color-text-muted); font-size: 15px; }
.lp-cross-inline a { color: var(--color-primary); font-weight: 700; text-decoration: none; }
.lp-hero__panel { display: flex; justify-content: center; }

.lp-section { max-width: 1120px; margin-inline: auto; padding: clamp(24px, 4vw, 56px) var(--space-6); }
.lp-h2 { text-align: center; font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: var(--space-6); }
.lp-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-4); }
.lp-feature { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); }
.lp-feature__icon { color: var(--color-primary); margin-bottom: var(--space-3); }
.lp-feature h3 { font-size: 1.05rem; margin-bottom: var(--space-2); }
.lp-feature p { color: var(--color-text-muted); font-size: .95rem; line-height: 1.55; }

.lp-cross { background: var(--color-primary); color: #fff; text-align: center; padding: clamp(32px, 5vw, 64px) var(--space-6); }
.lp-cross h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: var(--space-3); }
.lp-cross p { max-width: 52ch; margin: 0 auto var(--space-5); opacity: .92; }
.lp-cta { text-align: center; }

@media (max-width: 860px) {
	.lp-hero__grid { grid-template-columns: 1fr; }
	.lp-hero__panel { order: -1; }
}

.landing { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--space-6); }
.landing__card {
	width: min(1120px, 100%); background: var(--color-surface);
	border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden;
	display: grid; grid-template-columns: 1fr 1fr;
}
.landing__content { padding: clamp(24px, 5vw, 64px); }
.landing__content h1 { margin-top: var(--space-4); }
.landing__content > p { color: var(--color-text-muted); max-width: 46ch; }
.landing__panel {
	background: var(--color-primary-soft);
	padding: clamp(24px, 4vw, 48px); display: flex; align-items: center; justify-content: center;
}

/* Notify-Form */
.notify { display: flex; gap: var(--space-3); max-width: 460px; margin-top: var(--space-3); }
.notify .input { flex: 1; }
.notify .btn { white-space: nowrap; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Mock-Fortschrittskarte im Panel */
.mock { width: 100%; max-width: 400px; }
.mock__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.mock__file { width: 44px; height: 44px; border-radius: var(--radius); background: var(--color-primary-soft);
	display: flex; align-items: center; justify-content: center; color: var(--color-primary); font-size: 20px; }
.mock__progressLabel { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--color-primary); margin-bottom: 6px; }
.mock__bar { height: 8px; border-radius: var(--radius-pill); background: var(--color-primary-soft); overflow: hidden; margin-bottom: var(--space-4); }
.mock__bar > span { display: block; height: 100%; background: var(--color-primary); border-radius: inherit; }
.mock__item {
	display: flex; align-items: center; gap: var(--space-3);
	padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius);
	margin-bottom: var(--space-3); font-size: 14px; font-weight: 600;
}
.mock__item--muted { color: var(--color-text-muted); }
.mock__check { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--color-primary); flex: none; }
.mock__item--muted .mock__check { border-color: var(--gray-300); }

@media (max-width: 860px) {
	.site__header, .site__footer { padding: var(--space-4); }
	.landing__card { grid-template-columns: 1fr; }
	.landing__panel { order: -1; }
	h1 { font-size: 40px; }
}

/* =========================================================================
   Profil (profil.cfm) + Header-Avatar + Cropper
   ========================================================================= */
.container--narrow { width: min(760px, 100% - 48px); }
.link { color: var(--color-primary); font-weight: 600; }

/* hidden-Attribut muss auch display:grid/flex-Elemente ausblenden */
[hidden] { display: none !important; }

/* Runder Avatar (Header + Karte) */
.avatar {
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%; overflow: hidden; background: var(--color-primary-soft);
	color: var(--color-primary); font-weight: 800; flex: none;
	object-fit: cover;
}
.avatar--sm { width: 32px; height: 32px; font-size: 13px; }
.avatar--initials { text-transform: uppercase; }

/* Header-Profil-Link */
.topbar__profile {
	display: inline-flex; align-items: center; gap: var(--space-2);
	padding: 4px 10px 4px 4px; border-radius: var(--radius-pill);
	color: var(--color-text-muted); font-weight: 600;
	border: 0; background: transparent; font: inherit; cursor: pointer;
}
.topbar__profile:hover { background: var(--gray-100); text-decoration: none; color: var(--color-text); }
.topbar__profile.is-active { background: var(--color-primary-soft); color: var(--color-primary); }
.topbar__profile .topbar__user { font-size: 15px; }

/* Kopf-Karte */
.profile-card {
	background: var(--color-surface); border: 1px solid var(--color-border);
	border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
	overflow: hidden; margin-bottom: var(--space-6);
}
.profile-card__cover { height: 84px; background: linear-gradient(120deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 55%, #ffffff)); }
.profile-card__body {
	display: flex; align-items: center; gap: var(--space-4);
	padding: 0 var(--space-6) var(--space-5); flex-wrap: wrap;
}
.profile-card__info { flex: 1 1 auto; min-width: 0; }
.profile-card__name { font-size: 22px; margin: 0 0 var(--space-1); }
.profile-card__meta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

/* Avatar in der Karte (groß, überlappt Cover) */
.profile-avatar {
	position: relative; width: 96px; height: 96px; margin-top: -40px; flex: none;
	border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary);
	border: 4px solid var(--color-surface); box-shadow: var(--shadow-sm);
	display: flex; align-items: center; justify-content: center; overflow: visible;
}
.profile-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.profile-avatar__initials { font-size: 34px; font-weight: 800; text-transform: uppercase; }
.profile-avatar__edit {
	position: absolute; right: -2px; bottom: -2px;
	width: 30px; height: 30px; border-radius: 50%;
	border: 2px solid var(--color-surface); background: var(--color-primary); color: #fff;
	display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
	box-shadow: var(--shadow-sm);
}
.profile-avatar__edit:hover { filter: brightness(1.06); }

/* Info-Ansicht */
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-6); }
.infocard {
	background: var(--color-surface); border: 1px solid var(--color-border);
	border-radius: var(--radius); padding: var(--space-4) var(--space-5);
}
.infocard__label { font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 2px; }
.infocard__value { font-size: 16px; font-weight: 600; word-break: break-word; }

/* Karten mit Kopf (Bearbeiten) */
.card__head { font-size: 17px; margin: 0 0 var(--space-4); }
.formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-5); }
.formgrid .field--full { grid-column: 1 / -1; }
.formrow { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* Crop-Modal */
.modal__box--wide { width: min(560px, 100%); }

/* Rollen-Umschalter (Registrierung Schüler/Eltern, #40) */
.roletabs { display: flex; gap: 6px; background: var(--color-border); border-radius: var(--radius); padding: 4px; margin-bottom: var(--space-4); }
.roletabs__tab { flex: 1; text-align: center; padding: 8px 10px; border-radius: calc(var(--radius) - 2px); font-weight: 600; font-size: .9rem; color: var(--color-text-muted); text-decoration: none; }
.roletabs__tab.is-active { background: var(--color-surface); color: var(--color-primary); box-shadow: var(--shadow-sm); }

/* Eltern-Dashboard: Kinderkarten + Verknüpfungscode (#40) */
.cardgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 560px) { .cardgrid { grid-template-columns: 1fr; } }
.childcard { display: flex; flex-direction: column; gap: var(--space-3); text-decoration: none; color: inherit; transition: box-shadow .15s ease, transform .15s ease; }
.childcard:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.childcard__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.childcard__name { font-weight: 700; font-size: 1.1rem; }
.childcard__stats { display: flex; gap: var(--space-4); flex-wrap: wrap; color: var(--color-text-muted); font-size: .9rem; }
.childcard__stats strong { color: var(--color-text); font-size: 1.05rem; }
.childcard__more { color: var(--color-primary); font-weight: 600; font-size: .9rem; }
.chip--payer { background: var(--color-success-bg, #e6f6ec); color: var(--color-success-text, #1a7f4b); }
.linkcode { display: flex; flex-direction: column; gap: 2px; background: var(--color-primary-bg, #eef4ff); border: 1px dashed var(--color-primary); border-radius: var(--radius); padding: 12px 16px; margin-bottom: var(--space-3); }
.linkcode__label { font-size: .8rem; color: var(--color-text-muted); }
.linkcode__value { font-size: 1.6rem; font-weight: 800; letter-spacing: .18em; color: var(--color-primary); font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; }
.linklist { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-3) 0 var(--space-4); }
.linklist__item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 10px 14px; }
.linklist__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.linklist__name { font-weight: 700; }
.linklist__meta { font-size: .82rem; color: var(--color-text-muted); }

/* Rechtstexte im Modal (#62-UX) */
.modal__box--legal { width: min(780px, 100%); max-height: 88vh; display: flex; flex-direction: column; padding: 0; }
.modal__legalhead { display: flex; justify-content: flex-end; padding: var(--space-2) var(--space-2) 0; }
.modal__legalbody { overflow-y: auto; padding: 0 var(--space-6) var(--space-6); }
.modal__legalbody .legalpage { max-width: none; margin: 0; padding: 0; }
.modal__legalbody .legalpage__brand { display: none; }
.modal__legalbody .legalpage h1 { margin-top: 0; }
.modal__legalbody .legalpage__nav { display: none; }
.modal__x { border: none; background: transparent; cursor: pointer; color: var(--color-text-muted); font-size: 1.6rem; line-height: 1; padding: 4px 10px; border-radius: var(--radius); }
.modal__x:hover { background: var(--color-border); color: var(--color-text); }
.crop-select {
	display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
	text-align: center; padding: var(--space-6);
	border: 2px dashed var(--color-border); border-radius: var(--radius-lg);
}
.crop-select__icon {
	width: 72px; height: 72px; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary);
	display: inline-flex; align-items: center; justify-content: center;
}
.crop-select p { margin: 0; }
.crop-stage {
	max-height: 360px; background: var(--gray-100); border-radius: var(--radius);
	overflow: hidden;
}
.crop-stage img { display: block; max-width: 100%; }
.crop-toolbar {
	display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
	margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border);
}
.crop-toolbar__sep { width: 1px; height: 22px; background: var(--color-border); }
.crop-tool {
	width: 38px; height: 38px; border-radius: var(--radius-sm);
	border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text);
	display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.crop-tool:hover { background: var(--gray-100); color: var(--color-primary); border-color: var(--color-primary); }

@media (max-width: 640px) {
	.profile-grid, .formgrid { grid-template-columns: 1fr; }
	.profile-card__body { justify-content: center; text-align: center; }
}

/* =========================================================================
   Test-Status (Badge + Warn-Alert)
   ========================================================================= */
.alert--warn { background: var(--color-warn-bg); color: var(--color-warn-text); font-weight: 500; }
.tstatus {
	display: inline-block; padding: 2px 9px; border-radius: var(--radius-pill);
	font-weight: 700; font-size: 12px; line-height: 1.5; vertical-align: middle;
}
.tstatus--entwurf       { background: var(--gray-100); color: var(--gray-700); }
.tstatus--freigegeben   { background: rgba(20, 203, 117, 0.14); color: #0F8A4F; }
.tstatus--abgeschlossen { background: rgba(100, 116, 139, 0.16); color: #475569; }

/* Test anpassen (test.cfm) */
.frage__head .frage__actions { margin-left: auto; }
.anpassen-bar { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-2); }
.anpassen-bar .text-muted { font-size: 13px; }

/* Manuelle Frage (frageNeu.cfm) */
.optrow { display: flex; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-3); }
.optrow__radio { display: inline-flex; align-items: center; gap: 6px; padding-top: 12px; white-space: nowrap; font-weight: 700; }
.optrow__letter { color: var(--color-text-muted); }
.optrow__fields { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.input--sub { font-size: 14px; padding: 9px 12px; }
.input--sub::placeholder { font-style: italic; }

/* Meilensteine (Dashboard-Gamification) */
.milestones { margin-bottom: var(--space-5); }
.milestones__head { display: flex; align-items: center; gap: var(--space-2); font-size: 17px; margin: 0 0 var(--space-5); }
.milestones__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.ms { border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-4); }
.ms--done { border-color: color-mix(in srgb, var(--color-success) 45%, var(--color-border)); background: rgba(20,203,117,.05); }
.ms__top { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.ms__icon { display: inline-flex; color: var(--color-primary); }
.ms--done .ms__icon { color: var(--color-success); }
.ms__label { font-weight: 700; font-size: 14px; flex: 1; }
.ms__level { font-size: 12px; font-weight: 700; color: var(--color-text-muted); background: var(--gray-100); padding: 2px 8px; border-radius: var(--radius-pill); }
.ms__meter { height: 8px; border-radius: var(--radius-pill); background: var(--gray-100); overflow: hidden; margin-bottom: var(--space-2); }
.ms__meter > span { display: block; height: 100%; background: var(--color-primary); border-radius: inherit; transition: width .3s ease; }
.ms--done .ms__meter > span { background: var(--color-success); }
.ms__foot { font-size: 13px; color: var(--color-text); }
@media (max-width: 640px) { .milestones__grid { grid-template-columns: 1fr; } }

/* Fragetyp-Badge (Mehrfachauswahl) */
.chip--multi { background: rgba(14,165,164,.14); color: #0E7490; }

/* User-Menü im Header (Profil / Abmelden) */
.usermenu { position: relative; }
.usermenu__caret { display: inline-flex; color: var(--color-text-muted); margin-left: 2px; }
.usermenu__pop {
	position: absolute; right: 0; top: calc(100% + 6px); min-width: 190px; z-index: 40;
	background: var(--color-surface); border: 1px solid var(--color-border);
	border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 6px;
	display: flex; flex-direction: column;
}
.usermenu__pop a {
	display: flex; align-items: center; gap: var(--space-2);
	padding: 9px 12px; border-radius: var(--radius-sm);
	color: var(--color-text); font-weight: 600; font-size: 14px;
}
.usermenu__pop a:hover { background: var(--gray-100); text-decoration: none; }

/* Admin-Bereich */
.admintable { width: 100%; border-collapse: collapse; font-size: 14px; }
.admintable th, .admintable td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.admintable th { font-size: 12px; text-transform: uppercase; letter-spacing: .02em; color: var(--color-text-muted); }
.admintable th.num, .admintable td.num { text-align: right; white-space: nowrap; }
.admintable tbody tr:hover { background: var(--gray-100); }
.admintable form { margin: 0; }

/* Impersonation-Banner */
.imp-banner {
	display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
	background: var(--color-warn-bg); color: var(--color-warn-text);
	padding: 8px var(--space-6); font-size: 14px; font-weight: 500;
	border-bottom: 1px solid #FCD34D;
}
.imp-banner__form { margin: 0; }
.imp-banner__btn {
	border: 1px solid var(--color-warn-text); background: transparent; color: var(--color-warn-text);
	padding: 5px 12px; border-radius: var(--radius-sm); font-weight: 700; font-size: 13px; cursor: pointer;
}
.imp-banner__btn:hover { background: var(--color-warn-text); color: #fff; }

/* -----------------------------------------------------------------------------
   Klassencodes (/codes) + Beitritts-Platzhalter (/join) + QR
   ----------------------------------------------------------------------------- */
.codebig {
	font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
	font-size: 40px; font-weight: 800; letter-spacing: 6px;
	color: var(--color-text); margin: var(--space-3) 0;
}
.codebig--sm { font-size: 24px; letter-spacing: 3px; margin: 0; }

.codelist { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-4); }
.coderow {
	background: var(--color-surface); border: 1px solid var(--color-border);
	border-radius: var(--radius); padding: var(--space-4) var(--space-5);
}
.coderow__top { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.coderow__info { flex: 1 1 220px; min-width: 0; }
.coderow__label { display: block; font-weight: 700; color: var(--color-text); }
.coderow__meta {
	display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
	font-size: 13px; color: var(--color-text-muted); margin-top: 2px;
}
.coderow__actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.coderow__assign { margin-top: var(--space-3); }
.coderow__assign > summary { font-size: 14px; }

.codebadge {
	display: inline-flex; align-items: center; padding: 2px 10px;
	border-radius: var(--radius-pill); font-size: 12px; font-weight: 700;
}
.codebadge--aktiv    { background: rgba(20, 203, 117, 0.14); color: #0E8F53; }
.codebadge--gesperrt { background: var(--gray-200); color: var(--gray-500); }
.codebadge--expired  { background: rgba(220, 38, 38, 0.12); color: var(--color-danger-text); }

.assignlist { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.assignrow {
	display: flex; align-items: center; gap: var(--space-3); cursor: pointer;
	padding: 10px var(--space-4);
	border: 1px solid var(--color-border); border-radius: var(--radius);
	background: var(--color-surface);
	transition: border-color .12s ease, background .12s ease;
}
.assignrow:hover { border-color: var(--color-primary); }
.assignrow:has( input:checked ) { border-color: var(--color-primary); background: var(--color-primary-soft); }
.assignrow input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--color-primary); cursor: pointer; }
.assignrow > span { color: var(--color-text); }

.codeassign { margin-bottom: var(--space-5); }

/* QR-Modal */
.qrbox {
	display: flex; justify-content: center; align-items: center;
	padding: var(--space-4); background: #fff; border-radius: var(--radius);
	border: 1px solid var(--color-border); min-height: 240px;
}
.qrbox img { image-rendering: pixelated; }
.qrurl { text-align: center; font-size: 12px; word-break: break-all; margin: var(--space-3) 0 0; }

/* Beitritts-Platzhalter /join nutzt .site/.landing/.card (wie passwort-vergessen). */

/* -----------------------------------------------------------------------------
   Onboarding: Willkommens-Overlay (.welcome) + "Erste Schritte"-Checkliste (.onboard)
   ----------------------------------------------------------------------------- */
.welcome {
	position: fixed; inset: 0; z-index: 1000;
	display: flex; align-items: center; justify-content: center;
	padding: var(--space-5);
	background: rgba(17, 41, 55, 0.55); backdrop-filter: blur(3px);
}
.welcome__box {
	background: var(--color-surface); border-radius: var(--radius-lg);
	width: 100%; max-width: 480px; padding: var(--space-7);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28); text-align: center;
	max-height: 92vh; overflow-y: auto;
}
.welcome__logo { height: 40px; width: auto; margin-bottom: var(--space-4); }
.welcome__box h2 { margin-bottom: var(--space-2); }
.welcome__steps {
	list-style: none; margin: var(--space-5) 0; padding: 0;
	display: grid; gap: var(--space-4); text-align: left;
}
.welcome__steps li { display: flex; gap: var(--space-3); align-items: flex-start; }
.welcome__steps li div { display: flex; flex-direction: column; }
.welcome__num {
	flex: none; width: 28px; height: 28px; border-radius: var(--radius-pill);
	background: var(--color-primary); color: var(--color-on-primary);
	font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center;
}

.onboard { margin-bottom: var(--space-6); }
.onboard__head {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4);
}
.onboard__title { margin: 0; }
.onboard__meta { display: flex; align-items: center; gap: var(--space-3); }
.onboard__count { font-size: 13px; color: var(--color-text-muted); }
.onboard__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.onboard__step { display: flex; align-items: center; gap: var(--space-3); }
.onboard__mark { flex: none; color: var(--color-text-muted); display: inline-flex; }
.onboard__step.is-done .onboard__mark { color: var(--cs-green); }
.onboard__label { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.onboard__step.is-done .onboard__label { color: var(--color-text-muted); font-weight: 500; }

/* Mehrzeiliges Eingabefeld (z.B. KI-Themen-Wizard Zusatzkontext) */
textarea.input { min-height: 84px; resize: vertical; line-height: 1.5; }

/* -----------------------------------------------------------------------------
   „KI arbeitet…"-Overlay (blockierend, während synchroner Upload-/Generier-Requests)
   ----------------------------------------------------------------------------- */
.kiwait {
	position: fixed; inset: 0; z-index: 2000;
	display: flex; align-items: center; justify-content: center;
	padding: var(--space-5);
	background: rgba(17, 41, 55, 0.55); backdrop-filter: blur(3px);
}
.kiwait__box {
	background: var(--color-surface); border-radius: var(--radius-lg);
	width: 100%; max-width: 420px; padding: var(--space-7);
	text-align: center; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}
.kiwait__spinner {
	width: 48px; height: 48px; margin: 0 auto var(--space-4);
	border: 4px solid var(--color-primary-soft);
	border-top-color: var(--color-primary);
	border-radius: 50%;
	animation: kiwait-spin 0.9s linear infinite;
}
@keyframes kiwait-spin { to { transform: rotate(360deg); } }
.kiwait__title { margin: 0 0 var(--space-2); }
.kiwait__step { margin: 0 0 var(--space-4); color: var(--color-text); font-weight: 600; }
.kiwait__hint { margin: 0; font-size: 13px; color: var(--color-text-muted); }
.kiwait__time { margin: var(--space-2) 0 0; font-size: 12px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .kiwait__spinner { animation-duration: 2.4s; } }

/* -----------------------------------------------------------------------------
   CoolStudent: Übungstest-Runner (uebung) + Ergebnis (ergebnis)
   ----------------------------------------------------------------------------- */
.ufrage { margin-bottom: var(--space-4); }
.uopts { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.uopt {
	display: flex; align-items: center; gap: var(--space-3); cursor: pointer;
	padding: 12px var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius);
	transition: border-color .12s ease, background .12s ease;
}
.uopt:hover { border-color: var(--color-primary); }
.uopt:has( input:checked ) { border-color: var(--color-primary); background: var(--color-primary-soft); }
.uopt input { width: 18px; height: 18px; flex: none; accent-color: var(--color-primary); cursor: pointer; }

.runnerbar { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); }
.runnerbar__spacer { flex: 1; }

.result { text-align: center; }
.result__grade { font-size: 30px; font-weight: 800; color: var(--color-primary); }
.result__meta { display: flex; gap: var(--space-3); justify-content: center; align-items: baseline; margin: var(--space-2) 0 var(--space-3); }
.result__pct { font-size: 22px; font-weight: 700; }
.result__bar { height: 10px; border-radius: var(--radius-pill); background: var(--color-primary-soft); overflow: hidden; }
.result__bar > span { display: block; height: 100%; background: var(--color-primary); }

.frage--result { border-left: 3px solid var(--color-border); }
.frage--result.is-correct { border-left-color: var(--cs-green); }
.frage--result.is-wrong { border-left-color: #DC2626; }
.frage__result { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.option--wrong { border-color: rgba(220, 38, 38, 0.4); background: rgba(220, 38, 38, 0.06); }
.option__you { font-size: 12px; color: var(--color-text-muted); }
.option__why { display: block; font-size: 13px; color: var(--color-text-muted); margin-top: 2px; }

/* =============================================================================
   Testmodus (echte Tests, #34) — login-lose Pruefungs-Shell + Lehrer-Durchgang
   ========================================================================== */
.exam { padding: var(--space-6) 0; }
.exam__intro,
.exam__done { text-align: center; max-width: 560px; margin: var(--space-6) auto; padding: var(--space-6); }
.exam__badge {
	display: inline-flex; align-items: center; gap: var(--space-2);
	color: var(--color-primary); font-weight: 600; font-size: 0.9rem;
	margin-bottom: var(--space-3);
}
.exam__title { font-size: 1.5rem; margin: 0 0 var(--space-2); }
.exam__hints { list-style: none; padding: 0; margin: var(--space-4) 0; text-align: left; }
.exam__hints li {
	display: flex; align-items: center; gap: var(--space-3);
	padding: var(--space-2) 0; color: var(--color-text);
}
.exam__hints li svg { color: var(--color-primary); flex: none; }
.exam__startform { margin-top: var(--space-5); text-align: left; }
.exam__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.exam__timer {
	font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.1rem;
	padding: var(--space-2) var(--space-3); border-radius: var(--radius);
	background: var(--color-primary-soft); color: var(--color-primary); white-space: nowrap;
}
.exam__timer.is-urgent { background: var(--color-danger); color: #fff; }
.exam__doneicon { color: var(--color-success); margin-bottom: var(--space-2); }
.exam__doneicon--warn { color: var(--color-danger); }

/* Lehrer: Durchgang teilen + Ergebnisse */
.durchgang__sharegrid {
	display: flex; gap: var(--space-5); flex-wrap: wrap; align-items: flex-start;
	margin-top: var(--space-4);
}
.durchgang__linkcol { flex: 1 1 320px; min-width: 260px; display: flex; flex-direction: column; gap: var(--space-3); }
.durchgang__shareactions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.durchgang__hint { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); font-size: 0.85rem; }
.durchgang__results th.ta-right, .durchgang__results td.ta-right { text-align: right; }

.durchgangliste { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-3) 0; }
.durchgangrow {
	display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
	padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border);
	border-radius: var(--radius); text-decoration: none; color: var(--color-text);
	transition: border-color 0.15s, background 0.15s;
}
.durchgangrow:hover { border-color: var(--color-primary); background: var(--color-primary-soft); }
.durchgangrow__main { display: flex; align-items: center; gap: var(--space-3); }
.durchgangrow__meta { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }

.tablewrap { overflow-x: auto; }
.ta-right { text-align: right; }

/* Testmodus-Auswertung (#35): Integritaets-Ampel + Aehnlichkeits-Warnungen */
.ampel {
	display: inline-block; width: 12px; height: 12px; border-radius: 50%;
	background: var(--color-success); vertical-align: middle;
}
.ampel--gruen { background: var(--color-success); }
.ampel--gelb  { background: var(--color-warn); }
.ampel--rot   { background: var(--color-danger); }

.simwarn { margin-top: var(--space-4); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg); }
.simwarn__title { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); font-size: 1rem; }
.simwarn__title svg { color: var(--color-warn); }
.simwarn__list { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: flex; flex-direction: column; gap: var(--space-2); }
.simwarn__item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--color-surface); }
.simwarn__item--rot { box-shadow: inset 3px 0 0 var(--color-danger); }
.simwarn__item--gelb { box-shadow: inset 3px 0 0 var(--color-warn); }

/* Uebungs-Verlauf + Gamification (#38): Statkarten + Liniendiagramm */
.statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); }
.statcard { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); }
.statcard__num { font-size: 1.6rem; font-weight: 700; color: var(--color-primary); line-height: 1.1; }
.statcard__lbl { font-size: 0.8rem; color: var(--color-text-muted); margin-top: var(--space-1); }

.chartwrap { width: 100%; overflow: hidden; }
.linechart { width: 100%; height: auto; display: block; }
.linechart__grid { stroke: var(--color-border); stroke-width: 1; stroke-dasharray: 3 3; }
.linechart__axis { fill: var(--color-text-muted); font-size: 11px; }
.linechart__line { stroke: var(--color-primary); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.linechart__dot { fill: var(--color-primary); }
.linechart__hint { margin-top: var(--space-2); font-size: 0.82rem; }

.testrow__actions { display: inline-flex; gap: var(--space-2); align-items: center; }

/* Gamification am Uebungs-Ergebnis (#38) */
.celebrate {
	display: flex; align-items: center; gap: var(--space-3);
	margin-top: var(--space-4); padding: var(--space-4);
	border-radius: var(--radius); font-weight: 600;
	background: var(--color-primary-soft); color: var(--color-primary);
}
.celebrate svg { flex: none; }
.celebrate--gold { background: #FFF4D6; color: #A97400; }
/* .celebrate--best entspricht dem .celebrate-Basisstil -> kein eigener Block noetig */
.result__gamemeta { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }

/* Sofort-Feedback im Uebungs-Runner (#43) */
.uopt--correct { border-color: var(--color-success) !important; background: rgba(20,203,117,0.10); }
.uopt--wrong   { border-color: var(--color-danger) !important;  background: rgba(229,57,53,0.08); }
.uopt__why { display: block; width: 100%; margin-top: var(--space-1); font-size: 0.82rem; color: var(--color-text-muted); }
.ufeedback { margin-top: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius); font-weight: 600; }
.ufeedback--ok { background: rgba(20,203,117,0.12); color: #0F9E5A; }
.ufeedback--no { background: rgba(229,57,53,0.10); color: var(--color-danger); }

@keyframes ufrage-flash { 0% { box-shadow: 0 0 0 0 rgba(20,203,117,0); } 30% { box-shadow: 0 0 0 4px rgba(20,203,117,0.40); } 100% { box-shadow: 0 0 0 0 rgba(20,203,117,0); } }
@keyframes ufrage-shake { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-6px); } 40%,80% { transform: translateX(6px); } }
.ufrage--correct { animation: ufrage-flash 0.8s ease-out; }
.ufrage--wrong   { animation: ufrage-shake 0.4s ease-in-out; }

.confetti-bit {
	position: fixed; width: 9px; height: 9px; border-radius: 2px;
	pointer-events: none; z-index: 9999;
	animation: confetti-fly 0.9s ease-out forwards;
}
@keyframes confetti-fly {
	0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
	100% { transform: translate(var(--dx), var(--dy)) rotate(260deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.ufrage--correct, .ufrage--wrong { animation: none; }
}

/* Übungs-Gamification: Punkte, Serie, Fortschritt, Auto-Weiter (#43) */
.urunner-stats { display: flex; align-items: center; gap: var(--space-3); }
.urunner-points { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: 700; color: var(--color-primary); white-space: nowrap; }
.urunner-points [data-runner-points] { display: inline-block; transition: transform 0.15s; }
.urunner-points [data-runner-points].is-bump { transform: scale(1.4); }
.urunner-combo { font-weight: 700; color: #E8600A; white-space: nowrap; }
.urunner-combo.is-pop { animation: combo-pop 0.5s ease-out; }
@keyframes combo-pop { 0% { transform: scale(0.6); opacity: 0; } 50% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(1); } }
.urunner-progress { height: 8px; border-radius: var(--radius-pill); background: var(--color-border); overflow: hidden; margin-bottom: var(--space-5); }
.urunner-progress > span { display: block; height: 100%; width: 0; background: var(--color-primary); border-radius: var(--radius-pill); transition: width 0.4s ease; }
/* Feedback-Modus-Umschalter (#50): nur Uebung; nach dem ersten Blaettern/Pruefen gesperrt */
.urunner-mode { margin-bottom: var(--space-5); }
.urunner-mode__switch { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; cursor: pointer; }
.urunner-mode__switch input { width: 18px; height: 18px; accent-color: var(--color-primary); cursor: pointer; }
.urunner-mode__hint { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: 0.85rem; }
.urunner-mode.is-locked { opacity: 0.6; }
.urunner-mode.is-locked .urunner-mode__switch { cursor: default; }
.ufeedback__count { margin-top: var(--space-2); font-size: 0.82rem; font-weight: 400; opacity: 0.8; }
@media (prefers-reduced-motion: reduce) {
	.urunner-combo.is-pop, .urunner-points [data-runner-points].is-bump { animation: none; transition: none; }
}

/* Gepruefte Uebungsfrage sperren, ohne Inputs zu disablen (sonst nicht submitted) */
.ufrage--locked .uopt { pointer-events: none; }

/* Konfetti-Regen (Abschluss Uebungs-Ergebnis, #43) */
.confetti-bit--rain {
	top: -14px; width: 10px; height: 10px;
	animation: confetti-fall var(--dur, 1.8s) linear forwards;
}
@keyframes confetti-fall {
	0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
	100% { transform: translate(var(--dx), var(--dy)) rotate(420deg); opacity: 0.95; }
}

/* Lehrer-Zuordnung im Testmodus (#34) */
.exam__teacher { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); font-weight: 600; margin: 0 0 var(--space-3); }

/* Anzahl-Fragen-Feld bei der Skript-Generierung */
.gencount { display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.gencount .field__label { margin: 0; }
.gencount .input--sm { width: 84px; }
.gencount-inline { display: inline-flex; align-items: center; gap: var(--space-2); }
.gencount-inline__num { width: 66px; }

/* === Schueler-Avatar (#51): Chip + Picker ================================= */
.cavatar-wrap { display: inline-flex; line-height: 0; }
.cavatar-wrap svg, .cavatar { display: block; }
.topbar__avatar { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; }
.topbar__avatar svg { width: 34px; height: 34px; }

.avatarpicker { display: flex; gap: var(--space-5); align-items: flex-start; flex-wrap: wrap; }
.avatarpicker__preview { flex: 0 0 auto; width: 120px; height: 120px; border-radius: 24px; background: var(--color-bg); display: flex; align-items: center; justify-content: center; }
.avatarpicker__preview svg { width: 104px; height: 104px; }
.avatarpicker__side { flex: 1 1 320px; min-width: 260px; display: flex; flex-direction: column; gap: var(--space-3); }
.avatarpicker__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: var(--space-2); }
.avatarpick { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--space-2); border: 2px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); cursor: pointer; text-align: center; color: inherit; }
.avatarpick svg { width: 44px; height: 44px; }
.avatarpick:hover { border-color: var(--color-primary); }
.avatarpick.is-active { border-color: var(--color-primary); background: var(--color-primary-soft); }
.avatarpick__label { font-size: 0.72rem; font-weight: 600; color: var(--color-text-muted); }
.avatarpick--locked { cursor: default; opacity: 0.5; filter: grayscale(0.75); }
.avatarpick--locked:hover { border-color: var(--color-border); }
.avatarpick__lock { display: inline-flex; align-items: center; gap: 2px; font-size: 0.5rem; line-height: 1.05; color: var(--color-text-muted); }
.avatarpick__lock svg { width: 9px; height: 9px; }
.avatarpicker__colors { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.avatarpicker__colors .swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--color-surface); box-shadow: 0 0 0 1px var(--color-border); cursor: pointer; padding: 0; }
.avatarpicker__colors .swatch.is-active { box-shadow: 0 0 0 2px var(--color-primary); }

/* Rechnung-Fragetyp (#54): Zahleneingabe im Runner */
.urechnung { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.urechnung__input { max-width: 220px; }
.urechnung__unit { font-weight: 600; color: var(--color-text-muted); }

/* Zuordnung-Fragetyp (#55): Left-Label + Dropdown je Paar */
.uzuordnung { display: flex; flex-direction: column; gap: var(--space-3); }
.uzuordnung__row { display: flex; flex-direction: column; gap: 4px; }
.uzuordnung__left { font-weight: 600; }
.uzuordnung__sel { max-width: 360px; }

/* Zuordnung-Ergebnis (#55) */
.zresult { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.zresult__row { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--color-bg); }
.zresult__row.is-correct { color: var(--color-success-text); background: var(--color-success-bg); }
.zresult__row.is-wrong { color: var(--color-danger-text); background: var(--color-danger-bg); }
.zresult__left { font-weight: 600; }
.zresult__correct { color: var(--color-text-muted); font-size: 0.88rem; }

/* Lückentext-Fragetyp (#56) */
.ulueckentext { line-height: 2.2; font-size: 1.05rem; }
.ulueckentext__blank { display: inline-block; width: auto; min-width: 90px; max-width: 200px; margin: 0 3px; padding: 2px 8px; }

/* Notenspiegel (#61) */
.notenspiegel__bars { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }
.nsbar { display: grid; grid-template-columns: 130px 1fr 32px; align-items: center; gap: var(--space-3); }
.nsbar__label { font-size: 0.9rem; color: var(--color-text-muted); text-align: right; }
.nsbar__track { height: 18px; background: var(--color-bg); border-radius: 999px; overflow: hidden; }
.nsbar__fill { display: block; height: 100%; background: var(--color-primary); border-radius: 999px; min-width: 2px; }
.nsbar__count { font-weight: 700; text-align: right; }
@media (max-width: 560px) { .nsbar { grid-template-columns: 96px 1fr 28px; } }

/* Rechtsseiten (#62): Impressum / Datenschutz / Nutzungsbedingungen (standalone) */
.legalpage { max-width: 820px; margin: 0 auto; padding: 24px 20px 80px; line-height: 1.65; color: var(--color-text); }
.legalpage__brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--color-primary); text-decoration: none; font-size: 1.1rem; margin-bottom: 8px; }
.legalpage h1 { margin: 12px 0 20px; }
.legalpage h2 { margin: 2em 0 .5em; font-size: 1.15rem; }
.legalpage h3 { margin: 1.4em 0 .3em; font-size: 1rem; }
.legalpage p, .legalpage li { color: var(--color-text); }
.legalpage table { border-collapse: collapse; width: 100%; margin: .5em 0 1em; }
.legalpage th, .legalpage td { border: 1px solid var(--color-border); padding: 6px 10px; text-align: left; vertical-align: top; font-size: .95rem; }
.legalpage__draft { background: var(--color-warning-bg, #fff3cd); border: 1px solid var(--color-warning-border, #ffe08a); color: var(--color-warning-text, #664d03); padding: 12px 16px; border-radius: 10px; margin-bottom: 24px; font-size: .92rem; }
.legalpage__ph { background: #fff3cd; color: #664d03; padding: 0 5px; border-radius: 3px; font-style: italic; }
.legalpage__draft-val { background: #e6f6ec; color: #1a7f4b; padding: 0 5px; border-radius: 3px; }
.legalpage__nav { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--color-border); font-size: .9rem; display: flex; gap: 18px; flex-wrap: wrap; }
.legalpage__updated { color: var(--color-text-muted); font-size: .85rem; margin-top: 4px; }
/* dezenter Footer mit Rechtslinks (Shell + Coming-Soon) */
.legalfooter { text-align: center; padding: 24px 16px; font-size: .85rem; color: var(--color-text-muted); }
.legalfooter a { color: var(--color-text-muted); margin: 0 8px; }

/* Kurzantwort / Offene Frage (#57/#58) */
.ukurz__input { max-width: 480px; }
.uoffen__input { width: 100%; resize: vertical; min-height: 96px; }

/* Freitext-Bewertung / Review (#57/#58, Etappe 2) */
.reviewitem { border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-4); margin-bottom: var(--space-4); }
.reviewitem__head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.reviewitem__stem { font-weight: 600; margin: .2em 0 .6em; }
.reviewitem__answer { background: var(--color-bg); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 8px; white-space: pre-wrap; }
.reviewitem__ref { font-size: .9rem; color: var(--color-text-muted); margin-bottom: 4px; }
.reviewitem__ai { font-size: .9rem; color: var(--color-primary); margin: 6px 0; }
.reviewitem__grade { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.reviewitem__pts { max-width: 90px; }

/* Auth-Seiten (Login/Register/Passwort): Rechts-Footer am Viewport-Rand fixieren
   (Vollhöhe-Split-Layout -> sonst müsste man scrollen). */
.legalfooter--auth { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; background: var(--color-surface); border-top: 1px solid var(--color-border); }

/* Filter-Leiste (z.B. Tests-Statusfilter) */
.filterbar { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--color-text-muted); }
.filterbar select { width: auto; }

/* Klassischer Notenspiegel (Tabelle) */
.notentabelle { border-collapse: collapse; margin: var(--space-3) 0 var(--space-4); }
.notentabelle th, .notentabelle td { border: 1px solid var(--color-border); padding: 6px 16px; text-align: center; min-width: 42px; }
.notentabelle thead th { background: var(--color-bg); font-weight: 700; }
.notentabelle tbody th { text-align: left; font-weight: 600; background: var(--color-bg); }
.notentabelle__avg { font-weight: 800; color: var(--color-primary); }

/* Lern-Buddy (#39): Emoji-Avatar begleitet die Übung – reagiert, motiviert, Energie-Ring */
.buddy { position: fixed; right: clamp(12px, 3vw, 32px); bottom: clamp(12px, 3vw, 32px); z-index: 40; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none; --energy: 0; }
.buddy__bubble { pointer-events: none; max-width: 220px; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: 14px; padding: 8px 12px; font-size: 14px; font-weight: 600; line-height: 1.35; box-shadow: var(--shadow-lg); position: relative; }
.buddy__bubble[hidden] { display: none; }
.buddy__bubble::after { content: ""; position: absolute; right: 24px; bottom: -7px; width: 12px; height: 12px; background: var(--color-surface); border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); transform: rotate(45deg); }
.buddy__bubble.is-in { animation: buddyBubbleIn .28s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes buddyBubbleIn { from { opacity: 0; transform: translateY(6px) scale(.92); } to { opacity: 1; transform: none; } }

.buddy__body { pointer-events: auto; position: relative; width: clamp(56px, 12vw, 68px); height: clamp(56px, 12vw, 68px); border-radius: 50%; border: 3px solid currentColor; background: var(--color-surface); background: color-mix(in srgb, currentColor 16%, var(--color-surface)); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; box-shadow: var(--shadow-md); animation: buddyFloat 3.2s ease-in-out infinite; }
.buddy__emoji { font-size: clamp(28px, 6vw, 34px); line-height: 1; }
.buddy__ring { position: absolute; inset: -3px; border-radius: 50%; pointer-events: none; box-shadow: 0 0 calc(4px + var(--energy) * 20px) currentColor; opacity: calc(.12 + var(--energy) * .6); transition: box-shadow .3s ease, opacity .3s ease; }

@keyframes buddyFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.buddy.is-correct .buddy__body { animation: buddyPop .6s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes buddyPop { 0% { transform: scale(1); } 35% { transform: scale(1.22) translateY(-4px); } 60% { transform: scale(.96); } 100% { transform: scale(1); } }
.buddy.is-wrong .buddy__body { animation: buddyLean .55s ease; }
@keyframes buddyLean { 0% { transform: rotate(0); } 30% { transform: rotate(-9deg) translateY(2px); filter: grayscale(.4); } 100% { transform: rotate(0); } }
.buddy.is-poke .buddy__body { animation: buddyWiggle .5s ease; }
@keyframes buddyWiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-11deg); } 75% { transform: rotate(11deg); } }

@media (max-width: 560px) { .buddy__bubble { max-width: 160px; font-size: 13px; } }