';
inherits: false;
initial-value: 0.5;
}
.diff-slider {
--bg: #eef3f0;
--track: #d7e4db;
--label: #3c4d44;
--label-active: #ffffff;
/* Drei Endpunkte: Grün (Geführt) → Gelb (Unterstützt) → Dunkelorange
* (Frei). Der Gelb-Mittelpunkt ist bewusst klar zitronig statt olive,
* damit der Slider und alle abgeleiteten Modus-Farben „gelb" wirken
* und nicht ins Grün- oder Goldhafte rutschen. */
--knob-green-top: #4fb57a;
--knob-green-bot: #2f8e5a;
--knob-yellow-top: #e8c930;
--knob-yellow-bot: #b89a18;
--knob-orange-top: #c86a1c;
--knob-orange-bot: #9a4b10;
/* Stückweise Farbinterpolation mit Gelb als Mittelstop:
* t ∈ [0, 0.5] → mix(green, yellow, t·2)
* t ∈ [0.5, 1] → mix(yellow, orange, (t−0.5)·2)
* In CSS als verschachteltes color-mix mit clamp-Anteilen. */
--knob-top: color-mix(in oklch,
color-mix(in oklch,
var(--knob-green-top),
var(--knob-yellow-top) calc(min(var(--knob-t) * 2, 1) * 100%)),
var(--knob-orange-top)
calc(max((var(--knob-t) - 0.5) * 2, 0) * 100%));
--knob-bot: color-mix(in oklch,
color-mix(in oklch,
var(--knob-green-bot),
var(--knob-yellow-bot) calc(min(var(--knob-t) * 2, 1) * 100%)),
var(--knob-orange-bot)
calc(max((var(--knob-t) - 0.5) * 2, 0) * 100%));
display: inline-flex;
position: relative;
background: var(--bg);
border: 1px solid var(--track);
border-radius: 999px;
padding: 3px;
gap: 0;
min-width: 320px;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
user-select: none;
transition: --knob-t 0.45s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.diff-slider-knob {
position: absolute;
top: 3px; left: 3px;
height: calc(100% - 6px);
width: calc((100% - 6px) / 3);
background: linear-gradient(180deg, var(--knob-top) 0%, var(--knob-bot) 100%);
border-radius: 999px;
box-shadow: 0 2px 6px rgba(0, 100, 60, 0.25);
transition:
left 0.35s cubic-bezier(0.4, 0.1, 0.2, 1),
box-shadow 0.4s ease;
pointer-events: none;
z-index: 1;
}
.diff-slider-option {
position: relative;
z-index: 2;
flex: 1 1 33.3%;
padding: 0.45rem 0.9rem;
text-align: center;
font-size: 0.85rem;
line-height: 1.2;
font-weight: 600;
color: var(--label);
cursor: pointer;
transition: color 0.3s ease;
border-radius: 999px;
display: flex; align-items: center; justify-content: center;
white-space: nowrap;
}
.diff-slider-option input {
position: absolute; opacity: 0; pointer-events: none;
}
.diff-slider[data-value="gefuehrt"] .diff-slider-knob { left: 3px; }
.diff-slider[data-value="unterstuetzt"] .diff-slider-knob { left: calc(3px + (100% - 6px) / 3); }
.diff-slider[data-value="frei"] .diff-slider-knob { left: calc(3px + 2 * (100% - 6px) / 3); }
.diff-slider[data-value="gefuehrt"] .diff-slider-option[data-mode="gefuehrt"],
.diff-slider[data-value="unterstuetzt"] .diff-slider-option[data-mode="unterstuetzt"],
.diff-slider[data-value="frei"] .diff-slider-option[data-mode="frei"] {
color: var(--label-active);
}
/* --knob-t steuert die stückweise Farbinterpolation:
* 0 → reines Grün (Geführt)
* 0.5 → reines Gelb (Unterstützt)
* 1 → reines Dunkelorange (Frei)
* Die Animation im .diff-slider-Kontext (transition: --knob-t …) sorgt für
* den fließenden Farbverlauf zwischen den Zuständen. */
.diff-slider[data-value="gefuehrt"] { --knob-t: 0; }
.diff-slider[data-value="unterstuetzt"] { --knob-t: 0.5; }
.diff-slider[data-value="frei"] { --knob-t: 1; }
.diff-slider-wrap {
display: flex; flex-direction: column; gap: 0.5rem; align-items: stretch;
}
.diff-slider-label {
font-size: 0.78rem;
font-weight: 600;
color: #2f4a3d;
letter-spacing: 0.01em;
}
.diff-slider-hint {
font-size: 0.75rem;
color: #667065;
font-style: italic;
line-height: 1.35;
max-width: 540px;
min-height: 2.5em;
transition: opacity 0.2s ease;
}
.diff-slider-hint strong { font-style: normal; color: #304737; }
/* Fall-Tabelle für Bearbeiter:innen */
.case-table th, .case-table td {
vertical-align: middle;
}
/* Button-Gruppe in der Aktion-Spalte: horizontale Ausrichtung, gleiche Baseline. */
.btn-row {
display: inline-flex;
align-items: center;
gap: 0.5rem;
flex-wrap: nowrap;
}
.btn-row .btn { margin: 0; }
/* Bewertungs-Seite: Accordion */
.bewertungen-list { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 1.2rem; }
.bewertung-item {
border: 1px solid #d8e1dc;
border-radius: 12px;
background: #ffffff;
overflow: hidden;
box-shadow: 0 1px 3px rgba(20,40,30,0.04);
}
.bewertung-item[open] { box-shadow: 0 6px 22px rgba(20,40,30,0.08); }
.bewertung-item > summary {
list-style: none;
cursor: pointer;
padding: 0.95rem 1.2rem;
display: flex; align-items: center; justify-content: space-between;
gap: 1rem;
background: linear-gradient(180deg, #f7faf8 0%, #f1f5f2 100%);
user-select: none;
}
.bewertung-item > summary::-webkit-details-marker { display: none; }
.bewertung-item > summary::marker { content: ''; }
.bewertung-summary-title { font-size: 1.25rem; font-weight: 700; color: #1e3a2a; margin: 0; }
.bewertung-summary-meta { font-size: 0.85rem; color: #5a6a60; letter-spacing: 0.02em; }
/* Modus-Pill und Punkte-Label im Bewertungs-Header. Pill-Optik analog zur
Konto-Toggle-Pastellfarbe (Rot = Ranked, Blau = Unranked). */
.mode-pill {
display: inline-block;
margin-left: 0.6rem;
padding: 0.15rem 0.6rem;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
border: 1px solid transparent;
vertical-align: middle;
}
.mode-pill--ranked {
background: linear-gradient(135deg, #fbecec, #f3d4d4);
color: #8a2424;
border-color: #e6b3b3;
}
.mode-pill--unranked {
background: linear-gradient(135deg, #eef3fa, #d9e6f3);
color: #1f4a7a;
border-color: #b9cee0;
}
.bewertung-summary-points {
margin-left: 0.5rem;
font-size: 0.85rem;
font-weight: 700;
color: #1e3a2a;
}
.bewertung-summary-points--zero { color: #5a6a60; font-weight: 500; }
/* Schreibstil-Profil im Bewertungs-Archiv: NEUTRAL, ohne Farbmarker. */
.writing-profile-archive {
line-height: 1.55;
color: #1e3a2a;
background: #f7f9f7;
border: 1px solid #e1e7e3;
border-radius: 10px;
padding: 0.9rem 1rem;
white-space: normal;
}
/* ---- Bewertungsarchiv: Slider-Toggle direkt unter der eigenen Antwort.
Pro Unranked-Bewertung ein eigener Toggle, NUR sichtbar wenn die/der
Bearbeitende sich aktuell selbst im Unranked-Modus befindet. ---- */
.bw-toggle-wrap {
margin: 0.6rem 0 0.4rem;
}
.bw-toggle {
display: inline-flex;
align-items: center;
gap: 0.65rem;
cursor: pointer;
user-select: none;
font-size: 0.92rem;
color: #1e3a2a;
}
.bw-toggle input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
.bw-toggle-track {
position: relative;
width: 44px;
height: 24px;
border-radius: 999px;
background: #d8ddd9;
border: 1px solid #c2cbc4;
/* Nur Color-Transition, der Thumb selbst läuft via translate3d. */
transition: background-color 0.32s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.bw-toggle-thumb {
position: absolute;
top: 50%;
left: 2px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.18);
transform: translate3d(0, -50%, 0);
transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
}
.bw-toggle input:checked + .bw-toggle-track {
background: var(--ubt-green);
border-color: var(--ubt-green);
}
.bw-toggle input:checked + .bw-toggle-track .bw-toggle-thumb {
transform: translate3d(20px, -50%, 0);
}
.bw-toggle input:focus-visible + .bw-toggle-track {
outline: 2px solid var(--ubt-green);
outline-offset: 2px;
}
/* Unranked-Punktekarten, default eingeklappt, animiert auf 120 Hz via
Transform/Opacity (kein Layout-Reflow). max-height groß genug für die
tatsächliche Karte; der Wert wird nur als Animationsbasis gebraucht. */
.reveal-host {
overflow: hidden;
}
.reveal-host--unranked {
max-height: 0;
opacity: 0;
transform: translate3d(0, -8px, 0);
margin: 0;
pointer-events: none;
transition: max-height 0.42s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
margin 0.32s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform, opacity, max-height;
}
.reveal-host--unranked.is-revealed {
max-height: 600px;
opacity: 1;
transform: translate3d(0, 0, 0);
margin-bottom: 1rem;
pointer-events: auto;
}
.bewertung-summary-chev {
display: inline-block;
width: 0.65em; height: 0.65em;
border-right: 2px solid #4b5b51;
border-bottom: 2px solid #4b5b51;
transform: rotate(45deg);
transition: transform 0.2s ease;
margin-left: 0.4rem;
}
.bewertung-item[open] > summary .bewertung-summary-chev { transform: rotate(-135deg); }
.bewertung-body { padding: 1rem 1.3rem 1.3rem; }
.bewertung-body h3 { margin: 0.2rem 0 0.5rem; font-size: 0.98rem; color: #1e3a2a; }
.bewertung-body .case-text {
background: #f6f9f7; border: 1px solid #e4ece7; border-radius: 8px;
padding: 0.6rem 0.85rem; font-size: 0.93rem; line-height: 1.55;
}
.bewertung-body .feedback-block { font-size: 0.96rem; line-height: 1.6; margin-top: 0.8rem; }
/* Eingeklappte „Deine Antwort"-Sektion in der späteren Bewertungsansicht.
Steht über der Punktekarte und dem Feedback. */
.bewertung-answer {
margin-bottom: 1.1rem;
border: 1px solid #e4ece7;
border-radius: 10px;
background: #fafcfa;
overflow: hidden;
}
.bewertung-answer > summary {
list-style: none;
cursor: pointer;
padding: 0.7rem 1rem;
font-size: 0.92rem;
font-weight: 600;
color: #1e3a2a;
display: flex; align-items: center; justify-content: space-between;
user-select: none;
}
.bewertung-answer > summary::-webkit-details-marker { display: none; }
.bewertung-answer > summary::marker { content: ''; }
.bewertung-answer > summary::after {
content: '';
width: 0.55rem; height: 0.55rem;
border-right: 2px solid #527065;
border-bottom: 2px solid #527065;
transform: rotate(45deg);
transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.bewertung-answer[open] > summary::after { transform: rotate(-135deg); }
.bewertung-answer > .case-text {
margin: 0 1rem 1rem;
}
.bewertung-detail {
margin-top: 1rem;
}
.bewertung-detail h3 { margin-top: 1rem; }
.bewertung-detail h3:first-child { margin-top: 0.5rem; }
.case-row-slider td { padding-top: 0.1rem; padding-bottom: 0.8rem; border-top: 0; }
.case-row td { border-bottom: 0; }
.case-row-slider + .case-row > td { border-top: 1px solid #eaeeea; padding-top: 1rem; }
.case-row-slider--collapsed { display: none; }
.slider-toggle-link {
display: inline-flex;
align-items: center;
gap: 0.2rem;
padding: 0.1rem 0.3rem;
margin-right: 0.25rem;
background: none;
border: 0;
border-radius: 4px;
color: #4d5a52;
font-size: 0.78rem;
font-family: inherit;
cursor: pointer;
line-height: 1.2;
transition: color 0.15s ease, background 0.15s ease;
}
.slider-toggle-link:hover,
.slider-toggle-link:focus-visible {
color: var(--ubt-green, #006343);
background: rgba(0, 99, 67, 0.06);
outline: none;
}
.slider-toggle-link .slider-toggle-icon {
display: inline-block;
transition: transform 0.18s ease;
line-height: 1;
font-size: 0.85em;
opacity: 0.8;
}
.slider-toggle-link[aria-expanded="true"] .slider-toggle-icon {
transform: rotate(180deg);
}
.veranstaltung-tag {
display: inline-block;
padding: 0.15rem 0.55rem;
background: #eef5f0;
color: #1e3a2a;
border: 1px solid #cfdcd3;
border-radius: 999px;
font-size: 0.8rem;
font-weight: 500;
}
.status-pill {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.18rem 0.65rem;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1.1;
}
/* Status-Pills tragen keinen Punkt mehr, die Pillen-Form ist klar genug. */
/* Unbearbeitet → bläulich */
.status-pill--open { background: #eaf2fa; color: #2a4d75; border: 1px solid #c6d8eb; }
/* In Bearbeitung → gelblich-orange */
.status-pill--active { background: #fdf1e1; color: #8a4a12; border: 1px solid #f0d6aa; }
/* Bearbeitet → grün */
.status-pill--done { background: #e6f5ec; color: #1f5b36; border: 1px solid #b6dcc2; }
/* Erneut in Bearbeitung (parallel zu "Nx Bearbeitet") → kühles, klares Blau,
damit klar unterscheidbar vom orangefarbenen ersten "In Bearbeitung" und
vom grünen "Bearbeitet". */
.status-pill--resumed {
background: linear-gradient(180deg, #e8f1fc 0%, #d9e8f8 100%);
color: #1f4b85;
border: 1px solid #b5cdec;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
}
/* Stack aus zwei Pills (Bearbeitet + In Bearbeitung) untereinander in der
Status-Spalte. Erlaubt Tabellen-Zelle, beide Zustände sauber zu zeigen,
ohne dass die Pills auseinanderfallen. */
.status-pill-stack {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 0.28rem;
}
.btn-small {
padding: 0.22rem 0.65rem;
font-size: 0.82rem;
line-height: 1.25;
}
/* Prominentes Pflichtfeld */
.form-field-prominent { margin-bottom: 0.5rem; }
.form-field-prominent > span:first-child {
font-weight: 600;
color: #1e3a2a;
font-size: 0.95rem;
}
.form-field-prominent input {
border: 1px solid #bfd1c6;
background: #f7fbf8;
box-shadow: 0 0 0 2px rgba(0, 146, 96, 0.08);
}
.form-field-prominent input:focus {
border-color: #009260;
box-shadow: 0 0 0 2px rgba(0, 146, 96, 0.22);
}
.required-mark { color: #c43b3b; margin-left: 0.15em; }
/* Live-Hint zur erkannten Rechtsgebiet-Zuordnung unter dem Veranstaltungs-
Eingabefeld. Erscheint nur, sobald JS den Wert auswertet — leerer Text
nimmt keinen vertikalen Platz. */
.rechtsgebiet-hint {
display: block;
margin-top: 0.25rem;
font-size: 0.82rem;
line-height: 1.3;
min-height: 0;
transition: color 0.2s ease;
}
.rechtsgebiet-hint:empty { margin-top: 0; }
.rechtsgebiet-hint--detected {
color: #0e8055;
font-weight: 600;
}
.rechtsgebiet-hint--unknown {
color: #8a6d00;
font-weight: 500;
}
/* ---- Statistik-Seite ---- */
.stats-topbar {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
margin-bottom: 0.75rem;
flex-wrap: wrap;
}
.btn-ghost {
background: transparent;
border: 1px solid #cfdcd3;
color: #1e3a2a;
}
.btn-ghost:hover { background: #eef5f0; }
.stats-pending-banner {
display: flex; align-items: center; gap: 0.6rem;
background: #fdf7e6;
border: 1px solid #f1e0b5;
color: #6a5416;
padding: 0.6rem 0.9rem;
border-radius: 8px;
margin-bottom: 1rem;
font-size: 0.92rem;
}
.stats-error-hint {
background: #fbecec;
border: 1px solid #e9c9c9;
color: #7a2b2b;
padding: 0.55rem 0.85rem;
border-radius: 8px;
margin-bottom: 1rem;
font-size: 0.88rem;
}
/* Lernfortschritt: glasige Karten, dezente Akzentlinien je Sektion,
Stagger-Reveal beim ersten Layout, Scroll-Reveal beim Hineinscrollen.
Der gesamte Look bleibt im bestehenden grünen Farbsystem; Akzente
(Rot/Grün/Blau/Bernstein) sind stark entsättigt und farblich abgestimmt. */
.stats-kpis { display: flex; flex-direction: column; gap: 1.4rem; margin-bottom: 1.6rem; }
.stats-kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 0.9rem;
}
.stats-kpi-card {
background: linear-gradient(140deg, rgba(255,255,255,0.94) 0%, rgba(244,250,246,0.82) 100%);
backdrop-filter: blur(10px) saturate(125%);
-webkit-backdrop-filter: blur(10px) saturate(125%);
border: 1px solid rgba(207, 226, 214, 0.7);
border-radius: 14px;
padding: 1rem 1.1rem 1.05rem;
display: flex; flex-direction: column; gap: 0.25rem;
position: relative;
overflow: hidden;
box-shadow:
0 1px 2px rgba(20,40,30,0.04),
0 6px 18px rgba(20,40,30,0.04),
inset 0 1px 0 rgba(255,255,255,0.7);
transition:
transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.35s ease;
}
.stats-kpi-card::after {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 2px;
background: linear-gradient(90deg, rgba(14,128,85,0) 0%, rgba(14,128,85,0.55) 50%, rgba(14,128,85,0) 100%);
opacity: 0.6;
pointer-events: none;
}
.stats-kpi-card:hover {
transform: translateY(-2px);
box-shadow:
0 2px 4px rgba(20,40,30,0.05),
0 14px 32px rgba(20,40,30,0.08),
inset 0 1px 0 rgba(255,255,255,0.85);
border-color: rgba(177, 210, 188, 0.85);
}
.stats-kpi-label {
font-size: 0.74rem;
color: #5b6a61;
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 600;
}
.stats-kpi-value {
font-size: 1.85rem;
font-weight: 700;
color: #163020;
line-height: 1.05;
letter-spacing: -0.01em;
}
.stats-kpi-hint {
font-size: 0.78rem;
color: #667065;
}
.stats-kpi-card--trend::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
border-radius: 3px 0 0 3px;
}
.stats-trend-up .stats-kpi-value { color: #2f7d4f; }
.stats-trend-up::before { background: linear-gradient(180deg, #2f9e66, #1e7d4d); }
.stats-trend-stable .stats-kpi-value { color: #3b5569; }
.stats-trend-stable::before { background: linear-gradient(180deg, #8aa1b6, #6f8da6); }
.stats-trend-mixed .stats-kpi-value { color: #8a6d00; }
.stats-trend-mixed::before { background: linear-gradient(180deg, #e6b545, #c98f1e); }
.stats-trend-down .stats-kpi-value { color: #b33a3a; }
.stats-trend-down::before { background: linear-gradient(180deg, #d66666, #b04141); }
.stats-kpi-lists {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1rem;
}
.stats-kpi-lists .card {
position: relative;
background: linear-gradient(150deg, rgba(255,255,255,0.95) 0%, rgba(247,251,249,0.85) 100%);
backdrop-filter: blur(10px) saturate(125%);
-webkit-backdrop-filter: blur(10px) saturate(125%);
border: 1px solid rgba(216, 230, 222, 0.75);
border-radius: 14px;
padding: 1.05rem 1.15rem 1.1rem 1.4rem;
box-shadow:
0 1px 2px rgba(20,40,30,0.04),
0 6px 18px rgba(20,40,30,0.04),
inset 0 1px 0 rgba(255,255,255,0.7);
transition:
transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.35s ease;
}
.stats-kpi-lists .card:hover {
transform: translateY(-2px);
box-shadow:
0 2px 4px rgba(20,40,30,0.05),
0 14px 32px rgba(20,40,30,0.07),
inset 0 1px 0 rgba(255,255,255,0.85);
}
.stats-kpi-lists .card::before {
content: "";
position: absolute;
left: 0; top: 14%; bottom: 14%;
width: 3px;
border-radius: 3px;
background: linear-gradient(180deg, var(--stats-accent, #cfe7d6), transparent);
opacity: 0.85;
}
.stats-kpi-lists h3 {
margin-top: 0;
margin-bottom: 0.55rem;
font-size: 1rem;
color: #163020;
letter-spacing: -0.005em;
}
/* Akzentfarben strikt nach offizieller Farblegende (feedback_visuals.js):
Rot = fehlerhaft → Fehlerarten
Grün = korrekt → Stärken
Violett = Lernhinweis/Strategie → Fokus-Empfehlungen */
#stats-errors-card { --stats-accent: #c83737; }
#stats-strengths-card { --stats-accent: #2f9e66; }
#stats-focus-card { --stats-accent: #8a49b4; }
.stats-error-list, .stats-strength-list, .stats-focus-list {
margin: 0.25rem 0 0 1.1rem;
padding: 0;
}
.stats-error-list li, .stats-strength-list li, .stats-focus-list li {
margin-bottom: 0.4rem;
line-height: 1.45;
}
.stats-analysis-card {
line-height: 1.62;
font-size: 0.97rem;
background: linear-gradient(155deg, rgba(255,255,255,0.96) 0%, rgba(243,250,245,0.88) 100%);
backdrop-filter: blur(10px) saturate(125%);
-webkit-backdrop-filter: blur(10px) saturate(125%);
border: 1px solid rgba(207, 226, 214, 0.7);
border-radius: 14px;
padding: 1.3rem 1.45rem 1.4rem;
box-shadow:
0 1px 2px rgba(20,40,30,0.04),
0 8px 24px rgba(20,40,30,0.05),
inset 0 1px 0 rgba(255,255,255,0.7);
}
.stats-analysis-card h3,
.stats-analysis-card h4 {
margin-top: 1.1rem;
margin-bottom: 0.4rem;
color: #163020;
letter-spacing: -0.005em;
}
.stats-analysis-card h3:first-child,
.stats-analysis-card h4:first-child { margin-top: 0; }
.stats-tips-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1rem;
}
.stats-tips-card {
position: relative;
background: linear-gradient(150deg, rgba(255,255,255,0.95) 0%, rgba(247,251,249,0.85) 100%);
backdrop-filter: blur(10px) saturate(125%);
-webkit-backdrop-filter: blur(10px) saturate(125%);
border: 1px solid rgba(216, 230, 222, 0.75);
border-radius: 14px;
padding: 1.05rem 1.15rem 1.15rem 1.4rem;
box-shadow:
0 1px 2px rgba(20,40,30,0.04),
0 6px 18px rgba(20,40,30,0.04),
inset 0 1px 0 rgba(255,255,255,0.7);
transition:
transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.stats-tips-card:hover {
transform: translateY(-2px);
box-shadow:
0 2px 4px rgba(20,40,30,0.05),
0 14px 32px rgba(20,40,30,0.07),
inset 0 1px 0 rgba(255,255,255,0.85);
}
.stats-tips-card::before {
content: "";
position: absolute;
left: 0; top: 14%; bottom: 14%;
width: 3px;
border-radius: 3px;
background: linear-gradient(180deg, var(--stats-accent, #cfe7d6), transparent);
opacity: 0.85;
}
/* Tipp-Akzente an Farblegende ausgerichtet:
Violett = strategische Empfehlung (Lernhinweis) → Lernstrategie
Blau = methodischer Hinweis (Aufbau, Klausurtechnik) → Bearbeitungstechnik & Klausurtaktik */
.stats-tips-card[data-tips-kind="lernstrategie"] { --stats-accent: #8a49b4; }
.stats-tips-card[data-tips-kind="bearbeitungstechnik"]{ --stats-accent: #216cc9; }
.stats-tips-card[data-tips-kind="klausurtaktik"] { --stats-accent: #216cc9; }
.stats-tips-card h3 { margin-top: 0; margin-bottom: 0.55rem; font-size: 1rem; color: #163020; }
.stats-tips-card ul { margin: 0.3rem 0 0 1.1rem; padding: 0; }
.stats-tips-card li { margin-bottom: 0.4rem; line-height: 1.5; }
.stats-empty-state {
text-align: center;
padding: 2.2rem 1.4rem;
background: linear-gradient(150deg, rgba(255,255,255,0.95) 0%, rgba(243,250,245,0.85) 100%);
backdrop-filter: blur(10px) saturate(125%);
-webkit-backdrop-filter: blur(10px) saturate(125%);
border: 1px solid rgba(207, 226, 214, 0.7);
border-radius: 14px;
box-shadow:
0 1px 2px rgba(20,40,30,0.04),
0 8px 24px rgba(20,40,30,0.05);
}
.stats-empty-state h3 { margin-top: 0; }
/* Sanftes Erscheinen: Stagger für KPI-Karten + Scroll-Reveal für ganze Sektionen.
.stats-reveal startet leicht abgesenkt + transparent, .is-revealed setzt zurück.
Der Stagger der KPI-Karten läuft beim ersten Layout (kein JS). */
.stats-reveal {
opacity: 0;
transform: translateY(10px);
transition:
opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
will-change: opacity, transform;
}
.stats-reveal.is-revealed {
opacity: 1;
transform: none;
}
@keyframes stats-card-rise {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
.stats-kpis:not([hidden]) .stats-kpi-card {
animation: stats-card-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.stats-kpis:not([hidden]) .stats-kpi-card:nth-child(1) { animation-delay: 0ms; }
.stats-kpis:not([hidden]) .stats-kpi-card:nth-child(2) { animation-delay: 80ms; }
.stats-kpis:not([hidden]) .stats-kpi-card:nth-child(3) { animation-delay: 160ms; }
.stats-kpis:not([hidden]) .stats-kpi-card:nth-child(4) { animation-delay: 240ms; }
.stats-kpis:not([hidden]) .stats-kpi-card:nth-child(n+5) { animation-delay: 320ms; }
@media (prefers-reduced-motion: reduce) {
.stats-reveal {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.stats-kpis:not([hidden]) .stats-kpi-card {
animation: none !important;
}
.stats-kpi-card,
.stats-kpi-lists .card,
.stats-tips-card {
transition: none !important;
}
}
/* ---- Bewertungen-Modal ---- */
body.attempts-modal-open { overflow: hidden; }
.attempts-modal-overlay {
position: fixed; inset: 0;
background: rgba(20, 30, 26, 0.45);
display: flex; align-items: center; justify-content: center;
padding: 1.2rem;
z-index: 100;
opacity: 0;
transition: opacity 0.22s ease;
backdrop-filter: blur(2px);
}
.attempts-modal-overlay--open { opacity: 1; }
.attempts-modal {
background: #ffffff;
width: 100%;
max-width: 820px;
max-height: 88vh;
border-radius: 14px;
box-shadow: 0 24px 64px rgba(0,0,0,0.3);
display: flex; flex-direction: column;
overflow: hidden;
transform: translateY(16px) scale(0.985);
transition: transform 0.22s ease;
}
.attempts-modal-overlay--open .attempts-modal {
transform: translateY(0) scale(1);
}
.attempts-modal-head {
display: flex; align-items: center; justify-content: space-between;
gap: 1rem;
padding: 0.9rem 1.2rem;
border-bottom: 1px solid #e4ece7;
background: #f7faf8;
}
.attempts-modal-head h2 { margin: 0; font-size: 1.1rem; color: #1e3a2a; }
.attempts-modal-close {
appearance: none; background: transparent; border: 0;
font-size: 1.7rem; line-height: 1;
color: #4b5b51;
cursor: pointer;
padding: 0.1rem 0.5rem;
border-radius: 6px;
}
.attempts-modal-close:hover { background: #e4ece7; }
.attempts-modal-body {
padding: 1rem 1.2rem 1.2rem;
overflow-y: auto;
}
.attempts-modal-loading {
display: flex; align-items: center; gap: 0.6rem;
color: #5a6a60; font-style: italic;
}
.attempts-modal-item {
border: 1px solid #e4ece7;
border-radius: 10px;
padding: 0.85rem 1rem 0.95rem;
margin-bottom: 0.75rem;
background: #fdfefd;
}
.attempts-modal-item-head time {
font-size: 0.78rem;
color: #6a7a70;
letter-spacing: 0.02em;
}
.attempts-modal-item h4 {
margin: 0.5rem 0 0.3rem;
font-size: 0.92rem;
color: #1e3a2a;
}
.attempts-modal-item-antwort .case-text {
background: #f6f9f7;
border: 1px solid #e4ece7;
border-radius: 8px;
padding: 0.55rem 0.75rem;
font-size: 0.92rem;
line-height: 1.5;
max-height: 260px;
overflow-y: auto;
}
.attempts-modal-item-feedback .feedback-block {
font-size: 0.95rem;
line-height: 1.55;
}
.diff-slider-option--locked {
cursor: not-allowed;
opacity: 0.55;
}
.diff-slider-option--locked::after {
content: "🔒";
margin-left: 0.35em;
font-size: 0.85em;
}
.diff-slider-lock-note {
color: #8a4a12;
background: #fdf1e1;
border: 1px solid #f0d6aa;
border-radius: 6px;
padding: 0.4rem 0.6rem;
margin: 0;
}
/* Ranked-Sperre auf Modus-Stufe (durch Unranked-Taint im selben oder
leichteren Modus). Sieht ähnlich aus wie der frei-Lock, aber rötlich
statt orange. */
.diff-slider-option--ranked-blocked {
cursor: not-allowed;
opacity: 0.5;
filter: grayscale(0.4);
}
.diff-slider-option--ranked-blocked::after {
content: "🔒";
margin-left: 0.35em;
font-size: 0.85em;
}
/* Ranked-Malus auf Modus-Stufe — Stufe ist wählbar, aber kostet Punkte. */
.diff-slider-option--ranked-malus::after {
content: "−%";
margin-left: 0.35em;
font-size: 0.7em;
color: #8a4a12;
font-weight: 600;
}
.diff-slider-taint-note {
color: #5a2a2a;
background: #fbe7e7;
border: 1px solid #ecbcbc;
border-radius: 6px;
padding: 0.4rem 0.6rem;
margin: 0.35rem 0 0;
line-height: 1.45;
}
/* ---- Schreibprozess-Tracker (unauffälliger Live-Indicator) ---- */
.tracker-heartbeat {
display: inline-flex; align-items: center; gap: 0.45rem;
margin-top: 0.5rem;
padding: 0.25rem 0.65rem;
background: #eef5f0;
border: 1px solid #cfdcd3;
border-radius: 999px;
color: #2f5a42;
font-style: italic;
cursor: help;
}
.tracker-dot {
width: 8px; height: 8px; border-radius: 50%;
background: #2f9e66;
box-shadow: 0 0 0 0 rgba(47, 158, 102, 0.6);
animation: trackerPulse 1.8s ease-out infinite;
}
@keyframes trackerPulse {
0% { box-shadow: 0 0 0 0 rgba(47, 158, 102, 0.55); }
70% { box-shadow: 0 0 0 10px rgba(47, 158, 102, 0); }
100% { box-shadow: 0 0 0 0 rgba(47, 158, 102, 0); }
}
/* Wartet auf erste Eingabe: kein Puls, neutraler Ton */
.tracker-heartbeat--idle {
background: #f1f3f5;
border-color: #d8dde2;
color: #555c63;
font-style: normal;
}
.tracker-dot--idle {
animation: none !important;
box-shadow: none !important;
background: #9aa3aa !important;
}
/* Pausiert (Tab gewechselt, KI antwortet, Seite verlassen): gedämpft, kein Puls */
.tracker-heartbeat--paused {
background: #fdf4e3;
border-color: #ecd9a8;
color: #7a5b16;
font-style: normal;
}
.tracker-dot--paused {
animation: none !important;
box-shadow: none !important;
background: #c89a3a !important;
}
/* Abschluss-Zustand: kein Puls, dezentes Häkchen */
.tracker-heartbeat--done {
background: #eaf6ee;
border-color: #bddcc7;
color: #234d2e;
font-style: normal;
cursor: default;
}
.tracker-dot--done {
animation: none !important;
box-shadow: none !important;
background: transparent !important;
position: relative;
width: 10px; height: 10px;
}
.tracker-dot--done::after {
content: "✓";
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
color: #2f7d4f;
font-size: 11px;
font-weight: 700;
line-height: 1;
}
/* ---- Bearbeitungsprofil-Karte ---- */
.writing-profile-card {
background: #f8faf9;
border: 1px solid #dde7e1;
border-left: 4px solid #009260;
border-radius: 10px;
padding: 1rem 1.2rem;
}
.writing-profile-card .writing-profile-h {
margin-top: 1.1rem;
margin-bottom: 0.35rem;
font-size: 1rem;
color: #1e3a2a;
}
.writing-profile-card .writing-profile-h:first-child { margin-top: 0; }
.writing-profile-list {
margin: 0 0 0.4rem 1.25rem;
padding: 0;
}
.writing-profile-list li {
margin-bottom: 0.25rem;
line-height: 1.5;
}
.writing-profile-loading {
display: flex; align-items: center; gap: 0.6rem;
color: #546159; font-style: italic;
}
.writing-profile-error {
background: #fdecea;
color: #842029;
border: 1px solid #f3b8b2;
border-radius: 6px;
padding: 0.5rem 0.75rem;
}
/* ---- Visuelles Feedbacksystem: Farbmarker ---- */
.fb-mark {
padding: 0 0.15em;
border-radius: 3px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
transition: box-shadow 0.25s ease;
}
.fb-mark.fb-g { background: rgba(47, 158, 102, 0.18); color: #184a33; }
.fb-mark.fb-y { background: rgba(226, 186, 60, 0.28); color: #5a4608; }
.fb-mark.fb-o { background: rgba(217, 119, 40, 0.22); color: #6b3b0b; }
.fb-mark.fb-r { background: rgba(200, 55, 55, 0.18); color: #6b1818; }
.fb-mark.fb-b { background: rgba(33, 108, 201, 0.16); color: #153b69; }
.fb-mark.fb-v { background: rgba(138, 73, 180, 0.18); color: #3d1e57; }
.fb-mark--linked {
cursor: pointer;
text-decoration: underline dotted rgba(0,0,0,0.35);
text-underline-offset: 3px;
}
.fb-mark--linked:hover {
box-shadow: 0 0 0 2px rgba(0, 100, 60, 0.25);
}
@keyframes fbFlash {
0% { box-shadow: 0 0 0 0 rgba(0, 146, 96, 0.7); }
60% { box-shadow: 0 0 0 6px rgba(0, 146, 96, 0); }
100% { box-shadow: 0 0 0 0 rgba(0, 146, 96, 0); }
}
.fb-mark--flash {
animation: fbFlash 1.6s ease-out 2;
outline: 1px solid rgba(0, 146, 96, 0.55);
}
.fb-bucket { cursor: pointer; transition: filter 0.2s ease; }
.fb-bucket:hover { filter: brightness(1.08); }
.fb-bucket--flash rect,
.fb-bucket--flash circle {
stroke: #009260 !important;
stroke-width: 2;
}
.fb-h {
margin: 1rem 0 0.4rem;
font-size: 1rem;
color: #1e3a2a;
}
.fb-h:first-child { margin-top: 0; }
.fb-list {
margin: 0 0 0.5rem 1.2rem;
padding: 0;
}
.fb-list li {
margin-bottom: 0.3rem;
line-height: 1.5;
}
/* ---- Adaptive Seitenlegende (rechts, vertikal zentriert) ---- */
/* Sichtbar nur, wenn .fb-mark-Elemente im Viewport sind, gesteuert per
* IntersectionObserver (feedback_visuals.js). Fade + Slide beim Auftauchen. */
.fb-legend-sidebar {
--legend-w: 188px;
--legend-gap: 10px;
position: fixed;
/* Sitz exakt 10 px rechts neben der Außenkante des max-1080px-Containers
(.main / .container). Auf schmaleren Viewports, wo dort kein Platz ist,
wandert die Legende automatisch an den rechten Bildschirmrand mit
gleichem 10-px-Abstand, der Hauptcontent wird dabei NIE verschoben. */
left: min(
calc(100vw - var(--legend-w) - var(--legend-gap)),
calc(50% + (var(--container-w) / 2) + var(--legend-gap))
);
right: auto;
top: 50%;
width: var(--legend-w);
max-width: 32vw;
padding: 0.8rem 0.9rem 0.9rem;
/* Liquid-Glass: deutlich transparenter Halbton, kräftige Blur, feine
Highlight-Border und ein zarter Lichtreflex oben + leichter dunkler
Inner-Glow unten, die Legende wirkt wie eine schwebende Glasplatte. */
background:
linear-gradient(150deg,
rgba(255, 255, 255, 0.35) 0%,
rgba(255, 255, 255, 0.18) 50%,
rgba(220, 232, 230, 0.22) 100%);
border: 1px solid rgba(255, 255, 255, 0.45);
border-radius: 14px;
box-shadow: 0 12px 40px rgba(20, 30, 25, 0.14),
0 1px 2px rgba(20, 30, 25, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.85),
inset 0 -1px 0 rgba(20, 30, 25, 0.06);
z-index: 40;
font-size: 0.82rem;
backdrop-filter: blur(28px) saturate(200%);
-webkit-backdrop-filter: blur(28px) saturate(200%);
/* Default: unsichtbar + nach rechts weg-geschoben.
Nur Transform + Opacity → GPU-composited, läuft sauber auf 120 Hz. */
opacity: 0;
transform: translate3d(18px, -50%, 0);
pointer-events: none;
will-change: transform, opacity;
transition: opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.fb-legend-sidebar.fb-legend--visible {
opacity: 1;
transform: translate3d(0, -50%, 0);
pointer-events: auto;
}
/* Hauptseiteninhalt wandert beim Erscheinen der Legende NACH LINKS, ohne
zu schrumpfen oder umzuformatieren. Der Verschiebungsbetrag ist dabei
sicher begrenzt: maximal so weit, bis am linken Viewport-Rand noch eine
16-px-Restkante stehen bleibt. So rutscht der Container nicht teilweise
aus dem Bild, auf engen Viewports verschiebt er sich entsprechend
weniger oder gar nicht. */
body.has-legend-overlay .main {
padding-right: 0;
--legend-shift: max(0px, min(230px, calc((100vw - var(--container-w)) / 2 - 16px)));
transform: translate3d(calc(var(--legend-shift) * -1), 0, 0);
}
.fb-legend-title {
font-weight: 600;
color: #1e3a2a;
font-size: 0.88rem;
margin-bottom: 0.5rem;
letter-spacing: 0.01em;
}
.fb-legend-list {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 0.35rem;
}
.fb-legend-list li {
display: flex; gap: 0.5rem; align-items: flex-start;
line-height: 1.25;
}
.fb-legend-dot {
flex: 0 0 12px;
width: 12px; height: 12px; margin-top: 0.15rem;
border-radius: 3px;
border: 1px solid rgba(0,0,0,0.08);
}
.fb-legend-dot.fb-g { background: rgba(47,158,102,0.75); }
.fb-legend-dot.fb-y { background: rgba(226,186,60,0.9); }
.fb-legend-dot.fb-o { background: rgba(217,119,40,0.9); }
.fb-legend-dot.fb-r { background: rgba(200,55,55,0.8); }
.fb-legend-dot.fb-b { background: rgba(33,108,201,0.75); }
.fb-legend-dot.fb-v { background: rgba(138,73,180,0.8); }
.fb-legend-text strong {
font-weight: 600;
color: #1e3a2a;
font-size: 0.82rem;
}
.fb-legend-desc {
color: #46584e;
font-size: 0.78rem;
}
/* Schmale Viewports: Legende rückt näher zusammen, Beschreibungstext aus.
Schriftgröße in der Legende bleibt explizit unverändert. Hauptcontent
wird auch hier nicht verschoben. */
@media (max-width: 1100px) {
.fb-legend-sidebar {
--legend-w: 180px;
}
.fb-legend-desc { display: none; }
}
@media (max-width: 780px) {
.fb-legend-sidebar {
position: fixed;
right: 0.5rem; left: 0.5rem; bottom: 0.5rem;
top: auto; width: auto; max-width: none;
padding: 0.55rem 0.7rem;
/* Mobile: Fade von unten rein, kein horizontales Offset */
transform: translateY(18px);
}
.fb-legend-sidebar.fb-legend--visible {
transform: translateY(0);
}
.fb-legend-title { margin-bottom: 0.25rem; }
.fb-legend-list {
flex-direction: row; flex-wrap: wrap; gap: 0.5rem 0.9rem;
}
.fb-legend-list li { flex: 1 1 140px; }
/* Mobile: Legende sitzt unten fix → kein horizontaler Shift, dafür
zusätzliches padding-bottom, damit kein Content unter der Legende
verschwindet. */
body.has-legend-overlay .main {
padding-right: 0;
padding-bottom: 120px;
transform: none;
}
}
/* ---- Charts ---- */
.writing-charts {
display: flex; flex-direction: column; gap: 1rem;
margin-top: 1rem;
}
.writing-chart {
background: #ffffff;
border: 1px solid #dde7e1;
border-radius: 10px;
padding: 0.85rem 1rem 1rem;
}
.writing-chart h3 {
margin: 0 0 0.2rem;
font-size: 0.95rem;
color: #1e3a2a;
}
.writing-chart p.text-small { margin-top: 0; margin-bottom: 0.5rem; }
.chart-host {
width: 100%;
overflow-x: auto;
}
.chart-svg {
width: 100%;
height: auto;
max-height: 200px;
}
.chart-tooltip {
position: fixed;
background: #1e3a2a;
color: #fff;
padding: 0.25rem 0.55rem;
border-radius: 4px;
font-size: 0.78rem;
pointer-events: none;
opacity: 0;
transition: opacity 0.12s ease;
z-index: 60;
white-space: nowrap;
box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
/* ---- Zufalls-Pseudonym-Generator (Registrierung Bearbeitende) ---- */
.username-gen-row {
display: flex;
gap: 0.5rem;
align-items: stretch;
flex-wrap: wrap;
}
.username-gen-row input[readonly] {
flex: 1 1 240px;
background: #f4f7f5;
color: #2f4a3d;
font-family: 'Source Sans 3', system-ui, sans-serif;
font-weight: 600;
letter-spacing: 0.01em;
cursor: default;
}
.username-gen-row .btn { flex: 0 0 auto; white-space: nowrap; }
@keyframes usernameFlash {
0% { background: #d7f1de; }
100% { background: #f4f7f5; }
}
.username-flash { animation: usernameFlash 0.8s ease-out; }
/* ---- Tutor-Chat ---- */
.tutor-chat {
display: flex; flex-direction: column; gap: 0.75rem;
background: #f8faf9;
border: 1px solid #dde7e1;
border-radius: 10px;
padding: 1rem;
}
.tutor-chat-log {
display: flex; flex-direction: column; gap: 0.6rem;
max-height: 55vh;
overflow-y: auto;
padding-right: 0.25rem;
}
.tutor-msg {
max-width: 80%;
padding: 0.6rem 0.85rem;
border-radius: 10px;
line-height: 1.45;
font-size: 0.95rem;
white-space: pre-wrap;
word-wrap: break-word;
}
.tutor-msg--ai {
align-self: flex-start;
background: #ffffff;
border: 1px solid #dde7e1;
border-bottom-left-radius: 2px;
}
.tutor-msg--user {
align-self: flex-end;
background: #009260;
color: #fff;
border-bottom-right-radius: 2px;
}
.tutor-msg--system {
align-self: center;
background: #fff7e6;
border: 1px solid #f1e0b5;
color: #6a5416;
font-size: 0.85rem;
font-style: italic;
max-width: 95%;
}
.tutor-msg-meta {
font-size: 0.7rem;
opacity: 0.7;
margin-top: 0.25rem;
}
.tutor-msg--ai .tutor-msg-meta { color: #667065; }
.tutor-msg--user .tutor-msg-meta { color: rgba(255,255,255,0.85); }
/* Breadcrumb über einer KI-Bubble — die Pfad-Zeichen kommen WÖRTLICH aus
der Musterlösung (z. B. "A. › I. › 1. › a) Angebot"). Dezent gestaltet,
damit der Bearbeiter eine Position erkennt, ohne dass die Pfad-Zeile
die eigentliche Frage überdeckt. */
.tutor-breadcrumb {
align-self: flex-start;
max-width: 95%;
margin: 0.1rem 0 -0.2rem 0.1rem;
font-size: 0.75rem;
line-height: 1.3;
color: #5b6c63;
letter-spacing: 0.005em;
}
.tutor-breadcrumb-prefix {
color: #8a9990;
font-weight: 600;
margin-right: 0.15rem;
text-transform: uppercase;
font-size: 0.68rem;
letter-spacing: 0.04em;
}
.tutor-breadcrumb-sep {
color: #b3c2b9;
margin: 0 0.15rem;
}
.tutor-breadcrumb-seg {
color: #5b6c63;
}
.tutor-breadcrumb-seg--last {
color: #084d33;
font-weight: 600;
}
.tutor-input-row {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.tutor-input-row textarea {
width: 100%;
min-height: 80px;
resize: vertical;
box-sizing: border-box;
}
.tutor-status {
font-size: 0.8rem;
color: #667065;
font-style: italic;
min-height: 1em;
}
.tutor-status--error { color: #b33a3a; font-style: normal; }
.tutor-level-banner {
display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap;
background: #eaf6ee;
border: 1px solid #bddcc7;
color: #234d2e;
padding: 0.6rem 0.85rem;
border-radius: 8px;
margin-top: 0.5rem;
}
.tutor-level-banner strong { color: #163a1f; }
.tutor-level-banner .btn { padding: 0.3rem 0.8rem; }
/* Pause-Variante: KI empfiehlt, das Thema später zu wiederholen.
Visuell warm-orange abgesetzt vom Advance-Banner, damit beide auf
einen Blick auseinanderzuhalten sind. */
.tutor-level-banner--pause {
background: #fbf1d9;
border-color: #e7cd8a;
color: #6a5416;
}
.tutor-level-banner--pause strong { color: #4d3c0a; }
/* ---- Fallbearbeitung: Layout-Toggle + Split-View ---- */
.work-pane-toolbar {
display: flex;
justify-content: flex-end;
align-items: center;
margin: 0 0 0.5rem;
}
/* Wrapper für Toggle + Caption "Ansicht" — vertikal gestapelt, mittig
ausgerichtet. */
.layout-toggle-wrap {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 0.18rem;
flex: 0 0 auto;
}
.layout-toggle-caption {
font-size: 0.68rem;
color: #667065;
line-height: 1;
letter-spacing: 0.01em;
user-select: none;
}
/* Header-Reihe oben im Tutor-Chat: links die beiden Fortschritts-Balken
gestapelt, rechts der Ansicht-Toggle. */
.tutor-chat-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
}
.tutor-progress-stack {
display: flex;
flex-direction: column;
gap: 0.4rem;
flex: 1 1 auto;
min-width: 0;
}
.tutor-progress-stack .tutor-progress { margin: 0; }
/* Kurzer Hinweis unter dem Genauigkeits-Balken: erscheint, wenn die KI
die Antwort als inhaltlich vollständig richtig markiert hat, aber wegen
knapper Formulierung trotzdem keine 100 % vergeben hat. Bleibt 5 s
stehen oder verschwindet vorher, sobald eine neue KI-Antwort eintrifft.
Stil bewusst dezent — beruhigend, keine Warnfarbe. */
.tutor-terse-hint {
font-size: 0.78rem;
line-height: 1.25;
color: #2c5d3f;
background: rgba(0, 146, 96, 0.08);
border-left: 3px solid var(--ubt-primary, #009260);
border-radius: 4px;
padding: 0.3rem 0.55rem;
margin-top: 0.1rem;
animation: tutor-terse-fade 220ms ease-out;
}
.tutor-terse-hint[hidden] { display: none; }
@keyframes tutor-terse-fade {
from { opacity: 0; transform: translateY(-2px); }
to { opacity: 1; transform: translateY(0); }
}
/* Rechte Toggle-Gruppe im Tutor-Chat-Header: Lösungsskizze und Ansicht
sitzen unmittelbar nebeneinander, Lösungsskizze links davon. */
.tutor-header-toggles {
display: inline-flex;
align-items: flex-start;
gap: 0.75rem;
flex: 0 0 auto;
}
/* Lösungsskizze-Toggle im Tutor-Chat-Header. Optisch baugleich mit dem
Ansicht-Toggle (Maße, Knob, Beschriftung). Im Ranked-Modus warnt ein
Hold-Confirm-Modal vor dem −35 %-Malus; die rote Inline-Notiz von früher
ist entfallen. Während der Hinführungsfragen bleibt der Knopf gesperrt
(siehe layout-toggle--locked). */
.tutor-titles-toggle[data-state="on"] {
background: rgba(0, 99, 67, 0.16);
border-color: rgba(0, 99, 67, 0.35);
}
.tutor-titles-toggle[data-state="on"] .layout-toggle-knob {
transform: translateX(34px);
}
/* Im Off-Zustand sitzt der Knob über dem Listen-Icon (links); im On-Zustand
slidet er nach rechts und gibt das Icon frei. Wir dimmen das Icon
bewusst nicht in Abhängigkeit des States — es bleibt visuell stabil. */
/* Eigene Icon-Optik: Listen-Aufzählung statt der zwei Rechtecke aus dem
Ansicht-Toggle. Die geerbten Rechteck-Spans und der ::after-Trenner
werden unterdrückt; übrig bleibt das eine SVG im linken Slot. */
.tutor-titles-toggle .tutor-titles-icon { padding: 0; }
.tutor-titles-toggle .tutor-titles-icon > :not(.tutor-titles-icon-svg) { display: none; }
/* Den ererbten ::after-Trenner (horizontale Linie in --stacked bzw. vertikale
Linie in --split) komplett ausschalten — höhere Spezifität als die Default-
Regeln aus .layout-toggle .layout-toggle-icon--stacked::after. */
.tutor-titles-toggle .layout-toggle-icon--stacked::after,
.tutor-titles-toggle .layout-toggle-icon--split::after {
content: none !important;
display: none !important;
background: transparent !important;
}
.tutor-titles-icon-svg {
width: 14px;
height: 14px;
display: block;
fill: rgba(0, 50, 30, 0.55);
stroke: rgba(0, 50, 30, 0.55);
}
.tutor-titles-toggle.layout-toggle--locked {
cursor: not-allowed;
opacity: 0.45;
filter: grayscale(0.5);
}
.tutor-titles-toggle.layout-toggle--locked:hover {
background: rgba(0,0,0,0.06);
}
/* Hold-Confirm-Modal: OK-Knopf muss 3 s gedrückt gehalten werden, damit
die Aktion bestätigt wird. Während des Drückens läuft eine farbige
Füllung von links nach rechts über die ganze Knopfbreite. */
.casecura-hold-confirm-overlay {
position: fixed;
inset: 0;
background: rgba(15, 22, 18, 0.55);
display: flex;
align-items: center;
justify-content: center;
z-index: 1500;
padding: 1.2rem;
animation: cc-hc-fade 0.18s ease-out;
}
@keyframes cc-hc-fade {
from { opacity: 0; }
to { opacity: 1; }
}
.casecura-hold-confirm-dialog {
background: #fff;
border-radius: 14px;
box-shadow: 0 20px 50px rgba(0,0,0,0.35);
max-width: 540px;
width: 100%;
padding: 1.5rem 1.6rem 1.2rem;
color: var(--ubt-dark, #1c2520);
}
.casecura-hold-confirm-title {
margin: 0 0 0.6rem;
font-size: 1.15rem;
font-weight: 600;
}
.casecura-hold-confirm-body p {
margin: 0 0 0.6rem;
line-height: 1.5;
}
.casecura-hold-confirm-body p:last-child { margin-bottom: 0; }
.casecura-hold-confirm-actions {
display: flex;
justify-content: flex-end;
gap: 0.6rem;
margin-top: 1rem;
align-items: stretch;
}
.casecura-hold-confirm-cancel {
align-self: stretch;
}
.casecura-hold-confirm-ok {
position: relative;
overflow: hidden;
border: 1px solid var(--ubt-primary, #009260);
border-radius: 8px;
background: #fff;
color: var(--ubt-primary, #006342);
font: inherit;
font-weight: 600;
padding: 0.6rem 1.1rem;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
-webkit-tap-highlight-color: transparent;
transition: color 0.18s ease, border-color 0.18s ease;
min-width: 200px;
}
.casecura-hold-confirm-ok:hover {
border-color: var(--ubt-primary, #006342);
}
.casecura-hold-confirm-ok.is-holding {
color: #fff;
}
.casecura-hold-confirm-ok-label {
position: relative;
z-index: 1;
}
.casecura-hold-confirm-fill {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: var(--ubt-primary, #009260);
transform-origin: left center;
transform: scaleX(0);
z-index: 0;
pointer-events: none;
}
.casecura-hold-confirm-help {
margin: 0.8rem 0 0;
text-align: right;
}
/* Smooth Layout-Wechsel: Fallback ohne View-Transitions-API. */
.fall-shell {
transition: opacity 0.22s cubic-bezier(.4, 0, .2, 1);
}
.fall-shell--switching {
opacity: 0.35;
}
/* View Transitions API: weicher Crossfade der beiden Panes. */
.case-info-pane { view-transition-name: casecura-case-info; }
.work-pane { view-transition-name: casecura-work-pane; }
::view-transition-old(casecura-case-info),
::view-transition-new(casecura-case-info),
::view-transition-old(casecura-work-pane),
::view-transition-new(casecura-work-pane) {
animation-duration: 360ms;
animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}
.layout-toggle {
position: relative;
width: 64px;
height: 30px;
border: 1px solid rgba(0,0,0,0.10);
border-radius: 999px;
background: rgba(0,0,0,0.06);
padding: 0;
cursor: pointer;
flex-shrink: 0;
transition: background 0.2s ease, border-color 0.2s ease;
}
.layout-toggle:hover { background: rgba(0,0,0,0.10); }
.layout-toggle:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(0, 99, 67, 0.18);
}
.layout-toggle .layout-toggle-icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
pointer-events: none;
transition: opacity 0.18s ease;
}
.layout-toggle .layout-toggle-icon--stacked {
left: 4px;
flex-direction: column;
gap: 3px;
}
.layout-toggle .layout-toggle-icon--split {
right: 4px;
flex-direction: row;
gap: 3px;
}
.layout-toggle .layout-toggle-icon span {
display: block;
background: rgba(0, 50, 30, 0.55);
border-radius: 1.5px;
transition: background 0.18s ease;
}
.layout-toggle .layout-toggle-icon--stacked span {
width: 14px; height: 5px;
}
.layout-toggle .layout-toggle-icon--split span {
width: 5px; height: 14px;
}
/* Dünne Trennlinie zwischen den beiden Rechtecken — geht jeweils ein paar
Pixel über die Rechtecks-Kanten hinaus, damit der Eindruck einer
"Trennfuge" entsteht. */
.layout-toggle .layout-toggle-icon::after {
content: "";
position: absolute;
background: rgba(0, 50, 30, 0.55);
pointer-events: none;
}
.layout-toggle .layout-toggle-icon--stacked::after {
left: 3px;
right: 3px;
top: 50%;
height: 1px;
transform: translateY(-50%);
}
.layout-toggle .layout-toggle-icon--split::after {
top: 3px;
bottom: 3px;
left: 50%;
width: 1px;
transform: translateX(-50%);
}
.layout-toggle .layout-toggle-knob {
position: absolute;
top: 2px;
left: 2px;
width: 24px;
height: 24px;
border-radius: 999px;
background: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.10);
transition: transform 0.42s cubic-bezier(.4, 0, .2, 1);
pointer-events: none;
}
.layout-toggle[data-state="split"] {
background: rgba(0, 99, 67, 0.16);
border-color: rgba(0, 99, 67, 0.35);
}
.layout-toggle[data-state="split"] .layout-toggle-knob {
transform: translateX(34px);
}
.layout-toggle[data-state="stacked"] .layout-toggle-icon--split { opacity: 0.55; }
.layout-toggle[data-state="split"] .layout-toggle-icon--stacked { opacity: 0.55; }
.layout-toggle--locked {
cursor: not-allowed;
opacity: 0.55;
filter: grayscale(0.4);
}
.fall-shell {
margin-top: 0;
}
@media (min-width: 1024px) {
.fall-shell[data-layout="split"] {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: 1.5rem;
align-items: start;
}
/* Linke Spalte: Bearbeitungsbereich. Volle Viewport-Höhe als
Flex-Container, damit der Chat-Log schrumpft und die Bedienelemente
(Fortschritts-Balken, Eingabe, Buttons) immer sichtbar bleiben. */
.fall-shell[data-layout="split"] .work-pane {
grid-column: 1;
grid-row: 1;
position: sticky;
top: 1rem;
height: calc(100vh - 2rem);
max-height: calc(100vh - 2rem);
display: flex;
flex-direction: column;
overflow: hidden;
padding-right: 0.25rem;
}
.fall-shell[data-layout="split"] .work-pane > .work-pane-toolbar {
flex: 0 0 auto;
}
.fall-shell[data-layout="split"] .work-pane > .case-section {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
margin-bottom: 0;
}
.fall-shell[data-layout="split"] .work-pane .tutor-chat {
flex: 1 1 auto;
min-height: 0;
}
.fall-shell[data-layout="split"] .work-pane .tutor-chat-log {
flex: 1 1 0;
min-height: 0;
max-height: none;
}
/* Klausurmodus: Antwort-Textarea wächst flexibel mit, Buttons bleiben unten. */
.fall-shell[data-layout="split"] .work-pane #feedback-form {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
.fall-shell[data-layout="split"] .work-pane #feedback-form textarea {
flex: 1 1 0;
min-height: 0;
resize: none;
}
/* Rechte Spalte: Fall-Info. Eigener Scroll, unabhängig vom Chat. */
.fall-shell[data-layout="split"] .case-info-pane {
grid-column: 2;
grid-row: 1;
position: sticky;
top: 1rem;
max-height: calc(100vh - 2rem);
overflow: auto;
padding-right: 0.25rem;
}
.fall-shell[data-layout="split"] .case-info-pane .case-section {
margin-bottom: 1rem;
}
}
.tutor-advance-toggle-slot {
display: flex;
justify-content: flex-end;
margin: 0.2rem 0 0.35rem;
min-height: 0;
}
.tutor-advance-toggle-slot:empty {
display: none;
}
.tutor-advance-toggle {
padding: 0.32rem 0.7rem;
font-size: 0.82rem;
background: rgba(0, 99, 67, 0.08);
border: 1px solid rgba(0, 99, 67, 0.35);
color: #1f5135;
border-radius: 999px;
display: inline-flex;
align-items: center;
gap: 0.35rem;
line-height: 1.1;
transition: background 0.15s ease, transform 0.1s ease;
}
.tutor-advance-toggle:hover {
background: rgba(0, 99, 67, 0.16);
transform: translateY(-1px);
}
.tutor-advance-toggle .tutor-advance-toggle-icon {
font-size: 0.95em;
line-height: 1;
}
.tutor-progress {
display: flex; align-items: center; gap: 0.5rem;
font-size: 0.8rem;
color: #546159;
}
.tutor-progress-bar {
flex: 1 1 140px; max-width: 200px;
height: 6px;
background: #dde7e1;
border-radius: 999px;
overflow: hidden;
}
.tutor-progress-fill {
height: 100%;
background: linear-gradient(90deg, #4fb57a, #00a46c);
width: 0%;
transition: width 0.4s ease;
}
.tutor-progress-fill--coverage {
background: linear-gradient(90deg, #6aa9e0, #2a6fbf);
}
.tutor-typing-wrap {
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: #667065;
font-style: italic;
}
.tutor-typing-label {
font-size: 0.92rem;
}
/* ---- Case-Grid für Studenten ---- */
.case-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
gap: 1rem;
margin-top: 0.5rem;
}
.case-card {
display: flex; flex-direction: column; gap: 0.6rem;
}
.case-card-head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem;
}
.case-card-title {
margin: 0;
font-size: 1.15rem;
line-height: 1.3;
}
@media (max-width: 720px) {
.diff-slider { min-width: 0; width: 100%; }
.diff-slider-option { padding: 0.4rem 0.3rem; font-size: 0.78rem; }
}
/* ============================================================================
Gamification, Score-Reveal, Ranking, Podium, Ranked-Tab
============================================================================ */
/* ---- Score-Reveal-Karte (Klausur + Tutor-Finalize) ---- */
.score-reveal {
position: relative;
overflow: hidden;
border-radius: 16px;
padding: 1.4rem 1.5rem 1.2rem;
/* Klare visuelle Trennung zwischen Action-Buttons (Feedback erhalten /
Zurück zur Übersicht) und der Karte "Iterativer Versuch +n Punkte". */
margin-top: 2.4rem;
margin-bottom: 1rem;
background: linear-gradient(135deg, #f6fbf7 0%, #eaf3ec 100%);
border: 1px solid #cfe2d6;
box-shadow: 0 4px 18px rgba(20,40,30,0.06);
}
.score-reveal.reveal-mode-gefuehrt { background: linear-gradient(135deg, #f3f7fb 0%, #e3edf6 100%); border-color: #c8d8e6; }
.score-reveal.reveal-mode-unterstuetzt { background: linear-gradient(135deg, #fffbe1 0%, #fff5b8 100%); border-color: #ebd270; }
.score-reveal.reveal-mode-frei { background: linear-gradient(135deg, #f1faf3 0%, #d8efe0 100%); border-color: #a9d6bb; }
.score-reveal-glow {
position: absolute; inset: -40%;
background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.65), transparent 55%);
opacity: 0;
pointer-events: none;
transition: opacity 0.6s ease;
}
.score-reveal-glow.is-active {
opacity: 1;
animation: scoreGlowPulse 1.4s ease-out;
}
@keyframes scoreGlowPulse {
0% { transform: scale(0.85); opacity: 0; }
35% { opacity: 0.9; }
100% { transform: scale(1.05); opacity: 0; }
}
.score-reveal-head {
display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
}
.score-reveal-label {
font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase;
color: #4b5b51;
}
.score-reveal-total {
font-family: var(--sans); font-weight: 700;
font-size: 2.6rem;
color: #0e8055;
font-variant-numeric: tabular-nums;
text-shadow: 0 0 0 transparent;
transition: text-shadow 0.4s ease;
}
.reveal-mode-gefuehrt .score-reveal-total { color: #2563a6; }
.reveal-mode-unterstuetzt .score-reveal-total { color: #8a6a00; }
.score-reveal-suffix { font-size: 1.05rem; color: #4b5b51; }
.reveal-breakdown {
list-style: none;
margin: 0.9rem 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0.6rem;
}
.reveal-bd-item {
background: rgba(255,255,255,0.65);
border: 1px solid rgba(0,0,0,0.05);
border-radius: 10px;
padding: 0.55rem 0.8rem;
display: flex; flex-direction: column; gap: 0.15rem;
}
.reveal-bd-label { font-size: 0.78rem; color: #5a6a60; letter-spacing: 0.04em; }
.reveal-bd-value { font-size: 0.97rem; color: #1e3a2a; font-weight: 600; }
.reveal-multiplier-badge {
margin-top: 0.85rem;
background: #ffe9b8;
border: 1px solid #f1d27a;
color: #6b4d10;
border-radius: 999px;
padding: 0.45rem 0.95rem;
font-size: 0.92rem;
display: inline-block;
}
.reveal-multiplier-badge.reveal-mid {
background: #f0f5ec; border-color: #d4e0c2; color: #4d5e2e;
}
/* ---- Dashboard-Podium (Top 3) ---- */
.ranking-section { margin-top: 1.5rem; }
.podium-wrap { margin: 1.2rem 0 1.4rem; }
.podium {
list-style: none;
margin: 0;
padding: 1rem 0 0;
display: grid;
grid-template-columns: 1fr 1.1fr 1fr;
align-items: end;
gap: 0.9rem;
max-width: 720px;
margin-left: auto; margin-right: auto;
}
.podium-item {
position: relative;
text-align: center;
background: #fff;
border: 1px solid #d8e1dc;
border-radius: 14px 14px 6px 6px;
padding: 1rem 0.7rem 0;
box-shadow: 0 4px 18px rgba(20,40,30,0.06);
overflow: hidden;
}
.podium-place-1 {
border-color: #d4b94a;
background: linear-gradient(180deg, #fff8df 0%, #ffffff 60%);
}
.podium-place-2 { border-color: #c8c8c8; background: linear-gradient(180deg, #f4f4f4 0%, #ffffff 60%); }
.podium-place-3 { border-color: #d3a779; background: linear-gradient(180deg, #fbeedf 0%, #ffffff 60%); }
.podium-medal { font-size: 2.2rem; line-height: 1; margin-bottom: 0.3rem; }
.podium-name { font-weight: 700; color: #1e3a2a; font-size: 1.05rem; }
.podium-points {
margin-top: 0.4rem; font-family: var(--sans); font-weight: 700;
font-size: 1.6rem; color: #0e8055;
}
.podium-points span { font-size: 0.85rem; color: #5a6a60; font-weight: 500; margin-left: 0.15rem; }
.podium-meta { font-size: 0.78rem; color: #6a7a70; margin-top: 0.15rem; }
.podium-block {
margin-top: 0.9rem;
background: linear-gradient(180deg, #1e3a2a 0%, #2c5240 100%);
color: #f7faf8;
padding: 1.1rem 0.4rem;
font-weight: 700;
border-radius: 4px 4px 0 0;
}
.podium-place-1 .podium-block { padding-top: 1.7rem; padding-bottom: 1.6rem; }
.podium-place-2 .podium-block { padding-top: 1.3rem; padding-bottom: 1.3rem; }
.podium-place-3 .podium-block { padding-top: 0.9rem; padding-bottom: 1.0rem; }
.podium-rank { font-size: 1.05rem; letter-spacing: 0.08em; }
.podium-item.is-me {
outline: 2px solid #13a06a;
outline-offset: 2px;
}
@media (max-width: 600px) {
.podium { grid-template-columns: 1fr; max-width: 360px; }
.podium-block { padding: 0.7rem 0.4rem !important; }
}
/* ---- Restliche Ranking-Liste (Plätze 4-10) ---- */
.rank-list { list-style: none; margin: 0; padding: 0; }
.rank-row {
display: grid;
grid-template-columns: 3rem 1fr auto auto;
align-items: center;
gap: 0.9rem;
padding: 0.55rem 0.4rem;
border-bottom: 1px solid #eef2ee;
}
.rank-row:last-child { border-bottom: 0; }
.rank-row.is-me { background: #f0fbf4; border-radius: 8px; padding-left: 0.55rem; padding-right: 0.55rem; }
.rank-pos { font-weight: 700; color: #4b5b51; }
.rank-name { font-weight: 600; color: #1e3a2a; }
.rank-meta { font-size: 0.82rem; color: #6a7a70; }
.rank-pts { font-weight: 700; color: #0e8055; font-variant-numeric: tabular-nums; }
/* ---- Ranked-Seite ---- */
.ranked-hero {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0.9rem;
margin: 0.6rem 0 1.4rem;
}
.ranked-hero-card {
background: #fff;
border: 1px solid #e0e8e3;
border-radius: 12px;
padding: 0.95rem 1.1rem;
box-shadow: 0 1px 3px rgba(20,40,30,0.04);
}
.ranked-hero-rank { background: linear-gradient(135deg, #f1faf3 0%, #ffffff 100%); border-color: #cfe7d6; }
/* ==============================
Treppchen-Plätze 1–3: Premium-Metallic-Look mit Lichtreflexionen,
3D-Inset-Highlights und einer Hover-Animation, die Glücksgefühle
herbeiführen soll. Plätze 4+ behalten den ruhigen Standard-Look oben.
============================== */
.ranked-hero-rank.is-rank-1,
.ranked-hero-rank.is-rank-2,
.ranked-hero-rank.is-rank-3 {
position: relative;
overflow: hidden;
isolation: isolate;
transition:
transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
filter 0.4s ease;
}
/* Inhalte (Label, Wert, Meta) liegen über den Pseudo-Lichteffekten. */
.ranked-hero-rank.is-rank-1 > *,
.ranked-hero-rank.is-rank-2 > *,
.ranked-hero-rank.is-rank-3 > * {
position: relative;
z-index: 2;
}
/* Kontinuierlicher, dezenter Shine-Sweep — die Karte „lebt" auch ohne Hover. */
.ranked-hero-rank.is-rank-1::before,
.ranked-hero-rank.is-rank-2::before,
.ranked-hero-rank.is-rank-3::before {
content: '';
position: absolute;
inset: -40% -40%;
background: linear-gradient(115deg,
transparent 40%,
rgba(255, 255, 255, 0.0) 47%,
rgba(255, 255, 255, 0.85) 50%,
rgba(255, 255, 255, 0.0) 53%,
transparent 60%);
transform: translateX(-100%);
animation: rankShine 7s ease-in-out infinite 1.5s;
pointer-events: none;
mix-blend-mode: screen;
z-index: 1;
}
/* Funkel-Schicht — fünf feine Lichtpunkte, nur beim Hover sichtbar. */
.ranked-hero-rank.is-rank-1::after,
.ranked-hero-rank.is-rank-2::after,
.ranked-hero-rank.is-rank-3::after {
content: '';
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
z-index: 1;
background:
radial-gradient(circle 2px at 18% 28%, rgba(255,255,255,0.95), transparent 72%),
radial-gradient(circle 1.5px at 72% 58%, rgba(255,255,255,0.90), transparent 72%),
radial-gradient(circle 2.5px at 55% 82%, rgba(255,255,255,1.00), transparent 72%),
radial-gradient(circle 1px at 88% 22%, rgba(255,255,255,0.85), transparent 72%),
radial-gradient(circle 1.5px at 32% 70%, rgba(255,255,255,0.90), transparent 72%);
mix-blend-mode: screen;
transition: opacity 0.35s ease;
}
.ranked-hero-rank.is-rank-1:hover,
.ranked-hero-rank.is-rank-2:hover,
.ranked-hero-rank.is-rank-3:hover {
transform: translateY(-4px) scale(1.025);
filter: saturate(1.12) brightness(1.04);
}
.ranked-hero-rank.is-rank-1:hover::before,
.ranked-hero-rank.is-rank-2:hover::before,
.ranked-hero-rank.is-rank-3:hover::before {
animation: rankShineFast 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}
.ranked-hero-rank.is-rank-1:hover::after,
.ranked-hero-rank.is-rank-2:hover::after,
.ranked-hero-rank.is-rank-3:hover::after {
animation: rankSparkle 1.4s ease-in-out;
}
@keyframes rankShine {
0% { transform: translateX(-100%); }
35% { transform: translateX(100%); }
100% { transform: translateX(100%); }
}
@keyframes rankShineFast {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
@keyframes rankSparkle {
0% { opacity: 0; transform: scale(0.92) rotate(-2deg); }
25% { opacity: 1; transform: scale(1.02) rotate(1deg); }
75% { opacity: 1; transform: scale(1.06) rotate(-1deg); }
100% { opacity: 0; transform: scale(0.98) rotate(0deg); }
}
/* === GOLD: Platz 1 ===
* Gradient mit gemilderten Dunkelbändern, weicher Inner-Highlight-Veil über
* der Kartenmitte für höhere Schrift-Lesbarkeit, KEINE harte Border, dafür
* ein elliptischer Mask-Fade, der die Karte zu allen Seiten hin sanft in
* die Seite ausblutet. Mehrstufige Außen-Aura schließt den Übergang. */
.ranked-hero-rank.is-rank-1 {
background:
radial-gradient(ellipse 130% 85% at 50% 50%,
rgba(255, 255, 255, 0.32) 0%,
rgba(255, 255, 255, 0.0) 60%),
linear-gradient(135deg,
#fff8c0 0%,
#f3cc52 16%,
#d8a420 36%,
#ffe890 50%,
#d09e1c 64%,
#f6d568 84%,
#fff8c4 100%);
border-color: transparent;
-webkit-mask-image: radial-gradient(ellipse 112% 108% at 50% 50%,
#000 0%,
#000 50%,
rgba(0,0,0,0.92) 64%,
rgba(0,0,0,0.70) 74%,
rgba(0,0,0,0.45) 83%,
rgba(0,0,0,0.22) 90%,
rgba(0,0,0,0.07) 96%,
transparent 100%);
mask-image: radial-gradient(ellipse 112% 108% at 50% 50%,
#000 0%,
#000 50%,
rgba(0,0,0,0.92) 64%,
rgba(0,0,0,0.70) 74%,
rgba(0,0,0,0.45) 83%,
rgba(0,0,0,0.22) 90%,
rgba(0,0,0,0.07) 96%,
transparent 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.85),
inset 0 -10px 22px -10px rgba(110, 75, 0, 0.28),
0 6px 22px rgba(200, 150, 30, 0.20),
0 0 80px rgba(255, 215, 60, 0.30),
0 0 200px rgba(255, 215, 60, 0.16);
}
.ranked-hero-rank.is-rank-1 .ranked-hero-label,
.ranked-hero-rank.is-rank-1 .ranked-hero-meta {
color: #4a3300;
opacity: 0.92;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}
.ranked-hero-rank.is-rank-1 .ranked-hero-value {
background: linear-gradient(180deg, #fff5b0 0%, #8b6300 50%, #ffe48a 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter: drop-shadow(0 1px 1px rgba(110, 75, 0, 0.35));
}
.ranked-hero-rank.is-rank-1:hover {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.95),
inset 0 -10px 22px -10px rgba(110, 75, 0, 0.32),
0 14px 34px rgba(200, 150, 30, 0.35),
0 0 110px rgba(255, 215, 60, 0.50),
0 0 240px rgba(255, 215, 60, 0.26);
}
/* === SILBER: Platz 2 === */
.ranked-hero-rank.is-rank-2 {
background:
radial-gradient(ellipse 130% 85% at 50% 50%,
rgba(255, 255, 255, 0.40) 0%,
rgba(255, 255, 255, 0.0) 60%),
linear-gradient(135deg,
#ffffff 0%,
#dde3eb 16%,
#aab4c0 36%,
#f1f4f8 50%,
#9aa4b0 64%,
#d6dce4 84%,
#ffffff 100%);
border-color: transparent;
-webkit-mask-image: radial-gradient(ellipse 112% 108% at 50% 50%,
#000 0%,
#000 50%,
rgba(0,0,0,0.92) 64%,
rgba(0,0,0,0.70) 74%,
rgba(0,0,0,0.45) 83%,
rgba(0,0,0,0.22) 90%,
rgba(0,0,0,0.07) 96%,
transparent 100%);
mask-image: radial-gradient(ellipse 112% 108% at 50% 50%,
#000 0%,
#000 50%,
rgba(0,0,0,0.92) 64%,
rgba(0,0,0,0.70) 74%,
rgba(0,0,0,0.45) 83%,
rgba(0,0,0,0.22) 90%,
rgba(0,0,0,0.07) 96%,
transparent 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.95),
inset 0 -10px 22px -10px rgba(60, 70, 82, 0.26),
0 6px 22px rgba(120, 132, 145, 0.20),
0 0 80px rgba(200, 210, 225, 0.36),
0 0 200px rgba(200, 210, 225, 0.18);
}
.ranked-hero-rank.is-rank-2 .ranked-hero-label,
.ranked-hero-rank.is-rank-2 .ranked-hero-meta {
color: #2a3645;
opacity: 0.92;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
.ranked-hero-rank.is-rank-2 .ranked-hero-value {
background: linear-gradient(180deg, #ffffff 0%, #4f5a6a 50%, #ecf0f5 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter: drop-shadow(0 1px 1px rgba(60, 70, 82, 0.35));
}
.ranked-hero-rank.is-rank-2:hover {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 1),
inset 0 -10px 22px -10px rgba(60, 70, 82, 0.30),
0 14px 34px rgba(120, 132, 145, 0.35),
0 0 110px rgba(200, 210, 225, 0.60),
0 0 240px rgba(200, 210, 225, 0.30);
}
/* === BRONZE: Platz 3 === */
.ranked-hero-rank.is-rank-3 {
background:
radial-gradient(ellipse 130% 85% at 50% 50%,
rgba(255, 245, 230, 0.38) 0%,
rgba(255, 245, 230, 0.0) 60%),
linear-gradient(135deg,
#fadbb4 0%,
#d8a062 16%,
#a25e22 36%,
#f3c692 50%,
#985318 64%,
#d49b62 84%,
#fadcb6 100%);
border-color: transparent;
-webkit-mask-image: radial-gradient(ellipse 112% 108% at 50% 50%,
#000 0%,
#000 50%,
rgba(0,0,0,0.92) 64%,
rgba(0,0,0,0.70) 74%,
rgba(0,0,0,0.45) 83%,
rgba(0,0,0,0.22) 90%,
rgba(0,0,0,0.07) 96%,
transparent 100%);
mask-image: radial-gradient(ellipse 112% 108% at 50% 50%,
#000 0%,
#000 50%,
rgba(0,0,0,0.92) 64%,
rgba(0,0,0,0.70) 74%,
rgba(0,0,0,0.45) 83%,
rgba(0,0,0,0.22) 90%,
rgba(0,0,0,0.07) 96%,
transparent 100%);
box-shadow:
inset 0 1px 0 rgba(255, 240, 220, 0.85),
inset 0 -10px 22px -10px rgba(70, 35, 5, 0.28),
0 6px 22px rgba(160, 95, 30, 0.20),
0 0 80px rgba(220, 145, 80, 0.32),
0 0 200px rgba(220, 145, 80, 0.18);
}
.ranked-hero-rank.is-rank-3 .ranked-hero-label,
.ranked-hero-rank.is-rank-3 .ranked-hero-meta {
color: #3d1c06;
opacity: 0.92;
text-shadow: 0 1px 0 rgba(255, 245, 230, 0.55);
}
.ranked-hero-rank.is-rank-3 .ranked-hero-value {
background: linear-gradient(180deg, #fadbb4 0%, #592a08 50%, #f0bc88 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter: drop-shadow(0 1px 1px rgba(70, 35, 5, 0.35));
}
.ranked-hero-rank.is-rank-3:hover {
box-shadow:
inset 0 1px 0 rgba(255, 240, 220, 0.95),
inset 0 -10px 22px -10px rgba(70, 35, 5, 0.32),
0 14px 34px rgba(160, 95, 30, 0.35),
0 0 110px rgba(220, 145, 80, 0.50),
0 0 240px rgba(220, 145, 80, 0.28);
}
/* Bewegungsempfindliche Nutzer:innen: alle Animationen werden zurückgenommen,
die Karten bleiben aber farbig und hochwertig. */
@media (prefers-reduced-motion: reduce) {
.ranked-hero-rank.is-rank-1::before,
.ranked-hero-rank.is-rank-2::before,
.ranked-hero-rank.is-rank-3::before { animation: none; }
.ranked-hero-rank.is-rank-1:hover,
.ranked-hero-rank.is-rank-2:hover,
.ranked-hero-rank.is-rank-3:hover { transform: none; filter: none; }
.ranked-hero-rank.is-rank-1:hover::after,
.ranked-hero-rank.is-rank-2:hover::after,
.ranked-hero-rank.is-rank-3:hover::after { animation: none; opacity: 1; }
}
.ranked-hero-label { font-size: 0.78rem; color: #5a6a60; letter-spacing: 0.04em; text-transform: uppercase; }
.ranked-hero-value {
font-family: var(--sans); font-weight: 700;
font-size: 1.85rem; color: #0e8055; margin: 0.1rem 0;
font-variant-numeric: tabular-nums;
}
.ranked-hero-meta { font-size: 0.82rem; color: #6a7a70; }
.ranked-empty .lead { margin-bottom: 0.5rem; }
.ranked-chart-card { padding: 0.6rem 0.9rem 0.5rem; }
.ranked-chart { width: 100%; height: 200px; display: block; }
.ranked-chart-legend { margin: 0.2rem 0 0; }
.ranked-mode-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 0.8rem;
padding: 1rem;
}
/* Modus-Karten in der Ranked-Statistik: gleiches Design wie die
* "Deine Position"-Kachel oben (.ranked-hero-rank) — diagonaler Verlauf von
* einem zarten Pastell-Ton nach Weiß, getönte Border, dezenter Schatten.
* Farbachse aus dem Schwierigkeits-Slider: Geführt = Grün,
* Unterstützt = Übergangsmischton, Frei = Dunkelorange. */
.ranked-mode-card {
background: #fff;
border: 1px solid #e0e8e3;
border-radius: 12px;
padding: 0.95rem 1.1rem;
box-shadow: 0 1px 3px rgba(20,40,30,0.04);
}
/* Bewusst dezent: gleicher Farbton, aber deutlich weniger Sättigung im
* Verlauf und in der Border. Die Modus-Identität bleibt erkennbar, drängt
* sich aber nicht in den Vordergrund. */
.ranked-mode-gefuehrt {
background: linear-gradient(135deg, #f3faf5 0%, #ffffff 100%);
border-color: #d8e8de;
}
.ranked-mode-unterstuetzt {
background: linear-gradient(135deg, #fffaea 0%, #ffffff 100%);
border-color: #ecdfb4;
}
.ranked-mode-frei {
background: linear-gradient(135deg, #fdf3ea 0%, #ffffff 100%);
border-color: #ecd4bd;
}
.ranked-mode-label { font-size: 0.82rem; color: #5a6a60; letter-spacing: 0.04em; text-transform: uppercase; }
.ranked-mode-pts {
font-family: var(--sans); font-weight: 700; font-size: 1.45rem;
color: #0e8055; font-variant-numeric: tabular-nums; margin: 0.1rem 0;
}
.ranked-mode-gefuehrt .ranked-mode-pts { color: #1f6f43; }
.ranked-mode-unterstuetzt .ranked-mode-pts { color: #7a6005; }
.ranked-mode-frei .ranked-mode-pts { color: #8b4310; }
.ranked-mode-pts span { font-size: 0.8rem; color: #5a6a60; font-weight: 500; }
.ranked-mode-meta { font-size: 0.82rem; color: #6a7a70; }
.ranked-tipdist { padding: 1rem; }
.ranked-tipbars { display: flex; flex-direction: column; gap: 0.55rem; }
.ranked-tipbar {
display: grid;
grid-template-columns: 9rem 1fr 6rem;
align-items: center;
gap: 0.7rem;
}
.ranked-tipbar-label { font-size: 0.88rem; color: #4b5b51; }
.ranked-tipbar-track {
height: 8px; background: #eef2ee; border-radius: 999px; overflow: hidden;
}
.ranked-tipbar-fill { height: 100%; background: #b6c8be; transition: width 0.6s ease; }
.ranked-tipbar-fill.ranked-tipbar-none { background: #13a06a; }
.ranked-tipbar-fill.ranked-tipbar-few { background: #d4a13b; }
.ranked-tipbar-fill.ranked-tipbar-many { background: #b95a4f; }
.ranked-tipbar-val { font-size: 0.82rem; color: #6a7a70; text-align: right; font-variant-numeric: tabular-nums; }
.ranked-history { padding: 0.5rem 1rem; }
.ranked-history-list { list-style: none; margin: 0; padding: 0; }
.ranked-history-item { padding: 0.65rem 0; border-bottom: 1px solid #eef2ee; }
.ranked-history-item:last-child { border-bottom: 0; }
.ranked-history-head {
display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
}
.ranked-history-pts { font-weight: 700; color: #0e8055; font-variant-numeric: tabular-nums; }
.ranked-history-mode {
font-size: 0.78rem; padding: 0.15rem 0.55rem; border-radius: 999px;
background: #eef5f0; color: #1e3a2a;
}
.ranked-history-mode.ranked-mode-gefuehrt { background: #e3edf6; color: #2563a6; }
.ranked-history-mode.ranked-mode-unterstuetzt { background: #fff4b8; color: #735900; }
.ranked-history-mode.ranked-mode-frei { background: #d8efe0; color: #0e8055; }
.ranked-history-time { font-size: 0.78rem; color: #6a7a70; margin-left: auto; }
.ranked-history-bd {
margin-top: 0.3rem;
font-size: 0.85rem; color: #4b5b51;
display: flex; flex-wrap: wrap; gap: 0.4rem 1rem;
}
.ranked-bd-item strong { color: #1e3a2a; }
.ranked-mini-list { list-style: none; margin: 0; padding: 0; }
.ranked-mini-row {
display: grid; grid-template-columns: 3rem 1fr auto;
gap: 0.7rem; align-items: center;
padding: 0.4rem 0.4rem;
border-bottom: 1px solid #eef2ee;
}
.ranked-mini-row:last-child { border-bottom: 0; }
.ranked-mini-row.is-me { background: #f0fbf4; border-radius: 6px; }
.ranked-mini-rank { font-weight: 700; color: #4b5b51; }
.ranked-mini-name { color: #1e3a2a; font-weight: 600; }
.ranked-mini-pts { color: #0e8055; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Tutor-Finalize-Block */
.tutor-finalize { margin-top: 1.2rem; }
.tutor-final-feedback { margin-top: 0.8rem; }
/* ---- Iterativ / Cap-Hinweise im Score-Reveal ---- */
.score-reveal.is-iteration {
background: linear-gradient(135deg, #f5f5f0 0%, #ecebe2 100%);
border-color: #d3d0bf;
}
.score-reveal.is-iteration .score-reveal-total { color: #5a6a60; }
/* ---- User-Feedback-Formular nach Bewertung ---- */
.att-feedback {
margin-top: 1rem;
padding: 1rem 1.2rem 1.2rem;
}
.att-feedback h3 { margin: 0 0 0.3rem; }
.att-feedback-label {
display: block;
margin-top: 0.7rem;
font-size: 0.86rem;
color: #4b5b51;
}
.att-feedback-scale {
display: flex; flex-wrap: wrap; gap: 0.3rem;
margin-top: 0.4rem;
}
.att-feedback-scale-opt {
flex: 1 1 auto; min-width: 38px;
text-align: center;
cursor: pointer;
user-select: none;
}
.att-feedback-scale-opt input { position: absolute; opacity: 0; pointer-events: none; }
.att-feedback-scale-opt span {
display: block;
padding: 0.45rem 0.2rem;
border: 1px solid #d2dad5;
border-radius: 8px;
background: #ffffff;
transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
font-weight: 600;
color: #4b5b51;
}
.att-feedback-scale-opt:hover span { background: #f0f5f1; }
.att-feedback-scale-opt input:checked + span {
background: #13a06a;
border-color: #0e8055;
color: #fff;
transform: translateY(-1px);
}
.att-feedback textarea {
width: 100%;
margin-top: 0.3rem;
padding: 0.55rem 0.7rem;
border: 1px solid #d2dad5;
border-radius: 8px;
font-family: inherit;
font-size: 0.95rem;
resize: vertical;
}
.att-feedback-actions {
margin-top: 0.85rem;
display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
}
.att-feedback-status.is-error { color: #b95a4f; }
.att-feedback-thanks {
margin-top: 1rem; padding: 0.8rem 1rem;
background: #f0fbf4; border: 1px solid #c8e7d2; color: #1e3a2a;
border-radius: 10px;
}
.att-feedback-skipped {
margin-top: 1rem;
color: #6a7a70;
}
/* ---- Feedback-Popup (Modal) ---- */
.att-feedback-popup-overlay {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
background: rgba(20, 30, 25, 0.45);
backdrop-filter: blur(6px) saturate(140%);
-webkit-backdrop-filter: blur(6px) saturate(140%);
opacity: 0;
pointer-events: none;
transition: opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.att-feedback-popup-overlay.is-visible {
opacity: 1;
pointer-events: auto;
}
.att-feedback-popup {
position: relative;
width: 100%;
max-width: 540px;
background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(248,250,247,0.94));
border: 1px solid rgba(20,30,25,0.08);
border-radius: 18px;
box-shadow: 0 20px 60px rgba(20,30,25,0.22),
0 4px 12px rgba(20,30,25,0.08),
inset 0 1px 0 rgba(255,255,255,0.85);
padding: 1.6rem 1.7rem 1.4rem;
transform: translateY(14px) scale(0.985);
transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.att-feedback-popup-overlay.is-visible .att-feedback-popup {
transform: translateY(0) scale(1);
}
.att-feedback-popup .att-feedback {
/* Innerhalb des Popups KEINE doppelte Card-Optik, die Hülle ist die Karte. */
background: transparent;
border: 0;
box-shadow: none;
padding: 0;
margin: 0;
}
.att-feedback-popup .att-feedback h3 { margin-top: 0; }
.att-feedback-popup-close {
position: absolute;
top: 0.55rem;
right: 0.7rem;
width: 2rem;
height: 2rem;
border: 0;
background: transparent;
color: #4b5b51;
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
border-radius: 50%;
transition: background 0.15s ease, color 0.15s ease;
}
.att-feedback-popup-close:hover {
background: rgba(20, 30, 25, 0.08);
color: #1e3a2a;
}
@media (max-width: 600px) {
.att-feedback-popup { padding: 1.2rem 1.2rem 1rem; border-radius: 14px; }
}
/* ---- Case-Analysis (Lehrenden-Auswertung) ---- */
.case-analysis-status {
display: flex; align-items: center; gap: 0.6rem;
background: #fdf7e6; border: 1px solid #f1e0b5; color: #6a5416;
padding: 0.6rem 0.9rem; border-radius: 8px; margin: 0.6rem 0 1rem;
font-size: 0.92rem;
}
.case-analysis-error {
background: #fbecec; border: 1px solid #e9c9c9; color: #7a2b2b;
padding: 0.55rem 0.85rem; border-radius: 8px; margin-bottom: 1rem;
font-size: 0.88rem;
}
.case-analysis-empty .lead { margin-bottom: 0.4rem; }
.ca-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1rem;
margin-top: 1rem;
}
.ca-list {
margin: 0; padding-left: 1.1rem;
color: #1e3a2a;
font-size: 0.95rem;
line-height: 1.55;
}
.ca-list li { margin-bottom: 0.3rem; }
/* ---- Lehrenden-Statistik (statistik_lehrend.php) ---- */
.ls-bars {
display: flex; flex-direction: column; gap: 0.5rem;
}
.ls-bar-row {
display: grid;
grid-template-columns: minmax(80px, 1fr) minmax(120px, 2fr) minmax(80px, auto);
gap: 0.7rem;
align-items: center;
font-size: 0.92rem;
}
.ls-bar-label { color: #1e3a2a; font-weight: 500; }
.ls-bar-track {
background: #ecf1ec; border-radius: 999px; height: 0.6rem; overflow: hidden;
}
.ls-bar-fill {
background: linear-gradient(90deg, #0e8055 0%, #2faa7f 100%);
height: 100%;
border-radius: 999px;
transition: width 0.3s ease;
}
.ls-bar-value { color: #3b5569; text-align: right; font-variant-numeric: tabular-nums; }
.ls-bars-hint { margin: 0.6rem 0 0; }
.ls-hint-help-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 1rem;
}
.ls-hint-help-cell {
text-align: center; padding: 0.6rem 0.4rem;
background: #f7faf7; border-radius: 10px;
}
.ls-toolbar {
display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem;
justify-content: space-between;
padding: 0.6rem 0.9rem;
background: #f7faf7;
border: 1px solid #e6ece6;
border-radius: 10px;
margin: 0.4rem 0 1.2rem;
}
.ls-toolbar-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.ls-locked {
border-left: 4px solid #c8a93a;
background: #fdf9ec;
}
.ls-locked h3 { margin-top: 0; }
.ls-locked-hint { margin: 1rem 0 0; }
.ls-progress-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem;
margin-top: 1rem;
}
.ls-progress-card {
text-align: center; padding: 0.8rem 0.6rem;
background: #fff; border-radius: 10px;
border: 1px solid #ecdfb1;
}
/* ---- Sachverhalt-Textmarker (highlighter.js) ---- */
.case-text[data-highlightable="1"] {
-webkit-user-select: text;
user-select: text;
}
.case-text.hl-cursor { cursor: text; }
.hl {
border-radius: 2px;
padding: 0 0.05em;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.hl-yellow { background: #fff59d; }
.hl-green { background: #c5e1a5; }
.hl-blue { background: #b3e5fc; }
.hl-pink { background: #f8bbd0; }
.hl-orange { background: #ffcc80; }
/* ----------------------------------------------------------------------
Markier-Werkzeugleiste — immer am rechten Bildschirmrand, vertikal.
Sie passt ihre Breite dynamisch an den verfügbaren rechten Freiraum
neben dem 1320 px breiten Inhaltscontainer an. Damit überdeckt sie auf
keinem Display den Sachverhalts- oder Aufgabenstellungs-Text. Der
Freiraum besteht aus:
- äußerem Whitespace links/rechts des Containers (nur ab Viewport
> Container-Breite)
- der inneren rechten Container-Polsterung (--container-px,
clamp(1rem, 4vw, 2.5rem))
--hl-rgutter ist genau dieser Freiraum; Toolbar-Breite und Swatch-Größe
skalieren daraus.
---------------------------------------------------------------------- */
.hl-toolbar {
--hl-rgutter: max(var(--container-px), calc((100vw - var(--container-w)) / 2 + var(--container-px)));
--hl-toolbar-w: clamp(28px, calc(var(--hl-rgutter) - 4px), 56px);
--hl-swatch: clamp(16px, calc(var(--hl-toolbar-w) - 14px), 28px);
position: fixed;
top: 50%;
right: 2px;
z-index: 80;
width: var(--hl-toolbar-w);
display: flex;
flex-direction: column;
align-items: stretch;
pointer-events: none;
opacity: 0;
transform: translate3d(14px, -50%, 0);
will-change: transform, opacity;
transition: opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.hl-toolbar.hl-toolbar--visible {
opacity: 1;
transform: translate3d(0, -50%, 0);
pointer-events: auto;
}
/* Tab + Schließen-Button werden in diesem Layout nicht gebraucht — alle
Werkzeuge sind permanent in der schmalen Vertikal-Leiste sichtbar. */
.hl-toolbar-tab,
.hl-toolbar-close,
.hl-toolbar-status { display: none; }
.hl-toolbar-panel {
background: #fff;
border: 1px solid #e3e9e3;
border-right: none;
border-radius: 10px 0 0 10px;
box-shadow: -4px 4px 14px rgba(0,0,0,0.08);
padding: clamp(0.35rem, 0.5vw, 0.55rem) clamp(0.18rem, 0.4vw, 0.4rem);
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(0.3rem, 0.55vw, 0.5rem);
width: 100%;
box-sizing: border-box;
pointer-events: auto;
opacity: 1;
transform: none;
}
.hl-toolbar-divider {
width: 70%;
height: 1px;
background: #e3e9e3;
align-self: center;
}
.hl-toolbar-colors {
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(0.25rem, 0.5vw, 0.4rem);
}
.hl-color {
width: var(--hl-swatch);
height: var(--hl-swatch);
border-radius: 50%;
border: 2px solid rgba(0,0,0,0.12);
cursor: pointer;
padding: 0;
transition: transform 0.1s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.hl-color:hover { transform: scale(1.08); }
.hl-color.is-active {
border-color: #1e3a2a;
box-shadow: 0 0 0 2px rgba(14,128,85,0.25);
}
.hl-color--yellow { background: #fff59d; }
.hl-color--green { background: #c5e1a5; }
.hl-color--blue { background: #b3e5fc; }
.hl-color--pink { background: #f8bbd0; }
.hl-color--orange { background: #ffcc80; }
.hl-toolbar-tools {
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(0.2rem, 0.45vw, 0.4rem);
}
.hl-tool {
display: inline-flex; align-items: center; justify-content: center;
width: var(--hl-swatch);
height: var(--hl-swatch);
padding: 0;
border: 1px solid #d4dad4;
background: #fff;
border-radius: 6px;
cursor: pointer;
font-size: clamp(0.72rem, 0.5vw + 0.6rem, 1rem);
color: #1e3a2a;
}
.hl-tool:hover { background: #f3f7f3; }
.hl-tool.is-active {
background: #e7f3ec; border-color: #0e8055; color: #0a6845;
}
.hl-tool-icon { font-weight: 700; line-height: 1; }
@media print { .hl-toolbar { display: none !important; } }
/* ---- Support-Seite + Footer-Link ---- */
.site-footer-support {
margin-left: auto;
color: #1e3a2a;
font-weight: 600;
text-decoration: none;
border-bottom: 1px dashed transparent;
transition: color 0.15s ease, border-color 0.15s ease;
}
.site-footer-support:hover {
color: #0e8055;
border-bottom-color: #0e8055;
text-decoration: none;
}
@media (max-width: 700px) {
.site-footer .container { flex-wrap: wrap; gap: 0.4rem 1rem; }
.site-footer-support { margin-left: 0; flex-basis: 100%; }
}
.support-greeting { margin-bottom: 0.4rem; }
.support-form { padding: 1.1rem 1.3rem 1.3rem; max-width: 720px; }
.support-label { display: block; margin-bottom: 0.35rem; font-weight: 600; color: #1e3a2a; }
.support-form textarea {
width: 100%;
padding: 0.7rem 0.9rem;
border: 1px solid #d2dad5;
border-radius: 10px;
font-family: inherit;
font-size: 1rem;
line-height: 1.5;
resize: vertical;
min-height: 8.5rem;
}
.support-form textarea:focus {
outline: 2px solid #13a06a; outline-offset: 1px;
border-color: transparent;
}
.support-actions {
margin-top: 0.95rem;
display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap;
}
.support-actions .is-error { color: #b95a4f; }
.support-meta { max-width: 720px; margin-top: 0.6rem; }
/* Honeypot, für Menschen unsichtbar, für Bots normal sichtbar (also genau das,
was wir fangen wollen). Nicht display:none, sonst füllen es Bots oft nicht. */
.support-hp {
position: absolute;
left: -10000px; top: auto;
width: 1px; height: 1px; overflow: hidden;
}
.support-thanks {
max-width: 720px;
padding: 1.2rem 1.4rem;
background: linear-gradient(135deg, #f1faf3 0%, #ffffff 100%);
border: 1px solid #c8e7d2;
}
.support-thanks h3 { margin: 0 0 0.4rem; color: #0e8055; }
/* ============================================================================
Support-Chat (Bearbeiter + Admin)
============================================================================ */
/* Nav-Badge */
.nav-with-badge { position: relative; display: inline-flex; align-items: center; gap: 0.35rem; }
.nav-badge {
display: inline-block;
min-width: 1.4em; height: 1.4em;
line-height: 1.4em;
padding: 0 0.45em;
background: #b95a4f;
color: #fff;
font-size: 0.72rem; font-weight: 700;
border-radius: 999px;
text-align: center;
}
/* Layout-Grid: Liste links, Detail rechts */
.support-app {
display: grid;
grid-template-columns: 320px 1fr;
gap: 1rem;
margin-top: 1rem;
align-items: start;
}
.support-app--admin { grid-template-columns: 360px 1fr; }
@media (max-width: 880px) {
.support-app, .support-app--admin {
grid-template-columns: 1fr;
}
}
.support-app-side {
background: #fff;
border: 1px solid #e0e8e3;
border-radius: 12px;
padding: 0.8rem 0.85rem 1rem;
box-shadow: 0 1px 3px rgba(20,40,30,0.04);
max-height: 78vh;
overflow-y: auto;
position: sticky; top: 1rem;
}
.support-app-side-head {
display: flex; align-items: center; justify-content: space-between;
gap: 0.5rem; margin-bottom: 0.6rem;
}
.support-app-side-head h2 { margin: 0; font-size: 1.05rem; color: #1e3a2a; }
.support-filters {
display: flex; flex-direction: column; gap: 0.4rem;
margin-bottom: 0.7rem;
}
.support-filters label {
display: flex; flex-direction: column; gap: 0.15rem;
font-size: 0.78rem; color: #5a6a60;
}
.support-filters input, .support-filters select {
padding: 0.4rem 0.55rem;
border: 1px solid #d2dad5;
border-radius: 8px;
font-size: 0.92rem;
}
.support-thread-items { list-style: none; margin: 0; padding: 0; }
.support-thread-item {
display: block;
padding: 0.6rem 0.7rem;
border-radius: 9px;
border: 1px solid transparent;
margin-bottom: 0.4rem;
cursor: pointer;
transition: background 0.14s ease, border-color 0.14s ease;
}
.support-thread-item:hover { background: #f6faf8; border-color: #d6e3da; }
.support-thread-item.is-unread { background: #f0fbf4; border-color: #c8e7d2; }
.support-thread-item.is-selected { background: #eaf3ec; border-color: #a9d6bb; }
.support-thread-row {
display: flex; align-items: center; justify-content: space-between;
gap: 0.5rem; margin-bottom: 0.2rem;
}
.support-thread-id { font-weight: 700; color: #4b5b51; font-size: 0.85rem; }
.support-thread-subject {
font-weight: 600; color: #1e3a2a; font-size: 0.96rem;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.support-thread-user {
font-size: 0.78rem; color: #5a6a60; margin-top: 0.05rem;
}
.support-thread-snippet {
font-size: 0.84rem; color: #5a6a60; margin-top: 0.2rem;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.support-thread-meta {
display: flex; justify-content: space-between;
font-size: 0.72rem; color: #6a7a70; margin-top: 0.25rem;
}
/* Status-Pills für Threads (eigene Farben, nicht .status-pill recycelt) */
.status-pill.support-status-open { background: #e3edf6; color: #2563a6; }
.status-pill.support-status-answered { background: #fdf0d6; color: #8a5a10; }
.status-pill.support-status-closed { background: #ececec; color: #5a6a60; }
/* Detail-Pane */
.support-app-main {
background: #fff;
border: 1px solid #e0e8e3;
border-radius: 12px;
padding: 1rem 1.2rem 1.1rem;
box-shadow: 0 1px 3px rgba(20,40,30,0.04);
min-height: 24rem;
display: flex; flex-direction: column;
}
.support-empty-pane {
margin: auto; text-align: center; padding: 2rem 1rem;
}
.support-empty-pane h3 { margin: 0 0 0.4rem; color: #1e3a2a; }
.support-thread-head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 1rem; padding-bottom: 0.7rem; border-bottom: 1px solid #eef2ee;
margin-bottom: 0.8rem; flex-wrap: wrap;
}
.support-thread-head h2 { margin: 0; font-size: 1.1rem; color: #1e3a2a; }
.support-thread-head-meta {
display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
margin-top: 0.25rem;
}
/* Bubble-Liste */
.support-bubbles {
display: flex; flex-direction: column; gap: 0.55rem;
max-height: 56vh; overflow-y: auto;
padding: 0.2rem 0.1rem;
margin-bottom: 0.8rem;
}
.support-bubble {
max-width: 78%;
background: #f3f7f4;
border: 1px solid #e0e8e3;
border-radius: 14px;
padding: 0.5rem 0.85rem 0.6rem;
}
.support-bubble--self {
align-self: flex-end;
background: #eaf6ee;
border-color: #c8e7d2;
}
.support-bubble--other { align-self: flex-start; }
.support-bubble--role-admin.support-bubble--other {
background: #f3f7fb; border-color: #c8d8e6;
}
.support-bubble-meta { font-size: 0.74rem; color: #5a6a60; margin-bottom: 0.2rem; }
.support-bubble-body { font-size: 0.96rem; color: #1e3a2a; line-height: 1.5; word-break: break-word; }
/* Reply / Neuanfrage-Form */
.support-reply, .support-new-form {
display: flex; flex-direction: column; gap: 0.5rem;
border-top: 1px solid #eef2ee; padding-top: 0.8rem;
}
.support-new-form { border-top: 0; padding-top: 0; }
.support-new-form h2 { margin: 0; }
.support-reply textarea, .support-new-form textarea {
width: 100%;
padding: 0.6rem 0.8rem;
border: 1px solid #d2dad5;
border-radius: 10px;
font-family: inherit; font-size: 0.96rem; line-height: 1.5;
resize: vertical;
min-height: 4rem;
}
.support-reply-actions {
display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
}
.support-closed-note {
margin: 0.6rem 0 0;
padding: 0.6rem 0.85rem;
background: #f6f6f4;
border: 1px dashed #d6dcd5;
border-radius: 8px;
}
.support-loading {
display: flex; align-items: center; gap: 0.6rem;
padding: 1.2rem; color: #5a6a60;
}
/* ---- Sprechblasen-Icon im Nav (Bearbeiter) ---- */
.nav-support-icon {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
margin-left: 0.5rem;
border-radius: 50%;
color: var(--ubt-dark);
transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.nav-support-icon:hover {
background: rgba(20, 60, 40, 0.08);
color: #0e8055;
text-decoration: none;
transform: translateY(-1px);
}
.nav-support-icon:active { transform: translateY(0); }
.nav-support-icon:focus-visible {
outline: 2px solid var(--ubt-green);
outline-offset: 2px;
}
.nav-support-icon svg {
display: block;
pointer-events: none;
}
.nav-support-count {
position: absolute;
top: -3px;
right: -3px;
min-width: 1.15em;
height: 1.15em;
padding: 0 0.35em;
background: #b95a4f;
color: #fff;
font-size: 0.66rem;
font-weight: 700;
line-height: 1.15em;
border-radius: 999px;
text-align: center;
pointer-events: none;
box-shadow: 0 0 0 2px var(--ubt-white);
font-variant-numeric: tabular-nums;
}
/* ---- Admin-Nav: hochgestellte Zahl auf "Support" (kein Symbol) ---- */
.nav-text-badge {
position: relative;
display: inline-block;
padding-right: 0.4em; /* Platz für hochgestellte Zahl */
}
.nav-text-badge-count {
display: inline-block;
margin-left: 0.2em;
min-width: 1.05em;
height: 1.05em;
padding: 0 0.32em;
background: #b95a4f;
color: #fff;
font-size: 0.62rem;
font-weight: 700;
line-height: 1.05em;
border-radius: 999px;
text-align: center;
vertical-align: super;
font-variant-numeric: tabular-nums;
}
/* ---- Auto-Lösch-Timer pro Thread ---- */
.support-deletion-pill {
display: inline-block;
padding: 0.12rem 0.55rem;
background: #fbecec;
border: 1px solid #e9c9c9;
color: #7a2b2b;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 600;
margin-top: 0.3rem;
letter-spacing: 0.01em;
}
.support-thread-deletion {
margin-top: 0.2rem;
}
.support-deletion-pill--head {
margin-top: 0;
align-self: center;
}
/* ---- App-eigener Confirm-Dialog (statt nativem Browser-confirm) ---- */
.app-confirm-overlay {
position: fixed; inset: 0;
background: rgba(20, 30, 26, 0.45);
display: flex; align-items: center; justify-content: center;
padding: 1.2rem;
z-index: 200;
opacity: 0;
transition: opacity 0.18s ease;
backdrop-filter: blur(2px);
}
.app-confirm-overlay.is-open { opacity: 1; }
.app-confirm {
background: #ffffff;
width: 100%;
max-width: 460px;
border-radius: 14px;
border: 1px solid #e0e8e3;
box-shadow: 0 24px 64px rgba(0,0,0,0.3);
padding: 1.25rem 1.4rem 1.2rem;
transform: translateY(12px) scale(0.985);
transition: transform 0.2s ease;
}
.app-confirm-overlay.is-open .app-confirm { transform: translateY(0) scale(1); }
.app-confirm h3 {
margin: 0 0 0.5rem;
font-size: 1.1rem;
color: #1e3a2a;
}
.app-confirm p {
margin: 0 0 1.1rem;
line-height: 1.5;
color: #4b5b51;
}
.app-confirm-actions {
display: flex; justify-content: flex-end; gap: 0.6rem; flex-wrap: wrap;
}
/* Optionaler Body-Container für show()-Dialoge mit längerem HTML-Inhalt
(z. B. Welcome-Tour). Sorgt für angenehme Innen-Lesbarkeit, ohne dass
die Standard--Margins der Card-Snippets den Layout-Fluss zerschießen. */
.app-confirm .app-confirm-body {
margin: 0 0 1.1rem;
color: #2c3e35;
line-height: 1.55;
}
.app-confirm .app-confirm-body > :first-child { margin-top: 0; }
.app-confirm .app-confirm-body > :last-child { margin-bottom: 0; }
/* Eingabefeld in Prompt-Dialogen (z. B. Stichwort-Eingabe für die
„Präziser/schärfer"-KI-Anpassung). */
.app-confirm-input {
width: 100%;
box-sizing: border-box;
padding: 0.55rem 0.75rem;
margin-bottom: 1.1rem;
border: 1px solid var(--ubt-dark);
border-radius: 4px;
font-family: var(--sans);
font-size: 0.95rem;
background: var(--ubt-white);
color: var(--ubt-dark);
}
.app-confirm-input:focus {
outline: none;
border-color: var(--ubt-green);
box-shadow: 0 0 0 2px rgba(0,146,96,0.2);
}
/* Wide-Variante: fast bildschirmfüllendes Modal für inhaltsreiche
Welcome-/Onboarding-Pop-ups. Die Inhalts-Sektion scrollt eigenständig,
die Aktions-Leiste bleibt am unteren Rand sichtbar. */
.app-confirm-overlay--wide { padding: 1rem; }
.app-confirm--wide {
max-width: min(960px, 96vw);
width: 100%;
max-height: 92vh;
display: flex;
flex-direction: column;
padding: 1.4rem 1.6rem 1.2rem;
}
.app-confirm--wide h3 {
font-size: 1.35rem;
margin-bottom: 0.7rem;
}
.app-confirm--wide .app-confirm-body {
flex: 1 1 auto;
overflow-y: auto;
padding-right: 0.4rem;
margin-bottom: 1.1rem;
/* Sanftes Top-/Bottom-Fade, damit beim Scrollen klar ist, dass es weitergeht. */
mask-image: linear-gradient(180deg, transparent 0, black 14px, black calc(100% - 14px), transparent 100%);
}
.app-confirm--wide .app-confirm-body h2 {
font-size: 1.1rem;
margin-top: 1.2rem;
margin-bottom: 0.4rem;
color: #1e3a2a;
}
.app-confirm--wide .app-confirm-body h2:first-child { margin-top: 0; }
.app-confirm--wide .app-confirm-body h3 {
font-size: 1rem;
margin: 0.9rem 0 0.3rem;
color: #2c4f3a;
}
.app-confirm--wide .app-confirm-body p,
.app-confirm--wide .app-confirm-body ul,
.app-confirm--wide .app-confirm-body ol {
margin: 0.4rem 0;
}
.app-confirm--wide .app-confirm-body ul,
.app-confirm--wide .app-confirm-body ol {
padding-left: 1.3rem;
}
.app-confirm--wide .app-confirm-body li { margin: 0.25rem 0; }
.app-confirm--wide .app-confirm-body .welcome-section {
background: #f3f8f3;
border: 1px solid #d8e6dc;
border-radius: 10px;
padding: 0.85rem 1rem;
margin: 0.7rem 0;
}
.app-confirm--wide .app-confirm-footer-note {
margin: 0.6rem 0 0.3rem;
padding: 0.7rem 0.9rem;
background: #fdf6e2;
border: 1px solid #e7cd8a;
border-radius: 10px;
color: #5a4514;
font-size: 0.95rem;
}
/* hidden-Attribut hat geringere Spezifität als die Badge-Klassen, explizit
überstimmen, sonst bleiben "0-Counter" sichtbar. */
.nav-badge[hidden],
.nav-text-badge-count[hidden],
.nav-support-count[hidden],
/* Stats-Elemente, deren Klassen-Regel display:flex setzt, hier muss
[hidden] explizit gewinnen, sonst bleibt der Lade-Spinner permanent
sichtbar, weil das HTML-Attribut sonst durch die Klassen-Regel
(gleiche Spezifität, später deklariert) plattgewalzt wird. */
.stats-pending-banner[hidden],
.stats-kpis[hidden] {
display: none !important;
}
/* ---- Ranked/Unranked: Nav-Pill + Konto-Toggle + Score-Unranked-Variante ---- */
/* Slot bemisst sich SELBST über einen unsichtbaren Sentinel mit den exakten
Maßen der blauen Pill, dadurch ist der Slot immer genau so breit wie die
blaue Pill rendert (kein Schätzwert), und die Pill wird via Grid mittig
positioniert, sodass der geometrische Mittelpunkt beim Toggle stabil bleibt. */
.nav-mode-slot {
display: inline-grid;
grid-template-columns: max-content;
place-items: center;
/* Negative Margins ziehen die Pill näher an die Nachbar-Reiter heran
reduziert den durch .main-nav { gap: 1.25rem } gegebenen Abstand. */
margin-left: -0.55rem;
margin-right: -0.55rem;
}
.nav-mode-slot > * {
grid-row: 1;
grid-column: 1;
}
/* Sentinel reserviert exakt die Renderbreite der blauen "Unranked"-Pill
gleiche Maße, gleiche Schrift, nur visuell unsichtbar. */
.nav-mode-spacer {
visibility: hidden;
pointer-events: none;
height: 1.6rem;
min-width: 4.2rem;
padding: 0 0.8rem;
line-height: 1;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
border: 1px solid transparent;
}
.nav-mode-pill {
/* Basis = Unranked-Referenz. Blaue Pill bleibt EXAKT wie zuvor. */
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 0;
height: 1.6rem;
min-width: 4.2rem;
padding: 0 0.8rem;
line-height: 1;
border-radius: 999px;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
border: 1px solid transparent;
cursor: pointer;
backdrop-filter: blur(8px) saturate(140%);
-webkit-backdrop-filter: blur(8px) saturate(140%);
transition: background 0.32s ease,
border-color 0.32s ease,
color 0.32s ease,
filter 0.15s ease,
transform 0.1s ease,
box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Rotes Oval: identische Größe wie das blaue (keine Größen-Overrides;
Farbe weiterhin über .nav-mode-ranked unten). */
/* Innerhalb der Hauptnav: Pill bekommt KEIN grünes Hover-Color und KEINE
Unterstrich-Animation, stattdessen ein farbpassender Glow auf das Oval. */
.main-nav a.nav-mode-pill::after,
.main-nav a.nav-mode-pill:hover::after {
content: none !important;
}
.main-nav a.nav-mode-pill.nav-mode-ranked:hover { color: #8a2424; }
.main-nav a.nav-mode-pill.nav-mode-unranked:hover { color: #1f4a7a; }
.nav-mode-ranked:hover {
box-shadow: 0 0 14px 2px rgba(168, 40, 40, 0.45),
0 0 4px 1px rgba(168, 40, 40, 0.30);
}
.nav-mode-unranked:hover {
box-shadow: 0 0 14px 2px rgba(37, 99, 166, 0.45),
0 0 4px 1px rgba(37, 99, 166, 0.30);
}
.nav-mode-pill:hover { filter: brightness(0.97); transform: translateY(-1px); text-decoration: none; }
.nav-mode-ranked {
/* Glasige, transparent-getönte Rotnuance, keine harte Signalfläche,
sondern weiche Glasoptik mit hoher Lesbarkeit (dunkler Rotton auf
hellem Pastellgrund). Gleiche Designsprache wie Unranked. */
background: linear-gradient(135deg, rgba(212, 69, 69, 0.18), rgba(176, 48, 48, 0.26));
color: #8a2424;
border-color: rgba(168, 40, 40, 0.40);
}
.nav-mode-unranked {
background: linear-gradient(135deg, rgba(37, 99, 166, 0.16), rgba(37, 99, 166, 0.24));
color: #1f4a7a;
border-color: rgba(37, 99, 166, 0.38);
}
/* Schloss-Badge: Während einer laufenden Bearbeitung darf nicht zwischen
Ranked und Unranked gewechselt werden. Optisch durch ein dezentes Schloss
überlappend mit der oberen rechten Pill-Kante markiert; Pill bleibt
klickbar (führt auf konto.php → dort gibt es den ausführlichen Hinweis). */
.nav-mode-pill--locked {
cursor: not-allowed;
filter: saturate(0.55) brightness(0.96);
position: relative;
padding-right: 1.4rem;
}
.nav-mode-pill--locked:hover {
transform: none;
filter: saturate(0.55) brightness(0.96);
}
.nav-mode-lock {
position: absolute;
top: -6px;
right: -6px;
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #ffffff;
color: #4d5a52;
border: 1px solid rgba(0, 0, 0, 0.18);
border-radius: 999px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
pointer-events: none;
}
.nav-mode-lock svg {
width: 11px;
height: 11px;
}
.ranked-toggle-card { display: flex; flex-direction: column; gap: 0.7rem; }
.ranked-toggle {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.6rem;
}
.ranked-toggle-opt {
display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem;
padding: 0.85rem 1rem;
background: #fff;
border: 1px solid #d2dad5;
border-radius: 12px;
cursor: pointer;
text-align: left;
transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
font-family: inherit;
}
.ranked-toggle-opt:hover { background: #f6faf8; border-color: #b6cabe; transform: translateY(-1px); }
.ranked-toggle-opt[aria-pressed="true"] {
/* Ranked aktiv: weiche, glasige Rottönung, visuell exakt analog zum
blauen Unranked-Pendant (gleiche Pastell-Logik, gleiche Tiefe), nur in
der Farbnuance verschoben. Dunkler Text bleibt voll lesbar. */
border-color: #e6b3b3;
background: linear-gradient(135deg, #fbecec, #f3d4d4);
box-shadow: 0 2px 14px rgba(176, 48, 48, 0.12);
color: #1e3a2a;
}
.ranked-toggle-opt[data-ranked-value="0"][aria-pressed="true"] {
border-color: #b9cee0;
background: linear-gradient(135deg, #eef3fa, #d9e6f3);
box-shadow: 0 2px 14px rgba(37, 99, 166, 0.12);
color: #1e3a2a;
}
.ranked-toggle-title { font-weight: 700; font-size: 1.05rem; color: #1e3a2a; }
.ranked-toggle-sub { font-size: 0.82rem; color: #5a6a60; }
.ranked-toggle-explainer { line-height: 1.55; }
.ranked-toggle-explainer strong { color: #1e3a2a; }
.ranked-toggle-status { color: #4b5b51; }
.ranked-toggle-status.is-error { color: #b95a4f; }
@media (max-width: 600px) {
.ranked-toggle { grid-template-columns: 1fr; }
}
/* Score-Reveal im Unranked-Modus */
.score-reveal--unranked {
background: linear-gradient(135deg, #eef3fa 0%, #d9e6f3 100%);
border-color: #b9cee0;
}
.score-reveal--unranked .score-reveal-total {
color: #2563a6;
font-size: 1.4rem;
font-weight: 700;
}
/* ---- Statistik-Seite: View-Toggle (Lernfortschritt / Ranked Statistik) ----
* Glas-Karten-Design exakt analog zum Konto-Toggle (Ranked/Unranked):
* zwei nebeneinanderliegende Karten, aktive Karte mit weichem Pastellverlauf.
* Farb-Identität bleibt: Lernfortschritt = Grün, Ranked Statistik = Rot.
*/
.stats-view-toggle {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.6rem;
margin-bottom: 1.4rem;
}
.stats-view-toggle-knob { display: none; }
.stats-view-toggle-opt {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
padding: 0.85rem 1rem;
background: #fff;
border: 1px solid #d2dad5;
border-radius: 12px;
cursor: pointer;
text-align: left;
font-family: inherit;
color: #1e3a2a;
transition: background 0.15s ease, border-color 0.15s ease,
transform 0.1s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.stats-view-toggle-opt:hover {
background: #f6faf8;
border-color: #b6cabe;
transform: translateY(-1px);
}
.stats-view-toggle-opt:focus-visible {
outline: 2px solid var(--ubt-green);
outline-offset: 2px;
}
/* Lernfortschritt aktiv: pastell-grün (gleiche Logik wie Konto-Toggle Unranked,
aber in Grün, die Farbidentität dieses Reglers bleibt erhalten). */
.stats-view-toggle-opt[data-view="lernfortschritt"][aria-selected="true"] {
border-color: #a9d6bb;
background: linear-gradient(135deg, #f1faf3, #e2f1e9);
box-shadow: 0 2px 14px rgba(14, 128, 85, 0.12);
color: #1e3a2a;
}
/* Ranked Statistik aktiv: pastell-rot, exakt identisch zum Konto-Toggle
Ranked-Pendant (gleicher Verlauf, gleiche Border, gleicher Schatten). */
.stats-view-toggle-opt[data-view="ranked"][aria-selected="true"] {
border-color: #e6b3b3;
background: linear-gradient(135deg, #fbecec, #f3d4d4);
box-shadow: 0 2px 14px rgba(176, 48, 48, 0.12);
color: #1e3a2a;
}
.stats-view-toggle-title { font-weight: 700; font-size: 1.05rem; line-height: 1.2; }
.stats-view-toggle-sub { font-size: 0.82rem; line-height: 1.3; color: #5a6a60; }
@media (max-width: 600px) {
.stats-view-toggle { grid-template-columns: 1fr; }
}
/* ==============================
Kompakte Erstbewertung (Progressive Disclosure)
Wird vor der detaillierten Feedback-Ansicht gerendert. Toggle blendet das
gesamte #feedback-detail bzw. #tutor-feedback-detail ein/aus.
============================== */
.fb-compact {
margin-top: 1.5rem;
border-left: 4px solid #00a46c;
padding: 1.6rem 1.9rem 1.5rem;
}
.fb-compact-head {
display: flex; align-items: center; justify-content: space-between;
gap: 0.8rem; flex-wrap: wrap;
margin-bottom: 0.7rem;
}
.fb-compact .fb-compact-title {
margin: 0;
color: #163a1f;
font-size: 1.1rem;
}
.fb-compact-badge {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #0e8055;
background: #e8f5ee;
padding: 0.18rem 0.55rem;
border-radius: 999px;
font-weight: 600;
}
.fb-compact-overall {
margin: 0 0 1.1rem;
font-size: 1.02rem;
line-height: 1.55;
color: #2a3530;
}
.fb-compact-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.2rem;
margin-bottom: 1.1rem;
}
.fb-compact-col h4 {
margin: 0 0 0.5rem;
font-size: 0.92rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #4a5a51;
}
.fb-compact-list {
list-style: none;
margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 0.4rem;
}
.fb-compact-list--ordered { counter-reset: tip; }
.fb-compact-item {
position: relative;
padding: 0.55rem 0.8rem 0.55rem 2rem;
border-radius: 10px;
line-height: 1.4;
font-size: 0.95rem;
background: #fafafa;
border: 1px solid rgba(20, 30, 25, 0.05);
}
.fb-compact-item::before {
position: absolute;
left: 0.8rem;
top: 50%;
transform: translateY(-50%);
font-weight: 700;
font-size: 1rem;
line-height: 1;
}
.fb-compact-item--strength {
background: #e8f5ee;
border-color: rgba(14, 128, 85, 0.18);
color: #173b25;
}
.fb-compact-item--strength::before { content: "✓"; color: #0e8055; }
.fb-compact-item--improvement {
background: #fdf3e7;
border-color: rgba(196, 110, 28, 0.18);
color: #4d2e10;
}
.fb-compact-item--improvement::before { content: "△"; color: #c46e1c; }
.fb-compact-item--tip {
counter-increment: tip;
background: #ede9fa;
border-color: rgba(85, 60, 170, 0.18);
color: #2c1f5d;
padding-left: 2.6rem;
}
.fb-compact-item--tip::before {
content: counter(tip);
color: #553caa;
font-size: 0.85rem;
background: #fff;
border-radius: 999px;
width: 1.25rem; height: 1.25rem;
display: flex; align-items: center; justify-content: center;
border: 1px solid rgba(85, 60, 170, 0.28);
line-height: 1;
}
.fb-compact-tips {
margin-top: 0.4rem;
margin-bottom: 1rem;
}
.fb-compact-tips h4 {
margin: 0 0 0.5rem;
font-size: 0.92rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #4a5a51;
}
.fb-compact-actions {
display: flex; gap: 0.6rem;
margin-top: 0.6rem;
padding-top: 0.9rem;
border-top: 1px solid rgba(20, 30, 25, 0.06);
}
.fb-compact-toggle {
font-weight: 600;
}
.fb-detail {
margin-top: 1.4rem;
}
.fb-detail--open {
animation: fbDetailOpen 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes fbDetailOpen {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
/* ==============================
Admin: KI-Konfiguration
Pro KI-Aktion eine Karte mit Modell-Auswahl. Layout an die anderen
Admin-Karten angelehnt; eigene Klassennamen, damit das übrige
Settings-Form unverändert bleibt.
============================== */
.ai-config-summary {
display: flex; flex-direction: column; gap: 0.5rem;
margin-bottom: 1.4rem;
}
.ai-config-summary-row {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem;
}
.ai-config-summary-label {
color: var(--ubt-medium);
font-size: 0.9rem;
min-width: 220px;
}
.ai-config-summary code {
background: #f3f6f3;
padding: 0.1rem 0.45rem;
border-radius: 6px;
font-size: 0.92rem;
}
.ai-config-form .case-section { margin-top: 1.6rem; }
.ai-action-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
gap: 1rem;
}
.ai-action-card {
background: #fbfbfa;
border: 1px solid rgba(20, 30, 25, 0.08);
border-radius: 14px;
padding: 1.1rem 1.2rem 1.2rem;
box-shadow: 0 1px 2px rgba(20, 30, 25, 0.04);
display: flex; flex-direction: column; gap: 0.7rem;
}
.ai-action-head {
display: flex; flex-direction: column; gap: 0.25rem;
border-bottom: 1px solid rgba(20, 30, 25, 0.06);
padding-bottom: 0.6rem;
}
.ai-action-title {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem;
}
.ai-action-title strong { font-size: 1rem; color: var(--ubt-dark); }
.ai-action-id {
font-size: 0.75rem;
color: #8b958f;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.ai-action-effective {
font-size: 0.85rem;
color: var(--ubt-medium);
}
.ai-action-effective code {
background: #eef4ef;
padding: 0.05rem 0.4rem;
border-radius: 5px;
font-size: 0.85rem;
}
.ai-action-desc {
font-size: 0.9rem;
color: var(--ubt-medium);
margin: 0;
line-height: 1.45;
}
.ai-action-field { display: block; }
.ai-action-field > span {
display: block;
font-weight: 600;
color: var(--ubt-dark);
font-size: 0.85rem;
margin-bottom: 0.3rem;
}
.ai-action-field > small {
display: block;
color: var(--ubt-medium);
font-size: 0.8rem;
margin-top: 0.2rem;
}
.ai-action-field select,
.ai-action-field input[type=text] {
width: 100%;
}
.ai-config-actions {
margin-top: 2rem;
display: flex; gap: 0.8rem; flex-wrap: wrap;
}
/* ---- Admin → Wissen ---- */
.kb-overview-head {
display: flex; align-items: baseline; justify-content: space-between;
flex-wrap: wrap; gap: 0.75rem;
margin-bottom: 0.4rem;
}
.kb-job-list {
margin-top: 0.6rem;
}
.kb-job-table {
width: 100%;
border-collapse: collapse;
background: linear-gradient(155deg, rgba(255,255,255,0.96) 0%, rgba(243,250,245,0.88) 100%);
backdrop-filter: blur(8px) saturate(120%);
-webkit-backdrop-filter: blur(8px) saturate(120%);
border: 1px solid rgba(207, 226, 214, 0.7);
border-radius: 12px;
overflow: hidden;
box-shadow:
0 1px 2px rgba(20,40,30,0.04),
0 6px 18px rgba(20,40,30,0.04);
}
.kb-job-table thead th {
text-align: left;
padding: 0.65rem 0.85rem;
font-size: 0.78rem;
color: #5b6a61;
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 600;
border-bottom: 1px solid rgba(207, 226, 214, 0.7);
background: rgba(247,251,249,0.6);
}
.kb-job-table tbody td {
padding: 0.7rem 0.85rem;
border-bottom: 1px solid rgba(216, 230, 222, 0.55);
vertical-align: top;
line-height: 1.4;
}
.kb-job-table tbody tr:last-child td { border-bottom: 0; }
.kb-job-table tbody tr:hover {
background: rgba(243,250,245,0.55);
}
.kb-job-table .right { text-align: right; }
.kb-job-table .btn-sm {
padding: 0.3rem 0.55rem;
font-size: 0.78rem;
}
.kb-toolbar {
display: flex; align-items: center; justify-content: space-between;
gap: 0.75rem; flex-wrap: wrap;
margin: 0.75rem 0 0.4rem;
}
.kb-toolbar-left,
.kb-toolbar-right {
display: flex; align-items: center; gap: 0.6rem;
}
.kb-sort-label {
display: inline-flex; align-items: center; gap: 0.45rem;
font-size: 0.85rem; color: #5b6a61;
}
.kb-sort-label select {
font-size: 0.85rem;
padding: 0.25rem 0.5rem;
}
.kb-col-check {
width: 2.2rem;
text-align: center;
}
.kb-job-table tbody tr.row-selected {
background: rgba(214, 235, 222, 0.55);
}
.kb-dup-list {
margin: 0.4rem 0 0.6rem 1.2rem;
padding: 0;
font-size: 0.9rem;
line-height: 1.45;
}
.kb-dup-list li {
word-break: break-all;
}
/* ---- Bearbeiter → Fälle: Filter-Toolbar ---- */
.case-toolbar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.6rem 1rem;
margin: 0.5rem 0 1rem;
}
.case-toolbar-search {
flex: 1 1 280px;
min-width: 220px;
}
.case-toolbar-search input[type="search"] {
width: 100%;
padding: 0.45rem 0.7rem;
border: 1px solid var(--ubt-light);
border-radius: 8px;
background: rgba(255,255,255,0.85);
font-size: 0.95rem;
}
.case-toolbar-search input[type="search"]::placeholder {
color: #b9c2bc;
opacity: 1;
}
.case-toolbar-search input[type="search"]:focus {
outline: none;
border-color: var(--ubt-green);
box-shadow: 0 0 0 3px rgba(0,99,67,0.12);
}
.case-toolbar-filter {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.88rem;
color: #5b6a61;
}
.case-toolbar-filter select {
padding: 0.32rem 0.55rem;
font-size: 0.9rem;
}
.case-toolbar-count {
margin-left: auto;
font-size: 0.82rem;
color: var(--ubt-medium);
}
.case-empty-msg {
margin-top: 0.5rem;
}
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0);
white-space: nowrap; border: 0;
}
.text-error {
color: #b33a3a;
}
/* ============================================================
Block-Editor (fall_blocks.php)
Glasige, ruhige Farbpalette für die didaktische Block-Struktur.
Sechs Grundfarben × drei Helligkeits-Varianten.
============================================================ */
:root {
--bk-blue: #5b8def;
--bk-blue-soft: rgba(91, 141, 239, 0.16);
--bk-blue-mid: rgba(91, 141, 239, 0.32);
--bk-green: #4cae8c;
--bk-green-soft: rgba(76, 174, 140, 0.16);
--bk-green-mid: rgba(76, 174, 140, 0.32);
--bk-orange: #e89260;
--bk-orange-soft: rgba(232, 146, 96, 0.18);
--bk-orange-mid: rgba(232, 146, 96, 0.36);
--bk-purple: #a47ad6;
--bk-purple-soft: rgba(164, 122, 214, 0.16);
--bk-purple-mid: rgba(164, 122, 214, 0.32);
--bk-teal: #5cb8c0;
--bk-teal-soft: rgba(92, 184, 192, 0.16);
--bk-teal-mid: rgba(92, 184, 192, 0.34);
--bk-pink: #d97aa6;
--bk-pink-soft: rgba(217, 122, 166, 0.16);
--bk-pink-mid: rgba(217, 122, 166, 0.34);
}
.blocks-editor {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding-bottom: 4rem;
}
/* Im Block-Editor-Header die globalen Großabstände von .page-title /
.page-sub neutralisieren, damit der Header direkt am Split hängt. */
.blocks-editor-header .page-title {
margin-top: 0;
margin-bottom: 0.1rem;
font-size: 1.6rem;
}
.blocks-editor-header .page-sub {
margin: 0;
font-size: 0.95rem;
}
/* ---- Split-Screen: Blöcke (links) + Lösung (rechts) ----
Volle Viewport-Höhe, damit „Tutorfragen" garantiert erst beim
Weiterscrollen erscheint. Der Editor füllt den kompletten Bildschirm
ab seiner Position; was darüber liegt (Seiten-Header, Block-Editor-
Titel), wird beim Hochscrollen freigegeben. */
.blocks-editor-split {
display: grid;
grid-template-columns: minmax(320px, 1fr) minmax(480px, 1.6fr);
gap: 1rem;
height: 100dvh;
min-height: 540px;
}
.blocks-editor-split-col {
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
padding: 1rem 1.1rem;
}
.blocks-editor-split-col .blocks-editor-section-head,
.blocks-editor-split-col .blocks-editor-loesung-tools,
.blocks-editor-split-col .blocks-editor-list-actions {
flex: 0 0 auto;
}
.blocks-editor-split-col .blocks-editor-list,
.blocks-editor-split-col .blocks-editor-loesung-container {
flex: 1 1 auto;
overflow-y: auto;
min-height: 0;
}
@media (max-width: 980px) {
.blocks-editor-split {
grid-template-columns: 1fr;
height: auto;
}
.blocks-editor-split-col {
height: 60vh;
}
}
.blocks-editor-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.blocks-editor-header-left { flex: 1 1 auto; }
.blocks-editor-header-actions {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.blocks-editor-status {
min-height: 0;
margin: 0;
font-size: 0.85rem;
color: var(--ubt-medium);
font-style: italic;
line-height: 1.2;
}
.blocks-editor-status:empty { display: none; }
.blocks-editor-status--ok { color: #0a7d3e; }
.blocks-editor-status--error { color: #b33a3a; }
.blocks-editor-section {
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(8px) saturate(120%);
-webkit-backdrop-filter: blur(8px) saturate(120%);
border: 1px solid rgba(220, 226, 220, 0.8);
border-radius: 14px;
padding: 1.25rem 1.5rem;
box-shadow: 0 2px 14px rgba(20, 40, 30, 0.04);
}
.blocks-editor-section-head h2 {
margin: 0 0 0.25rem 0;
font-size: 1.1rem;
display: flex;
align-items: baseline;
gap: 0.6rem;
}
.blocks-editor-section-head p {
margin: 0 0 1rem 0;
}
/* ---- Lösungs-Text + Highlights ---- */
.blocks-editor-loesung-tools {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 0.75rem;
}
.blocks-editor-loesung-container {
position: relative;
}
.blocks-editor-loesung-text {
white-space: pre-wrap;
line-height: 1.65;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 0.98rem;
padding: 1rem 1.1rem;
border: 1px solid rgba(200, 210, 200, 0.7);
border-radius: 10px;
background: rgba(252, 253, 252, 0.85);
user-select: text;
cursor: text;
}
/* In Split-Spalte füllt der Text die ganze Höhe der scrollbaren Spalte. */
.blocks-editor-split-col .blocks-editor-loesung-text {
min-height: 100%;
}
.blocks-editor-loesung-text:focus {
outline: 2px solid var(--ubt-primary, #009260);
outline-offset: 1px;
}
.blocks-editor-loesung-empty {
padding: 1.2rem;
text-align: center;
color: var(--ubt-medium);
font-style: italic;
background: rgba(250, 240, 220, 0.5);
border-radius: 10px;
border: 1px dashed rgba(200, 180, 140, 0.6);
}
/* Highlight-Spans im Lösungstext.
Wir setzen Background als „soft"-Tönung, einen 2-Pixel-Bottom-Border
in der Voll-Farbe der Gruppe, und ein number-badge ::before. */
.bk-hl {
position: relative;
padding: 0 0.05em;
border-radius: 2px;
transition: background 120ms ease, box-shadow 120ms ease;
}
.bk-hl[data-color="blue"] { background: var(--bk-blue-soft); border-bottom: 2px solid var(--bk-blue); }
.bk-hl[data-color="green"] { background: var(--bk-green-soft); border-bottom: 2px solid var(--bk-green); }
.bk-hl[data-color="orange"] { background: var(--bk-orange-soft); border-bottom: 2px solid var(--bk-orange); }
.bk-hl[data-color="purple"] { background: var(--bk-purple-soft); border-bottom: 2px solid var(--bk-purple); }
.bk-hl[data-color="teal"] { background: var(--bk-teal-soft); border-bottom: 2px solid var(--bk-teal); }
.bk-hl[data-color="pink"] { background: var(--bk-pink-soft); border-bottom: 2px solid var(--bk-pink); }
.bk-hl[data-variant="1"] { filter: brightness(1.05); }
.bk-hl[data-variant="2"] { filter: brightness(0.92); }
.bk-hl.bk-hl--selected { box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.25); }
.bk-hl-badge {
display: inline-block;
margin-right: 0.2em;
padding: 0 0.4em;
font-size: 0.72em;
line-height: 1.4;
border-radius: 999px;
font-weight: 600;
color: #fff;
vertical-align: 0.05em;
user-select: none;
-webkit-user-select: none;
}
.bk-hl-badge[data-color="blue"] { background: var(--bk-blue); }
.bk-hl-badge[data-color="green"] { background: var(--bk-green); }
.bk-hl-badge[data-color="orange"] { background: var(--bk-orange); }
.bk-hl-badge[data-color="purple"] { background: var(--bk-purple); }
.bk-hl-badge[data-color="teal"] { background: var(--bk-teal); }
.bk-hl-badge[data-color="pink"] { background: var(--bk-pink); }
/* Einheitlicher Lösch-Button pro Markierung (farb-agnostisch).
Erscheint einmal pro Range am Anfang — auffällig genug, dass er als
Bedien-Element erkannt wird. */
.bk-hl-delete {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.5em;
height: 1.5em;
margin: 0 0.3em 0 0.1em;
border-radius: 50%;
border: 1.5px solid #b33a3a;
background: #fff;
color: #b33a3a;
font-size: 0.9em;
line-height: 1;
font-weight: 800;
cursor: pointer;
vertical-align: -0.15em;
padding: 0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
transition: background 100ms ease, color 100ms ease, transform 100ms ease;
user-select: none;
-webkit-user-select: none;
}
.bk-hl-delete:hover {
background: #b33a3a;
color: #fff;
transform: scale(1.1);
}
.bk-hl-delete:focus-visible {
outline: 2px solid #b33a3a;
outline-offset: 2px;
}
/* „Alle Markierungen entfernen" — Danger-Variante des Sm-Buttons in der
Lösungs-Toolbar. */
.bk-btn-danger {
border: 1px solid #b33a3a !important;
color: #b33a3a !important;
}
.bk-btn-danger:hover {
background: #b33a3a !important;
color: #fff !important;
}
/* ---- Block-Liste ---- */
.blocks-editor-list {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 0.85rem;
margin-bottom: 0.75rem;
}
.blocks-editor-list-actions {
margin-top: 0.5rem;
}
.bk-card {
border: 1px solid rgba(200, 210, 200, 0.8);
border-left: 4px solid var(--bk-blue);
border-radius: 10px;
background: rgba(255, 255, 255, 0.85);
padding: 0.85rem 0.95rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
transition: box-shadow 120ms ease, transform 120ms ease;
cursor: pointer;
flex: 0 1 auto;
min-width: 260px;
max-width: 100%;
}
.bk-card:hover {
box-shadow: 0 4px 14px rgba(20, 40, 30, 0.08);
transform: translateY(-1px);
}
.bk-card.bk-card--selected {
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06), 0 4px 18px rgba(20, 40, 30, 0.1);
background: rgba(255, 255, 255, 0.98);
}
.bk-card[data-color="blue"] { border-left-color: var(--bk-blue); }
.bk-card[data-color="green"] { border-left-color: var(--bk-green); }
.bk-card[data-color="orange"] { border-left-color: var(--bk-orange); }
.bk-card[data-color="purple"] { border-left-color: var(--bk-purple); }
.bk-card[data-color="teal"] { border-left-color: var(--bk-teal); }
.bk-card[data-color="pink"] { border-left-color: var(--bk-pink); }
.bk-card-head {
display: flex;
align-items: center;
gap: 0.5rem;
}
.bk-card-num {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.8em;
height: 1.8em;
font-size: 0.85rem;
font-weight: 700;
color: #fff;
border-radius: 50%;
background: var(--bk-blue);
}
.bk-card[data-color="blue"] .bk-card-num { background: var(--bk-blue); }
.bk-card[data-color="green"] .bk-card-num { background: var(--bk-green); }
.bk-card[data-color="orange"] .bk-card-num { background: var(--bk-orange); }
.bk-card[data-color="purple"] .bk-card-num { background: var(--bk-purple); }
.bk-card[data-color="teal"] .bk-card-num { background: var(--bk-teal); }
.bk-card[data-color="pink"] .bk-card-num { background: var(--bk-pink); }
.bk-card-title-input {
flex: 0 1 auto;
border: none;
background: transparent;
font-size: 0.95rem;
font-weight: 600;
color: var(--ubt-dark, #1c2723);
padding: 0.2rem 0.3rem;
border-radius: 4px;
width: auto;
min-width: 14ch;
}
.bk-card-title-input:focus {
outline: 1px solid rgba(0, 0, 0, 0.15);
background: rgba(255, 255, 255, 0.95);
}
.bk-card-meta-row {
display: flex;
align-items: center;
gap: 0.6rem;
font-size: 0.82rem;
}
.bk-card-color-picker {
display: inline-flex;
gap: 0.2em;
}
.bk-card-color-dot {
width: 14px; height: 14px;
border-radius: 50%;
border: 2px solid transparent;
cursor: pointer;
transition: transform 100ms ease;
}
.bk-card-color-dot:hover { transform: scale(1.15); }
.bk-card-color-dot[data-color="blue"] { background: var(--bk-blue); }
.bk-card-color-dot[data-color="green"] { background: var(--bk-green); }
.bk-card-color-dot[data-color="orange"] { background: var(--bk-orange); }
.bk-card-color-dot[data-color="purple"] { background: var(--bk-purple); }
.bk-card-color-dot[data-color="teal"] { background: var(--bk-teal); }
.bk-card-color-dot[data-color="pink"] { background: var(--bk-pink); }
.bk-card-color-dot.bk-active { border-color: rgba(0, 0, 0, 0.45); }
.bk-card-variant-picker {
display: inline-flex;
gap: 0.1em;
margin-left: 0.4em;
padding-left: 0.4em;
border-left: 1px solid rgba(0, 0, 0, 0.08);
}
.bk-card-variant-dot {
width: 14px; height: 14px;
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, 0.18);
background: rgba(0, 0, 0, 0.08);
cursor: pointer;
font-size: 0.55rem;
line-height: 14px;
text-align: center;
color: rgba(0, 0, 0, 0.5);
}
.bk-card-variant-dot.bk-active { background: rgba(0, 0, 0, 0.28); color: #fff; }
.bk-card-weight {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 0.25em;
}
.bk-card-weight input {
width: 4.5em;
text-align: right;
padding: 0.15rem 0.3rem;
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 4px;
background: rgba(255, 255, 255, 0.85);
font-size: 0.82rem;
}
.bk-card-ranges {
font-size: 0.78rem;
color: var(--ubt-medium);
}
.bk-card-actions {
display: flex;
gap: 0.3rem;
justify-content: flex-end;
}
.bk-card-btn-small {
font-size: 0.74rem;
padding: 0.15em 0.5em;
border: 1px solid rgba(0, 0, 0, 0.15);
background: rgba(255, 255, 255, 0.9);
border-radius: 4px;
cursor: pointer;
color: var(--ubt-medium);
}
.bk-card-btn-small:hover { color: var(--ubt-dark); }
.bk-card-btn-small.bk-card-btn-danger:hover { color: #b33a3a; border-color: #b33a3a; }
/* Weight-Summe-Indikator */
.blocks-weight-sum.bk-sum-ok { color: #0a7d3e; }
.blocks-weight-sum.bk-sum-warn { color: #b58a00; }
.blocks-weight-sum.bk-sum-error { color: #b33a3a; }
/* ---- Tutorfragen-Übersicht (alle Blöcke) ---- */
.blocks-allq-head-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.blocks-allq-viewmode {
display: inline-flex;
gap: 0.3rem;
}
.bk-vm-tab {
border: 1px solid rgba(0, 0, 0, 0.12);
background: rgba(255, 255, 255, 0.85);
color: var(--ubt-medium);
}
.bk-vm-tab.bk-active {
background: var(--ubt-dark, #1c2723);
color: #fff;
border-color: var(--ubt-dark, #1c2723);
}
/* Gläserne Hintergrund-Tönung der Fragen-Sektion, gesteuert vom zentralen
Mode-Slider. Stilistik orientiert sich an .stats-kpi-card (linear-
gradient + blur + saturate + inset-highlight + sanfter Schatten).
Wechselt smooth zwischen grünlich (Geführt) und warm-gelblich
(Unterstützt). */
.blocks-editor-section.blocks-editor-allquestions-section {
background: linear-gradient(140deg,
rgba(255, 255, 255, 0.94) 0%,
rgba(232, 248, 240, 0.82) 100%);
backdrop-filter: blur(10px) saturate(125%);
-webkit-backdrop-filter: blur(10px) saturate(125%);
border: 1px solid rgba(207, 226, 214, 0.7);
box-shadow:
0 1px 2px rgba(20, 40, 30, 0.04),
0 6px 18px rgba(20, 40, 30, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
transition:
background 380ms cubic-bezier(0.22, 1, 0.36, 1),
border-color 380ms ease,
box-shadow 380ms ease;
}
/* Unterstützt-Modus = warmer, gläserner Gelb-Beige-Verlauf. */
.blocks-editor-section.blocks-editor-allquestions-section[data-active-mode="unterstuetzt"] {
background: linear-gradient(140deg,
rgba(255, 253, 247, 0.94) 0%,
rgba(252, 240, 205, 0.80) 100%);
border-color: rgba(232, 215, 160, 0.65);
box-shadow:
0 1px 2px rgba(80, 60, 10, 0.04),
0 6px 18px rgba(80, 60, 10, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
/* Zentraler Mode-Slider (Geführt / Unterstützt). Farbgebung 1:1 vom
.diff-slider übernommen, das die Bearbeiter:innen bei der Modus-Auswahl
sehen: Geführt = grünes Gradient, Unterstützt = gelbes Gradient. Track
hat denselben hellen Hintergrund + Inset-Shadow. */
.blocks-allq-mode-slider-row {
display: flex;
justify-content: center;
margin: 0.6rem 0 0.4rem;
}
.bk-mode-slider {
/* Identische Pill-Farben wie im .diff-slider */
--knob-green-top: #4fb57a;
--knob-green-bot: #2f8e5a;
--knob-yellow-top: #e8c930;
--knob-yellow-bot: #b89a18;
position: relative;
display: inline-flex;
background: #eef3f0;
border: 1px solid #d7e4db;
border-radius: 999px;
padding: 4px;
user-select: none;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}
.bk-mode-slider-pill {
position: absolute;
top: 4px;
left: 4px;
width: calc(50% - 4px);
height: calc(100% - 8px);
background: linear-gradient(180deg,
var(--knob-green-top) 0%,
var(--knob-green-bot) 100%);
border-radius: 999px;
box-shadow: 0 2px 6px rgba(0, 100, 60, 0.25);
transition:
transform 0.35s cubic-bezier(0.4, 0.1, 0.2, 1),
background 0.45s cubic-bezier(0.4, 0.0, 0.2, 1),
box-shadow 0.45s ease;
z-index: 0;
pointer-events: none;
}
.bk-mode-slider[data-active="unterstuetzt"] .bk-mode-slider-pill {
transform: translateX(100%);
background: linear-gradient(180deg,
var(--knob-yellow-top) 0%,
var(--knob-yellow-bot) 100%);
box-shadow: 0 2px 6px rgba(155, 130, 0, 0.28);
}
.bk-mode-slider-btn {
position: relative;
z-index: 1;
border: none;
background: transparent;
padding: 0.45em 1.4em;
border-radius: 999px;
cursor: pointer;
font-weight: 600;
font-size: 0.92em;
color: #3c4d44;
transition: color 0.3s ease;
min-width: 10ch;
}
.bk-mode-slider-btn.bk-active {
color: #ffffff;
}
.bk-mode-slider-btn:hover:not(.bk-active) {
color: #304737;
}
.bk-mode-slider-count {
font-weight: 500;
font-size: 0.88em;
opacity: 0.92;
}
/* Info-Zeile im Block-Panel mit Counts pro Modus — die Pills tragen
IMMER die Modus-Farbcodierung (grün = Geführt, gelb = Unterstützt,
abgestimmt mit dem zentralen Slider). Der aktiv gewählte Modus wird
zusätzlich zur Pill mit voll-gradient hervorgehoben. */
.bk-allq-panel-info {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.bk-allq-mode-tag {
font-size: 0.78em;
padding: 0.18em 0.65em;
border-radius: 999px;
font-weight: 500;
border: 1px solid transparent;
transition:
background 240ms cubic-bezier(0.4, 0.0, 0.2, 1),
color 240ms ease,
border-color 240ms ease,
box-shadow 240ms ease;
}
/* Inaktiv = zart-getönte Pill in der Modus-Farbe. */
.bk-allq-mode-tag[data-mode="gefuehrt"] {
background: rgba(79, 181, 122, 0.14);
color: #2f6c4a;
border-color: rgba(79, 181, 122, 0.32);
}
.bk-allq-mode-tag[data-mode="unterstuetzt"] {
background: rgba(232, 201, 48, 0.18);
color: #6c5a10;
border-color: rgba(232, 201, 48, 0.42);
}
/* Aktiv = voll-gradient + weiße Schrift + leichter Drop-Shadow. Farben
exakt wie die Pill im zentralen Mode-Slider. */
.bk-allq-mode-tag.bk-active[data-mode="gefuehrt"] {
background: linear-gradient(180deg, #4fb57a 0%, #2f8e5a 100%);
color: #ffffff;
font-weight: 600;
border-color: transparent;
box-shadow: 0 1px 3px rgba(0, 100, 60, 0.22);
}
.bk-allq-mode-tag.bk-active[data-mode="unterstuetzt"] {
background: linear-gradient(180deg, #e8c930 0%, #b89a18 100%);
color: #ffffff;
font-weight: 600;
border-color: transparent;
box-shadow: 0 1px 3px rgba(155, 130, 0, 0.24);
}
/* Karussell: horizontal scrollbar, jedes Panel ist eine "Karte" mit
fester Mindestbreite. Auf großen Bildschirmen sieht man 2-3
gleichzeitig — auf kleineren scrollt es horizontal. */
.blocks-editor-allquestions[data-viewmode="carousel"] {
display: flex;
flex-direction: row;
overflow-x: auto;
overflow-y: hidden;
gap: 1rem;
padding: 0.25rem 0.25rem 1rem;
scroll-snap-type: x proximity;
}
.blocks-editor-allquestions[data-viewmode="carousel"] .bk-allq-panel {
flex: 0 0 380px;
min-width: 320px;
max-width: 480px;
scroll-snap-align: start;
}
/* Liste: vertikal gestapelt, normales Page-Scroll. */
.blocks-editor-allquestions[data-viewmode="list"] {
display: flex;
flex-direction: column;
gap: 1rem;
}
.blocks-editor-allquestions[data-viewmode="list"] .bk-allq-panel {
width: 100%;
}
/* Panel-Optik. */
.bk-allq-panel {
border: 1px solid rgba(200, 210, 200, 0.8);
border-left: 4px solid var(--bk-blue);
border-radius: 10px;
background: rgba(255, 255, 255, 0.95);
padding: 0.85rem 0.95rem;
display: flex;
flex-direction: column;
gap: 0.6rem;
box-shadow: 0 2px 10px rgba(20, 40, 30, 0.04);
}
.bk-allq-panel--selected {
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(20, 40, 30, 0.1);
}
.bk-allq-panel[data-color="blue"] { border-left-color: var(--bk-blue); }
.bk-allq-panel[data-color="green"] { border-left-color: var(--bk-green); }
.bk-allq-panel[data-color="orange"] { border-left-color: var(--bk-orange); }
.bk-allq-panel[data-color="purple"] { border-left-color: var(--bk-purple); }
.bk-allq-panel[data-color="teal"] { border-left-color: var(--bk-teal); }
.bk-allq-panel[data-color="pink"] { border-left-color: var(--bk-pink); }
.bk-allq-panel-head {
display: flex;
align-items: center;
gap: 0.5rem;
}
.bk-allq-panel-num {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.8em;
height: 1.8em;
font-size: 0.85rem;
font-weight: 700;
color: #fff;
border-radius: 50%;
background: var(--bk-blue);
}
.bk-allq-panel[data-color="blue"] .bk-allq-panel-num { background: var(--bk-blue); }
.bk-allq-panel[data-color="green"] .bk-allq-panel-num { background: var(--bk-green); }
.bk-allq-panel[data-color="orange"] .bk-allq-panel-num { background: var(--bk-orange); }
.bk-allq-panel[data-color="purple"] .bk-allq-panel-num { background: var(--bk-purple); }
.bk-allq-panel[data-color="teal"] .bk-allq-panel-num { background: var(--bk-teal); }
.bk-allq-panel[data-color="pink"] .bk-allq-panel-num { background: var(--bk-pink); }
.bk-allq-panel-title {
font-weight: 600;
color: var(--ubt-dark, #1c2723);
flex: 1 1 auto;
min-width: 0;
overflow-wrap: anywhere;
}
/* Lade-Status für KI-auslösende Buttons. Das Brand-Ladesymbol selbst kommt
aus .spinner / .spinner--xs (zentral via loader_spinner.js), hier nur die
Button-eigene Ausgrauung + Cursor + Label-Stil. */
.bk-btn-loading {
opacity: 0.7;
cursor: progress !important;
transition: opacity 200ms ease;
}
.bk-btn-loading[disabled] {
/* disabled-Default override-en, damit der Button sichtbar leicht
ausgegraut ist, aber nicht komplett blass. */
color: inherit;
}
.bk-btn-loading-label {
font-weight: inherit;
vertical-align: baseline;
}
/* Inline-Confirm-Modal — Ersatz für native confirm(), damit Firefox-
Dialog-Sperren nicht zu stummem Abbruch führen. Glas-Optik im Stil
der restlichen App. */
.bk-confirm-overlay {
position: fixed;
inset: 0;
background: rgba(20, 30, 25, 0.45);
backdrop-filter: blur(4px) saturate(110%);
-webkit-backdrop-filter: blur(4px) saturate(110%);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
animation: bk-confirm-fade 160ms ease-out;
}
@keyframes bk-confirm-fade {
from { opacity: 0; }
to { opacity: 1; }
}
.bk-confirm-card {
background: linear-gradient(155deg,
rgba(255, 255, 255, 0.97) 0%,
rgba(247, 251, 249, 0.93) 100%);
backdrop-filter: blur(10px) saturate(125%);
-webkit-backdrop-filter: blur(10px) saturate(125%);
border: 1px solid rgba(207, 226, 214, 0.7);
border-radius: 14px;
padding: 1.4rem 1.6rem;
max-width: 540px;
width: 100%;
box-shadow:
0 1px 2px rgba(20, 40, 30, 0.06),
0 18px 50px rgba(20, 40, 30, 0.20),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
animation: bk-confirm-pop 220ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes bk-confirm-pop {
from { opacity: 0; transform: translateY(8px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.bk-confirm-card--danger {
border-color: rgba(196, 100, 80, 0.5);
}
.bk-confirm-title {
margin: 0 0 0.5rem 0;
font-size: 1.15rem;
font-weight: 700;
color: var(--ubt-dark, #1c2723);
}
.bk-confirm-card--danger .bk-confirm-title {
color: #a8442e;
}
.bk-confirm-message {
color: #3c4a40;
font-size: 0.95rem;
line-height: 1.55;
margin-bottom: 1.2rem;
}
.bk-confirm-actions {
display: flex;
justify-content: flex-end;
gap: 0.6rem;
flex-wrap: wrap;
}
.bk-confirm-cancel {
background: rgba(0, 0, 0, 0.04);
color: var(--ubt-dark, #1c2723);
border: 1px solid rgba(0, 0, 0, 0.08);
}
.bk-confirm-cancel:hover {
background: rgba(0, 0, 0, 0.08);
}
.bk-confirm-danger {
background: linear-gradient(180deg, #c64a36 0%, #9d3220 100%);
color: #fff;
border: 1px solid #8b2c1c;
box-shadow: 0 1px 3px rgba(140, 40, 20, 0.25);
}
.bk-confirm-danger:hover {
background: linear-gradient(180deg, #d4543f 0%, #ad3a26 100%);
}
/* Drag-and-Drop: Block-Reihenfolge ändern.
Drag-Handle (⋮⋮) ist die einzige draggable-Stelle pro Karte/Panel, damit
Inputs/Buttons im Block weiter ohne Konflikt bedienbar bleiben. */
.bk-drag-handle {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.95em;
line-height: 1;
color: rgba(0, 0, 0, 0.32);
cursor: grab;
user-select: none;
-webkit-user-select: none;
padding: 0.05em 0.25em;
margin-right: 0.25em;
border-radius: 4px;
letter-spacing: -0.15em;
transition: color 100ms ease, background 100ms ease;
}
.bk-drag-handle:hover {
color: rgba(0, 0, 0, 0.7);
background: rgba(0, 0, 0, 0.05);
}
.bk-drag-handle:active,
.bk-drag-handle[draggable="true"]:active {
cursor: grabbing;
}
/* Während eines Drags: Quell-Block halbtransparent, damit der User
sieht, was bewegt wird. */
.bk-card.bk-dragging,
.bk-allq-panel.bk-dragging {
opacity: 0.35;
}
/* Drop-Indikator: dicke farbige Linie an der Seite, an der eingefügt
würde. Default (horizontaler Flow): vertikale Linie an linker/rechter
Kante. Im List-Viewmode der Fragen-Sektion umgeschaltet auf horizontale
Linie oben/unten. */
.bk-drop-before,
.bk-drop-after {
position: relative;
}
.bk-drop-before::before,
.bk-drop-after::after {
content: '';
position: absolute;
background: var(--ubt-primary, #009260);
border-radius: 3px;
z-index: 4;
pointer-events: none;
}
.bk-drop-before::before {
top: 0; bottom: 0; left: -6px; width: 4px;
}
.bk-drop-after::after {
top: 0; bottom: 0; right: -6px; width: 4px;
}
.blocks-editor-allquestions[data-viewmode="list"] .bk-drop-before::before {
left: 0; right: 0; top: -6px; bottom: auto; width: auto; height: 4px;
}
.blocks-editor-allquestions[data-viewmode="list"] .bk-drop-after::after {
left: 0; right: 0; bottom: -6px; top: auto; width: auto; height: 4px;
}
/* Hint für GPU-Compositing — die FLIP-Animation setzt transform direkt,
das läuft dadurch ruckelfreier. */
.bk-card,
.bk-allq-panel,
.bk-q-item {
will-change: transform;
}
/* Drag-and-Drop in Fragen-Listen (immer vertikal):
Drop-Indikator als horizontale Linie über bzw. unter der Frage,
Drag-Quelle halbtransparent. Eigene Spezifität, damit die globalen
.bk-drop-before/.bk-drop-after-Regeln (vertikale Linie für Blöcke)
in der Fragenliste überschrieben werden. */
.bk-q-item.bk-dragging {
opacity: 0.35;
}
.bk-q-list .bk-q-item.bk-drop-before::before {
left: 0; right: 0; top: -3px; bottom: auto; width: auto; height: 3px;
}
.bk-q-list .bk-q-item.bk-drop-after::after {
left: 0; right: 0; bottom: -3px; top: auto; width: auto; height: 3px;
}
.bk-q-drag-handle {
font-size: 0.85em;
color: rgba(0, 0, 0, 0.28);
margin-right: 0.15em;
}
/* Bulk-KI Overlay (in der Fragen-Sektion eingehängt) — deutlich sichtbar,
damit der Lauf-Zustand nicht in der dezenten Status-Zeile versteckt
bleibt. */
.bk-bulk-overlay {
background: rgba(255, 255, 255, 0.98);
border: 1px solid rgba(0, 146, 96, 0.35);
border-left: 4px solid var(--ubt-primary, #009260);
border-radius: 10px;
padding: 0.9rem 1.1rem;
margin-bottom: 1rem;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
position: sticky;
top: 0;
z-index: 5;
}
.bk-bulk-overlay-card {
display: flex;
align-items: center;
gap: 0.85rem;
}
.bk-bulk-overlay-card .spinner {
margin: 0;
flex: 0 0 auto;
}
/* "Alle voll"-Banner — wird kurz oben in der Fragen-Sektion eingeblendet,
wenn der Bulk-Knopf nichts zu tun hat. */
.bk-bulk-banner {
background: rgba(255, 248, 220, 0.95);
border: 1px solid rgba(179, 138, 0, 0.4);
border-left: 4px solid #b58a00;
border-radius: 10px;
padding: 0.85rem 1rem;
margin-bottom: 1rem;
color: #5a4500;
line-height: 1.45;
}
.bk-q-list-empty {
padding: 0.6rem 0.8rem;
color: var(--ubt-medium);
font-style: italic;
font-size: 0.85rem;
background: rgba(250, 252, 250, 0.6);
border-radius: 6px;
}
/* ---- Fragen-Editor (alt — wird vorerst nicht mehr benutzt, bleibt
für Rückwärtskompatibilität anderer Seiten erhalten) ---- */
.blocks-editor-questions-empty {
padding: 1.5rem;
text-align: center;
color: var(--ubt-medium);
font-style: italic;
background: rgba(250, 252, 250, 0.6);
border-radius: 10px;
}
.blocks-editor-questions-panel {
border: 1px solid rgba(200, 210, 200, 0.8);
border-left: 4px solid var(--bk-blue);
border-radius: 10px;
background: rgba(255, 255, 255, 0.92);
padding: 1rem;
}
.blocks-editor-questions-panel[data-color="blue"] { border-left-color: var(--bk-blue); }
.blocks-editor-questions-panel[data-color="green"] { border-left-color: var(--bk-green); }
.blocks-editor-questions-panel[data-color="orange"] { border-left-color: var(--bk-orange); }
.blocks-editor-questions-panel[data-color="purple"] { border-left-color: var(--bk-purple); }
.blocks-editor-questions-panel[data-color="teal"] { border-left-color: var(--bk-teal); }
.blocks-editor-questions-panel[data-color="pink"] { border-left-color: var(--bk-pink); }
.bk-q-mode-tabs {
display: flex;
gap: 0.3rem;
margin-bottom: 0.85rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.bk-q-mode-tab {
padding: 0.4em 0.85em;
border: none;
background: transparent;
color: var(--ubt-medium);
cursor: pointer;
border-bottom: 2px solid transparent;
font-weight: 500;
font-size: 0.9rem;
}
.bk-q-mode-tab.bk-active {
color: var(--ubt-dark);
border-bottom-color: var(--ubt-primary, #009260);
}
.bk-q-mode-actions {
display: flex;
gap: 0.4rem;
margin-bottom: 0.6rem;
}
.bk-q-list {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.bk-q-item {
display: flex;
align-items: flex-start;
gap: 0.5rem;
padding: 0.45rem 0.55rem;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 6px;
background: rgba(255, 255, 255, 0.85);
}
.bk-q-item-num {
flex: 0 0 auto;
width: 1.5em; height: 1.5em;
display: inline-flex;
align-items: center; justify-content: center;
font-size: 0.72rem;
font-weight: 600;
color: var(--ubt-medium);
background: rgba(0, 0, 0, 0.04);
border-radius: 50%;
}
.bk-q-item-text {
flex: 1 1 auto;
border: none;
background: transparent;
font-size: 0.92rem;
padding: 0.15rem 0.25rem;
resize: vertical;
min-height: 1.6em;
line-height: 1.4;
border-radius: 4px;
}
.bk-q-item-text:focus {
outline: 1px solid rgba(0, 0, 0, 0.12);
background: rgba(255, 255, 255, 0.98);
}
.bk-q-item-controls {
display: flex;
flex-direction: column;
gap: 0.2rem;
flex: 0 0 auto;
}
.bk-q-ai-badge {
display: inline-block;
margin-left: 0.3em;
padding: 0 0.4em;
font-size: 0.62em;
font-weight: 600;
color: var(--ubt-medium);
background: rgba(0, 0, 0, 0.05);
border-radius: 3px;
vertical-align: 0.1em;
}
/* Einstiegsfrage (Hinführung) — automatisch in Block 1 / Geführt
eingefügt; editierbar, aber im Tutor nicht in Score/Coverage gewertet. */
.bk-q-item--hinfuehrung {
background: rgba(0, 100, 180, 0.05);
border-left: 3px solid rgba(0, 100, 180, 0.5);
padding-left: 0.45em;
}
.bk-q-hf-badge {
display: inline-block;
margin-left: 0.3em;
padding: 0.05em 0.5em;
font-size: 0.62em;
font-weight: 700;
letter-spacing: 0.02em;
color: #0a4f7d;
background: rgba(0, 100, 180, 0.14);
border: 1px solid rgba(0, 100, 180, 0.35);
border-radius: 3px;
vertical-align: 0.1em;
white-space: nowrap;
}
/* Hinweis am Tutor-Pointer, wenn die aktuelle Frage eine Einstiegsfrage
ist („wird noch nicht gewertet"). */
.tutor-hf-banner {
display: inline-flex;
align-items: center;
gap: 0.4em;
margin: 0.3em 0 0.6em;
padding: 0.3em 0.7em;
font-size: 0.78em;
font-weight: 500;
color: #0a4f7d;
background: rgba(0, 100, 180, 0.10);
border: 1px solid rgba(0, 100, 180, 0.3);
border-radius: 4px;
}
.tutor-hf-banner::before {
content: "•";
color: rgba(0, 100, 180, 0.6);
}
/* ============================================================================
Fall-Sichtbarkeit / Freischaltung (faelle.php, Dozent:innen-/Admin-Ansicht)
========================================================================== */
/* Verborgen → neutral-grau, klar abgesetzt von den grün/gelb/blauen Status. */
.status-pill--hidden { background: #eef0f1; color: #5b656c; border: 1px solid #d6dadd; }
/* Sichtbarkeits-Spalte: Badge oben, Steuer-Buttons darunter. */
.case-vis-cell { white-space: normal; }
.case-vis-controls {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-top: 0.45rem;
}
.case-vis-readonly { margin-top: 0.45rem; display: inline-block; }
/* Kompakte Steuer-Buttons in der Sichtbarkeits-Spalte. */
.btn-vis {
padding: 0.28rem 0.7rem;
font-size: 0.82rem;
line-height: 1.25;
}
/* "Freischalten" hebt sich grün hervor (positive Primäraktion). */
.btn-vis-publish {
border-color: var(--ubt-green);
color: var(--ubt-green);
font-weight: 600;
}
.btn-vis-publish:hover {
background: var(--ubt-green);
color: var(--ubt-white);
}
/* Selbst-entfernender Status-/Fehler-Hinweis über der Tabelle. */
.case-vis-flash { margin-bottom: 1rem; }
/* Datums-/Uhrzeit-Feld im Planungs-Popup. */
.case-vis-sched-field { margin-top: 0.6rem; }
.case-vis-sched-field > span { font-weight: 600; font-size: 0.9rem; }
.case-vis-sched-field input[type="datetime-local"] {
width: 100%;
box-sizing: border-box;
}
.case-vis-sched-err { color: var(--ubt-error-fg); margin-top: 0.5rem; }
/* ---- Co-Autor:innen-Auswahl (fall_edit.php) ---- */
.co-author-list {
display: flex;
flex-direction: column;
gap: 0.35rem;
margin-top: 0.5rem;
}
.co-author-item {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.45rem 0.6rem;
border: 1px solid var(--ubt-light);
border-radius: 8px;
background: var(--ubt-white);
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease;
}
.co-author-item:hover { border-color: #bfd1c6; background: #f7fbf8; }
.co-author-item input { margin: 0; flex: 0 0 auto; }
.co-author-name { font-weight: 600; color: var(--ubt-dark); }
.co-author-role { margin-left: auto; }
/* ===========================================================================
* Abwandlungen (Fall-Varianten)
* ========================================================================= */
/* Übersicht: Abwandlung als eingerückter Unterpunkt ihres Grundfalls. */
.case-row--variant > td:first-child {
padding-left: 1.8rem;
}
.abw-branch {
color: var(--ubt-medium);
font-weight: 700;
margin-right: 0.15rem;
}
.abw-tag {
display: inline-block;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--ubt-green);
background: #eaf6ee;
border: 1px solid #bddcc7;
border-radius: 999px;
padding: 0.05rem 0.45rem;
margin-right: 0.4rem;
vertical-align: middle;
}
.abw-lock-hint { display: inline-block; max-width: 14rem; }
/* Editor: Abwandlungs-Verwaltung am Grundfall. */
.abw-list {
list-style: none;
margin: 0 0 1rem;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.abw-list-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.55rem 0.75rem;
border: 1px solid var(--ubt-light);
border-radius: 8px;
background: var(--ubt-white);
}
.abw-list-title { font-weight: 600; color: var(--ubt-dark); }
.abw-list-item .btn { margin-left: auto; }
.abw-add-form { margin: 0; }
/* Editor: vererbter Grundsachverhalt einer Abwandlung (read-only Kontext). */
.abw-grundsachverhalt {
border: 1px solid var(--ubt-light);
border-left: 4px solid var(--ubt-green);
border-radius: 8px;
background: #f5faf7;
padding: 0.75rem 1rem;
margin-bottom: 1rem;
}
.abw-grundsachverhalt-label {
display: block;
font-size: 0.8rem;
font-weight: 700;
color: var(--ubt-green);
margin-bottom: 0.4rem;
}
.abw-grundsachverhalt-text {
color: var(--ubt-dark);
white-space: pre-wrap;
text-align: justify;
hyphens: auto;
}
/* Bearbeitung: Grundsachverhalt-Sektion einer Abwandlung optisch absetzen. */
.case-section--grund h2 { color: var(--ubt-medium); }
.case-text--grund {
color: var(--ubt-dark);
white-space: pre-wrap;
text-align: justify;
text-justify: inter-word;
hyphens: auto;
border-left: 4px solid var(--ubt-light);
padding-left: 1rem;
opacity: 0.92;
}
/* ===========================================================================
* Word-Upload an der Lösungsskizze (fall_edit)
* ========================================================================= */
.sol-upload {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 0.75rem;
margin-bottom: 0.85rem;
padding: 0.6rem 0.75rem;
border: 1px dashed #cdddd2;
border-radius: 8px;
background: #f7fbf8;
}
.sol-upload small { flex-basis: 100%; line-height: 1.4; }
.btn-upload {
background: var(--ubt-white);
color: var(--ubt-green);
border: 1px solid var(--ubt-green);
}
.btn-upload:hover { background: rgba(0,146,96,0.06); color: var(--ubt-green); }
.btn-upload:disabled { opacity: 0.6; cursor: progress; }
.sol-upload-status { font-size: 0.85rem; color: var(--ubt-medium); }
.sol-upload-status--busy { color: var(--ubt-medium); }
.sol-upload-status--ok { color: #2f7d4f; }
.sol-upload-status--error { color: #b33a3a; }
/* Vorschau-Modal */
.sol-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
}
.sol-modal[hidden] { display: none; }
.sol-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(20, 30, 26, 0.45);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
}
.sol-modal-box {
position: relative;
z-index: 1;
width: min(760px, 100%);
max-height: 85vh;
display: flex;
flex-direction: column;
background: var(--ubt-white);
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
padding: 1.4rem 1.5rem;
}
.sol-modal-title { margin: 0 0 0.3rem; font-size: 1.1rem; }
.sol-modal-preview {
flex: 1 1 auto;
min-height: 320px;
margin: 0.6rem 0 1rem;
width: 100%;
resize: vertical;
font-family: var(--mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
font-size: 0.88rem;
line-height: 1.5;
white-space: pre;
overflow: auto;
color: var(--ubt-dark);
background: #fafdfb;
border: 1px solid var(--ubt-light);
border-radius: 8px;
padding: 0.75rem;
}
.sol-modal-actions {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
justify-content: flex-end;
}
body.sol-modal-open { overflow: hidden; }