/* 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; }
.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; }