/*
  Thandavio · Gestaltung der User-UI
  Grundlage: Thandavio/tokens.json und Thandavio/README.md.
  Vier Markenfarben, sonst keine. Kantig wie das Zeichen, schräge Anschnitte als einziges Formmotiv.
  Alpine Teal nur als Akzent für aktive Zustände und die Hauptaktion, nie als Fläche oder Verlauf.
*/

@font-face {
    font-family: "Satoshi";
    src: url("fonts/Satoshi-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Satoshi";
    src: url("fonts/Satoshi-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Satoshi";
    src: url("fonts/Satoshi-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Markenfarben */
    --deep-navy: #0A1622;
    --alpine-teal: #2BB3B0;
    --stone-gray: #8A97A3;
    --glacier-white: #F5F7F8;

    /* Rollen im Thema Navy (dunkel, Hauptauftritt) */
    --surface: var(--deep-navy);
    --ink: var(--glacier-white);
    --muted: var(--stone-gray);
    --accent: var(--alpine-teal);
    --accent-text: var(--alpine-teal);
    --on-accent: var(--deep-navy);
    --line: var(--stone-gray);

    /* Abstufungen aus den Markenfarben, keine neuen Farben */
    --line-soft: color-mix(in srgb, var(--stone-gray) 26%, transparent);
    --line-faint: color-mix(in srgb, var(--stone-gray) 14%, transparent);
    --panel: color-mix(in srgb, var(--glacier-white) 3%, var(--deep-navy));
    --panel-raised: color-mix(in srgb, var(--glacier-white) 6%, var(--deep-navy));
    --edge-light: color-mix(in srgb, var(--glacier-white) 55%, transparent);

    /* Schrift */
    --font: "Satoshi", "Helvetica Neue", Arial, sans-serif;

    /* Abstände */
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 32px;
    --space-4: 64px;

    /* Form */
    --radius-none: 0px;
    --radius-sm: 2px;
    --cut: 10px;

    color-scheme: dark;
}

/*
  Thema Glacier (hell): Glacier White als Grund, Deep Navy für Schrift und Logo.
  Stone Gray und Alpine Teal sind auf Glacier White als Text zu schwach, deshalb gibt es dafür
  Abstufungen mit Deep Navy (Nebentext 6:1, Akzenttext 5.7:1). Als Linie und Fläche bleiben sie unverändert.
  Gilt, wenn der Benutzer «Hell» gewählt hat (data-theme="light"), und bei «System» (kein data-theme),
  wenn das Betriebssystem hell eingestellt ist. Beide Blöcke müssen gleich bleiben.
*/
:root[data-theme="light"] {
    --surface: var(--glacier-white);
    --ink: var(--deep-navy);
    --muted: color-mix(in srgb, var(--deep-navy) 45%, var(--stone-gray));
    --accent: var(--alpine-teal);
    --accent-text: color-mix(in srgb, var(--alpine-teal) 55%, var(--deep-navy));
    --on-accent: var(--deep-navy);
    --line: var(--stone-gray);
    --line-soft: color-mix(in srgb, var(--stone-gray) 55%, transparent);
    --line-faint: color-mix(in srgb, var(--stone-gray) 30%, transparent);
    --panel: color-mix(in srgb, var(--deep-navy) 3.5%, var(--glacier-white));
    --panel-raised: color-mix(in srgb, var(--deep-navy) 6%, var(--glacier-white));
    --edge-light: color-mix(in srgb, var(--deep-navy) 30%, transparent);

    color-scheme: light;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        --surface: var(--glacier-white);
        --ink: var(--deep-navy);
        --muted: color-mix(in srgb, var(--deep-navy) 45%, var(--stone-gray));
        --accent: var(--alpine-teal);
        --accent-text: color-mix(in srgb, var(--alpine-teal) 55%, var(--deep-navy));
        --on-accent: var(--deep-navy);
        --line: var(--stone-gray);
        --line-soft: color-mix(in srgb, var(--stone-gray) 55%, transparent);
        --line-faint: color-mix(in srgb, var(--stone-gray) 30%, transparent);
        --panel: color-mix(in srgb, var(--deep-navy) 3.5%, var(--glacier-white));
        --panel-raised: color-mix(in srgb, var(--deep-navy) 6%, var(--glacier-white));
        --edge-light: color-mix(in srgb, var(--deep-navy) 30%, transparent);

        color-scheme: light;
    }
}

/* Logo passend zum Thema: dunkle Variante im Thema Navy, helle im Thema Glacier. */
.brand-light {
    display: none !important;
}

:root[data-theme="light"] .brand-dark {
    display: none !important;
}

:root[data-theme="light"] .brand-light {
    display: block !important;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .brand-dark {
        display: none !important;
    }

    :root:not([data-theme]) .brand-light {
        display: block !important;
    }
}

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.55;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: var(--ink);
    text-decoration-color: var(--line);
    text-underline-offset: 4px;
}

a:hover {
    text-decoration-color: var(--accent);
}

:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: 3px;
}

h1, h2, h3 {
    font-weight: 400;
    margin: 0;
    text-wrap: balance;
}

p {
    margin: 0 0 var(--space-2);
}

code, kbd {
    font-family: var(--font);
    letter-spacing: 0.12em;
}

/* ---------- Schriftstile aus den Tokens ---------- */

.t-wortmarke {
    font-size: 40px;
    line-height: 1;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

.t-claim {
    font-size: 14px;
    line-height: 1.4;
    font-weight: 300;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--muted);
}

.t-label {
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

.t-titel {
    font-size: 32px;
    line-height: 1.15;
}

.t-text {
    font-size: 16px;
    line-height: 1.55;
}

.t-muted {
    color: var(--muted);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- Bedienelemente ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-height: 44px;
    padding: 0 22px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-none);
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 120ms ease, color 120ms ease, background-color 120ms ease;
}

.btn:hover:not(:disabled) {
    border-color: var(--line);
}

.btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Hauptaktion: schräg angeschnitten wie der Querbalken des Zeichens */
.btn-primary {
    border: 0;
    background: var(--accent);
    color: var(--on-accent);
    padding: 0 28px;
    clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
}

.btn-primary:hover:not(:disabled) {
    background: var(--ink);
    color: var(--surface);
}

.btn-quiet {
    border-color: transparent;
    padding: 0 12px;
    color: var(--muted);
}

.btn-quiet:hover:not(:disabled) {
    border-color: transparent;
    color: var(--ink);
}

.btn-block {
    width: 100%;
}

.btn.is-active {
    border-color: var(--accent);
    color: var(--accent-text);
}

.field {
    display: grid;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
}

.field > label,
.field > .field-label {
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

.input,
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"],
.field select,
.field textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-none);
    background: transparent;
    color: var(--ink);
    font: inherit;
}

.field textarea {
    resize: vertical;
    min-height: 88px;
}

.field select option {
    background: var(--surface);
}

.input:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.field.is-spaced {
    margin-top: var(--space-2);
}

.field .hint {
    font-size: 13px;
    color: var(--muted);
}

.check {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: var(--space-2);
    cursor: pointer;
    color: var(--ink);
}

.check input {
    appearance: none;
    width: 16px;
    height: 16px;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-none);
    background: transparent;
    display: grid;
    place-content: center;
    flex: none;
}

.check input::after {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--accent);
    clip-path: polygon(2px 0, 100% 0, calc(100% - 2px) 100%, 0 100%);
    transform: scale(0);
    transition: transform 100ms ease;
}

.check input:checked {
    border-color: var(--accent);
}

.check input:checked::after {
    transform: scale(1);
}

.segmented {
    display: flex;
    border: 1px solid var(--line-soft);
}

.segmented button {
    flex: 1 1 auto;
    min-height: 40px;
    padding: 0 12px;
    white-space: nowrap;
    border: 0;
    border-right: 1px solid var(--line-soft);
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.segmented button:last-child {
    border-right: 0;
}

.segmented button[aria-pressed="true"] {
    color: var(--ink);
    box-shadow: inset 0 -2px 0 var(--accent);
}

/* Reiter der Funktionen im Bereich eines Agenten: Bei vielen Funktionen oder schmaler Spalte gehen sie in weitere
   Zeilen, die Titel brechen um. Die Linien liegen übereinander, der Rahmen schneidet die äusseren ab. */
.area-tabs {
    flex-wrap: wrap;
    overflow: hidden;
}

.area-tabs button {
    flex: 1 1 128px;
    min-width: 0;
    margin: 0 -1px -1px 0;
    padding: 8px 10px;
    border-bottom: 1px solid var(--line-soft);
    white-space: normal;
    line-height: 1.3;
}

/* ---------- Meldungen ---------- */

.notice {
    display: grid;
    gap: 4px;
    padding: 12px 16px;
    margin-bottom: var(--space-2);
    border-left: 2px solid var(--line);
    background: var(--panel);
    color: var(--ink);
    font-size: 15px;
}

.notice-title {
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

.notice-detail {
    color: var(--muted);
    font-size: 14px;
    overflow-wrap: anywhere;
}

.notice.is-error {
    border-left-color: var(--ink);
}

.notice.is-ok {
    border-left-color: var(--accent);
}

.validation-message,
.validation-errors {
    color: var(--ink);
    font-size: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.validation-message::before {
    content: "▸ ";
    color: var(--muted);
}

/* ---------- Lichtkante: das Bildmotiv der Marke ---------- */

.edge {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.edge::before {
    content: "";
    position: absolute;
    width: 160vmax;
    height: 160vmax;
    left: 38%;
    top: -18vmax;
    border-radius: 50%;
    border-top: 1px solid var(--edge-light);
    border-left: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--ink) 25%, transparent),
        0 -24px 80px -40px color-mix(in srgb, var(--ink) 30%, transparent);
    background: color-mix(in srgb, var(--ink) 2%, var(--surface));
}

.edge.is-faint::before {
    opacity: 0.45;
    left: 52%;
    top: -40vmax;
}

/* ---------- Anmeldung ---------- */

.auth {
    position: relative;
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(360px, 520px);
    isolation: isolate;
}

.auth-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4);
    overflow: hidden;
}

.auth-brand-mark {
    position: relative;
}

.auth-brand-mark img {
    height: 44px;
    width: auto;
    display: block;
}

.auth-brand-statement {
    position: relative;
}

.auth-brand-statement p span {
    display: block;
}

.auth-brand-statement p {
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.12;
    margin: 0;
}

.auth-brand-statement .rule {
    width: 48px;
    height: 1px;
    background: var(--line);
    margin: var(--space-3) 0 var(--space-2);
}

.auth-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-4) var(--space-3);
    background: var(--panel);
    border-left: 1px solid var(--line-faint);
}

.auth-panel-inner {
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
}

.auth-panel h1 {
    font-size: 32px;
    line-height: 1.15;
    margin-bottom: var(--space-1);
}

.auth-panel .lead {
    color: var(--muted);
    margin-bottom: var(--space-3);
}

.auth-links {
    margin-top: var(--space-3);
    padding-top: var(--space-2);
    border-top: 1px solid var(--line-faint);
    font-size: 14px;
    color: var(--muted);
}

@media (max-width: 860px) {
    .auth {
        grid-template-columns: minmax(0, 1fr);
    }

    .auth-brand {
        min-height: 220px;
        padding: var(--space-3) var(--space-2);
    }

    .auth-brand-statement p {
        font-size: 26px;
    }

    .auth-panel {
        border-left: 0;
        border-top: 1px solid var(--line-faint);
        padding: var(--space-3) var(--space-2) var(--space-4);
    }
}

/* ---------- Rahmen der App ---------- */

.shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
}

.topbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    height: 64px;
    padding: 0 var(--space-3);
    border-bottom: 1px solid var(--line-faint);
    background: var(--surface);
    position: sticky;
    top: 0;
    z-index: 20;
}

.topbar-brand img {
    height: 26px;
    width: auto;
    display: block;
}

.topbar-nav {
    display: flex;
    gap: var(--space-2);
    flex: 1;
}

.topbar-nav a {
    position: relative;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
    padding: 22px 0;
}

.topbar-nav a.active {
    color: var(--ink);
}

.topbar-nav a.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--accent);
    clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--muted);
    font-size: 14px;
}

.topbar-user .name {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-user form {
    margin: 0;
}

.content {
    min-height: 0;
}

.page {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--space-4) var(--space-3);
}

@media (max-width: 720px) {
    .topbar {
        padding: 0 var(--space-2);
        gap: var(--space-2);
    }

    .topbar-user .name {
        display: none;
    }

    .topbar-brand img {
        height: 22px;
    }

    .topbar-nav {
        min-width: 0;
        overflow-x: auto;
    }

    .topbar-user .btn {
        padding: 0 6px;
        letter-spacing: 0.12em;
    }

    .page {
        padding: var(--space-3) var(--space-2);
    }
}

/* ---------- Kontoverwaltung ---------- */

.manage {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: var(--space-4);
}

.manage-nav {
    display: grid;
    align-content: start;
    gap: 2px;
}

.manage-nav a {
    display: block;
    padding: 10px 0 10px 14px;
    border-left: 1px solid var(--line-faint);
    color: var(--muted);
    text-decoration: none;
    font-size: 15px;
}

.manage-nav a.active {
    color: var(--ink);
    border-left: 2px solid var(--accent);
    padding-left: 13px;
}

.page-title {
    font-size: 32px;
    line-height: 1.15;
    margin-bottom: var(--space-3);
}

.manage h2 {
    font-size: 24px;
    line-height: 1.2;
    margin-bottom: var(--space-2);
}

.manage-body {
    max-width: 62ch;
}

.facts {
    display: grid;
    grid-template-columns: minmax(160px, auto) minmax(0, 1fr);
    margin: 0;
}

.facts dt,
.facts dd {
    margin: 0;
    padding: 14px 0;
    border-top: 1px solid var(--line-faint);
}

.facts dt {
    color: var(--muted);
}

.steps {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-3);
    counter-reset: step;
}

.steps > li {
    counter-increment: step;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-top: 1px solid var(--line-faint);
}

.steps > li::before {
    content: counter(step);
    color: var(--muted);
    font-size: 14px;
    padding-top: 2px;
}

.qr-tile {
    width: 196px;
    height: 196px;
    padding: 12px;
    background: var(--glacier-white);
    margin: var(--space-2) 0;
}

.qr-tile svg {
    width: 100%;
    height: 100%;
    display: block;
}

.secret {
    display: inline-block;
    padding: 6px 10px;
    border: 1px solid var(--line-soft);
    font-size: 15px;
    letter-spacing: 0.12em;
    word-break: break-all;
}

.recovery-codes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-1) var(--space-3);
    padding: var(--space-2);
    border: 1px solid var(--line-soft);
    margin: var(--space-2) 0;
    font-size: 16px;
    letter-spacing: 0.12em;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: var(--space-2);
}

@media (max-width: 720px) {
    .manage {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-3);
    }

    .manage-nav {
        grid-auto-flow: column;
        overflow-x: auto;
    }

    .manage-nav a {
        white-space: nowrap;
    }
}

/* ---------- Chat ---------- */

.chat {
    height: calc(100dvh - 64px);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    /* Der Chat richtet sich nach seiner eigenen Breite, nicht nach dem Bildschirm: als Fenster ist er oft schmal. */
    container: chat / inline-size;
}

.chat-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--space-3);
    border-bottom: 1px solid var(--line-faint);
    min-height: 52px;
}

.modes {
    display: flex;
    gap: var(--space-3);
    flex: 1;
}

.modes button {
    position: relative;
    white-space: nowrap;
    border: 0;
    background: none;
    padding: 16px 0;
    color: var(--muted);
    font: inherit;
    font-size: 15px;
    cursor: pointer;
}

.modes button[aria-selected="true"] {
    color: var(--ink);
}

.modes button[aria-selected="true"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--accent);
    clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
}

.model-status {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--muted);
    min-width: 0;
}

.model-status .dot {
    width: 7px;
    height: 7px;
    flex: none;
    background: var(--stone-gray);
    clip-path: polygon(2px 0, 100% 0, calc(100% - 2px) 100%, 0 100%);
}

.model-status .dot.is-ready {
    background: var(--accent);
}

.model-status .model-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Die Einstellungen sind immer eingeklappt und öffnen nur über «Einstellungen» im Kopf, über dem Chat. */
.rail-toggle {
    display: inline-flex;
}

.chat-body {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
}

.chat-main {
    position: relative;
    min-width: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: 0;
}

.rail {
    display: none;
    position: absolute;
    inset: 0 0 0 auto;
    width: min(360px, 100%);
    z-index: 15;
    background: var(--panel-raised);
    border-left: 1px solid var(--line-soft);
    padding: var(--space-3) var(--space-3) var(--space-4);
    overflow-y: auto;
    min-height: 0;
}

.chat-body.rail-open .rail {
    display: block;
}

/* Fläche unter offenen Einstellungen oder offener Chatliste: Ein Klick auf den Chat daneben schliesst sie. Liegt in
   der Zeile des Chats, unter den Leisten (z-index 15 und 16) und über dem Verlauf. */
.chat-dismiss {
    grid-row: 2;
    grid-column: 1;
    z-index: 14;
}

/* Fest in der zweiten Zeile, sonst schöbe die Fläche den Chat beim Öffnen in eine dritte. */
.chat > .chat-body {
    grid-row: 2;
    grid-column: 1;
}

/* Breiter Chat: Die Chatliste steht fest links und liegt nicht über dem Chat. */
.chat-dismiss.for-history {
    display: none;
}

