📌 Lies zuerst...
* Wir koennen die JSON-Daten nicht refactoren (wuerde alle 63 Englisch-Aufgaben
* neu speichern), also matchen wir per Attribute-Selektor und uebersteuern im
* Dark Mode mit semantischen Vars. */
html[data-theme="dark"] [style*="background:#FEF7E0"],
html[data-theme="dark"] [style*="background: #FEF7E0"],
html[data-theme="dark"] [style*="background:#fef7e0"],
html[data-theme="dark"] [style*="background: #fef7e0"] {
background: var(--warn-bg) !important;
color: var(--warn-text) !important;
}
html[data-theme="dark"] [style*="background:#FEF7E0"] *,
html[data-theme="dark"] [style*="background: #FEF7E0"] *,
html[data-theme="dark"] [style*="background:#fef7e0"] *,
html[data-theme="dark"] [style*="background: #fef7e0"] * {
color: var(--warn-text) !important;
}
html[data-theme="dark"] [style*="background:#EFF6FF"],
html[data-theme="dark"] [style*="background: #EFF6FF"],
html[data-theme="dark"] [style*="background:#eff6ff"],
html[data-theme="dark"] [style*="background: #eff6ff"] {
background: var(--blue-bg) !important;
color: var(--blue) !important;
}
html[data-theme="dark"] [style*="background:#EFF6FF"] *,
html[data-theme="dark"] [style*="background: #EFF6FF"] *,
html[data-theme="dark"] [style*="background:#eff6ff"] *,
html[data-theme="dark"] [style*="background: #eff6ff"] * {
color: var(--blue) !important;
}
/* Inline 'color:#6B7280' (Tailwind grey-500) kommt in Daten als Subtitle.
Im Dark Mode auf hellbarem var(--text-muted) bringen. */
html[data-theme="dark"] [style*="color:#6B7280"],
html[data-theme="dark"] [style*="color: #6B7280"],
html[data-theme="dark"] [style*="color:#6b7280"],
html[data-theme="dark"] [style*="color: #6b7280"] {
color: var(--text-muted) !important;
}
/* Englisch-Lernkurs Pin-Banner: hat hardcoded color:#1E40AF (Tailwind blue-700)
im Inline-style. Auf dunkelblauem Bg (--blue-bg) unsichtbar. */
html[data-theme="dark"] [style*="color:#1E40AF"],
html[data-theme="dark"] [style*="color: #1E40AF"],
html[data-theme="dark"] [style*="color:#1e40af"],
html[data-theme="dark"] [style*="color: #1e40af"] {
color: var(--info-blue) !important;
}
html[data-theme="dark"] [style*="color:#92400E"],
html[data-theme="dark"] [style*="color: #92400E"] {
color: var(--warn-text) !important;
}
/* === Verbleibende inline-Hex-Codes in m9_englisch_probe.json (komplett-Audit) === */
/* #F9FAFB (Tailwind grey-50) — Cloze-Container "Lily says..." / Frage-Container */
html[data-theme="dark"] [style*="background:#F9FAFB"],
html[data-theme="dark"] [style*="background: #F9FAFB"],
html[data-theme="dark"] [style*="background:#f9fafb"],
html[data-theme="dark"] [style*="background: #f9fafb"] {
background: var(--surface-2) !important;
color: var(--text) !important;
}
html[data-theme="dark"] [style*="background:#F9FAFB"] *,
html[data-theme="dark"] [style*="background: #F9FAFB"] *,
html[data-theme="dark"] [style*="background:#f9fafb"] *,
html[data-theme="dark"] [style*="background: #f9fafb"] * {
color: var(--text) !important;
}
/* #DCFCE7 (hellgrün) — Success-Container */
html[data-theme="dark"] [style*="background:#DCFCE7"],
html[data-theme="dark"] [style*="background: #DCFCE7"],
html[data-theme="dark"] [style*="background:#dcfce7"],
html[data-theme="dark"] [style*="background: #dcfce7"] {
background: var(--green-bg) !important;
}
html[data-theme="dark"] [style*="background:#DCFCE7"] *,
html[data-theme="dark"] [style*="background: #DCFCE7"] *,
html[data-theme="dark"] [style*="background:#dcfce7"] *,
html[data-theme="dark"] [style*="background: #dcfce7"] * {
color: var(--green) !important;
}
/* #FEE2E2 (hellrot) — Error-Container */
html[data-theme="dark"] [style*="background:#FEE2E2"],
html[data-theme="dark"] [style*="background: #FEE2E2"],
html[data-theme="dark"] [style*="background:#fee2e2"],
html[data-theme="dark"] [style*="background: #fee2e2"] {
background: var(--red-bg) !important;
}
html[data-theme="dark"] [style*="background:#FEE2E2"] *,
html[data-theme="dark"] [style*="background: #FEE2E2"] *,
html[data-theme="dark"] [style*="background:#fee2e2"] *,
html[data-theme="dark"] [style*="background: #fee2e2"] * {
color: var(--red) !important;
}
/* color:#991B1B (dunkelrot) — Error-Text */
html[data-theme="dark"] [style*="color:#991B1B"],
html[data-theme="dark"] [style*="color: #991B1B"],
html[data-theme="dark"] [style*="color:#991b1b"],
html[data-theme="dark"] [style*="color: #991b1b"] {
color: var(--red) !important;
}
/* Pinnwand-Karten mit user-defined Background-Bild (has-custom-bg):
im Dark Mode etwas abdunkeln und Text aufhellen. */
html[data-theme="dark"] .pinnwand-card.has-custom-bg,
html[data-theme="dark"] .panel.has-custom-bg {
filter: brightness(0.55) contrast(1.05);
}
html[data-theme="dark"] .pinnwand-card.has-custom-bg:hover,
html[data-theme="dark"] .panel.has-custom-bg:hover {
filter: brightness(0.65) contrast(1.05);
}
/* === ELTERN-VERWALTUNG === */
html[data-theme="dark"] .eltern-toolbar {
background: var(--surface) !important;
border-color: var(--border) !important;
color: var(--text);
}
html[data-theme="dark"] .eltern-loading,
html[data-theme="dark"] .eltern-empty {
color: var(--text-muted);
}
html[data-theme="dark"] .eltern-group-title,
html[data-theme="dark"] .eltern-count {
color: var(--text);
background: var(--surface-2);
}
html[data-theme="dark"] .eltern-card {
background: var(--surface) !important;
border-color: var(--border) !important;
color: var(--text);
}
html[data-theme="dark"] .eltern-card-name,
html[data-theme="dark"] .eltern-card-child {
color: var(--text) !important;
}
html[data-theme="dark"] .eltern-card-rolelabel,
html[data-theme="dark"] .eltern-card-meta,
html[data-theme="dark"] .eltern-child-label {
color: var(--text-muted) !important;
}
/* === GENERIC TABELLEN (catch-all fuer hardcoded weisse Backgrounds) === */
html[data-theme="dark"] .modal table {
background: var(--surface);
color: var(--text);
}
html[data-theme="dark"] .modal th {
background: var(--surface-2);
color: var(--text-muted);
border-color: var(--border);
}
html[data-theme="dark"] .modal td {
border-color: var(--border);
color: var(--text);
}
/* === Buttons mit hardcoded Farben (z.B. .btn ohne Variable) === */
html[data-theme="dark"] .btn:not(.btn-primary):not(.btn-danger):not(.btn-success) {
background: var(--surface-2);
color: var(--text);
border-color: var(--border);
}
html[data-theme="dark"] .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):hover {
background: var(--accent-bg);
}
/* Theme-Toggle-Button im Header */
.nll-theme-toggle {
display: inline-flex;
align-items: center; justify-content: center;
width: 38px; height: 38px;
border-radius: 50%;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
font-size: 18px;
cursor: pointer;
margin-left: 4px;
transition: all 0.15s;
}
.nll-theme-toggle:hover {
transform: scale(1.08);
border-color: var(--accent);
}
@media (max-width: 600px) {
.nll-theme-toggle { width: 32px; height: 32px; font-size: 15px; }
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
/* Phase 1.57 — Custom Wallpaper-Hintergrund (Joachim selbst gestaltet).
- background-attachment: fixed -> Wallpaper bleibt beim Scrollen liegen
- background-size: cover -> fuellt Bildschirm vollstaendig
- background-color als Fallback (Lavender-Hauch) waehrend das Bild laedt */
background:
url('img/wallpaper-nll.png') center center / cover no-repeat fixed,
#ece8f5;
color: var(--text);
line-height: 1.6;
min-height: 100vh;
font-size: 15px;
}
/* === DARK MODE: gleiches Wallpaper, aber mit dunklem Tint-Overlay,
damit weisser Text auf den Karten gut lesbar bleibt === */
html[data-theme="dark"] body {
background:
linear-gradient(rgba(11, 16, 32, 0.78), rgba(15, 21, 48, 0.82)),
url('img/wallpaper-nll.png') center center / cover no-repeat fixed,
#0b1020;
}
/* === Buttons === */
.btn {
font-family: inherit;
font-size: 13px;
font-weight: 500;
padding: 7px 14px;
border-radius: var(--radius);
cursor: pointer;
border: 1px solid var(--border-strong);
background: var(--surface);
color: var(--text);
transition: all 0.15s ease;
display: inline-flex;
align-items: center;
gap: 6px;
text-decoration: none;
}
.btn:hover { background: var(--surface-2); border-color: var(--accent); }
.btn-primary { background: var(--accent); color: white; border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn-sm { font-size: 12px; padding: 5px 10px; }
.btn-danger { color: var(--red); }
.btn-danger:hover { background: var(--red-soft); border-color: var(--red); }
.btn-icon {
padding: 6px 8px;
font-size: 14px;
background: transparent;
border: none;
color: var(--text-muted);
cursor: pointer;
border-radius: 6px;
}
.btn-icon:hover { background: var(--surface-2); color: var(--text); }
/* === Form === */
.form-group { margin-bottom: 16px; }
.form-group label {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.form-group input,
.form-group textarea,
.form-group select {
width: 100%;
padding: 10px 14px;
border: 1px solid var(--border-strong);
border-radius: var(--radius);
font-size: 14px;
font-family: inherit;
background: var(--surface);
color: var(--text);
transition: border-color 0.15s ease;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-group textarea { min-height: 90px; resize: vertical; }
.alert {
padding: 12px 16px;
border-radius: var(--radius);
margin-bottom: 20px;
font-size: 14px;
}
.alert-error { background: var(--red-soft); color: var(--red); border: 1px solid var(--red); }
.alert-info { background: var(--accent-soft); color: var(--accent-dark); border: 1px solid var(--accent); }
/* === Login/Setup Screen === */
.auth-screen {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: linear-gradient(135deg, #f7f5f0 0%, #e8ebe6 100%);
}
.auth-card {
background: var(--surface);
border-radius: var(--radius-lg);
padding: 40px 36px;
width: 100%;
max-width: 440px;
box-shadow: var(--shadow-lg);
border: 1px solid var(--border);
}
.auth-logo {
font-family: 'Source Serif 4', Georgia, serif;
font-size: 28px;
font-weight: 600;
text-align: center;
margin-bottom: 8px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.auth-logo .logo-dot {
width: 12px;
height: 12px;
background: var(--accent);
border-radius: 50%;
}
.auth-subtitle {
text-align: center;
color: var(--text-muted);
font-size: 14px;
margin-bottom: 28px;
}
/* Legal-Footer auf Login-Seite (Datenschutz / Impressum) */
.auth-footer {
margin-top: 24px;
padding-top: 16px;
border-top: 1px solid var(--border);
text-align: center;
font-size: 12px;
}
.auth-footer a {
color: var(--text-muted);
text-decoration: none;
padding: 4px 8px;
}
.auth-footer a:hover { color: var(--text); text-decoration: underline; }
.auth-footer-sep { color: var(--text-muted); opacity: 0.4; }
/* App-Legal-Footer für eingeloggte Nutzer (klein und dezent) */
.app-legal-footer {
margin-top: 32px;
padding: 16px 0 24px;
text-align: center;
font-size: 11px;
color: var(--text-muted);
opacity: 0.7;
}
.app-legal-footer a {
color: inherit;
text-decoration: none;
padding: 0 8px;
}
.app-legal-footer a:hover { text-decoration: underline; opacity: 1; }
.app-legal-footer span { opacity: 0.5; }
/* ================================================================
🎂 GEBURTSTAGS-BANNER & POP-UP
================================================================ */
/* Banner oberhalb von "Aktuelles" und "Termine" */
.birthday-banner {
position: relative;
margin: 0 0 24px;
padding: 22px 28px;
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fbbf24 100%);
border-radius: 16px;
box-shadow: 0 6px 24px rgba(251, 191, 36, 0.25);
overflow: hidden;
animation: birthday-pulse 4s ease-in-out infinite;
}
@keyframes birthday-pulse {
0%, 100% { box-shadow: 0 6px 24px rgba(251, 191, 36, 0.25); }
50% { box-shadow: 0 8px 32px rgba(251, 191, 36, 0.45); }
}
.birthday-banner-inner {
display: flex;
align-items: center;
gap: 22px;
position: relative;
z-index: 2;
}
.birthday-cake {
font-size: 56px;
line-height: 1;
flex-shrink: 0;
animation: cake-bounce 2s ease-in-out infinite;
}
@keyframes cake-bounce {
0%, 100% { transform: translateY(0) rotate(-3deg); }
50% { transform: translateY(-8px) rotate(3deg); }
}
.birthday-text {
flex: 1;
min-width: 0;
}
.birthday-title {
font-size: 14px;
font-weight: 600;
color: #78350f;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 4px;
}
.birthday-names {
font-size: 22px;
font-weight: 700;
color: #1e293b;
line-height: 1.3;
margin-bottom: 6px;
}
.birthday-names strong {
color: #b45309;
}
.birthday-wish {
font-size: 15px;
color: #78350f;
font-weight: 500;
}
/* Konfetti-Animation im Banner-Hintergrund */
.birthday-confetti {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
overflow: hidden;
}
.confetti-piece {
position: absolute;
top: -10px;
left: calc((var(--i) * 5.5%) + 1%);
width: 8px;
height: 14px;
background: hsl(calc(var(--i) * 23deg), 80%, 60%);
opacity: 0.7;
animation: confetti-fall 4s linear infinite;
animation-delay: calc(var(--i) * -0.22s);
border-radius: 2px;
}
.confetti-piece:nth-child(odd) {
width: 6px; height: 10px;
border-radius: 50%;
}
@keyframes confetti-fall {
0% {
transform: translateY(-20px) rotate(0deg);
opacity: 0.7;
}
100% {
transform: translateY(180px) rotate(360deg);
opacity: 0;
}
}
/* Mobile-Anpassung */
@media (max-width: 600px) {
.birthday-banner { padding: 16px 18px; }
.birthday-cake { font-size: 42px; }
.birthday-names { font-size: 18px; }
.birthday-wish { font-size: 13px; }
.birthday-banner-inner { gap: 14px; }
}
/* === Pop-up für das Geburtstagskind selbst === */
.birthday-popup-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
animation: popup-overlay-in 0.3s ease-out;
padding: 20px;
}
.birthday-popup-overlay.closing {
animation: popup-overlay-out 0.3s ease-out forwards;
}
@keyframes popup-overlay-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes popup-overlay-out {
from { opacity: 1; }
to { opacity: 0; }
}
.birthday-popup {
position: relative;
background: linear-gradient(135deg, #ffffff 0%, #fef3c7 100%);
border-radius: 24px;
padding: 50px 40px 36px;
max-width: 460px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
animation: popup-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
overflow: hidden;
}
@keyframes popup-pop {
0% { transform: scale(0.5) rotate(-10deg); opacity: 0; }
100% { transform: scale(1) rotate(0); opacity: 1; }
}
.birthday-popup-confetti {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 1;
}
.birthday-popup-confetti .confetti-piece {
left: calc((var(--i) * 3.3%) + 1%);
animation-duration: 3s;
}
.birthday-popup > *:not(.birthday-popup-confetti) {
position: relative;
z-index: 2;
}
.birthday-popup-close {
position: absolute;
top: 12px;
right: 12px;
background: rgba(0, 0, 0, 0.05);
border: none;
width: 36px;
height: 36px;
border-radius: 50%;
font-size: 22px;
cursor: pointer;
color: #64748b;
z-index: 3;
transition: background 0.2s;
}
.birthday-popup-close:hover {
background: rgba(0, 0, 0, 0.1);
color: #0f172a;
}
.birthday-popup-cake {
font-size: 96px;
line-height: 1;
margin-bottom: 18px;
animation: cake-bounce 1.5s ease-in-out infinite;
}
.birthday-popup-title {
font-size: 30px;
font-weight: 800;
color: #b45309;
margin-bottom: 10px;
line-height: 1.2;
}
.birthday-popup-subtitle {
font-size: 16px;
color: #78350f;
margin-bottom: 14px;
}
.birthday-popup-emojis {
font-size: 28px;
letter-spacing: 6px;
margin-bottom: 24px;
}
.birthday-popup-ok {
min-width: 140px;
font-size: 16px;
}
@media (max-width: 600px) {
.birthday-popup { padding: 40px 24px 28px; }
.birthday-popup-cake { font-size: 72px; }
.birthday-popup-title { font-size: 24px; }
.birthday-popup-subtitle { font-size: 14px; }
}
/* ================================================================
🎂 GEBURTSTAGS-BUTTON in Schülerverwaltung
================================================================ */
.birthday-cell {
text-align: center;
white-space: nowrap;
}
.birthday-btn {
background: none;
border: 1px solid var(--border, #e2e8f0);
border-radius: 6px;
padding: 5px 10px;
font-size: 13px;
cursor: pointer;
transition: all 0.15s;
font-family: inherit;
color: inherit;
}
.birthday-btn:hover {
background: #fef3c7;
border-color: #fbbf24;
}
.birthday-btn.birthday-empty {
color: #94a3b8;
opacity: 0.7;
}
.birthday-btn.birthday-set {
background: #fef3c7;
border-color: #fbbf24;
color: #92400e;
font-weight: 600;
}
/* ================================================================
🔄 REFRESH-BUTTON — Animation
================================================================ */
.refresh-spinning {
display: inline-block;
animation: refresh-spin 0.7s linear infinite;
}
@keyframes refresh-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.header-tile-refresh:disabled {
opacity: 0.6;
cursor: wait;
}
/* ================================================================
🚪 LOGOUT-BESTÄTIGUNG — Animationen
================================================================ */
@keyframes logout-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes logout-fade-out {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes logout-pop {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.auth-card h2 {
font-family: 'Source Serif 4', Georgia, serif;
font-size: 20px;
font-weight: 500;
margin-bottom: 20px;
color: var(--text);
}
.role-picker {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 20px;
}
.role-option {
padding: 14px;
border: 1.5px solid var(--border-strong);
border-radius: var(--radius);
text-align: center;
cursor: pointer;
transition: all 0.15s ease;
background: var(--surface);
}
.role-option:hover { border-color: var(--accent); background: var(--surface-2); }
.role-option.active {
border-color: var(--accent);
background: var(--accent-soft);
color: var(--accent-dark);
font-weight: 600;
}
.role-option .icon { font-size: 24px; margin-bottom: 4px; }
.role-option .label { font-size: 13px; }
.setup-note {
font-size: 12px;
color: var(--text-muted);
background: var(--amber-soft);
border: 1px solid var(--amber);
border-radius: var(--radius);
padding: 10px 12px;
margin-bottom: 20px;
line-height: 1.5;
}
.btn-block {
width: 100%;
justify-content: center;
padding: 12px;
font-size: 15px;
}
/* ============================================================
LOGIN-SEITE - 3-Kachel-Picker + großer M9-Klassentitel
(immer geladen, auch wenn nicht authentifiziert)
============================================================ */
.role-picker {
grid-template-columns: 1fr 1fr 1fr !important;
}
.auth-classtitle {
font-family: 'Source Serif 4', Georgia, serif;
font-size: 42px;
font-weight: 700;
text-align: center;
margin-bottom: 6px;
color: var(--text);
letter-spacing: -1px;
line-height: 1.1;
display: block;
}
.auth-classtitle .logo-dot {
display: inline-block;
width: 14px;
height: 14px;
background: var(--accent);
border-radius: 50%;
vertical-align: middle;
margin-right: 12px;
margin-top: -6px;
}
.auth-logo {
display: block;
width: 240px;
height: 240px;
margin: 0 auto 8px;
object-fit: contain;
filter: drop-shadow(0 6px 18px rgba(0,0,0,0.12));
}
@media (max-width: 480px) {
.auth-logo { width: 180px; height: 180px; margin-bottom: 6px; }
}
.auth-platform {
text-align: center;
font-size: 17px;
color: var(--text-muted);
margin-bottom: 8px;
font-weight: 500;
letter-spacing: 0.3px;
}
.form-hint {
font-size: 12px;
color: var(--text-muted);
margin-top: 4px;
line-height: 1.4;
}
@media (max-width: 480px) {
.auth-classtitle { font-size: 30px; }
.auth-platform { font-size: 14px; }
.role-picker { grid-template-columns: 1fr 1fr 1fr !important; gap: 6px; }
.role-option { padding: 10px 4px; }
.role-option .icon { font-size: 20px; }
.role-option .label { font-size: 11px; }
}
/* === Header === */
.site-header {
background: var(--surface);
border-bottom: 1px solid var(--border);
padding: 16px 28px;
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
z-index: 50;
backdrop-filter: blur(8px);
background: rgba(255,255,255,0.92);
flex-wrap: wrap;
gap: 12px;
}
.site-header h1 {
font-family: 'Source Serif 4', Georgia, serif;
font-weight: 600;
letter-spacing: -0.01em;
display: flex;
align-items: center;
gap: 12px;
margin: 0;
}
.site-header h1 .logo-dot {
width: 12px;
height: 12px;
background: var(--accent);
border-radius: 50%;
flex-shrink: 0;
}
.site-header h1 .site-logo {
width: 56px;
height: 56px;
flex-shrink: 0;
object-fit: contain;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08));
}
@media (max-width: 720px) {
.site-header h1 .site-logo {
width: 42px;
height: 42px;
}
}
.site-header h1 .title-main {
display: flex;
flex-direction: column;
line-height: 1.1;
}
.site-header h1 .title-line {
font-size: 28px;
font-weight: 700;
color: var(--text);
}
.site-header h1 .title-sub {
font-size: 12px;
font-weight: 400;
color: var(--text-muted);
font-family: 'Outfit', sans-serif;
letter-spacing: 0.03em;
margin-top: 2px;
}
.site-header .subtitle {
font-size: 12px;
color: var(--text-muted);
font-weight: 400;
}
.header-actions {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
/* Phase 1.56: erzwingt rechte Ausrichtung auch wenn site-header umbricht
(sonst rutschen Tiles unter dem Logo nach LINKS). */
margin-left: auto;
justify-content: flex-end;
}
.user-pill {
display: flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
background: var(--accent-soft);
color: var(--accent-dark);
border-radius: 20px;
font-size: 12px;
font-weight: 600;
}
.user-pill.lehrer { background: var(--amber-soft); color: var(--amber); }
/* Kachel-Gruppe (aneinanderliegende Buttons wie ein Panel) */
.header-tile-group {
display: inline-flex;
background: white;
border: 1px solid #e5e7eb;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
flex-wrap: nowrap;
}
.header-tile {
background: white;
border: none;
border-right: 1px solid #e5e7eb;
padding: 12px 18px;
font-size: 13px;
font-weight: 600;
color: #374151;
cursor: pointer;
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 5px;
min-width: 84px;
text-decoration: none;
transition: background 0.15s, color 0.15s, transform 0.1s;
font-family: inherit;
position: relative;
white-space: nowrap;
}
.header-tile:last-child { border-right: none; }
.header-tile:hover {
background: #f9fafb;
color: var(--accent, #0891b2);
}
.header-tile:active { background: #f3f4f6; transform: scale(0.97); }
.header-tile-ico {
font-size: 24px;
line-height: 1;
}
.header-tile-lbl {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.2px;
}
/* Spezial-Farben für einzelne Kacheln */
.header-tile-chat:hover {
background: linear-gradient(135deg, #ecfeff, #cffafe);
color: #0891b2;
}
.header-tile-notenheft:hover {
background: linear-gradient(135deg, #fef3c7, #fde68a);
color: #b45309;
}
.header-tile-logout {
color: #6b7280;
}
.header-tile-logout:hover {
background: linear-gradient(135deg, #fee2e2, #fecaca);
color: #b91c1c;
}
.header-tile-ai:hover {
background: linear-gradient(135deg, #ede9fe, #ddd6fe);
color: #6d28d9;
}
/* Chat-Badge in Kachel */
.header-tile-chat .chat-btn-badge {
position: absolute;
top: 6px;
right: 6px;
background: #ef4444;
color: white;
border-radius: 12px;
min-width: 20px;
height: 20px;
padding: 0 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
border: 2px solid white;
line-height: 1;
box-shadow: 0 2px 4px rgba(239, 68, 68, 0.4);
animation: badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.12); }
}
/* Mobile: Kacheln bleiben aneinander, horizontal scrollbar */
@media (max-width: 760px) {
.header-actions { width: 100%; }
.header-tile-group {
overflow-x: auto;
max-width: 100%;
-webkit-overflow-scrolling: touch;
}
.header-tile {
min-width: 72px;
padding: 10px 12px;
}
.header-tile-ico { font-size: 20px; }
.header-tile-lbl { font-size: 11px; }
}
main {
max-width: 1400px;
margin: 0 auto;
padding: 24px 28px 60px;
}
/* === Top Grid === */
.top-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
margin-bottom: 28px;
}
@media (max-width: 900px) {
.top-grid { grid-template-columns: 1fr; }
}
.panel {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 20px 22px;
box-shadow: var(--shadow-sm);
}
.panel-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border);
}
.panel-header h2 {
font-family: 'Source Serif 4', Georgia, serif;
font-size: 19px;
font-weight: 500;
letter-spacing: -0.01em;
display: flex;
align-items: center;
gap: 10px;
}
.panel-header h2 .accent-bar {
width: 4px;
height: 18px;
background: var(--accent);
border-radius: 2px;
}
/* === News === */
.news-list, .termine-list {
display: flex;
flex-direction: column;
gap: 10px;
max-height: 440px;
overflow-y: auto;
padding-right: 4px;
}
.news-item {
padding: 12px 14px;
background: var(--surface-2);
border-radius: var(--radius);
border-left: 3px solid var(--accent);
position: relative;
transition: all 0.15s ease;
}
.news-item:hover { background: var(--accent-soft); border-left-width: 5px; }
.news-item-title { font-weight: 600; font-size: 14px; margin-bottom: 3px; }
.news-item-text { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin-bottom: 6px; }
.news-item-date { font-size: 11px; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; }
.news-item-actions {
position: absolute;
top: 8px; right: 8px;
opacity: 0;
transition: opacity 0.15s;
}
.news-item:hover .news-item-actions { opacity: 1; }
/* === Termine === */
.termin-item {
display: flex;
gap: 12px;
padding: 10px 12px;
background: var(--surface-2);
border-radius: var(--radius);
border: 1px solid var(--border);
transition: all 0.15s ease;
position: relative;
}
.termin-item:hover { border-color: var(--accent); background: var(--accent-soft); }
.termin-date {
flex-shrink: 0;
min-width: 48px;
width: auto;
padding: 0 8px;
height: 52px;
border-radius: var(--radius);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: var(--surface);
border: 1px solid var(--border-strong);
text-align: center;
}
.termin-date-day { font-size: 15px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.termin-date-month { font-size: 10px; color: var(--text-muted); text-transform: uppercase; margin-top: 2px; letter-spacing: 0.05em; font-weight: 600; white-space: nowrap; }
.termin-date-range { font-size: 13px; font-weight: 700; line-height: 1.4; text-align: center; white-space: nowrap; }
.termin-date-range .range-month { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.range-separator { display: inline; font-weight: 400; font-size: 13px; color: var(--text-muted); }
.termin-body { flex: 1; min-width: 0; }
.termin-title { font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.termin-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.termin-type {
display: inline-block;
font-size: 10px;
font-weight: 600;
padding: 2px 8px;
border-radius: 12px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.type-probe { background: var(--red-soft); color: var(--red); }
.type-ausflug { background: var(--blue-soft); color: var(--blue); }
.type-sprechtag { background: var(--amber-soft); color: var(--amber); }
.type-schulfrei { background: var(--green-soft); color: var(--green); }
.type-sonstiges { background: var(--purple-soft); color: var(--purple); }
.termin-class { font-size: 12px; color: var(--text-muted); }
.termin-actions {
position: absolute;
top: 6px; right: 6px;
opacity: 0;
transition: opacity 0.15s;
}
.termin-item:hover .termin-actions { opacity: 1; }
.termin-item.past { opacity: 0.55; }
.empty-state { text-align: center; padding: 28px 16px; color: var(--text-soft); font-size: 13px; }
/* === Pinnwände === */
.section-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 18px;
padding-bottom: 8px;
border-bottom: 1px solid var(--border);
flex-wrap: wrap;
gap: 12px;
}
.section-header h2 {
font-family: 'Source Serif 4', Georgia, serif;
font-size: 26px;
font-weight: 500;
letter-spacing: -0.015em;
}
.section-header .section-subtitle {
font-size: 13px;
color: var(--text-muted);
margin-top: 3px;
}
.pinnwaende-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 14px;
}
/* === Phase 1.34: Lehrer-2x2-Grid + Abhaklisten === */
.lehrer-2x2-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
gap: 18px;
margin-bottom: 28px;
}
@media (max-width: 900px) {
.lehrer-2x2-grid { grid-template-columns: 1fr; }
}
.lehrer-2x2-grid .panel { display: flex; flex-direction: column; min-height: 0; }
.lehrer-2x2-grid .news-list,
.lehrer-2x2-grid .termine-list,
.lehrer-2x2-grid .abhaklisten-grid,
.lehrer-2x2-grid .pinnwaende-grid-cell { max-height: 440px; overflow-y: auto; }
.pinnwaende-grid-cell {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 12px;
}
.abhaklisten-grid {
display: flex;
flex-direction: column;
gap: 10px;
}
.abhakliste-card {
padding: 12px 14px;
background: var(--surface-2);
border-radius: var(--radius);
border-left: 3px solid #0d9488;
cursor: pointer;
transition: all 0.15s ease;
position: relative;
}
.abhakliste-card:hover { background: var(--accent-soft); border-left-width: 5px; }
.abhakliste-card-title { font-weight: 600; font-size: 14px; margin-bottom: 3px; }
.abhakliste-card-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 6px; }
.abhakliste-card-counter {
font-size: 11px; color: var(--text-soft);
text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500;
}
.abhakliste-card-progress {
margin-top: 6px; height: 4px; background: #e5e7eb; border-radius: 2px; overflow: hidden;
}
.abhakliste-card-progress-fill {
height: 100%; background: #0d9488; transition: width .25s ease;
}
/* Detail-Modal (Matrix) */
.abh-detail-wrap { padding: 14px 18px; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; }
.abh-detail-meta { font-size: 13px; color: #6b7280; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.abh-detail-table-wrap { flex: 1; overflow: auto; border: 1px solid #e5e7eb; border-radius: 8px; min-height: 0; }
.abh-detail-table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; }
.abh-detail-table th, .abh-detail-table td { padding: 8px 10px; vertical-align: middle; }
.abh-detail-table thead th { background: #f8fafc; border-bottom: 2px solid #e5e7eb; position: sticky; top: 0; z-index: 2; }
.abh-detail-th-name { text-align: left; min-width: 180px; left: 0; position: sticky; z-index: 3; background: #f8fafc; border-right: 1px solid #e5e7eb; }
.abh-detail-th-liste { text-align: center; min-width: 130px; }
.abh-detail-th-liste-title { font-size: 12px; font-weight: 700; color: #1f2937; }
.abh-detail-th-liste-counter { font-size: 11px; color: #6b7280; margin-top: 2px; font-variant-numeric: tabular-nums; }
.abh-detail-th-liste-archive { background: none; border: none; color: #b91c1c; cursor: pointer; font-size: 11px; padding: 2px 6px; text-decoration: underline; margin-top: 2px; }
.abh-detail-table tbody tr:nth-child(odd) { background: #fafafa; }
.abh-detail-table tbody tr:hover { background: #f0f9ff; }
.abh-detail-name { left: 0; position: sticky; z-index: 1; background: inherit; border-right: 1px solid #e5e7eb; }
.abh-detail-cell-td { text-align: center; cursor: pointer; user-select: none; }
.abh-detail-cell-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; font-weight: 700; font-size: 14px; transition: all .15s ease; }
.abh-detail-cell-td.abgegeben .abh-detail-cell-icon { background: #dcfce7; color: #166534; }
.abh-detail-cell-td.offen .abh-detail-cell-icon { background: #f3f4f6; color: #9ca3af; }
.abh-detail-cell-td:hover .abh-detail-cell-icon { transform: scale(1.1); }
@media (max-width: 640px) {
.abh-detail-th-name, .abh-detail-name { min-width: 130px; }
.abh-detail-th-liste { min-width: 90px; }
}
.pinnwand-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 18px;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
min-height: 140px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.pinnwand-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: var(--accent);
}
.pinnwand-card.color-blue::before { background: var(--blue); }
.pinnwand-card.color-green::before { background: var(--green); }
.pinnwand-card.color-amber::before { background: var(--amber); }
.pinnwand-card.color-red::before { background: var(--red); }
.pinnwand-card.color-purple::before { background: var(--purple); }
.pinnwand-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: var(--border-strong);
}
.pinnwand-card h3 {
font-family: 'Source Serif 4', Georgia, serif;
font-size: 18px;
font-weight: 500;
margin-bottom: 4px;
letter-spacing: -0.01em;
}
.pinnwand-card .pinnwand-desc { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; flex: 1; }
.pinnwand-card .pinnwand-stats {
display: flex;
gap: 14px;
margin-top: auto;
padding-top: 10px;
border-top: 1px solid var(--border);
font-size: 11px;
color: var(--text-muted);
}
.pinnwand-actions {
position: absolute;
top: 12px; right: 12px;
opacity: 0;
transition: opacity 0.15s;
display: flex;
gap: 4px;
}
.pinnwand-card:hover .pinnwand-actions { opacity: 1; }
/* Touch-Geräte (kein Hover möglich): Aktions-Buttons immer sichtbar */
@media (hover: none), (pointer: coarse) {
.pinnwand-actions { opacity: 1 !important; }
}
.pinnwand-card.add-new {
border-style: dashed;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--text-muted);
background: transparent;
}
.pinnwand-card.add-new::before { display: none; }
.pinnwand-card.add-new:hover {
background: var(--accent-soft);
border-color: var(--accent);
color: var(--accent-dark);
}
.pinnwand-card.add-new .plus { font-size: 28px; font-weight: 300; margin-bottom: 4px; }
/* Pinnwand-Drag&Drop-Feedback (Lehrer) */
.pinnwand-card.dragging {
opacity: 0.4;
cursor: grabbing;
}
.pinnwand-card.drop-target {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
transform: scale(1.02);
}
.pinnwand-card .drag-hint {
color: var(--text-soft);
font-size: 14px;
letter-spacing: -2px;
cursor: grab;
user-select: none;
padding: 0 2px;
}
.pinnwand-card:active .drag-hint { cursor: grabbing; }
/* === Modal === */
.modal-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.45);
display: none;
align-items: center;
justify-content: center;
z-index: 100;
padding: 20px;
backdrop-filter: blur(2px);
}
.modal-overlay.active { display: flex; }
.modal {
background: var(--surface);
border-radius: var(--radius-lg);
width: 100%;
max-width: 540px;
max-height: 90vh;
overflow-y: auto;
box-shadow: var(--shadow-lg);
animation: modalIn 0.2s ease;
}
@keyframes modalIn {
from { opacity: 0; transform: translateY(20px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-header {
padding: 22px 26px 16px;
border-bottom: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-header h3 {
font-family: 'Source Serif 4', Georgia, serif;
font-size: 22px;
font-weight: 500;
}
.modal-close {
background: transparent;
border: none;
font-size: 26px;
cursor: pointer;
color: var(--text-muted);
padding: 4px 10px;
border-radius: 6px;
}
.modal-close:hover { background: var(--surface-2); color: var(--text); }
.modal-body { padding: 22px 26px; }
/* === Phase 1.49: Vollbild-Modal-Klasse (Modal optisch wie eine eigene Seite) ===
Anwendung:
Container-Massnahmen wie height/border-radius werden mit !important durchgesetzt,
damit auch Modals mit eigenen inline-styles sauber vollbildig werden. */
.modal-overlay.modal-fullscreen-page {
background: #fff;
padding: 0;
backdrop-filter: none;
-webkit-backdrop-filter: none;
z-index: 1500;
align-items: stretch;
justify-content: stretch;
}
.modal-overlay.modal-fullscreen-page > .modal {
max-width: 100vw !important;
width: 100vw !important;
max-height: 100vh !important;
height: 100vh !important;
border-radius: 0 !important;
box-shadow: none !important;
margin: 0 !important;
}
.modal-overlay.modal-fullscreen-page > .modal > .modal-header {
border-radius: 0 !important;
}
/* Phase 1.57 + 1.65 — robust: Chat / Lernhelfer / Notenheft / Selbstlernkurs
sind IMMER vollbild, wenn .active gesetzt ist. Unabhaengig vom JS-Helper.
Damit funktioniert es auch wenn die JS-Datei noch aus dem Cache kommt.
Selektoren matchen die Modal-IDs aus chat.js / ai-helper.js / selbstlernkurs.js / app.php */
#nll-chat-modal.modal-overlay.active,
#modal-ai-helper.modal-overlay.active,
#modal-notenheft.modal-overlay.active,
#modal-selbstlernkurs.modal-overlay.active {
background: #fff !important;
padding: 0 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
z-index: 1500 !important;
align-items: stretch !important;
justify-content: stretch !important;
}
#nll-chat-modal.modal-overlay.active > .modal,
#modal-ai-helper.modal-overlay.active > .modal,
#modal-notenheft.modal-overlay.active > .modal,
#modal-selbstlernkurs.modal-overlay.active > .modal {
max-width: 100vw !important;
width: 100vw !important;
max-height: 100vh !important;
height: 100vh !important;
border-radius: 0 !important;
box-shadow: none !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
/* iPad/iPhone Safe-Area: Statusbar/Notch nicht ueberlappen */
padding-top: env(safe-area-inset-top, 0) !important;
padding-bottom: env(safe-area-inset-bottom, 0) !important;
padding-left: env(safe-area-inset-left, 0) !important;
padding-right: env(safe-area-inset-right, 0) !important;
box-sizing: border-box !important;
}
/* Modal-Body soll den restlichen Platz fuellen */
#nll-chat-modal.modal-overlay.active > .modal > .modal-body,
#modal-ai-helper.modal-overlay.active > .modal > .modal-body,
#modal-notenheft.modal-overlay.active > .modal > .modal-body,
#modal-selbstlernkurs.modal-overlay.active > .modal > .modal-body,
#modal-selbstlernkurs.modal-overlay.active > .modal > #slk-body {
flex: 1 !important;
min-height: 0 !important;
overflow: auto !important;
}
/* Im Dark Mode: Modal-Hintergrund auf Surface-Farbe statt hartem weiss */
html[data-theme="dark"] #nll-chat-modal.modal-overlay.active,
html[data-theme="dark"] #modal-ai-helper.modal-overlay.active,
html[data-theme="dark"] #modal-notenheft.modal-overlay.active {
background: var(--surface) !important;
}
/* Zurueck-Knopf links im Modal-Header */
.modal-back-btn {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(255,255,255,0.85); border: 1px solid rgba(203,213,225,0.8);
border-radius: 8px;
padding: 8px 14px; font-size: 14px; font-weight: 600; color: #1e293b;
cursor: pointer; transition: all .15s; white-space: nowrap;
margin-right: 10px;
text-decoration: none;
}
.modal-back-btn:hover {
background: #fff; border-color: #94a3b8;
transform: translateX(-2px);
}
.modal-back-btn:active { transform: translateX(0); }
/* Body-Scroll-Lock fuer Vollbild-Modals (verhindert Hintergrund-Scroll auf Mobile) */
body.fullscreen-modal-open,
html.fullscreen-modal-open { overflow: hidden; }
@media (max-width: 640px) {
.modal-back-btn { padding: 6px 10px; font-size: 13px; }
}
.modal-footer {
padding: 16px 26px 22px;
display: flex;
gap: 10px;
justify-content: flex-end;
border-top: 1px solid var(--border);
}
.color-picker { display: flex; gap: 10px; flex-wrap: wrap; }
.color-swatch {
width: 32px; height: 32px;
border-radius: 50%;
cursor: pointer;
border: 2px solid transparent;
transition: all 0.15s;
}
.color-swatch.selected { border-color: var(--text); transform: scale(1.1); }
/* === Pinnwand Detail === */
.pinnwand-detail {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: var(--bg);
z-index: 90;
overflow-y: auto;
display: none;
}
.pinnwand-detail.active { display: block; }
.pinnwand-detail-header {
background: var(--surface);
border-bottom: 1px solid var(--border);
padding: 16px 28px;
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
z-index: 10;
flex-wrap: wrap;
gap: 12px;
}
.pinnwand-detail-header .back-btn {
background: transparent;
border: none;
color: var(--text-muted);
font-size: 14px;
cursor: pointer;
padding: 6px 12px;
border-radius: var(--radius);
display: flex;
align-items: center;
gap: 6px;
}
.pinnwand-detail-header .back-btn:hover { background: var(--surface-2); color: var(--text); }
.pinnwand-detail-header h2 {
font-family: 'Source Serif 4', Georgia, serif;
font-size: 22px;
font-weight: 500;
letter-spacing: -0.01em;
}
.pinnwand-detail-body {
padding: 24px 28px;
max-width: 1600px;
margin: 0 auto;
}
.columns-container {
display: flex;
gap: 14px;
overflow-x: auto;
padding-bottom: 12px;
min-height: calc(100vh - 180px);
align-items: flex-start;
}
.column {
flex-shrink: 0;
width: 300px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 12px;
display: flex;
flex-direction: column;
}
.column-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
padding: 0 4px;
}
.column-title {
font-family: 'Source Serif 4', Georgia, serif;
font-size: 15px;
font-weight: 600;
background: transparent;
border: none;
padding: 4px 6px;
border-radius: 6px;
width: 100%;
}
.column-title:focus { outline: none; background: var(--surface); box-shadow: 0 0 0 2px var(--accent); }
.column-count {
font-size: 11px;
color: var(--text-muted);
background: var(--surface);
padding: 2px 8px;
border-radius: 12px;
font-weight: 600;
min-width: 22px;
text-align: center;
margin-left: 8px;
}
.cards-list {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
min-height: 40px;
}
.card-item {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 11px 13px;
cursor: grab;
box-shadow: var(--shadow-sm);
transition: all 0.15s;
position: relative;
border-left: 3px solid var(--accent);
}
.card-item.color-blue { border-left-color: var(--blue); }
.card-item.color-green { border-left-color: var(--green); }
.card-item.color-amber { border-left-color: var(--amber); }
.card-item.color-red { border-left-color: var(--red); }
.card-item.color-purple { border-left-color: var(--purple); }
/* Farbige Karten-Hintergründe (bg_style: "farbig") */
.card-item.bg-farbig.color-accent { background: var(--accent-bg); }
.card-item.bg-farbig.color-blue { background: var(--blue-bg); }
.card-item.bg-farbig.color-green { background: var(--green-bg); }
.card-item.bg-farbig.color-amber { background: var(--amber-bg); }
.card-item.bg-farbig.color-red { background: var(--red-bg); }
.card-item.bg-farbig.color-purple { background: var(--purple-bg); }
.card-item:hover {
box-shadow: var(--shadow-md);
transform: translateY(-1px);
border-color: var(--border-strong);
}
.card-item.dragging { opacity: 0.4; cursor: grabbing; }
.column.drag-over { background: var(--accent-soft); border-color: var(--accent); }
/* === Datei-Drop auf Spalten (Lehrer) === */
.column.file-drag-over {
background: var(--accent-bg) !important;
border: 2px dashed var(--accent) !important;
position: relative;
}
.column.file-drag-over::before {
content: '📎 Datei hier ablegen → neue Karte';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: var(--accent);
color: white;
padding: 10px 20px;
border-radius: var(--radius);
font-weight: 600;
font-size: 14px;
pointer-events: none;
box-shadow: var(--shadow-md);
z-index: 5;
}
/* Upload-Fortschritts-Overlay beim Datei-Drop */
.column-upload-progress {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
background: var(--amber-soft);
border: 1px solid var(--amber);
border-radius: var(--radius);
padding: 10px;
text-align: center;
font-size: 13px;
color: var(--amber);
font-weight: 500;
z-index: 4;
}
.card-item-title { font-weight: 600; font-size: 14px; margin-bottom: 3px; }
.card-item-text { font-size: 13px; color: var(--text-muted); line-height: 1.45; }
.card-attachments {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 8px;
}
.card-attachment {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 6px;
font-size: 12px;
color: var(--text);
text-decoration: none;
transition: all 0.15s;
}
.card-attachment:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-dark); }
.card-attachment .file-icon { font-size: 15px; }
.card-attachment .file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-attachment .file-size { font-size: 10px; color: var(--text-soft); }
.card-yt-embed {
margin-top: 8px;
position: relative;
width: 100%;
padding-bottom: 56.25%;
background: #000;
border-radius: 6px;
overflow: hidden;
}
.card-yt-embed iframe {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
border: none;
}
.card-link-preview {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
padding: 8px 10px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 6px;
font-size: 12px;
text-decoration: none;
color: var(--text);
transition: all 0.15s;
}
.card-link-preview:hover { background: var(--accent-soft); border-color: var(--accent); }
.card-link-preview .link-icon { font-size: 16px; }
.card-link-preview .link-domain { color: var(--text-muted); font-size: 11px; }
.card-item-actions {
position: absolute;
top: 6px; right: 6px;
opacity: 0;
display: flex;
gap: 2px;
}
.card-item:hover .card-item-actions { opacity: 1; }
.add-card-btn {
background: transparent;
border: 1px dashed var(--border-strong);
color: var(--text-muted);
padding: 9px;
border-radius: var(--radius);
cursor: pointer;
font-size: 13px;
font-family: inherit;
margin-top: 8px;
transition: all 0.15s;
display: block;
width: 100%;
text-align: center;
user-select: none;
box-sizing: border-box;
}
.add-card-btn:hover { background: var(--accent-soft); color: var(--accent-dark); border-color: var(--accent); border-style: solid; }
.add-card-btn.file-drag-over {
background: var(--accent-soft);
border-color: var(--accent);
border-style: solid;
border-width: 2px;
color: var(--accent-dark);
transform: scale(1.02);
}
.add-column-btn {
flex-shrink: 0;
width: 300px;
background: transparent;
border: 1px dashed var(--border-strong);
border-radius: var(--radius-lg);
color: var(--text-muted);
padding: 20px;
cursor: pointer;
font-size: 14px;
font-family: inherit;
transition: all 0.15s;
align-self: flex-start;
}
.add-column-btn:hover { background: var(--accent-soft); color: var(--accent-dark); border-color: var(--accent); }
/* === File-Upload-Zone im Karten-Modal === */
.file-upload-zone {
border: 2px dashed var(--border-strong);
border-radius: var(--radius);
padding: 16px;
text-align: center;
cursor: pointer;
transition: all 0.15s;
background: var(--surface-2);
}
.file-upload-zone:hover { border-color: var(--accent); background: var(--accent-soft); }
.file-upload-zone.drag-over { border-color: var(--accent); background: var(--accent-soft); }
.file-upload-zone input { display: none; }
.file-upload-zone .upload-icon { font-size: 28px; margin-bottom: 4px; color: var(--text-muted); }
.file-upload-zone .upload-text { font-size: 13px; color: var(--text-muted); }
.file-upload-zone .upload-hint { font-size: 11px; color: var(--text-soft); margin-top: 4px; }
.uploaded-files-list {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 10px;
}
.uploaded-file {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 6px;
font-size: 12px;
}
.uploaded-file .file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uploaded-file .remove-file {
background: transparent;
border: none;
color: var(--red);
cursor: pointer;
padding: 2px 6px;
font-size: 14px;
}
.upload-progress {
height: 3px;
background: var(--border);
border-radius: 2px;
overflow: hidden;
margin-top: 6px;
}
.upload-progress-bar {
height: 100%;
background: var(--accent);
transition: width 0.2s;
}
/* === Altes Chat-DOM (legacy, versteckt, aber im DOM, damit app.js nicht crasht) === */
.legacy-chat-dom,
.legacy-chat-dom * {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
position: absolute !important;
left: -9999px !important;
top: -9999px !important;
width: 0 !important;
height: 0 !important;
}
/* === Altes Chat-CSS entfernt, neues Chat-CSS weiter unten === */
/* === Termin-Link-Button === */
.termin-link-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--accent-soft);
color: var(--accent-dark);
text-decoration: none;
font-size: 13px;
transition: all 0.15s;
flex-shrink: 0;
border: none;
cursor: pointer;
font-family: inherit;
}
.termin-link-btn:hover {
background: var(--accent);
color: white;
transform: scale(1.1);
}
/* === News: Mehrere Link-Pillen === */
.news-item-links {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
/* === News-Modal: Link-Liste === */
.news-links-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.news-link-row {
display: flex;
gap: 6px;
align-items: center;
}
.news-link-row input {
flex: 1;
padding: 7px 10px;
border: 1px solid var(--border-strong);
border-radius: 8px;
font-size: 13px;
font-family: inherit;
min-width: 0;
}
.news-link-row input.url-input { flex: 2; }
.news-link-row .remove-link-btn {
background: transparent;
border: none;
color: var(--red);
font-size: 16px;
cursor: pointer;
padding: 4px 8px;
border-radius: 6px;
}
.news-link-row .remove-link-btn:hover { background: var(--red-soft); }
.add-link-btn {
background: transparent;
border: 1px dashed var(--border-strong);
padding: 6px 12px;
border-radius: 8px;
color: var(--text-muted);
cursor: pointer;
font-size: 12px;
font-family: inherit;
margin-top: 4px;
align-self: flex-start;
}
.add-link-btn:hover {
color: var(--accent-dark);
border-color: var(--accent);
background: var(--accent-soft);
}
.add-link-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* === Reactions-Tooltip (für Lehrer: zeigt Namen) === */
.reaction-btn[data-names]:hover::after {
content: attr(data-names);
position: absolute;
background: rgba(0,0,0,0.85);
color: white;
padding: 4px 8px;
border-radius: 6px;
font-size: 11px;
white-space: nowrap;
max-width: 240px;
z-index: 50;
margin-top: 28px;
pointer-events: none;
}
.reaction-btn { position: relative; }
@media (max-width: 600px) {
.site-header { padding: 12px 16px; }
.site-header h1 .title-line { font-size: 22px; }
.site-header h1 .title-sub { font-size: 10px; }
main { padding: 18px 16px 40px; }
.panel { padding: 16px; }
.pinnwaende-grid { grid-template-columns: 1fr; }
.pinnwand-detail-header { padding: 12px 16px; }
.pinnwand-detail-body { padding: 18px 16px; }
.section-header h2 { font-size: 22px; }
.chat-panel { width: 100%; right: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.card-pdf-preview .pdf-iframe-wrapper { height: 400px; }
}
/* === Paket Quiz 1: Quiz-System === */
/* ========== QUIZ SETTINGS CARDS (neue UI) ========== */
.quiz-settings-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 10px;
margin-top: 4px;
}
.quiz-setting-card {
position: relative;
display: block;
padding: 12px 14px;
border: 2px solid var(--border);
border-radius: 10px;
background: var(--surface);
cursor: pointer;
transition: all 0.15s ease;
margin: 0;
}
.quiz-setting-card:hover {
border-color: var(--accent);
background: #f8fafb;
}
.quiz-setting-card.active {
border-color: var(--accent);
background: #e8f5f5;
box-shadow: 0 2px 8px rgba(0, 128, 128, 0.08);
}
.quiz-setting-card input[type="checkbox"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.quiz-setting-card-content {
display: flex;
align-items: center;
gap: 10px;
}
.quiz-setting-card-icon {
font-size: 22px;
flex: 0 0 auto;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
}
.quiz-setting-card-body {
flex: 1 1 auto;
min-width: 0;
}
.quiz-setting-card-title {
font-weight: 600;
font-size: 14px;
color: var(--text);
margin-bottom: 2px;
text-transform: none;
letter-spacing: normal;
}
.quiz-setting-card-desc {
font-size: 12px;
color: var(--text-muted);
line-height: 1.3;
}
.quiz-setting-card.active .quiz-setting-card-title {
color: var(--accent);
}
.quiz-setting-card.active::before {
content: '✓';
position: absolute;
top: 8px;
right: 10px;
font-weight: 700;
color: var(--accent);
font-size: 14px;
}
/* ========== QUIZ MANAGEMENT CARDS ========== */
.quiz-mgmt-card {
display: flex;
flex-direction: column;
gap: 10px;
padding: 14px 16px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
margin-bottom: 8px;
transition: all 0.15s ease;
}
.quiz-mgmt-card:hover {
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
border-color: #d0d7de;
}
.quiz-mgmt-card.quiz-mgmt-active {
border-left: 4px solid #ef4444;
background: #fffafa;
}
.quiz-mgmt-card.quiz-mgmt-draft {
border-left: 4px solid #f59e0b;
background: #fffbf0;
}
.quiz-mgmt-card.quiz-mgmt-closed {
border-left: 4px solid #9ca3af;
opacity: 0.85;
}
.quiz-mgmt-card-main {
display: flex;
align-items: flex-start;
gap: 12px;
}
.quiz-mgmt-card-icon {
font-size: 28px;
flex: 0 0 auto;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: var(--surface-2);
border-radius: 10px;
}
.quiz-mgmt-card-body {
flex: 1 1 auto;
min-width: 0;
}
.quiz-mgmt-card-title {
font-size: 16px;
font-weight: 600;
color: var(--text);
margin-bottom: 6px;
}
.quiz-mgmt-card-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
font-size: 12px;
}
.quiz-mgmt-meta-item {
color: var(--text-muted);
padding: 2px 8px;
background: var(--surface-2);
border-radius: 12px;
}
.quiz-status-badge {
display: inline-block;
padding: 3px 10px;
border-radius: 12px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
}
.quiz-badge-active {
background: #fee2e2;
color: #b91c1c;
}
.quiz-badge-draft {
background: #fef3c7;
color: #92400e;
}
.quiz-badge-closed {
background: #e5e7eb;
color: #4b5563;
}
.quiz-mgmt-stats {
display: flex;
gap: 12px;
margin-top: 6px;
font-size: 12px;
color: var(--text-muted);
}
.quiz-mgmt-stats-empty {
font-style: italic;
color: #9ca3af;
}
.quiz-mgmt-card-actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding-top: 8px;
border-top: 1px dashed var(--border);
}
@media (max-width: 600px) {
.quiz-settings-grid { grid-template-columns: 1fr; }
.quiz-mgmt-card-actions .btn { font-size: 12px; padding: 6px 10px; }
}
/* =============================================================
=== Paket Chat - Premium Design (WhatsApp-inspired, cleaner) ===
============================================================= */
/* Farbpalette */
:root {
--wa-primary: #008069;
--wa-primary-dark: #005c4b;
--wa-primary-grad: linear-gradient(135deg, #00a884 0%, #008069 100%);
--wa-mine: #d9fdd3;
--wa-mine-dark: #c7f4bd;
--wa-other: #ffffff;
--wa-green: #25d366;
--wa-unread: #25d366;
--wa-read: #53bdeb;
--wa-chat-bg: #efeae2;
--wa-sidebar: #ffffff;
--wa-sidebar-head: #f0f2f5;
--wa-border: #e9edef;
--wa-text: #111b21;
--wa-text-sub: #667781;
--wa-text-mute: #8696a0;
--wa-hover: #f5f6f6;
--wa-active: #f0f2f5;
}
/* Chat-Button-Badge */
.chat-btn-badge {
position: absolute;
top: -6px;
right: -6px;
background: #ef4444;
color: white;
border-radius: 10px;
min-width: 20px;
height: 20px;
padding: 0 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
border: 2px solid white;
}
/* Modal-Hülle */
.chat-overlay {
z-index: 15000;
background: rgba(11, 20, 26, 0.65);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.chat-modal {
max-width: 1400px;
width: 95vw;
height: 92vh;
max-height: 960px;
padding: 0;
display: flex;
flex-direction: column;
background: var(--wa-sidebar);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.4);
}
.chat-wrap { display: flex; flex: 1; min-height: 0; height: 100%; }
/* Phase 1.56 — Chat als Vollbild-Seite: dezente Header-Leiste oben.
Verwendet Theme-Variablen (default: NLL-Teal), die ueber JS pro Theme gesetzt werden. */
.chat-page-header {
display: flex;
align-items: center;
gap: 14px;
padding: 10px 14px;
background: linear-gradient(135deg, var(--chat-theme-primary, #0d9488), var(--chat-theme-dark, #0f766e));
color: #fff;
border-radius: 14px 14px 0 0;
flex: 0 0 auto;
position: relative;
z-index: 10;
}
/* Phase 1.56 — "Design wählen"-Button in der Sidebar (links neben "Chats") */
.chat-theme-side-btn {
background: rgba(255,255,255,0.85);
border: 1px solid rgba(0,0,0,0.08);
color: #1f2937;
font-size: 12px;
font-weight: 600;
padding: 5px 10px;
border-radius: 6px;
cursor: pointer;
white-space: nowrap;
display: inline-flex; align-items: center; gap: 4px;
transition: all 0.15s;
margin-right: 8px;
}
.chat-theme-side-btn:hover {
background: #fff;
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
/* =================================================================
* THEME-OVERRIDES — pro Theme alle relevanten --wa-Variablen setzen.
* Wirkt automatisch durch das ganze Chat-Layout (Sidebar, Items,
* Bubbles, Eingabe, Send-Button, Hover-State, ...) weil das Chat-CSS
* konsequent var(--wa-*) verwendet.
* ================================================================= */
/* 🟢 NLL Default — Teal-Grün, M9-Logo-Farben */
#nll-chat-modal.theme-m9-default {
--wa-primary: #0d9488;
--wa-primary-dark: #0f766e;
--wa-primary-grad: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
--wa-mine: #ccfbf1;
--wa-mine-dark: #99f6e4;
--wa-other: #ffffff;
--wa-green: #10b981;
--wa-unread: #14b8a6;
--wa-read: #06b6d4;
--wa-chat-bg: #f0fdfa;
--wa-sidebar: #ffffff;
--wa-sidebar-head: #f0fdfa;
--wa-border: #e5e7eb;
--wa-text: #134e4a;
--wa-text-sub: #5e7570;
--wa-text-mute: #94a3b8;
--wa-hover: #f0fdfa;
--wa-active: #ccfbf1;
}
/* 🔵 Cool Ocean — Blau-Töne, sachlich */
#nll-chat-modal.theme-cool-ocean {
--wa-primary: #2563eb;
--wa-primary-dark: #1d4ed8;
--wa-primary-grad: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
--wa-mine: #dbeafe;
--wa-mine-dark: #bfdbfe;
--wa-other: #ffffff;
--wa-green: #06b6d4;
--wa-unread: #2563eb;
--wa-read: #0ea5e9;
--wa-chat-bg: #eff6ff;
--wa-sidebar: #ffffff;
--wa-sidebar-head: #eff6ff;
--wa-border: #e0e7ff;
--wa-text: #1e3a8a;
--wa-text-sub: #475569;
--wa-text-mute: #94a3b8;
--wa-hover: #eff6ff;
--wa-active: #dbeafe;
}
/* 🟣 Sunset — Lila/Pink, warm */
#nll-chat-modal.theme-sunset {
--wa-primary: #c026d3;
--wa-primary-dark: #a21caf;
--wa-primary-grad: linear-gradient(135deg, #e879f9 0%, #c026d3 50%, #db2777 100%);
--wa-mine: #fae8ff;
--wa-mine-dark: #f5d0fe;
--wa-other: #ffffff;
--wa-green: #ec4899;
--wa-unread: #c026d3;
--wa-read: #a78bfa;
--wa-chat-bg: #fdf4ff;
--wa-sidebar: #ffffff;
--wa-sidebar-head: #fdf4ff;
--wa-border: #f3e8ff;
--wa-text: #581c87;
--wa-text-sub: #6b21a8;
--wa-text-mute: #a78bfa;
--wa-hover: #fdf4ff;
--wa-active: #f3e8ff;
}
/* 🟠 Citrus — Orange/Gelb, energetisch */
#nll-chat-modal.theme-citrus {
--wa-primary: #ea580c;
--wa-primary-dark: #c2410c;
--wa-primary-grad: linear-gradient(135deg, #fb923c 0%, #ea580c 100%);
--wa-mine: #fef3c7;
--wa-mine-dark: #fde68a;
--wa-other: #ffffff;
--wa-green: #16a34a;
--wa-unread: #ea580c;
--wa-read: #f59e0b;
--wa-chat-bg: #fffbeb;
--wa-sidebar: #ffffff;
--wa-sidebar-head: #fffbeb;
--wa-border: #fed7aa;
--wa-text: #7c2d12;
--wa-text-sub: #9a3412;
--wa-text-mute: #c2965f;
--wa-hover: #fffbeb;
--wa-active: #fef3c7;
}
/* ⚫ Dark Mode — komplett dunkel, helle Akzente */
#nll-chat-modal.theme-dark-mode {
--wa-primary: #38bdf8;
--wa-primary-dark: #0ea5e9;
--wa-primary-grad: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
--wa-mine: #1e40af;
--wa-mine-dark: #1e3a8a;
--wa-other: #334155;
--wa-green: #22d3ee;
--wa-unread: #38bdf8;
--wa-read: #67e8f9;
--wa-chat-bg: #0f172a;
--wa-sidebar: #1e293b;
--wa-sidebar-head: #0f172a;
--wa-border: #334155;
--wa-text: #f1f5f9;
--wa-text-sub: #cbd5e1;
--wa-text-mute: #94a3b8;
--wa-hover: #334155;
--wa-active: #1e293b;
}
/* Dark-Mode Spezialfaelle: Eingabefelder + Search lesbar machen */
#nll-chat-modal.theme-dark-mode .chat-input,
#nll-chat-modal.theme-dark-mode .chat-search {
background: #334155;
color: #f1f5f9;
border-color: #475569;
}
#nll-chat-modal.theme-dark-mode .chat-input::placeholder,
#nll-chat-modal.theme-dark-mode .chat-search::placeholder {
color: #94a3b8;
}
#nll-chat-modal.theme-dark-mode .chat-modal,
#nll-chat-modal.theme-dark-mode .chat-main,
#nll-chat-modal.theme-dark-mode .chat-messages {
background: var(--wa-chat-bg);
}
/* Bubbles im Dark-Mode: helle Schrift auf dunklem Bg */
#nll-chat-modal.theme-dark-mode .chat-msg-bubble {
color: #f1f5f9;
}
/* In allen Light-Themes: Chat-Mitte (messages-Bereich) bekommt Theme-Bg */
#nll-chat-modal[class*="theme-"]:not(.theme-dark-mode) .chat-messages,
#nll-chat-modal[class*="theme-"]:not(.theme-dark-mode) .chat-main {
background: var(--wa-chat-bg);
}
.chat-page-brand {
display: flex; align-items: baseline; gap: 8px;
flex: 1;
margin-left: 6px;
user-select: none;
}
.chat-page-brand-mark {
font-weight: 800;
font-size: 18px;
letter-spacing: 0.5px;
color: #fff;
background: rgba(255,255,255,0.18);
padding: 4px 10px;
border-radius: 8px;
}
.chat-page-brand-sub {
font-size: 13px;
font-weight: 500;
opacity: 0.85;
}
.chat-page-actions {
display: flex; align-items: center; gap: 8px;
}
/* Im Vollbild-Modus: Header-Leiste ohne abgerundete Ecken */
.modal-overlay.modal-fullscreen-page .chat-page-header {
border-radius: 0;
}
/* Im Vollbild-Modus: Back-Button im Header sieht auf weissem Bg gut aus.
Bei chat-page-header ist Bg gruen → invertieren */
.modal-overlay.modal-fullscreen-page .chat-page-header .modal-back-btn {
background: rgba(255,255,255,0.92);
color: #134e4a;
}
.modal-overlay.modal-fullscreen-page .chat-page-header .modal-back-btn:hover {
background: #fff;
}
/* Bei mobilen Geraeten: Brand-Sub ausblenden, mehr Platz */
@media (max-width: 640px) {
.chat-page-brand-sub { display: none; }
.chat-page-header { padding: 8px 10px; gap: 8px; }
}
/* ===========================================================
SIDEBAR
=========================================================== */
.chat-sidebar {
width: 370px;
min-width: 320px;
max-width: 420px;
border-right: 1px solid var(--wa-border);
display: flex;
flex-direction: column;
background: var(--wa-sidebar);
position: relative;
}
.chat-sidebar-head {
padding: 12px 18px;
background: var(--wa-primary-grad);
color: white;
display: flex;
justify-content: space-between;
align-items: center;
min-height: 62px;
position: relative;
}
.chat-sidebar-head::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: rgba(0,0,0,0.1);
}
.chat-sidebar-head h3 {
margin: 0;
font-size: 18px;
font-weight: 600;
color: white;
display: flex;
align-items: center;
gap: 8px;
}
.chat-sidebar-head-actions { display: flex; gap: 4px; align-items: center; }
.chat-reports-btn {
background: #ef4444;
color: white;
border: 2px solid rgba(255,255,255,0.2);
border-radius: 14px;
padding: 5px 12px;
font-size: 12px;
cursor: pointer;
display: inline-flex;
gap: 4px;
align-items: center;
font-weight: 700;
animation: reportPulse 2s ease-in-out infinite;
}
.chat-reports-btn:hover { background: #dc2626; transform: scale(1.05); }
@keyframes reportPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}
.chat-close-btn {
background: rgba(255,255,255,0.15);
border: none;
font-size: 18px;
cursor: pointer;
width: 38px;
height: 38px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: white;
transition: background 0.15s;
}
.chat-close-btn:hover { background: rgba(255,255,255,0.28); }
/* Status-Banner (Lehrer: Erreichbar/Nicht erreichbar) */
.chat-sidebar-status {
padding: 10px 18px;
background: #fffbea;
border-bottom: 1px solid #fbdf88;
}
.chat-status-toggle {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
font-size: 13px;
color: #78350f;
font-weight: 600;
}
.chat-status-toggle input[type="checkbox"] { display: none; }
.chat-status-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
transition: all 0.2s;
position: relative;
}
.chat-status-dot.online {
background: #22c55e;
box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2);
}
.chat-status-dot.online::after {
content: "";
position: absolute;
inset: -4px;
border-radius: 50%;
background: rgba(34, 197, 94, 0.4);
animation: pulseDot 1.6s ease-out infinite;
}
@keyframes pulseDot {
0% { transform: scale(1); opacity: 1; }
100% { transform: scale(1.8); opacity: 0; }
}
.chat-status-dot.offline { background: #94a3b8; }
/* Suchleiste */
.chat-search-wrap {
padding: 8px 12px;
background: var(--wa-sidebar);
}
.chat-search {
width: 100%;
padding: 10px 14px 10px 42px;
border: none;
border-radius: 12px;
background: var(--wa-active);
background-image: url("data:image/svg+xml;utf8,
");
background-repeat: no-repeat;
background-position: 14px center;
font-size: 14px;
outline: none;
font-family: inherit;
color: var(--wa-text);
transition: all 0.2s;
}
.chat-search::placeholder { color: var(--wa-text-mute); }
.chat-search:focus {
background-color: white;
box-shadow: 0 0 0 2px var(--wa-primary);
}
.chat-sidebar-actions {
padding: 8px 12px 10px;
border-bottom: 1px solid var(--wa-border);
background: var(--wa-sidebar);
}
.chat-sidebar-actions .btn {
background: var(--wa-primary-grad);
border: none;
color: white;
font-weight: 600;
padding: 10px 14px;
border-radius: 10px;
font-size: 13px;
transition: transform 0.15s, box-shadow 0.15s;
box-shadow: 0 2px 6px rgba(0, 128, 105, 0.3);
}
.chat-sidebar-actions .btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(0, 128, 105, 0.4);
}
.chat-list {
flex: 1;
overflow-y: auto;
background: var(--wa-sidebar);
scrollbar-width: thin;
scrollbar-color: #cbd5e1 transparent;
}
.chat-list::-webkit-scrollbar { width: 6px; }
.chat-list::-webkit-scrollbar-track { background: transparent; }
.chat-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.chat-loading, .chat-empty-list {
padding: 50px 20px;
text-align: center;
color: var(--wa-text-mute);
font-size: 14px;
}
/* List-Item - WhatsApp-like */
.chat-li {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 16px;
cursor: pointer;
border-bottom: 1px solid #f3f4f6;
transition: background 0.12s;
position: relative;
user-select: none;
}
.chat-li:hover { background: var(--wa-hover); }
.chat-li.active { background: var(--wa-hover); }
.chat-li.active::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: var(--wa-primary);
}
/* Avatar */
.chat-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 17px;
flex-shrink: 0;
text-transform: uppercase;
user-select: none;
box-shadow: 0 2px 4px rgba(0,0,0,0.12);
letter-spacing: 0.5px;
}
.chat-avatar-sm {
width: 40px;
height: 40px;
font-size: 14px;
}
.chat-avatar-group {
font-size: 22px !important;
background: var(--wa-primary-grad) !important;
}
.chat-li-content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.chat-li-top {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 10px;
}
.chat-li-name {
font-weight: 600;
font-size: 16px;
color: var(--wa-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
display: flex;
align-items: center;
gap: 4px;
}
.chat-li-time {
font-size: 12px;
color: var(--wa-text-mute);
flex-shrink: 0;
font-variant-numeric: tabular-nums;
font-weight: 500;
}
.chat-li.has-unread .chat-li-time { color: var(--wa-primary); font-weight: 700; }
.chat-li-bottom {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.chat-li-preview {
font-size: 14px;
color: var(--wa-text-sub);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
line-height: 1.35;
}
.chat-li-preview.empty {
font-style: italic;
opacity: 0.6;
}
.chat-li-preview-prefix {
color: var(--wa-text-mute);
font-weight: 500;
}
.chat-li-typing {
font-size: 14px;
color: var(--wa-primary);
font-style: italic;
font-weight: 500;
}
.chat-li-unread {
background: var(--wa-unread);
color: white;
min-width: 22px;
height: 22px;
padding: 0 8px;
border-radius: 11px;
font-size: 11px;
font-weight: 800;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 2px 4px rgba(37, 211, 102, 0.35);
}
.chat-li-muted {
font-size: 13px;
opacity: 0.55;
}
/* ===========================================================
MAIN-BEREICH (rechts)
=========================================================== */
.chat-main {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
background: var(--wa-chat-bg);
/* Subtiles Doodle-Pattern (WhatsApp-like) */
background-image:
radial-gradient(circle at 15% 20%, rgba(255,255,255,0.25) 1.5px, transparent 2px),
radial-gradient(circle at 85% 60%, rgba(255,255,255,0.2) 1px, transparent 2px),
radial-gradient(circle at 40% 80%, rgba(255,255,255,0.15) 1.5px, transparent 2px),
radial-gradient(circle at 70% 30%, rgba(255,255,255,0.18) 1px, transparent 2px),
linear-gradient(var(--wa-chat-bg), var(--wa-chat-bg));
background-size: 120px 120px, 100px 100px, 80px 80px, 140px 140px, 100% 100%;
background-position: 0 0, 50px 30px, 20px 60px, 80px 80px, 0 0;
}
.chat-main-head {
padding: 12px 18px;
border-bottom: 1px solid var(--wa-border);
display: flex;
align-items: center;
gap: 14px;
flex-shrink: 0;
background: var(--wa-sidebar-head);
min-height: 62px;
}
.chat-back-btn {
display: none;
background: transparent;
border: none;
font-size: 22px;
cursor: pointer;
padding: 6px 10px;
border-radius: 8px;
color: var(--wa-text-sub);
}
.chat-back-btn:hover { background: #e9edef; }
.chat-main-head-info { flex: 1; min-width: 0; }
.chat-main-head-name {
font-weight: 600;
font-size: 16px;
color: var(--wa-text);
line-height: 1.2;
}
.chat-main-head-meta {
font-size: 13px;
color: var(--wa-text-sub);
margin-top: 2px;
}
.chat-main-head-actions { display: flex; gap: 4px; flex-shrink: 0; }
.chat-icon-btn {
background: transparent;
border: none;
font-size: 18px;
cursor: pointer;
width: 40px;
height: 40px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--wa-text-sub);
transition: background 0.15s;
}
.chat-icon-btn:hover { background: #e9edef; }
/* Nachrichten-Scrollcontainer */
.chat-messages {
flex: 1;
overflow-y: auto;
padding: 16px 6%;
display: flex;
flex-direction: column;
scrollbar-width: thin;
scrollbar-color: #9ca3af transparent;
position: relative;
}
.chat-messages::-webkit-scrollbar { width: 6px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb { background: #9ca3af; border-radius: 3px; }
/* Empty-State - richtig schön */
.chat-empty-main, .chat-empty-messages {
text-align: center;
padding: 40px 20px;
margin: auto;
color: var(--wa-text-sub);
animation: fadeInUp 0.4s ease;
}
.chat-empty-ico {
width: 140px;
height: 140px;
margin: 0 auto 16px;
background: linear-gradient(135deg, rgba(255,255,255,0.7), rgba(255,255,255,0.3));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 64px;
box-shadow: 0 12px 30px rgba(0,0,0,0.08);
backdrop-filter: blur(8px);
}
/* Phase 1.56 — M9-Logo statt Sprechblase im Empty-State */
.chat-empty-logo {
width: 180px;
height: auto;
max-height: 180px;
margin: 0 auto 22px;
display: block;
object-fit: contain;
filter: drop-shadow(0 12px 30px rgba(0,0,0,0.12));
animation: chatLogoFloat 3s ease-in-out infinite;
}
@keyframes chatLogoFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
@media (max-width: 640px) {
.chat-empty-logo { width: 130px; max-height: 130px; margin-bottom: 16px; }
}
.chat-empty-title {
font-size: 20px;
font-weight: 700;
color: var(--wa-text);
margin: 0 0 6px;
}
.chat-empty-sub {
font-size: 14px;
color: var(--wa-text-sub);
max-width: 320px;
margin: 0 auto;
line-height: 1.5;
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Datums-Trenner */
.chat-date-separator {
text-align: center;
margin: 14px 0 10px;
display: flex;
justify-content: center;
}
.chat-date-separator span {
display: inline-block;
padding: 6px 14px;
background: rgba(225, 245, 254, 0.92);
color: var(--wa-text-sub);
border-radius: 10px;
font-size: 12.5px;
font-weight: 500;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
text-transform: capitalize;
}
/* ===========================================================
NACHRICHTEN-BUBBLES (vereinfacht, robust, schön)
=========================================================== */
.chat-msg {
margin-bottom: 4px;
max-width: 72%;
display: flex;
flex-direction: column;
position: relative;
animation: msgIn 0.18s ease-out;
}
@keyframes msgIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
.chat-msg.mine { align-self: flex-end; align-items: flex-end; }
.chat-msg.other { align-self: flex-start; align-items: flex-start; }
.chat-msg.deleted { opacity: 0.7; max-width: 60%; }
.chat-msg.chat-msg-highlight .chat-msg-bubble {
animation: highlightPulse 1.8s ease;
}
@keyframes highlightPulse {
0%, 100% { box-shadow: 0 1px 1px rgba(0,0,0,0.1); }
40% { box-shadow: 0 0 0 8px rgba(251, 191, 36, 0.45); transform: scale(1.02); }
}
.chat-msg-sender {
font-size: 13px;
font-weight: 600;
margin: 0 12px 3px;
letter-spacing: 0.1px;
}
.chat-msg-broadcast {
display: inline-block;
font-size: 10px;
color: #b45309;
background: #fef3c7;
padding: 3px 9px;
border-radius: 10px;
font-weight: 700;
margin: 0 0 4px 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.chat-msg-bubble {
padding: 8px 12px 8px 12px;
border-radius: 10px;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
position: relative;
word-wrap: break-word;
overflow-wrap: anywhere;
max-width: 100%;
line-height: 1.4;
}
/* Eigene Nachricht (grüne Bubble rechts) */
.chat-msg.mine .chat-msg-bubble {
background: var(--wa-mine);
color: var(--wa-text);
border-radius: 10px 10px 3px 10px;
}
/* Fremde Nachricht (weiße Bubble links) */
.chat-msg.other .chat-msg-bubble {
background: var(--wa-other);
color: var(--wa-text);
border-radius: 3px 10px 10px 10px;
}
.chat-msg.deleted .chat-msg-bubble.deleted-bubble {
background: rgba(255,255,255,0.7) !important;
color: var(--wa-text-mute);
font-style: italic;
border: 1px dashed var(--wa-border);
}
.chat-msg-text {
font-size: 14.5px;
line-height: 1.42;
white-space: pre-wrap;
word-wrap: break-word;
color: var(--wa-text);
}
.chat-msg-text a {
color: #027eb5;
text-decoration: underline;
word-break: break-all;
}
.chat-msg-foot {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 4px;
margin-top: 2px;
font-size: 11px;
color: var(--wa-text-mute);
line-height: 14px;
}
.chat-msg-time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.chat-msg-edited { font-style: italic; font-size: 10px; opacity: 0.8; }
.chat-msg-read {
color: var(--wa-text-mute);
font-weight: 700;
font-size: 14px;
line-height: 1;
margin-left: 2px;
}
.chat-msg-read.read { color: var(--wa-read); }
/* Zitat innerhalb Bubble */
.chat-msg-quote {
padding: 7px 12px 7px 14px;
border-left: 4px solid var(--wa-primary);
background: rgba(0, 128, 105, 0.07);
border-radius: 6px;
margin-bottom: 6px;
cursor: pointer;
overflow: hidden;
transition: background 0.15s;
}
.chat-msg-quote:hover { background: rgba(0, 128, 105, 0.15); }
.chat-msg-quote-author {
font-size: 12.5px;
font-weight: 600;
color: var(--wa-primary);
margin-bottom: 2px;
}
.chat-msg-quote-text {
font-size: 13px;
color: var(--wa-text-sub);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.chat-msg-quote.chat-msg-quote-missing {
font-style: italic;
color: var(--wa-text-mute);
font-size: 12px;
border-left-color: #cbd5e1;
}
.chat-msg.mine .chat-msg-quote {
background: rgba(0, 0, 0, 0.05);
}
.chat-msg.mine .chat-msg-quote:hover { background: rgba(0, 0, 0, 0.1); }
/* Reaktionen */
.chat-msg-reactions {
display: flex;
gap: 3px;
margin-top: -6px;
margin-left: 6px;
margin-right: 6px;
flex-wrap: wrap;
z-index: 2;
position: relative;
}
.chat-reaction-badge {
padding: 2px 8px;
background: white;
border: 1px solid var(--wa-border);
border-radius: 14px;
font-size: 13px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 3px;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
transition: transform 0.1s;
}
.chat-reaction-badge span {
font-size: 11px;
color: var(--wa-text-sub);
font-weight: 600;
}
.chat-reaction-badge:hover { transform: scale(1.08); border-color: var(--wa-primary); }
/* Action-Menü */
.chat-msg-actions {
display: none;
position: absolute;
top: -18px;
right: 4px;
background: white;
border: 1px solid var(--wa-border);
border-radius: 22px;
padding: 3px 5px;
box-shadow: 0 4px 14px rgba(0,0,0,0.15);
gap: 0;
z-index: 5;
}
.chat-msg.mine .chat-msg-actions { right: auto; left: 4px; }
.chat-msg:hover .chat-msg-actions { display: flex; }
.chat-msg-action {
background: transparent;
border: none;
padding: 6px 10px;
cursor: pointer;
border-radius: 16px;
font-size: 14px;
line-height: 1;
}
.chat-msg-action:hover { background: var(--wa-active); }
.chat-msg-action.chat-msg-del:hover { background: #fee2e2; }
.chat-msg-action.chat-msg-report:hover { background: #fff7ed; }
.chat-reaction-picker {
position: absolute;
top: 24px;
right: 4px;
background: white;
border: 1px solid var(--wa-border);
border-radius: 26px;
padding: 4px 8px;
box-shadow: 0 8px 24px rgba(0,0,0,0.18);
display: flex;
gap: 2px;
z-index: 10;
animation: reactionPopIn 0.15s ease;
}
@keyframes reactionPopIn {
from { opacity: 0; transform: translateY(-6px) scale(0.9); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.chat-msg.mine .chat-reaction-picker { right: auto; left: 4px; }
.chat-reaction-picker-btn {
background: transparent;
border: none;
padding: 6px 8px;
font-size: 22px;
cursor: pointer;
border-radius: 50%;
transition: transform 0.12s;
line-height: 1;
}
.chat-reaction-picker-btn:hover { background: var(--wa-active); transform: scale(1.3); }
.chat-typing-msg {
align-self: flex-start;
background: white;
padding: 10px 16px;
border-radius: 16px;
border-top-left-radius: 4px;
font-size: 13px;
color: var(--wa-primary);
font-style: italic;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
margin: 4px 0;
max-width: 180px;
display: flex;
gap: 6px;
align-items: center;
}
.chat-typing-msg::before {
content: "";
width: 6px;
height: 6px;
background: var(--wa-primary);
border-radius: 50%;
animation: typingDot 1s ease-in-out infinite;
}
@keyframes typingDot {
0%, 100% { opacity: 0.3; }
50% { opacity: 1; }
}
/* Quote-Preview oberhalb Input */
.chat-quote-preview {
padding: 0;
display: none;
background: var(--wa-sidebar-head);
border-top: 1px solid var(--wa-border);
}
.chat-quote-inner {
padding: 10px 18px;
background: white;
border-left: 4px solid var(--wa-primary);
margin: 8px 14px;
border-radius: 8px;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 10px;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.chat-quote-inner.edit { border-left-color: #0891b2; background: #ecfeff; }
.chat-quote-label {
font-size: 12.5px;
font-weight: 700;
color: var(--wa-primary);
margin-bottom: 3px;
}
.chat-quote-inner.edit .chat-quote-label { color: #0891b2; }
.chat-quote-text-preview {
font-size: 13px;
color: var(--wa-text-sub);
overflow: hidden;
text-overflow: ellipsis;
max-width: 400px;
}
.chat-quote-cancel {
background: transparent;
border: none;
cursor: pointer;
font-size: 18px;
padding: 6px 12px;
border-radius: 50%;
color: var(--wa-text-sub);
transition: background 0.15s;
}
.chat-quote-cancel:hover { background: var(--wa-active); }
/* Input-Bereich */
.chat-input-wrap {
padding: 10px 16px;
display: flex;
gap: 12px;
align-items: flex-end;
background: var(--wa-sidebar-head);
flex-shrink: 0;
border-top: 1px solid var(--wa-border);
}
.chat-input {
flex: 1;
padding: 11px 16px;
border: none;
border-radius: 22px;
font-family: inherit;
font-size: 15px;
resize: none;
max-height: 120px;
line-height: 1.4;
background: white;
outline: none;
color: var(--wa-text);
box-shadow: 0 1px 2px rgba(0,0,0,0.08);
transition: box-shadow 0.15s;
}
.chat-input:focus {
box-shadow: 0 0 0 2px rgba(0, 128, 105, 0.3);
}
.chat-input::placeholder { color: var(--wa-text-mute); }
.chat-send-btn {
background: var(--wa-primary-grad);
color: white;
border: none;
width: 48px;
height: 48px;
border-radius: 50%;
cursor: pointer;
font-size: 20px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s;
box-shadow: 0 3px 10px rgba(0, 128, 105, 0.4);
}
.chat-send-btn:hover { transform: scale(1.08) rotate(-5deg); box-shadow: 0 5px 14px rgba(0, 128, 105, 0.5); }
.chat-send-btn:active { transform: scale(0.96); }
.chat-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* Error-Banner */
.chat-error-banner {
background: #fef2f2;
color: #991b1b;
border-top: 1px solid #fecaca;
padding: 12px 16px;
font-size: 13px;
display: flex;
align-items: center;
gap: 10px;
animation: errorSlideIn 0.3s ease;
}
@keyframes errorSlideIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Members-Modal */
.chat-members-list {
display: flex;
flex-direction: column;
gap: 4px;
max-height: 400px;
overflow-y: auto;
}
.chat-member-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid transparent;
transition: background 0.15s;
}
.chat-member-item:hover { background: var(--wa-hover); }
/* Reports */
.chat-report-item {
border: 1px solid #fecaca;
background: #fef2f2;
border-radius: 12px;
padding: 16px;
margin-bottom: 12px;
box-shadow: 0 2px 4px rgba(239, 68, 68, 0.1);
}
.chat-report-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 4px;
}
.chat-report-reason {
font-size: 13px;
color: #7f1d1d;
margin: 8px 0;
font-style: italic;
padding: 6px 10px;
background: rgba(239, 68, 68, 0.08);
border-radius: 6px;
}
.chat-report-snapshot {
padding: 10px 14px;
background: white;
border-radius: 8px;
font-size: 14px;
margin: 10px 0;
border-left: 3px solid #ef4444;
line-height: 1.4;
}
.chat-report-actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 10px;
}
/* Broadcast */
.chat-bc-quick {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border, #e5e7eb);
}
.chat-bc-list {
max-height: 300px;
overflow-y: auto;
border: 1px solid var(--border, #e5e7eb);
border-radius: 10px;
padding: 10px;
background: #fafafa;
}
.chat-bc-classgroup { margin-bottom: 12px; }
.chat-bc-class-label {
font-weight: 700;
color: var(--wa-primary);
padding: 5px 0;
font-size: 13px;
border-bottom: 1px solid #f3f4f6;
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.chat-bc-user {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
border-radius: 6px;
cursor: pointer;
transition: background 0.1s;
}
.chat-bc-user:hover { background: #f3f4f6; }
.chat-bc-user input[type="checkbox"] {
width: 18px;
height: 18px;
cursor: pointer;
accent-color: var(--wa-primary);
}
/* Mobile (< 760px) */
@media (max-width: 760px) {
.chat-overlay { padding: 0 !important; }
.chat-modal {
width: 100vw !important;
/* 100dvh = dynamic viewport height: berücksichtigt Browser-Toolbars (iOS Safari, Android Chrome).
Fallback 100vh für ältere Browser, 100dvh für neuere. */
height: 100vh !important;
height: 100dvh !important;
max-height: 100vh !important;
max-height: 100dvh !important;
max-width: 100vw !important;
border-radius: 0 !important;
margin: 0 !important;
/* Notch & Safe-Area-Schutz für iPhones (Notch oben, Home-Indikator unten) */
padding-top: env(safe-area-inset-top, 0px);
padding-bottom: env(safe-area-inset-bottom, 0px);
padding-left: env(safe-area-inset-left, 0px);
padding-right: env(safe-area-inset-right, 0px);
box-sizing: border-box;
}
.chat-sidebar {
width: 100%;
max-width: 100%;
min-width: 0;
border-right: none;
}
.chat-main { display: none; }
.chat-mobile-main .chat-sidebar { display: none; }
.chat-mobile-main .chat-main { display: flex; }
.chat-back-btn { display: block; }
.chat-msg { max-width: 88%; }
.chat-messages { padding: 12px 3%; }
/* Header & Footer: Mindesthöhen damit sie nicht zerquetscht werden */
.chat-main-head { padding: 10px 14px; flex-shrink: 0; }
.chat-sidebar-head { padding: 12px 14px; flex-shrink: 0; }
.chat-input-wrap {
padding: 8px 10px;
flex-shrink: 0;
/* Extra Abstand unten falls Browser-Tab-Bar unten reinragt */
padding-bottom: max(8px, env(safe-area-inset-bottom, 8px));
}
.chat-search-wrap { padding: 8px 10px; flex-shrink: 0; }
.chat-input { font-size: 16px; } /* iOS Zoom-Schutz */
.chat-msg-actions {
display: flex;
position: static;
background: transparent;
border: none;
box-shadow: none;
margin-top: 3px;
opacity: 0.55;
}
.chat-msg:hover .chat-msg-actions { opacity: 1; }
.chat-msg-action { padding: 4px 10px; font-size: 13px; }
.chat-avatar { width: 48px; height: 48px; font-size: 16px; }
.chat-li { padding: 11px 14px; gap: 12px; }
.chat-empty-ico { width: 110px; height: 110px; font-size: 48px; }
.chat-empty-title { font-size: 18px; }
}
/* === Paket Lehrer-ToDos === */
/* === Paket Lehrer-ToDos === */
.lt-card {
background: linear-gradient(135deg, #fef3c7 0%, #fefce8 100%);
border: 1px solid #fbbf24;
border-left: 4px solid #f59e0b;
padding: 14px 16px;
margin-bottom: 10px;
}
.lt-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
gap: 10px;
}
.lt-title {
display: flex;
align-items: center;
gap: 8px;
font-weight: 700;
font-size: 16px;
color: #92400e;
}
.lt-icon {
font-size: 20px;
}
.lt-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 24px;
padding: 0 8px;
background: #f59e0b;
color: white;
border-radius: 12px;
font-size: 12px;
font-weight: 700;
}
.lt-add-btn {
flex-shrink: 0;
}
.lt-empty {
text-align: center;
padding: 16px;
color: #92400e;
opacity: 0.8;
font-size: 13px;
}
.lt-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.lt-item {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 12px;
background: white;
border: 1px solid #fde68a;
border-radius: 8px;
transition: all 0.15s;
}
.lt-item:hover {
box-shadow: 0 2px 6px rgba(0,0,0,0.06);
border-color: #fbbf24;
}
.lt-item.lt-done {
opacity: 0.55;
background: #fafaf9;
}
.lt-item.lt-done .lt-text {
text-decoration: line-through;
color: #78716c;
}
.lt-item.lt-prio-high {
border-left: 4px solid #ef4444;
background: linear-gradient(90deg, #fef2f2 0%, white 30%);
}
.lt-item.lt-due-overdue {
border-left: 4px solid #dc2626;
background: linear-gradient(90deg, #fee2e2 0%, white 30%);
}
.lt-item.lt-due-today {
border-left: 4px solid #f59e0b;
background: linear-gradient(90deg, #fef3c7 0%, white 30%);
}
.lt-item.lt-due-soon {
border-left: 4px solid #eab308;
}
/* Wenn high-prio UND überfällig: rot gewinnt */
.lt-item.lt-prio-high.lt-due-overdue {
border-left: 4px solid #dc2626;
}
/* Checkbox */
.lt-check-wrap {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
flex-shrink: 0;
cursor: pointer;
margin-top: 1px;
}
.lt-check-wrap input[type="checkbox"] {
position: absolute;
opacity: 0;
cursor: pointer;
width: 100%;
height: 100%;
margin: 0;
}
.lt-checkmark {
width: 22px;
height: 22px;
border: 2px solid #d1d5db;
border-radius: 6px;
background: white;
display: inline-block;
position: relative;
transition: all 0.15s;
}
.lt-check-wrap:hover .lt-checkmark {
border-color: #f59e0b;
}
.lt-check-wrap input[type="checkbox"]:checked ~ .lt-checkmark {
background: #22c55e;
border-color: #22c55e;
}
.lt-check-wrap input[type="checkbox"]:checked ~ .lt-checkmark::after {
content: '';
position: absolute;
top: 3px;
left: 7px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.lt-content {
flex: 1;
min-width: 0;
}
.lt-text {
font-size: 14px;
color: #1f2937;
word-wrap: break-word;
line-height: 1.4;
}
.lt-prio-flag {
display: inline-block;
margin-right: 2px;
}
.lt-due {
font-size: 12px;
color: #6b7280;
margin-top: 3px;
}
.lt-item.lt-due-overdue .lt-due {
color: #dc2626;
font-weight: 600;
}
.lt-item.lt-due-today .lt-due {
color: #b45309;
font-weight: 600;
}
.lt-actions {
display: flex;
gap: 2px;
flex-shrink: 0;
opacity: 0.5;
transition: opacity 0.15s;
}
.lt-item:hover .lt-actions {
opacity: 1;
}
.lt-action-btn {
background: transparent;
border: none;
padding: 4px 6px;
cursor: pointer;
border-radius: 4px;
font-size: 14px;
line-height: 1;
}
.lt-action-btn:hover {
background: #f3f4f6;
}
.lt-action-btn.lt-del:hover {
background: #fee2e2;
}
/* Done-Sektion */
.lt-done-section {
margin-top: 10px;
padding-top: 10px;
border-top: 1px dashed #fde68a;
}
.lt-done-toggle {
background: transparent;
border: none;
color: #92400e;
cursor: pointer;
font-size: 13px;
padding: 4px 0;
font-weight: 500;
}
.lt-done-toggle:hover {
color: #78350f;
}
.lt-list-done {
margin-top: 8px;
}
/* Editor-Modal */
.lt-prio-picker {
display: flex;
gap: 8px;
}
.lt-prio-btn {
flex: 1;
padding: 10px 8px;
border: 2px solid var(--border);
background: var(--surface);
border-radius: 8px;
cursor: pointer;
font-family: inherit;
font-size: 14px;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
transition: all 0.15s;
}
.lt-prio-btn:hover {
border-color: #f59e0b;
}
.lt-prio-btn.active[data-prio="normal"] {
background: #e0f2fe;
border-color: #0891b2;
color: #0e7490;
}
.lt-prio-btn.active[data-prio="high"] {
background: #fee2e2;
border-color: #ef4444;
color: #b91c1c;
}
.lt-quick-dates {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin-top: 8px;
padding-top: 12px;
border-top: 1px solid var(--border);
}
.lt-quick-dates small {
margin-right: 6px;
}
/* Mobile */
@media (max-width: 600px) {
.lt-header {
flex-direction: column;
align-items: flex-start;
}
.lt-add-btn {
align-self: stretch;
}
.lt-actions {
opacity: 1;
}
}
/* === Paket Quiz 2: Wettkampfmodus (Kahoot-Style) === */
/* WK Modal */
.wk-overlay .wk-modal {
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
color: white;
}
.wk-overlay .wk-header {
background: rgba(255,255,255,0.05);
border-bottom: 1px solid rgba(255,255,255,0.1);
color: white;
}
.wk-overlay .wk-header h3 { color: white; }
.wk-overlay .modal-body { color: white; }
.wk-overlay .modal-footer {
background: rgba(255,255,255,0.05);
border-top: 1px solid rgba(255,255,255,0.1);
}
/* Nickname-Input */
.wk-nickname-input {
width: 100%;
max-width: 320px;
padding: 16px;
font-size: 22px;
text-align: center;
border: 3px solid #0891b2;
border-radius: 12px;
background: white;
color: #1e293b;
font-weight: 600;
box-shadow: 0 4px 20px rgba(8,145,178,0.3);
}
.wk-nickname-input:focus {
outline: none;
border-color: #22c55e;
box-shadow: 0 4px 25px rgba(34,197,94,0.4);
}
/* Lobby */
.wk-lobby-count {
display: inline-block;
padding: 8px 20px;
background: rgba(34,197,94,0.15);
border: 1px solid #22c55e;
border-radius: 20px;
color: #86efac;
font-weight: 600;
margin-bottom: 15px;
}
.wk-lobby-players {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
margin-top: 15px;
max-height: 200px;
overflow-y: auto;
}
.wk-lobby-player {
padding: 6px 14px;
background: rgba(255,255,255,0.1);
border-radius: 16px;
font-size: 14px;
color: white;
}
.wk-lobby-player.is-me {
background: linear-gradient(135deg, #fbbf24, #f59e0b);
color: #1e293b;
font-weight: 700;
box-shadow: 0 2px 10px rgba(245,158,11,0.4);
}
/* Countdown-Bar (Schüler) */
.wk-countdown-bar {
position: relative;
height: 40px;
background: rgba(255,255,255,0.1);
border-radius: 20px;
overflow: hidden;
margin-bottom: 20px;
}
.wk-countdown-fill {
height: 100%;
width: 100%;
background: #22c55e;
transition: width 0.2s linear, background 0.3s ease;
border-radius: 20px;
}
.wk-countdown-label {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: 700;
color: white;
text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}
/* Frage im WK-Modus */
.wk-question-wrap {
padding: 10px 0;
}
.wk-question-title {
font-size: 22px;
font-weight: 700;
color: white;
margin: 0 0 8px;
line-height: 1.3;
}
.wk-question-meta {
font-size: 13px;
color: rgba(255,255,255,0.6);
margin-bottom: 18px;
}
.wk-answer-area {
margin-bottom: 14px;
}
.wk-answer-area .quiz-mc-label {
background: rgba(255,255,255,0.08);
border: 2px solid rgba(255,255,255,0.15);
color: white;
}
.wk-answer-area .quiz-mc-label:hover {
background: rgba(255,255,255,0.15);
border-color: #22c55e;
}
.wk-answer-area .quiz-mc-label:has(input:checked) {
background: rgba(34,197,94,0.2);
border-color: #22c55e;
}
.wk-answer-area .quiz-ft-input-big {
background: white;
color: #1e293b;
}
.wk-answer-area .quiz-cloze-text,
.wk-answer-area .quiz-matching-left,
.wk-answer-area .quiz-ordering-label {
background: rgba(255,255,255,0.1);
color: white;
}
.wk-answer-area select {
background: white;
color: #1e293b;
}
.wk-btn-submit {
width: 100%;
padding: 16px;
font-size: 18px;
font-weight: 700;
background: linear-gradient(135deg, #f59e0b, #d97706);
border: none;
color: white;
border-radius: 10px;
cursor: pointer;
transition: all 0.2s;
}
.wk-btn-submit:hover:not(:disabled) {
background: linear-gradient(135deg, #f59e0b, #b45309);
transform: scale(1.02);
box-shadow: 0 4px 20px rgba(245,158,11,0.4);
}
/* Warten-Bildschirm */
.wk-waiting {
text-align: center;
padding: 40px 20px;
color: white;
}
.wk-countdown-mini {
display: inline-block;
padding: 6px 16px;
background: rgba(245,158,11,0.2);
border: 1px solid #f59e0b;
border-radius: 20px;
color: #fcd34d;
font-weight: 600;
margin-bottom: 15px;
}
/* Reveal-Phase Schüler */
.wk-reveal-wrap {
padding: 10px 0;
color: white;
}
.wk-answer-result {
text-align: center;
padding: 20px;
border-radius: 12px;
margin-bottom: 20px;
}
.wk-answer-result.correct {
background: linear-gradient(135deg, rgba(34,197,94,0.2), rgba(22,163,74,0.2));
border: 2px solid #22c55e;
}
.wk-answer-result.wrong {
background: linear-gradient(135deg, rgba(239,68,68,0.2), rgba(220,38,38,0.2));
border: 2px solid #ef4444;
}
.wk-answer-result.skipped {
background: rgba(107,114,128,0.2);
border: 2px solid #9ca3af;
}
.wk-points-badge {
display: inline-block;
padding: 8px 20px;
background: linear-gradient(135deg, #fbbf24, #f59e0b);
color: #1e293b;
border-radius: 20px;
font-weight: 700;
font-size: 18px;
margin-top: 10px;
box-shadow: 0 2px 10px rgba(245,158,11,0.3);
}
.wk-points-badge.wrong {
background: rgba(107,114,128,0.3);
color: white;
box-shadow: none;
}
.wk-my-score {
text-align: center;
padding: 14px;
background: rgba(255,255,255,0.08);
border-radius: 10px;
}
.wk-my-score-label {
font-size: 12px;
color: rgba(255,255,255,0.6);
margin-bottom: 4px;
}
.wk-my-score-val {
font-size: 24px;
font-weight: 700;
color: #fbbf24;
}
/* Leaderboard Schüler */
.wk-leaderboard {
display: flex;
flex-direction: column;
gap: 6px;
padding: 10px;
background: rgba(255,255,255,0.05);
border-radius: 10px;
}
.wk-lb-row {
display: grid;
grid-template-columns: 50px 1fr auto;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: rgba(255,255,255,0.05);
border-radius: 8px;
font-size: 15px;
color: white;
transition: all 0.3s;
}
.wk-lb-row.is-me {
background: linear-gradient(90deg, rgba(251,191,36,0.25), rgba(245,158,11,0.15));
border: 2px solid #fbbf24;
}
.wk-lb-row.rank-1 { background: linear-gradient(90deg, rgba(250,204,21,0.3), rgba(251,191,36,0.15)); }
.wk-lb-row.rank-2 { background: linear-gradient(90deg, rgba(203,213,225,0.3), rgba(203,213,225,0.1)); }
.wk-lb-row.rank-3 { background: linear-gradient(90deg, rgba(217,119,6,0.3), rgba(217,119,6,0.1)); }
.wk-lb-medal {
font-size: 20px;
font-weight: 700;
text-align: center;
}
.wk-lb-name {
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wk-lb-score {
font-weight: 700;
color: #fbbf24;
font-variant-numeric: tabular-nums;
}
.wk-lb-separator {
text-align: center;
color: rgba(255,255,255,0.3);
}
/* Finished */
.wk-finished-wrap { color: white; }
.wk-final-stats {
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
margin-top: 15px;
font-size: 16px;
}
.wk-final-stats strong { color: #fbbf24; font-size: 20px; }
/* ========== BEAMER (Lehrer-Steuerung) ========== */
.wk-beamer-overlay {
position: fixed;
inset: 0;
background: linear-gradient(135deg, #1e293b 0%, #0f172a 50%, #1e1b4b 100%);
z-index: 20000;
display: none;
flex-direction: column;
color: white;
padding: 20px;
overflow-y: auto;
}
.wk-beamer-overlay.active { display: flex; }
.wk-beamer-overlay .poll-present-close {
position: fixed;
top: 20px;
right: 20px;
background: rgba(255,255,255,0.1);
color: white;
border: 1px solid rgba(255,255,255,0.3);
border-radius: 50%;
width: 44px;
height: 44px;
font-size: 24px;
cursor: pointer;
z-index: 10;
}
.wk-beamer-overlay .poll-present-close:hover {
background: rgba(239,68,68,0.3);
}
#wk-beamer-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
max-width: 1400px;
width: 100%;
margin: 0 auto;
}
.wk-beamer-controls {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 12px;
z-index: 5;
}
.wk-beamer-btn {
padding: 14px 28px;
font-size: 18px;
font-weight: 700;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
/* Beamer Lobby */
.wk-beamer-lobby {
text-align: center;
}
.wk-beamer-h1 {
font-size: 48px;
font-weight: 800;
margin: 0 0 15px;
color: white;
text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
}
.wk-beamer-sub {
font-size: 24px;
color: rgba(255,255,255,0.7);
margin-bottom: 30px;
}
.wk-beamer-count-big {
font-size: 120px;
font-weight: 800;
color: #fbbf24;
line-height: 1;
margin: 20px 0;
text-shadow: 4px 4px 15px rgba(0,0,0,0.5);
}
.wk-beamer-count-big span {
font-size: 32px;
display: block;
color: rgba(255,255,255,0.7);
margin-top: 10px;
font-weight: 600;
}
.wk-beamer-players {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
max-height: 280px;
overflow-y: auto;
padding: 10px;
}
.wk-beamer-player {
padding: 10px 22px;
background: rgba(251,191,36,0.15);
border: 2px solid #fbbf24;
border-radius: 24px;
font-size: 20px;
font-weight: 600;
color: white;
animation: popIn 0.4s ease;
}
@keyframes popIn {
from { transform: scale(0); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
/* Beamer Frage */
.wk-beamer-question { text-align: center; }
.wk-beamer-num {
font-size: 22px;
color: rgba(255,255,255,0.6);
margin-bottom: 15px;
}
.wk-beamer-countdown-wrap {
max-width: 900px;
margin: 0 auto 25px;
position: relative;
}
.wk-beamer-countdown-bar {
height: 35px;
background: rgba(255,255,255,0.1);
border-radius: 18px;
overflow: hidden;
}
.wk-beamer-countdown-fill {
height: 100%;
width: 100%;
background: #22c55e;
border-radius: 18px;
transition: width 0.2s linear, background 0.3s;
}
.wk-beamer-countdown-num {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
font-weight: 800;
color: white;
text-shadow: 2px 2px 5px rgba(0,0,0,0.8);
}
.wk-beamer-options {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 15px;
max-width: 1100px;
margin: 20px auto;
}
.wk-beamer-options.wk-beamer-tf {
grid-template-columns: 1fr 1fr;
max-width: 700px;
}
.wk-beamer-option {
padding: 25px 20px;
border-radius: 14px;
color: white;
display: flex;
align-items: center;
gap: 15px;
font-size: 22px;
font-weight: 600;
text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.wk-beamer-option-icon {
font-size: 32px;
min-width: 40px;
}
.wk-beamer-option-label {
flex: 1;
text-align: left;
}
.wk-beamer-freetext {
text-align: center;
font-size: 30px;
color: rgba(255,255,255,0.5);
padding: 40px;
background: rgba(255,255,255,0.05);
border-radius: 16px;
max-width: 700px;
margin: 20px auto;
}
.wk-beamer-answered {
text-align: center;
font-size: 22px;
color: #fbbf24;
margin-top: 20px;
font-weight: 600;
}
/* Beamer Reveal */
.wk-beamer-reveal { padding: 20px 0; }
.wk-beamer-reveal-h2 {
text-align: center;
color: #22c55e;
font-size: 32px;
margin: 0 0 20px;
}
.wk-beamer-solution {
display: flex;
flex-direction: column;
gap: 10px;
max-width: 900px;
margin: 0 auto;
}
.wk-beamer-solution-item {
padding: 18px 24px;
background: linear-gradient(90deg, rgba(34,197,94,0.2), rgba(22,163,74,0.1));
border: 2px solid #22c55e;
border-radius: 12px;
font-size: 22px;
color: white;
font-weight: 600;
}
.wk-beamer-leaderboard {
display: flex;
flex-direction: column;
gap: 8px;
max-width: 800px;
margin: 0 auto;
}
.wk-beamer-lb-row {
display: grid;
grid-template-columns: 70px 1fr auto;
align-items: center;
gap: 15px;
padding: 14px 20px;
background: rgba(255,255,255,0.05);
border-radius: 10px;
font-size: 20px;
color: white;
}
.wk-beamer-lb-row.rank-1 {
background: linear-gradient(90deg, rgba(250,204,21,0.4), rgba(251,191,36,0.2));
border: 2px solid #fbbf24;
font-size: 24px;
}
.wk-beamer-lb-row.rank-2 { background: linear-gradient(90deg, rgba(203,213,225,0.3), rgba(203,213,225,0.1)); }
.wk-beamer-lb-row.rank-3 { background: linear-gradient(90deg, rgba(217,119,6,0.3), rgba(217,119,6,0.1)); }
.wk-beamer-medal { font-size: 28px; text-align: center; font-weight: 700; }
.wk-beamer-name { font-weight: 600; }
.wk-beamer-score { font-weight: 700; color: #fbbf24; font-variant-numeric: tabular-nums; font-size: 22px; }
/* Beamer Finished */
.wk-beamer-finished { text-align: center; }
.wk-beamer-winners {
display: flex;
justify-content: center;
align-items: flex-end;
gap: 30px;
margin: 40px 0;
}
.wk-beamer-winner {
padding: 20px 30px;
background: rgba(255,255,255,0.05);
border-radius: 16px;
min-width: 200px;
}
.wk-beamer-winner.rank-1 {
background: linear-gradient(135deg, rgba(251,191,36,0.3), rgba(245,158,11,0.15));
border: 3px solid #fbbf24;
transform: scale(1.1);
padding: 30px 40px;
order: 2;
}
.wk-beamer-winner.rank-2 {
background: linear-gradient(135deg, rgba(203,213,225,0.3), rgba(203,213,225,0.1));
border: 2px solid #cbd5e1;
order: 1;
}
.wk-beamer-winner.rank-3 {
background: linear-gradient(135deg, rgba(217,119,6,0.3), rgba(217,119,6,0.1));
border: 2px solid #d97706;
order: 3;
}
.wk-beamer-winner-medal { font-size: 60px; }
.wk-beamer-winner-name { font-size: 24px; font-weight: 700; margin: 10px 0; color: white; }
.wk-beamer-winner-score { font-size: 20px; color: #fbbf24; font-weight: 700; }
@media (max-width: 700px) {
.wk-beamer-h1 { font-size: 30px; }
.wk-beamer-count-big { font-size: 80px; }
.wk-beamer-winners { gap: 10px; }
.wk-beamer-winner { min-width: 120px; padding: 12px; }
.wk-beamer-option { font-size: 18px; padding: 18px 15px; }
}
/* Quiz-Fragen Darstellung (Schüler) */
.quiz-question-title {
font-size: 22px;
font-weight: 700;
line-height: 1.3;
margin: 0 0 8px;
color: var(--text);
}
.quiz-question-meta {
font-size: 13px;
color: var(--text-muted);
margin-bottom: 16px;
}
.quiz-answer-area {
margin-bottom: 14px;
}
.quiz-feedback-area {
margin-top: 12px;
}
.quiz-feedback {
padding: 10px 14px;
border-radius: 8px;
font-weight: 500;
font-size: 14px;
}
.quiz-feedback.correct {
background: #dcfce7;
color: #15803d;
border: 1px solid #86efac;
}
.quiz-feedback.wrong {
background: #fee2e2;
color: #b91c1c;
border: 1px solid #fca5a5;
}
/* Multiple Choice */
.quiz-mc-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.quiz-mc-label {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 8px;
cursor: pointer;
transition: all 0.15s;
}
.quiz-mc-label:hover {
border-color: var(--accent);
background: #f0f9fa;
}
.quiz-mc-label input { margin: 0; width: 18px; height: 18px; cursor: pointer; }
.quiz-mc-label:has(input:checked) {
background: #e8f5f5;
border-color: var(--accent);
}
/* True/False */
.quiz-tf-pick {
display: flex;
gap: 12px;
justify-content: center;
}
.quiz-tf-option {
flex: 1;
max-width: 200px;
padding: 24px 16px;
border: 2px solid var(--border);
background: var(--surface);
font-size: 18px;
font-weight: 600;
border-radius: 12px;
cursor: pointer;
transition: all 0.15s;
font-family: inherit;
}
.quiz-tf-option:hover { border-color: var(--accent); }
.quiz-tf-option.selected.green {
background: #dcfce7;
border-color: #22c55e;
color: #15803d;
}
.quiz-tf-option.selected.red {
background: #fee2e2;
border-color: #ef4444;
color: #b91c1c;
}
.quiz-tf-picker {
display: flex;
gap: 12px;
}
.quiz-tf-btn {
flex: 1;
padding: 14px;
border: 2px solid var(--border);
background: var(--surface);
border-radius: 8px;
cursor: pointer;
font-weight: 600;
font-family: inherit;
}
.quiz-tf-btn.active.green {
background: #dcfce7;
border-color: #22c55e;
}
.quiz-tf-btn.active.red {
background: #fee2e2;
border-color: #ef4444;
}
/* Freetext */
.quiz-ft-input-big {
width: 100%;
padding: 14px;
font-size: 18px;
border: 2px solid var(--border);
border-radius: 8px;
font-family: inherit;
margin-bottom: 6px;
}
/* Matching */
.quiz-matching-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.quiz-matching-row {
display: flex;
align-items: center;
gap: 10px;
}
.quiz-matching-left {
flex: 1;
padding: 10px 12px;
background: var(--surface-2);
border-radius: 8px;
font-weight: 500;
}
.quiz-matching-select {
flex: 1;
padding: 10px;
border: 1px solid var(--border);
border-radius: 8px;
font-family: inherit;
}
/* Ordering */
.quiz-ordering-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.quiz-ordering-row {
display: flex;
align-items: center;
gap: 10px;
}
.quiz-ordering-select {
width: 70px;
padding: 8px;
font-weight: 600;
font-family: inherit;
border: 1px solid var(--border);
border-radius: 8px;
}
.quiz-ordering-label {
flex: 1;
padding: 8px 12px;
background: var(--surface-2);
border-radius: 6px;
}
/* Cloze */
.quiz-cloze-text {
font-size: 16px;
line-height: 2;
padding: 14px;
background: var(--surface-2);
border-radius: 8px;
}
.quiz-cloze-select {
display: inline-block;
padding: 4px 8px;
border: 2px solid var(--accent);
border-radius: 4px;
background: white;
font-family: inherit;
font-size: 14px;
margin: 0 2px;
}
/* Editor: Options/Pairs/Items */
.quiz-mc-option-row,
.quiz-ft-row,
.quiz-match-row,
.quiz-order-row,
.quiz-gap-option-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.quiz-mc-correct, .quiz-gap-correct {
width: 20px;
height: 20px;
cursor: pointer;
}
.quiz-mc-input, .quiz-ft-input, .quiz-match-left, .quiz-match-right, .quiz-order-input, .quiz-gap-label {
flex: 1;
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: 6px;
font-family: inherit;
}
.quiz-order-num {
font-weight: 600;
color: var(--text-muted);
min-width: 24px;
}
.quiz-gap-block {
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px;
margin-bottom: 10px;
background: var(--surface-2);
}
.quiz-gap-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
/* Ergebnis-Anzeige */
.quiz-result-wrap {
padding: 10px 0;
}
.quiz-result-status {
font-size: 16px;
font-weight: 600;
margin-top: 8px;
}
.quiz-result-status.pass { color: #15803d; }
.quiz-result-status.fail { color: #b91c1c; }
.quiz-result-list {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 10px;
}
.quiz-result-item {
padding: 10px 14px;
border: 1px solid var(--border);
border-radius: 8px;
border-left-width: 4px;
}
.quiz-result-item.right {
border-left-color: #22c55e;
background: #f0fdf4;
}
.quiz-result-item.wrong {
border-left-color: #ef4444;
background: #fef2f2;
}
.quiz-result-item-head {
font-weight: 500;
margin-bottom: 4px;
}
.quiz-result-given {
font-size: 13px;
color: var(--text-muted);
padding-left: 8px;
}
.quiz-result-given ul, .quiz-result-given ol {
margin: 4px 0 4px 18px;
padding: 0;
}
/* Auswertung */
.quiz-eval-summary {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 10px;
margin-bottom: 16px;
}
.quiz-eval-stat {
background: var(--surface-2);
padding: 14px;
border-radius: 8px;
text-align: center;
}
.quiz-eval-stat-label { font-size: 12px; color: var(--text-muted); }
.quiz-eval-stat-val { font-size: 22px; font-weight: 700; color: var(--accent); }
.quiz-eval-userlist {
display: flex;
flex-direction: column;
gap: 6px;
}
.quiz-eval-userrow {
display: grid;
grid-template-columns: 1fr auto auto auto auto;
gap: 10px;
align-items: center;
padding: 8px 12px;
border: 1px solid var(--border);
border-radius: 8px;
font-size: 14px;
}
.quiz-eval-userrow.pass { border-left: 4px solid #22c55e; }
.quiz-eval-userrow.fail { border-left: 4px solid #ef4444; }
.quiz-eval-userrow-name { font-weight: 600; }
.quiz-eval-userrow-attempts, .quiz-eval-userrow-status, .quiz-eval-userrow-score {
font-size: 13px;
color: var(--text-muted);
white-space: nowrap;
}
@media (max-width: 600px) {
.quiz-eval-userrow { grid-template-columns: 1fr auto; font-size: 12px; }
.quiz-eval-userrow-status, .quiz-eval-userrow-attempts { display: none; }
}
.quiz-eval-qlist {
display: flex;
flex-direction: column;
gap: 10px;
}
.quiz-eval-qrow {
padding: 10px 12px;
background: var(--surface-2);
border-radius: 8px;
}
.quiz-eval-qrow-head { font-weight: 500; margin-bottom: 4px; }
.quiz-eval-qrow-stats { font-size: 12px; color: var(--text-muted); }
.quiz-eval-ft-list {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 8px;
}
.quiz-eval-ft-row {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 8px;
border-radius: 6px;
font-size: 13px;
}
.quiz-eval-ft-row.right { background: #f0fdf4; }
.quiz-eval-ft-row.wrong { background: #fef2f2; }
.quiz-eval-ft-user { font-weight: 600; min-width: 100px; }
.quiz-eval-ft-answer { flex: 1; font-style: italic; }
.quiz-eval-manual { font-size: 11px; color: var(--accent); }
/* Korrekte Antwort im Beamer-Modus heller */
.poll-present-bar.correct-answer {
border: 2px solid #22c55e;
background: rgba(34, 197, 94, 0.08);
padding: 8px;
border-radius: 8px;
}
/* === Paket 8: Multi-Folien-Präsentationen === */
/* Größeres Modal für den Multi-Folien-Editor */
.modal-xxl {
max-width: 1100px;
width: 96%;
}
/* Editor-Oberbereich: Gesamt-Einstellungen */
.editor-settings {
padding-bottom: 14px;
}
.form-group-row {
display: flex;
gap: 12px;
align-items: flex-start;
flex-wrap: wrap;
}
.form-group-row .form-group {
flex: 1;
min-width: 200px;
}
.editor-divider {
border-top: 2px solid var(--border);
margin: 10px 0 18px;
}
/* Folien-Editor: Tab-Navigation + Arbeitsbereich */
.editor-slides-wrap {
display: flex;
gap: 14px;
align-items: stretch;
}
.editor-slides-nav {
flex: 0 0 240px;
max-height: 500px;
overflow-y: auto;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 8px;
background: var(--surface-2);
}
.editor-slides-nav-inner {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 8px;
}
.editor-slide-tab {
position: relative;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 8px 10px;
cursor: pointer;
transition: all 0.15s ease;
font-size: 12px;
}
.editor-slide-tab:hover {
border-color: var(--accent);
}
.editor-slide-tab.active {
border-color: var(--accent);
background: #e8f5f5;
box-shadow: 0 0 0 2px rgba(13, 107, 111, 0.15);
}
.editor-slide-tab-num {
font-weight: 700;
color: var(--accent);
font-size: 11px;
}
.editor-slide-tab-icon {
display: inline-block;
margin-right: 4px;
}
.editor-slide-tab-q {
color: var(--text);
margin-top: 2px;
word-break: break-word;
}
.editor-slide-tab-actions {
display: flex;
gap: 3px;
margin-top: 5px;
}
.editor-slide-tab-actions .btn-icon {
font-size: 11px;
width: 20px;
height: 20px;
padding: 0;
}
.editor-add-slide {
width: 100%;
}
.editor-slide-area {
flex: 1;
min-width: 0;
}
/* Slide-Type-Picker im Editor: schöne Kacheln */
.editor-slide-type-picker {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 18px;
padding: 4px;
}
.editor-slide-type-picker .poll-type-btn {
padding: 18px 10px 16px !important;
background: var(--surface);
border: 2px solid var(--border);
border-radius: 14px;
cursor: pointer;
text-align: center;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
font-family: inherit;
color: var(--text);
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 100px;
box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.editor-slide-type-picker .poll-type-btn:hover {
border-color: var(--accent);
background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(13, 107, 111, 0.12);
}
.editor-slide-type-picker .poll-type-btn.active {
border-color: var(--accent);
background: linear-gradient(135deg, #e6f4f5 0%, #d1ebec 100%);
box-shadow: 0 4px 14px rgba(13, 107, 111, 0.22), 0 0 0 3px rgba(13,107,111,0.10);
transform: translateY(-1px);
}
.editor-slide-type-picker .poll-type-btn.active::after {
content: '✓';
position: absolute;
top: 8px;
right: 10px;
font-size: 14px;
font-weight: 700;
color: var(--accent);
background: white;
width: 22px;
height: 22px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.editor-slide-type-picker .poll-type-btn .poll-type-icon {
font-size: 32px;
line-height: 1;
filter: grayscale(0.3);
transition: filter 0.2s, transform 0.2s;
}
.editor-slide-type-picker .poll-type-btn:hover .poll-type-icon,
.editor-slide-type-picker .poll-type-btn.active .poll-type-icon {
filter: grayscale(0);
transform: scale(1.08);
}
.editor-slide-type-picker .poll-type-btn .poll-type-label {
font-weight: 600;
font-size: 13px;
margin: 0;
line-height: 1.2;
}
@media (max-width: 800px) {
.editor-slides-wrap { flex-direction: column; }
.editor-slides-nav { flex: 0 0 auto; max-height: 250px; }
.editor-slide-type-picker { grid-template-columns: repeat(2, 1fr); }
.editor-slide-type-picker .poll-type-btn { min-height: 90px; padding: 14px 8px !important; }
.editor-slide-type-picker .poll-type-btn .poll-type-icon { font-size: 26px; }
.modal-xxl { width: 98%; }
}
/* Vote-Dialog: Frage sehr prominent */
.poll-vote-question {
font-size: 22px;
font-weight: 700;
margin: 0 0 8px;
line-height: 1.25;
color: var(--text);
}
.poll-vote-type {
font-size: 13px;
color: var(--text-muted);
margin-bottom: 14px;
}
.poll-vote-indicator {
font-size: 13px;
color: var(--text-muted);
flex: 1;
text-align: center;
}
#poll-vote-footer {
display: flex;
align-items: center;
gap: 10px;
}
/* Management: kleine Vorschau der ersten Frage */
.poll-mgmt-question {
font-size: 12px;
color: var(--text-muted);
margin-top: 4px;
font-style: italic;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
/* Beamer-Modus: Navigationsleiste */
.poll-present-navbar {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(10px);
border-radius: 12px;
padding: 10px 16px;
display: flex;
align-items: center;
gap: 16px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.poll-present-nav-btn {
background: var(--accent);
color: white;
border: none;
padding: 8px 16px;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
font-family: inherit;
font-weight: 600;
transition: background 0.15s;
}
.poll-present-nav-btn:hover:not(:disabled) {
background: var(--accent-dark);
}
.poll-present-nav-btn:disabled {
background: var(--text-muted);
cursor: not-allowed;
opacity: 0.5;
}
.poll-present-nav-indicator {
font-weight: 600;
color: var(--text);
}
/* === Ordner-Ansicht === */
.poll-section {
margin-bottom: 20px;
}
.poll-section-title {
margin: 0 0 10px;
font-size: 15px;
display: flex;
align-items: center;
gap: 8px;
padding-bottom: 6px;
border-bottom: 1px solid var(--border);
}
.poll-section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
padding-bottom: 6px;
border-bottom: 1px solid var(--border);
}
.poll-section-header .poll-section-title {
margin: 0;
border: none;
padding-bottom: 0;
}
.poll-section-count {
background: var(--surface-2);
color: var(--text-muted);
padding: 2px 8px;
border-radius: 10px;
font-size: 11px;
font-weight: 500;
}
.poll-archive-link {
cursor: pointer;
transition: color 0.15s ease;
}
.poll-archive-link:hover {
color: var(--accent);
}
.poll-folder-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px;
}
.poll-folder-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 14px 12px;
cursor: pointer;
text-align: center;
transition: all 0.15s ease;
font-family: inherit;
color: var(--text);
position: relative;
}
.poll-folder-card:hover {
border-color: var(--accent);
background: #f0f9fa;
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(13,107,111,0.08);
}
.poll-folder-icon {
font-size: 36px;
margin-bottom: 4px;
}
.poll-folder-name {
font-weight: 600;
font-size: 13px;
margin-bottom: 2px;
word-break: break-word;
}
.poll-folder-count {
display: inline-block;
background: var(--surface-2);
color: var(--text-muted);
padding: 1px 8px;
border-radius: 10px;
font-size: 11px;
}
.poll-folder-empty {
text-align: center;
padding: 30px 20px;
color: var(--text-muted);
}
.btn-link-back {
background: transparent;
border: none;
color: var(--accent);
font-size: 13px;
cursor: pointer;
font-family: inherit;
padding: 4px 8px;
border-radius: 4px;
}
.btn-link-back:hover {
background: var(--surface-2);
}
.poll-draft-row {
background: #fffbeb;
border-color: #fde68a;
}
.poll-mgmt-badge.draft {
background: #fef3c7;
color: #92400e;
}
/* === UMFRAGEN & ABSTIMMUNGEN === */
/* Modal-Größen */
.modal-lg { max-width: 760px !important; width: 94vw; }
/* Live-Banner oben auf der Startseite */
#poll-banner-container {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 16px;
}
.poll-banner {
background: linear-gradient(135deg, #fff, #faf9f5);
border: 2px solid var(--accent);
border-radius: var(--radius);
padding: 12px 14px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
flex-wrap: wrap;
animation: poll-banner-pulse 3s ease-in-out infinite;
box-shadow: 0 4px 16px rgba(13,107,111,0.10);
}
@keyframes poll-banner-pulse {
0%,100% { box-shadow: 0 4px 16px rgba(13,107,111,0.10); }
50% { box-shadow: 0 4px 24px rgba(13,107,111,0.24); }
}
.poll-banner-live { border-color: #dc2626; background: linear-gradient(135deg, #fff, #fef7f7); }
.poll-banner-live .poll-banner-type { color: #dc2626; }
.poll-banner-head {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
min-width: 200px;
}
.poll-banner-icon { font-size: 30px; flex-shrink: 0; }
.poll-banner-meta { flex: 1; }
.poll-banner-type {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--accent);
}
.poll-banner-title {
font-weight: 600;
font-size: 15px;
margin-top: 2px;
line-height: 1.3;
}
.poll-banner-actions { display: flex; gap: 6px; flex-wrap: wrap; }
/* Umfrage als Karte im Aktuelles-Bereich */
.news-item.is-poll {
background: linear-gradient(135deg, #fff, #faf9f5);
border-left: 3px solid var(--accent);
padding: 10px 12px;
border-radius: 8px;
margin-bottom: 6px;
}
/* Verwaltungs-Liste (Lehrer) */
.poll-mgmt-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: var(--radius);
margin-bottom: 6px;
background: var(--surface);
}
.poll-mgmt-row:hover { background: var(--surface-2); }
.poll-mgmt-icon { font-size: 24px; flex-shrink: 0; }
.poll-mgmt-meta { flex: 1; min-width: 0; }
.poll-mgmt-title { font-weight: 600; font-size: 14px; }
.poll-mgmt-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.poll-mgmt-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.poll-mgmt-badge {
display: inline-block;
padding: 1px 8px;
border-radius: 10px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.poll-mgmt-badge.active { background: #dcfce7; color: #15803d; }
.poll-mgmt-badge.closed { background: #e5e5e5; color: #525252; }
/* Typ-Auswahl beim Erstellen */
.poll-type-picker {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.poll-type-btn {
background: var(--surface);
border: 2px solid var(--border);
border-radius: 10px;
padding: 12px 8px;
cursor: pointer;
text-align: center;
transition: all 0.15s ease;
font-family: inherit;
color: var(--text);
}
.poll-type-btn:hover { border-color: var(--border-strong); background: var(--surface-2); }
.poll-type-btn.active {
border-color: var(--accent);
background: #e6f4f5;
box-shadow: 0 0 0 3px rgba(13,107,111,0.12);
}
.poll-type-icon { font-size: 26px; }
.poll-type-label { font-weight: 600; font-size: 13px; margin-top: 4px; }
.poll-type-desc { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
/* Modus-Auswahl: Live / Mit Enddatum */
.poll-mode-picker { display: flex; gap: 10px; }
.poll-mode-btn {
flex: 1;
background: var(--surface);
border: 2px solid var(--border);
border-radius: 12px;
padding: 14px 16px;
cursor: pointer;
text-align: left;
font-family: inherit;
color: var(--text);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.poll-mode-btn:hover {
border-color: var(--accent);
background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(13, 107, 111, 0.10);
}
.poll-mode-btn strong {
display: block;
font-size: 15px;
margin-bottom: 4px;
color: var(--text);
}
.poll-mode-btn small {
display: block;
font-size: 12px;
color: var(--text-muted);
}
.poll-mode-btn.active {
border-color: var(--accent);
background: linear-gradient(135deg, #e6f4f5 0%, #d1ebec 100%);
box-shadow: 0 4px 12px rgba(13, 107, 111, 0.18), 0 0 0 3px rgba(13,107,111,0.10);
}
.poll-mode-btn.active::after {
content: '✓';
position: absolute;
top: 8px;
right: 10px;
font-size: 13px;
font-weight: 700;
color: var(--accent);
background: white;
width: 22px;
height: 22px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 6px rgba(0,0,0,0.10);
}
.poll-mode-btn.active strong { color: var(--accent-dark); }
/* Poll-Settings-Cards: Toggle-Switches statt nackter Checkboxes */
.poll-settings-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 8px;
}
@media (max-width: 700px) {
.poll-settings-grid { grid-template-columns: 1fr; }
}
.poll-setting-card {
display: block;
background: var(--surface);
border: 2px solid var(--border);
border-radius: 12px;
padding: 14px 16px;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
font-family: inherit;
color: var(--text);
box-shadow: 0 1px 2px rgba(0,0,0,0.03);
position: relative;
user-select: none;
}
.poll-setting-card:hover {
border-color: var(--accent);
background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(13, 107, 111, 0.10);
}
.poll-setting-card.active {
border-color: var(--accent);
background: linear-gradient(135deg, #e6f4f5 0%, #d1ebec 100%);
box-shadow: 0 4px 12px rgba(13, 107, 111, 0.18);
}
/* Echtes
verstecken (nur funktional) */
.poll-setting-card input[type="checkbox"] {
position: absolute;
opacity: 0;
pointer-events: none;
width: 0;
height: 0;
}
.poll-setting-content {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 12px;
}
.poll-setting-icon {
font-size: 26px;
line-height: 1;
flex-shrink: 0;
filter: grayscale(0.4);
transition: filter 0.2s;
}
.poll-setting-card.active .poll-setting-icon {
filter: grayscale(0);
}
.poll-setting-text { min-width: 0; }
.poll-setting-title {
font-size: 14px;
font-weight: 600;
margin-bottom: 2px;
color: var(--text);
}
.poll-setting-card.active .poll-setting-title {
color: var(--accent-dark);
}
.poll-setting-desc {
font-size: 11px;
color: var(--text-muted);
line-height: 1.4;
}
/* Toggle-Switch */
.poll-setting-toggle {
flex-shrink: 0;
}
.poll-toggle-track {
display: inline-block;
position: relative;
width: 44px;
height: 24px;
background: #d1d5db;
border-radius: 12px;
transition: background 0.2s;
vertical-align: middle;
}
.poll-toggle-thumb {
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
background: white;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s;
}
.poll-setting-card.active .poll-toggle-track {
background: var(--accent);
}
.poll-setting-card.active .poll-toggle-thumb {
transform: translateX(20px);
}
/* MC-Optionen-Eingabe */
.poll-mc-option-row {
display: flex;
gap: 6px;
align-items: center;
margin-bottom: 6px;
}
.poll-mc-option-input {
flex: 1;
padding: 7px 10px;
font-size: 13px;
border: 1px solid var(--border);
border-radius: 6px;
font-family: inherit;
}
/* Abstimm-Dialog */
.poll-vote-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}
.poll-vote-type {
font-size: 12px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
}
.poll-vote-hint {
font-size: 11px;
color: var(--text-muted);
margin-bottom: 8px;
}
.poll-vote-section {
background: var(--surface-2);
padding: 14px;
border-radius: 10px;
margin-bottom: 14px;
}
.alert {
padding: 10px 12px;
border-radius: 8px;
font-size: 13px;
margin-bottom: 12px;
}
.alert-info { background: #ecfeff; color: #0e7490; border: 1px solid #a5f3fc; }
/* MC-Abstimmen */
.poll-mc-choices {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 12px;
}
.poll-mc-choice {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
cursor: pointer;
transition: all 0.15s ease;
font-size: 14px;
}
.poll-mc-choice:hover { background: #f8fafc; border-color: var(--border-strong); }
.poll-mc-choice input { margin: 0; width: 18px; height: 18px; cursor: pointer; }
.poll-mc-choice:has(input:checked) {
border-color: var(--accent);
background: #e6f4f5;
}
/* Skala-Abstimmen */
.poll-scale-labels {
display: flex;
justify-content: space-between;
margin-bottom: 6px;
color: var(--text-muted);
}
.poll-scale-picker {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-bottom: 12px;
}
.poll-scale-btn {
flex: 1;
min-width: 40px;
height: 40px;
border: 1px solid var(--border);
background: var(--surface);
border-radius: 6px;
cursor: pointer;
font-size: 14px;
font-weight: 600;
font-family: inherit;
transition: all 0.12s ease;
color: var(--text);
}
.poll-scale-btn:hover { background: var(--surface-2); border-color: var(--border-strong); }
.poll-scale-btn.selected {
background: var(--accent);
color: white;
border-color: var(--accent);
}
/* Axis-Slider */
.poll-axis-labels {
display: flex;
justify-content: space-between;
margin-bottom: 6px;
}
.poll-axis-slider {
width: 100%;
height: 30px;
}
.poll-axis-value {
text-align: center;
font-size: 24px;
font-weight: 700;
color: var(--accent);
margin: 8px 0 12px;
font-variant-numeric: tabular-nums;
}
/* Ergebnis-Anzeige */
.poll-results { margin-top: 14px; }
.poll-results h4 { margin: 0 0 10px; font-size: 15px; }
.poll-result-bar {
display: grid;
grid-template-columns: 140px 1fr 80px;
align-items: center;
gap: 8px;
margin-bottom: 6px;
font-size: 13px;
}
.poll-result-bar-label { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.poll-result-bar-track {
background: var(--surface-2);
border-radius: 10px;
overflow: hidden;
height: 20px;
}
.poll-result-bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--accent), #1a9499);
transition: width 0.3s ease;
}
.poll-result-bar-count {
font-size: 12px;
color: var(--text-muted);
text-align: right;
font-variant-numeric: tabular-nums;
}
.poll-scale-avg, .poll-axis-avg {
margin-bottom: 10px;
font-size: 14px;
}
.poll-scale-dist {
display: flex;
align-items: flex-end;
gap: 3px;
height: 140px;
padding: 0 4px;
}
.poll-scale-col {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
height: 100%;
min-width: 0;
}
.poll-scale-col-count {
font-size: 10px;
color: var(--text-muted);
margin-bottom: 2px;
}
.poll-scale-col-bar {
width: 100%;
background: linear-gradient(180deg, var(--accent), #1a9499);
border-radius: 4px 4px 0 0;
min-height: 4px;
transition: height 0.3s ease;
}
.poll-scale-col-label {
font-size: 10px;
margin-top: 3px;
color: var(--text-muted);
}
.poll-wordcloud {
padding: 18px;
background: var(--surface-2);
border-radius: 10px;
text-align: center;
line-height: 1.6;
min-height: 100px;
}
.poll-word {
display: inline-block;
margin: 4px 6px;
font-weight: 600;
color: var(--accent-dark);
}
.poll-axis-display {
padding: 12px 6px;
background: var(--surface-2);
border-radius: 10px;
}
.poll-axis-track {
position: relative;
height: 50px;
background: linear-gradient(90deg, #fee2e2, #fef3c7, #dcfce7);
border-radius: 8px;
margin: 6px 0;
}
.poll-axis-dot {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 12px;
height: 12px;
background: var(--accent);
border: 2px solid white;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.poll-axis-avg-mark {
position: absolute;
top: -4px;
bottom: -4px;
width: 3px;
background: #dc2626;
transform: translateX(-50%);
border-radius: 2px;
}
/* ========== BEAMER-MODUS (Vollbild) ========== */
.poll-present-overlay {
position: fixed;
inset: 0;
background: linear-gradient(135deg, #0d6b6f, #1a9499);
color: white;
z-index: 10000;
display: none;
flex-direction: column;
padding: 40px;
overflow-y: auto;
}
.poll-present-overlay.active { display: flex; }
.poll-present-close {
position: absolute;
top: 18px;
right: 18px;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255,255,255,0.15);
border: 2px solid white;
color: white;
font-size: 20px;
cursor: pointer;
font-family: inherit;
}
.poll-present-close:hover { background: rgba(255,255,255,0.25); }
#poll-present-content {
flex: 1;
display: flex;
flex-direction: column;
max-width: 1400px;
margin: 0 auto;
width: 100%;
}
.poll-present-head { text-align: center; margin-bottom: 36px; }
.poll-present-typ {
font-size: 16px;
text-transform: uppercase;
letter-spacing: 0.08em;
opacity: 0.85;
}
.poll-present-live {
background: #dc2626;
padding: 2px 10px;
border-radius: 12px;
font-weight: 700;
animation: poll-present-blink 1.5s ease-in-out infinite;
}
@keyframes poll-present-blink {
0%,100% { opacity: 1; }
50% { opacity: 0.5; }
}
.poll-present-title {
font-family: 'Source Serif 4', Georgia, serif;
font-size: 50px;
font-weight: 600;
margin: 14px 0 0;
line-height: 1.2;
}
.poll-present-foot {
text-align: center;
font-size: 20px;
opacity: 0.8;
margin-top: 24px;
}
/* MC-Beamer-Balken */
.poll-present-bars {
display: flex;
flex-direction: column;
gap: 16px;
}
.poll-present-bar-row {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 6px;
}
.poll-present-bar-label {
font-size: 28px;
font-weight: 500;
}
.poll-present-bar-count {
font-size: 24px;
opacity: 0.9;
font-variant-numeric: tabular-nums;
}
.poll-present-bar-track {
background: rgba(255,255,255,0.2);
border-radius: 14px;
overflow: hidden;
height: 36px;
}
.poll-present-bar-fill {
height: 100%;
background: white;
border-radius: 14px;
transition: width 0.4s cubic-bezier(0.2, 0.9, 0.3, 1);
}
/* Skala-Beamer */
.poll-present-avg {
text-align: center;
font-size: 32px;
margin-bottom: 20px;
}
.poll-present-dist {
display: flex;
align-items: flex-end;
gap: 6px;
height: 300px;
padding: 0 10px;
}
.poll-present-dist-col {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
height: 100%;
}
.poll-present-dist-count { font-size: 22px; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.poll-present-dist-bar {
width: 100%;
background: white;
border-radius: 8px 8px 0 0;
min-height: 6px;
transition: height 0.4s ease;
}
.poll-present-dist-label { font-size: 22px; margin-top: 6px; }
/* Wordcloud-Beamer */
.poll-present-cloud {
flex: 1;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
align-content: center;
padding: 20px;
line-height: 1.4;
gap: 8px;
}
.poll-present-word {
font-family: 'Source Serif 4', Georgia, serif;
font-weight: 600;
margin: 4px 10px;
display: inline-block;
animation: poll-word-pop 0.4s ease-out;
}
@keyframes poll-word-pop {
0% { transform: scale(0.5); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.poll-present-empty {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
opacity: 0.6;
}
/* Axis-Beamer */
.poll-present-axis {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: 40px 0;
}
.poll-present-axis-labels {
display: flex;
justify-content: space-between;
font-size: 28px;
margin-bottom: 12px;
font-weight: 500;
}
.poll-present-axis-track {
position: relative;
height: 120px;
background: linear-gradient(90deg, rgba(255,255,255,0.15), rgba(255,255,255,0.4), rgba(255,255,255,0.15));
border-radius: 20px;
}
.poll-present-axis-dot {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 22px;
height: 22px;
background: white;
border-radius: 50%;
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.poll-present-axis-avg {
position: absolute;
top: -10px;
bottom: -10px;
width: 5px;
background: #fde047;
transform: translateX(-50%);
border-radius: 3px;
box-shadow: 0 0 16px #fde047;
}
/* Responsive */
@media (max-width: 640px) {
.poll-type-picker { grid-template-columns: repeat(2, 1fr); }
.poll-mode-picker { flex-direction: column; }
.poll-result-bar { grid-template-columns: 1fr; gap: 4px; }
.poll-result-bar-count { text-align: left; }
.poll-banner { flex-direction: column; align-items: stretch; }
.poll-banner-actions { justify-content: stretch; }
.poll-banner-actions .btn { flex: 1; }
}
.btn-danger { background: #dc2626; color: white; border: 1px solid #dc2626; }
.btn-danger:hover { background: #b91c1c; border-color: #b91c1c; }
/* === TO-DO-LISTE (persönlicher Bereich, integriert in Aktuelles) === */
.todo-section {
margin-top: 18px;
}
.todo-divider {
height: 1px;
background: var(--border);
margin: 0 0 14px;
}
.todo-header {
margin-bottom: 10px;
}
.todo-header h2 {
margin: 0;
font-size: 18px;
display: flex;
align-items: center;
gap: 8px;
}
.todo-accent {
background: #a855f7; /* lila, grenzt sich von "Aktuelles"-Akzent ab */
}
.todo-input-row {
display: flex;
gap: 6px;
margin-bottom: 10px;
}
.todo-input-row #todo-input {
flex: 1;
padding: 7px 10px;
font-size: 14px;
border: 1px solid var(--border);
border-radius: 8px;
font-family: inherit;
background: var(--surface);
min-width: 0;
}
.todo-input-row #todo-input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(13,107,111,0.12);
}
.todo-input-row #todo-date-input {
padding: 7px 8px;
font-size: 12px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
font-family: inherit;
color: var(--text-muted);
max-width: 130px;
}
.todo-input-row #todo-date-input:focus {
outline: none;
border-color: var(--accent);
}
.todo-input-row #todo-add-btn {
padding: 7px 14px;
font-size: 16px;
font-weight: 600;
flex-shrink: 0;
}
.todo-list {
display: flex;
flex-direction: column;
gap: 5px;
}
.todo-empty {
padding: 14px 8px;
text-align: center;
color: var(--text-muted);
font-size: 13px;
font-style: italic;
}
.todo-item {
display: flex;
align-items: flex-start;
gap: 9px;
padding: 8px 10px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
transition: background 0.12s ease, border-color 0.12s ease;
}
.todo-item:hover {
background: var(--surface-2);
}
.todo-item.todo-overdue {
border-left: 3px solid #dc2626;
}
.todo-item.todo-done {
opacity: 0.55;
background: var(--surface-2);
}
.todo-checkbox {
width: 22px;
height: 22px;
min-width: 22px;
border: 2px solid var(--border-strong);
border-radius: 6px;
background: white;
cursor: pointer;
font-size: 14px;
line-height: 1;
padding: 0;
color: var(--accent);
font-weight: 700;
transition: all 0.12s ease;
display: flex;
align-items: center;
justify-content: center;
margin-top: 1px;
}
.todo-checkbox:hover {
border-color: var(--accent);
}
.todo-checkbox.checked {
background: var(--accent);
color: white;
border-color: var(--accent);
}
.todo-text {
flex: 1;
font-size: 14px;
line-height: 1.4;
word-break: break-word;
padding: 1px 2px;
border-radius: 4px;
min-width: 0;
}
.todo-text[contenteditable="true"]:hover {
background: rgba(13,107,111,0.04);
}
.todo-text[contenteditable="true"]:focus {
background: white;
outline: 1px solid var(--accent);
outline-offset: 1px;
}
.todo-done .todo-text {
text-decoration: line-through;
color: var(--text-muted);
}
.todo-due {
font-size: 11px;
color: var(--text-muted);
padding: 2px 7px;
background: var(--surface-2);
border-radius: 10px;
white-space: nowrap;
flex-shrink: 0;
margin-top: 2px;
}
.todo-due.overdue {
background: #fef2f2;
color: #dc2626;
font-weight: 600;
}
.todo-delete-btn {
background: transparent;
border: none;
color: var(--text-muted);
cursor: pointer;
font-size: 16px;
line-height: 1;
width: 22px;
height: 22px;
border-radius: 50%;
padding: 0;
opacity: 0;
transition: all 0.12s ease;
flex-shrink: 0;
}
.todo-item:hover .todo-delete-btn {
opacity: 0.6;
}
.todo-delete-btn:hover {
opacity: 1 !important;
background: #fee2e2;
color: #dc2626;
}
.todo-expand-btn {
margin-top: 4px;
padding: 6px 10px;
background: transparent;
border: none;
color: var(--accent);
cursor: pointer;
font-size: 12px;
font-weight: 500;
font-family: inherit;
border-radius: 6px;
text-align: left;
transition: background 0.12s ease;
}
.todo-expand-btn:hover {
background: var(--surface-2);
}
.todo-expand-btn.subtle {
color: var(--text-muted);
}
.todo-done-toggle {
margin-top: 6px;
padding-top: 6px;
border-top: 1px dashed var(--border);
}
@media (max-width: 520px) {
.todo-input-row {
flex-wrap: wrap;
}
.todo-input-row #todo-input {
flex: 1 1 100%;
}
.todo-input-row #todo-date-input {
flex: 1;
max-width: none;
}
.todo-due {
font-size: 10px;
}
}
/* === NOTENHEFT (persönlicher Bereich) === */
.btn-notenheft {
background: linear-gradient(135deg, #0d6b6f, #1a9499);
color: white;
border: none;
font-weight: 600;
}
.btn-notenheft:hover {
background: linear-gradient(135deg, #0a5659, #158085);
color: white;
}
.modal-xl {
max-width: 1100px !important;
width: 95vw;
}
.nh-loading, .nh-empty {
text-align: center;
padding: 40px 20px;
color: var(--text-muted);
}
.nh-empty-icon {
font-size: 48px;
margin-bottom: 12px;
}
.nh-empty h3 {
margin: 0 0 8px;
color: var(--text);
}
.nh-empty p {
margin: 0 0 20px;
font-size: 14px;
}
.nh-suggestions {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid var(--border);
}
.nh-suggestions-title {
font-size: 13px;
color: var(--text-muted);
margin-bottom: 10px;
}
.nh-suggestions-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
justify-content: center;
}
.nh-suggestion-chip {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 16px;
padding: 5px 12px;
font-size: 12px;
cursor: pointer;
font-family: inherit;
color: var(--text);
transition: all 0.15s ease;
}
.nh-suggestion-chip:hover {
background: var(--accent-soft);
border-color: var(--accent);
color: var(--accent-dark);
}
.nh-overview-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 16px;
gap: 12px;
flex-wrap: wrap;
}
.nh-overview-title h3 {
margin: 0 0 4px;
}
.nh-hint {
font-size: 12px;
color: var(--text-muted);
}
.nh-overview-actions {
display: flex;
align-items: center;
gap: 10px;
}
.nh-save-indicator {
font-size: 11px;
color: var(--text-muted);
opacity: 0.4;
transition: opacity 0.3s ease;
}
.nh-overview-table-wrap {
overflow-x: auto;
border: 1px solid var(--border);
border-radius: var(--radius);
}
.nh-overview-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.nh-overview-table th,
.nh-overview-table td {
padding: 8px 10px;
text-align: center;
border-bottom: 1px solid var(--border);
white-space: nowrap;
}
.nh-overview-table thead th {
background: var(--surface-2);
font-weight: 600;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-muted);
border-bottom: 2px solid var(--border-strong);
}
.nh-overview-table thead tr:nth-child(2) th {
font-size: 10px;
padding: 4px 8px;
}
.nh-overview-table .nh-col-fach {
text-align: left;
}
.nh-overview-table .nh-col-bereich {
border-left: 1px solid var(--border);
border-right: 1px solid var(--border);
}
.nh-overview-table .nh-col-sub {
background: var(--surface-2);
font-variant-numeric: tabular-nums;
}
.nh-overview-table .nh-col-endnote {
background: var(--accent-bg);
font-variant-numeric: tabular-nums;
font-size: 14px;
border-left: 2px solid var(--accent);
color: var(--text);
}
.nh-overview-table .nh-col-hn {
font-size: 16px;
font-weight: 700;
border-left: 1px solid var(--border);
}
.nh-overview-table tbody tr.nh-fach-row {
cursor: pointer;
transition: background 0.1s ease;
}
.nh-overview-table tbody tr.nh-fach-row:hover {
background: var(--accent-bg, #ecf5f6);
}
.nh-overview-table .nh-col-del {
width: 36px;
}
.nh-overview-table .nh-col-del .btn-icon {
opacity: 0;
transition: opacity 0.15s ease;
}
.nh-overview-table tr:hover .nh-col-del .btn-icon {
opacity: 0.7;
}
.nh-overview-table .nh-col-del .btn-icon:hover {
opacity: 1;
}
/* Notenfarben für HN */
.nh-note-1 { color: #10b981; }
.nh-note-2 { color: #65a30d; }
.nh-note-3 { color: #eab308; }
.nh-note-4 { color: #f59e0b; }
.nh-note-5 { color: #dc2626; }
.nh-note-6 { color: #7f1d1d; }
.nh-gesamt-hint {
margin-top: 14px;
padding: 10px 14px;
background: var(--surface-2);
border-left: 3px solid var(--accent);
border-radius: 4px;
font-size: 12px;
color: var(--text-muted);
line-height: 1.5;
}
/* Fach-Detail */
.nh-detail-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
margin-bottom: 20px;
padding-bottom: 14px;
border-bottom: 1px solid var(--border);
flex-wrap: wrap;
}
.nh-detail-title {
flex: 1;
margin: 0;
min-width: 200px;
}
.nh-fach-rename {
font-size: 22px;
font-family: 'Source Serif 4', Georgia, serif;
font-weight: 600;
border: none;
background: transparent;
width: 100%;
padding: 4px 8px;
border-radius: 6px;
color: var(--text);
}
.nh-fach-rename:hover,
.nh-fach-rename:focus {
background: var(--surface-2);
outline: none;
}
.nh-detail-head-right {
display: flex;
align-items: center;
gap: 12px;
}
.nh-endnote-big {
text-align: center;
padding: 10px 20px;
background: var(--surface-2);
border-radius: var(--radius);
border: 2px solid var(--accent);
min-width: 120px;
}
.nh-endnote-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
}
.nh-endnote-value {
font-size: 26px;
font-weight: 700;
font-variant-numeric: tabular-nums;
font-family: 'Source Serif 4', Georgia, serif;
line-height: 1.1;
}
.nh-endnote-hn {
font-size: 11px;
color: var(--text-muted);
margin-top: 2px;
}
.nh-bereich {
margin-bottom: 20px;
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
}
.nh-bereich-head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 14px;
background: var(--surface-2);
border-bottom: 1px solid var(--border);
gap: 12px;
flex-wrap: wrap;
}
.nh-bereich-head h4 {
margin: 0;
font-size: 15px;
color: var(--accent-dark);
}
.nh-bereich-controls {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.nh-bereich-gewicht {
font-size: 13px;
color: var(--text-muted);
}
.nh-bereich-gewicht input {
width: 55px;
padding: 3px 6px;
font-size: 13px;
border: 1px solid var(--border);
border-radius: 5px;
text-align: center;
margin-left: 4px;
margin-right: 2px;
}
.nh-bereich-avg {
font-size: 13px;
color: var(--text-muted);
}
.nh-bereich-avg strong {
color: var(--text);
font-size: 15px;
font-variant-numeric: tabular-nums;
}
.nh-noten-list {
padding: 8px;
}
.nh-noten-empty {
padding: 20px;
text-align: center;
color: var(--text-muted);
font-size: 13px;
font-style: italic;
}
.nh-note-row {
display: flex;
align-items: stretch;
gap: 12px;
padding: 10px 12px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
margin-bottom: 6px;
}
.nh-note-wert {
font-size: 34px;
font-weight: 700;
font-family: 'Source Serif 4', Georgia, serif;
min-width: 48px;
display: flex;
align-items: center;
justify-content: center;
}
.nh-note-fields {
flex: 1;
display: flex;
flex-direction: column;
gap: 6px;
}
.nh-note-fields-top,
.nh-note-fields-bottom {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.nh-note-art {
padding: 4px 8px;
font-size: 12px;
border: 1px solid var(--border);
border-radius: 5px;
background: var(--surface);
font-family: inherit;
}
.nh-note-freitext {
flex: 1;
min-width: 120px;
padding: 4px 8px;
font-size: 13px;
border: 1px solid var(--border);
border-radius: 5px;
font-family: inherit;
}
.nh-note-datum {
font-size: 11px;
color: var(--text-muted);
white-space: nowrap;
}
.nh-note-label {
font-size: 11px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.nh-note-wert-picker,
.nh-gewicht-picker {
display: inline-flex;
gap: 3px;
align-items: center;
}
.nh-wert-btn,
.nh-gewicht-btn {
width: 30px;
height: 30px;
border: 1px solid var(--border);
background: var(--surface);
border-radius: 6px;
cursor: pointer;
font-size: 13px;
font-weight: 600;
font-family: inherit;
transition: all 0.1s ease;
padding: 0;
color: var(--text);
}
.nh-wert-btn:hover,
.nh-gewicht-btn:hover {
background: var(--surface-2);
border-color: var(--border-strong);
}
.nh-wert-btn.selected,
.nh-gewicht-btn.selected {
background: var(--accent);
color: white;
border-color: var(--accent);
}
.nh-gewicht-btn {
font-size: 11px;
}
.nh-gewicht-custom {
width: 52px;
height: 30px;
padding: 3px 6px;
font-size: 12px;
border: 1px solid var(--border);
border-radius: 6px;
text-align: center;
margin-left: 4px;
}
.nh-note-delete {
margin-left: auto;
}
.nh-footer-info {
flex: 1;
color: var(--text-muted);
font-size: 11px;
}
@media (max-width: 720px) {
.nh-overview-table { font-size: 11px; }
.nh-overview-table th, .nh-overview-table td { padding: 5px 6px; }
.nh-note-row { flex-direction: column; gap: 6px; }
.nh-note-wert { font-size: 28px; min-width: auto; justify-content: flex-start; }
.nh-endnote-big { min-width: 100px; padding: 8px 12px; }
.nh-endnote-value { font-size: 22px; }
}
.chat-msg {
position: relative;
}
.chat-msg-delete {
position: absolute;
top: 4px;
right: 6px;
background: rgba(0,0,0,0.08);
color: var(--text-muted);
border: none;
border-radius: 50%;
width: 20px;
height: 20px;
font-size: 14px;
line-height: 1;
cursor: pointer;
opacity: 0;
transition: all 0.15s ease;
padding: 0;
}
.chat-msg:hover .chat-msg-delete {
opacity: 1;
}
.chat-msg-delete:hover {
background: var(--red);
color: white;
}
.chat-header .chat-clear-btn {
background: transparent;
border: none;
font-size: 18px;
cursor: pointer;
padding: 4px 8px;
border-radius: 6px;
margin-right: 4px;
transition: background 0.15s ease;
}
.chat-header .chat-clear-btn:hover {
background: rgba(183,62,58,0.12);
}
/* === Spalten-Drag-Handle (nur Lehrer) === */
.column-drag-handle {
cursor: grab;
padding: 2px 5px;
color: var(--text-muted);
user-select: none;
font-size: 14px;
line-height: 1;
margin-right: 4px;
border-radius: 4px;
transition: background 0.15s ease;
}
.column-drag-handle:hover {
background: var(--surface-2);
color: var(--text);
}
.column-drag-handle:active {
cursor: grabbing;
}
.column.column-dragging {
opacity: 0.45;
}
.column.column-drag-over {
outline: 2px dashed var(--accent);
outline-offset: -2px;
background: var(--accent-bg, #ecf5f6);
}
/* "+ Karte hinzufügen" oben – etwas dezenter */
.add-card-btn.add-card-btn-top {
margin-bottom: 8px;
opacity: 0.7;
}
.add-card-btn.add-card-btn-top:hover {
opacity: 1;
}
/* === Hintergrundbild-Bearbeitungs-Button (nur Lehrer, nur auf hover sichtbar) === */
.site-header,
.top-grid .panel {
position: relative;
}
.bg-edit-btn {
position: absolute;
top: 8px;
right: 8px;
z-index: 10;
background: rgba(255,255,255,0.92);
border: 1px solid var(--border);
border-radius: 50%;
width: 32px;
height: 32px;
font-size: 15px;
cursor: pointer;
opacity: 0;
transition: opacity 0.15s ease, transform 0.15s ease;
box-shadow: var(--shadow-sm);
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.site-header .bg-edit-btn {
top: 50%;
right: 12px;
transform: translateY(-50%);
opacity: 0.4;
}
.site-header:hover .bg-edit-btn,
.top-grid .panel:hover .bg-edit-btn {
opacity: 1;
}
.site-header .bg-edit-btn:hover,
.top-grid .panel .bg-edit-btn:hover {
background: white;
transform: translateY(-50%) scale(1.08);
}
.top-grid .panel .bg-edit-btn:hover {
transform: scale(1.08);
}
/* === Custom Background für Elemente (ersetzt Tafel-Pattern bei Header) === */
.site-header.has-custom-bg::after,
.top-grid .panel.has-custom-bg::after {
content: "";
position: absolute;
inset: 0;
background-image: var(--custom-bg-image);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: var(--custom-bg-opacity, 0.5);
pointer-events: none;
z-index: 0;
border-radius: inherit;
}
.top-grid .panel.has-custom-bg::after {
border-radius: var(--radius-lg);
}
/* Header: wenn custom-bg gesetzt, deaktiviere Tafel-Pattern */
.site-header.has-custom-bg {
background: var(--surface);
}
.site-header.has-custom-bg::before {
display: none;
}
/* Panels: Inhalt muss über dem Hintergrund liegen */
.top-grid .panel.has-custom-bg > * {
position: relative;
z-index: 1;
}
.site-header.has-custom-bg > * {
position: relative;
z-index: 1;
}
/* ============================================================
Chat-Polish: X-Button rechts oben in der Modal-Ecke
+ WhatsApp-Bubble-Tails + dezentes Hintergrund-Pattern
============================================================ */
/* Modal muss position:relative haben, damit der X-Button absolut sitzen kann */
.chat-modal {
position: relative;
}
/* X-Button: eigenständig, schwebend, rechts oben in der Modal-Ecke */
.chat-modal-close {
position: absolute;
top: 14px;
right: 14px;
z-index: 50;
width: 38px;
height: 38px;
border-radius: 50%;
border: none;
background: rgba(255, 255, 255, 0.92);
color: #1f2937;
font-size: 18px;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
transition: all 0.15s ease;
line-height: 1;
padding: 0;
}
.chat-modal-close:hover {
background: white;
transform: scale(1.08);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}
.chat-modal-close:active {
transform: scale(0.96);
}
/* Bubble-Tails (kleine Spitzen wie bei WhatsApp) */
.chat-msg.mine .chat-msg-bubble::after {
content: '';
position: absolute;
bottom: 0;
right: -7px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 8px 8px;
border-color: transparent transparent var(--wa-mine) transparent;
}
.chat-msg.other .chat-msg-bubble::before {
content: '';
position: absolute;
top: 0;
left: -7px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 8px 8px 0;
border-color: transparent var(--wa-other) transparent transparent;
}
/* Bei gelöschten/Quote-Bubbles keine Tails */
.chat-msg.deleted .chat-msg-bubble::before,
.chat-msg.deleted .chat-msg-bubble::after { display: none; }
/* Hintergrund-Pattern im Chat-Bereich (sehr dezent, wie WhatsApp) */
.chat-messages {
background-color: #efeae2;
background-image:
radial-gradient(circle at 25% 35%, rgba(0,0,0,0.025) 1px, transparent 1.5px),
radial-gradient(circle at 75% 75%, rgba(0,0,0,0.025) 1px, transparent 1.5px);
background-size: 36px 36px, 56px 56px;
background-position: 0 0, 18px 28px;
}
/* Mobile: X-Button etwas kleiner */
@media (max-width: 640px) {
.chat-modal-close {
top: 10px;
right: 10px;
width: 34px;
height: 34px;
font-size: 16px;
}
}
/* === Pinnwand-Karten: Lupe 🔍 für wichtige Karten === */
.karte, .pinnwand-karte, [data-karte-id], .card {
position: relative;
}
.karte-important-toggle {
position: absolute;
top: 6px;
right: 6px;
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid var(--border, #e5e7eb);
background: white;
cursor: pointer;
font-size: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 0.4;
transition: all 0.15s;
z-index: 10;
padding: 0;
line-height: 1;
}
.karte-important-toggle:hover {
opacity: 1;
transform: scale(1.1);
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.karte-important-toggle.active {
opacity: 0; /* versteckt, weil das Badge dann an seiner Stelle angezeigt wird */
pointer-events: none;
}
.karte:hover .karte-important-toggle.active,
.pinnwand-karte:hover .karte-important-toggle.active,
.card:hover .karte-important-toggle.active {
opacity: 1;
pointer-events: auto;
background: white;
border-color: #f59e0b;
z-index: 11;
transform: scale(1.15);
}
.karte-important-badge {
position: absolute;
top: 6px;
right: 6px;
width: 30px;
height: 30px;
border-radius: 50%;
background: linear-gradient(135deg, #fbbf24, #f59e0b);
color: white;
font-size: 15px;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 3px 8px rgba(245, 158, 11, 0.5);
animation: karteImportantPulse 2s ease-in-out infinite;
z-index: 9;
pointer-events: none;
}
@keyframes karteImportantPulse {
0%, 100% { box-shadow: 0 3px 8px rgba(245, 158, 11, 0.5); }
50% { box-shadow: 0 3px 14px rgba(245, 158, 11, 0.75); }
}
/* Wichtige Karte visuell hervorheben */
.karte.karte-important,
.pinnwand-karte.karte-important,
[data-karte-id].karte-important,
.card.karte-important {
border: 2px solid #f59e0b !important;
background: linear-gradient(135deg, rgba(253, 230, 138, 0.35), rgba(251, 191, 36, 0.1)) !important;
box-shadow: 0 3px 12px rgba(245, 158, 11, 0.2) !important;
}
/* === News-Features: Schüler-Erledigt === */
.news-item, .news-card, [data-news-id] {
position: relative;
}
.news-important-toggle, .news-important-badge {
display: none !important; /* News-Lupe deaktiviert - nur Pinnwand-Karten haben Lupe */
}
/* Schüler-Erledigt-Button */
.news-done-btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: white;
border: 2px solid var(--border, #e5e7eb);
border-radius: 20px;
padding: 6px 14px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
color: #6b7280;
margin-top: 10px;
transition: all 0.2s;
font-family: inherit;
}
.news-done-btn:hover {
border-color: #22c55e;
color: #22c55e;
transform: translateY(-1px);
}
.news-done-btn.done {
background: linear-gradient(135deg, #dcfce7, #bbf7d0);
border-color: #22c55e;
color: #166534;
}
.news-done-btn.done:hover {
background: #f3f4f6;
border-color: #9ca3af;
color: #6b7280;
transform: none;
}
/* Erledigte News visuell abgehakt */
.news-item.news-done,
.news-card.news-done,
[data-news-id].news-done {
opacity: 0.65;
}
.news-item.news-done h3,
.news-card.news-done h3,
.news-item.news-done .news-title,
[data-news-id].news-done .news-title {
text-decoration: line-through;
color: #9ca3af !important;
}
/* === Hintergrund-Bild-Buttons deaktiviert (per User-Wunsch) === */
.bg-edit-btn,
#modal-bg-editor,
.bg-upload-zone,
.bg-preview-wrap {
display: none !important;
}
/* === Hintergrund-Editor-Modal === */
.bg-upload-zone {
border: 2px dashed var(--border-strong);
border-radius: var(--radius);
padding: 32px 20px;
text-align: center;
background: var(--surface-2);
cursor: pointer;
transition: all 0.15s ease;
}
.bg-upload-zone:hover,
.bg-upload-zone.drag-over {
border-color: var(--accent);
background: var(--accent-bg, #ecf5f6);
}
.bg-upload-zone .upload-icon {
font-size: 32px;
margin-bottom: 8px;
}
.bg-upload-zone .upload-text {
font-weight: 500;
margin-bottom: 4px;
}
.bg-upload-zone .upload-hint {
font-size: 12px;
color: var(--text-muted);
}
.bg-preview-wrap {
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
background: #fafafa;
max-height: 200px;
}
.bg-preview-wrap img {
display: block;
width: 100%;
max-height: 200px;
object-fit: cover;
}
#bg-opacity-slider {
width: 100%;
margin-top: 8px;
}
.site-header {
position: sticky;
background-image:
linear-gradient(rgba(255,255,255,0.88), rgba(255,255,255,0.92)),
/* Dezente "Kreidestriche" als CSS-Pattern */
repeating-linear-gradient(
135deg,
rgba(13,107,111,0.035) 0px,
rgba(13,107,111,0.035) 2px,
transparent 2px,
transparent 14px
),
repeating-linear-gradient(
45deg,
rgba(13,107,111,0.03) 0px,
rgba(13,107,111,0.03) 2px,
transparent 2px,
transparent 18px
);
}
.site-header::before {
display: none;
}
@media (max-width: 720px) {
.site-header::before { display: none; }
}
/* ============================================================
PAKET v10 - APP-SEITIGE Eltern-Features (nur authentifiziert)
============================================================ */
/* User-Pill: Eltern-Variante */
.user-pill.eltern {
background: linear-gradient(135deg, #fef3c7, #fde68a);
color: #78350f;
border-color: #f59e0b;
}
/* News-Modal: Visibility-Häkchen */
.news-visibility-block {
margin-top: 14px;
padding: 14px;
background: linear-gradient(135deg, #fffbea, #fef3c7);
border: 1px solid #fbbf24;
border-radius: 10px;
}
.news-visibility-block > label {
display: block;
font-size: 13px;
font-weight: 700;
color: #78350f;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 10px;
}
.vis-checkboxes {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.vis-checkbox {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: white;
border: 2px solid #e5e7eb;
border-radius: 10px;
cursor: pointer;
flex: 1;
min-width: 110px;
transition: all 0.15s;
user-select: none;
}
.vis-checkbox:hover {
border-color: #f59e0b;
background: #fffbea;
}
.vis-checkbox input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: #f59e0b;
cursor: pointer;
flex-shrink: 0;
}
.vis-checkbox input[type="checkbox"]:checked ~ .vis-icon,
.vis-checkbox input[type="checkbox"]:checked ~ .vis-label {
color: #78350f;
font-weight: 600;
}
.vis-checkbox input[type="checkbox"]:checked + .vis-icon {
color: #78350f;
}
.vis-checkbox:has(input:checked) {
border-color: #f59e0b;
background: linear-gradient(135deg, #fef3c7, #fde68a);
}
.vis-icon { font-size: 18px; }
.vis-label { font-size: 13px; color: #6b7280; }
.vis-templates {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 12px;
padding-top: 12px;
border-top: 1px dashed #fbbf24;
}
.btn-template {
padding: 6px 12px;
background: white;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 12px;
cursor: pointer;
font-family: inherit;
color: #374151;
transition: all 0.15s;
}
.btn-template:hover {
background: #f3f4f6;
border-color: #9ca3af;
}
/* Eltern-Verwaltung */
.eltern-toolbar {
display: flex;
gap: 10px;
margin-bottom: 18px;
flex-wrap: wrap;
}
.eltern-loading, .eltern-empty {
text-align: center;
padding: 40px 20px;
color: var(--text-muted);
}
.eltern-empty .empty-icon { font-size: 48px; margin-bottom: 12px; }
.eltern-group { margin-bottom: 24px; }
.eltern-group-title {
font-size: 14px;
font-weight: 700;
color: var(--text);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 10px;
padding-bottom: 6px;
border-bottom: 2px solid var(--border);
display: flex;
align-items: center;
gap: 8px;
}
.eltern-count {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--accent);
color: white;
border-radius: 12px;
padding: 2px 10px;
font-size: 12px;
font-weight: 600;
}
.eltern-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 12px;
}
.eltern-card {
background: white;
border: 1px solid var(--border);
border-radius: 12px;
padding: 14px;
transition: box-shadow 0.15s;
}
.eltern-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.eltern-card-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
}
.eltern-card-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, #f59e0b, #f97316);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 16px;
flex-shrink: 0;
}
.eltern-card-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.eltern-card-name strong { font-size: 14px; color: var(--text); }
.eltern-card-rolelabel { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.eltern-card-child {
background: var(--surface-2);
padding: 8px 12px;
border-radius: 8px;
font-size: 13px;
margin-bottom: 8px;
display: flex;
gap: 6px;
}
.eltern-child-label { color: var(--text-muted); }
.eltern-card-meta {
display: flex;
flex-wrap: wrap;
gap: 12px;
font-size: 11px;
color: var(--text-muted);
margin-bottom: 10px;
}
.eltern-card-actions {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.eltern-card-actions .btn { font-size: 12px; padding: 6px 10px; }
/* ═══════════════════════════════════════════════════════════════
BULK-AKTIONS-BAR (Schüler- und Eltern-Verwaltung)
═══════════════════════════════════════════════════════════════ */
.sv-bulk-bar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 14px 18px;
margin-bottom: 16px;
background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
border-radius: 10px;
border: 1px solid #cbd5e1;
flex-wrap: wrap;
}
.sv-bulk-info {
font-size: 14px;
color: #1e293b;
}
.sv-bulk-info strong {
display: inline-block;
min-width: 24px;
padding: 2px 8px;
background: #1e293b;
color: white;
border-radius: 12px;
text-align: center;
margin-right: 6px;
font-weight: 700;
}
.sv-bulk-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.sv-bulk-actions .btn:disabled {
opacity: 0.45;
cursor: not-allowed;
}
/* Schüler-Tabelle */
.sv-users-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.sv-users-table th {
background: #f8fafc;
padding: 12px 14px;
text-align: left;
font-size: 12px;
font-weight: 600;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 1px solid #e2e8f0;
}
.sv-users-table td {
padding: 11px 14px;
border-bottom: 1px solid #f1f5f9;
vertical-align: middle;
}
.sv-users-table tbody tr:hover {
background: #f8fafc;
}
.sv-users-table .actions {
text-align: right;
white-space: nowrap;
}
.sv-users-table .actions .btn {
margin-left: 4px;
}
.sv-cb-col {
width: 38px;
text-align: center;
padding-left: 14px !important;
padding-right: 6px !important;
}
.sv-cb-col input[type="checkbox"] {
width: 17px;
height: 17px;
cursor: pointer;
accent-color: #1e293b;
}
.sv-klasse-group-header {
background: #f1f5f9 !important;
font-weight: 600;
color: #334155;
font-size: 14px;
letter-spacing: 0.3px;
}
.sv-klasse-group-header input[type="checkbox"] {
width: 16px;
height: 16px;
cursor: pointer;
margin-right: 8px;
vertical-align: middle;
accent-color: #475569;
}
.user-username {
font-family: ui-monospace, 'SF Mono', Menlo, monospace;
font-size: 13px;
background: #f1f5f9;
padding: 2px 8px;
border-radius: 4px;
color: #475569;
}
.last-login {
color: #64748b;
font-size: 13px;
}
.must-change-badge {
display: inline-block;
margin-left: 8px;
padding: 2px 8px;
background: #fef3c7;
color: #92400e;
border-radius: 10px;
font-size: 11px;
font-weight: 600;
}
.sv-empty {
text-align: center;
padding: 40px 20px;
color: #64748b;
font-size: 14px;
background: #f8fafc;
border-radius: 10px;
border: 2px dashed #cbd5e1;
}
/* Eltern-Bulk-Bar (nutzt sv-bulk-bar Stile) */
.el-bulk-bar {
margin-bottom: 18px;
}
.eltern-group-title input[type="checkbox"].el-cb-klasse {
width: 16px;
height: 16px;
cursor: pointer;
margin-right: 10px;
vertical-align: middle;
accent-color: #475569;
}
.eltern-card-head input[type="checkbox"].el-cb-eltern {
width: 17px;
height: 17px;
cursor: pointer;
accent-color: #1e293b;
margin-top: 2px;
}
/* Bulk-Reset-Ergebnisse-Modal: Tabelle innen */
#el-bulk-results-modal .modal-lg {
max-width: 720px;
}
#el-bulk-results-body {
max-height: 60vh;
overflow-y: auto;
}
#el-bulk-results-body table th {
position: sticky;
top: 0;
z-index: 1;
}
/* Print-Stil für Passwort-Briefe */
@media print {
body * { visibility: hidden; }
#el-bulk-results-modal, #el-bulk-results-modal * { visibility: visible; }
#el-bulk-results-modal {
position: absolute;
top: 0;
left: 0;
width: 100%;
background: white;
}
#el-bulk-results-modal .modal-overlay { background: white; }
#el-bulk-results-modal .modal-footer { display: none; }
}
/* Parent-Role-Picker (im Anlegen-Dialog) */
.parent-role-picker {
display: flex;
gap: 8px;
}
.parent-role-option {
flex: 1;
padding: 12px;
background: white;
border: 2px solid var(--border);
border-radius: 10px;
text-align: center;
cursor: pointer;
transition: all 0.15s;
}
.parent-role-option input { display: none; }
.parent-role-option:hover { border-color: var(--accent); }
.parent-role-option:has(input:checked) {
border-color: var(--accent);
background: var(--accent-soft);
color: var(--accent-dark);
font-weight: 600;
}
/* Form-Row für 2-spaltige Form-Groups */
.form-row {
display: flex;
gap: 12px;
}
.form-row > .form-group { margin-bottom: 0; }
/* Eltern-Brief (Drucklayout) */
.brief-actions {
margin-bottom: 20px;
display: flex;
gap: 10px;
justify-content: flex-end;
}
.eltern-brief-paper {
background: white;
padding: 50px 60px;
border: 1px solid var(--border);
border-radius: 6px;
font-family: 'Source Serif 4', Georgia, serif;
line-height: 1.6;
color: #1f2937;
font-size: 15px;
max-width: 700px;
margin: 0 auto;
}
.brief-header {
display: flex;
justify-content: space-between;
align-items: baseline;
border-bottom: 2px solid var(--accent);
padding-bottom: 8px;
margin-bottom: 24px;
}
.brief-classtitle {
font-weight: 700;
font-size: 14px;
color: var(--accent-dark);
letter-spacing: 0.3px;
}
.brief-date { font-size: 13px; color: #6b7280; }
.brief-title {
font-size: 22px;
font-weight: 600;
margin: 18px 0 16px;
}
.brief-credentials {
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 16px 20px;
margin: 18px 0;
}
.brief-cred-row {
display: grid;
grid-template-columns: 160px 1fr;
gap: 16px;
padding: 6px 0;
}
.brief-cred-label { color: #6b7280; font-size: 14px; }
.brief-cred-value { font-size: 14px; }
.brief-cred-mono { font-family: 'Courier New', monospace; }
.brief-section-title {
font-size: 16px;
font-weight: 600;
margin: 22px 0 8px;
}
.brief-list { margin: 8px 0 8px 20px; }
.brief-list li { padding: 3px 0; }
.brief-footer {
margin-top: 32px;
padding-top: 16px;
border-top: 1px dashed #d1d5db;
font-size: 12px;
color: #6b7280;
}
/* Druck */
@media print {
body * { visibility: hidden; }
#eltern-brief-modal, #eltern-brief-modal * { visibility: visible; }
#eltern-brief-modal { position: absolute; left: 0; top: 0; right: 0; }
#eltern-brief-modal .modal-overlay,
#eltern-brief-modal .modal { all: unset; display: block; }
#eltern-brief-modal .modal-header { display: none !important; }
#eltern-brief-modal .no-print { display: none !important; }
.eltern-brief-paper {
border: none !important;
box-shadow: none !important;
margin: 0;
padding: 0;
max-width: 100%;
}
}
/* Chat: Eltern-Chat-Item-Indikator */
.chat-li-parent-badge {
font-size: 11px;
margin-left: 4px;
opacity: 0.7;
}
.chat-avatar-parent {
font-size: 18px !important;
}
/* PDF-Vorschau-Wrapper: standardmäßig versteckt, nur .open zeigt iframe */
.pdf-iframe-wrapper {
display: none;
width: 100%;
height: 0;
border: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.pdf-iframe-wrapper.open {
display: block;
height: 600px;
margin-top: 10px;
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
}
.pdf-iframe-wrapper iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
}
/* ============================================================
PAKET v10.2 — Pinnwand-Schutz für Schüler + schöne Buttons
============================================================ */
/* Bg-Style-Toggle (Dezent / Farbig) — schöne Segmented-Button-Group */
.bg-style-toggle {
display: inline-flex;
background: var(--surface-2);
border-radius: 10px;
padding: 4px;
gap: 4px;
border: 1px solid var(--border);
}
.bg-style-toggle .bg-option {
flex: 1;
padding: 8px 18px;
background: transparent;
border: none;
border-radius: 7px;
font-size: 13px;
font-weight: 500;
color: var(--text-muted);
cursor: pointer;
transition: all 0.15s ease;
font-family: inherit;
position: relative;
min-width: 90px;
}
.bg-style-toggle .bg-option:hover:not(.active) {
background: rgba(0,0,0,0.04);
color: var(--text);
}
.bg-style-toggle .bg-option.active {
background: var(--accent);
color: white;
font-weight: 600;
box-shadow: 0 2px 6px rgba(13, 90, 89, 0.25);
transform: translateY(-1px);
}
.bg-style-toggle .bg-option.active::before {
content: '✓ ';
font-weight: 700;
}
/* Pinnwand: privat / readonly Badges */
.pinnwand-private-badge {
display: inline-flex;
align-items: center;
gap: 3px;
background: linear-gradient(135deg, #fef3c7, #fde68a);
color: #78350f;
border: 1px solid #f59e0b;
border-radius: 12px;
padding: 2px 10px;
font-size: 11px;
font-weight: 600;
}
.pinnwand-readonly-badge {
display: inline-flex;
align-items: center;
gap: 3px;
background: var(--surface-2);
color: var(--text-muted);
border: 1px solid var(--border);
border-radius: 12px;
padding: 2px 10px;
font-size: 11px;
font-weight: 500;
}
.pinnwand-card.private {
border-left: 4px solid #f59e0b;
}
.pinnwand-card.readonly {
opacity: 0.95;
}
.pinnwand-card.readonly h3::before {
content: '👁 ';
opacity: 0.5;
font-size: 0.85em;
}
/* "Eigene Pinnwand"-Add-Tile (Schüler-Variante) */
.pinnwand-card.add-new.private {
border: 2px dashed #f59e0b;
background: linear-gradient(135deg, #fffbea, #fef3c7);
}
.pinnwand-card.add-new.private:hover {
background: linear-gradient(135deg, #fef3c7, #fde68a);
border-color: #d97706;
}
.pinnwand-card.add-new .add-new-hint {
font-size: 11px;
color: #92400e;
margin-top: 4px;
font-style: italic;
}
/* Card-Item: Read-Only-Variante (kein Hover, kein Cursor-Pointer) */
.card-item.card-readonly {
cursor: default !important;
}
.card-item.card-readonly:hover {
transform: none !important;
box-shadow: none !important;
}
/* Lösch-Button in Pinnwand-Listen-Kachel */
.btn-icon-danger {
color: #ef4444;
transition: all 0.15s;
}
.btn-icon-danger:hover {
background: #fee2e2;
color: #b91c1c;
}
/* Cleanup-Banner: verwaiste private Pinnwände aufräumen */
.cleanup-banner {
grid-column: 1 / -1;
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
border: 2px solid #f59e0b;
border-radius: 14px;
padding: 16px 20px;
margin-bottom: 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
flex-wrap: wrap;
}
.cleanup-banner-content {
display: flex;
align-items: center;
gap: 14px;
flex: 1;
min-width: 280px;
}
.cleanup-icon { font-size: 32px; flex-shrink: 0; }
.cleanup-text { display: flex; flex-direction: column; gap: 2px; }
.cleanup-text strong { font-size: 15px; color: #78350f; }
.cleanup-text span { font-size: 13px; color: #92400e; }
.cleanup-btn {
background: white;
border: 2px solid #d97706;
color: #78350f;
border-radius: 10px;
padding: 9px 18px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
font-family: inherit;
flex-shrink: 0;
}
.cleanup-btn:hover {
background: #d97706;
color: white;
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(217, 119, 6, 0.3);
}
/* ============================================================
KI-LERNHELFER (v11)
============================================================ */
.ai-modal-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(15, 23, 42, 0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
padding: 20px;
}
.ai-modal-overlay.active {
opacity: 1;
pointer-events: auto;
}
.ai-modal {
background: white;
width: 100%;
max-width: 1100px;
height: 92vh;
max-height: 92vh;
border-radius: 18px;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0,0,0,0.25);
transform: translateY(20px) scale(0.97);
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.ai-modal-overlay.active .ai-modal {
transform: translateY(0) scale(1);
}
@media (max-width: 600px) {
.ai-modal-overlay { padding: 0; }
.ai-modal { max-width: 100%; height: 100vh; max-height: 100vh; border-radius: 0; }
}
.ai-modal-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 14px 18px;
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
}
.ai-modal-header-left {
display: flex;
align-items: center;
gap: 12px;
}
.ai-avatar {
width: 40px;
height: 40px;
background: rgba(255,255,255,0.2);
border: 2px solid rgba(255,255,255,0.4);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 14px;
letter-spacing: 0.5px;
}
.ai-modal-title {
font-size: 17px;
font-weight: 700;
font-family: 'Outfit', sans-serif;
line-height: 1.2;
}
.ai-modal-subtitle {
font-size: 12px;
opacity: 0.85;
margin-top: 2px;
}
.ai-close-btn {
background: rgba(255,255,255,0.15);
border: none;
color: white;
width: 36px;
height: 36px;
border-radius: 50%;
font-size: 24px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
transition: background 0.15s;
}
.ai-close-btn:hover { background: rgba(255,255,255,0.3); }
.ai-chat-body {
flex: 1;
overflow-y: auto;
padding: 16px 18px;
background: #f8fafc;
display: flex;
flex-direction: column;
gap: 10px;
scroll-behavior: smooth;
}
.ai-welcome {
text-align: center;
padding: 30px 16px;
color: var(--text-muted);
margin: auto 0;
}
.ai-welcome-icon { font-size: 56px; margin-bottom: 10px; }
.ai-welcome-title {
font-size: 18px;
font-weight: 600;
color: var(--text);
margin-bottom: 8px;
font-family: 'Outfit', sans-serif;
}
.ai-welcome-text {
font-size: 14px;
line-height: 1.5;
max-width: 380px;
margin: 0 auto 18px;
}
.ai-suggestion-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
}
.ai-chip {
background: white;
border: 1px solid #e5e7eb;
border-radius: 16px;
padding: 6px 14px;
font-size: 13px;
color: #475569;
cursor: pointer;
transition: all 0.15s;
font-family: inherit;
}
.ai-chip:hover {
background: #ede9fe;
border-color: #c4b5fd;
color: #6d28d9;
}
.ai-msg {
display: flex;
max-width: 100%;
}
.ai-msg-user { justify-content: flex-end; }
.ai-msg-assistant { justify-content: flex-start; }
.ai-msg-system { justify-content: center; }
.ai-msg-bubble {
max-width: 85%;
padding: 10px 14px;
border-radius: 16px;
font-size: 14px;
line-height: 1.55;
word-wrap: break-word;
}
.ai-msg-user .ai-msg-bubble {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-bottom-right-radius: 4px;
}
.ai-msg-assistant .ai-msg-bubble {
background: white;
color: var(--text);
border: 1px solid #e5e7eb;
border-bottom-left-radius: 4px;
}
.ai-msg-system-text {
background: #fef3c7;
border: 1px solid #fde68a;
color: #78350f;
padding: 8px 14px;
border-radius: 12px;
font-size: 13px;
font-weight: 500;
}
.ai-msg-bubble strong { font-weight: 600; }
.ai-msg-bubble em { font-style: italic; }
.ai-msg-bubble code {
background: rgba(0,0,0,0.06);
padding: 1px 6px;
border-radius: 4px;
font-family: 'Courier New', monospace;
font-size: 13px;
}
.ai-msg-user .ai-msg-bubble code { background: rgba(255,255,255,0.2); }
.ai-msg-bubble pre {
background: rgba(0,0,0,0.06);
padding: 8px 12px;
border-radius: 6px;
margin: 6px 0;
overflow-x: auto;
font-size: 13px;
}
.ai-msg-bubble pre code {
background: none;
padding: 0;
}
.ai-msg-bubble ul, .ai-msg-bubble ol {
margin: 4px 0;
padding-left: 22px;
}
.ai-msg-bubble li { margin: 2px 0; }
.ai-typing-dots {
display: flex;
gap: 4px;
padding: 4px 2px;
}
.ai-typing-dots span {
width: 8px;
height: 8px;
background: #cbd5e1;
border-radius: 50%;
animation: aiTyping 1.4s infinite ease-in-out;
}
.ai-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.ai-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes aiTyping {
0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
30% { transform: translateY(-6px); opacity: 1; }
}
.ai-modal-footer {
background: white;
border-top: 1px solid #e5e7eb;
padding: 12px 14px 10px;
flex-shrink: 0;
}
.ai-input-row {
display: flex;
gap: 8px;
align-items: flex-end;
}
.ai-input-row textarea {
flex: 1;
border: 1.5px solid #e5e7eb;
border-radius: 18px;
padding: 9px 16px;
font-size: 14px;
font-family: inherit;
resize: none;
outline: none;
line-height: 1.4;
max-height: 140px;
transition: border-color 0.15s;
}
.ai-input-row textarea:focus {
border-color: #a78bfa;
}
.ai-send-btn {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.15s;
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}
.ai-send-btn:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
.ai-send-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.ai-footer-info {
display: flex;
justify-content: space-between;
margin-top: 8px;
font-size: 11px;
color: var(--text-muted);
padding: 0 4px;
}
.ai-disclaimer { font-style: italic; }
/* === Bild-Vorschau in Pinnwand-Karten === */
.card-image-preview {
margin-top: 8px;
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--border);
cursor: zoom-in;
background: var(--surface-2);
transition: border-color 0.15s;
max-width: 100%;
}
.card-image-preview:hover { border-color: var(--accent); }
.card-image-preview img {
width: 100%;
max-width: 100%;
max-height: 220px;
height: auto;
object-fit: contain;
display: block;
border-radius: 0;
border: none;
margin: 0;
}
.img-caption {
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px 10px;
font-size: 11px;
color: var(--text-muted);
background: var(--surface-2);
border-top: 1px solid var(--border);
}
/* Karten: alle Bilder immer begrenzen */
.card-item img {
max-width: 100%;
height: auto;
display: block;
}
/* ================================================================
LIGHTBOX
================================================================ */
.lightbox {
display: none; position: fixed; inset: 0; z-index: 99999;
background: rgba(0,0,0,0.92); align-items: center;
justify-content: center; cursor: zoom-out;
}
.lightbox.active { display: flex; }
.lightbox img {
max-width: 92vw; max-height: 88vh; object-fit: contain;
border-radius: 6px; box-shadow: 0 8px 40px rgba(0,0,0,0.6);
cursor: default; display: block;
}
.lightbox-close {
position: fixed; top: 18px; right: 22px;
background: rgba(255,255,255,0.15); border: none; color: white;
font-size: 26px; width: 44px; height: 44px; border-radius: 50%;
cursor: pointer; display: flex; align-items: center;
justify-content: center; transition: background 0.15s; z-index: 100000;
}
.lightbox-close:hover { background: rgba(255,255,255,0.3); }
.lightbox-caption {
position: fixed; bottom: 20px; left: 50%;
transform: translateX(-50%); color: rgba(255,255,255,0.75);
font-size: 13px; background: rgba(0,0,0,0.5);
padding: 6px 16px; border-radius: 20px; white-space: nowrap;
max-width: 90vw; overflow: hidden; text-overflow: ellipsis;
}
/* ================================================================
PDF-LINK IN PINNWAND-KARTEN
================================================================ */
.card-pdf-preview { margin-top: 8px; }
.card-pdf-link {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px; background: var(--surface-2);
border: 1px solid var(--border); border-radius: 8px;
text-decoration: none; color: var(--text); transition: all 0.15s; cursor: pointer;
}
.card-pdf-link:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-dark); }
.card-pdf-icon { font-size: 24px; flex-shrink: 0; }
.card-pdf-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.card-pdf-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-pdf-meta { font-size: 11px; color: var(--text-muted); }
.card-pdf-arrow { font-size: 16px; color: var(--text-muted); flex-shrink: 0; }
/* ================================================================
PUSH NOTIFICATIONS TOAST
================================================================ */
.header-tile-bell { border-color: var(--accent) !important; }
.header-tile-bell:hover { background: var(--accent-soft) !important; }
.push-toast {
position: fixed; bottom: 24px; left: 50%;
transform: translateX(-50%) translateY(20px);
background: #1e293b; color: white; padding: 12px 22px;
border-radius: 24px; font-size: 14px; font-weight: 500;
opacity: 0; transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
z-index: 99998; box-shadow: 0 4px 20px rgba(0,0,0,0.3);
white-space: nowrap; pointer-events: none;
}
.push-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.push-toast.warning { background: #d97706; }
.push-toast.error { background: #dc2626; font-weight: 600; }
/* ================================================================
UNTERRICHT 3.0 – WIDGET, KACHEL, EDITOR, ÜBERSICHT
================================================================ */
.header-tile-u30 { border-color: #7c3aed !important; }
.header-tile-u30:hover { background: #ede9fe !important; }
.u30-plan-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; background: var(--surface); }
.u30-plan-card.u30-active { border-color: #7c3aed; background: #faf5ff; }
.u30-plan-card-main { flex: 1; min-width: 0; }
.u30-badge-active { color: #7c3aed; font-size: 12px; font-weight: 700; }
.u30-badge-inactive { color: var(--text-muted); font-size: 12px; }
.u30-plan-title { font-weight: 600; font-size: 15px; margin: 4px 0 2px; }
.u30-plan-desc { font-size: 13px; color: var(--text-muted); }
.u30-plan-meta { font-size: 12px; color: var(--text-soft); margin-top: 4px; }
.u30-plan-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
.u30-editor-wrap { padding: 4px 0; }
.u30e-meta-row { display: flex; gap: 16px; margin-bottom: 8px; flex-wrap: wrap; }
.u30e-meta-row .form-group { flex: 1; min-width: 200px; }
.u30e-section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin: 16px 0 10px; }
.u30e-karte { border: 1px solid var(--border); border-radius: 12px; padding: 0; margin-bottom: 12px; overflow: hidden; transition: box-shadow 0.15s; }
.u30e-karte:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
.u30e-karte-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.6); flex-wrap: wrap; }
.u30e-karte-header-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.u30e-karte-header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.u30e-karte-num { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: white; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.u30e-karte .u30-bereich-title { flex: 1; min-width: 0; padding: 7px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; font-weight: 600; font-family: inherit; background: white; }
.u30e-schw-toggle { display: flex; gap: 4px; }
.u30e-schw-btn { padding: 5px 10px; border: 1px solid var(--border); border-radius: 6px; background: white; font-size: 12px; font-family: inherit; cursor: pointer; transition: all 0.12s; white-space: nowrap; }
.u30e-schw-btn[data-schw="leicht"].active { background: #dcfce7; border-color: #22c55e; color: #15803d; font-weight: 700; }
.u30e-schw-btn[data-schw="mittel"].active { background: #fef9c3; border-color: #f59e0b; color: #92400e; font-weight: 700; }
.u30e-schw-btn[data-schw="schwer"].active { background: #fee2e2; border-color: #ef4444; color: #b91c1c; font-weight: 700; }
.u30e-delete-btn { background: none; border: none; cursor: pointer; font-size: 16px; padding: 4px 6px; border-radius: 6px; opacity: 0.4; transition: opacity 0.15s; }
.u30e-delete-btn:hover { opacity: 1; background: #fee2e2; }
.u30e-aufgaben { padding: 10px 14px 8px; }
.u30e-aufgabe-row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.u30e-aufg-num { font-size: 12px; font-weight: 700; color: var(--text-muted); min-width: 22px; text-align: right; flex-shrink: 0; }
.u30e-aufgabe-input { flex: 1; padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px; font-size: 13px; font-family: inherit; background: white; }
.u30e-aufg-del { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px 6px; border-radius: 5px; font-size: 13px; opacity: 0; transition: opacity 0.12s; flex-shrink: 0; }
.u30e-aufgabe-row:hover .u30e-aufg-del { opacity: 1; }
.u30e-aufg-del:hover { background: #fee2e2; color: #b91c1c; }
.u30e-add-aufgabe-btn { background: none; border: 1px dashed var(--border); border-radius: 7px; padding: 6px 12px; font-size: 12px; color: var(--text-muted); cursor: pointer; width: 100%; text-align: left; margin-top: 4px; transition: all 0.12s; font-family: inherit; }
.u30e-add-aufgabe-btn:hover { background: var(--surface-2); border-color: var(--accent); color: var(--accent-dark); }
.u30e-self-badge { padding: 7px 14px; font-size: 11px; color: #7c3aed; background: #faf5ff; border-top: 1px solid #e9d5ff; font-weight: 600; }
.u30e-add-bereich-btn { width: 100%; padding: 12px; border: 2px dashed var(--border); border-radius: 12px; background: none; font-size: 14px; color: var(--text-muted); cursor: pointer; margin-top: 4px; transition: all 0.15s; font-family: inherit; }
.u30e-add-bereich-btn:hover { border-color: var(--accent); color: var(--accent-dark); background: var(--accent-soft); }
.u30e-feedback-hint { margin-top: 14px; padding: 10px 14px; background: #faf5ff; border: 1px solid #e9d5ff; border-radius: 8px; font-size: 12px; color: #7c3aed; }
.u30-widget { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; margin-top: 14px; }
.u30-widget-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; flex-wrap: wrap; }
.u30-widget-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.u30-widget-desc { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }
.u30-widget-total { display: flex; align-items: center; gap: 10px; }
.u30-total-bar-wrap { width: 120px; height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.u30-total-bar { height: 100%; background: #7c3aed; border-radius: 4px; transition: width 0.4s ease; }
.u30-total-pct { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.u30-bereiche-list { display: flex; flex-direction: column; gap: 10px; }
.u30-bereich { background: var(--surface-2); border-radius: var(--radius); padding: 12px 14px; }
.u30-bereich-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 8px; }
.u30-bereich-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.u30-bereich-name { font-weight: 600; font-size: 14px; }
.u30-schw-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
.u30-bereich-count { font-size: 12px; color: var(--text-muted); font-weight: 600; white-space: nowrap; }
.u30-bereich-count.done { color: #16a34a; }
.u30-aufgaben-grid { display: flex; flex-direction: column; gap: 6px; }
.u30-aufgabe-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; background: white; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; transition: all 0.15s; user-select: none; }
.u30-aufgabe-item:hover { border-color: #7c3aed; background: #faf5ff; }
.u30-aufgabe-item.done { background: #f0fdf4; border-color: #86efac; }
.u30-check { width: 20px; height: 20px; border: 2px solid var(--border-strong); border-radius: 5px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all 0.15s; margin-top: 1px; }
.u30-check.checked { background: #16a34a; border-color: #16a34a; }
.u30-check svg { width: 12px; height: 12px; }
.u30-aufg-text { font-size: 13px; line-height: 1.4; flex: 1; }
.u30-aufgabe-item.done .u30-aufg-text { text-decoration: line-through; color: var(--text-muted); }
.u30-pinnwand-tile { background: linear-gradient(135deg, #faf5ff, #ede9fe) !important; border-top: 3px solid #7c3aed !important; cursor: pointer; }
.u30-pinnwand-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(124,58,237,0.2) !important; }
.u30-tile-icon { font-size: 28px; margin-bottom: 6px; }
.u30-tile-bar-wrap { width: 100%; height: 6px; background: rgba(124,58,237,0.15); border-radius: 3px; overflow: hidden; margin: 10px 0 4px; }
.u30-tile-bar { height: 100%; border-radius: 3px; transition: width 0.4s ease; }
.u30-tile-pct { font-size: 22px; font-weight: 800; font-family: 'Outfit', sans-serif; text-align: right; }
.u30-ov-tabs { display: flex; border-bottom: 2px solid var(--border); background: var(--surface-2); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.u30-ov-tab { flex: 1; padding: 14px 20px; border: none; background: none; font-size: 14px; font-weight: 600; color: var(--text-muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: all 0.15s; font-family: inherit; }
.u30-ov-tab:hover { color: var(--text); background: var(--surface); }
.u30-ov-tab.active { color: #7c3aed; border-bottom-color: #7c3aed; background: white; }
.u30-overview-plan-title { font-size: 14px; color: var(--text-muted); margin-bottom: 14px; }
.u30-overview-table-wrap { overflow-x: auto; }
.u30-overview-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 500px; }
.u30-overview-table th { text-align: left; padding: 8px 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); border-bottom: 2px solid var(--border); white-space: nowrap; }
.u30-overview-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); }
.u30-overview-table tr:hover td { background: var(--surface-2); }
.u30-ov-name { font-weight: 600; white-space: nowrap; }
.u30-ov-bar-wrap { width: 100px; height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; display: inline-block; margin-right: 6px; vertical-align: middle; }
.u30-ov-bar { height: 100%; border-radius: 4px; }
.u30-ov-pct { font-size: 12px; color: var(--text-muted); vertical-align: middle; }
.u30-overview-legend { display: flex; gap: 10px; margin-top: 14px; font-size: 12px; flex-wrap: wrap; }
/* ===========================================================================
* Phase 1.56 — LERNKURSE-KACHELN auf Schueler-Startseite
* =========================================================================== */
.lernkurse-section {
margin: 28px 0;
}
.lernkurse-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 16px;
margin-top: 14px;
}
.lernkurs-card {
background: var(--surface, #fff);
border: 1px solid var(--border, #e5e7eb);
border-radius: 14px;
padding: 18px 20px;
cursor: pointer;
transition: all 0.18s ease;
display: flex;
flex-direction: column;
gap: 10px;
box-shadow: 0 2px 6px rgba(0,0,0,0.04);
outline: none;
}
.lernkurs-card:hover, .lernkurs-card:focus-visible {
transform: translateY(-3px);
box-shadow: 0 10px 24px rgba(0,0,0,0.10);
border-color: #cbd5e1;
}
.lernkurs-card-fach {
display: inline-block;
padding: 4px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #fff;
align-self: flex-start;
}
.lernkurs-card-title {
font-size: 17px;
font-weight: 700;
color: var(--text, #111827);
line-height: 1.3;
margin: 0;
}
.lernkurs-card-subtitle {
font-size: 13px;
color: var(--text-muted, #6b7280);
line-height: 1.4;
margin: 0;
}
.lernkurs-card-progress {
margin-top: auto;
}
.lernkurs-card-progress-bar {
height: 8px;
background: var(--surface-2, #f3f4f6);
border-radius: 999px;
overflow: hidden;
margin-bottom: 6px;
}
.lernkurs-card-progress-bar-fill {
height: 100%;
border-radius: 999px;
transition: width 0.4s ease;
}
.lernkurs-card-progress-text {
font-size: 12px;
color: var(--text-muted, #6b7280);
font-weight: 500;
}
.lernkurs-card-action {
font-size: 13px;
font-weight: 600;
color: var(--accent, #0d9488);
margin-top: 4px;
}
.lernkurs-card:hover .lernkurs-card-action {
text-decoration: underline;
}
/* Mobile: Lernkurs-Kacheln eine Spalte, kompakter */
@media (max-width: 600px) {
.lernkurse-grid { grid-template-columns: 1fr; gap: 12px; }
.lernkurs-card { padding: 14px 16px; gap: 8px; }
.lernkurs-card-title { font-size: 16px; }
.lernkurs-card-subtitle { font-size: 13px; }
}
/* ===========================================================================
* Phase 1.56 — SMARTPHONE-OPTIMIERUNG (Eltern + Aktuelles/Termine/Chat)
* Konsolidierter Mobile-Block — Eltern kommen FAST NUR per Smartphone,
* Schueler-Kernfunktionen auf Mobile = Aktuelles, Termine, Chat.
* =========================================================================== */
@media (max-width: 600px) {
/* === HEADER kompakter (besonders fuer Eltern, die nur Chat+Refresh+Logout sehen) === */
body header { padding: 0; }
.header-actions { gap: 4px !important; padding: 4px 8px; }
.header-tile {
padding: 7px 9px !important;
min-height: 40px;
border-radius: 8px;
}
.header-tile-lbl { display: none; } /* nur Icons → mehr Platz */
.header-tile-ico { font-size: 19px; }
.nll-latency-dot { width: 28px !important; height: 28px !important; }
/* === AKTUELLES + TERMINE: Listen-max-height aufheben (kein nested scroll) === */
.top-grid { gap: 14px; margin-bottom: 18px; }
.news-list, .termine-list { max-height: none; }
.panel { padding: 14px 14px; }
.panel-header { padding-bottom: 10px; margin-bottom: 12px; }
.panel-header h2 { font-size: 17px; }
/* === News-Karten: groessere Schrift + Padding fuer Touch (44px+) === */
.news-item { padding: 14px 16px; min-height: 44px; }
.news-item-title { font-size: 15px; margin-bottom: 4px; }
.news-item-text { font-size: 14px; line-height: 1.55; }
.news-item-date { font-size: 12px; }
/* Action-Buttons (Edit/Loeschen): immer sichtbar (kein hover auf Touch) */
.news-item-actions, .termin-actions { opacity: 0.7 !important; }
.news-item:hover .news-item-actions,
.termin-item:hover .termin-actions { opacity: 1 !important; }
/* === Termin-Karten === */
.termin-item { padding: 14px 16px; gap: 12px; min-height: 44px; }
/* === Modals: bisher Karte mit Backdrop → automatisch Vollbild auf Mobile === */
.modal-overlay.active > .modal:not(.modal-fullscreen-page > .modal) {
max-width: 100vw !important;
max-height: 100vh !important;
width: 100vw !important;
height: 100vh !important;
border-radius: 0 !important;
margin: 0 !important;
}
.modal-overlay.active { padding: 0 !important; }
/* === Birthday-Banner: kleiner === */
#birthday-banner-container { font-size: 14px; }
/* === CHAT — WhatsApp-Pattern: Sidebar oben full-width, Klick → Main im Vordergrund === */
.chat-modal { padding: 0; }
.chat-wrap { flex-direction: column !important; }
.chat-sidebar {
width: 100% !important;
border-right: none;
border-bottom: 1px solid var(--wa-border);
height: auto !important;
max-height: none !important;
flex: 1 1 auto;
}
.chat-main { width: 100% !important; flex: 1 1 auto; min-height: 0; }
/* Wenn ein Chat aktiv: Sidebar verstecken (Klasse via JS) */
.chat-modal.chat-mobile-main .chat-sidebar { display: none; }
.chat-modal.chat-mobile-main .chat-main { display: flex; flex-direction: column; flex: 1; }
/* Mobile-Back-Button im Main-Header (nur sichtbar wenn aktiv) */
.chat-mobile-back-btn { display: none; }
.chat-modal.chat-mobile-main .chat-mobile-back-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px;
background: rgba(255,255,255,0.2);
border: none;
border-radius: 50%;
color: var(--wa-text);
font-size: 18px;
cursor: pointer;
margin-right: 8px;
}
/* Chat-Empty-Logo kleiner auf Mobile */
.chat-empty-logo { width: 130px !important; max-height: 130px !important; }
/* === "Design wählen"-Button kompakter === */
.chat-theme-side-btn { font-size: 11px; padding: 4px 8px; }
}
/* === Sehr kleine Bildschirme (iPhone SE, 320-375px) === */
@media (max-width: 380px) {
.header-tile { padding: 6px 7px !important; }
.header-tile-ico { font-size: 17px; }
.header-actions { gap: 2px !important; }
.panel { padding: 12px 12px; }
.news-item, .termin-item { padding: 12px 14px; }
}