/* ═══ RESET ═══ */
html, body { color-scheme: light; forced-color-adjust: none; }
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; font-family: Arial, sans-serif; background: #F5F8FA; color: #222; min-height: 100vh; }
sub, sup { font-size: 0.65em; }
:root {
/* ── Marke / Aktionsfarbe ── */
--cyan:#00B0F0; --cyan-dark:#0091C7; --cyan-light:#DDF4FC;
--navy:#1F4E79; --navy-dark:#173A5A; --dark:var(--navy);
/* ── Neutraler Unterbau ── */
--bg:#F5F8FA; --surface:#FFFFFF; --surface-2:#F8FAFC;
--ink:#1F2937; --ink-2:#4A5868; --ink-3:#8A98AB;
--border:#E2E8F0; --border-strong:#CBD5E1;
/* ── Statusfarben (nur semantisch) ── */
--success:#2E7D32; --success-bg:#E8F5E9; --warning:#E65100; --warning-bg:#FFF3E0;
--info:#0369A1; --info-bg:#E0F2FE; --danger:#DC2626; --danger-bg:#FEE2E2;
--ki:#7C3AED; --ki-bg:#F3EEFF; --ki-grad:linear-gradient(135deg,#7C3AED,#9F67FA);
/* ── Spacing (4px-Grid) ── */
--sp-xs:4px; --sp-sm:8px; --sp-md:12px; --sp-lg:16px; --sp-xl:24px; --sp-2xl:32px;
/* ── Radius ── */
--radius-sm:6px; --radius-md:8px; --radius-lg:12px; --radius-pill:999px;
/* ── Typo ── */
--font:-apple-system,"Segoe UI",Arial,sans-serif;
--text-xs:11px; --text-sm:13px; --text-base:14px; --text-lg:16px; --text-xl:18px; --text-2xl:22px;
--fw-reg:400; --fw-med:600; --fw-bold:700;
/* ── Elevation ── */
--shadow-sm:0 1px 3px rgba(15,23,42,0.08); --shadow-md:0 4px 12px rgba(15,23,42,0.10);
--shadow-lg:0 10px 28px rgba(15,23,42,0.14); --shadow-xl:0 20px 48px rgba(15,23,42,0.18);
--focus-ring:0 0 0 3px rgba(0,176,240,0.30); --focus-ki:0 0 0 3px rgba(124,58,237,0.25);
/* ── iPad / Interaktion ── */
--tap:40px; --dur:0.15s;
/* ── Layout ── */
--topbar-h: 48px;
}
/* Sichtbare Tastatur-/Touch-Fokus-Ringe (iPad) */
:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* ═══ TOP BAR ═══ */
#topbar {
position: fixed; top: 0; left: 0; right: 0;
height: var(--topbar-h);
background: linear-gradient(180deg, var(--navy) 0%, var(--navy-dark) 100%);
color: white;
display: flex; align-items: center;
padding: 0 var(--sp-xl); z-index: 1000; gap: var(--sp-lg);
box-shadow: var(--shadow-sm);
}
.tb-brand { font-size: var(--text-lg); font-weight: var(--fw-bold); flex: none; display: flex; align-items: center; gap: var(--sp-sm); letter-spacing: 0.01em; }
.tb-status { display: flex; align-items: center; gap: 6px; font-size: 12px; opacity: 0.8; }
#tb-status-dot { font-size: 9px; }
#tb-status-dot.ok { color: #69F0AE; }
#tb-status-dot.dirty { color: #FFD740; }
#tb-status-dot.err { color: #FF5252; }
#tb-status-dot.loading { color: #82B1FF; }
.tb-actions { display: flex; align-items: center; gap: 10px; }
.tb-btn {
background: rgba(255,255,255,0.13); border: 1px solid rgba(255,255,255,0.22);
color: white; padding: var(--sp-sm) var(--sp-md); border-radius: var(--radius-sm); cursor: pointer;
min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center;
font-size: var(--text-sm); font-weight: var(--fw-med); font-family: var(--font);
transition: background var(--dur);
}
.tb-btn:hover { background: rgba(255,255,255,0.22); }
.tb-btn:focus-visible { box-shadow: var(--focus-ring); }
.tb-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.tb-btn-primary { background: var(--cyan); border-color: var(--cyan-dark); }
.tb-btn-primary:hover { background: var(--cyan-dark); }
/* ═══ TOP-NAVIGATION: „Übersicht" + Klassen direkt (renderClassNav) ═══ */
.tb-classnav {
flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
overflow-x: auto; padding: 0 var(--sp-sm); scrollbar-width: none;
}
.tb-classnav::-webkit-scrollbar { height: 0; }
.nav-home {
flex: none; display: inline-flex; align-items: center; gap: 7px;
border: none; cursor: pointer; padding: 7px 14px; border-radius: 999px;
font-size: 13.5px; font-weight: var(--fw-bold); font-family: var(--font);
background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.85);
white-space: nowrap; transition: background 0.15s, color 0.15s;
}
.nav-home:hover { background: rgba(255,255,255,0.2); color: #fff; }
.nav-home.active { background: #fff; color: var(--navy); }
.nav-sep { flex: none; width: 1px; height: 24px; background: rgba(255,255,255,0.18); }
/* Fach-/Stufen-Gruppierung der Chips. Das Fach-Badge (Icon + Name, Farbe aus
FACH_META) ist IMMER sichtbar — Fächer sind die erste Ordnungs-Ebene. */
.nav-fach { flex: none; display: inline-flex; align-items: center; gap: 8px; }
.nav-fach-badge {
display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
font-size: 11.5px; font-weight: var(--fw-bold); color: #fff;
background: var(--fach-farbe, var(--cyan)); border-radius: 999px; padding: 4px 11px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}
.nav-fach-icon { font-size: 12px; line-height: 1; }
.nav-stufe { flex: none; display: inline-flex; align-items: center; gap: 6px; }
.nav-stufe-label { font-size: 11px; font-weight: var(--fw-med); color: rgba(255,255,255,0.4); white-space: nowrap; }
.nav-klass {
flex: none; display: inline-flex; align-items: center; gap: 7px;
border: 1.5px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.06);
color: #fff; cursor: pointer; padding: 6px 13px 6px 10px; border-radius: 999px;
font-size: 13.5px; font-weight: var(--fw-bold); font-family: var(--font);
white-space: nowrap; transition: border-color 0.15s, background 0.15s;
}
.nav-klass .nav-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--chip, var(--cyan)); flex: none; }
.nav-klass:hover { border-color: var(--chip, var(--cyan)); background: rgba(255,255,255,0.12); }
.nav-klass.active { border-color: #fff; background: rgba(255,255,255,0.16); box-shadow: 0 0 0 2px rgba(255,255,255,0.18); }
.nav-neu {
flex: none; border: 1px dashed rgba(255,255,255,0.35); background: transparent;
color: rgba(255,255,255,0.8); cursor: pointer; padding: 6px 13px; border-radius: 999px;
font-size: 13px; font-weight: var(--fw-med); font-family: var(--font); white-space: nowrap;
transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.nav-neu:hover { border-color: var(--cyan); color: #fff; background: rgba(0,176,240,0.18); }
/* Archivierte Klassen (Vorjahre): gedämpft, aber anklickbar. */
.nav-klass--arch { opacity: 0.55; font-style: italic; }
.nav-klass--arch:hover { opacity: 0.85; }
.nav-archiv.active { border-style: solid; border-color: var(--cyan); color: #fff; background: rgba(0,176,240,0.14); }
/* "Noch keine Klasse"-Zustand im Hub */
.keine-klasse-state {
grid-column: 1 / -1; text-align: center; padding: 70px 20px;
background: white; border-radius: 16px; border: 2px dashed #D0D9E0;
}
.keine-klasse-icon { font-size: 56px; margin-bottom: 16px; }
.keine-klasse-state h2 { color: #1F4E79; margin: 0 0 10px; font-size: 22px; }
.keine-klasse-state p { color: #888; font-size: 14.5px; line-height: 1.6; margin: 0; }
/* ═══ LEHRPLAN BUTTON ═══ */
.card-btn.btn-lehrplan-ab {
background: #EDE7F6; border-color: #9C27B0; color: #6A1B9A;
}
.card-btn.btn-lehrplan-ab:hover { background: #D1C4E9; border-color: #7B1FA2; color: #4A148C; }
.card-btn.btn-lehrplan-ab.loading { opacity: 0.65; cursor: wait; }
/* ═══ LEHRPLAN MODAL ═══ */
#lehrplan-modal {
display: none; position: fixed; inset: 0; z-index: 3000;
background: rgba(0,0,0,0.45); align-items: center; justify-content: center;
}
#lehrplan-modal.open { display: flex; }
.lp-modal-box {
background: white; border-radius: 14px; padding: 28px 32px;
max-width: 540px; width: 90%; box-shadow: 0 16px 64px rgba(0,0,0,0.22);
position: relative;
}
.lp-modal-close {
position: absolute; top: 14px; right: 16px;
background: none; border: none; font-size: 20px; cursor: pointer;
color: #999; line-height: 1;
}
.lp-modal-close:hover { color: #333; }
.lp-modal-header {
display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
}
.lp-modal-icon { font-size: 28px; }
.lp-modal-title { font-size: 17px; font-weight: bold; color: var(--dark); }
.lp-modal-subtitle { font-size: 12px; color: #888; margin-top: 2px; }
.lp-badge {
display: inline-flex; align-items: center; gap: 5px;
background: #EDE7F6; color: #6A1B9A; border-radius: 20px;
padding: 3px 10px; font-size: 12px; font-weight: bold; margin-bottom: 16px;
}
.lp-section { margin-bottom: 14px; }
.lp-section-label {
font-size: 11px; font-weight: bold; text-transform: uppercase;
letter-spacing: 0.05em; color: #999; margin-bottom: 4px;
}
.lp-section-value { font-size: 14px; color: #333; line-height: 1.5; }
.lp-section-value.highlight {
background: var(--cyan-light); border-left: 3px solid var(--cyan);
padding: 8px 12px; border-radius: 0 6px 6px 0; font-size: 13px;
}
.lp-loading { text-align: center; padding: 30px 0; color: #888; font-size: 14px; }
.lp-spinner {
width: 32px; height: 32px; border: 3px solid #E0E0E0;
border-top-color: #9C27B0; border-radius: 50%;
animation: lp-spin 0.8s linear infinite; margin: 0 auto 12px;
}
@keyframes lp-spin { to { transform: rotate(360deg); } }
.lp-error { color: #C62828; text-align: center; padding: 20px 0; font-size: 14px; }
/* ═══ VIEWS ═══ */
.views-container { padding-top: var(--topbar-h); min-height: 100vh; }
/* Material-Untergruppen („Nur für dich" / „Für die Schüler") */
.hub-subsection { margin-bottom: var(--sp-2xl); }
.hub-subsection-title {
font-size: var(--text-base); font-weight: var(--fw-bold); color: var(--ink-2); letter-spacing: 0.3px;
text-transform: uppercase;
margin: 0 0 var(--sp-lg); padding-bottom: var(--sp-sm); border-bottom: 1px solid var(--border);
}
/* ═══ SCORM-Paket-Karte (oben im Klassen-Hub) ═══ */
.hub-scorm {
background: linear-gradient(135deg, #fff, var(--cyan-light));
border: 1.5px solid var(--cyan-light); border-radius: var(--radius-lg);
padding: 18px 20px; box-shadow: var(--shadow-md); margin-bottom: var(--sp-2xl);
}
.hub-scorm-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.hub-scorm-top .ic { font-size: 22px; }
.hub-scorm-top h3 { margin: 0; font-size: 15px; color: var(--navy); }
.hub-scorm-tag {
margin-left: auto; font-size: 11px; font-weight: var(--fw-bold); color: var(--success);
background: var(--success-bg); padding: 3px 9px; border-radius: 999px;
}
.hub-scorm-tag[style] { color: #fff; } /* archiviert-Badge (Inline-Farbe) lesbar */
.hub-scorm-sj { color: var(--ink-3); font-weight: var(--fw-med); }
.hub-scorm--arch { opacity: 0.9; }
.hub-scorm-link {
display: flex; align-items: center; gap: 8px; background: var(--surface);
border: 1px solid var(--border); border-radius: var(--radius-md); padding: 8px 10px; margin-bottom: 12px;
}
.hub-scorm-link .lbl { font-size: 11px; font-weight: var(--fw-bold); color: var(--ink-3); white-space: nowrap; }
.hub-scorm-link code {
flex: 1; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px;
color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hub-scorm-copy {
flex: none; border: 1px solid var(--cyan); background: var(--surface); color: var(--cyan-dark);
border-radius: var(--radius-sm); padding: 5px 11px; font-size: 12px; font-weight: var(--fw-bold);
cursor: pointer; white-space: nowrap;
}
.hub-scorm-copy:hover { background: var(--cyan-light); }
.hub-scorm-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hub-scorm-actions .btn-primary, .hub-scorm-actions .btn-sec, .hub-scorm-actions .btn-danger {
display: inline-flex; align-items: center; gap: 7px; border-radius: var(--radius-md);
padding: 9px 15px; font-size: 13px; font-weight: var(--fw-bold); cursor: pointer;
border: 1px solid transparent; text-decoration: none; font-family: var(--font);
transition: background .12s, border-color .12s, color .12s;
}
.hub-scorm-actions .btn-primary { background: var(--cyan); color: #fff; }
.hub-scorm-actions .btn-primary:hover { background: var(--cyan-dark); }
.hub-scorm-actions .btn-sec { background: var(--surface); border-color: var(--border); color: var(--ink-2); }
.hub-scorm-actions .btn-sec:hover { border-color: var(--cyan); color: var(--cyan-dark); }
.hub-scorm-actions .btn-danger { background: var(--surface); border: 1px solid var(--danger, #DC2626); color: var(--danger, #DC2626); }
.hub-scorm-actions .btn-danger:hover { background: var(--danger-bg, #FEE2E2); border-color: var(--danger, #DC2626); }
.hub-scorm-hint { margin: 0 0 12px; font-size: 12.5px; color: var(--ink-3); }
.view { display: none; }
.view.active { display: block; }
/* ═══ PAGE LAYOUT ═══ */
.page { max-width: 900px; margin: 0 auto; padding: var(--sp-2xl) var(--sp-xl) 64px; }
.page-inner { max-width: 900px; margin: 0 auto; padding: var(--sp-2xl) var(--sp-xl) 64px; }
/* Back button */
.zurueck-leiste { margin-bottom: 18px; }
/* Vollflächige Auswerter-Ansichten (iframe füllt Resthöhe unter der Topbar) */
.auswerter-view { height: calc(100vh - var(--topbar-h)); display: flex; flex-direction: column; overflow: hidden; }
.auswerter-view .zurueck-leiste { margin-bottom: 0; padding: 9px 16px; display: flex; align-items: center; flex-shrink: 0; border-bottom: 1px solid #E0E8EE; }
.zurueck-link {
display: inline-flex; align-items: center; gap: 6px;
color: var(--cyan-dark); background: white; border: 1.5px solid var(--cyan);
padding: 8px 16px; border-radius: 20px; text-decoration: none;
font-size: 14px; font-weight: bold; cursor: pointer; transition: background 0.15s;
font-family: Arial, sans-serif;
}
.zurueck-link:hover { background: var(--cyan-light); }
/* Section header */
.section-header {
margin-bottom: var(--sp-2xl); padding-bottom: var(--sp-lg); border-bottom: 1px solid var(--border);
display: flex; align-items: center; gap: var(--sp-lg);
}
.section-header .icon { font-size: 28px; }
.section-header h1 { color: var(--dark); font-size: var(--text-2xl); font-weight: var(--fw-bold); margin: 0; flex: 1; }
/* ═══ HUB TILES ═══ */
.question { text-align: center; color: var(--cyan-dark); font-size: var(--text-lg); font-weight: var(--fw-bold); margin-bottom: var(--sp-xl); }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-lg); }
.choice-card {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
padding: var(--sp-2xl) var(--sp-xl) var(--sp-xl); text-decoration: none; color: inherit;
box-shadow: var(--shadow-sm);
transition: border-color var(--dur) ease, box-shadow var(--dur) ease, transform var(--dur) ease;
cursor: pointer; display: block;
text-align: center; position: relative; overflow: hidden; user-select: none;
}
.choice-card:hover { border-color: var(--cyan); transform: translateY(-2px); box-shadow: var(--shadow-md); }
/* Breite Kombi-Kachel (Unterricht vorbereiten): volle Zeilenbreite — in der
„Nur für dich"-Sektion also exakt so breit wie Skizzen + RA zusammen.
1/-1 statt span 2 → kein Phantom-Spalten-Overflow bei schmalen auto-fit-Grids. */
.choice-card--wide { grid-column: 1 / -1; }
.choice-card:focus-visible { border-color: var(--cyan); box-shadow: var(--focus-ring); }
.choice-card.hidden-section { opacity: 0.45; filter: grayscale(60%); }
.choice-card.is-soon { cursor: default; }
.choice-card.is-soon:hover { border-color: var(--border); transform: none; box-shadow: var(--shadow-sm); }
.choice-card .card-icon { font-size: 40px; margin-bottom: var(--sp-md); }
.choice-card .card-title { font-size: var(--text-xl); font-weight: var(--fw-bold); color: var(--dark); }
.choice-card .card-count {
margin-top: var(--sp-md); display: inline-block; background: var(--cyan-light);
color: var(--cyan-dark); padding: var(--sp-xs) var(--sp-md); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: var(--fw-bold);
}
.choice-card.sa-card { border-color: #E65100; background: linear-gradient(135deg, #FFF8F5 0%, #FFF3E0 100%); }
.choice-card.sa-card::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
background: linear-gradient(90deg, #E65100, #FF8F00);
}
.choice-card.sa-card:hover { border-color: #E65100; box-shadow: 0 10px 28px rgba(230,81,0,0.18); }
.choice-card.sa-card .card-title { color: #BF360C; }
.sa-badge {
position: absolute; top: 14px; right: 44px; background: #E65100; color: white;
font-size: 11px; font-weight: bold; padding: 3px 9px; border-radius: 10px;
}
/* Hinweis auf Kacheln, die mangels sichtbarer Inhalte nicht ins Schülerpaket kommen */
.tile-autohide-note {
margin-top: 10px; padding: 4px 10px; border-radius: 12px;
background: #FFF3CD; border: 1.5px solid #FFC107; color: #856404;
font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center;
gap: 4px; line-height: 1.3;
}
/* ═══ AB SECTION TOOLBAR ═══ */
.section-toolbar {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: var(--sp-xl); padding: var(--sp-md) var(--sp-lg);
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); gap: var(--sp-md);
box-shadow: var(--shadow-sm);
}
.section-toolbar-hint { font-size: var(--text-sm); color: var(--ink-3); }
.section-toolbar-btns { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.btn-new {
background: var(--cyan); color: white; border: none; padding: var(--sp-sm) var(--sp-lg);
border-radius: var(--radius-sm); cursor: pointer; font-size: var(--text-base); font-weight: var(--fw-bold);
min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center;
font-family: var(--font); transition: background var(--dur); white-space: nowrap;
}
.btn-new:hover { background: var(--cyan-dark); }
.btn-new:focus-visible { box-shadow: var(--focus-ring); }
.btn-import {
background: white; color: #6A1B9A; border: 2px solid #9C27B0;
padding: 7px 16px; border-radius: 8px; cursor: pointer; font-size: 14px;
font-weight: bold; font-family: Arial, sans-serif;
transition: all 0.15s; white-space: nowrap;
}
.btn-import:hover { background: #F3E5FF; border-color: #7B1FA2; }
/* ═══ SCHULAUFGABEN-TRAINER ═══ */
.sa-trainer-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-lg); margin-bottom: var(--sp-md); display: flex; align-items: center; gap: var(--sp-lg); box-shadow: var(--shadow-sm); transition: border-color var(--dur), box-shadow var(--dur); }
.sa-trainer-card:hover { border-color: var(--warning); box-shadow: var(--shadow-md); }
.sa-num-badge { background: #FBE9E7; color: #BF360C; font-weight: bold; font-size: 13px; padding: 8px 14px; border-radius: 8px; white-space: nowrap; flex-shrink: 0; }
.sa-trainer-info { flex: 1; }
.sa-trainer-title { font-weight: bold; color: var(--dark); font-size: 15px; }
.sa-trainer-meta { font-size: 12px; color: #888; margin-top: 3px; }
.sa-trainer-themen { font-size: 12px; color: #555; margin-top: 5px; }
.sa-trainer-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.sa-btn { background: white; border: 1.5px solid #E65100; color: #E65100; border-radius: 7px; padding: 7px 14px; font-size: 13px; font-weight: bold; cursor: pointer; font-family: Arial, sans-serif; white-space: nowrap; transition: all 0.12s; }
.sa-btn:hover { background: #FBE9E7; }
.sa-btn-open { background: #E65100; color: white; border-color: #E65100; }
.sa-btn-open:hover { background: #BF360C; }
.sa-vis-btn { font-size: 12px; padding: 5px 10px; border-radius: 6px; border: 1.5px solid #66BB6A; background: #E8F5E9; color: #2E7D32; cursor: pointer; font-family: Arial, sans-serif; font-weight: 700; }
.sa-vis-btn.is-hidden { background: #FFF3CD; border-color: #FFC107; color: #856404; }.sa-empty { text-align: center; color: #aaa; padding: 50px 24px; }
.sa-empty-icon { font-size: 40px; margin-bottom: 12px; }
.sa-ab-option { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 6px; cursor: pointer; user-select: none; transition: background 0.1s; }
.sa-ab-option:hover { background: #EEF6FB; }
.sa-ab-option.selected { background: #DDF4FC; }
.sa-detail-panel { padding: 14px 0 4px; }
.sa-detail-section { margin-bottom: 22px; }
.sa-detail-sec-title { background: #E65100; color: white; border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: bold; margin-bottom: 10px; }
.sa-fq-card { background: white; border: 1.5px solid #FFCCBC; border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; box-shadow: 0 1px 3px #E6510010; }
.sa-fq-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.sa-fq-header-left { display: flex; align-items: center; gap: 8px; }
.sa-fq-nr { font-size: 11px; font-weight: bold; color: #E65100; text-transform: uppercase; letter-spacing: .05em; }
.sa-fq-type { font-size: 10px; background: #FBE9E7; color: #BF360C; border-radius: 4px; padding: 2px 7px; }
.sa-fq-actions { display: flex; gap: 5px; }
.sa-frage-edit-btn { background: none; border: 1px solid #D0D8E0; border-radius: 5px; padding: 4px 10px; cursor: pointer; font-size: 12px; color: #555; }
.sa-frage-edit-btn:hover { background: #F0F4F8; }
.sa-fq-frage { font-size: 14px; color: #1A3A5C; line-height: 1.55; margin-bottom: 10px; }
.sa-fq-mc-opts { display: flex; flex-direction: column; gap: 5px; }
.sa-fq-mc-opt { border: 1.5px solid #E0E0E0; border-radius: 7px; padding: 7px 12px; font-size: 13px; color: #333; }
.sa-fq-mc-opt.richtig { border-color: #2E7D32; background: #E8F5E9; color: #1B5E20; font-weight: bold; }
.sa-fq-luecken-text { font-size: 14px; line-height: 2.1; color: #1A3A5C; }
.sa-fq-blank { display: inline-block; background: #E65100; color: white; border-radius: 4px; padding: 0 8px; font-size: 12px; margin: 0 2px; vertical-align: middle; }
.sa-fq-pairs { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.sa-fq-pair { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.sa-fq-pair-l { background: #E3F2FD; border: 1px solid #90CAF9; border-radius: 6px; padding: 4px 10px; min-width: 80px; }
.sa-fq-pair-arr { color: #999; flex-shrink: 0; }
.sa-fq-pair-r { background: #F3E5F5; border: 1px solid #CE93D8; border-radius: 6px; padding: 4px 10px; }
.sa-fq-ml-box { background: #E8F5E9; border-left: 3px solid #2E7D32; border-radius: 6px; padding: 8px 12px; font-size: 13px; color: #1B5E20; margin-top: 4px; }
.sa-fq-tipp { font-size: 12px; color: #F57C00; margin-top: 8px; padding-top: 8px; border-top: 1px solid #FFCCBC; }
.sa-fq-card.editing { border-color: #E65100; box-shadow: 0 0 0 3px #E6510018; background: #FFFDF8; }
.sa-ei-body { padding-top: 4px; }
.sa-ei-lbl { display: block; font-size: 11px; font-weight: bold; color: #888; text-transform: uppercase; letter-spacing: .05em; margin: 10px 0 3px; }
.sa-ei-ta { width: 100%; min-height: 54px; border: 1.5px solid #D0D8E0; border-radius: 6px; padding: 8px 10px; font-size: 14px; font-family: Arial; resize: vertical; color: #1A3A5C; box-sizing: border-box; line-height: 1.5; }
.sa-ei-ta:focus, .sa-ei-inp:focus { border-color: #E65100; outline: none; box-shadow: 0 0 0 2px #E6510015; }
.sa-ei-inp { border: 1.5px solid #D0D8E0; border-radius: 6px; padding: 6px 10px; font-size: 14px; font-family: Arial; width: 100%; box-sizing: border-box; color: #1A3A5C; }
.sa-ei-mc-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.sa-ei-mc-row input[type=radio] { flex-shrink: 0; width: 16px; height: 16px; accent-color: #2E7D32; cursor: pointer; }
.sa-ei-mc-label { font-weight: bold; color: #E65100; width: 14px; flex-shrink: 0; font-size: 13px; }
.sa-ei-mc-inp { flex: 1; width: auto !important; }
.sa-ei-typ { border: 1.5px solid #FFCCBC; border-radius: 5px; padding: 2px 8px; font-size: 11px; color: #E65100; background: #FBE9E7; cursor: pointer; font-family: Arial; }
.sa-ei-save-btn { background: #E65100; color: white; border: none; border-radius: 6px; padding: 5px 14px; font-size: 12px; cursor: pointer; font-family: Arial; font-weight: bold; }
.sa-ei-save-btn:hover { background: #BF360C; }
.sa-add-frage-btn { display: block; width: 100%; margin-top: 6px; background: #FBE9E7; border: 1.5px dashed #E65100; color: #E65100; border-radius: 8px; padding: 8px; font-size: 13px; font-weight: bold; cursor: pointer; font-family: Arial; }
.sa-add-frage-btn:hover { background: #FFF3E0; }
.sa-ab-option input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; accent-color: var(--cyan); }
.sa-ab-label { font-size: 13px; color: var(--dark); }
/* ═══ SCHÜLERSICHT-OVERLAY ═══ */
#schueler-overlay { position: fixed; inset: 0; z-index: 2000; background: #F5F8FA; display: flex; flex-direction: column; }
#schueler-overlay[hidden] { display: none !important; }
.sv-topbar { background: var(--cyan-dark); color: white; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; gap: 12px; }
.sv-topbar-info { display: flex; flex-direction: column; gap: 2px; }
.sv-topbar-label { font-size: 11px; opacity: 0.7; font-weight: normal; text-transform: uppercase; letter-spacing: 0.05em; }
.sv-topbar-title { font-size: 16px; font-weight: bold; }
.sv-topbar-close { background: rgba(255,255,255,0.18); border: 1.5px solid rgba(255,255,255,0.4); color: white; border-radius: 7px; padding: 7px 16px; cursor: pointer; font-size: 13px; font-family: Arial, sans-serif; }
.sv-topbar-close:hover { background: rgba(255,255,255,0.28); }
/* ═══ PSE-EINSTELLUNGEN ═══ */
.pse-setting-card {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
padding: var(--sp-lg); display: flex; align-items: center;
justify-content: space-between; gap: var(--sp-lg); box-shadow: var(--shadow-sm);
transition: border-color var(--dur), box-shadow var(--dur);
}
.pse-setting-card:hover { border-color: var(--cyan); box-shadow: var(--shadow-md); }
.pse-sc-body { display: flex; align-items: center; gap: 14px; flex: 1; }
.pse-sc-icon { font-size: 26px; flex-shrink: 0; }
.pse-sc-title { font-weight: 700; font-size: 14px; color: var(--dark); margin-bottom: 2px; }
.pse-sc-desc { font-size: 12px; color: #666; line-height: 1.4; }
/* Toggle Switch */
.pse-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; cursor: pointer; }
.pse-toggle input { opacity: 0; width: 0; height: 0; }
.pse-slider {
position: absolute; inset: 0; background: #C8D4DF; border-radius: 24px;
transition: background 0.2s;
}
.pse-slider::before {
content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%;
background: white; top: 3px; left: 3px; transition: transform 0.2s;
box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.pse-toggle input:checked + .pse-slider { background: var(--cyan); }
.pse-toggle input:checked + .pse-slider::before { transform: translateX(20px); }
/* ═══ IMPORT OVERLAY ═══ */
#import-overlay {
position: fixed; inset: 0; z-index: 3100;
background: rgba(0,0,0,0.55);
display: flex; align-items: center; justify-content: center;
}
#import-overlay[hidden] { display: none; }
.import-box {
background: white; border-radius: 14px; padding: 36px 40px;
text-align: center; max-width: 380px; width: 90%;
box-shadow: 0 16px 64px rgba(0,0,0,0.25);
}
.import-spinner {
width: 44px; height: 44px; border: 4px solid #E0E0E0;
border-top-color: #9C27B0; border-radius: 50%;
animation: lp-spin 0.8s linear infinite; margin: 0 auto 18px;
}
.import-step { font-size: 15px; font-weight: bold; color: var(--dark); margin-bottom: 6px; }
.import-filename {
font-size: 12px; color: #999; margin-bottom: 20px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; margin-left: auto; margin-right: auto;
}
.import-cancel {
background: none; border: 1px solid #D0D0D0; color: #888;
padding: 6px 18px; border-radius: 6px; cursor: pointer;
font-size: 13px; font-family: Arial, sans-serif; transition: all 0.15s;
}
.import-cancel:hover { border-color: #C62828; color: #C62828; }
/* ═══ STOFFBEREICHE LAYOUT ═══ */
.ab-layout { display: flex; gap: 20px; align-items: flex-start; }
.ab-sidebar {
width: 172px; flex-shrink: 0; background: white;
border: 1.5px solid #E0E8EE; border-radius: 10px; overflow: hidden;
position: sticky; top: 16px;
}
.ab-sidebar-title {
font-size: 10px; font-weight: bold; color: #AAB; text-transform: uppercase;
letter-spacing: 0.6px; padding: 10px 14px 7px;
}
.ab-sidebar-item {
display: block; width: 100%; text-align: left; padding: 8px 14px;
border: none; border-left: 3px solid transparent; background: none;
cursor: pointer; font-size: 13px; color: var(--dark);
font-family: Arial, sans-serif; transition: all 0.12s; line-height: 1.3;
}
.ab-sidebar-item:hover { background: var(--cyan-light); }
.ab-sidebar-item.active {
background: var(--cyan-light); color: var(--cyan-dark);
font-weight: bold; border-left-color: var(--cyan);
}
.ab-main { flex: 1; min-width: 0; }
.ab-search-row { margin-bottom: 14px; }
.ab-search-input {
box-sizing: border-box; padding: 9px 14px;
border: 1.5px solid #E0E8EE; border-radius: 8px;
font-size: 14px; font-family: Arial, sans-serif; outline: none;
transition: border-color 0.15s; background: white;
}
.ab-search-input:focus { border-color: var(--cyan); }
.ab-sort-btn {
padding: 8px 12px; border: 1.5px solid #E0E8EE; border-radius: 8px;
background: #F8FAFC; color: #7A8FA6; font-size: 13px; font-weight: 600;
cursor: pointer; white-space: nowrap; font-family: Arial, sans-serif;
transition: all 0.15s;
}
.ab-sort-btn:hover { border-color: var(--cyan); color: #1A3A5C; background: #EEF4FF; }
.ab-sort-btn.ab-sort-active { border-color: var(--cyan); background: #EEF4FF; color: #1A3A5C; }
.tag.stoff-tag { background: #EDE9FE; color: #5B21B6; }
/* ═══ RICH-TEXT TOOLBAR ═══ */
#rt-toolbar {
/* ÜBER allen Popups (Block-Editor 10003, Phasen-Popup, ddx-Editor 10070,
Overlays 10000) — sonst ist die Formatierungs-Leiste dort unsichtbar und
„geht nicht" (der ddx-Drag&Drop-Editor liegt bei 10070!). */
position: fixed; z-index: 10090;
background: white; border: 1px solid #D0D9E0; border-radius: 9px;
box-shadow: 0 6px 24px rgba(0,0,0,0.16); padding: 4px 6px;
display: flex; gap: 2px; align-items: center; user-select: none;
}
/* display:flex overrides UA [hidden]{display:none} — explicit override needed */
#rt-toolbar[hidden] { display: none !important; }
.rt-btn {
border: none; background: none; cursor: pointer; border-radius: 6px;
padding: 5px 8px; font-size: 14px; font-family: Arial, sans-serif;
color: var(--dark); line-height: 1; transition: background 0.1s;
}
.rt-btn:hover { background: var(--cyan-light); }
.rt-btn.active { background: var(--cyan-light); color: var(--cyan-dark); }
.rt-color { font-weight: bold; font-size: 15px; padding: 4px 7px; }
.rt-sep { width: 1px; height: 18px; background: #D8D8D8; margin: 0 3px; }
/* ═══ IMPORT ECKDATEN MODAL ═══ */
#modal-import-eckdaten .modal-box { max-width: 420px; }
/* ═══ GROUPS ═══ */
.group { margin-bottom: 32px; }
.group-title {
color: var(--cyan-dark); font-size: 14px; font-weight: bold;
text-transform: uppercase; letter-spacing: 0.5px;
margin-bottom: 12px; padding-bottom: 6px; border-bottom: 1px solid #E0E8EE;
}
/* ═══ AB CARDS ═══ */
.ab-list { display: flex; flex-direction: column; gap: 12px; }
.ab-card {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
padding: var(--sp-2xl) var(--sp-lg) var(--sp-lg); display: flex; align-items: center; gap: var(--sp-lg);
box-shadow: var(--shadow-sm);
transition: border-color var(--dur) ease, box-shadow var(--dur) ease; position: relative;
}
.ab-card:hover { border-color: var(--cyan); box-shadow: var(--shadow-md); }
.ab-card.heute { border-color: #66BB6A; background: #F9FFF9; }
.ab-card.heute::before {
content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%;
background: #4CAF50; border-radius: 10px 0 0 10px;
}
.ab-card.versteckt-card { opacity: 0.58; border-style: dashed; }
.ab-icon {
width: 48px; height: 48px; background: var(--cyan-light);
border-radius: 8px; display: flex; align-items: center; justify-content: center;
font-size: 22px; flex-shrink: 0;
}
.ab-content { flex: 1; min-width: 0; }
.ab-title { color: var(--dark); font-weight: bold; font-size: 16px; margin-bottom: 4px; }
.ab-desc { color: #666; font-size: 14px; line-height: 1.4; margin-bottom: 6px; }
.ab-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.tag { background: var(--cyan-light); color: var(--cyan-dark); padding: 2px 8px; border-radius: 8px; font-weight: bold; }
.tag.date { background: #F0F0F0; color: #666; }
.tag.today { background: #E8F5E9; color: #1B5E20; font-weight: bold; }
.tag.hidden-tag { background: #FFF3CD; color: #856404; }
/* Sichtbarkeit-Badge oben links */
.btn-vis-corner {
position: absolute; top: 8px; left: 12px;
font-size: 11px; padding: 2px 9px; border-radius: 20px; cursor: pointer;
font-family: Arial, sans-serif; font-weight: 700; white-space: nowrap;
border: 1.5px solid #66BB6A; background: #E8F5E9; color: #2E7D32;
transition: all 0.15s;
}
.btn-vis-corner.is-hidden { border-color: #FFA000; background: #FFF8E1; color: #E65100; }
.btn-vis-corner:hover { filter: brightness(0.94); }
/* Bearbeiten + Löschen unten links im Content */
.ab-card-bottom { display: flex; gap: 6px; margin-top: 8px; }
/* Rechte Aktionsspalte: PDF + Lehrplan */
.ab-card-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.card-btn {
background: var(--surface); border: 1px solid var(--border-strong); color: var(--ink-2);
padding: var(--sp-sm) var(--sp-md); border-radius: var(--radius-sm); cursor: pointer;
min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center;
font-size: var(--text-sm); font-weight: var(--fw-med); font-family: var(--font); white-space: nowrap;
transition: border-color var(--dur), color var(--dur), background var(--dur);
}
.card-btn:hover { border-color: var(--cyan); color: var(--cyan-dark); background: var(--cyan-light); }
.card-btn:focus-visible { box-shadow: var(--focus-ring); }
.card-btn.btn-edit-ab { border-color: var(--cyan-dark); color: var(--cyan-dark); font-weight: bold; }
.card-btn.btn-del-ab { border-color: #FFCDD2; color: #C62828; }
.card-btn.btn-del-ab:hover { background: #FEE2E2; border-color: #C62828; color: #B71C1C; }
.card-btn.btn-pdf-ab { border-color: #B0BEC5; color: #455A64; }
.card-btn.btn-pdf-ab:hover { background: #ECEFF1; border-color: #607D8B; color: #263238; }
.card-btn.btn-pdf-loesung { border-color: #C8E6C9; color: #2E7D32; }
.card-btn.btn-pdf-loesung:hover { background: #E8F5E9; border-color: #388E3C; color: #1B5E20; }
.card-btn.btn-pdf-ab.loading, .card-btn.btn-pdf-loesung.loading { opacity: 0.6; cursor: wait; }
/* ═══ ÜBUNGEN CARDS ═══ */
.ueb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.ueb-card {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
padding: var(--sp-xl); color: inherit; box-shadow: var(--shadow-sm);
transition: border-color var(--dur) ease, box-shadow var(--dur) ease, transform var(--dur) ease;
display: flex; flex-direction: column; gap: var(--sp-md); position: relative; overflow: hidden;
}
.ueb-card::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--cyan);
}
.ueb-card:hover { border-color: var(--cyan); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.ueb-card.versteckt-card { opacity: 0.55; border-style: dashed; }
.ueb-icon {
width: 52px; height: 52px; background: var(--cyan-light); border-radius: 10px;
display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.ueb-title { color: var(--dark); font-weight: bold; font-size: 17px; }
.ueb-desc { color: #555; font-size: 14px; line-height: 1.5; flex: 1; }
.ueb-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; margin-top: 4px; }
.tag.level { background: #FFF4D6; color: #8B6F00; }
.ueb-actions { display: flex; gap: 8px; margin-top: 4px; }
/* ═══ NEW-AB MODAL ═══ */
.modal-overlay {
position: fixed; inset: 0; background: rgba(15,23,42,0.45);
z-index: 2000; display: flex; align-items: center; justify-content: center; padding: var(--sp-xl);
}
.modal-overlay[hidden] { display: none !important; }
.modal-box {
background: var(--surface); border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
max-width: 560px; width: 100%; padding: var(--sp-2xl);
max-height: 90vh; overflow-y: auto;
}
.modal-box.wide { max-width: 680px; }
.modal-title { font-size: 20px; font-weight: bold; color: var(--dark); margin: 0 0 24px; }
.modal-field { margin-bottom: 16px; }
.modal-field > label { display: block; font-size: 13px; font-weight: bold; color: #555; margin-bottom: 6px; }
.modal-field input[type="text"], .modal-field input[type="password"], .modal-field input[type="number"],
.modal-field textarea {
width: 100%; padding: 10px 12px; border: 1.5px solid #D0D8E0; border-radius: 8px;
font-size: 15px; font-family: Arial, sans-serif; color: var(--dark); box-sizing: border-box;
}
.modal-field input:focus, .modal-field textarea:focus { outline: none; border-color: var(--cyan); }
.modal-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal-choice-btn {
border: 2px solid #E0E8EE; border-radius: 12px; padding: 20px 16px;
background: white; cursor: pointer; text-align: center; transition: all 0.15s; font-family: Arial, sans-serif;
}
.modal-choice-btn:hover { border-color: var(--cyan); background: var(--cyan-light); }
.modal-choice-btn .mc-icon { font-size: 32px; margin-bottom: 8px; }
.modal-choice-btn .mc-label { font-weight: bold; font-size: 14px; color: var(--dark); }
.modal-choice-btn .mc-desc { font-size: 12px; color: #888; margin-top: 4px; }
.modal-choice-btn.ki-btn .mc-label { color: #5B21B6; }
.modal-choice-btn.ki-btn:hover { border-color: #7C3AED; background: #F5F3FF; }
.modal-choice-btn.selected { border-color: var(--cyan); background: var(--cyan-light); box-shadow: 0 0 0 3px rgba(0,176,240,0.15); }
.modal-choice-btn.ki-btn.selected { border-color: #5B21B6; background: #EDE9FE; box-shadow: 0 0 0 3px rgba(91,33,182,0.15); }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; }
.modal-btn { padding: var(--sp-sm) var(--sp-lg); border-radius: var(--radius-sm); border: none; cursor: pointer; min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-base); font-family: var(--font); font-weight: var(--fw-bold); transition: background var(--dur); }
.modal-btn:focus-visible { box-shadow: var(--focus-ring); }
.modal-btn-cancel { background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--ink-2); }
.modal-btn-cancel:hover { background: var(--bg); }
.modal-btn-ki { background: var(--ki); color: white; }
.modal-btn-ki:hover { background: #5B21B6; }
.modal-btn-ki:focus-visible { box-shadow: var(--focus-ki); }
.modal-btn-ki:disabled { opacity: 0.45; cursor: not-allowed; }
.sb-section { margin-bottom: 20px; }
.sb-section-title {
font-size: 11px; font-weight: bold; color: #888; text-transform: uppercase;
letter-spacing: 0.6px; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid #E0E8EE;
}
.cb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 8px; }
.cb-item {
display: flex; align-items: center; gap: 8px; padding: 8px 10px;
border: 1.5px solid #E0E8EE; border-radius: 8px; cursor: pointer; transition: all 0.15s;
}
.cb-item:hover { border-color: var(--cyan); background: var(--cyan-light); }
.cb-item input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--cyan); cursor: pointer; flex-shrink:0; }
.cb-item span { font-size: 13px; color: #333; cursor: pointer; line-height: 1.2; }
.ki-hint { font-size: 12px; color: #888; margin-top: 4px; }
.ki-loading-wrap { text-align: center; padding: 40px 20px; }
.ki-spinner { font-size: 36px; animation: ki-spin 1.2s linear infinite; display: inline-block; margin-bottom: 12px; }
@keyframes ki-spin { to { transform: rotate(360deg); } }
/* ═══ HAUSAUFGABEN ═══ */
.ha-abgabe-bar {
background: #F0F9FF; border: 1.5px solid #BAE6FD; border-radius: 12px;
padding: 12px 14px; margin-bottom: 16px;
}
.ha-abgabe-label { font-size: 13px; font-weight: 700; color: #075985; margin-bottom: 8px; }
.ha-abgabe-label span { font-weight: 400; color: #0C7BA1; }
.ha-abgabe-fields { display: flex; gap: 10px; flex-wrap: wrap; }
.ha-abgabe-fields input {
flex: 1 1 240px; min-width: 0; padding: 8px 11px; font-size: 14px;
border: 1.5px solid #BAE6FD; border-radius: 8px; background: #fff;
}
.ha-abgabe-fields input:focus { outline: none; border-color: #0EA5E9; }
.ha-card {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
padding: var(--sp-2xl) var(--sp-lg) var(--sp-lg); display: flex; align-items: center; gap: var(--sp-md);
box-shadow: var(--shadow-sm);
transition: border-color var(--dur), box-shadow var(--dur); margin-bottom: var(--sp-md); position: relative;
}
.ha-card:hover { border-color: #F59E0B; box-shadow: var(--shadow-md); }
.ha-card.versteckt-card { opacity: 0.58; border-style: dashed; }
.ha-card.haaw-pick { padding: 16px 20px; }
.ha-card .ha-title { font-weight: bold; font-size: 15px; color: var(--dark); flex: 1; }
.ha-card .ha-faellig {
font-size: 12px; padding: 3px 10px; border-radius: 10px;
font-weight: bold; white-space: nowrap;
}
.ha-card .ha-faellig.aktiv { background: #FEF3C7; color: #92400E; }
.ha-card .ha-faellig.abgelaufen { background: #F5F5F5; color: #9E9E9E; }
.ha-card .ha-faellig.bald { background: #FEE2E2; color: #B91C1C; }
.ha-card-actions { display: flex; gap: 8px; }
.ha-card-actions .card-btn { font-size: 12px; padding: 5px 12px; }
.ha-afb-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.ha-afb-badge {
font-size: 11px; padding: 2px 8px; border-radius: 8px; font-weight: bold;
}
.ha-afb-badge.i { background: #E0F2FE; color: #075985; }
.ha-afb-badge.ii { background: #FEF3C7; color: #92400E; }
.ha-afb-badge.iii { background: #F3E8FF; color: #6B21A8; }
/* HA modal: AFB selector */
.afb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.afb-btn {
border: 2px solid #E0E8EE; border-radius: 10px; padding: 14px 10px;
background: white; cursor: pointer; text-align: center; transition: all 0.15s; font-family: Arial, sans-serif;
}
.afb-btn .afb-level { font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.afb-btn .afb-name { font-size: 13px; font-weight: bold; color: var(--dark); }
.afb-btn .afb-desc { font-size: 11px; color: #888; margin-top: 3px; }
.afb-btn.selected { border-color: #F59E0B; background: #FEF3C7; box-shadow: 0 0 0 3px rgba(245,158,11,0.15); }
.afb-btn.i.selected { border-color: #0EA5E9; background: #E0F2FE; box-shadow: 0 0 0 3px rgba(14,165,233,0.15); }
.afb-btn.ii.selected { border-color: #F59E0B; background: #FEF3C7; box-shadow: 0 0 0 3px rgba(245,158,11,0.15); }
.afb-btn.iii.selected { border-color: #A855F7; background: #F3E8FF; box-shadow: 0 0 0 3px rgba(168,85,247,0.15); }
.ha-ab-source-select {
width: 100%; padding: 10px 12px; border: 1.5px solid #D0D8E0; border-radius: 8px;
font-size: 14px; font-family: Arial, sans-serif; color: var(--dark);
}
/* ═══ Empty / loading ═══ */
.empty { text-align: center; padding: 60px 20px; color: #999; }
.empty-icon { font-size: 48px; margin-bottom: 16px; }
.loading-hint { text-align: center; padding: 40px; color: #999; }
/* ═══ AB EDITOR v2 ═══ */
#editor-overlay {
position: fixed; inset: 0; background: #EEF2F7;
z-index: 1001; display: flex; flex-direction: column; overflow: hidden;
}
#editor-overlay[hidden] { display: none !important; }
/* Topbar */
.editor-topbar {
height: 52px; background: var(--dark); color: white;
display: flex; align-items: center; padding: 0 16px; gap: 12px; flex-shrink: 0;
}
.editor-back-btn {
background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25);
color: white; padding: 6px 14px; border-radius: 8px; cursor: pointer;
font-size: 13px; font-family: Arial, sans-serif; font-weight: bold;
}
.editor-back-btn:hover { background: rgba(255,255,255,0.22); }
.editor-ab-meta { flex: 1; display: flex; align-items: center; gap: 10px; }
/* Desktop: Meta-Felder komplett aus der Topbar raus — Nummer/Titel/Datum/Klasse
werden im AB-Kopf (apc-header) bearbeitet. Der Container bleibt im DOM
(Mobile verschiebt ihn in den Einstellungen-Tab, s. placeAbMetaForViewport). */
.editor-topbar .editor-ab-meta { display: none; }
.editor-title-input {
flex: 1; padding: 6px 12px; border: 1.5px solid rgba(255,255,255,0.25);
border-radius: 7px; font-size: 15px; font-family: Arial, sans-serif;
font-weight: bold; color: white; background: rgba(255,255,255,0.1);
}
.editor-title-input::placeholder { color: rgba(255,255,255,0.45); }
/* Dezenter Auto-Save-Status rechts neben der Vorschau. */
.editor-autosave {
margin-left: auto; font-size: 12px; color: rgba(255,255,255,0.55);
font-family: var(--font); white-space: nowrap;
}
.editor-autosave.saving { color: rgba(255,255,255,0.8); }
.editor-autosave.err { color: #FCA5A5; }
.editor-date-input {
width: 130px; padding: 6px 12px; border: 1.5px solid rgba(255,255,255,0.25);
border-radius: 7px; font-size: 14px; font-family: Arial, sans-serif;
color: white; background: rgba(255,255,255,0.1);
}
.editor-date-input::placeholder { color: rgba(255,255,255,0.45); }
.editor-title-input:focus, .editor-date-input:focus {
outline: none; border-color: var(--cyan); background: rgba(255,255,255,0.15);
}
.editor-topbar-actions { display: flex; gap: 8px; }
.editor-btn {
padding: var(--sp-sm) var(--sp-md); border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,0.25);
background: rgba(255,255,255,0.1); color: white; cursor: pointer;
min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center;
font-size: var(--text-sm); font-weight: var(--fw-med); font-family: var(--font);
transition: background var(--dur);
}
.editor-btn:hover { background: rgba(255,255,255,0.2); }
.editor-btn:focus-visible { box-shadow: var(--focus-ring); }.editor-btn-save {
background: var(--cyan); border-color: var(--cyan-dark); font-weight: var(--fw-bold);
}
.editor-btn-save:hover { background: var(--cyan-dark); }
.editor-save-hint { font-size: 10px; opacity: 0.7; font-weight: normal; margin-left: 4px; }
/* Body: 3-column layout */
.editor-body { flex: 1; display: flex; overflow: hidden; }
/* ── LEFT: Palette ── */
.editor-palette {
width: 260px; background: white; border-right: 1px solid #DDE4ED;
display: flex; flex-direction: column; overflow: hidden; flex-shrink: 0;
}
.pal-search-bar {
padding: 8px 10px; border-bottom: 1px solid #EEF2F7; flex-shrink: 0;
display: flex; flex-direction: column; gap: 6px;
}.pal-search-bar input {
width: 100%; padding: 7px 12px; border: 1.5px solid #D0DAE3;
border-radius: 20px; font-size: 13px; font-family: Arial, sans-serif;
background: #F8FAFC; box-sizing: border-box;
}
.pal-search-bar input:focus { outline: none; border-color: var(--cyan); background: white; }
.pal-scroll { flex: 1; overflow-y: auto; }
/* ── Palette: immer ausgeklappt, flache Section-Header ── */
.pal-acc { display: flex; flex-direction: column; }
.pal-acc + .pal-acc { border-top: 1px solid #EEF2F7; }
/* Flacher Section-Header (kein Button mehr) */
.pal-cat-tile {
display: flex; align-items: center; gap: 9px;
padding: 13px 12px 5px;
user-select: none;
}
.pct-icon { font-size: 16px; flex-shrink: 0; line-height: 1; }
.pct-body { flex: 1; min-width: 0; }
.pct-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: #A0B3C6; }
/* Kompakte Liste: einzeilige Einträge (Icon + Name), jeder Block leicht
abgegrenzt durch dezente Umrandung + hellen Grund. */
.pal-acc-items {
display: flex; flex-direction: column; gap: 4px;
padding: 2px 8px 8px;
}
.pal-acc-items[hidden] { display: none; }
.pal-sim-items.pal-acc-items {
display: flex; flex-direction: column; gap: 0;
}
/* ── Suchergebnis-Ansicht: gleiche kompakte Liste ── */
.pal-items-view {
display: flex; flex-direction: column; gap: 4px; padding: 6px 8px;
}
.pal-item-tile {
display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
gap: 10px; padding: 8px 10px;
border-radius: 8px; background: #FBFCFE; border: 1px solid #EAEFF5;
cursor: grab; user-select: none; text-align: left;
transition: background 0.12s, border-color 0.12s;
}
.pal-item-tile:hover { background: #EEF4FF; border-color: #BFD9F5; }
.pal-item-tile:active { cursor: grabbing; }
.pal-item-tile.pal-item-dragging { opacity: 0.35; }
.pit-icon { font-size: 18px; line-height: 1; width: 22px; text-align: center; flex: none; }
.pit-label { font-size: 12.5px; font-weight: 600; color: var(--dark); line-height: 1.25; text-align: left; }
/* Simulations-Kacheln behalten ihr Thumbnail-Layout (Spalte, Bild oben) */
.pal-sim-tile { flex-direction: column; align-items: flex-start; padding: 8px 10px; }
.pst-thumb { width: 100%; height: auto; border-radius: 5px; display: block; margin-bottom: 4px; }
.pal-sim-tile .pit-label { font-size: 12px; text-align: left; }
.pal-empty { padding: 12px 14px; font-size: 12px; color: #bbb; }
/* ── Sim-Palette nested accordions ── */
.pal-sim-items { display: flex; flex-direction: column; gap: 0; padding: 8px 8px 10px; }
.sim-pal-search {
width: 100%; box-sizing: border-box;
padding: 7px 10px; margin-bottom: 8px;
border: 1.5px solid #DDE9F8; border-radius: 7px;
font-size: 12px; background: #F8FAFC;
}
.sim-pal-search:focus { outline: none; border-color: var(--cyan); background: white; }
.pal-sim-items > .pal-item-tile { margin-bottom: 6px; }
.sim-grade-wrap { margin-bottom: 4px; }
.sim-grade-hdr {
display: flex; align-items: center; justify-content: space-between;
padding: 8px 10px; border-radius: 7px;
background: #D4E4F7; border: 1.5px solid #B8D0EE;
cursor: pointer; font-size: 12px; font-weight: 700; color: var(--dark);
user-select: none;
}
.sim-grade-hdr:hover { background: #C0D5EF; }
.sim-grade-hdr.open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.sim-grade-body {
padding: 5px 4px; background: #EEF4FF;
border: 1.5px solid #B8D0EE; border-top: none;
border-bottom-left-radius: 7px; border-bottom-right-radius: 7px;
}
.sim-grade-body[hidden] { display: none; }
.sim-cat-wrap { margin-bottom: 3px; }
.sim-cat-hdr {
display: flex; align-items: center; justify-content: space-between;
padding: 6px 8px; border-radius: 5px;
background: #F4F8FF; border: 1px solid #DDE9F8;
cursor: pointer; font-size: 11px; font-weight: 600; color: #444;
user-select: none;
}
.sim-cat-hdr:hover { background: #E3EEFF; border-color: var(--cyan); }
.sim-cat-hdr.open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.sim-cat-body {
padding: 4px 4px; background: white;
border: 1px solid #DDE9F8; border-top: none;
border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;
}
.sim-cat-body[hidden] { display: none; }
.sim-hdr-arrow { font-size: 14px; color: #888; transition: transform 0.15s; }
.sim-grade-hdr.open .sim-hdr-arrow,
.sim-cat-hdr.open .sim-hdr-arrow { transform: rotate(180deg); color: var(--cyan-dark); }
/* ── CENTER: WYSIWYG Canvas Area ── */
.editor-canvas-area {
flex: 1; overflow-y: auto; padding: 28px 20px;
display: flex; flex-direction: column; align-items: center; gap: 0;
}
/* Aufbau-Tab: rechts Platz für die Phasen-Klammer reservieren, damit das
zentrierte AB nach links rückt und die Klammer sauber im Gutter sitzt
(kein Overlap, kein horizontaler Scroll). */
@media (min-width: 1180px) {
.editor-canvas-area { padding-right: 200px; }
}
/* Canvas tabs */
.editor-canvas-tabs {
width: 100%; max-width: 760px; display: flex; gap: 0;
background: white; border: 1px solid #DDE4ED; border-bottom: none;
border-radius: 8px 8px 0 0; overflow: hidden; flex-shrink: 0;
}
.ect-tab {
padding: 10px 20px; border: none; background: none; cursor: pointer;
font-size: 13px; font-family: Arial, sans-serif; color: #888; font-weight: 600;
border-bottom: 3px solid transparent; transition: color 0.15s;
}
.ect-tab.active { color: var(--dark); border-bottom-color: var(--cyan); background: white; }
.ect-tab:hover:not(.active) { background: #F8FAFC; }
.editor-canvas-tab-panel { display: none; width: 100%; max-width: 760px; }
.editor-canvas-tab-panel.active { display: block; }
/* The page itself */
.ab-page-canvas {
background: white; border: 1px solid #DDE4ED;
border-top: none; border-radius: 0 0 8px 8px;
padding: 36px 44px 48px; min-height: 480px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.apc-header {
border-bottom: 2.5px solid var(--cyan); padding-bottom: 10px; margin-bottom: 0;
position: relative;
}
/* „✨ Von KI vervollständigen" — oben rechts im AB-Kopf, ohne den Titel zu verschieben */
.apc-ki-btn {
position: absolute; top: 0; right: 0; z-index: 3;
display: inline-flex; align-items: center; gap: 6px;
background: linear-gradient(180deg, #F0F7FF, #E1EFFC); color: var(--cyan-dark);
border: 1.5px solid #BFDBFE; border-radius: 9px; padding: 7px 13px;
font: 700 12.5px 'Segoe UI', system-ui, sans-serif; cursor: pointer;
box-shadow: 0 1px 3px rgba(31,78,121,0.08); transition: background .12s, border-color .12s, transform .1s;
}
.apc-ki-btn:hover { background: linear-gradient(180deg, #E4F1FE, #CFE6FB); border-color: var(--cyan); transform: translateY(-1px); }
.apc-ki-btn:active { transform: none; }
.ki-vp-bl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ki-vp-bl-list li { font-size: 13px; color: var(--ink, #2D2A26); line-height: 1.35;
background: #F6FAFF; border: 1px solid #E3EAF2; border-radius: 8px; padding: 7px 10px; }
.ki-vp-bl-lbl { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; }
.ki-vp-bl-cb { flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--cyan); cursor: pointer; }
.ki-vp-bl-lbl:has(.ki-vp-bl-cb:not(:checked)) { opacity: .5; }
/* Per-Feld-Auswahl in der Einzelblock-KI-Vorschau (an-/abwählbar) */
.ki-vp-data { display: flex; flex-direction: column; gap: 6px; }
.ki-vp-fld { display: flex; align-items: flex-start; gap: 9px; cursor: pointer;
background: #F6FAFF; border: 1px solid #E3EAF2; border-radius: 8px; padding: 7px 10px; }
.ki-vp-fld-cb { flex: none; width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--cyan); cursor: pointer; }
.ki-vp-fld:has(.ki-vp-fld-cb:not(:checked)) { opacity: .5; }
@media (max-width: 560px) {
.apc-ki-btn { position: static; margin-bottom: 8px; width: 100%; justify-content: center; }
}
.apc-header h1 {
font-size: 22px; font-family: 'Helvetica Neue', Arial, sans-serif;
color: #1A3A5C; margin: 0 0 4px;
}
/* Nummer-Badge vor dem Titel — spiegelt .ab-nummer-badge des Schüler-ABs,
ist hier aber direkt editierbar. */
#apc-nummer {
display: inline-block; background: var(--info-bg); color: var(--info);
font-weight: bold; font-size: 0.7em; padding: 2px 10px;
border-radius: 999px; vertical-align: middle; margin-right: 10px;
cursor: text; outline: none; min-width: 20px;
border: 1.5px dashed transparent; transition: border-color 0.15s;
}
#apc-nummer:hover { border-color: var(--cyan); }
#apc-nummer:focus { border-color: var(--cyan); background: #fff; }
#apc-nummer:empty::before { content: 'Nr.'; opacity: 0.45; font-weight: normal; }
.apc-meta { font-size: 13px; color: #666; font-family: Arial, sans-serif; }
/* Inline-editable title, datum & klasse in the canvas preview header */
#apc-title[contenteditable], #apc-datum[contenteditable], #apc-klasse[contenteditable] {
cursor: text;
border-bottom: 2px dashed transparent;
border-radius: 2px;
transition: border-color 0.15s, background 0.1s;
outline: none;
min-width: 20px;
display: inline-block;
}
#apc-title[contenteditable]:hover { border-bottom-color: var(--cyan); }
#apc-title[contenteditable]:focus { border-bottom-color: var(--cyan); background: rgba(0,176,240,0.05); }
#apc-datum[contenteditable]:hover, #apc-klasse[contenteditable]:hover { border-bottom-color: #aaa; }
#apc-datum[contenteditable]:focus, #apc-klasse[contenteditable]:focus { border-bottom-color: var(--cyan); background: rgba(0,176,240,0.05); }
.canvas-empty-hint {
text-align: center; color: #ccc; padding: 60px 20px; font-size: 15px;
border: 2px dashed #E8EEF5; border-radius: 8px; margin-top: 8px;
}
/* Canvas block wrappers */
#blocks-container { padding-top: 0; }
/* Block-Karte: IMMER umrandet; beim Hovern wird der Rahmen hervorgehoben
(User-Wunsch: ästhetischer, kein Hover-Overlay mehr). Werkzeugleiste ist fest
oben in die Karte eingebettet — „✏️ Bearbeiten" links, ▲ ▼ ✕ rechts. */
.canvas-block {
position: relative; margin-bottom: 8px;
background: #fff; border: 1.5px solid #E3EAF2; border-radius: 10px;
box-shadow: 0 1px 3px rgba(15,23,42,0.05);
transition: border-color 0.12s, box-shadow 0.12s;
}
.canvas-block:hover { border-color: #9FC4EC; box-shadow: 0 2px 12px rgba(31,78,121,0.11); z-index: 2; }
.canvas-block.selected { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,176,240,0.16); z-index: 2; }
.canvas-block.cbt-dragging { opacity: 0.25; }
.canvas-block.drop-before { box-shadow: 0 -3px 0 var(--cyan); }
.canvas-block.drop-after { box-shadow: 0 3px 0 var(--cyan); }
/* Eingebettete Werkzeugleiste (Desktop) */
.cb-tools {
display: flex; align-items: center; gap: 6px;
padding: 5px 7px; margin: 0; border-bottom: 1px solid #EEF2F7;
background: #FBFCFE; border-radius: 9px 9px 0 0;
}
.cb-tools > button {
position: static; transform: none; display: inline-flex; opacity: 1;
align-items: center; justify-content: center; height: 28px; cursor: pointer;
border-radius: 7px; box-shadow: none; font-family: inherit;
transition: background 0.1s, border-color 0.1s;
}
.cb-edit {
margin-right: auto; gap: 6px; padding: 0 12px;
background: var(--cyan-light); color: var(--cyan-dark); border: 1px solid #BFDBFE;
font-size: 12.5px; font-weight: 700;
}
.cb-edit:hover { background: #D6ECFF; border-color: var(--cyan); }
.cb-edit .cb-ic { font-size: 13px; }
.cb-edit .cb-edit-label { display: inline; }
.cb-up, .cb-down, .cb-del {
width: 30px; background: #fff; border: 1px solid #E3EAF2; color: #5B7186; font-size: 13px;
}
.cb-up:hover, .cb-down:hover { background: #EEF4FA; border-color: #B9C9DC; }
.cb-up:disabled, .cb-down:disabled { opacity: 0.35; cursor: default; }
.cb-del { color: #DC2626; border-color: #FECACA; }
.cb-del:hover { background: #FEE2E2; }
/* Vorschau-Innenabstand, damit der Inhalt nicht an der Umrandung klebt */
.cbt-preview { padding: 6px 12px 10px; }
/* ── Undo-Toast (Block-Löschen rückgängig, 5s) ─────────────────────────────── */
.ab-undo-toast {
position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
z-index: 10050; display: flex; align-items: center; gap: 14px;
background: #1E293B; color: #fff; padding: 12px 14px 14px 18px;
border-radius: 12px; box-shadow: 0 10px 30px rgba(15,23,42,.35);
font-size: 14px; max-width: calc(100vw - 32px); overflow: hidden;
}
.ab-undo-toast .aut-msg { font-weight: 600; }
.ab-undo-toast .aut-btn {
background: transparent; border: 1.5px solid rgba(255,255,255,.35); color: #fff;
border-radius: 8px; padding: 7px 14px; font-size: 13.5px; font-weight: 700;
cursor: pointer; white-space: nowrap;
}
.ab-undo-toast .aut-btn:hover { background: rgba(255,255,255,.12); }
.ab-undo-toast .aut-bar {
position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
background: var(--cyan); transform-origin: left; animation: aut-countdown 5s linear forwards;
}
@keyframes aut-countdown { from { transform: scaleX(1); } to { transform: scaleX(0); } }
/* ── Phasen-Übersicht (Popup: Block-Miniliste + verschiebbare Klammern) ─────── */
.phu-overlay {
position: fixed; inset: 0; z-index: 10060; background: rgba(15,23,42,.55);
display: flex; align-items: center; justify-content: center; padding: 20px;
}
.phu-box {
background: #fff; width: min(560px, 100%); max-height: 86vh; border-radius: 16px;
display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 70px rgba(0,0,0,.32);
}
.phu-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.phu-head h3 { margin: 0; font-size: 15px; color: var(--navy); flex: 1; }
.phu-x { border: none; background: none; font-size: 17px; cursor: pointer; color: #64748B; padding: 4px 8px; }
.phu-hint { padding: 10px 16px; font-size: 12.5px; color: #64748B; background: #F8FAFC; border-bottom: 1px solid var(--border); }
/* Gemeinsamer Scroll-Container: Blöcke links, Klammer-Rail rechts — die Rail-
Kinder sind absolut auf Zeilen-Offsets positioniert und scrollen so mit. */
.phu-body { position: relative; display: flex; overflow-y: auto; padding: 10px 12px; gap: 6px; }
.phu-blocks { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.phu-row {
display: flex; align-items: center; gap: 8px; padding: 9px 10px;
border: 1.5px solid var(--border); border-radius: 10px; background: #fff;
font-size: 12.5px; min-height: 38px;
}
.phu-ic { flex-shrink: 0; }
.phu-lbl { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; overflow: hidden; }
.phu-typ { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #94A3B8; }
.phu-txt {
font-size: 12.5px; color: var(--dark); line-height: 1.35;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.phu-txt i { color: #B6C2CF; }
.phu-rail { position: relative; width: 64px; flex-shrink: 0; }
.phu-brace {
position: absolute; left: 6px; right: 4px;
border: 2px solid #9DB4CC; border-left: none; border-radius: 0 10px 10px 0;
display: flex; align-items: center; justify-content: flex-end; padding-right: 3px;
}
.phu-gear {
border: 1px solid var(--border); background: #fff; border-radius: 8px;
padding: 3px 6px; font-size: 12px; cursor: pointer; display: inline-flex;
align-items: center; gap: 3px; box-shadow: 0 1px 4px rgba(0,0,0,.10);
}
.phu-pnr { font-size: 10.5px; font-weight: 800; color: var(--cyan-dark); }
.phu-grip {
position: absolute; left: 0; right: 0; height: 30px; z-index: 2;
display: flex; align-items: center; justify-content: center;
font-size: 15px; color: var(--cyan-dark); cursor: grab;
touch-action: none; user-select: none;
}
.phu-grip:active { cursor: grabbing; }
.phu-foot { display: flex; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--border); }
.phu-add { flex: 1; padding: 11px; border: 1.5px solid var(--cyan); background: #F0F7FF; color: var(--cyan-dark); border-radius: 10px; font-weight: 700; cursor: pointer; }
.phu-done { flex: 1; padding: 11px; border: none; background: var(--cyan); color: #fff; border-radius: 10px; font-weight: 700; cursor: pointer; }
/* „Blöcke wählen"-Button im Phasen-Editor */
.abph-m-bloecke {
width: 100%; padding: 10px 12px; border: 1.5px solid var(--cyan); background: #F0F7FF;
color: var(--cyan-dark); border-radius: 9px; font-size: 14px; font-weight: 700; cursor: pointer; text-align: left;
}
@media (max-width: 560px) {
.phu-overlay { align-items: flex-end; padding: 0 8px 8px; }
.phu-box { width: 100%; max-width: 560px; border-radius: 18px; max-height: 88vh; }
}
/* ── KI-Vorschlag schwebendes Panel ── */
#ki-vp {
position: fixed;
/* ÜBER dem Block-Popup (10003), UNTER der Richtext-Toolbar (10050) —
der „Block vervollständigen"-Button sitzt jetzt im Popup. */
z-index: 10040;
width: 420px;
background: #fff;
border: 1.5px solid #7C3AED;
border-radius: 10px;
box-shadow: 0 8px 36px rgba(124,58,237,.22);
overflow: hidden;
display: flex;
flex-direction: column;
max-height: calc(100vh - 80px);
}
.ki-vp-hdr {
background: linear-gradient(135deg,#7C3AED,#9F67FA);
color: #fff;
padding: 10px 14px;
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 700;
font-size: 13px;
}
.ki-vp-close {
background: none;
border: none;
color: rgba(255,255,255,.75);
cursor: pointer;
font-size: 15px;
padding: 0 4px;
line-height: 1;
}
.ki-vp-close:hover { color: #fff; }
.ki-vp-body { padding: 14px; overflow-y: auto; flex: 1; }
.ki-vp-hint { font-size: 12px; color: #444; margin: 0 0 10px; line-height: 1.55; }
.ki-vp-hint em { color: #7C3AED; font-style: normal; font-weight: 600; }
.ki-vp-hint-sub { display: block; margin-top: 4px; color: #888; font-size: 11px; }
/* Skizze-KI-Vervollständigung: an-/abwählbare Vorschläge */
.ki-vp-sk-list { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; }
.ki-vp-sk-grp { display: flex; flex-direction: column; gap: 5px; }
.ki-vp-sk-grp-t { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: #94A3B8; }
.ki-vp-sk-item { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; font-size: 13px; color: #2D2A26;
line-height: 1.35; background: #F6FAFF; border: 1px solid #E3EAF2; border-radius: 8px; padding: 7px 10px; }
.ki-vp-sk-cb { flex: none; width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--cyan); cursor: pointer; }
.ki-vp-sk-item:has(.ki-vp-sk-cb:not(:checked)) { opacity: .5; }
.ki-vp-sk-sub { margin: 0 0 0 34px; padding: 0; list-style: disc; color: #5B7186; font-size: 12px; }
.ki-vp-close2 { border: 1.5px solid var(--border); background: #fff; color: var(--ink-2); border-radius: 9px; padding: 8px 16px; font-weight: 600; cursor: pointer; }
.ki-vp-close2:hover { background: var(--surface-2); }
.ki-vp-ta {
width: 100%;
box-sizing: border-box;
padding: 8px 10px;
border: 1.5px solid #DDD6FE;
border-radius: 7px;
font-family: inherit;
font-size: 13px;
resize: vertical;
color: #1A3A5C;
}
.ki-vp-ta:focus { outline: none; border-color: #7C3AED; background: #FAFAFF; }
.ki-vp-gen {
display: block;
width: 100%;
margin-top: 8px;
padding: 9px;
background: linear-gradient(135deg,#7C3AED,#9F67FA);
color: #fff;
border: none;
border-radius: 7px;
cursor: pointer;
font-family: inherit;
font-size: 13px;
font-weight: 700;
transition: opacity .15s;
}
.ki-vp-gen:hover { opacity: .88; }
.ki-vp-gen:disabled { opacity: .5; cursor: default; }
.ki-vp-result { margin-top: 12px; }
.ki-vp-result-lbl {
font-size: 11px;
font-weight: 700;
color: #7C3AED;
text-transform: uppercase;
letter-spacing: .04em;
margin-bottom: 6px;
}
.ki-vp-preview {
border: 1.5px solid #EDE9FE;
border-radius: 7px;
padding: 10px 12px;
max-height: 200px;
overflow-y: auto;
background: #FAFAFE;
font-size: 12.5px;
line-height: 1.6;
color: #1A3A5C;
}
.ki-vp-data strong { color: #7C3AED; }
.ki-vp-btns { display: flex; gap: 8px; margin-top: 10px; }
.ki-vp-accept {
flex: 1;
padding: 8px 12px;
background: #16A34A;
color: #fff;
border: none;
border-radius: 7px;
cursor: pointer;
font-family: inherit;
font-size: 13px;
font-weight: 700;
transition: background .15s;
}
.ki-vp-accept:hover { background: #15803D; }
.ki-vp-retry {
padding: 8px 12px;
background: #fff;
border: 1.5px solid #DDD6FE;
border-radius: 7px;
cursor: pointer;
font-family: inherit;
font-size: 13px;
color: #7C3AED;
font-weight: 600;
}
.ki-vp-retry:hover { background: #F5F0FF; }
.ki-vp-retry:disabled { opacity: .5; cursor: default; }
/* ── HA-Modus: keine Differenzierung / kein Workflow ── */
#editor-overlay.ha-mode .workflow-btn,
#editor-overlay.ha-mode .schnelle-overlay { display: none !important; }
/* ── Editor-Canvas: mehr Platz am Ende damit letzte Blöcke nicht abgeschnitten werden ── */
#editor-overlay .ab-page-canvas { padding-bottom: 140px; }
/* ── KI-Leiste „Block vervollständigen" im Block-Popup ── */
.bem-ki-bar { margin-top: 4px; padding-top: 12px; border-top: 1px solid #EEF2F7; }
.bem-ki-btn {
width: 100%; padding: 10px 12px;
background: linear-gradient(135deg, #7C3AED, #9F67FA);
color: #fff; border: none; border-radius: 8px;
font-size: 13px; font-weight: 700; cursor: pointer;
font-family: Arial, sans-serif;
box-shadow: 0 2px 8px rgba(124,58,237,0.25);
transition: opacity 0.15s;
}
.bem-ki-btn:hover { opacity: 0.88; }
.bem-ki-btn:disabled { opacity: 0.5; cursor: default; }
/* ── sim-custom Props-Panel ── */
.sim-ki-divider {
font-size: 11px;
font-weight: 700;
color: #7C3AED;
text-transform: uppercase;
letter-spacing: 0.05em;
border-top: 1.5px solid #DDD6FE;
padding-top: 10px;
margin: 12px 0 8px;
}
.btn-ki-gen, .btn-ki-refine {
display: block;
width: 100%;
margin-top: 8px;
padding: 9px 14px;
border-radius: 7px;
border: none;
cursor: pointer;
font-family: inherit;
font-size: 13px;
font-weight: 700;
transition: opacity 0.15s;
}
.btn-ki-gen { background: linear-gradient(135deg, #7C3AED, #9F67FA); color: #fff; }
.btn-ki-gen:hover { opacity: 0.88; }
.btn-ki-refine { background: linear-gradient(135deg, #0284C7, #38BDF8); color: #fff; }
.btn-ki-refine:hover { opacity: 0.88; }
.btn-ki-gen:disabled, .btn-ki-refine:disabled { opacity: 0.5; cursor: default; }
.cbt-preview { pointer-events: none; user-select: none; }
/* ═══════════════════════════════════════════
KI-WERKSTATT (Popup: erstellen · testen · verbessern)
═══════════════════════════════════════════ */
.btn-ki-werkstatt {
display: block;
width: 100%;
margin: 0 0 12px;
padding: 11px 14px;
border-radius: 8px;
border: none;
cursor: pointer;
font-family: inherit;
font-size: 13px;
font-weight: 700;
color: #fff;
background: linear-gradient(135deg, #5B21B6, #7C3AED);
box-shadow: 0 2px 8px rgba(124, 58, 237, 0.28);
transition: opacity 0.15s, transform 0.1s;
}
.btn-ki-werkstatt:hover { opacity: 0.92; }
.btn-ki-werkstatt:active { transform: translateY(1px); }
.kiw-overlay {
position: fixed; inset: 0; z-index: 10000;
background: rgba(15, 23, 42, 0.62);
display: flex; align-items: center; justify-content: center;
padding: 24px;
font-family: Arial, sans-serif;
}
.kiw-box {
background: #fff; border-radius: 14px;
width: min(960px, 96vw); height: min(900px, 94vh);
display: flex; flex-direction: column; overflow: hidden;
box-shadow: 0 20px 70px rgba(0, 0, 0, 0.4);
}
.kiw-hdr {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 18px; border-bottom: 1.5px solid #ECEFF3;
background: linear-gradient(135deg, #1F4E79, #2E6DA4);
}
.kiw-title { font-size: 16px; font-weight: 700; color: #fff; }
.kiw-x {
border: none; background: rgba(255, 255, 255, 0.18); color: #fff;
width: 30px; height: 30px; border-radius: 7px; cursor: pointer;
font-size: 15px; line-height: 1; transition: background 0.15s;
}
.kiw-x:hover { background: rgba(255, 255, 255, 0.34); }
.kiw-stage {
flex: 1; min-height: 0; position: relative;
background: #F4F6F9; display: flex; flex-direction: column;
}
.kiw-frame { flex: 1; width: 100%; border: none; background: #fff; }
/* Beschreiben */
.kiw-describe {
flex: 1; display: flex; flex-direction: column; align-items: center;
justify-content: center; gap: 14px; padding: 30px; text-align: center;
}
.kiw-describe-icon { font-size: 52px; }
.kiw-describe h3 { margin: 0; font-size: 18px; color: #1A3A5C; }
.kiw-describe textarea {
width: min(560px, 100%); box-sizing: border-box;
border: 1.5px solid #D0DAE3; border-radius: 9px; padding: 12px;
font-size: 14px; font-family: Arial, sans-serif; resize: vertical; outline: none;
}
.kiw-describe textarea:focus { border-color: #7C3AED; }
/* Arbeitet (Zahnrad) */
.kiw-busy {
flex: 1; display: flex; flex-direction: column; align-items: center;
justify-content: center; gap: 12px; padding: 30px; text-align: center;
}
.kiw-gear { font-size: 60px; line-height: 1; animation: kiw-spin 2.4s linear infinite; }
@keyframes kiw-spin { to { transform: rotate(360deg); } }
.kiw-busy-txt { font-size: 17px; font-weight: 700; color: #1A3A5C; }
.kiw-busy-sub { font-size: 13px; color: #8A98A8; }
/* Fußbereich: Verbessern + Aktionen */
.kiw-foot { border-top: 1.5px solid #ECEFF3; padding: 12px 16px; background: #fff; }
.kiw-refine { margin-bottom: 12px; }
.kiw-refine-lbl { display: block; font-size: 12px; font-weight: 700; color: #5B21B6; margin-bottom: 6px; }
.kiw-refine-row { display: flex; gap: 8px; align-items: stretch; }
.kiw-refine-row textarea {
flex: 1; box-sizing: border-box; border: 1.5px solid #D0DAE3; border-radius: 8px;
padding: 9px; font-size: 13px; font-family: Arial, sans-serif; resize: vertical; outline: none;
}
.kiw-refine-row textarea:focus { border-color: #7C3AED; }
.kiw-actions { display: flex; gap: 10px; justify-content: flex-end; }
.kiw-primary {
border: none; border-radius: 8px; cursor: pointer; font-family: inherit;
font-size: 13px; font-weight: 700; color: #fff; padding: 0 18px;
background: linear-gradient(135deg, #5B21B6, #7C3AED); white-space: nowrap;
transition: opacity 0.15s;
}
.kiw-describe .kiw-primary { padding: 11px 22px; }
.kiw-primary:hover { opacity: 0.9; }
.kiw-primary:disabled { opacity: 0.5; cursor: default; }
.kiw-cancel, .kiw-accept {
border-radius: 8px; cursor: pointer; font-family: inherit;
font-size: 13px; font-weight: 700; padding: 10px 20px; transition: opacity 0.15s;
}
.kiw-cancel { border: 1.5px solid #D0DAE3; background: #fff; color: #667; }
.kiw-cancel:hover { background: #F4F6F9; }
.kiw-accept { border: none; background: linear-gradient(135deg, #059669, #10B981); color: #fff; }
.kiw-accept:hover { opacity: 0.9; }
.kiw-accept:disabled, .kiw-cancel:disabled { opacity: 0.5; cursor: default; }
.cbt-preview .ie-field { pointer-events: auto; user-select: text; cursor: text; }
.cbt-preview .mc-add-antwort-btn { pointer-events: auto; }
.cbt-preview iframe { pointer-events: auto; }
.cbt-preview .sim-ansicht-row { pointer-events: auto; }
.cbt-preview [data-eg-ed-tab] { pointer-events: auto; }
.cbt-preview [data-eg-open-modal] { pointer-events: auto; }
.cbt-preview .lt-gap-btn { pointer-events: auto; }
.cbt-preview .quiz-antwort-edit { pointer-events: auto; cursor: pointer; }
.cbt-preview [data-ddx-edit] { pointer-events: auto; cursor: pointer; }
.cbt-preview .quiz-antwort-edit:hover { border-color: #4DB6FF; background: #F0F8FF; }
/* EG Edit Modal */
.eg-modal-overlay { position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:9999;display:flex;align-items:center;justify-content:center;padding:16px; }
.eg-modal { background:#fff;border-radius:14px;width:min(820px,100%);max-height:90vh;display:flex;flex-direction:column;box-shadow:0 16px 64px rgba(0,0,0,0.25);overflow:hidden; }
.eg-modal-hdr { padding:14px 18px;border-bottom:1.5px solid #E0E6ED;display:flex;align-items:center;gap:10px;flex-shrink:0; }
.eg-modal-close-btn { border:none;background:none;font-size:18px;cursor:pointer;color:#888;padding:4px 8px;border-radius:6px; }
.eg-modal-close-btn:hover { background:#f0f0f0; }
.eg-modal-settings { padding:10px 18px;border-bottom:1px solid #EEF2F7;flex-shrink:0;display:flex;align-items:center;gap:0; }
.eg-modal-label { font-size:11px;font-weight:700;text-transform:uppercase;color:#7A8FA6;letter-spacing:.4px;white-space:nowrap; }
.eg-modal-sel { border:1.5px solid #DDE9F8;border-radius:7px;padding:5px 8px;font-size:12px;font-family:inherit;color:#1A3A5C;background:#fff; }
.eg-modal-cnt-btn { padding:2px 10px;border:1.5px solid #DDE9F8;border-radius:6px;background:#F8FAFC;font-size:16px;cursor:pointer;color:#1A3A5C;line-height:1.4; }
.eg-modal-tab-row { padding:8px 18px 0;flex-shrink:0; }
.eg-modal-tabs { display:flex;gap:4px;overflow-x:auto; }
.eg-modal-tab { padding:5px 12px;border-radius:8px 8px 0 0;font-size:12px;font-weight:700;cursor:pointer;border:1.5px solid #DDE9F8;border-bottom:none;background:#F8FAFC;color:#7A8FA6;white-space:nowrap;flex-shrink:0; }
.eg-modal-tab.active { background:#EEF4FF;border-color:#4DB6FF;color:#1A3A5C; }
.eg-modal-name-inp { flex:1;border:1.5px solid #DDE9F8;border-radius:8px;padding:6px 10px;font-size:13px;font-family:inherit;color:#333; }
.eg-modal-body { display:flex;flex:1;overflow:hidden;min-height:0;border-top:2px solid #4DB6FF; }
.eg-modal-content { flex:1;overflow-y:auto;padding:10px 14px;display:flex;flex-direction:column;gap:6px; }
.eg-modal-empty { font-size:13px;color:#7A8FA6;text-align:center;padding:24px 16px;border:2px dashed #DDE9F8;border-radius:10px;margin:4px 0 6px; }
.eg-modal-card { border:1.5px solid #DDE9F8;border-radius:10px;background:#fff;overflow:hidden;flex-shrink:0; }
.eg-modal-card.drag-over { border-color:#4DB6FF;background:#EEF4FF; }
.eg-modal-card.dragging { opacity:0.4; }
.eg-modal-arr { padding:2px 7px;border:1.5px solid #DDE9F8;border-radius:5px;background:#fff;font-size:13px;cursor:pointer;color:#1A3A5C; }
.eg-modal-arr:disabled { opacity:0.3;cursor:default; }
.eg-modal-del { padding:2px 7px;border:1px solid #fcc;border-radius:5px;background:#fff0f0;color:#c00;font-size:12px;cursor:pointer; }
.eg-modal-add-btn { width:100%;padding:10px;border:2px dashed #C6DEFF;border-radius:9px;background:#FAFCFF;color:#4DB6FF;font-size:13px;font-weight:700;cursor:pointer;margin-top:2px; }
.eg-modal-add-btn:hover { background:#EEF4FF;border-color:#4DB6FF; }
.eg-modal-gml { padding:8px 18px;border-top:1px solid #EEF2F7;flex-shrink:0;display:flex;align-items:flex-start;gap:8px; }
.eg-modal-gml-inp { flex:1;border:1.5px solid #DDE9F8;border-radius:8px;padding:6px 10px;font-size:12px;font-family:inherit;resize:vertical; }
.eg-modal-ki-row { padding:8px 18px;border-top:1px solid #EEF2F7;flex-shrink:0;display:flex;align-items:center;justify-content:flex-end;gap:8px;background:#FAFCFF; }
.eg-modal-ki-btn { padding:8px 14px;border:none;border-radius:8px;background:#1A3A5C;color:#fff;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap; }
.eg-modal-ki-btn:disabled { opacity:0.6;cursor:not-allowed; }
.eg-modal-footer { padding:10px 18px;border-top:1.5px solid #E0E6ED;display:flex;justify-content:flex-end;flex-shrink:0; }
.eg-modal-done-btn { padding:10px 24px;border:none;border-radius:9px;background:#4DB6FF;color:#fff;font-size:14px;font-weight:700;cursor:pointer; }
.eg-modal-done-btn:hover { background:#00A0EE; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.cbt-preview .aufgabe-nr, .cbt-preview .aufgabe-op { font-weight: bold; }
/* Inline-Edit-Felder */
.ie-field {
display: inline;
border-radius: 3px;
outline: none;
min-width: 20px;
transition: background 0.12s, box-shadow 0.12s;
}
.ie-field:hover { background: rgba(0,120,200,0.07); box-shadow: 0 0 0 2px rgba(0,120,200,0.15); }
.ie-field:focus { background: #EEF6FF; box-shadow: 0 0 0 2px var(--cyan); }
div.ie-field { display: block; }
/* MC "Antwort hinzufügen" Button */
.mc-add-antwort-btn {
display: block; width: 100%; margin-top: 6px; padding: 6px 12px;
background: none; border: 1.5px dashed var(--cyan); border-radius: 6px;
color: var(--cyan-dark); font-size: 13px; font-weight: 600; cursor: pointer;
transition: background 0.12s;
}
.mc-add-antwort-btn:hover { background: var(--cyan-light); }
/* MC-Antworten im Editor */
.quiz-antwort-edit {
display: flex; align-items: center; gap: 8px;
padding: 8px 14px; border-radius: 6px; margin-bottom: 6px;
background: #F8FAFC; border: 1.5px solid #D0DAE3;
}
.quiz-antwort-edit.richtig-edit { background: #F0FFF4; border-color: #2E7D32; }
.qae-badge { font-size: 13px; font-weight: 700; flex-shrink: 0; color: #aaa; }
.quiz-antwort-edit.richtig-edit .qae-badge { color: #2E7D32; }
/* Lückentext Editor-UI (Lücken-Auswählen-Ansicht) */
.ab-page-canvas .lt-preview-wrap { font-size:15px;line-height:2.2;padding:8px 10px;background:#fff;border-radius:7px;border:1.5px solid #DDE9F8;min-height:34px;word-break:break-word;margin:6px 0; }
.ab-page-canvas .lt-gap-mark { background:#C6E3FF;border-radius:4px;padding:0 5px;font-weight:700;color:#1A3A5C; }
.ab-page-canvas .lt-placeholder { color:#B0BEC5;font-style:italic;font-size:13px; }
.ab-page-canvas .lt-gap-btn { display:block;width:100%;margin-top:8px;padding:8px 14px;border:2px solid #4DB6FF;border-radius:8px;background:#EEF4FF;color:#1A3A5C;font-size:12px;font-weight:700;cursor:pointer;text-align:center;font-family:inherit; }
.ab-page-canvas .lt-gap-btn:hover { background:#D6ECFF; }
/* Solutions + Meta tabs */
.solutions-panel { padding: 24px; background: white; border: 1px solid #DDE4ED; border-top: none; border-radius: 0 0 8px 8px; }
.solutions-intro { margin-bottom: 16px; }
.solutions-intro h3 { margin: 0 0 4px; color: var(--dark); }
.solutions-intro p { margin: 0; color: #666; font-size: 14px; }
.solution-field { background: #F8FAFC; border: 1.5px solid #E0E8EE; border-radius: 8px; padding: 12px; margin-bottom: 12px; }
.solution-field label { display: block; font-size: 13px; font-weight: bold; color: #555; margin-bottom: 8px; }
.solution-field textarea { width: 100%; border: 1.5px solid #D0D8E0; border-radius: 6px; padding: 8px; font-family: Arial, sans-serif; font-size: 13px; }
.solution-rich { width: 100%; box-sizing: border-box; min-height: 80px; border: 1.5px solid #D0D8E0; border-radius: 6px; padding: 8px; font-family: Arial, sans-serif; font-size: 13px; line-height: 1.5; outline: none; }
.solution-rich:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(0,176,240,.15); }
.solution-rich:empty::before { content: attr(data-placeholder); color: #aaa; pointer-events: none; }
.solutions-empty { color: #aaa; text-align: center; padding: 30px; font-size: 14px; }
.btn-ki-loesungen {
background: linear-gradient(135deg, #7C3AED, #9F67FA); color: white;
border: none; border-radius: 8px; padding: 9px 22px;
font-size: 14px; font-weight: bold; font-family: Arial, sans-serif;
cursor: pointer; transition: opacity 0.15s;
}
.btn-ki-loesungen:hover { opacity: 0.88; }
.btn-ki-loesungen:disabled { opacity: 0.45; cursor: wait; }
/* ── BLOCK-EDITOR-POPUP (bem) — der EINE Block-Editor, Desktop + Mobil ──
Ersetzt die frühere rechte Props-Leiste. Desktop: zentriertes Modal in der
Popup-Sprache des Portals (wie .phu-box / Phasen-Popup); Mobil-Override
(Bottom-Sheet) im 560px-Query weiter unten. z-index 10003: UNTER der
Richtext-Toolbar (10050) und dem Phasen-Übersichts-Popup (10060). */
.bem-overlay {
position: fixed; inset: 0; z-index: 10003; background: rgba(15,23,42,.55);
display: flex; align-items: center; justify-content: center; padding: 20px;
}
.bem-box {
background: #fff; width: min(880px, 100%); max-height: 88vh; border-radius: 16px;
display: flex; flex-direction: column; overflow: hidden;
box-shadow: 0 24px 70px rgba(0,0,0,.32);
}
.bem-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.bem-head h3 { margin: 0; font-size: 15px; color: var(--navy); flex: 1; }
.bem-nav {
width: 32px; height: 32px; border: 1px solid var(--border); background: #fff;
border-radius: 50%; font-size: 12px; cursor: pointer; color: var(--ink-2);
display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
transition: border-color 0.12s, color 0.12s;
}
.bem-nav:hover:not(:disabled) { border-color: var(--cyan); color: var(--cyan-dark); }
.bem-nav:disabled { opacity: 0.35; cursor: default; }
.bem-x { width: 36px; height: 36px; border: none; background: var(--surface-2); border-radius: 50%; font-size: 16px; cursor: pointer; flex-shrink: 0; }
.bem-body { padding: 14px 16px; overflow-y: auto; flex: 1; }
.bem-body .pf { margin-bottom: 14px; }
.bem-fields { display: flex; flex-direction: column; gap: 14px; }
.bem-fields .pf, .bem-col .pf { margin-bottom: 0; }
/* Zwei-Bereiche-Layout für Blöcke mit Feld-Gruppen (field.col): links die
Haupt-Inhalte (Aufgabe + Musterlösung), rechts die Tipps. So sind beide
Spalten gefüllt (statt „links wenig, rechts viel"). Desktop nebeneinander,
mobil gestapelt → alles möglichst auf einen Blick, ohne Scrollen. */
.bem-cols { display: flex; flex-direction: column; gap: 14px; }
/* Jede Spalte ist eine dezent getönte Karte mit farbigem Akzent — gibt den
beiden Bereichen visuelle Identität (Aufgabe/Lösung cyan, Hilfen warmgelb). */
.bem-col {
display: flex; flex-direction: column; gap: 13px; min-width: 0;
padding: 14px 15px 16px; border-radius: 14px; border: 1px solid #EAF0F6;
background: #FAFCFE;
}
.bem-col--content { background: linear-gradient(180deg, #F5FAFF, #FBFDFF); border-color: #E1EEFA; }
.bem-col--hilfen { background: linear-gradient(180deg, #FFFCF4, #FFFEFB); border-color: #F1E7D0; }
/* Felder in den Karten weiß → heben sich sauber vom getönten Karten-Grund ab. */
.bem-col .pf-input, .bem-col .pf-rich-input { background: #fff; }
.bem-col-title {
display: flex; align-items: center; gap: 8px;
font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
margin: 0 0 1px 0;
}
.bem-col-title::before { content: ''; width: 4px; height: 15px; border-radius: 3px; flex: none; }
.bem-col--content .bem-col-title { color: #2C7DB0; }
.bem-col--content .bem-col-title::before { background: var(--cyan); }
.bem-col--hilfen .bem-col-title { color: #B08829; }
.bem-col--hilfen .bem-col-title::before { background: #E8B23A; }
@media (min-width: 680px) {
.bem-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; align-items: start; }
}
.bem-foot { padding: 10px 16px; border-top: 1px solid #EEF2F7; flex-shrink: 0; }
.bem-del {
width: 100%; padding: 9px; background: white; border: 1.5px solid #FECACA;
border-radius: 8px; color: #DC2626; cursor: pointer; font-family: Arial, sans-serif;
font-size: 13px; font-weight: 600;
}
.bem-del:hover { background: #FEE2E2; }
/* ── Ionennachweise: Ionen-Freischaltung-Modal ── */
.lab-ionen-box { width: min(680px, 100%); }
.lab-ionen-hint { margin: 0 0 14px; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.lab-ionen-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.lab-ionen-col {
padding: 12px 13px 13px; border-radius: 12px;
border: 1px solid #E1EEFA; background: linear-gradient(180deg, #F5FAFF, #FBFDFF);
}
.lab-ionen-coltitle {
font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
color: #2C7DB0; margin-bottom: 8px;
}
.lab-ion-chk {
display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 8px;
cursor: pointer; transition: background 0.12s;
}
.lab-ion-chk:hover { background: rgba(77,182,255,0.10); }
.lab-ion-chk input { width: 17px; height: 17px; accent-color: var(--cyan); cursor: pointer; flex: none; }
.lab-ion-lbl { font-size: 13.5px; color: var(--ink); }
.lab-ion-lbl b { font-size: 15px; color: var(--navy); margin-right: 3px; }
.lab-ionen-preview {
margin-top: 15px; padding: 13px 14px; border-radius: 12px;
background: linear-gradient(180deg, #FFFCF4, #FFFEFB); border: 1px solid #F1E7D0;
}
.lab-ionen-preview-title {
font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
color: #B08829; margin-bottom: 9px;
}
.lab-ionen-preview-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.lab-ionen-preview-row:last-child { margin-bottom: 0; }
.lab-ionen-preview-lbl {
flex: 0 0 78px; font-size: 12px; font-weight: 700; color: var(--ink-2); padding-top: 3px;
}
.lab-ionen-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lab-ionen-chip {
display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12.5px;
font-weight: 600; color: #7A5C13; background: #fff; border: 1px solid #E8D9AE;
}
.lab-ionen-none { font-size: 12.5px; color: var(--ink-3); padding-top: 3px; }
.lab-ionen-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
@media (max-width: 560px) {
.lab-ionen-cols { grid-template-columns: 1fr; }
}
/* Phasen-Leiste im Popup: nur mobil (Desktop hat die Klammer-Rail) */
.bem-phase { display: none; }
/* ── Expertengruppen Props ── */
.eg-cnt-btn:hover { background: #EEF4FF !important; border-color: #4DB6FF !important; }
.pf { display: flex; flex-direction: column; gap: 6px; }
/* `display:flex` würde sonst das [hidden]-Attribut aushebeln (gestufte Tipp-Felder). */
.pf[hidden] { display: none; }
.pf-label { font-size: 10.5px; font-weight: 700; color: #64748B; text-transform: uppercase; letter-spacing: 0.055em; }
/* Eingabefelder: weiche Füllung, ruhiger Rand, sanfter Fokus-Glow statt harter Linie */
.pf-input, .pf-rich-input {
width: 100%; box-sizing: border-box;
padding: 10px 13px; border: 1.5px solid #E3EAF2; border-radius: 10px;
background: #F7FAFC; color: #1F2D3D;
font-size: 13.5px; font-family: Arial, sans-serif;
transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.pf-input { resize: none; } /* Felder wachsen automatisch (Auto-Grow) → kein Ziehgriff */
.pf-input:focus, .pf-rich-input:focus {
outline: none; background: #fff; border-color: var(--cyan);
box-shadow: 0 0 0 3px rgba(0, 176, 240, 0.14);
}
.pf-input:hover:not(:focus), .pf-rich-input:hover:not(:focus) { border-color: #CBD8E6; }
/* Rich-text Props-Feld (contenteditable) */
.pf-rich-input {
min-height: 96px; max-height: 60vh;
line-height: 1.55; word-break: break-word;
white-space: pre-wrap; overflow-y: auto; resize: none;
}
.pf-rich-input:empty::before {
content: attr(data-placeholder);
color: #A9B7C6; pointer-events: none; font-style: italic;
}
/* Slider field */
.pf-slider-wrap { display: flex; align-items: center; gap: 10px; }
.pf-slider { flex: 1; accent-color: var(--cyan); cursor: pointer; }
.pf-slider-val { font-size: 12px; font-weight: 700; color: var(--cyan-dark); min-width: 48px; text-align: right; }
.pf-check-row { display: flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; padding: 4px 0; }
.pf-check-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--cyan); cursor: pointer; }
/* ── IMAGE UPLOAD ZONE ── */
.pf-upload-zone {
border: 2px dashed #C8D6E0;
border-radius: 8px;
background: #F7FAFC;
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
overflow: hidden;
}
.pf-upload-zone:hover, .pf-upload-zone.dz-over { border-color: var(--cyan); background: #EAF8FF; }
.pf-upload-zone.has-image { border-style: solid; border-color: #D0DAE3; background: white; }
.pf-upload-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 22px 16px; color: #999; font-size: 13px; }
.pf-upload-icon { font-size: 28px; }
.pf-upload-sub { font-size: 11px; color: #bbb; }
.pf-upload-preview { display: block; width: 100%; max-height: 160px; object-fit: contain; background: white; }
.pf-upload-hint { font-size: 11px; color: #888; text-align: center; padding: 6px; background: #F7FAFC; border-top: 1px solid #EEE; }
/* ── BLOCK-/BILD-RESIZE-HANDLE ──
Nur beim Hover über den Block sichtbar — dauerhaft eingeblendete
%-Anzeigen an jedem Block stören beim Arbeiten. Die Leiste reserviert
keine Höhe mehr: absolut an der UNTEREN Blockkante (oben rechts sitzt
schon der Lösch-Button). canvas-block ist position:relative. */
.img-resize-bar { position: absolute; bottom: 4px; left: 0; right: 0; height: 0; z-index: 5; }
.img-resize-handle {
position: absolute;
bottom: 0;
display: inline-flex;
align-items: center;
gap: 4px;
background: #1F4E79;
color: white;
padding: 3px 8px;
border-radius: 10px;
font-size: 11px;
font-weight: 700;
cursor: ew-resize;
user-select: none;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.12s, background 0.12s;
}
.canvas-block:hover .img-resize-handle {
opacity: 1;
pointer-events: auto;
}
.img-resize-handle:hover { background: var(--cyan-dark); }
.img-rh-icon { font-size: 13px; }
/* ── BILD PLACEHOLDER IN WYSIWYG ── */
.ab-page-canvas .bild-ph { padding: 20px; text-align: center; color: #aaa; background: #F7FAFC; border: 2px dashed #D8D8D8; border-radius: 6px; font-size: 13px; margin: 8px 0; }
.sub-list { display: flex; flex-direction: column; gap: 5px; }
.sub-row { display: flex; align-items: center; gap: 5px; }
.sub-idx { width: 18px; text-align: center; font-size: 12px; color: #999; flex-shrink: 0; }
.sub-row input[type="text"] { flex: 1; padding: 5px 8px; border: 1.5px solid #D0DAE3; border-radius: 5px; font-family: Arial, sans-serif; font-size: 12px; }
/* Einzeiliges Rich-Text-Feld in Sub-Listen (MC-Antworten, Zuordnungs-Paare):
contenteditable + data-rich → globale Formatierungs-Toolbar (sub/sup/…). */
.sub-rich {
flex: 1; min-width: 0; padding: 5px 8px; border: 1.5px solid #D0DAE3;
border-radius: 5px; font-family: Arial, sans-serif; font-size: 12px;
background: #fff; color: #1F2D3D; line-height: 1.4;
white-space: nowrap; overflow-x: auto; overflow-y: hidden;
}
.sub-rich:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(0,176,240,.14); }
.sub-rich:empty::before { content: attr(data-placeholder); color: #A9B7C6; font-style: italic; pointer-events: none; }
.sub-check-label { font-size: 12px; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.sub-del { background: none; border: 1px solid #eee; border-radius: 4px; cursor: pointer; color: #C62828; padding: 2px 6px; }
.sub-add { background: white; border: 1.5px dashed #D0D8E0; padding: 5px 10px; border-radius: 6px; cursor: pointer; font-size: 12px; color: #888; font-family: Arial, sans-serif; margin-top: 2px; width: 100%; }
/* Readonly banner (Legacy-AB ohne Block-Editor — wird in ab-editor.js gerendert) */
.readonly-banner { background: var(--warning-bg); border: 1px solid #F57C00; border-radius: var(--radius-md); padding: var(--sp-lg); color: #6B4500; }
/* ── WYSIWYG SCOPED STYLES (mirror ab-engine.css inside the canvas) ── */
.ab-page-canvas { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; color: #2D2A26; line-height: 1.5; }
.ab-page-canvas h2.section { font-size: 17px; color: #1A3A5C; margin: 20px 0 10px; padding-bottom: 4px; border-bottom: 1px solid #D8D8D8; }
.ab-page-canvas p.lead { margin: 8px 0 12px; line-height: 1.55; }
.ab-page-canvas .info-box { background: #FFF8E1; border: 1.5px solid #F0B400; border-left: 6px solid #F0B400; border-radius: 4px; padding: 12px 16px; margin: 10px 0 16px; font-size: 15px; line-height: 1.55; }
.ab-page-canvas .merke-box { background: white; border: 1.5px solid #00B0F0; border-left: 6px solid #00B0F0; border-radius: 4px; padding: 14px 18px; margin: 18px 0; }
.ab-page-canvas .merke-box .label { color: #0080B0; font-weight: bold; margin-bottom: 6px; font-size: 15px; }
.ab-page-canvas .aufgabe { margin: 10px 0; }
.ab-page-canvas .aufgabe-text { margin: 6px 0 10px 24px; line-height: 1.5; }
.ab-page-canvas .aufgabe-nr, .ab-page-canvas .aufgabe-op { font-weight: bold; }
.ab-page-canvas .aufgabe-fertig-row { display: none; }
.ab-page-canvas .aufgabe-block { display: block !important; }
/* canvas-toolbar is now BEFORE canvas-wrap (sibling), so it gets its own indent + rounded top */
.ab-page-canvas .canvas-toolbar { margin: 8px 24px 0 24px; padding: 5px 8px; background: #F4F4F4; border: 1.5px solid #D8D8D8; border-bottom: none; border-radius: 4px 4px 0 0; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ab-page-canvas .canvas-wrap { margin: 0 24px 12px 24px; border: 1.5px solid #D8D8D8; border-top: none; border-radius: 0 0 4px 4px; background: white; background-image: linear-gradient(to right,#E0E6ED 1px,transparent 1px),linear-gradient(to bottom,#E0E6ED 1px,transparent 1px); background-size: 20px 20px; }
.ab-page-canvas .tool-btn { background: white; color: #1A3A5C; border: 1px solid #D8D8D8; padding: 4px 10px; font-size: 12px; border-radius: 4px; }
.ab-page-canvas .farbpalette { display: inline-flex; gap: 4px; align-items: center; margin-left: 6px; padding-left: 8px; border-left: 1px solid #D8D8D8; }
.ab-page-canvas .farb-btn { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.2); cursor: pointer; padding: 0; }
/* Radierer-Knopf: SVG mittig zentrieren (sonst sitzt das Icon auf der Text-Baseline und ragt heraus) */
.ab-page-canvas .farb-btn.farb-radierer {
background: #fff; border: 2px solid #999;
display: inline-flex; align-items: center; justify-content: center;
margin-left: 4px;
}
.ab-page-canvas .farb-btn.farb-radierer svg { width: 11px; height: 9px; display: block; flex-shrink: 0; }
.ab-page-canvas .hint-row { margin: 4px 0 4px 24px; }
.ab-page-canvas .hint-btn { background: #FFF3E0; color: #E65100; border: 1.5px solid #FFCC80; padding: 3px 8px; font-size: 12px; border-radius: 4px; }
.ab-page-canvas .tipps-container { margin: 6px 0 8px 24px; display: flex; flex-direction: column; gap: 5px; }
.ab-page-canvas .tipp-btn { align-self: flex-start; background: #FFF3E0; color: #BF360C; border: 1.5px solid #FFCC80; padding: 4px 12px; font-size: 12px; font-weight: 600; border-radius: 20px; cursor: pointer; font-family: inherit; }
.ab-page-canvas .tipp-content { padding: 6px 12px; background: #FFFDE7; border-left: 3px solid #FFC107; border-radius: 0 5px 5px 0; font-size: 13px; }
.ab-page-canvas .quiz-panel { background: #F4F9FF; border: 1.5px solid #B5C7D8; border-radius: 8px; padding: 14px; margin: 10px 0; }
.ab-page-canvas .quiz-header { font-weight: 700; color: #1A3A5C; margin-bottom: 8px; font-size: 14px; }
.ab-page-canvas .quiz-frage { font-size: 15px; margin-bottom: 10px; }
.ab-page-canvas .quiz-antworten { display: flex; flex-direction: column; gap: 6px; }
.ab-page-canvas .quiz-antwort { background: white; border: 1.5px solid #B5C7D8; border-radius: 6px; padding: 8px 12px; text-align: left; font-family: inherit; font-size: 14px; cursor: pointer; }
.ab-page-canvas .dd-block { background: #F4F4F4; border: 1.5px solid #D8D8D8; border-radius: 6px; padding: 14px; margin: 10px 0; }
.ab-page-canvas .dd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; }
.ab-page-canvas .dd-spalte { display: flex; flex-direction: column; gap: 6px; }
.ab-page-canvas .dd-link { background: white; border: 1.5px solid #00B0F0; border-radius: 6px; padding: 7px 11px; font-weight: 600; color: #1A3A5C; }
.ab-page-canvas .dd-rechts-slot { background: white; border: 2px dashed #D8D8D8; border-radius: 6px; padding: 7px 11px; min-height: 36px; }
.ab-page-canvas .dd-pool { background: white; border-radius: 6px; padding: 10px; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ab-page-canvas .dd-rechts { background: #C5DDF6; border: 1.5px solid #00B0F0; border-radius: 6px; padding: 5px 11px; font-weight: 600; color: #0080B0; }
.ab-page-canvas .lt-block { background: #F4F4F4; border: 1.5px solid #D8D8D8; border-radius: 6px; padding: 14px; margin: 10px 0; }
.ab-page-canvas .lt-text { font-size: 15px; line-height: 2.2; margin: 8px 0; }
.ab-page-canvas .lt-input { border: none; border-bottom: 2px solid #00B0F0; background: white; padding: 2px 6px; font-size: 14px; min-width: 80px; font-family: inherit; }
.ab-page-canvas .sim-box { margin: 10px 0; border: 1.5px solid #D8D8D8; border-radius: 6px; overflow: hidden; background: white; }
.ab-page-canvas .sim-header { padding: 8px 12px; background: #C5DDF6; font-weight: bold; color: #1A3A5C; font-size: 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ab-page-canvas .sim-scrub-wrap { padding: 4px 10px 0; background: #F8FAFC; }
.ab-page-canvas .sim-scrub { width: 100%; accent-color: #00B0F0; height: 4px; cursor: pointer; }
.ab-page-canvas .ab-figure { margin: 12px 0; }
.ab-page-canvas .ab-figure img { max-width: 100%; height: auto; display: block; border-radius: 4px; }
.ab-page-canvas .ab-figure figcaption { font-size: 13px; color: #666; margin-top: 5px; text-align: center; }
.cbt-preview-sim { border: 1.5px solid #D8D8D8; border-radius: 6px; overflow: hidden; margin: 4px 0; }.cbt-preview-sim img { width: 100%; height: auto; display: block; }.cbt-preview-sim-ph { display: flex; align-items: center; gap: 10px; padding: 16px; background: #F8FAFC; border: 1.5px dashed #D8D8D8; border-radius: 6px; color: #888; font-size: 14px; }
/* ═══ TOAST ═══ */
#toast-host {
position: fixed; bottom: 20px; right: 20px; z-index: 9999;
display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.toast {
background: #333; color: white; padding: 10px 18px; border-radius: 8px;
font-size: 13px; max-width: 360px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);
opacity: 1; transition: opacity 0.3s;
}
.toast.ok { background: #2E7D32; }
.toast.err { background: #C62828; }
.toast.warn { background: #E65100; }
/* ═══ RECHENSCHAFTSABLAGEN ═══ */
.ra-meta-row { display: flex; gap: 14px; align-items: flex-end; margin-bottom: 14px; }
.ra-meta-row input {
width: 100%; padding: 8px 10px; border: 1.5px solid #D0D9E0; border-radius: 7px;
font-size: 14px; font-family: inherit; outline: none;
}
.ra-meta-row input:focus { border-color: var(--cyan); }
.ra-be-bilanz {
display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
padding: 10px 14px; border-radius: 9px; font-size: 13.5px; margin-bottom: 16px;
}
.ra-be-bilanz.ok { background: #E8F5E9; border: 1.5px solid #A5D6A7; color: #1B5E20; }
.ra-be-bilanz.warn { background: #FFF3E0; border: 1.5px solid #FFCC80; color: #E65100; }
.ra-be-bilanz .ra-bilanz-afb { font-size: 12.5px; }
.ra-be-bilanz .soll { opacity: 0.6; }
.ra-aufgabe-card {
background: white; border: 1.5px solid #E0E6EC; border-radius: 12px;
padding: 16px 18px; margin-bottom: 14px;
}
.ra-aufgabe-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ra-nr {
width: 30px; height: 30px; border-radius: 8px; background: var(--cyan-light); color: var(--cyan-dark);
display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; flex-shrink: 0;
}
.ra-afb-select {
padding: 6px 8px; border: 1.5px solid #D0D9E0; border-radius: 7px;
font-size: 13px; font-family: inherit; outline: none; background: white; cursor: pointer;
}
.ra-be-label { font-size: 13px; color: #555; display: flex; align-items: center; gap: 6px; }
.ra-be-input {
width: 58px; padding: 6px 8px; border: 1.5px solid #D0D9E0; border-radius: 7px;
font-size: 13px; font-family: inherit; outline: none;
}
.ra-frage-input {
width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1.5px solid #D0D9E0;
border-radius: 8px; font-size: 14px; font-family: inherit; outline: none; resize: vertical;
min-height: 52px; line-height: 1.5;
}
.ra-frage-input:focus { border-color: var(--cyan); }
.ra-bild-row { margin: 8px 0 2px; display: flex; align-items: flex-start; gap: 10px; }
.ra-bild-preview { display: flex; align-items: flex-start; gap: 10px; }
.ra-bild-preview[hidden] { display: none; }
.ra-bild-preview img { max-height: 90px; max-width: 220px; border-radius: 7px; border: 1px solid #E0E6EC; display: block; }
.ra-erw-title { font-weight: 700; font-size: 13px; color: var(--dark); margin: 14px 0 8px; }
.ra-erw-sum { font-weight: 600; color: #2E7D32; font-size: 12px; }
.ra-erw-sum.mismatch { color: #E65100; }
.ra-erw-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ra-erw-text {
flex: 1; padding: 7px 10px; border: 1.5px solid #E0E6EC; border-radius: 7px;
font-size: 13px; font-family: inherit; outline: none;
}
.ra-erw-text:focus { border-color: var(--cyan); }
.ra-erw-punkte {
width: 52px; padding: 7px 8px; border: 1.5px solid #E0E6EC; border-radius: 7px;
font-size: 13px; font-family: inherit; outline: none; text-align: center;
}
.ra-erw-p { font-size: 12px; color: #888; }
.ra-erw-del {
border: none; background: none; color: #C62828; cursor: pointer; font-size: 14px;
padding: 4px 6px; border-radius: 5px; flex-shrink: 0;
}
.ra-erw-del:hover { background: #FEE2E2; }
.ra-add-erw { margin-top: 4px; }
.ra-afb-weight-row { display: flex; gap: 10px; margin-top: 6px; }
.ra-afb-weight-item {
flex: 1; display: flex; align-items: center; gap: 5px;
background: #F8FAFC; border: 1.5px solid #E0E6EC; border-radius: 8px;
padding: 8px 10px;
}
.ra-afb-label { font-weight: 700; font-size: 13px; flex-shrink: 0; }
.ra-afb-pct-input {
flex: 1; min-width: 0; padding: 4px 6px; border: 1.5px solid #D0D9E0; border-radius: 6px;
font-size: 14px; font-family: inherit; outline: none; text-align: right;
}
.ra-afb-pct-input:focus { border-color: var(--cyan); }
.ra-afb-pct-unit { font-size: 13px; color: #888; flex-shrink: 0; }
/* ═══ ADD-INS (Editor-Panel) ═══ */
.addin-row {
display: flex; align-items: center; gap: 14px;
padding: 14px 16px; border: 1.5px solid #E0E8EE;
border-radius: 11px; background: white; margin-bottom: 10px;
}
.addin-row.addin-soon { opacity: 0.5; }
.addin-row-icon { font-size: 24px; flex-shrink: 0; }
.addin-row-body { flex: 1; }
.addin-row-label { font-size: 14px; font-weight: 600; color: #1F4E79; margin-bottom: 2px; }
.addin-row-desc { font-size: 12px; color: #888; line-height: 1.4; }
.addin-soon-badge {
background: #E0E8EE; color: #666; font-size: 10px; font-weight: 600;
padding: 1px 7px; border-radius: 8px; vertical-align: middle; margin-left: 6px;
}
/* ═══ STOFFÜBERSICHT ═══ */
.page-inner-wide { max-width: 1280px; margin: 0 auto; padding: 30px 24px 60px; }
.su-hint { color: #666; font-size: 13px; margin: 0 0 14px; line-height: 1.5; }
.su-layout { display: flex; gap: 16px; align-items: stretch; }
#su-map {
flex: 1; min-width: 0; height: calc(100vh - 230px); min-height: 480px;
border: 1.5px solid #E0E8EE; border-radius: 14px;
}
/* Seiten-Panel im Stoffübersicht-Editor */
.su-panel {
width: 320px; flex-shrink: 0; background: white;
border: 1.5px solid #E0E8EE; border-radius: 14px;
padding: 16px; overflow-y: auto;
max-height: calc(100vh - 230px);
}
.su-panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.su-panel-nr {
min-width: 36px; height: 36px; padding: 0 8px; border-radius: 18px;
display: flex; align-items: center; justify-content: center;
color: white; font-weight: bold; font-size: 15px; flex-shrink: 0;
}
.su-panel-titel-input {
flex: 1; width: 100%; box-sizing: border-box;
padding: 7px 10px; border: 1.5px solid #D0D9E0; border-radius: 7px;
font-size: 14px; font-weight: 600; color: #1F4E79; font-family: inherit; outline: none;
}
.su-panel-titel-input:focus { border-color: var(--cyan); }
.su-panel-close {
background: none; border: none; font-size: 22px; color: #999;
cursor: pointer; padding: 0 4px; line-height: 1; flex-shrink: 0;
}
.su-panel-typ { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 0.5px; }
.su-panel-name { font-size: 14.5px; font-weight: bold; color: #1F4E79; overflow: hidden; text-overflow: ellipsis; }
.su-panel-section { margin-bottom: 18px; }
.su-panel-section-title {
font-size: 12px; font-weight: bold; color: #888;
text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;
}
.su-panel-empty { font-size: 13px; color: #bbb; padding: 8px 0; }
.su-panel-hint { font-size: 11.5px; color: #999; margin-top: 6px; line-height: 1.4; }
.su-panel-item {
display: flex; align-items: center; gap: 8px;
padding: 8px 10px; border: 1.5px solid #EEF2F6; border-radius: 8px; margin-bottom: 6px;
}
.su-pi-nr { font-size: 11.5px; font-weight: bold; color: #999; flex-shrink: 0; min-width: 32px; }
.su-pi-icon { flex-shrink: 0; }
.su-pi-titel { flex: 1; font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-pi-remove {
border: none; background: none; color: #C62828; cursor: pointer;
font-size: 13px; padding: 3px 6px; border-radius: 5px; flex-shrink: 0;
}
.su-pi-remove:hover { background: #FEE2E2; }
.su-panel-add-row { display: flex; gap: 8px; }
.su-panel-add-row select {
flex: 1; min-width: 0; padding: 7px 9px; border: 1.5px solid #D0D9E0; border-radius: 7px;
font-size: 13px; font-family: inherit; outline: none; background: white; cursor: pointer;
}
@media (max-width: 900px) {
.su-layout { flex-direction: column; }
.su-panel { width: 100%; max-height: none; }
#su-map { height: 60vh; }
}
/* Farb-/Icon-Auswahl im Überthema-Panel */
.su-farb-row { display: flex; flex-wrap: wrap; gap: 7px; }
.su-farb-swatch {
width: 30px; height: 30px; border-radius: 50%; border: 2.5px solid transparent;
cursor: pointer; transition: transform 0.12s, border-color 0.12s;
}
.su-farb-swatch:hover { transform: scale(1.15); }
.su-farb-swatch.aktiv { border-color: #1F4E79; box-shadow: 0 0 0 2px white inset; }
.su-icon-row { display: flex; flex-wrap: wrap; gap: 6px; }
.su-icon-btn {
width: 34px; height: 34px; border-radius: 8px; border: 1.5px solid #E0E8EE;
background: white; font-size: 17px; cursor: pointer; display: flex;
align-items: center; justify-content: center; transition: border-color 0.12s, background 0.12s;
color: #999;
}
.su-icon-btn:hover { border-color: var(--cyan); }
.su-icon-btn.aktiv { border-color: var(--cyan); background: #F0FAFF; }
/* KI-Verbindungsvorschläge */
.ki-vb-list { max-height: 380px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.ki-vb-item {
display: flex; align-items: flex-start; gap: 10px;
border: 1.5px solid #E5E0F5; background: #FBFAFE; border-radius: 10px;
padding: 11px 13px; cursor: pointer;
}
.ki-vb-item:hover { border-color: #C4B5FD; }
.ki-vb-item input { margin-top: 3px; }
.ki-vb-body { flex: 1; min-width: 0; }
.ki-vb-route { display: block; font-size: 13.5px; color: #2D2A26; line-height: 1.5; }
.ki-vb-pfeil { color: #B45309; font-weight: 700; white-space: nowrap; }
.ki-vb-grund { display: block; font-size: 12px; color: #888; margin-top: 4px; line-height: 1.4; }
/* Abgeleitetes (nicht editierbares) Nummern-Badge auf HA-Karten */
.inhalt-nummer-ro {
display: inline-flex; align-items: center; justify-content: center;
background: #FEF3C7; color: #92400E; font-weight: 800; font-size: 12px;
border-radius: 7px; padding: 2px 8px; margin-right: 8px;
vertical-align: middle; letter-spacing: 0.3px;
}
/* Nummern-Badge links neben dem Titel (AB-/Übungs-/HA-Karten) — direkt bearbeitbar */
.inhalt-nummer-edit {
width: 54px; padding: 2px 6px; margin-right: 8px;
border: 1.5px solid transparent; border-radius: 7px;
background: #E0F2FE; color: #0369A1; font-weight: 800; font-size: 12px;
font-family: inherit; outline: none; text-align: center;
vertical-align: middle; letter-spacing: 0.3px;
transition: border-color 0.12s, background 0.12s;
}
.inhalt-nummer-edit:hover { border-color: #7DD3FC; }
.inhalt-nummer-edit:focus { border-color: var(--cyan); background: white; }
.inhalt-nummer-edit::placeholder { color: #7DD3FC; font-weight: 700; }
/* Pfeil-Beschriftungs-Modal: Von → Nach Vorschau */
.pfeil-label-preview {
display: flex; align-items: center; gap: 10px;
background: #FFF8EB; border: 1.5px solid #FDE5BC; border-radius: 10px;
padding: 12px 14px; margin-bottom: 18px;
}
.pfeil-label-node {
flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: #1F4E79;
background: white; border: 1.5px solid #E0E8EE; border-radius: 8px;
padding: 7px 10px; text-align: center;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pfeil-label-arrow { font-size: 20px; color: #F59E0B; font-weight: bold; flex-shrink: 0; }
/* ═══════════════════════════════════════════════════════════════════════════
UNTERRICHT ORGANISIEREN
═══════════════════════════════════════════════════════════════════════════ */
/* ── 3 · View-Layout + Toolbar ───────────────────────────────────────────── */
#view-org { max-width: 1280px; margin: 0 auto; padding: 24px 24px 60px; }
#org-toolbar {
display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
margin-bottom: 18px; padding-bottom: 14px; border-bottom: 2px solid #E0E8EE;
}
.org-tb-group { display: flex; align-items: center; gap: 6px; }
.org-tb-sep { flex: 1; }
.org-modus-switch {
display: flex; background: rgba(0,176,240,0.08); border-radius: 8px; padding: 3px; gap: 2px;
}
.org-modus-btn {
border: none; background: transparent; color: var(--cyan-dark);
font-size: var(--text-sm); font-weight: var(--fw-bold); font-family: var(--font);
padding: var(--sp-sm) var(--sp-md); border-radius: var(--radius-sm); cursor: pointer;
min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center;
transition: background var(--dur), color var(--dur);
}
.org-modus-btn:focus-visible { box-shadow: var(--focus-ring); }
.org-modus-btn.aktiv { background: var(--cyan); color: #fff; }
.org-nav-btn {
width: var(--tap); height: var(--tap); border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
background: var(--surface); color: var(--dark); font-size: var(--text-lg); cursor: pointer;
display: flex; align-items: center; justify-content: center; transition: background var(--dur), border-color var(--dur);
}
.org-nav-btn:hover { background: var(--cyan-light); border-color: var(--cyan); }
.org-nav-btn:focus-visible { box-shadow: var(--focus-ring); }
.org-heute-btn {
border: 1px solid var(--cyan); background: var(--surface); color: var(--cyan-dark);
font-size: var(--text-sm); font-weight: var(--fw-bold); font-family: var(--font);
padding: var(--sp-sm) var(--sp-md); border-radius: var(--radius-sm); cursor: pointer;
min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center;
transition: background var(--dur);
}
.org-heute-btn:hover { background: var(--cyan-light); }
.org-heute-btn:focus-visible { box-shadow: var(--focus-ring); }
.org-zeitraum-label { font-size: 16px; font-weight: bold; color: var(--dark); padding: 0 4px; }
/* Klassen-Chips */
/* Chips-Bereich: eine Zeile je Fach (Fach-Badge + Stufen-Gruppen + Klassen). */
.org-chips { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.org-chip {
display: inline-flex; align-items: center; gap: 6px;
background: #fff; border: 1.5px solid #D0D8E0; border-radius: 16px;
padding: 4px 12px 4px 10px; font-size: 13px; font-weight: bold; color: var(--dark);
cursor: pointer; transition: border-color 0.15s, background 0.15s, opacity 0.15s;
}
.org-chip:hover { border-color: var(--cyan); }
.org-chip-dot {
width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0;
background: var(--chip-color, var(--cyan));
}
.org-chip.aktiv { border-color: var(--cyan); background: var(--cyan-light); }
.org-chip.gedimmt { opacity: 0.4; }
/* Fach→Stufe→Klasse-Gruppierung der Filter-Chips: je Fach eine Zeile mit
farbigem Fach-Badge (Klick = ganzes Fach filtern). */
.org-fach-row { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.org-fach-badge {
display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
font-size: 12.5px; font-weight: 700; font-family: var(--font); white-space: nowrap;
color: var(--fach-farbe, #0369A1); background: #fff;
border: 1.5px solid var(--fach-farbe, #BAE6FD); border-radius: 999px; padding: 3.5px 12px;
transition: background 0.15s, box-shadow 0.15s;
}
.org-fach-badge:hover { box-shadow: 0 1px 5px rgba(0,0,0,0.12); }
.org-stufe-grp { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.org-grp-label {
background: #F1F5F9; border: 1px solid #E2E8F0; border-radius: 12px;
padding: 3px 9px; font-size: 12px; font-weight: 600; color: var(--ink-2, #4A5868);
cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.org-grp-label:hover { border-color: var(--cyan); color: var(--cyan-dark, #0091C7); }
/* ── 4 · Kalender-Grid ───────────────────────────────────────────────────── */
.org-kalender-grid {
display: grid; grid-template-columns: repeat(7, 1fr);
gap: 1px; background: #E0E8EE; border: 1px solid #E0E8EE;
border-radius: 12px; overflow: hidden;
}
.org-wochentag-kopf {
background: #F5F8FA; color: #888; font-size: 11px; font-weight: bold;
text-transform: uppercase; letter-spacing: 0.5px; text-align: center; padding: 8px 4px;
}
.org-tag {
background: #fff; min-height: 116px; padding: 6px 7px;
display: flex; flex-direction: column; gap: 4px; position: relative;
min-width: 0; overflow: hidden;
}
.org-tag-nr { font-size: 12px; font-weight: bold; color: var(--dark); align-self: flex-end; }
.org-tag.fremdmonat { background: #FAFBFC; opacity: 0.5; }
.org-tag.fremdmonat .org-tag-nr { color: #aaa; }
.org-tag.heute { box-shadow: inset 0 0 0 2.5px var(--cyan); border-radius: 4px; }
.org-tag.heute .org-tag-nr {
background: var(--cyan); color: #fff; border-radius: 50%;
width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
}
.org-tag.ferien {
background: repeating-linear-gradient(
-45deg, #F4F6F8, #F4F6F8 6px, #E9EDF1 6px, #E9EDF1 12px);
}
.org-tag.feiertag {
background: repeating-linear-gradient(
-45deg, #FDEEEE, #FDEEEE 6px, #F8DDDD 6px, #F8DDDD 12px);
}
/* Ausfall ist STUNDENWEISE: Der Tag bleibt vollständig sichtbar (alle anderen
Stunden normal), nur die ausgefallene Stunde wird als roter Chip dargestellt
(org-slot.ausfall-chip). Bleibt klickbar (Popup → „Ausfall aufheben"). */
.org-tag.ausfall { background: #fff; }
.org-slot.ausfall-chip {
background: #FEF2F2; border-left-color: #DC2626;
}
.org-slot.ausfall-chip .org-slot-nr { color: #DC2626; }
.org-slot.ausfall-chip .org-slot-thema {
color: #DC2626; font-weight: bold; text-decoration: line-through;
text-decoration-thickness: 1px;
}
.org-slot.ausfall-chip:hover { background: #FEE2E2; }
.org-tag-label {
font-size: 10px; font-weight: bold; color: #999;
text-transform: uppercase; letter-spacing: 0.3px;
}
.org-tag.feiertag .org-tag-label { color: #C0504D; }
/* Slot-Chip (Klassenfarbe als linker Balken via inline-style) */
.org-slot {
display: flex; align-items: center; gap: 5px;
background: #F5F8FA; border-radius: 5px; border-left: 4px solid var(--cyan);
padding: 3px 5px 3px 6px; cursor: pointer; transition: background 0.15s, box-shadow 0.15s;
min-height: 22px;
}
.org-slot:hover { background: #EAF1F6; box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
.org-slot-nr { font-size: 10px; font-weight: bold; color: var(--dark); flex-shrink: 0; }
/* Fach-Icon im Slot-Chip (nur bei ≥2 Fächern gerendert) */
.org-slot-fach { font-size: 10px; line-height: 1; flex-shrink: 0; }
.org-slot-thema {
font-size: 11px; color: #555; overflow: hidden; text-overflow: ellipsis;
white-space: nowrap; flex: 1; line-height: 1.25;
}
/* Profil-Stunde → zusätzliche FORM-Markierung (barrierearm, nicht nur Farbe) */
.org-slot.profil {
border-left-style: double; border-left-width: 6px;
background-image: linear-gradient(135deg, transparent 70%, rgba(0,0,0,0.06) 70%);
}
.org-slot.profil .org-slot-nr::before { content: "◆ "; font-size: 9px; opacity: 0.7; }
.org-slot.puffer { border-left-color: #B0BAC4; opacity: 0.75; }
.org-slot.puffer .org-slot-thema { font-style: italic; }
.org-slot.schulaufgabe { border-left-color: #DC2626; background: #FEF2F2; }
.org-slot.schulaufgabe .org-slot-nr::before { content: "✎ "; font-size: 9px; color: #DC2626; }
.org-slot.stegreif { border-left-color: #D97706; background: #FFFBEB; }
.org-slot.stegreif .org-slot-nr::before { content: "⚡ "; font-size: 9px; color: #D97706; }
/* Erledigt-Punkte */
.org-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; box-sizing: border-box; }
.org-dot.offen { background: transparent; border: 2px solid var(--cyan); }
.org-dot.fertig {
background: #2E9E5B; border: 2px solid #2E9E5B; position: relative;
}
.org-dot.fertig::after {
content: "✓"; position: absolute; inset: 0; color: #fff;
font-size: 8px; font-weight: bold; line-height: 8px; text-align: center;
}
/* Wochenansicht-Varianten */
.org-kalender-grid.woche .org-tag { min-height: 380px; }
.org-kalender-grid.woche .org-wochentag-kopf { font-size: 12px; padding: 10px 4px; }
/* ── 5 · Modal Step 2 (Stundenplan-Wochentage) ──────────────────────────── */
.nk-tag-row {
display: flex; align-items: center; gap: 12px;
padding: 9px 12px; border: 1.5px solid #E0E8EE; border-radius: 10px; margin-bottom: 8px;
transition: border-color 0.15s, opacity 0.15s, background 0.15s;
}
.nk-tag-row.inaktiv { opacity: 0.5; }
.nk-tag-row:not(.inaktiv) { border-color: var(--cyan); background: var(--cyan-light); }
.nk-tag-label { font-size: 14px; font-weight: bold; color: var(--dark); min-width: 90px; }
.nk-tag-aktiv, .nk-tag-profil {
display: flex; align-items: center; gap: 6px; cursor: pointer;
font-size: 12.5px; font-weight: bold; color: #666;
}
.nk-tag-profil { margin-left: auto; }
.nk-tag-aktiv input[type="checkbox"], .nk-tag-profil input[type="checkbox"] {
width: 15px; height: 15px; accent-color: var(--cyan); cursor: pointer;
}
.nk-tag-stunden { display: flex; align-items: center; gap: 4px; }
.nk-std-minus, .nk-std-plus {
width: 26px; height: 26px; border-radius: 6px; border: 1.5px solid #D0D8E0;
background: #fff; color: var(--dark); font-size: 16px; font-weight: bold;
cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1;
transition: background 0.15s, border-color 0.15s;
}
.nk-std-minus:hover, .nk-std-plus:hover { background: var(--cyan-light); border-color: var(--cyan); }
.nk-std-anzahl { font-size: 15px; font-weight: bold; color: var(--dark); min-width: 22px; text-align: center; }
.nk-std-suffix { font-size: 12px; color: #888; }
/* ── 6 · Tag-Popup #modal-orga-tag ──────────────────────────────────────── */
#modal-orga-tag .modal-box { max-width: 580px; }
/* Box als Anker für den absoluten Schließen-Button (sonst hängt er am Overlay). */
#modal-orga-tag-box { position: relative; }
/* Kleines Schließen-X oben rechts im Popup. */
.modal-close {
width: 30px; height: 30px; padding: 0; border: none; border-radius: 8px;
background: #F0F3F6; color: #667; font-size: 16px; line-height: 1; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background 0.15s, color 0.15s;
}
.modal-close:hover { background: #E2487A22; color: #C0392B; }
.org-cl-titel {
display: flex; align-items: center; gap: 6px;
font-size: 11px; font-weight: bold; color: #888; text-transform: uppercase;
letter-spacing: 0.6px; margin: 18px 0 8px; padding-bottom: 8px; border-bottom: 1px solid #E0E8EE;
}
.org-checkliste { display: flex; flex-direction: column; gap: 6px; }
.org-cl-item {
display: flex; align-items: center; gap: 10px;
padding: 9px 12px; border: 1.5px solid #E0E8EE; border-radius: 10px;
font-size: 14px; color: var(--dark); transition: border-color 0.15s, background 0.15s;
}
.org-cl-item:hover { border-color: var(--cyan); background: #F8FBFD; }
.org-cl-label { flex: 1; font-weight: 600; }
.org-cl-action {
border: 1.5px solid var(--cyan); background: #fff; color: var(--cyan-dark);
font-size: 12.5px; font-weight: bold; font-family: Arial, sans-serif;
padding: 5px 12px; border-radius: 7px; cursor: pointer; transition: background 0.15s;
}
.org-cl-action:hover { background: var(--cyan-light); }
.org-cl-item.pflicht { border-left: 4px solid var(--cyan); }
/* ── Zwei-Zonen-Trenner im Tag-Popup ─────────────────────────────────────── */
.org-zone-header {
display: flex; align-items: center; gap: 8px;
font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px;
padding: 6px 10px; border-radius: 7px; margin: 14px 0 8px;
}
.org-zone-header.lehrer {
background: #F3F4F6; color: #6B7280;
border: 1px solid #E5E7EB;
}
.org-zone-header.schueler {
background: #EFF6FF; color: #1D4ED8;
border: 1px solid #BFDBFE;
}
/* Skizze-Phasen-Editor */
.org-skizze { margin-top: 6px; display: flex; flex-direction: column; gap: 8px; }
.org-skizze-ziel {
width: 100%; padding: 9px 11px; border: 1.5px solid #D0D8E0; border-radius: 8px;
font-size: 14px; font-family: Arial, sans-serif; color: var(--dark); box-sizing: border-box;
}
.org-skizze-ziel:focus { outline: none; border-color: var(--cyan); }
/* Badge: Anzahl ausgewählter Elemente in Checkliste */
.org-cl-badge {
display: inline-flex; align-items: center; justify-content: center;
background: var(--cyan); color: #fff; font-size: 10px; font-weight: bold;
min-width: 18px; height: 18px; border-radius: 9px; padding: 0 4px;
margin-left: 4px;
}
/* Planungs-Box: Speicher-Hinweis + PDF-Sammelexport */
.org-planung-box {
margin-top: 14px; padding: 10px 12px; border-radius: 8px;
background: #F0F9FF; border: 1px solid #BFDBFE;
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.org-planung-info { flex: 1; font-size: 12px; color: #1E40AF; min-width: 140px; }
.org-planung-zip {
background: #fff; color: #047857; border: 1.5px solid #6EE7B7; border-radius: 7px;
font-size: 12px; font-weight: bold; padding: 6px 12px; cursor: pointer;
white-space: nowrap; transition: background 0.15s, border-color 0.15s;
}
.org-planung-zip:hover { background: #ECFDF5; border-color: #34D399; }
.org-planung-zip:disabled { opacity: 0.6; cursor: default; }
.org-planung-ppt { color: #6D28D9; border-color: #C4B5FD; }
.org-planung-ppt:hover { background: #F5F3FF; border-color: #A78BFA; }
/* Popup-Fußzeile mit „Stunde fällt aus" */
.org-popup-footer { margin-top: 12px; padding-top: 12px; border-top: 1px solid #E0E8EE; display: flex; }
.org-ausfall-btn {
margin-left: auto; background: #fff; color: #C0392B; border: 1.5px solid #E6C4C4;
font-size: 13px; font-weight: bold; font-family: Arial, sans-serif;
padding: 7px 14px; border-radius: 8px; cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.org-ausfall-btn:hover { background: #FBEDEC; border-color: #C0392B; }
/* „Ausfall aufheben"-Variante (Stunde ist aktuell ausgefallen) — grün/aktiv */
.org-ausfall-btn.aktiv { color: #2E7D32; border-color: #BFE3CB; }
.org-ausfall-btn.aktiv:hover { background: #EAF6EE; border-color: #2E7D32; }
/* ── 6b · Sequenz-Sidebar (permanent links) ─────────────────────────────── */
#org-body { display: flex; gap: 16px; align-items: flex-start; }
#org-kalender { flex: 1; min-width: 0; }
#org-seq-panel {
width: 270px; flex-shrink: 0; background: #fff; border: 1px solid #E0E8EE;
border-radius: 12px; padding: 14px;
position: sticky; top: 76px;
/* Nur vertikal scrollen. overflow-x explizit hidden, sonst rechnet der Browser
bei overflow-y:auto die x-Achse ebenfalls auf auto (→ ungewollter H-Scroll).
Lange Titel brechen ohnehin um (s. .org-thema-titel). */
max-height: calc(100vh - 100px); overflow-y: auto; overflow-x: hidden;
}
.org-seq-panel-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.org-seq-panel-titel { font-size: 15px; font-weight: bold; color: var(--dark); }
.org-seq-add-btn {
background: var(--cyan); color: #fff; border: none; border-radius: 8px;
padding: 5px 11px; font-size: 15px; font-weight: bold; cursor: pointer; font-family: Arial, sans-serif;
line-height: 1;
}
.org-seq-add-btn:hover { background: var(--cyan-dark); }
/* Klassen-Gruppe (mehrere Klassen im Panel) */
.org-seq-klasse-gruppe { margin-bottom: 10px; }
.org-seq-klasse-kopf {
display: flex; align-items: center; gap: 8px; width: 100%;
padding: 7px 10px; margin-bottom: 6px;
background: #F4F6F9; border: none; border-radius: 8px;
font-size: 13px; font-weight: bold; color: var(--dark);
cursor: pointer; text-align: left; font-family: Arial, sans-serif;
transition: background 0.15s;
}
.org-seq-klasse-kopf:hover { background: #E8F0F8; }
.org-seq-klasse-dot {
width: 10px; height: 10px; border-radius: 50%;
background: var(--klasse-farbe, #888); flex-shrink: 0;
}
.org-seq-klasse-name { flex: 1; }
.org-seq-klasse-pfeil { font-size: 11px; opacity: 0.6; }
/* Hierarchie: Unterrichtseinheit → Sequenz → Stunde */
.org-ein { border-left: 4px solid #ccc; border-radius: 0 8px 8px 0; margin-bottom: 8px; background: #FCFDFE; }
.org-ein-kopf {
display: flex; align-items: center; gap: 7px; width: 100%;
padding: 8px 9px; background: transparent; border: none; cursor: pointer;
text-align: left; font-family: Arial, sans-serif;
}
.org-ein-kopf:hover { background: #F2F6F9; border-radius: 0 8px 0 0; }
.org-ein-pfeil { font-size: 10px; opacity: 0.55; width: 10px; }
.org-ein-nr {
font-size: 11px; font-weight: bold; color: #fff; background: #2563EB;
border-radius: 5px; padding: 1px 6px; min-width: 16px; text-align: center;
}
.org-ein-titel { flex: 1; font-size: 13.5px; font-weight: bold; color: var(--dark); }
.org-ein-fortschritt { font-size: 10.5px; font-weight: bold; color: #888; background: #EEF2F5; border-radius: 9px; padding: 1px 7px; }
.org-seqz { margin: 2px 0 2px 16px; }
.org-seqz-kopf {
display: flex; align-items: center; gap: 6px; width: 100%;
padding: 4px 6px; background: transparent; border: none; cursor: pointer;
text-align: left; font-family: Arial, sans-serif;
}
.org-seqz-kopf:hover { background: #F2F6F9; border-radius: 6px; }
.org-seqz-pfeil { font-size: 9px; opacity: 0.5; width: 9px; }
.org-seqz-nr { font-size: 11px; font-weight: bold; color: #2563EB; min-width: 26px; }
.org-seqz-titel { flex: 1; font-size: 12.5px; font-weight: 600; color: #444; }
.org-seqz .org-thema-chip { margin-left: 8px; }
/* Thema-Chip: Basis */
.org-thema-chip {
display: flex; align-items: center; gap: 5px; padding: 5px 8px; margin: 3px 0;
background: #F6F9FC; border: 1px solid #DDE6EE; border-radius: 7px; font-size: 12px;
cursor: grab; user-select: none; transition: background 0.12s, opacity 0.12s;
}
.org-thema-chip:active { cursor: grabbing; }
/* Platziert = hat eine Stunde */
.org-thema-chip.platziert { background: #EAF6EE; border-color: #BFE3CB; color: #2E7D46; }
/* Status: gehalten (vergangene Stunde) → ausgegraut */
.org-thema-chip.status-gehalten {
opacity: 0.5; background: #F1F1F1; border-color: #DDD; color: #888;
}
.org-thema-chip.status-gehalten .org-thema-titel { text-decoration: line-through; }
/* Status: heute */
.org-thema-chip.status-heute {
background: #EFF6FF; border-color: #93C5FD; color: #1D4ED8;
}
/* Nächste Stunde: hervorgehoben */
.org-thema-chip.naechste {
background: #FFFBEB; border: 2px solid #F59E0B; color: #92400E;
font-weight: bold;
}
.org-thema-chip.naechste::before { content: "▶ "; font-size: 9px; color: #D97706; }
/* Aktive (zuletzt angeklickte) Stunde */
.org-thema-chip.aktiv {
background: #EEF2FF; border: 2px solid #6366F1; color: #3730A3;
font-weight: 600;
}
.org-thema-chip.aktiv::before { content: "● "; font-size: 9px; color: #6366F1; }
.org-thema-chip .org-thema-nr { flex-shrink: 0; font-weight: bold; opacity: 0.7; min-width: 20px; font-size: 11px; }
/* min-width:0 + Wortumbruch: lange Titel/lange Wörter (z.B. „…/Molekülionen")
bleiben in der Box statt herauszuragen und das Datum wegzuschieben. */
.org-thema-chip .org-thema-titel { flex: 1; min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.org-thema-chip .org-thema-datum { flex-shrink: 0; font-size: 10px; font-weight: bold; white-space: nowrap; opacity: 0.8; }
.org-thema-chip .org-thema-x { flex-shrink: 0; background: none; border: none; color: #888; cursor: pointer; font-size: 12px; padding: 0 1px; }
.org-thema-chip .org-thema-x:hover { color: #C0392B; }
.org-thema-chip.dragging { opacity: 0.45; }
/* Slot als Drop-Ziel hervorheben */
.org-slot.drop-ziel { outline: 2px dashed var(--cyan); outline-offset: 1px; background: var(--cyan-light); }
.org-seq-empty { font-size: 12.5px; color: #999; text-align: center; padding: 14px 6px; line-height: 1.5; }
/* ── 7 · Empty / Onboarding-Banner ──────────────────────────────────────── */
.org-banner {
display: flex; align-items: center; gap: 10px;
margin: 0 0 18px; padding: 12px 16px; border-radius: 12px;
background: #FFF3CD; border: 1.5px solid #FFC107; color: #856404;
font-size: 13.5px; font-weight: 700; line-height: 1.4;
}
.org-banner-icon { font-size: 18px; flex-shrink: 0; }
.org-banner-action {
margin-left: auto; border: 1.5px solid #FFC107; background: #fff; color: #856404;
font-size: 12.5px; font-weight: bold; font-family: Arial, sans-serif;
padding: 5px 12px; border-radius: 7px; cursor: pointer; white-space: nowrap; transition: background 0.15s;
}
.org-banner-action:hover { background: #FFF8E1; }
/* Org-Empty-State (kein Stundenplan) — nutzt .keine-klasse-state-Optik */
.org-empty-state {
text-align: center; padding: 70px 20px;
background: #fff; border-radius: 16px; border: 2px dashed #D0D9E0;
}
.org-empty-icon { font-size: 56px; margin-bottom: 16px; }
.org-empty-state h2 { color: var(--dark); margin: 0 0 10px; font-size: 22px; }
.org-empty-state p { color: #888; font-size: 14.5px; line-height: 1.6; margin: 0 0 18px; }
/* ═══ Stoffverteilungsplan-Modal (Einheit → Sequenz → Stunde) ═══ */
.modal-box.svp-box {
max-width: 760px; padding: 0; display: flex; flex-direction: column;
max-height: 90vh;
}
.svp-kopf {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 16px; padding: 22px 26px 14px; border-bottom: 1px solid #EEF2F5;
}
.svp-sub { font-size: 13px; color: #888; margin-top: 4px; }
.svp-kopf-rechts { display: flex; align-items: center; gap: 10px; }
.svp-select {
padding: 7px 10px; border: 1.5px solid #D0DDE8; border-radius: 7px;
font-size: 13.5px; background: white; color: var(--dark);
}
.svp-close {
border: none; background: #F1F4F7; color: #777; font-size: 16px;
width: 32px; height: 32px; border-radius: 8px; cursor: pointer; line-height: 1;
}
.svp-close:hover { background: #E5EAEF; color: #333; }
.svp-counter { display: flex; flex-wrap: wrap; gap: 12px; padding: 14px 26px; background: #FAFBFC; border-bottom: 1px solid #EEF2F5; }
.svp-cnt-hint { flex-basis: 100%; font-size: 11.5px; font-weight: bold; color: #888; text-transform: uppercase; letter-spacing: .03em; margin-bottom: -2px; }
.svp-cnt {
flex: 1; background: white; border: 1px solid #E5EBEF; border-radius: 10px;
padding: 10px 14px; display: flex; flex-direction: column; gap: 3px;
}
.svp-cnt-over { border-color: #F3B0B0; background: #FEF2F2; }
.svp-cnt-label { font-size: 11.5px; font-weight: bold; color: #888; text-transform: uppercase; letter-spacing: .03em; }
.svp-cnt-zahlen { font-size: 14px; color: #555; }
.svp-cnt-zahlen b { color: var(--dark); font-size: 16px; }
.svp-cnt-frei { color: #2563EB; font-weight: bold; }
.svp-cnt-over .svp-cnt-frei { color: #DC2626; }
.svp-body { flex: 1; overflow-y: auto; padding: 18px 26px; }
.svp-empty { text-align: center; color: #999; padding: 48px 20px; font-size: 14.5px; line-height: 1.7; }
.svp-einheit { border: 1.5px solid #E2E8EC; border-radius: 12px; margin-bottom: 16px; overflow: hidden; }
.svp-e-kopf { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #F4F7F9; }
.svp-e-nr {
min-width: 26px; height: 26px; border-radius: 7px; background: #2563EB; color: white;
font-weight: bold; font-size: 14px; display: flex; align-items: center; justify-content: center; padding: 0 6px;
}
.svp-e-titel {
flex: 1; border: none; background: transparent; font-size: 16px; font-weight: bold;
color: var(--dark); padding: 4px 2px;
}
.svp-e-titel:focus { outline: none; background: white; border-radius: 6px; padding: 4px 8px; }
.svp-seqs { padding: 8px 14px 14px; }
.svp-seq { border-left: 3px solid #DCE3E8; margin: 8px 0 8px 10px; padding-left: 12px; }
.svp-seq-kopf { display: flex; align-items: center; gap: 9px; padding: 4px 0; }
.svp-seq-nr { font-size: 12.5px; font-weight: bold; color: #2563EB; min-width: 34px; }
.svp-seq-titel {
flex: 1; border: none; background: transparent; font-size: 14.5px; font-weight: 600;
color: #333; padding: 3px 2px;
}
.svp-seq-titel:focus { outline: none; background: #F4F7F9; border-radius: 6px; padding: 3px 8px; }
.svp-stunden { padding: 2px 0 4px 6px; }
.svp-std { display: flex; align-items: center; gap: 8px; padding: 3px 0; border-radius: 6px; }
.svp-drag { cursor: grab; color: #B8C4CE; font-size: 12px; user-select: none; letter-spacing: -2px; padding: 0 1px; }
.svp-std.svp-dragging { opacity: 0.45; }
.svp-std.svp-drop-ziel { box-shadow: inset 0 2px 0 var(--cyan, #00B0F0); }
.svp-std-nr { font-size: 11.5px; color: #999; min-width: 42px; }
.svp-std-titel {
flex: 1; border: 1px solid transparent; background: transparent; font-size: 13.5px;
color: #444; padding: 4px 6px; border-radius: 6px;
}
.svp-std-titel:hover { border-color: #E5EBEF; }
.svp-std-titel:focus { outline: none; border-color: var(--cyan); background: white; }
.svp-std.art-profil .svp-std-nr { color: #EA580C; }
.svp-std.art-puffer .svp-std-titel { color: #999; font-style: italic; }
.svp-std.art-schulaufgabe .svp-std-nr { color: #DC2626; }
.svp-std.art-stegreif .svp-std-nr { color: #D97706; }
.svp-art-btn {
min-width: 24px; height: 24px; padding: 0 4px; border-radius: 6px; border: 1.5px solid #D0DDE8;
background: white; font-size: 11px; font-weight: bold; cursor: pointer; color: #2563EB; line-height: 1;
}
.svp-std.art-profil .svp-art-btn { color: #EA580C; border-color: #F6C9A8; background: #FFF6EF; }
.svp-std.art-puffer .svp-art-btn { color: #888; border-color: #DDD; background: #F6F6F6; }
.svp-std.art-schulaufgabe .svp-art-btn { color: #DC2626; border-color: #F3C9C9; background: #FEF2F2; }
.svp-std.art-stegreif .svp-art-btn { color: #D97706; border-color: #F6D9A8; background: #FFFBEB; }
/* Termin-Zuteil-Modus (mobil: leerer Kalender-Slot → SVP → Stunde wählen) */
.svp-ziel-banner {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
background: #EFF6FF; border: 1px solid #BFDBFE; border-radius: 10px;
padding: 10px 12px; margin-bottom: 12px; font-size: 13px; color: #1E40AF;
}
.svp-ziel-banner b { color: #1E3A8A; }
.svp-ziel-cancel {
margin-left: auto; background: #fff; border: 1px solid #BFDBFE; color: #1D4ED8;
border-radius: 7px; padding: 6px 12px; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
/* Zuteil-Modus: Modal auf das Nötige reduzieren (nur Kopf + Stundenliste) */
.svp-zuteil .svp-counter,
.svp-zuteil .svp-foot,
.svp-zuteil #btn-svp-ki,
.svp-zuteil #btn-svp-import,
.svp-zuteil .svp-add-seq,
.svp-zuteil .svp-add-row,
.svp-zuteil .svp-del,
.svp-zuteil .svp-select { display: none !important; }
.svp-zuteil .svp-e-titel, .svp-zuteil .svp-seq-titel { pointer-events: none; background: transparent; border-color: transparent; }
/* Zuteil-Modus: ganze Stunde als tippbare Zeile */
.svp-std-pick {
display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
padding: 11px 12px; margin: 4px 0; border: 1px solid #BFDBFE; border-radius: 10px;
background: #F8FBFF; cursor: pointer; font: inherit;
}
.svp-std-pick:hover, .svp-std-pick:active { background: #EFF6FF; border-color: var(--cyan, #2563EB); }
.svp-std-pick .svp-std-nr { flex-shrink: 0; }
.svp-pick-titel { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--dark, #1F2937); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svp-pick-go { flex-shrink: 0; font-size: 12.5px; font-weight: 800; color: var(--cyan, #2563EB); white-space: nowrap; }
.svp-del {
border: 1px solid #F3C9C9; background: #FEF2F2; color: #DC2626; cursor: pointer;
font-size: 14px; line-height: 1; padding: 4px 8px; border-radius: 7px; flex-shrink: 0;
transition: background 0.12s, color 0.12s;
}
.svp-del:hover { background: #DC2626; color: #fff; border-color: #DC2626; }
/* Stunden-Reihe: Löschen-Kreuz etwas kompakter, aber klar sichtbar */
.svp-std .svp-del { font-size: 13px; padding: 3px 7px; }
.svp-add-row { display: flex; gap: 8px; margin: 5px 0 2px 42px; }
.svp-add-std {
border: 1px dashed #C8D4DC; background: transparent; color: #2563EB; cursor: pointer;
font-size: 12px; padding: 4px 10px; border-radius: 6px;
}
.svp-add-std:hover { background: #EFF6FF; border-color: #93C5FD; }
.svp-add-std.profil { color: #EA580C; }
.svp-add-std.profil:hover { background: #FFF6EF; border-color: #F6C9A8; }
.svp-add-seq {
border: 1px dashed #C8D4DC; background: transparent; color: #555; cursor: pointer;
font-size: 12.5px; padding: 6px 12px; border-radius: 7px; margin-top: 6px;
}
.svp-add-seq:hover { background: #F4F7F9; border-color: #A8BAC6; }
.svp-foot {
display: flex; align-items: center; gap: 10px; padding: 14px 26px;
border-top: 1px solid #EEF2F5; background: #FAFBFC;
}
/* ═══ Unterrichtsskizzen-Editor ═══ */
.sk-kopf { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.sk-kopf label { display: block; font-size: 12px; font-weight: bold; color: #555; margin-bottom: 4px; }
.sk-kopf input, .sk-kopf select { width: 100%; padding: 8px 10px; border: 1.5px solid #D0D8E0; border-radius: 7px; font-size: 14px; box-sizing: border-box; font-family: Arial, sans-serif; background: #fff; }
.sk-kopf input:focus, .sk-kopf select:focus { outline: none; border-color: var(--cyan); }
.sk-h2 { font-size: 15px; font-weight: bold; color: var(--dark); margin: 22px 0 12px; padding-bottom: 6px; border-bottom: 2px solid #EEF2F5; }
.sk-ziel-bereich { margin-bottom: 14px; }
.sk-ziel-kopf { font-size: 13px; font-weight: bold; color: #475569; margin-bottom: 6px; }
.sk-ziel-list { display: flex; flex-direction: column; gap: 5px; }
.sk-ziel-item { display: flex; align-items: center; gap: 7px; }
.sk-ziel-bullet { color: var(--cyan); font-weight: bold; }
.sk-ziel-input { flex: 1; padding: 6px 9px; border: 1px solid #E0E8EE; border-radius: 6px; font-size: 13.5px; font-family: Arial, sans-serif; }
.sk-ziel-input:focus { outline: none; border-color: var(--cyan); }
.sk-ziel-del { border: none; background: transparent; color: #BBB; cursor: pointer; font-size: 13px; padding: 2px 5px; border-radius: 5px; }
.sk-ziel-del:hover { background: #FEECEC; color: #DC2626; }
.sk-ziel-add { margin-top: 6px; border: 1px dashed #C8D4DC; background: transparent; color: #2563EB; cursor: pointer; font-size: 12.5px; padding: 4px 11px; border-radius: 6px; }
.sk-ziel-add:hover { background: #EFF6FF; border-color: #93C5FD; }
/* ─── Unterrichtsvorbereitung: Detail-View (Phasen-Karten) ─────────────────── */
#vb-verlauf { display: flex; flex-direction: column; }
.vb-phase-card {
border: 1.5px solid #E1EEFA; border-left: 5px solid var(--cyan, #00B0F0);
border-radius: 12px; background: linear-gradient(180deg, #F7FBFF, #FEFFFF);
padding: 12px 14px; cursor: pointer;
box-shadow: 0 1px 3px rgba(15,40,70,0.06);
transition: box-shadow 0.14s, border-color 0.14s, transform 0.14s;
}
.vb-phase-card:hover {
border-color: #A9D3F2; box-shadow: 0 6px 18px rgba(15,40,70,0.11);
transform: translateY(-1px);
}
.vb-pc-head { display: flex; align-items: center; gap: 10px; }
/* Phasen per Drag&Drop umsortieren: Griff + Zieh-Feedback */
.vb-pc-grip { flex: none; color: #A9BCcf; font-size: 15px; cursor: grab; line-height: 1; padding: 0 1px; }
.vb-phase-card:hover .vb-pc-grip { color: var(--cyan); }
.vb-phase-card--dragging { opacity: .35; }
.vb-phase-row.vb-drop-before .vb-phase-card { box-shadow: 0 -3px 0 var(--cyan), 0 1px 3px rgba(15,40,70,0.06); }
.vb-phase-row.vb-drop-after .vb-phase-card { box-shadow: 0 3px 0 var(--cyan), 0 1px 3px rgba(15,40,70,0.06); }
.vb-pc-nr {
width: 24px; height: 24px; border-radius: 50%; background: var(--cyan, #00B0F0);
color: #fff; font-size: 12.5px; font-weight: bold; display: inline-flex;
align-items: center; justify-content: center; flex: none;
}
.vb-pc-titel { font-size: 15px; font-weight: bold; color: #1E3A5F; min-width: 0; }
.vb-pc-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; align-items: center; }
.vb-chip {
display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px;
border-radius: 999px; background: #EFF4F9; color: #47617D; white-space: nowrap;
}
.vb-chip--ab { background: #DDF4FC; color: #0369A1; }
.vb-chip--ha { background: #FEF3C7; color: #92400E; }
.vb-chip--ra { background: #FCE7F3; color: #9D174D; }
.vb-chip--frei { background: #F1F5F9; color: #64748B; font-weight: 600; }
.vb-std-badge {
display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 9px;
border-radius: 999px; background: #E0E7FF; color: #3730A3;
}
.vb-pc-del { border: none; background: transparent; color: #C0392B; cursor: pointer; font-size: 14px; opacity: 0.45; padding: 4px 7px; border-radius: 6px; flex: none; }
.vb-pc-del:hover { opacity: 1; background: #FEECEC; }
.vb-pc-inhalt { margin: 8px 0 0 34px; font-size: 13px; color: #3D4C5E; line-height: 1.5; }
.vb-pc-leer { color: #9DB3CC; font-style: italic; }
/* Zeitstrahl AM Verlauf: pro Phase eine Zeile [Zeit-Segment | Karte].
Die Zeilen-Mindesthöhe wächst mit der Dauer (min-height inline, 7px/min),
Segment und Karte strecken sich gemeinsam → Strahl und Phasen ALIGNEN. */
.vb-phase-row { display: flex; gap: 12px; align-items: stretch; }
.vb-phase-row .vb-phase-card { flex: 1; min-width: 0; }
.vb-zs-seg {
width: 54px; flex: none; border-radius: 12px; cursor: pointer;
background: #BAE3F7; color: #0B5E86;
display: flex; flex-direction: column; align-items: stretch; justify-content: center;
padding: 4px; gap: 2px; font-size: 12px; font-weight: 800; user-select: none;
transition: filter 0.12s, box-shadow 0.12s;
}
.vb-zs-seg:hover { filter: brightness(0.96); box-shadow: 0 2px 8px rgba(11,94,134,0.18); }
.vb-zs-seg .vb-zs-label { line-height: 1.1; text-align: center; padding: 2px 0; }
/* ▲▼-Pfeile: große, gut treffbare Flächen mit Hover-Pille */
.vb-zs-arrow {
border: none; background: rgba(255,255,255,0.35); color: inherit; cursor: pointer;
font-size: 11px; line-height: 1; width: 100%; min-height: 20px; padding: 0;
border-radius: 8px; display: flex; align-items: center; justify-content: center;
opacity: 0.8; transition: opacity 0.1s, background 0.1s, transform 0.08s;
}
.vb-zs-arrow:hover { opacity: 1; background: rgba(255,255,255,0.85); }
.vb-zs-arrow:active { transform: scale(0.9); }
.vb-zs-arrow:disabled { opacity: 0.25; background: transparent; cursor: default; }
.vb-zs-seg--null { background: #F1F5F9; color: #94A3B8; border: 1.5px dashed #CBD5E1; }
.vb-rest-row { align-items: center; }
.vb-zs-rest {
width: 46px; flex: none; align-self: stretch; min-height: 26px; border-radius: 10px;
border: 1.5px dashed #CBD5E1; color: #94A3B8;
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 800;
}
.vb-zs-rest--over { border-color: #FCA5A5; color: #DC2626; }
.vb-rest-hint { font-size: 12.5px; color: #94A3B8; }
.vb-rest-hint--over { color: #B91C1C; font-weight: 600; }
/* Kopf „Stundenverlauf" + Σ-Chip: der Unterstrich gehört an den ganzen Kopf
(nicht an die h2), damit der Σ-Chip vertikal MITTIG zur Überschrift sitzt. */
.vb-verlauf-kopf {
display: flex; align-items: center; gap: 12px; margin-top: 22px;
padding-bottom: 6px; border-bottom: 2px solid #EEF2F5;
}
.vb-verlauf-kopf .sk-h2 { margin: 0; padding: 0; border: none; }
.vb-sum {
font-size: 12.5px; font-weight: 800; padding: 3px 11px; border-radius: 999px;
background: #E8F7EE; color: #157347;
}
.vb-sum--over { background: #FEE2E2; color: #B91C1C; }
.vb-ziele { margin: 4px 0 6px; border: 1px solid #E5ECF3; border-radius: 10px; padding: 10px 14px; background: #FBFDFF; }
.vb-ziele > summary { cursor: pointer; font-size: 14px; font-weight: 700; color: #1E3A5F; user-select: none; }
.vb-ziele[open] > summary { margin-bottom: 10px; }
/* Phasen-Popup (bem-Basis, Modifier) */
.bem-overlay.vbp { z-index: 10030; }
.vbp-box { width: min(860px, 100%); }
/* RA läuft komplett inline in der Material-Spalte → mehr Platz rechts */
.vbp-box--wide { width: min(1100px, 100%); }
@media (min-width: 680px) {
.vbp-box--wide .bem-cols { grid-template-columns: 2fr 3fr; }
}
.vbp-meta-row { display: flex; gap: 12px; }
.vbp-inhalt { resize: none; min-height: 110px; }
.vbp-mat-hint { margin: 0; font-size: 12.5px; color: #8A9CB5; font-style: italic; }
.vbp-mat-waise { color: #B45309; font-style: normal; font-weight: 600; }
.vbp-mat-kopf { display: flex; align-items: center; gap: 8px; }
.vbp-mat-btn {
display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
width: 100%; padding: 10px 13px; border-radius: 10px; cursor: pointer;
border: 1.5px solid #E3EAF2; background: #fff; color: #1F2D3D;
font-size: 13.5px; font-weight: 700; font-family: Arial, sans-serif;
text-align: left; transition: border-color .12s, background .12s;
}
.vbp-mat-btn:hover { border-color: #BFD9F5; background: #F6FAFF; }
.vbp-mat-btn--ha:hover { border-color: #FCD34D; background: #FFFBEB; }
.vbp-mat-btn--ra:hover { border-color: #F9A8D4; background: #FDF2F8; }
.vbp-mat-btn--los {
font-weight: 600; font-size: 12px; color: #94A3B8; border-style: dashed;
padding: 7px 13px;
}
.vbp-mat-btn--los:hover { color: #DC2626; border-color: #FECACA; background: #FEF2F2; }
.vbp-mat-btn--ab:hover { border-color: #7DD3FC; background: #F0F9FF; }
.vbp-mat-sub { font-size: 11.5px; font-weight: 600; color: #8A9CB5; }
/* RA-Aufgaben-Karten im Popup etwas kompakter */
.vbp-ra-liste .ra-aufgabe-card { padding: 10px 12px; }
/* AB-Auswahl im Phasen-Popup (vorhandenes AB verknüpfen) */
.vbp-ab-wahl { display: flex; flex-direction: column; gap: 6px; }
.vbp-ab-wahl-row { display: flex; gap: 8px; }
.vbp-ab-wahl-row .vbp-ab-select { flex: 1; min-width: 0; background: #fff; }
.vbp-ab-wahl-row .vbp-ab-link-btn { width: auto; flex: none; }
/* Block-Kurzliste der gekoppelten AB-Phase */
.vbp-ab-blocks { display: flex; flex-direction: column; gap: 4px; }
.vbp-ab-block {
font-size: 12.5px; color: #3D4C5E; background: #fff; border: 1px solid #E3EAF2;
border-radius: 8px; padding: 6px 10px; white-space: nowrap; overflow: hidden;
text-overflow: ellipsis;
}
/* Material-Sektionen: AB / HA / RA klar voneinander abgegrenzt (getönte Karten
mit farbigem Kopf, Farben = die jeweiligen Chip-Farben) */
.vbp-mat-sektion {
border-radius: 12px; padding: 10px 12px 12px; margin-bottom: 10px;
display: flex; flex-direction: column; gap: 8px;
background: #fff; border: 1.5px solid #E3EAF2;
}
.vbp-mat-sektion .vbp-mat-btn { margin-top: 0; }
.vbp-mat-sektion-titel {
font-size: 11.5px; font-weight: 800; letter-spacing: 0.04em;
text-transform: uppercase; margin-bottom: 1px;
}
.vbp-mat-sektion--ab { border-color: #BCE4F6; background: #F4FBFE; }
.vbp-mat-sektion--ab .vbp-mat-sektion-titel { color: #0369A1; }
.vbp-mat-sektion--ha { border-color: #FBE7A9; background: #FFFBEE; }
.vbp-mat-sektion--ha .vbp-mat-sektion-titel { color: #92400E; }
.vbp-mat-sektion--ra { border-color: #F7CBE0; background: #FEF5FA; }
.vbp-mat-sektion--ra .vbp-mat-sektion-titel { color: #9D174D; }
/* ── 🪄 Komplett-Stunde-Wizard (editor-komplettstunde.js) ─────────────────── */
.bem-overlay.kw { z-index: 10030; }
.kw-box { width: min(680px, 100%); position: relative; }
/* Blockierendes Lade-Overlay während „Stunde bauen" — fängt alle Klicks ab
(sonst bricht ein Klick auf einen anderen Vorschlag die Generierung ab). */
.kw-lade {
position: absolute; inset: 0; z-index: 5;
background: rgba(255,255,255,.94);
display: flex; align-items: center; justify-content: center;
}
.kw-std {
font-size: 12.5px; font-weight: 700; color: #3730A3; background: #E0E7FF;
border-radius: 999px; padding: 4px 12px; display: inline-block; margin-bottom: 12px;
}
.kw-hint { font-size: 13px; color: #64748B; line-height: 1.5; margin: 0 0 14px; }
.kw-quellen { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.kw-thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.kw-thumb { position: relative; display: inline-block; }
.kw-thumb img {
width: 76px; height: 76px; object-fit: cover; border-radius: 10px;
border: 1.5px solid #E3EAF2; display: block;
}
.kw-thumb-x {
border: none; background: #1E293B; color: #fff; cursor: pointer;
width: 20px; height: 20px; border-radius: 50%; font-size: 10px; line-height: 1;
position: absolute; top: -6px; right: -6px;
}
.kw-ab-chip .kw-thumb-x { position: static; margin-left: 8px; vertical-align: middle; }
.kw-oder {
display: flex; align-items: center; gap: 12px; margin: 16px 0;
color: #94A3B8; font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em;
}
.kw-oder::before, .kw-oder::after { content: ''; flex: 1; border-top: 1.5px solid #E8EDF2; }
.kw-ab-chip {
margin-top: 10px; font-size: 13px; color: #157347; background: #EAF4EC;
border: 1.5px solid #9CC9A8; border-radius: 10px; padding: 9px 12px;
}
.kw-urheber {
margin: 9px 0 0; font-size: 11.5px; line-height: 1.45; color: #B26A00;
background: #FFF7E6; border: 1px solid #FFE0A3; border-radius: 8px; padding: 7px 10px;
}
.kw-vs-kopf { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; }
.kw-vs-kopf #kw-neue-btn { margin-left: auto; }
/* §9.18: [hidden] verliert gegen das eigene display der .modal-btn */
.kw-vs-kopf .modal-btn[hidden] { display: none; }
.kw-vorschlaege { display: flex; flex-direction: column; gap: 8px; }
.kw-karte {
text-align: left; font: inherit; font-size: 13.5px; line-height: 1.5; color: #26333F;
background: #F7FAFD; border: 1.5px solid #E3EAF2; border-radius: 12px;
padding: 10px 14px; cursor: pointer; transition: border-color .12s, background .12s;
}
.kw-karte:hover { border-color: #B9C9DC; }
.kw-karte--an { background: #F3EDFC; border-color: #A78BFA; box-shadow: 0 0 0 1px #A78BFA inset; }
/* Roter-Faden-Schritt: RA/HA an-/abwählen — als Toggle-Chips */
.kw-erzeugen { margin: 18px 0 4px; padding: 14px 16px; background: #F8FAFC;
border: 1px solid #EDF1F6; border-radius: 14px; }
.kw-erzeugen-lbl { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase;
letter-spacing: .5px; color: #94A3B8; margin-bottom: 10px; }
.kw-erzeugen-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.kw-cb { display: inline-flex; align-items: center; gap: 10px; padding: 10px 15px;
border: 1.5px solid #E1E8F0; border-radius: 12px; background: #fff;
font-size: 14px; font-weight: 700; color: #48586A; cursor: pointer; user-select: none;
transition: border-color .12s, background .12s, box-shadow .12s, color .12s; }
.kw-cb:hover { border-color: #C4D4E4; box-shadow: 0 2px 8px rgba(31,78,121,.07); }
.kw-cb-ic { font-size: 16px; line-height: 1; }
.kw-cb input { appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin: 0;
border: 1.6px solid #C0CEDD; border-radius: 6px; background: #fff; cursor: pointer; position: relative;
transition: background .12s, border-color .12s; }
.kw-cb input:checked::after { content: ''; position: absolute; left: 6px; top: 2px;
width: 5px; height: 10px; border: solid #fff; border-width: 0 2.4px 2.4px 0; transform: rotate(45deg); }
/* Aktiv: HA = bernstein, RA = rosé (passt zu den HA-/RA-Chips der App) */
.kw-cb--ha input:checked { background: #F0B400; border-color: #F0B400; }
.kw-cb--ra input:checked { background: #EC4899; border-color: #EC4899; }
.kw-cb--ha:has(input:checked) { background: #FFFBEB; border-color: #FCD34D; color: #8A6207; }
.kw-cb--ra:has(input:checked) { background: #FDF2F8; border-color: #F9A8D4; color: #9D174D; }
.kw-erzeugen-hint { font-size: 11.5px; color: #94A3B8; margin: 10px 0 0; line-height: 1.45; }
.kw-foot {
display: flex; justify-content: space-between; gap: 10px; margin-top: 18px;
padding-top: 14px; border-top: 1.5px solid #EEF2F5;
}
/* Abschnitt-Toggle-Liste (AB gekoppelt): bestehende Abschnitte an-/abwählen */
.vbp-ab-neu { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.vbp-abschnitt-liste { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.vbp-abschnitt-row {
display: flex; align-items: stretch; width: 100%;
background: #fff; border: 1px solid #E3EAF2; border-radius: 10px; overflow: hidden;
transition: border-color .12s, background .12s;
}
.vbp-abschnitt-row:hover { border-color: #B9C9DC; }
.vbp-abschnitt-row--an { background: #EAF4EC; border-color: #9CC9A8; }
/* Abschnitt liegt schon in einer anderen Phase → ausgegraut (klickbar bleibt er,
damit man ihn hierher „stehlen" kann). */
.vbp-abschnitt-row--fremd { opacity: .5; background: #F4F6F9; }
.vbp-abschnitt-row--fremd:hover { opacity: .85; }
.vbp-abschnitt-toggle {
flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 9px; text-align: left;
background: transparent; border: none; padding: 8px 11px; cursor: pointer; font: inherit;
}
.vbp-abschnitt-check { font-size: 16px; line-height: 1.2; color: #3E8C55; flex: none; }
.vbp-abschnitt-lbl { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.vbp-abschnitt-lbl b { font-size: 13px; color: #26333F; }
.vbp-abschnitt-lbl .vbp-mat-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* „Vorschau"-Knopf rechts in der Abschnitt-Zeile */
.vbp-abschnitt-prev {
flex: none; border: none; border-left: 1px solid #E3EAF2; background: #F7FAFF;
color: #3F72A8; font: 600 11.5px inherit; padding: 0 11px; cursor: pointer; white-space: nowrap;
transition: background .12s, color .12s;
}
.vbp-abschnitt-prev:hover { background: #E9F2FD; color: #1F4E79; }
/* ── Abschnitt-Vorschau-Popup (Item 4) ─────────────────────────────────────── */
.vb-absprev-overlay {
position: fixed; inset: 0; z-index: 10036; background: rgba(15,23,42,.55);
display: flex; align-items: center; justify-content: center; padding: 20px;
}
.vb-absprev-box {
background: #fff; width: min(760px, 100%); height: min(86vh, 900px);
border-radius: 16px; display: flex; flex-direction: column; overflow: hidden;
box-shadow: 0 24px 70px rgba(0,0,0,.34);
}
.vb-absprev-head { display: flex; align-items: center; justify-content: space-between; gap: 8px;
padding: 13px 16px; border-bottom: 1px solid var(--border); }
.vb-absprev-tit { font-size: 15px; font-weight: 700; color: var(--dark); }
.vb-absprev-x { width: 34px; height: 34px; border: none; background: var(--surface-2);
border-radius: 50%; font-size: 15px; cursor: pointer; flex: none; }
.vb-absprev-frame { flex: 1; width: 100%; border: none; background: #fff; }
.vb-absprev-foot { padding: 12px 16px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; }
.vb-absprev-edit { border: none; background: var(--cyan); color: #fff; border-radius: 9px;
padding: 10px 20px; font-weight: 700; cursor: pointer; }
.vb-absprev-edit:hover { background: var(--cyan-dark); }
/* ── vb-mode: AB-/HA-Editor als großes Popup ÜBER der Vorbereitung ──────────
Der Vollbild-Editor bekommt Rand + Radius + Schatten; der riesige Spread-
Schatten dunkelt die durchscheinende Vorbereitung ab (kein Extra-Element).
„Alles an einem Platz": Zurück führt in die Vorbereitung zurück. */
#editor-overlay.vb-mode {
inset: 24px;
border-radius: 16px;
box-shadow: 0 24px 80px rgba(15, 23, 42, .4);
}
/* Der 24px-Ring gehört sonst NICHT zum Overlay → Klicks gingen auf die Topbar
darunter (Klassenwechsel bei offenem Editor!). Das Pseudo-Element füllt den
ganzen Viewport hinter dem Editor, dunkelt ab und fängt die Ring-Klicks
(target = Overlay → Klick in den Ring wirkt wie „← Zur Vorbereitung"). */
#editor-overlay.vb-mode::before {
content: '';
position: fixed; inset: 0; z-index: -1;
background: rgba(15, 23, 42, .45);
}
/* Einfüge-Zone zwischen Blöcken: Hover → „+" (Punkt 8) */
.sk-inserter { height: 12px; display: flex; align-items: center; justify-content: center; position: relative; }
.sk-insert-btn {
opacity: 0; transition: opacity 0.12s; width: 26px; height: 22px; border-radius: 11px;
border: none; background: var(--cyan, #00B0F0); color: #fff; font-size: 16px; font-weight: bold;
line-height: 1; cursor: pointer; box-shadow: 0 1px 4px rgba(0,120,200,0.35);
}
.sk-inserter:hover .sk-insert-btn { opacity: 1; }
/* Read-only Nummern-Badge in der AB-Liste (Nummer kommt aus der Stunde) */
.inhalt-nummer-badge {
display: inline-block; background: #E0F2FE; color: #0369A1; font-weight: bold;
font-size: 0.82em; padding: 1px 7px; border-radius: 6px; margin-right: 2px; vertical-align: middle;
}
.sk-hint { font-size: 12.5px; color: #5B7088; background: #EFF6FF; border: 1px solid #DBEAFE; border-radius: 8px; padding: 8px 12px; margin: 0 0 12px; line-height: 1.5; }
/* ─── Einstellungen-View ─────────────────────────────────────── */
.einst-page { max-width: 680px; padding-top: 32px; }
.einst-section { background: #fff; border: 1px solid #E2EAF4; border-radius: 12px; padding: 28px 32px; margin-bottom: 20px; }
.einst-section-title { font-size: 18px; font-weight: 700; color: #1a3a5c; margin: 0 0 8px; }
.einst-sub-title { font-size: 15px; font-weight: 700; color: #1a3a5c; margin: 0 0 6px; }
.einst-hint { font-size: 13px; color: #6B7CA3; margin: 0 0 20px; line-height: 1.5; }
.einst-field-label { font-size: 13px; font-weight: 600; color: #374860; margin-bottom: 10px; }
.einst-font-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; }
.einst-font-card {
border: 2px solid #D0DFF0; border-radius: 10px; background: #F8FBFF;
padding: 14px 10px 10px; cursor: pointer; text-align: center;
display: flex; flex-direction: column; align-items: center; gap: 6px;
transition: border-color 0.15s, background 0.15s;
}
.einst-font-card:hover { border-color: #00B0F0; background: #EFF8FF; }
.einst-font-card.active { border-color: #00B0F0; background: #E0F5FE; }
.einst-font-preview { font-size: 20px; font-weight: bold; color: #1a3a5c; line-height: 1.2; }
.einst-font-sub { font-size: 11px; color: #7090B0; }
.einst-color-group { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.einst-color-row { display: flex; align-items: center; gap: 10px; }
.einst-color-label { font-size: 13px; color: #374860; width: 180px; flex-shrink: 0; }
.einst-color-preview { width: 28px; height: 28px; border-radius: 6px; border: 1px solid #ccc; flex-shrink: 0; }
.einst-color-input { width: 44px; height: 32px; border: 1px solid #ccc; border-radius: 6px; cursor: pointer; padding: 2px; background: none; }
.einst-color-hint { font-size: 12px; color: #8A9CC0; }
.einst-actions { margin-top: 8px; }
/* ── AB-Editor: Phasen-Rail (geschweifte Klammer rechts) ─────────────────── */
.ab-canvas-row { position: relative; }
/* Die Klammer-Rail sitzt KOMPLETT rechts neben dem weißen AB (im grauen Gutter),
damit sie nie über den Inhalt läuft. Das weiße Blatt endet bei row-100% + 44px
(Page-Padding); +20px Abstand → die Klammer beginnt sauber daneben. */
.ab-phasen-rail {
position: absolute; top: 0; left: calc(100% + 64px); width: 150px;
font-family: Arial, sans-serif; pointer-events: none;
}
.ab-phasen-rail[hidden] { display: none; }
.abph-card {
position: absolute; left: 0; width: 150px; display: flex; align-items: center; gap: 7px;
pointer-events: auto;
}
.abph-brace { flex-shrink: 0; display: block; }
.abph-pill {
flex: 1; min-width: 0; text-align: left; background: white; border: 1px solid #E2E9F1;
border-radius: 10px; box-shadow: 0 1px 5px rgba(31,78,121,0.07); padding: 7px 10px; cursor: pointer;
display: flex; flex-direction: column; gap: 2px; font-family: inherit; transition: all .12s;
}
.abph-pill:hover { border-color: var(--cyan); box-shadow: 0 3px 12px rgba(0,176,240,0.16); transform: translateY(-1px); }
.abph-pill-nr { font-size: 12.5px; font-weight: 800; color: var(--dark); }
.abph-pill-meta { font-size: 10.5px; font-weight: 600; color: #8295A8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Phasengrenze: hoch/runter ziehen verschiebt, welche Blöcke zur Phase gehören. */
.abph-grenze {
position: absolute; left: 0; width: 150px; height: 12px; cursor: ns-resize;
pointer-events: auto; display: flex; align-items: center; justify-content: center; z-index: 2;
}
.abph-grenze-grip {
width: 30px; height: 4px; border-radius: 3px; background: #C2D2E2; transition: all .12s;
}
.abph-grenze:hover .abph-grenze-grip, .abph-grenze.aktiv .abph-grenze-grip {
background: var(--cyan); width: 40px; height: 5px;
}
body.abph-dragging { cursor: ns-resize; user-select: none; }
.abph-add {
position: absolute; left: 18px; width: 132px; padding: 8px; border: 1.5px dashed #BBD0E2;
border-radius: 9px; background: rgba(255,255,255,0.85); color: var(--cyan-dark); font-size: 12px;
font-weight: 700; cursor: pointer; font-family: inherit; transition: all .12s; pointer-events: auto;
}
.abph-add:hover { background: var(--cyan-light); border-color: var(--cyan); border-style: solid; }
/* ── Phasen-Popup-Editor ─────────────────────────────────────────────── */
.abph-modal-overlay {
position: fixed; inset: 0; background: rgba(20,34,51,0.42); z-index: 10000;
display: flex; align-items: center; justify-content: center; padding: 24px;
font-family: Arial, sans-serif; animation: abphFade .14s ease;
}
@keyframes abphFade { from { opacity: 0; } to { opacity: 1; } }
.abph-modal {
background: white; border-radius: 18px; width: min(620px, 100%); max-height: 90vh; overflow: auto;
box-shadow: 0 24px 70px rgba(0,0,0,0.32); display: flex; flex-direction: column;
animation: abphPop .16s cubic-bezier(.34,1.4,.5,1);
}
@keyframes abphPop { from { transform: translateY(10px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.abph-modal-hdr {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 20px 26px; border-bottom: 1px solid #EDF1F6;
}
.abph-modal-title { font-size: 19px; font-weight: 800; color: var(--dark); }
.abph-modal-x {
border: none; background: #F0F4F9; color: #6B7E93; width: 34px; height: 34px; border-radius: 9px;
font-size: 15px; cursor: pointer; transition: all .1s;
}
.abph-modal-x:hover { background: #FEE2E2; color: #DC2626; }
.abph-modal-body { padding: 24px 26px; display: flex; flex-direction: column; gap: 18px; }
.abph-mrow { display: flex; gap: 16px; }
.abph-fld { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 0; }
.abph-fld-zeit { max-width: 160px; }
.abph-fld > label { font-size: 13px; font-weight: 700; color: #5B7088; }
.abph-fld-lblrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.abph-fld-lblrow label { font-size: 13px; font-weight: 700; color: #5B7088; }
.abph-fld select, .abph-fld input, .abph-fld textarea {
border: 1.5px solid #DDE6EF; border-radius: 9px; padding: 10px 12px; font-size: 14px;
font-family: inherit; color: var(--dark); background: #FAFCFE; width: 100%; box-sizing: border-box;
}
.abph-fld select:focus, .abph-fld input:focus, .abph-fld textarea:focus {
outline: none; border-color: var(--cyan); background: white;
}
.abph-fld textarea { resize: vertical; min-height: 60px; line-height: 1.5; }
.abph-m-loesung { border-color: #CDE9D4 !important; background: #F5FCF7 !important; color: #2E5E40; }
.abph-schnelle-wrap {
display: flex; flex-direction: column; gap: 14px; padding: 14px; border-radius: 10px;
background: #FFFDF5; border: 1px solid #F2E7C8;
}
.abph-schnelle-wrap[hidden] { display: none; }
.abph-m-ki {
border: 1.5px solid #C7B8F0; background: #F4F0FF; color: #6A4BB5; font-size: 11.5px; font-weight: 700;
border-radius: 7px; padding: 4px 10px; cursor: pointer; font-family: inherit; transition: all .12s;
}
.abph-m-ki:hover:not(:disabled) { background: #6A4BB5; color: white; border-color: #6A4BB5; }
.abph-m-ki:disabled { opacity: .6; cursor: default; }
.abph-modal-ftr {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 14px 20px; border-top: 1px solid #EDF1F6;
}
.abph-m-del {
border: none; background: #FBEDED; color: #C0392B; font-size: 12.5px; font-weight: 700;
border-radius: 9px; padding: 9px 14px; cursor: pointer; font-family: inherit; transition: all .1s;
}
.abph-m-del:hover { background: #F5C6C0; }
.abph-m-done {
border: none; background: var(--cyan); color: white; font-size: 13px; font-weight: 800;
border-radius: 9px; padding: 9px 22px; cursor: pointer; font-family: inherit; transition: all .1s;
}
.abph-m-done:hover { background: var(--cyan-dark); }
/* Schwebender „+ Baustein"-FAB nur auf dem Handy — auf Desktop (kein Styling in
der Media-Query) hing er sonst als roher Button im Fluss am Seitenende. */
.mob-add-block { display: none; }
/* ════════════════════════════════════════════════════════════════════════════
📱 MOBIL (Handy) — alles ≤560px. Desktop ≥560px bleibt unverändert.
════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
/* ── Foundation ──────────────────────────────────────────────────────────── */
:root { --topbar-h: 92px; } /* 2 Zeilen: 44px Kopf + 48px Chips */
/* vb-mode: auf dem Handy wieder Vollbild (Rand/Radius kosten nur Platz) */
#editor-overlay.vb-mode { inset: 0; border-radius: 0; box-shadow: none; }
.page, .page-inner { padding: var(--sp-lg) var(--sp-lg) 48px; }
.page-inner-wide { padding: var(--sp-lg) var(--sp-md) 48px; }
/* iOS-Auto-Zoom verhindern: alle Eingaben ≥16px */
input[type="text"], input[type="password"], input[type="number"], input[type="email"],
input[type="search"], input[type="date"], input[type="tel"], select, textarea { font-size: 16px !important; }
/* ── Topbar zweizeilig ───────────────────────────────────────────────────── */
#topbar { height: var(--topbar-h); flex-wrap: wrap; align-content: flex-start; padding: 0 var(--sp-md); gap: var(--sp-sm); }
.tb-brand { order: 1; font-size: var(--text-base); height: 44px; }
.tb-status { order: 2; margin-left: auto; height: 44px; }
.tb-status #tb-status-text { display: none; }
.tb-actions { order: 3; gap: var(--sp-xs); height: 44px; }
.tb-actions .tb-btn { min-width: var(--tap); min-height: var(--tap); padding: 0 10px; font-size: 16px; }
.tb-btn .tb-btn-label { display: none; }
.tb-classnav { order: 4; flex-basis: 100%; width: 100%; height: 48px; padding: 0 var(--sp-md);
margin: 0 calc(-1 * var(--sp-md)); border-top: 1px solid rgba(255,255,255,0.12); -webkit-overflow-scrolling: touch; }
.nav-fach-badge { font-size: 10px; padding: 3px 8px; }
.nav-stufe-label { font-size: 10px; }
/* ── Hub: 1-spaltige Kacheln + SCORM-Karte gestapelt ─────────────────────── */
.choice-grid { grid-template-columns: 1fr; gap: var(--sp-md); }
.choice-card { padding: var(--sp-xl) var(--sp-lg); }
.card-icon { font-size: 32px; }
.hub-scorm { padding: 14px; }
.hub-scorm-top { flex-wrap: wrap; }
.hub-scorm-top h3 { font-size: 14px; }
.hub-scorm-link { flex-wrap: wrap; }
.hub-scorm-link .lbl { flex-basis: 100%; }
.hub-scorm-link code { flex-basis: 100%; white-space: normal; word-break: break-all; overflow: visible; font-size: 12px; line-height: 1.4; }
.hub-scorm-copy { flex: 1 1 auto; min-height: 40px; }
.hub-scorm-actions { flex-direction: column; gap: 8px; }
.hub-scorm-actions .btn-primary, .hub-scorm-actions .btn-sec, .hub-scorm-actions .btn-danger {
width: 100%; justify-content: center; margin-left: 0; min-height: 44px; }
/* ── Modals: volle Breite, Felder + Aktionen gestapelt ───────────────────── */
.modal-overlay { padding: 12px; align-items: flex-start; }
.modal-box, .modal-box.wide { padding: 20px 16px; max-width: 100%; max-height: 92vh; margin-top: 8px; }
.modal-field-row { flex-direction: column; gap: 12px; }
.modal-field-row > .modal-field { width: 100%; flex: none; }
.modal-actions, .modal-footer { flex-direction: column-reverse; align-items: stretch; gap: 8px; }
.modal-actions .modal-btn, .modal-footer .modal-btn, .modal-footer button { width: 100%; }
.modal-choice-grid { grid-template-columns: 1fr; }
.svp-kopf { flex-direction: column; gap: 10px; padding: 16px; }
.svp-kopf-rechts { flex-wrap: wrap; width: 100%; gap: 8px; }
.svp-kopf-rechts .svp-select { flex: 1 1 100%; font-size: 16px; }
.svp-kopf-rechts .modal-btn { flex: 1 1 auto; }
.svp-kopf-rechts .svp-close { position: absolute; top: 12px; right: 12px; }
.svp-cnt { flex-basis: 100%; }
.svp-body { padding: 14px 16px; }
/* Fußzeile stapeln, damit nichts rechts abgeschnitten wird */
.svp-foot { flex-wrap: wrap; gap: 8px; padding: 12px 16px; }
.svp-foot > .modal-btn { flex: 1 1 auto; }
.svp-foot > span { display: none; }
/* Kopf braucht relative Position für den absolut gesetzten Schließen-Button */
.svp-kopf { position: relative; }
.svp-close, .lp-modal-close, .abph-modal-x, .sv-topbar-close { min-width: 40px; min-height: 40px; }
.abph-mrow { flex-direction: column; gap: 12px; }
/* ── Editoren: RA / Skizze / Einstellungen ───────────────────────────────── */
.ra-meta-row { flex-direction: column; gap: 10px; align-items: stretch; }
.ra-aufgabe-head, .ra-afb-weight-row { flex-wrap: wrap; }
.ra-afb-weight-item { flex: 1 1 calc(50% - 5px); }
.ra-aufgabe-card { padding: 14px; }
.sk-kopf > * { flex: 1 1 100%; }
.sk-block-meta { flex-direction: column; gap: 8px; }
.einst-section { padding: 18px 16px; }
.einst-font-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
.einst-color-row { flex-wrap: wrap; }
.einst-color-label { width: 100%; }
.einst-color-input { height: 40px; width: 52px; }
.su-panel-add-row { flex-direction: column; }
/* ── Schülersicht-Overlay ────────────────────────────────────────────────── */
.sv-topbar { padding: 10px 14px; gap: 8px; flex-wrap: wrap; }
.sv-topbar-label { display: none; }
.sv-topbar-title { font-size: 14px; }
.sv-topbar-close, #sv-back-btn { min-height: 40px; padding: 8px 14px; }
/* ── Kalender: Sidebar unter den Kalender, Toolbar entzerrt, Agenda-Liste ── */
#view-org { padding: 12px 12px 40px; }
/* stretch statt flex-start (Desktop-Erbe): sonst schrumpft der Kalender auf
Inhaltsbreite und die Monatsansicht hängt schmal am linken Rand. */
#org-body { flex-direction: column; align-items: stretch; }
#org-seq-panel { width: 100%; order: 2; position: static; max-height: none; }
#org-kalender { order: 1; }
#org-toolbar { gap: 8px; }
.org-tb-sep { display: none; }
.org-tb-group { flex-wrap: wrap; }
.org-zeitraum-label { flex-basis: 100%; font-size: 15px; }
/* Tag/Woche/Monat-Umschalter mobil sichtbar + kompakt */
.org-modus-switch { display: inline-flex; order: -1; }
.org-modus-btn { padding: 7px 12px; font-size: 13px; }
.org-fach-row { gap: 6px; }
.org-fach-badge { font-size: 11.5px; padding: 4px 10px; }
.org-chips { gap: 6px; margin-top: 8px; }
.org-chip { padding: 6px 12px; min-height: 36px; }
/* ── Agenda (Woche): Tageskarten ── */
.org-agenda { display: flex; flex-direction: column; gap: 10px; }
.org-agenda-tag { background: #fff; border: 1px solid #E0E8EE; border-radius: 14px; padding: 12px 14px; }
.org-agenda-tag.heute { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(37,99,235,.15); }
.org-agenda-tag.frei { background: #F8FAFC; }
.org-agenda-kopf { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.org-agenda-kopf .wd { color: var(--cyan-dark); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; }
.org-agenda-kopf .dat { font-size: 14px; font-weight: 700; color: var(--dark); }
.org-agenda-body { display: flex; flex-direction: column; gap: 6px; }
.org-agenda-leer { color: #94A3B8; font-size: 13px; font-style: italic; }
.org-agenda .org-slot { width: 100%; box-sizing: border-box; min-height: 46px; padding: 9px 12px; border-radius: 9px; margin: 0; }
.org-agenda .org-slot-thema { font-size: 14px; white-space: normal; }
.org-agenda .org-slot-nr { font-size: 13px; }
/* Leere Slots als dezente „+ Klasse"-Chips zum Verplanen */
.org-agenda-leerzeile { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.org-add-slot {
border: 1px dashed var(--chip-color, #CBD5E1); background: transparent;
color: var(--chip-color, #64748B); border-radius: 8px; padding: 6px 11px;
font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.org-add-slot:active { background: rgba(0,0,0,.04); }
/* ── Tagesansicht (Tag) ── */
.org-tagm { background: #fff; border: 1px solid #E0E8EE; border-radius: 16px; overflow: hidden; }
.org-tagm-kopf { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; background: linear-gradient(135deg, #EFF6FF, #F8FBFF); border-bottom: 1px solid #E0E8EE; }
.org-tagm-kopf.heute { background: linear-gradient(135deg, #DBEAFE, #EFF6FF); }
.org-tagm-wd { font-size: 18px; font-weight: 800; color: var(--dark); }
.org-tagm-dat { font-size: 13px; color: #64748B; }
.org-tagm-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; }
.org-tagm-body .org-slot { width: 100%; box-sizing: border-box; min-height: 54px; padding: 12px 14px; border-radius: 10px; margin: 0; }
.org-tagm-body .org-slot-thema { font-size: 15px; white-space: normal; }
/* ── Monatsansicht (Monat): Punkt-Raster ── */
.org-mm-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.org-mm-wd { text-align: center; font-size: 11px; font-weight: 800; color: #94A3B8; text-transform: uppercase; padding: 2px 0 4px; }
.org-mm-tag {
aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
padding: 5px 2px 3px; border: 1px solid #E8EEF4; border-radius: 10px; background: #fff;
cursor: pointer; font: inherit;
}
.org-mm-tag.fremd { opacity: .32; }
.org-mm-tag.frei { background: #F1F5F9; }
.org-mm-tag.heute { border-color: var(--cyan); background: #EFF6FF; }
.org-mm-nr { font-size: 13px; font-weight: 700; color: var(--dark); }
.org-mm-tag.frei .org-mm-nr { color: #94A3B8; font-weight: 600; }
.org-mm-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; max-width: 100%; }
.org-mm-dot { width: 5px; height: 5px; border-radius: 50%; }
.org-banner { font-size: 13px; flex-wrap: wrap; }
/* ── AB-Block-Editor: Vollbild-Canvas, Palette/Props weg, Pro-Block-Popup ── */
.editor-body { flex-direction: column; }
.editor-palette { display: none; }
.editor-canvas-area { padding-right: 0; }
.editor-canvas-tab-panel { max-width: none; }
.editor-ab-meta { flex-wrap: wrap; }
#ab-phasen-rail { display: none; }
/* ── Block-Karte als eigenständige Karte mit sauberer Werkzeugleiste ── */
.canvas-block {
background: #fff; border: 1px solid var(--border); border-radius: 12px;
padding: 5px 10px 7px; margin-bottom: 8px;
box-shadow: 0 1px 3px rgba(15,23,42,.05);
}
.canvas-block.selected { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
/* Werkzeugleiste: eine rechtsbündige Zeile über dem Block-Inhalt */
.cb-tools {
display: flex !important; align-items: center; gap: 8px;
margin: 0 0 6px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
/* Alle Buttons zurück in den Fluss (Desktop-Hover-Positionierung aufheben) */
.cb-tools > button {
display: inline-flex !important; position: static !important; transform: none !important;
opacity: 1 !important; align-items: center; justify-content: center;
height: 34px; border: none; box-shadow: none; cursor: pointer;
}
/* Primär: „✏️ Bearbeiten" als volle Pille links */
.cb-edit {
margin-right: auto; gap: 7px; padding: 0 18px; border-radius: 12px;
background: var(--cyan); color: #fff; font-size: 14px; font-weight: 700;
}
.cb-edit .cb-edit-label { font-size: 14px; }
/* Sekundär: einzelne, weiche Rund-Buttons (kein „abgehacktes" Segment mehr) */
.cb-up, .cb-down, .cb-del {
width: 40px; border-radius: 12px; background: var(--surface-2);
color: var(--ink-2); font-size: 15px;
}
.cb-del { color: #DC2626; background: #FEF2F2; }
.cb-up:active, .cb-down:active { background: #E7EDF3; }
.cb-del:active { background: #FEE2E2; }
/* ── Phasen-Überschrift über den Blöcken (statt Klammer-Rail) ── */
.abph-mobile {
display: flex; align-items: center; gap: 8px; width: 100%;
margin: 4px 0 10px; padding: 10px 14px; text-align: left; cursor: pointer;
background: linear-gradient(135deg, #EFF6FF, #F8FBFF);
border: 1px solid #BFDBFE; border-left: 4px solid var(--cyan); border-radius: 10px;
}
.abph-mobile .abphm-nr { font-size: 13px; font-weight: 800; color: var(--cyan-dark); white-space: nowrap; }
.abph-mobile .abphm-meta { flex: 1; font-size: 12px; color: #64748B; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abph-mobile .abphm-edit { font-size: 15px; opacity: .7; }
/* „+ Neue Phase" am Ende der Blockliste */
.abph-mobile-add {
display: block; width: 100%; margin: 6px 0 4px; padding: 12px;
border: 1.5px dashed var(--cyan); border-radius: 12px; background: #F8FBFF;
color: var(--cyan-dark); font-size: 14px; font-weight: 700; cursor: pointer;
}
.abph-mobile-add:active { background: var(--cyan-light); }
/* Inline-Felder mobil nicht editierbar (Bearbeitung läuft über den Popup) */
.ab-page-canvas .ie-field { pointer-events: none; }
/* schwebender „+ Baustein"-Button */
.mob-add-block { display: flex; align-items: center; justify-content: center;
position: fixed; right: 16px; bottom: 16px; z-index: 9000;
width: 56px; height: 56px; border-radius: 50%; border: none; background: var(--cyan); color: #fff;
font-size: 26px; line-height: 1; box-shadow: 0 6px 18px rgba(0,0,0,.25); cursor: pointer; }
/* Undo-Toast über dem „+"-FAB (statt ihn zu überdecken), volle Breite */
.ab-undo-toast { left: 12px; right: 12px; bottom: 84px; transform: none; max-width: none; }
/* Block-Editor-Popup: mobil als Bottom-Sheet (Basis-Styles im Hauptscope) */
.bem-overlay { align-items: flex-end; padding: 0 10px 10px; }
.bem-box { max-width: 560px; border-radius: 18px; box-shadow: 0 -8px 30px rgba(15,23,42,.3); }
}
/* ════════════════════════════════════════════════════════════════════════════
📱 MOBIL — Nachbesserung: KEIN horizontaler Scroll, Listen/Editor-Kopf stapeln
════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
/* Nur vertikal scrollen — nirgendwo nach rechts */
html, body { overflow-x: hidden; max-width: 100%; }
#editor-overlay, .view, .page, .page-inner, .page-inner-wide { max-width: 100vw; overflow-x: hidden; }
/* ── Editor-Kopfleiste (Zurück / Titel-Felder / Vorschau·Speichern) stapeln ── */
.editor-topbar { height: auto; flex-wrap: wrap; padding: 8px 12px; gap: 8px; }
.editor-back-btn { order: 1; }
.editor-topbar-actions { order: 2; margin-left: auto; display: flex; gap: 6px; }
.editor-ab-meta { order: 3; flex-basis: 100%; flex: 1 1 100%; flex-wrap: wrap; gap: 8px; }
.editor-title-input { flex: 1 1 100%; min-width: 0; }
.editor-date-input, #editor-nummer, #editor-datum, #editor-klasse { flex: 1 1 auto; width: auto !important; min-width: 0; font-size: 16px; }
.editor-save-hint { display: none; }
.editor-canvas-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* ── Sektions-Toolbar (AB/HA/RA/Übungen teilen sie) ── */
.section-toolbar { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px; }
.section-toolbar-btns { flex-wrap: wrap; }
.section-toolbar-btns > * { flex: 1 1 auto; }
/* ── AB-Liste: Sidebar (Lernbereiche) als horizontaler Reiter-Streifen, Karten stapeln ── */
.ab-layout { flex-direction: column; gap: 12px; }
.ab-sidebar { width: 100%; position: static; display: flex; overflow-x: auto; gap: 4px; border-radius: 10px; -webkit-overflow-scrolling: touch; }
.ab-sidebar-title { display: none; }
.ab-sidebar-item { white-space: nowrap; border-left: none; border-bottom: 3px solid transparent; }
.ab-sidebar-item.active { border-left: none; border-bottom-color: var(--cyan); }
.ab-search-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ab-search-input { flex: 1 1 100%; font-size: 16px; }
.ab-sort-btn { flex: 1 1 auto; }
/* AB-Karte: Icon+Inhalt oben, Aktionen als volle Zeile drunter */
.ab-card { flex-wrap: wrap; padding: 24px 14px 14px; }
.ab-card-actions { flex-direction: row; flex-wrap: wrap; flex-basis: 100%; flex-shrink: 1; }
.ab-card-actions .card-btn { flex: 1 1 auto; justify-content: center; }
.ab-card-bottom { flex-wrap: wrap; }
/* Kalender-Toolbar: Filter-Chips + „Stoffverteilungsplan" nicht überlaufen */
#org-toolbar { flex-wrap: wrap; }
#org-toolbar .org-tb-group { flex-wrap: wrap; width: 100%; }
.org-chips { flex-wrap: wrap; }
}
/* ════════════════════════════════════════════════════════════════════════════
📱 MOBIL — Feinschliff nach Handy-Test (AB-Topbar/Tabs, Blöcke, Agenda, Karten)
════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
/* Topbar: etwas mehr Luft für die Klassen-Chip-Zeile (hängt sonst am Rand) */
:root { --topbar-h: 100px; }
.tb-classnav { height: 52px; align-items: center; }
.nav-home, .nav-klass, .nav-neu { align-self: center; }
/* ── AB-Editor: schlanke Kopfleiste (Meta-Felder liegen in „⚙️ Einstellungen") ── */
.editor-topbar { flex-wrap: nowrap; }
.editor-topbar .editor-ab-meta { display: none; } /* nur falls noch in der Topbar */
.editor-autosave { display: none; } /* zu eng auf dem Handy */
.editor-back-btn { flex-shrink: 0; }
.editor-topbar-actions { flex-shrink: 0; margin-left: auto; }
/* Reiter: nur Icons, damit alle 5 nebeneinander passen */
.editor-canvas-tabs { overflow-x: visible; }
.ect-tab { flex: 1 1 0; min-width: 0; padding: 10px 0; font-size: 19px; justify-content: center; }
.ect-tab .ect-label { display: none; }
/* Meta-Felder in der Einstellungen-Tab: volle Breite, gestapelt */
.editor-ab-meta.meta-in-einst { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px;
padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.editor-ab-meta.meta-in-einst input {
width: 100% !important; font-size: 16px; color: var(--ink) !important;
background: #fff !important; border: 1.5px solid var(--border) !important; border-radius: 8px; padding: 10px 12px;
}
.editor-ab-meta.meta-in-einst input::placeholder { color: var(--ink-3); }
/* Block-Karten-Styling: s. oben (.canvas-block als eigenständige Karte +
.cb-tools-Werkzeugleiste). Hier nur noch der Innen-Abstand der Vorschau. */
.canvas-block .cbt-preview { padding: 2px 0; }
/* ── #6 Editor-Kopfzeilen mit rechtsbündigem Aktions-Button (Skizze/RA/…) ── */
.section-header { flex-wrap: wrap; gap: 8px; }
.section-header h1 { flex: 1 1 100%; font-size: var(--text-xl); }
.section-header .btn-new { flex: 1 1 auto; margin-left: 0 !important; }
/* ── #8 Sichtbar-Badge nicht mehr über den Titel legen ── */
.ab-card { padding: 14px; }
.btn-vis-corner { position: static; align-self: flex-start; margin-bottom: 6px; }
.ab-card .ab-content { flex: 1 1 100%; }
.ab-icon { display: none; } /* spart Platz, Titel voll */
/* ── #2 Agenda: Tag + Stunden immer volle Breite ── */
.org-agenda .org-slot { width: 100%; box-sizing: border-box; }
.org-agenda-tag { width: 100%; box-sizing: border-box; }
}
/* ════════════════════════════════════════════════════════════════════════════
📱 MOBIL — Feinschliff 2: Listen (HA/RA/Skizze), kein Inline-Editing, Canvas,
Block-Skalierung, kompaktere Popups
════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
/* #3/#4/#7 — HA/RA/Skizze-Listenkarten (alle .ha-card): stapeln, nichts abschneiden */
.ha-card { flex-wrap: wrap; align-items: flex-start; padding: 30px 14px 14px; }
.ha-card .ha-title { flex: 1 1 100%; }
.ha-card .ha-afb-row { flex: 1 1 100%; flex-wrap: wrap; }
.ha-card .ha-faellig { white-space: normal; }
.ha-card-actions { flex: 1 1 100%; flex-wrap: wrap; margin-top: 10px; }
.ha-card-actions .card-btn { flex: 1 1 auto; justify-content: center; }
/* #5 — kein Inline-Editing im Editor-Canvas (Bearbeitung nur über Popups/Formulare) */
.ab-page-canvas [contenteditable], #blocks-container [contenteditable] {
pointer-events: none; -webkit-user-modify: read-only; user-modify: read-only;
}
/* #9 — Bearbeitungs-Canvas zentriert, beidseitig etwas Rand */
.editor-canvas-area { padding-left: 12px; padding-right: 12px; box-sizing: border-box; }
.ab-page-canvas { margin-left: auto; margin-right: auto; width: 100%; max-width: 100%; box-sizing: border-box; }
/* #7 — Blöcke gleichmäßig kleiner (Original-Seitenverhältnis), weniger
langgezogen: Zoom runter + straffere vertikale Abstände in der Vorschau */
.canvas-block .cbt-preview { zoom: 0.76; }
.canvas-block .cbt-preview > *:first-child { margin-top: 0; }
.canvas-block .cbt-preview > *:last-child { margin-bottom: 0; }
.canvas-block .cbt-preview p { margin: 4px 0; }
/* Phasen-Fußzeile im Block-Popup — NUR mobil (Basis: display:none;
Desktop hat die Klammer-Rail zum Phasen-Teilen) */
.bem-phase {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 12px 16px; border-top: 1px solid var(--border); background: var(--surface);
}
.bem-phase-info { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.bem-phase-btn {
margin-left: auto; border: 1.5px solid var(--cyan); background: #fff; color: var(--cyan-dark);
border-radius: 9px; padding: 8px 14px; min-height: var(--tap); font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.bem-phase-btn:active { background: var(--cyan-light); }
/* #6 — Popups etwas kompakter, an die Fenstergröße angepasst */
.bem-box { max-height: 82vh; }
.bem-body { padding: 12px 14px; }
.modal-box, .modal-box.wide { max-height: 88vh; }
}
/* ════════════════════════════════════════════════════════════════════════════
📱 MOBIL — Stoffübersicht: Listen-Editor statt Drag-Concept-Map
════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
/* Concept-Map-Werkzeuge, die die Karte brauchen, mobil ausblenden */
#btn-su-verbinden, #btn-su-ki { display: none; }
/* Desktop-Intro („ziehe Pfeile…") mobil weg — eigener Listen-Hinweis ersetzt ihn */
#su-hint { display: none; }
/* Karte → freie Höhe für die Liste, kein Rahmen/feste Höhe */
#su-map { height: auto !important; min-height: 0; border: none; }
.su-layout { display: block; }
.su-liste { display: flex; flex-direction: column; gap: 12px; }
.su-liste-hinweis {
margin: 0 0 2px; font-size: 12.5px; line-height: 1.45; color: #64748B;
background: #F1F5F9; border-radius: 10px; padding: 10px 12px;
}
.su-liste-kap { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: #fff; }
.su-lk-head {
display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
padding: 12px 14px; border: none; background: #fff; cursor: pointer; font: inherit;
}
.su-lk-nr {
flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; color: #fff;
display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800;
}
.su-lk-titel { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; color: var(--dark); overflow: hidden; text-overflow: ellipsis; }
.su-lk-edit { opacity: .5; font-size: 15px; }
.su-lk-inhalte { display: flex; flex-direction: column; gap: 1px; background: var(--border); border-top: 1px solid var(--border); }
.su-li-item {
display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
padding: 10px 14px 10px 16px; border: none; background: #fff; cursor: pointer; font: inherit;
}
.su-li-item.su-li-static { cursor: default; opacity: .85; }
.su-li-nr { flex-shrink: 0; font-size: 12px; font-weight: 800; color: var(--cyan-dark); min-width: 34px; }
.su-li-icon { flex-shrink: 0; }
.su-li-titel { flex: 1; min-width: 0; font-size: 13.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-li-leer { padding: 10px 16px; font-size: 12.5px; color: #94A3B8; font-style: italic; background: #fff; }
.su-liste-unzug { border: 1px dashed var(--border); border-radius: 14px; padding: 10px 12px; }
.su-liste-unzug-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: #94A3B8; margin-bottom: 4px; }
.su-liste-unzug-hint { font-size: 12px; color: #94A3B8; margin-bottom: 8px; line-height: 1.4; }
/* Bearbeiten-Panel als Bottom-Sheet über der Liste */
.su-panel {
position: fixed !important; left: 0; right: 0; bottom: 0; top: auto; z-index: 10040;
width: 100% !important; max-height: 86vh !important; border-radius: 18px 18px 0 0;
border: none; box-shadow: 0 -10px 30px rgba(15,23,42,.3); padding: 16px 16px 24px;
}
.su-panel-titel-input, #su-inhalt-nummer { font-size: 16px; }
}
/* ── Drag-&-Drop-Block: Autoren-Editor (Modal) ─────────────────────────────── */
.ddx-ed-overlay { position: fixed; inset: 0; z-index: 10070; background: rgba(15,23,42,.55); display: flex; align-items: center; justify-content: center; padding: 20px; }
.ddx-ed-box { background: #fff; width: min(680px, 100%); max-height: 88vh; border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 70px rgba(0,0,0,.32); }
.ddx-ed-head { display: flex; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.ddx-ed-title { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; border: 1.5px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.ddx-ed-x { width: 38px; height: 38px; border: none; background: var(--surface-2); border-radius: 50%; font-size: 16px; cursor: pointer; flex-shrink: 0; }
.ddx-ed-tabs { display: flex; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.ddx-ed-tab { flex: 1; padding: 9px 4px; border: 1.5px solid var(--border); background: #fff; border-radius: 9px; font-weight: 700; cursor: pointer; font-size: 13px; }
.ddx-ed-tab.on { background: var(--cyan); color: #fff; border-color: var(--cyan); }
.ddx-ed-scroll { padding: 14px 16px; overflow-y: auto; }
.ddx-ed-sec { margin-bottom: 16px; }
.ddx-ed-sec-t { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: #94A3B8; margin-bottom: 8px; }
.ddx-ed-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ddx-ed-row label { font-size: 13px; color: var(--ink-2); }
.ddx-ed-inp { flex: 1; min-width: 0; border: 1.5px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 14px; }
.ddx-ed-sel { border: 1.5px solid var(--border); border-radius: 8px; padding: 8px; font-size: 13px; background: #fff; max-width: 46%; }
.ddx-ed-num { width: 64px; border: 1.5px solid var(--border); border-radius: 8px; padding: 8px; font-size: 14px; }
.ddx-ed-del { border: 1px solid #FECACA; background: #FEF2F2; color: #DC2626; border-radius: 8px; padding: 6px 10px; cursor: pointer; flex-shrink: 0; }
.ddx-ed-add { border: 1.5px dashed var(--cyan); background: #F0F7FF; color: var(--cyan-dark); border-radius: 9px; padding: 8px 12px; font-weight: 700; cursor: pointer; margin-top: 4px; }
.ddx-ed-hint { font-size: 12px; color: #64748B; margin: 4px 0 8px; line-height: 1.4; }
/* Tabellen-Editor sieht aus wie die fertige AB-Tabelle: Raster mit dünnen Linien
(Gap über border-farbenem Grund), feste Zellen fett + zentriert, Lücken als
getönte Ablege-Felder — plus je Zelle unten die „Lücke"-Auswahl (einziger
Unterschied zur AB-Ansicht). Spiegelt .ddx-tabelle/.ddx-zelle aus blocks.js. */
.ddx-ed-grid { display: grid; gap: 3px; background: var(--border); border: 1px solid var(--border);
border-radius: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ddx-ed-cell { background: #fff; border: none; border-radius: 0; padding: 6px 6px 4px;
display: flex; flex-direction: column; gap: 5px; min-height: 58px; }
.ddx-ed-cell .ddx-ed-inp, .ddx-ed-cell .ddx-ed-rich {
flex: 1; min-width: 0; border: none; border-radius: 6px; padding: 6px 6px; font-size: 12.5px;
font-weight: 600; color: var(--ink); text-align: center; background: transparent;
/* Text bricht bei Bedarf um (auch lange Wörter) statt horizontal zu scrollen →
passt immer in die Zelle. Überschreibt das nowrap/overflow-x der Basis. */
white-space: normal; overflow: visible; overflow-wrap: anywhere; line-height: 1.28; }
.ddx-ed-cell .ddx-ed-rich:focus { box-shadow: 0 0 0 2px rgba(0,176,240,.18); }
/* Lücke = nur durch die getönte Box-Farbe erkennbar (kein gestrichelter Rand). */
.ddx-ed-cell.luecke { background: #EAF4FF; }
.ddx-ed-cell.luecke .ddx-ed-rich { background: transparent; border: none;
color: var(--cyan-dark); font-weight: 700; }
.ddx-ed-lk { font-size: 10.5px; color: var(--ink-2); display: flex; align-items: center;
justify-content: center; gap: 4px; border-top: 1px dashed #E3EAF2; padding-top: 4px; }
/* Rich-Text-Felder im ddx-Editor (contenteditable + data-rich → Formatier-Toolbar
für hoch-/tiefgestellt). Einzeilig, Platzhalter via data-ph. */
.ddx-ed-rich { background: #fff; min-height: 1.4em; line-height: 1.4; white-space: nowrap; overflow-x: auto; overflow-y: hidden; cursor: text; }
.ddx-ed-rich:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(0,176,240,.14); }
.ddx-ed-rich:empty::before { content: attr(data-ph); color: #A9B7C6; font-style: italic; pointer-events: none; }
.ddx-ed-rich-off { background: #EEF2F6; color: #9AA7B4; cursor: not-allowed; }
/* Kategorie-Box mit direkt zugeordneten Begriffen darunter */
.ddx-ed-kat { border: 1px solid var(--border); border-radius: 10px; padding: 8px; margin-bottom: 8px; background: #FBFDFF; }
.ddx-ed-kathead .ddx-ed-inp { font-weight: 700; }
.ddx-ed-katchips { margin: 6px 0 0 14px; padding-left: 8px; border-left: 2px solid #E3EAF2; display: flex; flex-direction: column; gap: 4px; }
.ddx-ed-chiprow { gap: 5px; }
.ddx-ed-add-sm { padding: 5px 10px; font-size: 12px; align-self: flex-start; margin-top: 2px; }
.ddx-ed-znr-inl { position: static; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--cyan); color: #fff; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.ddx-ed-lk { font-size: 11px; color: var(--ink-2); display: flex; align-items: center; gap: 4px; }
.ddx-ed-bild { position: relative; display: inline-block; max-width: 100%; touch-action: none; user-select: none; margin-top: 6px; }
.ddx-ed-bild img { max-width: 100%; display: block; border-radius: 8px; -webkit-user-drag: none; }
.ddx-ed-zone { position: absolute; box-sizing: border-box; border: 2px solid var(--cyan); background: rgba(37,99,235,.15); border-radius: 4px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.ddx-ed-ztop { display: flex; align-items: flex-start; justify-content: space-between; }
.ddx-ed-znr { font-size: 11px; font-weight: 800; color: var(--cyan-dark); background: #fff; padding: 0 4px; border-radius: 0 0 4px 0; }
.ddx-ed-zdel { border: none; background: #DC2626; color: #fff; width: 18px; height: 18px; border-radius: 0 0 0 4px; font-size: 11px; cursor: pointer; padding: 0; line-height: 1; flex-shrink: 0; }
/* Bild-Feld: Verschieben-Griff, in-Box-Lösung (auto-skaliert), Größen-Griff */
.ddx-ed-zmove { border: none; background: var(--cyan); color: #fff; width: 18px; height: 18px; border-radius: 0 4px 4px 0; font-size: 11px; cursor: grab; padding: 0; line-height: 1; flex-shrink: 0; touch-action: none; }
.ddx-ed-zmove:active { cursor: grabbing; }
.ddx-ed-zcolor { border: none; background: #fff; width: 18px; height: 18px; border-radius: 4px; font-size: 11px; cursor: pointer; padding: 0; line-height: 1; flex-shrink: 0; }
.ddx-ed-zcolor:hover { background: #EEF4FF; }
/* Schwebende Farbpalette am 🎨-Knopf (über allem, nicht von der Box geclippt) */
.ddx-ed-fillpop { position: fixed; z-index: 10060; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 7px; display: flex; flex-wrap: wrap; gap: 5px; max-width: 200px; box-shadow: 0 8px 26px rgba(15,23,42,.28); }
.ddx-ed-fillpop .ddx-ed-fill { width: 20px; height: 20px; }
.ddx-ed-zone .ddx-ed-zsol { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; align-items: center; justify-content: center; text-align: center; white-space: normal; word-break: break-word; overflow: hidden; padding: 2px 4px; font-weight: 700; color: var(--ink); line-height: 1.05; background: transparent; border: none; box-shadow: none; cursor: text; }
.ddx-ed-zone .ddx-ed-zsol:focus { box-shadow: inset 0 0 0 2px rgba(0,176,240,.4); }
.ddx-ed-zresize { position: absolute; right: 0; bottom: 0; width: 15px; height: 15px; cursor: nwse-resize; background: linear-gradient(135deg, transparent 45%, var(--cyan) 45%); touch-action: none; border: none; padding: 0; }
.ddx-ed-fillrow { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.ddx-ed-fills { display: flex; flex-wrap: wrap; gap: 3px; padding: 3px; justify-content: center; align-content: flex-end; }
.ddx-ed-fill { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid rgba(0,0,0,.3); cursor: pointer; padding: 0; }
.ddx-ed-fill.on { outline: 2px solid var(--cyan); outline-offset: 1px; }
.ddx-ed-fill-trans { background: repeating-linear-gradient(45deg,#fff,#fff 3px,#d0d0d0 3px,#d0d0d0 6px); }
.ddx-ed-ghost { border-style: dashed; }
.ddx-ed-foot { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--border); }
.ddx-ed-kontrolle { flex: 1; font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.ddx-ed-kontrolle select { flex: 1; min-width: 0; border: 1.5px solid var(--border); border-radius: 8px; padding: 8px; font-size: 13px; }
.ddx-ed-done { border: none; background: var(--cyan); color: #fff; border-radius: 9px; padding: 10px 20px; font-weight: 700; cursor: pointer; }
@media (max-width: 560px) {
.ddx-ed-overlay { align-items: flex-end; padding: 0; }
.ddx-ed-box { width: 100%; max-width: 100%; max-height: 92vh; border-radius: 16px 16px 0 0; }
.ddx-ed-title, .ddx-ed-inp, .ddx-ed-sel, .ddx-ed-num, .ddx-ed-kontrolle select { font-size: 16px; }
.ddx-ed-sel { max-width: 100%; }
.ddx-ed-foot { flex-wrap: wrap; }
}
/* Sim-Block: „Teilchenebene erlauben"-Schalter (Lehrer) — Steuerleiste unter der Sim */
.sim-ansicht-row {
display:flex; align-items:flex-start; gap:11px;
padding:11px 14px; margin:0;
background:linear-gradient(180deg,#F1F7FF,#E7F1FC);
border-top:1.5px solid #CFE0F2;
cursor:pointer; user-select:none;
transition:background .12s ease;
}
.sim-ansicht-row:hover { background:linear-gradient(180deg,#E7F1FC,#DBEAFA); }
.sim-ansicht-row input[type="checkbox"] {
appearance:none; -webkit-appearance:none;
flex:0 0 auto; width:20px; height:20px; margin:1px 0 0;
border:1.6px solid #9DBBD6; border-radius:6px; background:#fff;
cursor:pointer; position:relative;
transition:background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.sim-ansicht-row input[type="checkbox"]:hover { border-color:var(--cyan); }
.sim-ansicht-row input[type="checkbox"]:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(0,176,240,.28); }
.sim-ansicht-row input[type="checkbox"]:checked { background:var(--cyan); border-color:var(--cyan); }
.sim-ansicht-row input[type="checkbox"]:checked::after {
content:''; position:absolute; left:6px; top:2px;
width:5px; height:10px; border:solid #fff; border-width:0 2.4px 2.4px 0;
transform:rotate(45deg);
}
.sim-ansicht-txt { display:flex; flex-direction:column; gap:1px; line-height:1.32; }
.sim-ansicht-tit { font-size:13px; font-weight:700; color:#1A3A5C; }
.sim-ansicht-hint { font-size:11.5px; color:#5B7791; }
/* ═══════════════════════════════════════════════════════════════════════════
UNTERRICHT FÜHREN — Live-Cockpit v4 (editor-unterricht.js)
Fokus-Vollbild: .u-cockpit liegt als fixed-Overlay ÜBER dem Portal (die
Topbar bleibt im DOM und wird abgedeckt). KEIN Seiten-Scroll — nur
.u-flow-inhalt / .u-sich-loesung / .u-ab-wrap scrollen intern.
Layout: links 3-Phasen-Spalte (Vorgänger · AKTIV · Nachfolger), rechts die
Bühne (Material-Kacheln bzw. aktiver Flow), fixe Ecken (✕/⬛/Status, ⏱).
z-index 2500: über Topbar/editor-overlay (1001), unter Toast (9999)/bem (10003).
═══════════════════════════════════════════════════════════════════════════ */
.u-inner { padding: 0; max-width: none; }
.u-cockpit {
position: fixed; inset: 0; z-index: 2500;
height: 100vh; overflow: hidden;
display: grid; grid-template-columns: clamp(190px, 24vw, 280px) 1fr;
gap: var(--sp-md); padding: var(--sp-md);
background: linear-gradient(160deg, #F4F8FB, #E8EFF5);
overscroll-behavior: none; touch-action: manipulation;
}
@supports (height: 100dvh) { .u-cockpit { height: 100dvh; } }
/* §9.18: [hidden] darf nie gegen eigene display-Regeln verlieren. */
.u-cockpit [hidden] { display: none !important; }
/* Vollbild-Flow: Phasen-Spalte weg → Flow bekommt die ganze Breite */
.u-cockpit.u-flow-aktiv { grid-template-columns: 1fr; }
/* ── Ecken: Status · ⬛ Schwarz · ✕ Beenden (oben rechts) + ⏱ (unten rechts) ── */
.u-ecke { position: fixed; top: 12px; right: 14px; z-index: 2600; display: flex; align-items: center; gap: 8px; }
.u-status-dot { width: 12px; height: 12px; border-radius: 50%; background: #CBD5E1; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.65); }
.u-status-dot.an { background: #22C55E; }
.u-eck-btn {
width: 42px; height: 42px; border-radius: 12px; border: 1.5px solid #CBD5E1;
background: rgba(255, 255, 255, 0.92); font-size: 15px; cursor: pointer;
}
.u-eck-btn:hover { border-color: var(--cyan); }
.u-eck-btn.aktiv { background: #0F172A; color: #fff; border-color: #0F172A; }
.u-eck-ende { color: #B91C1C; border-color: #FCA5A5; font-weight: 700; }
.u-eck-ende:hover { background: #FEF2F2; border-color: #F87171; }
/* ── Phasen-Spalte: NUR 3 Phasen, aktive groß mittig ── */
.u-spalte { display: grid; grid-template-rows: 1fr auto 1fr auto; gap: var(--sp-sm); min-height: 0; }
.u-phase-slot { min-height: 0; }
.u-phase { border: 1.5px solid #DCE6EE; border-radius: var(--radius-lg); background: var(--surface); min-width: 0; }
.u-phase-neben {
appearance: none; font: inherit; text-align: left; cursor: pointer;
display: flex; align-items: center; gap: 8px; padding: 10px 12px;
opacity: 0.55; filter: grayscale(0.35); overflow: hidden; min-height: 0;
transition: opacity 0.12s ease, border-color 0.12s ease;
}
.u-phase-neben:hover { opacity: 0.9; border-color: var(--cyan); }
.u-phase-vor { align-self: end; }
.u-phase-nach { align-self: start; }
.u-phase-aktiv {
padding: 16px 14px; border-color: var(--cyan);
box-shadow: 0 6px 22px rgba(0, 176, 240, 0.2);
background: linear-gradient(180deg, #F3FBFF, #E9F7FE);
}
.u-phase-kopfzeile { display: flex; align-items: center; gap: 8px; }
.u-phase-nr {
flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: #E2ECF4;
color: var(--navy); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.u-phase-aktiv .u-phase-nr { background: var(--cyan); color: #fff; }
.u-phase-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-phase-aktiv .u-phase-name { font-size: 17px; white-space: normal; }
.u-phase-dauer { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: #92400E; background: #FEF3C7; border-radius: 999px; padding: 2px 8px; }
.u-phase-inhalt { font-size: 12.5px; color: var(--ink-2); margin-top: 7px; line-height: 1.45; }
.u-phase-fuss { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.u-phase-sf { font-size: 11px; color: #0369A1; background: var(--cyan-light); border-radius: 999px; padding: 2px 8px; }
.u-phase-icons { margin-left: auto; font-size: 12px; }
.u-phase-medien { font-size: 11.5px; color: var(--ink-3); margin-top: 6px; }
.u-spalte-fuss { text-align: center; font-size: 12px; color: var(--ink-3); padding: 4px 0 2px; }
/* ── Bühne ── */
.u-buehne { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.u-waise {
background: #FEF3C7; border: 1px solid #FCD34D; border-radius: var(--radius-md);
padding: 8px 12px; font-size: 12.5px; color: #92400E; margin: 0 150px 8px 0;
}
.u-leer { color: var(--ink-3); font-size: 15px; padding: 28px 10px; text-align: center; margin: auto; max-width: 420px; }
/* Material-Kacheln (Klick projiziert sofort + öffnet den Flow) */
.u-kacheln {
flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 270px));
gap: var(--sp-lg); align-content: center; justify-content: center; padding: 12px;
}
.u-kachel {
appearance: none; font: inherit; position: relative; cursor: pointer;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
min-height: 190px; padding: 26px 18px;
background: var(--surface); border: 2px solid #DCE6EE; border-radius: 22px;
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
transition: transform 0.1s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.u-kachel:hover { border-color: var(--cyan); transform: translateY(-2px); }
.u-kachel:active { transform: scale(0.98); }
.u-kachel.live { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0, 176, 240, 0.25); }
.u-kachel-icon { font-size: 52px; line-height: 1; }
.u-kachel-titel { font-size: 19px; font-weight: 800; color: var(--navy); }
.u-kachel-sub { font-size: 12.5px; color: var(--ink-3); text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.u-kachel-live {
position: absolute; top: 10px; right: 12px; font-size: 11px; font-weight: 700;
color: #0369A1; background: var(--cyan-light); border-radius: 999px; padding: 3px 9px;
}
/* ── Flow-Rahmen (RA-Wizard, AB, …) ── */
.u-flow { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.u-flow-kopf { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; flex-wrap: wrap; margin-right: 150px; }
.u-flow-zurueck {
appearance: none; font: inherit; background: #fff; border: 1.5px solid #CBD5E1; border-radius: 999px;
padding: 9px 16px; font-size: 13.5px; font-weight: 700; color: var(--ink-2); cursor: pointer; min-height: var(--tap);
}
.u-flow-zurueck:hover { border-color: var(--cyan); }
.u-flow-titel { flex: 1; min-width: 0; font-size: 16px; font-weight: 800; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-flow-schritt { font-size: 13px; font-weight: 700; color: #C2410C; background: #FFF7ED; border-radius: 999px; padding: 4px 12px; }
.u-flow-hint { font-size: 11.5px; color: var(--ink-3); }
.u-flow-inhalt { flex: 1; min-height: 0; overflow: auto; }
/* padding-right: Platz für den fixen Mini-Timer unten rechts (kein Überlappen) */
.u-flow-fuss { display: flex; gap: 10px; padding-top: 10px; justify-content: space-between; padding-right: 78px; }
.u-flow-btn {
appearance: none; font: inherit; background: #fff; border: 1.5px solid #CBD5E1; border-radius: var(--radius-md);
padding: 12px 20px; font-size: 15px; font-weight: 700; color: var(--ink-2); cursor: pointer; min-height: var(--tap);
}
.u-flow-btn:hover { border-color: var(--cyan); }
.u-flow-btn:disabled { opacity: 0.4; cursor: default; }
.u-flow-btn.aktiv { background: var(--cyan-light); border-color: var(--cyan); color: #0369A1; }
.u-flow-btn-primaer { background: var(--cyan); border-color: var(--cyan); color: #fff; }
.u-flow-btn-primaer:hover { background: var(--cyan-dark); border-color: var(--cyan-dark); }
.u-projizieren {
background: var(--cyan); color: #fff; border: none; border-radius: var(--radius-md);
padding: 10px 15px; font-size: 13px; font-weight: 700; cursor: pointer; min-height: var(--tap);
}
.u-projizieren:hover { background: var(--cyan-dark); }
.u-projizieren.live { background: #15803D; }
/* ── Flow a) RA-Wizard ── */
.u-ra-karte { background: var(--surface); border: 1.5px solid #DCE6EE; border-radius: var(--radius-lg); padding: 14px 16px; }
.u-ra-wizard { max-width: 860px; margin: 0 auto; }
.u-ra-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.u-ra-nr { font-size: 12px; font-weight: 700; color: #C2410C; }
.u-ra-badges { font-size: 11.5px; color: var(--ink-3); flex: 1; }
.u-ra-frage { font-size: 19px; line-height: 1.5; color: var(--ink); margin: 10px 0; }
.u-ra-erw-offen {
font-size: 14px; color: var(--ink-2); background: #F0FDF4; border: 1px solid #BBF7D0;
border-radius: var(--radius-md); padding: 10px 14px; margin: 10px 0;
}
.u-ra-erw-titel { font-weight: 700; color: #15803D; margin-bottom: 4px; font-size: 12.5px; }
.u-ra-erw-offen ul { margin: 2px 0 2px 18px; }
.u-ra-pkt { color: var(--ink-3); }
.u-ra-notiz {
width: 100%; border: 1.5px solid #E2C044; background: #FFFBEB; border-radius: var(--radius-md);
padding: 10px 12px; font-size: 15px; font-family: var(--font); resize: vertical; min-height: 90px;
}
.u-ra-notiz:focus { outline: none; border-color: #D97706; }
.u-ra-fertig { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.u-ra-fertig-icon { font-size: 56px; }
.u-ra-fertig-text { font-size: 20px; font-weight: 800; color: var(--navy); }
.u-ra-fertig-status { font-size: 13.5px; color: var(--ink-2); }
.u-ra-fertig-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
/* ── Flow b) AB: Arbeitsauftrag (großer Timer) ── */
.u-aa { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 8px; }
.u-aa-task {
font-size: 19px; line-height: 1.5; color: var(--ink); width: 100%; max-width: 860px;
background: var(--surface); border: 1.5px solid #DCE6EE; border-radius: var(--radius-lg); padding: 16px 20px;
}
.u-aa-meta { display: flex; gap: 10px; }
.u-aa-timer {
display: flex; flex-direction: column; align-items: center; gap: 12px;
background: #0F172A; border-radius: 22px; padding: 22px 30px; color: #fff; margin-top: 6px;
}
.u-aa-timer-zeit { font-size: clamp(56px, 9vw, 96px); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.u-aa-timer-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.u-aa-timer .u-flow-btn { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.25); color: #fff; }
.u-aa-timer .u-flow-btn:hover { border-color: var(--cyan); }
.u-aa-timer .u-flow-btn.aktiv, .u-aa-timer .u-flow-btn-primaer { background: var(--cyan); border-color: var(--cyan); }
.u-timer-rot { color: #F87171 !important; }
/* ── Flow b) AB: Sicherung (Musterlösung links | Ausfüll-iframe rechts) ── */
.u-sich { flex: 1; display: grid; grid-template-columns: minmax(240px, 32%) 1fr; gap: var(--sp-md); min-height: 0; }
.u-sich-loesung {
min-height: 0; overflow: auto; background: #F0FDF4; border: 1.5px solid #BBF7D0;
border-radius: var(--radius-lg); padding: 12px 14px;
}
.u-sich-loesung-titel { font-size: 12px; font-weight: 700; color: #15803D; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
.u-loesung-item { padding: 6px 0; border-top: 1px solid #DCFCE7; }
.u-loesung-item:first-of-type { border-top: none; }
.u-loesung-nr { font-size: 11.5px; font-weight: 700; color: #166534; }
.u-loesung-text { font-size: 13.5px; color: var(--ink); line-height: 1.45; white-space: pre-wrap; }
.u-ab-wrap { border: 1.5px solid #DCE6EE; border-radius: var(--radius-lg); background: #fff; overflow: auto; min-height: 0; }
.u-ab-wrap iframe { border: none; display: block; height: 100%; min-height: 560px; }
/* ── Mini-Timer (fixe Ecke unten rechts, in jeder Phase) ── */
.u-minitimer { position: fixed; bottom: 14px; right: 14px; z-index: 2600; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.u-minitimer-btn {
appearance: none; font: inherit; border: 1.5px solid #CBD5E1; background: rgba(255, 255, 255, 0.92);
border-radius: 999px; padding: 10px 16px; font-size: 16px; font-weight: 700; cursor: pointer;
min-height: var(--tap); font-variant-numeric: tabular-nums;
}
.u-minitimer-btn.laufend { background: #0F172A; color: #fff; border-color: #0F172A; }
.u-minitimer-pop {
background: #fff; border: 1.5px solid #DCE6EE; border-radius: 16px;
box-shadow: 0 14px 40px rgba(15, 23, 42, 0.18); padding: 14px 16px;
display: flex; flex-direction: column; gap: 10px; align-items: center;
}
.u-minitimer-zeit { font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); }
.u-minitimer-btns { display: flex; gap: 6px; }
.u-minitimer-pop .u-flow-btn { padding: 9px 13px; font-size: 13.5px; }
/* ── Tablet-Portrait / schmale Fenster ── */
@media (max-width: 900px) {
/* Hochformat: Phasen-Leiste oben quer, UNTER den Ecken-Knöpfen (kein Overlap) */
.u-cockpit { grid-template-columns: 1fr; grid-template-rows: auto 1fr; padding-top: 64px; }
.u-spalte { grid-template-rows: none; grid-template-columns: 1fr auto 1fr; align-items: stretch; }
.u-phase-vor, .u-phase-nach { align-self: stretch; }
.u-phase-aktiv { padding: 10px 12px; }
.u-phase-inhalt, .u-phase-medien { display: none; }
.u-spalte-fuss { grid-column: 1 / -1; padding: 0; }
.u-sich { grid-template-columns: 1fr; grid-template-rows: minmax(110px, 30%) 1fr; }
.u-flow-kopf { margin-right: 0; }
}
@media (max-width: 560px) {
.u-kacheln { grid-template-columns: 1fr; gap: var(--sp-md); }
.u-kachel { min-height: 120px; padding: 16px; flex-direction: row; justify-content: flex-start; text-align: left; }
.u-kachel-icon { font-size: 36px; }
.u-kachel-sub { text-align: left; }
/* Nachbar-Phasen als kompakte Chips (Nr + Dauer), Name passt nicht */
.u-phase-neben { justify-content: center; padding: 8px 6px; }
.u-phase-neben .u-phase-name { display: none; }
.u-flow-fuss { flex-wrap: wrap; }
.u-aa-timer { padding: 16px 18px; width: 100%; }
.u-waise { margin-right: 0; }
}
/* Stunden-Liste „Unterricht führen" (Hub-Kachel): Beamer-Knopf abgesetzt */
.u-liste-beamer { background: var(--navy); color: #fff; border-color: var(--navy); }
.u-liste-beamer:hover { background: var(--navy-dark); }