.rail h2 {
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: var(--space-2);
}

.rail-section {
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-2);
    border-bottom: 1px solid var(--line-faint);
}

.rail-section:last-child {
    border-bottom: 0;
}

.rail-note {
    margin: var(--space-1) 0 var(--space-2);
}

.rail .field textarea {
    font-size: 14px;
}

.messages {
    overflow-y: auto;
    padding: var(--space-3) var(--space-3) var(--space-2);
    scroll-behavior: smooth;
}

.messages-inner {
    max-width: 780px;
    margin: 0 auto;
    display: grid;
    gap: var(--space-3);
}

.msg {
    display: grid;
    gap: 10px;
}

.msg-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

.msg-meta {
    letter-spacing: normal;
    text-transform: none;
    font-size: 13px;
}

.msg.is-user {
    padding-left: var(--space-2);
    border-left: 1px solid var(--line-soft);
}

.msg.is-assistant .msg-label::before {
    content: "";
    width: 14px;
    height: 2px;
    background: var(--accent);
    clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
}

.msg-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-width: 72ch;
}

.msg-text.is-streaming::after {
    content: "";
    display: inline-block;
    width: 8px;
    height: 1em;
    margin-left: 2px;
    vertical-align: text-bottom;
    background: var(--ink);
    animation: caret 1s steps(2, start) infinite;
}

@keyframes caret {
    to {
        visibility: hidden;
    }
}

.msg-error {
    padding: 10px 14px;
    border-left: 2px solid var(--ink);
    background: var(--panel);
    font-size: 15px;
}

/* Quellen der Websuche unter einer Antwort: nummeriert wie die Verweise im Text, leise, mit Teal nur an der Kante. */
.msg-sources {
    display: grid;
    gap: 6px;
    max-width: 72ch;
    padding: 10px 14px;
    border-left: 2px solid var(--accent);
    background: var(--panel);
    font-size: 14px;
}

.msg-sources-title {
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

.msg-sources ol {
    display: grid;
    gap: 4px;
    margin: 0;
    padding-left: 2.2em;
}

.msg-sources li {
    overflow-wrap: anywhere;
}

.msg-sources li::marker {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.msg-sources a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--line-soft);
    text-underline-offset: 3px;
}

.msg-sources a:hover,
.msg-sources a:focus-visible {
    text-decoration-color: var(--accent);
}

.msg-sources .t-muted {
    margin-left: 6px;
    font-size: 13px;
}

.media-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.media-item {
    display: grid;
    gap: 6px;
    max-width: 320px;
    margin: 0;
}

.media-item img,
.media-item video {
    display: block;
    max-width: 320px;
    max-height: 240px;
    background: var(--panel);
    border: 1px solid var(--line-faint);
}

.media-item audio {
    width: 300px;
    max-width: 100%;
}

.media-caption {
    font-size: 13px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.empty {
    position: relative;
    min-height: 100%;
    display: grid;
    align-content: center;
    overflow: hidden;
}

.empty-inner {
    position: relative;
    max-width: 780px;
    width: 100%;
    margin: 0 auto;
}

.empty h1 {
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.12;
    margin-bottom: var(--space-2);
    max-width: 16ch;
}

.empty p {
    color: var(--muted);
    max-width: 52ch;
}

.composer {
    border-top: 1px solid var(--line-faint);
    padding: var(--space-2) var(--space-3) var(--space-2);
    background: var(--surface);
}

.composer-inner {
    max-width: 780px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 280px;
    padding: 6px 6px 6px 10px;
    border: 1px solid var(--line-soft);
    font-size: 13px;
}

.chip img {
    width: 28px;
    height: 28px;
    object-fit: cover;
    display: block;
}

.chip-kind {
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

.chip > span {
    white-space: nowrap;
}

.chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chip button {
    border: 0;
    background: none;
    color: var(--muted);
    cursor: pointer;
    font: inherit;
    padding: 2px 6px;
}

.chip button:hover {
    color: var(--ink);
}

/* In Dateien markiert: geht mit der nächsten Nachricht mit. Linke Kante in Teal wie die Auswahl in der Liste. */
.chip.is-marked {
    box-shadow: inset 2px 0 0 var(--accent);
}

.chip.is-marked .chip-kind {
    color: var(--accent-text);
}

.chip.is-unusable {
    box-shadow: none;
    border-style: dashed;
}

.chip.is-unusable .chip-kind,
.chip.is-unusable .chip-name {
    color: var(--muted);
}

.composer-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    border: 1px solid var(--line-soft);
}

.composer-box:focus-within {
    border-color: var(--accent);
}

.composer-box textarea {
    width: 100%;
    min-height: 52px;
    max-height: 240px;
    padding: 14px 16px;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    resize: none;
    outline: none;
}

.composer-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    padding: 6px 6px 6px 8px;
    border-top: 1px solid var(--line-faint);
}

.composer-tools .spacer {
    flex: 1;
}

/* Chat: alles in einer Zeile. «+» links öffnet Anhängen und Werkzeuge, rechts Sprachnachricht und Senden. */
.composer-row {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    padding: 5px;
}

.composer-row textarea {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 40px;
    padding: 9px 8px;
}

.composer-row textarea::placeholder {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.composer-icon,
.composer-send,
.composer-rec {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-none);
    background: none;
    color: var(--muted);
    font: inherit;
    cursor: pointer;
    transition: color 120ms ease, background-color 120ms ease;
}

.composer-icon svg,
.composer-send svg,
.composer-rec svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: square;
}

.composer-icon:hover:not(:disabled),
.composer-icon.is-open {
    color: var(--ink);
    background: var(--panel-raised);
}

.composer-icon.is-open svg {
    transform: rotate(45deg);
}

.composer-icon:disabled,
.composer-send:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Senden: schräg angeschnitten wie der Querbalken des Zeichens. */
.composer-send {
    width: 48px;
    margin-left: 4px;
    background: var(--accent);
    color: var(--on-accent);
    clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}

.composer-send:hover:not(:disabled) {
    background: var(--ink);
    color: var(--surface);
}

.composer-rec {
    width: auto;
    gap: 8px;
    padding: 0 10px;
    color: var(--ink);
    font-size: 14px;
    box-shadow: inset 0 0 0 1px var(--accent);
}

.composer-rec svg {
    fill: currentColor;
    stroke: none;
    width: 16px;
    height: 16px;
}

.composer-rec .pulse {
    width: 8px;
    height: 8px;
    background: var(--accent);
    clip-path: polygon(2px 0, 100% 0, calc(100% - 2px) 100%, 0 100%);
    animation: pulse 1.2s ease-in-out infinite;
}

.composer-add {
    position: relative;
    flex: none;
}

.composer-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 30;
}

.composer-menu {
    position: absolute;
    left: -6px;
    bottom: calc(100% + 10px);
    z-index: 31;
    display: grid;
    width: min(320px, calc(100vw - 32px));
    padding: 6px 0;
    border: 1px solid var(--line-soft);
    border-left: 2px solid var(--accent);
    background: var(--panel-raised);
}

.composer-menu button {
    display: grid;
    gap: 2px;
    padding: 9px 16px;
    border: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.composer-menu button:hover,
.composer-menu button:focus-visible {
    background: var(--surface);
    outline: none;
}

/* Gruppen im Menü: im Browser ohne eigene Gestalt, alles steht wie eine Liste. Die App ordnet sie (mobile.css). */
.composer-menu-fixed,
.composer-menu-group {
    display: contents;
}

.composer-menu-group-title {
    display: none;
}

.composer-menu-name {
    font-size: 15px;
}

.composer-menu-hint {
    color: var(--muted);
    font-size: 13px;
}

.composer-menu button[aria-checked="true"] .composer-menu-name {
    color: var(--accent-text);
}

/* Hinweis im Menü, etwa wenn die Agenten nicht lesbar sind: nicht wählbar */
.composer-menu button:disabled {
    cursor: default;
}

.composer-menu button:disabled:hover {
    background: none;
}

.composer-menu button:disabled .composer-menu-name {
    color: var(--muted);
}

.composer-hint {
    font-size: 13px;
    color: var(--muted);
}

.recording {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    font-size: 14px;
}

.recording .pulse {
    width: 8px;
    height: 8px;
    background: var(--accent);
    clip-path: polygon(2px 0, 100% 0, calc(100% - 2px) 100%, 0 100%);
    animation: pulse 1.2s ease-in-out infinite;
}

@keyframes pulse {
    50% {
        opacity: 0.25;
    }
}

.file-input {
    display: none;
}

/* Agenten: Fortschritt eines Auftrags als feine Linie unter der Antwort, Teal nur für den erledigten Teil */

.msg-progress {
    height: 2px;
    margin-top: 12px;
    background: var(--line-faint);
}

.msg-progress > span {
    display: block;
    height: 100%;
    background: var(--accent);
    transition: width 0.4s ease;
}

.agent-file-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.agent-file-actions .btn {
    cursor: pointer;
}

/* Agent als Panel über dem Eingabefeld: Aussehen der Favoriten, die Felder kommen aus der Beschreibung des Agenten.
   Kurze Felder stehen nebeneinander, Dateien und längerer Text über die ganze Breite. */
.agent-panel-agent {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agent-panel-fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    column-gap: var(--space-2);
    max-height: min(420px, 50dvh);
    overflow-y: auto;
}

.agent-panel-fields .field.is-wide {
    grid-column: 1 / -1;
}

.agent-panel-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

/* Sprachdialog */

.voice {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
}

.voice-stage {
    position: relative;
    display: grid;
    justify-items: start;
    gap: var(--space-2);
    max-width: 780px;
    width: 100%;
    margin: 0 auto;
    padding: var(--space-4) var(--space-3) var(--space-3);
}

.voice-stage h1 {
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.12;
    max-width: 18ch;
}

.voice-stage > *:not(.edge) {
    position: relative;
}

.voice-state {
    color: var(--muted);
    min-height: 1.55em;
}

.talk {
    min-width: 220px;
    min-height: 64px;
    font-size: 13px;
}

.talk.is-live {
    background: var(--ink);
    color: var(--surface);
}

/* Live-Video */

.live {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: 0;
}

.live-scroll {
    overflow-y: auto;
    padding: var(--space-3);
}

.live-inner {
    max-width: 880px;
    margin: 0 auto;
    display: grid;
    gap: var(--space-3);
}

.viewfinder {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--panel);
    border: 1px solid var(--line-faint);
    overflow: hidden;
}

.viewfinder video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.viewfinder-idle {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    gap: var(--space-2);
    justify-items: center;
    text-align: center;
    padding: var(--space-3);
    color: var(--muted);
}

.viewfinder-badge {
    position: absolute;
    left: var(--space-2);
    top: var(--space-2);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    /* Liegt über dem Kamerabild, deshalb in beiden Themen dunkel. */
    background: color-mix(in srgb, var(--deep-navy) 82%, transparent);
    color: var(--glacier-white);
    font-size: 13px;
}

.viewfinder-badge .pulse {
    width: 8px;
    height: 8px;
    background: var(--accent);
    clip-path: polygon(2px 0, 100% 0, calc(100% - 2px) 100%, 0 100%);
    animation: pulse 1.2s ease-in-out infinite;
}

@container chat (max-width: 900px) {
    .chat-head {
        padding: 0 var(--space-2);
        gap: var(--space-2);
    }

    .chat-head {
        flex-wrap: wrap;
        row-gap: 0;
    }

    .modes {
        flex: 1 1 100%;
        gap: var(--space-2);
    }

    .model-status {
        flex: 1;
        padding: 10px 0;
    }

    .composer-tools .btn {
        padding: 0 10px;
        letter-spacing: 0.12em;
    }

    .messages,
    .live-scroll {
        padding: var(--space-2);
    }

    .composer {
        padding: var(--space-1) var(--space-2) var(--space-2);
    }

    .voice-stage {
        padding: var(--space-3) var(--space-2);
    }
}

/* ---------- Fehlerseiten ---------- */

.plain-page {
    position: relative;
    min-height: calc(100vh - 64px);
    display: grid;
    align-content: center;
    padding: var(--space-4) var(--space-3);
    overflow: hidden;
}

.plain-page > *:not(.edge) {
    position: relative;
    max-width: 52ch;
}

.plain-page h1 {
    font-size: 32px;
    line-height: 1.15;
    margin-bottom: var(--space-2);
}

#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    padding: 14px var(--space-3);
    background: var(--panel-raised);
    border-top: 1px solid var(--line);
    color: var(--ink);
    font-size: 15px;
}

#blazor-error-ui .reload {
    margin-left: var(--space-2);
}

#blazor-error-ui .dismiss {
    position: absolute;
    right: var(--space-3);
    top: 12px;
    cursor: pointer;
    color: var(--muted);
}

/* ---------- Dateimanager ---------- */

/* Fenster Dateien: Kopf mit Pfad und Suche, darunter Ordnerbaum und Dateiliste. */
.fm-window {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
    container: files / inline-size;
}

.fm-head {
    display: flex;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    padding: 10px var(--space-2);
    min-height: 60px;
    border-bottom: 1px solid var(--line-faint);
}

.fm-crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.fm-crumb {
    border: 0;
    background: none;
    padding: 6px 4px;
    color: var(--muted);
    font: inherit;
    font-size: 15px;
    cursor: pointer;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fm-crumb:hover,
.fm-crumb.is-current {
    color: var(--ink);
}

.fm-crumb-sep {
    color: var(--line-soft);
}

.fm-search {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex: 0 1 560px;
    min-width: 0;
}

.fm-search input[type="search"] {
    flex: 1;
    min-width: 0;
}

.fm-select {
    width: auto;
    min-height: 44px;
    padding: 8px 12px;
}

.fm-select option,
.fm-select optgroup {
    background: var(--surface);
}

.fm-message {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin: 0;
    padding: 6px 6px 6px var(--space-3);
    border-bottom: 1px solid var(--line-faint);
}

.fm-message .btn {
    min-height: 36px;
}

.fm-empty {
    padding: var(--space-4) var(--space-3);
}

.fm-pane {
    min-height: 0;
    min-width: 0;
    overflow-y: auto;
}

.fm-pane-title {
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fm-ellipsis {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fm-ellipsis-cell {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ordnerbaum */

.fm-tree {
    padding: var(--space-2) 0;
}

.fm-tree > .fm-pane-title {
    padding: 0 var(--space-2) var(--space-1);
}

.fm-tree-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fm-tree-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
    padding-left: calc(8px + var(--depth, 0) * 16px);
    padding-right: var(--space-1);
}

.fm-tree-row.is-selected::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--accent);
}

.fm-tree-row.is-selected,
.fm-tree-row:hover {
    background: var(--panel);
}

.fm-tree-toggle {
    flex: none;
    width: 22px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 0;
    background: none;
    color: var(--muted);
    font: inherit;
    font-size: 12px;
    padding: 0;
    cursor: pointer;
}

span.fm-tree-toggle {
    cursor: default;
}

.fm-tree-name {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    min-height: 34px;
    border: 0;
    background: none;
    color: var(--muted);
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    padding: 0 4px;
}

.fm-tree-row.is-selected .fm-tree-name,
.fm-tree-name:hover {
    color: var(--ink);
}

.fm-tree-row.is-path .fm-tree-name {
    font-style: italic;
}

.fm-tree-row.is-disabled .fm-tree-name {
    opacity: 0.4;
    cursor: not-allowed;
}

.fm-icon-folder,
.fm-icon-file {
    flex: none;
    display: inline-block;
    background: var(--stone-gray);
    opacity: 0.7;
}

.fm-icon-folder {
    width: 15px;
    height: 12px;
    clip-path: polygon(0 0, 42% 0, 54% 20%, 100% 20%, 100% 100%, 0 100%);
}

.fm-icon-file {
    width: 11px;
    height: 14px;
    clip-path: polygon(0 0, 66% 0, 100% 30%, 100% 100%, 0 100%);
    opacity: 0.45;
}

/* Inhalt */

.fm-list {
    padding: var(--space-2) var(--space-2) var(--space-3);
}

.fm-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-height: 44px;
    margin-bottom: var(--space-2);
}

.fm-list-tools {
    display: flex;
    gap: var(--space-1);
}

.fm-list-empty {
    padding: var(--space-3) 0;
}

.fm-drop {
    position: relative;
    display: grid;
    gap: 2px;
    justify-items: center;
    text-align: center;
    padding: 18px var(--space-2);
    margin-bottom: var(--space-2);
    border: 1px dashed var(--line-soft);
    font-size: 14px;
    transition: border-color 120ms ease, background-color 120ms ease;
}

.fm-drop .t-muted {
    font-size: 13px;
}

.fm-drop:hover,
.fm-drop:focus-within {
    border-color: var(--accent);
    background: var(--panel);
}

.fm-drop.is-busy {
    border-style: solid;
    border-color: var(--accent);
}

.fm-drop.is-compact {
    padding: var(--space-2);
    margin: var(--space-2) 0 0;
}

.fm-drop-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.fm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.fm-table th {
    text-align: left;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 8px 10px;
    border-bottom: 1px solid var(--line-soft);
    white-space: nowrap;
}

.fm-table td {
    padding: 0 10px;
    height: 42px;
    border-bottom: 1px solid var(--line-faint);
    white-space: nowrap;
}

.fm-table tbody tr:hover {
    background: var(--panel);
}

