/* ═══════════════════════════════════════════════════════════════
   Toloro Desktop — Layout: Shell, Header, Sidebar, Responsive
   ═══════════════════════════════════════════════════════════════ */

/* ── Shell ───────────────────────────────────────────────────── */
.app2-shell {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

.app2-content {
    flex: 1;
    padding: 16px 16px calc(var(--safe-bottom) + 16px);
    max-width: var(--content-max);
    margin: 0 auto;
    width: 100%;
}

/* Sprungziele landen UNTER der Kopfzeile, nicht dahinter (QA zu
   toloro#3463): Anker-Sprünge (`#id`), `scrollIntoView` und das Weiterspringen
   mit der Tab-Taste rechnen die Kopfzeile als belegten Streifen heraus.
   Vorher lag ein Sprungziel genau um die Kopfhöhe verdeckt (56 px,
   zweizeilig 96 px). Die Höhe misst desktop.js — nur wo es eine
   `.app2-header` gibt; sonst gilt 0, andere Rahmen bleiben unberührt. */
html {
    scroll-padding-top: var(--kopfzeile-hoehe, 0px);
}

/* ── Header ──────────────────────────────────────────────────── */
.app2-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
    padding: 0 16px;
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.app2-header-title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Der feste Zurück-Knopf (toloro#2801): erstes Bedienelement der
   Kopfzeile — im Hauptlayout wie im Projektfenster dieselbe Regel, damit
   er auf jeder Seite gleich aussieht und an derselben Stelle sitzt. Wohin
   er führt, entscheidet zurueck-spur.js; ohne Ziel bleibt er stehen und
   wird grau (kein Sprung im Layout). Den Tastatur-Fokus zeichnet der
   zentrale Ring in components.css (`button:focus-visible`). */
/* Der Schreibtisch-Knopf der Schnellleiste (toloro#2822) teilt sich die
   Gestalt mit dem Zurück-Knopf: gleiche Pille, gleiche Höhe, gleiches
   Wort-daneben-Verhalten. Zwei getrennte Regelblöcke wären zwei Wahrheiten
   über EINE Kopfzeile — sie liefen beim nächsten Anfassen auseinander, und
   die beiden Knöpfe stünden nebeneinander in verschiedenen Größen. */
.app2-schnellknopf,
.app2-zurueck {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    min-height: 36px;
    padding: 6px 14px 6px 10px;
    border: 1.5px solid var(--border-active);
    border-radius: var(--radius-full);
    background: var(--bg);
    color: var(--text);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    -webkit-tap-highlight-color: transparent;
}

/* Als <a> bringt der Schnellknopf eine Unterstreichung mit, die der Knopf
   nicht hat — sie ist das Einzige, was ihn von der Pille unterscheiden
   würde. */
.app2-schnellknopf {
    text-decoration: none;
}

.app2-schnellknopf svg,
.app2-zurueck svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    flex-shrink: 0;
}

.app2-schnellknopf:hover,
.app2-zurueck:hover:not(:disabled) {
    border-color: var(--primary);
    background: var(--primary-soft);
}

/* Ohne Ziel: sichtbar, aber erkennbar außer Betrieb. Die Schrift bleibt
   beim lesbaren Sekundärton (4,5:1, #1805) — gedämpft wird über Rahmen,
   Schatten und Zeiger, nicht über einen helleren Text. */
.app2-zurueck:disabled {
    color: var(--text-secondary);
    border-color: var(--border);
    background: var(--bg-subtle);
    box-shadow: none;
    cursor: default;
}

/* Bis 1100 px bleibt der Pfeil allein (das Wort trägt aria-label). Die
   Grenze ist dieselbe, ab der die Kopfzeile umbrechen darf (components.css,
   Mitteilungsband): Gemessen bei 1024 px schob der Knopf MIT Wort bei einem
   langen Seitentitel die Knöpfe rechts in eine zweite und das Band in eine
   dritte Reihe — 137 statt 89 px Kopf über einem Inhalt, der nur 80 px
   freihält. Als Pfeil kostet er 39 statt 101 px, und die Reihe passt. */
@media (max-width: 1100px) {
    .app2-schnellknopf,
    .app2-zurueck {
        padding: 6px 9px;
    }

    .app2-schnellknopf-wort,
    .app2-zurueck-wort {
        display: none;
    }
}

/* Im Projektfenster steht rechts vom Knopf mehr als ein Titel: Nummer,
   Objektadresse, Status- und Herkunftsabzeichen. Bis 1280 px bleibt deshalb
   auch dort der Pfeil allein — PC-first heißt 1920, und dort steht das Wort. */
@media (max-width: 1280px) {
    .pf-shell .app2-schnellknopf,
    .pf-shell .app2-zurueck {
        padding: 6px 9px;
    }

    .pf-shell .app2-schnellknopf-wort,
    .pf-shell .app2-zurueck-wort {
        display: none;
    }
}

.app2-header-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: var(--primary-soft);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--text-sm);
    flex-shrink: 0;
    overflow: hidden;
}

