/* ============================================================
   EduReel Web-App - Grund-Styling (Marken-Farben wie in der App)
   ============================================================ */
:root {
  --turquoise: #2EC4B6;
  --turquoise-dark: #1fa89b;
  --orange: #FF8A3D;
  --orange-dark: #f2731c;
  --radius: 16px;
}
:root[data-theme="light"] {
  --ink: #12211f;
  --muted: #5c6b69;
  --bg: #ffffff;
  --bg-soft: #f4faf9;
  --card: #ffffff;
  --border: #e5efed;
  --input-bg: #ffffff;
  --shadow: 0 8px 24px rgba(18,33,31,.08);
}
:root[data-theme="dark"] {
  --ink: #eaf5f3;
  --muted: #9fb3b0;
  --bg: #0d1615;
  --bg-soft: #121f1e;
  --card: #162321;
  --input-bg: #101b1a;
  --border: #25332f;
  --shadow: 0 8px 24px rgba(0,0,0,.4);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  /* Die Symbol- und Emoji-Schriften am Ende sind KEIN Beiwerk: Die
     Oberflaeche benutzt Zeichen wie ⚙ ♥ ▶ ✓ und Emoji als Symbole. Die
     normalen Textschriften (Segoe UI, Roboto, Helvetica) enthalten die gar
     nicht. Ohne diese Rueckfall-Ebene zeigt der Browser stattdessen ein
     Kaestchen oder ein Fragezeichen - genau das ist auf einem Testrechner
     passiert. Mit der Kette holt er sich die Zeichen aus der jeweils
     passenden Systemschrift. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
               "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
               "Noto Color Emoji", "Noto Sans Symbols 2", sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
button { font: inherit; cursor: pointer; }

#app { min-height: 100%; display: flex; flex-direction: column; }

/* ---- gemeinsame Bausteine ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; border-radius: 999px; padding: 12px 20px; font-size: .95rem;
  border: 1.5px solid transparent; transition: transform .12s, box-shadow .12s, background .15s;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: linear-gradient(135deg, var(--orange), var(--orange-dark)); color: #fff; }
.btn-turq { background: var(--turquoise); color: #04211e; }
.btn-ghost { border-color: var(--border); color: var(--ink); background: var(--card); }
.btn-block { width: 100%; }

.field { margin-bottom: 14px; }
.field label { display: block; font-weight: 600; font-size: .85rem; margin-bottom: 6px; color: var(--muted); }
.field input {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 12px;
  font: inherit; background: var(--input-bg); color: var(--ink);
}
.field input:focus { outline: none; border-color: var(--turquoise); }
.field textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 12px;
  font: inherit; background: var(--input-bg); color: var(--ink); resize: vertical;
}
.field textarea:focus { outline: none; border-color: var(--turquoise); }

/* Avatar-Bereich im Profil-Bearbeiten */
.ep-avatar { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 8px 0 18px; }

/* Vorschaubild-Auswahl im Upload */
.thumb-picker { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0; }
.thumb-opt { height: 96px; aspect-ratio: 9/16; object-fit: cover; border-radius: 8px;
  border: 3px solid transparent; cursor: pointer; flex: none; }
.thumb-opt.sel { border-color: var(--turquoise); }
.thumb-custom { display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--card); border: 2px dashed var(--border); color: var(--muted);
  font-size: .68rem; cursor: pointer; background-size: cover; background-position: center; }
.thumb-custom.has-img span { display: none; }

