/* Portal https://sandbox.kutego.ai — Gestaltung (04.11.2026, Überarbeitung „gesamte Darstellung optimieren“). Keine Inline-Styles (CSP). */
:root {
  --blau: #1d3557; --blau2: #24446d; --akzent: #1f6feb; --akzent-h: #1a5fcc; --text: #1f2328; --grau: #6c7a89; --linie: #e1e6ec;
  --karte: #fff; --hg1: #eef2f7; --hg2: #dde6f1; --ok: #1e6b34; --ok-hg: #dafbe1; --warn-hg: #fff4cc; --err: #b00020; --err-hg: #ffebe9;
  --lauf-hg: #ddf4ff; --radius: 12px; --schatten: 0 1px 2px rgba(29,53,87,.06), 0 6px 20px rgba(29,53,87,.08);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }                                   /* 04.11.: eigene display-Regeln (z. B. .ticketwahl) hoben hidden auf */
html, body { min-height: 100%; }
body { margin: 0; font: 14px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; color: var(--text);
       background: linear-gradient(135deg, var(--hg1) 0%, var(--hg2) 100%); background-attachment: fixed; }
.klein { font-size: 12px; color: var(--grau); }
.fehler { color: var(--err); }
.link { color: var(--akzent); cursor: pointer; text-decoration: underline; }

/* Kopfleiste */
header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px; padding: 10px 22px;
         background: var(--blau); color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.15); }
.marke-kopf { display: flex; align-items: baseline; gap: 8px; }
.marke-kopf strong { font-size: 16px; letter-spacing: .3px; }
.marke-kopf .klein { color: #b9c6d6; }
.logo-punkt { width: 10px; height: 10px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,.25); align-self: center; }
header .rechts { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 13px; }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: #3b5b86; color: #fff; display: inline-flex; align-items: center; justify-content: center;
          font-weight: 600; font-size: 13px; }
header button.abmelden { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.45); padding: 4px 10px; font-size: 12px; border-radius: 6px; }
header button.abmelden:hover { background: rgba(255,255,255,.14); }
body.ausgeloggt header { display: none; }

/* Hauptbereich */
main { max-width: 980px; margin: 0 auto; padding: 22px 18px 40px; }
body.ausgeloggt main { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 0 16px; max-width: none; }
h2 { font-size: 16px; color: var(--blau); margin: 0 0 10px; }
.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--schatten); }