.fm-table tbody tr.is-selected {
    background: var(--panel-raised);
    box-shadow: inset 2px 0 0 var(--accent);
}

.fm-table td:first-child {
    max-width: 0;
    width: 50%;
}

.fm-col-num {
    text-align: right;
}

.fm-table th.fm-col-num {
    text-align: right;
}

.fm-row-name .fm-ellipsis {
    min-width: 8ch;
}

/* Suchtreffer: unter dem Namen die Fundstelle, wenn sie in einer Eigenschaft oder Klasse liegt. */
.fm-hit-text {
    display: grid;
    min-width: 0;
    padding: 4px 0;
}

.fm-hit-match {
    font-size: 12px;
    color: var(--accent-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Markieren für den Chat: Kästchen vor dem Namen, bei Ordnern ein gleich breiter Platzhalter. */
.fm-name-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.fm-name-cell .fm-row-name {
    flex: 1;
    min-width: 0;
    user-select: none;
}

.fm-mark,
.fm-mark-space {
    flex: none;
    width: 16px;
    height: 16px;
    margin: 0;
}

.fm-mark {
    appearance: none;
    display: grid;
    place-content: center;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-none);
    background: transparent;
    cursor: pointer;
}

.fm-mark::after {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--accent);
    clip-path: polygon(2px 0, 100% 0, calc(100% - 2px) 100%, 0 100%);
    transform: scale(0);
    transition: transform 100ms ease;
}

.fm-mark:hover,
.fm-mark:focus-visible {
    border-color: var(--line);
}

.fm-mark:checked {
    border-color: var(--accent);
}

.fm-mark:checked::after {
    transform: scale(1);
}

.fm-table tbody tr.is-marked:not(.is-selected) {
    background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.fm-markbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-1) var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-2);
    padding: 6px 6px 6px 12px;
    border-left: 2px solid var(--accent);
    background: var(--panel-raised);
    font-size: 13px;
}

.fm-markbar .btn {
    min-height: 34px;
}

.fm-markbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

/* Liste der Dateien im Dialog zum Löschen mehrerer markierter Dateien */
.fm-bulk-list {
    max-height: 220px;
    overflow-y: auto;
    margin: 0 0 var(--space-2);
    padding: 8px 12px 8px 28px;
    border: 1px solid var(--line-faint);
    font-size: 14px;
    overflow-wrap: anywhere;
}

.fm-row-name {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    border: 0;
    background: none;
    padding: 0;
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.fm-sort {
    border: 0;
    background: none;
    padding: 0;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}

.fm-sort:hover {
    color: var(--ink);
}

.fm-link {
    border: 0;
    background: none;
    padding: 0;
    color: var(--muted);
    font: inherit;
    text-decoration: underline;
    text-decoration-color: var(--line-soft);
    text-underline-offset: 4px;
    cursor: pointer;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fm-link:hover {
    color: var(--ink);
    text-decoration-color: var(--accent);
}

.fm-badge {
    flex: none;
    padding: 1px 8px;
    border: 1px solid var(--line-soft);
    color: var(--muted);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* Details */

.fm-details {
    padding: var(--space-2) var(--space-3) var(--space-3);
}

.fm-details-head {
    padding-bottom: var(--space-2);
}

.fm-details-title {
    font-size: 22px;
    line-height: 1.25;
    margin: 6px 0;
    overflow-wrap: anywhere;
}

.fm-details-meta {
    margin: 0 0 4px;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.fm-lock {
    margin: var(--space-1) 0 0;
    padding: 6px 12px;
    border-left: 2px solid var(--accent);
    background: var(--panel);
    font-size: 14px;
}

.fm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-2);
    border-bottom: 1px solid var(--line-faint);
}

.fm-actions .btn,
.fm-version-actions .btn {
    min-height: 38px;
    padding: 0 14px;
}

.fm-actions .btn-quiet {
    padding: 0 10px;
}

.fm-details-section {
    margin-bottom: var(--space-2);
}

.fm-details-section h3 {
    margin-bottom: var(--space-1);
}

.fm-details-hint {
    font-size: 14px;
}

.fm-tabs {
    display: flex;
    gap: var(--space-2);
    border-bottom: 1px solid var(--line-faint);
    margin-bottom: var(--space-2);
}

.fm-tabs button {
    position: relative;
    border: 0;
    background: none;
    padding: 10px 0;
    color: var(--muted);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.fm-tabs button[aria-selected="true"] {
    color: var(--ink);
}

.fm-tabs button[aria-selected="true"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--accent);
    clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
}

.fm-tab-body {
    display: grid;
    gap: var(--space-1);
    align-content: start;
}

.fm-tab-body .field {
    margin-bottom: 4px;
}

.fm-tab-body > .btn {
    justify-self: start;
}

.fm-tab-body .field input[type="date"] {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-none);
    background: transparent;
    color: var(--ink);
    font: inherit;
}

.fm-tab-body .field input:disabled,
.fm-tab-body .field select:disabled {
    opacity: 0.6;
}

.fm-preview-frame {
    width: 100%;
    height: 58vh;
    border: 1px solid var(--line-faint);
    background: var(--panel);
}

.fm-preview-image {
    display: block;
    max-width: 100%;
    max-height: 58vh;
    margin: 0 auto;
    border: 1px solid var(--line-faint);
}

.fm-preview-media {
    width: 100%;
}

.fm-preview-text {
    margin: 0;
    padding: var(--space-2);
    max-height: 58vh;
    overflow: auto;
    border: 1px solid var(--line-faint);
    background: var(--panel);
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.fm-versions {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fm-versions li {
    padding: 12px 0 12px 14px;
    border-left: 1px solid var(--line-faint);
}

.fm-versions li.is-current {
    border-left: 2px solid var(--accent);
}

.fm-version-head {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.fm-version-meta {
    font-size: 13px;
}

.fm-version-comment {
    margin-top: 4px;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.fm-version-actions {
    display: flex;
    gap: 4px;
    margin-top: 6px;
}

.fm-version-actions .btn-quiet {
    padding: 0 8px;
    margin-left: -8px;
}

/* Dialoge */

.fm-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--surface) 78%, transparent);
}

.fm-dialog {
    position: fixed;
    z-index: 51;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(520px, calc(100vw - 32px));
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    padding: var(--space-3);
    background: var(--panel-raised);
    border: 1px solid var(--line-faint);
    border-top: 2px solid var(--accent);
}

.fm-dialog.is-wide {
    width: min(780px, calc(100vw - 32px));
}

.fm-dialog h2 {
    font-size: 24px;
    margin-bottom: var(--space-1);
}

.fm-dialog-lead {
    margin-bottom: var(--space-2);
    overflow-wrap: anywhere;
}

.fm-dialog-note {
    font-size: 13px;
    margin-top: var(--space-2);
}

.fm-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-1);
    margin-top: var(--space-3);
}

.fm-kind {
    margin-left: var(--space-1);
    font-size: 12px;
}

.fm-cell-action {
    text-align: right;
    width: 1%;
}

.fm-perm-table td:first-child {
    width: 60%;
}

.fm-perm-add {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: var(--space-2);
}

.fm-perm-add .fm-select:first-child {
    flex: 1;
    min-width: 200px;
}

.fm-perm-summary {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 14px;
}

.fm-perm-summary li {
    display: flex;
    align-items: baseline;
    gap: var(--space-1);
    padding: 6px 0;
    border-bottom: 1px solid var(--line-faint);
}

.fm-perm-summary .fm-level {
    margin-left: auto;
    color: var(--muted);
    white-space: nowrap;
}

/* Stufe direkt ändern: kleine Auswahl rechts in der Zeile, oder bei übernommener Liste ein Verweis auf «Freigeben». */
.fm-perm-summary li:has(.fm-level-select) {
    align-items: center;
}

.fm-perm-summary .fm-level-select {
    flex: none;
    margin-left: auto;
    min-height: 34px;
    padding: 4px 8px;
    font-size: 13px;
}

.fm-perm-summary .fm-level-link {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--ink);
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    cursor: pointer;
}

.fm-perm-summary .fm-level-link:disabled {
    cursor: default;
    opacity: 0.6;
}

.fm-props-list {
    display: grid;
    gap: var(--space-2);
}

.fm-props-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) 110px;
    gap: 0 var(--space-2);
    padding: var(--space-2);
    border: 1px solid var(--line-faint);
}

.fm-props-row.is-inactive {
    opacity: 0.6;
}

.fm-props-row .field {
    margin-bottom: var(--space-1);
}

.fm-props-options {
    grid-column: 1 / -1;
}

.fm-props-actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

.fm-props-actions .check {
    margin: 0;
}

/* Klassen: Name und Reihenfolge, darunter die Eigenschaften der Klasse zum Ankreuzen, zuletzt Aktiv und Speichern. */
.fm-class-row {
    grid-template-columns: minmax(0, 1fr) 110px;
}

.fm-class-fields {
    grid-column: 1 / -1;
    order: 1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    margin: 0 0 var(--space-2);
    padding: var(--space-1) 0 0;
    border: 0;
    border-top: 1px solid var(--line-faint);
}

.fm-class-fields legend {
    padding: 0;
    margin-bottom: var(--space-1);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
}

.fm-class-fields .check {
    margin: 0;
}

.fm-class-row .fm-props-actions {
    order: 2;
}

/* Kopf eines Eigenschaftsfeldes: Name links, «Wert entfernen» rechts. */
.fm-prop-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-1);
}

.fm-prop-remove {
    flex: none;
    border: 0;
    background: none;
    padding: 0;
    color: var(--muted);
    font: inherit;
    font-size: 12px;
    text-decoration: underline;
    text-decoration-color: var(--line-soft);
    text-underline-offset: 3px;
    cursor: pointer;
}

.fm-prop-remove:hover {
    color: var(--ink);
    text-decoration-color: var(--accent);
}

/* Stand eines Eigenschaftsfeldes nach dem Speichern. */
.fm-prop-status {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--muted);
}

.fm-prop-status.is-ok::before {
    content: "✓ ";
    color: var(--accent-text);
}

.fm-prop-status.is-error {
    color: var(--ink);
    border-left: 2px solid var(--ink);
    padding-left: 8px;
}

/* Eigenschaften einer Datei als Liste: Bezeichnung links, Wert rechts, eine schmale Zeile pro Eigenschaft. */
.fm-tab-body .fm-prop {
    grid-template-columns: minmax(84px, 36%) minmax(0, 1fr);
    align-items: center;
    gap: 2px 12px;
    margin-bottom: 0;
    padding: 5px 0;
    border-bottom: 1px solid var(--line-faint);
}

.fm-prop > .fm-prop-head {
    grid-column: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    min-width: 0;
}

.fm-prop-head label {
    font-size: 14px;
    line-height: 1.3;
    color: var(--muted);
    overflow-wrap: anywhere;
}

.fm-prop > input,
.fm-prop > select,
.fm-prop > .hint,
.fm-prop > .fm-prop-status {
    grid-column: 2;
}

.fm-prop > .fm-prop-status {
    margin-top: 0;
}

.fm-tab-body .fm-prop input[type="text"],
.fm-tab-body .fm-prop input[type="date"],
.fm-tab-body .fm-prop select {
    min-height: 36px;
    padding: 6px 10px;
    font-size: 15px;
}

.fm-pick-tree {
    max-height: 50dvh;
    overflow-y: auto;
    border: 1px solid var(--line-faint);
    padding: var(--space-1) 0;
}

/* Das Fenster Dateien richtet sich nach seiner eigenen Breite. */
@container files (max-width: 760px) {
    .fm-head {
        flex-wrap: wrap;
    }

    .fm-search {
        flex: 1 1 100%;
    }
}

@container files (max-width: 560px) {
    .fm-table .fm-hide-narrow {
        display: none;
    }

    .fm-search {
        flex-wrap: wrap;
    }

    .fm-search input[type="search"] {
        flex: 1 1 100%;
    }

    .fm-row-name .fm-badge {
        display: none;
    }

    .fm-table td:first-child {
        width: auto;
    }
}

@container pane (max-width: 420px) {
    .fm-details {
        padding-left: var(--space-2);
        padding-right: var(--space-2);
    }
}

@media (max-width: 720px) {
    .fm-props-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Fenster ---------- */

/* Startansicht: Die Fensteransicht füllt den Platz unter der Kopfzeile. */
.start {
    height: calc(100dvh - 64px);
    display: grid;
    grid-template-rows: minmax(0, 1fr);
}

.desk {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    min-height: 0;
}

/* Leiste mit allen Fenstern: Ein Klick blendet ein oder aus. */
.desk-dock {
    display: flex;
    align-items: center;
    gap: 2px;
    min-height: 44px;
    padding: 0 var(--space-2);
    border-bottom: 1px solid var(--line-faint);
    overflow-x: auto;
}

.desk-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 0;
    background: none;
    padding: 8px 12px;
    color: var(--muted);
    font: inherit;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: color 120ms ease;
}

.desk-toggle::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    background: var(--line-soft);
    clip-path: polygon(2px 0, 100% 0, calc(100% - 2px) 100%, 0 100%);
    transition: background-color 120ms ease;
}

.desk-toggle:hover,
.desk-toggle[aria-pressed="true"],
.desk-toggle[aria-current="true"] {
    color: var(--ink);
}

.desk-toggle[aria-pressed="true"]::before,
.desk-toggle[aria-current="true"]::before {
    background: var(--accent);
}

.desk-panes {
    display: flex;
    min-width: 0;
    min-height: 0;
    padding: var(--space-1);
    overflow-x: auto;
}

.desk-empty {
    margin: auto;
    padding: var(--space-3);
    color: var(--muted);
    text-align: center;
}

/* Beim Ziehen fangen eingebettete Vorschauen den Zeiger nicht ab. */
.desk.is-resizing-x,
.desk.is-resizing-x * {
    cursor: col-resize;
    user-select: none;
}

.desk.is-resizing-y,
.desk.is-resizing-y * {
    cursor: row-resize;
    user-select: none;
}

.desk.is-resizing-x iframe,
.desk.is-resizing-y iframe {
    pointer-events: none;
}

/*
  Ein Fenster: Fläche mit Haarlinie, oben rechts schräg angeschnitten wie das Zeichen. Der Anschnitt ist eine
  aufgelegte Ecke in der Grundfarbe, kein clip-path: Dialoge im Fenster (position: fixed) würden sonst mit abgeschnitten.
*/
.pane {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--panel);
    border: 1px solid var(--line-faint);
}

.pane::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: -1px;
    right: -1px;
    width: calc(var(--cut) + 1px);
    height: calc(var(--cut) + 1px);
    background: linear-gradient(to top right, transparent calc(50% - 0.5px), var(--line-soft) calc(50% - 0.5px), var(--line-soft) calc(50% + 0.5px), var(--surface) calc(50% + 0.5px));
    pointer-events: none;
}

.pane.is-hidden {
    display: none;
}

.pane-head {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 34px;
    padding: 0 var(--space-2) 0 var(--space-2);
    border-bottom: 1px solid var(--line-faint);
}

.pane-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pane-title::before {
    content: "";
    flex: none;
    width: 14px;
    height: 2px;
    background: var(--line-soft);
    clip-path: polygon(2px 0, 100% 0, calc(100% - 2px) 100%, 0 100%);
    transition: background-color 160ms ease;
}

/* Das Fenster, in dem gerade gearbeitet wird. */
.pane:focus-within .pane-title {
    color: var(--ink);
}

.pane:focus-within .pane-title::before {
    background: var(--accent);
}

.pane-close {
    flex: none;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 0;
    background: none;
    color: var(--muted);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.pane-close:hover {
    color: var(--ink);
}

.pane-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    container: pane / inline-size;
}

.pane-body > .chat,
.pane-body > .fm-window,
.pane-body > .fm-details {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
}

/* Trennlinie zwischen zwei Fenstern: ziehen oder mit den Pfeiltasten verschieben. */
.splitter {
    flex: none;
    position: relative;
    width: var(--space-1);
    cursor: col-resize;
    touch-action: none;
    outline: none;
}

.splitter::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2px;
    height: 36px;
    transform: translate(-50%, -50%);
    background: var(--line-soft);
    transition: height 160ms ease, background-color 160ms ease;
}

.splitter:hover::after,
.splitter:focus-visible::after,
.splitter.is-active::after {
    height: 88px;
    background: var(--accent);
}

/* Aufteilung innerhalb eines Fensters, oben und unten. */
.split {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.split-part {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.split-part > .fm-pane {
    flex: 1 1 auto;
    min-height: 0;
}

.split-handle {
    flex: none;
    position: relative;
    height: var(--space-1);
    cursor: row-resize;
    touch-action: none;
    outline: none;
}

.split-handle::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: var(--line-faint);
}

.split-handle::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 36px;
    height: 2px;
    transform: translate(-50%, -50%);
    background: var(--line-soft);
    transition: width 160ms ease, background-color 160ms ease;
}

.split-handle:hover::after,
.split-handle:focus-visible::after,
.split-handle.is-active::after {
    width: 88px;
    background: var(--accent);
}

/* Schmaler Bildschirm: immer ein Fenster, die Leiste wechselt. Grenze wie NARROW_QUERY in pane-layout.js. */
@media (max-width: 900px) {
    .desk-panes {
        padding: 0;
    }

    .pane {
        display: none;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        border: 0;
    }

    .pane.is-focus {
        display: flex;
    }

    .pane::after,
    .pane-head,
    .splitter,
    .desk-empty {
        display: none;
    }
}

