/* EmpCo Compliance Scanner: Gestaltung der Weboberflaeche.
   Getrennt vom HTML, damit die Seite so aufgebaut ist wie unsere Websites.
   Keine externen Aufrufe: Schriften aus dem System, Symbole als Inline-SVG. */

  :root{
    /* masdemas-CI, gleiche Werte wie im Team-Tool */
    --ink:#0f172a; --muted:#5b5750;
    /* --faint war #8a8279 und kam auf hellen Flaechen nur auf 2,9 bis 3,8:1.
       Noetig sind 4,5:1. Dieser Wert haelt auf allen verwendeten Untergruenden
       mindestens 4,9:1, auch auf den eingefaerbten Risikoflaechen. */
    --faint:#665f56;
    --paper:#f7f2eb; --card:#ffffff; --line:#e6ddd0; --line-soft:#f0e8dc;
    /* Akzent: tiefes Tannengruen. Passt zum Thema und traegt Text mit 7,8:1
       Kontrast, das alte Clay-Orange kam nur auf 2,2:1 und war deshalb nie als
       Textfarbe verwendbar. */
    --gruen:#265C46; --gruen-tief:#1B4534; --gruen-soft:#DDEBE2; --gruen-softer:#F0F6F2;
    /* Helles Gruen ausschliesslich fuer dunkle Flaechen. Das Marken-Gruen kommt
       dort nur auf 2,3:1 und ist damit kaum lesbar, dieses auf 11,5:1. */
    --gruen-auf-dunkel:#8FE0B6;
    /* Abgesetzter Text auf dunkler Flaeche, statt Weiss mit Transparenz */
    --hell-gedaempft:#c9ced8;

    /* Risikostufen, warm abgestimmt statt kuehles Ampelgrau */
    --kritisch:#8c2f14; --kritisch-bg:#f6ded6;
    /* Schrift auf der eigenen Flaeche: vorher 3,8:1, jetzt 5,0:1 */
    --hoch:#a8431f;     --hoch-bg:#f9e6dd;
    /* Schrift auf der eigenen Flaeche: vorher 3,4:1, jetzt 5,2:1 */
    --mittel:#8a5a05;   --mittel-bg:#fdeecd;
    --niedrig:#1f7d4c;  --niedrig-bg:#dcf0e4;

    --r:16px; --r-sm:10px; --sb:264px;
    --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif;
    --mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;
    --ease:cubic-bezier(.22,.61,.36,1);
    --sh:0 1px 2px rgba(28,24,20,.04), 0 10px 28px -18px rgba(28,24,20,.35);
    --sh-up:0 2px 4px rgba(28,24,20,.06), 0 18px 40px -22px rgba(28,24,20,.4);
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);
    font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
  a{color:var(--gruen-tief)}
  button{font-family:inherit}
  :focus-visible{outline:2px solid var(--gruen-tief);outline-offset:2px;border-radius:4px}

  /* Wiederkehrende Struktur-Bausteine ------------------------------------ */
  .eyebrow{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
    color:var(--faint);margin:0 0 6px}
  .seclabel{display:flex;align-items:baseline;gap:12px;margin:34px 0 14px}
  .seclabel h2{font-size:15px;font-weight:800;letter-spacing:-.01em;margin:0;white-space:nowrap}
  .seclabel .rule{flex:1;height:1px;background:var(--line)}
  .seclabel .zahl{font-size:12px;color:var(--faint);font-weight:700;font-variant-numeric:tabular-nums}
  .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}

  /* Grundraster: Seitenleiste + Arbeitsflaeche --------------------------- */
  .app{display:none;min-height:100vh}
  .app.an{display:grid;grid-template-columns:var(--sb) 1fr}

  .sidebar{background:var(--card);border-right:1px solid var(--line);
    display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:hidden}
  .brand{padding:24px 22px 20px;border-bottom:1px solid var(--line-soft)}
  .brand img{height:26px;width:auto;display:block;margin-bottom:14px}
  .brand .werkzeug{font-size:14px;font-weight:800;letter-spacing:-.01em;line-height:1.3}
  .brand .zweck{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.45}
  /* Fabian Baumheuer ist fachlicher Partner, das gehoert sichtbar in das Werkzeug */
  .brand .partner{font-size:11.5px;color:var(--muted);margin-top:11px;padding-top:11px;
    border-top:1px solid var(--line-soft);line-height:1.45}
  .brand .partner b{color:var(--ink);font-weight:700}

  .sb-abschnitt{padding:18px 22px 8px}
  .laeufe{flex:1;overflow-y:auto;padding:0 12px 12px}
  .lauf{width:100%;display:flex;align-items:center;gap:10px;padding:10px;border:0;
    background:transparent;border-radius:var(--r-sm);cursor:pointer;text-align:left;
    transition:background .18s var(--ease);min-height:44px}
  .lauf:hover{background:var(--gruen-softer)}
  .lauf[aria-current="true"]{background:var(--gruen-soft)}
  .punkt{width:8px;height:8px;border-radius:50%;flex:none}
  .punkt.fertig{background:var(--niedrig)}
  .punkt.laeuft{background:var(--gruen);animation:pulsieren 1.6s infinite}
  .punkt.fehler,.punkt.abgebrochen{background:var(--hoch)}
  @keyframes pulsieren{0%,100%{opacity:1}50%{opacity:.3}}
  .lauf .wo{flex:1;min-width:0;font-size:13px;font-weight:600;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
  .lauf .wann{font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums;flex:none}

  .sb-fuss{padding:14px 22px 18px;border-top:1px solid var(--line-soft);
    display:flex;align-items:center;justify-content:space-between;gap:10px}
  .sb-fuss .stand{font-size:11px;color:var(--faint)}
  .linkbtn{background:transparent;border:1px solid var(--line);color:var(--muted);font-size:12px;
    font-weight:700;padding:8px 13px;border-radius:99px;cursor:pointer;min-height:36px;
    transition:border-color .18s var(--ease),color .18s var(--ease)}
  .linkbtn:hover{border-color:var(--gruen);color:var(--ink)}

  .main{min-width:0;padding:0 0 72px}
  .topbar{position:sticky;top:0;z-index:10;background:rgba(247,242,235,.9);
    backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line);
    padding:18px 34px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
  .topbar h1{font-size:19px;font-weight:800;letter-spacing:-.02em;margin:0}
  .topbar .kontext{font-size:12.5px;color:var(--muted);margin-left:auto;font-variant-numeric:tabular-nums}
  .topbar .neu{background:var(--ink);color:#fff;border:0;border-radius:99px;font-size:13px;font-weight:800;
    padding:9px 18px;cursor:pointer;min-height:40px;transition:opacity .18s var(--ease)}
  .topbar .neu:hover{opacity:.85}
  /* Der Markenblock fuehrt zurueck zum Start, damit man nicht in einer Ansicht feststeckt */
  .marke-zurueck{display:block;width:100%;text-align:left;background:transparent;border:0;
    padding:0;cursor:pointer;font-family:inherit}
  .marke-zurueck:hover .werkzeug{color:var(--gruen-tief)}

  /* Zustimmungs-Karte: eine Entscheidung mit Folgen, deshalb als eigene Karte
     mit Symbol, klarer Überschrift und der Konsequenz darunter. Im gesetzten
     Zustand färbt sich die Karte ein, damit man sie nicht übersieht. */
  .zustimmung{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);
    margin-bottom:16px;overflow:hidden;transition:background .2s var(--ease),border-color .2s var(--ease)}
  .zustimmung:hover{border-color:#d5c9b6}
  .zustimmung:has(input:checked){background:var(--gruen-softer);border-color:var(--gruen-soft)}
  .zustimmung:has(input:focus-visible){outline:2px solid var(--gruen-tief);outline-offset:2px}
  .zu-kopf{display:flex;gap:12px;align-items:flex-start;padding:14px 16px 0;cursor:pointer;
    margin:0;text-transform:none;letter-spacing:normal;font-size:inherit;color:inherit;font-weight:400}
  .zu-box{position:relative;width:20px;height:20px;flex:none;margin-top:1px}
  .zu-box input{position:absolute;inset:0;width:20px;height:20px;margin:0;opacity:0;cursor:pointer}
  .zu-kaestchen{position:absolute;inset:0;border:1px solid #c9bda9;border-radius:5px;background:#fff;
    display:grid;place-items:center;transition:background .18s var(--ease),border-color .18s var(--ease);
    pointer-events:none}
  .zu-box input:checked + .zu-kaestchen{background:var(--gruen);border-color:var(--gruen)}
  .zu-kaestchen svg{opacity:0;transition:opacity .15s var(--ease)}
  .zu-box input:checked + .zu-kaestchen svg{opacity:1}
  .zu-titel{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:800;
    color:var(--ink);line-height:1.35}
  .zu-titel svg{flex:none;color:var(--gruen)}
  .zu-sub{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:3px}
  .zu-folge{font-size:12px;color:var(--muted);line-height:1.5;padding:10px 16px 14px 48px;
    border-top:1px dashed transparent;margin-top:10px}
  .zustimmung:has(input:checked) .zu-folge{border-top-color:#c7dfd0}
  .inhalt{padding:26px 34px 0;max-width:1180px}

  /* Schritt 1 und 2 ------------------------------------------------------ */
  /* align-items:stretch, damit beide Karten gleich hoch sind. Vorher richtete
     sich jede Karte nach ihrem Inhalt, dadurch stand die schmale Spalte deutlich
     kuerzer neben der breiten. */
  .arbeit{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:20px;
    align-items:stretch}
  /* Solange nichts laeuft, gibt es nichts anzuzeigen. Dann bekommt das Formular
     die ganze Breite und die zweite Karte entfaellt, statt als leere Flaeche
     danebenzustehen. */
  .arbeit.leer{grid-template-columns:minmax(0,1fr) minmax(0,320px)}
  .block{padding:22px 24px}
  /* Die Arbeitskarte fuellt die gleiche Hoehe wie das Formular: Inhalt oben,
     Abbrechen-Knopf unten, statt unten leer auszulaufen. */
  #arbeitKarte{display:flex;flex-direction:column}
  #lauf{flex-direction:column;flex:1}
  #lauf #abbrechenBtn{margin-top:auto;align-self:flex-start}
  /* Feldpaar nebeneinander, damit das breite Formular nicht in die Laenge waechst */
  /* Nebeneinander nur im Leerzustand, wo die Spalte breit ist. Sonst quetschen
     sich die beiden Felder in eine 420px-Spalte und die Hinweise brechen um. */
  .paar{display:grid;grid-template-columns:1fr;gap:0 20px}
  .arbeit.leer .paar{grid-template-columns:1fr 1fr}
  @media(max-width:680px){ .arbeit.leer .paar{grid-template-columns:1fr} }

  /* Ablauf-Streifen: erklaert im Leerzustand, was gleich passiert. Besser als
     ein Platzhalter, und fuer Fabian beim ersten Mal die eigentliche Antwort
     auf "was macht das Ding jetzt". */
  /* Die Schritte verteilen sich ueber die volle Hoehe, damit die gleich hohe
     Karte nicht unten leer ausläuft. */
  .ablauf{padding:20px 22px 22px;display:flex;flex-direction:column}
  .ablauf h3{font-size:14px;font-weight:800;margin:0 0 3px}
  .ablauf .vor{font-size:12.5px;color:var(--muted);margin:0 0 16px;line-height:1.55}
  .schritte{display:grid;grid-template-columns:1fr;gap:8px;margin:0;padding:0;
    list-style:none;counter-reset:s;flex:1;align-content:space-between}
  .schritte li{counter-increment:s;font-size:12px;color:var(--muted);line-height:1.45;
    background:var(--gruen-softer);border:1px solid var(--gruen-soft);border-radius:var(--r-sm);
    padding:24px 12px 12px;position:relative}
  .schritte li::before{content:counter(s);position:absolute;top:9px;left:12px;font-size:11px;
    font-weight:800;color:var(--gruen);font-variant-numeric:tabular-nums}
  .schritte li b{display:block;color:var(--ink);font-size:12.5px;font-weight:700;margin-bottom:2px}
  @media(max-width:1080px){ .arbeit.leer{grid-template-columns:1fr}
    .schritte{grid-template-columns:repeat(2,1fr)} }
  @media(max-width:560px){ .schritte{grid-template-columns:1fr} }
  .block .kopf{display:flex;align-items:center;gap:11px;margin-bottom:16px}
  .schrittnr{width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;
    font-size:12px;font-weight:800;display:grid;place-items:center;flex:none;font-variant-numeric:tabular-nums}
  .block .kopf h3{font-size:14.5px;font-weight:800;margin:0;letter-spacing:-.01em}

  label{display:block;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
    color:var(--faint);margin:0 0 7px}
  .freiwillig{font-weight:600;letter-spacing:.04em;text-transform:none;color:var(--faint);
    background:var(--paper);border:1px solid var(--line);border-radius:99px;
    padding:1px 7px;margin-left:6px;font-size:10px}
  input[type=text],input[type=number],input[type=email],#pw-input{width:100%;padding:12px 14px;border:1px solid var(--line);
    border-radius:var(--r-sm);font-size:15px;font-family:inherit;color:var(--ink);background:var(--paper);
    transition:border-color .18s var(--ease),box-shadow .18s var(--ease);min-height:44px}
  input[type=text]:focus,input[type=number]:focus,input[type=email]:focus{outline:0;border-color:var(--gruen);
    box-shadow:0 0 0 3px var(--gruen-softer)}
  .zeile{display:flex;gap:10px;align-items:flex-end;margin-bottom:16px}
  .zeile .eng{width:118px;flex:none}
  .btn{border:0;border-radius:99px;padding:12px 22px;font-size:14px;font-weight:800;cursor:pointer;
    background:var(--gruen);color:#fff;min-height:44px;white-space:nowrap;
    transition:background .18s var(--ease),box-shadow .18s var(--ease);
    box-shadow:0 10px 22px -14px rgba(38,92,70,.85)}
  .btn:hover{background:var(--gruen-tief);color:#fff}
  .btn[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none}
  .btn.stumm{background:transparent;color:var(--muted);border:1px solid var(--line);box-shadow:none}
  .btn.stumm:hover{background:transparent;border-color:var(--hoch);color:var(--hoch)}
  /* Beanstandete Stelle im Zitat. Gelb waere ueblich, passt hier aber nicht
     zur Palette und liegt beim Kontrast schlechter. Der Wert unten ergibt auf
     dem Zitat-Untergrund 8,9:1. */
  mark{background:var(--gruen-soft);color:var(--gruen-tief);
    padding:1px 3px;border-radius:3px;font-weight:600}
  .val.stark{color:var(--ink);font-weight:600}

  .hinweis{font-size:12.5px;color:var(--muted);margin:0;line-height:1.55}
  /* Hinweis mit Warnton, wenn eine Funktion vorhanden, aber noch nicht nutzbar ist. */
  .hinweis.warnton{background:var(--hoch-bg);border:1px solid #eec8b8;color:var(--kritisch);
    border-radius:var(--r-sm);padding:11px 13px}
  .hinweis.warnton b{display:block;margin-bottom:2px}
  .fehler{background:var(--hoch-bg);color:var(--kritisch);border:1px solid #eec8b8;
    border-radius:var(--r-sm);padding:11px 14px;font-size:13px;font-weight:600;margin-bottom:14px;display:none}
  .fehler.an{display:block}

  /* Laufanzeige ---------------------------------------------------------- */
  #ruhe{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
    color:var(--faint);font-size:13px;padding:34px 10px;min-height:210px;gap:12px}
  #ruhe .kreis{width:46px;height:46px;border-radius:50%;background:var(--gruen-softer);display:grid;place-items:center}
  #lauf{display:flex}
  .zaehlwerk{display:flex;align-items:baseline;gap:9px}
  .zaehlwerk .gross{font-size:46px;font-weight:800;letter-spacing:-.045em;line-height:1;
    font-variant-numeric:tabular-nums}
  .zaehlwerk .cap{font-size:13px;color:var(--muted);font-weight:700}
  .mini{display:flex;gap:26px;margin:14px 0 16px;flex-wrap:wrap}
  .mini div{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
  .mini b{display:block;color:var(--ink);font-weight:800;font-size:17px;letter-spacing:-.02em;
    font-variant-numeric:tabular-nums;margin-bottom:2px}
  .balken{height:6px;background:var(--line-soft);border-radius:99px;overflow:hidden;margin-bottom:14px}
  .balken > i{display:block;height:100%;width:0;background:var(--gruen);transition:width .5s var(--ease)}
  .schritt{font-size:13px;font-weight:700;color:var(--ink);background:var(--paper);
    border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 14px;margin-bottom:12px}
  /* Ein abgewiesener oder fehlgeschlagener Lauf muss deutlich als solcher
     erkennbar sein und darf nicht wie ein sauberes Ergebnis wirken. */
  .schritt.schlecht{background:var(--hoch-bg);border-color:#eec8b8;color:var(--kritisch);
    font-weight:600;line-height:1.55}
  .schritt.schlecht b{display:block;font-weight:800;margin-bottom:3px}
  .weglauf{font-size:12.5px;color:var(--muted);background:var(--gruen-softer);border:1px solid var(--gruen-soft);
    border-radius:var(--r-sm);padding:12px 14px;line-height:1.55;margin-bottom:14px}
  .weglauf b{color:var(--ink)}
  /* Eigene Warnfassung. .schlecht greift nur an .schritt, deshalb nicht wiederverwendbar. */
  .weglauf.warn{background:var(--hoch-bg);border-color:#eec8b8;color:var(--kritisch)}

  /* Ergebnis ------------------------------------------------------------- */
  /* Die Kopfleiste bleibt beim Scrollen stehen. Ohne diesen Abstand rutscht
     der Anfang des Ergebnisses beim Hinspringen darunter. */
  #ergebnis{scroll-margin-top:88px}
  .kacheln{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
  .kachel{padding:18px 20px;border-radius:var(--r);border:1px solid var(--line);background:var(--card);
    box-shadow:var(--sh)}
  .kachel .n{font-size:34px;font-weight:800;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
  .kachel .l{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
    color:var(--faint);margin-top:8px}
  .kachel.kritisch{background:var(--kritisch-bg);border-color:#eccbbe}
  .kachel.kritisch .n{color:var(--kritisch)}
  .kachel.hoch .n{color:var(--hoch)}
  .kachel.mittel .n{color:var(--mittel)}
  .kachel.niedrig .n{color:var(--niedrig)}

  /* Signaturelement: die Entdopplung, unser eigentlicher Unterschied */
  .entdopplung{display:flex;align-items:center;gap:28px;flex-wrap:wrap;
    background:var(--ink);color:#fff;border-radius:var(--r);padding:22px 26px;margin-top:12px}
  .entdopplung .paar{display:flex;align-items:center;gap:18px}
  .entdopplung .wert{text-align:center}
  .entdopplung .wert .z{font-size:30px;font-weight:800;line-height:1;letter-spacing:-.04em;
    font-variant-numeric:tabular-nums}
  .entdopplung .wert .b{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
    color:var(--hell-gedaempft);margin-top:6px}
  .entdopplung .wert.ziel .z{color:var(--gruen-auf-dunkel)}
  .entdopplung .pfeil{display:block;flex:none}
  .entdopplung .txt{flex:1;min-width:240px;font-size:13.5px;line-height:1.6;
    color:var(--hell-gedaempft);max-width:54ch}
  .entdopplung .txt b{color:var(--gruen-auf-dunkel)}

  .flaeche{padding:20px 24px}
  .flaeche p{margin:0 0 8px;color:var(--muted);font-size:14px}
  .flaeche ul{margin:0;padding-left:19px;color:var(--muted);font-size:14px}
  .flaeche li{margin-bottom:5px}
  .flaeche li b{color:var(--ink)}

  .dateien{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
  .datei{display:flex;align-items:center;gap:11px;background:var(--paper);border:1px solid var(--line);
    border-radius:var(--r-sm);padding:13px 15px;font-size:13px;font-weight:700;color:var(--ink);
    text-decoration:none;min-height:44px;transition:border-color .18s var(--ease),background .18s var(--ease)}
  .datei:hover{border-color:var(--gruen);background:var(--gruen-softer)}
  .datei .typ{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--gruen-tief);
    background:var(--gruen-soft);border-radius:5px;padding:3px 7px;flex:none}
  .datei .nam{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .datei .kb{color:var(--faint);font-weight:600;font-size:11.5px;flex:none;font-variant-numeric:tabular-nums}

  .filter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
  .fchip{border:1px solid var(--line);background:var(--card);color:var(--muted);font-size:13px;font-weight:700;
    padding:9px 15px;border-radius:99px;cursor:pointer;min-height:40px;
    transition:all .18s var(--ease);display:inline-flex;align-items:center;gap:7px}
  .fchip:hover{border-color:var(--gruen)}
  .fchip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
  .fchip .c{font-variant-numeric:tabular-nums;opacity:.65;font-weight:800}

  /* Arbeitsliste (seit 16.09.2026): eine Zeile je Gruppe gleicher Befunde.
     Erledigte Zeilen bekommen eine graue Flaeche statt Transparenz, damit der
     Text lesbar bleibt. */
  .bereich{margin:22px 0 10px}
  .bereich h3{margin:0 0 4px;font-size:16px}
  .bereich p{margin:0;color:var(--muted);font-size:13.5px}
  .azeile{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;
    background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);
    padding:12px 16px;margin-bottom:8px}
  .azeile.erledigt{background:var(--line-soft)}
  .azeile input[type="checkbox"]{width:20px;height:20px;margin-top:2px;accent-color:var(--gruen)}
  .azeile .kopfzeile{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:6px}
  .azeile .klasse{font-size:12px;font-weight:800;color:var(--gruen-tief);background:var(--gruen-softer);
    border:1px solid var(--gruen-soft);padding:3px 9px;border-radius:99px}
  .azeile .anzahl{font-size:12px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
  /* Haken, der aus einer frueheren Pruefung derselben Website stammt */
  .azeile .uebernommen{font-size:12px;font-weight:700;color:var(--muted);
    border:1px dashed var(--line);padding:3px 9px;border-radius:99px}
  /* Zeile war abgehakt, hat aber neue Fundstellen bekommen */
  .azeile .gewachsen{font-size:12px;font-weight:800;color:var(--hoch);
    background:var(--hoch-bg);padding:3px 9px;border-radius:99px}
  /* Hinweis der Vorsortierung: Reihenfolge der Sichtung, kein Urteil */
  .azeile .vorsortierung{font-size:12px;font-weight:700;color:var(--muted);
    background:var(--line-soft);padding:3px 9px;border-radius:99px}
  .azeile .vorsortierung.wichtig{color:var(--gruen-tief);background:var(--gruen-softer)}
  .azeile .formulierung{font-weight:700}
  .azeile .beispiel{margin:0 0 6px;font-size:14px}
  .azeile details{font-size:13.5px;color:var(--muted)}
  .azeile summary{cursor:pointer;color:var(--gruen-tief);font-weight:700}
  .azeile .ids{font-family:var(--mono);font-size:12px;color:var(--faint);word-break:break-word}

  .liste{display:flex;flex-direction:column;gap:10px}
  .befund{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;
    box-shadow:var(--sh);cursor:pointer;transition:box-shadow .2s var(--ease),border-color .2s var(--ease)}
  .befund:hover{box-shadow:var(--sh-up);border-color:var(--gruen-soft)}
  .b-kopf{display:flex;align-items:center;gap:10px;margin-bottom:9px;flex-wrap:wrap}
  .cid{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--faint)}
  .marke{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:99px;
    font-size:11.5px;font-weight:800;letter-spacing:.02em}
  .marke::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
  .marke.kritisch{background:var(--kritisch-bg);color:var(--kritisch)}
  .marke.hoch{background:var(--hoch-bg);color:var(--hoch)}
  .marke.mittel{background:var(--mittel-bg);color:var(--mittel)}
  .marke.niedrig{background:var(--niedrig-bg);color:var(--niedrig)}
  .art{font-size:12.5px;color:var(--muted)}
  .fundzahl{margin-left:auto;font-size:12px;font-weight:700;color:var(--muted);background:var(--paper);
    border:1px solid var(--line);padding:4px 11px;border-radius:99px;font-variant-numeric:tabular-nums}
  .zitat{font-size:17px;font-weight:700;letter-spacing:-.015em;margin:0 0 12px;line-height:1.4}

  /* Signatur je Befund: die Dreifachbewertung als Leiste */
  .leiste{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;border-radius:6px;overflow:hidden;
    margin-bottom:14px;max-width:430px}
  .leiste .seg{padding:7px 10px;background:var(--paper)}
  .leiste .seg .wo{font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
    color:var(--faint);margin-bottom:2px}
  .leiste .seg .st{font-size:12px;font-weight:800}
  .leiste .seg.kritisch{background:var(--kritisch-bg)} .leiste .seg.kritisch .st{color:var(--kritisch)}
  .leiste .seg.hoch{background:var(--hoch-bg)}         .leiste .seg.hoch .st{color:var(--hoch)}
  .leiste .seg.mittel{background:var(--mittel-bg)}     .leiste .seg.mittel .st{color:var(--mittel)}
  .leiste .seg.niedrig{background:var(--niedrig-bg)}   .leiste .seg.niedrig .st{color:var(--niedrig)}

  .spalten{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .spalten .lbl{font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
    color:var(--faint);margin:0 0 4px}
  .spalten .val{font-size:13.5px;color:var(--muted);margin:0;line-height:1.6}
  .mehr{margin-top:15px;padding-top:15px;border-top:1px dashed var(--line);display:none}
  .befund.offen .mehr{display:block}
  .mehr .lbl{font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
    color:var(--faint);margin:12px 0 4px}
  .mehr .surl{font-family:var(--mono);font-size:11.5px;color:var(--gruen-tief);padding:2px 0;word-break:break-all}
  .aufklapp{font-size:12px;color:var(--faint);margin-top:11px;font-weight:700}

  .fuss{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:12.5px;
    color:var(--muted);line-height:1.7;max-width:80ch}
  .fuss b{color:var(--ink)}

  /* Anmeldung: masdemas-Standardmaske, hell. Werte 1:1 aus der Referenz
     claude-code-kurs/index.html, nicht abweichen. */
  #pw-overlay{position:fixed;inset:0;background:#f7f2eb;display:flex;align-items:center;justify-content:center;z-index:9999;padding:1.5rem}
  #pw-overlay.hidden{display:none}
  #pw-box{background:#ffffff;border:1px solid #d8cdbb;border-radius:16px;padding:2.5rem;text-align:center;max-width:380px;width:100%;box-shadow:0 24px 60px -28px rgba(28,24,20,.35)}
  #pw-logo{margin-bottom:.5rem;display:flex;justify-content:center}
  #pw-logo img{height:28px;width:auto}
  #pw-tagline{font-size:.72rem;color:#000;opacity:.55;text-transform:uppercase;letter-spacing:.08em;margin-bottom:2rem}
  #pw-box h2{font-size:1.1rem;font-weight:700;color:#000;margin:0 0 .4rem;letter-spacing:-.01em}
  #pw-box p{color:#000;opacity:.7;font-size:.9rem;margin-bottom:1.75rem;line-height:1.6}
  #pw-input{background:#f7f2eb;border-color:#d8cdbb;text-align:center;margin-bottom:.75rem}
  #pw-btn{width:100%;padding:.75rem;border-radius:8px;border:none;background:#f59e0b;color:#1a1a1a;font-size:.9rem;cursor:pointer;font-weight:700;font-family:inherit;transition:opacity .15s;min-height:44px}
  #pw-btn:hover{opacity:.88}
  #pw-error{color:#c0392b;font-size:.82rem;margin-top:.75rem}

  /* Kleinere Bildschirme -------------------------------------------------- */
  @media(max-width:1080px){ .arbeit{grid-template-columns:1fr} .spalten{grid-template-columns:1fr} }
  @media(max-width:900px){
    .app.an{grid-template-columns:1fr}
    .sidebar{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line)}
    .laeufe{max-height:210px}
    .topbar,.inhalt{padding-left:20px;padding-right:20px}
  }
  @media(max-width:640px){ .kacheln{grid-template-columns:repeat(2,1fr)} .zeile{flex-wrap:wrap}
    .zeile .eng{width:100%} .leiste{grid-template-columns:1fr} }

  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
      transition-duration:.001ms !important}
  }

  /* Sichtbarkeit ueber das hidden-Attribut statt ueber Inline-Stile im JavaScript.
     Wichtig: !important, weil die Karten per id ein eigenes display setzen und
     eine id sonst gewinnt. Genau daran sind heute zwei Fehler entstanden, bei
     denen ein inline gesetztes display:block das Spaltenlayout ausgehebelt hat. */
  [hidden]{display:none !important}

  /* Kleine Abstandsklassen, damit im HTML keine style-Attribute stehen */
  .feld{margin-bottom:16px}
  .feld-eng{margin-bottom:6px}
  .leerhinweis{padding:4px 10px}

  /* ---- Kartendurchgang: Aussagen beurteilen (24.09.2026) ----------------
     Eine Entscheidung je Bildschirm. Bewusst ohne Punkte, Abzeichen und
     Konfetti: belohnt wuerde sonst Tempo statt Sorgfalt, und ein
     Compliance-Urteil vertraegt das nicht. Was traegt, ist ein sichtbares
     Ende, ein schneller Tastaturrhythmus und die Auswertung am Schluss. */
  /* Waehrend der Beurteilung wird alles andere im Ergebnis ausgeblendet.
     GRUND: Kurzfassung, Arbeitsliste und Befundliste zeigen zu jeder Aussage
     die Risikostufe, die Begruendung und die Empfehlung des Werkzeugs. Wer
     blind urteilen soll, muesste nur scrollen, um die Antwort zu lesen. Am
     24.09.2026 ist genau das im ersten Bildschirmfoto aufgefallen: unter der
     Karte stand dieselbe Aussage noch einmal, vollstaendig bewertet. */
  .beurteilen > *:not(.beurteilen-teil){display:none !important}

  /* Zwei Wege nebeneinander: ansehen oder selbst beurteilen. Getrennt, weil es
     zwei verschiedene Aufgaben fuer zwei verschiedene Leute sind. */
  .zweiwege{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
  .zweiwege__karte{background:var(--paper);border:1px solid var(--line);
    border-radius:var(--r-sm);padding:18px}
  .zweiwege__karte h3{margin:0 0 8px;font-size:15px}
  .zweiwege__karte p{margin:0 0 12px;font-size:13.5px;color:var(--muted);line-height:1.55}
  @media (max-width:860px){ .zweiwege{grid-template-columns:1fr} }

  /* Gegenueberstellung: auf einen Blick sehen, wer was gesagt hat. */
  .gegen{background:var(--card);border:1px solid var(--line);
    border-radius:var(--r);box-shadow:var(--sh);padding:20px;margin-top:14px}
  .gegen__kopf{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
  .gegen__nr{font-family:var(--mono);font-size:12px;color:var(--faint)}
  .gegen__stand{margin-left:auto;font-size:12px;font-weight:700;color:var(--muted)}
  .gegen__zitat{font-size:16px;line-height:1.5;font-weight:700;margin:0 0 14px}
  .gegen__gruende{margin-top:12px;font-size:13px}
  .gegen__gruende summary{cursor:pointer;font-weight:700;color:var(--gruen);padding:6px 0}

  .kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
  .kachel{border-radius:var(--r-sm);padding:10px 12px;border:1px solid var(--line)}
  .kachel__name{display:block;font-size:11.5px;font-weight:700;margin-bottom:3px}
  .kachel__wert{display:block;font-size:13px;font-weight:800}
  .kachel--gruen{background:var(--niedrig-bg);border-color:var(--niedrig)}
  .kachel--gruen .kachel__wert{color:var(--niedrig)}
  .kachel--rot{background:var(--hoch-bg);border-color:var(--hoch)}
  .kachel--rot .kachel__wert{color:var(--hoch)}
  .kachel--leer{background:var(--paper)}
  .kachel--leer .kachel__wert{color:var(--faint);font-weight:600}
  .kachel--regel{background:var(--gruen-softer);border-color:var(--gruen-soft)}
  .kachel--regel .kachel__wert{color:var(--gruen)}

  .namensfeld{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:14px 0 10px}
  .namensfeld label{font-size:13px;font-weight:700;color:var(--ink)}
  .namensfeld input{flex:1 1 240px;min-height:44px;padding:10px 14px;font-family:var(--font);
    font-size:14px;color:var(--ink);background:var(--card);
    border:1px solid var(--line);border-radius:var(--r-sm)}
  .namensfeld input:focus-visible{outline:2px solid var(--gruen);outline-offset:1px}

  .stapel__kopf{margin:16px 0 10px}
  .stapel__fortschritt{margin:0 0 8px;font-size:13px;font-weight:700;color:var(--muted)}
  .stapel__balken{height:6px;background:var(--line-soft);border-radius:99px;overflow:hidden}
  .stapel__balkenFuell{height:100%;width:0;background:var(--gruen);transition:width .4s var(--ease)}
  .stapel__ansage{margin:10px 0;font-size:13px;font-weight:700;color:var(--gruen)}

  .karte{position:relative;background:var(--card);border:1px solid var(--line);
    border-radius:var(--r);box-shadow:var(--sh-up);padding:24px;
    touch-action:pan-y;user-select:none}
  .karte--zieht{transition:none;cursor:grabbing}
  .karte__kopf{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
  .karte__art{font-size:12px;font-weight:800;color:var(--gruen);
    background:var(--gruen-soft);border-radius:99px;padding:4px 12px}
  .karte__herkunft{font-size:12px;color:var(--faint);padding:4px 0}
  .karte__zitat{font-size:20px;line-height:1.45;font-weight:700;margin:0 0 14px;user-select:text}
  .karte__zitatklein{font-size:15px;line-height:1.5;margin:0 0 14px;color:var(--muted);user-select:text}
  .karte__quelle{font-size:12px;color:var(--faint);margin:0 0 14px;word-break:break-all}
  .karte__umfeld{margin-bottom:18px;font-size:13.5px;color:var(--muted)}
  .karte__umfeld summary{cursor:pointer;font-weight:700;color:var(--gruen);padding:6px 0}
  .karte__umfeld p{margin:8px 0 0;line-height:1.6;user-select:text}

  .karte__knoepfe{display:flex;gap:10px;flex-wrap:wrap}
  .karte__wahl{flex:1 1 150px;min-height:56px;cursor:pointer;font-family:var(--font);
    font-size:14px;font-weight:800;color:var(--ink);background:var(--paper);
    border:1px solid var(--line);border-radius:var(--r-sm);
    display:flex;align-items:center;justify-content:center;gap:8px;
    transition:background .16s var(--ease),border-color .16s var(--ease)}
  .karte__wahl:hover{background:var(--gruen-softer);border-color:var(--gruen)}
  .karte__wahl:focus-visible{outline:2px solid var(--gruen);outline-offset:2px}
  .karte__taste{font-family:var(--mono);font-size:12px;font-weight:700;
    color:var(--faint);border:1px solid var(--line);border-radius:6px;padding:1px 7px}
  .wahl--1:hover{background:var(--niedrig-bg);border-color:var(--niedrig)}
  .wahl--3:hover{background:var(--hoch-bg);border-color:var(--hoch)}
  .karte__zurueck{margin-top:14px;background:none;border:0;padding:8px 0;cursor:pointer;
    font-family:var(--font);font-size:12.5px;color:var(--muted);text-decoration:underline}
  .karte__zurueck[disabled]{opacity:.4;cursor:not-allowed;text-decoration:none}
  .karte__aendern{background:none;border:1px solid var(--line);border-radius:99px;
    padding:12px 22px;min-height:44px;cursor:pointer;font-family:var(--font);
    font-size:14px;font-weight:700;color:var(--muted)}

  /* Waehrend des Ziehens leuchtet auf, was man ausloesen wuerde. Niemand soll
     blind loslassen und danach raten, was gespeichert wurde. */
  .zeigt--links{border-color:var(--niedrig);box-shadow:0 0 0 3px var(--niedrig-bg)}
  .zeigt--rechts{border-color:var(--hoch);box-shadow:0 0 0 3px var(--hoch-bg)}
  .zeigt--hoch{border-color:var(--mittel);box-shadow:0 0 0 3px var(--mittel-bg)}

  .karte__deinurteil{font-size:15px;font-weight:800;margin:0 0 6px}
  .karte__bilanz{font-size:14px;font-weight:700;color:var(--gruen);margin:0 0 14px}
  .karte__regel{font-size:13px;color:var(--muted);margin:12px 0 0;
    padding-top:12px;border-top:1px solid var(--line-soft)}
  .karte__aenderung{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft);
    display:flex;gap:10px;flex-wrap:wrap}
  .karte__aenderung p{flex:1 1 100%;margin:0 0 6px;font-size:12.5px;color:var(--muted)}

  .modellzeile{padding:12px 0;border-top:1px solid var(--line-soft)}
  .modellzeile__name{font-size:13px;font-weight:800;margin-right:10px}
  .modellzeile__wert{font-size:12px;font-weight:700;color:var(--muted);
    background:var(--paper);border-radius:99px;padding:3px 10px}
  .modellzeile.einig .modellzeile__wert{background:var(--niedrig-bg);color:var(--niedrig)}
  .modellzeile__grund{margin:6px 0 0;font-size:13px;line-height:1.55;color:var(--muted)}

  .messtabelle{width:100%;border-collapse:collapse;margin:14px 0;font-size:13.5px}
  .messtabelle th{text-align:left;font-size:12px;text-transform:uppercase;
    letter-spacing:.4px;color:var(--faint);padding:8px 10px;border-bottom:1px solid var(--line)}
  .messtabelle td{padding:10px;border-bottom:1px solid var(--line-soft)}
  .messtabelle__name{font-weight:700}
  #stapelSchluss{background:var(--card);border:1px solid var(--line);
    border-radius:var(--r);box-shadow:var(--sh);padding:24px;margin-top:16px}
  #stapelSchluss h3{margin:0 0 10px;font-size:17px}

  /* Ohne Bewegung: die Karte wird ersetzt statt weggeschoben. Das Wischen
     selbst ist im JavaScript abgeschaltet, gesteuert wird dann ueber die
     Knoepfe und die Tastatur. */
  @media (prefers-reduced-motion: reduce){
    .karte,.stapel__balkenFuell{transition:none}
  }

  @media (max-width:640px){
    .karte{padding:18px}
    .karte__zitat{font-size:17px}
    .karte__wahl{flex:1 1 100%}
  }