/* ===== Riso-Look (DeutschCafé) =====
   Liegt als letzte Stildatei über style.css (Team) und dem Stil im Lernbereich.
   Nur Farben, Rahmen, Schatten, Rundungen und Schrift – keine Abstände oder Layouts.
   Ausschalten: die <link>-Zeile zu riso.css in index.html bzw. lernen/index.html entfernen. */

/* ---------- Farben hell ---------- */
html:root {
  --brand: #FC4C00; --brand-dark: #d94100; --brand-soft: #fde6da;
  --ink: #545454; --muted: #75706b; --line: #e2d7cf;
  --bg: #F6F8EF; --panel: #fffdf8; --panel2: #fbf6ef; --line2: #efe6de;
  --chip: #fbe2e1; --hover: #fdeee6;
  --nav-on: #FC4C00; --nav-on-ink: #fff;
  --riso-ink: #545454;          /* Rahmen im Druck-Look */
  --riso-pink: #FAD0CF;
  --riso-sh: 5px 5px 0 #FAD0CF; /* versetzter Schatten */
  --riso-sh-o: 5px 5px 0 #FC4C00;
  --radius: 18px;
  --shadow: var(--riso-sh);
}
/* ---------- Farben dunkel (Team: Schalter; Lernbereich: Geräteeinstellung) ---------- */
html[data-theme="dark"] {
  --brand: #ff6a2b; --brand-dark: #ff8a55; --brand-soft: #3a2419;
  --ink: #f1ede8; --muted: #b0a69c; --line: #3d3733; --bg: #1d1a18; --panel: #262220; --panel2: #221f1d; --line2: #2f2a27;
  --chip: #3a2a29; --hover: #302925; --nav-on: #ff6a2b; --nav-on-ink: #1d1a18;
  --riso-ink: #8c827a; --riso-pink: #5a3634;
  --riso-sh: 5px 5px 0 rgba(250,208,207,.18); --riso-sh-o: 5px 5px 0 rgba(255,106,43,.55);
  --shadow: var(--riso-sh);
  --ok-soft: #1c2c22; --staff: #1d2433; --staff-line: #33405c; color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  html:root:not([data-theme]) {
    --brand: #ff6a2b; --brand-dark: #ff8a55; --brand-soft: #3a2419;
    --ink: #f1ede8; --muted: #b0a69c; --line: #3d3733; --bg: #1d1a18; --panel: #262220; --chip: #3a2a29;
    --ok-soft: #1c2c22; --staff: #1d2433; --staff-line: #33405c;
    --riso-ink: #8c827a; --riso-pink: #5a3634;
    --riso-sh: 5px 5px 0 rgba(250,208,207,.18); --riso-sh-o: 5px 5px 0 rgba(255,106,43,.55);
    --shadow: var(--riso-sh);
  }
}

/* ---------- Körnung (feines Druckraster über allem, klickt nicht mit) ---------- */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}
html[data-theme="dark"] body::after { opacity: .05; }
body[data-page="forms"]::after { display: none; } /* Dokument-Vorschau bleibt sauber */
@media print { body::after { display: none; } }
@media (prefers-reduced-transparency: reduce) { body::after { display: none; } }

/* ---------- Überschriften ---------- */
h1, h2, .home-title, .editor-head h2, .login-box h2, .auth h1 { letter-spacing: -.02em; }
.home-title { font-size: 40px; line-height: 1; }
h3.sec { color: var(--brand); border-top: 1.5px dashed var(--line); }