/* ---------- Benutzermenü ---------- */

.user-menu {
    position: relative;
}

.user-menu summary {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 4px 0 12px;
    color: var(--muted);
    font-size: 14px;
    cursor: pointer;
    list-style: none;
}

.user-menu summary::-webkit-details-marker {
    display: none;
}

.user-menu summary:hover,
.user-menu[open] summary {
    color: var(--ink);
}

.user-menu .name {
    display: inline;
}

.user-menu-caret {
    font-size: 12px;
}

.user-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    z-index: 40;
    min-width: 240px;
    display: grid;
    padding: var(--space-1) 0;
    background: var(--panel-raised);
    border: 1px solid var(--line-faint);
    border-top: 2px solid var(--accent);
}

.user-menu-login {
    padding: 6px 18px 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--line-faint);
    color: var(--muted);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.user-menu-panel a,
.user-menu-panel button {
    display: block;
    width: 100%;
    padding: 10px 18px;
    border: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: 15px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.user-menu-panel a:hover,
.user-menu-panel button:hover {
    background: var(--panel);
    box-shadow: inset 2px 0 0 var(--accent);
}

.user-menu-panel form {
    margin: 0;
    border-top: 1px solid var(--line-faint);
    margin-top: 4px;
    padding-top: 4px;
}

/* ---------- Einstellungen und Administration ---------- */

.page.is-wide {
    max-width: 1280px;
}

.manage-body.is-wide {
    max-width: none;
    min-width: 0;
}

.manage-nav-group {
    margin: var(--space-2) 0 4px;
    padding-left: 14px;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

.settings-group {
    margin: 0 0 var(--space-3);
    padding: 0;
    border: 0;
    border-top: 1px solid var(--line-faint);
    padding-top: var(--space-2);
}

.settings-group legend {
    padding: 0 var(--space-1) 0 0;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

.settings-note {
    font-size: 14px;
    margin-bottom: var(--space-2);
}

.tone-list {
    display: grid;
    gap: 6px;
}

.tone {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 2px 12px;
    align-items: baseline;
    padding: 12px 14px;
    border: 1px solid var(--line-faint);
    cursor: pointer;
}

.tone:hover {
    border-color: var(--line-soft);
}

.tone.is-selected {
    border-color: var(--accent);
    background: var(--panel);
}

.tone input {
    grid-row: span 2;
    margin: 0;
    accent-color: var(--alpine-teal);
}

.tone-name {
    color: var(--ink);
}

.tone-text {
    color: var(--muted);
    font-size: 14px;
}

.tone-editor {
    display: grid;
    gap: var(--space-1);
    margin-bottom: var(--space-1);
}

.tone-edit {
    display: grid;
    grid-template-columns: minmax(120px, 200px) minmax(0, 1fr) auto;
    gap: var(--space-1);
    align-items: start;
}

.tone-edit textarea {
    min-height: 44px;
    resize: vertical;
    font-size: 14px;
}

.tone-edit textarea:disabled {
    opacity: 0.5;
}

.admin-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.admin-head h2 {
    margin: 0;
}

.admin-section {
    padding: var(--space-2) 0;
    border-top: 1px solid var(--line-faint);
}

.admin-section h3 {
    margin-bottom: var(--space-1);
}

.admin-inline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    align-items: center;
}

.admin-inline .input {
    flex: 1 1 220px;
    width: auto;
}

form.admin-inline {
    margin-bottom: var(--space-2);
}

.admin-table td {
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    vertical-align: top;
}

.admin-table td:first-child {
    max-width: none;
    width: auto;
}

.admin-name {
    display: block;
}

.admin-sub {
    display: block;
    font-size: 13px;
}

.admin-wrap {
    white-space: normal;
    overflow-wrap: anywhere;
}

.admin-row-actions {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
}

/* Hauptordner: Unterordner einblenden, eingerückt nach Tiefe, mit eigener Freigabe und eigenen Verantwortlichen. */
.admin-folder-toggle {
    display: inline-block;
    margin-top: 4px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.admin-folder-toggle:hover,
.admin-folder-toggle:focus-visible {
    color: var(--ink);
}

.admin-folder-indent {
    position: relative;
    padding-left: calc(var(--depth, 1) * 18px);
}

.admin-folder-indent::before {
    content: "";
    position: absolute;
    left: calc(var(--depth, 1) * 18px - 12px);
    top: 0.65em;
    width: 7px;
    border-top: 1px solid var(--line-soft);
}

.admin-subfolder td {
    border-top-color: var(--line-faint);
}

/* Lange Listen von Freigaben und Verantwortlichen umbrechen, statt die Tabelle über den Rand zu schieben. */
.admin-folders td.admin-wrap {
    white-space: normal;
    overflow-wrap: anywhere;
}

.admin-folders td.fm-cell-action {
    width: 440px;
}

.admin-folders .admin-row-actions {
    flex-wrap: wrap;
}

/* Kompakte Liste der Administration: eine Zeile pro Eintrag mit Name und Angaben darunter, rechts «Bearbeiten».
   Bearbeitet wird direkt in der Zeile, kleine Bezeichnungen über den Feldern. */
.admin-list {
    display: grid;
    margin-top: var(--space-2);
    border-top: 1px solid var(--line-soft);
}

.admin-list-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 56px;
    padding: 6px 0 6px 12px;
    border-bottom: 1px solid var(--line-faint);
}

.admin-list-row:hover {
    background: var(--panel);
}

.admin-list-row.is-inactive .admin-name {
    color: var(--muted);
}

.admin-list-main {
    flex: 1 1 auto;
    min-width: 0;
}

.admin-list-main .admin-sub {
    overflow-wrap: anywhere;
}

.admin-list-row .btn {
    flex: none;
    min-height: 36px;
    padding: 0 12px;
}

.admin-edit {
    flex: 1 1 auto;
    display: grid;
    gap: 12px;
    padding: 10px 12px 10px 0;
}

.admin-list-row:has(.admin-edit) {
    background: var(--panel);
    box-shadow: inset 2px 0 0 var(--accent);
}

.admin-edit-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px var(--space-2);
}

.admin-edit-field {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.admin-edit-field > span:first-child,
.admin-num > span,
.admin-checks legend {
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
}

.admin-edit-field.is-wide {
    flex: 1 1 220px;
}

.admin-edit-field.is-num .input,
.admin-num .input {
    width: 96px;
}

.admin-edit-field .input {
    min-height: 36px;
    padding: 6px 10px;
}

.admin-edit-field textarea.input {
    min-height: 72px;
    resize: vertical;
}

.admin-edit-value {
    display: flex;
    align-items: center;
    min-height: 36px;
}

.admin-edit-fields .check {
    min-height: 36px;
    margin: 0;
}

.admin-num {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.admin-inline .admin-num .input {
    flex: none;
}

.admin-inline .admin-select {
    flex: 0 1 200px;
    width: auto;
}

.admin-checks {
    margin: 0;
    padding: 0;
    border: 0;
}

.admin-checks legend {
    padding: 0;
    margin-bottom: 6px;
}

.admin-create-note {
    margin-top: var(--space-1);
}

.role-checks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
}

.role-checks .check {
    margin: 0;
}

.admin-tabs {
    display: inline-flex;
    margin-bottom: var(--space-2);
}

.admin-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0 var(--space-2);
    margin-bottom: var(--space-2);
}

.admin-filter .field {
    margin-bottom: var(--space-1);
}

.admin-filter-text {
    flex: 1 1 240px;
}

.admin-filter .btn {
    margin-bottom: var(--space-1);
}

.admin-filter input[type="date"] {
    min-height: 44px;
    color-scheme: inherit;
}

.admin-log {
    font-size: 13px;
}

.admin-log .admin-time {
    white-space: nowrap;
    color: var(--muted);
}

.admin-log .admin-source {
    max-width: 220px;
}

.admin-log tr.is-alert td:first-child {
    box-shadow: inset 2px 0 0 var(--ink);
}

.admin-exception summary {
    cursor: pointer;
    color: var(--muted);
    margin-top: 4px;
}

.admin-exception pre {
    max-height: 320px;
    overflow: auto;
    margin: 6px 0 0;
    padding: var(--space-1);
    background: var(--panel);
    border: 1px solid var(--line-faint);
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 12px;
    white-space: pre-wrap;
}

@media (max-width: 720px) {
    .user-menu .name {
        display: inline-block;
        max-width: 110px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .user-menu-panel {
        min-width: 220px;
    }

    .manage-nav-group {
        display: none;
    }

    .tone-edit {
        grid-template-columns: minmax(0, 1fr);
    }

    .admin-table {
        display: block;
        overflow-x: auto;
    }
}

/* ---------- Administration: Rahmen ---------- */

/* Eigener Bereich: Seitenleiste nach Themen links, die Seite rechts über die volle Breite. */
.admin-shell {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    min-height: calc(100dvh - 64px);
}

.admin-side {
    position: sticky;
    top: 64px;
    align-self: start;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: calc(100dvh - 64px);
    padding: var(--space-3) 0 var(--space-2);
    border-right: 1px solid var(--line-faint);
    background: var(--panel);
    overflow-y: auto;
}

.admin-side-head {
    display: grid;
    gap: 2px;
    padding: 0 var(--space-2) var(--space-2) 22px;
    margin-bottom: var(--space-1);
    border-bottom: 1px solid var(--line-faint);
}

.admin-side-title {
    font-size: 12px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ink);
}

.admin-side-sub {
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

.admin-nav {
    display: grid;
    align-content: start;
    gap: 1px;
    padding: var(--space-1) 0;
}

.admin-nav a {
    position: relative;
    display: block;
    padding: 9px var(--space-2) 9px 22px;
    color: var(--muted);
    text-decoration: none;
    font-size: 15px;
}

.admin-nav a:hover {
    color: var(--ink);
    background: var(--panel-raised);
}

/* Aktive Seite: schräger Balken links, wie der Querbalken des Zeichens. */
.admin-nav a.active {
    color: var(--ink);
    background: var(--panel-raised);
}

.admin-nav a.active::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 9px;
    bottom: 9px;
    width: 4px;
    background: var(--accent);
    clip-path: polygon(0 3px, 100% 0, 100% calc(100% - 3px), 0 100%);
}

.admin-nav-group {
    margin: var(--space-2) 0 4px;
    padding-left: 22px;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

.admin-back {
    margin: var(--space-2) var(--space-2) 0 22px;
    padding-top: var(--space-2);
    border-top: 1px solid var(--line-faint);
    color: var(--muted);
    font-size: 14px;
    text-decoration: none;
}

.admin-back:hover {
    color: var(--ink);
}

.admin-main {
    min-width: 0;
    max-width: 1280px;
    padding: var(--space-3) var(--space-3) var(--space-4);
}

.admin-main > h2,
.admin-main .admin-head h2 {
    font-size: 24px;
    line-height: 1.2;
}

.admin-main > h2 {
    margin-bottom: var(--space-2);
}

.admin-main .admin-head {
    align-items: flex-end;
    margin-bottom: var(--space-3);
}

.admin-lead {
    max-width: 72ch;
    margin: var(--space-1) 0 0;
    font-size: 15px;
}

.admin-head-tools {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: none;
}

.admin-stamp {
    font-size: 13px;
    white-space: nowrap;
}

.admin-note {
    margin-top: var(--space-3);
    font-size: 14px;
}

.admin-note a {
    color: var(--accent-text);
}

/* ---------- Administration: Zustand der Dienste ---------- */

.status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-2);
}

.status-tile {
    --state: var(--line-soft);
    display: grid;
    align-content: start;
    gap: var(--space-1);
    min-height: 196px;
    padding: 20px 22px;
    border: 1px solid var(--line-faint);
    border-top: 2px solid var(--state);
    background: var(--panel);
}

.status-tile.is-ok {
    --state: var(--accent);
}

.status-tile.is-warning {
    --state: var(--ink);
}

.status-tile.is-down {
    --state: var(--ink);
    border-style: dashed;
    border-top-style: solid;
    background: transparent;
}

.status-tile.is-off {
    --state: var(--line-faint);
    background: transparent;
}

.status-tile-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/* Zustandszeichen: schräges Parallelogramm. Voll bei bereit, Rahmen bei prüfen, durchgestrichen bei nicht erreichbar. */
.status-mark {
    --state: var(--line-soft);
    position: relative;
    flex: none;
    width: 16px;
    height: 10px;
    background: var(--state);
    clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}

.is-ok .status-mark {
    --state: var(--accent);
}

.is-warning .status-mark {
    --state: var(--ink);
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--state);
}

.is-down .status-mark {
    --state: var(--ink);
    background: linear-gradient(to bottom, transparent 40%, var(--state) 40%, var(--state) 60%, transparent 60%);
    box-shadow: inset 0 0 0 1px var(--state);
}

.is-off .status-mark {
    --state: var(--line-soft);
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--state);
}

.status-name {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 17px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.status-state {
    flex: none;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

.is-ok .status-state {
    color: var(--accent-text);
}

.is-warning .status-state,
.is-down .status-state {
    color: var(--ink);
}

.status-purpose {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.45;
}

.status-detail {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.status-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-1) var(--space-2);
    margin: auto 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--line-faint);
}

.status-facts:empty {
    display: none;
}

.status-facts > div {
    min-width: 0;
}

.status-facts > div.is-wide {
    grid-column: 1 / -1;
}

.status-facts dt {
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

.status-facts dd {
    margin: 2px 0 0;
    font-size: 14px;
}

.status-address {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Link zur Weboberfläche des Dienstes, öffnet in einem neuen Tab. */
.status-link {
    justify-self: start;
    margin-top: 2px;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent-text);
    text-decoration: none;
}

.status-link:hover {
    color: var(--ink);
}

/* Platzhalter, solange die erste Prüfung läuft. */
.status-tile.is-pending {
    border-top-color: var(--line-faint);
}

.status-tile.is-pending .status-mark,
.status-tile.is-pending .status-name {
    background: var(--line-faint);
    box-shadow: none;
}

.status-tile.is-pending .status-name {
    flex: 0 0 45%;
    height: 14px;
}

@media (prefers-reduced-motion: no-preference) {
    .status-tile.is-pending {
        animation: status-wait 1.4s ease-in-out infinite alternate;
    }
}

@keyframes status-wait {
    from {
        opacity: 0.55;
    }

    to {
        opacity: 1;
    }
}

/* ---------- Administration: Verbindungen der Dienste ---------- */

.service-list {
    display: grid;
    gap: var(--space-2);
}

.service-card {
    padding: 20px 22px 12px;
    border: 1px solid var(--line-faint);
    background: var(--panel);
}

.service-card.is-fixed {
    background: transparent;
    padding-bottom: 20px;
}

.service-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.service-head h3 {
    margin: 0 0 2px;
    font-size: 17px;
    line-height: 1.3;
}

.service-head p {
    margin: 0;
    font-size: 14px;
}

.service-source {
    flex: none;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

.service-fixed {
    margin: 0;
    max-width: 72ch;
    font-size: 14px;
    color: var(--muted);
}

.service-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-2);
}

.service-fields .field {
    min-width: 0;
}

.service-clear {
    margin: 4px 0 0;
    font-size: 14px;
}

