/* mITs Support – Gestaltung nach Corporate Design myITsolutions:
   Graphit/Papierweiß, Blau als Akzent, Geist Sans + Geist Mono, feine Linien, sparsame Rundungen.
   Rot/Grün(Mint) nur für Zustände. */

@font-face {
    font-family: "Geist";
    src: url("fonts/geist-latin-wght-normal.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Geist";
    src: url("fonts/geist-latin-ext-wght-normal.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Geist Mono";
    src: url("fonts/geist-mono-latin-wght-normal.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
}

:root {
    /* Corporate-Design-Farben */
    --graphit: #101317;
    --papier: #F0F2F4;
    --blau: #548CFF;          /* Akzent auf dunklen Flächen */
    --blau-dunkel: #316CC5;   /* Akzent auf hellen Flächen */
    --text-hell-2: #A2AAB4;   /* Sekundärtext auf dunklem Grund */
    --text-2: #526A87;        /* Sekundärtext auf hellem Grund */
    --linie-dunkel: #30363E;
    --mint: #9CDBC5;
    /* abgeleitet */
    --text: var(--graphit);
    --linie: #D9DEE4;
    --flaeche: #ffffff;
    --blau-hell: #E6EEFB;
    --graphit-hell: #1A1F25;
    --rot: #C62828;
    --rot-hell: #FBEAEA;
    --gelb: #8A5A00;
    --gelb-hell: #FCF3DC;
    --gelb-linie: #EED9A2;
    --gruen: #1F6F57;
    --gruen-hell: #E3F5EE;
    --mono: "Geist Mono", ui-monospace, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
    font-family: "Geist", "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--papier);
    color: var(--text);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--blau-dunkel); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 22px; font-weight: 500; margin: 0 0 12px; letter-spacing: -0.01em; }
b, .fett { font-weight: 600; }
.mono { font-family: var(--mono); font-size: 0.92em; }
.leise { color: var(--text-2); }
.klein { font-size: 12.5px; }
.absatz { margin: 0 0 12px; }
.rechts { text-align: right; margin: -6px 0 16px; }
.einzug { padding-left: 28px; padding-right: 28px; }

/* ---------- Grundgerüst ---------- */
.app { display: flex; min-height: 100vh; }
.sidebar {
    width: 228px;
    flex-shrink: 0;
    background: var(--graphit);
    color: var(--text-hell-2);
    padding: 18px 0 12px;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}
.sidebar .marke {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 20px 18px;
    color: var(--papier);
    font-weight: 500;
    font-size: 16px;
    text-decoration: none;
}
.sidebar .marke img { display: block; }
.sidebar-suche { padding: 0 16px 14px; border-bottom: 1px solid var(--linie-dunkel); margin-bottom: 8px; }
.sidebar-suche input {
    width: 100%;
    background: var(--graphit-hell);
    border: 1px solid var(--linie-dunkel);
    border-radius: 3px;
    color: var(--papier);
    padding: 7px 10px;
    font: inherit;
    font-size: 13px;
}
.sidebar-suche input::placeholder { color: var(--text-hell-2); }
.sidebar-suche input:focus { outline: none; border-color: var(--blau); }
.sidebar .punkt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 20px;
    color: var(--text-hell-2);
    border-left: 2px solid transparent;
    text-decoration: none;
    cursor: pointer;
}
.sidebar .punkt:hover { color: var(--papier); background: var(--graphit-hell); }
.sidebar .punkt.aktiv { color: var(--papier); border-left-color: var(--blau); background: var(--graphit-hell); }
.sidebar .gruppe summary { list-style: none; }
.sidebar .gruppe summary::-webkit-details-marker { display: none; }
.sidebar .gruppe summary::after { content: "▾"; margin-left: auto; font-size: 11px; transition: transform .15s; }
.sidebar .gruppe:not([open]) summary::after { transform: rotate(-90deg); }
.sidebar .aktiv-gruppe { color: var(--papier); }
.sidebar .unterpunkt { padding-left: 36px; font-size: 13.5px; }
.sidebar .zaehler {
    margin-left: auto;
    background: var(--blau);
    color: var(--graphit);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    border-radius: 2px;
    padding: 0 7px;
}
.sidebar-fuss {
    margin-top: auto;
    padding: 14px 20px 4px;
    border-top: 1px solid var(--linie-dunkel);
    font-size: 13px;
}
.angemeldet { display: flex; align-items: center; gap: 8px; color: var(--papier); margin-bottom: 6px; }
.sidebar .link-knopf { color: var(--text-hell-2); }
.sidebar .link-knopf:hover { color: var(--papier); }

.hauptbereich { flex: 1; min-width: 0; background: var(--flaeche); }
.topbar {
    padding: 20px 28px;
    border-bottom: 1px solid var(--linie);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.topbar .titel { font-weight: 500; font-size: 20px; letter-spacing: -0.01em; }
.topbar-rechts { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.inhalt { padding: 22px 28px; }
.inhalt.schmal { max-width: 680px; }
.zurueck { font-size: 12.5px; color: var(--text-2); }
h2.abschnitt { font-size: 15px; font-weight: 500; margin: 22px 0 10px; }
.inhalt > h2.abschnitt:first-child { margin-top: 0; }

/* ---------- Knöpfe & Formulare ---------- */
.knopf {
    display: inline-block;
    background: var(--blau-dunkel);
    color: #fff;
    border: 1px solid var(--blau-dunkel);
    border-radius: 3px;
    padding: 8px 14px;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}
.knopf:hover { background: #285BA8; text-decoration: none; }
.knopf.hell { background: var(--flaeche); color: var(--text); border-color: var(--linie); }
.knopf.hell:hover { border-color: var(--text-2); background: var(--flaeche); }
.knopf.breit { width: 100%; text-align: center; }
.knopf.klein { padding: 5px 10px; font-size: 12px; }
.link-knopf { background: none; border: none; padding: 0; color: var(--blau-dunkel); cursor: pointer; font: inherit; font-size: 12.5px; }
.link-knopf:hover { text-decoration: underline; }

.feld { display: block; margin-bottom: 12px; font-size: 12px; font-weight: 500; color: var(--text-2); }
.feld.inline { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.feld.inline select, .feld.inline input { margin: 0; width: auto; min-width: 180px; }
.feld input, .feld select, .feld textarea, textarea, .suche input, .suche-klein input, .passwort-neu input, .kunden-auswahl select {
    display: block;
    width: 100%;
    margin-top: 4px;
    border: 1px solid var(--linie);
    border-radius: 3px;
    padding: 8px 10px;
    font: inherit;
    font-size: 13.5px;
    color: var(--text);
    background: var(--flaeche);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--blau-hell); border-color: var(--blau-dunkel); }
textarea { resize: vertical; }
.haken { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; margin: 4px 0 14px; cursor: pointer; }
.haken input { margin-top: 3px; }
.suche input { width: 300px; margin: 0; }
.zwei-felder { display: flex; gap: 12px; }
.zwei-felder .feld { flex: 1; }

/* ---------- Meldungen ---------- */
.meldung { margin: 14px 28px 0; padding: 10px 14px; border-radius: 3px; font-size: 13px; font-weight: 500; border-left: 3px solid; }
.karte .meldung, .schlicht .meldung, .inhalt .meldung, .nachricht .meldung { margin: 0 0 12px; }
.meldung-erfolg { background: var(--gruen-hell); color: var(--gruen); }
.meldung-fehler { background: var(--rot-hell); color: var(--rot); }
.meldung-hinweis { background: var(--blau-hell); color: var(--blau-dunkel); }
.hinweis-gelb {
    background: var(--gelb-hell);
    border-left: 3px solid var(--gelb);
    color: var(--gelb);
    padding: 10px 14px;
    font-size: 12.5px;
    font-weight: 500;
    margin-bottom: 14px;
}
.hinweis-zeile { font-size: 12.5px; color: var(--text-2); margin-bottom: 10px; }

/* ---------- Filter, Reiter & Tabellen ---------- */
.filterleiste { display: flex; gap: 8px; padding: 14px 28px; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--linie); }
.chip {
    padding: 6px 12px;
    border-radius: 3px;
    font-size: 12.5px;
    font-weight: 500;
    border: 1px solid var(--linie);
    color: var(--text-2);
    background: var(--flaeche);
    text-decoration: none;
    white-space: nowrap;
}
.chip:hover { text-decoration: none; border-color: var(--text-2); color: var(--text); }
.chip.aktiv { background: var(--graphit); color: var(--papier); border-color: var(--graphit); }
.chip-meine { border-color: var(--blau-dunkel); color: var(--blau-dunkel); }
.chip-meine:hover { background: var(--blau-hell); }
.chip.warnung:not(.aktiv) { background: var(--gelb-hell); color: var(--gelb); border-color: var(--gelb-linie); }
.trenner { width: 1px; height: 22px; background: var(--linie); margin: 0 4px; }
.kunden-auswahl { margin-left: auto; }
.kunden-auswahl select { margin: 0; min-width: 220px; }

.reiter { display: flex; gap: 0; padding: 0 28px; border-bottom: 1px solid var(--linie); }
.reiter-punkt {
    padding: 12px 16px;
    font: inherit;
    font-size: 13.5px;
    color: var(--text-2);
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    cursor: pointer;
    text-decoration: none;
    margin-bottom: -1px;
}
.reiter-punkt:hover { color: var(--text); text-decoration: none; }
.reiter-punkt.aktiv { color: var(--text); border-bottom-color: var(--blau-dunkel); font-weight: 500; }
.reiter-klein { padding: 0; margin: -16px -16px 14px; }
/* "Interne Notiz" rot – Kunde sieht sie nie */
.reiter-punkt.reiter-intern { color: var(--rot); }
.reiter-punkt.reiter-intern.aktiv { border-bottom-color: var(--rot); }

.tabelle-rahmen { overflow-x: auto; }
.tabelle-rahmen.rahmen { border: 1px solid var(--linie); margin-bottom: 10px; }
table.liste { width: 100%; border-collapse: collapse; }
.liste th {
    text-align: left;
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-2);
    padding: 10px 28px 10px 0;
    border-bottom: 1px solid var(--linie);
    white-space: nowrap;
}
.liste td { padding: 12px 28px 12px 0; border-bottom: 1px solid var(--linie); font-size: 13.5px; vertical-align: middle; }
.liste th:first-child, .liste td:first-child { padding-left: 28px; }
.liste tr[data-link] { cursor: pointer; }
.liste tbody tr:hover { background: #F7F8FA; }
.liste tr.zeile-neu { background: #F5F8FE; }
.liste tr.inaktiv td { color: var(--text-2); }
.liste .betreff a { color: var(--text); font-weight: 500; }
.ticketnr { font-family: var(--mono); font-weight: 500; color: var(--blau-dunkel); font-size: 13px; }
.punkt-neu { display: inline-block; width: 7px; height: 7px; background: var(--blau-dunkel); margin-right: 8px; vertical-align: 1px; }
.leer { padding: 48px 28px; text-align: center; color: var(--text-2); }
.leer.klein { padding: 16px 0; text-align: left; }
.seiten { display: flex; gap: 18px; justify-content: center; padding: 16px; font-size: 13px; color: var(--text-2); }
.aktionen { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.aktionen form { margin: 0; }
.passwort-neu summary { list-style: none; }
.passwort-neu form { display: flex; gap: 6px; margin-top: 6px; }
.passwort-neu input { margin: 0; width: 170px; }
.rechte summary { list-style: none; }
.rechte-form { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; min-width: 210px; }
.rechte-form .haken { margin: 0; }
.rechte-form .knopf { align-self: flex-start; margin-top: 4px; }

/* ---------- Status & Priorität (Farben nur für Zustände) ---------- */
.badge { display: inline-block; padding: 2px 8px; border-radius: 2px; font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.badge-neu { background: var(--blau-hell); color: var(--blau-dunkel); }
.badge-wartet_auf_uns { background: var(--gelb-hell); color: var(--gelb); }
.badge-wartet_auf_kunde { background: var(--papier); color: var(--text-2); }
.badge-wartet_auf_extern { background: #EDEBF7; color: #4B4589; }
.badge-angenommen { background: var(--gruen-hell); color: var(--gruen); box-shadow: inset 0 0 0 1px var(--gruen); }
.badge-abgelehnt { background: var(--rot-hell); color: var(--rot); }
.badge-erledigt { background: var(--gruen-hell); color: var(--gruen); }
.prio { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; white-space: nowrap; }
.prio-punkt { width: 8px; height: 8px; background: currentColor; }
.prio-kritisch { color: var(--rot); font-weight: 600; }
.prio-hoch { color: #B4530F; }
.prio-mittel { color: var(--text-2); }
.prio-niedrig { color: var(--text-hell-2); }

/* ---------- Detailseiten ---------- */
.ticket-kopf-nr { color: var(--text-2); font-size: 12px; letter-spacing: .06em; margin-top: 6px; }
.ticket-titel { font-size: 22px; margin: 2px 0 8px; }
.meta-zeile { display: flex; gap: 18px; font-size: 12.5px; color: var(--text-2); flex-wrap: wrap; align-items: center; }
.meta-zeile b { color: var(--text); font-weight: 500; }
.zwei-spalten { display: flex; gap: 24px; padding: 22px 28px; align-items: flex-start; }
.spalte-haupt { flex: 1; min-width: 0; }
.spalte-seite { width: 320px; flex-shrink: 0; }
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 3px; padding: 16px; margin-bottom: 16px; }
.karten-titel {
    font-family: var(--mono);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-2);
    font-weight: 500;
    margin-bottom: 12px;
}
.karten-titel.aussen { margin-top: 2px; }
.unter-titel { font-size: 12.5px; font-weight: 600; color: var(--text); margin: 16px 0 6px; }

.verlauf { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.nachricht { border: 1px solid var(--linie); border-left-width: 3px; padding: 14px 16px; background: var(--flaeche); }
.nachricht-kunde { border-left-color: var(--text-2); }
.nachricht-support { border-left-color: var(--blau-dunkel); background: #F7F9FE; }
.nachricht-intern { border-left-color: var(--gelb); background: var(--gelb-hell); border-style: dashed solid dashed solid; }
.nachricht-arbeit { border-left-color: var(--mint); background: #F3FBF8; }
/* Gespeicherte Anhänge im Ticket (nur Mitarbeiter) */
.anhang-liste { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.anhang { display: flex; flex-direction: column; gap: 2px; max-width: 220px; padding: 8px 10px; border: 1px solid var(--linie); border-radius: 3px; background: #fff; color: var(--text); font-size: 12.5px; text-decoration: none; }
.anhang:hover { border-color: var(--blau); text-decoration: none; }
.anhang img { max-width: 200px; max-height: 120px; object-fit: contain; margin-bottom: 4px; background: var(--papier); }
.anhang-name { overflow-wrap: anywhere; font-weight: 500; }
.nachricht-kopf { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; margin-bottom: 8px; flex-wrap: wrap; }
.nachricht-loeschen { display: inline; margin-left: 12px; }
.nachricht-loeschen .link-knopf { color: var(--rot); font-family: inherit; }
.nachricht-text { overflow-wrap: anywhere; }
.zitat { margin-top: 10px; font-size: 12.5px; color: var(--text-2); }
.zitat summary { cursor: pointer; }
.zitat .nachricht-text { border-left: 2px solid var(--linie); padding-left: 10px; margin-top: 8px; }
.anhaenge { margin-top: 10px; font-size: 12.5px; color: var(--text-2); }
.antwortbereich textarea { margin: 0 0 10px; }
.antwortbereich { margin-bottom: 20px; }
.antwort-fuss { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.antwort-fuss .haken { margin: 0; }
[data-reiter].reiter-bereit .reiter-inhalt { display: none; }
[data-reiter].reiter-bereit .reiter-inhalt.sichtbar { display: block; }
[data-reiter]:not(.reiter-bereit) .reiter-inhalt + .reiter-inhalt { border-top: 1px solid var(--linie); margin-top: 16px; padding-top: 16px; }

.avatar {
    width: 26px; height: 26px; border-radius: 2px;
    background: var(--blau); color: var(--graphit);
    font-size: 11px; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.avatar.gross { width: 40px; height: 40px; font-size: 14px; background: var(--papier); color: var(--text); }
.kunde-karte { display: flex; gap: 12px; align-items: flex-start; }
.kunde-name { font-weight: 600; color: var(--text); }
.kunde-mail { color: var(--text-2); overflow-wrap: anywhere; }
.mini-statistik { display: flex; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--text-2); }
.mini-statistik b { color: var(--text); font-family: var(--mono); }
.abgleich {
    display: inline-block; margin-top: 10px;
    background: var(--gruen-hell); color: var(--gruen);
    font-size: 11.5px; font-weight: 500; padding: 2px 8px; border-radius: 2px;
}
.suche-klein input { margin: 0 0 8px; }
.treffer-liste { border: 1px solid var(--linie); }
.treffer {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    padding: 8px 10px; border-bottom: 1px solid var(--linie); font-size: 12.5px; margin: 0;
}
.treffer:last-child { border-bottom: none; }
.treffer b { display: block; }
.treffer span { color: var(--text-2); font-size: 11.5px; overflow-wrap: anywhere; }

/* ---------- Statistik, Administration, Suche ---------- */
.kennzahlen, .kacheln { display: flex; gap: 0; border: 1px solid var(--linie); margin-bottom: 20px; flex-wrap: wrap; }
.kennzahl, .kachel { flex: 1; min-width: 180px; padding: 16px 18px; border-right: 1px solid var(--linie); }
.kennzahl:last-child, .kachel:last-child { border-right: none; }
.kennzahl-wert, .kachel-wert { font-size: 28px; font-weight: 400; color: var(--blau-dunkel); line-height: 1.2; }
.kennzahl-text, .kachel-text { font-size: 12.5px; color: var(--text-2); }
.kachel { color: var(--text); text-decoration: none; }
.kachel:hover { background: #F7F8FA; text-decoration: none; }
.kachel.aktiv { background: var(--graphit); color: var(--papier); }
.kachel.aktiv .kachel-wert { color: var(--blau); }
.kachel.aktiv .kachel-text { color: var(--text-hell-2); }
.kachel-name { font-weight: 500; margin-bottom: 4px; }
.kachel-leer .kachel-name { color: var(--text-2); }
.kachel.aktiv.kachel-leer .kachel-name { color: var(--text-hell-2); }
.treffer-kunden { display: flex; gap: 8px; flex-wrap: wrap; }
.suchtreffer { border: 1px solid var(--linie); }
.suchtreffer-zeile { display: block; padding: 12px 16px; border-bottom: 1px solid var(--linie); color: var(--text); text-decoration: none; }
.suchtreffer-zeile:last-child { border-bottom: none; }
.suchtreffer-zeile:hover { background: #F7F8FA; text-decoration: none; }
.suchtreffer-kopf { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.fundstelle { font-size: 12.5px; color: var(--text-2); margin-top: 4px; }

/* ---------- Anmeldung / Einrichtung ---------- */
body.schlicht { display: flex; justify-content: center; padding: 70px 16px; background: var(--graphit); }
.schlicht-rahmen { width: 100%; max-width: 440px; }
.schlicht-marke { display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 500; font-size: 19px; margin-bottom: 22px; color: var(--papier); }
/* Arevis-Logo (Punkt 29 CLAUDE.md): Wort-Bild-Marke in einer umrandeten Box, damit sie auf dem
   gleichfarbigen dunklen Hintergrund als eigene Form erkennbar bleibt, nicht nur als loser Punkt. */
.marke-arevis { background: #171A24; border: 1.5px solid #333A49; border-radius: 12px; align-items: flex-end !important; gap: 3px !important; color: var(--papier) !important; }
.schlicht-marke.marke-arevis { width: fit-content; margin-left: auto; margin-right: auto; padding: 11px 20px; }
.sidebar .marke.marke-arevis { margin: 0 16px 18px; padding: 9px 14px; width: auto; }
.portal-marke.marke-arevis { padding: 7px 14px; }
.arevis-punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--blau-dunkel); flex: none; margin-bottom: 3px; }
.schlicht .karte { padding: 26px; border-color: var(--linie-dunkel); }
.unter-formular { margin: 14px 0 0; text-align: center; font-size: 12.5px; }
.schlicht .karte p.leise { font-size: 13px; margin: 0 0 14px; }
/* „Status prüfen“ aus Kundenmails */
.status-betreff { font-size: 18px; margin: 4px 0 14px; }
.status-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.pruefliste { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-bottom: 18px; }
.pruefliste td { padding: 4px 6px; border-bottom: 1px solid var(--linie); }

/* ---------- Kundenportal ---------- */
body.portal { background: var(--papier); }
.portal-kopf { background: var(--graphit); color: var(--papier); display: flex; justify-content: space-between; align-items: center; padding: 14px 28px; flex-wrap: wrap; gap: 10px; }
.portal-marke { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 16px; }
.portal-rechts { display: flex; gap: 18px; align-items: center; color: var(--text-hell-2); font-size: 13px; }
.portal-rechts form { margin: 0; }
.portal-rechts .link-knopf { color: var(--text-hell-2); }
.portal-inhalt { max-width: 900px; margin: 28px auto; background: var(--flaeche); border: 1px solid var(--linie); padding-bottom: 8px; }
.portal-titel { padding: 22px 28px 6px; margin: 0; }
.portal-hinweis { padding: 8px 28px 0; }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 1000px) {
    .zwei-spalten { flex-direction: column; }
    .spalte-seite { width: 100%; }
    .kunden-auswahl { margin-left: 0; }
}
@media (max-width: 720px) {
    .app { flex-direction: column; }
    .sidebar { width: 100%; height: auto; position: static; flex-direction: row; flex-wrap: wrap; padding: 8px; }
    .sidebar .marke { padding: 8px 10px; }
    .sidebar-suche { order: 10; width: 100%; border: none; padding: 6px 8px; margin: 0; }
    .sidebar .punkt { padding: 8px 10px; border-left: none; }
    .sidebar-fuss { margin: 0 0 0 auto; border: none; padding: 8px 10px; display: flex; gap: 10px; align-items: center; }
    .sidebar-fuss .angemeldet { margin: 0; }
    .suche input { width: 100%; }
    .liste th, .liste td { padding-right: 14px; }
    .liste th:first-child, .liste td:first-child { padding-left: 14px; }
    .topbar, .filterleiste, .zwei-spalten, .inhalt, .reiter { padding-left: 14px; padding-right: 14px; }
    .zwei-felder { flex-direction: column; gap: 0; }
}

/* Versteckte Elemente bleiben versteckt, auch wenn eine Klasse display setzt */
[hidden] { display: none !important; }
.leer.klein.einzug { padding-left: 28px; }

/* ---------- Arbeitsaufwand ---------- */
.zeit-marke { color: var(--blau-dunkel); font-weight: 500; margin-right: 8px; }
.zeit-dialog {
    border: 1px solid var(--linie);
    border-top: 3px solid var(--blau-dunkel);
    border-radius: 3px;
    padding: 22px 24px;
    width: min(440px, calc(100vw - 32px));
    color: var(--text);
    font-family: inherit;
}
.zeit-dialog::backdrop { background: rgba(16, 19, 23, .55); }
.zeit-kopf { font-size: 17px; font-weight: 500; margin-bottom: 16px; }
.zeit-knoepfe { display: flex; gap: 10px; margin-bottom: 16px; }
.zeit-status { display: block; font-size: 13px; color: var(--text-2); margin-bottom: 16px; }
.zeit-status select { display: block; width: 100%; margin-top: 6px; border: 1px solid var(--linie); border-radius: 3px; padding: 8px 9px; font: inherit; color: var(--text); background: var(--flaeche); }
.zeit-knopf {
    flex: 1;
    padding: 14px 8px;
    font: inherit;
    font-family: var(--mono);
    font-size: 16px;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: 3px;
    cursor: pointer;
}
.zeit-knopf:hover, .zeit-knopf:focus { border-color: var(--blau-dunkel); background: var(--blau-hell); outline: none; }
/* "Keine Zeit" als eigener Knopf neben "1 Std", farblich abgesetzt (Svens Wunsch 15.10.2026) */
.zeit-knopf.keine-zeit { font-family: inherit; font-size: 13.5px; font-weight: 500; color: var(--text-2); background: var(--papier); border-color: #C5CDD6; }
.zeit-knopf.keine-zeit:hover, .zeit-knopf.keine-zeit:focus { color: var(--graphit); border-color: var(--text-2); background: #E2E6EB; }
.zeit-manuell { display: flex; align-items: center; gap: 8px; padding: 12px 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.zeit-manuell label { font-size: 13px; color: var(--text-2); white-space: nowrap; }
.zeit-manuell input { width: 80px; border: 1px solid var(--linie); border-radius: 3px; padding: 7px 9px; font: inherit; font-family: var(--mono); }
.zeit-manuell .knopf { margin-left: auto; }
.zeit-fehler { color: var(--rot); font-size: 12.5px; margin-top: 8px; }
.zeit-fuss { display: flex; justify-content: flex-end; margin-top: 14px; }

/* ---------- Kundenportal: Ticketverlauf ---------- */
.portal-inhalt > .meldung { margin: 18px 28px 0; }
.portal-betreff { color: var(--text); font-weight: 500; }
.portal-titel .zurueck { display: inline-block; margin-bottom: 6px; }
.portal-titel h1.ticket-titel { margin-bottom: 8px; }
.portal-verlauf { padding: 4px 28px 0; }
.portal-antwort { padding: 18px 28px 6px; border-bottom: 1px solid var(--linie); margin-bottom: 14px; }
.portal-antwort textarea { margin-top: 6px; }

/* ---------- Kundenportal-Sicherheit ---------- */
.badge-gesperrt { background: var(--rot-hell); color: var(--rot); }
.sicherheit-hinweis {
    display: flex; flex-direction: column; gap: 2px;
    margin: 0 0 12px; padding: 8px 10px;
    border-left: 3px solid #E0B44C; background: rgba(224, 180, 76, .12);
    color: #F3D58C; font-size: 12px; text-decoration: none; line-height: 1.4;
}
.sicherheit-hinweis:hover { background: rgba(224, 180, 76, .2); text-decoration: none; }
.sicherheit-hinweis.kritisch { border-left-color: #E5534B; background: rgba(229, 83, 75, .14); color: #F4A6A1; }
.sicherheit-hinweis.kritisch:hover { background: rgba(229, 83, 75, .22); }
.sicherheit-titel { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; opacity: .85; }
.protokoll-zeile { font-size: 12.5px; padding: 3px 0; border-bottom: 1px solid var(--linie); }
.protokoll-zeile:last-of-type { border-bottom: none; margin-bottom: 8px; }
.rechtsbuendig { text-align: right; }

/* ---------- Auswahl in der Ansicht "Erledigt" ---------- */
.liste th.auswahl, .liste td.auswahl { width: 44px; padding-right: 0; }
.liste td.auswahl input, .liste th.auswahl input { width: 16px; height: 16px; cursor: pointer; vertical-align: middle; }
.auswahl-leiste { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 28px; border-bottom: 1px solid var(--linie); background: #F7F8FA; flex-wrap: wrap; }
.auswahl-knoepfe { display: flex; gap: 8px; }
.ausgeblendet { font-size: 11px; color: var(--text-2); border: 1px dashed var(--text-hell-2); padding: 1px 6px; border-radius: 2px; margin-left: 6px; white-space: nowrap; }

/* ---------- Stundenbudget ---------- */
.budget { border: 1px solid var(--linie); padding: 12px 14px; margin-bottom: 16px; background: var(--flaeche); }
.budget-kompakt { padding: 10px 0 0; border: none; border-top: 1px solid var(--linie); margin: 12px 0 0; }
.budget-kopf { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; flex-wrap: wrap; }
.budget-titel { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); }
.budget-balken { height: 8px; background: var(--papier); margin: 8px 0 6px; }
.budget-balken span { display: block; height: 100%; background: var(--blau-dunkel); }
.budget-knapp .budget-balken span { background: #D49A1E; }
.budget-aufgebraucht .budget-balken span { background: var(--rot); }
.budget-fuss { font-size: 12.5px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.budget-warnung { margin-left: auto; font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 2px; }
.budget-knapp .budget-warnung { background: var(--gelb-hell); color: var(--gelb); }
.budget-aufgebraucht .budget-warnung { background: var(--rot-hell); color: var(--rot); }
.budget-zelle-knapp { color: var(--gelb); font-weight: 600; }
.budget-zelle-aufgebraucht { color: var(--rot); font-weight: 600; }
/* Mehrstunden: Übertrag in den Folgemonat oder abrechnen */
.budget-uebertrag { font-size: 12px; display: flex; gap: 4px 10px; flex-wrap: wrap; align-items: baseline; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--linie); color: var(--text-2); }
.budget-entscheidung { display: inline; margin: 0; }
.budget-entscheidung .link-knopf { font-size: 12px; }
.kunde-aendern { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--linie); }
.kunde-aendern summary { cursor: pointer; font-size: 12.5px; color: var(--blau-dunkel); }
.kunde-aendern form { margin-top: 10px; }
.breite-0 { width: 0%; }
.breite-5 { width: 5%; }
.breite-10 { width: 10%; }
.breite-15 { width: 15%; }
.breite-20 { width: 20%; }
.breite-25 { width: 25%; }
.breite-30 { width: 30%; }
.breite-35 { width: 35%; }
.breite-40 { width: 40%; }
.breite-45 { width: 45%; }
.breite-50 { width: 50%; }
.breite-55 { width: 55%; }
.breite-60 { width: 60%; }
.breite-65 { width: 65%; }
.breite-70 { width: 70%; }
.breite-75 { width: 75%; }
.breite-80 { width: 80%; }
.breite-85 { width: 85%; }
.breite-90 { width: 90%; }
.breite-95 { width: 95%; }
.breite-100 { width: 100%; }
.portal-budget { padding: 0 28px 14px; }
.portal-budget .budget { margin-bottom: 0; }
.kennzahl-wert.budget-zelle-ok { font-weight: 400; }

/* ---------- Arbeitszeiten & Leistungen (Kundenseite) ---------- */
.zeiten-bereich { margin-top: 28px; }
.zeiten-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.zeiten-kopf .karten-titel { margin: 0; }
.monatswahl { display: flex; gap: 14px; align-items: center; font-size: 13px; }
.zeiten-summen { display: flex; gap: 22px; flex-wrap: wrap; font-size: 13px; color: var(--text-2); padding: 10px 0 14px; }
.zeiten-summen b { color: var(--text); }
.leistung-neu { padding: 12px 16px; }
.leistung-neu summary { list-style: none; display: inline-block; }
.leistung-neu summary::-webkit-details-marker { display: none; }
.leistung-neu[open] summary { margin-bottom: 14px; }
.dauer-wahl { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.dauer-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--linie); padding: 6px 10px; border-radius: 3px; font-family: var(--mono); font-size: 12.5px; color: var(--text); cursor: pointer; }
.dauer-chip:has(input:checked) { border-color: var(--blau-dunkel); background: var(--blau-hell); }
input.dauer-stunden { width: 70px; display: inline-block; margin: 0; padding: 6px 8px; border: 1px solid var(--linie); border-radius: 3px; font-family: var(--mono); }
input.tag-feld { width: 56px; display: inline-block; margin: 0 4px; padding: 3px 6px; border: 1px solid var(--linie); border-radius: 3px; }
.serie-zeile { display: grid; grid-template-columns: 60px 1fr auto auto; gap: 12px; align-items: center; font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--linie); }
.serie-zeile:last-child { border-bottom: none; }
.serie-zeile form { margin: 0; }
.marke-intern, .marke-serie { font-size: 10.5px; padding: 1px 6px; border-radius: 2px; margin-left: 6px; font-weight: 500; }
.marke-intern { background: var(--gelb-hell); color: var(--gelb); }
.marke-serie { background: var(--blau-hell); color: var(--blau-dunkel); }
.zeiten-liste td { vertical-align: top; }
.zeit-aktionen { white-space: nowrap; text-align: right; }
.zeit-aktionen form { display: inline; margin: 0; }
.zeit-aktionen .loeschen { color: var(--rot); margin-left: 12px; }
.zeit-bearbeiten { display: inline-block; text-align: left; }
.zeit-bearbeiten summary { list-style: none; display: inline; }
.zeit-bearbeiten[open] form { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; min-width: 240px; white-space: normal; }
.zeit-bearbeiten form select, .zeit-bearbeiten form textarea, .zeit-bearbeiten form input[type=date] { border: 1px solid var(--linie); border-radius: 3px; padding: 5px 7px; font: inherit; font-size: 12.5px; }
.geloeschte { margin-top: 10px; }
.geloeschte summary { cursor: pointer; }
.geloescht-zeile { padding: 4px 0; }

/* ---------- Kundenportal: Leistungen ---------- */
.portal-leistungen { padding: 4px 28px 18px; border-bottom: 1px solid var(--linie); margin-bottom: 6px; }
.portal-monatswahl { justify-content: space-between; margin-bottom: 12px; }
.portal-leistungen .budget { margin-bottom: 4px; }
.portal-leistungsliste { margin-top: 6px; }
.portal-leistungsliste th:first-child, .portal-leistungsliste td:first-child { padding-left: 0; }
.portal-leistungsliste td { vertical-align: top; }

/* ---------- Weitere Kontingente ---------- */
.kontingent-zeile { border-bottom: 1px solid var(--linie); padding: 6px 0; font-size: 13px; }
.kontingent-zeile summary { cursor: pointer; list-style: none; }
.kontingent-zeile summary::-webkit-details-marker { display: none; }
.kontingent-zeile form { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.kontingent-zeile input, .kontingent-neu input { border: 1px solid var(--linie); border-radius: 3px; padding: 6px 8px; font: inherit; font-size: 13px; }
.kontingent-zeile input[name=stunden], .kontingent-neu input[name=stunden] { width: 64px; }
.kontingent-zeile input[name=name], .kontingent-neu input[name=name] { flex: 1; min-width: 140px; }
.kontingent-neu { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.marke-kontingent { font-size: 10.5px; padding: 1px 6px; border-radius: 2px; margin-left: 6px; font-weight: 500; background: #EDEBF7; color: #4B4589; }

/* ---------- Dashboard ---------- */
.dash { padding: 22px 28px 32px; display: flex; flex-direction: column; gap: 20px; }
.dash-gruss { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; }
.dash-label { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); }
.dash-kopfzeile { display: grid; grid-template-columns: minmax(220px, 1fr) 3fr; gap: 16px; }
.dash-held { background: var(--graphit); color: var(--papier); padding: 20px 22px; border-radius: 3px; text-decoration: none; display: flex; flex-direction: column; justify-content: space-between; min-height: 170px; border-left: 4px solid var(--linie-dunkel); }
.dash-held:hover { text-decoration: none; background: var(--graphit-hell); }
.dash-held.aktiv { border-left-color: var(--blau); }
.dash-held .dash-label { color: var(--text-hell-2); }
.dash-heldwert { font-size: 64px; font-weight: 500; line-height: 1; letter-spacing: -0.03em; margin: 10px 0; }
.dash-heldtext { color: var(--text-hell-2); font-size: 13px; }
.dash-kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--linie); background: var(--flaeche); }
.dash-kachel { padding: 14px 18px; border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie); color: var(--text); text-decoration: none; }
.dash-kachel:nth-child(3n) { border-right: none; }
.dash-kachel:nth-last-child(-n+3) { border-bottom: none; }
a.dash-kachel:hover { background: #F7F8FA; text-decoration: none; }
.dash-wert { font-size: 26px; font-weight: 500; letter-spacing: -0.02em; margin: 4px 0 2px; }
.dash-zusatz { font-size: 12px; color: var(--text-2); }
.dash-raster { display: grid; gap: 20px; }
.dash-raster-2-1 { grid-template-columns: 2fr 1fr; }
.dash-karte { margin: 0; }
.dash-ohne-innenrand { padding: 16px 0 4px; }
.dash-innen { padding: 0 16px; }
.dash-abstand { margin-top: 22px; }
.liste.kompakt td { padding-top: 9px; padding-bottom: 9px; }
.dash-ohne-innenrand .liste td:first-child { padding-left: 16px; }
.dash-ohne-innenrand .liste td:last-child { padding-right: 16px; }

/* Diagramm */
.diagramm { position: relative; }
.legende { display: flex; gap: 18px; font-size: 12.5px; color: var(--text-2); margin-bottom: 6px; }
.legende b { color: var(--text); font-weight: 500; }
.legende-linie { display: inline-block; width: 16px; height: 2px; vertical-align: middle; margin-right: 4px; border-radius: 1px; }
.legende-linie.serie-1 { background: #316CC5; }
.legende-linie.serie-2 { background: #2A9D7A; }
.verlauf-svg { width: 100%; height: auto; display: block; overflow: visible; }
.verlauf-svg .raster { stroke: #E9ECEF; stroke-width: 1; }
.verlauf-svg .achse { fill: var(--text-2); font-family: var(--mono); font-size: 10.5px; }
.verlauf-svg .linie { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.verlauf-svg .linie.serie-1 { stroke: #316CC5; }
.verlauf-svg .linie.serie-2 { stroke: #2A9D7A; }
.verlauf-svg .endpunkt { stroke: #fff; stroke-width: 2; }
.verlauf-svg .endpunkt.serie-1 { fill: #316CC5; }
.verlauf-svg .endpunkt.serie-2 { fill: #2A9D7A; }
.verlauf-svg .endwert { fill: var(--text); font-size: 11.5px; font-family: var(--mono); }
.verlauf-svg .leise-text { fill: var(--text-2); }
.verlauf-svg .trefferflaeche { fill: transparent; cursor: crosshair; }
.verlauf-svg .fadenkreuz { stroke: var(--text-2); stroke-width: 1; opacity: 0; pointer-events: none; }
.verlauf-svg .fadenkreuz.sichtbar { opacity: .5; }
.diagramm-tooltip { position: absolute; top: 28px; background: var(--graphit); color: var(--papier); font-size: 12px; padding: 8px 10px; border-radius: 3px; pointer-events: none; white-space: nowrap; z-index: 2; }
.diagramm-tooltip i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.tabellenansicht { margin-top: 6px; }
.tabellenansicht summary { cursor: pointer; }
.tabellenansicht table { margin-top: 6px; }

/* Balkenlisten (Status, Team) */
.balkenliste { display: flex; flex-direction: column; gap: 2px; }
.balkenzeile { display: grid; grid-template-columns: 9.5em 1fr 2.5em; align-items: center; gap: 10px; padding: 5px 0; color: var(--text); text-decoration: none; font-size: 13px; }
.balkenzeile:hover { text-decoration: none; background: #F7F8FA; }
.balken-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.balken-spur { height: 10px; }
.balken { display: block; height: 10px; background: #316CC5; border-radius: 0 4px 4px 0; min-width: 2px; }
.balken.niemand { background: #EF7D17; }
/* padding: 0, sonst greift die allgemeine Klasse .leer (Hinweis "keine Einträge") und malt einen großen grauen Kasten */
.balken.leer { background: var(--linie); width: 2px; padding: 0; }
.balken-wert { text-align: right; }

/* Kontingente kompakt */
.kontingent-mini { display: block; padding: 8px 0; border-bottom: 1px solid var(--linie); color: var(--text); text-decoration: none; font-size: 13px; }
.kontingent-mini:last-of-type { border-bottom: none; margin-bottom: 8px; }
.kontingent-mini:hover { text-decoration: none; background: #F7F8FA; }
.kontingent-mini-kopf { display: flex; justify-content: space-between; gap: 8px; }
.kontingent-mini .budget-balken { margin: 6px 0 4px; height: 6px; }

/* Neueste Nachrichten */
.nachrichtenliste { display: flex; flex-direction: column; }
.nachrichtenzeile { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--linie); color: var(--text); text-decoration: none; font-size: 13px; }
.nachrichtenzeile:last-child { border-bottom: none; }
.nachrichtenzeile:hover { text-decoration: none; background: #F7F8FA; }
.nachrichten-inhalt { display: flex; flex-direction: column; min-width: 0; }
.nachrichten-inhalt > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.klein-avatar { width: 32px; height: 32px; font-size: 12px; }

@media (max-width: 1100px) {
    .dash-kopfzeile, .dash-raster-2-1 { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .dash { padding: 16px 14px; }
    .dash-kacheln { grid-template-columns: repeat(2, 1fr); }
    .dash-kachel:nth-child(3n) { border-right: 1px solid var(--linie); }
    .dash-kachel:nth-child(2n) { border-right: none; }
}
.ohne-umbruch { white-space: nowrap; }
.balkenzeile { grid-template-columns: 11.5em 1fr 2.5em; }
/* Rasterspalten dürfen schrumpfen – sonst schieben breite Tabellen die Seite über den Rand */
.dash > *, .dash-kopfzeile > *, .dash-raster > * { min-width: 0; }
.dash-ohne-innenrand { overflow-x: auto; }
@media (max-width: 720px) {
    .liste .nur-breit { display: none; }
    .dash-heldwert { font-size: 52px; }
    .dash-wert { font-size: 22px; }
    .balkenzeile { grid-template-columns: 9em 1fr 2.5em; }
    .topbar-rechts { width: 100%; }
}

/* Verbundene Firmen: Abschnitte im Portal, Karte auf der Kundenseite */
.portal-monatskopf { padding: 4px 28px 6px; }
.portal-firma { margin-top: 18px; border-top: 3px solid var(--graphit); }
.portal-firma-titel { display: flex; align-items: baseline; gap: 12px; margin: 0; padding: 16px 28px 6px; font-size: 18px; font-weight: 500; }
.portal-firma .portal-leistungen { padding-top: 6px; }
.verknuepfung-zeile { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--linie); font-size: 13px; }
.kontingent-neu select { flex: 1; min-width: 160px; border: 1px solid var(--linie); border-radius: 3px; padding: 6px 8px; font: inherit; font-size: 13px; background: #fff; }
.verknuepfung-hinweis { margin: 12px 0 0; }
.verknuepfung-gruppe { padding: 10px 0 12px; border-top: 1px solid var(--linie); }
.verknuepfung-gruppe .verknuepfung-zeile:last-of-type { border-bottom: none; }
.verknuepfung-leer { padding: 4px 0; }

/* Anmeldeprotokoll: Fehlversuche bestätigen */
.abschnitt-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.liste tr.unbestaetigt td:first-child { box-shadow: inset 3px 0 0 var(--gelb); }
.bestaetigt { color: var(--gruen); font-size: 13px; }

/* Neues Ticket: Vorschläge bekannter Ansprechpartner */
.vorschlag-feld { position: relative; }
.vorschlag-liste { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; margin: 2px 0 0; padding: 4px 0; list-style: none;
    background: #fff; border: 1px solid var(--linie); border-radius: 3px; box-shadow: 0 6px 18px rgba(16, 19, 23, .12); max-height: 300px; overflow-y: auto; }
.vorschlag-liste li { display: flex; flex-direction: column; padding: 7px 12px; cursor: pointer; }
.vorschlag-liste li.aktiv { background: #EEF3FF; }
.vorschlag-name { font-size: 13.5px; font-weight: 500; color: var(--text); }
.vorschlag-zusatz { font-size: 12px; color: var(--text-2); }

/* ---------- Projekte ---------- */
.badge-projekt-geplant { background: var(--papier); color: var(--text-2); }
.badge-projekt-laeuft { background: var(--blau-hell); color: var(--blau-dunkel); }
.badge-projekt-pausiert { background: #EDEBF7; color: #4B4589; }
.badge-projekt-abgeschlossen { background: var(--gruen-hell); color: var(--gruen); }
.fortschritt { display: inline-flex; align-items: center; gap: 8px; min-width: 150px; vertical-align: middle; }
.fortschritt-spur { flex: 1; height: 6px; background: var(--papier); border: 1px solid var(--linie); min-width: 80px; }
.fortschritt-spur span { display: block; height: 100%; background: var(--blau-dunkel); }
.fortschritt-wert { font-size: 12px; color: var(--text-2); min-width: 38px; text-align: right; }
.marke-mits, .marke-projekt { font-size: 10.5px; padding: 1px 6px; border-radius: 2px; margin-left: 6px; font-weight: 500; white-space: nowrap; }
.marke-mits { background: var(--graphit); color: var(--papier); }
.marke-projekt { background: var(--blau-hell); color: var(--blau-dunkel); }
a.marke-projekt:hover { text-decoration: none; background: var(--blau-dunkel); color: #fff; }
.projekt-gruppe { margin-bottom: 18px; }
.projekt-gruppe .karten-titel a { color: inherit; }
.projekte-bereich { margin-bottom: 22px; }
.projekt-liste td { vertical-align: middle; }
.projekt-notiz .nachricht-text { font-size: 13px; }
/* Kundenportal */
.portal-projekte { padding: 6px 28px 18px; border-bottom: 1px solid var(--linie); margin-bottom: 6px; }
.portal-abschnitt-titel { font-size: 15px; font-weight: 500; margin: 8px 0 10px; }
.portal-projekt-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.portal-projekt { background: var(--flaeche); border: 1px solid var(--linie); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.portal-projekt-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.portal-projekt .fortschritt { width: 100%; }
.portal-projekt-text { color: var(--text-2); }
@media (max-width: 700px) {
    .portal-projekte { padding-left: 16px; padding-right: 16px; }
}
.projekt-gruppe > .karten-titel { padding: 18px 28px 0; }
.projekt-gruppe .tabelle-rahmen.rahmen { border-left: none; border-right: none; }
/* Lange Meta-Zeilen (z. B. mit Projekt) sollen den Knopf rechts nicht nach unten schieben */
.topbar > div:first-child { flex: 1 1 400px; min-width: 0; }
/* Portal: Fortschritt in Farbstufen (rot bis 24 %, orange ab 25 %, gelb ab 50 %, hellgrün ab 80 %, kräftiges Grün bei 100 %) */
.fortschritt-rot .fortschritt-spur span { background: var(--rot); }
.fortschritt-orange .fortschritt-spur span { background: #EF7D17; }
.fortschritt-gelb .fortschritt-spur span { background: #F2C200; }
.fortschritt-hellgruen .fortschritt-spur span { background: #8FD16A; }
.fortschritt-gruen .fortschritt-spur span { background: #129A3E; }
.knopf.knopf-loeschen { color: var(--rot); }
.knopf.knopf-loeschen:hover { border-color: var(--rot); background: var(--rot-hell); }
.projekt-liste .zeit-aktionen .loeschen { margin-left: 0; }
/* Impressum/Datenschutz unter Anmeldung und Kundenportal */
.rechtsfuss { text-align: center; font-size: 12px; color: var(--text-2); margin: 18px auto 28px; }
.rechtsfuss a { color: var(--text-2); }
.projekt-umwandeln { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linie); }
.beteiligte-gruppe { font-weight: 600; font-size: 13px; margin: 14px 0 6px; }
.beteiligte-gruppe:first-of-type { margin-top: 4px; }
.beteiligter { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--linie); font-size: 13.5px; overflow-wrap: anywhere; }
.beteiligte-neu { display: flex; gap: 6px; margin: 8px 0; }
.beteiligte-neu select, .beteiligte-neu input { flex: 1; min-width: 0; }

/* Wünsche 22.10.2026: weitere Empfänger, Reiter "Wiederkehrend" (rot, ganz rechts), Rubrik "Wiederkehrend" */
.reiter-klein { flex-wrap: wrap; }
.reiter-punkt.reiter-rechts { margin-left: auto; }
.empfaenger-felder, .formular-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.nachricht-empfaenger { margin: -2px 0 6px; }
.wk-bald td:first-child { box-shadow: inset 3px 0 0 var(--rot); }
.wk-datum-bald { color: var(--rot); font-weight: 600; }
.wk-formular .formular-raster { grid-template-columns: 2fr 1fr 1fr 1.5fr; }
/* Rubrik "Anleitungen" (03.11.2026) */
.anleitung-neu summary { list-style: none; display: inline-block; }
.anleitung-neu summary::-webkit-details-marker { display: none; }
.anleitung-neu[open] summary { margin-bottom: 14px; }
.anleitung-neu:not([open]) { background: none; border: 0; padding: 0; }
.anleitung-aktionen a { margin-right: 10px; }
.anleitung-themen { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.anleitung-gruppe th { background: var(--papier); color: var(--text); font-weight: 600; font-size: 13px; text-transform: none; letter-spacing: 0; font-family: inherit; }
.anleitung-titel { font-weight: 600; }
.anleitung-titel::after { content: " PDF"; font-family: var(--mono); font-size: 10px; font-weight: 500; color: var(--text-2); }
@media (max-width: 720px) {
    .empfaenger-felder, .formular-raster, .wk-formular .formular-raster { grid-template-columns: 1fr; }
}

/* Auftragswesen */
.beleg-schritt { max-width: 860px; }
.beleg-kopf { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.beleg-plz { display: grid; grid-template-columns: 90px 1fr 60px; gap: 0 10px; }
.beleg-positionen { width: 100%; border-collapse: collapse; }
.beleg-positionen th { text-align: left; font-size: 12px; font-weight: 500; color: var(--text-2); padding: 0 6px 6px; }
.beleg-positionen td { padding: 4px 6px; vertical-align: top; }
.beleg-positionen input, .beleg-positionen select, .beleg-positionen textarea { width: 100%; margin: 0; padding: 8px; border: 1px solid var(--linie); border-radius: 3px; background: var(--flaeche); font: inherit; color: var(--text); box-sizing: border-box; }
.liste td.mono.rechts { white-space: nowrap; }
.rw-pruefung { margin: 0; padding: 0; list-style: none; font-size: 13px; }
.rw-pruefung .nein { color: var(--rot); font-weight: 600; }
.beleg-positionen .rechts, .rw-formular .rechts { text-align: right; }
.b-menge { width: 80px; } .b-einheit { width: 80px; } .b-preis { width: 110px; } .b-steuer { width: 170px; } .b-gesamt { width: 110px; }
td[data-gesamt] { white-space: nowrap; padding-top: 12px; }
.beleg-summe { margin-top: 10px; }
.beleg-grund { margin-top: 12px; }
.beleg-aktionen { margin: 4px 0 24px; }
.beleg-aktionen .knopf + .knopf { margin-left: 8px; }
.liste th.rechts, .liste td.rechts, .rechts { text-align: right; }
.beleg-storniert { color: var(--rot); font-weight: 600; }
.beleg-zeit-abgerechnet { color: var(--text-2); }
.beleg-zeile { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; flex-wrap: wrap; }
.beleg-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.beleg-knopf-abstand { margin-top: 8px; }
.beleg-angaben { margin: 0; font-size: 13px; }
.beleg-angaben dt { color: var(--text-2); font-size: 12px; margin-top: 8px; }
.beleg-angaben dd { margin: 0; }
details.karte > summary { cursor: pointer; }
details.karte[open] > summary { margin-bottom: 12px; }
.rw-formular { max-width: 860px; }
.rw-nummern { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 0 14px; }
.rw-beispiel { padding: 9px 0; font-size: 14px; color: var(--text); }
.rw-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.rw-vorschau { position: sticky; top: 16px; }
.rw-vorschau iframe { width: 100%; height: 78vh; border: 1px solid var(--linie); background: var(--flaeche); margin: 8px 0; }
.rw-bild { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.rw-bild img { width: 90px; max-height: 70px; object-fit: contain; border: 1px solid var(--linie); }
.rw-fuss { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 14px; }
input[type=color] { height: 36px; padding: 2px; }
@media (max-width: 1100px) {
    .rw-layout, .beleg-kopf, .rw-nummern { grid-template-columns: 1fr; }
    .rw-vorschau { position: static; }
}
.rw-holen { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.rw-holen .feld { flex: 1 1 280px; margin-bottom: 0; }
.feld input.rw-vorschlag { border-color: var(--blau); background: #EEF3FF; }
.rw-vorschlag-kasten { border-color: var(--blau); background: #F4F7FF; }
.rw-vorschlag-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.rw-vorschlag-fuss { margin: 10px 0 0; }
.feld input.rw-fehler { border-color: var(--rot); background: #FDF0EF; }
.beleg-standardknopf { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; overflow: hidden; }
.beleg-holen { margin-bottom: 14px; }
.beleg-anschrift-kurz { margin-bottom: 12px; }
.stand { font-weight: 600; white-space: nowrap; }
.stand-bezahlt { color: var(--gruen); }
.stand-offen { color: var(--text-2); }
.stand-teilbezahlt { color: var(--gelb); }
.stand-ueberfaellig { color: var(--rot); }
.titel .stand { font-size: 13px; margin-left: 8px; }
.zahlung-zeile { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px solid var(--linie); }
.buchung-liste { margin-bottom: 8px; }
.buchung-kopf { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.buchung-text { font-size: 13px; color: var(--text-2); margin: 6px 0 10px; overflow-wrap: anywhere; }
.buchung-fuss { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; margin-top: 8px; }
.buchung-andere { flex: 1 1 320px; margin-bottom: 0; }
.buchung-andere select { width: 100%; }
.treffer { font-size: 12.5px; font-weight: 600; }
.treffer-sicher { color: var(--gruen); }
.treffer-wahrscheinlich { color: var(--blau-dunkel); }
.treffer-pruefen { color: var(--gelb); }
.treffer-moeglich, .treffer-keiner { color: var(--text-2); }
.ust-art { margin: 10px 0 0; }
.ust-tabelle { width: 100%; }
.ust-summe td { font-weight: 600; border-top: 1px solid var(--text-2); }
.ust-vorsteuer { margin: 16px 0 10px; }

/* Testumgebung 06.11.2026: Master-Passwort, Hilfe & Fernwartung, Rabatt/Skonto, Artikel */
.meldung-master { background: var(--gelb-hell); color: var(--gelb); border-left-color: var(--gelb-linie); }
.nowrap { white-space: nowrap; }
.punkt-hilfe { margin-top: 2px; }
.portal-rechts a { color: var(--text-hell-2); }
.support-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; align-items: start; }
.portal-inhalt .support-raster { padding: 0 28px 28px; }
.support-schritte { padding-left: 20px; margin: 12px 0; }
.support-schritte li { margin-bottom: 6px; }
.beleg-knoepfe { display: inline-flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.beleg-knoepfe select { width: auto; max-width: 340px; margin: 0; padding: 6px 8px; border: 1px solid var(--linie); border-radius: 3px; background: var(--flaeche); font: inherit; font-size: 13px; color: var(--text); }
.beleg-bedingungen { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 16px; margin-top: 14px; }
.beleg-rabatt { display: flex; gap: 6px; align-items: stretch; margin-top: 5px; }
.beleg-rabatt input, .beleg-rabatt select { margin: 0 !important; }
.beleg-rabatt input { flex: 1; min-width: 0; }
.beleg-rabatt select { width: 64px; flex: none; }
[hidden] { display: none !important; }

/* ---------- Antwort auf ein Angebot (angebot.php, Link aus der Angebotsmail) ---------- */
.schlicht-rahmen:has(.angebot-positionen) { max-width: 640px; }
.schlicht .karte + .karte { margin-top: 14px; }
.angebot-positionen { margin: 6px 0 10px; }
.angebot-frage { font-size: 16px; margin: 0 0 12px; }
.angebot-wahl { border: 0; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 8px; }
.angebot-option { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--linie); border-radius: 3px; cursor: pointer; }
.angebot-option input { margin-top: 3px; }
.angebot-option:has(input:checked) { border-color: var(--blau); background: var(--blau-hell); }
.angebot-angenommen:has(input:checked) { border-color: var(--gruen); background: var(--gruen-hell); }
.angebot-abgelehnt:has(input:checked) { border-color: var(--rot); background: var(--rot-hell); }
.angebot-hinweis { margin-top: 12px; }
.stand-angenommen { color: var(--gruen); }
.stand-abgelehnt { color: var(--rot); }
.stand-abgelaufen { color: var(--gelb); }
.stand-wartet { color: var(--text-2); }
.angebot-antwort { border-left: 3px solid var(--linie); padding: 4px 0 4px 10px; margin: 0 0 10px; }
.angebot-antwort-angenommen { border-color: var(--gruen); }
.angebot-antwort-abgelehnt { border-color: var(--rot); }
.angebot-antwort-rueckfrage { border-color: var(--blau); }
.angebot-antwort-text { white-space: pre-wrap; margin-top: 4px; }

/* Zeit-Dialog: Angebot/Rechnung mitschicken; wartende Antwort im Ticket */
.zeit-beleg-hinweis { display: block; margin-top: 6px; font-size: 12px; color: var(--blau-dunkel); }
.wartende-antwort { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.wartende-antwort span { flex: 1 1 260px; }

/* Entwurf: Textbausteine über Einleitung/Schluss */
.text-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.text-auswahl { border: 1px solid var(--linie); border-radius: 3px; padding: 4px 8px; font: inherit; font-size: 12px; color: var(--text); background: var(--flaeche); max-width: 100%; }

/* Ticket: Rechnung aus Angebot */
.beleg-aus-angebot { margin: -2px 0 6px; }
.badge-zahlung { background: var(--gelb-hell); color: var(--gelb); box-shadow: inset 0 0 0 1px var(--gelb-linie, #E5C77A); }

/* Liste "Angebote & Rechnungen": Zahlstand per Auswahl */
.stand-form { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.stand-auswahl { border: 1px solid var(--linie); border-radius: 3px; padding: 3px 6px; font: inherit; font-size: 12px; font-weight: 500; background: var(--flaeche); }
.stand-teil { display: inline-flex; gap: 6px; align-items: center; }
.stand-teil[hidden] { display: none; }
.stand-teil input { width: 90px; border: 1px solid var(--linie); border-radius: 3px; padding: 3px 6px; font-size: 12px; }