/* ================= Team-Programm ================= */
.topbar, .subbar { border-bottom: 1.5px solid var(--riso-ink); }
.brand-name { border-left-color: var(--riso-ink); }
.nav-btn { border-radius: 999px; }
.nav-btn.active { background: var(--brand); color: #fff; }
.tab { border-radius: 999px; }
.tab.active { background: var(--brand-soft); border-color: var(--brand); }

.btn { border-radius: 999px; border-width: 1.5px; }
.btn.primary { box-shadow: 3px 3px 0 var(--riso-ink); }
.btn.primary:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--riso-ink); }
.seg { border-radius: 999px; border-width: 1.5px; }
.seg button.active { background: var(--brand); color: #fff; }

.tile { border: 1.5px solid var(--riso-ink); border-radius: 22px; box-shadow: var(--riso-sh); transition: transform .12s, box-shadow .12s; }
.tile:hover { border-color: var(--riso-ink); box-shadow: var(--riso-sh-o); transform: translate(-2px, -2px); }
.tile-title { font-size: 22px; }
.tile-tag { background: var(--brand); color: #fff; font-weight: 600; }
.tile.soon { background: var(--panel2); box-shadow: none; border-style: dashed; }

.recent, .soon-box { border: 1.5px solid var(--riso-ink); border-radius: 20px; box-shadow: var(--riso-sh); }
.login-box { border: 1.5px solid var(--riso-ink); border-radius: 24px; box-shadow: var(--riso-sh-o); }
.login-wrap { background: radial-gradient(circle at 100% 0%, rgba(252,76,0,.16), rgba(252,76,0,0) 30%), radial-gradient(circle at 0% 100%, rgba(250,208,207,.7), rgba(250,208,207,0) 40%), var(--bg); }
html[data-theme="dark"] .login-wrap { background: var(--bg); }

.editor { border-right: 1.5px solid var(--riso-ink); }
.period, .sc-group { border-radius: 14px; }
.field input[type=text], .field input[type=number], .field input[type=date], .field textarea, .field select, select { border-radius: 10px; }

/* ---------- Seitenleiste ---------- */
body.has-side .topbar { box-shadow: none; }
body.has-side .topbar .brand, body.has-side .main-nav { border-right: 1.5px solid var(--riso-ink); background: var(--bg); }
body.has-side .nav-btn { border-radius: 999px; }
body.has-side .nav-btn.active { background: var(--brand); color: #fff; box-shadow: 3px 3px 0 var(--riso-ink); }
html[data-theme="dark"] body.has-side .nav-btn.active { background: var(--brand); color: #1d1a18; }
body.has-side .nav-btn.active::before { display: none; }
body.has-side .nav-group { color: var(--brand); }

/* ---------- Startseite & Karten ---------- */
.dcard { border: 1.5px solid var(--riso-ink); border-radius: 22px; box-shadow: var(--riso-sh); transition: transform .12s, box-shadow .12s; }
.dcard:hover { border-color: var(--riso-ink); box-shadow: var(--riso-sh-o); transform: translate(-2px, -2px); }
.dcard.zero { box-shadow: none; border-style: dashed; }
.dpanel, .ko-card, .nxbar { border: 1.5px solid var(--riso-ink); border-radius: 22px; box-shadow: var(--riso-sh); }
.dday { border: 1.5px solid var(--riso-ink); background: var(--riso-pink); color: var(--ink); border-radius: 12px; }
html[data-theme="dark"] .dday { color: #ffd9cf; }
.db-table { border: 1.5px solid var(--riso-ink); box-shadow: var(--riso-sh); border-radius: 18px; }
.modal { border: 1.5px solid var(--riso-ink); border-radius: 24px; box-shadow: var(--riso-sh-o); }
.chip, .nx { border-radius: 999px; }
.eg-tab.on { color: var(--brand); }
.empty { border: 1.5px dashed var(--riso-ink); border-radius: 22px; }

/* ---------- Alle übrigen Bereiche (Datenbank, Eingang, Rechnungen, Kursorga, Kursplan, Kalender, Unterricht) ---------- */
/* große Flächen: grauer Rahmen + rosa Versatz */
.db-list, .db-detail, .inb-box, .iv-card, .iv-prevbox, .lb-course, .lb-thread, .kp-week, .tg, .gj, .pk-strip, .eg-kind, .lp-kz,
.um-card, .um-start, .sc-group, .period, .nxbar {
  border: 1.5px solid var(--riso-ink); border-radius: 20px; box-shadow: var(--riso-sh); }
.period, .sc-group { box-shadow: none; border-radius: 14px; }
/* Aufklapper und schwebende Fenster: orange Versatz */
.ck, .kc-pop, .tu-ndl, .um-pmenu { border: 1.5px solid var(--riso-ink); border-radius: 20px; box-shadow: var(--riso-sh-o); }
/* kleine Kästchen: nur Rahmen */
.kp-day, .wk-day, .um-w, .um-tiles > div, .iv-line, .pf-pick { border: 1.5px solid var(--riso-ink); border-radius: 14px; }
.um-p { border-color: var(--riso-ink); }
/* Pillen */
.chip, .pf-chip, .ko-chip, .kp-pill, .um-chip, .um-tg, .iv-tabs button, .um-nav, .um-pick { border-radius: 999px; }
.iv-tabs button.on, .iv-tabs button.active, .um-chip.on, .um-tg.on, .kp-pill.on, .ko-chip.on, .pf-chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
/* Eingabefelder */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select, textarea { border-color: #d5c7bd; border-width: 1.5px; }
html[data-theme="dark"] input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), html[data-theme="dark"] select, html[data-theme="dark"] textarea { border-color: #4a423d; }
input[type=checkbox], input[type=radio] { accent-color: var(--brand); }
/* Tabellenköpfe und Reiter */
.db-table thead th { background: var(--panel2); color: var(--ink); font-weight: 600; border-bottom: 1.5px solid var(--riso-ink); }
.eg-tabs { border-bottom: 1.5px solid var(--line); }
.eg-tab.on { box-shadow: inset 0 -3px 0 var(--brand); }
/* Hinweise und Abzeichen */
.tile-tag, .nav-badge { font-weight: 700; }
.toast { border-radius: 999px; border: 1.5px solid var(--riso-ink); }
.kbd { border-color: var(--riso-ink); }

/* ================= Feinschliff wie im Entwurf ================= */
/* Hintergrund mit Farbschimmer in den Ecken */
body { background: radial-gradient(circle at 100% 0%, rgba(252,76,0,.10), rgba(252,76,0,0) 30%), radial-gradient(circle at 0% 0%, rgba(250,208,207,.6), rgba(250,208,207,0) 32%), var(--bg); background-attachment: fixed; }
html[data-theme="dark"] body { background: var(--bg); }
body.has-side .topbar { background: transparent; border-bottom: 0; }
body.has-side .topbar .brand, body.has-side .main-nav { background: transparent; }
body.has-side .topbar .brand { height: 76px; }
body.has-side #brand-logo svg { height: 44px; }
body.has-side .main-nav { top: 76px; }
/* Menü: ruhige Textliste, aktiver Punkt als graue Pille */
body.has-side .nav-btn { font-size: 15.5px; padding: 10px 14px; color: var(--ink); }
body.has-side .nav-btn .nav-ico { opacity: .7; }
body.has-side .nav-btn.active { background: var(--riso-ink); color: #fff; box-shadow: none; }
body.has-side .nav-btn.active .nav-ico { opacity: 1; }
html[data-theme="dark"] body.has-side .nav-btn.active { background: #f1ede8; color: #1d1a18; }
body.has-side .nav-group { color: var(--muted); }
/* Seitentitel groß, Datum darüber, Name in Orange */
.home-title { font-size: 48px; letter-spacing: -.035em; line-height: .95; }
.dash-hi > div:first-child { display: flex; flex-direction: column-reverse; gap: 6px; }
.dash-hi .home-title { font-size: 60px; }
.hi-name { color: var(--brand); }
.dash-date { font-size: 15px; }
.dash-quick .btn { padding: 12px 22px; font-size: 15px; }
/* Kennzahlen: erste Karte rosa gefüllt, die anderen umrandet */
.dash-grid { gap: 16px; }
.dcard { border-radius: 24px; box-shadow: none; padding: 22px 24px 20px; }
.dcard .dn { font-size: 54px; }
.dcard .dt { font-size: 15px; font-weight: 500; }
.dash-grid .dcard:first-child { background: var(--riso-pink); border-color: var(--riso-pink); }
html[data-theme="dark"] .dash-grid .dcard:first-child { background: #4a2e2c; border-color: #4a2e2c; }
.dcard.zero { border-style: solid; background: transparent; }
.dcard:hover { box-shadow: var(--riso-sh); transform: translate(-2px, -2px); }
/* Panels: links umrandet mit rosa Versatz, rechts orange Fläche mit Punktraster */
.dash-cols { gap: 24px; }
.dpanel { border-radius: 26px; padding: 10px 24px 18px; }
.dpanel h3 { font-size: 22px; margin: 16px 0 10px; }
.dpanel h3 a { text-decoration: underline; color: var(--ink); font-size: 14px; }
.drow { border-bottom: 1.5px dashed var(--line); padding: 12px 4px; }
.dash-cols > .dpanel:first-child { box-shadow: 8px 8px 0 var(--riso-pink); }
.dash-cols > .dpanel:nth-child(2) { position: relative; overflow: hidden; background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: none; }
.dash-cols > .dpanel:nth-child(2)::after { content: ""; position: absolute; right: -50px; bottom: -50px; width: 230px; height: 230px; border-radius: 50%; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.6) 2px, rgba(0,0,0,0) 2.4px); background-size: 12px 12px; }
.dash-cols > .dpanel:nth-child(2) > * { position: relative; z-index: 1; }
.dash-cols > .dpanel:nth-child(2) h3 a { color: #fff; }
.dash-cols > .dpanel:nth-child(2) .drow { background: rgba(255,255,255,.14); border: 0; border-radius: 16px; margin-bottom: 10px; padding: 12px 14px; color: #fff; }
.dash-cols > .dpanel:nth-child(2) .drow:hover { background: rgba(255,255,255,.24); }
.dash-cols > .dpanel:nth-child(2) .muted, .dash-cols > .dpanel:nth-child(2) .dnone { color: rgba(255,255,255,.88); }
.dash-cols > .dpanel:nth-child(2) .dday { background: rgba(255,255,255,.22); border: 0; color: #fff; }
/* Tabellen ruhiger: Rahmen ja, Schatten nein */
.db-table { box-shadow: none; }
.db-table.docs { box-shadow: none; }

/* ================= Verwaltung & Lehrerbereich wie im Entwurf ================= */
/* Aktive Filter, Umschalter und Unter-Reiter: graue Pille (orange bleibt für Hauptaktionen) */
html:root { --nav-on: #545454; --nav-on-ink: #fff; }
html[data-theme="dark"] { --nav-on: #f1ede8; --nav-on-ink: #1d1a18; }
.seg button.active, .chip.on { background: var(--nav-on); color: var(--nav-on-ink); border-color: var(--nav-on); }
.iv-tabs button.on, .iv-tabs button.active, .um-chip.on, .kp-pill.on, .ko-chip.on, .pf-chip.on { background: var(--nav-on); border-color: var(--nav-on); color: var(--nav-on-ink); }
/* Hauptreiter (Kursorga: Unterricht · Kurse · Kommunikation …): groß, orange unterstrichen */
.eg-tab { font-size: 15.5px; font-weight: 600; color: var(--muted); }
.eg-tab.on { color: var(--ink); box-shadow: inset 0 -3px 0 var(--brand); }
/* Tabellen: Kopfzeile ruhig, Zeilen mit gestrichelter Linie */
.db-table td { border-bottom: 1.5px dashed var(--line2); }
.db-table thead th { background: transparent; text-transform: uppercase; font-size: 11.5px; letter-spacing: .06em; color: var(--muted); }
/* Seitentitel mit kurzer Unterzeile */
.ko-lead, .home-sub { font-size: 14.5px; }

/* ---------- Lehrerbereich: laufender Kurs als große orange Karte ---------- */
.um-starts { gap: 16px; }
.um-start { border: 1.5px solid var(--riso-ink); border-radius: 22px; box-shadow: none; padding: 18px 22px; }
.um-start.live { position: relative; overflow: hidden; background: var(--brand); border-color: var(--brand); color: #fff; border-radius: 28px;
  padding: 30px 32px; min-height: 230px; align-items: flex-end; box-shadow: 8px 8px 0 var(--riso-pink); }
.um-start.live::after { content: ""; position: absolute; right: -40px; top: -50px; width: 260px; height: 260px; border-radius: 50%; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.55) 2px, rgba(0,0,0,0) 2.4px); background-size: 12px 12px; }
.um-start.live > * { position: relative; z-index: 1; }
.um-start.live .um-k { color: #fff; opacity: .9; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 600; }
.um-start.live .um-dot { background: #fff; }
.um-start.live b { font-family: "League Spartan", sans-serif; font-size: 48px; line-height: .95; letter-spacing: -.03em; margin: 8px 0 6px; }
.um-start.live .muted { color: rgba(255,255,255,.9); font-size: 15px; }
.um-start.live .um-go { background: #545454; border-color: #545454; color: #fff; box-shadow: none; padding: 14px 26px; font-size: 16px; }
.um-start.live .um-go:hover { background: #3f3d3b; }
.um-start b { font-family: "League Spartan", sans-serif; font-size: 20px; }

/* ---------- Unterrichtsmodus ---------- */
.um-top { border-bottom: 1.5px solid var(--riso-ink); background: var(--bg); }
.um-close, .um-top .btn { border-radius: 999px; border: 1.5px solid var(--riso-ink); }
.um-top .btn.primary { background: var(--riso-ink); border-color: var(--riso-ink); color: #fff; box-shadow: none; }
html[data-theme="dark"] .um-top .btn.primary { background: #f1ede8; border-color: #f1ede8; color: #1d1a18; }
.um-dbtn b { font-size: 22px; }
.um-side { border-left: 1.5px solid var(--riso-ink); background: transparent; }
.um-card { border-radius: 24px; }
.um-lab { color: var(--ink); font-family: "League Spartan", sans-serif; font-size: 15px; letter-spacing: 0; text-transform: none; }
.um-tfbar .um-tg { border-radius: 999px; border: 1.5px solid var(--riso-ink); }
.um-tfbar .um-tg.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.um-p { border-radius: 16px; }
.um-p.on { border-color: var(--riso-ink); background: var(--riso-pink); }
html[data-theme="dark"] .um-p.on { background: #3a2a29; }
.um-p.on .um-st { background: var(--riso-ink); }
.um-chip { border: 1.5px solid var(--riso-ink); }

/* ---------- Meine Kurse (Lehrkraft): Liste und Kursseite im Druck-Look ---------- */
.mk-row { border: 1.5px solid var(--riso-ink); border-radius: 22px; box-shadow: var(--riso-sh); transition: transform .12s, box-shadow .12s; }
.mk-row:hover { border-color: var(--riso-ink); box-shadow: var(--riso-sh-o); transform: translate(-2px, -2px); }
.mk-row.today { border-color: var(--brand); }
.mk-hw, .mk-tile { border: 1.5px solid var(--riso-ink); border-radius: 22px; }
.mk-hw.open { border-color: var(--brand); box-shadow: var(--riso-sh-o); }
.mk-tabs { border-bottom: 1.5px dashed var(--line); }
.mk-title { letter-spacing: -.02em; }
.mk-hero.mk-multi .um-start.live { min-height: 0; padding: 20px 26px; align-items: center; }
.mk-hero.mk-multi .um-start.live b { font-size: 30px; margin: 4px 0 2px; }
.mk-now .mk-ghost { color: #fff; border-color: rgba(255,255,255,.8); }
.ibx-item { border: 1.5px solid var(--riso-ink); border-radius: 18px; }
.ibx-item.on { border-color: var(--brand); box-shadow: var(--riso-sh-o); }
.um-clock { border: 1.5px solid var(--riso-ink); }
.um-gbox, .um-snap, .um-s { border: 1.5px solid var(--riso-ink); border-radius: 16px; }
.um-gbox.over { border-color: var(--brand); box-shadow: var(--riso-sh-o); }