.service-test {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: none;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

.service-test.is-ok {
    color: var(--accent-text);
}

.service-test.is-warning,
.service-test.is-down {
    color: var(--ink);
}

.service-test-detail {
    margin: 0 0 var(--space-1);
    padding: 8px 12px;
    border-left: 2px solid var(--line-soft);
    font-size: 14px;
    overflow-wrap: anywhere;
}

.service-actions {
    display: flex;
    justify-content: flex-end;
}

/* Speichern bleibt beim Scrollen unten sichtbar. */
.admin-savebar {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding: var(--space-2) 0;
    border-top: 1px solid var(--line-faint);
    background: var(--surface);
    font-size: 14px;
}

@media (max-width: 860px) {
    .admin-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Auf schmalen Bildschirmen liegt die Navigation als Leiste oben. */
    .admin-side {
        position: static;
        height: auto;
        grid-template-rows: none;
        grid-auto-flow: column;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        padding: 0;
        border-right: 0;
        border-bottom: 1px solid var(--line-faint);
        overflow: visible;
    }

    .admin-side-head,
    .admin-nav-group {
        display: none;
    }

    .admin-nav {
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        overflow-x: auto;
        padding: 0;
    }

    .admin-nav a {
        padding: 14px 14px;
        white-space: nowrap;
        font-size: 14px;
    }

    .admin-nav a.active::before {
        left: 14px;
        right: 14px;
        top: auto;
        bottom: 0;
        width: auto;
        height: 2px;
        clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
    }

    .admin-back {
        margin: 0;
        padding: 14px var(--space-2);
        border-top: 0;
        border-left: 1px solid var(--line-faint);
        white-space: nowrap;
    }

    .admin-main {
        padding: var(--space-2) var(--space-2) var(--space-3);
    }

    .admin-main .admin-head {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .service-fields {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Dateispeicher in anderen Bereichen ---------- */

.media-save {
    border: 0;
    background: none;
    padding: 0;
    margin-left: var(--space-1);
    color: var(--muted);
    font: inherit;
    font-size: 13px;
    text-decoration: underline;
    text-decoration-color: var(--line-soft);
    text-underline-offset: 4px;
    cursor: pointer;
}

.media-save:hover {
    color: var(--ink);
    text-decoration-color: var(--accent);
}

/* «Wiederholen», solange eine Antwort läuft */
.media-save.is-repeat:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.media-save.is-block {
    display: block;
    margin: 4px 0 0;
    text-align: left;
}

.msg-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px var(--space-2);
}

.msg-actions .media-save {
    margin-left: 0;
}

.fs-path {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-bottom: var(--space-1);
}

.fs-list {
    display: grid;
    max-height: 46dvh;
    overflow-y: auto;
    border: 1px solid var(--line-faint);
}

.fs-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    border-bottom: 1px solid var(--line-faint);
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.fs-row:last-child {
    border-bottom: 0;
}

.fs-row:hover {
    background: var(--panel);
}

.fs-row.is-selected {
    background: var(--panel);
    box-shadow: inset 2px 0 0 var(--accent);
}

.fs-row.is-disabled {
    color: var(--muted);
    cursor: default;
}

.fs-row.is-disabled:hover {
    background: none;
}

.fs-row input[type="checkbox"] {
    flex: none;
    margin: 0;
    accent-color: var(--alpine-teal);
}

.fs-meta {
    margin-left: auto;
    flex: none;
    font-size: 13px;
}

.fs-empty {
    padding: var(--space-2);
    margin: 0;
}

@media (max-width: 720px) {
    .fs-meta {
        display: none;
    }
}

/* ---------- Antworten der KI ---------- */

.md {
    max-width: 74ch;
    overflow-wrap: anywhere;
    line-height: 1.62;
}

/* Diagramme bringen eine eigene Breite mit. Ohne min-width: 0 würde die Rasterspalte mitwachsen
   und auf schmalen Bildschirmen die ganze Antwort aus dem Bild schieben. */
.msg.is-assistant,
.md {
    min-width: 0;
}

.md > :first-child {
    margin-top: 0;
}

.md > :last-child {
    margin-bottom: 0;
}

.md p {
    margin: 0 0 14px;
}

.md h1,
.md h2,
.md h3,
.md h4,
.md h5,
.md h6 {
    position: relative;
    font-weight: 500;
    line-height: 1.25;
    margin: 26px 0 12px;
    text-wrap: balance;
}

.md h1 {
    font-size: 24px;
}

.md h2 {
    font-size: 20px;
}

.md h1,
.md h2 {
    padding-left: 16px;
}

.md h1::before,
.md h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.3em;
    bottom: 0.3em;
    width: 3px;
    background: var(--accent);
    clip-path: polygon(0 2px, 100% 0, 100% calc(100% - 2px), 0 100%);
}

.md h3 {
    font-size: 17px;
}

.md h4,
.md h5,
.md h6 {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

.md ul,
.md ol {
    margin: 0 0 14px;
    padding-left: 22px;
}

.md li {
    margin: 5px 0;
}

.md li > ul,
.md li > ol {
    margin: 4px 0 0;
}

.md li::marker {
    color: var(--accent-text);
}

.md ul.contains-task-list {
    list-style: none;
    padding-left: 2px;
}

.md .task-list-item input {
    margin: 0 10px 0 0;
    accent-color: var(--alpine-teal);
}

.md a {
    color: var(--ink);
    text-decoration-color: var(--accent);
    text-underline-offset: 3px;
}

.md strong {
    font-weight: 500;
}

.md del {
    color: var(--muted);
}

.md mark {
    background: color-mix(in srgb, var(--alpine-teal) 28%, transparent);
    color: var(--ink);
    padding: 0 3px;
}

.md blockquote {
    margin: 0 0 14px;
    padding: 10px 18px;
    border-left: 2px solid var(--accent);
    background: var(--panel);
    color: color-mix(in srgb, var(--ink) 82%, var(--muted));
}

.md blockquote > :last-child {
    margin-bottom: 0;
}

.md hr {
    border: 0;
    height: 1px;
    background: var(--line-soft);
    margin: 24px 0;
}

.md code {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.88em;
    letter-spacing: normal;
    padding: 1px 6px;
    background: var(--panel-raised);
    border: 1px solid var(--line-faint);
}

.md pre {
    position: relative;
    margin: 0 0 16px;
    padding: 36px 18px 16px;
    background: var(--panel);
    border: 1px solid var(--line-faint);
    border-left: 2px solid var(--accent);
    overflow-x: auto;
    font-size: 13.5px;
    line-height: 1.55;
}

.md pre code {
    padding: 0;
    background: none;
    border: 0;
    font-size: inherit;
    white-space: pre;
    display: block;
}

.md pre::before {
    content: attr(data-language);
    position: absolute;
    top: 9px;
    left: 18px;
    font-family: var(--font);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

.md-copy {
    position: absolute;
    top: 6px;
    right: 8px;
    padding: 3px 10px;
    border: 1px solid var(--line-soft);
    background: var(--surface);
    color: var(--muted);
    font: inherit;
    font-family: var(--font);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    opacity: 0;
    transition: opacity 120ms ease, color 120ms ease, border-color 120ms ease;
}

.md pre:hover .md-copy,
.md-copy:focus-visible {
    opacity: 1;
}

.md-copy:hover {
    color: var(--ink);
    border-color: var(--accent);
}

@media (hover: none) {
    .md-copy {
        opacity: 1;
    }
}

.md pre.md-diagram {
    padding: 28px 20px 20px;
    border-left-color: var(--line-faint);
    background: color-mix(in srgb, var(--ink) 1.5%, var(--surface));
    text-align: center;
    white-space: normal;
}

.md pre.md-diagram svg {
    max-width: 100%;
    height: auto;
}

.md pre.md-diagram-error {
    border-left-color: var(--ink);
}

.md pre.md-diagram-error::before {
    color: var(--ink);
}

.md table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.45;
}

.md th {
    text-align: left;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 8px 14px 8px 0;
    border-bottom: 1px solid var(--line-soft);
    white-space: nowrap;
}

.md td {
    padding: 9px 14px 9px 0;
    border-bottom: 1px solid var(--line-faint);
    vertical-align: top;
}

.md th[style*="right"],
.md td[style*="right"] {
    padding-left: 14px;
}

.md tbody tr:hover td {
    background: var(--panel);
}

.md img {
    display: block;
    max-width: 100%;
    margin: 6px 0 14px;
    border: 1px solid var(--line-faint);
}

.md .footnotes {
    margin-top: 20px;
    font-size: 13px;
    color: var(--muted);
}

.md .footnotes hr {
    margin: 12px 0;
}

/* ---------- Darstellungsbausteine der Agenten (OutputBlocks) ----------
   Kurzantwort, Karten, Zeitleiste, Galerie und Quellen. Gleiche Formensprache wie überall: angeschnittene Ecken, Teal
   nur an Kanten und Marken, Beschriftungen in Versalien. Mit Karten oder Bildern nutzt die Antwort die ganze Breite,
   der Fliesstext bleibt lesbar schmal. */
.md:has(> .out-cards, > .out-gallery) {
    max-width: 100%;
}

.md:has(> .out-cards, > .out-gallery) > :is(p, ul, ol, h1, h2, h3, h4, blockquote, table, pre, .out-summary, .out-timeline, .out-sources) {
    max-width: 74ch;
}

.md .out-label {
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

.md .out-summary {
    display: grid;
    gap: 8px;
    margin: 0 0 22px;
    padding: 16px 20px 18px;
    border-left: 2px solid var(--accent);
    background: var(--panel);
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}

.md .out-summary-text {
    font-size: 17px;
    line-height: 1.55;
}

.md .out-summary-text > :last-child {
    margin-bottom: 0;
}

.md .out-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: 12px;
    margin: 0 0 18px;
}

.md .out-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--line-faint);
    background: var(--panel);
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}

.md .out-card-image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--surface);
}

.md .out-card-image img {
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
    object-fit: cover;
}

.md .out-card-body {
    flex: 1;
    display: grid;
    align-content: start;
    gap: 6px;
    padding: 12px 14px 14px;
}

.md .out-badge {
    justify-self: start;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-text);
}

.md .out-card-title {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    color: var(--ink);
}

.md .out-card-title a {
    text-decoration: none;
}

.md .out-card-title a:hover,
.md .out-card-title a:focus-visible {
    text-decoration: underline;
    text-decoration-color: var(--accent);
}

.md .out-card-subtitle,
.md .out-card-address {
    margin: 0;
    font-size: 13px;
    color: var(--muted);
}

.md .out-card-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

.md .out-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: var(--muted);
}

.md .out-meta li {
    margin: 0;
}

.md .out-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.md .out-action {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--line-soft);
    color: var(--ink);
    font-size: 13px;
    text-decoration: none;
    clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%, 0 6px);
}

.md .out-action:hover,
.md .out-action:focus-visible {
    border-color: var(--accent);
    outline: none;
}

.md .out-timeline {
    margin: 0 0 18px;
}

.md .out-day {
    margin: 0 0 14px;
}

.md .out-day-title {
    margin: 0 0 6px;
}

.md .out-events {
    margin: 0;
    padding: 0;
    list-style: none;
    border-left: 1px solid var(--line-soft);
}

.md .out-event {
    position: relative;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 12px;
    margin: 0;
    padding: 8px 0 8px 14px;
}

.md .out-event::before {
    content: "";
    position: absolute;
    left: -4px;
    top: 15px;
    width: 7px;
    height: 7px;
    background: var(--accent);
    clip-path: polygon(2px 0, 100% 0, calc(100% - 2px) 100%, 0 100%);
}

.md .out-time {
    padding-top: 1px;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    color: var(--accent-text);
}

.md .out-event-body {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.md .out-event-title {
    font-weight: 500;
}

.md .out-event-place {
    font-size: 13px;
    color: var(--muted);
}

.md .out-event-text {
    margin: 2px 0 0;
    font-size: 14px;
}

.md .out-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
    gap: 10px;
    margin: 0 0 18px;
}

.md .out-gallery figure {
    display: grid;
    gap: 6px;
    margin: 0;
}

.md .out-gallery img {
    width: 100%;
    aspect-ratio: 4 / 3;
    margin: 0;
    object-fit: cover;
    border: 1px solid var(--line-faint);
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}

.md .out-gallery figcaption {
    font-size: 12px;
    line-height: 1.35;
    color: var(--muted);
}

.md .out-sources {
    margin: 8px 0 14px;
    border-top: 1px solid var(--line-faint);
}

.md .out-sources summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    list-style: none;
    cursor: pointer;
}

.md .out-sources summary::-webkit-details-marker {
    display: none;
}

.md .out-sources summary::before {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--muted);
    border-bottom: 1.5px solid var(--muted);
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}

.md .out-sources[open] summary::before {
    transform: rotate(45deg);
}

.md .out-count {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
}

.md .out-sources ol {
    margin: 0 0 6px;
    padding-left: 2.4em;
    font-size: 14px;
}

.md .out-sources li {
    margin: 4px 0;
}

.md .out-sources .t-muted {
    margin-left: 8px;
    font-size: 13px;
}

/* Verweise wie [3] als kleine Marke, gleich bei der Websuche im Chat und bei den Agenten. */
.md .cite {
    display: inline-block;
    min-width: 1.6em;
    margin: 0 1px;
    padding: 0 4px;
    border: 1px solid var(--line-faint);
    background: var(--panel);
    color: var(--muted);
    font-size: 0.68em;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
    text-align: center;
    vertical-align: 0.45em;
}

@media (max-width: 720px) {
    .md .out-event {
        grid-template-columns: 50px minmax(0, 1fr);
        gap: 10px;
    }

    /* Schmaler Bildschirm: Karten mit flacherem Bild, Galerie zweispaltig, damit weniger zu scrollen ist. */
    .md .out-card-image {
        aspect-ratio: 21 / 9;
    }

    .md .out-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .md .out-sources summary::before {
        transition: none;
    }
}

.md.is-streaming > :last-child::after,
.md.is-streaming:empty::after {
    content: "";
    display: inline-block;
    width: 8px;
    height: 1em;
    margin-left: 2px;
    vertical-align: text-bottom;
    background: var(--ink);
    animation: caret 1s steps(2, start) infinite;
}

/* Codefarben aus den Markenfarben */

.md .hljs-keyword,
.md .hljs-selector-tag,
.md .hljs-built_in,
.md .hljs-name,
.md .hljs-tag,
.md .hljs-operator {
    color: var(--accent-text);
}

.md .hljs-string,
.md .hljs-attr,
.md .hljs-template-tag,
.md .hljs-addition,
.md .hljs-regexp {
    color: color-mix(in srgb, var(--accent-text) 45%, var(--ink));
}

.md .hljs-comment,
.md .hljs-quote,
.md .hljs-meta,
.md .hljs-deletion {
    color: var(--muted);
    font-style: italic;
}

.md .hljs-number,
.md .hljs-literal,
.md .hljs-symbol,
.md .hljs-bullet {
    color: color-mix(in srgb, var(--accent-text) 70%, var(--ink));
}

.md .hljs-title,
.md .hljs-section,
.md .hljs-selector-id,
.md .hljs-selector-class {
    color: var(--ink);
    font-weight: 500;
}

.md .hljs-type,
.md .hljs-variable,
.md .hljs-params,
.md .hljs-property {
    color: color-mix(in srgb, var(--muted) 45%, var(--ink));
}

.md .hljs-emphasis {
    font-style: italic;
}

.md .hljs-strong {
    font-weight: 500;
}

/* ---------- Favoriten ---------- */

.composer-tools .btn-quiet[aria-pressed="true"] {
    color: var(--accent-text);
}

.fav-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 14px 16px 16px;
    border: 1px solid var(--line-soft);
    border-left: 2px solid var(--accent);
    background: var(--panel);
}

.fav-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fav-title,
.fav-label {
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

.fav-filter,
.fav-save input {
    min-width: 0;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--line-faint);
    border-radius: var(--radius-none);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    outline: none;
}

.fav-filter {
    flex: 1;
}

.fav-filter:focus,
.fav-save input:focus {
    border-color: var(--accent);
}

.fav-head .media-save {
    margin-left: 0;
    white-space: nowrap;
}

.fav-close {
    border: 0;
    background: none;
    color: var(--muted);
    font: inherit;
    padding: 4px 6px;
    cursor: pointer;
}

.fav-close:hover {
    color: var(--ink);
}

.fav-save {
    display: grid;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line-faint);
}

.fav-save-row {
    display: flex;
    gap: var(--space-1);
}

.fav-save-row input {
    flex: 1;
}

.fav-save-row .btn {
    min-height: 36px;
}

.fav-preview,
.fav-note {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.fav-list {
    display: grid;
    max-height: min(320px, 40dvh);
    overflow-y: auto;
    border: 1px solid var(--line-faint);
}

.fav-row {
    display: grid;
    gap: 2px;
    padding: 10px 14px;
    border: 0;
    border-bottom: 1px solid var(--line-faint);
    background: none;
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.fav-row:last-child {
    border-bottom: 0;
}

.fav-row:hover,
.fav-row:focus-visible {
    background: var(--surface);
    box-shadow: inset 2px 0 0 var(--accent);
    outline: none;
}

.fav-row-title {
    font-size: 14px;
}

.fav-row-text {
    overflow: hidden;
    color: var(--muted);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Verwaltung in den Einstellungen */

.fav-items {
    display: grid;
    gap: 6px;
}

.fav-item {
    display: grid;
    gap: 6px;
    padding: 12px 14px;
    border: 1px solid var(--line-faint);
}

.fav-item.is-editing {
    border-color: var(--accent);
    background: var(--panel);
}

.fav-item-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px var(--space-2);
}

.fav-item-title {
    flex: 1;
    min-width: 12ch;
    color: var(--ink);
}

.fav-item-meta {
    color: var(--muted);
    font-size: 13px;
}

.fav-item-text {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 7.5em;
    overflow: hidden;
}

.fav-item-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px var(--space-2);
}

.fav-item-actions .media-save {
    margin-left: 0;
}

.fav-item-actions .is-danger {
    color: var(--ink);
    text-decoration-color: var(--ink);
}

@container chat (max-width: 720px) {
    .fav-save-row {
        flex-direction: column;
    }
}

/* ---------- Gespeicherte Chats ---------- */

.chat-body.has-history {
    grid-template-columns: 272px minmax(0, 1fr);
}

.history-toggle {
    display: none;
}

.history {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: var(--space-2);
    min-height: 0;
    padding: var(--space-2) var(--space-2) 0;
    border-right: 1px solid var(--line-faint);
}

.history-head {
    display: grid;
    gap: var(--space-1);
}

.history-filter {
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--line-faint);
    border-radius: var(--radius-none);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    outline: none;
}

.history-filter:focus {
    border-color: var(--accent);
}

.history-list {
    display: grid;
    align-content: start;
    gap: 2px;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: var(--space-3);
}

