:root{
    --bg:#f3f1ea;
    --surface:#ffffff;
    --surface-2:#eae7dc;
    --border:#d9d4c4;
    --border-strong:#c3bda8;
    --ink:#22262f;
    --ink-soft:#5c6270;
    --ink-faint:#8a8f9c;
    --accent:#2f4d6b;
    --accent-ink:#ffffff;
    --accent-soft:#e2eaf1;
    --accent-soft-border:#bccddc;
    --good:#276b46;
    --good-bg:#e3f1e7;
    --good-border:#b9dbc4;
    --warn:#8a5a06;
    --warn-bg:#faf0d9;
    --warn-border:#e8d19c;
    --bad:#a1281f;
    --bad-bg:#fbe7e4;
    --bad-border:#eec2bc;
    --font-display:'Fraunces', Georgia, serif;
    --font-body:'IBM Plex Sans', system-ui, sans-serif;
    --font-mono:'IBM Plex Mono', ui-monospace, monospace;
    --radius:10px;
    --shadow:0 1px 2px rgba(30,26,10,.06), 0 6px 20px -12px rgba(30,26,10,.18);
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#14161c;
      --surface:#1b1e26;
      --surface-2:#20232c;
      --border:#333846;
      --border-strong:#454b5c;
      --ink:#e9eaee;
      --ink-soft:#a9adb9;
      --ink-faint:#767c8a;
      --accent:#8fb0d6;
      --accent-ink:#0e1520;
      --accent-soft:#22344a;
      --accent-soft-border:#375072;
      --good:#7bd3a1;
      --good-bg:#1a2e24;
      --good-border:#2c4c3a;
      --warn:#e0b45a;
      --warn-bg:#332a13;
      --warn-border:#5a4a20;
      --bad:#f0968c;
      --bad-bg:#3a1f1d;
      --bad-border:#5c332e;
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"]{
    --bg:#14161c;
    --surface:#1b1e26;
    --surface-2:#20232c;
    --border:#333846;
    --border-strong:#454b5c;
    --ink:#e9eaee;
    --ink-soft:#a9adb9;
    --ink-faint:#767c8a;
    --accent:#8fb0d6;
    --accent-ink:#0e1520;
    --accent-soft:#22344a;
    --accent-soft-border:#375072;
    --good:#7bd3a1;
    --good-bg:#1a2e24;
    --good-border:#2c4c3a;
    --warn:#e0b45a;
    --warn-bg:#332a13;
    --warn-border:#5a4a20;
    --bad:#f0968c;
    --bad-bg:#3a1f1d;
    --bad-border:#5c332e;
    color-scheme: dark;
  }

  /* ---------- "Modern"-Stil (Umschalter, ersetzt die klassische Optik unabhängig vom System-Farbschema) ---------- */
  :root[data-style="modern"]{
    --bg:#f6f1ff;
    --surface:#ffffff;
    --surface-2:#efe6ff;
    --border:#ddccf9;
    --border-strong:#c3a5f5;
    --ink:#221a35;
    --ink-soft:#5d4d7d;
    --ink-faint:#8a7bab;
    --accent:#7c3aed;
    --accent-ink:#ffffff;
    --accent-soft:#efe2ff;
    --accent-soft-border:#caa6f7;
    --accent-2:#ec4899;
    --font-display:'Space Grotesk', var(--font-body);
    --radius:16px;
    --shadow:0 4px 18px -6px rgba(124,58,237,.3), 0 14px 34px -18px rgba(236,72,153,.3);
  }
  :root[data-style="modern"] body{background:radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 45%), radial-gradient(circle at 88% 15%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 40%), var(--bg);}
  :root[data-style="modern"] .topbar{background:color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter:blur(10px);}
  :root[data-style="modern"] section.panel{border-radius:20px;}
  :root[data-style="modern"] .block-card, :root[data-style="modern"] ul.checklist li{border-radius:14px;}
  :root[data-style="modern"] .btn{background:linear-gradient(135deg, var(--accent), var(--accent-2)); border-radius:999px; box-shadow:0 3px 10px -3px rgba(124,58,237,.5);}
  :root[data-style="modern"] .btn.ghost{background:transparent; color:var(--accent); border:1.5px solid var(--accent-soft-border); box-shadow:none;}
  :root[data-style="modern"] .btn.danger{background:transparent; color:var(--bad); border:1.5px solid var(--bad-border); box-shadow:none; border-radius:999px;}
  :root[data-style="modern"] .tab-btn.active{background:linear-gradient(135deg, var(--accent), var(--accent-2)); border-color:transparent;}
  :root[data-style="modern"] .status-pill.good{background:linear-gradient(135deg,var(--good-bg),color-mix(in srgb, var(--good) 18%, var(--good-bg)));}
  :root[data-style="modern"] .brand-logo rect{fill:var(--accent);}
  :root[data-style="modern"] .brand-logo path, :root[data-style="modern"] .brand-logo polygon{fill:var(--accent-ink);}
  :root[data-style="modern"] .brand-logo line, :root[data-style="modern"] .brand-logo circle{stroke:var(--accent-ink); fill:var(--accent-ink);}
  :root[data-style="modern"] .hjl-btn.hjl-in{box-shadow:0 0 0 1px var(--good) inset;}
  :root[data-style="modern"] .modal{border-radius:20px;}

  *{box-sizing:border-box;}
  [hidden]{display:none !important;}
  html{-webkit-text-size-adjust:100%;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:var(--font-body);
    font-size:15px;
    line-height:1.5;
    padding-inline:16px;
  }
  a{color:var(--accent);}
  h1,h2,h3{font-family:var(--font-display); text-wrap:balance; font-weight:600; margin:0;}
  .wrap{max-width:980px; margin:0 auto;}
  .tabular{font-variant-numeric: tabular-nums;}

  /* ---------- top bar ---------- */
  .topbar{
    position:sticky; top:0; z-index:20;
    background:color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--border);
    padding-block:10px;
    margin-inline:-16px;
    padding-inline:16px;
  }
  .topbar-inner{max-width:980px; margin:0 auto; display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
  .brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:1.05rem; font-weight:600; white-space:nowrap;}
  .brand-logo{width:30px; height:30px; flex:0 0 auto;}
  .brand-text{display:block;}
  .brand-text span{color:var(--ink-soft); font-family:var(--font-body); font-weight:400; font-size:.8rem; display:block;}
  .score-cluster{display:flex; align-items:baseline; gap:22px; margin-left:auto; flex-wrap:wrap;}
  .score-item{text-align:right;}
  .score-item .num{font-family:var(--font-mono); font-size:1.5rem; font-weight:600; line-height:1;}
  .score-item .lbl{font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft);}
  .status-pill{
    font-size:.72rem; font-weight:600; padding:5px 11px; border-radius:99px; white-space:nowrap;
    border:1px solid; text-transform:uppercase; letter-spacing:.03em;
    min-width:150px; text-align:center; box-sizing:border-box;
  }
  .status-pill.good{background:var(--good-bg); color:var(--good); border-color:var(--good-border);}
  .status-pill.bad{background:var(--bad-bg); color:var(--bad); border-color:var(--bad-border);}
  .status-pill.warn{background:var(--warn-bg); color:var(--warn); border-color:var(--warn-border);}

  header.hero{padding-block:28px 8px;}
  header.hero p.lede{color:var(--ink-soft); margin:10px 0 0;}
  .badge-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px;}
  .badge{font-size:.72rem; padding:4px 10px; border-radius:99px; background:var(--surface-2); border:1px solid var(--border); color:var(--ink-soft);}

  section.panel{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:20px 22px 22px;
    margin-block:16px;
    box-shadow:var(--shadow);
  }
  section.panel > h2{font-size:1.15rem; display:flex; align-items:baseline; gap:10px;}
  section.panel > h2 .stepno{font-family:var(--font-mono); font-size:.75rem; color:var(--ink-faint); font-weight:500;}
  section.panel > p.hint{color:var(--ink-soft); font-size:.88rem; margin:6px 0 16px; max-width:none;}

  .disclaimer{
    background:var(--warn-bg); border:1px solid var(--warn-border); color:var(--warn);
    border-radius:var(--radius); padding:12px 15px; font-size:.85rem; margin-bottom:16px;
  }
  .disclaimer strong{color:inherit;}
  /* Standardmäßig nur die nicht-erfüllten Punkte einer Checkliste zeigen -- bei vielen grünen Haken
     lenkt das Grün eher vom Eigentlichen (was noch fehlt) ab, als dass es hilft. */
  ul.checklist:not(.show-all) li.ok{display:none;}
  ul.checklist li.all-ok-summary{border-color:var(--good-border);}
  ul.checklist li.all-ok-summary .mark{background:var(--good-bg); color:var(--good);}
  .checklist-toggle-btn{margin-top:8px;}
  .disclaimer summary{cursor:pointer; user-select:none;}
  .disclaimer summary::-webkit-details-marker{color:inherit;}
  .disclaimer p{margin:8px 0 0;}

  /* Bewusst NICHT einklappbar (anders als .disclaimer) und in Warnfarbe statt Gelb -- das ist die
     einzige Stelle, an der jemand ernsthaft glauben könnte, die Zahl sei amtlich verbindlich. */
  .note-disclaimer{
    background:var(--bad-bg); border:2px solid var(--bad-border); color:var(--bad);
    border-radius:var(--radius); padding:12px 15px; font-size:.86rem; font-weight:600;
    margin:10px 0 16px;
  }

  .overflow-banner{
    background:var(--bad-bg); border:1px solid var(--bad-border); color:var(--bad);
    border-radius:var(--radius); padding:12px 15px; font-size:.85rem; margin-bottom:16px;
  }
  .overflow-banner strong{color:inherit;}
  .overflow-banner[hidden]{display:none;}
  .invalid-value{color:var(--bad) !important;}

  /* ---------- tables ---------- */
  .tbl-scroll{overflow-x:auto; border:1px solid var(--border); border-radius:8px;}
  table{border-collapse:collapse; width:100%; min-width:640px;}
  th,td{padding:8px 9px; border-bottom:1px solid var(--border); text-align:left; vertical-align:middle;}
  thead th{
    font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft);
    background:var(--surface-2); font-weight:600; white-space:nowrap;
  }
  tbody tr:last-child td{border-bottom:none;}
  tbody tr:hover{background:color-mix(in srgb, var(--accent-soft) 45%, transparent);}
  td.num-cell, th.num-cell{text-align:center; width:52px;}
  /* Die "erste Spalte bleibt beim horizontalen Scrollen stehen"-Optik (position:sticky) wurde entfernt --
     sie hat auf manchen mobilen Renderern beim seitlichen Scrollen zuverlässig dafür gesorgt, dass die
     Spalten rechts vom Fachnamen nicht mehr sichtbar wurden (bestätigt reproduzierbar auf Mobile-Breite). */
  .tbl-scroll thead th:first-child{background:var(--surface-2);}
  select.f-fachart, select.f-rolle, select.f-kategorie{width:100%; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  td.small-note{color:var(--ink-faint); font-size:.72rem;}

  input[type=text]{
    width:100%; min-width:110px; padding:6px 8px; border-radius:6px; border:1px solid var(--border-strong);
    background:var(--surface); color:var(--ink); font:inherit;
  }
  select{
    padding:6px 7px; border-radius:6px; border:1px solid var(--border-strong);
    background:var(--surface); color:var(--ink); font:inherit; font-family:var(--font-mono); font-size:.86rem;
  }
  select.pts{width:74px; text-align:center;}
  input:focus-visible, select:focus-visible, button:focus-visible, summary:focus-visible{
    outline:2px solid var(--accent); outline-offset:1px;
  }
  .locked{color:var(--ink-faint); font-style:italic; font-size:.8rem;}

  button{font:inherit; cursor:pointer;}
  .btn{
    background:var(--accent); color:var(--accent-ink); border:none; border-radius:7px;
    padding:8px 14px; font-weight:600; font-size:.85rem;
  }
  .btn:hover{filter:brightness(1.08);}
  .btn.ghost{background:transparent; color:var(--accent); border:1px solid var(--accent-soft-border);}
  .btn.ghost:hover{background:var(--accent-soft);}
  .btn.danger{background:transparent; color:var(--bad); border:1px solid var(--bad-border); padding:5px 9px; font-size:.78rem;}
  .btn.danger:hover{background:var(--bad-bg);}
  .row-actions{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap;}

  .field-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:12px 16px; margin-bottom:6px;}
  .field{display:flex; flex-direction:column; gap:4px;}
  .field label{font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft);}

  .panel.quickstart{background:var(--accent-soft); border-color:var(--border-strong); padding:14px 20px;}
  .panel.quickstart summary{cursor:pointer; list-style:none; font-weight:600; font-size:1rem; display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; padding:4px 0;}
  .panel.quickstart summary::-webkit-details-marker{display:none;}
  .panel.quickstart summary::before{content:"▸"; margin-right:2px; color:var(--ink-soft); transition:transform .15s;}
  .panel.quickstart[open] summary::before{content:"▾";}
  .panel.quickstart .qs-sub{font-weight:400; font-size:.8rem; color:var(--ink-soft);}
  .quickstart-row{display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap;}

  .scope-line{
    display:inline-block; background:var(--accent-soft); border:1px solid var(--border-strong);
    border-radius:7px; padding:6px 12px; font-size:.85rem; margin:2px 0 14px; color:var(--ink);
  }

  .manual-checks{display:flex; flex-direction:column; gap:8px;}
  .manual-checks label{display:flex; align-items:flex-start; gap:8px; font-size:.85rem; color:var(--ink-soft);}
  .manual-checks input{margin-top:3px; flex-shrink:0;}
  .manual-checks label.unchecked{color:var(--bad); font-weight:600;}

  /* ---------- summary blocks ---------- */
  .block-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:14px; margin-top:4px;}
  .block-card{
    border:1px solid var(--border); border-radius:9px; padding:14px 16px; background:var(--surface-2);
  }
  .block-card .k{font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft);}
  .block-card .v{font-family:var(--font-mono); font-size:1.4rem; font-weight:600; margin-top:2px;}
  .block-card .of{color:var(--ink-faint); font-size:.78rem; font-weight:400;}
  .meter{height:6px; border-radius:99px; background:var(--border); margin-top:8px; overflow:hidden;}
  .meter > i{display:block; height:100%; background:var(--accent);}

  /* ---------- checklist ---------- */
  ul.checklist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
  ul.checklist li{
    display:flex; gap:10px; align-items:flex-start; padding:9px 11px; border-radius:8px; border:1px solid var(--border);
    font-size:.87rem; background:var(--surface);
  }
  ul.checklist li .mark{
    flex:none; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:.72rem; font-weight:700; margin-top:1px;
  }
  li.ok{border-color:var(--good-border);} li.ok .mark{background:var(--good-bg); color:var(--good);}
  li.fail{border-color:var(--bad-border);} li.fail .mark{background:var(--bad-bg); color:var(--bad);}
  li.warn{border-color:var(--warn-border);} li.warn .mark{background:var(--warn-bg); color:var(--warn);}
  li .txt b{display:block;}
  li .txt span{color:var(--ink-soft); font-size:.82rem;}

  .pool-list{display:flex; flex-direction:column; gap:5px; max-height:340px; overflow-y:auto; border:1px solid var(--border); border-radius:8px; padding:8px;}
  .pool-item{display:flex; align-items:center; gap:9px; font-size:.83rem; padding:4px 6px; border-radius:6px;}
  .pool-item.included{background:var(--accent-soft);}
  .pool-item.disabled{opacity:.5;}
  .pool-item .pts{font-family:var(--font-mono); font-weight:600; width:26px; text-align:right;}
  .pool-item .lbl{flex:1; color:var(--ink-soft);}

  details.ref summary{cursor:pointer; font-weight:600; color:var(--accent); font-size:.88rem; padding:4px 0;}
  details.ref[open] summary{margin-bottom:8px;}
  .note-table{font-size:.78rem;}
  .note-table td,.note-table th{padding:4px 8px;}

  footer{color:var(--ink-faint); font-size:.8rem; padding-block:30px 40px; line-height:1.7;}
  footer a{color:var(--ink-soft);}
  .hero-details{margin:22px 0 6px;}
  .hero-details summary{cursor:pointer; list-style:none; user-select:none; padding:2px 0; line-height:1.4;}
  .hero-details .hero-title{font-family:var(--font-display); font-weight:600; font-size:1.6rem; color:var(--ink); display:block; margin-bottom:2px;}
  .hero-details .hero-teaser{color:var(--ink-soft); font-size:.92rem;}
  .hero-details summary::-webkit-details-marker{display:none;}
  .hero-details .more-hint{color:var(--accent); font-family:var(--font-body); font-weight:600; font-size:.86rem; white-space:nowrap;}
  .hero-details[open] .more-hint{display:none;}
  .hero-details header.hero{padding-top:2px;}
  .hero-details header.hero h1{display:none;}
  /* Bewusst nur ein kompaktes "💡 Info" statt des vollen Fragesatzes -- so kurz, dass es so gut wie
     nie selbst zum Umbruch beiträgt, ob es inline hinter den Varianten-Buttons bleibt oder (bei sehr
     schmalen Bildschirmen) mit umbricht ist dann fast egal, weil es kaum noch Platz braucht. */
  .ps-hint-details{align-self:center;}
  .ps-hint-details summary{white-space:nowrap;}
  .ps-hint-details summary{cursor:pointer; list-style:none; font-weight:600; color:var(--ink-soft); font-size:.76rem; padding:2px 0; user-select:none;}
  .ps-hint-details summary::-webkit-details-marker{display:none;}
  .ps-hint-details[open] summary{color:var(--ink);}
  .ps-hint-details .ps-hint{margin-top:6px;}
  .legal-details{margin-top:14px;}
  .legal-details summary{cursor:pointer; color:var(--ink-faint); font-size:.72rem; user-select:none;}
  .legal-details summary:hover{color:var(--ink-soft);}
  .legal-details p{font-size:.72rem; line-height:1.6; margin:8px 0 0;}

  /* ---------- Profil-/Varianten-Leiste ---------- */
  .ps-bar{
    padding-block:12px; border-bottom:1px solid var(--border); margin-inline:-16px; padding-inline:16px;
    background:var(--surface-2);
  }
  .ps-bar-inner{max-width:980px; margin:0 auto; display:flex; flex-wrap:wrap; gap:16px 28px; align-items:center;}
  .ps-group{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
  .ps-group label{font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); margin-right:2px;}
  .btn.sm{padding:7px 11px; font-size:.76rem; border-radius:6px;}
  .ps-group .btn.danger{margin-left:4px;}
  select#profileSelect, select#scenarioSelect{font-family:var(--font-body); font-size:.85rem; max-width:180px;}
  .ps-hint{font-size:.76rem; color:var(--ink-soft); margin:0; max-width:none;}
  /* Fachart steuert nur im Hintergrund die GSO-Regeln und stimmt fast immer mit "Fach" überein –
     standardmäßig ausgeblendet, um nicht wie ein redundantes Duplikat zu wirken; bei Bedarf einblendbar. */
  .fachart-col{display:none;}
  body.show-fachart .fachart-col{display:table-cell;}

  /* ---------- HJL-Zellen (Direkt/Detail) ---------- */
  .hjl-btn{
    width:100%; min-width:56px; background:var(--surface); border:1px solid var(--border-strong); border-radius:6px;
    padding:6px 4px; font-family:var(--font-mono); font-size:.86rem; color:var(--ink); position:relative; text-align:center;
  }
  .hjl-btn:hover{border-color:var(--accent);}
  .hjl-btn.empty{color:var(--ink-faint);}
  .hjl-btn .detail-mark{position:absolute; top:1px; right:2px; font-size:.6rem; line-height:1; font-family:var(--font-mono); color:var(--accent); font-weight:700;}
  .hjl-btn.hjl-in{border:2px solid var(--good); background:var(--good-bg);}
  .hjl-btn.hjl-out{border:2px solid var(--bad); background:var(--bad-bg);}
  .hjl-btn.hjl-na{border-style:dashed; color:var(--ink-faint); font-size:.72rem;}
  .hjl-btn.hjl-prognose{border-style:dashed; font-style:italic;}
  .hjl-btn.hjl-prognose:not(.hjl-in):not(.hjl-out){border-color:var(--warn);}
  select.f-abi{width:52px; padding:4px 2px; text-align:center;}
  /* Read-only Pendant zu .hjl-btn für Schritt 3 (Auswertung) -- bewusst eigene Klasse statt .hjl-btn
     selbst, damit ein Klick dort NICHT mehr das (inzwischen ungenutzte) Modal öffnen kann. */
  .hjl-ro{
    display:inline-block; width:100%; min-width:56px; background:var(--surface); border:1px solid var(--border-strong); border-radius:6px;
    padding:6px 4px; font-family:var(--font-mono); font-size:.86rem; color:var(--ink); position:relative; text-align:center; cursor:default;
  }
  .hjl-ro.empty{color:var(--ink-faint);}
  .hjl-ro .detail-mark{position:absolute; top:1px; right:2px; font-size:.6rem; line-height:1; font-family:var(--font-mono); color:var(--accent); font-weight:700;}
  .hjl-ro.hjl-in{border:2px solid var(--good); background:var(--good-bg);}
  .hjl-ro.hjl-out{border:2px solid var(--bad); background:var(--bad-bg);}
  .hjl-ro.hjl-na{border-style:dashed; color:var(--ink-faint); font-size:.72rem;}
  .hjl-ro.hjl-prognose{border-style:dashed; font-style:italic;}
  .hjl-ro.hjl-prognose:not(.hjl-in):not(.hjl-out){border-color:var(--warn);}

  /* ---------- Schritt 2 (Noteneingabe): inline HJL-Editor je Halbjahr, kein Modal mehr ---------- */
  .hjl-grades-head, .hjl-grades-row{display:grid; grid-template-columns:140px repeat(4,minmax(150px,1fr)); gap:10px; align-items:start;}
  .hjl-grades-head{font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); padding:0 0 6px; border-bottom:1px solid var(--border); margin-bottom:4px; min-width:750px;}
  .hjl-grades-grid{min-width:750px;}
  .hjl-grades-row{padding:10px 0; border-bottom:1px solid var(--border);}
  .hjl-grades-row:last-child{border-bottom:none;}
  .hjl-grades-label{font-weight:600; padding-top:8px; word-break:break-word;}
  .hjl-inline{border:1px solid var(--border); border-radius:8px; padding:6px; background:var(--surface);}
  /* Bewusst KEINE grün/rot-Einbringungs-Färbung hier wie bei .hjl-ro -- auf Schritt 2 beim laufenden
     Eintragen verwirrt das eher, als dass es hilft; die Einbringung sieht man in Schritt 3. */
  .hjl-inline.hjl-na{border-style:dashed;}
  .hjl-direct-row{display:flex; align-items:center; gap:4px;}
  .hjl-direct-row select.hjl-direct-pts{width:50px; padding:4px 2px; text-align:center; font-family:var(--font-mono);}
  .hjl-direct-row select.hjl-direct-pts:disabled{opacity:.55;}
  .hjl-detail-toggle{font-size:.74rem; margin-top:4px;}
  .hjl-detail-toggle summary{cursor:pointer; color:var(--ink-soft); list-style:none;}
  .hjl-detail-toggle summary::-webkit-details-marker{display:none;}
  .hjl-detail-toggle summary::before{content:"▸ ";}
  .hjl-detail-toggle[open] summary::before{content:"▾ ";}
  .detail-group-mini{margin-top:6px;}
  .detail-head-mini{display:flex; justify-content:space-between; align-items:center; font-size:.68rem; color:var(--ink-faint); margin-bottom:3px;}
  .btn.ghost.xs{padding:1px 6px; font-size:.68rem; border-radius:5px;}
  .grade-row-mini{display:flex; align-items:center; gap:3px; margin-bottom:3px;}
  .grade-row-mini select.grade-pts{width:42px; padding:2px; font-size:.72rem; font-family:var(--font-mono);}
  .grade-row-mini input.grade-notiz{flex:1; min-width:0; font-size:.7rem; padding:3px 5px; border:1px solid var(--border); border-radius:4px; background:var(--surface); color:var(--ink); font-family:var(--font-body);}
  .grade-row-mini .grade-prognose{padding:1px; font-size:.7rem;}
  .grade-row-mini .rm-mini{background:none; border:none; color:var(--ink-faint); cursor:pointer; font-size:.68rem; padding:1px 3px; flex-shrink:0;}
  .grade-row-mini .rm-mini:hover{color:var(--bad);}
  .hjl-detail-result-mini{font-size:.66rem; color:var(--ink-faint); margin-top:4px;}

  /* ---------- Punkte-Range-Anzeige unter der Ø-Note ---------- */
  .note-range{margin-top:20px; max-width:380px;}
  .note-range-track{position:relative; height:6px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); margin-top:24px;}
  .note-range-marker{position:absolute; top:50%; left:0; width:12px; height:12px; border-radius:50%; background:var(--accent); border:2px solid var(--surface); transform:translate(-50%,-50%); box-shadow:0 1px 3px rgba(0,0,0,.3);}
  .note-range-value{position:absolute; bottom:11px; left:50%; transform:translateX(-50%); font-family:var(--font-mono); font-size:.74rem; font-weight:600; color:var(--accent); white-space:nowrap;}
  .note-range-labels{display:flex; justify-content:space-between; font-size:.72rem; color:var(--ink-faint); margin-top:4px; font-family:var(--font-mono);}
  .fw-zusatz-hour{width:3.4em; text-align:center; font-family:var(--font-mono); padding:4px 2px;}
  .hjl-legend{display:flex; flex-wrap:wrap; gap:14px; align-items:center; font-size:.78rem; color:var(--ink-soft); margin:6px 0 10px;}
  .hjl-legend .swatch{display:inline-block; width:14px; height:14px; border-radius:4px; vertical-align:middle; margin-right:5px; position:relative; top:-1px;}
  .hjl-legend .swatch.in{border:2px solid var(--good); background:var(--good-bg);}
  .hjl-legend .swatch.out{border:2px solid var(--bad); background:var(--bad-bg);}
  .hjl-legend .swatch.prognose{border:2px dashed var(--warn); background:var(--surface);}

  /* ---------- Modal ---------- */
  .modal-backdrop{
    position:fixed; inset:0; background:color-mix(in srgb, #000 45%, transparent);
    display:flex; align-items:center; justify-content:center; z-index:100; padding:16px;
  }
  .modal-backdrop[hidden]{display:none;}
  .modal{
    background:var(--surface); border-radius:12px; border:1px solid var(--border);
    width:100%; max-width:440px; max-height:88vh; overflow-y:auto;
    box-shadow:0 20px 60px -20px rgba(0,0,0,.45);
  }
  .modal-head{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:14px 16px; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--surface);
  }
  .modal-head h3{font-size:1rem;}
  .modal-close{background:none; border:none; color:var(--ink-soft); font-size:1rem; padding:4px 8px; border-radius:6px;}
  .modal-close:hover{background:var(--surface-2); color:var(--ink);}
  .modal-body{padding:16px;}
  .seg-toggle{display:flex; border:1px solid var(--border-strong); border-radius:8px; overflow:hidden; margin-bottom:16px;}
  .seg-toggle .seg{flex:1; background:var(--surface); border:none; padding:8px 6px; font-size:.8rem; color:var(--ink-soft); border-right:1px solid var(--border-strong);}
  .seg-toggle .seg:last-child{border-right:none;}
  .seg-toggle .seg.active{background:var(--accent); color:var(--accent-ink); font-weight:600;}
  .detail-group{margin-bottom:16px;}
  .detail-head{display:flex; align-items:center; justify-content:space-between; font-size:.78rem; font-weight:600; color:var(--ink-soft); margin-bottom:8px; gap:8px;}
  .grade-row{display:flex; align-items:center; gap:8px; margin-bottom:6px;}
  .grade-row select.grade-pts{flex:0 0 92px;}
  .grade-row input.grade-notiz{flex:1; min-width:0; border:1px solid var(--border); border-radius:6px; padding:5px 8px; font-size:.78rem; background:var(--surface); color:var(--ink); font-family:var(--font-body);}
  .grade-row .rm{background:none; border:none; color:var(--ink-faint); font-size:.9rem; padding:6px 10px; margin-left:2px;}
  .grade-row .rm:hover{color:var(--bad);}
  .grade-prognose{display:flex; align-items:center; gap:3px; font-size:.8rem; color:var(--ink-faint); cursor:pointer; padding:4px 2px;}
  .grade-prognose:has(input:checked){color:var(--warn); font-weight:600;}
  .detail-result{
    background:var(--accent-soft); border:1px solid var(--accent-soft-border); border-radius:8px;
    padding:10px 12px; font-size:.85rem; margin-top:4px;
  }
  .detail-result b{font-family:var(--font-mono);}

  @media (max-width:640px){
    .score-cluster{gap:14px;}
    .score-item .num{font-size:1.2rem;}
    section.panel{padding:16px 14px 18px;}
  }

  /* ---------- Tabs (Schritt 1 Fächerwahl / Schritt 2 Noten) ---------- */
  .tab-nav{margin-block:22px 4px;}
  .tab-nav-hint{font-size:.72rem; color:var(--ink-faint); margin:0 0 8px; text-transform:uppercase; letter-spacing:.04em;}
  .tab-nav-row{
    display:flex; align-items:stretch; gap:0; flex-wrap:wrap;
    border:1px solid var(--border-strong); border-radius:calc(var(--radius) + 4px); background:var(--surface-2);
    padding:5px; box-shadow:inset 0 1px 2px rgba(0,0,0,.03);
  }
  .tab-btn{
    flex:1 1 190px; display:flex; align-items:center; gap:10px; text-align:left;
    background:transparent; border:1px solid transparent; border-radius:var(--radius);
    padding:9px 11px; color:var(--ink-soft); cursor:pointer;
    transition:background-color .12s ease, border-color .12s ease, box-shadow .12s ease, transform .06s ease;
  }
  .tab-btn:hover{background:var(--surface); border-color:var(--border-strong);}
  .tab-btn:active{transform:scale(.99);}
  .tab-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
  .tab-btn-badge{
    flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:var(--surface);
    border:1px solid var(--border-strong); color:var(--ink-soft); font-family:var(--font-mono);
    font-weight:600; font-size:.85rem; display:flex; align-items:center; justify-content:center;
  }
  .tab-btn-text{display:flex; flex-direction:column; min-width:0;}
  .tab-btn-title{font-weight:600; font-size:.98rem; color:var(--ink);}
  .tab-btn-sub{font-size:.76rem; font-weight:400; color:var(--ink-soft); margin-top:2px;}
  .tab-btn.active{background:var(--accent); border-color:var(--accent); box-shadow:0 1px 3px rgba(0,0,0,.12);}
  .tab-btn.active:hover{background:var(--accent);}
  .tab-btn.active .tab-btn-badge{background:var(--accent-ink); border-color:var(--accent-ink); color:var(--accent);}
  .tab-btn.active .tab-btn-title, .tab-btn.active .tab-btn-sub{color:var(--accent-ink);}
  .tab-nav-arrow{
    display:flex; align-items:center; justify-content:center; padding-inline:4px;
    color:var(--ink-faint); font-size:1.1rem; flex:0 0 auto;
  }
  @media (max-width:640px){
    .tab-nav-row{flex-direction:column; gap:4px;}
    /* flex-basis:230px auf .tab-btn ist für die horizontale Desktop-Breite gedacht -- bei
       flex-direction:column wird dieselbe Zahl sonst zur Mindesthöhe, macht die Buttons riesig. */
    .tab-btn{flex:1 1 auto; padding:8px 10px; gap:8px;}
    .tab-btn-badge{width:20px; height:20px; font-size:.74rem;}
    .tab-btn-title{font-size:.86rem;}
    .tab-btn-sub{font-size:.68rem; margin-top:0;}
    .tab-nav-arrow{display:none;}
  }
  .tab-panel[hidden]{display:none;}

  .fw-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:14px 18px; margin-bottom:10px;}
  .fw-field{display:flex; flex-direction:column; gap:4px;}
  .fw-field label{font-size:.78rem; color:var(--ink-soft);}
  .fw-field select{width:100%;}
  .fw-check-row{display:flex; align-items:flex-start; gap:8px; font-size:.85rem; color:var(--ink-soft); margin:8px 0;}
  .fw-check-row input{margin-top:3px; flex-shrink:0;}
  .fw-locked-note{display:block; font-size:.76rem; color:var(--ink-faint); font-style:italic; margin-top:4px;}
  .hours-table{font-size:.82rem;}
  .hours-table td,.hours-table th{padding:5px 8px;}
  .hours-total-row td{font-weight:600; border-top:2px solid var(--border-strong);}

  /* ---------- Fächerwahl-Assistent (Wizard) ---------- */
  .fw-skip-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; margin:14px 0 -4px;}
  .fw-wizard-progress{margin-bottom:18px;}
  .fw-wizard-bar{height:6px; border-radius:99px; background:var(--surface-2); overflow:hidden;}
  .fw-wizard-bar > i{display:block; height:100%; background:var(--accent);}
  .fw-wizard-label{font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); margin-top:8px;}
  .fw-step h2{font-size:1.1rem; margin-bottom:4px;}
  .fw-step[hidden]{display:none;}
  .fw-wizard-nav{justify-content:space-between; margin-top:22px; padding-top:16px; border-top:1px solid var(--border);}

  /* ---------- Schritt 4: Simulation & Teilen ---------- */
  .mode-toggle{display:flex; gap:6px; margin-bottom:18px; flex-wrap:wrap;}
  .mode-toggle button{flex:1 1 140px; padding:9px 10px; border-radius:8px; border:1px solid var(--border-strong); background:var(--surface); cursor:pointer; font-size:.82rem; font-family:inherit; color:var(--ink-soft); font-weight:600;}
  .mode-toggle button.active{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}

  .val-inline{font-family:var(--font-mono); font-weight:600; color:var(--accent);}
  .range-hint{display:flex; justify-content:space-between; font-size:.7rem; color:var(--ink-faint); font-family:var(--font-mono); margin-top:4px;}

  /* Wert-Blase folgt der Schieber-Position, statt fest im (oft mehrzeiligen) Label-Text zu stehen -- */
  /* sonst rutscht der Wert bei langen Labels unschoen auf eine eigene Zeile (siehe Nutzer-Feedback). */
  .slider-track-wrap{position:relative; padding-top:26px;}
  .slider-track-wrap input[type="range"]{display:block; width:100%;}
  .slider-value-bubble{position:absolute; top:0; left:0; transform:translateX(-50%); font-family:var(--font-mono); font-weight:700; font-size:1rem; color:var(--accent); white-space:nowrap; pointer-events:none;}

  .offset-field{margin:-4px 0 18px;}
  .offset-field > label{display:block; font-size:.74rem; font-weight:600; color:var(--ink-soft); margin-bottom:6px; text-transform:uppercase; letter-spacing:.03em;}
  .offset-toggle{display:flex; gap:6px;}
  .offset-toggle button{flex:1 1 100px; padding:8px 6px; border-radius:8px; border:1px solid var(--border-strong); background:var(--surface); cursor:pointer; font-size:.82rem; font-family:inherit; color:var(--ink-soft); font-weight:600;}
  .offset-toggle button.active{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}
  .offset-toggle button small{display:block; font-weight:400; font-size:.7rem; opacity:.85;}

  .result-row{display:flex; gap:28px; align-items:baseline; flex-wrap:wrap; margin:18px 0 6px; padding:16px 18px; background:var(--surface-2); border-radius:var(--radius);}
  .result-num{font-family:var(--font-display); font-weight:700;}
  .result-note .result-num{font-size:2.4rem;}
  .result-label{display:block; font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); margin-top:2px;}
  .result-row .status-pill{margin-left:auto;}

  /* Trichter: EINE Skala (fest 4,0 bis 1,0), 3 verschieden farbige/dicke Knubbel: Pessimistisch/Standard/Optimistisch.
     Farben sind bewusst fix (rot/blau/grün), unabhaengig vom App-Farbschema -- eine Ampel-Semantik. */
  .funnel{margin-top:22px;}
  .funnel-label{font-size:.8rem; font-weight:600; color:var(--ink-soft); margin-bottom:8px;}
  .trichter-wrap{position:relative; padding:40px 10px 52px;}
  .trichter-bar{position:relative; height:8px; border-radius:99px; background:var(--accent-soft);}
  .trichter-range{position:absolute; top:0; height:100%; background:#2f6fd6; opacity:.2; border-radius:99px;}
  .trichter-point{position:absolute; top:50%; border-radius:50%; transform:translate(-50%,-50%); border:3px solid var(--surface); box-shadow:0 1px 4px rgba(0,0,0,.22);}
  .trichter-point.pessimistic{width:18px; height:18px; background:#c8493c;}
  .trichter-point.standard{width:28px; height:28px; background:#2f6fd6; border-width:4px;}
  .trichter-point.optimistic{width:18px; height:18px; background:#3fb56a;}
  .trichter-callout{position:absolute; text-align:center; font-size:.78rem; white-space:nowrap; transform:translateX(-50%); font-weight:700; line-height:1.4;}
  .trichter-callout#simCPess{color:#a1281f;}
  .trichter-callout#simCOpt{color:#1e8a4e;}
  .trichter-callout.standard{font-size:.92rem; color:#2f6fd6;}
  .trichter-callout.top{top:-32px;}
  .trichter-callout.bottom{top:36px;}
  .trichter-scale{display:flex; justify-content:space-between; font-size:.68rem; color:var(--ink-faint); font-family:var(--font-mono); margin-top:2px;}

  /* 01 (Simulation) und 02 (Teilen) nebeneinander ab ausreichender Breite -- das hochformatige
     Story-Bild braucht ohnehin keine volle Zeilenbreite. */
  .sim-columns{display:flex; flex-direction:column;}
  @media (min-width:900px){
    .sim-columns{display:grid; grid-template-columns:1.3fr 1fr; gap:16px; align-items:start;}
    .sim-columns > section.panel{margin-block:16px 0;}
  }

  .share-layout{display:flex; gap:28px; flex-wrap:wrap; align-items:flex-start; justify-content:center;}
  .preview-col{flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:14px;}
  .canvas-frame{border-radius:22px; overflow:hidden; box-shadow:0 10px 40px -14px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.1); border:1px solid var(--border-strong); max-width:100%;}
  #simShareCanvas{display:block; width:230px; height:409px; max-width:100%; height:auto; aspect-ratio:9/16;}
  .actions{display:flex; gap:8px; flex-wrap:wrap; justify-content:center;}