malt das Betriebssystem — dagegen
hilft kein CSS, nur eine eigene Liste darüber. */
.kf { position: relative; display: block; }
/* 🔴 `display:block` oben schlägt das `display:none`, das der Browser einem
`hidden` mitgibt — eine Regel des Blattes gewinnt IMMER gegen die des
Browsers. Ohne diese Zeile bliebe ein verborgenes Klappfeld sichtbar. */
.kf[hidden] { display: none; }
/* 🔴 Das echte Feld bleibt stehen, nur unsichtbar und ohne Mauszeiger.
display:none wäre die Falle aus ablageFeld(): ein Pflichtfeld, das der
Browser nicht anzeigen kann, lässt sich auch nicht bemängeln. */
.kf > select {
position: absolute; inset: 0; width: 100%; height: 100%;
opacity: 0; pointer-events: none;
}
.kf-knopf {
position: relative; z-index: 1;
display: flex; align-items: center; justify-content: space-between; gap: 10px;
width: 100%; padding: 10px 12px;
background: var(--card); color: var(--text);
border: 1px solid var(--border); border-radius: 8px;
font-size: 0.92rem; font-family: inherit; text-align: left; cursor: pointer;
}
.kf-knopf:hover { border-color: var(--primary-text); }
.kf-knopf:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.kf-knopf[disabled] { opacity: 0.6; cursor: default; }
.kf-pfeil { width: 14px; height: 14px; flex: 0 0 auto; color: var(--muted); }
.kf.offen .kf-pfeil { transform: rotate(180deg); }
.kf-wert { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Die Liste — gleiche Rezeptur wie die Sprachauswahl, siehe Block am Ende. */
/* 🔴 `fixed` und am : Die Liste haengt beim Aufklappen nicht mehr in der
Huelle, sonst schneidet `.card { overflow:hidden }` sie nach dem ersten
Eintrag ab (gemessen am 14.09.2026). Die Lage setzt klappfeld.js. */
.kf-liste {
display: none;
position: fixed; z-index: 2100;
max-height: 320px; overflow-y: auto;
flex-direction: column; gap: 2px;
}
.kf-liste.kf-offen { display: flex; }
.kf-eintrag {
display: flex; align-items: center; gap: 9px; width: 100%;
padding: 7px 9px; border: none; border-radius: 8px;
background: none; color: var(--text); cursor: pointer;
font-size: 0.88rem; font-family: inherit; text-align: left;
}
.kf-eintrag:hover, .kf-eintrag:focus-visible { background: var(--hover); }
.kf-eintrag[disabled] { opacity: 0.45; cursor: default; }
.kf-eintrag-text { flex: 1; }
.kf-aktiv { font-weight: 600; }
.kf-haken { margin-left: auto; color: var(--primary-text); }
/* Im Filterkasten und in schmalen Zellen darf das Feld nicht die volle Breite
der Karte nehmen — dort setzt der Kasten selbst die Grenze. */
.spf-kasten .kf { width: 100%; }
/* Kopfzeile einer Liste: Suchfeld links, „Neu" rechts. */
.liste-kopf {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
margin-bottom: 14px;
}
.liste-kopf .liste-suche { flex: 1 1 240px; max-width: 360px; }
/* Knopf „⤓ Export (CSV)" (16.09.2026): rechtsbündig vor „＋ Neu". Die Knöpfe
dahinter tragen selbst `margin-left:auto` im style-Attribut — ohne das
!important teilten sich beide den freien Platz, und „Neu" stünde mitten in
der Zeile. */
.liste-kopf .btn-export { margin-left: auto; }
.liste-kopf .btn-export ~ .btn,
.liste-kopf .btn-export ~ form { margin-left: 0 !important; }
/* Gefüllter Knopf neben Rahmenknopf: ohne den unsichtbaren Rahmen 4px flacher. */
.liste-kopf .btn:not(.btn-outline):not(.btn-leise):not(.btn-gefahr-leise) { border: 2px solid transparent; }
/* Pfeilknöpfe in Sortierspalten (heute: /admin/navigation). Quadratisch und
schmal, damit die Spalte nicht breiter wird als die Zahl, die dort stand. */
/* 🔴 Eigene Farben, nicht nur eigene Groesse. `.btn` setzt `border: none` und
KEINEN Hintergrund — ohne eine Fassung wie `.btn-outline` nahm der Browser
seine Vorgabe, und die ist weiss. Im Dunkelmodus standen so zwei weisse
Kaesten in der Zeile (Ansage des Users am 14.09.2026). */
.btn-sortier {
padding: 2px 8px;
line-height: 1.3;
font-size: 0.95rem;
background: var(--hover);
color: var(--text);
border: 1px solid var(--border);
}
.btn-sortier:hover:not([disabled]) {
background: var(--card);
border-color: var(--primary-text);
color: var(--primary-text);
}
.btn-sortier[disabled] { opacity: 0.35; cursor: default; }
/* Dieselbe Breite ohne Verwaltungsmenü — für Seiten, die keine Lesetexte,
sondern Einstellungen zeigen (heute: /profile). Die Deckel auf den
Eingaben sind bewusst dieselben wie oben. */
.container.container-weit {
max-width: none;
padding-left: 24px;
padding-right: 24px;
}
.container.container-weit input[type="text"],
.container.container-weit input[type="url"],
.container.container-weit input[type="email"],
.container.container-weit input[type="number"],
.container.container-weit input[type="password"],
.container.container-weit input[type="date"],
.container.container-weit select {
/* Zweite Fassung desselben Deckels, siehe oben. */
max-width: var(--feld-vorgabe, 720px);
}
.container.container-weit textarea { max-width: 1100px; }
.page-title { font-size: 1.6rem; color: var(--primary-text); margin-bottom: 24px; }
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.page-header .page-title { margin-bottom: 0; }
/* ── Buttons ──────────────────────────────────── */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: 10px 20px; border-radius: 7px; border: none;
font-size: 0.9rem; font-weight: 600; cursor: pointer;
text-decoration: none; transition: background 0.14s, transform 0.1s, box-shadow 0.14s;
line-height: 1.2; white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: default; transform: none; }
.btn-primary { background: var(--primary); color: white; text-decoration: none; }
.btn-primary:hover:not(:disabled) { background: var(--primary-dk); color: white; text-decoration: none; }
.btn-accent { background: var(--accent); color: white; }
.btn-accent:hover:not(:disabled) { background: var(--accent-dk); color: white; text-decoration: none; }
.btn-outline { background: transparent; color: var(--primary-text); border: 2px solid var(--primary-text); }
.btn-outline:hover:not(:disabled) { background: var(--primary); color: white; text-decoration: none; }
.btn-danger { background: var(--danger); color: white; }
.btn-danger:hover:not(:disabled) { background: #c0392b; color: white; text-decoration: none; }
/* 🔴 Zwei stille Knopffassungen (15.09.2026). Ausloeser war der Fund des
Users an den Dashboard-Kacheln: „abbrechen ist ein link kein button".
Stimmt — `.btn` allein setzt weder Flaeche noch Rahmen, ein `class="btn
btn-sm"` ohne Farbvariante ist also nur Text mit Innenabstand. Genau so
standen 14 Stellen da, vor allem „Bearbeiten" in den Listen.
Die rote Fassung stand zusaetzlich 6-mal als Inline-Stil im Quelltext. */
.btn-leise { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn-leise:hover:not(:disabled) { background: var(--hover); color: var(--text); text-decoration: none; }
.btn-gefahr-leise { background: transparent; color: var(--danger); border: 1px solid var(--danger); }
.btn-gefahr-leise:hover:not(:disabled) { background: var(--danger); color: #fff; text-decoration: none; }
.btn-gray { background: #e2e8f0; color: var(--text); }
.btn-gray:hover:not(:disabled) { background: #cbd5e0; text-decoration: none; }
[data-theme="dark"] .btn-gray { background: #2d3748; color: #e2e8f0; }
[data-theme="dark"] .btn-gray:hover:not(:disabled) { background: #374151; }
.btn-success { background: var(--success); color: white; }
.btn-warn { background: var(--warn); color: white; }
.btn-zoom { background: #2d8cff; color: white; font-size: 1rem; padding: 12px 24px; }
.btn-zoom:hover { background: #1a7ae0; color: white; text-decoration: none; }
.btn-sm { padding: 6px 13px; font-size: 0.82rem; }
.btn-full { width: 100%; }
/* ── Forms ────────────────────────────────────── */
.form-group { margin-bottom: 18px; }
/* 🔴 `.form-label` braucht eine EIGENE Regel. Bis 14.09.2026 gab es nur
`.form-group label` — stand ein `.form-label` woanders (im Kurs-Editor in
`.ke-abschnitt`), blieb es inline. Dann begann das Eingabefeld hinter dem
Etikett, und zwei Felder untereinander wurden unterschiedlich breit, weil
ihre Etiketten unterschiedlich lang sind. Genau das hat der User am
Webinar-Verweis gesehen. */
.form-group label,
.form-label {
display: block; font-size: 0.87rem;
font-weight: 600; margin-bottom: 6px; color: var(--text);
}
/* ── Rollbalken ──────────────────────────────────
Ansage des Users (15.09.2026): „generell einmal alle scrollbars durchgehen
bitte" — im Dunkelmodus stand ueberall der helle Standardbalken des
Systems, am deutlichsten im Overlay „Nutzer bearbeiten" und im
Formatiereditor.
🔴 EINE Regel fuer alles, keine Liste von Klassen. Eine Liste waere beim
naechsten rollenden Kasten wieder unvollstaendig — und genau so ist der
erste Anlauf am 15.09.2026 ausgegangen.
`scrollbar-width`/`scrollbar-color` decken Firefox ab, die
`::-webkit-scrollbar`-Regeln Chrome, Edge und Safari. Beide Wege
nebeneinander sind noetig; es gibt keinen, den alle verstehen. */
* {
scrollbar-width: thin;
scrollbar-color: var(--border) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 6px;
/* Ein durchsichtiger Rand macht den Griff schmal, ohne die Trefferflaeche
zu verkleinern — anfassen laesst er sich weiter ueber die volle Breite. */
border: 3px solid transparent;
background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
background: var(--muted);
background-clip: content-box;
}
/* Der Balken des ganzen Fensters darf etwas kraeftiger sein — er traegt die
Orientierung, wo man auf einer langen Seite steht. */
html::-webkit-scrollbar { width: 12px; }
/* Eine Kachel mit eigener Farbe. Titel, Text und Knopf erben die Schriftfarbe,
die `DashboardKacheln::schriftfarbe()` zur Hintergrundfarbe berechnet hat —
sonst stünde grauer Hilfstext auf kräftigem Orange. */
.dash-stat-card-farbig .dash-stat-val,
.dash-stat-card-farbig .dash-stat-lbl { color: inherit; }
.dash-stat-card-farbig .dash-stat-lbl { opacity: 0.9; }
.dash-stat-card-farbig .btn-primary {
background: rgba(255, 255, 255, 0.18);
border: 1px solid currentColor;
color: inherit;
}
.dash-stat-card-farbig .btn-primary:hover { background: rgba(255, 255, 255, 0.3); }
/* ── Reiterleiste (reiterleiste() in helpers.php) ──────────────
Jeder Reiter ist ein Verweis. Der aktive traegt die Linie unten — dieselbe
Sprache wie die Verwaltungsleiste darueber, nur eine Ebene tiefer.
📌 Form nach dem Vorbild `.sr-tabs` im Ausbilden24-LMS (Ansage des Users am
15.09.2026: „die tabs möchte ich vom design her so haben wie im ausbilden24
lms"): 2px-Linie unter der Leiste, 3px-Unterstrich am aktiven Reiter, dazu
die Zaehlmarke.
⚠️ Abschreiben allein reichte nicht: Im LMS steht `--primary` im
Dunkelmodus ebenfalls auf dem Marineblau — dort faellt es nur nicht auf.
Der aktive Reiter nimmt deshalb `--primary-text`. */
.rt-leiste {
display: flex; gap: 4px; flex-wrap: wrap;
border-bottom: 2px solid var(--border);
margin: -6px 0 24px;
}
/* 🔴 Einleitungstext unter der Überschrift (18.09.2026).
acadivo setzt global `* { margin: 0 }`; ein `` unter der Überschrift hat
deshalb KEINEN Abstand nach unten. Die Reiterleiste darunter zieht sich
ausserdem mit `-6px` nach oben — zusammen legte sie sich in der
Kursbetreuung sichtbar über die Zeile „5 Teilnehmer · 10 Seiten im Kurs".
Gemessen, nicht geraten: Die Leiste stand 6 px HÖHER als die Unterkante des
Absatzes.
⚠️ Der Abstand gehört an den ABSATZ, nicht an die Leiste: Die Leiste steht
auch dort, wo gar keine Einleitung davor ist (Wiki-Editor), und bekäme
sonst je nach Seite einen anderen Anlauf. */
.seiten-einleitung {
color: var(--muted);
max-width: 820px;
margin: -6px 0 22px;
}
.rt {
display: flex; align-items: center; gap: 6px;
padding: 9px 18px;
font-size: 0.9rem; font-weight: 600;
color: var(--muted); text-decoration: none;
border-bottom: 3px solid transparent;
border-radius: 6px 6px 0 0;
margin-bottom: -2px;
transition: color 0.15s;
}
/* Reiter als Knopf statt Verweis (admin/feedback.php schaltet Bereiche um,
ohne neu zu laden). Der Knopf bringt Rahmen, Fläche und Systemschrift mit —
die nimmt diese Regel weg; die Unterstreichung setzt weiter `.rt`. */
button.rt {
background: none; font-family: inherit; cursor: pointer;
border-top: 0; border-left: 0; border-right: 0;
}
.rt:hover { color: var(--text); background: var(--hover); text-decoration: none; }
.rt.an { color: var(--primary-text); border-bottom-color: var(--primary-text); background: var(--hover); }
/* Zaehlmarke im Reiter — die Anzahl gehoert neben die Beschriftung, nicht als
Klammerzusatz hinein. */
.rt-zahl {
font-size: 0.72rem; font-weight: 700; line-height: 1.6;
padding: 1px 7px; border-radius: 20px;
background: var(--border); color: var(--muted);
}
.rt.an .rt-zahl { background: var(--primary-text); color: var(--card); }
/* ── Bild an einer Quizfrage (15.09.2026) ──────────────────────
🔴 `max-height` und nicht nur `max-width`: Ein Bild aus einer Kamera ist
hochkant schnell 4000px hoch. Ohne die Deckelung schiebt es die Antworten
aus dem Bild, und der Teilnehmer scrollt an der Aufgabe vorbei.
Ausgeliefert wird es ueber `api/fragebild.php` — `/uploads/` ist am Server
gesperrt (siehe src/Fragebild.php). */
/* 🔴 Bild ZUERST und mittig, Text darunter linksbündig — Ansage des Users
(15.09.2026): „vielleicht machen wir erst bild dann text, bild zentriert,
text links?"
Zwei Anläufe davor, beide verworfen: untereinander und beide linksbündig
(„sieht kacke aus"), dann Text links / Bild rechts daneben — dort stand
neben einer einzeiligen Frage ein hohes Bild und darunter klaffte Leere.
Oben mittig ist ruhiger: Das Bild ist die Vorlage, der Text darunter die
Aufgabe dazu. */
.frage-bild {
margin: 6px 0 14px;
display: flex;
justify-content: center;
}
.frage-bild img {
max-width: 100%;
/* 🔴 Deckel auf die Höhe: Ein Bild aus einer Kamera ist hochkant schnell
4000px hoch und schöbe die Antworten aus dem Bild. */
max-height: 300px;
border: 1px solid var(--border);
border-radius: 8px;
display: block;
}
/* ── Dashboard-Kachel „Nächste Termine" (15.09.2026) ───────────
🔴 Sie steht IMMER da, auch ohne Termin (Ansage des Users) — deshalb eine
Liste mit Hinweiszeile und keine Kennzahl wie in den uebrigen Kacheln.
`align-items: flex-start` statt der mittigen Ausrichtung der Nachbarn:
Eine Liste, die mittig steht, sieht bei drei verschieden langen Titeln
ungeordnet aus. */
.dash-termine {
display: flex; flex-direction: column; align-items: stretch;
justify-content: flex-start; gap: 4px; text-align: left;
}
.dash-termine-kopf {
font-size: 0.78rem; font-weight: 700; color: var(--muted);
text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 2px;
}
.dash-termine-leer { color: var(--muted); font-size: 0.86rem; margin: 4px 0 0; }
.dash-termin {
display: flex; align-items: baseline; gap: 10px;
padding: 5px 7px; border-radius: 6px;
text-decoration: none; color: var(--text); font-size: 0.86rem;
border-left: 3px solid var(--border);
}
.dash-termin:hover { background: var(--hover); text-decoration: none; }
.dash-termin-jetzt { border-left-color: var(--success); }
.dash-termin-wann {
font-weight: 700; white-space: nowrap; min-width: 74px;
color: var(--primary-text);
}
.dash-termin-jetzt .dash-termin-wann { color: var(--success); }
.dash-termin-wann small { font-weight: 400; color: var(--muted); margin-left: 4px; }
/* Ein langer Kurstitel darf die Kachel nicht breiter machen als ihre Spalte. */
.dash-termin-titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ── Kalender (15.09.2026) ─────────────────────────────────────
Monatsraster wie im servuno-Portal, bis hin zu den Klassennamen
(`kal-monat`, `kal-kopf`, `kal-wt`, `kal-zahl`): Beide Mietprodukte sollen
sich gleich bedienen lassen.
🔴 `minmax(0, 1fr)` und nicht `1fr`: Ein langer Terminname sprengt sonst
seine Spalte, und das ganze Raster wird breiter als das Bild. Die Kachel
muss schrumpfen duerfen, nicht der Text sie aufblaehen. */
.kal-kopf {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin-bottom: 14px;
}
.kal-titel { font-size: 1.05rem; }
.kal-legende { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.kal-marke {
font-size: 0.72rem; font-weight: 600; padding: 2px 9px; border-radius: 20px;
border: 1px solid var(--border); color: var(--muted);
}
.kal-monat {
display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px;
}
.kal-wt {
font-size: 0.78rem; font-weight: 700; color: var(--muted);
text-align: center; padding-bottom: 2px;
}
.kal-tag {
min-height: 104px; padding: 6px;
border: 1px solid var(--border); border-radius: 8px;
background: var(--card);
display: flex; flex-direction: column; gap: 4px;
}
/* Die Fuellzellen vor dem Monatsersten tragen keine Flaeche — sonst sieht der
Monat aus, als begaenne er schon in der Vorwoche. */
.kal-leer { background: none; border-color: transparent; }
.kal-zahl { font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.kal-heute { border-color: var(--primary-text); }
.kal-heute .kal-zahl { color: var(--primary-text); }
.kal-er {
display: block; padding: 3px 6px; border-radius: 5px;
font-size: 0.74rem; line-height: 1.3; text-decoration: none;
border-left: 3px solid var(--border); background: var(--hover);
color: var(--text);
/* Ein Termin mit langem Titel darf die Kachel nicht auseinanderziehen. */
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kal-er:hover { text-decoration: none; background: var(--border); }
.kal-er-zeit { font-weight: 700; margin-right: 4px; }
.kal-termin { border-left-color: var(--primary-text); }
.kal-kontrolle { border-left-color: var(--accent); }
.kal-pruefung { border-left-color: var(--warn); }
.kal-marke.kal-termin { border-left: 3px solid var(--primary-text); }
.kal-marke.kal-kontrolle { border-left: 3px solid var(--accent); }
.kal-marke.kal-pruefung { border-left: 3px solid var(--warn); }
/* 🔴 Auf dem Telefon ist ein 7-Spalten-Raster nicht lesbar — 40px je Tag
reichen fuer eine Zahl, nicht fuer einen Termin. Dort werden aus den
Kacheln Zeilen: nur Tage MIT Eintrag, untereinander. */
@media (max-width: 720px) {
.kal-monat { grid-template-columns: 1fr; gap: 4px; }
.kal-wt, .kal-leer { display: none; }
.kal-tag { min-height: 0; flex-direction: row; align-items: center; gap: 10px; }
.kal-tag:not(.kal-voll) { display: none; }
.kal-zahl { min-width: 28px; }
.kal-er { flex: 1; white-space: normal; }
}
/* ── Mehrfachauswahl: Chips + „＋" ─────────────────────────────
Ansage des Users (14.09.2026): „textbox mit werten daneben + und x zum
hinzufügen und ändern" — wie im Kundenportal. Löst die Kästchenliste ab,
die bei 34 TAGs aus dem Overlay gelaufen wäre. */
.mw {
display: flex; align-items: flex-start; gap: 8px;
}
.mw-chips {
flex: 1; min-height: 42px;
display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
padding: 6px 8px;
border: 2px solid var(--border); border-radius: 7px;
background: var(--card);
}
.mw-leer { color: var(--muted); font-size: 0.87rem; padding: 0 3px; }
.mw-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 4px 3px 10px; border-radius: 20px;
background: var(--hover); border: 1px solid var(--border);
font-size: 0.84rem; line-height: 1.5;
}
.mw-weg {
border: 0; background: none; cursor: pointer; padding: 0 5px;
color: var(--muted); font-size: 1rem; line-height: 1; border-radius: 50%;
}
.mw-weg:hover { color: var(--danger); background: var(--card); }
/* Der ＋ ist so hoch wie der Kasten daneben — dieselbe Regel wie beim
Zeichenwähler. */
.mw-plus {
flex-shrink: 0; align-self: stretch; min-height: 42px;
padding: 0 14px; font-size: 1.25rem; line-height: 1;
background: var(--hover); color: var(--muted);
border: 1px solid var(--border); border-radius: 7px; cursor: pointer;
}
.mw-plus:hover { background: var(--card); border-color: var(--primary-text); color: var(--primary-text); }
/* Zwei gleichwertige Felder nebeneinander in einer Karte (Erscheinungsbild:
die beiden Logofassungen, Titel und Schrift). Bricht unter 720px um. */
.eb-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 720px) { .eb-paar { grid-template-columns: 1fr; gap: 14px; } }
/* Ausnahme: Ein Etikett, das ein Kästchen umschliesst, bleibt eine Zeile.
🔴 Und es bleibt UNGEFETTET (15.09.2026): Der Text neben einem Kaestchen
benennt keinen Eingabekasten, er ist die Aussage selbst („freigeschaltet").
In 600er Strichstaerke liest er sich wie eine Zwischenueberschrift — beim
Umstellen der 30 handgestylten Etiketten waere genau das passiert. */
.form-label:has(> input[type="checkbox"]),
.form-label:has(> input[type="radio"]) {
display: flex; align-items: center; gap: 8px;
font-weight: 400; cursor: pointer;
}
.form-control {
width: 100%; padding: 9px 13px;
border: 2px solid var(--border); border-radius: 7px;
font-size: 0.95rem; font-family: inherit; color: var(--text);
transition: border-color 0.13s; background: #fff;
}
.form-control:focus { outline: none; border-color: var(--primary-text); }
.form-control:disabled { background: #f5f7fa; color: var(--muted); }
select.form-control { cursor: pointer; }
textarea.form-control { resize: vertical; min-height: 100px; }
/* ── Feldbreiten und Hinweise ──────────────────────────────────────────────
🔴 Die Klasse gehoert an das FELD, nicht an die `.form-group`. Sitzt sie an
der Gruppe, wird der ganze Block schmal: Ein Etikett wie „Bearbeitungszeit
(Minuten)" bricht dann ueber einem 150px-Kasten um, und ein dreizeiliger
Hinweis wird zu einer hohen, duennen Spalte. Etikett und Hinweis nehmen die
volle Zellenbreite, nur der Eingabekasten selbst wird kuerzer. */
/* Beides setzen: `max-width` fuer alle gewoehnlichen Faelle und
`--feld-vorgabe` fuer die beiden pauschalen Deckel im Verwaltungsbereich
(siehe die Regeln mit `var(--feld-vorgabe, 720px)` weiter oben). */
.feld-kurz { --feld-vorgabe: var(--feld-kurz); max-width: var(--feld-kurz); }
.feld-mittel { --feld-vorgabe: var(--feld-mittel); max-width: var(--feld-mittel); }
.feld-lang { --feld-vorgabe: var(--feld-lang); max-width: var(--feld-lang); }
/* Auf dem Telefon nimmt jedes Feld die volle Breite — 380px neben einem
340px breiten Bild ergaebe sonst einen seitlichen Rollbalken. */
@media (max-width: 620px) {
.feld-kurz, .feld-mittel, .feld-lang { --feld-vorgabe: none; max-width: none; }
}
/* Erklaertext UNTER einem Feld. Stand vorher 39-mal als Inline-Stil da und
klebte ohne Abstand am Feldrand. */
.form-hinweis {
display: block; margin-top: 5px;
font-size: 0.8rem; line-height: 1.5; color: var(--muted);
}
/* Zusatz IM Etikett — „(freiwillig)", „(kommagetrennt)". Bleibt in der Zeile
und nimmt die Strichstaerke zurueck, sonst liest er sich wie ein Teil der
Feldbezeichnung. */
.label-zusatz { font-weight: 400; font-size: 0.8rem; color: var(--muted); }
/* Derselbe Hinweis, nur in Warnfarbe — etwa wenn ein Menuepunkt auf einem
Platz steht, den es nicht mehr gibt. */
.form-hinweis.warnung { color: var(--warn); }
/* Einheit hinter einem kurzen Zahlenfeld („Monate", „Minuten"). */
.feld-einheit { color: var(--muted); font-size: 0.9rem; white-space: nowrap; }
/* ==== Ablageflaeche zum Hineinziehen (06.09.2026) ==========================
Wunsch des Users vom 05.09.2026 fuer die Dateiabgabe bei Praxis- und
Masteraufgabe: die Bauart aus dem servuno-Portal statt des nackten
„Durchsuchen"-Knopfs.
🔴 Das echte Dateifeld liegt DECKUNGSGLEICH und durchsichtig ueber der
Flaeche. Dadurch oeffnet ein Klick irgendwo im Kasten die Dateiauswahl und
eine fallengelassene Datei landet direkt im Feld — beides macht der Browser
von sich aus, ganz ohne JavaScript. `ablage.js` malt nur den Rahmen um.
⚠️ `opacity:0`, NICHT `display:none` und NICHT `visibility:hidden`. Ein
Pflichtfeld, das der Browser nicht anzeigen kann, laesst sich auch nicht
bemaengeln: Chrome bricht das Absenden dann mit „not focusable" ab und sagt
dem Benutzer gar nichts. Mit `opacity:0` bleibt es ein sichtbares Feld mit
Flaeche — die Meldung erscheint an der richtigen Stelle. */
.lms-ablage {
position: relative;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 4px; min-height: 112px; padding: 18px 16px; text-align: center;
border: 2px dashed var(--border); border-radius: var(--radius);
background: var(--hover);
transition: border-color 0.15s ease, background-color 0.15s ease;
}
.lms-ablage input[type="file"] {
position: absolute; inset: 0; width: 100%; height: 100%;
opacity: 0; cursor: pointer; padding: 0; border: 0;
}
/* ⚠️ `pointer-events:none` an der Beschriftung: Ohne das faengt SIE den Klick
und den Zeiger beim Ziehen ab, und das Feld darunter bekommt nichts mit. */
.lms-ablage-inhalt {
display: flex; flex-direction: column; align-items: center; gap: 3px;
pointer-events: none;
}
.lms-ablage svg { color: var(--muted); }
.lms-ablage-titel { font-size: 0.95rem; font-weight: 600; word-break: break-all; }
.lms-ablage-unter { font-size: 0.82rem; color: var(--muted); }
/* Waehrend etwas darueber schwebt */
.lms-ablage.ueber { border-color: var(--primary-text); background: var(--card); }
.lms-ablage.ueber svg { color: var(--primary-text); }
/* Liegt eine Datei drin: durchgezogener Rahmen statt gestrichelt —
gestrichelt heisst „hier ist noch nichts". */
.lms-ablage.hat-datei { border-style: solid; border-color: var(--primary-text); }
.lms-ablage.hat-datei svg { color: var(--primary-text); }
.form-check { margin-bottom: 16px; }
.form-check label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 400; font-size: 0.9rem; }
/* 🔴 `flex-shrink: 0`: Bricht die Beschriftung um — und das tut sie, sobald
ein erklärender Zusatz danebensteht — quetscht der Flexkasten sonst das
Kästchen selbst schmal. Am 14.09.2026 im Overlay „Nutzer anlegen" gesehen. */
.form-check input { width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; }
.form-check label + label { margin-top: 7px; }
.form-actions { display: flex; gap: 10px; margin-top: 24px; }
hr { border: none; border-top: 1px solid var(--border); margin: 20px 0; }
/* ── Cards ────────────────────────────────────── */
.card {
background: var(--card); border-radius: var(--radius);
border: 1px solid var(--border); padding: 28px;
box-shadow: var(--shadow); margin-bottom: 20px;
}
/* ── Alerts / Badges ──────────────────────────── */
.alert {
padding: 13px 18px; border-radius: 8px;
margin-bottom: 20px; font-size: 0.92rem;
}
/* 🔴 Textfarbe und Rand als Token, nicht als feste Zahl. Der HINTERGRUND
kippte im Dunkelmodus auf ein dunkles Grün (`--success-bg: #1a3328`), die
Schrift blieb bei `#155724` — dunkelgrün auf dunkelgrün, praktisch
unlesbar. Gemessen am 15.09.2026, als die Meldungen nach unten rechts
wanderten und damit zum ersten Mal richtig ins Auge fielen. */
.alert-success { background: var(--success-bg); color: var(--alert-gut-text, #155724); border: 1px solid var(--alert-gut-rand, #c3e6cb); }
.alert-danger { background: var(--danger-bg); color: var(--alert-schlecht-text, #721c24); border: 1px solid var(--alert-schlecht-rand, #f5c6cb); }
/* 🔴 BEIDE Schreibweisen. Die Regel hiess nur `.alert-warn`, im Quelltext
stehen aber vier `.alert-warning` — die hatten damit gar keine Farbe und
waren ein fetter Satz ohne Kasten. Derselbe Fund wie im Kundenportal. */
.alert-warn,
.alert-warning { background: var(--warn-bg); color: var(--alert-warn-text, #856404); border: 1px solid var(--alert-warn-rand, #ffeeba); }
/* ── Meldungen unten rechts ────────────────────────────────────
Ansage des Users (15.09.2026): „ich würde von diesen info banner grün/rot
gern auf das notification system von servuno umstellen."
Auslöser war ein echter Fehler: Die rote Meldung stand HINTER dem Overlay
und war nicht zu lesen; ein Klick daneben nahm Meldung und Eingaben mit.
🔴 KEIN eigenes Aussehen: Die Meldung behält `.alert-success` und Co. samt
Farbe. Nur der PLATZ ändert sich. Zwei Gestaltungen für dieselbe Aussage
wären zwei Wahrheiten.
🔴 `z-index` über dem Overlay (das liegt bei 3000) — sonst wäre genau der
Fehler nicht behoben, der den Umbau ausgelöst hat.
⚠️ `pointer-events: none` am Kasten, `auto` an der Meldung: Sonst liegt eine
unsichtbare Fläche über der rechten unteren Ecke und schluckt Klicks. */
.md-kasten {
position: fixed; bottom: 20px; right: 20px; z-index: 6000;
display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
max-width: min(400px, calc(100vw - 40px));
pointer-events: none;
}
.md-kasten .alert {
margin: 0; pointer-events: auto;
display: flex; align-items: flex-start; gap: 10px;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
animation: mdRein 0.22s ease-out;
}
.md-kasten .alert.geht { animation: mdRaus 0.3s ease-in forwards; }
/* Der Schließer. Fehler und Warnungen verschwinden NICHT von selbst — wer
etwas nachbessern muss, darf den Grund nicht nach fünf Sekunden verlieren. */
.md-zu {
background: none; border: 0; cursor: pointer;
margin-left: auto; padding: 0 0 0 4px;
font-size: 1.15rem; line-height: 1; color: inherit; opacity: 0.55;
}
.md-zu:hover { opacity: 1; }
@keyframes mdRein {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes mdRaus {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(8px); }
}
/* ⚠️ Wer „weniger Bewegung" eingestellt hat, bekommt die Meldung ohne Einflug
— aber sie erscheint und verschwindet weiterhin. */
@media (prefers-reduced-motion: reduce) {
.md-kasten .alert,
.md-kasten .alert.geht { animation: none; }
}
/* Auf schmalen Geräten über die volle Breite: Ein 400-Pixel-Kasten in der Ecke
eines 360-Pixel-Bildschirms steht sonst halb draußen. */
@media (max-width: 560px) {
.md-kasten { left: 12px; right: 12px; bottom: 12px; max-width: none; align-items: stretch; }
}
.badge {
display: inline-flex; align-items: center; padding: 3px 10px;
border-radius: 20px; font-size: 0.76rem; font-weight: 700;
}
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.badge-gray { background: #e9ecef; color: var(--muted); }
/* ── Login-Seite ──────────────────────────────── */
.login-body { background: #ffffff; }
#net-canvas {
position: fixed; top: 0; left: 0;
width: 100%; height: 100%;
z-index: 0; pointer-events: none;
display: block;
}
.login-wrap {
min-height: 100vh; display: flex;
flex-direction: column;
align-items: center; justify-content: center; padding: 20px;
position: relative; z-index: 1;
}
.login-card {
background: #fff; border-radius: 16px;
box-shadow: 0 8px 40px rgba(0,0,0,0.12);
padding: 40px 36px; width: 100%; max-width: 400px;
}
.login-logo { text-align: center; margin-bottom: 24px; }
.login-logo img { height: 50px; }
.login-title { font-size: 1.4rem; color: var(--primary-text); text-align: center; margin-bottom: 24px; }
.login-remember {
display: flex; align-items: center; margin-bottom: 14px;
}
.login-remember label {
display: flex; align-items: center; gap: 8px;
font-size: 0.875rem; color: var(--muted); cursor: pointer; user-select: none;
}
.login-remember input[type="checkbox"] {
width: 15px; height: 15px; cursor: pointer; accent-color: var(--primary);
}
.login-footer { margin-top: 18px; text-align: center; font-size: 0.85rem; color: var(--muted); }
.login-legal {
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid var(--border);
display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
gap: 4px 6px;
font-size: 0.72rem;
}
.login-legal a { color: var(--muted); text-decoration: none; }
.login-legal a:hover { color: var(--primary-text); text-decoration: underline; }
.login-legal-sep { color: var(--border); }
/* ── Demo-Sperre ─────────────────────────────── */
.demo-locked-wrap {
max-width: 520px; margin: 80px auto; text-align: center;
padding: 48px 32px; background: var(--card);
border-radius: var(--radius); box-shadow: var(--shadow);
}
.demo-locked-icon { font-size: 3rem; margin-bottom: 16px; }
.demo-locked-title { font-size: 1.25rem; margin-bottom: 14px; color: var(--text); }
.demo-locked-text { color: var(--muted); font-size: 0.95rem; line-height: 1.65; margin-bottom: 28px; }
.demo-locked-actions { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.demo-locked-hint { margin-top: 24px; font-size: 0.8rem; color: var(--muted); }
.btn-lg { font-size: 1rem; padding: 13px 28px; }
.demo-consent-group { margin-top: 16px; }
.demo-consent-label {
display: flex; gap: 10px; align-items: flex-start;
cursor: pointer; font-size: 0.8rem; color: var(--muted); line-height: 1.5;
}
.demo-consent-label input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; accent-color: var(--primary); }
.demo-consent-label a { color: var(--primary-text); text-decoration: underline; }
/* ── Kaufseite ────────────────────────────────── */
.price-box {
background: linear-gradient(135deg, var(--primary), var(--primary-dk));
color: white; border-radius: var(--radius);
padding: 20px 24px; margin-bottom: 24px; text-align: center;
}
.price-amount { font-size: 2.5rem; font-weight: 900; display: block; }
.price-vat { font-size: 0.88rem; opacity: 0.8; display: block; margin-bottom: 8px; }
.price-note { font-size: 0.85rem; opacity: 0.75; }
.method-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.method-card {
border: 2px solid var(--border); border-radius: 8px;
padding: 12px 8px; text-align: center;
cursor: pointer; font-size: 0.85rem; font-weight: 500;
transition: border-color 0.13s, background 0.13s;
}
.method-card input { display: none; }
.method-card.active, .method-card:has(input:checked) {
border-color: var(--primary-text); background: #eef2fa;
}
/* ── Dashboard Layout ─────────────────────────── */
.dash-layout {
display: flex;
min-height: calc(100vh - var(--kopf-hoehe) - 110px);
max-width: 100%;
}
.dash-sidebar {
width: 270px;
flex-shrink: 0;
background: #dde3ec;
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
position: sticky;
top: var(--kopf-hoehe);
height: calc(100vh - var(--kopf-hoehe));
overflow-y: auto;
}
.dash-sidebar-top {
padding: 20px 16px 18px;
border-bottom: 1px solid rgba(0,0,0,0.09);
}
.dash-product-row {
display: flex; flex-wrap: wrap; gap: 6px;
align-items: center; margin-bottom: 14px;
}
.dash-product-row .reward-title-badge { font-size: 0.72rem; padding: 2px 9px; }
.dash-progress { }
.dash-progress-head {
display: flex; justify-content: space-between; align-items: center;
font-size: 0.8rem; font-weight: 600; margin-bottom: 6px;
color: var(--text);
}
.dash-progress small { font-size: 0.75rem; color: var(--muted); margin-top: 5px; display: block; }
.dash-nav { flex: 1; padding: 8px 0; overflow-y: auto; }
/* Bildlaufleiste des linken Menues an das Design anpassen (09.09.2026).
Ohne eigene Regel zeichnet der Browser sein helles Grau — im Dunkelmodus
ein Fremdkoerper. Ueber die Farbvariablen passt sie sich beiden Modi von
selbst an: hell #dde3ec, dunkel #2d3748, jeweils --border. */
.dash-nav {
scrollbar-width: thin; /* Firefox */
scrollbar-color: var(--border) transparent;
}
.dash-nav::-webkit-scrollbar { width: 8px; }
.dash-nav::-webkit-scrollbar-track { background: transparent; }
.dash-nav::-webkit-scrollbar-thumb {
background: var(--border); border-radius: 4px;
}
.dash-nav::-webkit-scrollbar-thumb:hover { background: var(--muted); }
.dash-nav-item {
display: flex; align-items: center; gap: 9px;
width: 100%; padding: 10px 16px;
background: none; border: none; border-left: 3px solid transparent;
cursor: pointer; font-size: 0.85rem; font-weight: 500;
text-align: left; color: var(--text);
transition: background 0.12s, border-color 0.12s;
}
.dash-nav-item:hover { background: rgba(0,0,0,0.06); }
.dash-nav-item.active {
background: var(--card);
border-left-color: var(--accent);
font-weight: 700; color: var(--primary-text);
}
.dash-nav-icon { font-size: 1rem; flex-shrink: 0; }
.dash-nav-label { flex: 1; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dash-nav-badge {
font-size: 0.7rem; background: var(--border);
color: var(--muted); padding: 1px 6px;
border-radius: 10px; flex-shrink: 0; font-weight: 600;
}
.dash-nav-badge.done { background: var(--success-bg); color: var(--success); }
/* Treeview */
.dash-tree-head {
display: flex; align-items: center; gap: 9px;
width: 100%; padding: 10px 16px;
background: none; border: none; border-left: 3px solid transparent;
cursor: pointer; font-size: 0.85rem; font-weight: 500;
text-align: left; color: var(--text);
transition: background 0.12s, border-color 0.12s;
}
.dash-tree-head:hover { background: rgba(0,0,0,0.06); }
.dash-tree-item.open .dash-tree-head {
background: rgba(0,0,0,0.05);
border-left-color: var(--accent);
color: var(--primary-text); font-weight: 700;
}
.dash-tree-chevron {
font-size: 0.6rem; color: var(--muted);
margin-left: auto; flex-shrink: 0;
transition: transform 0.2s;
}
.dash-tree-item.open .dash-tree-chevron { transform: rotate(90deg); }
.dash-tree-children {
display: none;
background: rgba(0,0,0,0.04);
border-bottom: 1px solid rgba(0,0,0,0.06);
}
.dash-tree-item.open .dash-tree-children { display: block; }
.dash-tree-module {
display: flex; align-items: flex-start; gap: 6px;
padding: 7px 10px 7px 16px;
font-size: 0.82rem; color: var(--text);
text-decoration: none; transition: background 0.12s;
border-left: 3px solid transparent;
line-height: 1.4;
}
.dash-tree-module:hover { background: rgba(0,0,0,0.06); text-decoration: none; color: var(--primary-text); }
.dash-tree-module.done { color: var(--muted); }
.dash-tree-module.active { background: rgba(14,154,167,0.12); color: var(--accent); font-weight: 600; border-left-color: var(--accent); }
.dash-tree-module.done.active { color: var(--accent); }
.dash-tree-module.active .dash-tree-status { color: var(--accent); }
.dash-tree-status {
font-size: 0.72rem; flex-shrink: 0; width: 14px;
margin-top: 2px; text-align: center; margin-left: auto;
}
.dash-tree-module.done .dash-tree-status { color: var(--success); }
.dash-tree-module-title { flex: 1; }
.mod-num {
flex-shrink: 0; min-width: 22px;
font-size: 0.72rem; font-weight: 700; color: var(--muted);
font-variant-numeric: tabular-nums; margin-top: 2px;
}
/* Fuss der Kursleiste: Lernerfolgskontrollen, Einsendeaufgaben.
Vorbild ist der „+ Neu"-Knopf im servuno-Portal (.kp-neu) — Ansage des
Users am 14.09.2026: „lek und einsendeaufgaben bitte unten im menue
platzieren, wie unseren neu button bei servuno."
Steht ausserhalb von .dash-nav (die scrollt), deshalb kein sticky noetig. */
.dash-leiste-fuss {
flex: 0 0 auto;
display: flex; flex-direction: column; gap: 8px;
padding: 12px 18px;
border-top: 1px solid var(--border);
}
.dash-leiste-knopf {
display: flex; align-items: center; justify-content: center;
padding: 9px 14px; border-radius: 10px;
background: var(--primary); color: #fff;
font-size: 0.9rem; font-weight: 700; text-align: center;
text-decoration: none;
}
.dash-leiste-knopf:hover,
.dash-leiste-knopf.active {
background: var(--accent); color: #fff; text-decoration: none;
}
/* Rote Blase am Menüpunkt (16.09.2026, fällige Lernerfolgskontrollen).
Weißer Rand, damit sie sich auch auf dem farbigen Knopf absetzt. */
.nav-blase {
display: inline-flex; align-items: center; justify-content: center;
min-width: 20px; height: 20px; padding: 0 6px;
/* Negative Marge oben/unten: Die Blase soll den Knopf nicht um 1px aufziehen
— sonst ist „Lernerfolgskontrollen" höher als seine Nachbarn. */
margin: -2px 0 -2px 8px;
border-radius: 10px; border: 2px solid #fff;
background: var(--danger); color: #fff;
font-size: 0.72rem; font-weight: 700; line-height: 1;
}
/* Dark Mode Treeview */
[data-theme="dark"] .dash-tree-head:hover { background: rgba(255,255,255,0.05); }
[data-theme="dark"] .dash-tree-item.open .dash-tree-head { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .dash-tree-children { background: rgba(255,255,255,0.03); border-bottom-color: var(--border); }
[data-theme="dark"] .dash-tree-module:hover { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .dash-tree-module.active { background: rgba(14,154,167,0.22); }
/* ── Dashboard Willkommen ────────────────────── */
.dash-welcome {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.dash-access-pill {
flex-shrink: 0; font-size: 0.8rem; font-weight: 500;
padding: 6px 14px; border-radius: 20px;
border: 1px solid var(--border); background: var(--success-bg); color: var(--success);
white-space: nowrap; align-self: center;
}
.dash-access-pill.warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn); }
.dash-access-pill.expired { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }
/* ── Badge-Pfad ──────────────────────────────── */
.dash-badge-section { margin: 24px 0; }
.dash-section-label {
font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.07em; color: var(--muted); margin-bottom: 14px;
}
.badge-trail {
display: flex; align-items: center; overflow: hidden; gap: 0;
}
.badge-step {
display: flex; flex-direction: column; align-items: center;
gap: 4px; flex-shrink: 0; min-width: 52px;
}
.badge-step-icon {
width: 34px; height: 34px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 1rem;
background: var(--bg); border: 2px solid var(--border);
}
.badge-step.done .badge-step-icon { background: var(--success-bg); border-color: var(--success); }
.badge-step.next .badge-step-icon { background: #ecfafb; border-color: var(--accent); border-width: 2px; box-shadow: 0 0 0 3px rgba(14,154,167,0.12); }
.badge-step.locked .badge-step-icon { opacity: 0.3; filter: grayscale(1); }
.badge-step-label {
font-size: 0.58rem; text-align: center; color: var(--muted);
max-width: 52px; line-height: 1.2;
}
.badge-step.done .badge-step-label { color: var(--success); font-weight: 600; }
.badge-step.next .badge-step-label { color: var(--accent); font-weight: 600; }
.badge-connector {
flex: 1; height: 2px; background: var(--border); min-width: 6px; flex-shrink: 1;
}
.badge-connector.done { background: var(--success); }
.next-badge-hint {
margin-top: 14px; background: var(--bg); border: 1px solid var(--border);
border-radius: var(--radius); padding: 14px 16px;
}
.nbh-text { font-size: 0.88rem; color: var(--text); margin-bottom: 10px; }
.nbh-bar-row { display: flex; align-items: center; gap: 12px; }
.nbh-bar {
flex: 1; height: 7px; background: var(--border);
border-radius: 4px; overflow: hidden;
}
.nbh-fill { height: 100%; background: var(--accent); border-radius: 4px; transition: width 0.5s; }
.nbh-count { font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
/* ── Dashboard Zufallsfrage ──────────────────── */
.dash-daily-q {
margin: 28px 0;
background: var(--bg);
border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
padding: 12px 16px 18px;
}
.dash-daily-q .q-card {
background: var(--card); border: 1px solid var(--border);
border-radius: var(--radius); padding: 20px 22px;
}
.dash-daily-q .q-text { font-size: 1rem; font-weight: 600; margin-bottom: 14px; line-height: 1.5; }
.daily-q-actions { margin-top: 14px; }
/* ── Begriffslernkarten ─────────────────────────────────── */
.lk-wrap { max-width: 720px; margin: 0 auto; padding: 0 0 40px; }
.lk-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.lk-title { font-size: 1.5rem; font-weight: 700; margin: 0 0 4px; }
.lk-subtitle { color: var(--muted); font-size: .88rem; margin: 0; }
.lk-progress-bar { display: flex; flex-direction: column; gap: 6px; min-width: 180px; }
.lk-progress-bar--desktop { align-items: flex-end; }
.lk-prog-track { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.lk-prog-fill { height: 100%; background: var(--primary); border-radius: 3px; transition: width .3s; }
.lk-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 28px 28px 20px; margin-bottom: 16px; }
.lk-card-tag { display: inline-block; font-size: .75rem; font-weight: 600; color: var(--primary-text); background: var(--hover); border-radius: 20px; padding: 3px 12px; margin-bottom: 14px; }
.lk-question { font-size: 1.1rem; font-weight: 600; line-height: 1.6; margin: 0 0 18px; color: var(--text); }
.lk-textarea { width: 100%; resize: vertical; }
.lk-answer-area { background: var(--hover); border: 1px solid var(--border); border-radius: 10px; padding: 20px 22px; margin-bottom: 16px; }
.lk-answer-head { font-size: .9rem; font-weight: 700; margin: 0 0 12px; color: var(--primary-text); }
.lk-wiki-body { font-size: .93rem; line-height: 1.7; }
.lk-wiki-body h2 { font-size: 1rem; margin: 16px 0 6px; }
.lk-wiki-ref { display: inline-block; margin-top: 12px; font-size: .82rem; color: var(--muted); }
.lk-controls { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 600px) {
.lk-controls { flex-direction: column; }
.lk-controls .btn { width: 100%; }
}
.lk-w-tag { font-size: .75rem; font-weight: 600; color: var(--primary-text); background: var(--hover); border-radius: 20px; display: inline-block; padding: 2px 10px; margin-bottom: 10px; }
.lk-w-question { font-size: .95rem; font-weight: 600; line-height: 1.55; margin: 0 0 12px; }
.lk-w-textarea { width: 100%; resize: none; margin-bottom: 10px; }
.lk-w-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
/* 🔴 Abstand zur letzten Antwortzeile (18.09.2026). Ansage des Users: „die mc
darstellung im dashboard klebt die buttons ohne abstand an die letzte
antwortmöglichkeit." acadivo setzt global `* { margin: 0 }` — die Knopfreihe
sass unmittelbar auf der letzten Antwort auf. `.answers +` grenzt es auf
genau diesen Fall ein: Wo keine Antwortliste steht (offene Frage,
Lernkarte), bleibt es wie bisher. */
.answers + .lk-w-actions { margin-top: 18px; }
/* 🔴 `.btn` hat keinen Rahmen, `.btn-outline` einen von 2px. Neben „Merken"
und „Teilen" stand „Lösung zeigen" deshalb 3–4px flacher da (Ansage des
Users, 16.09.2026). Der unsichtbare Rahmen gleicht die Höhe an — nur in
dieser Reihe, global wäre jeder Knopf im System 4px höher geworden. */
.lk-w-actions .btn:not(.btn-outline):not(.btn-fav-active) { border: 2px solid transparent; }
@media (max-width: 600px) {
.lk-w-actions { flex-direction: column; }
.lk-w-actions .btn { width: 100%; }
}
.lk-w-answer-head { font-size: .82rem; font-weight: 700; color: var(--primary-text); margin-bottom: 8px; }
.lk-w-answer-body { font-size: .87rem; line-height: 1.65; }
.lk-w-answer-body h2 { font-size: .9rem; margin: 10px 0 4px; }
.embed-lernkarten { padding-top: 4px; }
/* ── News & Freitext ─────────────────────────── */
.dash-freetext {
margin-top: 24px; padding: 16px 18px;
background: var(--bg); border-radius: var(--radius);
border-left: 4px solid var(--accent);
font-size: 0.9rem; line-height: 1.65; color: var(--text);
}
.dash-news {
margin-top: 28px;
background: var(--bg);
border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
padding: 0 16px;
}
.dash-news .dash-section-label { padding-top: 12px; }
.news-item {
padding: 14px 0; border-bottom: 1px solid var(--border);
}
.news-item:last-child { border-bottom: none; margin-bottom: 4px; }
.news-item-head {
display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
margin-bottom: 4px;
}
.news-item-title { font-weight: 600; font-size: 0.93rem; color: var(--text); margin-bottom: 2px; }
.news-item-date { font-size: 0.75rem; color: var(--muted); }
.news-item-teaser { font-size: 0.87rem; color: var(--muted); line-height: 1.5; margin-top: 6px; }
.news-item-body {
font-size: 0.87rem; color: var(--text); line-height: 1.6;
margin-top: 10px; display: none;
}
.news-item-body.news-body-open { display: block; }
/* ── Praxisaufgaben ──────────────────────────── */
.aufgabe-box {
border: 2px solid var(--border);
border-radius: var(--radius);
padding: 24px;
background: var(--hover);
}
.aufgabe-header {
display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
.aufgabe-badge {
display: inline-flex; align-items: center; gap: 6px;
font-size: 0.82rem; font-weight: 700; padding: 4px 12px;
border-radius: 20px;
}
.aufgabe-badge-praxis { background: #e8f4fd; color: #1565c0; border: 1px solid #90caf9; }
.aufgabe-badge-master { background: #fff8e1; color: #e65100; border: 1px solid #ffcc02; }
[data-theme="dark"] .aufgabe-badge-praxis { background: #1a2a3a; color: #90caf9; }
[data-theme="dark"] .aufgabe-badge-master { background: #2a1f0a; color: #ffcc02; }
.aufgabe-optional { font-size: 0.75rem; color: var(--muted); }
.aufgabe-task-text {
font-size: 0.95rem; line-height: 1.65;
padding: 16px; background: var(--card);
border-radius: calc(var(--radius) - 2px);
border: 1px solid var(--border);
margin-bottom: 4px;
}
/* ── Quiz-Fragen-Picker (Admin) ─────────────────────────────── */
.qp-row { display:flex;align-items:center;gap:6px;padding:5px 8px;background:var(--card);border:1px solid var(--border);border-radius:5px;font-size:.82rem; }
.qp-text { flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.qp-empty { font-size:.83rem;color:var(--muted);padding:8px 4px; }
.qp-row button { background:none;border:none;cursor:pointer;font-size:.88rem;flex-shrink:0;padding:1px 3px;line-height:1;border-radius:3px; }
.qp-row button:hover { opacity:.65; }
/* ── Praxisaufgaben-Hinweise ───────────────────────────────── */
.aufgabe-hint-wrap { margin-top: 14px; }
.aufgabe-hint-btn { font-size: .83rem; }
.aufgabe-hint {
margin-top: 12px; padding: 16px 18px;
background: var(--warn-bg);
border-left: 4px solid var(--warn);
border-radius: 0 var(--radius) var(--radius) 0;
font-size: .93rem; line-height: 1.65;
}
.aufgabe-hint p:first-child { margin-top: 0; }
.aufgabe-hint p:last-child { margin-bottom: 0; }
[data-theme="dark"] .aufgabe-hint { border-left-color: var(--warn); }
.aufgabe-form .form-control { background: var(--card); }
.aufgabe-draft-hint { font-size:.78rem;color:var(--muted);margin-top:5px;min-height:1.2em }
.aufgabe-draft-ts { color:var(--muted) }
.aufgabe-draft-ok { display:none;color:var(--success);font-weight:600 }
.aufgabe-once-notice {
font-size:.82rem;color:#d97706;
background:rgba(217,119,6,.08);border:1px solid rgba(217,119,6,.22);
border-radius:calc(var(--radius) - 2px);padding:8px 12px;margin:16px 0 12px;
}
[data-theme="dark"] .aufgabe-once-notice { color:#fbbf24;background:rgba(251,191,36,.08);border-color:rgba(251,191,36,.2) }
.aufgabe-actions { display:flex;gap:10px;align-items:center;flex-wrap:wrap }
.aufgabe-actions .btn { flex:1;min-width:0 }
@media (max-width:768px) {
.aufgabe-actions { flex-direction:column;align-items:stretch }
.aufgabe-actions .btn { flex:unset;width:100% }
}
/* ── Admin Praxisaufgaben ────────────────────── */
.sub-date-green { color: var(--success); font-weight: 600; }
.sub-date-yellow { color: var(--warn); font-weight: 600; }
.sub-date-red { color: var(--danger); font-weight: 600; }
.sub-body-preview { font-size: 0.875rem; line-height: 1.5; }
.sub-detail-label {
font-size:.74rem;font-weight:700;color:var(--muted);
text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px;
}
.btn-link {
background: none; border: none; padding: 0;
color: var(--primary-text); cursor: pointer; font-size: 0.8rem;
text-decoration: underline;
}
.btn-link:hover { color: var(--accent); }
/* ── Feedback Button ─────────────────────────── */
.module-feedback-bar {
display: flex; justify-content: flex-end;
margin-top: 8px; padding-top: 12px;
border-top: 1px solid var(--border);
}
.btn-feedback {
background: none; border: none; cursor: pointer;
color: var(--muted); font-size: 0.82rem;
padding: 5px 10px; border-radius: 6px;
transition: color 0.15s, background 0.15s;
}
.btn-feedback:hover { color: var(--primary-text); background: var(--bg); }
/* ── Modal ────────────────────────────────────── */
.modal-backdrop {
display: none; position: fixed; inset: 0;
background: rgba(0,0,0,0.45); z-index: 1000;
align-items: center; justify-content: center;
}
.modal-backdrop.open { display: flex; }
.modal-box {
background: var(--card); border-radius: var(--radius);
box-shadow: 0 8px 40px rgba(0,0,0,0.22);
width: 100%; max-width: 500px; margin: 20px;
}
.modal-header {
display: flex; align-items: center; justify-content: space-between;
padding: 18px 20px 14px; border-bottom: 1px solid var(--border);
}
.modal-header h3 { margin: 0; font-size: 1.05rem; color: var(--text); }
.modal-close {
background: none; border: none; font-size: 1.5rem; line-height: 1;
cursor: pointer; color: var(--muted); padding: 2px 8px; border-radius: 4px;
transition: background 0.13s;
}
.modal-close:hover { background: var(--bg); color: var(--text); }
.modal-body { padding: 20px; }
.modal-footer {
display: flex; justify-content: flex-end; gap: 8px;
padding: 14px 20px; border-top: 1px solid var(--border);
}
/* ── Embed Modul ─────────────────────────────── */
.embed-module { padding: 20px 24px; }
.embed-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 16px; padding-bottom: 12px;
border-bottom: 1px solid var(--border);
}
.embed-back-btn {
background: none; border: 1px solid var(--border); color: var(--primary-text);
padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 0.875rem;
transition: background 0.15s;
}
.embed-back-btn:hover { background: var(--bg); }
.embed-header-right { display: flex; align-items: center; gap: 8px; }
.embed-loading { padding: 60px 20px; text-align: center; color: var(--muted); font-size: 0.95rem; }
/* 🔴 Zwei Namen, ein Aussehen (18.09.2026): `.dash-main` ist der rechte
Bereich des Dashboards — daran hängt der Nachlader in app.js, der Kurse
hineinholt. `.seiten-main` sieht genauso aus, hat diesen Nachlader aber
NICHT. Seiten wie Wiki, Forum und Community benutzen ihn: Der Nachlader
holt beim Aufbau den zuletzt geöffneten Kurs zurück und würde ihren Inhalt
verdrängen. */
.dash-main,
.seiten-main {
flex: 1; background: var(--card);
padding: 32px 36px; min-width: 0;
overflow: auto;
}
/* Formulare statt Listen: dieselbe Breite wie `.container.narrow`, nur ohne
die Zentrierung — im Seitenmenü-Layout beginnt der Inhalt links. */
.seiten-schmal > * { max-width: 560px; }
.dash-panel { display: none; }
.dash-panel.active { display: block; }
/* Startseite */
.dash-welcome { margin-bottom: 28px; }
.dash-welcome-title { font-size: 1.6rem; color: var(--primary-text); margin-bottom: 6px; }
.dash-welcome-sub { color: var(--muted); font-size: 0.92rem; }
.dash-start-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
grid-auto-rows: 1fr; /* alle Reihen gleich hoch (Reihe 2 = Reihe 1) */
gap: 16px; margin-bottom: 28px;
}
.dash-stat-card {
background: var(--bg); border-radius: 10px;
padding: 20px 16px; text-align: center;
border: 1px solid var(--border);
}
.dash-stat-val { font-size: 2.2rem; font-weight: 900; color: var(--primary-text); line-height: 1; }
.dash-stat-lbl { font-size: 0.8rem; color: var(--muted); margin-top: 11px; }
/* Sub-Link/Zusatzzeile innerhalb der Kachel etwas absetzen */
.dash-stat-lbl small { display: inline-block; margin-top: 7px; line-height: 1.4; }
.dash-next-module {
border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
background: var(--bg);
}
.dash-next-label {
font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.5px; color: var(--muted); padding: 10px 16px 6px;
}
.dash-next-link {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 16px; font-weight: 600; font-size: 0.95rem;
color: var(--primary-text); transition: background 0.12s;
}
.dash-next-link:hover { background: var(--bg); text-decoration: none; }
/* Topic Panel */
.dash-topic-header {
display: flex; align-items: flex-start; gap: 14px;
margin-bottom: 24px; padding-bottom: 18px;
border-bottom: 1px solid var(--border);
}
.dash-topic-icon { font-size: 2rem; flex-shrink: 0; margin-top: 2px; }
.dash-topic-title { font-size: 1.3rem; color: var(--primary-text); font-weight: 700; margin-bottom: 4px; }
.dash-topic-desc { color: var(--muted); font-size: 0.88rem; }
.dash-module-card {
border: 1px solid var(--border); border-radius: var(--radius);
overflow: hidden; box-shadow: var(--shadow);
}
/* Dark Mode Sidebar */
[data-theme="dark"] .dash-sidebar { background: #0d1018; }
[data-theme="dark"] .dash-sidebar-close { background: rgba(255,255,255,0.08); color: var(--text); }
[data-theme="dark"] .dash-sidebar-top { border-bottom-color: var(--border); }
[data-theme="dark"] .dash-nav-item:hover { background: rgba(255,255,255,0.05); }
[data-theme="dark"] .dash-nav-item.active { background: var(--card); }
[data-theme="dark"] .dash-main,
[data-theme="dark"] .seiten-main { background: var(--card); }
[data-theme="dark"] .dash-stat-card { background: #252d40; }
.dash-stat-sub { font-size: 0.82rem; color: var(--muted); margin-top: 8px; }
.dash-stat-card-link {
display: block; text-decoration: none; color: inherit;
transition: box-shadow 0.15s, transform 0.15s;
}
.dash-stat-card-link:hover {
text-decoration: none; transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.dash-vorstellung-card {
display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 14px;
}
.dash-vorstellung-title {
font-size: 1.1rem; font-weight: 700; color: var(--text); line-height: 1.3;
}
.dash-vorstellung-dismiss {
margin: 0; padding: 0; background: none; border: none; cursor: pointer;
color: var(--muted); font-size: 0.78rem; text-decoration: none;
transition: color 0.15s;
}
.dash-vorstellung-dismiss:hover { color: var(--primary-text); }
.dash-level-card { text-align: center; }
.lvl-bar-wrap { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.lvl-bar { flex: 1; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.lvl-fill { height: 100%; background: var(--primary); border-radius: 3px; transition: width 0.4s; }
.lvl-pts { font-size: 0.72rem; color: var(--muted); white-space: nowrap; }
.dash-webinar-card {
grid-column: span 2;
background: var(--accent) !important;
border-color: var(--accent-dk) !important;
color: white;
}
.dash-webinar-card .dash-stat-val,
.dash-webinar-card .dash-stat-lbl { color: white !important; }
.dash-webinar-topic-link {
display: block; margin-top: 10px;
font-size: 0.8rem; color: rgba(255,255,255,0.85);
text-decoration: none; line-height: 1.4;
}
.dash-webinar-topic-link:hover { color: white; text-decoration: underline; }
/* FernstudiumCheck-Bewertungskachel (grün) */
.dash-fsc-card {
grid-column: span 2;
background: linear-gradient(135deg, #2fbf6a 0%, #27ac60 100%) !important;
border: none !important;
color: #fff;
}
.dash-fsc-card .dash-stat-val { color: #fff !important; }
.dash-fsc-card .dash-stat-lbl { color: rgba(255,255,255,0.92) !important; }
.dash-fsc-dismiss {
display: block; margin: 10px auto 0;
background: none; border: none;
color: rgba(255,255,255,0.8); font-size: 0.78rem;
text-decoration: underline; cursor: pointer;
}
.dash-fsc-dismiss:hover { color: #fff; }
/* ── Dashboard header + customize link ─ */
.dash-cards-header {
display: flex; justify-content: flex-end; align-items: center;
margin-bottom: 8px;
}
.dash-customize-link {
font-size: 0.78rem; color: var(--muted); text-decoration: none;
display: inline-flex; align-items: center; gap: 3px;
padding: 2px 6px; border-radius: 4px;
transition: color 0.15s, background 0.15s;
}
.dash-customize-link:hover { color: var(--primary-text); background: var(--hover); text-decoration: none; }
/* ── Header status picker ─ */
.status-picker { position: relative; display: flex; align-self: stretch; align-items: center; }
.status-picker-btn {
background: none; border: 1.5px solid var(--border);
border-radius: 8px; cursor: pointer;
padding: 5px 10px; height: 100%;
display: flex; align-items: center; justify-content: center;
transition: border-color 0.13s;
}
.status-picker-btn:hover { border-color: var(--primary-text); }
.status-picker-btn .status-dot { width: 13px; height: 13px; }
.status-picker-dd {
display: none; position: absolute; right: 0; top: calc(100% + 10px);
min-width: 188px; z-index: 300;
}
.status-picker-dd.open { display: block; }
.status-picker-opt {
display: flex; align-items: center; gap: 10px;
width: 100%; padding: 9px 16px;
background: none; border: none; cursor: pointer;
font-size: 0.875rem; color: var(--text); text-align: left;
transition: background 0.1s;
}
.status-picker-opt:hover { background: var(--hover); }
.status-picker-opt.active { font-weight: 600; }
.status-picker-hint {
font-size: 0.72rem; color: var(--muted);
padding: 7px 16px 5px; margin-top: 4px;
border-top: 1px solid var(--border);
}
/* ── Status dots ─ */
.status-dot {
display: inline-block; width: 10px; height: 10px;
border-radius: 50%; flex-shrink: 0; position: relative;
vertical-align: middle;
}
.status-dot-lg { width: 14px; height: 14px; }
.status-online { background: #6bb700; }
.status-away { background: #f5a623; }
.status-dnd { background: #c4314b; }
.status-dnd::after {
content: ''; position: absolute;
left: 50%; top: 50%; transform: translate(-50%, -50%);
width: 60%; height: 2px; background: white; border-radius: 1px;
}
.status-offline { background: transparent; border: 2px solid #8a8886; box-sizing: border-box; }
.status-inactive { background: #d4a0a8; }
/* Status selector on profile page */
.status-selector { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.status-option {
display: flex; align-items: center; gap: 7px;
padding: 7px 14px; border: 1.5px solid var(--border);
border-radius: 20px; cursor: pointer; font-size: 0.85rem;
transition: border-color 0.15s, background 0.15s;
user-select: none;
}
.status-option input[type="radio"] { display: none; }
.status-option:has(input:checked),
.status-option-active {
border-color: var(--primary-text);
background: var(--hover);
font-weight: 500;
}
.status-option:hover { border-color: var(--primary-text); }
/* ── Profile cert card ─ */
.profile-cert-card {
display: flex; align-items: center; gap: 16px;
background: linear-gradient(135deg, #f0f4ff 0%, #fafbff 100%);
border-color: #c7d4f7;
}
.profile-cert-icon { font-size: 2.5rem; flex-shrink: 0; }
[data-theme="dark"] .profile-cert-card { background: linear-gradient(135deg, #1e2a45 0%, #1a2035 100%); border-color: #2d3f6b; }
/* ── Profile page layout ─ */
/* 🔴 Seit der Umstellung auf volle Breite (14.09.2026) ein Raster statt einer
Spalte: Untereinander gestapelte Karten ergaben auf einem breiten Schirm
meterlange Zeilen mit einer Handvoll Schaltern darin — genau die „großen
Freiräume", die der User beanstandet hat.
auto-fit füllt die vorhandene Breite selbst auf: zwei Karten nebeneinander
auf dem Laptop, vier auf dem großen Schirm, eine auf dem Telefon. Keine
fest gezählten Spalten, die bei jeder neuen Karte nachgepflegt werden
müssten. */
.karten-raster {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: 20px;
/* 🔴 stretch und nicht start: Bei `start` behält jede Karte ihre eigene
Höhe, und unter der kürzesten einer Zeile klafft bis zur nächsten Zeile
ein Loch — genau der „Freiraum", der beanstandet war. Gestreckt schliessen
die Zeilen bündig ab. So sah es vor der Umstellung auch aus: Die alte
.profile-row war eine Flexzeile mit align-items: stretch. */
align-items: stretch;
}
/* ── Mein Profil: zwei Spalten (16.09.2026) ──────────────────────────────
Ansage des Users: „bild und konto ewig hoch … untereinander in eine
spalte? daneben persönlich angaben und dann die einstellungen für das
dashboard?" Das Raster oben streckte Profilbild und Konto auf die Höhe der
Angaben (816 px statt 435). Jetzt stapelt jede Spalte ihre Karten in
eigener Höhe — die Lücke, vor der der Kommentar oben warnt, entsteht so
nicht, weil keine Karte mehr neben einer fremden Zeile steht. */
.profile-layout {
display: grid;
grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
gap: 20px;
/* Beide Spalten gleich hoch, und die LETZTE Karte jeder Spalte wächst bis
unten — so schließt „Meine Zertifikate" bündig mit den Dashboard-
Einstellungen ab (Wunsch des Users, 16.09.2026). Gestreckt wird nur die
letzte, die übrigen behalten ihre Höhe. */
align-items: stretch;
margin-bottom: 20px;
}
.profil-spalte { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.profil-spalte > .card:last-child { flex-grow: 1; }
@media (max-width: 900px) {
.profil-spalte > .card:last-child { flex-grow: 0; }
}
/* Zertifikate je Kurs in der Profilkarte. Oben ausgerichtet, weil die
Karte jetzt mitwächst — mittig säße der Text sonst in einer Lücke. */
.profil-links .profile-cert-card { align-items: flex-start; }
.profil-zert-liste { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.profil-zert-liste li { display: flex; flex-direction: column; gap: 2px; }
.profil-zert-kurs { font-weight: 600; font-size: 0.9rem; }
.profil-zert-text { font-size: 0.82rem; color: var(--muted); }
p.profil-zert-text { margin: 0; }
@media (max-width: 900px) {
.profile-layout { grid-template-columns: minmax(0, 1fr); }
}
/* Profilbild: Vorschau neben den Knöpfen, darunter die Auswahl. */
.profil-bild .avatar-kopf { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.profil-bild .avatar-preview-wrap { margin-bottom: 0; flex-shrink: 0; }
.profil-bild .avatar-preview-img,
.profil-bild .avatar-preview-initial { width: 72px; height: 72px; font-size: 1.8rem; }
.profil-bild .avatar-upload-row { padding-top: 0; border-top: 0; gap: 6px 12px; }
.profil-bild .avatar-grid { margin-bottom: 0; gap: 8px; }
/* In der schmalen Spalte Name und E-Mail untereinander — nebeneinander
blieben je 160 px, die Adresse wäre abgeschnitten. */
.profil-links .profile-fields-grid { grid-template-columns: minmax(0, 1fr); }
/* Linke Spalte etwas dichter: Das Konto kam mit den Standardabständen auf
446 px — gewünscht war die Hälfte der alten 816. */
.profil-links > .card { padding: 22px; }
.profil-links .form-group { margin-bottom: 12px; }
.profil-links .access-info { margin-bottom: 12px; padding: 10px 14px; }
.profil-links .email-change-details { margin-top: 8px !important; margin-bottom: 0; }
/* Aufklapper im Konto („Passwort ändern", „E-Mail-Adresse ändern").
🔴 `--primary-text`, nicht `--primary`: im Dunkelmodus sonst Dunkelblau auf
Dunkelblau (siehe Reiter-Befund vom 15.09.2026). */
.profil-aufklapper { margin-bottom: 14px; }
.profil-aufklapper > summary { font-size: 0.83rem; color: var(--primary-text); cursor: pointer; }
.profil-aufklapper-inhalt { margin-top: 12px; }
/* Rechte Spalte ist breit: Felder und Schalter nutzen die Breite, statt
eine lange Einzelspalte zu bilden. */
/* auto-fit, nicht auto-fill: Bei vier Feldern blieben sonst rechts leere
Spuren stehen, statt dass die Felder die Breite teilen. */
.profil-rechts .profile-fields-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.profil-rechts .card-toggle-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
column-gap: 32px;
}
.profil-rechts .card-toggle-row:last-child { border-bottom: 1px solid var(--border); }
/* ── Profile fields grid ─ */
.profile-fields-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; align-items: end;
}
@media (max-width: 560px) { .profile-fields-grid { grid-template-columns: 1fr; } }
/* ── Profile card toggle grid ─ */
.card-toggle-grid { display: flex; flex-direction: column; gap: 2px; }
.card-toggle-row {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 0; border-bottom: 1px solid var(--border); cursor: pointer;
}
.card-toggle-row:last-child { border-bottom: none; }
.card-toggle-label { font-size: 0.9rem; color: var(--text); user-select: none; display: flex; flex-direction: column; gap: 2px; }
.card-toggle-hint { font-size: 0.76rem; color: var(--muted); font-weight: 400; }
/* Toggle switch */
.toggle-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
position: absolute; inset: 0; background: var(--border);
border-radius: 12px; cursor: pointer; transition: background 0.2s;
}
.toggle-slider::before {
content: ''; position: absolute;
width: 18px; height: 18px; left: 3px; bottom: 3px;
background: white; border-radius: 50%; transition: transform 0.2s;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle-switch input:checked + .toggle-slider { background: var(--primary); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(18px); }
[data-theme="dark"] .toggle-slider { background: #3a4155; }
[data-theme="dark"] .toggle-slider::before { background: #e2e8f0; }
[data-theme="dark"] .toggle-switch input:checked + .toggle-slider { background: var(--primary); }
/* ── Dashboard (alte Karten — nicht mehr genutzt) ─ */
.progress-card {
background: var(--card); border-radius: var(--radius);
border: 1px solid var(--border); padding: 20px 24px;
box-shadow: var(--shadow); margin-bottom: 28px;
}
.progress-card-head {
display: flex; justify-content: space-between;
font-size: 0.9rem; font-weight: 600; margin-bottom: 10px;
}
.pct-label { color: var(--primary-text); font-size: 1rem; font-weight: 800; }
.progress-track { background: var(--border); border-radius: 10px; height: 8px; overflow: hidden; margin-bottom: 8px; }
.progress-fill { background: linear-gradient(90deg, var(--primary), var(--accent)); height: 100%; border-radius: 10px; transition: width 0.5s ease; }
.topic-card {
background: var(--card); border-radius: var(--radius);
border: 1px solid var(--border); box-shadow: var(--shadow);
margin-bottom: 18px; overflow: hidden;
}
.topic-head {
background: var(--primary); color: white;
padding: 14px 20px; display: flex;
align-items: center; justify-content: space-between;
cursor: pointer; gap: 12px;
}
.topic-head-left { display: flex; align-items: center; gap: 12px; }
.topic-icon { font-size: 1.2rem; flex-shrink: 0; }
.topic-title { font-size: 0.97rem; font-weight: 700; }
.topic-desc { font-size: 0.8rem; opacity: 0.8; margin-top: 2px; }
.topic-progress { font-size: 0.85rem; background: rgba(255,255,255,0.2); padding: 3px 10px; border-radius: 20px; flex-shrink: 0; }
.topic-card.collapsed .topic-body { display: none; }
.topic-body { padding: 0; }
.module-list { display: flex; flex-direction: column; }
.module-row {
display: flex; align-items: center; gap: 12px;
padding: 13px 20px; border-bottom: 1px solid var(--border);
color: var(--text); transition: background 0.12s;
}
.module-row:last-child { border-bottom: none; }
.module-row:hover { background: var(--bg); text-decoration: none; }
.module-row.module-done .module-title { color: var(--muted); }
.module-status { width: 24px; flex-shrink: 0; text-align: center; }
.module-status .check { color: var(--success); font-weight: 700; font-size: 1.1rem; }
.module-status .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border); display: inline-block; }
.module-title { flex: 1; font-size: 0.92rem; }
.module-arrow { color: var(--muted); font-size: 0.9rem; }
.special-links { display: flex; flex-wrap: wrap; gap: 10px; padding: 18px 20px; }
.cert-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* ── Modul-Seite ──────────────────────────────── */
.breadcrumb {
display: flex; gap: 6px; align-items: center;
font-size: 0.85rem; color: var(--muted); margin-bottom: 20px;
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--primary-text); }
.breadcrumb span { color: var(--border); }
.breadcrumb span:last-child { color: var(--text); }
.module-header { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; flex-wrap: wrap; }
.module-h1 { font-size: 1.5rem; color: var(--primary-text); }
.module-hf-tag { font-size: .72rem; font-weight: 600; color: var(--muted); background: var(--hover); border: 1px solid var(--border); border-radius: 4px; padding: 3px 9px; white-space: nowrap; flex-shrink: 0; letter-spacing: .3px; }
.module-section { margin-bottom: 32px; }
.section-title { font-size: 1rem; font-weight: 700; color: var(--primary-text); margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.82rem; }
.video-wrap {
position: relative; aspect-ratio: 16 / 9;
overflow: hidden; border-radius: var(--radius);
background: #000; box-shadow: var(--shadow);
max-width: 816px; margin: 0 auto;
}
.video-wrap iframe, .video-wrap video {
position: absolute; top: 0; left: 0;
width: 100%; height: 100%; border: none;
}
.module-text.prose { line-height: 1.75; }
.module-placeholder { color: var(--muted); font-style: italic; padding: 32px 0; text-align: center; }
.module-placeholder p { margin: 0 0 8px; }
.module-placeholder-hint { font-size: 0.78rem; color: var(--muted); border-top: 1px solid var(--border); padding-top: 10px; margin-top: 16px !important; font-style: normal; }
.prose p { margin-bottom: 1em; }
.prose h2 { color: var(--primary-text); margin: 1.5em 0 0.5em; }
.prose h3 { color: var(--primary-text); margin: 1.2em 0 0.4em; }
.prose ul,
.prose ol { padding-left: 1.5em; margin-bottom: 1em; }
.prose li { margin-bottom: 0.3em; }
.prose strong { font-weight: 700; }
.quiz-done-banner {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
background: var(--success-bg); color: var(--success);
border-radius: 8px; padding: 14px 18px;
font-weight: 600; margin-bottom: 16px;
}
@media (max-width: 768px) {
.quiz-done-banner { flex-direction: column; align-items: center; gap: 10px; }
/* 🔴 Zeilen, KEIN Flex (16.09.2026): Als Flex-Kasten wurden „Geschafft.",
der Satz, „Übungsfragen:" und die Punktzahl zu Spalten nebeneinander,
und die
` bringt vom Browser einen eigenen Rahmen mit. Hier dient es
nur als abschaltbare Hülle (siehe admin/navigation.php), nicht als Kasten. */
.nav-frei { border: 0; min-width: 0; }
/* Lückentext: Die Felder stehen mitten im Satz, deshalb braucht die Zeile
Luft. `.q-text` hat `white-space: pre-wrap` — die Felder selbst bringen
ihren Abstand aus `.kurs-luecke` mit. */
.q-text-luecke { line-height: 2.4; }
.quiz-actions {
display: flex; gap: 10px; flex-wrap: wrap; justify-content: space-between; align-items: center;
}
.quiz-actions-mid {
display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.res-card {
background: var(--card); border-radius: var(--radius);
padding: 40px 32px; text-align: center;
border: 1px solid var(--border); box-shadow: var(--shadow); margin-bottom: 20px;
}
.res-pct { font-size: 4rem; font-weight: 900; color: var(--primary-text); line-height: 1; margin-bottom: 4px; }
.res-sub { color: var(--muted); margin-bottom: 16px; }
.res-verdict {
display: inline-block; padding: 8px 26px;
border-radius: 30px; font-size: 1rem; font-weight: 700; margin-bottom: 8px;
}
.res-verdict.pass { background: var(--success-bg); color: var(--success); }
.res-verdict.fail { background: var(--danger-bg); color: var(--danger); }
.res-note { font-size: 0.85rem; color: var(--muted); margin-bottom: 24px; }
.res-stats { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; margin-bottom: 24px; }
.res-stat-val { font-size: 2rem; font-weight: 800; }
.res-stat-lbl { font-size: 0.82rem; color: var(--muted); margin-top: 2px; }
.res-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.model-box {
background: linear-gradient(135deg,#eef2fa,#e8f4fd);
border: 1.5px solid var(--primary-text); border-radius: 8px;
padding: 16px 18px; margin-bottom: 16px;
}
.model-box-lbl { font-size: 0.73rem; font-weight: 700; color: var(--primary-text); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 8px; }
.model-box-text { font-size: 0.95rem; line-height: 1.7; white-space: pre-wrap; }
.fg-textarea {
width: 100%; min-height: 130px; padding: 12px 14px;
border: 2px solid var(--border); border-radius: 8px;
font-family: inherit; font-size: 0.93rem; line-height: 1.6;
color: var(--text); resize: vertical;
}
.fg-textarea:focus { outline: none; border-color: var(--primary-text); }
.fg-textarea:disabled { background: #f8f9fa; color: var(--muted); }
.fg-user-lbl { font-size: 0.82rem; font-weight: 600; color: var(--muted); margin-bottom: 7px; }
.fg-done-card { background: var(--card); border-radius: var(--radius); border: 1px solid var(--border); padding: 40px 32px; text-align: center; }
.fg-done-icon { font-size: 3.5rem; margin-bottom: 10px; }
.fg-done-title { font-size: 1.6rem; font-weight: 800; color: var(--primary-text); margin-bottom: 6px; }
.fg-done-sub { color: var(--muted); }
.review-section, .review-hd { margin-top: 32px; }
.review-hd { font-size: 1.1rem; font-weight: 700; color: var(--primary-text); margin-bottom: 14px; }
.rev-q { background: var(--card); border-radius: var(--radius); border: 1px solid var(--border); padding: 16px 20px; margin-bottom: 12px; }
.rev-q-hd { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.rev-num { width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: white; font-size: 0.78rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rev-num.ok { background: var(--success); }
.rev-num.bad { background: var(--danger); }
.rev-q-text { font-size: 0.93rem; font-weight: 600; line-height: 1.4; white-space: pre-wrap; }
.rev-ans-list { display: flex; flex-direction: column; gap: 5px; }
.rev-ans { padding: 7px 12px; border-radius: 6px; font-size: 0.86rem; line-height: 1.4; border-left: 3px solid transparent; }
.rev-ans.ok { background: var(--success-bg); border-left-color: var(--success); }
.rev-ans.bad { background: var(--danger-bg); border-left-color: var(--danger); }
.rev-ans.miss { background: #f0fdf4; border-left-color: #9ecca9; }
.rev-ans.skip { background: #f8f9fa; border-left-color: var(--border); }
.q-explanation {
margin-top: 14px;
padding: 12px 16px;
background: #f0f7ff;
border-left: 3px solid var(--primary-text);
border-radius: 0 var(--radius) var(--radius) 0;
font-size: 0.9rem;
line-height: 1.55;
color: var(--text);
}
.rev-explanation {
margin-top: 8px;
padding: 9px 12px;
background: #f0f7ff;
border-left: 3px solid var(--primary-text);
border-radius: 0 6px 6px 0;
font-size: 0.85rem;
line-height: 1.45;
color: var(--text);
}
.q-expl-label {
display: block;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.6px;
color: var(--primary-text);
margin-bottom: 4px;
}
.q-id { font-size: 0.63rem; font-family: monospace; color: var(--muted); opacity: 0.55; user-select: all; flex-shrink: 0; }
.q-card-header .q-id { margin-left: auto; }
.rev-q-hd .q-id { margin-left: 8px; }
.fg-rev-q { background: var(--card); border-radius: var(--radius); border: 1px solid var(--border); padding: 18px 22px; margin-bottom: 14px; }
.fg-rev-q-text { font-size: 0.95rem; font-weight: 700; color: var(--primary-text); margin-bottom: 12px; white-space: pre-wrap; }
.fg-rev-lbl { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.fg-rev-lbl.m { color: var(--primary-text); }
.fg-rev-lbl.u { color: var(--muted); margin-top: 10px; }
.fg-rev-model { background: #eef2fa; border-left: 3px solid var(--primary-text); padding: 10px 14px; border-radius: 0 6px 6px 0; font-size: 0.88rem; line-height: 1.65; white-space: pre-wrap; }
.fg-rev-user { background: #fafafa; border-left: 3px solid var(--border); padding: 10px 14px; border-radius: 0 6px 6px 0; font-size: 0.88rem; line-height: 1.65; color: var(--muted); white-space: pre-wrap; font-style: italic; }
/* ── Loader ───────────────────────────────────── */
.loader { text-align: center; padding: 60px 20px; color: var(--muted); }
.loader-spin {
width: 40px; height: 40px;
border: 4px solid var(--border); border-top-color: var(--primary-text);
border-radius: 50%; animation: spin 0.8s linear infinite;
margin: 0 auto 14px;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ── Webinar ─────────────────────────────────── */
.webinar-page { display: flex; flex-direction: column; gap: 20px; padding-bottom: 40px; }
.webinar-hero {
background: linear-gradient(135deg, var(--primary), #2a5298);
border-radius: var(--radius); padding: 36px 32px; color: white;
}
.webinar-title { font-size: 1.8rem; font-weight: 700; margin-bottom: 6px; }
.webinar-subtitle { font-size: 1rem; opacity: 0.85; }
.webinar-card {
background: var(--card); border-radius: var(--radius);
box-shadow: var(--shadow); padding: 28px 32px;
}
.webinar-section-title {
font-size: 1.1rem; font-weight: 700; color: var(--primary-text);
margin-bottom: 16px;
}
.webinar-steps {
padding-left: 1.4em; display: flex; flex-direction: column; gap: 18px;
}
.webinar-steps li { line-height: 1.7; }
.webinar-hint {
margin-top: 20px; padding: 14px 18px;
background: var(--warn-bg); border-left: 3px solid var(--warn);
border-radius: 6px; font-size: 0.92rem; line-height: 1.6;
}
.webinar-room-card { border-top: 3px solid #2d8cff; }
.webinar-room-card p { line-height: 1.7; }
/* Webinar curriculum */
.webinar-curriculum { display: flex; flex-direction: column; gap: 0; }
.wc-block {
padding: 14px 0;
border-top: 1px solid var(--border);
}
.wc-block:last-child { border-bottom: 1px solid var(--border); }
.wc-webinar-label {
font-weight: 600; font-size: 0.95rem;
color: var(--text); margin-bottom: 4px;
}
.wc-hf {
font-size: 0.82rem; color: var(--primary-text);
font-weight: 500; margin-bottom: 6px;
}
.wc-modules {
margin: 0; padding-left: 1.2em;
display: flex; flex-direction: column; gap: 2px;
list-style: disc;
}
.wc-modules li { font-size: 0.88rem; color: var(--muted); line-height: 1.5; }
.wc-module-link { color: inherit; text-decoration: none; }
.wc-module-link:hover { text-decoration: underline; color: var(--primary-text); }
.webinar-room-card a:not(.btn) { color: var(--accent); text-decoration: underline; }
.btn-lg { font-size: 1.05rem; padding: 14px 36px; }
/* Feedback-Modal Sternbewertung */
.fb-star-rating { display: flex; gap: 4px; margin-bottom: 4px; }
.fb-star { font-size: 1.9rem; color: var(--border); cursor: pointer; transition: color .1s; line-height: 1; user-select: none; }
.fb-star.fb-star-on { color: #f59e0b; }
.fb-star.fb-star-hover { color: #fbbf24; }
#fb-star-label { font-size: .82rem; color: var(--muted); min-height: 1.2em; }
/* Modul-Rating */
.mod-rating-wrap { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border); text-align: left; }
.mod-rating-prompt { font-size: .93rem; font-weight: 600; margin-bottom: 12px; color: var(--text); }
.mod-rating-done { font-size: .9rem; color: var(--muted); margin-bottom: 8px; }
.mod-rating-stars { margin-bottom: 10px; }
.mod-rating-comment { max-width: 420px; margin-top: 4px; }
/* Wiki-Feedback */
.wiki-fb-wrap { margin-top: 32px; padding: 18px 22px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); }
.wiki-fb-prompt { font-size: .93rem; font-weight: 600; margin-bottom: 12px; color: var(--text); }
.wiki-fb-done { font-size: .9rem; color: var(--muted); margin-bottom: 8px; }
.wiki-fb-btn { min-width: 90px; }
.wiki-fb-active { background: var(--primary) !important; color: #fff !important; border-color: var(--primary-text) !important; }
[data-theme=”dark”] .webinar-card { background: #1a1f2e; }
/* Webinar-Feedback */
.wfb-qi-row { display: flex; flex-direction: column; gap: 18px; margin: 18px 0 6px; }
.wfb-qi-item { display: flex; flex-direction: column; gap: 8px; }
.wfb-qi-label { font-size: 0.93rem; font-weight: 600; color: var(--text); }
.wfb-qi-desc { font-size: 0.80rem; color: var(--muted); margin-top: -4px; }
.star-group { display:flex; flex-direction:row-reverse; justify-content:flex-start; gap:0; margin-bottom:10px; }
.star-opt input { display:none; }
.star-opt span { font-size:2rem; color:var(--border); cursor:pointer; transition:color .1s; line-height:1.2; padding:0 2px; user-select:none; }
.star-opt:has(input:checked) span,
.star-opt:has(input:checked) ~ .star-opt span { color:#f59e0b; }
.star-group:hover .star-opt span { color:var(--border); }
.star-group:hover .star-opt:hover span,
.star-group:hover .star-opt:hover ~ .star-opt span { color:#f59e0b; }
.wfb-scale-hint { display: flex; justify-content: space-between; font-size: 0.74rem; color: var(--muted); padding: 0 2px; }
.wfb-date-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 4px; }
.wfb-date-row .form-group { margin: 0; }
/* ── Wiki ─────────────────────────────────────── */
.wiki-search-wrap { margin-bottom: 16px; }
.wiki-tag-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.wiki-tag-btn {
background: var(--card); border: 1px solid var(--border);
border-radius: 20px; padding: 4px 14px; font-size: .82rem;
cursor: pointer; color: var(--muted); transition: all .13s;
}
.wiki-tag-btn:hover { border-color: var(--primary-text); color: var(--primary-text); }
.wiki-tag-btn.active { background: var(--primary); border-color: var(--primary-text); color: #fff; }
.wiki-alpha-filter {
display: flex; flex-wrap: wrap; gap: 3px;
padding: 10px 0 20px; border-top: 1px solid var(--border); margin-top: 4px;
}
.wiki-alpha-btn {
background: none; border: 1px solid transparent;
border-radius: 5px; padding: 2px 7px; font-size: .78rem; font-weight: 600;
cursor: pointer; color: var(--muted); transition: all .12s; min-width: 26px; text-align: center;
}
.wiki-alpha-btn:hover { border-color: var(--border); color: var(--text); }
.wiki-alpha-btn.active { background: var(--hover); border-color: var(--border); color: var(--primary-text); }
.wiki-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.wiki-card {
background: var(--card); border-radius: var(--radius);
border: 1px solid var(--border); padding: 20px;
display: flex; flex-direction: column; height: 100%; box-shadow: var(--shadow);
transition: transform 0.13s, box-shadow 0.13s;
}
.wiki-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.1); text-decoration: none; }
.wiki-icon { font-size: 1.8rem; display: block; margin-bottom: 10px; }
.wiki-card-title { font-size: 1rem; font-weight: 700; color: var(--primary-text); margin-bottom: 6px; }
.wiki-card-desc {
font-size: 0.85rem; color: var(--muted); line-height: 1.5;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.wiki-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; padding-top: 10px; }
.wiki-tag-chip {
display: inline-block; background: var(--bg); border: 1px solid var(--border);
border-radius: 12px; padding: 2px 9px; font-size: .74rem;
color: var(--muted); text-decoration: none; white-space: nowrap;
}
a.wiki-tag-chip:hover { border-color: var(--primary-text); color: var(--primary-text); }
[data-theme="dark"] .wiki-tag-btn { background: #1a1f2e; }
[data-theme="dark"] .wiki-tag-chip { background: #0f1117; }
.wiki-article h1 { font-size: 1.6rem; color: var(--primary-text); margin-bottom: 6px; }
/* Kopfzeile des Artikels im Overlay (18.09.2026). Die Überschrift steht im
Kopf des Overlays, hier stehen nur noch Werkzeuge und Rubriken.
🔴 `gap` an der Zeile statt Abstände an den Knöpfen: Wer später einen
vierten Knopf einhängt, braucht nichts nachzuziehen. */
.wiki-art-kopf {
display: flex; flex-wrap: wrap; align-items: center;
justify-content: space-between; gap: 10px;
margin-bottom: 18px;
}
.wiki-art-werkzeuge { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wiki-art-kopf .wiki-card-tags { margin: 0; }
.wiki-fb-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Wiki Merken-Button (Karten-Übersicht) */
.wiki-fav-btn {
position: absolute; bottom: 10px; right: 10px;
background: none; border: none; padding: 4px 5px;
font-size: 1.1rem; line-height: 1; cursor: pointer;
color: var(--muted); opacity: 0.45; z-index: 2;
transition: opacity .15s, color .15s, transform .15s;
}
.wiki-card-wrap:hover .wiki-fav-btn { opacity: 0.85; }
.wiki-fav-btn.fav-active { color: #f59e0b; opacity: 1; }
.wiki-fav-btn:hover { transform: scale(1.2); opacity: 1; }
/* Wiki Merken-Button (Artikel-Seite) */
.wiki-art-fav-btn {
display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
padding: 6px 14px; border-radius: var(--radius);
border: 1px solid var(--border); background: var(--card);
color: var(--muted); cursor: pointer; font-size: .88rem;
transition: all .15s;
}
.wiki-art-fav-btn.fav-active { border-color: #f59e0b; color: #f59e0b; }
.wiki-art-fav-btn:hover:not(.fav-active) { border-color: var(--primary-text); color: var(--primary-text); }
[data-theme="dark"] .wiki-art-fav-btn.fav-active { background: rgba(245,158,11,0.1); }
/* Artikel-Anzahl Badge */
.wiki-count-badge {
display: inline-block; font-size: .72rem; font-weight: 600;
background: var(--hover); color: var(--muted);
border: 1px solid var(--border); border-radius: 20px;
padding: 1px 9px; vertical-align: middle; margin-left: 8px;
}
/* Admin-Buttons auf Wiki-Karten */
.wiki-card-wrap { position: relative; }
.wiki-admin-btns {
position: absolute; top: 8px; right: 8px;
display: flex; gap: 4px;
opacity: 0; transition: opacity .15s; z-index: 2;
}
.wiki-card-wrap:hover .wiki-admin-btns { opacity: 1; }
.wiki-admin-btn {
background: var(--card); border: 1px solid var(--border);
border-radius: 5px; padding: 3px 8px; font-size: .78rem;
cursor: pointer; box-shadow: var(--shadow); line-height: 1.4;
}
.wiki-admin-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary-text); }
.wiki-admin-del:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
/* Wiki Modal */
.wm-backdrop {
display: none; position: fixed; inset: 0;
background: rgba(0,0,0,.45); z-index: 1000;
align-items: flex-start; justify-content: center;
padding: 32px 16px; overflow-y: auto;
}
.wm-backdrop.open { display: flex; }
.wm-modal {
background: var(--card); border-radius: var(--radius);
box-shadow: 0 10px 48px rgba(0,0,0,.22);
width: 100%; max-width: 780px;
padding: 28px; position: relative; flex-shrink: 0;
}
.wm-title { font-size: 1.05rem; font-weight: 700; color: var(--primary-text); margin: 0 0 20px; }
.wm-close {
position: absolute; top: 14px; right: 16px;
background: none; border: none; font-size: 1.1rem;
cursor: pointer; color: var(--muted); line-height: 1; padding: 4px;
}
.wm-close:hover { color: var(--danger); }
[data-theme="dark"] .wm-modal { background: var(--card); }
.prose-page .prose { margin: 20px 0 32px; }
/* ── Zertifikat ───────────────────────────────── */
.cert-page .cert-actions { display: flex; gap: 12px; margin-bottom: 28px; }
.certificate-frame {
background: #fff; border-radius: 16px;
box-shadow: 0 8px 40px rgba(30,60,110,0.18);
padding: 20px; max-width: 720px; margin: 0 auto;
border: 2px solid var(--border);
}
.cert-inner {
border: 3px solid var(--primary-text); border-radius: 12px;
padding: 48px 56px; text-align: center;
background: linear-gradient(160deg, #fafcff 0%, #f5f8ff 100%);
}
.cert-logo img { height: 56px; margin-bottom: 28px; }
.cert-title { font-size: 2.2rem; color: var(--primary-text); font-weight: 900; letter-spacing: 0.5px; margin-bottom: 6px; }
.cert-subtitle { font-size: 1rem; color: var(--muted); margin-bottom: 36px; }
.cert-name { font-size: 2rem; font-weight: 800; color: var(--accent); margin-bottom: 16px; font-style: italic; }
.cert-text { font-size: 1.05rem; color: var(--text); line-height: 1.7; margin-bottom: 32px; }
.cert-meta { font-size: 0.9rem; color: var(--muted); margin-bottom: 32px; }
.cert-seal {
display: flex; justify-content: center;
}
.seal-ring {
width: 90px; height: 90px; border-radius: 50%;
border: 4px solid var(--primary-text); display: flex;
align-items: center; justify-content: center;
font-size: 0.6rem; font-weight: 800; color: var(--primary-text);
text-transform: uppercase; letter-spacing: 1px;
text-align: center; padding: 10px;
}
/* ── Admin ────────────────────────────────────── */
.stats-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr));
gap: 16px; margin-bottom: 28px;
}
.stat-card {
background: var(--card); border-radius: var(--radius);
border: 1px solid var(--border); padding: 20px 24px;
text-align: center; box-shadow: var(--shadow);
}
.stat-val { font-size: 2.4rem; font-weight: 900; color: var(--primary-text); }
.stat-lbl { font-size: 0.82rem; color: var(--muted); margin-top: 4px; }
.admin-actions { display: flex; gap: 12px; }
.search-form { display: flex; gap: 10px; margin-bottom: 20px; }
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); }
.data-table { width: 100%; border-collapse: collapse; background: var(--card); }
.data-table th {
padding: 11px 16px; background: var(--primary); color: white;
font-size: 0.82rem; font-weight: 600; text-align: left;
}
.data-table td { padding: 11px 16px; border-bottom: 1px solid var(--border); font-size: 0.9rem; vertical-align: top; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: #f8fafc; }
.actions-cell { white-space: nowrap; display: flex; gap: 6px; flex-wrap: wrap; }
.empty-row { text-align: center; color: var(--muted); padding: 28px; }
.muted { color: var(--muted); font-size: 0.85rem; }
.quick-actions { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); display: flex; gap: 10px; }
/* ── Tag-System ───────────────────────────────── */
.product-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.product-badge {
background: linear-gradient(135deg, var(--primary), var(--primary-dk));
color: white; padding: 4px 14px; border-radius: 20px;
font-size: 0.8rem; font-weight: 700; letter-spacing: 0.3px;
}
.tag-pill {
display: inline-block; background: #eef2fa;
color: var(--primary-text); border: 1px solid #cdd8ed;
border-radius: 12px; padding: 2px 9px;
font-size: 0.75rem; font-weight: 600; margin-right: 4px;
}
.tag-checkboxes { display: flex; flex-direction: column; gap: 8px; }
.tag-check-label {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px; border: 2px solid var(--border);
border-radius: 8px; cursor: pointer;
font-size: 0.9rem; font-weight: 500;
transition: border-color 0.13s, background 0.13s;
}
.tag-check-label:has(input:checked) {
border-color: var(--primary-text); background: #eef2fa;
}
.tag-check-label input { width: 16px; height: 16px; cursor: pointer; }
[data-theme="dark"] .tag-check-label:has(input:checked) { background: #1e3a5f; }
.form-hint { font-size: 0.8rem; color: var(--muted); margin-top: 6px; display: block; }
/* ── Admin Dashboard Grid ─────────────────────── */
.dash-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
align-items: start;
}
.dash-section {
background: var(--card); border-radius: var(--radius);
border: 1px solid var(--border); box-shadow: var(--shadow);
overflow: hidden;
}
.dash-wide { grid-column: 1 / -1; }
.dash-section-head {
display: flex; justify-content: space-between; align-items: center;
padding: 14px 18px; border-bottom: 1px solid var(--border);
background: #f8fafc;
}
.dash-section-head h2 { font-size: 0.95rem; font-weight: 700; color: var(--primary-text); margin: 0; }
/* 🔴 Der Rumpf eines Abschnitts (17.09.2026). Ansage des Users: „buttons und
textfelder kleben links und rechts wieder direkt ohne abstand an ihrem
container rand."
`.dash-section` selbst bekommt BEWUSST keinen Innenabstand: Die Kopfzeile
ist eine Leiste ueber die volle Breite, und Tabellen sollen buendig am Rand
sitzen wie in jeder Liste. Inhalte, die keine Tabelle sind, gehoeren
deshalb in diesen Rumpf. Gemessen wurde INNEN, nicht am Fensterrand. */
.dash-section-body { padding: 16px 18px; }
.dash-section-body > :last-child { margin-bottom: 0; }
/* Activity Feed */
.activity-list { list-style: none; padding: 0; margin: 0; }
.activity-item {
display: flex; align-items: center; gap: 10px;
padding: 10px 16px; border-bottom: 1px solid var(--border);
font-size: 0.87rem;
}
.activity-item:last-child { border-bottom: none; }
.activity-dot {
width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.activity-dot.pass { background: var(--success); }
.activity-dot.fail { background: var(--danger); }
.activity-dot.neutral { background: var(--muted); }
.activity-body { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.activity-user { font-weight: 600; }
.activity-module { color: var(--muted); }
.activity-time { color: var(--muted); font-size: 0.78rem; white-space: nowrap; flex-shrink: 0; }
/* Mini Progress Bar */
.mini-progress-wrap { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.mini-progress-track {
flex: 1; height: 6px; background: var(--border);
border-radius: 4px; overflow: hidden;
}
.mini-progress-fill {
height: 100%; border-radius: 4px;
background: linear-gradient(90deg, var(--primary), var(--accent));
transition: width 0.4s ease;
}
.mini-progress-fill.complete { background: var(--success); }
.mini-pct { font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
/* Score Badge */
.score-badge {
display: inline-block; padding: 2px 8px; border-radius: 12px;
font-size: 0.78rem; font-weight: 700;
}
.score-badge.pass { background: var(--success-bg); color: var(--success); }
.score-badge.fail { background: var(--danger-bg); color: var(--danger); }
/* ── Reward / Badge System ────────────────────── */
.reward-title-badge {
display: inline-flex; align-items: center; gap: 5px;
background: linear-gradient(135deg, var(--accent), var(--accent-dk));
color: white; padding: 3px 12px; border-radius: 20px;
font-size: 0.8rem; font-weight: 700; white-space: nowrap;
}
.reward-strip {
display: flex; flex-wrap: wrap; gap: 8px;
margin-bottom: 24px;
}
.reward-chip {
display: flex; align-items: center; gap: 6px;
padding: 6px 13px; border-radius: 20px;
font-size: 0.82rem; font-weight: 600;
border: 2px solid var(--border);
transition: transform 0.15s;
}
.reward-chip.earned {
background: linear-gradient(135deg, #fff8f3, #fff);
border-color: var(--accent); color: var(--accent-dk);
}
.reward-chip.locked {
background: var(--bg); color: var(--muted);
opacity: 0.55; filter: grayscale(0.6);
}
.reward-chip-icon { font-size: 1rem; }
.reward-chip-label { white-space: nowrap; }
/* Badge collection auf Profilseite */
.badge-collection {
display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 12px;
}
.badge-item {
display: flex; flex-direction: column; align-items: center; text-align: center;
padding: 18px 12px; border-radius: 12px;
border: 2px solid var(--border); gap: 6px;
transition: transform 0.15s, box-shadow 0.15s;
}
.badge-item.earned {
border-color: var(--accent);
background: linear-gradient(160deg, #fff8f3, #fff);
box-shadow: 0 2px 12px rgba(14,154,167,0.12);
}
.badge-item.locked {
opacity: 0.45; filter: grayscale(0.7);
}
.badge-item.earned:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(14,154,167,0.18); }
.badge-item-icon { font-size: 2rem; }
.badge-item-title { font-size: 0.82rem; font-weight: 700; color: var(--text); line-height: 1.3; }
.badge-item-desc { font-size: 0.73rem; color: var(--muted); line-height: 1.4; }
.badge-item-check { font-size: 0.72rem; font-weight: 700; color: var(--accent); margin-top: 2px; }
/* Toast Notification */
.reward-toast {
position: fixed; bottom: 24px; right: 24px; z-index: 9999;
background: var(--accent); color: white;
padding: 14px 20px; border-radius: 12px;
box-shadow: 0 6px 24px rgba(0,0,0,0.2);
display: flex; align-items: center; gap: 12px;
font-size: 0.92rem; font-weight: 600;
animation: toastIn 0.3s ease, toastOut 0.4s ease 4s forwards;
max-width: 320px;
}
.reward-toast-icon { font-size: 1.6rem; flex-shrink: 0; }
.reward-toast-text { line-height: 1.4; }
.reward-toast-title { font-size: 1rem; display: block; }
.reward-toast-sub { font-size: 0.8rem; opacity: 0.85; display: block; }
@keyframes toastIn { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
@keyframes toastOut { from { opacity:1; } to { opacity:0; pointer-events:none; } }
/* ── Skip Link ────────────────────────────────── */
.skip-link {
position: absolute; top: -100px; left: 16px;
background: var(--primary); color: white;
padding: 8px 16px; border-radius: 0 0 8px 8px;
font-size: 0.9rem; font-weight: 600; z-index: 9999;
transition: top 0.15s; text-decoration: none;
}
.skip-link:focus { top: 0; outline: 3px solid var(--accent); }
/* ── Zugangsinfoblock (Profil) ────────────────── */
.access-info {
display: flex; align-items: flex-start; gap: 12px;
padding: 14px 16px; border-radius: 10px;
border: 2px solid var(--border); margin-bottom: 18px;
}
.access-info-dot {
width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; margin-top: 4px;
}
.access-ok { border-color: var(--success); background: var(--success-bg); }
.access-ok .access-info-dot { background: var(--success); }
.access-warn { border-color: var(--warn); background: var(--warn-bg); }
.access-warn .access-info-dot { background: var(--warn); }
.access-expired { border-color: var(--danger); background: var(--danger-bg); }
.access-expired .access-info-dot { background: var(--danger); }
.access-none { border-color: var(--border); background: var(--bg); }
.access-none .access-info-dot { background: var(--muted); }
.access-info-body { display: flex; flex-direction: column; gap: 2px; }
.access-info-status { font-weight: 700; font-size: 0.92rem; }
.access-info-date { font-size: 0.85rem; color: var(--muted); }
.access-info-remaining { font-size: 0.85rem; }
.access-info-remaining strong { color: var(--text); }
.access-warn .access-info-remaining strong { color: var(--warn); }
/* ── Toggle Button ────────────────────────────── */
.toggle-btn {
width: 52px; height: 28px; border-radius: 14px;
background: var(--border); border: none; cursor: pointer;
position: relative; transition: background 0.2s;
flex-shrink: 0; padding: 0;
}
.toggle-btn.on { background: var(--primary); }
.toggle-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.toggle-knob {
position: absolute; top: 3px; left: 3px;
width: 22px; height: 22px; border-radius: 50%;
background: white; transition: transform 0.2s;
box-shadow: 0 1px 4px rgba(0,0,0,0.25); display: block;
}
.toggle-btn.on .toggle-knob { transform: translateX(24px); }
/* ── Settings Page ────────────────────────────── */
.settings-section-title {
font-size: 1rem; font-weight: 700; color: var(--primary-text);
margin-bottom: 16px;
}
.settings-row {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 0; border-bottom: 1px solid var(--border); gap: 16px;
}
.settings-row-info { flex: 1; }
.settings-row-label { font-weight: 600; font-size: 0.95rem; }
.settings-row-desc { font-size: 0.85rem; color: var(--muted); margin-top: 2px; }
/* ── Avatar Picker ────────────────────────────── */
.avatar-preview-wrap {
display: flex; justify-content: center; margin-bottom: 20px;
}
.avatar-preview-img {
width: 100px; height: 100px; border-radius: 50%; object-fit: cover;
border: 3px solid var(--primary-text); box-shadow: var(--shadow);
}
.avatar-preview-initial {
width: 100px; height: 100px; border-radius: 50%;
background: var(--primary); color: white;
font-size: 2.5rem; font-weight: 800;
display: flex; align-items: center; justify-content: center;
border: 3px solid var(--primary-text);
}
.avatar-grid {
display: grid; grid-template-columns: repeat(5, 1fr);
gap: 10px; margin-bottom: 20px;
}
.avatar-option {
border: 3px solid transparent; border-radius: 50%;
padding: 0; cursor: pointer; background: none;
transition: border-color 0.15s, transform 0.15s;
aspect-ratio: 1 / 1; overflow: hidden;
}
.avatar-option img {
width: 100%; height: 100%; border-radius: 50%;
object-fit: cover; display: block;
}
.avatar-option:hover { border-color: var(--primary-text); transform: scale(1.06); }
.avatar-option:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.avatar-option.selected { border-color: var(--accent); }
.avatar-upload-row {
padding-top: 16px; border-top: 1px solid var(--border);
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.avatar-upload-hint { font-size: 0.8rem; color: var(--muted); }
/* header avatar image */
.user-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
/* ── Footer ───────────────────────────────────── */
.site-footer { background: var(--primary); color: rgba(255,255,255,0.7); padding: 16px 20px 12px; }
.footer-inner { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; flex-wrap: wrap; gap: 8px; }
.footer-inner a { color: rgba(255,255,255,0.7); }
.footer-inner a:hover { color: white; }
.footer-nav a { margin-left: 16px; }
.footer-nav a:first-child { margin-left: 0; }
.footer-credit { max-width: 1200px; margin: 8px auto 0; font-size: 0.75rem; color: rgba(255,255,255,0.45); padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.1); text-align: center; }
.footer-credit a { color: rgba(255,255,255,0.45); }
.footer-credit a:hover { color: rgba(255,255,255,0.75); }
.footer-version { opacity: 0.55; font-size: 0.78rem; margin-left: 8px; }
/* ── Nach-oben-Button ─────────────────────────── */
#back-to-top {
position: fixed; bottom: 28px; right: 28px; z-index: 9999;
width: 44px; height: 44px; border-radius: 8px;
background: var(--primary); color: white;
border: none; cursor: pointer; font-size: 1.4rem; line-height: 44px;
text-align: center;
box-shadow: 0 4px 16px rgba(0,0,0,0.25);
opacity: 0; pointer-events: none;
transition: opacity 0.25s, transform 0.25s, background 0.15s;
}
#back-to-top.visible { opacity: 1; pointer-events: auto; }
#back-to-top:hover { background: var(--primary-dk); transform: translateY(-3px); }
/* ── Vorstellung Step ─────────────────────────────────────── */
.vorstellung-step { max-width: 540px; }
.vorstellung-header { text-align: center; margin-bottom: 28px; padding: 24px 16px 0; }
.vorstellung-icon { font-size: 2.6rem; margin-bottom: 10px; }
.vorstellung-title { font-size: 1.25rem; font-weight: 700; margin: 0 0 8px; }
.vorstellung-desc { color: var(--muted); font-size: 0.875rem; line-height: 1.5; margin: 0; }
.vorstellung-desc a { color: var(--accent); }
.vorstellung-form { padding: 0 4px; }
.v-optional {
display: inline-block; font-size: 0.72rem; font-weight: 500;
color: var(--muted); background: var(--bg);
border: 1px solid var(--border); border-radius: 4px;
padding: 1px 6px; vertical-align: middle; margin-left: 6px;
}
.vorstellung-actions { margin-top: 22px; }
/* ── Achievements / Erfolge ───────────────────── */
.dash-achievement-section {
margin-top: 28px;
background: var(--bg);
border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
padding: 12px 16px 18px;
}
.dash-ach-score {
display: flex; align-items: center; gap: 18px;
background: var(--card);
border: 1px solid var(--border); border-left: 3px solid var(--primary-text);
border-radius: var(--radius); padding: 12px 16px;
margin-bottom: 16px; flex-wrap: wrap;
}
.dash-ach-score-stat { display: flex; align-items: baseline; gap: 6px; }
.dash-ach-score-val { font-size: 1.5rem; font-weight: 700; color: var(--primary-text); line-height: 1; }
.dash-ach-score-lbl { font-size: 0.82rem; color: var(--muted); }
.dash-ach-score-divider { width: 1px; height: 24px; background: var(--border); flex-shrink: 0; }
.dash-ach-score-link {
margin-left: auto; font-size: 0.82rem; color: var(--primary-text);
text-decoration: none; white-space: nowrap;
}
.dash-ach-score-link:hover { text-decoration: underline; }
.achievement-grid {
display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px;
justify-content: center;
}
.achievement-item {
display: flex; flex-direction: column; align-items: center;
gap: 5px; padding: 14px 12px 10px;
border-radius: 12px; text-align: center; cursor: default;
min-width: 74px; flex: 0 0 auto;
border: 1.5px solid transparent;
transition: transform 0.15s, border-color 0.15s;
}
.achievement-item.locked {
opacity: 0.35; filter: grayscale(1);
}
.achievement-item.earned {
background: var(--hover); border-color: var(--border);
}
.achievement-item.earned:hover { transform: translateY(-2px); }
.achievement-icon { font-size: 2rem; line-height: 1; }
.achievement-title {
font-size: 0.67rem; font-weight: 600; color: var(--text);
line-height: 1.3; max-width: 80px;
}
.achievement-progress {
font-size: 0.65rem; color: var(--primary-text); font-weight: 700;
}
.achievement-check {
font-size: 0.65rem; color: var(--success); font-weight: 700;
}
.achievement-toast { border-left: 3px solid var(--accent); }
/* Gamification deaktiviert — Hinweis */
.dash-gamification-off {
background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
padding: 16px 20px; font-size: 0.9rem; color: var(--muted);
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.dash-gamification-off a { color: var(--primary-text); font-weight: 600; }
.dash-gam-dismiss-btn {
margin-left: auto; flex-shrink: 0;
background: none; border: none; cursor: pointer;
font-size: 0.78rem; color: var(--muted); padding: 4px 0;
text-decoration: underline;
}
.dash-gam-dismiss-btn:hover { color: var(--text); }
/* Gamification sub-toggle disabled state */
.toggle-row-disabled { opacity: 0.4; pointer-events: none; }
/* ── Highscore / Leaderboard ──────────────────── */
.leaderboard-section {
background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
padding: 20px 24px 12px; margin-bottom: 28px;
}
.leaderboard-header {
display: flex; align-items: center; gap: 12px;
margin-bottom: 14px; flex-wrap: wrap;
}
.leaderboard-title { font-size: 1.1rem; font-weight: 700; margin: 0; }
.leaderboard-my-rank { margin-left: auto; font-size: 0.85rem; color: var(--muted); }
.leaderboard-list { display: flex; flex-direction: column; gap: 2px; }
.leaderboard-row {
display: flex; align-items: center; gap: 12px;
padding: 8px 10px; border-radius: 8px;
transition: background 0.12s;
}
.leaderboard-row:hover { background: var(--hover); }
.leaderboard-row-me { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.leaderboard-row-me:hover { background: color-mix(in srgb, var(--primary) 14%, transparent); }
.lb-rank { width: 32px; text-align: center; flex-shrink: 0; }
.lb-medal { font-size: 1.3rem; line-height: 1; }
.lb-num { font-size: 0.9rem; font-weight: 700; color: var(--muted); }
.lb-avatar-wrap { flex-shrink: 0; }
.lb-avatar {
width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
}
.lb-initial {
display: flex; align-items: center; justify-content: center;
background: var(--primary); color: #fff; font-size: 0.9rem; font-weight: 700;
}
.lb-name { flex: 1; font-size: 0.9rem; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-points { flex-shrink: 0; font-size: 0.95rem; font-weight: 700; color: var(--primary-text); }
.lb-pts-lbl { font-size: 0.75rem; font-weight: 400; color: var(--muted); }
.lb-show-all {
display: block; text-align: center;
margin-top: 10px; padding: 8px;
font-size: 0.85rem; color: var(--primary-text);
border-top: 1px solid var(--border);
text-decoration: none;
}
.lb-show-all:hover { text-decoration: underline; }
@media (max-width: 480px) {
.leaderboard-section { padding: 16px 14px 10px; }
}
/* ── Dashboard Mobile Hamburger ───────────────── */
.dash-nav-backdrop {
display: none; position: fixed; inset: 0;
background: rgba(0,0,0,0.45); z-index: 399;
}
.dash-nav-backdrop.open { display: block; }
.dash-mobile-bar { display: none; }
.dash-sidebar-close { display: none; }
/* ── Responsive ───────────────────────────────── */
@media (max-width: 900px) {
/* Sidebar wird zum Drawer */
.dash-sidebar {
position: fixed; top: 0; left: 0;
height: 100dvh;
width: 290px; max-width: 88vw;
z-index: 400; overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
transform: translateX(-100%);
transition: transform 0.26s cubic-bezier(.4,0,.2,1);
box-shadow: 4px 0 28px rgba(0,0,0,0.22);
border-right: none;
}
.dash-sidebar.dash-sidebar-open { transform: translateX(0); }
/* Schließen-Button oben rechts im Drawer */
.dash-sidebar-close {
display: flex; align-items: center; justify-content: center;
position: absolute; top: 10px; right: 10px;
width: 32px; height: 32px; border-radius: 50%;
background: rgba(0,0,0,0.08); border: none;
font-size: 1rem; cursor: pointer; color: var(--text);
z-index: 1;
}
.dash-sidebar-close:hover { background: rgba(0,0,0,0.14); }
.dash-mobile-bar {
display: flex; align-items: center;
position: sticky; top: var(--kopf-hoehe); z-index: 150;
background: transparent;
padding: 4px 16px 4px;
}
.dash-ham-btn {
display: inline-flex; align-items: center; gap: 8px;
background: var(--primary); border: none;
border-radius: 8px; padding: 5px 12px;
font-size: 0.88rem; font-weight: 600; cursor: pointer;
color: #fff; transition: background 0.12s;
}
.dash-ham-btn:hover { background: var(--accent); }
[data-theme="dark"] .dash-ham-btn { background: #fff; color: #1a1f2e; }
[data-theme="dark"] .dash-ham-btn:hover { background: #e8eaf0; }
.dash-main, .seiten-main { padding: 16px; }
}
/* Dark/language controls: desktop only in header-right; mobile inside hamburger menu */
.nav-mobile-controls { display: none; }
@media (max-width: 768px) {
.main-nav {
display: none; position: absolute; top: 60px; left: 0; right: 0;
background: #fff; padding: 12px; flex-direction: column;
border-bottom: 2px solid var(--accent); box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.main-nav.open { display: flex; }
.hamburger { display: flex; }
.user-name { display: none; }
.header-right .lang-form { display: none; }
.nav-mobile-controls {
display: flex; gap: 8px; flex-wrap: wrap;
padding-top: 10px; margin-top: 6px;
border-top: 1px solid var(--border);
}
.nav-mobile-controls .lang-btn { flex: 1; justify-content: center; }
.logo-link { width: auto; flex-shrink: 1; min-width: 0; }
.logo { height: 36px; max-width: 180px; object-fit: contain; object-position: left; }
.header-inner { padding-right: 12px; }
.header-right { gap: 8px; padding-left: 8px; }
.method-grid { grid-template-columns: 1fr; }
.stats-grid { grid-template-columns: 1fr 1fr; }
.dash-grid { grid-template-columns: 1fr; }
.dash-wide { grid-column: 1; }
.module-nav { flex-direction: column; gap: 10px; }
.module-nav .btn { width: 100%; justify-content: center; }
.wizard-content { padding: 20px 16px 4px; }
.wizard-nav { padding: 14px 16px 20px; }
.wizard-progress {
padding: 16px 12px 0;
justify-content: center;
gap: 10px;
overflow: visible;
}
.wizard-progress .wiz-label { display: none; }
.wizard-progress .wiz-connector { display: none; }
.wizard-progress .wiz-step { min-width: 36px; }
.wizard-progress .wiz-dot { width: 36px; height: 36px; font-size: 0.85rem; }
.cert-inner { padding: 28px 20px; }
.cert-title { font-size: 1.6rem; }
.cert-name { font-size: 1.5rem; }
.quiz-actions { flex-direction: column; gap: 8px; }
.quiz-actions .btn, .quiz-actions button { width: 100%; }
.quiz-actions #btn-next { order: 1; }
.quiz-actions #btn-fav { order: 2; }
.quiz-actions #btn-reveal { order: 3; }
.quiz-actions #btn-abort { order: 4; margin-right: 0; }
.daily-q-actions .quiz-actions-mid { flex-direction: column; width: 100%; }
.daily-q-actions .quiz-actions-mid .btn { width: 100%; }
}
@media (max-width: 480px) {
.container { padding: 16px 12px 40px; }
.q-card { padding: 18px 14px; }
.res-card { padding: 28px 16px; }
.login-card { padding: 28px 20px; }
.stats-grid { grid-template-columns: 1fr; }
.logo { height: 28px; max-width: 130px; }
.header-right { gap: 6px; padding-left: 6px; }
}
/* Badge-Trail: Desktop / Mobile */
.badge-trail-mobile { display: none; }
@media (max-width: 768px) {
.badge-trail-desktop { display: none; }
.badge-trail-mobile { display: flex; justify-content: center; padding: 8px 0 4px; }
}
/* ── Admin Sub-Navigation ──────────────────────────────────── */
.admin-subnav {
background: var(--card);
border-bottom: 1px solid var(--border);
display: flex;
flex-wrap: wrap;
gap: 2px;
padding: 8px 16px;
margin-bottom: 24px;
overflow: visible;
/* Mitscrollen wie der Kopf (Ansage des Users, 14.09.2026). Sie klebt
UNTER der Kopfleiste, deshalb `top: var(--kopf-hoehe)`.
🔴 z-index knapp unter dem Kopf (200): Beim Rollen schiebt sich die Zeile
sonst ueber das Benutzermenue, das von oben herunterklappt.
⚠️ `overflow: visible` muss bleiben — daran haengen die Klappmenues
„Editor" und „Nutzer". Ein `overflow:hidden` auf einem klebenden Element
schnitte sie ab. */
position: sticky;
top: var(--kopf-hoehe);
z-index: 190;
}
/* Ohne Hintergrund scheint beim Rollen der Seiteninhalt durch. In der
Glasoptik ist `--card` halbdurchsichtig, deshalb hier ausdruecklich
deckend. */
[data-glass="1"] .admin-subnav { background: var(--flyout); }
.admin-nav-item {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 12px;
border-radius: var(--radius);
font-size: 0.83rem;
font-weight: 500;
color: var(--muted);
text-decoration: none;
white-space: nowrap;
transition: background 0.15s, color 0.15s;
}
/* 🔴 `text-decoration: none` an `.admin-nav-item` reicht NICHT: Die globale
Regel `a:hover { text-decoration: underline }` (ganz oben im Blatt) ist
spezifischer als eine Klasse und holt den Strich beim Überfahren zurück.
Ein Menüpunkt mit Unterstreichung sieht aus wie Fliesstext. */
.admin-nav-item:hover { background: var(--hover); color: var(--text); text-decoration: none; }
.admin-nav-item.active { background: var(--primary); color: #fff; }
.admin-nav-item.has-badge { color: var(--danger); }
.admin-nav-badge {
background: var(--danger);
color: #fff;
border-radius: 10px;
padding: 0 6px;
font-size: 0.7rem;
line-height: 1.6;
}
.admin-nav-item.active .admin-nav-badge { background: rgba(255,255,255,0.35); }
/* -- Admin Nav Dropdowns -- */
.admin-nav-group { position: relative; }
.admin-nav-group-label { cursor: pointer; user-select: none; }
.admin-nav-group-label::after { content: ' \25be'; font-size: .68rem; opacity: .65; }
.admin-nav-dropdown {
display: none;
position: absolute;
top: 100%;
left: 0;
min-width: 175px;
z-index: 300;
}
.admin-nav-group:hover .admin-nav-dropdown,
.admin-nav-group.open .admin-nav-dropdown { display: block; }
.admin-nav-dropdown .admin-nav-item { display: flex; border-radius: 6px; }
/* ── Admin Charts ──────────────────────────────────────────── */
.admin-charts-row {
display: flex;
gap: 16px;
margin-bottom: 24px;
align-items: stretch;
}
.admin-chart-card {
flex: 1;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 16px 18px;
box-shadow: var(--shadow);
}
.admin-chart-title {
font-size: 0.85rem;
font-weight: 600;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.04em;
margin: 0 0 12px;
}
.admin-chart-wrap {
position: relative;
height: 160px;
display: flex;
align-items: center;
justify-content: center;
}
.admin-chart-legend {
margin-top: 10px;
font-size: 0.78rem;
color: var(--muted);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
}
.acl-dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
@media (max-width: 768px) {
.admin-charts-row { flex-direction: column; }
.admin-subnav { padding: 6px 12px; }
}
/* ── Admin KPI header ────────────────────────────── */
.admin-kpi-val { font-size: 1.9rem; font-weight: 700; color: var(--text); line-height: 1.1; }
.admin-kpi-lbl { font-size: 0.75rem; color: var(--muted); margin-top: 2px; }
/* ── Payment chart filter buttons ─────────────────────────── */
.pay-chart-filters { display: flex; gap: 3px; }
.pay-cf-btn {
padding: 3px 10px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: transparent;
color: var(--muted);
font-size: 0.78rem;
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pay-cf-btn:hover { background: var(--hover); color: var(--text); }
.pay-cf-btn.active { background: var(--primary); border-color: var(--primary-text); color: #fff; }
/* -- Gamification stats bar (profile page) ------------------------------ */
.gam-stats-bar {
display: flex;
align-items: center;
gap: 20px;
background: var(--hover);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 14px 20px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.gam-stat { display: flex; align-items: baseline; gap: 6px; }
.gam-stat-val { font-size: 1.6rem; font-weight: 700; color: var(--primary-text); line-height: 1; }
.gam-stat-lbl { font-size: 0.82rem; color: var(--muted); }
.gam-stat-divider { width: 1px; height: 28px; background: var(--border); flex-shrink: 0; }
.gam-stat-link {
margin-left: auto;
font-size: 0.82rem;
color: var(--primary-text);
text-decoration: none;
white-space: nowrap;
}
.gam-stat-link:hover { text-decoration: underline; }
/* ── Demo-Zugang ─────────────────────────────────────────────────── */
.demo-banner {
background: #fef3c7;
border-bottom: 1px solid #fcd34d;
color: #92400e;
padding: 10px 20px;
font-size: 0.875rem;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
text-align: center;
}
[data-theme="dark"] .demo-banner {
background: #3b2a00;
border-color: #78500a;
color: #fcd34d;
}
.demo-banner-link {
font-weight: 600;
color: #92400e;
text-decoration: underline;
white-space: nowrap;
}
[data-theme="dark"] .demo-banner-link { color: #fcd34d; }
.demo-banner-link:hover { opacity: 0.8; }
.demo-profile-notice {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
background: #fef3c7;
border: 1px solid #fcd34d;
border-radius: var(--radius);
padding: 12px 18px;
font-size: 0.875rem;
color: #92400e;
margin-bottom: 20px;
flex-wrap: wrap;
}
[data-theme="dark"] .demo-profile-notice {
background: #3b2a00;
border-color: #78500a;
color: #fcd34d;
}
.demo-profile-notice-link {
font-weight: 600;
color: #92400e;
text-decoration: underline;
white-space: nowrap;
}
[data-theme="dark"] .demo-profile-notice-link { color: #fcd34d; }
.demo-feature-lock {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 28px 20px;
text-align: center;
}
.demo-lock-icon { font-size: 2rem; line-height: 1; }
.demo-lock-text { margin: 0; color: var(--muted); font-size: 0.9rem; }
/* Kostprobe auf dem Demo-Dashboard: echte Inhalte statt Schloss */
.demo-teaser-hint {
margin: 0 0 12px;
color: var(--muted);
font-size: 0.85rem;
}
.demo-teaser-upgrade {
margin-top: 18px;
padding: 20px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--hover);
text-align: center;
}
.demo-teaser-upgrade p {
margin: 0 0 14px;
color: var(--text);
font-size: 0.92rem;
line-height: 1.5;
}
/* ── Rollen-Kennzeichnung im Chat ────────────────────────────────
Die Gründer-Auszeichnung ist am 11.09.2026 entfallen; geblieben
ist ein neutraler Chip für Admin, Moderator und Dozent. */
.msg-rolle-chip {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 0.68rem;
font-weight: 700;
color: #fff;
background: var(--accent);
border: 1px solid var(--accent-dk);
border-radius: 20px;
padding: 1px 7px;
vertical-align: middle;
white-space: nowrap;
}
[data-theme="dark"] .msg-rolle-chip {
background: #0b7c86;
border-color: #0e9aa7;
}
.msg-rolle-label {
font-size: 0.72rem;
font-weight: 600;
color: var(--accent);
}
[data-theme="dark"] .msg-rolle-label { color: #fb923c; }
.user-card-hidden-hint {
font-size: 0.75rem;
margin-left: 4px;
opacity: 0.6;
vertical-align: middle;
cursor: default;
}
/* ── Barrierefreiheit ─────────────────────────────────────────────────────── */
/* Große Schrift: skaliert alle rem-Werte.
🔴 Seit dem 17.09.2026 multipliziert dieser Schalter die Vorgabe des
Mandanten, statt sie zu ersetzen. Vorher stand hier `112%` — das hat
`--fs` überschrieben: Ein Mandant mit „Sehr groß" wurde durch den
Barrierefreiheitsschalter KLEINER. */
html[data-font="large"] { font-size: calc(16px * var(--fs) * 1.12); }
/* Hoher Kontrast – Hellmodus */
html[data-contrast="high"] {
--text: #000000;
--muted: #3a3a3a;
--border: #5a5a5a;
--card: #ffffff;
--bg: #f5f5f5;
--hover: #e0e0e0;
--flyout: #ffffff;
--flyout-rand: #5a5a5a;
}
html[data-contrast="high"] .site-header { border-bottom-width: 4px; }
html[data-contrast="high"] .card,
html[data-contrast="high"] .q-card,
html[data-contrast="high"] .res-card { border: 2px solid var(--border); }
html[data-contrast="high"] .btn { border-width: 2px; font-weight: 600; }
html[data-contrast="high"] .nav-link { font-weight: 600; }
html[data-contrast="high"] a { text-decoration: underline; }
html[data-contrast="high"] a.btn,
html[data-contrast="high"] a.nav-link,
html[data-contrast="high"] a.logo-link { text-decoration: none; }
html[data-contrast="high"] .form-control { border-width: 2px; }
html[data-contrast="high"] .ans { border-width: 2px; }
/* Hoher Kontrast – Dunkelmodus */
html[data-contrast="high"][data-theme="dark"] {
--text: #ffffff;
--muted: #d0d0d0;
--border: #9a9a9a;
--card: #0a0a0a;
--bg: #000000;
--hover: #2a2a2a;
--flyout: #141414;
--flyout-rand: #9a9a9a;
}
html[data-contrast="high"][data-theme="dark"] .site-header { background: #000; }
html[data-contrast="high"][data-theme="dark"] .main-nav { background: #000; }
/* Tastaturnavigation – sichtbare Fokus-Ringe für alle interaktiven Elemente */
:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 3px;
border-radius: 4px;
}
.form-control:focus-visible,
.fg-textarea:focus-visible {
outline: 3px solid var(--primary);
outline-offset: 0;
border-color: var(--primary-text);
}
.toggle-btn:focus-visible { outline-offset: 4px; }
/* Badge "Immer aktiv" in Einstellungen */
.settings-row-badge {
font-size: 0.75rem;
font-weight: 600;
padding: 3px 10px;
border-radius: 20px;
background: var(--success-bg);
color: var(--success);
white-space: nowrap;
flex-shrink: 0;
}
/* Row-Action-Dropdown (Nutzerliste) */
.row-drop-wrap { position: relative; display: inline-block; }
.row-drop-menu {
display: none; position: fixed;
background: #fff; border: 1px solid var(--border);
border-radius: var(--radius); box-shadow: var(--shadow);
min-width: 170px; overflow: hidden; z-index: 400;
}
[data-theme="dark"] .row-drop-menu { background: #1a1f2e; }
.row-drop-menu.open { display: block; }
.row-drop-menu a,
.row-drop-menu button.row-drop-item {
display: block; width: 100%; text-align: left;
padding: 9px 16px; font-size: 0.88rem; color: var(--text);
background: none; border: none; cursor: pointer;
transition: background 0.12s; white-space: nowrap;
}
.row-drop-menu a:hover,
.row-drop-menu button.row-drop-item:hover { background: var(--hover); text-decoration: none; }
.row-drop-menu .drop-danger { color: var(--danger); }
.row-drop-menu hr { border: none; border-top: 1px solid var(--border); margin: 4px 0; }
[data-theme="dark"] .row-drop-menu a:hover,
[data-theme="dark"] .row-drop-menu button.row-drop-item:hover { background: #252d40; }
/* ═══════════════════════════════════════════════════════════════
GLOBAL SEARCH
═══════════════════════════════════════════════════════════════ */
/* ── Desktop search bar inside main-nav ── */
.header-search {
position: relative;
display: flex;
align-items: center;
margin-left: 8px;
}
.header-search-form {
display: flex;
align-items: center;
background: var(--hover);
border: 1px solid var(--border);
border-radius: 20px;
overflow: visible;
transition: border-color 0.15s, box-shadow 0.15s;
}
.header-search-form:focus-within {
border-color: var(--primary-text);
box-shadow: 0 0 0 3px rgba(30,60,110,.12);
}
.header-search-input {
background: transparent;
border: none;
outline: none;
padding: 5px 4px 5px 14px;
font-size: 0.85rem;
color: var(--text);
width: 160px;
transition: width 0.2s;
}
.header-search-input:focus { width: 220px; }
.header-search-input::placeholder { color: var(--muted); }
.header-search-btn {
background: transparent;
border: none;
cursor: pointer;
padding: 5px 10px 5px 4px;
color: var(--muted);
display: flex;
align-items: center;
transition: color 0.15s;
}
.header-search-btn:hover { color: var(--primary-text); }
/* ── Live-dropdown ── */
.header-search-dd {
display: none;
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
min-width: 340px;
z-index: 1100;
}
.header-search-dd.open { display: block; }
.hsd-item {
display: flex;
flex-direction: column;
gap: 2px;
padding: 10px 14px;
text-decoration: none;
color: var(--text);
border-bottom: 1px solid var(--border);
transition: background 0.1s;
}
.hsd-item:last-of-type { border-bottom: none; }
.hsd-item:hover { background: var(--hover); text-decoration: none; }
.hsd-badge {
font-size: 0.72rem;
font-weight: 600;
letter-spacing: .03em;
text-transform: uppercase;
color: var(--muted);
}
.hsd-badge--wiki { color: #2563eb; }
.hsd-badge--kurs { color: #059669; }
.hsd-badge--forum { color: #d97706; }
[data-theme="dark"] .hsd-badge--wiki { color: #60a5fa; }
[data-theme="dark"] .hsd-badge--kurs { color: #34d399; }
[data-theme="dark"] .hsd-badge--forum { color: #fbbf24; }
.hsd-title {
font-size: 0.9rem;
font-weight: 600;
color: var(--text);
}
.hsd-snippet {
font-size: 0.8rem;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hsd-empty {
padding: 12px 14px;
font-size: 0.88rem;
color: var(--muted);
text-align: center;
}
.hsd-all {
display: block;
padding: 9px 14px;
font-size: 0.82rem;
color: var(--primary-text);
background: var(--hover);
text-decoration: none;
text-align: center;
font-weight: 600;
}
.hsd-all:hover { text-decoration: underline; }
.header-search-dd mark,
.search-result-title mark,
.search-result-snippet mark,
.srq-question mark,
.srq-fg-answer-body mark {
background: rgba(255,213,0,.35);
color: inherit;
border-radius: 2px;
padding: 0 1px;
}
[data-theme="dark"] .header-search-dd mark,
[data-theme="dark"] .search-result-title mark,
[data-theme="dark"] .search-result-snippet mark,
[data-theme="dark"] .srq-question mark,
[data-theme="dark"] .srq-fg-answer-body mark {
background: rgba(255,213,0,.45);
}
/* ── Mobile search in nav hamburger ── */
.nav-mobile-search {
display: none;
padding: 10px 16px 4px;
border-bottom: 1px solid var(--border);
}
.mobile-search-wrap {
display: flex;
align-items: center;
background: var(--hover);
border: 1px solid var(--border);
border-radius: 20px;
overflow: hidden;
}
.mobile-search-input {
flex: 1;
background: transparent;
border: none;
outline: none;
padding: 8px 8px 8px 14px;
font-size: 0.9rem;
color: var(--text);
}
.mobile-search-input::placeholder { color: var(--muted); }
.mobile-search-btn {
background: transparent;
border: none;
cursor: pointer;
padding: 8px 12px;
color: var(--muted);
display: flex;
align-items: center;
}
/* show mobile search inside open hamburger nav */
.main-nav.open .nav-mobile-search { display: block; }
/* hide desktop search on small screens */
@media (max-width: 768px) {
.header-search { display: none; }
}
/* ── Search results page ── */
.search-page { padding-top: 28px; }
.search-page-form { margin: 20px 0 32px; }
.search-page-input-wrap {
display: flex;
gap: 0;
max-width: 560px;
border: 1.5px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
transition: border-color 0.15s, box-shadow 0.15s;
}
.search-page-input-wrap:focus-within {
border-color: var(--primary-text);
box-shadow: 0 0 0 3px rgba(30,60,110,.1);
}
.search-page-input {
flex: 1;
border: none;
outline: none;
padding: 11px 16px;
font-size: 1rem;
color: var(--text);
background: var(--card);
}
.search-page-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 11px 18px;
background: var(--primary);
color: #fff;
border: none;
cursor: pointer;
font-size: 0.9rem;
font-weight: 600;
transition: opacity 0.15s;
}
.search-page-btn:hover { opacity: .88; }
.search-count {
font-size: 0.9rem;
color: var(--muted);
margin-bottom: 16px;
}
/* Search filter tabs */
.sr-tabs { display:flex; gap:4px; border-bottom:2px solid var(--border); margin-bottom:24px; flex-wrap:wrap; }
.sr-tab { padding:8px 16px; font-size:.88rem; font-weight:600; cursor:pointer; border:none;
background:none; color:var(--muted); border-bottom:3px solid transparent; margin-bottom:-2px;
border-radius:6px 6px 0 0; transition:color .15s; display:flex; align-items:center; gap:6px; }
.sr-tab:hover { color:var(--text); }
.sr-tab.active { color:var(--primary-text); border-bottom-color:var(--primary-text); background:var(--hover); }
.sr-tab-count { font-size:.72rem; font-weight:700; padding:1px 7px; border-radius:20px;
background:var(--border); color:var(--muted); line-height:1.6; }
.sr-tab.active .sr-tab-count { background:var(--primary); color:#fff; }
/* Quiz search result items */
.search-quiz-item { flex-direction:column; align-items:flex-start; gap:6px; }
.srq-source { font-size:.75rem; font-weight:700; color:var(--primary-text); text-transform:uppercase;
letter-spacing:.04em; }
.srq-question { font-size:.93rem; font-weight:600; color:var(--text); line-height:1.45; }
.srq-actions { display:flex; gap:8px; margin-top:4px; }
.search-empty {
color: var(--muted);
margin-top: 16px;
}
.search-section { margin-bottom: 36px; }
.search-section-title {
font-size: 1.05rem;
font-weight: 700;
color: var(--text);
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
border-bottom: 1px solid var(--border);
padding-bottom: 8px;
}
.search-section-count {
font-size: 0.8rem;
font-weight: 500;
color: var(--muted);
background: var(--hover);
border-radius: 20px;
padding: 1px 8px;
}
.search-result-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.search-result-item {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 14px 18px;
transition: box-shadow 0.15s;
}
.search-result-item:hover { box-shadow: var(--shadow); }
.search-result-title {
display: block;
font-weight: 600;
font-size: 0.95rem;
color: var(--primary-text);
text-decoration: none;
margin-bottom: 4px;
}
.search-result-title:hover { text-decoration: underline; }
.search-result-snippet {
font-size: 0.85rem;
color: var(--muted);
margin: 0;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ── Re-engagement (Admin Inaktive Nutzer) ── */
.reeng-group {
border: 1px solid var(--border);
border-radius: var(--radius);
margin-bottom: 12px;
overflow: hidden;
}
.reeng-summary {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
cursor: pointer;
font-weight: 600;
font-size: .92rem;
background: var(--card);
list-style: none;
user-select: none;
}
.reeng-summary::-webkit-details-marker { display: none; }
.reeng-summary::after { content: "▾"; margin-left: auto; color: var(--muted); font-size: .8rem; }
details.reeng-group[open] .reeng-summary::after { content: "▴"; }
.reeng-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 26px;
height: 22px;
padding: 0 6px;
border-radius: 20px;
font-size: .78rem;
font-weight: 700;
color: #fff;
}
.reeng-table-wrap {
max-height: 320px;
overflow-y: auto;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.reeng-group > form { padding: 0 16px 14px; }
/* ── Merkzettel Sektionen & Flashcards ── */
.fav-section-title {
font-size: 1rem; font-weight: 700; color: var(--text);
margin: 0 0 12px; display: flex; align-items: center; gap: 8px;
}
.fav-section-count {
font-size: 0.78rem; font-weight: 500; color: var(--muted);
background: var(--hover); border-radius: 20px; padding: 1px 8px;
}
.fav-flashcard-list {
display: flex; flex-direction: column; gap: 8px;
}
.fav-flash-item {
background: var(--card); border: 1px solid var(--border);
border-radius: var(--radius); padding: 14px 16px;
}
.fav-flash-tag {
font-size: 0.75rem; font-weight: 600; color: var(--primary-text);
text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px;
}
.fav-flash-q {
font-size: 0.93rem; font-weight: 600; color: var(--text);
margin-bottom: 10px; line-height: 1.5;
}
.fav-flash-answer {
background: var(--hover); border-radius: calc(var(--radius) - 2px);
padding: 12px 14px; margin-bottom: 10px;
}
.fav-flash-answer-head {
font-size: 0.8rem; font-weight: 700; color: var(--muted);
text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px;
}
.fav-flash-answer-body {
font-size: 0.88rem; color: var(--text); line-height: 1.6;
}
.fav-flash-actions {
display: flex; align-items: center; gap: 8px;
}
.btn-icon {
background: none; border: none; cursor: pointer;
color: var(--muted); font-size: 1rem; padding: 4px 6px;
border-radius: var(--radius); transition: color .15s;
}
.btn-icon:hover { color: var(--danger); }
/* ── Admin: UI-Einstellungen Badges ── */
.ui-pref-pill {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
font-weight: 700;
padding: 1px 5px;
border-radius: 20px;
margin-right: 2px;
line-height: 1.6;
letter-spacing: 0.02em;
}
.ui-pref-lang { background: rgba(30,60,110,.12); color: var(--primary-text); }
.ui-pref-dark { background: rgba(30,30,60,.12); color: #6366f1; font-size: .85rem; }
.ui-pref-light { background: rgba(240,180,40,.15); color: #b45309; font-size: .85rem; }
.ui-pref-acc { background: var(--hover); color: var(--muted); }
[data-theme="dark"] .ui-pref-lang { background: rgba(100,140,220,.2); }
[data-theme="dark"] .ui-pref-dark { background: rgba(100,100,220,.2); }
[data-theme="dark"] .ui-pref-light { background: rgba(240,180,40,.2); }
/* ── Public page controls (login / demo / forgot) ── */
.pub-controls {
position: fixed;
top: 14px;
right: 16px;
display: flex;
align-items: center;
gap: 6px;
z-index: 1000;
}
.pub-ctrl-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.28);
background: rgba(255,255,255,0.18);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: var(--text);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.02em;
cursor: pointer;
text-decoration: none;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.pub-ctrl-btn:hover {
background: rgba(255,255,255,0.30);
text-decoration: none;
}
.pub-ctrl-btn.pub-lang-active {
background: var(--primary);
color: #fff;
border-color: var(--primary-text);
}
[data-theme="dark"] .pub-ctrl-btn {
background: rgba(20,26,46,0.70);
border-color: rgba(255,255,255,0.14);
color: var(--text);
}
[data-theme="dark"] .pub-ctrl-btn:hover {
background: rgba(20,26,46,0.90);
}
[data-theme="dark"] .pub-ctrl-btn.pub-lang-active {
background: var(--primary);
color: #fff;
border-color: var(--primary-text);
}
/* ── Logo: zwei Fassungen ────────────────────────────────────────────────
Das Zeichen ist zweifarbig; auf dunklem Grund verschwindet der dunkle
Anteil. logoBild() (helpers.php) gibt beide Fassungen aus, hier wird
umgeschaltet. 🔴 Ueber CSS, nicht ueber ein Skript — sonst springt das
Logo nach dem ersten Aufbau der Seite sichtbar um. */
.logo-fuer-dunkel { display: none; }
[data-theme="dark"] .logo-fuer-hell { display: none; }
[data-theme="dark"] .logo-fuer-dunkel { display: inline-block; }
/* ── Auswahlfenster (11.09.2026) ──────────────────────────────────
Nach dem Vorbild des Kundenportals: Suche, Filter, Sortierung,
Blättern, Übernehmen. Siehe assets/js/auswahl.js. */
.aw-huelle {
position: fixed; inset: 0; z-index: 2000;
background: rgba(0,0,0,0.45);
display: flex; align-items: center; justify-content: center;
padding: 20px;
}
.aw-fenster {
color: var(--text);
border: 1px solid var(--border); border-radius: var(--radius);
width: 100%; max-width: 1120px; max-height: 88vh;
display: flex; flex-direction: column;
}
.aw-kopf {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.aw-schliessen {
background: none; border: 0; color: var(--muted);
font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.aw-steuer {
display: flex; gap: 10px; flex-wrap: wrap;
padding: 12px 18px; border-bottom: 1px solid var(--border);
}
.aw-steuer .aw-suche { flex: 1; min-width: 200px; }
.aw-steuer select { width: auto; }
.aw-liste { overflow: auto; padding: 0 18px; flex: 1; }
.aw-tabelle td { cursor: pointer; }
/* 🔴 Die Markierung trug bis 15.09.2026 NUR `background: var(--hover)`. Im
Dunkelmodus ist das gegenueber der Umgebung ein Kontrastsprung von 1.40 —
gemessen, nicht geschaetzt. Das sieht man schlicht nicht („die markierung
ist kaum erkennbar"). Jetzt drei Signale statt einem: Flaeche, ein Balken
in der Markenfarbe am Zeilenanfang und die Schrift in derselben Farbe.
Der Balken sitzt als `inset`-Schatten, nicht als Rahmen — ein Rahmen wuerde
die Zeile um seine Breite verschieben. */
.aw-zeile.aw-aktiv td {
background: var(--hover);
color: var(--primary-text);
font-weight: 600;
}
.aw-zeile.aw-aktiv td:first-child { box-shadow: inset 3px 0 0 var(--primary-text); }
.aw-sort {
background: none; border: 0; padding: 0; cursor: pointer;
font: inherit; color: inherit;
}
.aw-fuss {
display: flex; align-items: center; gap: 12px;
padding: 12px 18px; border-top: 1px solid var(--border);
}
.aw-zaehler { color: var(--muted); font-size: 0.85rem; }
.aw-blaettern { margin-left: auto; }
.aw-feld {
display: flex; align-items: center; justify-content: space-between;
gap: 8px; cursor: pointer; text-align: left;
}
.aw-feld-zeichen { color: var(--muted); }
@media (max-width: 720px) {
.aw-huelle { padding: 0; }
.aw-fenster { max-width: none; max-height: 100vh; border-radius: 0; }
}
/* ---------------------------------------------------------------------------
Marken, Schluessel und kleine Entfernen-Knoepfe der Verwaltung (kb-*).
🔴 Sie standen bis zum 14.09.2026 im