.history-group {
    padding: 14px 10px 6px;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

.history-group:first-child {
    padding-top: 2px;
}

.history-note {
    margin: 0;
    padding: 4px 10px;
    color: var(--muted);
    font-size: 13px;
}

.history-item {
    display: grid;
}

.history-item.is-active {
    background: var(--panel);
    box-shadow: inset 2px 0 0 var(--accent);
}

.history-link {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    padding: 8px 10px;
    border: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.history-link:hover:not(:disabled) {
    background: var(--panel);
}

.history-link:disabled {
    cursor: default;
}

.history-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-time {
    flex: none;
    color: var(--muted);
    font-size: 12px;
}

.history-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px var(--space-2);
    padding: 0 10px 10px;
}

.history-actions .media-save {
    margin-left: 0;
    font-size: 12px;
}

.history-actions .history-note {
    padding: 0;
    font-size: 12px;
}

.history-actions .is-danger {
    color: var(--ink);
    text-decoration-color: var(--ink);
}

.history-rename {
    display: grid;
    gap: 8px;
    padding: 8px 10px 0;
}

.history-rename input {
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid var(--accent);
    border-radius: var(--radius-none);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    outline: none;
}

.history-rename .history-actions {
    padding: 0 0 10px;
}

/* Freigaben: Hinweis «geteilt» bei eigenen Chats, Besitzer bei Chats anderer, Leiste «nur lesen» statt Eingabefeld. */
.history-shared {
    margin-right: 6px;
    color: var(--accent-text);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.history-group-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-1);
    padding-right: 10px;
}

.history-group-row .media-save {
    margin-left: 0;
    font-size: 12px;
}

.history-item.is-shared .history-link {
    flex-wrap: wrap;
    row-gap: 2px;
}

.history-owner {
    flex-basis: 100%;
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.composer-box[hidden] {
    display: none;
}

.shared-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-1) var(--space-2);
    padding: 10px 10px 10px 16px;
    border: 1px solid var(--line-soft);
    border-left: 2px solid var(--accent);
    background: var(--panel);
}

.shared-bar-text {
    color: var(--muted);
    font-size: 14px;
}

/* Bis 1280 px Breite des Chats liegt die Liste über dem Chat und öffnet über «Chats» im Kopf. */
@container chat (max-width: 1280px) {
    .chat-body.has-history {
        position: relative;
        grid-template-columns: minmax(0, 1fr);
    }

    .history {
        display: none;
        position: absolute;
        inset: 0 auto 0 0;
        width: min(320px, 100%);
        z-index: 16;
        background: var(--panel-raised);
        border-right: 1px solid var(--line-soft);
    }

    .chat-body.history-open .history {
        display: grid;
    }

    .history-toggle {
        display: inline-flex;
    }

    .chat-dismiss.for-history {
        display: block;
    }
}

@container chat (max-width: 1080px) {
    .chat-body.has-history {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Kontakte: Liste, Details, Personen, Adressen, Aktivitäten, Aufgaben, Pipeline ---------- */

.crm-list-head .fm-search {
    flex: 1 1 auto;
}

.crm-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    margin-bottom: var(--space-2);
}

.crm-filters .fm-select {
    min-height: 38px;
    padding: 6px 10px;
}

.crm-filter-check {
    margin-bottom: 0;
}

/* Art des Eintrags als kleines Zeichen vor dem Namen: F für Firma, P für Person. */
.crm-kind {
    flex: none;
    display: grid;
    place-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid var(--line-soft);
    color: var(--muted);
    font-size: 11px;
    letter-spacing: 0.08em;
}

.crm-table tbody tr.is-archived td {
    color: var(--muted);
}

/* Der Name bekommt den meisten Platz und wird abgeschnitten, statt in die nächste Spalte zu laufen. */
.crm-table td:first-child {
    width: 55%;
    overflow: hidden;
}

.crm-more {
    margin-top: var(--space-1);
    font-size: 13px;
}

.crm-kind-switch {
    margin-bottom: var(--space-2);
}

/* Formulare in zwei Spalten, lange Felder über die ganze Breite. */
.crm-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0 var(--space-2);
}

.crm-form-grid > .is-wide {
    grid-column: 1 / -1;
}

/* Felder bleiben in ihrer Spalte, auch Datum und Uhrzeit, die der Browser sonst breiter zeichnet. */
.crm-form-grid > *,
.crm-form-grid .field input,
.crm-form-grid .field select {
    min-width: 0;
}

.crm-form-grid .check {
    margin-bottom: var(--space-1);
}

.crm-form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-1);
}

/* Hinweis auf mögliche Doppeleinträge beim Anlegen. */
.crm-duplicates {
    margin-top: var(--space-1);
    padding: 10px 12px;
    border-left: 2px solid var(--accent);
    background: var(--panel);
}

.crm-duplicates-title {
    margin: 0 0 6px;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

.crm-duplicates ul {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.crm-duplicates li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    font-size: 14px;
}

.crm-duplicates li.is-strong .crm-duplicate-name {
    color: var(--accent-text);
}

.crm-duplicates .btn {
    min-height: 32px;
    margin-left: auto;
}

/* Kontaktwege als Links: Telefon, E-Mail, Webseite, Karte. */
.crm-contact-links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-top: 4px;
    font-size: 14px;
}

.crm-contact-links a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--line-soft);
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}

.crm-contact-links a:hover {
    text-decoration-color: var(--accent);
}

.crm-tabs {
    flex-wrap: wrap;
    row-gap: 0;
}

.crm-detail .fm-prop > textarea {
    grid-column: 2;
    min-height: 72px;
    padding: 6px 10px;
    font-size: 15px;
}

.crm-sub-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    margin-bottom: var(--space-1);
}

.crm-sub-head .check {
    margin-bottom: 0;
}

/* Personen und Adressen als Karten, kantig wie die Marke. */
.crm-card {
    display: grid;
    gap: 6px;
    padding: 12px 14px;
    border: 1px solid var(--line-faint);
}

.crm-card.is-editing {
    border-left: 2px solid var(--accent);
    background: var(--panel);
}

.crm-card.is-archived {
    opacity: 0.6;
}

.crm-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.crm-card-title {
    font-size: 15px;
    overflow-wrap: anywhere;
}

.crm-card-meta {
    font-size: 14px;
}

.crm-card-notes {
    margin: 0;
    font-size: 14px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.crm-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
}

.crm-address-lines {
    display: grid;
    font-size: 14px;
}

.crm-confirm {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    font-size: 13px;
}

/* Änderungsprotokoll: neueste oben, alter Wert durchgestrichen. */
.crm-changes {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.crm-changes li {
    display: grid;
    gap: 2px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line-faint);
    font-size: 14px;
}

.crm-change-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2px 12px;
}

.crm-change-head .t-muted {
    font-size: 13px;
}

.crm-change-values {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    overflow-wrap: anywhere;
}

.crm-change-old {
    color: var(--muted);
    text-decoration: line-through;
}

/* Linkes Fenster mit den Reitern Einträge, Aufgaben und Pipeline: Reiter oben, darunter der Inhalt mit eigener Scrollleiste. */
.pane-body > .crm-navigator {
    flex: 1 1 auto;
    min-height: 0;
}

/* ---------- Bereiche der Agenten: Funktionen und Ergebnisse, im Browser als Fenster, in der App untereinander ---------- */

.pane-body > .area-functions,
.pane-body > .area-results {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.area-functions,
.area-results {
    display: grid;
    align-content: start;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3) var(--space-3);
}

.area-lead,
.area-empty {
    margin: 0;
    font-size: 14px;
}

/* Fest in der Seite: Die Felder scrollen mit dem Fenster, nicht in einem eigenen Kasten. */
.agent-panel.is-embedded .agent-panel-fields {
    max-height: none;
    overflow: visible;
}

.area-run {
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--line-faint);
}

.area-run-input {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    white-space: pre-line;
}

.agent-area-app .area-app-nav {
    margin-bottom: var(--space-2);
}

/* Auswahlliste eines Agenten: Gruppen zum Aufklappen, Einträge zum Anhaken, Suche über alle Gruppen. Die Leiste mit dem
   Knopf bleibt beim Scrollen oben. */
.pick {
    display: grid;
    gap: 12px;
    margin: 4px 0 12px;
    padding: 14px 16px 16px;
    border: 1px solid var(--line-soft);
    border-left: 2px solid var(--accent);
    background: var(--panel);
}

.pick-head {
    display: grid;
    gap: 8px;
}

.pick-title {
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

.pick-note,
.pick-started,
.pick-more {
    margin: 0;
    font-size: 13px;
}

.pick-started {
    color: var(--accent-text);
}

/* Weitere Angaben zu den gewählten Einträgen, bevor der Auftrag startet: das Formular der Fähigkeit unter der Leiste. */
.pick-form {
    display: grid;
    gap: var(--space-1);
    justify-items: start;
}

.pick-form > .agent-panel {
    justify-self: stretch;
}

.pick-bar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    padding: 6px 0;
    background: var(--panel);
}

.pick-count {
    flex: 1 1 auto;
    font-size: 13px;
    color: var(--muted);
}

.pick-groups,
.pick-items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pick-group {
    border-top: 1px solid var(--line-faint);
}

.pick-group-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    width: 100%;
    padding: 10px 2px;
    border: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.pick-group-head:hover .pick-group-title,
.pick-group-head:focus-visible .pick-group-title {
    color: var(--accent-text);
}

.pick-chevron {
    flex: none;
    width: 12px;
    color: var(--muted);
}

.pick-group-title {
    flex: 1 1 auto;
    min-width: 0;
}

.pick-group-count,
.pick-group-picked {
    font-size: 12px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pick-group-picked {
    color: var(--accent-text);
}

.pick-items {
    padding: 0 0 8px 22px;
}

.pick-item .check {
    align-items: flex-start;
    margin: 0;
    padding: 6px 0;
}

.pick-item .check input {
    margin-top: 2px;
}

.pick-item-text {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
}

.pick-item-title {
    font-size: 14px;
}

.pick-item-detail {
    font-size: 12px;
    color: var(--muted);
}

.pick-item.is-chosen .pick-item-title {
    color: var(--accent-text);
}

/* Erste Zeile einer aufgeklappten Gruppe: die ganze Gruppe auf einmal. */
.pick-all {
    margin-bottom: 4px;
    border-bottom: 1px solid var(--line-faint);
}

.pick-all .pick-item-title {
    font-size: 13px;
    letter-spacing: 0.08em;
}

.pick-badge {
    flex: none;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}

.pick-more {
    padding: 0 0 8px 22px;
    color: var(--muted);
}

.agent-area-app .area-functions,
.agent-area-app .area-results {
    padding: 0;
}

.crm-navigator {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
}

.crm-nav-tabs {
    margin: 0;
    padding: 0 var(--space-2);
}

.crm-navigator > .fm-window,
.crm-navigator > .fm-pane {
    min-height: 0;
}

.crm-filter-action {
    min-height: 38px;
    margin-left: auto;
}

.crm-filter-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--muted);
}

.crm-filter-date .input {
    width: auto;
    min-height: 38px;
    padding: 6px 8px;
}

.crm-export {
    margin-left: auto;
}

.crm-overdue {
    color: var(--accent-text);
}

/* Buttons, die wie Links aussehen: Name eines Eintrags, Titel einer Chance. */
.crm-link,
.crm-file-open {
    border: 0;
    background: none;
    padding: 0;
    color: var(--ink);
    font: inherit;
    text-align: left;
    text-decoration: underline;
    text-decoration-color: var(--line-soft);
    text-underline-offset: 3px;
    cursor: pointer;
    overflow-wrap: anywhere;
}

.crm-link:hover,
.crm-file-open:hover {
    text-decoration-color: var(--accent);
}

.crm-sub-head label.btn.is-disabled,
.crm-file-upload.is-disabled {
    opacity: 0.4;
    pointer-events: none;
}

.crm-section-title,
.crm-group-title {
    margin: var(--space-2) 0 var(--space-1);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

.crm-group-title .t-muted {
    margin-left: 6px;
    letter-spacing: 0;
}

/* Grosse Knöpfe für Anrufen, E-Mail und Navigation, etwa in der App. */
.crm-big-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: var(--space-1);
    margin-top: var(--space-2);
}

.crm-big-actions .btn {
    min-height: 52px;
    justify-content: center;
    text-decoration: none;
}

/* Eigene Felder in einer Karte: Bezeichnung und Wert als kurze Liste. */
.crm-field-list {
    display: grid;
    gap: 2px;
    margin: 0;
    font-size: 13px;
}

.crm-field-list > div {
    display: flex;
    flex-wrap: wrap;
    gap: 0 8px;
}

.crm-field-list dt {
    color: var(--muted);
}

.crm-field-list dt::after {
    content: ":";
}

.crm-field-list dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.crm-card-extra {
    margin: 4px 0 var(--space-1);
    padding: 0 14px 8px;
    border-left: 2px solid var(--accent);
    background: var(--panel);
}

/* Dateien an Aktivitäten und Chancen. */
.crm-files {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 16px;
    font-size: 13px;
}

.crm-file {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    min-width: 0;
}

.crm-file a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--line-soft);
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}

.crm-file-actions {
    display: inline-flex;
    gap: 12px;
}

.crm-file-upload {
    cursor: pointer;
}

.crm-documents {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.crm-documents li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2px 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line-faint);
    font-size: 14px;
}

.crm-documents li a {
    color: var(--ink);
    overflow-wrap: anywhere;
}

.crm-documents .t-muted {
    font-size: 12px;
}

.crm-folder-path {
    font-size: 13px;
    overflow-wrap: anywhere;
}

/* Telefon, Datum und Uhrzeit in den Formularen des Bereichs wie die übrigen Felder. */
.crm-form-grid .field input[type="tel"],
.crm-form-grid .field input[type="date"],
.crm-form-grid .field input[type="month"],
.crm-form-grid .field input[type="time"],
.crm-form-grid .field input[type="datetime-local"],
.crm-detail .fm-prop > input[type="tel"] {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-none);
    background: transparent;
    color: var(--ink);
    font: inherit;
}

.crm-form-grid .field input[type="tel"]:focus,
.crm-form-grid .field input[type="date"]:focus,
.crm-form-grid .field input[type="month"]:focus,
.crm-form-grid .field input[type="time"]:focus,
.crm-form-grid .field input[type="datetime-local"]:focus,
.crm-detail .fm-prop > input[type="tel"]:focus {
    outline: none;
    border-color: var(--accent);
}

/* In den Angaben so kompakt wie die Textfelder. */
.crm-detail .fm-tab-body .fm-prop input[type="tel"],
.crm-detail .fm-tab-body .fm-prop input[type="email"] {
    min-height: 36px;
    padding: 6px 10px;
    font-size: 15px;
}

.crm-form-grid .field input:disabled {
    opacity: 0.5;
}

/* Formulare für Aktivitäten: Personen zum Ankreuzen, Folgeaufgaben als Zeilen. */
.crm-checks,
.crm-followups {
    display: flex;
    flex-wrap: wrap;
    gap: 4px var(--space-2);
    margin: 0 0 var(--space-1);
    padding: var(--space-1) 0 0;
    border: 0;
    border-top: 1px solid var(--line-faint);
}

.crm-checks legend,
.crm-followups legend {
    padding: 0;
    margin-bottom: 4px;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
}

.crm-checks .check {
    margin: 0;
}

.crm-followups {
    flex-direction: column;
    align-items: stretch;
}

.crm-followup {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px 160px auto auto;
    align-items: center;
    gap: var(--space-1);
}

.crm-followup .crm-followup-high {
    margin: 0;
    font-size: 14px;
    white-space: nowrap;
}

.crm-followup .input {
    min-height: 38px;
    padding: 6px 10px;
}

.crm-followups > .fm-prop-remove {
    align-self: flex-start;
}

/* Folgeaufgaben in zwei Zeilen, sobald es eng wird: im Fenster des Browsers nach seiner Breite, in der App nach der
   Breite des Bildschirms, dort gibt es kein Fenster. */
@container (max-width: 640px) {
    .crm-followup {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .crm-followup > input[type="text"] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .crm-followup {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .crm-followup > input[type="text"] {
        grid-column: 1 / -1;
    }
}

/* Vorschläge von Agenten: Sprachnotiz, Folgeaufgaben, Visitenkarte. Fortschritt als feine Linie wie im Chat. */
.crm-assist {
    display: grid;
    gap: 6px;
    margin-bottom: var(--space-1);
    padding: 10px 12px;
    border-left: 2px solid var(--line-soft);
    background: var(--panel);
}

.crm-assist-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
}

.crm-assist-actions label.btn {
    cursor: pointer;
}

.crm-assist-actions label.btn.is-disabled {
    opacity: 0.4;
    pointer-events: none;
}

.crm-assist-progress {
    font-size: 14px;
    color: var(--muted);
}

.crm-assist .msg-progress {
    margin-top: 0;
}

.crm-assist .notice {
    margin-bottom: 0;
}

.crm-assist .hint,
.crm-assist-note {
    font-size: 13px;
    color: var(--muted);
}

.crm-assist-note {
    margin: 0 0 var(--space-1);
}

.crm-rec {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: inset 0 0 0 1px var(--accent);
}

.crm-rec .pulse {
    width: 8px;
    height: 8px;
    background: var(--accent);
    clip-path: polygon(2px 0, 100% 0, calc(100% - 2px) 100%, 0 100%);
    animation: pulse 1.2s ease-in-out infinite;
}

/* Neu genannte Personen und die Person von einer Visitenkarte. */
.crm-suggest {
    display: grid;
    gap: 4px;
    margin: 0 0 var(--space-1);
    padding: 8px 12px;
    border-left: 2px solid var(--accent);
    background: var(--panel);
    font-size: 14px;
}

.crm-suggest-title {
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
}

.crm-suggest-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px var(--space-2);
}

.crm-suggest .check {
    margin: 0;
}

/* Abschrift einer Sprachnotiz, aufklappbar unter dem Gesprächsinhalt. */
.crm-transcript {
    margin: 0 0 var(--space-1);
    font-size: 14px;
}

.crm-transcript summary {
    cursor: pointer;
    color: var(--muted);
}

