/* ===== Grundlayout der Lernplattform ===== */
:root {
  --col-bg: #f4f6f9;
  --col-card: #ffffff;
  --col-text: #1f2d3d;
  --col-muted: #6b7a90;
  --col-primary: #2c6cb0;
  --col-primary-dark: #1f5290;
  --col-border: #dde3ec;
  --col-ok-bg: #e3f5e8; --col-ok-tx: #1d7a3a;
  --col-err-bg: #fde7e7; --col-err-tx: #b32525;
  --radius: 12px;
  --shadow: 0 2px 8px rgba(31, 45, 61, .08);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--col-bg);
  color: var(--col-text);
  line-height: 1.5;
}
a { color: var(--col-primary); }

/* Header / Nav */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .5rem;
  background: var(--col-card);
  padding: .8rem 1.2rem;
  box-shadow: var(--shadow);
  position: sticky; top: 0; z-index: 1000;
}
.brand { font-weight: 700; font-size: 1.25rem; text-decoration: none; color: var(--col-text); }
.main-nav { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.main-nav a { text-decoration: none; }
.nav-user { color: var(--col-muted); font-size: 1.05rem; }
.nav-user-name { color: #e8720c; font-weight: 700; }
.main-nav a.nav-user-name { color: #e8720c; }

/* Einheitliche Fußzeile der Hilfe-Seiten: drei blaue Button-Boxen */
.hilfe-boxes { display: grid; gap: .75rem; margin: 1.8rem 0 .4rem; }
.hilfe-box { display: flex; align-items: center; gap: .9rem 1.1rem; flex-wrap: wrap;
  background: #f0f7ff; border: 1px solid #bfdbfe; border-radius: 10px; padding: .85rem 1.1rem; }
.hilfe-box p { flex: 1 1 16rem; margin: 0; color: #1e3a5f; line-height: 1.5; }
.hilfe-box .btn, .hilfe-box .btn-ghost { white-space: nowrap; margin-top: 0; }
.uebung-edit-actions {
  position: fixed; top: 90px; right: 14px; z-index: 99999;
  display: flex; gap: .5rem;
}

.site-main { max-width: 1000px; margin: 0 auto; padding: 1.5rem 1.2rem 3rem; }
.site-footer { text-align: center; color: var(--col-muted); padding: 1.5rem; font-size: .85rem; }
.footer-nav { display: flex; gap: 1.2rem; justify-content: center; flex-wrap: wrap; margin-bottom: .4rem; }
.footer-nav a { color: var(--col-muted); }

.hero h1 { margin: .2rem 0; }
.breadcrumb { color: var(--col-muted); font-size: .9rem; margin: 0 0 .5rem; }

/* Kachel-Raster */
.tile-grid { display: grid; gap: 1.2rem; margin-top: 1.2rem; }
.tile-grid--large { grid-template-columns: repeat(auto-fit, minmax(280px, 360px)); justify-content: center; }
.tile-grid--small { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
/* Proben-Bereich */
.probe-aktiv { margin: 1.2rem 0 1.6rem; }
.probe-aktiv h2 { margin: 0 0 .4rem; text-align: center; }
.probe-aktiv .tile-grid--small { grid-template-columns: repeat(auto-fit, minmax(160px, 200px)); justify-content: center; }
.probe-tile .tile-title small { font-weight: normal; color: #64748b; }
.proben-intro { max-width: 760px; color: #475569; }
.proben-form { display: grid; gap: 1.6rem; max-width: 760px; margin: 1.2rem 0 2.4rem; padding: 1.8rem 2rem; background: var(--col-card); border: 1px solid var(--col-border); border-radius: var(--radius); box-shadow: var(--shadow); }
.proben-label, .proben-times label { display: flex; flex-direction: column; gap: .45rem; font-weight: 700; font-size: 1.05rem; }
.proben-form select, .proben-form input[type="datetime-local"] { padding: .7rem .8rem; font: inherit; font-size: 1rem; border: 1px solid var(--col-border); border-radius: 8px; background: #fff; }
.proben-form select:focus, .proben-form input:focus { outline: 2px solid var(--col-primary); outline-offset: 1px; }
.proben-classes { border: 1px solid var(--col-border); border-radius: var(--radius); padding: 1rem 1.2rem 1.1rem; margin: 0; }
.proben-classes legend { font-weight: 700; font-size: 1.05rem; padding: 0 .4rem; }
.proben-classes label { display: inline-flex; align-items: center; gap: .4rem; margin: .35rem 1.1rem .35rem 0; font-weight: normal; }
.proben-classes input[type="checkbox"] { width: 1.1rem; height: 1.1rem; }

/* Taskcards verwalten: sortierbare Tabelle, Aktionen in 2. Zeile rechtsbündig */
.tc-table { width: 100%; border-collapse: collapse; margin-top: 1rem; background: var(--col-card); border: 1px solid var(--col-border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.tc-table th { background: #f1f5fb; text-align: left; padding: .7rem .9rem; font-size: .95rem; white-space: nowrap; }
.tc-table th.tc-col-wide { width: 45%; }                 /* Titel-Spalte (Überschrift/Übung/Probe) deutlich länger */
.tc-sort { text-decoration: none; color: var(--col-text); cursor: pointer; display: inline-block; }
.tc-sort:hover { text-decoration: underline; }
.tc-table td { padding: .55rem .9rem; vertical-align: middle; }
.tc-row-info td { border-top: 1px solid var(--col-border); }
.tc-table .tc-title { font-weight: 600; font-size: .95rem; }   /* Überschrift eins kleiner */
.tc-row-actions td { text-align: right; padding-top: 0; padding-bottom: .7rem; }
.tc-row-actions .btn-small { font-size: .78rem; padding: .32rem .6rem; }

/* Taskcard-Klassenauswahl: je Jahrgangsstufe eine Zeile (Stufe + Klassen nebeneinander) */
.tc-classes { border: 1px solid var(--col-border); border-radius: var(--radius); padding: .8rem 1.1rem .9rem; margin: .2rem 0 0; }
.tc-classes legend { font-weight: 700; font-size: 1.05rem; padding: 0 .4rem; }
.tc-classgrid { display: flex; flex-direction: column; gap: .35rem; margin-top: .3rem; }
.tc-classgroup { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: .3rem 1rem; }
.tc-stufe { flex: 0 0 auto; min-width: 3rem; font-weight: 700; font-size: .85rem; color: var(--col-muted); text-transform: uppercase; letter-spacing: .03em; }
.tc-class { display: inline-flex; align-items: center; gap: .4rem; font-weight: normal; }
.tc-class input[type="checkbox"] { width: 1.1rem; height: 1.1rem; }
.proben-times { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.proben-form .btn { margin-top: 0; padding: .8rem 1.8rem; font-size: 1.05rem; justify-self: start; }
.proben-trenner { margin: 2.4rem 0 1.6rem; border: 0; border-top: 1px solid var(--col-border); }
.proben-vorschau { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; max-width: 760px; margin: 1rem 0 2.4rem; padding: 1.4rem 1.6rem; background: var(--col-card); border: 1px solid var(--col-border); border-radius: var(--radius); box-shadow: var(--shadow); }
.proben-vorschau .proben-label { flex: 1; min-width: 240px; }
.proben-vorschau select { padding: .7rem .8rem; font: inherit; font-size: 1rem; border: 1px solid var(--col-border); border-radius: 8px; background: #fff; }
.proben-filter { margin: .8rem 0; }
.proben-filter label { display: inline-flex; flex-direction: column; gap: .3rem; font-weight: 600; }
.proben-filter select { padding: .5rem .6rem; font: inherit; border: 1px solid var(--col-border); border-radius: 8px; }
.proben-table { width: 100%; border-collapse: collapse; margin-top: .8rem; background: var(--col-card); border: 1px solid var(--col-border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.proben-table th { background: #f1f5fb; font-size: .95rem; }
.proben-table th, .proben-table td { text-align: left; padding: .8rem .9rem; border-bottom: 1px solid var(--col-border); vertical-align: middle; }
.proben-table tr:last-child td { border-bottom: 0; }
.proben-actions { white-space: nowrap; display: flex; gap: .5rem; align-items: center; }
.probe-badge { display: inline-block; padding: .2rem .7rem; border-radius: 999px; font-size: .82rem; font-weight: 700; color: #fff; }
.probe-badge--aktiv { background: #1d7a3a; }
.probe-badge--geplant { background: #b8860b; }
.probe-badge--beendet { background: #64748b; }
/* Datenbank-Abschnitte: Trennlinie über jeder Überschrift (auch der ersten). */
.section-head { margin: 3rem 0 .2rem; padding-top: 2rem; font-size: 1.15rem; border-top: 1px solid var(--col-border, #e2e8f0); }
/* Abschlusslinie unter der letzten Aufgabengruppe. */
.section-end { margin-top: 3rem; border-top: 1px solid var(--col-border, #e2e8f0); }
.section-link { margin-left: .6rem; font-size: .8rem; font-weight: normal; white-space: nowrap; color: var(--col-link, #1d4ed8); text-decoration: none; border-bottom: 1px dashed currentColor; }
.section-link:hover { opacity: .8; }
.section-subhead { margin: .9rem 0 .2rem; font-size: .98rem; font-weight: 600; color: #475569; }
.section-subhead a { color: var(--col-link, #1d4ed8); }
/* Startseite: feste 2x2-Anordnung, mittig zentriert */
.tile-grid.tile-grid--start { grid-template-columns: repeat(2, minmax(192px, 256px)); justify-content: center; max-width: 560px; margin-left: auto; margin-right: auto; }
@media (max-width: 560px) { .tile-grid.tile-grid--start { grid-template-columns: minmax(176px, 288px); max-width: 288px; } }
/* Fächer-Kacheln (Online üben): kompakt, Bild mittig zentriert, Karte + Bild gleicher Radius */
.faecher-grid { display: grid; grid-template-columns: repeat(3, minmax(150px, 200px)); gap: 1.1rem; justify-content: center; margin-top: 1.2rem; }
.faecher-tile { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .5rem;
  background: var(--col-card); border: 1px solid var(--col-border); border-radius: 16px; padding: .7rem;
  box-shadow: var(--shadow); text-decoration: none; color: var(--col-text); transition: transform .12s ease, box-shadow .12s ease; }
.faecher-tile:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(31,45,61,.15); }
.faecher-tile-img { display: block; width: 100%; aspect-ratio: 1 / 1; background-size: cover; background-position: center; background-color: #eef2f7; border-radius: 16px; }
.faecher-tile-name { text-align: center; font-weight: 700; font-size: 1rem; }
@media (max-width: 640px) { .faecher-grid { grid-template-columns: repeat(2, minmax(140px, 200px)); } }
@media (max-width: 400px) { .faecher-grid { grid-template-columns: minmax(150px, 240px); } }

/* Übungs-Kacheln: gleiche Größe/Layout wie die Fächer-/Klassen-Kacheln (fix 3 nebeneinander) */
.tile-grid.tile-grid--ueb { grid-template-columns: repeat(3, minmax(150px, 200px)); justify-content: center; }
@media (max-width: 640px) { .tile-grid.tile-grid--ueb { grid-template-columns: repeat(2, minmax(140px, 200px)); } }
@media (max-width: 400px) { .tile-grid.tile-grid--ueb { grid-template-columns: minmax(150px, 240px); } }

/* Klassen-Kacheln (Online üben): reine Bild-Kacheln – Bild trägt schon die Beschriftung */
.tile-grid--bilder { display: grid; grid-template-columns: repeat(3, minmax(160px, 230px)); gap: 1.2rem; justify-content: center; margin-top: 1.2rem; }
.tile-bild { display: block; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); transition: transform .12s ease, box-shadow .12s ease; }
.tile-bild:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(31,45,61,.15); }
.tile-bild-img { display: block; width: 100%; aspect-ratio: 1 / 1; background-size: cover; background-position: center; background-color: #e9eef5; }
@media (max-width: 720px) { .tile-grid--bilder { grid-template-columns: repeat(2, minmax(150px, 230px)); } }
@media (max-width: 460px) { .tile-grid--bilder { grid-template-columns: minmax(160px, 280px); } }

/* Online-Üben: drei Fächer je Reihe, mittig */
.tile-grid.tile-grid--faecher { grid-template-columns: repeat(3, minmax(180px, 240px)); justify-content: center; max-width: 800px; margin-left: auto; margin-right: auto; }
@media (max-width: 720px) { .tile-grid.tile-grid--faecher { grid-template-columns: repeat(2, minmax(160px, 240px)); max-width: 520px; } }
@media (max-width: 460px) { .tile-grid.tile-grid--faecher { grid-template-columns: minmax(176px, 288px); max-width: 288px; } }
/* Gruppen-/Klassen-Kacheln: kleiner, mehrere nebeneinander, mittig */
.tile-grid.tile-grid--groups { grid-template-columns: repeat(auto-fit, minmax(144px, 224px)); justify-content: center; }

/* Unterricht-Unterseite: Kacheln zentriert nebeneinander, jede Reihe für sich mittig */
.tile-grid.tile-grid--unterricht { display: flex; flex-wrap: wrap; justify-content: center; }
.tile-grid.tile-grid--unterricht .tile { flex: 0 0 200px; max-width: 220px; }
@media (max-width: 480px) { .tile-grid.tile-grid--unterricht .tile { flex-basis: 70%; max-width: 280px; } }

/* Startseiten-Banner: doppelt so breit wie eine Kachel (= Breite der 2 Kacheln), mittig */
.start-banner {
  display: flex; flex-direction: column;
  max-width: 560px; margin: 1.2rem auto 0;
  background: var(--col-card);
  border: 1px solid var(--col-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  text-decoration: none; color: var(--col-text);
  transition: transform .12s ease, box-shadow .12s ease;
}
.start-banner:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(31,45,61,.15); }
.start-banner-img { display: block; background-size: cover; background-position: center; aspect-ratio: 2 / 1; background-color: #e9eef5; }
.start-banner-title { padding: .7rem .9rem; font-weight: 600; text-align: center; }
/* Hervorhebung, wenn gerade eine Probe freigeschaltet ist */
.start-banner--probe { outline: 3px solid #b03a2c; outline-offset: 2px; box-shadow: 0 0 0 6px rgba(176,58,44,.12); }
.start-banner--probe .start-banner-title { color: #b03a2c; }
.start-banner--probe .start-banner-title small { font-weight: 700; }
@media (max-width: 560px) { .start-banner { max-width: 288px; } }
/* Zwei Banner nebeneinander (Online Üben / Proben) */
.start-banner-row { display: flex; gap: 1.2rem; justify-content: center; flex-wrap: wrap; max-width: 760px; margin: 1.2rem auto 0; }
.start-banner-row .start-banner { flex: 1 1 0; min-width: 240px; max-width: none; margin: 0; }

/* Info-Box (z. B. SQLverine-Hinweis) */
.info-box { background: #eef4fb; border: 1px solid #cfe0f3; border-radius: var(--radius); padding: .8rem 1.1rem; margin: 1rem 0; }
.info-box ol { margin: .4rem 0 0; padding-left: 1.3rem; }
.info-box li { margin: .25rem 0; }

/* Download-Liste (.db-Dateien) */
.download-list { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .6rem; max-width: 640px; }
.download-item { display: flex; align-items: center; gap: .8rem; background: var(--col-card); border: 1px solid var(--col-border); border-radius: var(--radius); padding: .6rem .9rem; box-shadow: var(--shadow); }
.download-icon { font-size: 1.4rem; }
.download-name { font-weight: 600; }
.download-meta { color: var(--col-muted); font-size: .85rem; margin-left: auto; }
.download-btn { background: #2c6cb0; color: #fff; text-decoration: none; padding: .45rem .9rem; border-radius: 8px; font-weight: 600; font-size: .9rem; white-space: nowrap; }
.download-btn:hover { background: #1f568f; }
@media (max-width: 480px) { .download-item { flex-wrap: wrap; } .download-meta { margin-left: 0; } }

/* Status-Meldungen */
.flash { padding: .6rem .9rem; border-radius: var(--radius); margin: 1rem 0; max-width: 640px; }
.flash-ok { background: #e6f5ec; border: 1px solid #b7e0c6; color: #1d7a3a; }
.flash-err { background: #fdecec; border: 1px solid #f3c4c4; color: #b3261e; }

/* Download-Item: Kopfzeile + Beschreibung untereinander */
.download-item { flex-direction: column; align-items: stretch; gap: .6rem; }
.download-head { display: flex; align-items: center; gap: .8rem; }
.download-desc { background: #f5f8fc; border-left: 3px solid #2c6cb0; border-radius: 6px; padding: .5rem .75rem; color: #2a3744; font-size: .92rem; line-height: 1.4; }

/* Admin: Beschreibung bearbeiten + Umbenennen/Löschen */
.db-form { margin: 0; }
.db-form-label { display: block; font-size: .82rem; color: var(--col-muted); margin-bottom: .25rem; }
.db-desc-edit { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; padding: .45rem .6rem; border: 1px solid var(--col-border); border-radius: 6px; }
.db-admin-row { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; margin-top: .2rem; }
.db-rename { display: flex; align-items: center; gap: .35rem; }
.db-rename-input { font: inherit; padding: .35rem .5rem; border: 1px solid var(--col-border); border-radius: 6px; min-width: 140px; }
.db-ext { color: var(--col-muted); font-size: .9rem; }
.btn-small { font: 600 .85rem inherit; padding: .4rem .75rem; border: 0; border-radius: 6px; background: #2c6cb0; color: #fff; cursor: pointer; }
.btn-small:hover { background: #1f568f; }
.btn-danger { background: #b3261e; }
.btn-danger:hover { background: #8f1d17; }

/* Upload-Formular (nur Admins) */
.upload-form { max-width: 640px; margin: 1.4rem 0; padding: .9rem 1.1rem; background: var(--col-card); border: 1px dashed var(--col-border); border-radius: var(--radius); }
.upload-title { margin: 0 0 .6rem; }
.upload-hint { color: var(--col-muted); font-weight: 400; font-size: .85rem; }
.upload-row { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
/* Grosse Kacheln: quadratische Bilder */
.tile-grid--large .tile-img { height: auto; aspect-ratio: 1 / 1; }
/* Fächer-/Themen-Kacheln: Bild mit kleinem Rand (Rahmen) */
.tile-grid--faecher .tile-img { margin: .55rem .55rem 0; border-radius: 10px; }

.tile {
  display: flex; flex-direction: column;
  background: var(--col-card);
  border: 1px solid var(--col-border);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none; color: var(--col-text);
  box-shadow: var(--shadow);
  transition: transform .12s ease, box-shadow .12s ease;
}
.tile:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(31,45,61,.15); }
.tile-img { display: block; background-size: cover; background-position: center; height: 150px; background-color: #e9eef5; }
.tile--small .tile-img { height: 90px; background-size: auto 80%; background-repeat: no-repeat; }
.tile-title { padding: .7rem .9rem; font-weight: 600; }
.tile--small .tile-title { padding: .45rem .7rem; font-size: .82rem; }

/* Bearbeiten-Stift auf Kacheln (nur für berechtigte Lehrkräfte) */
.tile-wrap { position: relative; display: flex; }
.tile-wrap > .tile { flex: 1 1 auto; width: 100%; }
.tile-edit {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  display: inline-flex; align-items: center; gap: .3rem;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(255,255,255,.92); border: 1px solid var(--col-border);
  color: var(--col-text); text-decoration: none;
  font-size: .8rem; line-height: 1; box-shadow: var(--shadow);
}
.tile-edit:hover { background: #fff; box-shadow: 0 4px 10px rgba(31,45,61,.18); }
.tile-edit-label { font-size: .74rem; font-weight: 600; }

/* Formulare */
.form-card {
  max-width: 420px; margin: 1rem auto;
  background: var(--col-card); border: 1px solid var(--col-border);
  border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow);
}
.form-card label, .filter-bar label { display: block; margin: .8rem 0 .2rem; font-weight: 600; font-size: .9rem; }
input[type=text], input[type=email], input[type=password], input[type=date], select {
  width: 100%; padding: .6rem .7rem; border: 1px solid var(--col-border);
  border-radius: 8px; font-size: 1rem; background: #fff;
}
.btn, button.btn {
  display: inline-block; margin-top: 1rem; padding: .65rem 1.2rem;
  background: var(--col-primary); color: #fff; border: 0; border-radius: 8px;
  font-size: 1rem; cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--col-primary-dark); }
.btn-small {
  padding: .35rem .7rem; font-size: .85rem; border-radius: 6px;
  background: var(--col-primary); color: #fff; border: 0; cursor: pointer; text-decoration: none;
}
.btn-small:hover { background: var(--col-primary-dark); }
.btn-danger { background: #b32525; }
.btn-danger:hover { background: #8f1c1c; }

/* Meldungen */
.msg { padding: .7rem .9rem; border-radius: 8px; margin: .5rem 0; }
.msg-ok { background: var(--col-ok-bg); color: var(--col-ok-tx); }
.msg-error { background: var(--col-err-bg); color: var(--col-err-tx); }
.hint { color: var(--col-muted); font-size: .85rem; }

/* Tabellen */
.data-table { width: 100%; border-collapse: collapse; background: var(--col-card); box-shadow: var(--shadow); border-radius: var(--radius); overflow: hidden; }
.data-table th, .data-table td { padding: .6rem .7rem; text-align: left; border-bottom: 1px solid var(--col-border); font-size: .9rem; vertical-align: top; }
.data-table th { background: #eef2f7; }
.data-table th a { color: inherit; text-decoration: none; white-space: nowrap; }
.data-table th a:hover { text-decoration: underline; }
.actions form { margin: 0 .15rem .15rem 0; }
.inline-form { display: inline-block; margin: 0 .15rem; }
.inline-form summary { cursor: pointer; color: var(--col-primary); font-size: .85rem; }
/* Aufklapp-„Button" (z. B. „Passwort ändern") wie ein blauer btn-small darstellen */
.inline-form summary.btn-small { color: #fff; display: inline-flex; align-items: center; list-style: none; font-size: .78rem; line-height: 1.2; padding: .32rem .6rem; }
.inline-form summary.btn-small::marker { content: ''; }
.inline-form summary.btn-small::-webkit-details-marker { display: none; }
.inline-form input { width: auto; display: inline-block; }

/* Schüler verwalten: Bearbeiten/Passwort ändern klappen in eigener Zeile auf
   (Felder links, Speichern-Button rechtsbündig). */
.sch-editform { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; width: 100%; margin: .4rem 0 .1rem; }
.sch-editform[hidden] { display: none; }
.sch-editform input { flex: 0 0 auto; box-sizing: border-box; }
.sch-editform input[name=name]  { width: 14rem; }
.sch-editform input[name=email] { width: 26rem; }
.sch-editform input[name=newpw] { width: 18rem; }
.sch-editform .btn-small { margin-left: auto; }

/* Hilfe / FAQ-Liste */
.faq-list { display: flex; flex-direction: column; gap: .6rem; margin: 1rem 0; }
.faq-item { display: block; padding: .8rem 1rem; border: 1px solid var(--col-border); border-radius: 8px; background: var(--col-card); text-decoration: none; color: inherit; box-shadow: var(--shadow); }
.faq-item:hover { border-color: var(--col-primary); }
/* Abschnitts-Überschrift mit zusätzlichem Abstand nach oben */
.section-gap { margin-top: 2.6rem; }

/* Options-Gruppen im CSV-Import */
.import-group { border: 1px solid var(--col-border); border-radius: 8px; padding: .7rem 1rem; margin: .6rem 0; }
.import-group legend { font-weight: 600; padding: 0 .4rem; }
.import-group .radio { display: block; margin: .35rem 0; }

/* Code-/Beispielblock (z. B. CSV-Beispiel in der Hilfe) */
.code-block { background: #f3f5f8; border: 1px solid var(--col-border); border-radius: 8px; padding: .8rem 1rem; overflow-x: auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9rem; line-height: 1.5; }

/* Blätter-Navigation (Listen mit Seitenbegrenzung) */
.pager { display: flex; align-items: center; gap: 1rem; margin: .8rem 0 .2rem; flex-wrap: wrap; }
.pager-info { color: var(--col-muted); font-size: .9rem; }

.faq-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.faq-titel { display: block; font-weight: 600; color: var(--col-primary); }
.faq-text { display: block; color: #556; font-size: .9rem; margin-top: .2rem; }

/* Badges */
.badge { padding: .15rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 600; }
.badge-pending { background: #fff3d6; color: #946200; }
.badge-active { background: var(--col-ok-bg); color: var(--col-ok-tx); }
.badge-disabled { background: #eceff3; color: var(--col-muted); }
.badge-locked { background: #fde2e1; color: #b02a1f; }
.badge-admin { background: #e3ecff; color: #274690; }

/* Überschrift-Zeile mit rechtsbündigem Rollen-Badge */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.page-head h1 { margin: 0; }

/* Rollen-Badge (admin / lehrkraft / schüler) */
.role-badge { padding: .2rem .7rem; border-radius: 999px; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.role-admin { background: #e3ecff; color: #274690; }
.role-lehrkraft { background: #e2f3e6; color: #1f7a3d; }
.role-schueler { background: #fdeede; color: #9a5b12; }

/* Statistik-Kacheln */
.stat-row { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1rem 0; }
.stat { background: var(--col-card); border: 1px solid var(--col-border); border-radius: var(--radius); padding: 1rem 1.4rem; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.stat-num { font-size: 1.8rem; font-weight: 700; color: var(--col-primary); }

/* Admin-Dashboard: je Zeile Kennzahl(en) links, passender Button rechts */
.admin-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.admin-stats { display: flex; gap: .8rem; flex-wrap: wrap; }
.admin-stats .stat { width: 12rem; max-width: 100%; padding: .7rem 1rem; box-sizing: border-box; }
.admin-stats .stat-num { font-size: 1.5rem; }
/* Kennzahl mit Handlungsbedarf (z. B. wartende Freigaben, gesperrte Schüler) */
.stat-alert { border-color: #e7b4ae; background: #fdecea; }
.stat-alert .stat-num { color: #b02a1f; }
.admin-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.admin-actions .btn { margin-top: 0; }
.admin-hint { color: #475569; margin: -.4rem 0 1rem; }

.filter-bar { display: flex; align-items: end; gap: .8rem; flex-wrap: wrap; margin-bottom: 1rem; }
/* Buttons in der Filterleiste: gleiche Höhe wie die Eingabefelder, gleich groß, unten ausgerichtet */
.filter-bar .btn-small {
  display: inline-flex; align-items: center; justify-content: center;
  align-self: end; box-sizing: border-box; min-width: 9rem; text-align: center;
  padding: .6rem 1.1rem; font-size: 1rem; line-height: 1.25; border: 1px solid transparent;
}
/* Label-Unterkante ohne Extra-Rand, damit Buttons nicht tiefer als die Felder sitzen */
.filter-bar label { margin-bottom: 0; }
/* Breite Variante (Protokoll/Anmeldungen): alle Buttons gleich groß wie der längste */
.filter-bar--wide .btn-small { min-width: 13rem; }
/* "von"/"bis" bleiben als Einheit nebeneinander */
.filter-range { display: flex; gap: .8rem; align-items: end; }
.filter-range input[type=date] { width: auto; }

/* Willkommens-Seite */
.landing { max-width: 480px; margin: 1.5rem auto; text-align: center; }
.landing-intro { color: var(--col-muted); }
.landing .form-card { text-align: left; margin-top: 1.2rem; }
.guest-line { margin-top: 1.2rem; }
.btn-ghost { background: transparent; color: var(--col-primary); border: 1px solid var(--col-primary); }
.btn-ghost:hover { background: #eaf1f9; }

/* Honeypot-Feld gegen Bots (fuer Menschen unsichtbar) */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Rollen-/Klassenwahl bei der Registrierung */
.hidden { display: none; }
.role-choice { border: 1px solid var(--col-border); border-radius: 8px; padding: .5rem .8rem; margin: .9rem 0; }
.role-choice legend { font-weight: 600; font-size: .9rem; padding: 0 .3rem; }
.role-choice .radio { display: inline-block; margin: .2rem 1.2rem .2rem 0; font-weight: 400; }
.role-choice .radio input { width: auto; }

/* Inhaltsseiten */
.content-page { background: var(--col-card); border: 1px solid var(--col-border); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); }

/* Editierbare Seiten (Impressum/Datenschutz): Bearbeiten-Button oben rechts */
.seite-inhalt { position: relative; }
.seite-edit-btn { position: absolute; top: 1rem; right: 1rem; z-index: 2; }
.seite-inhalt > :first-child + * { margin-top: 0; }
@media (max-width: 520px) {
  .seite-edit-btn { position: static; display: inline-block; margin-bottom: 1rem; }
}

/* ===== Unterrichts-Beiträge ===== */
textarea {
  width: 100%; padding: .6rem .7rem; border: 1px solid var(--col-border);
  border-radius: 8px; font-size: 1rem; background: #fff; font-family: inherit; resize: vertical;
}
.badge { background: #eef2f7; color: var(--col-text); }  /* Standard-Badge (Klasse) */
.badge-pending { background: #fff3d6; color: #946200; }
.badge-active { background: var(--col-ok-bg); color: var(--col-ok-tx); }
.badge-disabled { background: #eceff3; color: var(--col-muted); }
.badge-locked { background: #fde2e1; color: #b02a1f; }
.badge-admin { background: #e3ecff; color: #274690; }

/* Admin-Formular für Beiträge: etwas breiter, zweispaltige Zeile */
.form-card.form-wide { max-width: none; margin-left: 0; margin-right: 0; text-align: left; }
.form-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.form-row label { flex: 1 1 200px; }
.form-actions { margin-top: 1rem; display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.form-actions .btn { margin-top: 0; }
.img-preview { margin: .6rem 0; }
.img-preview img { max-width: 220px; border-radius: 8px; border: 1px solid var(--col-border); display: block; }
.img-preview .radio { font-weight: 400; margin-top: .4rem; }

/* Beitrags-Liste (Blog-artig) */
.post-list { display: flex; flex-direction: column; gap: 1.4rem; margin-top: 1.2rem; }
.post-item {
  display: flex; gap: 1.2rem; align-items: flex-start;
  background: var(--col-card); border: 1px solid var(--col-border);
  border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow);
}
.post-thumb {
  flex: 0 0 200px; align-self: stretch; min-height: 130px;
  background-size: cover; background-position: center; border-radius: 8px; background-color: #e9eef5;
}
.post-body { flex: 1 1 auto; }
.post-title { margin: 0 0 .3rem; font-size: 1.25rem; }
.post-title a { color: var(--col-text); text-decoration: none; }
.post-title a:hover { color: var(--col-primary); }
.post-excerpt { margin: .2rem 0; color: var(--col-text); }
.post-date { margin: .2rem 0; color: var(--col-muted); font-size: .9rem; }
.post-more a { color: var(--col-primary); text-decoration: none; font-weight: 600; }
.post-more a:hover { text-decoration: underline; }
@media (max-width: 560px) {
  .post-item { flex-direction: column; }
  .post-thumb { flex-basis: auto; width: 100%; height: 160px; }
}

/* Einzelbeitrag */
.post-single { background: var(--col-card); border: 1px solid var(--col-border); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); }
.post-single h1 { margin-top: 0; }
.post-meta { display: flex; gap: .7rem; align-items: center; margin: .3rem 0 1rem; }
/* Klasse + Datum in gleicher Zeilenhöhe wie die Beschreibung (mehr Rand zur Schrift) */
.post-meta .badge { padding: .55rem 1.1rem; font-size: 1rem; line-height: 1.5; }
.post-image { max-width: 100%; height: auto; border-radius: 8px; margin: .5rem 0 1rem; }
.post-text { line-height: 1.6; margin-bottom: 1.2rem; }
/* Beschreibung als ovale Badge in Klassenfarbe, volle Breite, mehrzeilig möglich */
.post-desc {
  display: block; box-sizing: border-box; width: 100%;
  background: #eef2f7; color: var(--col-text);
  border-radius: 999px; padding: .55rem 1.1rem; margin: 0 0 1.2rem;
  line-height: 1.5; overflow-wrap: anywhere;
}
.post-back { margin-top: 1.2rem; }
.post-back a { color: var(--col-primary); text-decoration: none; }

/* Eingebettetes TaskCard (Padlet-artig) */
.taskcard-embed {
  position: relative; width: 100%; height: 75vh; min-height: 480px;
  margin: 1rem 0; overflow: hidden; border-radius: var(--radius);
  border: 1px solid var(--col-border); background: #fff;
}
.taskcard-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; background: #fff; }

/* Kontakt-Nachrichten auf der Admin-Profilseite */
.msg-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: .4rem 0 1.2rem; }
.msg-tabs .btn-small.is-active { background: var(--col-primary); color: #fff; border-color: var(--col-primary); }
.msg-item { border: 1px solid var(--col-border); border-radius: 10px; padding: .9rem 1.1rem; margin: 0 0 .9rem; background: #fff; }
.msg-item.msg-neu { border-left: 4px solid var(--col-primary); background: #f6f9fd; }
.msg-meta { font-size: .85rem; color: var(--col-muted); margin: 0 0 .5rem; }
.msg-badge { display: inline-block; background: var(--col-primary); color: #fff; border-radius: 6px; padding: .05rem .4rem; font-size: .72rem; font-weight: 700; }
.msg-text { margin: 0 0 .7rem; white-space: normal; overflow-wrap: anywhere; }
.msg-actions { display: flex; gap: .5rem; margin: 0; }

/* Einfacher Rich-Text-Editor (Beitrag schreiben) */
.rt-wrap { border: 1px solid var(--col-border); border-radius: var(--radius); overflow: hidden; background: #fff; }
.rt-toolbar { display: flex; flex-wrap: wrap; gap: .3rem; padding: .45rem .5rem; background: #f4f6f9; border-bottom: 1px solid var(--col-border); }
.rt-btn {
  border: 1px solid var(--col-border); background: #fff; border-radius: 6px;
  padding: .25rem .55rem; font-size: .9rem; line-height: 1.2; cursor: pointer; color: var(--col-text, #222);
}
.rt-btn:hover { background: var(--col-primary); color: #fff; border-color: var(--col-primary); }
.rt-sep { width: 1px; align-self: stretch; background: var(--col-border); margin: .1rem .2rem; }
.rt-editor { min-height: 180px; padding: .8rem 1rem; outline: none; }
.rt-editor:focus { box-shadow: inset 0 0 0 2px var(--col-primary); }
.rt-editor:empty::before { content: "Text hier eingeben …"; color: var(--col-muted); }

/* Formatierter Beitragstext (Anzeige + Editor) */
.post-richtext p { margin: 0 0 .7rem; }
.post-richtext ul, .post-richtext ol { margin: 0 0 .7rem 1.4rem; }
.post-richtext li { margin: .15rem 0; }
.post-richtext h3 { font-size: 1.15rem; margin: 1rem 0 .5rem; }
.post-richtext h4 { font-size: 1.02rem; margin: .9rem 0 .4rem; }
.post-richtext blockquote { margin: .7rem 0; padding: .3rem 0 .3rem .9rem; border-left: 3px solid var(--col-primary); color: var(--col-muted); }
.post-richtext a { color: var(--col-primary); }

/* Kopier-Button für KI-Prompt-Boxen (.prompt-box) – global, per app.js eingefügt */
.prompt-box{position:relative}
.prompt-box[data-copy-ready]{padding-top:2.4rem}
.prompt-box .prompt-copy{position:absolute;top:.5rem;right:.5rem;font:600 .78rem system-ui,-apple-system,sans-serif;padding:.28rem .65rem;border:1px solid #cbd5e1;border-radius:6px;background:#fff;color:#334155;cursor:pointer;line-height:1;box-shadow:0 1px 2px rgba(0,0,0,.06);opacity:.9;transition:opacity .15s,background .15s,border-color .15s}
.prompt-box .prompt-copy:hover{opacity:1;border-color:#94a3b8}
.prompt-box .prompt-copy.ok{background:#ecfdf5;border-color:#059669;color:#065f46}

/* Call-to-Action-Box auf den Hilfe-Seiten: direkt zur Erstellung dieser Aufgabenart */
.cta-erstellen{display:flex;align-items:center;gap:.9rem 1.1rem;flex-wrap:wrap;background:#f0f7ff;border:1px solid #bfdbfe;border-radius:10px;padding:.85rem 1.1rem;margin:.4rem 0 1rem}
.cta-erstellen .cta-text{flex:1 1 15rem;color:#1e3a5f;line-height:1.5}
.cta-erstellen .btn{white-space:nowrap}

/* ============================================================
   Kachel-Icons für Übungen (automatische Kacheln, Phase 3)
   Eyecatcher groß + 2 kleine Icons auf farbigem Grund.
   ============================================================ */
.kachel-icons{display:flex;align-items:center;justify-content:center;position:relative;
  height:124px;border-radius:12px 12px 0 0;overflow:hidden}
.kachel-eye{width:76px;height:76px;display:block}
.kachel-mini{position:absolute;bottom:9px;width:32px;height:32px;display:block;opacity:.72}
.kachel-mini-l{left:9px}
.kachel-mini-r{right:9px}
.tile--small .kachel-icons{height:108px}
/* Kandidaten-Raster auf der Auswahl-Seite */
.kachel-cands{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem;margin:1rem 0}
.kachel-cand{border:2px solid var(--border,#e2e8f0);border-radius:12px;background:#fff;padding:0;cursor:pointer;
  overflow:hidden;display:flex;flex-direction:column;transition:border-color .12s ease, transform .12s ease}
.kachel-cand:hover{transform:translateY(-2px)}
.kachel-cand.is-current{border-color:#2563eb}
.kachel-cand .kachel-icons{height:96px;border-radius:0}
.kachel-cand .kachel-cap{padding:.45rem .6rem;font-size:.8rem;color:#475569;text-align:center}

/* Freier Kachel-Editor (kachel-waehlen.php) */
.km-editor{display:flex;gap:1.4rem;flex-wrap:wrap;align-items:flex-start;margin:.6rem 0 1rem}
.km-preview .kachel-icons{width:190px;height:124px;border-radius:12px}
.km-controls{display:flex;flex-direction:column;gap:.65rem;min-width:240px}
.km-controls label{display:flex;flex-direction:column;gap:.2rem;font-size:.9rem}
.km-controls select{padding:.35rem .5rem;max-width:280px}
.km-colorfield{display:flex;flex-direction:column;gap:.3rem;font-size:.9rem}
.km-colorlabel{font-size:.9rem}
.km-swatches{display:grid;grid-template-columns:repeat(12,22px);gap:.35rem;width:max-content}
.km-swatch{width:24px;height:24px;border-radius:6px;border:1px solid rgba(0,0,0,.18);cursor:pointer;display:inline-block;position:relative}
.km-swatch input{position:absolute;opacity:0;width:0;height:0}
.km-swatch:has(input:checked){outline:2px solid #2563eb;outline-offset:1px}