/* ── RESET & BASE ── */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --cream:      #FFF8E7;
    --yellow:     #F5E642;
    --ylight:     #FFF9C4;
    --olive:      #6B7A2A;
    --olive-l:    #8B9A3A;
    --olive-d:    #4A5520;
    --navy:       #1B2A4A;
    --navy-l:     #2A3F6B;
    --red:        #C0392B;
    --brown:      #6B3A2A;
    --dgrey:      #2C2C2C;
    --mgrey:      #6B6B6B;
    --lgrey:      #E8E8E0;
    --white:      #FFFFFF;
    --success:    #4A7A3A;
    --warning:    #C87A2A;
    --sidebar-w:  230px;
  }

  /* ── THEME: FOREST (Dunkelgrün) ── */
  [data-theme="forest"] {
    --cream: #F0F4EE; --yellow: #8BC34A; --ylight: #DCEDC8;
    --olive: #2E7D32; --olive-l: #388E3C; --olive-d: #1B5E20;
    --navy: #1A3A2A; --navy-l: #2E5940; --red: #B71C1C;
    --brown: #4E342E; --dgrey: #1C1C1C; --mgrey: #5D5D5D;
    --lgrey: #D8E4D6; --white: #FAFFF8; --success: #2E7D32;
    --warning: #F57F17; --sidebar-w: 230px;
  }
  [data-theme="forest"] #sidebar { background: #1A3A2A; }
  [data-theme="forest"] .nav-item.active { background: #2E7D32; border-left-color: #8BC34A; }
  [data-theme="forest"] .page-title { border-bottom-color: #8BC34A; }

  /* ── THEME: OCEAN (Blau-Türkis) ── */
  [data-theme="ocean"] {
    --cream: #E8F4F8; --yellow: #00BCD4; --ylight: #B2EBF2;
    --olive: #0277BD; --olive-l: #0288D1; --olive-d: #01579B;
    --navy: #01395E; --navy-l: #025EA0; --red: #C62828;
    --brown: #4A235A; --dgrey: #1A1A2E; --mgrey: #546E7A;
    --lgrey: #CFE4EF; --white: #F5FBFF; --success: #00897B;
    --warning: #F57C00; --sidebar-w: 230px;
  }
  [data-theme="ocean"] #sidebar { background: #01395E; }
  [data-theme="ocean"] .nav-item.active { background: #0277BD; border-left-color: #00BCD4; }
  [data-theme="ocean"] .page-title { border-bottom-color: #00BCD4; }

  /* ── THEME: SUNSET (Warme Orange-Töne) ── */
  [data-theme="sunset"] {
    --cream: #FFF8F0; --yellow: #FF9800; --ylight: #FFE0B2;
    --olive: #E65100; --olive-l: #F57C00; --olive-d: #BF360C;
    --navy: #3E2723; --navy-l: #5D4037; --red: #C62828;
    --brown: #6D4C41; --dgrey: #1C1C1C; --mgrey: #795548;
    --lgrey: #F0DDD5; --white: #FFFBF8; --success: #388E3C;
    --warning: #F57F17; --sidebar-w: 230px;
  }
  [data-theme="sunset"] #sidebar { background: #3E2723; }
  [data-theme="sunset"] .nav-item.active { background: #E65100; border-left-color: #FF9800; }
  [data-theme="sunset"] .page-title { border-bottom-color: #FF9800; }

  /* ── THEME: MIDNIGHT (Dunkelmodus) ── */
  [data-theme="midnight"] {
    --cream: #1A1A2E; --yellow: #7C4DFF; --ylight: #2D2B55;
    --olive: #6C63FF; --olive-l: #7C72FF; --olive-d: #4A00E0;
    --navy: #16213E; --navy-l: #0F3460; --red: #E94560;
    --brown: #533483; --dgrey: #E0E0E0; --mgrey: #9E9E9E;
    --lgrey: #2D2D44; --white: #252540; --success: #00BFA5;
    --warning: #FFD740; --sidebar-w: 230px;
  }
  [data-theme="midnight"] { color: #E0E0E0; }
  [data-theme="midnight"] html, [data-theme="midnight"] body { background: #1A1A2E; color: #E0E0E0; }
  [data-theme="midnight"] .card { background: #252540; color: #E0E0E0; }
  [data-theme="midnight"] .tbl tr:nth-child(even) td { background: #2D2D44; }
  [data-theme="midnight"] #sidebar { background: #16213E; }
  [data-theme="midnight"] .nav-item.active { background: #6C63FF; border-left-color: #7C4DFF; }
  [data-theme="midnight"] .page-title { border-bottom-color: #7C4DFF; color: #E0E0E0; }
  [data-theme="midnight"] .field input, [data-theme="midnight"] .field textarea, [data-theme="midnight"] .field select { background: #2D2D44; color: #E0E0E0; border-color: #3D3D5C; }
  [data-theme="midnight"] .yr-day-row { background: #252540; }
  [data-theme="midnight"] .yr-day-row.weekend { background: #1E1E38; }

  html, body {
    height: 100%;
    font-family: Georgia, 'Times New Roman', serif;
    background: var(--cream);
    color: var(--dgrey);
    overflow-x: hidden; /* Kein horizontales Scrollen */
    max-width: 100vw;
  }
  button { cursor: pointer; font-family: inherit; }
  input, textarea, select { font-family: inherit; }
  a { color: var(--navy); }

  /* ── LAYOUT ── */
  #sidebar {
    position: fixed; top: 0; left: 0; width: var(--sidebar-w);
    height: 100vh; background: var(--navy); display: flex;
    flex-direction: column; z-index: 200; overflow: hidden;
    background-image: none;
  }
  #sidebar-inner { display: flex; flex-direction: column; height: 100%; }
  #main { margin-left: var(--sidebar-w); padding: 32px 40px; min-height: 100vh; padding-bottom: 48px; }

  /* ── SIDEBAR HEADER ── */
  .sb-header { padding: 24px 20px 12px; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .sb-logo { font-size: 28px; }
  .sb-title { color: #fff; font-size: 14px; font-weight: bold; line-height: 1.2; margin-top: 4px; }
  .sb-year { color: var(--yellow); font-size: 11px; }
  .sb-user { color: rgba(255,255,255,0.65); font-size: 12px; margin-top: 8px; }

  /* ── NAV ── */
  .sb-nav { flex: 1; overflow-y: auto; padding: 8px 0; }
  .sb-nav::-webkit-scrollbar { width: 4px; }
  .sb-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 2px; }
  .nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 20px; cursor: pointer; font-size: 13px;
    color: rgba(255,255,255,0.7); border-left: 3px solid transparent;
    transition: background 0.15s, color 0.15s;
  }
  .nav-item:hover { background: rgba(255,255,255,0.07); color: #fff; }
  .nav-item.active { background: var(--olive); color: #fff; border-left-color: var(--yellow); }
  .nav-item .icon { width: 18px; height: 18px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
  .nav-item .icon svg { width: 16px; height: 16px; stroke: rgba(255,255,255,0.75); transition: stroke .15s; }
  .nav-item:hover .icon svg { stroke: #fff; }
  .nav-item.active .icon svg { stroke: #fff; }
  .sb-footer { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,0.1); }

  /* ── Accordion Nav Groups ── */
  .nav-group-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 16px 6px; margin: 2px 6px;
    font-size: 10px; font-weight: bold; text-transform: uppercase;
    letter-spacing: 1px; color: rgba(255,255,255,0.4);
    cursor: pointer; border-radius: 6px;
    transition: background .15s, color .15s;
    user-select: none;
  }
  .nav-group-header:hover { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.7); }
  .nav-group-header .nav-arrow {
    font-size: 11px; transition: transform .2s ease;
    display: inline-block; opacity: .5;
  }
  .nav-group-header.open .nav-arrow { transform: rotate(90deg); }
  .nav-group-items {
    overflow: hidden; max-height: 0;
    transition: max-height .25s cubic-bezier(.4,0,.2,1);
  }
  .nav-group-items.open { max-height: 500px; }
  .nav-group-items .nav-item { padding-left: 32px; }
  .nav-divider { height: 1px; background: rgba(255,255,255,0.08); margin: 6px 14px; }

  /* ── CARDS ── */
  .card { background: var(--white); border-radius: 12px; padding: 22px; box-shadow: 0 2px 12px rgba(27,42,74,0.08); margin-bottom: 18px; }
  .card-navy { background: var(--navy); color: #fff; border-radius: 12px; padding: 20px; margin-bottom: 16px; background-image: radial-gradient(var(--red) 1.5px, transparent 1.5px); background-size: 18px 18px; }
  .card-yellow { background: var(--ylight); border-left: 4px solid var(--yellow); border-radius: 12px; padding: 18px; margin-bottom: 16px; }

  /* ── BUTTONS ── */
  .btn { border: none; border-radius: 8px; padding: 8px 18px; font-size: 13px; font-weight: bold; letter-spacing: .3px; transition: opacity .15s; }
  .btn:hover { opacity: .85; }
  .btn-navy  { background: var(--navy);    color: #fff; }
  .btn-olive { background: var(--olive);   color: #fff; }
  .btn-red   { background: var(--red);     color: #fff; }
  .btn-light { background: var(--lgrey);   color: var(--dgrey); }
  .btn-sm    { padding: 4px 10px; font-size: 12px; }
  .btn-full  { width: 100%; padding: 12px; }

  /* ── FORMS ── */
  .field { margin-bottom: 14px; }
  .field label { display: block; font-size: 11px; font-weight: bold; color: var(--mgrey); letter-spacing: .8px; text-transform: uppercase; margin-bottom: 4px; }
  .field input, .field textarea, .field select { width: 100%; border: 1.5px solid var(--lgrey); border-radius: 8px; padding: 8px 12px; font-size: 13px; background: var(--cream); color: var(--dgrey); outline: none; transition: border-color .15s; }
  @media (max-width: 860px) {
    .field input, .field textarea, .field select { font-size: 16px; padding: 10px 12px; } /* Verhindert iOS-Zoom */
    .tt-input-sm { font-size: 14px; padding: 5px 8px; }
  }
  .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--olive); }
  .field textarea { resize: vertical; min-height: 80px; }

  /* ── PAGE TITLE ── */
  .page-title { font-size: 24px; font-weight: bold; color: var(--navy); border-bottom: 3px solid var(--yellow); padding-bottom: 8px; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }

  /* ── GRID HELPERS ── */
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .grid-aside { display: grid; grid-template-columns: 280px 1fr; gap: 20px; }

  /* ── BADGES ── */
  .badge { display: inline-block; border-radius: 20px; padding: 2px 10px; font-size: 11px; color: #fff; margin-right: 4px; margin-bottom: 2px; }

  /* ── TABLE ── */
  .tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
  .tbl th { background: var(--navy); color: #fff; padding: 10px 14px; text-align: left; font-size: 12px; }
  .tbl td { padding: 8px 14px; border-bottom: 1px solid var(--lgrey); }
  .tbl tr:nth-child(even) td { background: var(--cream); }

  /* ── LOGIN ── */
  #login-screen {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: var(--navy);
    background-image: radial-gradient(var(--red) 2px, transparent 2px);
    background-size: 24px 24px;
  }
  .login-box { background: var(--cream); border-radius: 16px; padding: 40px; width: 400px; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
  .login-tabs { display: flex; gap: 8px; margin-bottom: 20px; }
  .login-tab { flex: 1; padding: 10px; text-align: center; border-radius: 8px; cursor: pointer; font-weight: bold; font-size: 13px; border: none; }
  .login-tab.active { background: var(--navy); color: #fff; }
  .login-tab:not(.active) { background: var(--lgrey); color: var(--dgrey); }
  .alert { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 13px; }
  .alert-err { background: #fee; color: var(--red); }
  .alert-ok  { background: #efe; color: var(--success); }

  /* ── SPINNER ── */
  .spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: spin .6s linear infinite; vertical-align: middle; }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* ── WATER ── */
  .water-glass { font-size: 18px; cursor: pointer; transition: opacity .15s; user-select: none; }
  .water-glass.empty { opacity: .25; }

  /* ── STATUS PILLS ── */
  .status-pill { border: none; border-radius: 20px; padding: 4px 12px; font-size: 12px; font-weight: bold; color: #fff; cursor: pointer; }

  /* ── TIMETABLE CELL ── */
  .tt-cell { padding: 4px; vertical-align: top; }
  .tt-cell input { border: 1px solid var(--lgrey); border-radius: 6px; padding: 3px 7px; font-size: 11px; width: 100%; background: var(--cream); margin-bottom: 2px; }
  .lesson-block { background: var(--navy); color: #fff; border-radius: 8px; padding: 6px 8px; cursor: pointer; min-height: 52px; font-size: 12px; transition: opacity .15s; }
  .lesson-block:hover { opacity: .85; }
  .lesson-block.done { background: var(--olive); opacity: .75; }



  /* ── MODERNER STUNDENPLAN ── */
  .tt-wrap { background: var(--white); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 24px rgba(27,42,74,0.10); }
  .tt-header-row { display: grid; grid-template-columns: 52px repeat(5, 1fr); background: var(--navy); }
  .tt-header-cell { padding: 14px 10px; text-align: center; color: #fff; font-size: 13px; font-weight: bold; border-right: 1px solid rgba(255,255,255,0.08); }
  .tt-header-cell .day-name { font-size: 13px; font-weight: bold; }
  .tt-header-cell .day-date { font-size: 11px; opacity: .6; margin-top: 2px; }
  .tt-header-cell.today-col { background: var(--olive); }
  .tt-body { display: flex; flex-direction: column; }
  .tt-row { display: grid; grid-template-columns: 52px repeat(5, 1fr); border-bottom: 1px solid var(--lgrey); transition: background .1s; }
  .tt-row:last-child { border-bottom: none; }
  .tt-row:nth-child(even) { background: #fafaf7; }
  .tt-row:hover { background: #f5f5ee; }
  .tt-num { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 4px; border-right: 2px solid var(--lgrey); }
  .tt-num .num { font-size: 15px; font-weight: bold; color: var(--navy); line-height: 1; }
  .tt-num .time { font-size: 10px; color: var(--mgrey); margin-top: 3px; }
  .tt-cell-modern { padding: 6px; border-right: 1px solid var(--lgrey); min-height: 80px; position: relative; }
  .tt-cell-modern:last-child { border-right: none; }
  .tt-lesson-card { border-radius: 8px; padding: 8px 10px; height: 100%; min-height: 68px; position: relative; cursor: default; transition: transform .15s, box-shadow .15s; border-left: 4px solid transparent; }
  .tt-lesson-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.12); }
  .tt-lesson-card.has-content { background: var(--cream); border-left-color: var(--navy); }
  .tt-lesson-card.empty-card { background: transparent; border: 2px dashed var(--lgrey); border-left: 2px dashed var(--lgrey); opacity: .5; }
  .tt-subject { font-size: 13px; font-weight: bold; color: var(--navy); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tt-class-room { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 2px; }
  .tt-pill { font-size: 10px; padding: 1px 7px; border-radius: 10px; font-weight: bold; }
  .tt-pill.class-pill { background: var(--navy); color: #fff; }
  .tt-pill.room-pill { background: var(--lgrey); color: var(--dgrey); }
  /* tt-inputs: shown via JS display style, not CSS class */
  .tt-inputs { display: none; flex-direction: column; gap: 4px; }
  .tt-edit-panel {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.45);
    display: none; align-items: center; justify-content: center;
    z-index: 9999;
  }
  .tt-edit-panel.open { display: flex; }
  .tt-edit-panel-inner {
    background: #fff; border-radius: 14px;
    padding: 20px; width: 90%; max-width: 340px;
    box-shadow: 0 12px 40px rgba(0,0,0,.25);
    display: flex; flex-direction: column; gap: 8px;
    max-height: 85vh; overflow-y: auto;
  }
  .tt-cell-modern { position: relative; }
  .tt-input-sm { border: 1px solid var(--lgrey); border-radius: 6px; padding: 4px 7px; font-size: 12px; font-family: Georgia, serif; background: #fff; outline: none; width: 100%; }
  .tt-input-sm:focus { border-color: var(--olive); }
  /* Subject select styling – überall gleich */
  .field select { appearance: auto; }
  .subj-hint { font-size:11px; color:var(--olive); margin-top:4px; }
  .tt-edit-btn { position: absolute; top: 5px; right: 5px; background: none; border: none; font-size: 12px; cursor: pointer; opacity: 0; transition: opacity .15s; color: var(--mgrey); padding: 2px 5px; border-radius: 4px; }
  .tt-lesson-card:hover .tt-edit-btn { opacity: 1; }
  .tt-save-btn { margin-top: 4px; background: var(--olive); color: #fff; border: none; border-radius: 6px; padding: 4px 10px; font-size: 11px; cursor: pointer; width: 100%; font-family: Georgia, serif; }
  .tt-version-tabs { display: flex; gap: 0; margin-bottom: 20px; border-radius: 10px; overflow: hidden; border: 2px solid var(--navy); width: fit-content; }
  .tt-version-tab { padding: 9px 24px; font-size: 13px; font-weight: bold; cursor: pointer; border: none; font-family: Georgia, serif; transition: background .15s, color .15s; }
  .tt-version-tab.active { background: var(--navy); color: #fff; }
  .tt-version-tab:not(.active) { background: #fff; color: var(--navy); }
  /* Farbkodierung je nach Fachname (Hash-basiert) */
  .tt-lesson-card.color-0 { border-left-color: #2A6496; background: #EBF4FF; }
  .tt-lesson-card.color-1 { border-left-color: #5C8A3C; background: #EFF7EA; }
  .tt-lesson-card.color-2 { border-left-color: #8B5A2A; background: #FBF3EA; }
  .tt-lesson-card.color-3 { border-left-color: #6B2A8B; background: #F5EAFB; }
  .tt-lesson-card.color-4 { border-left-color: #C07A2A; background: #FBF5EA; }
  .tt-lesson-card.color-5 { border-left-color: #2A7A8B; background: #EAF6FB; }
  .tt-lesson-card.color-6 { border-left-color: #8B2A4A; background: #FBEAEF; }
  .tt-lesson-card.color-7 { border-left-color: #3A6B4A; background: #EAF3EE; }
  /* ── MATERIAL POPUP ── */
  #mat-popup-overlay {
    display: none; position: fixed; inset: 0; background: rgba(27,42,74,0.55);
    z-index: 9000; align-items: center; justify-content: center;
    backdrop-filter: blur(3px);
  }
  #mat-popup-overlay.visible { display: flex; }
  #mat-popup {
    background: var(--white); border-radius: 16px; padding: 32px;
    width: 520px; max-width: 94vw; max-height: 85vh; overflow-y: auto;
    box-shadow: 0 24px 60px rgba(0,0,0,0.35);
    border-top: 5px solid var(--warning);
    animation: popIn .25s ease;
  }
  @keyframes popIn { from { opacity:0; transform: scale(.92) translateY(10px); } to { opacity:1; transform: none; } }
  #mat-popup h2 { color: var(--navy); font-size: 19px; margin-bottom: 6px; }
  #mat-popup .subtitle { color: var(--mgrey); font-size: 13px; margin-bottom: 20px; }
  .mat-todo-item {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 11px 14px; border-radius: 10px; margin-bottom: 8px;
    background: var(--cream); border: 1.5px solid var(--lgrey);
    transition: background .15s;
  }
  .mat-todo-item.done-item { opacity: .55; background: #f0f0eb; }
  .mat-todo-item input[type=checkbox] { width: 18px; height: 18px; margin-top: 1px; cursor: pointer; flex-shrink: 0; }
  .mat-todo-item .todo-text { font-size: 14px; line-height: 1.4; flex: 1; }
  .mat-todo-item .todo-text.crossed { text-decoration: line-through; color: var(--mgrey); }
  .mat-todo-item .todo-meta { font-size: 11px; color: var(--mgrey); margin-top: 2px; }
  .mat-lesson-group { margin-bottom: 18px; }
  .mat-lesson-group .group-title { font-size: 12px; font-weight: bold; color: var(--olive); text-transform: uppercase; letter-spacing: .7px; margin-bottom: 8px; padding-bottom: 4px; border-bottom: 2px solid var(--ylight); }
  .mat-prep-section { background: var(--ylight); border: 1.5px solid var(--yellow); border-radius: 10px; padding: 14px 16px; margin-top: 16px; }
  .mat-prep-section .prep-title { font-size: 12px; font-weight: bold; color: var(--warning); text-transform: uppercase; letter-spacing: .7px; margin-bottom: 8px; }
  .mat-prep-item { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
  .mat-prep-item input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; }
  .mat-prep-item span { font-size: 13px; }
  .mat-prep-item span.done-text { text-decoration: line-through; opacity: .55; }
  /* ── HAMBURGER BUTTON ── */
  #mob-toggle {
    display: none; position: fixed; top: 12px; left: 12px; z-index: 300;
    background: var(--navy); border: none; border-radius: 10px;
    width: 44px; height: 44px; cursor: pointer; flex-direction: column;
    align-items: center; justify-content: center; gap: 5px; box-shadow: 0 2px 10px rgba(0,0,0,.3);
  }
  #mob-toggle span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: all .25s; }
  #mob-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  #mob-toggle.open span:nth-child(2) { opacity: 0; }
  #mob-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  #mob-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 150; }
  #mob-overlay.visible { display: block; }

  /* ── RESPONSIVE ── */
  @media (max-width: 860px) {
    /* ── KEIN HORIZONTALES SCROLLEN ── */
    html, body, #app { overflow-x: hidden !important; max-width: 100vw !important; }

    /* ── SIDEBAR ── */
    #mob-toggle { display: flex; }
    #sidebar { transform: translateX(-100%); transition: transform .28s cubic-bezier(.4,0,.2,1); z-index: 200; box-shadow: 4px 0 24px rgba(0,0,0,.25); }
    #sidebar.open { transform: translateX(0); }
    #main { margin-left: 0; padding: 14px 12px 32px; padding-top: 66px; overflow-x: hidden; }

    /* ── GRIDS ── */
    .grid-2, .grid-3, .grid-4, .grid-aside { grid-template-columns: 1fr !important; }
    .stats-grid { grid-template-columns: 1fr 1fr !important; }
    .flex-row { flex-wrap: wrap; }

    /* ── TYPOGRAPHY ── */
    .page-title { font-size: 18px; padding-bottom: 8px; }
    .card { padding: 14px; margin-bottom: 12px; }
    .btn { font-size: 13px; }

    /* ── POPUP ── */
    #mat-popup { width: 96vw; padding: 18px 14px; border-radius: 12px; }

    /* ── NAV ── */
    .nav-item { padding: 12px 20px; font-size: 14px; }
    .nav-item .icon svg { width: 18px; height: 18px; }
    .sb-header { padding: 14px 16px 10px; }

    /* ── LOGIN ── */
    .login-box { width: 94vw; padding: 24px 16px; }

    /* ════════════════════════════════════════════════
       STUNDENPLAN – Tage untereinander auf Mobile
       ════════════════════════════════════════════════ */
    .tt-wrap { overflow: visible !important; }
    /* Header ausblenden – Tag steht auf jeder Karte */
    .tt-header-row { display: none !important; }
    /* Body: normale Block-Darstellung */
    .tt-body { display: block; }
    .tt-row {
      display: grid !important;
      grid-template-columns: 32px 1fr !important;
      margin-bottom: 6px;
      background: var(--white);
      border-radius: 10px;
      overflow: hidden;
      border: 1px solid var(--lgrey);
    }
    .tt-num { padding: 6px 4px; border-right: 2px solid var(--lgrey); min-height: 0; }
    .tt-num .num { font-size: 12px; }
    .tt-num .time { display: none; }
    /* 5 Tages-Zellen nebeneinander in einer Zeile → untereinander */
    .tt-row > .tt-cell-modern:not(.tt-num) {
      padding: 5px;
      border-right: none;
      border-bottom: 1px solid var(--lgrey);
      min-height: 54px;
    }
    .tt-row > .tt-cell-modern:last-child { border-bottom: none; }
    .tt-lesson-card { min-height: 48px; padding: 5px 8px; }
    .tt-subject { font-size: 12px; }
    .tt-pill { font-size: 10px; }
    /* Stundenplan: kompakte 2-Spalten-Ansicht (Stunde + 1 Tag pro Zeile wäre zu komplex,
       stattdessen: horizontales Scrollen nur im TT-Bereich erlaubt) */
    .tt-wrap { overflow-x: auto !important; }
    .tt-header-row { display: grid !important; }
    .tt-body { display: block; }
    .tt-row { display: grid !important; grid-template-columns: 32px repeat(5, minmax(72px, 1fr)) !important; margin-bottom: 0; border-radius: 0; border: none; border-bottom: 1px solid var(--lgrey); }
    .tt-header-cell { padding: 8px 4px; font-size: 11px; }
    .tt-header-cell .day-date { display: none; }
    .tt-version-tabs { width: 100%; }
    .tt-version-tabs button { font-size: 13px; padding: 8px 0; }

    /* ════════════════════════════════════════════════
       JAHRESPLANUNG – 1 Karte pro Zeile, kein overflow
       ════════════════════════════════════════════════ */
    /* Quartals-Grid: 1 Spalte statt 3 */
    .tt-wrap + div, [style*="grid-template-columns: repeat(3"] {
      grid-template-columns: 1fr !important;
    }

    /* ════════════════════════════════════════════════
       KLASSENVERWALTUNG – Eingabereihe stapeln
       ════════════════════════════════════════════════ */
    /* Schüler-Eingabe-Grid: 1 Spalte */
    [style*="grid-template-columns:1fr 1fr 1fr 1fr 1fr auto"],
    [style*="grid-template-columns: 1fr 1fr 1fr 1fr 1fr auto"] {
      grid-template-columns: 1fr 1fr !important;
    }
    /* Tabelle scrollbar */
    .tbl { font-size: 12px; }
    .tbl td, .tbl th { padding: 6px 6px; }

    /* ════════════════════════════════════════════════
       NOTIZEN – Side-by-side → übereinander
       ════════════════════════════════════════════════ */
    [style*="grid-template-columns:200px 1fr"],
    [style*="grid-template-columns: 200px 1fr"] {
      grid-template-columns: 1fr !important;
    }

    /* ════════════════════════════════════════════════
       WOCHENPLANER – Tabelle scrollbar halten
       ════════════════════════════════════════════════ */
    .weekly-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: calc(100vw - 24px); }

    /* ════════════════════════════════════════════════
       ALLGEMEIN
       ════════════════════════════════════════════════ */
    /* Inline-Grid-Styles überschreiben */
    [style*="display:grid;grid-template-columns:repeat(3,1fr)"],
    [style*="display: grid; grid-template-columns: repeat(3, 1fr)"] {
      grid-template-columns: 1fr !important;
    }
    [style*="grid-template-columns:repeat(5,1fr)"],
    [style*="grid-template-columns: repeat(5, 1fr)"] {
      grid-template-columns: 1fr 1fr !important;
    }
    /* Buttons nicht zu schmal */
    .btn-sm { padding: 5px 10px; font-size: 12px; }
    /* Aside-Layouts */
    .grid-aside { gap: 12px !important; }
  }

  /* ── Gezielte Klassen-Overrides für Mobile ── */
  @media (max-width: 860px) {
    /* Dashboard Tagesansicht: untereinander auf Mobile */
    .dash-day-view { grid-template-columns: 1fr !important; }
    /* Jahresplanung: 1 Spalte */
    .yearly-month-grid { grid-template-columns: 1fr !important; }
    /* Schüler-Eingabe: 2 Spalten */
    .student-add-row { grid-template-columns: 1fr 1fr !important; }
    .student-add-row > button { grid-column: 1 / -1; }
    /* Notizen: übereinander */
    .notes-layout { grid-template-columns: 1fr !important; }
    /* Dashboard Wochen-Grid: 2+3 Spalten statt 5 */
    .dash-week-grid { grid-template-columns: 1fr 1fr !important; }
    /* Jahresplanungs-Karten nicht abschneiden */
    .yearly-month-grid > div { min-width: 0; overflow: hidden; }
    /* Bulk-Noten Grid */
    [style*="grid-template-columns:1fr 1fr 1fr;gap:8px"] { grid-template-columns: 1fr !important; }
    /* Stundenplan-Legende wrappen */
    .tt-version-tabs { border-radius: 8px; }
  }

  @media (max-width: 480px) {
    #main { padding: 10px 10px 24px; padding-top: 62px; }
    .page-title { font-size: 16px; }
    .card { padding: 12px; }
    .stats-grid { grid-template-columns: 1fr 1fr !important; }
    .dash-week-grid { grid-template-columns: 1fr 1fr !important; }
    /* Schnellauswahl wrappen */
    .student-add-row { grid-template-columns: 1fr 1fr !important; }
  }

  /* ── MISC ── */
  .hidden { display: none !important; }
  .flex-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .muted { color: var(--mgrey); font-size: 12px; }
  .bold { font-weight: bold; }
  .mt-8 { margin-top: 8px; }
  .mt-16 { margin-top: 16px; }
  hr { border: none; border-top: 1px solid var(--lgrey); margin: 12px 0; }

</head>
<body>