.crm-transcript[open] summary {
    margin-bottom: 4px;
}

/* Unsicher gelesene Angaben einer Visitenkarte, bis der Benutzer sie ändert. */
.field.is-unsure input {
    border-color: var(--accent);
    border-style: dashed;
}

.field.is-unsure .hint {
    color: var(--accent-text);
}

/* Aktivitäten im Verlauf: geplante mit Teal am Rand, abgesagte gedämpft. */
.crm-activity.is-planned {
    border-left: 2px solid var(--accent);
}

.crm-activity.is-cancelled {
    opacity: 0.6;
}

.crm-activity-type {
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
}

.crm-activity-when {
    margin-left: auto;
    font-size: 13px;
}

.crm-opportunity.is-won {
    border-left: 2px solid var(--accent);
}

.crm-opportunity.is-lost {
    opacity: 0.6;
}

.crm-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
}

.crm-amount {
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.crm-stage-select {
    width: auto;
    min-height: 32px;
    padding: 2px 8px;
    font-size: 13px;
}

.crm-close {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
}

.crm-close-reason {
    width: auto;
    min-height: 32px;
    padding: 2px 8px;
    font-size: 13px;
}

/* Aufgaben als Liste: Häkchen links, Titel und Angaben rechts. Überfällige mit Teal am Datum, erledigte durchgestrichen. */
.crm-tasks {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.crm-task {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line-faint);
}

.crm-task .fm-mark {
    margin-top: 2px;
}

.crm-task-main {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.crm-task-title {
    justify-self: start;
    border: 0;
    background: none;
    padding: 0;
    color: var(--ink);
    font: inherit;
    font-size: 15px;
    text-align: left;
    overflow-wrap: anywhere;
}

button.crm-task-title {
    cursor: pointer;
}

button.crm-task-title:hover {
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-underline-offset: 3px;
}

.crm-task-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    font-size: 13px;
}

.crm-task-due {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.crm-task.is-overdue .crm-task-due {
    color: var(--accent-text);
}

.crm-task.is-done .crm-task-title {
    color: var(--muted);
    text-decoration: line-through;
}

.crm-task-edit {
    padding: 6px 0;
}

/* Übersicht eines Eintrags. */
.crm-overview-section {
    margin-bottom: var(--space-2);
}

.crm-overview-section h3 {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

.crm-overview-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-1);
}

.crm-overview-list {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.crm-overview-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--line-faint);
    font-size: 14px;
}

.crm-timeline {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.crm-timeline li {
    display: grid;
    gap: 2px;
    padding: 6px 0 6px 12px;
    border-left: 1px solid var(--line-soft);
    font-size: 14px;
}

.crm-timeline li.is-cancelled {
    opacity: 0.6;
}

.crm-timeline-when {
    font-size: 12px;
}

/* Pipeline: Spalten nebeneinander mit eigener Scrollleiste, Karten kantig. */
.crm-pipeline {
    padding: var(--space-2);
}

.crm-pipeline-total {
    margin: 0 0 var(--space-1);
    font-size: 13px;
}

.crm-board {
    display: flex;
    align-items: flex-start;
    gap: var(--space-1);
    overflow-x: auto;
    padding-bottom: var(--space-1);
}

.crm-column {
    flex: 0 0 240px;
    display: grid;
    gap: var(--space-1);
    align-content: start;
    min-height: 120px;
    padding: var(--space-1);
    border: 1px solid var(--line-faint);
    background: var(--surface);
}

.crm-column.is-drop {
    border-color: var(--accent);
}

.crm-column-head {
    display: grid;
    gap: 2px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line-faint);
    font-size: 12px;
}

.crm-column-title {
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink);
}

.crm-deal {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid var(--line-soft);
    background: var(--panel);
    cursor: grab;
}

.crm-deal.is-dragging {
    opacity: 0.5;
}

.crm-deal-account {
    font-size: 12px;
    color: var(--muted);
}

.crm-deal-title {
    font-size: 14px;
    overflow-wrap: anywhere;
}

.crm-deal-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2px 8px;
    font-size: 13px;
}

.crm-deal-owner {
    font-size: 12px;
}

.crm-deal-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding-top: 4px;
    border-top: 1px solid var(--line-faint);
}

.crm-deal-actions .crm-stage-select {
    flex: 1 1 100%;
}

.crm-today,
.crm-task-list {
    padding: var(--space-2);
}

/* Tagesbriefing oben unter «Heute»: Überblick, Punkte für heute, Termine mit Vorbereitung, Chancen, Einträge ohne
   Kontakt und Erinnerungen. Kantig wie alles andere, die Termine als Karten. */
.crm-briefing {
    display: grid;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--line-faint);
}

.crm-briefing-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px var(--space-1);
}

.crm-briefing-head .crm-group-title {
    margin: 0;
}

.crm-briefing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.crm-briefing-summary {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
}

.crm-briefing-focus,
.crm-briefing-prep {
    display: grid;
    gap: 4px;
    margin: 0;
    padding-left: 18px;
    font-size: 14px;
}

.crm-briefing .crm-group-title {
    margin-bottom: 0;
}

.crm-briefing-visit .crm-card-notes {
    line-height: 1.5;
}

.crm-briefing-form {
    display: block;
    border-bottom: 0;
}

/* Assistent: Frage oben, Antworten darunter, die neueste zuerst. Vorschläge als Karten mit Formular. */
.crm-assist {
    display: grid;
    gap: var(--space-2);
    align-content: start;
    padding: var(--space-2);
}

.crm-assist-ask {
    display: grid;
    gap: var(--space-1);
}

.crm-assist-ask textarea {
    width: 100%;
    resize: vertical;
}

.crm-assist-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
}

.crm-assist-actions .check {
    margin-bottom: 0;
}

.crm-assist-turns {
    display: grid;
    gap: var(--space-2);
}

.crm-assist-turn {
    display: grid;
    gap: var(--space-1);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--line-faint);
}

.crm-assist-question {
    margin: 0;
    font-size: 15px;
    overflow-wrap: anywhere;
}

.crm-assist-question .t-label {
    margin-right: 8px;
}

.crm-assist-turn .md {
    max-width: none;
}

.crm-assist-refs {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    font-size: 14px;
}

.crm-assist-speak {
    justify-self: start;
}

.crm-assist-repeat {
    justify-self: start;
}

.crm-app .crm-assist {
    padding-left: 0;
    padding-right: 0;
}

/* Karte und Tagesroute der Kontakte. Die Karte zeichnet MapLibre, ihre Farben stehen in crm-map.js. Bedienelemente
   und Fenster der Karte in den Farben der Oberfläche, kantig wie alles andere. */
.crm-geo {
    display: grid;
    gap: var(--space-2);
    align-content: start;
    min-height: 0;
    overflow-y: auto;
    padding: 0 var(--space-2) var(--space-2);
}

.crm-app .crm-geo {
    padding-left: 0;
    padding-right: 0;
    overflow: visible;
}

.crm-geo-switch {
    justify-self: start;
}

.crm-geo-view {
    display: grid;
    gap: var(--space-1);
    align-content: start;
    min-width: 0;
}

.crm-geo-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
}

.crm-geo-tools .fm-search {
    flex: 1 1 220px;
}

.crm-geo-count {
    margin-left: auto;
    font-size: 13px;
}

.crm-geo-note {
    margin: 0;
    font-size: 14px;
}

.crm-map {
    position: relative;
    width: 100%;
    height: clamp(280px, 58vh, 640px);
    border: 1px solid var(--line-faint);
    background: var(--panel);
}

/* MapLibre setzt Schrift und Farben der Bedienelemente selbst, deshalb hier mit höherem Gewicht. */
.crm-map.maplibregl-map {
    font-family: var(--font);
}

.crm-map-route {
    height: clamp(240px, 42vh, 480px);
}

.crm-map-pick {
    height: clamp(240px, 40vh, 360px);
}

.crm-map-mini {
    height: 200px;
    margin-bottom: var(--space-1);
}

.crm-map-error {
    margin: 0;
}

.crm-map .maplibregl-ctrl-group,
.crm-map .maplibregl-ctrl.maplibregl-ctrl-attrib.maplibregl-compact {
    border-radius: var(--radius-sm);
    background: var(--panel-raised);
    box-shadow: 0 0 0 1px var(--line-soft);
}

.crm-map .maplibregl-ctrl-group button + button {
    border-top: 1px solid var(--line-faint);
}

.crm-map .maplibregl-ctrl.maplibregl-ctrl-attrib {
    color: var(--muted);
    font-size: 11px;
}

.crm-map .maplibregl-ctrl-attrib a {
    color: var(--muted);
}

/* Die Symbole von MapLibre sind dunkel gezeichnet, im dunklen Thema hell umgekehrt. */
.crm-map .maplibregl-ctrl-icon,
.crm-map .maplibregl-ctrl-attrib-button {
    filter: invert(1) brightness(0.9);
}

:root[data-theme="light"] .crm-map .maplibregl-ctrl-icon,
:root[data-theme="light"] .crm-map .maplibregl-ctrl-attrib-button {
    filter: none;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .crm-map .maplibregl-ctrl-icon,
    :root:not([data-theme]) .crm-map .maplibregl-ctrl-attrib-button {
        filter: none;
    }
}

.crm-map .maplibregl-popup-content {
    padding: 12px 30px 12px 14px;
    border-radius: 0;
    background: var(--panel-raised);
    color: var(--ink);
    box-shadow: 0 0 0 1px var(--line-soft);
}

.crm-map .maplibregl-popup-tip {
    display: none;
}

.crm-map .maplibregl-popup-close-button {
    padding: 2px 8px;
    color: var(--muted);
    font-size: 18px;
}

.crm-map-popup {
    display: grid;
    gap: 4px;
    min-width: 160px;
    font-size: 14px;
}

.crm-map-popup .btn {
    justify-self: start;
    margin-top: 6px;
}

.crm-map-popup-note {
    font-size: 12px;
    color: var(--muted);
}

/* Stecknadel zum Setzen einer Position: Teal mit Spitze unten. */
.crm-map-pin {
    position: relative;
    width: 22px;
    height: 30px;
    background: var(--accent);
    clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
    cursor: grab;
}

.crm-map-pin::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 7px;
    width: 8px;
    height: 8px;
    background: var(--deep-navy);
}

/* In der Nähe: Name und Fahrzeit in einer Zeile, Ort und Aufgabe darunter. */
.crm-nearby-list {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.crm-nearby-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px var(--space-2);
    padding: 8px 0;
    border-bottom: 1px solid var(--line-faint);
    font-size: 14px;
}

.crm-nearby-list li > .crm-link {
    grid-column: 1;
}

.crm-nearby-distance {
    grid-column: 2;
    grid-row: 1;
    color: var(--accent-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.crm-nearby-list li > .t-muted {
    grid-column: 1 / -1;
    font-size: 13px;
}

/* Tagesroute: Eingaben oben, darunter Karte, Zusammenfassung und die Besuche mit Nummer wie auf der Karte. */
.crm-route-start {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.crm-route-start .input {
    flex: 1 1 200px;
    min-width: 0;
}

.crm-route-start .crm-route-country {
    flex: 0 1 170px;
}

.crm-route-start-label {
    font-size: 13px;
}

.crm-route-remember {
    display: flex;
    flex-wrap: wrap;
    gap: 4px var(--space-2);
}

.crm-route-remember:empty {
    display: none;
}

.crm-route-hits {
    display: grid;
    gap: 4px;
    margin: 0 0 var(--space-1);
    padding: 0;
    list-style: none;
    font-size: 14px;
}

.crm-route-result {
    display: grid;
    gap: var(--space-1);
}

.crm-route-summary {
    margin: 0;
    font-size: 15px;
}

.crm-route-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
}

.crm-route-stops {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.crm-route-stop {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: var(--space-1);
    align-items: start;
    padding: 10px 0;
    border-bottom: 1px solid var(--line-faint);
    font-size: 14px;
}

.crm-route-number {
    display: grid;
    place-items: center;
    width: 26px;
    height: 24px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 12px;
    font-weight: 600;
    clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}

.crm-route-body {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.crm-route-body .crm-link {
    justify-self: start;
}

.crm-route-body .t-muted {
    font-size: 13px;
}

.crm-route-move {
    display: flex;
    gap: 2px;
}

.crm-route-move .btn {
    min-width: 36px;
    padding: 0 8px;
}

/* Datum mit Uhrzeit, wo die Oberfläche die Auswahl selbst anbietet (App): Wert als Knopf wie ein Eingabefeld, daneben
   ✕ zum Leeren. */
.crm-datetime {
    display: flex;
    gap: var(--space-1);
    align-items: stretch;
    min-width: 0;
}

.crm-datetime-value {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    cursor: pointer;
}

.crm-datetime-value.is-empty {
    color: var(--muted);
}

.crm-datetime-clear {
    min-width: 40px;
    padding: 0 8px;
}

/* Datums- und Zeitfelder (DateTimeInput) mit eigener Auswahl, in der App die Dialoge von Android: Wert als Knopf wie ein
   Eingabefeld, ✕ zum Leeren rechts im Feld. Trägt das Feld selbst die Klasse input, zeichnet nur der Knopf den Rahmen. */
.dt-pick {
    position: relative;
    display: flex;
    align-items: stretch;
    min-width: 0;
}

span.dt-pick.input {
    min-height: 0;
    padding: 0;
    border: 0;
}

.dt-pick-value {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dt-pick-value:disabled {
    cursor: default;
}

.dt-pick-value.is-empty {
    color: var(--muted);
}

.dt-pick.can-clear .dt-pick-value {
    padding-right: 40px;
}

.dt-pick-clear {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    min-width: 40px;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

/* In den Angaben so kompakt wie die Textfelder. */
.fm-tab-body .fm-prop .dt-pick-value {
    min-height: 36px;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 10px;
    font-size: 15px;
}

/* Touren über mehrere Tage: Tage als Reiter, die bei vielen Tagen umbrechen, herausgenommene Besuche blass. */
.crm-tour-progress {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    font-size: 14px;
}

.crm-tour-days {
    flex-wrap: wrap;
    justify-self: start;
    max-width: 100%;
}

.crm-tour-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 2px var(--space-1);
    font-size: 13px;
}

.crm-route-stop.is-removed .crm-route-body,
.crm-route-stop.is-removed .crm-route-number {
    opacity: 0.45;
}

.crm-tour-block {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
}

.crm-tour-unplanned summary {
    cursor: pointer;
    font-size: 14px;
}

/* Position einer Adresse: Genauigkeit und Setzen von Hand. */
.crm-geo-quality {
    font-size: 13px;
    color: var(--muted);
}

.crm-geo-quality.is-rough {
    color: var(--accent-text);
}

.crm-geo-pick {
    display: grid;
    gap: var(--space-1);
    margin-top: var(--space-1);
}

/* Import in der Administration. */
.crm-import-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px var(--space-3);
    margin: 0 0 var(--space-1);
    padding: 0;
    list-style: none;
}

.crm-import-messages {
    max-height: 320px;
    overflow-y: auto;
    margin: 0;
    padding: 8px 12px 8px 28px;
    border: 1px solid var(--line-faint);
    font-size: 13px;
}

/* ---------- Kontakte: Unterwegs, Fahrmodus und Berichte ---------- */

/* Sechs Reiter im linken Fenster: Sie brechen um, statt aus dem Fenster zu laufen. */
.crm-nav-tabs {
    flex-wrap: wrap;
    row-gap: 0;
}

.crm-travel-head,
.crm-travel-period {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-1) var(--space-2);
}

.crm-month {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.crm-month .btn {
    min-width: 40px;
    justify-content: center;
}

.crm-month-label {
    min-width: 9em;
    text-align: center;
    font-size: 15px;
}

.crm-period-line {
    margin: 0;
    font-size: 13px;
}

.crm-trip-list,
.crm-time-blocks {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.crm-trip {
    display: grid;
    gap: 2px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line-faint);
    font-size: 14px;
}

.crm-trip.is-running {
    padding-left: 10px;
    border-left: 2px solid var(--accent);
}

.crm-trip-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
}

.crm-trip-km {
    font-variant-numeric: tabular-nums;
}

.crm-trip-places {
    overflow-wrap: anywhere;
}

.crm-trip-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    font-size: 13px;
}

.crm-trip-gap {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    padding: 8px 10px;
    border: 1px dashed var(--line-soft);
    color: var(--muted);
    font-size: 13px;
}

/* Kleine Marke an einer Zeile, etwa korrigiert oder Anlass fehlt. */
.crm-flag {
    padding: 0 6px;
    border: 1px solid var(--line-soft);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.crm-flag.is-warn {
    border-color: var(--accent);
    color: var(--accent-text);
}

.crm-trip-running,
.crm-vehicle-form,
.crm-review {
    gap: var(--space-1);
}

.crm-time-day {
    display: grid;
    gap: 4px;
    padding: 8px 0 10px;
    border-bottom: 1px solid var(--line-faint);
}

.crm-time-blocks li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    padding: 4px 0 4px 10px;
    border-left: 2px solid var(--line-soft);
    font-size: 14px;
}

.crm-time-blocks li.is-break {
    border-left-style: dashed;
    color: var(--muted);
}

.crm-time-blocks li.is-running {
    border-left-color: var(--accent);
}

.crm-time-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px 10px;
}

.crm-time-blocks .crm-entry-history {
    flex-basis: 100%;
}

/* Stempeln: Stand und Knöpfe in einer Zeile, im Fahrmodus gross. */
.crm-clock {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    padding: 10px 12px;
    border: 1px solid var(--line-faint);
}

.crm-clock-state {
    flex: 1 1 12em;
    font-size: 14px;
}

.crm-clock-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.crm-clock .notice {
    flex-basis: 100%;
    margin: 0;
}

.crm-clock.is-large .btn {
    min-height: 52px;
    min-width: 7em;
    justify-content: center;
}

.crm-expense-totals {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px var(--space-2);
    margin: 0;
    font-size: 14px;
}

.crm-expense-totals dt {
    color: var(--muted);
}

.crm-expense-totals dd {
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.crm-expense-totals .is-total {
    color: var(--ink);
    font-size: 15px;
}

/* Vom Agenten unterschiedlich gelesen: bitte mit dem Beleg vergleichen. */
.crm-form-grid .field.is-unsure input {
    box-shadow: inset 0 -2px 0 var(--accent);
}

.crm-form-grid .field.is-unsure label::after {
    content: " · prüfen";
    color: var(--accent-text);
}

.crm-picker-chosen {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    min-height: 38px;
    padding-top: 8px;
}

.crm-picker-hits {
    display: grid;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--line-faint);
}

.crm-picker-hits li {
    padding: 6px 10px;
    border-bottom: 1px solid var(--line-faint);
}

.crm-picker-hits li:last-child {
    border-bottom: 0;
}

.crm-dictation {
    gap: var(--space-1);
}

.crm-dictation-audio {
    width: 100%;
}

.crm-dictation-discard {
    justify-self: start;
}

.crm-report {
    padding-top: var(--space-1);
    border-top: 1px solid var(--line-faint);
    overflow-x: auto;
}

/* Berichte nutzen die ganze Breite. Zellen brechen nur zwischen Wörtern, breite Tabellen lassen sich seitlich schieben. */
.crm-report .md {
    max-width: none;
}

.crm-report .md td {
    overflow-wrap: normal;
}

/* Fahrmodus: grosse Flächen, viel Kontrast, nichts zum Lesen während der Fahrt. */
.crm-drive {
    display: grid;
    gap: var(--space-2);
    align-content: start;
    min-height: calc(100vh - 120px);
}

.crm-drive-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
}

