:root{
  --ink:#263041; --muted:#6a7688; --faint:#93a0b1; --line:#d6dee7;
  --ground-a:#eef2f6; --ground-b:#e2e8f0; --panel:#ffffff;
  --steel:#4f7799; --sage:#6f8a76; --amber:#9a7b4a; --violet:#8f7fb0; --rose:#a35a82; --gold:#a68a3a;
  --track-c:#e9eef4;
  /* Textfarbe speziell fuer helle Tint-Chips/-Badges (z. B. .wl-stat-pill,
     .status-pill, .sb-link.active) - bewusst NICHT von dark.css
     ueberschrieben, damit der Text auf der weiterhin hellen Chip-Flaeche
     auch im Dunkel-Theme lesbar bleibt, waehrend --steel/--sage/etc. fuer
     Text auf der eigentlichen (dunklen) Seitenflaeche trotzdem aufgehellt
     werden koennen. Im Hell-Theme identisch zu den Basisfarben oben. */
  --badge-ink:#263041; --badge-steel:#4f7799; --badge-sage:#6f8a76;
  --badge-amber:#9a7b4a; --badge-violet:#8f7fb0; --badge-gold:#a68a3a;
  --cover-a:#1a2431; --cover-b:#243244; --holo:#7fb6c8; --holo-2:#c7a67d;
  --shadow:0 10px 30px rgba(31,41,58,.10);
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif;
  --sb-w:220px; --sb-w-collapsed:64px;
}
*{box-sizing:border-box;}
html,body{margin:0; height:100%;}
body{font-family:var(--sans); color:var(--ink);
  min-height:100vh; -webkit-font-smoothing:antialiased; position:relative;}
body::before{
  content:""; position:fixed; inset:0; z-index:-1;
  background:linear-gradient(155deg,var(--ground-a),var(--ground-b));
}

/* ---- Scrollleisten - folgen den Theme-Variablen oben, damit sie im
   Dunkel-Theme automatisch mitwechseln statt fest hell zu bleiben. Beide
   Standards abgedeckt: scrollbar-width/-color (Firefox) und die
   WebKit-Pseudo-Elemente (Chrome/Edge/Safari). ---- */
*{scrollbar-width:thin; scrollbar-color:var(--line) transparent;}
::-webkit-scrollbar{width:10px; height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background-color:var(--line); border-radius:999px;
  border:2px solid transparent; background-clip:padding-box;}
::-webkit-scrollbar-thumb:hover{background-color:var(--steel);}
::-webkit-scrollbar-corner{background:transparent;}

/* ---- app shell ---- */

.app-shell{display:flex; align-items:stretch; min-height:100vh;}

.main{flex:1; min-width:0; padding:34px 28px 64px;}
@media(max-width:720px){ .main{padding:24px 16px 48px;} }

/* ---- untere Menueleiste (Handy), siehe sidebar.js ---- */

.bn-root{display:none;}
@media(max-width:720px){
  .app-shell > .sidebar{display:none;}
  /* Notbremse: ein zu breites Element darf die Seite nicht seitlich aufweiten -
     sonst wandert die untere Menueleiste aus dem sichtbaren Bereich. */
  body{overflow-x:clip;}
  .main{padding-bottom:calc(88px + env(safe-area-inset-bottom));}
  .bn-root{display:block;}
  body.bn-open{overflow:hidden;}

  .bn-bar{position:fixed; left:0; right:0; bottom:0; z-index:40; display:flex; background:var(--panel);
    border-top:1px solid var(--line); box-shadow:0 -4px 16px rgba(20,26,36,.08);
    padding-bottom:env(safe-area-inset-bottom);}
  .bn-bar .bn-item{flex:1 1 0; min-width:0; min-height:58px; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:4px; padding:7px 2px 6px; color:var(--muted); text-decoration:none;
    font-family:var(--sans); font-size:10.5px; font-weight:580; line-height:1.1; white-space:nowrap;
    background:none; border:none; border-radius:0; cursor:pointer;}
  .bn-bar .bn-item svg{width:22px; height:22px; display:block; flex:none;}
  .bn-bar .bn-item.active{color:var(--badge-steel); box-shadow:inset 0 2px 0 var(--steel);}

  .bn-backdrop{position:fixed; inset:0; z-index:60; background:rgba(20,26,36,.5); opacity:0; pointer-events:none;
    transition:opacity .2s ease;}
  .bn-sheet{position:fixed; left:0; right:0; bottom:0; z-index:61; max-height:85vh; overflow-y:auto;
    background:var(--panel); border-radius:18px 18px 0 0; box-shadow:0 -10px 40px rgba(20,26,36,.25);
    padding:14px 14px calc(18px + env(safe-area-inset-bottom)); transform:translateY(105%); visibility:hidden;
    transition:transform .22s ease, visibility 0s linear .22s;}
  .bn-root.open .bn-backdrop{opacity:1; pointer-events:auto;}
  .bn-root.open .bn-sheet{transform:none; visibility:visible; transition:transform .22s ease;}

  .bn-sheet-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:4px;}
  .bn-sheet-title{font-family:var(--mono); font-size:12px; letter-spacing:1.4px; text-transform:uppercase;
    color:var(--steel); font-weight:600;}
  .bn-sheet .bn-close{width:34px; height:34px; display:grid; place-items:center; padding:0; color:var(--muted);
    border-radius:9px; background:var(--panel);}
  .bn-close svg{width:16px; height:16px; display:block;}
  .bn-group-label{font-family:var(--mono); font-size:10px; letter-spacing:.8px; text-transform:uppercase;
    color:var(--faint); padding:14px 2px 6px;}
  .bn-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
  .bn-link{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:68px;
    padding:10px 4px; border:1px solid var(--line); border-radius:12px; color:var(--muted); text-decoration:none;
    font-size:11.5px; font-weight:580; text-align:center; line-height:1.2; overflow-wrap:anywhere;}
  .bn-link svg{width:22px; height:22px; display:block; flex:none;}
  .bn-link.active{background:#eaf1f6; color:var(--badge-steel); border-color:var(--steel);}
  .bn-root:not(.bn-authed) .bn-auth-only{display:none;}
  .bn-root.bn-guest .bn-link:not(.bn-school-item){display:none;}
  .bn-root.bn-guest .bn-group-label:not(.bn-school-label){display:none;}

  .bn-sheet-foot{display:flex; align-items:center; gap:10px; margin-top:16px; padding-top:14px;
    border-top:1px solid var(--line);}
  .bn-timer{flex:1; min-width:0; display:flex; align-items:center; gap:8px; font-size:13px;}
  .bn-timer-name{flex:1; min-width:0; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .bn-timer-clock{font-family:var(--mono); font-size:13px; font-weight:600; flex:none;}
  .bn-sheet .bn-logout{flex:none; font-size:12.5px; color:var(--muted); background:none; padding:8px 14px;
    border:1px solid var(--line); border-radius:8px;}
}

/* ---- sidebar ---- */

.sidebar{flex:none; width:var(--sb-w); background:var(--panel); border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:18px; padding:18px 14px;
  position:sticky; top:0; height:100vh; overflow-y:auto; transition:width .2s ease;}
.sidebar.collapsed{width:var(--sb-w-collapsed); padding:18px 10px;}

.sb-top{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.sidebar.collapsed .sb-top{flex-direction:column;}

.sb-brand{display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:12px;
  letter-spacing:1.4px; text-transform:uppercase; color:var(--steel); font-weight:600;
  white-space:nowrap; overflow:hidden; min-width:0;}
.sb-brand .dot{width:8px; height:8px; border-radius:50%; background:var(--steel); flex:none;}
.sidebar.collapsed .sb-brand .sb-label{display:none;}

.sb-top-actions{display:flex; gap:6px; flex:none;}
.sidebar.collapsed .sb-top-actions{flex-direction:column;}

.sb-toggle{flex:none; width:28px; height:28px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--muted); cursor:pointer;}
.sb-toggle:hover{border-color:#b6c1cd; color:var(--ink);}
.sb-toggle.on{border-color:var(--steel); color:var(--steel);}
.sb-toggle svg{width:13px; height:13px; display:block; transition:transform .2s;}
.sidebar.collapsed #sbToggle svg{transform:rotate(180deg);}

.sb-nav{display:flex; flex-direction:column; gap:3px;}
.sb-link{display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:9px;
  color:var(--muted); text-decoration:none; font-size:13.5px; font-weight:560;
  white-space:nowrap; overflow:hidden;}
.sb-link:hover{background:var(--track-c); color:var(--ink);}
.sb-link.active{background:#eaf1f6; color:var(--badge-steel);}
.sb-link .sb-icon{width:18px; height:18px; flex:none; display:grid; place-items:center;}
.sb-link .sb-icon svg{width:18px; height:18px; display:block;}
.sidebar.collapsed .sb-link{justify-content:center; padding:9px;}
.sidebar.collapsed .sb-link .sb-label{display:none;}

.sb-group-label{font-family:var(--mono); font-size:10px; letter-spacing:.8px; text-transform:uppercase;
  color:var(--faint); padding:16px 10px 5px;}
.sb-group-label:first-child{padding-top:2px;}
.sidebar.collapsed .sb-group-label{display:none;}

/* Ohne Login (Gast-Zugriff auf Rezepte/Essensplan im Heimnetz, siehe
   sidebar.js#setAuthenticated) bleiben nur deren Links sichtbar. */
.sidebar:not(.sb-authed) .sb-auth-only{display:none;}

/* Zeitlich begrenzter Gastzugang auf "Schule" (Admin-Bereich, Tab "Gäste") -
   unabhaengig vom obigen Heimnetz-Gast-Mechanismus: blendet ausnahmslos
   alles bis auf die drei Schule-Links aus. */
.sidebar.sb-schoolguest .sb-link:not(.sb-school-item){display:none;}
.sidebar.sb-schoolguest .sb-group-label:not(.sb-school-label){display:none;}

.sb-spacer{flex:1;}

.sb-timer{border-top:1px solid var(--line); padding-top:14px; display:flex; flex-direction:column; gap:6px;}
.sidebar.collapsed .sb-timer{align-items:center;}
.sb-timer-row{display:flex; align-items:center; gap:8px;}
.sb-pulse{width:9px; height:9px; border-radius:50%; background:#c3ccd6; flex:none;}
.sb-pulse.on{background:var(--steel); animation:sbpulse 1.6s infinite;}
@keyframes sbpulse{
  0%{box-shadow:0 0 0 0 rgba(79,119,153,.45);}
  70%{box-shadow:0 0 0 8px rgba(79,119,153,0);}
  100%{box-shadow:0 0 0 0 rgba(79,119,153,0);}
}
.sb-timer-lbl{font-family:var(--mono); font-size:10px; letter-spacing:.6px; text-transform:uppercase; color:var(--faint);}
.sb-timer-name{font-size:13px; font-weight:600; color:var(--ink); max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sb-timer-clock{font-family:var(--mono); font-size:14px; font-weight:600; color:var(--ink);}
.sidebar.collapsed .sb-timer-lbl, .sidebar.collapsed .sb-timer-name, .sidebar.collapsed .sb-timer-clock{display:none;}

.sb-logout{margin-top:2px; font-family:var(--sans); font-size:12.5px; color:var(--muted);
  background:none; border:1px solid var(--line); border-radius:8px; padding:7px 10px;
  cursor:pointer; text-align:left;}
.sb-logout:hover{border-color:#b6c1cd; color:var(--ink);}
.sidebar.collapsed .sb-logout{text-align:center; padding:7px;}
.sidebar.collapsed .sb-logout .sb-label{display:none;}

.sb-version{margin-top:8px; font-family:var(--mono); font-size:10px; color:var(--faint);
  text-align:center; letter-spacing:.3px; cursor:default;}

@media(prefers-reduced-motion:reduce){ .sb-pulse.on{animation:none;} }

/* ---- shared content primitives ---- */

.wrap{max-width:1000px; margin:0 auto; transition:max-width .2s ease;}
/* Seitenbreite umschalten (sidebar.js#sbWideToggle) - gilt fuer .wrap auf
   praktisch jeder Seite, daher hier zentral statt pro Seite. */
body.wide-mode .wrap{max-width:none;}

.eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--steel); margin:0 0 8px; display:flex; align-items:center; gap:8px;}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--steel);}
h1{font-size:27px; font-weight:660; letter-spacing:-.4px; margin:0 0 6px;}
.lede{font-size:14px; color:var(--muted); margin:0; max-width:66ch; line-height:1.5;}

/* ---- Wetterleiste (Home) ---- */
.weather-bar{background:var(--panel); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow); padding:16px 22px; margin:0 0 22px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;}
.weather-date{font-size:15px; font-weight:600; color:var(--ink); letter-spacing:-.1px;}
.weather-main{display:flex; align-items:center; gap:10px; flex:none;}
.weather-icon{font-size:26px; line-height:1;}
.weather-temp{font-size:26px; font-weight:700; letter-spacing:-.5px; color:var(--ink);}
.weather-details{display:flex; align-items:center; gap:16px; font-family:var(--mono);
  font-size:11px; color:var(--muted); letter-spacing:.3px; flex-wrap:wrap;}
.weather-detail b{color:var(--ink); font-weight:700;}
@media(max-width:640px){
  .weather-bar{flex-direction:column; align-items:flex-start; gap:12px;}
}

.status{background:var(--panel); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); padding:14px 18px; display:flex; align-items:center;
  justify-content:space-between; gap:18px; flex-wrap:wrap; margin:22px 0 6px;}
.status-mini{justify-content:flex-end;}
.lbl{font-size:10.5px; font-family:var(--mono); letter-spacing:.6px; text-transform:uppercase; color:var(--faint);}
.clock{font-family:var(--mono); font-size:15px; font-weight:600; letter-spacing:.5px;}
.total{text-align:right;}

.sec-title{font-family:var(--mono); font-size:12px; letter-spacing:1px; text-transform:uppercase;
  color:var(--ink); margin:34px 2px 4px; display:flex; align-items:center; gap:10px; font-weight:600;}
.sec-title::after{content:""; flex:1; height:1px; background:var(--line);}
.sec-sub{font-size:12.5px; color:var(--muted); margin:0 2px 16px;}

.bar{height:6px; background:var(--track-c); border-radius:4px; overflow:hidden;}
.fill{height:100%; width:0; background:var(--acc); border-radius:4px; transition:width .45s ease;}

.empty-hint{font-size:12.5px; color:var(--faint); padding:18px; text-align:center;
  border:1px dashed var(--line); border-radius:14px;}

/* ---- stat cards (auswertung) ---- */

.stats-row{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:22px 0 6px;}
@media(max-width:720px){ .stats-row{grid-template-columns:1fr;} }
.stat-card{background:var(--panel); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); padding:14px 18px;}
.stat-card .clock{font-size:20px; display:block; margin-top:2px;}

/* ---- rank list (auswertung) ---- */

.rank-list{background:var(--panel); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow); padding:4px 18px;}
.rank-row{display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--line);}
.rank-row:last-child{border-bottom:none;}
.rank-pos{font-family:var(--mono); font-size:12px; color:var(--faint); width:18px; flex:none; text-align:right;}
.rank-main{flex:1; min-width:0;}
.rank-top{display:flex; align-items:baseline; gap:8px; margin-bottom:6px; flex-wrap:wrap;}
.rank-name{font-size:14px; font-weight:640; color:var(--ink);}
.rank-section{font-family:var(--mono); font-size:10px; letter-spacing:.5px; text-transform:uppercase; color:var(--faint);}
.rank-time{margin-left:auto; font-family:var(--mono); font-size:12.5px; font-weight:600; color:var(--ink); white-space:nowrap;}
.activity-when{font-family:var(--mono); font-size:11px; color:var(--muted);}
.rank-name.deleted{color:var(--faint); font-style:italic;}

/* ---- form fields (entry/recipe modals) ---- */

.field{margin-bottom:13px;}
.field label{display:block; font-size:12px; color:var(--muted); margin-bottom:5px;}
.field input[type="text"], .field input[type="number"], .field input[type="password"], .field textarea, .field select{
  width:100%; font-family:var(--sans); font-size:14px; padding:8px 10px;
  border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--ink);}
.field textarea{font-family:var(--mono); font-size:12px; min-height:70px; resize:vertical;}
.field .hint{font-size:11px; color:var(--faint); margin-top:4px;}
.field-row{display:flex; gap:12px;}
.field-row .field{flex:1;}
.field.checkbox{display:flex; align-items:center; gap:8px;}
.field.checkbox label{margin:0; font-size:13px; color:var(--ink);}

/* ---- buttons (base + shared variants) ---- */

button{font-family:var(--sans); cursor:pointer; border:1px solid var(--line);
  background:var(--panel); color:var(--ink); border-radius:8px; transition:.15s;}