/* Anmeldung */
.anmeldekarte { background: #fff; border-radius: 16px; box-shadow: 0 12px 40px rgba(29,53,87,.18); padding: 44px 52px; text-align: center; min-width: 280px; max-width: 420px; }
.anmeldekarte .logo { font-size: 30px; font-weight: 700; color: var(--blau); letter-spacing: .5px; }
.anmeldekarte .marke { font-size: 13px; color: var(--grau); margin: 4px 0 28px; }
.anmeldekarte .fehler { margin-top: 16px; }

/* Knöpfe & Eingaben */
button, .knopf { font: inherit; padding: 7px 14px; border-radius: 8px; border: 1px solid #c8d0d8; background: #fff; color: var(--text); cursor: pointer;
                 text-decoration: none; display: inline-block; transition: background .15s, border-color .15s; }
button:hover, .knopf:hover { border-color: #9aa7b4; }
.prim, button.prim { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.prim:hover, button.prim:hover { background: var(--akzent-h); border-color: var(--akzent-h); }
.knopf.gross { padding: 11px 24px; font-size: 15px; }
.leise { font-size: 12px; padding: 3px 9px; }
.gefahr { color: var(--err); }
button:disabled { opacity: .55; cursor: default; }
textarea, input[type=search] { width: 100%; font: inherit; padding: 9px 11px; border: 1px solid #c8d0d8; border-radius: 8px; background: #fbfcfd; }
textarea:focus, input[type=search]:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px rgba(31,111,235,.15); background: #fff; }
textarea { resize: vertical; min-height: 90px; }

/* Neue Aufgabe */
.karte.neu { margin-bottom: 26px; }
.account-required { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding: 12px 16px; border: 1px solid var(--ks-warn, #E8BF6A);
  background: var(--ks-warn-bg, #4A4030); border-radius: var(--radius); }
.account-required[hidden] { display: none; }
.account-required > i { color: var(--ks-warn, #E8BF6A); font-size: 1.3em; }
.account-required > div { flex: 1; }
.account-required button { white-space: nowrap; }
.ablage { margin-top: 10px; padding: 10px 12px; border: 1.5px dashed #c3ccd6; border-radius: 8px; color: var(--grau); font-size: 13px; transition: background .15s, border-color .15s; }
.ablage.ueber { background: #eef5ff; border-color: var(--akzent); }
#uploads > div { margin-top: 4px; }
#uploads .ok { color: var(--ok); }
#uploads .fehler { color: var(--err); }
.ticketzeile { margin-top: 10px; }
.suche { position: relative; }
.treffer { margin-top: 10px; max-height: 50vh; overflow: auto; border: 1px solid var(--linie); border-radius: 8px; }
.treffer:empty { display: none; }
.treffer .leer { padding: 10px 12px; color: var(--grau); font-size: 13px; }
.treffer-zeile { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; width: 100%; text-align: left;
                 border: none; border-bottom: 1px solid #f0f2f5; border-radius: 0; padding: 8px 12px; background: #fff; }
.treffer-zeile:hover { background: #f4f8ff; }
.treffer-zeile .nr { grid-row: 1 / 3; color: var(--akzent); font-weight: 600; font-variant-numeric: tabular-nums; }
.treffer-zeile .betreff { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticketwahl { display: flex; align-items: center; gap: 6px; }
.ticketwahl .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zeile { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }

/* Liste */
.listenkopf { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.listenkopf h2 { margin: 0; }
.filter { display: inline-flex; border: 1px solid #c8d0d8; border-radius: 8px; overflow: hidden; background: #fff; }
.filter button { border: none; border-radius: 0; padding: 3px 12px; font-size: 12px; background: #fff; }
.filter button.aktiv { background: var(--blau); color: #fff; }
#glocke { margin-left: auto; }
.aufgabe { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 10px; box-shadow: var(--schatten);
           border-left: 4px solid #c8d0d8; }
.aufgabe.st-ok { border-left-color: #2da44e; } .aufgabe.st-lauf { border-left-color: var(--akzent); } .aufgabe.st-warn { border-left-color: #d4a72c; }
.aufgabe.st-err { border-left-color: #cf222e; }
.aufgabe .kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.aufgabe .nr { font-size: 12px; color: var(--grau); font-variant-numeric: tabular-nums; }
.aufgabe .titel { flex: 1 1 220px; font-size: 15px; }
.aufgabe .aktionen { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
button.stift { border: none; background: transparent; color: var(--grau); padding: 0 4px; }
button.stift:hover { color: var(--akzent); }
.chip { font-size: 11px; padding: 2px 9px; border-radius: 10px; background: #eef1f4; white-space: nowrap; }
.chip.ok { background: var(--ok-hg); color: var(--ok); } .chip.warn { background: var(--warn-hg); color: #7a5b00; }
.chip.err { background: var(--err-hg); color: var(--err); } .chip.lauf { background: var(--lauf-hg); color: #0b5394; } .chip.info { background: #e8eefb; color: var(--blau); }
#liste > p { text-align: center; padding: 24px; background: rgba(255,255,255,.6); border-radius: var(--radius); }

/* Mobil */
@media (max-width: 640px) {
  header { padding: 8px 12px; }
  header .marke-kopf .klein, header .name { display: none; }
  main { padding: 14px 10px 30px; }
  .karte { padding: 14px; }
  .anmeldekarte { padding: 30px 22px; }
  .zeile { flex-direction: column; align-items: stretch; }
  .zeile button { width: 100%; }
  .aufgabe .aktionen button { flex: 1; }
  .listenkopf { flex-wrap: wrap; }
  #glocke { margin-left: 0; }
}

/* Modal „Ticket verknüpfen“ (04.11.) */
.modal { position: fixed; inset: 0; z-index: 50; background: rgba(20,32,52,.45); display: flex; align-items: flex-start; justify-content: center; padding: 10vh 14px 14px; }
.modal[hidden] { display: none; }
.modal-box { background: #fff; width: 100%; max-width: 560px; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.3); padding: 18px 20px; }
.modal-kopf { display: flex; align-items: center; margin-bottom: 10px; }
.modal-kopf h2 { margin: 0; flex: 1; }
.modal-box .klein { margin: 10px 0 0; }

/* 04.11.: Font-Awesome-Icons, Icon-Knöpfe mit Tooltip, Ticket-Badge */
button.ikon { width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; color: #44556a; }
button.ikon:hover { background: #f1f5fa; color: var(--akzent); }
button.ikon.prim { color: #fff; } button.ikon.prim:hover { color: #fff; }
button.ikon.gefahr:hover { background: var(--err-hg); color: var(--err); border-color: #f0b8bd; }
button.ikon.klein-ikon { width: 24px; height: 24px; font-size: 12px; border-color: transparent; background: transparent; }
button.ikon.stift { width: 26px; height: 26px; font-size: 12px; border-color: transparent; background: transparent; }
#glocke.an { color: var(--akzent); border-color: var(--akzent); }
header button.ikon.abmelden { width: 30px; height: 30px; color: #fff; background: transparent; border-color: rgba(255,255,255,.45); }
header button.ikon.abmelden:hover { background: rgba(255,255,255,.14); color: #fff; }
.badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #e8eefb; color: var(--blau);
         font-variant-numeric: tabular-nums; text-decoration: none; white-space: nowrap; }
a.badge:hover { background: var(--akzent); color: #fff; }
.ticketwahl { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; }
.ticketbetreff { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 520px; color: var(--text); }
.treffer-zeile .badge { grid-row: 1 / 3; align-self: center; }
.ablage .fa-paperclip { margin-right: 4px; }

/* 04.11.: Umschalter Meine Aufgaben / Für Entwickler mit Anzahl */
.ansicht { display: inline-flex; border: 1px solid #c8d0d8; border-radius: 10px; overflow: hidden; background: #fff; }
.ansicht button { border: none; border-radius: 0; padding: 6px 14px; font-size: 14px; font-weight: 600; color: var(--grau); background: #fff; display: inline-flex; align-items: center; gap: 6px; }
.ansicht button.aktiv { background: var(--blau); color: #fff; }
.badge.zahl { background: #cf222e; color: #fff; min-width: 20px; text-align: center; padding: 1px 6px; }
.badge.zahl.null { background: #c8d0d8; color: #fff; }
.ansicht button.aktiv .badge.zahl.null { background: rgba(255,255,255,.35); }

/* 04.11.: Hover für blaue Icon-Knöpfe (war grau), eigene Tooltips (data-tip, sofort sichtbar) */
button.ikon.prim:hover { background: var(--akzent-h); border-color: var(--akzent-h); color: #fff; }
[data-tip] { position: relative; }
[data-tip]:hover::after, [data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); z-index: 60;
  background: #1f2328; color: #fff; font-size: 12px; font-weight: 400; line-height: 1.35; white-space: nowrap; padding: 5px 9px; border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,.2); pointer-events: none; }
[data-tip]:hover::before, [data-tip]:focus-visible::before {
  content: ""; position: absolute; left: 50%; bottom: calc(100% + 3px); transform: translateX(-50%); z-index: 60;
  border: 5px solid transparent; border-top-color: #1f2328; border-bottom: 0; pointer-events: none; }
header [data-tip]:hover::after, header [data-tip]:focus-visible::after { bottom: auto; top: calc(100% + 8px); left: auto; right: 0; transform: none; }
header [data-tip]:hover::before, header [data-tip]:focus-visible::before { bottom: auto; top: calc(100% + 3px); border-top-color: transparent; border-bottom: 5px solid #1f2328; border-top: 0; }
.ansicht [data-tip]:hover::after, .filter [data-tip]:hover::after, .zeile [data-tip]:hover::after { white-space: normal; width: max-content; max-width: 280px; }
@media (hover: none) { [data-tip]:hover::after, [data-tip]:hover::before { display: none; } }
.ansicht, .filter { overflow: visible; }
.ansicht button:first-child, .filter button:first-child { border-radius: 9px 0 0 9px; }
.ansicht button:last-child, .filter button:last-child { border-radius: 0 9px 9px 0; }

/* 04.11.: Aktionsleiste — Ticket rechts neben „Mit Auftrag starten“, „Leere Sandbox öffnen“ rechtsbündig */
.aktionen-neu .rechts-buendig { margin-left: auto; }
@media (max-width: 640px) { .aktionen-neu .rechts-buendig { margin-left: 0; } }
.aktionen-neu .ticketbetreff { max-width: 260px; }

/* 04.11. P2a: Optionen */
.optionen { margin-top: 10px; border: 1px solid var(--linie); border-radius: 8px; padding: 6px 12px; background: #fbfcfd; }
.optionen summary { cursor: pointer; color: var(--blau); font-weight: 600; font-size: 13px; padding: 2px 0; }
.optionen-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 16px; padding: 10px 0 6px; }
.optionen-raster label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--grau); }
.optionen-raster select { font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid #c8d0d8; border-radius: 6px; background: #fff; color: var(--text); }

/* 04.11.: Löschen-Knopf hell-rot („light-danger“, User) */
button.ikon.loeschen { background: #ffebe9; border-color: #ffc1bc; color: #b00020; }
button.ikon.loeschen:hover { background: #ffd8d3; border-color: #ff9d94; color: #8c0019; }

/* ===== 04.11.2026: Darcula (kutego-sandbox-darcula-plan.md) — Palette aus /ks-theme.css, nur Darcula, kein Hell-Modus ===== */
html.ks-darcula {
  --blau: #DDDDDD; --akzent: #365880; --akzent-h: #3E6A99; --text: #BBBBBB; --grau: #A8A8A8; --linie: #515151;
  --karte: #3C3F41; --hg1: #2B2B2B; --hg2: #2B2B2B; --ok: #8BC17E; --ok-hg: #344134; --warn-hg: #4A4030; --err: #FF8A87; --err-hg: #4A2C2C;
  --lauf-hg: #2F3E4E; --radius: 6px; --schatten: none;
}
html.ks-darcula body { background: var(--ks-bg); font: 13.5px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; display: flex; flex-direction: column; min-height: 100vh; }
html.ks-darcula main { flex: 1; width: 100%; }
.link { color: var(--ks-link); }
/* Kopf- und Statusleiste wie in der Werkstatt */
html.ks-darcula header { background: var(--ks-panel); color: var(--ks-text-bright); border-bottom: 1px solid var(--ks-border); box-shadow: none; padding: 6px 16px; min-height: 40px; }
.header-logo { width: 22px; height: 22px; align-self: center; flex: none; }
.marke-kopf .klein { color: #A8A8A8; }
.avatar { background: var(--ks-primary); }
header button.abmelden, header button.ikon.abmelden { color: var(--ks-text); border-color: var(--ks-btn-border); background: var(--ks-btn); }
header button.abmelden:hover, header button.ikon.abmelden:hover { background: var(--ks-hover); color: var(--ks-text-bright); }
#footer { display: flex; align-items: center; gap: 14px; height: 24px; flex: none; background: var(--ks-panel); border-top: 1px solid var(--ks-border); color: #B0B3B6; font-size: 11.5px; }
#footer .sandbox-mark { background: var(--ks-sandbox); color: #fff; font-weight: 700; letter-spacing: .04em; height: 100%; display: inline-flex; align-items: center; padding: 0 10px; }
/* Anmeldung (Ersteinstieg) */
html.ks-darcula body.ausgeloggt main { min-height: 0; }
.anmeldekarte { background: var(--ks-panel); border: 1px solid var(--ks-line); border-radius: 8px; box-shadow: 0 16px 50px rgba(0,0,0,.45); }
.login-logo { width: 72px; height: 72px; display: block; margin: 0 auto 14px; }
.anmeldekarte .logo { color: var(--ks-text-bright); }
.login-note { margin: 22px 0 0; font-size: 12px; color: #A8A8A8; }
/* Knöpfe & Eingaben */
button, .knopf { background: var(--ks-btn); border-color: var(--ks-btn-border); color: var(--ks-text); border-radius: 4px; }
button:hover, .knopf:hover { background: var(--ks-hover); border-color: #6E7072; }
.prim, button.prim { background: var(--ks-primary); border-color: var(--ks-primary-border); color: #fff; }
.prim:hover, button.prim:hover, button.ikon.prim:hover { background: var(--akzent-h); border-color: #5A84A8; color: #fff; }
textarea, input[type=search], .optionen-raster select { background: var(--ks-input); border-color: #646464; color: var(--ks-text); border-radius: 4px; }
textarea:focus, input[type=search]:focus { background: var(--ks-input); border-color: var(--ks-accent); box-shadow: 0 0 0 2px rgba(74,136,199,.3); }
.karte { border-color: var(--ks-line); }
h2 { color: var(--ks-text-bright); }
.ablage { border-color: #5E6060; }
.ablage.ueber { background: var(--ks-accent-bg); border-color: var(--ks-accent); }
.optionen { background: var(--ks-panel-alt); }
.optionen summary { color: var(--ks-text-bright); }
.treffer-zeile { background: var(--ks-panel); border-bottom-color: var(--ks-line); color: var(--ks-text); }
.treffer-zeile:hover { background: var(--ks-hover); }
.treffer-zeile .nr { color: var(--ks-link); }
/* Liste */
.filter, .ansicht { background: var(--ks-btn); border-color: var(--ks-btn-border); }
.filter button, .ansicht button { background: var(--ks-btn); color: var(--ks-text); }
.filter button.aktiv, .ansicht button.aktiv { background: var(--ks-active); color: var(--ks-text-bright); box-shadow: inset 0 -2px 0 var(--ks-accent); }
.aufgabe { border-color: var(--ks-line); border-left-color: #6E7072; }
.aufgabe.st-ok { border-left-color: var(--ks-ok); } .aufgabe.st-lauf { border-left-color: var(--ks-accent); } .aufgabe.st-warn { border-left-color: var(--ks-warn); }
.aufgabe.st-err { border-left-color: var(--ks-err); }
.aufgabe .titel { color: var(--ks-text-bright); }
button.stift:hover { color: var(--ks-link); }
.chip { background: var(--ks-active); color: var(--ks-text); }
.chip.warn { color: var(--ks-warn); } .chip.lauf { color: #8CB8E8; } .chip.info { background: var(--ks-accent-bg); color: #A9C7E8; }
#liste > p { background: var(--ks-panel-alt); }
.badge { background: var(--ks-accent-bg); color: #A9C7E8; }
a.badge:hover { background: var(--ks-primary); color: #fff; }
.badge.zahl { background: var(--ks-sandbox); }
.badge.zahl.null { background: #5E6060; }
button.ikon { color: var(--ks-text); }
button.ikon:hover { background: var(--ks-hover); color: var(--ks-text-bright); }
button.ikon.klein-ikon, button.ikon.stift { background: transparent; border-color: transparent; }
#glocke.an { color: var(--ks-link); border-color: var(--ks-accent); }
button.ikon.gefahr:hover { background: var(--ks-err-bg); color: var(--ks-err); border-color: #7A3B3B; }
button.ikon.loeschen { background: var(--ks-err-bg); border-color: #7A3B3B; color: #FF8A87; }
button.ikon.loeschen:hover { background: #5C3333; border-color: #9A4A4A; color: #FFB0AD; }
.ticketbetreff { color: var(--ks-text); }
/* Modal + Tooltips */
.modal { background: rgba(0,0,0,.55); }
.modal-box { background: var(--ks-panel); border: 1px solid var(--ks-line); border-radius: 8px; }
[data-tip]:hover::after, [data-tip]:focus-visible::after { background: #4B4D4F; color: #DDDDDD; border: 1px solid #5E6060; }
[data-tip]:hover::before, [data-tip]:focus-visible::before { border-top-color: #4B4D4F; }
header [data-tip]:hover::before, header [data-tip]:focus-visible::before { border-bottom-color: #4B4D4F; border-top-color: transparent; }
html.ks-darcula a.knopf.prim, html.ks-darcula a.knopf.prim:hover { color: #fff; }

/* ===== 04.11.2026 (User): angemeldete Ansicht im Vollbild, PhpStorm-Layout =====
   links Werkzeugfenster „Neue Aufgabe“, rechts Aufgabenliste als dichte Zeilen (wie Run/Services-Fenster), unten Statusleiste. */
body.app-view { height: 100vh; overflow: hidden; }
body.app-view main { max-width: none; margin: 0; padding: 0; flex: 1; min-height: 0; display: flex; }
body.app-view #portal { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(340px, 30%) 1fr; }
/* Werkzeugfenster links */
body.app-view .karte.neu { margin: 0; border: 0; border-right: 1px solid var(--ks-border); border-radius: 0; background: var(--ks-panel);
  padding: 0 12px 12px; overflow: auto; min-height: 0; }
body.app-view .karte.neu h2, body.app-view .listenkopf::before { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ks-text-bright); }
body.app-view .karte.neu h2 { margin: 0 -12px 10px; padding: 7px 12px; border-bottom: 1px solid var(--ks-border); background: var(--ks-panel); position: sticky; top: 0; z-index: 2; }
body.app-view #auftrag { min-height: 160px; font-family: var(--ks-mono); font-size: 12.5px; }
body.app-view .karte.neu .zeile { margin-top: 12px; }
/* Hauptbereich rechts */
body.app-view .task-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--ks-bg); }
body.app-view .listenkopf { margin: 0; padding: 5px 10px; background: var(--ks-panel); border-bottom: 1px solid var(--ks-border); flex: none; flex-wrap: wrap; }
body.app-view .ansicht button { font-size: 12.5px; padding: 4px 10px; font-weight: 600; }
body.app-view .filter button { padding: 4px 10px; }
body.app-view #glocke { width: 28px; height: 28px; }
body.app-view #liste { flex: 1; min-height: 0; overflow: auto; }
body.app-view #liste > p { margin: 24px; background: transparent; color: var(--ks-text-dim); }
/* Aufgaben als Zeilen */
body.app-view .aufgabe { display: grid; grid-template-columns: 1fr 185px 108px; column-gap: 12px; align-items: center; margin: 0; padding: 7px 12px 7px 10px;
  background: transparent; border: 0; border-bottom: 1px solid #353739; border-left: 3px solid #6E7072; border-radius: 0; box-shadow: none; }
body.app-view .aufgabe:hover { background: var(--ks-panel-alt); }
body.app-view .aufgabe .kopf { grid-column: 1; min-width: 0; flex-wrap: nowrap; }
body.app-view .aufgabe .titel { flex: 0 1 auto; min-width: 0; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.app-view .aufgabe .nr { font-family: var(--ks-mono); color: var(--ks-text-dim); flex: none; }
body.app-view .aufgabe .chip { margin-left: 4px; flex: none; }
body.app-view .aufgabe > .klein { grid-column: 1; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.app-view .aufgabe .aktionen { grid-column: 3; grid-row: 1 / span 2; margin: 0; flex-wrap: nowrap; gap: 6px; justify-content: flex-end; }
/* Status als eigene Spalte, rechtsbündig (User 04.11.) — feste Spaltenbreiten, damit die Labels aller Zeilen bündig stehen */
body.app-view .aufgabe > .status-col { grid-column: 2; grid-row: 1 / span 2; justify-self: end; margin: 0; max-width: 185px; overflow: hidden; text-overflow: ellipsis; }
body.app-view .aufgabe .aktionen button.ikon { width: 30px; height: 30px; font-size: 13px; }
/* Tooltips der Zeilenknöpfe nach links (oben würden sie am Listenrand abgeschnitten) */
body.app-view .aufgabe [data-tip]:hover::after, body.app-view .aufgabe [data-tip]:focus-visible::after {
  left: auto; right: calc(100% + 8px); bottom: auto; top: 50%; transform: translateY(-50%); }
body.app-view .aufgabe [data-tip]:hover::before, body.app-view .aufgabe [data-tip]:focus-visible::before { display: none; }
body.app-view .aufgabe .kopf [data-tip]:hover::after { right: auto; left: calc(100% + 8px); }
/* schmale Fenster: untereinander, normal scrollen */
@media (max-width: 860px) {
  body.app-view { height: auto; overflow: auto; }
  body.app-view #portal { display: block; }
  body.app-view .karte.neu { border-right: 0; border-bottom: 1px solid var(--ks-border); }
  body.app-view #liste { overflow: visible; }
  body.app-view .aufgabe { grid-template-columns: 1fr; }
  body.app-view .aufgabe .aktionen { grid-column: 1; grid-row: auto; margin-top: 6px; justify-content: flex-start; }
  body.app-view .aufgabe > .status-col { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 4px; }
}
body.app-view .aufgabe.st-ok { border-left-color: var(--ks-ok); } body.app-view .aufgabe.st-lauf { border-left-color: var(--ks-accent); }
body.app-view .aufgabe.st-warn { border-left-color: var(--ks-warn); } body.app-view .aufgabe.st-err { border-left-color: var(--ks-err); }
/* 04.11. Review: Tooltip von „Mit Auftrag starten“ linksbündig (sonst am Rand des Werkzeugfensters abgeschnitten) */
body.app-view .aktionen-neu #starten[data-tip]:hover::after, body.app-view .aktionen-neu #starten[data-tip]:focus-visible::after { left: 0; transform: none; }
body.app-view .aktionen-neu #starten[data-tip]:hover::before, body.app-view .aktionen-neu #starten[data-tip]:focus-visible::before { left: 24px; }
/* 04.11. (User): Login-Karte breiter, Anmeldeknopf in kräftigem PhpStorm-Blau (New UI) mit weißer Schrift statt gedecktem Darcula-Blau */
.anmeldekarte { width: 100%; max-width: 520px; padding: 48px 64px; }
html.ks-darcula .anmeldekarte a.knopf.prim { background: #3574F0; border-color: #3574F0; color: #fff; }
html.ks-darcula .anmeldekarte a.knopf.prim:hover, html.ks-darcula .anmeldekarte a.knopf.prim:focus-visible { background: #4682FA; border-color: #4682FA; color: #fff; }
@media (max-width: 640px) { .anmeldekarte { padding: 30px 22px; } }
/* 04.11. (User): Anmeldeknopf im Darcula-Stil (Default-Button wie in PhpStorm Darcula) statt kräftigem New-UI-Blau. */
html.ks-darcula .anmeldekarte a.knopf.prim { background: #365880; border: 1px solid #4C708C; color: #DFE1E5; border-radius: 4px;
  padding: 8px 26px; font-size: 13px; font-weight: 500; box-shadow: none; }
html.ks-darcula .anmeldekarte a.knopf.prim:hover, html.ks-darcula .anmeldekarte a.knopf.prim:focus-visible { background: #3E6A99; border-color: #5A86B8; color: #fff; }
/* 04.11.: Karte schrumpft im zentrierten Flex-Container auf Inhaltsbreite → feste Breite, mobil voll */
html.ks-darcula .anmeldekarte { width: 480px; max-width: calc(100vw - 32px); min-width: 0; box-sizing: border-box; }
/* 04.11. (User): Aufgaben-Umschalter (Meine/…, laufend/alle) und Zeilenknöpfe eckiger; aktiver Zustand per Knopffarbe statt Unterstrich-Rahmen */
html.ks-darcula .ansicht, html.ks-darcula .filter { border-radius: 4px; }
html.ks-darcula .ansicht button, html.ks-darcula .filter button { border-radius: 0; box-shadow: none; }
html.ks-darcula .ansicht button:first-child, html.ks-darcula .filter button:first-child { border-radius: 3px 0 0 3px; }
html.ks-darcula .ansicht button:last-child, html.ks-darcula .filter button:last-child { border-radius: 0 3px 3px 0; }
.ansicht button:nth-last-child(1 of :not([hidden])) { border-radius: 0 9px 9px 0; }   /* 10.11.: Tickets vorn, ausgeblendete Knöpfe hinten */
html.ks-darcula .ansicht button:nth-last-child(1 of :not([hidden])) { border-radius: 0 3px 3px 0; }
html.ks-darcula .ansicht button + button, html.ks-darcula .filter button + button { border-left: 1px solid var(--ks-btn-border); }
html.ks-darcula .ansicht button:not(.aktiv):hover, html.ks-darcula .filter button:not(.aktiv):hover { background: var(--ks-hover); color: var(--ks-text-bright); }
html.ks-darcula .ansicht button.aktiv, html.ks-darcula .filter button.aktiv { background: var(--ks-primary); color: #fff; box-shadow: none; }
html.ks-darcula .aufgabe .aktionen button, html.ks-darcula .aktionen-neu button, html.ks-darcula button.ikon { border-radius: 3px; }

/* §12 (04.11.): Account-Schalter in den Start-Optionen */
.optionen-raster .opt-wide { grid-column: 1 / -1; margin: 0; }
.optionen-raster .opt-inline { display: flex; gap: 6px; align-items: center; }
.optionen-raster input[type=date] { font: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid #646464; border-radius: 4px; background: var(--ks-input); color: var(--ks-text); color-scheme: dark; }
.optionen-raster .opt-modules { border: 1px solid #515151; border-radius: 4px; padding: 6px 10px 8px; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.optionen-raster .opt-modules legend { font-size: 12px; color: var(--grau); padding: 0 4px; }
.optionen-raster .opt-modules label { flex-direction: row; align-items: center; gap: 6px; color: var(--ks-text); font-size: 13px; }

/* 04.11. (User): Claude-Logo statt Schlüssel am Claude Account (Simple Icons, CC0) */
button.ikon .claude-logo { width: 17px; height: 17px; fill: #d97757; }
.avatar.avatar-img { object-fit: cover; background: none; padding: 0; }   /* 04.11.: Profilbild statt Initiale */

/* 04.11. (User): Suche für alle + Nutzer-Filter in der Hauptadmin-Ansicht „Alle“ */
.listenkopf #task-search { width: 220px; max-width: 100%; padding: 4px 8px; font-size: 13px; }
.listenkopf #user-filter { font: inherit; font-size: 13px; padding: 4px 6px; border: 1px solid #646464; border-radius: 4px; background: var(--ks-input); color: var(--ks-text); max-width: 220px; }

/* 04.11. spät (User): Avatar wie in Redmine (Theme kutego) — Ecken 20 %, fette Initialen, Farbe = Redmine-ID mod 8 */
.avatar { border-radius: 20%; font-weight: 700; font-size: 11px; font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; user-select: none; }
.avatar.avatar-img { border-radius: 20%; background: none; }
.avatar-color-0 { background: #f03e3e; color: #fff; }
.avatar-color-1 { background: #fd7e14; color: #fff; }
.avatar-color-2 { background: #ffd43b; color: #000; }
.avatar-color-3 { background: #37b24d; color: #fff; }
.avatar-color-4 { background: #15aabf; color: #fff; }
.avatar-color-5 { background: #1c7ed6; color: #fff; }
.avatar-color-6 { background: #ae3ec9; color: #fff; }
.avatar-color-7 { background: #e64980; color: #fff; }

/* §13a (05.11.2026): mir zugewiesene Tickets + KI-Vorschlag (Darcula) */
.treffer-head { padding: 6px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ks-text-dim, #6c7a89);
  border-bottom: 1px solid var(--ks-line, #e1e6ec); }
.ticket-suggest { margin: 0 0 10px; padding: 10px 12px; border: 1px dashed var(--ks-primary-border, #4C708C); border-radius: 6px;
  background: var(--ks-accent-bg, #2F3E4E); color: var(--ks-text, #BBBBBB); }
.ticket-suggest .suggest-head { display: flex; align-items: center; gap: 8px; }
.ticket-suggest .suggest-text { margin: 6px 0 8px; }
.ticket-suggest .suggest-label { font-size: 12px; font-weight: 600; color: var(--ks-text-bright, #DDDDDD); }
.ticket-suggest .suggest-prompt { white-space: pre-wrap; max-height: 220px; overflow: auto; margin: 4px 0 8px; padding: 8px 10px;
  background: var(--ks-bg-deep, #1E1F22); border: 1px solid var(--ks-line, #515151); border-radius: 4px; font: 12.5px/1.5 ui-monospace, Menlo, Consolas, monospace; }
.ticket-suggest .suggest-actions { display: flex; gap: 8px; margin: 0 0 6px; }
/* SUGGEST-UI-1011 (User 10.11.): Auftragsfeld gesperrt, solange die KI den Vorschlag erstellt; Zurücksetzen dezent */
.auftrag-wrap { position: relative; }
.auftrag-wrap > textarea { display: block; }
.auftrag-wrap > textarea:disabled { opacity: .55; cursor: wait; }
/* SPINNER-1011 (User 10.11.): einheitlicher Ring-Spinner (wie in der Werkstatt); Auftragsfeld: Ring oben rechts im gesperrten Feld, Text als Platzhalter */
.ks-spinner { display: inline-block; flex: none; width: 16px; height: 16px; border: 2px solid #5E6060; border-top-color: var(--ks-accent, #4A88C7);
  border-radius: 50%; animation: ks-spin .8s linear infinite; vertical-align: -3px; }
@keyframes ks-spin { to { transform: rotate(360deg); } }
.auftrag-busy { position: absolute; right: 10px; top: 10px; pointer-events: none; line-height: 0; }
.auftrag-busy[hidden] { display: none; }
button.ikon.klein-ikon.task-reset-quiet { width: 22px; height: 22px; font-size: 11px; opacity: .6; }
button.ikon.klein-ikon.task-reset-quiet:hover, button.ikon.klein-ikon.task-reset-quiet:focus-visible { opacity: 1; }

/* Web-App (05.11.2026): Werkstatt im Vollbild-Rahmen des Portals (bleibt in der Safari-Web-App)
 * Reiter (TABS-1011, 10.11.2026, kutego-sandbox-tabs-plan.md): Leiste oben fest, je Sandbox ein Rahmen; verdeckte Rahmen nur unsichtbar
 * (nicht display:none), damit Editor/Vorschau beim Zurückwechseln ihre Maße behalten. */
:root { --ws-tabbar-h: 32px; }
html.ws-open, html.ws-open body { overflow: hidden; height: 100%; }
html.ws-tabs body { padding-top: var(--ws-tabbar-h); box-sizing: border-box; }
#ws-tabbar { position: fixed; top: 0; left: 0; right: 0; height: var(--ws-tabbar-h); z-index: 950; display: flex; align-items: stretch;
  background: var(--ks-bg-deep, #1E1F22); border-bottom: 1px solid var(--ks-border, #393B40); font-size: 12.5px; }
#ws-tab-items { flex: 0 1 auto; min-width: 0; display: flex; overflow-x: auto; scrollbar-width: none; }   /* TABPLUS-1011: nur so breit wie die Reiter, „+“ folgt direkt */
#ws-tab-items::-webkit-scrollbar { display: none; }
#ws-tabbar .ws-tab { flex: none; display: flex; align-items: center; gap: 6px; max-width: 230px; height: 100%; padding: 0 6px 0 10px; margin: 0;
  border: 0; border-right: 1px solid var(--ks-border, #393B40); border-radius: 0; background: transparent; color: var(--ks-text-dim, #8C8C8C);
  font: inherit; line-height: 1; cursor: pointer; white-space: nowrap; box-shadow: none; }
#ws-tabbar .ws-tab:hover { background: var(--ks-hover, #3C3F41); color: var(--ks-text, #BBBBBB); }
#ws-tabbar .ws-tab.on { background: var(--ks-bg, #2B2B2B); color: var(--ks-text-bright, #DFE1E5); box-shadow: inset 0 -2px 0 var(--ks-accent, #3592C4); }
#ws-tabbar .ws-tab.unloaded .ws-tab-name { font-style: italic; opacity: .8; }
#ws-tabbar .ws-tab.news .ws-tab-name { font-weight: 700; color: var(--ks-text-bright, #DFE1E5); }
#ws-tabbar #ws-tab-home { padding: 0 12px; }
#ws-tabbar #ws-tab-list-button { padding: 0 11px; border-right: 0; border-left: 1px solid var(--ks-border, #393B40); margin-left: auto; }
#ws-tabbar #ws-tab-new-button { padding: 0 12px; }   /* TABPLUS-1011 */
.ws-tab-name { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ws-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ks-text-faint, #6F737A); }
.ws-dot.busy { background: var(--ks-accent, #3592C4); animation: ws-pulse 1.2s ease-in-out infinite; }
.ws-dot.waiting { background: var(--ks-warn, #D9A343); }
.ws-dot.done { background: var(--ks-ok, #5FB865); }
.ws-dot.error { background: var(--ks-err, #E05555); }
@keyframes ws-pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .ws-dot.busy { animation: none; } }
.ws-tab-dirty { color: var(--ks-warn, #D9A343); font-size: 10px; }
.ws-tab-close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 3px;
  font-size: 11px; opacity: .55; }
.ws-tab-close:hover { opacity: 1; background: rgba(255,255,255,.12); }
#ws-tab-menu { position: absolute; top: calc(100% + 2px); right: 4px; min-width: 280px; max-width: calc(100vw - 8px); max-height: 70vh; overflow: auto;
  z-index: 960; padding: 4px 0; background: var(--ks-panel, #3C3F41); border: 1px solid var(--ks-border, #393B40); border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.45); }
#ws-tab-menu button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px 7px 12px; margin: 0; border: 0; border-radius: 0;
  background: transparent; color: var(--ks-text, #BBBBBB); font: inherit; text-align: left; cursor: pointer; box-shadow: none; }
#ws-tab-menu button:hover, #ws-tab-menu button.on { background: var(--ks-hover, #2B2D30); color: var(--ks-text-bright, #DFE1E5); }
#ws-tab-menu .ws-tab-name { flex: 1; }
.ws-menu-state { color: var(--ks-text-dim, #8C8C8C); font-size: 11.5px; white-space: nowrap; }
#ws-frame-wrap { position: fixed; top: var(--ws-tabbar-h); left: 0; right: 0; bottom: 0; z-index: 900; background: var(--ks-bg, #2B2B2B); }
html:not(.ws-open) #ws-frame-wrap { visibility: hidden; pointer-events: none; }
.ws-pane { position: absolute; inset: 0; visibility: hidden; }
html.ws-open .ws-pane.on { visibility: visible; }
.ws-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--ks-bg, #2B2B2B); }
.ws-frame-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  color: var(--ks-text, #BBBBBB); font-size: 14px; z-index: 1; background: var(--ks-bg, #2B2B2B); }
.ws-frame-loading[hidden] { display: none; }
.ws-frame-loading p { margin: 0; color: var(--ks-text-dim, #8C8C8C); font-size: 13px; }

/* Branches & Langzeit-Sandboxen (05.11., kutego-sandbox-langzeit-plan.md §3) — oben im Aufgabenbereich, nur Entwickler-Pilot */
.lz-pane { flex: none; max-height: 45vh; overflow: auto; background: var(--ks-panel); border-bottom: 1px solid var(--ks-border); }
.lz-pane > summary { display: flex; align-items: center; gap: 8px; padding: 5px 10px; cursor: pointer; position: sticky; top: 0; background: var(--ks-panel); z-index: 1; }
.lz-pane .lz-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ks-text-bright); flex: 1; }
.lz-body { padding: 2px 10px 8px; }
.lz-section { margin-top: 6px; }
.lz-head { font-size: 11px; font-weight: 600; color: var(--ks-text-dim); margin: 6px 0 3px; }
.lz-item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 8px; margin-bottom: 3px; background: var(--ks-bg);
           border: 1px solid var(--ks-line); border-left: 3px solid #6E7072; }
.lz-item.st-ok { border-left-color: var(--ks-ok); } .lz-item.st-lauf { border-left-color: var(--ks-accent); }
.lz-item.st-warn { border-left-color: var(--ks-warn); } .lz-item.st-err { border-left-color: var(--ks-err); }
.lz-item .nr { font-size: 12px; color: var(--ks-text-dim); font-variant-numeric: tabular-nums; }
.lz-branch { font-family: var(--ks-mono); font-size: 12px; color: var(--ks-text-bright); }
.lz-commit { flex: 1 1 200px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lz-actions { margin-left: auto; display: flex; gap: 4px; }
/* Tooltips der Branch-Knöpfe links neben dem Knopf (oben würden sie im scrollenden Kasten abgeschnitten/verschoben, User 05.11.) */
.lz-actions [data-tip]:hover::after, .lz-actions [data-tip]:focus-visible::after, .lz-item > [data-tip]:hover::after {
  left: auto; right: calc(100% + 8px); bottom: auto; top: 50%; transform: translateY(-50%); }
.lz-actions [data-tip]:hover::before, .lz-actions [data-tip]:focus-visible::before, .lz-item > [data-tip]:hover::before { display: none; }
.lz-foot { margin: 6px 0 0; }
/* 05.11. (User): „Branches / Entwickler-Sandboxen“ in der linken Seitenleiste unter „Neue Aufgabe“ — volle Breite wie die Kopfzeile,
   kein eigener Scrollkasten (die Seitenleiste scrollt), Kopf nicht sticky (sonst überdeckt er „Neue Aufgabe“) */
.karte.neu .lz-pane { margin: 18px -12px 0; max-height: none; overflow: visible; border-top: 1px solid var(--ks-border); border-bottom: 0; }
.karte.neu .lz-pane > summary { position: static; padding: 7px 12px; border-bottom: 1px solid var(--ks-border); }
.karte.neu .lz-pane:not([open]) > summary { border-bottom: 0; }
.karte.neu .lz-pane + .lz-pane { margin-top: 0; }   /* 06.11. (User): Bereiche direkt untereinander ohne Lücke (Dev-Mails, Entwickler Sandboxen, Kutego-App) */
.karte.neu .lz-body { padding: 2px 12px 8px; }
.karte.neu .lz-commit { flex-basis: 100%; order: 9; }
/* 05.11. (User): Account-Wahl bei „Neue Aufgabe“ */
.optionen-raster .opt-account { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--grau); }
.optionen-raster .opt-account input { font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid #646464; border-radius: 4px; background: var(--ks-input); color: var(--ks-text); }
.optionen-raster .opt-account p { margin: 2px 0 0; color: var(--ks-text-dim); }
#optionen summary .opt-account-badge { margin-left: 8px; font-size: 12px; color: var(--ks-text-bright); }
/* 05.11. (User): Felder der Aufgabenoptionen einheitlich — Datum, Account und Backup-Stand so hoch wie die Dropdowns */
.optionen-raster select, .optionen-raster input[type=date], .optionen-raster .account-combo input {
  box-sizing: border-box; height: 31px; font-size: 13px; padding: 0 8px; border-radius: 4px; }
.optionen-raster .opt-inline input[type=date] { flex: 1; min-width: 0; }
.optionen-raster .account-combo, .optionen-raster .account-combo input { width: 100%; }
.optionen-raster .opt-account-stand { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; max-width: calc((100% - 32px) / 3); }
/* 05.11. (User): Glocke aus = durchgestrichen (bell-slash, JS) + abgedunkelt; ::before ist hier der Tooltip-Pfeil */
#glocke.is-off { color: #8a96a6; }
html.ks-darcula #glocke.is-off { color: var(--ks-text-dim, #ADB0B3); }
.demo-box { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; margin: 0 0 10px; border: 1px dashed var(--ks-line, #555); border-radius: 4px; }   /* Beispiel-Aufgabe (05.11.) */
.demo-box p { margin: 0; flex: 1 1 260px; }

/* 05.11.: „Ansicht als …“ (nur Hauptadmin) + Markierung der Testansicht */
#role-test-select { font: inherit; font-size: 12px; padding: 4px 6px; background: var(--ks-input, #45494a); color: var(--ks-text, #bbb); border: 1px solid #646464; border-radius: 4px; }
.role-test-badge { background: #c27d0e; color: #fff; font-weight: 700; font-size: 11px; letter-spacing: .06em; padding: 3px 8px; border-radius: 3px; }
body.role-test-active header { box-shadow: inset 0 -3px 0 #c27d0e; }

/* HOMEBADGE-1211: Zähler am Übersicht-Reiter */
#ws-tabbar #ws-tab-home { position: relative; }
.ws-home-badge { flex: none; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--ks-sandbox, #cf222e); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; box-sizing: border-box; }