.crm-drive-top .crm-clock {
    flex: 1 1 auto;
}

.crm-drive-clock {
    font-size: 28px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}

.crm-drive-intro {
    display: grid;
    gap: var(--space-1);
}

.crm-drive-stop {
    display: grid;
    gap: 4px;
    padding: var(--space-2);
    border-left: 2px solid var(--accent);
    background: var(--panel);
}

.crm-drive-label {
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

.crm-drive-title {
    font-size: 26px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.crm-drive-sub {
    font-size: 16px;
}

.crm-drive-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.crm-drive-actions .btn {
    flex: 1 1 140px;
    min-height: 72px;
    justify-content: center;
    padding: 0 14px;
    font-size: 16px;
    letter-spacing: 0.06em;
    text-align: center;
    text-decoration: none;
}

.crm-drive-actions .btn-primary {
    padding: 0 calc(var(--cut) + 8px);
}

.crm-drive-actions.is-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.crm-drive-form {
    display: grid;
    gap: var(--space-1);
}

.crm-drive-form label {
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

.crm-drive-input {
    min-height: 56px;
    font-size: 20px;
}

.crm-drive-input option {
    background: var(--surface);
}

.crm-drive-purpose button {
    min-height: 52px;
    font-size: 15px;
}

.crm-drive-note {
    margin: 0;
    font-size: 14px;
}

/* Antwort des Assistenten im Fahrmodus: gross genug für einen kurzen Blick, gesprochen wird sie ohnehin. */
.crm-drive-answer {
    font-size: 17px;
    line-height: 1.45;
}

.crm-drive-start {
    width: 100%;
    min-height: 56px;
    justify-content: center;
    font-size: 17px;
}

/* Kontakte in der App: Reiter als segmentierte Leiste in zwei Zeilen, Einträge über die ganze Seite. */
.crm-app .crm-app-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: var(--space-2);
}

/* Acht Reiter in zwei Zeilen passen auch auf schmale Handys (360 Pixel). */
.crm-app .crm-app-nav button {
    padding: 0 6px;
}

.crm-app .crm-app-nav button:nth-child(-n + 4) {
    border-bottom: 1px solid var(--line-soft);
}

.crm-app .crm-app-nav button:nth-child(4n) {
    border-right: 0;
}

.crm-app .crm-app-back {
    margin-bottom: var(--space-1);
}

.crm-app .fm-details,
.crm-app .crm-pipeline,
.crm-app .crm-today,
.crm-app .crm-task-list {
    padding-left: 0;
    padding-right: 0;
}

.crm-app .fm-window {
    min-height: 60vh;
}

/* ---------- Startseite: Aufgaben, Termine, Nachrichten und wer online ist ---------- */

/* Kopf: Datum, Gruss und der Tag in drei kurzen Sätzen. Dahinter eine gebogene Lichtkante wie im Bild der Marke:
   Licht fällt als schmale Kante auf die dunkle Fläche. */
.team-hero {
    position: relative;
    overflow: hidden;
    padding: var(--space-2) 0 var(--space-3);
    margin-bottom: var(--space-2);
}

.team-hero::before {
    content: "";
    position: absolute;
    top: 22px;
    right: -28%;
    width: 92%;
    aspect-ratio: 1;
    border-radius: 50%;
    border-top: 1px solid var(--edge-light);
    -webkit-mask-image: linear-gradient(to left, transparent 0%, #000 26%, #000 46%, transparent 78%);
    mask-image: linear-gradient(to left, transparent 0%, #000 26%, #000 46%, transparent 78%);
    pointer-events: none;
}

.team-hero > * {
    position: relative;
}

.team-hero-date {
    margin: 0 0 var(--space-1);
}

.team-hero-title {
    margin: 0;
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 400;
    line-height: 1.1;
}

.team-rhythm {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 24px;
    margin: var(--space-2) 0 0;
    font-size: 18px;
    line-height: 1.4;
    color: var(--muted);
}

.team-rhythm-count {
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.team-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.team-notice .btn {
    min-height: 36px;
}

/* Flächen der Startseite: Haarlinie, oben rechts angeschnitten wie die Fenster, Titel mit dem kurzen Strich davor, der
   im Fenster, in dem gerade gearbeitet wird, Teal wird. */
.team-tile {
    position: relative;
    display: grid;
    align-content: start;
    gap: var(--space-1);
    min-width: 0;
    padding: 20px 24px 24px;
    border: 1px solid var(--line-faint);
    background: var(--panel);
}

/* Oben rechts schräg angeschnitten wie die Fenster (.pane): aufgelegte Ecke in der Grundfarbe, kein clip-path, damit
   die Dialoge der Startseite nicht mit abgeschnitten werden. */
.team-tile::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: -1px;
    right: -1px;
    width: calc(var(--cut) + 1px);
    height: calc(var(--cut) + 1px);
    background: linear-gradient(to top right, transparent calc(50% - 0.5px), var(--line-soft) calc(50% - 0.5px), var(--line-soft) calc(50% + 0.5px), var(--surface) calc(50% + 0.5px));
    pointer-events: none;
}

.team-tile-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-1);
    min-height: 32px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line-faint);
}

.team-tile-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

.team-tile-title::before {
    content: "";
    flex: none;
    width: 14px;
    height: 2px;
    background: var(--line-soft);
    clip-path: polygon(2px 0, 100% 0, calc(100% - 2px) 100%, 0 100%);
    transition: background-color 160ms ease;
}

.team-tile:focus-within .team-tile-title::before {
    background: var(--accent);
}

.team-tile-title .t-muted {
    letter-spacing: 0;
}

.team-tile-action {
    min-height: 32px;
    padding: 0 12px;
    font-size: 11px;
}

.team-tile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.team-empty {
    margin: var(--space-1) 0 0;
    font-size: 15px;
    color: var(--muted);
}

/* Aufbau: oben der Tag über die ganze Breite, darunter links Aufgaben und wer online ist, rechts die Nachrichten. */
.team-day {
    margin-bottom: var(--space-2);
}

.team-layout {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-2);
    align-items: start;
}

.team-main,
.team-side {
    display: grid;
    gap: var(--space-2);
    align-content: start;
    min-width: 0;
}

.team-layout.is-without-crm {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

/* Der Tag als Band: Stundenraster, Termine als Blöcke, Aufgaben mit Uhrzeit als Marke, jetzt als Teal-Linie. Vergangenes
   tritt zurück, was gerade läuft, trägt die Teal-Kante. Auf schmalen Bildschirmen lässt sich das Band seitlich schieben. */
.team-band-scroll {
    overflow-x: auto;
    margin-top: 4px;
}

.team-band {
    position: relative;
    padding-top: 24px;
}

.team-band-hours {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 18px;
}

.team-band-hour {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.team-band-hour:first-child {
    transform: none;
}

.team-band-hour:last-child {
    transform: translateX(-100%);
}

.team-band-track {
    position: relative;
    min-height: 82px;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-faint);
    background-image: repeating-linear-gradient(to right, var(--line-faint) 0 1px, transparent 1px calc(100% / var(--hours)));
}

.team-band-past {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background: color-mix(in srgb, var(--surface) 55%, transparent);
    pointer-events: none;
}

.team-band-item {
    position: absolute;
    display: grid;
    align-content: center;
    gap: 1px;
    height: 44px;
    margin-top: 8px;
    padding: 0 10px 0 12px;
    border: 0;
    border-left: 2px solid var(--line-soft);
    background: var(--panel-raised);
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.team-band-item:hover,
.team-band-item:focus-visible {
    border-left-color: var(--ink);
}

.team-band-item.is-now {
    border-left-color: var(--accent);
}

.team-band-item.is-past {
    opacity: 0.55;
}

.team-band-time {
    font-size: 11px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* Der Titel darf über einen kurzen Block hinausreichen, die Zeile hält dafür Platz frei. */
.team-band-subject {
    font-size: 14px;
    white-space: nowrap;
}

.team-band-mark {
    position: absolute;
    bottom: 9px;
    width: 14px;
    height: 10px;
    margin-left: -7px;
    padding: 0;
    border: 0;
    background: var(--ink);
    clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
    cursor: pointer;
}

.team-band-mark.is-passed {
    background: var(--accent);
}

.team-band-now {
    position: absolute;
    top: -24px;
    bottom: 0;
    z-index: 1;
    border-left: 1px solid var(--accent);
    pointer-events: none;
}

.team-band-now > span {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 6px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 11px;
    line-height: 17px;
    font-variant-numeric: tabular-nums;
}

.team-band-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    font-size: 14px;
    color: var(--muted);
    pointer-events: none;
}

.team-band-other {
    display: grid;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.team-band-other-open {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 14px;
    width: 100%;
    padding: 8px 0;
    border: 0;
    border-top: 1px solid var(--line-faint);
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.team-band-other-when {
    min-width: 96px;
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--muted);
}

/* Aufgaben nach Fälligkeit. Die Marke links: Teal überfällig, voll wichtig, sonst Linie. Ein Klick öffnet die Aufgabe. */
.team-group-title {
    margin: 14px 0 2px;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

.team-group-title .t-muted {
    margin-left: 6px;
    letter-spacing: 0;
}

.team-tasks-list {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.team-task-open {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 50px;
    padding: 8px 8px 8px 0;
    border: 0;
    border-bottom: 1px solid var(--line-faint);
    background: none;
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.team-task-open:hover,
.team-task-open:focus-visible {
    background: var(--panel-raised);
}

.team-task-mark {
    width: 14px;
    height: 8px;
    background: var(--line-soft);
    clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
}

.team-task.is-high .team-task-mark {
    background: var(--ink);
}

.team-task.is-overdue .team-task-mark {
    background: var(--accent);
}

.team-task-main {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.team-task-title {
    font-size: 15px;
    overflow-wrap: anywhere;
}

.team-task-sub {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    font-size: 13px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.team-task-flag {
    padding: 0 6px;
    border: 1px solid var(--line-soft);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
}

.team-task-due {
    font-size: 13px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.team-task.is-overdue .team-task-due {
    color: var(--accent-text);
}

/* Kürzel einer Person: kantig, oben rechts angeschnitten wie das Zeichen. Online trägt es unten eine Teal-Kante. */
.team-mono {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--panel-raised);
    color: var(--ink);
    font-size: 12px;
    letter-spacing: 0.08em;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}

.team-mono.is-online {
    box-shadow: inset 0 -2px 0 var(--accent);
}

.team-people,
.team-conversations {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.team-person {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 8px 0;
}

.team-person + .team-person {
    border-top: 1px solid var(--line-faint);
}

.team-person-main {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.team-person-name {
    justify-self: start;
    font-size: 15px;
}

.team-where {
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--muted);
}

/* Gespräche: Kürzel, Name und Zeit, darunter die letzte Nachricht. */
.team-conversation-open {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
    padding: 10px 0;
    border: 0;
    border-bottom: 1px solid var(--line-faint);
    background: none;
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.team-conversation:last-child .team-conversation-open {
    border-bottom: 0;
}

.team-conversation-main {
    display: grid;
    flex: 1 1 auto;
    gap: 2px;
    min-width: 0;
}

.team-conversation-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.team-conversation-name {
    min-width: 0;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-conversation-open:hover .team-conversation-name {
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-underline-offset: 3px;
}

.team-conversation-time {
    flex: none;
    font-size: 12px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.team-conversation-text {
    min-width: 0;
    font-size: 14px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-conversation.is-unread .team-conversation-name {
    font-weight: 500;
}

.team-conversation.is-unread .team-conversation-text {
    color: var(--ink);
}

/* Neue Nachricht unter den Gesprächen: Empfänger, Text, Senden. */
.team-quick {
    display: grid;
    gap: var(--space-1);
    margin-top: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--line-soft);
}

.team-quick .notice {
    margin-bottom: 0;
}

.team-quick select option {
    background: var(--surface);
}

/* Ungelesene Nachrichten: kleines schräges Feld in Teal, geschnitten wie das Zustandszeichen. */
.team-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 16px;
    padding: 0 7px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    font-variant-numeric: tabular-nums;
    clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}

.topbar-nav a .team-count {
    margin-left: 8px;
    vertical-align: 1px;
}

/* Gespräch mit einer Person und Aufgabe an sie, im Dialog. */
.team-dialog {
    display: grid;
    gap: var(--space-2);
}

.team-dialog .fm-dialog-actions {
    margin-top: 0;
}

.team-dialog-actions {
    flex-wrap: wrap;
}

/* Verweise an den Ort, an dem eine Aufgabe oder ein Termin eigentlich liegt. */
.team-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 24px;
    font-size: 14px;
}

/* Angaben einer Aufgabe oder eines Termins: enger als auf den Seiten der Einstellungen. */
.team-facts {
    grid-template-columns: minmax(110px, auto) minmax(0, 1fr);
}

.team-facts dt,
.team-facts dd {
    padding: 8px 0;
}

.team-facts dd {
    overflow-wrap: anywhere;
}

.team-dialog .notice {
    margin-bottom: 0;
}

.team-dialog-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
}

.team-dialog-head h2 {
    margin: 0;
    overflow-wrap: anywhere;
}

/* Verlauf: Die neueste Nachricht steht unten und bleibt ohne Skript sichtbar (umgekehrte Reihenfolge). */
.team-thread {
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    min-height: 160px;
    max-height: min(52vh, 480px);
    overflow-y: auto;
    padding: var(--space-1);
    border: 1px solid var(--line-faint);
    background: var(--surface);
}

.team-thread > p {
    margin: auto 0;
    text-align: center;
}

.team-msg {
    display: grid;
    gap: 2px;
    align-self: flex-start;
    max-width: 78%;
    padding: 8px 12px;
    border: 1px solid var(--line-faint);
    background: var(--panel);
}

.team-msg.is-mine {
    align-self: flex-end;
    border-color: transparent;
    border-right: 2px solid var(--accent);
    background: var(--panel-raised);
}

.team-msg-text {
    margin: 0;
    font-size: 15px;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.team-msg-meta {
    font-size: 11px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.team-msg.is-mine .team-msg-meta {
    text-align: right;
}

.team-compose {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--space-1);
}

.team-compose textarea {
    resize: vertical;
    min-height: 44px;
}

.team-compose-note {
    margin: 0;
}

@media (max-width: 960px) {
    .team-layout,
    .team-layout.is-without-crm {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Untereinander: Aufgaben, dann Nachrichten, dann wer online ist. */
    .team-main,
    .team-side {
        display: contents;
    }

    .team-tasks {
        order: 1;
    }

    .team-messages {
        order: 2;
    }

    .team-online {
        order: 3;
    }
}

@media (max-width: 720px) {
    .team-hero {
        padding: 0 0 var(--space-2);
    }

    .team-hero::before {
        display: none;
    }

    /* Das ganze Band auf einen Blick: nur jede zweite Stunde beschriftet. */
    .team-band-hour:nth-child(even) {
        display: none;
    }

    .team-rhythm {
        font-size: 16px;
        gap: 2px 16px;
    }

    .team-tile {
        padding: 14px 14px 18px;
    }

    .team-msg {
        max-width: 88%;
    }

    .team-compose {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0ms !important;
        animation-duration: 0ms !important;
    }
}