.app2-header-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Wählhelfer & Anruf-Monitor (#1011) ───────────────────────
   Beide Flächen hängen an `x-show`, und beide brauchten ihr
   `display: flex` deshalb hier im Blatt statt im style-Attribut:
   Alpine blendet über genau diese Eigenschaft ein und aus und ruft
   beim Einblenden `style.removeProperty('display')` — was dort an
   `display` stand, ist danach weg (#948/#953). */

/* Der Stapel eingehender Anrufe, fixiert oben rechts unterm Header
   (der Header ist durch seinen backdrop-filter der Containing Block —
   `top` rechnet ab Header-Kante). Neuester Anruf oben, der Stapel
   scrollt in sich, damit er nie über den unteren Bildschirmrand
   hinauswächst.

   Ohne die Klasse fiel der Stapel nach dem ersten Anruf auf
   `display: block` zurück: die Karten standen ohne die 10px Abstand
   direkt aufeinander, und `flex-direction: column` (heute die
   Vorgabe-Richtung, morgen vielleicht nicht) war ebenfalls weg. */
.anrufmonitor-stapel {
    position: fixed;
    right: 10px;
    top: calc(var(--kopfzeile-hoehe, var(--header-height)) + 6px);
    z-index: 1101;
    width: 352px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    /* 6px Innenabstand bei 12px Mehrbreite: der Clip-Kasten von
       overflow-y würde den Schlagschatten der Karten sonst abschneiden.
       Die Karten stehen dadurch trotzdem 16px vom Fensterrand. */
    padding: 6px;
    max-height: calc(100vh - var(--kopfzeile-hoehe, var(--header-height)) - 18px);
}

/* Der Wählhelfer im Kopf (toloro#4565): Halter, Fläche und Bausteine des
   Popups als Klassen und mit Tokens — vorher stand alles im style-Attribut
   mit Rückfall-Hex. Die Fläche klappt wie die Status-Wahl daneben
   (`.praesenz-wahl`) unter ihrem Knopf auf; `display` steht hier bewusst
   nicht, das gehört x-show (#948). */
.waehlhelfer-halter {
    position: relative;
}

.waehlhelfer-flaeche {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    z-index: 1100;
    width: 300px;
    max-width: calc(100vw - 32px);
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

/* Die Fläche nimmt den Fokus nur per Klick (tabindex="-1"), damit Escape
   den Halter erreicht — ein Ring um das ganze Popup wäre Lärm; die Felder
   darin zeigen ihren eigenen. */
.waehlhelfer-flaeche:focus {
    outline: none;
}

.waehlhelfer-titel {
    font-weight: 700;
    margin-bottom: 10px;
}

.waehlhelfer-flaeche .waehlhelfer-feld {
    /* Zwei Klassen: schlägt `.form-input` (48 px) unabhängig von der
       Reihenfolge der Blätter — das Popup ist schmal und dicht. */
    min-height: 40px;
    padding: 8px 12px;
    margin-bottom: 10px;
}

.waehlhelfer-marke {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-bottom: 4px;
}

.waehlhelfer-zeile {
    margin-bottom: 10px;
}

.waehlhelfer-leise {
    color: var(--text-muted);
}

.waehlhelfer-ziel {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.waehlhelfer-knoepfe {
    display: flex;
    gap: 8px;
}

.waehlhelfer-knoepfe .btn {
    flex: 1;
    min-height: 40px;
}

.waehlhelfer-meldung {
    margin-top: 8px;
}

.waehlhelfer-meldung--ok {
    color: var(--success-text);
}

.waehlhelfer-meldung--fehler {
    color: var(--danger-text);
}

.waehlhelfer-fuss {
    margin-top: 8px;
}

/* Die Wahl „Nebenstelle oder Handy?“ im Wähl-Popup: zwei gleich breite
   Felder nebeneinander. Ohne Klasse standen sie schon beim ERSTEN Öffnen
   untereinander und ohne Abstand: `canRingExt && canRingMobile` ist beim
   Seitenaufbau noch falsch und kippt erst, wenn der PBX-Status da ist —
   genau bei diesem Einblenden räumt Alpine das `display` weg, lange bevor
   jemand das Popup aufklappt. */
.waehlhelfer-zielwahl {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

/* Der Wählhelfer-Knopf selbst (#1173): 36px rund wie Avatar und
   Agent-Knopf, orange (CI-Akzent), Hörer in Weiß. Als Klasse und NICHT
   im style-Attribut, weil am Knopf eine :class-/:style-Logik für den
   Grau-Zustand hängt — eine String-:style-Bindung ersetzt in Alpine das
   komplette style-Attribut und ließ den Knopf als nacktes Viereck stehen. */
.waehlhelfer-knopf {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: var(--accent, #E87A2A);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* Bezug für das Abzeichen des laufenden Wählauftrags (toloro#3696). */
    position: relative;
}

/* Aus, aber sichtbar (#1088): keine Absender-Leitung — der Knopf wird
   grau und erklärt sich beim Antippen, statt wortlos zu verschwinden. */
.waehlhelfer-knopf--aus {
    background: var(--text-muted, #6b7280);
}

/* Ein Wählauftrag läuft (toloro#3696): ein kleiner Punkt am Kopfknopf —
   dazu sagen Hinweis und aria-label den Zustand, die Farbe allein nie. */
.waehlhelfer-knopf-abzeichen {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--success);
    border: 2px solid var(--surface);
}

/* Die Quittung im Wählhelfer: Symbol und Wort vorn, der Satz darunter. */
.waehlhelfer-quittung {
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg);
}

.waehlhelfer-quittung-wort {
    display: flex;
    gap: 6px;
    align-items: baseline;
    font-weight: 600;
}

.waehlhelfer-quittung[data-symbol="ok"] .waehlhelfer-quittung-symbol {
    color: var(--success-text);
}

.waehlhelfer-quittung[data-symbol="fehler"] .waehlhelfer-quittung-symbol {
    color: var(--danger-text);
}

.waehlhelfer-quittung[data-symbol="uhr"] .waehlhelfer-quittung-symbol {
    color: var(--warning-text);
}

.waehlhelfer-quittung-hinweis {
    margin-top: 4px;
    color: var(--text-muted);
}


/* ── Sidebar (Navy, wie App-Branding) ────────────────────────── */
.app2-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    z-index: 300;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.app2-sidebar::-webkit-scrollbar { width: 6px; }
.app2-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 3px;
}
.app2-sidebar::-webkit-scrollbar-track { background: transparent; }

.app2-sidebar.open {
    transform: translateX(0);
}

/* Brand-Block: Wortmarke + eingeloggter User */
.app2-sidebar-brand {
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--sidebar-border);
    flex-shrink: 0;
}

.brand-wordmark {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    text-decoration: none;
    display: inline-block;
    line-height: 1.2;
}

.brand-wordmark:hover { color: #FFFFFF; }

.brand-wordmark .brand-accent {
    color: var(--accent);
    font-style: normal;
}

.app2-sidebar-user {
    margin-top: 2px;
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Sidebar-Suche ───────────────────────────────────────────── */
/*  Sitzt zwischen Brand und Nav-Items und scrollt bewusst NICHT mit:
    bei ~45 Menüeinträgen wäre ein Suchfeld, das man erst hochscrollen
    muss, nur eine weitere Station auf dem Weg. */
.app2-sidebar-suche {
    position: relative;
    padding: 10px 14px 2px;
    flex-shrink: 0;
}

.nav-suche-feld {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 8px 0 10px;
    height: 34px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: border-color 0.15s, background 0.15s;
}

.nav-suche-feld:focus-within {
    background: rgba(255, 255, 255, 0.13);
    border-color: var(--accent);
}

.nav-suche-lupe {
    width: 16px;
    height: 16px;
    fill: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
}

.nav-suche-input {
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    outline: none;
    color: var(--sidebar-text-active);
    font: inherit;
    font-size: var(--text-sm);
    padding: 0;
}

.nav-suche-input::placeholder { color: rgba(255, 255, 255, 0.42); }
.nav-suche-input::-webkit-search-cancel-button { filter: invert(1) opacity(0.5); }

.nav-suche-kbd {
    flex-shrink: 0;
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 4px;
    padding: 2px 5px;
    white-space: nowrap;
}

/*  Trefferliste legt sich über den Inhalt statt das Menü zu schieben —
    sonst wandert unter dem Tippen der Eintrag weg, den man gerade
    anklicken wollte. */
.nav-suche-treffer {
    position: absolute;
    left: 14px;
    right: 14px;
    top: calc(100% - 2px);
    z-index: 320;
    max-height: 60vh;
    overflow-y: auto;
    background: var(--surface);
    color: var(--text);
    border-radius: var(--radius);
    box-shadow: 0 12px 32px rgba(13, 29, 47, 0.35);
    padding: 4px 0 6px;
}

.nav-suche-gruppe {
    padding: 8px 12px 3px;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.app2-sidebar .nav-suche-zeile {
    display: block;
    margin: 0;
    padding: 6px 12px;
    border-radius: 0;
    color: var(--text);
    text-decoration: none;
    font-size: var(--text-sm);
    line-height: 1.3;
}

.app2-sidebar .nav-suche-zeile.markiert,
.app2-sidebar .nav-suche-zeile:hover {
    background: var(--bg-muted);
    color: var(--text);
}

.app2-sidebar .nav-suche-zeile.markiert::before { content: none; }

.nav-suche-titel {
    display: block;
    font-weight: 600;
}

.nav-suche-zusatz {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: 1.35;
}

/* Zustand eines Leads vorn in der Zusatzzeile (toloro#4665). */
.nav-suche-zusatz .badge {
    margin-right: 6px;
    vertical-align: 1px;
}

.nav-suche-leer {
    padding: 10px 12px;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* ── Nav-Items ───────────────────────────────────────────────── */
.app2-sidebar-items {
    flex: 1;
    padding: 10px 0 12px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.app2-sidebar-items::-webkit-scrollbar { width: 6px; }
.app2-sidebar-items::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 3px;
}

.app2-sidebar-items a,
.app2-sidebar-footer a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 1px 10px;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--sidebar-text);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.app2-sidebar-items a svg,
.app2-sidebar-footer a svg {
    width: 19px;
    height: 19px;
    fill: currentColor;
    flex-shrink: 0;
    opacity: 0.85;
}

.app2-sidebar-items a:hover:not(.active),
.app2-sidebar-footer a:hover:not(.active) {
    background: var(--sidebar-hover);
    color: var(--sidebar-text-active);
}

.app2-sidebar-items a.active,
.app2-sidebar-footer a.active {
    background: var(--sidebar-active);
    color: var(--sidebar-text-active);
    font-weight: 600;
}

.app2-sidebar-items a.active svg,
.app2-sidebar-footer a.active svg {
    opacity: 1;
}

/* Orange Marker links am aktiven Eintrag */
.app2-sidebar-items a.active::before,
.app2-sidebar-footer a.active::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--accent);
}

/* Der eine hervorgehobene Menüpunkt: „Neues Projekt" direkt unter „Start"
   (toloro#3415, Christian 26.09.2026: „der wesentlichste Link des ganzen
   Systems"). Leicht, nicht laut: Plus-Zeichen in Akzentfarbe, Beschriftung
   eine Stufe heller und fetter als die Nachbarn, dazu ein dünner
   Rahmen in der Trennlinienfarbe der Seitenleiste. Keine Füllfläche — die gehört dem aktiven Eintrag, und
   zwei Flächen untereinander sähen wie zwei aktive Seiten aus. Nur Tokens
   aus tokens.css, keine neue Farbe. */
.app2-sidebar-items a.nav-hervorgehoben {
    color: var(--sidebar-text-active);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px var(--sidebar-border);
}

.app2-sidebar-items a.nav-hervorgehoben svg {
    color: var(--accent);
    opacity: 1;
}

/* Abzeichen am Menüpunkt: die rote Marke mit der Zahl offener Vorgänge
   („Mein Schreibtisch"). `margin-left:auto` schiebt sie ans rechte Ende
   der Zeile — der Menüpunkt ist ein Flex-Container, ein `float` hätte
   dort nichts zu suchen.

   Rot und nicht Akzent-Orange: Das hier ist keine Auszeichnung, sondern
   ein Rückstand. Die Marke steht nur, wenn die Zahl größer als 0 ist
   (siehe desktop-nav.html) — ein Punkt, der immer leuchtet, wird nach
   drei Tagen übersehen. */
.app2-sidebar-items a .nav-abzeichen,
.app2-sidebar-items a.nav-abzeichen {
    margin-left: auto;
    flex-shrink: 0;
    min-width: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--danger);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    /* Ziffern bleiben auf gleicher Breite: sonst wackelt die Marke beim
       Wechsel von 1 auf 7. */
    font-variant-numeric: tabular-nums;
}

/* Die gelbe Schwester der Marke (toloro#2056): „läuft heute ab" statt
   „ist verstrichen". Nur die Farbe unterscheidet sich — Form und Größe
   bleiben, weil zwei verschieden große Ziffern nebeneinander wie zwei
   verschiedene Dinge aussähen.

   Dunkle Schrift auf dem Warn-Orange: Weiß darauf liegt bei rund 2:1 und
   wäre in einer 11px-Ziffer nicht mehr zu lesen (dieselbe Entscheidung wie
   am Impersonation-Banner). */
.app2-sidebar-items a .nav-abzeichen-warnung {
    background: var(--warning);
    color: #000000;
}

/* Stehen zwei Marken an einer Zeile, schiebt nur die ERSTE nach rechts —
   ein zweites `margin-left:auto` verteilte sie über die ganze Zeile, statt
   sie als Paar zu zeigen. */
.app2-sidebar-items a .nav-abzeichen + .nav-abzeichen {
    margin-left: 4px;
}

/* Eine Marke, die selbst ein Link ist (toloro#2378, gebaut für „Meine
   Projekte"; heute trägt sie nur „Buchungen" — die Abzeichen von „Meine
   Projekte" sind seit toloro#4245 schlichte Spans im Menüpunkt, wie bei
   „Meine Leads"): Sie kann auf eine gefilterte Sicht führen, der Menüpunkt
   darunter auf die volle Liste. Zwei <a> ineinander gibt es in HTML nicht — also liegen sie
   als Geschwister in `.nav-mit-marke`, und die Marke wird über den
   Menüpunkt gelegt. Der Menüpunkt bleibt damit die ganze Zeile: Die aktive
   Fläche und der orange Marker links sitzen unverändert an ihm. */
.app2-sidebar-items .nav-mit-marke {
    position: relative;
}

/* Platz für die Marke, damit die Beschriftung nicht darunter läuft — nur
   dort, wo wirklich eine steht (die Vorlage setzt die Klasse mit). */
.app2-sidebar-items .nav-mit-marke--belegt > a {
    padding-right: 40px;
}

.app2-sidebar-items a.nav-abzeichen {
    position: absolute;
    /* 10px Rand + 12px Polsterung des Menüpunkts — die Marke steht damit
       genau dort, wo sie als <span> im Menüpunkt stand. */
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    margin: 0;
    padding: 0 6px;
}

/* Die Marke ist kein Menüpunkt: Das Hover-Grau der Zeile hätte hier nichts
   zu suchen, es färbte die rote Marke grau. Sie hellt stattdessen auf. */
.app2-sidebar-items a.nav-abzeichen:hover {
    background: var(--danger);
    color: #FFFFFF;
    filter: brightness(1.15);
}

/* ── Nav-Gruppen (einklappbar via <details>) ─────────────────── */
.nav-group {
    margin-top: 10px;
}

.nav-group > summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 22px 6px 22px;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--sidebar-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.nav-group > summary::-webkit-details-marker { display: none; }

.nav-group > summary:hover { color: rgba(255, 255, 255, 0.65); }

.nav-group > summary .nav-group-chevron {
    width: 14px;
    height: 14px;
    fill: currentColor;
    flex-shrink: 0;
    transition: transform 0.2s ease;
    transform: rotate(-90deg);
}

.nav-group[open] > summary .nav-group-chevron {
    transform: rotate(0deg);
}

/* ── Status-Pille (toloro#3775, geschlossen nur Farbe toloro#3792) ─
   Oben rechts im Kopf, ganz innen vor Schreibtisch, Postit und Assistent:
   „● ▾". Bis toloro#3775 stand der Status als Menüzeile „Ich bin:" in
   „Tagesgeschäft". Die Pille hat die Form des Schreibtisch-Knopfs daneben
   (.app2-schnellknopf), damit die Kopfzeile eine Sprache spricht. Der
   Punkt trägt die Wirkfarbe des Türschilds: leerer Ring = Frei, sonst
   gefüllt — blau (Telefoniert, --info), rot (Nicht stören, --danger),
   gelb (Außer Haus, --warning), ein eigener Status in seiner Palettenfarbe
   (Statusfarbe, als style am Punkt) mit seinem Zeichen darin. Geschlossen
   steht seit toloro#3792 kein Wort mehr daneben — es steht in title und
   aria-label; aufgeklappt hat jede Zeile Farbe UND Wort. */
.praesenz-halter {
    position: relative;
    flex-shrink: 0;
}

.praesenz-pille {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 6px 10px 6px 12px;
    border: 1.5px solid var(--border-active);
    border-radius: var(--radius-full);
    background: var(--bg);
    color: var(--text);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    -webkit-tap-highlight-color: transparent;
}

.praesenz-pille:hover,
.praesenz-halter.ist-offen .praesenz-pille {
    border-color: var(--primary);
    background: var(--primary-soft);
}

.praesenz-pille-pfeil {
    width: 16px;
    height: 16px;
    fill: currentColor;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.praesenz-halter.ist-offen .praesenz-pille-pfeil {
    transform: rotate(180deg);
}

.praesenz-punkt {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--text-secondary);
    box-sizing: border-box;
    flex-shrink: 0;
}

.praesenz-punkt--keine { background: transparent; }
.praesenz-punkt--blau { background: var(--info); border-color: var(--info); }
.praesenz-punkt--rot { background: var(--danger); border-color: var(--danger); }
.praesenz-punkt--gelb { background: var(--warning); border-color: var(--warning); }

/* Eigener Status (toloro#3792): Fläche, Rand und Zeichenfarbe kommen als
   style aus der festen Palette. Mit Zeichen wird der Punkt groß genug für
   das Zeichen darin. „Eigener Status …" trägt einen gestrichelten Ring —
   ein Platz, den man selbst füllt. */
.praesenz-punkt--eigen {
    /* Fläche und Rand setzt der style aus der Palette; ohne ihn (kaputter
       Wert) bleibt wenigstens ein grauer Punkt statt eines leeren Rings. */
    background: var(--text-secondary);
}

.praesenz-punkt--zeichen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.praesenz-punkt--plus {
    background: transparent;
    border-style: dashed;
}

.praesenz-zeichen {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

/* Die Wahl hängt unter der Pille, rechtsbündig wie Postit und Wählhelfer
   an ihren Knöpfen. Das `display` steht hier und nicht im style-Attribut —
   Alpine löscht es dort beim Einblenden (#948/#1011). */
.praesenz-wahl {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 220px;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

.praesenz-wahl form {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.praesenz-wahl-knopf {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: var(--text-sm);
    text-align: left;
    cursor: pointer;
}

.praesenz-wahl-knopf:hover {
    background: var(--primary-soft);
}

.praesenz-wahl-knopf.gewaehlt {
    font-weight: 700;
}

/* Die Zeile des zuletzt benutzten eigenen Status steht unter den drei
   festen — ein feiner Strich trennt „was es immer gibt" von „was ich mir
   gemacht habe". Seit toloro#3804 stehen in der Zeile zwei Knöpfe
   nebeneinander: die Wahl und das Kreuz zum Entfernen; der Strich gehört
   deshalb an die Zeile, nicht an den Wahlknopf. */
.praesenz-eigen-zeile {
    display: flex;
    align-items: stretch;
    gap: 2px;
    margin-top: 2px;
    border-top: 1px dashed var(--border);
}

.praesenz-wahl-eigen {
    flex: 1;
    min-width: 0;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

/* Das Kreuz entfernt den gespeicherten eigenen Status (toloro#3804) — leise
   im Sekundärton, erst beim Zeigen rot; quadratisch, damit es als eigener
   Knopf neben der Zeile erkennbar ist. Den Fokusring bringt die zentrale
   Regel `button:focus-visible` (components.css). */
.praesenz-eigen-entfernen {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: var(--text-base);
    line-height: 1;
    cursor: pointer;
}

.praesenz-eigen-entfernen:hover {
    background: var(--danger-soft);
    color: var(--danger-text);
}

/* „Eigener Status …" öffnet ein Formular, wählt aber nichts — im
   Sekundärton, damit es nicht wie eine vierte Wahl aussieht. */
.praesenz-eigen-oeffner {
    color: var(--text-secondary);
}

/* Der Text eines eigenen Status kann bis 24 Zeichen lang sein — er bricht
   nicht um, er wird gekürzt (der volle Text steht am Schild). */
.praesenz-wahl-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* „Eigener Status …" klappt unter der Wahl ein kleines Formular auf
   (toloro#3792): Text, Zeichen, Farbe, Telefon. */
.praesenz-eigen {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 272px;
    padding: 8px 12px 10px;
    border-top: 1px solid var(--border);
}

.praesenz-eigen-gruppe {
    margin: 0;
    padding: 0;
    border: 0;
}

.praesenz-eigen-feld {
    display: block;
    margin-bottom: 4px;
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: 600;
}

.praesenz-eigen-zeichen {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
}

.praesenz-eigen-farben {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Die Auswahlknöpfe sind echte Radios — unsichtbar, aber fokussierbar; die
   Fläche daneben zeigt Wahl und Fokus (Ring, nie nur Farbe). */
.praesenz-zeichen-wahl,
.praesenz-farbe-wahl {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}

.praesenz-zeichen-wahl input,
.praesenz-farbe-wahl input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.praesenz-zeichen-flaeche {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 32px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
}

.praesenz-zeichen-flaeche .praesenz-zeichen {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.praesenz-zeichen-flaeche--leer {
    color: var(--text-secondary);
}

.praesenz-farbe-klecks {
    display: inline-block;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid var(--surface);
    box-shadow: 0 0 0 1px var(--border);
}

.praesenz-zeichen-wahl input:checked + .praesenz-zeichen-flaeche {
    border-color: var(--primary);
    background: var(--primary-soft);
}

.praesenz-farbe-wahl input:checked + .praesenz-farbe-klecks {
    box-shadow: 0 0 0 2px var(--primary);
}

.praesenz-zeichen-wahl input:focus-visible + .praesenz-zeichen-flaeche,
.praesenz-farbe-wahl input:focus-visible + .praesenz-farbe-klecks {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.praesenz-eigen-telefon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 14px;
    font-size: var(--text-sm);
}

.praesenz-eigen-hinweis {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-xs);
    line-height: 1.4;
}

/* „Telefoniert" ist keine Wahl — ein Hinweis unter dem Strich, im lesbaren
   Sekundärton (4,5:1, #1805). */
.praesenz-wahl-hinweis {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    padding: 9px 12px 4px;
    border-top: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    line-height: 1.4;
}

/* Bis 1100 px wird die Pille noch etwas schmaler (dieselbe Grenze wie beim
   Schreibtisch-Knopf); das Wort steht seit toloro#3792 ohnehin nur noch im
   title. */
@media (max-width: 1100px) {
    .praesenz-pille {
        padding: 6px 9px;
    }
}

/* Fallback für alte Templates, die noch den Divider nutzen */
.app2-sidebar-divider {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--sidebar-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 16px 22px 6px;
}

/* ── Sidebar Footer ──────────────────────────────────────────── */
.app2-sidebar-footer {
    border-top: 1px solid var(--sidebar-border);
    padding: 8px 0;
    flex-shrink: 0;
}

.app2-sidebar-version {
    color: rgba(255, 255, 255, 0.45);
}

.app2-sidebar-version a { color: inherit; }

/* ── Sidebar Overlay (mobile) ──────────────────────────────── */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(13, 29, 47, 0.5);
    z-index: 250;
}

/* ── Hamburger Button ──────────────────────────────────────── */
.app2-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    margin: -8px;
    color: var(--text);
    -webkit-tap-highlight-color: transparent;
}

.app2-hamburger svg {
    width: 24px;
    height: 24px;
}

/* ── Responsive: Tablet ──────────────────────────────────────── */
@media (min-width: 768px) {
    :root {
        --content-max: 720px;
    }

    .app2-header {
        padding: 0 24px;
    }

    .app2-content {
        padding: 24px 24px calc(var(--safe-bottom) + 24px);
    }
}

/* ── Responsive: Desktop ────────────────────────────────────── */
@media (min-width: 1024px) {
    /* Sidebar immer sichtbar */
    .app2-sidebar {
        transform: translateX(0);
    }

    /* Overlay nie sichtbar auf Desktop */
    .sidebar-overlay {
        display: none !important;
    }

    /* Hamburger verstecken */
    .app2-hamburger {
        display: none;
    }

    .app2-header {
        padding: 0 32px;
    }

    /* Header rechts neben Sidebar — IM FLUSS der Seite (toloro#3463).
       Bis 27.09.2026 stand er hier `position: fixed`, und der Inhalt hielt
       ihm mit `padding-top: calc(var(--header-height) + 24px)` Platz frei:
       genau 56 px, egal wie hoch der Kopf wirklich war. Unter 1100 px bricht
       er mit dem Mitteilungsband zweizeilig um (components.css) und wird gut
       40 px höher — die Oberkante jeder Seite lag dann darunter. `sticky`
       klebt beim Scrollen genauso oben, nimmt aber seine WIRKLICHE Höhe im
       Fluss ein; der Inhalt rückt von selbst nach, ohne Zahl und ohne
       Skript. Unter 1024 px war das schon immer so (Grundregel oben).
       Nur im Hauptlayout (`.app2-shell >`): Das Projektfenster setzt seinen
       Kopf selbst (`.pf-shell .app2-header`, projektfenster-layout.html). */
    .app2-shell > .app2-header {
        margin-left: var(--sidebar-width);
    }

    /* Content rechts neben Sidebar */
    .app2-content {
        margin-left: var(--sidebar-width);
        margin-right: 0;
        padding: 24px 32px 48px;
        max-width: none;
        width: auto;
    }
}

/* ── Responsive: Ultra Wide ─────────────────────────────────── */
@media (min-width: 1536px) {
    :root {
        --content-max: 1280px;
        --sidebar-width: 280px;
    }
}

/* ── PWA Standalone Mode ────────────────────────────────────── */
@media (display-mode: standalone) {
    .login-page {
        padding-top: env(safe-area-inset-top, 24px);
    }

    .app2-header {
        padding-top: env(safe-area-inset-top, 0);
        height: calc(var(--header-height) + env(safe-area-inset-top, 0));
    }
}

/* ── Print ───────────────────────────────────────────────────── */
@media print {
    .app2-header,
    .app2-sidebar,
    .sidebar-overlay {
        display: none !important;
    }

    .app2-content {
        margin: 0;
        padding: 0;
        max-width: 100%;
    }
}