/* Quellen-Zeitfenster */
.src-timings { grid-column: 1 / -1; margin-top: 2px; }
.src-tlabel { font-size: .78rem; color: var(--muted); margin-bottom: 6px; }
.src-win { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.src-win input { width: 74px; padding: 7px 9px; border: 1.5px solid var(--border); border-radius: 8px;
  background: var(--input-bg); color: var(--ink); font: inherit; }
.src-win .win-del { border: none; background: none; color: #e5484d; cursor: pointer; font-size: 1rem; }

/* Teacher-Statistiken */
.stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 8px 0 12px; }
.stat-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 6px; text-align: center; }
.stat-card b { display: block; font-size: 1.25rem; }
.stat-card span { font-size: .7rem; color: var(--muted); }
.stat-trend { color: var(--turquoise-dark); font-weight: 700; font-size: .9rem; margin-bottom: 12px; }
.stat-list { display: flex; flex-direction: column; }
.stat-row { display: flex; justify-content: space-between; gap: 10px; padding: 12px 4px; border-bottom: 1px solid var(--border); }
.stat-ttl { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-nums { color: var(--muted); font-size: .85rem; white-space: nowrap; }

/* Chat: „+" und Medien-Nachrichten */
/* Das "+" ist jetzt ein <button> (vorher ein <label>). Buttons bringen vom
   Browser eigenen Rahmen, Innenabstand, Schriftart und Zeilenhoehe mit - die
   haben das Zeichen aus der Mitte geschoben. Deshalb hier ausdruecklich
   zuruecksetzen; place-items: center allein reicht dagegen nicht an. */
/* Ohne Kreis dahinter: nur das "+" selbst, in der Akzentfarbe. Das ist auch
   robuster - ein farbiger Kreis mit einem Zeichen darin muss pixelgenau
   sitzen, ein freistehendes Zeichen nicht. */
.chat-plus { display: grid; place-items: center; width: 38px; height: 38px;
  background: none; cursor: pointer; flex: none;
  border: none; padding: 0; margin: 0;
  font-family: inherit; font-size: 1.9rem; font-weight: 400; line-height: 1;
  color: var(--turquoise-dark); }
.chat-plus:hover { color: var(--turquoise); }
.msg-media { max-width: 220px; max-height: 260px; border-radius: 10px; display: block; margin-bottom: 4px; }
/* Dokument-Anhang: kein Bild, sondern ein Link zum Oeffnen/Herunterladen. */
.msg-file { display: inline-block; margin-bottom: 4px; padding: 8px 12px;
  border-radius: 10px; background: var(--bg-soft); color: var(--ink);
  text-decoration: none; font-weight: 600; font-size: .88rem; }
.msg-file:hover { color: var(--turquoise-dark); }

/* Verwalten-Zahnrad im Chat-Kopf */
.chat-head #cManage { margin-left: auto; background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--ink); }

.error { color: #e5484d; font-size: .9rem; margin: 8px 0; min-height: 1.1em; }
.spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--border); border-top-color: var(--turquoise);
  animation: spin .8s linear infinite; margin: 40px auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Auth-Bildschirm ---- */
.auth-wrap { flex: 1; display: grid; place-items: center; padding: 24px; }
.auth-card {
  width: 100%; max-width: 400px; background: var(--card); border: 1px solid var(--border);
  border-radius: 22px; padding: 32px; box-shadow: var(--shadow);
}
.auth-logo { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 6px; }
.auth-logo img { width: 40px; height: 40px; border-radius: 11px; }
.auth-logo b { font-size: 1.3rem; }
.auth-sub { text-align: center; color: var(--muted); font-size: .9rem; margin-bottom: 22px; }
.auth-tabs { display: flex; gap: 8px; margin-bottom: 20px; }
.auth-tabs button {
  flex: 1; padding: 9px; border-radius: 10px; border: 1.5px solid var(--border);
  background: transparent; color: var(--muted); font-weight: 700;
}
.auth-tabs button.active { border-color: var(--turquoise); color: var(--ink); background: var(--bg-soft); }
.divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .82rem; margin: 18px 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.google-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--card);
  color: var(--ink); font-weight: 700;
}
.google-btn img { width: 18px; height: 18px; }

/* Kleine Kopfleiste auf dem Login (Sprache + Hell/Dunkel) */
.auth-topbar { display: flex; justify-content: flex-end; align-items: center; gap: 6px; padding: 12px 14px 0; }
/* Sprach-Pille (DE/EN) */
.lang-pill {
  min-width: 40px; height: 32px; padding: 0 12px; border-radius: 16px;
  border: 1.5px solid var(--border); background: var(--card); color: var(--ink);
  font-weight: 800; font-size: .8rem; cursor: pointer;
}
.lang-pill:hover { border-color: var(--turquoise); }
/* hCaptcha-Widget mittig unter den Feldern */
.hcaptcha-holder { display: flex; justify-content: center; margin: 6px 0 4px; min-height: 78px; }
/* Text-Link (z. B. „Noch kein Konto? Registrieren") */
.link-btn {
  display: block; width: 100%; text-align: center; margin-top: 12px; padding: 4px;
  background: none; border: none; color: var(--turquoise-dark); font-weight: 700;
  font-size: .9rem; cursor: pointer;
}
.link-btn:hover { text-decoration: underline; }