button:hover{border-color:#b6c1cd;}
button:focus-visible{outline:2px solid var(--steel); outline-offset:2px;}

.add-entry{font-family:var(--mono); font-size:10.5px; letter-spacing:.4px; text-transform:none;
  padding:3px 10px; color:var(--steel); border-color:var(--steel); font-weight:600;}
.add-entry:hover{background:var(--steel); color:#fff;}

.edit,.del{width:28px; height:28px; display:grid; place-items:center; color:var(--faint); font-size:13px;}
.del:hover{border-color:#c0776d; color:#a3453d;}

/* ---- modal / confirm dialog ---- */

.modal-overlay{position:fixed; inset:0; background:rgba(20,26,36,.55);
  display:none; align-items:center; justify-content:center; padding:20px; z-index:50;}
.modal-overlay.show{display:flex;}
.modal{background:var(--panel); border-radius:16px; box-shadow:var(--shadow);
  width:100%; max-width:480px; max-height:88vh; overflow-y:auto; padding:22px 24px;}
.modal h3{margin:0 0 16px; font-size:17px; font-weight:660;}
.modal-err{color:#a3453d; font-size:12.5px; min-height:1em; margin-bottom:6px;}
.modal-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:8px;}
.modal-actions button{padding:9px 16px; font-size:13px;}
.modal-actions .primary{background:var(--steel); border-color:var(--steel); color:#fff; font-weight:600;}
.modal-actions .danger{background:#a3453d; border-color:#a3453d; color:#fff; font-weight:600;}

/* ---- segmented tabs ---- */

.period-tabs{display:inline-flex; flex-wrap:wrap; gap:4px; background:var(--track-c); padding:4px;
  border-radius:10px; margin-top:18px;}
.period-tab{font-family:var(--sans); font-size:12.5px; font-weight:600; padding:7px 14px;
  border:none; border-radius:7px; background:transparent; color:var(--muted); cursor:pointer;}
.period-tab:hover{color:var(--ink);}
.period-tab.active{background:var(--panel); color:var(--steel); box-shadow:0 1px 3px rgba(31,41,58,.12);}

/* ==========================================================
   Aus den einzelnen Seiten hierher konsolidiert (siehe je
   Abschnitt unten) - identische oder nur kosmetisch
   abweichende Klassen, die auf mehreren Seiten vorkamen.
   ========================================================== */

.bm-category-badge{font-family:var(--mono); font-size:9.5px; letter-spacing:.5px; text-transform:uppercase;
    padding:2px 7px; border-radius:6px; flex:none; color:#fff;}
.bm-category-badge.bookmarks{background:rgba(79,119,153,.88);}
.bm-category-badge.toread{background:rgba(154,123,74,.88);}
.bm-icon{width:34px; height:34px; border-radius:9px; background:var(--track-c); flex:none;
    display:grid; place-items:center; color:var(--steel); margin-top:1px;}
.bm-icon img{width:18px; height:18px; object-fit:contain; border-radius:3px;}
.bm-icon svg{width:16px; height:16px;}
.bm-main{flex:1; min-width:0;}
.bm-tag-chip{font-family:var(--mono); font-size:10px; color:#fff; background:rgba(111,138,118,.88);
    padding:2px 7px; border-radius:999px;}
.bm-tags{display:flex; flex-wrap:wrap; gap:4px; margin-top:6px;}
.bm-title:hover{color:var(--steel); text-decoration:underline;}
.bm-top-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.bm-url{font-family:var(--mono); font-size:11px; color:var(--faint); display:block; margin-top:2px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;}
.book-progress-row span{font-size:12.5px; color:var(--muted);}
.book-stat-pill{display:inline-flex; align-items:center; gap:6px; background:var(--track-c); color:var(--ink);
    font-size:12px; font-weight:600; padding:5px 11px; border-radius:999px; white-space:nowrap;}
.book-view-infobar{display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 2px;}
.book-view-layout{display:flex; gap:18px; align-items:flex-start;}
.book-view-main{flex:1; min-width:0;}
.book-view-overview{margin-top:16px; font-size:13.5px; line-height:1.6; color:var(--ink); white-space:pre-wrap;}
.book-view-poster{width:150px; flex:none; border-radius:10px; overflow:hidden;
    background:linear-gradient(150deg,var(--cover-a),var(--cover-b));}
.book-view-poster img{width:100%; aspect-ratio:2/3; object-fit:cover; display:block;}
.book-view-poster.placeholder{aspect-ratio:2/3; display:flex; align-items:center; justify-content:center;}
.book-view-poster.placeholder svg{width:40px; height:40px; color:var(--holo); opacity:.7;}
.comment-form{display:flex; gap:8px; align-items:flex-start;}
.comment-form textarea{flex:1; font-family:var(--sans); font-size:13px; padding:8px 10px;
    border:1px solid var(--line); border-radius:8px; resize:vertical; min-height:40px;}
.comment-item{background:var(--track-c); border-radius:10px; padding:10px 12px;
    display:flex; justify-content:space-between; gap:10px; align-items:flex-start;}
.comment-item .comment-date{font-family:var(--mono); font-size:10px; color:var(--faint); margin-top:4px; display:block;}
.comment-item .comment-text{font-size:13px; color:var(--ink); white-space:pre-wrap; margin:0;}
.comment-item button{width:24px; height:24px; flex:none; display:grid; place-items:center;
    color:var(--faint); font-size:12px; border:none; background:none;}
.comment-item button:hover{color:#a3453d;}
.comment-list{display:flex; flex-direction:column; gap:10px; margin-bottom:12px;}
.comp-picker .comp-group-label{font-family:var(--mono); font-size:10.5px; text-transform:uppercase;
    letter-spacing:.5px; color:var(--steel); margin:12px 0 6px;}
.comp-picker .comp-group-label:first-child{margin-top:0;}
.comp-row{display:flex; align-items:flex-start; gap:8px; padding:4px 0; font-size:12.5px; color:var(--ink); cursor:pointer;}
.comp-row .comp-code{font-family:var(--mono); font-weight:700; color:var(--steel); flex:none;}
.comp-row .comp-text{overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.comp-row input{margin-top:3px; flex:none;}
.game-progress-bar-view{width:100%; height:8px; border-radius:999px; background:var(--track-c); margin-top:10px; overflow:hidden;}
.game-progress-bar-view .fill{height:100%; background:var(--steel); border-radius:999px;}
.game-progress-row{display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap;}
.game-progress-row input[type="number"]{width:76px; font-family:var(--sans); font-size:13px; padding:6px 8px;
    border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--ink);}
.game-progress-row label{margin:0; font-size:12px; color:var(--muted);}
.game-progress-row span{font-size:12.5px; color:var(--muted);}
.game-stat-pill{display:inline-flex; align-items:center; gap:6px; background:var(--track-c); color:var(--ink);
    font-size:12px; font-weight:600; padding:5px 11px; border-radius:999px; white-space:nowrap;}
.game-view-infobar{display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 2px;}
.game-view-layout{display:flex; gap:18px; align-items:flex-start;}
.game-view-main{flex:1; min-width:0;}
.game-view-overview{margin-top:16px; font-size:13.5px; line-height:1.6; color:var(--ink); white-space:pre-wrap;}
.game-view-poster{width:150px; flex:none; border-radius:10px; overflow:hidden;
    background:linear-gradient(150deg,var(--cover-a),var(--cover-b));}
.game-view-poster img{width:100%; aspect-ratio:2/3; object-fit:cover; display:block;}
.game-view-poster.placeholder{aspect-ratio:2/3; display:flex; align-items:center; justify-content:center;}
.game-view-poster.placeholder svg{width:40px; height:40px; color:var(--holo); opacity:.7;}
.hint{font-size:11px; color:var(--faint); margin-top:4px;}
.inline-add-err{color:#a3453d; font-size:11.5px; min-height:1em; margin-top:4px;}
.movie-stat-pill{display:inline-flex; align-items:center; gap:6px; background:var(--track-c); color:var(--ink);
    font-size:12px; font-weight:600; padding:5px 11px; border-radius:999px; white-space:nowrap;}
.movie-stat-pill.imdb{background:#fbeed0; color:#8a6a1f;}
.movie-view-infobar{display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 2px;}
.movie-view-layout{display:flex; gap:18px; align-items:flex-start;}
.movie-view-main{flex:1; min-width:0;}
.movie-view-overview{margin-top:16px; font-size:13.5px; line-height:1.6; color:var(--ink); white-space:pre-wrap;}
.movie-view-poster{width:150px; flex:none; border-radius:10px; overflow:hidden;
    background:linear-gradient(150deg,var(--cover-a),var(--cover-b));}
.movie-view-poster img{width:100%; aspect-ratio:2/3; object-fit:cover; display:block;}
.movie-view-poster.placeholder{aspect-ratio:2/3; display:flex; align-items:center; justify-content:center;}
.movie-view-poster.placeholder svg{width:40px; height:40px; color:var(--holo); opacity:.7;}
.omdb-result-poster{width:30px; height:44px; flex:none; border-radius:4px; object-fit:cover; background:var(--panel);}
.omdb-result-row{display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:8px; cursor:pointer;
    background:var(--track-c); border:none; text-align:left; width:100%; font-family:var(--sans);}
.omdb-result-row:hover{background:#e2eaf1;}
.omdb-result-title{font-size:12.5px; color:var(--ink); font-weight:600;}
.omdb-result-year{font-size:11px; color:var(--muted); font-family:var(--mono);}
.omdb-results{display:flex; flex-direction:column; gap:4px; max-height:220px; overflow-y:auto; margin-top:8px;}
.radio-row label{display:flex; align-items:center; gap:5px; font-size:13px; color:var(--ink); cursor:pointer;}
.rawg-result-cover{width:34px; height:34px; flex:none; border-radius:6px; object-fit:cover; background:var(--panel);}
.rawg-result-date{font-size:11px; color:var(--muted); font-family:var(--mono);}
.rawg-result-row:hover{background:#e2eaf1;}
.rawg-result-title{font-size:12.5px; color:var(--ink); font-weight:600;}
.rawg-results{display:flex; flex-direction:column; gap:4px; max-height:220px; overflow-y:auto; margin-top:8px;}
.series-progress-row{display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap;}
.series-progress-row label{margin:0; font-size:12px; color:var(--muted);}
.series-progress-row span{font-size:12.5px; color:var(--muted);}
.series-stat-pill{display:inline-flex; align-items:center; gap:6px; background:var(--track-c); color:var(--ink);
    font-size:12px; font-weight:600; padding:5px 11px; border-radius:999px; white-space:nowrap;}
.series-stat-pill.imdb{background:#fbeed0; color:#8a6a1f;}
.series-view-infobar{display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 2px;}
.series-view-layout{display:flex; gap:18px; align-items:flex-start;}
.series-view-main{flex:1; min-width:0;}
.series-view-overview{margin-top:16px; font-size:13.5px; line-height:1.6; color:var(--ink); white-space:pre-wrap;}
.series-view-poster{width:150px; flex:none; border-radius:10px; overflow:hidden;
    background:linear-gradient(150deg,var(--cover-a),var(--cover-b));}
.series-view-poster img{width:100%; aspect-ratio:2/3; object-fit:cover; display:block;}
.series-view-poster.placeholder{aspect-ratio:2/3; display:flex; align-items:center; justify-content:center;}
.series-view-poster.placeholder svg{width:40px; height:40px; color:var(--holo); opacity:.7;}
.star-picker .star{cursor:pointer; font-size:22px; line-height:1; color:var(--line);}
.star-picker .star.filled{color:#d99a2b;}
.star-picker .star:hover{color:#d99a2b;}
.star-row .star{font-size:12px; line-height:1; color:var(--line);}
.star-row .star.filled{color:#d99a2b;}
.todo-box{background:var(--panel); border:1px solid var(--line); border-radius:16px;
    box-shadow:var(--shadow); padding:4px 18px;}
.todo-check{width:20px; height:20px; border-radius:50%; border:2px solid var(--line); flex:none;
    background:none; cursor:pointer; padding:0;}
.todo-check:hover{border-color:var(--steel);}
.todo-content{flex:1; font-size:14px; color:var(--ink); min-width:0; overflow-wrap:anywhere;}
.todo-due{font-family:var(--mono); font-size:11px; color:var(--faint); white-space:nowrap; flex:none;}
.todo-due.overdue{color:#a3453d; font-weight:600;}
.todo-priority{width:6px; height:6px; border-radius:50%; flex:none; background:transparent;}
.todo-priority.p1{background:#c0392b;}
.todo-priority.p2{background:#d68a1c;}
.todo-priority.p3{background:var(--steel);}
.todo-row{display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line);
    transition:opacity .25s;}
.todo-row.done{opacity:.35;}
.todo-row:last-child{border-bottom:none;}
.track-add{font-size:11px; padding:0 9px; height:28px; color:var(--muted); font-family:var(--mono);}
.track-block{border-top:1px solid var(--line); margin-top:16px; padding-top:14px;}
.track-block h4{font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); margin:0 0 8px; font-weight:640;}
.track-pp{width:34px; height:34px; display:grid; place-items:center; border-color:var(--steel); color:var(--steel); flex:none;}
.track-pp svg{width:15px; height:15px; display:block;}
.track-pp.on{background:var(--steel); color:#fff;}
.track-pp:hover{background:var(--steel); color:#fff;}
.track-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.track-time{font-family:var(--mono); font-size:15px; font-weight:600; color:var(--ink); min-width:56px;}
.week-nav{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:16px 0;}
.week-nav-btns{display:flex; align-items:center; gap:10px; flex-wrap:wrap; row-gap:8px;}
.week-nav-btns button{padding:7px 12px;}

.book-progress-row{display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap;}
.book-progress-row input[type="number"]{width:80px; font-family:var(--sans); font-size:13px; padding:6px 8px;
    border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--ink);}
.radio-row{display:flex; gap:14px; margin-bottom:8px; flex-wrap:wrap;}
.rawg-result-row{display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:8px; cursor:pointer;
    background:var(--track-c); border:none; text-align:left; width:100%; font-family:var(--sans);}
.series-progress-row input[type="number"]{width:64px; font-family:var(--sans); font-size:13px; padding:6px 8px;
    border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--ink);}
.star-picker{display:inline-flex; gap:4px; margin:6px 0 4px;}
.star-row{display:inline-flex; gap:1px; margin-top:1px;}

.comp-empty{font-size:12px; color:var(--faint); padding:8px 0;}
.comp-picker{max-height:280px; overflow-y:auto; border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:var(--track-c);}
.inline-add-row{display:flex; gap:6px;}
.inline-add-row input{flex:1; font-family:var(--sans); font-size:14px; padding:8px 10px;
    border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--ink);}

/* ---- Seitenspezifische Abweichungen von obigen Basiswerten ---- */

/* rezepte.html */
body.page-rezepte .inline-add-row{display:flex; gap:6px; margin-top:8px;}
body.page-rezepte .inline-add-row input{flex:1; font-family:var(--sans); font-size:13px; padding:7px 9px;
    border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--ink);}

/* unterrichtsstunden.html */
body.page-unterrichtsstunden .comp-picker{max-height:220px; overflow-y:auto; border:1px solid var(--line); border-radius:10px;
    padding:10px 12px; background:var(--track-c);}
body.page-unterrichtsstunden .comp-empty{font-size:12px; color:var(--faint); padding:4px 0;}

/* ==========================================================
   Seiteneigenes CSS (nur auf der jeweiligen Seite relevant)
   ========================================================== */

/* ---- admin.html ---- */
  .stats-row{display:grid; grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:14px; margin:14px 0 6px;}

  .admin-panel{display:none;}
  .admin-panel.active{display:block;}

  .danger-zone{background:#fdf2f1; border:1px solid #e8b4ae; border-radius:14px; padding:18px 20px;
    display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;}
  .danger-zone-text > strong{display:block; font-size:14px; color:#7a2d26; margin-bottom:4px;}
  .danger-zone-text p{margin:0; font-size:12.5px; color:#93453c; max-width:60ch; line-height:1.5;}
  .btn-danger{background:#c0392b; border:1px solid #c0392b; color:#fff; font-weight:600; font-size:13px;
    padding:10px 18px; border-radius:9px; flex:none; white-space:nowrap;}
  .btn-danger:hover{background:#a33122; border-color:#a33122;}

  .raw-view{background:var(--panel); border:1px solid var(--line); border-radius:14px;
    box-shadow:var(--shadow); padding:16px 18px; font-family:var(--mono); font-size:11.5px;
    line-height:1.6; color:var(--ink); max-height:480px; overflow:auto;
    white-space:pre-wrap; word-break:break-word; margin-top:14px;}

  .cat-tag-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px;}
  @media(max-width:720px){ .cat-tag-grid{grid-template-columns:1fr;} }
  .chip-list{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 12px; min-height:26px;}
  .chip{display:inline-flex; align-items:center; gap:6px; background:var(--track-c); border-radius:999px;
    padding:4px 6px 4px 12px; font-size:12.5px; color:var(--ink);}
  .chip button{width:18px; height:18px; border:none; background:none; display:grid; place-items:center;
    color:var(--faint); font-size:11px; border-radius:50%; padding:0;}
  .chip button:hover{color:#a3453d; background:rgba(163,69,61,.12);}
  .add-row{display:flex; gap:6px; flex-wrap:wrap;}
  .add-row input{flex:1; min-width:120px; font-family:var(--sans); font-size:13px; padding:7px 9px;
    border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--ink);}
  .add-row select{font-family:var(--sans); font-size:13px; padding:7px 9px;
    border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--ink);}
  .cat-tag-err{color:#a3453d; font-size:12px; min-height:1em; margin-top:6px;}

  .chip-dot{width:8px; height:8px; border-radius:50%; flex:none;}
  .chip-dot.steel{background:var(--steel);}
  .chip-dot.sage{background:var(--sage);}
  .chip-dot.amber{background:var(--amber);}
  .chip-dot.violet{background:var(--violet);}

  .mantras-card{background:var(--panel); border:1px solid var(--line); border-radius:16px;
    box-shadow:var(--shadow); padding:16px 18px; min-height:100px; margin-bottom:22px;}
  .mantras-text{margin:0; font-size:14px; line-height:1.65; color:var(--ink); white-space:pre-wrap;
    word-break:break-word;}
  .mantras-text.empty{color:var(--faint); font-style:italic;}
  .mantras-textarea{width:100%; min-height:160px; font-family:inherit; font-size:14px; line-height:1.6;
    padding:10px 12px; border:1px solid var(--line); border-radius:10px; resize:vertical; color:var(--ink);
    background:var(--bg); box-sizing:border-box;}
  .mantras-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:10px;}
  .mantras-actions button{padding:9px 16px; font-size:13px;}
  .mantras-actions .primary{background:var(--steel); border-color:var(--steel); color:#fff; font-weight:600;}

  .todoist-status{display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--ink); margin-bottom:14px;}
  .todoist-dot{width:9px; height:9px; border-radius:50%; background:#c3ccd6; flex:none;}
  .todoist-dot.on{background:#5a9e6f;}
  .todoist-form{max-width:420px;}
  .todoist-form .field{margin-bottom:10px;}
  .todoist-actions{display:flex; gap:8px; align-items:center; margin-top:4px;}

  .guest-list{background:var(--panel); border:1px solid var(--line); border-radius:16px;
    box-shadow:var(--shadow); padding:4px 18px;}
  .guest-row{display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line);}
  .guest-row:last-child{border-bottom:none;}
  .guest-dot{width:9px; height:9px; border-radius:50%; background:#c3ccd6; flex:none;}
  .guest-dot.active{background:#5a9e6f;}
  .guest-dot.revoked{background:#c0392b;}
  .guest-main{flex:1; min-width:0;}
  .guest-label{font-size:14px; font-weight:640; color:var(--ink);}
  .guest-meta{font-family:var(--mono); font-size:11px; color:var(--faint); margin-top:2px;}
  .guest-actions{display:flex; gap:6px; flex:none;}
  .guest-actions button{font-size:12px; padding:6px 10px;}

  .backup-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:6px;}
  .backup-list{margin-top:14px; display:flex; flex-direction:column; gap:8px;}
  .backup-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px;
    background:var(--track-c); border-radius:9px; font-size:12.5px;}
  .backup-row .meta{color:var(--muted); display:block; margin-top:2px;}
  .backup-row .actions{display:flex; gap:6px; flex:none;}
  .backup-row button{font-size:12px; padding:5px 10px;}
  .restart-overlay p{font-size:13px; color:var(--muted); line-height:1.6; margin:0 0 14px;}
  .restart-overlay code{background:var(--track-c); padding:2px 6px; border-radius:5px; font-family:var(--mono); font-size:12px;}

/* ---- auswertung.html ---- */
  .period-range{font-size:12.5px; color:var(--muted); margin:8px 2px 0;}

/* ---- bookmarks.html ---- */
  .bm-controls{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin:18px 0 12px;}
  .bm-sort{display:flex; align-items:center; gap:8px;}
  .bm-sort label{font-size:12px; color:var(--muted); white-space:nowrap;}
  .bm-sort select{font-family:var(--sans); font-size:13px; padding:7px 9px; border:1px solid var(--line);
    border-radius:8px; background:var(--panel); color:var(--ink);}

  .bm-tagfilter{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px;}
  .bm-tag-filter-chip{font-family:var(--mono); font-size:11px; padding:5px 11px; border-radius:999px;
    background:var(--track-c); color:var(--muted); border:1px solid transparent;}
  .bm-tag-filter-chip:hover{color:var(--ink);}
  .bm-tag-filter-chip.active{background:var(--steel); color:#fff;}

  .bookmark-list{background:var(--panel); border:1px solid var(--line); border-radius:16px;
    box-shadow:var(--shadow); padding:4px 18px;}
  .bookmark-row{display:flex; align-items:flex-start; gap:12px; padding:14px 0; border-bottom:1px solid var(--line);}
  .bookmark-row:last-child{border-bottom:none;}

  .bm-move{display:flex; flex-direction:column; gap:2px; flex:none; padding-top:2px;}
  .bm-move button{width:22px; height:18px; padding:0; display:grid; place-items:center; font-size:9px;
    color:var(--faint); border-radius:5px;}
  .bm-move button:hover:not(:disabled){color:var(--ink); border-color:#b6c1cd;}
  .bm-move button:disabled{opacity:.3; cursor:default;}

      .bm-title{font-size:14px; font-weight:640; color:var(--ink); text-decoration:none;}

  .bm-actions{display:flex; gap:6px; flex:none; padding-top:1px;}

  .tag-input-row{display:flex; flex-wrap:wrap; gap:6px; padding:7px 9px; border:1px solid var(--line);
    border-radius:8px; background:var(--panel);}
  .tag-input-chip{display:inline-flex; align-items:center; gap:5px; background:var(--track-c);
    border-radius:999px; padding:3px 4px 3px 10px; font-size:12.5px; color:var(--ink);}
  .tag-input-chip button{width:16px; height:16px; border:none; background:none; display:grid; place-items:center;
    color:var(--faint); font-size:10px; border-radius:50%; padding:0;}
  .tag-input-chip button:hover{color:#a3453d;}
  .tag-input-row input{flex:1; min-width:100px; border:none; outline:none; font-family:var(--sans); font-size:13px;}

/* ---- buecher.html ---- */

  .book-controls{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:14px 0;}
  .book-search{max-width:280px; flex:1; min-width:180px;}
  .book-search input[type="text"]{width:100%; font-family:var(--sans); font-size:13px; padding:8px 10px;
    border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--ink);}

  .book-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:16px; margin-top:14px;}

  .book-card{background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden;
    box-shadow:var(--shadow); transition:transform .2s,box-shadow .2s; display:flex; flex-direction:column; cursor:pointer;}
  .book-card:hover{transform:translateY(-3px); box-shadow:0 16px 36px rgba(31,41,58,.16);}

  .book-cover{position:relative; width:100%; aspect-ratio:2/3; overflow:hidden;
    background:linear-gradient(150deg,var(--cover-a),var(--cover-b));
    display:flex; align-items:center; justify-content:center;}
  .book-cover img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
  .book-cover svg{width:32px; height:32px; color:var(--holo); opacity:.7;}
  .book-status-chip{position:absolute; top:8px; right:8px; font-family:var(--mono); font-size:9.5px;
    letter-spacing:.3px; text-transform:uppercase; padding:3px 7px; border-radius:999px; color:#fff;}
  .book-status-chip[data-status="backlog"]{background:rgba(154,123,74,.88);}
  .book-status-chip[data-status="lesend"]{background:rgba(79,119,153,.88);}
  .book-status-chip[data-status="gelesen"]{background:rgba(111,138,118,.88);}

  .book-body{padding:10px 12px; display:flex; flex-direction:column; flex:1; gap:4px;}
  .book-title{font-size:13.5px; font-weight:640; line-height:1.3; color:var(--ink); margin:0;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    min-height:calc(1.3em * 2);}
  .book-meta-row{font-size:11px; color:var(--muted); font-family:var(--mono);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

  /* Sterne: .star-row ist die schreibgeschuetzte, kleine Anzeige auf der
     Kachel (nur wenn bewertet), .star-picker die klickbare Variante in der
     Detailansicht/im Formular - ein Klick auf den bereits aktiven Stern
     loescht die Bewertung wieder (gleiches Muster wie bei Filmen/Rezepten). */

  .book-progress-track{width:100%; height:5px; border-radius:999px; background:var(--track-c); margin-top:3px; overflow:hidden;}
  .book-progress-fill{height:100%; background:var(--steel); border-radius:999px;}
  .book-progress-label{font-size:10.5px; color:var(--muted); font-family:var(--mono); margin-top:2px;}

  .book-actions{display:flex; gap:6px; margin-top:auto; padding-top:6px;}
  .book-actions .spacer{flex:1;}

  .ol-results{display:flex; flex-direction:column; gap:4px; max-height:220px; overflow-y:auto; margin-top:8px;}
  .ol-result-row{display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:8px; cursor:pointer;
    background:var(--track-c); border:none; text-align:left; width:100%; font-family:var(--sans);}
  .ol-result-row:hover{background:#e2eaf1;}
  .ol-result-poster{width:30px; height:44px; flex:none; border-radius:4px; object-fit:cover; background:var(--panel);}
  .ol-result-title{font-size:12.5px; color:var(--ink); font-weight:600;}
  .ol-result-meta{font-size:11px; color:var(--muted); font-family:var(--mono);}

/* ---- einheiten.html ---- */
  .unit-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:18px; margin-top:18px;}

  .unit-card{background:var(--panel); border:1px solid var(--line); border-radius:16px; overflow:hidden;
    box-shadow:var(--shadow); transition:transform .2s,box-shadow .2s; display:flex; flex-direction:column; cursor:pointer;}
  .unit-card:hover{transform:translateY(-3px); box-shadow:0 16px 36px rgba(31,41,58,.16);}

  .unit-cover{position:relative; width:100%; aspect-ratio:4/3; overflow:hidden;
    background:linear-gradient(150deg,var(--cover-a),var(--cover-b));
    display:flex; align-items:center; justify-content:center;}
  .unit-cover img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
  .unit-cover svg{width:40px; height:40px; color:var(--holo); opacity:.7;}

  .unit-body{padding:14px 16px; display:flex; flex-direction:column; flex:1; gap:8px;}
  .unit-badgerow{display:flex; flex-wrap:wrap; gap:4px; align-items:center; min-height:20px;}
  .unit-fach-badge{font-family:var(--mono); font-size:10px; letter-spacing:.5px; text-transform:uppercase;
    padding:2px 8px; border-radius:6px; flex:none;}
  .unit-fach-badge[data-fach="Mathe"]{background:#e8f0f6; color:var(--badge-steel);}
  .unit-fach-badge[data-fach="Physik"]{background:#efeaf6; color:var(--badge-violet);}
  .unit-fach-badge[data-fach="NW+"]{background:#eaf1ea; color:var(--badge-sage);}
  .unit-klasse-badge{font-family:var(--mono); font-size:10px; color:var(--faint); background:var(--track-c);
    padding:2px 8px; border-radius:6px; flex:none;}

  .unit-title{font-size:15px; font-weight:640; line-height:1.3; color:var(--ink); margin:0;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    min-height:calc(1.3em * 2);}
  .unit-meta{display:flex; gap:12px; font-family:var(--mono); font-size:11px; color:var(--faint); flex-wrap:wrap;}
  .unit-meta span{display:inline-flex; align-items:center; gap:4px;}
  .unit-meta svg{width:12px; height:12px; flex:none;}

  .unit-actions{display:flex; gap:6px; margin-top:auto; padding-top:8px;}
  .unit-actions .spacer{flex:1;}

  /* ---- Kompetenz-Auswahl im Formular ---- */
        .comp-picker .comp-subgroup-label{font-family:var(--mono); font-size:10px; color:var(--muted); margin:6px 0 3px;}

  /* ---- Stundenreihenfolge ---- */
  .unit-lesson-summary{font-family:var(--mono); font-size:11px; font-weight:400; color:var(--faint); text-transform:none; letter-spacing:0;}
  .unit-lesson-list{display:flex; flex-direction:column; gap:6px; margin-bottom:8px;}
  .unit-lesson-row{display:flex; align-items:center; gap:8px; background:var(--track-c); border-radius:8px; padding:7px 10px;}
  .unit-lesson-row .ord-idx{font-family:var(--mono); font-size:11px; color:var(--faint); width:18px; flex:none;}
  .unit-lesson-row .ord-title{flex:1; font-size:13px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .unit-lesson-row a.ord-title{color:var(--ink); text-decoration:none;}
  .unit-lesson-row a.ord-title:hover{color:var(--steel); text-decoration:underline;}
  .unit-lesson-row button{width:24px; height:24px; flex:none; display:grid; place-items:center; font-size:11px; padding:0;}
  .unit-lesson-row .status-pill{font-family:var(--mono); font-size:9.5px; padding:2px 7px; border-radius:999px; flex:none;}
  .unit-lesson-row .status-pill[data-status="Idee"]{background:var(--panel); color:var(--muted);}
  .unit-lesson-row .status-pill[data-status="Geplant"]{background:#e8f0f6; color:var(--badge-steel);}
  .unit-lesson-row .status-pill[data-status="Erprobt"]{background:#eaf1ea; color:var(--badge-sage);}
  .unit-lesson-row .status-pill[data-status="Revision"]{background:#f5ece0; color:var(--badge-amber);}
  .lesson-picker{max-height:240px; overflow-y:auto; border:1px solid var(--line); border-radius:8px; margin-top:6px; display:none;}
  .lesson-picker.show{display:block;}
  .lesson-picker-search{width:100%; box-sizing:border-box; border:none; border-bottom:1px solid var(--line);
    padding:7px 10px; font-size:12.5px; font-family:inherit; outline:none; background:var(--panel); color:var(--ink);
    position:sticky; top:0;}
  .lesson-picker-row{padding:7px 10px; font-size:12.5px; cursor:pointer; border-bottom:1px dashed var(--line);}
  .lesson-picker-row:last-child{border-bottom:none;}
  .lesson-picker-row:hover{background:var(--track-c); color:var(--steel);}
  .unit-lessons-hint{font-size:11px; color:var(--faint); margin:2px 0 0;}
  .unit-classtest-chips{display:flex; flex-wrap:wrap; gap:6px;}
  .unit-classtest-chip{font-family:var(--mono); font-size:10.5px; color:var(--badge-gold); background:#faf3de;
    padding:3px 9px; border-radius:999px; text-decoration:none;}
  .unit-classtest-chip:hover{text-decoration:underline;}
  .unit-classtest-empty{font-size:12px; color:var(--faint);}

/* ---- essensplan.html ---- */
        .week-label{font-weight:640; font-size:14.5px; color:var(--ink); min-width:190px; text-align:center;}

  .week-grid-wrap{overflow-x:auto; padding-bottom:4px;}
  .week-grid{display:grid; grid-template-columns:76px repeat(7, minmax(112px,1fr)); gap:8px; min-width:800px;}
  .week-grid-head{font-family:var(--mono); font-size:11px; text-transform:uppercase; color:var(--faint);
    text-align:center; padding:4px 0; line-height:1.5;}
  .week-grid-head.today{color:var(--badge-steel); font-weight:700; background:#eaf1f6; border-radius:8px; padding:4px 2px;}
  .week-grid-rowlabel{font-family:var(--mono); font-size:11px; text-transform:uppercase; color:var(--faint);
    display:flex; align-items:center;}

  .meal-cell{background:var(--panel); border:1px solid var(--line); border-radius:12px; min-height:96px;
    display:flex; flex-direction:column; cursor:pointer; overflow:hidden; position:relative;}
  .meal-cell:hover{border-color:var(--steel);}
  .meal-cell.empty{align-items:center; justify-content:center; color:var(--faint); font-size:22px;
    border-style:dashed;}
  .meal-cell.today{border-color:var(--steel); box-shadow:0 0 0 1px var(--steel);}
  .meal-cell.today.empty{background:#eaf1f6;}
  .meal-cell-img{width:100%; aspect-ratio:16/10; object-fit:cover; display:block;}
  .meal-cell-img.placeholder{background:linear-gradient(150deg,var(--cover-a),var(--cover-b));
    display:flex; align-items:center; justify-content:center;}
  .meal-cell-img.placeholder svg{width:22px; height:22px; color:var(--holo); opacity:.7;}
  .meal-cell-title{font-size:11.5px; font-weight:600; color:var(--ink); padding:5px 7px; line-height:1.3;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
  .meal-cell-remove{position:absolute; top:4px; right:4px; width:20px; height:20px; border:none;
    border-radius:50%; background:rgba(255,255,255,.92); display:grid; place-items:center;
    font-size:10px; color:var(--faint); padding:0;}
  .meal-cell-remove:hover{color:#a3453d;}
  .meal-cell-open{position:absolute; top:4px; left:4px; width:20px; height:20px; border:none;
    border-radius:50%; background:rgba(255,255,255,.92); display:grid; place-items:center;
    font-size:11px; color:var(--faint); padding:0;}
  .meal-cell-open:hover{color:var(--steel);}
  .meal-cell-label .meal-cell-title{font-style:italic;}

  .week-list{display:none; flex-direction:column; gap:20px;}
  .week-day-head{font-family:var(--mono); font-size:11.5px; text-transform:uppercase; color:var(--faint);
    padding-bottom:6px; margin-bottom:8px; border-bottom:1px solid var(--line);}
  .week-day-head.today{color:var(--badge-steel); font-weight:700; background:#eaf1f6; border-radius:8px; padding:6px 10px; border-bottom-color:var(--steel);}
  .week-day-meals{display:flex; flex-direction:column; gap:8px;}
  .week-day-meal-label{font-family:var(--mono); font-size:10px; text-transform:uppercase; color:var(--faint);
    margin-bottom:4px;}

  @media(max-width:760px){
    .week-grid-wrap{display:none;}
    .week-list{display:flex;}
    .week-list .meal-cell{flex-direction:row; align-items:center; min-height:auto;}
    .week-list .meal-cell.empty{justify-content:flex-start; padding:0 14px; min-height:56px; font-size:18px;}
    .week-list .meal-cell-img{width:60px; height:60px; aspect-ratio:auto; flex:none;}
    .week-list .meal-cell-img.placeholder svg{width:20px; height:20px;}
    .week-list .meal-cell-title{flex:1; padding-right:28px;}
    .week-list .meal-cell-remove{top:50%; transform:translateY(-50%);}
  }

  .picker-list{max-height:320px; overflow-y:auto; display:flex; flex-direction:column; gap:3px; margin-bottom:14px;}
  .picker-row{display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:8px; cursor:pointer;
    font-size:13.5px; color:var(--ink);}
  .picker-row:hover{background:var(--track-c);}
  .picker-thumb{width:38px; height:38px; border-radius:7px; overflow:hidden; flex:none;
    background:linear-gradient(150deg,var(--cover-a),var(--cover-b)); display:flex; align-items:center; justify-content:center;}
  .picker-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
  .picker-thumb svg{width:16px; height:16px; color:var(--holo);}
  .picker-search{width:100%; font-family:var(--sans); font-size:14px; padding:8px 10px;
    border:1px solid var(--line); border-radius:8px; margin-bottom:12px; background:var(--panel); color:var(--ink);}

  .picker-new-toggle{width:100%; text-align:left; font-size:13.5px; color:var(--steel); font-weight:600;
    padding:8px 10px; margin-bottom:12px; border:1px dashed var(--line); border-radius:8px; background:none;}
  .picker-new-toggle:hover{border-color:var(--steel); background:var(--track-c);}
  .picker-new-form{display:none; gap:8px; margin-bottom:12px;}
  .picker-new-form input{flex:1; font-family:var(--sans); font-size:14px; padding:8px 10px;
    border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--ink);}
  .picker-new-form button{padding:8px 14px; font-size:13.5px;}

  .picker-row-special{font-weight:600; padding-bottom:11px; margin-bottom:5px; border-bottom:1px dashed var(--line);}
  .picker-thumb-special{background:var(--track-c);}
  .picker-thumb-special svg{width:17px; height:17px; color:var(--steel);}

  .picker-filters{border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-bottom:12px;
    display:flex; flex-direction:column; gap:8px;}
  .picker-filter-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
  .picker-filter-row select{font-family:var(--sans); font-size:13px; padding:6px 8px; border:1px solid var(--line);
    border-radius:7px; background:var(--panel); color:var(--ink); flex:1; min-width:130px;}
  .picker-filter-check{display:inline-flex; align-items:center; gap:5px; font-size:13px; color:var(--ink);
    cursor:pointer; white-space:nowrap;}
  .picker-filter-stars{display:inline-flex; gap:2px;}
  .picker-filter-stars .star{cursor:pointer; font-size:16px; line-height:1; color:var(--line);}
  .picker-filter-stars .star.filled{color:#d99a2b;}
  .picker-filter-stars .star:hover{color:#d99a2b;}
  .picker-filter-tags{display:flex; flex-wrap:wrap; gap:6px;}
  .picker-filter-tag{font-family:var(--mono); font-size:11px; color:var(--ink); background:var(--track-c);
    padding:4px 10px; border-radius:999px; cursor:pointer; user-select:none;}
  .picker-filter-tag.active{background:var(--steel); color:#fff;}
  .picker-filter-reset{align-self:flex-start; font-size:11.5px; color:var(--steel); background:none;
    border:none; padding:2px 0; text-decoration:underline; cursor:pointer;}

  ul.shopping-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0;}
  ul.shopping-list li{font-size:13.5px; padding:7px 0; border-bottom:1px dashed var(--line);}
  ul.shopping-list li:last-child{border-bottom:none;}
  ul.shopping-list li label{display:flex; align-items:baseline; gap:10px; cursor:pointer;}
  .shopping-amt{font-family:var(--mono); color:var(--steel); font-weight:600; min-width:76px; flex:none;}
  .shopping-select-all{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted);
    cursor:pointer; padding-bottom:8px; margin-bottom:4px; border-bottom:1px solid var(--line);}

/* ---- filme.html ---- */

  .movie-controls{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:14px 0;}
  .movie-search{max-width:280px; flex:1; min-width:180px;}
  .movie-search input[type="text"]{width:100%; font-family:var(--sans); font-size:13px; padding:8px 10px;
    border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--ink);}

  .movie-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:16px; margin-top:14px;}

  .movie-card{background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden;
    box-shadow:var(--shadow); transition:transform .2s,box-shadow .2s; display:flex; flex-direction:column; cursor:pointer;}
  .movie-card:hover{transform:translateY(-3px); box-shadow:0 16px 36px rgba(31,41,58,.16);}

  .movie-cover{position:relative; width:100%; aspect-ratio:2/3; overflow:hidden;
    background:linear-gradient(150deg,var(--cover-a),var(--cover-b));
    display:flex; align-items:center; justify-content:center;}
  .movie-cover img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
  .movie-cover svg{width:32px; height:32px; color:var(--holo); opacity:.7;}
  .movie-status-chip{position:absolute; top:8px; right:8px; font-family:var(--mono); font-size:9.5px;
    letter-spacing:.3px; text-transform:uppercase; padding:3px 7px; border-radius:999px; color:#fff;}
  .movie-status-chip[data-status="watchlist"]{background:rgba(79,119,153,.88);}
  .movie-status-chip[data-status="gesehen"]{background:rgba(111,138,118,.88);}
  .movie-status-chip[data-status="wiedersehen"]{background:rgba(154,123,74,.88);}

  .movie-body{padding:10px 12px; display:flex; flex-direction:column; flex:1; gap:4px;}
  .movie-title{font-size:13.5px; font-weight:640; line-height:1.3; color:var(--ink); margin:0;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    min-height:calc(1.3em * 2);}
  .movie-meta-row{font-size:11px; color:var(--muted); font-family:var(--mono);}

  /* Sterne: .star-row ist die schreibgeschuetzte, kleine Anzeige auf der
     Kachel (nur wenn bewertet), .star-picker die klickbare Variante in der
     Detailansicht/im Formular - ein Klick auf den bereits aktiven Stern
     loescht die Bewertung wieder (gleiches Muster wie bei den Rezepten). */

  .movie-actions{display:flex; gap:6px; margin-top:auto; padding-top:6px;}
  .movie-actions .spacer{flex:1;}

/* ---- freizeit.html ---- */
  .grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
  @media(max-width:720px){.grid{grid-template-columns:1fr;}}
  .hero{grid-column:1 / -1;}
  .empty-hint{grid-column:1/-1;}

  /* Volle Breite (Sidebar-Toggle "Seitenbreite umschalten"): mehr Platz fuer
     mehr Spalten - Hero-Karten bleiben dabei bewusst schmaler als "voll breit"
     (2 statt 4 Spalten), sonst wirken sie bei 4 Spalten unproportional lang. */
  body.wide-mode .grid{grid-template-columns:repeat(4,1fr);}
  body.wide-mode .hero{grid-column:span 2;}
  @media(max-width:1100px){body.wide-mode .grid{grid-template-columns:1fr 1fr;} body.wide-mode .hero{grid-column:1 / -1;}}
  @media(max-width:720px){body.wide-mode .grid{grid-template-columns:1fr;}}

  .card{background:var(--panel); border:1px solid var(--line); border-radius:16px; overflow:hidden;
    box-shadow:var(--shadow); transition:transform .22s,box-shadow .22s,opacity .3s;
    opacity:0; transform:translateY(10px); display:flex; flex-direction:column;}
  .card.in{opacity:1; transform:none;}
  .card:hover{transform:translateY(-3px); box-shadow:0 16px 36px rgba(31,41,58,.16);}
  .card.active{border-color:var(--acc);}
  .card.archived{opacity:.72;}
  .card.archived:hover{opacity:1;}

  /* ---- Archivierte Projekte: eingeklappte Sektion unter dem Hauptraster,
     gleiches Muster wie die Archiv-Sektion in wishlist.html. */
  .proj-archive-section{margin-top:32px;}
  .proj-archive-summary{cursor:pointer; font-size:14px; font-weight:700; color:var(--ink); padding:4px 0;
    list-style:none;}
  .proj-archive-summary::-webkit-details-marker{display:none;}
  .proj-archive-summary::before{content:'▸'; display:inline-block; margin-right:8px; color:var(--muted);
    transition:transform .15s;}
  .proj-archive-section[open] .proj-archive-summary::before{transform:rotate(90deg);}
  .proj-archive-section .grid{margin-top:16px;}

  .cover{position:relative; width:100%; aspect-ratio:3 / 2;
    background:linear-gradient(150deg,var(--cover-a),var(--cover-b));}
  .cover.tile{aspect-ratio:4 / 3;}
  .hero .cover{aspect-ratio:16 / 6;}
  @media(max-width:720px){.hero .cover{aspect-ratio:3 / 2;}}
  .cover svg{position:absolute; inset:0; width:100%; height:100%; display:block;}
  .cover::after{content:""; position:absolute; inset:0; pointer-events:none;
    background:
      repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 3px),
      radial-gradient(120% 100% at 50% 0%, transparent 55%, rgba(10,15,22,.35) 100%);}

  .body{padding:14px 16px 16px; display:flex; flex-direction:column; flex:1;}
  .kicker{font-family:var(--mono); font-size:10px; letter-spacing:.6px; text-transform:uppercase;
    color:var(--faint); display:flex; align-items:center; gap:7px; margin-bottom:6px;}
  .kicker .tag{padding:2px 7px; border-radius:6px; font-weight:600;}
  .kicker .tag.steel{background:#eaf1f6; color:var(--badge-steel);}
  .kicker .tag.sage{background:#eaf1eb; color:var(--badge-sage);}
  .kicker .tag.amber{background:#f2ede2; color:var(--badge-amber);}
  .kicker .tag.violet{background:#efeaf4; color:var(--badge-violet);}
  .card h2{font-size:15.5px; font-weight:640; margin:0 0 5px; letter-spacing:-.2px;}
  .card p{font-size:12.5px; color:#3f4959; line-height:1.45; margin:0;}
  .hero h2{font-size:20px;} .hero p{font-size:14px; max-width:70ch;}

  .linkrow{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px;}
  .linkchip{font-family:var(--mono); font-size:11px; padding:4px 10px 4px 8px; border-radius:999px;
    border:1px solid var(--line); color:var(--ink); text-decoration:none;
    display:inline-flex; align-items:center; gap:5px; background:var(--panel); transition:.15s;}
  .linkchip:hover{border-color:var(--acc); color:var(--acc);}
  .linkchip svg{width:11px; height:11px; flex:none; display:block;}

  /* injected time-track footer */
  .track{margin-top:auto; padding-top:12px; border-top:1px solid var(--line);
    display:flex; flex-direction:column; gap:9px;}
  .tmeta{display:flex; align-items:baseline; justify-content:space-between; gap:8px;}
  .tmeta .time{font-family:var(--mono); font-size:14px; font-weight:600; color:var(--ink);}
  .tmeta .pct{font-family:var(--mono); font-size:11px; color:var(--faint);}
  .tctrl{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
  .pp{width:34px; height:34px; display:grid; place-items:center; border-color:var(--acc); color:var(--acc); flex:none;}
  .pp:hover,.pp.on{background:var(--acc); color:#fff;}
  .pp svg{width:15px; height:15px; display:block;}
  .add{font-size:11px; padding:0 9px; height:28px; color:var(--muted); font-family:var(--mono);}
  .tctrl-right{display:flex; align-items:center; gap:6px; margin-left:auto;}
  .rst{width:28px; height:28px; display:grid; place-items:center; color:var(--faint); font-size:13px;}
  .archive-toggle{width:28px; height:28px; display:grid; place-items:center; color:var(--sage); font-size:13px;}
  .archive-toggle.restore{color:var(--steel);}

  /* Watching/Gaming/Reading: drei Spalten mit "gerade laufenden"
     Serien/Spielen/Buechern (Status watching/spielend/lesend). Zeigt
     dieselben Items wie serien.html/spiele.html/buecher.html, anklickbar
     fuer dieselbe Detailansicht (siehe eingebettete View-Modals unten) -
     plus Zeittracking, das es auf den Unterseiten selbst nicht gibt. */
  /* Flex statt Grid: waechst gleichmaessig auf volle Breite, wenn Platz ist
     (alle 4 Spalten nebeneinander), schrumpft aber nie unter die
     Mindestbreite - stattdessen scrollt die Reihe horizontal (mit
     Scroll-Snap fuers Einrasten je Spalte), statt die Spalten zu stapeln. */
  .watch-columns{display:flex; gap:20px; margin-top:14px; overflow-x:auto; padding-bottom:6px;
    scroll-snap-type:x proximity;}
  .watch-col{flex:1 0 260px; min-width:260px; scroll-snap-align:start;}
  .watch-col h3{font-size:14px; font-weight:640; margin:0 0 2px;}
  .watch-col .sub{font-size:12px; color:var(--muted); margin:0 0 10px;}
  .watch-list{display:flex; flex-direction:column; gap:10px;}
  .watch-empty{font-size:12.5px; color:var(--faint); padding:14px; border:1px dashed var(--line);
    border-radius:12px; text-align:center;}
  .watch-row{background:var(--panel); border:1px solid var(--line); border-radius:12px;
    padding:10px; display:flex; gap:10px; align-items:center; cursor:pointer; transition:box-shadow .2s,transform .2s;}
  .watch-row:hover{box-shadow:0 10px 24px rgba(31,41,58,.12); transform:translateY(-1px);}
  .watch-row.active{border-color:var(--acc);}
  .watch-thumb{width:38px; height:52px; flex:none; border-radius:6px; overflow:hidden;
    background:linear-gradient(150deg,var(--cover-a),var(--cover-b)); display:flex; align-items:center; justify-content:center;}
  .watch-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
  .watch-thumb svg{width:16px; height:16px; color:var(--holo); opacity:.7;}
  .watch-text{flex:1; min-width:0;}
  .watch-text .t{font-size:13px; font-weight:620; color:var(--ink); margin:0 0 2px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .watch-text .m{font-size:11px; color:var(--muted); font-family:var(--mono);}
  .watch-track{display:flex; align-items:center; gap:5px; flex:none;}
  .watch-time{font-family:var(--mono); font-size:11px; color:var(--faint); min-width:38px; text-align:right;}

  /* Sterne + View-Modal-Bausteine fuer die drei eingebetteten Modals unten,
     1:1 aus serien.html/spiele.html/buecher.html uebernommen (Klassennamen
     sind dort schon je Modul eindeutig praefixiert, daher hier unveraendert
     uebernehmbar - nur IDs sind unten je Modal umbenannt). */

  .series-view-layout,.game-view-layout,.book-view-layout,.movie-view-layout{display:flex; gap:18px; align-items:flex-start;}
  .series-view-poster,.game-view-poster,.book-view-poster,.movie-view-poster{width:150px; flex:none; border-radius:10px; overflow:hidden;
    background:linear-gradient(150deg,var(--cover-a),var(--cover-b));}
  .series-view-poster img,.game-view-poster img,.book-view-poster img,.movie-view-poster img{width:100%; aspect-ratio:2/3; object-fit:cover; display:block;}
  .series-view-poster.placeholder,.game-view-poster.placeholder,.book-view-poster.placeholder,.movie-view-poster.placeholder{aspect-ratio:2/3; display:flex; align-items:center; justify-content:center;}
  .series-view-poster.placeholder svg,.game-view-poster.placeholder svg,.book-view-poster.placeholder svg,.movie-view-poster.placeholder svg{width:40px; height:40px; color:var(--holo); opacity:.7;}
  .series-view-main,.game-view-main,.book-view-main,.movie-view-main{flex:1; min-width:0;}
  .series-view-infobar,.game-view-infobar,.book-view-infobar,.movie-view-infobar{display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 2px;}
  .series-stat-pill,.game-stat-pill,.book-stat-pill,.movie-stat-pill{display:inline-flex; align-items:center; gap:6px; background:var(--track-c); color:var(--ink);
    font-size:12px; font-weight:600; padding:5px 11px; border-radius:999px; white-space:nowrap;}
  .series-stat-pill.imdb,.movie-stat-pill.imdb{background:#fbeed0; color:#8a6a1f;}
  .series-view-overview,.game-view-overview,.book-view-overview,.movie-view-overview{margin-top:16px; font-size:13.5px; line-height:1.6; color:var(--ink); white-space:pre-wrap;}
  .series-progress-row,.game-progress-row,.book-progress-row{display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap;}
  .series-progress-row label,.game-progress-row label,.book-progress-row label{margin:0; font-size:12px; color:var(--muted);}
  .series-progress-row input[type="number"],.game-progress-row input[type="number"],.book-progress-row input[type="number"]{width:76px; font-family:var(--sans); font-size:13px; padding:6px 8px;
    border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--ink);}
  .series-progress-row span,.game-progress-row span,.book-progress-row span{font-size:12.5px; color:var(--muted);}

  .card.open{background:transparent; box-shadow:none; border-style:dashed;}
  .card.open .cover{background:rgba(79,119,153,.05); border-bottom:1px dashed var(--line);}
  .card.open .cover::after{display:none;}
  .card.open h2{color:var(--muted);}

  footer{margin-top:30px; padding-top:16px; border-top:1px solid var(--line);
    font-size:12.5px; color:var(--muted); line-height:1.55; display:flex;
    justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center;}
  footer strong{color:var(--ink); font-weight:600;}

  /* entry modal (.field* lives in shared.css; .modal-overlay/.modal/.modal-actions ebenfalls) */
  .link-row{display:flex; gap:6px; margin-bottom:6px; align-items:center;}
  .link-row input{font-family:var(--sans); font-size:13px; padding:7px 9px;
    border:1px solid var(--line); border-radius:7px; background:var(--panel); color:var(--ink);}
  .link-row input.link-label{flex:0 0 34%;}
  .link-row input.link-url{flex:1;}
  .link-remove{width:30px; height:30px; flex:none; display:grid; place-items:center; color:var(--faint);}
  .link-remove:hover{color:#a3453d; border-color:#c0776d;}

      #f-clickTarget{width:100%; font-family:var(--sans); font-size:13px; padding:8px 10px;
    border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--ink); margin-top:2px;}

  @media(prefers-reduced-motion:reduce){.card{opacity:1; transform:none;}}

/* ---- home.html ---- */
                            .sec-sub a{color:var(--steel);}

  .mantra-modal-text{margin:0; font-size:15px; line-height:1.7; color:var(--ink); white-space:pre-wrap;
    word-break:break-word;}

  .home-layout{display:flex; gap:28px; align-items:flex-start;}
  .home-calendar{flex:1 1 0; min-width:0;}
  .home-bookmarks{flex:1 1 0; min-width:0;}
  .home-reflect{flex:2 1 0; min-width:0;}
  @media(max-width:760px){
    /* stretch statt flex-start: sonst schrumpfen die Spalten auf ihre
       Inhaltsbreite und ein langer Reiter/Titel weitet die ganze Seite. */
    .home-layout{flex-direction:column; align-items:stretch;}
  }

  .bday-list,.appt-list{display:flex; flex-direction:column; gap:2px; margin-top:10px; margin-bottom:22px;}
  .bday-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 6px; border-radius:9px;}
  .bday-row.today{background:var(--track-c);}
  .bday-name{flex:1; min-width:0; font-size:13px; color:var(--ink); font-weight:600;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .bday-note{font-family:var(--mono); font-size:11px; color:var(--muted); flex:none;}
  .bday-note.today{color:var(--steel); font-weight:700;}
  .appt-row{display:flex; align-items:baseline; gap:10px; padding:7px 6px; border-radius:9px;}
  .appt-time{font-family:var(--mono); font-size:11px; color:var(--steel); flex:none; min-width:52px;}
  .appt-title{flex:1; min-width:0; font-size:13px; color:var(--ink);}

  .reflect-tabbar{margin-top:14px;}
  .reflect-tab{display:inline-flex; align-items:center; gap:5px;}
  .reflect-tab-label{cursor:pointer;}
  .reflect-tab-icon{width:16px; height:16px; border:none; background:none; border-radius:50%;
    color:var(--muted); font-size:11px; line-height:1; padding:0; display:inline-flex;
    align-items:center; justify-content:center;}
  .reflect-tab-icon:hover{color:var(--ink); background:rgba(38,48,65,.1);}
  .reflect-tab-del:hover{color:#a3453d; background:rgba(163,69,61,.12);}
  .reflect-tab-add{background:transparent; color:var(--muted); font-weight:600;}

  .reflect-toolbar{display:flex; justify-content:flex-end; margin:10px 0 6px;}

  .reflect-card{background:var(--panel); border:1px solid var(--line); border-radius:16px;
    box-shadow:var(--shadow); padding:16px 18px; min-height:120px;}
  .reflect-text{margin:0; font-size:14px; line-height:1.65; color:var(--ink); white-space:pre-wrap;
    word-break:break-word;}
  .reflect-text.empty{color:var(--faint); font-style:italic;}
  .reflect-textarea{width:100%; min-height:160px; font-family:inherit; font-size:14px; line-height:1.6;
    padding:10px 12px; border:1px solid var(--line); border-radius:10px; resize:vertical; color:var(--ink);
    background:var(--bg); box-sizing:border-box;}
  .reflect-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:10px;}
  .reflect-actions button{padding:9px 16px; font-size:13px;}
  .reflect-actions .primary{background:var(--steel); border-color:var(--steel); color:#fff; font-weight:600;}

  .upcoming-list{display:flex; flex-direction:column; gap:2px; margin-top:10px; margin-bottom:22px;}
  .upcoming-row{display:flex; align-items:center; gap:10px; padding:7px 6px; border-radius:9px;
    text-decoration:none; color:inherit;}
  .upcoming-row:hover{background:var(--track-c);}
  /* Erscheint heute: leicht abgesetzt, gleiches Muster wie .bday-row.today. */
  .upcoming-row.today{background:var(--track-c); box-shadow:inset 2px 0 0 var(--steel);}
  .upcoming-thumb{width:28px; height:38px; border-radius:5px; background:var(--track-c); flex:none; overflow:hidden;}
  .upcoming-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
  .upcoming-title{flex:1; min-width:0; font-size:13px; color:var(--ink); overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap;}
  .upcoming-date{font-family:var(--mono); font-size:11px; color:var(--amber); flex:none;}
  .upcoming-date.today{color:var(--steel); font-weight:700;}

  .frontpage-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(220px,100%),1fr)); gap:14px; margin-top:14px;}
  .frontpage-card{min-width:0; overflow-wrap:anywhere;}
  .frontpage-card{background:var(--panel); border:1px solid var(--line); border-radius:14px;
    box-shadow:var(--shadow); padding:14px 16px; display:flex; align-items:flex-start; gap:12px;
    text-decoration:none; color:inherit; transition:transform .15s, box-shadow .15s;}
  .frontpage-card:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(31,41,58,.16);}

  /* Bookmark-Chip-Optik 1:1 aus bookmarks.html/projekt.html (gleiche
     Klassennamen), damit ein Frontpage-Bookmark ueberall gleich aussieht. */
            .bm-title{font-size:14px; font-weight:640; color:var(--ink);}

/* ---- klassenarbeiten.html ---- */
  .ka-controls{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:18px;}
  .ka-controls select{font-family:var(--sans); font-size:13px; padding:8px 10px; border:1px solid var(--line);
    border-radius:8px; background:var(--panel); color:var(--ink);}

  .ka-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:18px; margin-top:18px;}

  .ka-card{background:var(--panel); border:1px solid var(--line); border-radius:16px;
    box-shadow:var(--shadow); transition:transform .2s,box-shadow .2s; display:flex; flex-direction:column;
    cursor:pointer; padding:14px 16px; gap:8px;}
  .ka-card:hover{transform:translateY(-3px); box-shadow:0 16px 36px rgba(31,41,58,.16);}

  .ka-badgerow{display:flex; flex-wrap:wrap; gap:4px; align-items:center; min-height:20px;}
  .ka-fach-badge{font-family:var(--mono); font-size:10px; letter-spacing:.5px; text-transform:uppercase;
    padding:2px 8px; border-radius:6px; flex:none;}
  .ka-fach-badge[data-fach="Mathe"]{background:#e8f0f6; color:var(--badge-steel);}
  .ka-fach-badge[data-fach="Physik"]{background:#efeaf6; color:var(--badge-violet);}
  .ka-fach-badge[data-fach="NW+"]{background:#eaf1ea; color:var(--badge-sage);}
  .ka-klasse-badge{font-family:var(--mono); font-size:10px; color:var(--faint); background:var(--track-c);
    padding:2px 8px; border-radius:6px; flex:none;}
  .ka-revision-badge{font-family:var(--mono); font-size:10px; color:#a3453d; background:#fdf2f1;
    padding:2px 8px; border-radius:6px; flex:none;}

  .ka-title{font-size:15px; font-weight:640; line-height:1.3; color:var(--ink); margin:0;}
  .ka-revision-notes{margin:0; font-size:12px; line-height:1.4; color:#a3453d; white-space:pre-wrap;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
  .ka-meta{display:flex; gap:12px; font-family:var(--mono); font-size:11px; color:var(--faint); flex-wrap:wrap;}
  .ka-units{display:flex; flex-wrap:wrap; gap:4px;}
  .ka-unit-chip{font-family:var(--mono); font-size:10px; color:var(--badge-gold); background:#faf3de;
    padding:2px 8px; border-radius:999px; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .ka-tutory-link{font-size:11.5px; color:var(--steel); text-decoration:none;}
  .ka-tutory-link:hover{text-decoration:underline;}

  .ka-actions{display:flex; margin-top:auto; padding-top:4px;}
  .ka-actions .spacer{flex:1;}

  .ka-unit-picker{max-height:220px; overflow-y:auto; border:1px solid var(--line); border-radius:10px;
    padding:10px 12px; background:var(--track-c);}
  .ka-unit-row{display:flex; align-items:flex-start; gap:8px; padding:4px 0; font-size:12.5px; color:var(--ink); cursor:pointer;}
  .ka-unit-row input{margin-top:3px; flex:none;}
  .ka-unit-empty{font-size:12px; color:var(--faint); padding:8px 0;}
  .field.checkbox{display:flex; align-items:center; gap:8px;}
  .field.checkbox label{margin:0;}

  .ka-file-row{display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--line);}
  .ka-file-row:last-child{border-bottom:none;}
  .ka-file-label{font-size:12.5px; color:var(--ink); flex:1; min-width:0;}
  .ka-file-info{display:flex; align-items:center; gap:6px; min-width:0;}
  .ka-file-name{font-size:11.5px; color:var(--steel); text-decoration:none; max-width:150px; overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap;}
  .ka-file-name:hover{text-decoration:underline;}
  .ka-file-size{font-family:var(--mono); font-size:10px; color:var(--faint); flex:none;}
  .ka-file-remove{flex:none; border:none; background:none; color:var(--faint); cursor:pointer; font-size:13px; padding:2px 4px;}
  .ka-file-remove:hover{color:#a3453d;}
  .ka-file-upload-btn{flex:none; font-family:var(--sans); font-size:11.5px; padding:4px 10px; border:1px solid var(--line);
    border-radius:6px; background:var(--panel); color:var(--steel); cursor:pointer;}
  .ka-file-upload-btn:hover{background:var(--track-c);}
  .ka-file-err{font-size:11px; color:#a3453d; margin:2px 0 0;}

/* ---- nextup.html ---- */
  .nu-list{background:var(--panel); border:1px solid var(--line); border-radius:16px;
    box-shadow:var(--shadow); padding:4px 18px;}
  .nu-row{display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line);}
  .nu-row:last-child{border-bottom:none;}

  .nu-move{display:flex; flex-direction:column; gap:2px; flex:none;}
  .nu-move button{width:22px; height:18px; padding:0; display:grid; place-items:center; font-size:9px;
    color:var(--faint); border-radius:5px;}
  .nu-move button:hover:not(:disabled){color:var(--ink); border-color:#b6c1cd;}
  .nu-move button:disabled{opacity:.3; cursor:default;}

  .nu-thumb{width:40px; height:56px; border-radius:7px; background:linear-gradient(150deg,var(--cover-a),var(--cover-b));
    flex:none; overflow:hidden; display:grid; place-items:center; color:#fff;}
  .nu-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
  .nu-thumb svg{width:18px; height:18px; opacity:.8;}

  .nu-main{flex:1; min-width:0;}
  .nu-top-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
  .nu-title{font-size:14px; font-weight:640; color:var(--ink); text-decoration:none;}
  .nu-title:hover{color:var(--steel); text-decoration:underline;}
  .nu-kind-badge{font-family:var(--mono); font-size:9.5px; letter-spacing:.5px; text-transform:uppercase;
    padding:2px 7px; border-radius:6px; flex:none;}
  .nu-kind-badge[data-kind="movie"]{color:var(--badge-steel); background:#eaf1f6;}
  .nu-kind-badge[data-kind="series"]{color:var(--badge-violet); background:#efeaf6;}
  .nu-kind-badge[data-kind="book"]{color:var(--badge-gold); background:#faf3de;}
  .nu-kind-badge[data-kind="game"]{color:var(--badge-sage); background:#eaf1ea;}

  .nu-remove{flex:none; width:28px; height:28px; display:grid; place-items:center; color:var(--faint); border-radius:7px;}
  .nu-remove:hover{color:#a3453d; background:var(--track-c);}

  .nu-kind-tabs{display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap;}
  .nu-picker-list{max-height:320px; overflow-y:auto; display:flex; flex-direction:column; gap:2px;
    border:1px solid var(--line); border-radius:10px; padding:6px;}
  .nu-picker-row{display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:8px; cursor:pointer;}
  .nu-picker-row:hover{background:var(--track-c);}
  .nu-picker-thumb{width:28px; height:38px; border-radius:5px; background:var(--track-c); flex:none; overflow:hidden;}
  .nu-picker-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
  .nu-picker-title{font-size:13px; color:var(--ink);}
  .nu-picker-empty{font-size:12.5px; color:var(--faint); padding:8px 4px;}

/* ---- pdfs.html ---- */

  .pdf-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:14px; margin-top:14px;}
  .pdf-card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px 16px;
    display:flex; align-items:flex-start; gap:12px; cursor:pointer;}
  .pdf-card:hover{border-color:var(--steel);}
  .pdf-card-icon{width:64px; height:82px; flex:none; border-radius:8px;
    background:linear-gradient(150deg,var(--cover-a),var(--cover-b)); display:flex; align-items:center; justify-content:center;
    overflow:hidden;}
  .pdf-card-icon svg{width:26px; height:26px; color:var(--holo);}
  .pdf-card-icon img{width:100%; height:100%; object-fit:cover; display:block;}
  .pdf-card-body{flex:1; min-width:0;}
  /* Zweizeilig statt einzeiliger Ellipse - der Titel bekommt dadurch die
     volle Kartenbreite fuer beide Zeilen, die Buttons stehen erst in der
     Zeile darunter (statt seitlich Platz wegzunehmen, den ein einzeiliger
     Titel sonst nie ausnutzen wuerde). */
  .pdf-card-title{font-size:14px; font-weight:600; color:var(--ink); line-height:1.3;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
  .pdf-card-meta{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:6px;}
  .pdf-card-progress{font-family:var(--mono); font-size:11px; color:var(--faint);}
  .pdf-card-actions{display:flex; gap:4px; flex:none;}

  .lib-shelf-title{display:flex; align-items:center; gap:8px; margin:26px 2px 8px;
    font-size:13px; font-weight:600; color:var(--ink);}
  #pdfLibrary > .lib-shelf-title:first-child{margin-top:4px;}
  .lib-shelf-del{width:22px; height:22px; flex:none; margin-left:auto; display:grid; place-items:center;
    border:none; background:none; color:var(--faint); font-size:12px; padding:0;}
  .lib-shelf-del:hover{color:#a3453d;}

  .drop-overlay{display:none; position:fixed; inset:0; z-index:150;
    background:rgba(58,91,120,.14); align-items:center; justify-content:center; pointer-events:none;}
  .drop-overlay.show{display:flex;}
  .drop-overlay-inner{background:var(--panel); border:2px dashed var(--steel); border-radius:18px;
    padding:40px 60px; font-size:15px; font-weight:600; color:var(--steel); box-shadow:var(--shadow);}

  /* Reader: nahezu fullscreen als fixierter Overlay ueber der ganzen App
     (Sidebar bleibt im Hintergrund, wird einfach optisch verdeckt) - dadurch
     unabhaengig von der DOM-Verschachtelung innerhalb von .wrap/.main. */
  #readerView{display:none;}
  #readerView.open{
    display:flex; flex-direction:column;
    position:fixed; inset:0; z-index:200;
    background:linear-gradient(155deg,var(--ground-a),var(--ground-b));
    padding:14px 16px 16px;
  }

  .reader-topbar{display:flex; align-items:center; gap:12px; margin-bottom:10px; flex-wrap:wrap;}
  .reader-topbar button{padding:7px 12px;}
  .reader-topbar h2{flex:1; min-width:0; margin:0; font-size:16px; color:var(--ink);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

  .reader-nav{display:flex; align-items:center; gap:10px; flex:none;}
  .reader-nav button{padding:7px 12px;}
  .reader-nav span{font-family:var(--mono); font-size:12.5px; color:var(--muted); min-width:110px; text-align:center;}

  .reader-topbar-actions{display:flex; gap:6px; flex:none;}
  .reader-topbar-actions button{width:34px; height:34px; padding:0; display:grid; place-items:center; font-size:15px;}
  .reader-topbar-actions button.active{background:var(--steel); border-color:var(--steel);}

  /* Ueberlagernde, ein-/ausklappbare Panels fuer Suche und Kommentare -
     schweben ueber dem PDF statt fest Platz wegzunehmen. */
  .reader-overlay-panel{display:none; position:absolute; top:14px; right:14px;
    width:360px; max-width:calc(100% - 28px); max-height:calc(100% - 28px);
    background:var(--panel); border:1px solid var(--line); border-radius:14px;
    box-shadow:var(--shadow); padding:14px 16px; overflow-y:auto; z-index:10;}
  .reader-overlay-panel.open{display:block;}
  .reader-overlay-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
  .reader-overlay-head h4{margin:0; font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted);}
  .reader-overlay-head button{width:22px; height:22px; padding:0; display:grid; place-items:center;
    border:none; background:none; color:var(--faint); font-size:12px;}
  .reader-overlay-head button:hover{color:#a3453d;}

  .reader-search{display:flex; align-items:center; gap:8px;}
  .reader-search input{flex:1; font-family:var(--sans); font-size:13.5px; padding:7px 10px;
    border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--ink);}
  .reader-search button{padding:6px 10px;}
  .reader-search span{font-family:var(--mono); font-size:11.5px; color:var(--muted); min-width:60px; text-align:center;}

  .pdf-canvas-wrap{position:relative; flex:1; min-height:0; background:var(--panel); border:1px solid var(--line);
    border-radius:12px; padding:10px; display:flex; justify-content:center; overflow:auto;}
  .pdf-page-stack{position:relative; margin:0 auto;}
  .pdf-page-stack canvas{display:block; max-width:100%; box-shadow:0 2px 10px rgba(0,0,0,.15);}

  @media(max-width:640px){
    .reader-topbar h2{display:none;}
    .reader-overlay-panel{left:14px; right:14px; width:auto; max-width:none;}
  }

  .textLayer{position:absolute; inset:0; overflow:clip; opacity:1; line-height:1;
    transform-origin:0 0;}
  .textLayer :is(span,br){color:transparent; position:absolute; white-space:pre; cursor:text; transform-origin:0% 0%;}
  .textLayer .search-hit{background:rgba(255,199,0,.55); border-radius:2px;}

/* ---- projekt.html ---- */
  .back-link{display:inline-block; margin-bottom:14px; font-size:13px; color:var(--steel); text-decoration:none;}
  .back-link:hover{text-decoration:underline;}

  .notes-card{background:var(--panel); border:1px solid var(--line); border-radius:16px;
    box-shadow:var(--shadow); padding:16px 18px; min-height:100px;}
  .notes-text{margin:0; font-size:14px; line-height:1.65; color:var(--ink); white-space:pre-wrap;
    word-break:break-word;}
  .notes-text.empty{color:var(--faint); font-style:italic;}
  .notes-textarea{width:100%; min-height:160px; font-family:inherit; font-size:14px; line-height:1.6;
    padding:10px 12px; border:1px solid var(--line); border-radius:10px; resize:vertical; color:var(--ink);
    background:var(--bg); box-sizing:border-box;}
  .notes-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:10px;}
  .notes-actions button{padding:9px 16px; font-size:13px;}
  .notes-actions .primary{background:var(--steel); border-color:var(--steel); color:#fff; font-weight:600;}

  .assoc-section{margin-top:28px;}
  .assoc-box{background:var(--panel); border:1px solid var(--line); border-radius:16px;
    box-shadow:var(--shadow); padding:4px 18px;}
  .assoc-row{display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-bottom:1px solid var(--line);}
  .assoc-row:last-child{border-bottom:none;}
  .assoc-title{flex:1; font-size:14px; color:var(--ink); min-width:0; overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap;}
  .assoc-title a{color:var(--ink); text-decoration:none;}
  .assoc-title a:hover{color:var(--steel); text-decoration:underline;}
  .assoc-remove{background:none; border:none; color:var(--faint); font-size:16px; line-height:1; cursor:pointer;
    padding:0 4px; flex:none; margin-top:1px;}

  /* Bookmark-Zeile 1:1 aus bookmarks.html uebernommen, damit ein zugeordneter
     Bookmark hier genauso aussieht wie in der eigentlichen Bookmark-Liste. */
            .bm-title{font-size:14px; font-weight:640; color:var(--ink); text-decoration:none;}
                .assoc-remove:hover{color:#a3453d;}
  .assoc-add{display:flex; gap:8px; margin-top:12px;}
  .assoc-add select{flex:1; min-width:0; font-family:var(--sans); font-size:13px; padding:8px 10px;
    border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--ink);}
  .assoc-add button{padding:8px 16px; font-size:13px; background:var(--steel); border-color:var(--steel);
    color:#fff; font-weight:600; border-radius:8px; cursor:pointer;}
  .assoc-add button:disabled, .assoc-add select:disabled{opacity:.5; cursor:not-allowed;}

  /* ---- Todoist-Aufgabenliste: eigener "verbinden"-Zustand (Projekt per
     Dropdown waehlen statt wie bei Bookmarks/PDFs aus einer bereits
     vorhandenen Liste), Aufgaben-Zeilen 1:1 aus dem Home-Widget uebernommen
     (siehe home.html), damit eine Aufgabe hier genauso aussieht/funktioniert
     wie dort. */
  .task-connect-box{background:var(--panel); border:1px solid var(--line); border-radius:16px;
    box-shadow:var(--shadow); padding:16px 18px;}
  .task-connect-box .hint{margin:0 0 10px;}
  .task-linked-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px;}
  .task-linked-name{font-family:var(--mono); font-size:12px; color:var(--muted);}

/* ---- rezepte.html ---- */
  .recipe-search{margin-top:14px; max-width:340px;}
  .recipe-search input[type="text"]{width:100%; font-family:var(--sans); font-size:13px; padding:8px 10px;
    border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--ink);}

  .recipe-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:18px; margin-top:18px;}

  .recipe-card{background:var(--panel); border:1px solid var(--line); border-radius:16px; overflow:hidden;
    box-shadow:var(--shadow); transition:transform .2s,box-shadow .2s; display:flex; flex-direction:column;}
  .recipe-card:hover{transform:translateY(-3px); box-shadow:0 16px 36px rgba(31,41,58,.16);}

  .recipe-cover{position:relative; width:100%; aspect-ratio:4/3; overflow:hidden;
    background:linear-gradient(150deg,var(--cover-a),var(--cover-b));
    display:flex; align-items:center; justify-content:center; cursor:pointer;}
  .recipe-cover img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
  .recipe-cover svg{width:40px; height:40px; color:var(--holo); opacity:.7;}

  .recipe-body{padding:14px 16px; display:flex; flex-direction:column; flex:1; gap:8px;}
  .recipe-title{font-size:15px; font-weight:640; line-height:1.3; color:var(--ink); margin:0; cursor:pointer;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    min-height:calc(1.3em * 2);}
  .recipe-title:hover{color:var(--steel);}
  .recipe-meta{display:flex; gap:12px; font-family:var(--mono); font-size:11px; color:var(--faint);
    flex-wrap:wrap; min-height:14px;}
  .recipe-meta span{display:inline-flex; align-items:center; gap:4px;}
  .recipe-meta svg{width:12px; height:12px; flex:none;}

  /* Sterne: .star-row ist die schreibgeschuetzte, kleine Anzeige auf der
     Kachel (nur wenn bewertet), .star-picker die klickbare Variante in der
     Detailansicht/im Formular - ein Klick auf den bereits aktiven Stern
     loescht die Bewertung wieder (kein extra "Zuruecksetzen"-Knopf noetig). */

          .star-picker.small .star{font-size:17px; cursor:pointer;}

  /* immer gerenderte Reihe (auch leer), damit alle Kacheln gleich hoch bleiben */
  .recipe-tagrow{display:flex; flex-wrap:wrap; align-items:center; gap:4px; min-height:20px; max-height:20px; overflow:hidden;}
  .recipe-category{font-family:var(--mono); font-size:10px; letter-spacing:.5px; text-transform:uppercase;
    color:var(--badge-steel); background:#eaf1f6; display:inline-block; padding:2px 8px; border-radius:6px; flex:none;}
  .recipe-sina-badge{font-family:var(--mono); font-size:10px; letter-spacing:.5px; text-transform:uppercase;
    color:#9a6b1c; background:#faf1de; display:inline-block; padding:2px 8px; border-radius:6px; flex:none;}
  .recipe-tag-chip{font-family:var(--mono); font-size:10px; color:var(--badge-sage); background:#eaf1eb;
    padding:2px 7px; border-radius:999px; flex:none;}
  .recipe-tags{display:flex; flex-wrap:wrap; gap:4px;}

  .recipe-actions{display:flex; gap:6px; margin-top:auto; padding-top:8px;}
  .recipe-actions .spacer{flex:1;}

  .stat-thumb{width:38px; height:38px; border-radius:8px; overflow:hidden; flex:none;
    background:linear-gradient(150deg,var(--cover-a),var(--cover-b)); display:flex; align-items:center; justify-content:center;}
  .stat-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
  .stat-thumb svg{width:16px; height:16px; color:var(--holo);}
  .stat-rank-row{cursor:pointer;}
  .stat-rank-row:hover .rank-name{color:var(--steel);}

  /* view modal */
  .recipe-view-hero{margin:-22px -24px 18px; border-radius:16px 16px 0 0; overflow:hidden;}
  .recipe-view-hero img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block;}
  .recipe-view-hero.placeholder{aspect-ratio:16/9; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(150deg,var(--cover-a),var(--cover-b));}
  .recipe-view-hero.placeholder svg{width:52px; height:52px; color:var(--holo); opacity:.7;}

  .recipe-view-infobar{display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 10px;}
  .recipe-stat-pill{display:inline-flex; align-items:center; gap:6px; background:var(--track-c); color:var(--ink);
    font-size:12.5px; font-weight:600; padding:6px 12px; border-radius:999px; white-space:nowrap;}
  .recipe-stat-pill svg{width:14px; height:14px; color:var(--steel); flex:none;}
  .recipe-stat-pill.category{background:#eaf1f6; color:var(--badge-steel);}
  .recipe-stat-pill.sina{background:#faf1de; color:#9a6b1c;}

  /* Auf dem Handy ist eine ~480px breite, zentrierte Modal-Karte fuer eine
     ganze Rezept-Detailansicht (Bild, Zutaten, Schritte, Kommentare) zu
     beengt - dort stattdessen randlos fullscreen oeffnen, analog zum
     PDF-Reader in pdfs.html. Betrifft bewusst nur die Detailansicht
     (viewModal), nicht das Bearbeiten-Formular oder den Bestaetigen-Dialog. */
  @media(max-width:720px){
    #viewModal{padding:0;}
    #viewModal .modal{max-width:none; width:100%; height:100%; max-height:none; border-radius:0;}
  }

  .modal h4{font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--faint);
    font-family:var(--mono); margin:18px 0 8px; font-weight:600;}

  .recipe-panel{background:var(--track-c); border-radius:12px; padding:14px 16px; margin-top:16px;}
  .recipe-panel h4{margin-top:0;}
  ul.ingredient-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0;}
  ul.ingredient-list li{font-size:13.5px; display:flex; align-items:baseline; gap:10px;
    padding:7px 0; border-bottom:1px dashed var(--line);}
  ul.ingredient-list li:last-child{border-bottom:none; padding-bottom:0;}
  ul.ingredient-list .amt{font-family:var(--mono); color:var(--steel); font-weight:600; min-width:60px; flex:none;}

  .step-list{display:flex; flex-direction:column; gap:14px; margin:0; padding:0;}
  .step-row{display:flex; gap:12px; align-items:flex-start;}
  .step-num-badge{width:26px; height:26px; border-radius:50%; background:var(--steel); color:#fff;
    font-family:var(--mono); font-size:12px; font-weight:700; display:flex; align-items:center;
    justify-content:center; flex:none;}
  .step-text{font-size:13.5px; line-height:1.6; padding-top:3px;}

  .recipe-source-card{display:flex; align-items:center; gap:10px; background:var(--track-c); border-radius:10px;
    padding:11px 14px; margin-top:16px; font-size:13px; color:var(--muted);}
  .recipe-source-card svg{width:15px; height:15px; color:var(--steel); flex:none;}
  .recipe-source-card a{color:var(--steel); font-weight:600; text-decoration:none;}
  .recipe-source-card a:hover{text-decoration:underline;}

  /* dynamic ingredient/step rows */
  .dyn-row{display:flex; gap:6px; margin-bottom:6px; align-items:flex-start;}
  .dyn-row input.ing-amount{flex:0 0 90px; font-family:var(--sans); font-size:13px; padding:7px 9px;
    border:1px solid var(--line); border-radius:7px;}
  .dyn-row input.ing-name{flex:1; font-family:var(--sans); font-size:13px; padding:7px 9px;
    border:1px solid var(--line); border-radius:7px;}
  .dyn-row textarea.step-text{flex:1; min-height:44px; resize:vertical; font-family:var(--sans);
    font-size:13px; padding:7px 9px; border:1px solid var(--line); border-radius:7px;}
  .dyn-row .dyn-remove{width:30px; height:30px; flex:none; display:grid; place-items:center; color:var(--faint);}
  .dyn-row .dyn-remove:hover{color:#a3453d; border-color:#c0776d;}
  .step-num{font-family:var(--mono); font-size:12px; color:var(--faint); width:18px; flex:none; padding-top:9px;}

  .tag-toggle-list{display:flex; flex-wrap:wrap; gap:8px;}
  .tag-toggle-list label{display:inline-flex; align-items:center; gap:5px; font-size:13px; color:var(--ink);
    background:var(--track-c); padding:5px 10px; border-radius:999px; cursor:pointer;}
  .tag-toggle-list input{margin:0;}

/* ---- sammlungen.html ---- */
  .col-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; margin-top:18px;}
  .col-card{background:var(--panel); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow);
    padding:16px 18px; cursor:pointer; display:flex; flex-direction:column; gap:8px; transition:transform .15s;}
  .col-card:hover{transform:translateY(-3px);}
  .col-card-top{display:flex; align-items:flex-start; justify-content:space-between; gap:8px;}
  .col-name{font-size:15px; font-weight:640; color:var(--ink);}
  .col-del{flex:none; width:26px; height:26px; display:grid; place-items:center; color:var(--faint); border-radius:7px;}
  .col-del:hover{color:#a3453d; background:var(--track-c);}
  .col-progress-track{height:6px; border-radius:99px; background:var(--track-c); overflow:hidden;}
  .col-progress-fill{height:100%; background:var(--steel); border-radius:99px;}
  .col-count{font-family:var(--mono); font-size:11px; color:var(--muted);}

  .back-btn{display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--steel);
    cursor:pointer; margin-bottom:8px;}
  .back-btn:hover{text-decoration:underline;}
  .detail-header{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
  .detail-actions{display:flex; gap:8px; flex-wrap:wrap;}

  .item-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:14px; margin-top:18px;}
  .item-card{cursor:pointer; display:flex; flex-direction:column; gap:6px;}
  .item-cover{position:relative; width:100%; aspect-ratio:1/1; border-radius:12px; overflow:hidden;
    background:linear-gradient(150deg,var(--cover-a),var(--cover-b)); display:grid; place-items:center; color:#fff;}
  .item-cover img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
  .item-card.not-owned .item-cover img{filter:grayscale(1) brightness(.75); opacity:.55;}
  .item-card.not-owned .item-cover{opacity:.55;}
  .item-card.not-owned .item-title{color:var(--faint);}
  .item-badge{position:absolute; top:6px; left:6px; font-family:var(--mono); font-size:10px; color:#fff;
    background:rgba(0,0,0,.55); padding:2px 7px; border-radius:6px;}
  .item-progress-track{position:absolute; left:0; right:0; bottom:0; height:4px; background:rgba(255,255,255,.3);}
  .item-progress-fill{height:100%; background:var(--holo);}
  .item-title{font-size:12.5px; color:var(--ink); line-height:1.3;}
  .item-meta{font-family:var(--mono); font-size:10px; color:var(--faint);}

      .import-status{font-size:12.5px; color:var(--muted); margin-top:8px;}

/* ---- serien.html ---- */

  .series-controls{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:14px 0;}
  .series-search{max-width:280px; flex:1; min-width:180px;}
  .series-search input[type="text"]{width:100%; font-family:var(--sans); font-size:13px; padding:8px 10px;
    border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--ink);}

  .series-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:16px; margin-top:14px;}

  .series-card{background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden;
    box-shadow:var(--shadow); transition:transform .2s,box-shadow .2s; display:flex; flex-direction:column; cursor:pointer;}
  .series-card:hover{transform:translateY(-3px); box-shadow:0 16px 36px rgba(31,41,58,.16);}

  .series-cover{position:relative; width:100%; aspect-ratio:2/3; overflow:hidden;
    background:linear-gradient(150deg,var(--cover-a),var(--cover-b));
    display:flex; align-items:center; justify-content:center;}
  .series-cover img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
  .series-cover svg{width:32px; height:32px; color:var(--holo); opacity:.7;}
  .series-status-chip{position:absolute; top:8px; right:8px; font-family:var(--mono); font-size:9.5px;
    letter-spacing:.3px; text-transform:uppercase; padding:3px 7px; border-radius:999px; color:#fff;}
  .series-status-chip[data-status="watchlist"]{background:rgba(79,119,153,.88);}
  .series-status-chip[data-status="watching"]{background:rgba(74,140,140,.88);}
  .series-status-chip[data-status="wartet_neue_staffel"]{background:rgba(139,111,158,.88);}
  .series-status-chip[data-status="gesehen"]{background:rgba(111,138,118,.88);}
  .series-status-chip[data-status="wiedersehen"]{background:rgba(154,123,74,.88);}

  .series-body{padding:10px 12px; display:flex; flex-direction:column; flex:1; gap:4px;}
  .series-title{font-size:13.5px; font-weight:640; line-height:1.3; color:var(--ink); margin:0;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    min-height:calc(1.3em * 2);}
  .series-meta-row{font-size:11px; color:var(--muted); font-family:var(--mono);}
  .series-progress-label{font-size:10.5px; color:var(--muted); font-family:var(--mono); margin-top:2px;}

  /* Sterne: .star-row ist die schreibgeschuetzte, kleine Anzeige auf der
     Kachel (nur wenn bewertet), .star-picker die klickbare Variante in der
     Detailansicht/im Formular - ein Klick auf den bereits aktiven Stern
     loescht die Bewertung wieder (gleiches Muster wie bei Filmen/Buechern). */

  .series-actions{display:flex; gap:6px; margin-top:auto; padding-top:6px;}
  .series-actions .spacer{flex:1;}

/* ---- spiele.html ---- */

  .game-controls{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:14px 0;}
  .game-search{max-width:280px; flex:1; min-width:180px;}
  .game-search input[type="text"]{width:100%; font-family:var(--sans); font-size:13px; padding:8px 10px;
    border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--ink);}

  .game-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:16px; margin-top:14px;}

  .game-card{background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden;
    box-shadow:var(--shadow); transition:transform .2s,box-shadow .2s; display:flex; flex-direction:column; cursor:pointer;}
  .game-card:hover{transform:translateY(-3px); box-shadow:0 16px 36px rgba(31,41,58,.16);}

  .game-cover{position:relative; width:100%; aspect-ratio:2/3; overflow:hidden;
    background:linear-gradient(150deg,var(--cover-a),var(--cover-b));
    display:flex; align-items:center; justify-content:center;}
  .game-cover img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
  .game-cover svg{width:32px; height:32px; color:var(--holo); opacity:.7;}
  .game-status-chip{position:absolute; top:8px; right:8px; font-family:var(--mono); font-size:9.5px;
    letter-spacing:.3px; text-transform:uppercase; padding:3px 7px; border-radius:999px; color:#fff;}
  .game-status-chip[data-status="backlog"]{background:rgba(154,123,74,.88);}
  .game-status-chip[data-status="spielend"]{background:rgba(74,140,140,.88);}
  .game-status-chip[data-status="durchgespielt"]{background:rgba(111,138,118,.88);}
  .game-status-chip[data-status="coop"]{background:rgba(143,127,176,.88);}
  .game-status-chip[data-status="shelved"]{background:rgba(106,118,136,.88);}

  .game-body{padding:10px 12px; display:flex; flex-direction:column; flex:1; gap:4px;}
  .game-title{font-size:13.5px; font-weight:640; line-height:1.3; color:var(--ink); margin:0;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    min-height:calc(1.3em * 2);}
  .game-meta-row{font-size:11px; color:var(--muted); font-family:var(--mono);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

  /* Sterne: .star-row ist die schreibgeschuetzte, kleine Anzeige auf der
     Kachel (nur wenn bewertet), .star-picker die klickbare Variante in der
     Detailansicht/im Formular - ein Klick auf den bereits aktiven Stern
     loescht die Bewertung wieder (gleiches Muster wie bei Filmen/Serien/
     Buechern). */

  .game-progress-track{width:100%; height:5px; border-radius:999px; background:var(--track-c); margin-top:3px; overflow:hidden;}
  .game-progress-fill{height:100%; background:var(--steel); border-radius:999px;}
  .game-progress-label{font-size:10.5px; color:var(--muted); font-family:var(--mono); margin-top:2px;}

  .game-actions{display:flex; gap:6px; margin-top:auto; padding-top:6px;}
  .game-actions .spacer{flex:1;}

        .rawg-result-row:disabled{opacity:.6; cursor:default;}

/* ---- stundenplan.html ---- */

        .tt-week-label{font-size:13px; font-weight:600; color:var(--ink); min-width:180px; text-align:center;}
  .manage-btns{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
  .manage-btns button{font-size:12px; padding:6px 11px;}
  #yearSelect{font-family:var(--sans); font-size:12.5px; font-weight:600; padding:6px 8px; border:1px solid var(--line);
    border-radius:8px; background:var(--panel); color:var(--ink);}
  .modal-year-tag{font-family:var(--mono); font-size:11px; font-weight:600; color:var(--steel); margin-left:6px;}

  /* ---- Wochenraster ---- */
  .tt-grid{display:grid; grid-template-columns:80px repeat(5,1fr); gap:6px; margin-top:6px; position:relative;}
  .tt-today-col{position:absolute; top:-8px; bottom:-8px; background:#a9d0ef; border:none; border-radius:0; z-index:0; pointer-events:none;}
  .tt-head{font-family:var(--mono); font-size:11px; color:var(--muted); text-align:center; padding:6px 2px; position:relative; z-index:1;}
  .tt-head.today{color:var(--steel); font-weight:700;}
  .tt-head.holiday{color:var(--gold); font-weight:700;}
  /* Fehltage (krank/kindkrank): Kopf klickbar (Markierung setzen), markierte Tage bekommen ein Badge */
  .tt-head[data-date]{cursor:pointer; border-radius:8px;}
  .tt-head[data-date]:hover{background:var(--track-c);}
  .tt-head.absent{background:var(--track-c); box-shadow:inset 0 -3px 0 var(--rose);}
  .tt-head.absent.kind-kindkrank{box-shadow:inset 0 -3px 0 var(--violet);}
  .tt-head .abs-badge{display:block; font-size:10px; font-weight:700; color:var(--rose); margin-top:1px;}
  .tt-head.kind-kindkrank .abs-badge{color:var(--violet);}
  /* Krankentage-Dialoge */
  .abs-choice{display:flex; flex-direction:column; gap:8px; margin:6px 0 14px;}
  .abs-choice button{text-align:left; padding:10px 14px; font-size:13.5px;}
  .abs-choice button.on{border-color:var(--steel); background:var(--track-c); font-weight:700;}
  .abs-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:10px 0 14px;}
  .abs-card{border:1px solid var(--line); border-radius:12px; padding:10px 12px; background:var(--panel);}
  .abs-card .lbl{font-family:var(--mono); font-size:10px; letter-spacing:.5px; text-transform:uppercase; color:var(--muted);}
  .abs-card .num{font-size:26px; font-weight:700; color:var(--ink); line-height:1.15;}
  .abs-card .unit{font-size:11px; color:var(--muted);}
  .abs-months{width:100%; border-collapse:collapse; font-size:12.5px; margin-bottom:12px;}
  .abs-months th{font-family:var(--mono); font-size:10px; letter-spacing:.4px; text-transform:uppercase; color:var(--muted); text-align:left; padding:4px 6px; border-bottom:1px solid var(--line);}
  .abs-months td{padding:5px 6px; border-bottom:1px solid var(--line); color:var(--ink);}
  .abs-months td.n, .abs-months th.n{text-align:right; font-family:var(--mono);}
  .abs-list{max-height:200px; overflow-y:auto; display:flex; flex-direction:column; gap:3px;}
  .abs-list-row{display:flex; align-items:center; gap:10px; padding:5px 8px; border-radius:8px; background:var(--track-c); font-size:12.5px;}
  .abs-list-row .d{font-family:var(--mono); flex:1;}
  .abs-list-row button{width:22px; height:22px; padding:0; font-size:10px; display:grid; place-items:center; flex:none;}
  .tt-time{font-family:var(--mono); font-size:11px; color:var(--faint); display:flex; flex-direction:column;
    align-items:center; justify-content:center; text-align:center; padding:4px;}
  .tt-cell{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:8px 9px; min-height:64px;
    cursor:pointer; display:flex; flex-direction:column; gap:3px; position:relative; z-index:1;}
  .tt-cell:hover{border-color:var(--steel);}
  .tt-cell.empty{align-items:center; justify-content:center; color:var(--faint); font-size:18px;}
  .tt-cell.override{border-style:dashed; border-color:var(--amber);}
  /* Vertretungsstunde: eigener Rand-Akzent (Gold), damit sie neben
     Klassenarbeit (Rose, links) und Tages-Override (Amber, gestrichelt) als
     drittes, gleichzeitig sichtbares Signal unterscheidbar bleibt. */
  .tt-cell.substitute{border-right:4px solid var(--gold);}
  .tt-substitute-badge{position:absolute; top:4px; left:5px; font-size:11px;}
  .tt-cell-substitute-note{font-size:9.5px; color:var(--gold); font-weight:600; line-height:1.3; overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap;}
  .tt-cell-class{font-size:13px; font-weight:700; color:var(--ink); line-height:1.2;}
  .tt-cell-fach{align-self:flex-start; font-family:var(--mono); font-size:9.5px; padding:2px 7px; border-radius:999px;}
  .tt-cell-fach[data-fach="Mathe"]{background:#e8f0f6; color:var(--badge-steel);}
  .tt-cell-fach[data-fach="Physik"]{background:#efeaf6; color:var(--badge-violet);}
  .tt-cell-fach[data-fach="NW+"]{background:#eaf1ea; color:var(--badge-sage);}
  .tt-cell-lesson{font-size:11px; color:var(--muted); line-height:1.3; overflow:hidden; text-overflow:ellipsis;
    white-space:nowrap; margin-top:auto; cursor:pointer;}
  .tt-cell-lesson:hover{color:var(--steel); text-decoration:underline;}
  .tt-cell-prep{font-size:9.5px; color:var(--faint); line-height:1.3; overflow:hidden; text-overflow:ellipsis;
    white-space:nowrap;}
  .tt-cell-note{font-size:9.5px; color:var(--amber); font-weight:600; line-height:1.3; overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap;}
  .tt-override-badge{position:absolute; top:4px; right:5px; font-size:9px; color:var(--amber); font-family:var(--mono);}
  /* Klassenarbeits-Markierung: bewusst nur ein Rand-Akzent statt Flaechenfarbe,
     damit sie sich nicht mit der Status-Einfaerbung unten beisst - beide
     Signale bleiben so gleichzeitig sichtbar. */
  .tt-cell.exam-day{border-left:4px solid var(--rose);}
  .tt-exam-badge{position:absolute; bottom:4px; right:5px; font-size:11px;}
  /* Status der verknuepften Unterrichtsstunde: Idee noch nicht ausgearbeitet
     (gelb), Revision muss ueberarbeitet werden (rot), Geplant/Erprobt
     einsatzbereit (gruen). */
  .tt-cell.lesson-status-warn{background:#f8f1dc;}
  .tt-cell.lesson-status-danger{background:#f7e9e7;}
  .tt-cell.lesson-status-ready{background:#e7f0e4;}
  /* Klassenarbeit mit zugeordnetem Katalog-Eintrag: gleiches Gruen wie eine
     einsatzbereite Unterrichtsstunde, da hier ebenso nichts mehr fehlt. */
  .tt-cell.exam-test-linked{background:#e7f0e4;}

  /* Handy: Tagesansicht (siehe stundenplan.html#renderDay) */
  .tt-grid.day-mode{display:block; margin-top:10px;}
  .tt-day-nav{display:flex; align-items:stretch; gap:8px; margin-bottom:10px;}
  .tt-day-nav .tt-day-step{flex:none; width:48px; padding:0; font-size:15px;}
  .tt-day-nav .tt-day-title{flex:1; min-width:0; font-family:var(--sans); font-size:16px; font-weight:700; color:var(--ink);
    padding:9px 6px; line-height:1.25; background:var(--panel); border:1px solid var(--line); border-radius:10px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;}
  .tt-day-nav .tt-day-title.today{border-color:var(--steel); color:var(--steel);}
  .tt-day-title .abs-badge.hol{color:var(--gold);}
  .tt-day-strip{display:flex; gap:6px; margin-bottom:12px;}
  .tt-day-chip{flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:2px; padding:7px 0 6px;
    font-family:var(--mono); font-size:11px; font-weight:600; color:var(--muted); background:var(--panel);
    border:1px solid var(--line); border-radius:10px;}
  .tt-day-chip span{font-size:10px; font-weight:400; color:var(--faint);}
  .tt-day-chip.active{border-color:var(--steel); color:var(--badge-steel); background:var(--track-c);}
  .tt-day-chip.today{color:var(--steel);}
  .tt-day-chip.holiday{color:var(--gold);}
  .tt-day-chip.absent{box-shadow:inset 0 -3px 0 var(--rose);}
  .tt-day-list{display:flex; flex-direction:column; gap:8px;}
  .tt-grid.day-mode .tt-cell{min-height:84px; padding:11px 13px; gap:5px;}
  .tt-grid.day-mode .tt-cell.empty{min-height:56px;}
  .tt-grid.day-mode .tt-cell-class{font-size:16px;}
  .tt-grid.day-mode .tt-cell-fach{font-size:11px; padding:2px 8px;}
  .tt-grid.day-mode .tt-cell-lesson{font-size:13.5px; white-space:normal; margin-top:4px;}
  .tt-grid.day-mode .tt-cell-prep, .tt-grid.day-mode .tt-cell-note, .tt-grid.day-mode .tt-cell-substitute-note{
    font-size:12px; white-space:normal;}
  .tt-grid.day-mode .tt-override-badge{font-size:10px;}
  @media(max-width:720px){
    .week-nav-btns #prevWeekBtn, .week-nav-btns #nextWeekBtn{display:none;}

    /* Kopfbereich des Stundenplans kondensiert: Beschreibung weg, Woche + "Heute"
       in einer Zeile, Werkzeuge klein und mit Kurzlabels. */
    .page-stundenplan .lede{display:none;}
    .page-stundenplan header{margin-bottom:0;}
    .page-stundenplan .week-nav{margin:10px 0 8px; gap:8px;}
    .page-stundenplan .week-nav-btns{width:100%;}
    .page-stundenplan .tt-week-label{min-width:0; text-align:left; font-size:13px;}
    .page-stundenplan .week-nav-btns #todayBtn{padding:6px 14px;}
    .page-stundenplan .manage-btns{display:none; gap:6px; width:100%;}
    .page-stundenplan .week-nav.tools-open .manage-btns{display:flex;}
    .page-stundenplan .week-nav-btns{gap:8px;}
    .page-stundenplan .tt-week-label{flex:1;}
    #toolsToggleBtn{display:inline-flex; align-items:center; justify-content:center; min-width:38px; padding:6px 0;}
    #toolsToggleBtn[aria-expanded="true"]{background:var(--track-c); border-color:var(--steel);}
    .page-stundenplan .manage-btns button, .page-stundenplan .manage-btns select{font-size:12px; padding:6px 9px; min-height:34px;}
    .page-stundenplan .manage-btns select{max-width:92px;}
    .m-hide{display:none;}
  }
  .m-only{display:none;}
  .tt-cell.holiday{background:var(--track-c); color:var(--gold); font-family:var(--mono); font-size:11px;
    align-items:center; justify-content:center; cursor:default;}
  .tt-cell.holiday:hover{border-color:var(--line);}

  @media(max-width:820px){
    .tt-grid{grid-template-columns:56px repeat(5,minmax(90px,1fr)); font-size:12px; overflow-x:auto;}
  }

  /* ---- Klassen-/Blockzeiten-Verwaltung (kleine Modale) ---- */
  .manage-list{display:flex; flex-direction:column; gap:6px; margin-bottom:14px; max-height:280px; overflow-y:auto;}
  .manage-row{display:flex; align-items:center; gap:8px; padding:8px 10px; background:var(--track-c); border-radius:8px;}
  .manage-row span.mr-name{font-size:13px; font-weight:600; color:var(--ink); flex:1;}
  .manage-row .chip{font-size:10px;}
  .manage-row input[type="time"]{font-family:var(--sans); font-size:12.5px; padding:5px 6px; border:1px solid var(--line);
    border-radius:6px; background:var(--panel); width:88px;}
  .manage-row button{width:24px; height:24px; padding:0; font-size:11px; display:grid; place-items:center; flex:none;}
  .manage-add-row{display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap;}
  .manage-add-row .field{margin-bottom:0; flex:1; min-width:110px;}

  /* Klassen-Verwaltung: eigene, groessere Liste (breiteres Modal, siehe
     #classesModal), da jede Zeile deutlich mehr Inhalt traegt (Kopf,
     Klassenarbeiten, Einheiten-Jahresplan) als die schlichten Blockzeiten-/
     Stundenplan-Zeilen oben - als zweispaltiges Kartenlayout statt der
     engen Inline-Reihen, damit das bei mehreren Klassen/Terminen/Einheiten
     nicht mehr zusammengequetscht wirkt. */
  #classesList{max-height:min(64vh,620px); gap:12px;}
  .manage-row-class{background:var(--panel); border:1px solid var(--line); border-radius:12px;
    padding:14px 16px 16px; display:flex; flex-direction:column; gap:14px;}
  /* Zeile in der schlanken Klassenliste (Link auf klasse.html) - Nachfolger
     der frueheren aufgeklappten Klassenkarte. */
  .class-link-row{flex-direction:row; align-items:center; gap:10px; padding:12px 14px; text-decoration:none;
    color:inherit; flex-wrap:wrap;}
  .class-link-row:hover{border-color:var(--steel);}
  .class-link-row .mr-name{font-size:15px; font-weight:650; color:var(--ink);}
  .class-link-row .chip{font-size:11px;}
  .class-link-info{flex:1; min-width:160px; font-size:12px; color:var(--muted); font-family:var(--mono);}
  .class-link-go{font-size:12px; color:var(--steel); flex:none;}
  .mr-class-head{display:flex; align-items:center; gap:10px; padding-bottom:12px; border-bottom:1px solid var(--line);}
  .mr-class-head .mr-name{font-size:15.5px;}
  .mr-class-head .chip{font-size:11px;}
  .mr-class-head button{width:26px; height:26px; padding:0; font-size:12px; display:grid; place-items:center; flex:none;}
  .mr-class-body{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
  @media(max-width:640px){ .mr-class-body{grid-template-columns:1fr;} }
  .mr-col-title{font-family:var(--mono); font-size:10.5px; letter-spacing:.5px; text-transform:uppercase;
    color:var(--muted); margin:0 0 9px; display:block;}
  .mr-exam-col{display:flex; flex-direction:column; gap:9px;}
  .mr-exam-chips{display:flex; flex-wrap:wrap; gap:6px;}
  .mr-exam-chip{display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:11px;
    padding:4px 4px 4px 10px; border-radius:999px; background:var(--rose); color:#fff;}
  .mr-exam-chip button{width:16px; height:16px; padding:0; font-size:9px; border:none; background:rgba(255,255,255,.25);
    color:#fff; border-radius:50%; display:grid; place-items:center; line-height:1;}
  .mr-exam-chip button:hover{background:rgba(255,255,255,.45);}
  .mr-exam-add{display:flex; align-items:center; gap:6px;}
  .mr-exam-add input[type="date"]{font-family:var(--sans); font-size:12px; padding:6px 8px; border:1px solid var(--line);
    border-radius:7px; background:var(--panel); flex:1; min-width:0;}
  .mr-exam-add button{padding:6px 11px; font-size:11.5px; width:auto; height:auto; flex:none;}
  .mr-units-section{display:flex; flex-direction:column; gap:9px;}
  .mr-units-list{display:flex; flex-direction:column; gap:5px;}
  .mr-unit-row{display:flex; align-items:center; gap:7px; background:var(--track-c); border-radius:7px; padding:7px 9px;}
  .mr-unit-idx{font-family:var(--mono); font-size:10.5px; color:var(--faint); flex:none; width:16px;}
  .mr-unit-name{flex:1; font-size:12.5px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .mr-unit-row button{width:22px; height:22px; padding:0; font-size:10.5px; display:grid; place-items:center; flex:none;}
  .mr-units-empty{font-size:12px; color:var(--faint); margin:0;}
  .mr-units-add{display:flex; align-items:center; gap:6px;}
  .mr-units-add select{font-family:var(--sans); font-size:12px; padding:6px 8px; border:1px solid var(--line);
    border-radius:7px; background:var(--panel); flex:1; min-width:0;}
  .mr-units-add button{padding:6px 11px; font-size:11.5px; width:auto; height:auto; flex:none;}

  /* ---- Stundenplan-Vorlagen ---- */
  .tt-list-row{display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--track-c);
    border-radius:8px; margin-bottom:6px;}
  .tt-list-row .tt-list-name{font-size:13.5px; font-weight:600; color:var(--ink); flex:1;}
  .tt-list-row .tt-list-range{font-family:var(--mono); font-size:11px; color:var(--muted);}
  .tt-edit-meta{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px;}
  .tt-edit-meta .field{flex:1; min-width:140px; margin-bottom:0;}
  .tt-edit-grid{display:grid; grid-template-columns:70px repeat(5,1fr); gap:6px; margin-bottom:14px;}
  .tt-edit-grid select{width:100%; font-family:var(--sans); font-size:11.5px; padding:6px 5px;
    border:1px solid var(--line); border-radius:6px; background:var(--panel); color:var(--ink);}
  .tt-edit-grid .tt-time{font-size:10px;}

  /* ---- Unterrichts-Historie je Klasse ---- */
  .class-history-section{margin-top:28px;}
  .class-history-head{display:flex; align-items:center; justify-content:space-between; gap:12px;}
  .class-history-title{font-size:15px; font-weight:700; color:var(--ink); margin:0 0 4px;}
  .class-history-summary{font-size:12.5px; color:var(--muted); margin:0;}
  .class-history-bulk-toggle{font-family:var(--mono); font-size:10.5px; letter-spacing:.4px; padding:6px 12px;
    border:1px solid var(--line); border-radius:999px; background:var(--panel); color:var(--muted); cursor:pointer;}
  .class-history-bulk-toggle:hover{border-color:var(--steel); color:var(--ink);}
  .class-history-bulk-toggle.active{background:var(--steel); border-color:var(--steel); color:#fff;}
  .class-history-bulk-bar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px;
    padding:10px 13px; background:#eef3f8; border:1px solid var(--steel); border-radius:9px; font-size:12.5px;}
  .class-history-bulk-count{font-weight:700; color:var(--ink); margin-right:auto;}
  .class-history-bulk-bar button{font-family:var(--mono); font-size:10.5px; padding:6px 12px; border-radius:999px;
    border:1px solid var(--line); background:var(--panel); color:var(--muted); cursor:pointer;}
  .class-history-bulk-bar button:hover{border-color:var(--steel); color:var(--ink);}
  .class-history-bulk-bar button.danger{background:#a3453d; border-color:#a3453d; color:#fff; font-weight:600;}
  .class-history-bulk-bar button.danger:hover{background:#8a3a33; border-color:#8a3a33; color:#fff;}
  .class-history-bulk-bar button:disabled{opacity:.5; cursor:default;}
  .class-history-bulk-bar button:disabled:hover{border-color:var(--line); color:var(--muted);}
  .class-history-list{display:flex; flex-direction:column; gap:6px; margin-top:14px;}
  .class-history-row{display:flex; align-items:center; gap:12px; padding:10px 13px; background:var(--panel);
    border:1px solid var(--line); border-radius:9px; text-decoration:none;}
  .class-history-row:hover{border-color:var(--steel);}
  .class-history-row.open{border-style:dashed; cursor:pointer;}
  .class-history-check{display:none; flex:none; margin:0;}
  .class-history-list.bulk-active .class-history-check{display:inline-block;}
  .class-history-list.bulk-active .class-history-row.open{opacity:.4; pointer-events:none;}
  .class-history-row.selected{border-color:var(--steel); background:#eef3f8;}
  /* Gleiche Klassenarbeits-Markierung wie im Wochenraster oben (Rand-Akzent
     statt Flaechenfarbe, siehe .tt-cell.exam-day). */
  .class-history-row.exam-day{border-left:4px solid var(--rose);}
  .class-history-exam-badge{color:var(--rose); font-size:12px; flex:none;}
  /* Gleiche Vertretungs-Markierung wie im Wochenraster (Rand-Akzent statt
     Flaechenfarbe, siehe .tt-cell.substitute) - bewusst rechts statt links
     wie exam-day, damit beide Markierungen an einem Termin gleichzeitig
     sichtbar bleiben statt sich zu ueberschreiben. */
  .class-history-row.substitute{border-right:4px solid var(--gold);}
  .class-history-substitute-badge{color:var(--gold); font-size:12px; flex:none;}
  /* Nur bei noch nicht verknuepfter Stunde sichtbar (siehe classHistoryRowHtml) -
     ohne Stundentitel als Kontext ist die Aufgaben-Notiz sonst nur im
     Badge-Tooltip zu finden. Gekuerzt statt umgebrochen, damit die Zeile
     einzeilig bleibt; voller Text weiterhin als Tooltip. */
  .class-history-substitute-note{font-family:var(--mono); font-size:10.5px; color:var(--gold); font-weight:600;
    flex:none; max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .class-history-row.open .class-history-title-text{color:var(--faint); font-weight:500; font-style:italic;}
  .class-history-index{font-family:var(--mono); font-size:11px; color:var(--faint); flex:none; width:20px;}
  .class-history-date{font-family:var(--mono); font-size:11.5px; color:var(--muted); flex:none; width:140px;}
  .class-history-title-text{font-size:13.5px; font-weight:600; color:var(--ink); flex:1;}
  .class-history-unit-chip{font-family:var(--mono); font-size:10px; color:var(--badge-gold); background:#faf3de;
    padding:2px 8px; border-radius:999px; flex:none; max-width:180px; overflow:hidden; text-overflow:ellipsis;
    white-space:nowrap;}
  .class-history-empty{color:var(--faint); font-size:13px; padding:6px 0;}
  @media(max-width:720px){
    .class-history-row{flex-wrap:wrap; row-gap:4px;}
    .class-history-date{width:auto;}
    .class-history-title-text{flex:1 1 100%; min-width:0; order:5;}
    .class-history-unit-chip{order:6; max-width:100%;}
    .class-history-list .status-pill{order:7;}

    /* Klassen-Tabs: eine durchgehende, seitlich wischbare Leiste statt mehrzeilig
       umbrechender Reiter; groessere Tippflaechen. */
    #classHistoryTabs{display:flex; flex-wrap:nowrap; width:100%; overflow-x:auto; overscroll-behavior-x:contain;
      scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:5px;}
    #classHistoryTabs::-webkit-scrollbar{display:none;}
    #classHistoryTabs .period-tab{flex:none; min-height:42px; padding:0 18px; font-size:13.5px; white-space:nowrap;
      scroll-snap-align:center;}
    .class-history-head{align-items:flex-start;}
    .class-history-bulk-toggle{min-height:38px; padding:0 14px; flex:none;}
    .class-history-bulk-bar button{min-height:38px; padding:0 14px; font-size:12px;}
    .class-history-bulk-bar{gap:8px;}
  }
  .class-history-list .status-pill{font-family:var(--mono); font-size:10px; padding:3px 9px; border-radius:999px;
    font-weight:600; flex:none;}
  .class-history-list .status-pill[data-status="Idee"]{background:var(--track-c); color:var(--muted);}
  .class-history-list .status-pill[data-status="Geplant"]{background:#e8f0f6; color:var(--badge-steel);}
  .class-history-list .status-pill[data-status="Erprobt"]{background:#eaf1ea; color:var(--badge-sage);}
  .class-history-list .status-pill[data-status="Revision"]{background:#f5ece0; color:var(--badge-amber);}

  /* ---- Tageszellen-Modal ---- */
  .daycell-info{font-size:12.5px; color:var(--muted); margin-bottom:14px;}
  .daycell-body{display:grid; grid-template-columns:230px 1fr; gap:26px; align-items:start;}
  @media(max-width:640px){ .daycell-body{grid-template-columns:1fr;} }
  .daycell-col{display:flex; flex-direction:column; min-width:0;}
  .daycell-section{margin-bottom:18px;}
  .daycell-section-label{font-family:var(--mono); font-size:11px; letter-spacing:.5px; text-transform:uppercase;
    color:var(--muted); margin:0 0 8px;}
  .daycell-substitute-toggle{display:flex; align-items:center; gap:7px; font-size:13px; color:var(--ink); cursor:pointer;}
  .lesson-pick-search{width:100%; font-family:var(--sans); font-size:13px; padding:8px 10px; border:1px solid var(--line);
    border-radius:8px; background:var(--panel); color:var(--ink); margin-bottom:8px;}
  .lesson-pick-list{max-height:230px; overflow-y:auto; display:flex; flex-direction:column; gap:4px;}
  .lesson-pick-row{padding:8px 10px; background:var(--track-c); border-radius:8px; cursor:pointer; font-size:13px;
    color:var(--ink); display:flex; justify-content:space-between; gap:8px;}
  .lesson-pick-row:hover{background:#e2eaf1;}
  .lesson-pick-row .chip{font-size:9.5px;}
  .lesson-linked{display:flex; flex-direction:column; gap:8px; padding:9px 11px;
    background:#eaf1ea; border-radius:8px; font-size:13px; color:var(--badge-ink); margin-bottom:8px;}
  .lesson-linked-head{display:flex; align-items:center; justify-content:space-between; gap:10px;}
  .lesson-linked button{font-size:11px; padding:5px 9px; flex:none;}
  .lesson-linked-extra{font-size:12px; color:var(--muted); line-height:1.4; border-top:1px solid rgba(38,48,65,.12);
    padding-top:8px;}
  .lesson-linked-extra p{margin:0 0 6px;}
  .lesson-linked-extra p:last-child{margin-bottom:0;}
  .lesson-linked-extra strong{color:var(--badge-ink);}
  .lesson-suggestion{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px;
    background:#eaf1f6; border:1.5px solid var(--steel); border-radius:9px; margin-bottom:8px;}
  .lesson-suggestion-main{display:flex; flex-direction:column; gap:2px; min-width:0;}
  .lesson-suggestion-lbl{font-family:var(--mono); font-size:9.5px; letter-spacing:.5px; text-transform:uppercase;
    color:var(--badge-steel); font-weight:700;}
  .lesson-suggestion-title{font-size:13.5px; font-weight:640; color:var(--badge-ink); overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap;}
  .lesson-suggestion-unit{font-size:11px; color:var(--muted);}
  .lesson-suggestion button{font-size:11px; padding:6px 10px; flex:none; background:var(--steel);
    border-color:var(--steel); color:#fff; font-weight:600;}
  .schedule-unit-row{display:flex; gap:8px;}
  .schedule-unit-row select{flex:1; font-family:var(--sans); font-size:13px; padding:8px 10px;
    border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--ink);}
  .schedule-unit-row button{flex:none; font-size:12.5px; padding:8px 14px;}
  #scheduleUnitSection .hint{margin-top:8px;}
  .lesson-new-toggle{width:100%; text-align:left; font-size:12.5px; color:var(--steel); font-weight:600;
    padding:7px 10px; margin-top:8px; border:1px dashed var(--line); border-radius:8px; background:none;}
  .lesson-new-toggle:hover{border-color:var(--steel); background:var(--track-c);}
  .lesson-new-form{display:none; gap:8px; margin-top:8px;}
  .lesson-new-form input{flex:1; font-family:var(--sans); font-size:13px; padding:7px 9px;
    border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--ink);}
  .lesson-new-form button{padding:7px 12px; font-size:12.5px;}

/* ---- unterrichtsstunden.html ---- */

  /* ---- Filterleiste + Karten-Bibliothek ---- */
  .lesson-filters{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:14px 0;}
  .lesson-filters input[type="text"]{font-family:var(--sans); font-size:13px; padding:7px 10px;
    border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--ink); min-width:180px; flex:1;}
  .lesson-filters select{font-family:var(--sans); font-size:13px; padding:7px 8px;
    border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--ink);}
  .lesson-filters-reset{font-size:11.5px; color:var(--steel); background:none; border:none;
    text-decoration:underline; padding:2px 4px;}

  .lesson-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:14px;}
  .lesson-card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px 16px;
    cursor:pointer; display:flex; flex-direction:column; gap:8px;}
  .lesson-card:hover{border-color:var(--steel);}
  .lesson-card-title{font-size:14px; font-weight:600; color:var(--ink); line-height:1.3;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
  .lesson-card-chips{display:flex; flex-wrap:wrap; gap:5px;}
  .chip-mono{font-family:var(--mono); font-size:10.5px; padding:3px 8px; border-radius:999px;
    background:var(--track-c); color:var(--muted);}
  .lesson-card-foot{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto;}
  .status-pill{font-family:var(--mono); font-size:10px; padding:3px 9px; border-radius:999px; font-weight:600;}
  .status-pill[data-status="Idee"]{background:var(--track-c); color:var(--muted);}
  .status-pill[data-status="Geplant"]{background:#e8f0f6; color:var(--badge-steel);}
  .status-pill[data-status="Erprobt"]{background:#eaf1ea; color:var(--badge-sage);}
  .status-pill[data-status="Revision"]{background:#f5ece0; color:var(--badge-amber);}
  .lesson-card-length{font-family:var(--mono); font-size:11px; color:var(--faint);}

  /* ---- Vollbild-Editor (wie der PDF-Reader) ---- */
  #editView{display:none;}
  #editView.open{
    display:flex; flex-direction:column;
    position:fixed; inset:0; z-index:200;
    background:linear-gradient(155deg,var(--ground-a),var(--ground-b));
    padding:14px 16px 16px;
  }
  .edit-topbar{display:flex; align-items:center; gap:12px; margin-bottom:10px; flex-wrap:wrap;}
  .edit-topbar button{padding:7px 12px;}
  #editTitle{flex:1; min-width:160px; font-family:var(--sans); font-size:16px; font-weight:600; color:var(--ink);
    padding:8px 10px; border:1px solid transparent; border-radius:8px; background:transparent;}
  #editTitle:hover, #editTitle:focus{border-color:var(--line); background:var(--panel);}
  .edit-save-state{font-family:var(--mono); font-size:11px; color:var(--faint); min-width:70px;}

  .edit-body{flex:1; min-height:0; overflow-y:auto; background:var(--panel); border:1px solid var(--line);
    border-radius:12px; padding:18px 22px;}
  .edit-section{max-width:100%; margin-bottom:26px;}
  .edit-section-label{font-family:var(--mono); font-size:11px; letter-spacing:.6px; text-transform:uppercase;
    color:var(--muted); margin:0 0 8px;}
  .edit-meta-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-bottom:18px;}
  .edit-meta-row .field{margin-bottom:0;}

  /* ---- Rich-Text-Editor (minimaler WYSIWYG, contenteditable) ---- */
  .rt-wrap{border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--panel);}
  .rt-toolbar{display:flex; gap:2px; padding:5px; border-bottom:1px solid var(--line); background:var(--track-c); flex-wrap:wrap;}
  .rt-toolbar button{width:28px; height:26px; padding:0; font-size:12.5px; display:grid; place-items:center;
    border:1px solid transparent; background:none; color:var(--muted); border-radius:6px;}
  .rt-toolbar button:hover{background:var(--panel); color:var(--ink);}
  .rt-toolbar button.rt-img{width:auto; padding:0 8px; font-size:11px;}
  .rt-editor{min-height:90px; max-height:340px; overflow-y:auto; padding:10px 12px; font-size:13.5px;
    color:var(--ink); line-height:1.5;}
  .rt-editor:focus{outline:none;}
  .rt-editor img{max-width:100%; border-radius:4px; margin:4px 0; display:block;}
  .rt-editor ul, .rt-editor ol{margin:6px 0; padding-left:22px;}
  .rt-editor h3{font-size:14.5px; margin:8px 0 4px;}
  .rt-editor.compact{min-height:56px; max-height:200px; font-size:13px;}
  .rt-editor a, .present-extra-body a{color:var(--steel); text-decoration:underline;}
  .rt-editor a:hover, .present-extra-body a:hover{color:var(--ink);}

  /* ---- Ablaufplan-Tabelle ---- */
  .ablauf-table{width:100%; border-collapse:collapse;}
  .ablauf-table > tbody > tr{border-bottom:6px solid transparent;}
  .ablauf-row{background:var(--panel);}
  .ablauf-row[data-color="rot"]{background:#f7e9e7;}
  .ablauf-row[data-color="braun"]{background:#f5ece0;}
  .ablauf-row[data-color="gruen"]{background:#e9f1e9;}
  /* Diese drei Hintergruende bleiben bewusst hell in beiden Themes (wie die
     --badge-*-Chips) - im Dunkel-Theme wuerde sonst der helle --ink-Text auf
     ihnen verschwinden. Nur in der read-only Unterrichtsansicht relevant, da
     die Zeilen im Bearbeiten-Modus stattdessen Input-Felder mit eigenem
     --panel-Hintergrund zeigen. Mit ".ablauf-table.read-only"-Praefix, damit
     das hoehere Spezifitaet hat als die weiter unten stehenden
     ".ablauf-table.read-only .ablauf-phase-label" & Co. (sonst gewinnt bei
     gleicher Spezifitaet die spaeter im Stylesheet stehende Regel). */
  .ablauf-table.read-only .ablauf-row[data-color="rot"] .ablauf-phase-label,
  .ablauf-table.read-only .ablauf-row[data-color="rot"] .ablauf-zeit-label,
  .ablauf-table.read-only .ablauf-row[data-color="rot"] .ablauf-methode-label,
  .ablauf-table.read-only .ablauf-row[data-color="rot"] .rt-editor,
  .ablauf-table.read-only .ablauf-row[data-color="braun"] .ablauf-phase-label,
  .ablauf-table.read-only .ablauf-row[data-color="braun"] .ablauf-zeit-label,
  .ablauf-table.read-only .ablauf-row[data-color="braun"] .ablauf-methode-label,
  .ablauf-table.read-only .ablauf-row[data-color="braun"] .rt-editor,
  .ablauf-table.read-only .ablauf-row[data-color="gruen"] .ablauf-phase-label,
  .ablauf-table.read-only .ablauf-row[data-color="gruen"] .ablauf-zeit-label,
  .ablauf-table.read-only .ablauf-row[data-color="gruen"] .ablauf-methode-label,
  .ablauf-table.read-only .ablauf-row[data-color="gruen"] .rt-editor{color:var(--badge-ink);}
  .ablauf-row td{padding:8px; vertical-align:top; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .ablauf-row td:first-child{border-left:1px solid var(--line); border-top-left-radius:8px; border-bottom-left-radius:8px;}
  .ablauf-row td:last-child{border-right:1px solid var(--line); border-top-right-radius:8px; border-bottom-right-radius:8px;}
  .ablauf-phase{width:150px;}
  .ablauf-zeit{width:70px;}
  .ablauf-methode{width:130px;}
  .ablauf-actions{width:96px;}
  .ablauf-table input[type="text"]{width:100%; font-family:var(--sans); font-size:12.5px; padding:6px 7px;
    border:1px solid var(--line); border-radius:6px; background:var(--panel); color:var(--ink);}
  .ablauf-row-actions{display:flex; gap:3px; flex-wrap:wrap;}
  .ablauf-row-actions button{width:24px; height:24px; padding:0; font-size:11px; display:grid; place-items:center;}
  .ablauf-color-select{font-family:var(--sans); font-size:11px; padding:4px 5px; border:1px solid var(--line);
    border-radius:6px; background:var(--panel); margin-top:4px; width:100%;}
  .ablauf-add-row{margin-top:10px; font-size:12.5px;}

  /* ---- PDF-Import (Verlaufsplanung aus meinunterricht-PDF) ---- */
  .pdf-import-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:4px;}
  .pdf-import-row .hint{margin-top:0;}
  .pdf-import-preview{margin:8px 0 14px; padding:10px 12px; border:1px solid var(--line); border-radius:10px;
    background:var(--track-c);}
  .pdf-import-preview p{margin:0 0 4px; font-size:12.5px; color:var(--ink);}
  .pdf-import-actions{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px;}
  .pdf-import-actions button{font-size:12px; padding:6px 10px;}

  .ablauf-table tfoot td{border-top:1px solid var(--line); padding:10px 8px 2px;}
  .ablauf-sum{font-family:var(--mono); font-size:11px; font-weight:600; color:var(--muted);}
  .ablauf-table.read-only tfoot td{padding:14px 14px 2px;}
  #presentAblaufSum{font-size:12.5px;}

  /* ---- Material (Drag & Drop) ---- */
  .material-drop{border:2px dashed var(--line); border-radius:10px; padding:22px; text-align:center;
    color:var(--faint); font-size:13px; cursor:pointer;}
  .material-drop.drag{border-color:var(--steel); color:var(--badge-steel); background:#eaf1f6;}
  .material-list{display:flex; flex-direction:column; gap:6px; margin-top:10px;}
  .material-item{display:flex; align-items:center; gap:10px; padding:8px 10px; background:var(--track-c);
    border-radius:8px; font-size:13px;}
  .material-item a{color:var(--ink); text-decoration:none; font-weight:560; flex:1; min-width:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .material-item a:hover{color:var(--steel);}
  .material-item .material-size{font-family:var(--mono); font-size:11px; color:var(--faint); flex:none;}
  .material-item button{width:24px; height:24px; flex:none; display:grid; place-items:center;
    color:var(--faint); font-size:12px; border:none; background:none;}
  .material-item button:hover{color:#a3453d;}

  @media(max-width:720px){
    .edit-body{padding:14px 14px;}
    #editTitle{font-size:14.5px;}
    .ablauf-phase, .ablauf-zeit, .ablauf-methode{width:auto;}
  }

  /* ---- Unterrichtsansicht: grosse, lesefreundliche Vollbild-Ansicht fuer
     waehrend des Unterrichtens - bewusst read-only (kein Formular), damit
     man sich beim Vorlesen/Herumgehen nicht versehentlich etwas veraendert. */
  #presentView{display:none;}
  #presentView.open{
    display:flex; position:fixed; inset:0; z-index:200;
  }
  .present-box{display:flex; flex-direction:column; width:100%; height:100%;
    background:linear-gradient(155deg,var(--ground-a),var(--ground-b));
    padding:14px 16px 16px;}

  /* Ab Desktop-Breite: schmalere, breite Modal-Karte statt Vollbild -
     auf Handy/Tablet bleibt es die gewohnte Vollbild-Ansicht. */
  @media(min-width:1025px){
    #presentView.open{background:rgba(20,26,36,.55); align-items:center; justify-content:center; padding:20px;}
    .present-box{width:100%; max-width:980px; height:auto; max-height:88vh; min-height:0;
      border-radius:16px; box-shadow:var(--shadow); overflow:hidden;}
  }

  .present-topbar{display:flex; align-items:center; gap:12px; margin-bottom:10px; flex-wrap:wrap;}
  .present-topbar button{padding:7px 12px;}
  .present-topbar h2{flex:1; min-width:160px; margin:0; font-size:19px; color:var(--ink);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .present-edit-btn{background:var(--steel); border-color:var(--steel); color:#fff; font-weight:600;}

  .present-body{flex:1; min-height:0; overflow-y:auto; background:var(--panel); border:1px solid var(--line);
    border-radius:12px; padding:22px 26px;}
  .present-meta{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:6px;}
  .present-meta .chip-mono{font-size:12px; padding:4px 10px;}
  .present-lerngegenstand{font-size:15px; color:var(--muted); margin:4px 0 18px;}
  .present-cs-link{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600;
    color:var(--steel); text-decoration:none; padding:6px 12px; border:1px solid var(--steel); border-radius:8px;
    margin-bottom:18px;}
  .present-cs-link:hover{background:var(--steel); color:#fff;}

  .ablauf-table.read-only{font-size:15px;}
  .ablauf-table.read-only td{padding:12px 14px;}
  .ablauf-table.read-only .ablauf-phase-label{font-weight:700; color:var(--ink);}
  .ablauf-table.read-only .ablauf-zeit-label{font-family:var(--mono); color:var(--muted);}
  .ablauf-table.read-only .ablauf-methode-label{color:var(--muted); font-size:13px;}
  .ablauf-table.read-only .rt-editor{font-size:15px; max-height:none; padding:0;}

  /* Handy: Unterrichtsansicht ohne Tabelle - jede Ablauf-Zeile wird zu einer
     Karte (Phase + Zeit oben, Lehrerimpuls volle Breite, Methode darunter). */
  @media(max-width:720px){
    .present-box{padding:10px 10px 12px;}
    .present-body{padding:14px 14px;}
    .present-topbar{gap:8px;}
    .present-topbar h2{order:3; flex:1 1 100%; min-width:0; white-space:normal; font-size:18px; line-height:1.25;}
    .present-edit-btn{margin-left:auto;}
    .present-lerngegenstand{margin-bottom:14px;}

    .ablauf-table.read-only, .ablauf-table.read-only tbody, .ablauf-table.read-only tfoot{display:block;}
    .ablauf-table.read-only thead{display:none;}
    .ablauf-table.read-only{font-size:15px;}
    .ablauf-table.read-only > tbody > tr.ablauf-row{display:grid; grid-template-columns:1fr auto; gap:6px 12px;
      align-items:baseline; padding:12px 14px; margin-bottom:10px; border:1px solid var(--line); border-radius:12px;}
    .ablauf-table.read-only .ablauf-row td, .ablauf-table.read-only .ablauf-row td:first-child,
    .ablauf-table.read-only .ablauf-row td:last-child{
      display:block; width:auto; padding:0; border:0; border-radius:0; min-width:0;}
    .ablauf-table.read-only .ablauf-row td:empty{display:none;}
    .ablauf-table.read-only .ablauf-row td.ablauf-zeit{text-align:right; white-space:nowrap;}
    .ablauf-table.read-only .ablauf-row td:nth-child(3), .ablauf-table.read-only .ablauf-row td.ablauf-methode{grid-column:1 / -1;}
    .ablauf-table.read-only .ablauf-methode-label:not(:empty)::before{content:"Methode: "; font-weight:600;}
    .ablauf-table.read-only .rt-editor{overflow-wrap:anywhere; min-height:0;}
    .ablauf-table.read-only .ablauf-row td:has(> span:empty){display:none;}
    .ablauf-table.read-only tfoot tr{display:flex; justify-content:flex-end;}
    .ablauf-table.read-only tfoot td, .ablauf-table.read-only tfoot td:empty{display:block; padding:4px 2px 0; width:auto;}
    .ablauf-table.read-only tfoot td:empty{display:none;}
  }

  .present-extras{margin-top:26px; display:flex; flex-direction:column; gap:10px;}

  /* "Schueler im Fokus": Panel oben in der Unterrichtsansicht (Auswahl zu
     Beginn der Stunde, dann je Person ein Notizfeld) */
  .present-focus{border:1px solid var(--steel); border-radius:12px; background:var(--panel); padding:12px 14px; margin-bottom:18px;}
  .pf-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px;}
  .pf-title{font-weight:700; font-size:14px; color:var(--ink);}
  .pf-slot{font-family:var(--mono); font-size:11.5px; color:var(--muted); flex:1; min-width:0;}
  .pf-head select{font-family:var(--sans); font-size:12px; padding:5px 8px; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--ink); max-width:100%;}
  .pf-head button{font-size:11.5px; padding:5px 10px;}
  .pf-hint{font-size:12.5px; color:var(--muted); margin:0 0 8px; line-height:1.5;}
  .pf-pick{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px;}
  .pf-chip{font-family:var(--sans); font-size:13px; padding:6px 12px; border-radius:999px; border:1px solid var(--line); background:var(--panel);
    color:var(--ink); cursor:pointer;}
  .pf-chip:hover:not(:disabled){border-color:var(--steel);}
  .pf-chip.on{background:var(--steel); border-color:var(--steel); color:#fff;}
  .pf-chip:disabled{opacity:.4; cursor:default;}
  .pf-chip .n{font-family:var(--mono); font-size:10px; opacity:.7; margin-left:5px;}
  .pf-actions{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
  .pf-cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px;}
  .pf-col{display:flex; flex-direction:column; gap:5px;}
  .pf-col-head{display:flex; align-items:baseline; justify-content:space-between; gap:8px;}
  .pf-name{font-size:13.5px; font-weight:650; color:var(--ink);}
  .pf-name a{color:inherit; text-decoration:none;}
  .pf-name a:hover{color:var(--steel); text-decoration:underline;}
  .pf-status{font-family:var(--mono); font-size:10px; color:var(--faint);}
  .pf-status.saved{color:var(--sage);}
  .pf-status.err{color:#a3453d;}
  .pf-col textarea{width:100%; min-height:110px; font-family:var(--sans); font-size:14px; line-height:1.45; padding:8px 10px;
    border:1px solid var(--line); border-radius:9px; background:var(--panel); color:var(--ink); resize:vertical;}
  .pf-err{font-size:12px; color:#a3453d; margin-top:6px;}
  .present-extras details{border:1px solid var(--line); border-radius:10px; padding:0; background:var(--panel);}
  .present-extras summary{cursor:pointer; padding:12px 16px; font-size:13.5px; font-weight:600; color:var(--ink);
    list-style:none; display:flex; align-items:center; gap:8px;}
  .present-extras summary::-webkit-details-marker{display:none;}
  .present-extras summary::before{content:"▸"; color:var(--faint); transition:transform .15s;}
  .present-extras details[open] summary::before{transform:rotate(90deg);}
  .present-extras .present-extra-body{padding:2px 16px 16px; font-size:14px; color:var(--ink); line-height:1.6;}
  .present-extra-body img{max-width:100%; border-radius:6px; margin:6px 0; display:block;}
  .present-extra-body .hint{margin:0;}

  .present-comp-list{display:flex; flex-direction:column; gap:6px; margin:0;}
  .present-comp-item{font-size:13px; color:var(--ink); background:var(--track-c); border-radius:8px; padding:8px 10px;}
  .present-comp-item .comp-code{font-family:var(--mono); font-weight:700; color:var(--steel); margin-right:6px;}

/* ---- wishlist.html ---- */
  .wl-controls{margin:18px 0 16px;}

  .wl-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px;}

  .wl-card{background:var(--panel); border:1px solid var(--line); border-radius:16px; overflow:hidden;
    box-shadow:var(--shadow); transition:transform .2s,box-shadow .2s; display:flex; flex-direction:column; cursor:pointer;}
  .wl-card:hover{transform:translateY(-3px); box-shadow:0 16px 36px rgba(31,41,58,.16);}

  .wl-cover{position:relative; width:100%; aspect-ratio:4/3; overflow:hidden;
    background:linear-gradient(150deg,var(--cover-a),var(--cover-b));
    display:flex; align-items:center; justify-content:center;}
  .wl-cover img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
  .wl-cover svg{width:38px; height:38px; color:var(--holo); opacity:.7;}

  .wl-controls{display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
  .wl-sort{display:flex; align-items:center; gap:8px;}
  .wl-sort label{font-size:12px; color:var(--muted); white-space:nowrap;}
  .wl-sort select{font-family:var(--sans); font-size:13px; padding:7px 9px; border:1px solid var(--line);
    border-radius:8px; background:var(--panel); color:var(--ink);}

  .wl-body{padding:14px 16px; display:flex; flex-direction:column; flex:1; gap:8px;}
  .wl-title{font-size:15px; font-weight:640; line-height:1.3; color:var(--ink); margin:0;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    min-height:calc(1.3em * 2);}

  .wl-meta-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-height:24px;}
  .wl-price{font-family:var(--mono); font-weight:700; font-size:13px; color:var(--badge-steel);
    background:#eaf1f6; padding:3px 9px; border-radius:999px; flex:none;}
  .wl-category-badge{font-family:var(--mono); font-size:10px; letter-spacing:.5px; text-transform:uppercase;
    color:var(--badge-sage); background:#eaf1eb; padding:3px 8px; border-radius:6px; flex:none;}
  .wl-release-badge{font-family:var(--mono); font-size:10.5px; color:var(--badge-amber);
    background:#f6efe4; padding:3px 8px; border-radius:6px; flex:none;}

  .wl-actions{display:flex; gap:6px; margin-top:auto; padding-top:8px;}
  .wl-actions .spacer{flex:1;}
  .wl-actions .archive-toggle{color:var(--sage);}
  .wl-actions .archive-toggle.restore{color:var(--steel);}
  .wl-actions .to-game{width:28px; height:28px; display:grid; place-items:center; color:var(--steel); font-size:13px;}

  .wl-archived-badge{font-family:var(--mono); font-size:10px; letter-spacing:.3px; color:var(--muted);
    background:var(--track-c); padding:3px 8px; border-radius:6px; flex:none;}
  .wl-card.archived{opacity:.72;}
  .wl-card.archived:hover{opacity:1;}

  .wl-archive-section{margin-top:32px;}
  .wl-archive-summary{cursor:pointer; font-size:14px; font-weight:700; color:var(--ink); padding:4px 0;
    list-style:none;}
  .wl-archive-summary::-webkit-details-marker{display:none;}
  .wl-archive-summary::before{content:'▸'; display:inline-block; margin-right:8px; color:var(--muted);
    transition:transform .15s;}
  .wl-archive-section[open] .wl-archive-summary::before{transform:rotate(90deg);}
  .wl-archive-section .wl-grid{margin-top:16px;}

  /* view modal */
  .wl-view-hero{margin:-22px -24px 18px; border-radius:16px 16px 0 0; overflow:hidden;}
  .wl-view-hero img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block;}
  .wl-view-hero.placeholder{aspect-ratio:16/9; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(150deg,var(--cover-a),var(--cover-b));}
  .wl-view-hero.placeholder svg{width:48px; height:48px; color:var(--holo); opacity:.7;}

  .wl-view-infobar{display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 6px;}
  .wl-stat-pill{display:inline-flex; align-items:center; gap:6px; background:var(--track-c); color:var(--ink);
    font-size:12.5px; font-weight:600; padding:6px 12px; border-radius:999px; white-space:nowrap;}
  .wl-stat-pill.price{background:#eaf1f6; color:var(--badge-steel);}
  .wl-stat-pill.category{background:#eaf1eb; color:var(--badge-sage);}
  .wl-stat-pill.release{background:#f6efe4; color:var(--badge-amber);}

  .wl-source-card{display:flex; align-items:center; gap:10px; background:var(--track-c); border-radius:10px;
    padding:11px 14px; margin-top:14px; font-size:13px; color:var(--muted);}
  .wl-source-card svg{width:15px; height:15px; color:var(--steel); flex:none;}
  .wl-source-card a{color:var(--steel); font-weight:600; text-decoration:none;}
  .wl-source-card a:hover{text-decoration:underline;}

  /* form */