/* ---- App-Rahmen (Topbar + Bottom-Nav) ---- */
.topbar {
  position: sticky; top: 0; z-index: 20; height: 56px; display: flex; align-items: center;
  justify-content: space-between; padding: 0 16px; background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.topbar .brand { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.topbar .brand img { width: 28px; height: 28px; border-radius: 8px; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 50%; border: none; background: transparent;
  color: var(--ink); font-size: 1.2rem; display: grid; place-items: center;
}
.icon-btn:hover { background: var(--bg-soft); }

.bottom-nav {
  position: sticky; bottom: 0; z-index: 20; display: flex; background: var(--bg);
  border-top: 1px solid var(--border);
}
.bottom-nav button {
  flex: 1; padding: 10px 0; background: transparent; border: none; color: var(--muted);
  font-size: 1.4rem; display: grid; place-items: center; gap: 2px;
}
.bottom-nav button .lbl { font-size: .68rem; font-weight: 700; }
.bottom-nav button.active { color: var(--turquoise-dark); }

.content { flex: 1; overflow-y: auto; }

/* ---- Feed (vertikal, seiten-schnappend) ---- */
.feed { height: calc(100dvh - 56px - 58px); overflow-y: auto; scroll-snap-type: y mandatory; }
.feed-empty { display: grid; place-items: center; height: 100%; color: var(--muted); padding: 24px; text-align: center; }
.clip {
  position: relative; height: 100%; scroll-snap-align: start; background: #000;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.clip video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.clip-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.55) 0%, transparent 32%);
}
/* Grosses Play-Zeichen in der Mitte, solange das Video steht.
   pointer-events: none ist wichtig - sonst faengt das Zeichen den Klick ab,
   und ausgerechnet ein Tippen MITTEN auf das angehaltene Video wuerde die
   Wiedergabe nicht mehr fortsetzen.
   Wie in der App: nur das Zeichen, kein dunkler Kreis dahinter. */
.clip-play {
  position: absolute; inset: 0; display: none;
  place-items: center; pointer-events: none;
  color: rgba(255,255,255,.85); font-size: 54px; line-height: 1;
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
}
.clip-play.show { display: grid; }

/* Hinweis "Ton einschalten" - nur sichtbar, wenn der Clip wegen der
   Autoplay-Sperre des Browsers stumm laeuft. Ohne den Hinweis wuerde man
   denken, das Video habe einfach keinen Ton. */
.clip-sound {
  position: absolute; left: 14px; top: 14px; display: none;
  background: rgba(0,0,0,.55); color: #fff; border-radius: 999px;
  padding: 6px 12px; font-size: .8rem; font-weight: 600;
  pointer-events: none; backdrop-filter: blur(2px);
}
.clip.is-muted .clip-sound { display: block; }
.clip-meta { position: absolute; left: 14px; right: 76px; bottom: 18px; color: #fff; pointer-events: auto; }
.clip-author { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.clip-author img, .clip-author .ph {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: #cfcfcf; flex: none;
}
.clip-author b { font-size: .95rem; }
.clip-title { font-weight: 700; font-size: 1rem; }
.clip-desc { font-size: .88rem; opacity: .92; margin-top: 4px; }
.clip-rail { position: absolute; right: 12px; bottom: 22px; display: flex; flex-direction: column; gap: 18px; align-items: center; pointer-events: auto; }
.clip-rail button { background: rgba(255,255,255,.14); border: none; color: #fff; width: 46px; height: 46px; border-radius: 50%; font-size: 1.2rem; display: grid; place-items: center; }
.clip-rail button.on { color: var(--orange); }
.clip-rail .cnt { color: #fff; font-size: .72rem; font-weight: 700; margin-top: -12px; text-align: center; }

.center-note { display: grid; place-items: center; height: 60vh; color: var(--muted); }

/* ---- Onboarding ---- */
.onb-wrap { flex: 1; overflow-y: auto; padding: 28px 20px 40px; }
.onb-card { max-width: 560px; margin: 0 auto; }
.onb-card h2 { font-size: 1.5rem; margin-bottom: 6px; }
.onb-card .sub { color: var(--muted); margin-bottom: 22px; }
.onb-section { margin-bottom: 22px; }
.onb-section > .h { font-weight: 700; margin-bottom: 10px; }
.onb-section .cat { color: var(--orange-dark); font-weight: 800; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .06em; margin: 14px 0 8px; }
.role-toggle { display: flex; gap: 10px; }
.role-toggle button { flex: 1; padding: 14px; border-radius: 14px; border: 1.5px solid var(--border);
  background: var(--card); color: var(--ink); font-weight: 700; }
.role-toggle button.active { border-color: var(--turquoise); background: var(--bg-soft); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--border);
  background: var(--card); color: var(--ink); font-size: .88rem; font-weight: 600; }
.chip.on { border-color: var(--turquoise); background: var(--turquoise); color: #04211e; }

/* ---- Mehrfachauswahl als Dropdown (Themen/Sprachen) ---- */
.msel-select {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 12px;
  font: inherit; background: var(--input-bg); color: var(--ink);
}
.msel-select:focus { outline: none; border-color: var(--turquoise); }
.msel-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.msel-tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  background: var(--turquoise); color: #04211e; font-size: .86rem; font-weight: 700; cursor: pointer;
}
.msel-tag b { font-weight: 900; opacity: .7; }

/* ---- Quellen-Editor im Upload ---- */
.src-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px;
  padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--card);
}
.src-row select, .src-row input {
  width: 100%; padding: 9px 11px; border: 1.5px solid var(--border); border-radius: 10px;
  font: inherit; background: var(--input-bg); color: var(--ink);
}
.src-row .src-title, .src-row .src-url, .src-row .src-del { grid-column: 1 / -1; }
.src-row .src-del { border: none; background: none; }

/* ---- Einstellungen ---- */
.settings { padding: 20px 16px 90px; max-width: 560px; margin: 0 auto; }
.set-title { font-size: 1.3rem; font-weight: 800; margin-bottom: 16px; }
.set-group { background: var(--card); border: 1px solid var(--border); border-radius: 16px; margin-bottom: 16px; overflow: hidden; }
.set-row { display: flex; justify-content: space-between; align-items: center; padding: 15px 16px;
  cursor: pointer; border-bottom: 1px solid var(--border); }
.set-row:last-child { border-bottom: none; }
.set-row:hover { background: var(--bg-soft); }
.set-row b { color: var(--muted); font-weight: 700; }
.set-btns { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.set-btns .link-btn { padding: 10px; }

/* Kanal-Liste (gefolgte Kanäle) */
.chan-list { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px 90px; }
.chan-item { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; cursor: pointer; }
.chan-item:hover { background: var(--bg-soft); }
.chan-av { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex: none; }
.chan-av img { width: 100%; height: 100%; object-fit: cover; }
.chan-name { font-weight: 700; }
.chan-sub { color: var(--muted); font-size: .85rem; }

/* Diskussions-Umschalter Aktiv/Archiviert */
.disc-tabs { display: flex; gap: 8px; padding: 12px 16px 4px; max-width: 640px; margin: 0 auto; }
.disc-tabs button { flex: 1; padding: 9px; border-radius: 10px; border: 1.5px solid var(--border);
  background: transparent; color: var(--muted); font-weight: 700; cursor: pointer; }
.disc-tabs button.active { border-color: var(--turquoise); color: var(--ink); background: var(--bg-soft); }

/* ---- gemeinsame Avatar-Anzeige ---- */
.av-img { border-radius: 50%; object-fit: cover; flex: none; background: #cfcfcf; }
.av-ph2 { background: #cfcfcf; }

/* ---- Profil ---- */
.profile { padding: 22px 16px 30px; }
.prof-head { text-align: center; max-width: 520px; margin: 0 auto; }
.prof-av { display: flex; justify-content: center; margin-bottom: 12px; }
.prof-name { font-size: 1.35rem; font-weight: 800; }
.prof-user { color: var(--muted); font-size: .92rem; }
.prof-full { margin-top: 6px; font-weight: 600; }
.prof-bio { margin-top: 8px; color: var(--muted); font-size: .92rem; }
.prof-tags { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.prof-tags .t { font-size: .74rem; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  background: var(--bg-soft); border: 1px solid var(--border); color: var(--muted); }
.prof-stats { display: flex; justify-content: center; gap: 30px; margin: 18px 0 6px; }
.prof-stats > div { display: flex; flex-direction: column; align-items: center; }
.prof-stats b { font-size: 1.2rem; }
.prof-stats span { color: var(--muted); font-size: .78rem; }
.prof-actions { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }

/* ---- Clip-Raster ---- */
.clip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 18px; }
.grid-tile { position: relative; aspect-ratio: 9/16; background: #000; border-radius: 6px;
  overflow: hidden; cursor: pointer; }
.grid-tile img { width: 100%; height: 100%; object-fit: cover; }
.tile-ph { width: 100%; height: 100%;
  background: radial-gradient(120px 90px at 40% 30%, rgba(46,196,182,.4), transparent),
              radial-gradient(120px 90px at 80% 90%, rgba(255,138,61,.4), transparent), #14302e; }
.tile-views { position: absolute; left: 6px; bottom: 5px; color: #fff; font-size: .72rem;
  font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.tile-badge { position: absolute; top: 5px; left: 5px; background: rgba(0,0,0,.6); color: #fff;
  font-size: .62rem; font-weight: 700; padding: 2px 6px; border-radius: 6px; }
.tile-actions { position: absolute; top: 5px; right: 5px; display: flex; gap: 4px; }
.tile-actions button { border: none; background: rgba(0,0,0,.55); border-radius: 7px;
  width: 26px; height: 26px; cursor: pointer; font-size: .8rem; line-height: 1; }
.tile-actions .ta-del { background: #e5484d; }
.foll-check { display: flex; align-items: center; gap: 8px; margin: 6px 0 16px; font-weight: 600; cursor: pointer; }
.foll-check input { width: 18px; height: 18px; }

/* ---- Voll-Player (Modal) ---- */
.player-modal { position: fixed; inset: 0; z-index: 100; background: #000;
  display: flex; align-items: center; justify-content: center; }
.player-modal video { width: 100%; height: 100%; object-fit: contain; }
.pm-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 42px; height: 42px;
  border-radius: 50%; border: none; background: rgba(255,255,255,.16); color: #fff; font-size: 1.2rem; }

/* ---- Suche ---- */
.search-wrap { padding: 16px; }
.s-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 12px;
  cursor: pointer; }
.s-row:hover { background: var(--bg-soft); }
.s-name { font-weight: 700; }
.s-sub { color: var(--muted); font-size: .82rem; }
.back-row { display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
.back-row button { background: none; border: none; color: var(--ink); font-size: 1.1rem; font-weight: 700; }

/* ---- Diskussionen ---- */
.disc-list { padding: 12px 14px 30px; display: flex; flex-direction: column; gap: 10px; }
.disc-item { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 14px;
  border: 1px solid var(--border); background: var(--card); cursor: pointer; }
.disc-item:hover { border-color: var(--turquoise); }
.disc-av { width: 46px; height: 46px; border-radius: 12px; flex: none; object-fit: cover;
  background: var(--bg-soft); display: grid; place-items: center; font-size: 1.3rem; }
.disc-main { flex: 1; min-width: 0; }
.disc-name { font-weight: 700; }
.disc-sub { color: var(--muted); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.disc-meta { color: var(--muted); font-size: .74rem; margin-top: 2px; }
.lock-tag { font-size: .64rem; font-weight: 800; color: var(--orange-dark); }

/* ---- Chat ---- */
.chat-wrap { display: flex; flex-direction: column; height: calc(100dvh - 56px - 58px); }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.chat-head button { background: none; border: none; color: var(--ink); font-size: 1.2rem; font-weight: 700; }
.chat-head .t { font-weight: 800; }
.chat-msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 78%; padding: 8px 12px; border-radius: 14px; background: var(--bg-soft);
  border: 1px solid var(--border); align-self: flex-start; }
.msg.mine { align-self: flex-end; background: var(--turquoise); color: #04211e; border-color: transparent; }
.msg .a { font-size: .7rem; font-weight: 800; color: var(--muted); margin-bottom: 2px; }
.msg.mine .a { color: rgba(4,33,30,.7); }
.msg .x { font-size: .92rem; word-wrap: break-word; }
.chat-input { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); }
.chat-input input { flex: 1; padding: 11px 14px; border: 1.5px solid var(--border); border-radius: 999px;
  background: var(--input-bg); color: var(--ink); }
.chat-input input:focus { outline: none; border-color: var(--turquoise); }
/* :not(.chat-plus) ist der Kern der Sache: Diese Regel ist spezifischer als
   .chat-plus UND steht spaeter - sie hat dem "+" deshalb den tuerkisen
   Hintergrund und padding: 0 18px verpasst. Bei fester Breite von 38px bleibt
   davon kaum Inhaltsflaeche uebrig, und das Zeichen sass sichtbar daneben.
   Gemeint war die Regel immer nur fuer den Senden-Knopf. */
.chat-input button:not(.chat-plus) { border: none; background: var(--turquoise); color: #04211e; font-weight: 800;
  border-radius: 999px; padding: 0 18px; }
.chat-join { display: grid; place-items: center; flex: 1; gap: 12px; padding: 30px; text-align: center; color: var(--muted); }
/* Hinweis statt Schreibfeld bei archivierten Diskussionen (nur lesen). */
.chat-note { padding: 14px 16px; border-top: 1px solid var(--border);
  color: var(--muted); font-size: .88rem; text-align: center; }

/* Diskussionen im oeffentlichen Teacher-Profil */
.prof-discs { margin-top: 8px; }

/* ---- Upload ---- */
.upload-wrap { padding: 20px 16px 40px; max-width: 560px; margin: 0 auto; }
.upload-wrap h2 { font-size: 1.4rem; margin-bottom: 16px; }
.file-drop { border: 2px dashed var(--turquoise); border-radius: 14px; padding: 22px; text-align: center;
  color: var(--turquoise-dark); font-weight: 700; cursor: pointer; }
.file-drop.has { color: var(--ink); border-style: solid; border-color: var(--border); }
.file-drop input { display: none; }
.up-note { color: var(--muted); font-size: .82rem; margin-top: 6px; }

/* ============================================================
   Nachgezogene Bausteine (Review 2026-07-26): Kommentare, Melden,
   Menues, Quellen-Anzeige, 2FA, Toasts.
   ============================================================ */

/* ---- Blatt von unten (Sheet) ---- */
.sheet-back { position: fixed; inset: 0; background: rgba(0,0,0,.5);
  display: flex; align-items: flex-end; justify-content: center; z-index: 60; }
.sheet { background: var(--card); color: var(--ink); width: 100%; max-width: 560px;
  max-height: 82vh; border-radius: 18px 18px 0 0; display: flex; flex-direction: column;
  box-shadow: var(--shadow); animation: sheet-up .18s ease-out; }
@keyframes sheet-up { from { transform: translateY(22px); opacity: .6; } to { transform: none; opacity: 1; } }
.sheet-head { display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 1rem; }
.sheet-close { border: none; background: none; color: var(--muted); font-size: 1.1rem; cursor: pointer; }
.sheet-body { overflow-y: auto; padding: 14px 16px; flex: 1; }
.sheet-foot { border-top: 1px solid var(--border); padding: 10px 16px 14px; }

/* Auf grossen Schirmen mittig statt am unteren Rand. */
@media (min-width: 720px) {
  .sheet-back { align-items: center; }
  .sheet { border-radius: 18px; max-height: 78vh; }
}

/* ---- Kurznachricht (Toast) ---- */
.toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%);
  background: var(--ink); color: var(--bg); padding: 11px 18px; border-radius: 999px;
  font-size: .9rem; font-weight: 600; z-index: 90; box-shadow: var(--shadow);
  max-width: 88vw; text-align: center; animation: toast-up .18s ease-out; }

/* EIGENE Keyframes statt sheet-up - und zwar zwingend:
   Die Meldung wird mit transform: translateX(-50%) waagerecht zentriert.
   sheet-up setzt aber ebenfalls transform (translateY(22px) -> none) und
   ueberschreibt die Zentrierung damit fuer die Dauer der Animation. Die
   Meldung startete deshalb RECHTS der Mitte (linke Kante genau mittig) und
   sprang beim Ende der Animation nach links in die Mitte.
   Hier wird translateX(-50%) in beiden Schritten mitgefuehrt, dadurch
   kommt sie sauber von unten aus der Mitte. */
@keyframes toast-up {
  from { transform: translateX(-50%) translateY(22px); opacity: .6; }
  to   { transform: translateX(-50%) translateY(0);    opacity: 1; }
}

/* ---- Kommentare ---- */
.cmt-list { display: flex; flex-direction: column; gap: 16px; }
.cmt-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .88rem; }
.cmt-time { color: var(--muted); font-size: .78rem; font-weight: 400; }
.cmt-badge { background: var(--orange); color: #2a1200; border-radius: 999px;
  padding: 1px 8px; font-size: .72rem; font-weight: 800; }
.cmt-text { margin: 4px 0 6px; line-height: 1.45; overflow-wrap: anywhere; }
.cmt-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.cmt-actions button { border: none; background: none; color: var(--muted);
  font-size: .82rem; font-weight: 600; cursor: pointer; padding: 0; }
.cmt-actions button:hover { color: var(--ink); }
.cmt-actions .cmt-like.on { color: var(--orange-dark); }
.cmt-replies { margin: 10px 0 0 16px; padding-left: 12px;
  border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: 14px; }
.cmt-input { display: flex; gap: 8px; }
.cmt-input input { flex: 1; background: var(--input-bg); color: var(--ink);
  border: 1px solid var(--border); border-radius: 999px; padding: 10px 14px; font: inherit; }
/* Wie bei .chat-input: der Innenabstand gilt dem Senden-Knopf, nicht dem "+". */
.cmt-input button:not(.chat-plus) { border-radius: 999px; padding: 0 18px; }
.cmt-corr { display: flex; align-items: center; gap: 8px; margin-top: 8px;
  color: var(--muted); font-size: .82rem; cursor: pointer; }

/* ---- Hinweis auf einem gesperrten fremden Profil ---- */
.ban-note { display: flex; gap: 14px; align-items: flex-start; margin: 20px 16px;
  padding: 16px; border-radius: 14px; background: rgba(229,72,77,.09);
  border: 1px solid rgba(229,72,77,.3); }
.ban-note-icon { font-size: 26px; line-height: 1; flex: none; }
.ban-note .muted-note { color: var(--muted); font-size: .88rem; margin-top: 4px; }

/* ---- Sprachwahl (41 Sprachen, im Sheet) ---- */
.lang-list { display: flex; flex-direction: column; gap: 2px; }
.lang-item { display: flex; align-items: center; gap: 12px; width: 100%; border: none;
  background: none; color: var(--ink); text-align: left; padding: 11px 6px; font: inherit;
  cursor: pointer; border-radius: 10px; }
.lang-item:hover { background: rgba(46,196,182,.1); }
.lang-item .code { flex: none; width: 30px; font-weight: 800; font-size: .74rem;
  color: var(--muted); letter-spacing: .02em; }
.lang-item.on .code { color: var(--turquoise-dark); }
.lang-item .native { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.lang-item .check { flex: none; color: var(--turquoise-dark); font-weight: 800; opacity: 0; }
.lang-item.on .check { opacity: 1; }

/* ---- Menue-Liste (⋯) ---- */
.menu-list { display: flex; flex-direction: column; }
.menu-item { border: none; background: none; color: var(--ink); text-align: left;
  padding: 15px 4px; font: inherit; font-weight: 600; cursor: pointer;
  border-bottom: 1px solid var(--border); }
.menu-item:last-child { border-bottom: none; }
.menu-item:hover { color: var(--turquoise-dark); }

/* ---- Verknuepfte Diskussionen / Clips ---- */
/* Kaertchen mit ✕ (wie LinkedDiscussionsEditor.kt in der App). */
.link-chip { display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  padding: 10px 12px; border-radius: 12px; background: var(--bg-soft);
  border: 1px solid var(--border); font-size: .86rem; }
.link-chip span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-chip-x { border: none; background: none; color: var(--muted); font: inherit;
  cursor: pointer; padding: 2px 6px; border-radius: 50%; }
.link-chip-x:hover { color: var(--ink); background: var(--border); }
/* Auswahl-Blatt: angetippte Zeile bekommt ein ✓ */
.pick-row { display: flex; align-items: center; gap: 10px; width: 100%; }
.pick-row .pick-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-row.on { color: var(--turquoise-dark); }
.pick-row .pick-tick { font-weight: 800; color: var(--turquoise-dark); }

/* ---- Quellen-Anzeige ---- */
.src-view { display: flex; flex-direction: column; gap: 18px; }
.src-item { border-left: 3px solid var(--turquoise); padding-left: 12px; }
.src-item-type { color: var(--turquoise-dark); font-size: .74rem;
  font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.src-item-title { font-weight: 700; margin: 2px 0; overflow-wrap: anywhere; }
.src-item-meta { color: var(--muted); font-size: .84rem; }
.src-wins { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.src-win-btn { border: 1px solid var(--turquoise); background: none; color: var(--turquoise-dark);
  border-radius: 999px; padding: 4px 12px; font-size: .8rem; font-weight: 700; cursor: pointer; }
.src-win-btn:hover { background: var(--turquoise); color: #04211e; }

/* ---- Zwei-Schritt-Anmeldung ---- */
.ts-secret { display: block; background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px; font-family: ui-monospace, monospace;
  font-size: .95rem; letter-spacing: .08em; text-align: center;
  cursor: pointer; overflow-wrap: anywhere; }

/* ---- zusaetzliche Knoepfe an der Clip-Leiste ---- */
.clip-rail .commentBtn, .clip-rail .srcBtn, .clip-rail .moreBtn {
  border: none; background: none; color: #fff; font-size: 1.5rem;
  cursor: pointer; filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); padding: 0; }
.clip-rail .srcBtn { font-size: 1.3rem; }

/* ---- Rechtstexte (Terms / Privacy) ---- */
.legal-doc .legal-updated { color: var(--muted); font-size: .85rem; margin: -4px 0 14px; }
.legal-body { line-height: 1.6; font-size: .95rem; }
.legal-body .legal-h2 { color: var(--turquoise-dark); font-size: 1.05rem; margin: 22px 0 6px; }
.legal-body .legal-h3 { font-size: .98rem; margin: 16px 0 4px; }
.legal-body p { margin: 8px 0; }
.legal-body ul { padding-left: 20px; margin: 6px 0; }
.legal-body li { margin: 3px 0; }
.legal-body a { color: var(--turquoise-dark); }
.legal-doc[dir="rtl"] .legal-body ul { padding-left: 0; padding-right: 20px; }

/* ---- Rechtshinweis im Login ---- */
.auth-legal { margin: 12px 4px 4px; font-size: .8rem; line-height: 1.5;
  color: var(--muted); text-align: center; }
.auth-legal a.legal-link { color: var(--turquoise-dark); text-decoration: underline; cursor: pointer; }


/* ============================================================
   Barrierefreiheit
   ============================================================ */

/* Tastatur-Fokus muss SICHTBAR sein (WCAG 2.4.7). An mehreren Stellen stand
   "outline: none" mit einer Rahmenfarbe als Ersatz - die ist bei duennem
   Rahmen und wenig Kontrast kaum zu erkennen, und wer per Tabulator
   navigiert, verliert damit die Orientierung. :focus-visible trifft nur die
   Tastaturnutzung, der Mausklick bekommt also weiterhin keinen Ring. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--turquoise-dark);
  outline-offset: 2px;
  border-radius: 6px;
}

/* "Bewegung reduzieren" respektieren (WCAG 2.3.3). Betrifft vor allem die
   Meldungen, die von unten einfahren, und die Uebergaenge zwischen den
   Bildschirmen. Auf 0.01ms statt 0 gesetzt, damit animationend-/
   transitionend-Ereignisse weiterhin feuern - sonst bleibt Code haengen,
   der auf das Ende einer Animation wartet. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}