/*
 * MeoloTICKET – Oberfläche
 * Ergänzt das Filament-Design, von Hand geschrieben, kein Build-Schritt mit npm.
 * Farben kommen aus den Filament-Variablen (--primary-*, --gray-*), die im
 * AdminPanelProvider festgelegt werden. So passt der Dunkelmodus automatisch.
 */

:root {
    --meolo-radius: .75rem;
    --meolo-rand: color-mix(in oklab, var(--gray-950) 8%, transparent);
    --meolo-schatten: 0 1px 2px 0 rgb(15 23 42 / .04), 0 1px 3px 0 rgb(15 23 42 / .06);
    --meolo-schatten-hoch: 0 4px 6px -1px rgb(15 23 42 / .06), 0 10px 24px -6px rgb(15 23 42 / .10);
}
.dark {
    --meolo-rand: color-mix(in oklab, white 9%, transparent);
    --meolo-schatten: 0 1px 2px 0 rgb(0 0 0 / .3);
    --meolo-schatten-hoch: 0 10px 30px -10px rgb(0 0 0 / .6);
}

/* ---------- Grundfläche ---------- */
.fi-body { background-color: var(--gray-50); font-feature-settings: "cv11", "ss01"; }
.fi-body:where(.dark, .dark *) { background-color: var(--gray-950); }
::selection { background: color-mix(in oklab, var(--primary-500) 25%, transparent); }

/* ---------- Kopfleiste ---------- */
.fi-topbar {
    background-color: color-mix(in oklab, white 82%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    box-shadow: none;
    border-bottom: 1px solid var(--meolo-rand);
}
.fi-topbar:where(.dark, .dark *) { background-color: color-mix(in oklab, var(--gray-900) 80%, transparent); }
.fi-topbar .fi-logo { gap: .5rem; }
.fi-global-search-field .fi-input-wrp { border-radius: .625rem; background-color: var(--gray-100); box-shadow: none; }
.fi-global-search-field .fi-input-wrp:where(.dark, .dark *) { background-color: color-mix(in oklab, white 6%, transparent); }
.fi-global-search-field .fi-input-wrp:focus-within { background-color: white; box-shadow: 0 0 0 2px var(--primary-500); }
.fi-global-search-field .fi-input-wrp:where(.dark, .dark *):focus-within { background-color: var(--gray-900); }
@media (min-width: 1024px) { .fi-global-search-field { min-width: 22rem; } }

/* Knopf „Neu“ in der Kopfleiste */
.meolo-neu { display: flex; align-items: center; }
.meolo-neu-knopf {
    display: inline-flex; align-items: center; gap: .375rem; height: 2.25rem; padding: 0 .875rem;
    border-radius: .625rem; background: var(--primary-600); color: white; font-size: .875rem; font-weight: 600;
    box-shadow: 0 1px 2px rgb(0 0 0 / .1), inset 0 1px 0 rgb(255 255 255 / .12); transition: background-color .15s;
}
.meolo-neu-knopf:hover { background: var(--primary-500); }
.meolo-neu-knopf:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; }
.meolo-neu-knopf svg { width: 1.125rem; height: 1.125rem; }
.meolo-taste {
    display: inline-flex; align-items: center; padding: 0 .3rem; min-width: 1.25rem; height: 1.25rem; justify-content: center;
    border-radius: .3rem; border: 1px solid var(--meolo-rand); background: var(--gray-50); color: var(--gray-500);
    font: 500 .6875rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.meolo-taste:where(.dark, .dark *) { background: color-mix(in oklab, white 6%, transparent); color: var(--gray-400); }
@media (max-width: 640px) { .meolo-neu-text { display: none; } .meolo-neu-knopf { padding: 0 .5rem; } }

/* ---------- Seitenleiste ---------- */
@media (min-width: 1024px) {
    .fi-sidebar { background-color: white; border-inline-end: 1px solid var(--meolo-rand); }
    .fi-sidebar:where(.dark, .dark *) { background-color: var(--gray-900); }
}
.fi-sidebar-nav { padding-top: 1.25rem; row-gap: 1.25rem; }
.fi-sidebar-nav-groups { row-gap: 1.25rem; }
.fi-sidebar-group-label {
    font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-400);
}
.fi-sidebar-group-btn { padding-block: .125rem; }
.fi-sidebar-group-items { row-gap: .125rem; }
.fi-sidebar-item-btn { padding: .4375rem .625rem; border-radius: .5rem; transition: background-color .12s, color .12s; }
.fi-sidebar-item-btn:hover { background-color: var(--gray-100); }
.fi-sidebar-item-btn:where(.dark, .dark *):hover { background-color: color-mix(in oklab, white 5%, transparent); }
.fi-sidebar-item-label { font-size: .875rem; font-weight: 500; color: var(--gray-700); }
.fi-sidebar-item-label:where(.dark, .dark *) { color: var(--gray-300); }
.fi-sidebar-item-icon { width: 1.25rem; height: 1.25rem; color: var(--gray-400); }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background-color: var(--primary-50); box-shadow: inset 3px 0 0 var(--primary-600); }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn:where(.dark, .dark *) { background-color: color-mix(in oklab, var(--primary-500) 14%, transparent); box-shadow: inset 3px 0 0 var(--primary-400); }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label { color: var(--primary-700); font-weight: 600; }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label:where(.dark, .dark *) { color: var(--primary-300); }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon { color: var(--primary-600); }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon:where(.dark, .dark *) { color: var(--primary-400); }
.fi-sidebar-item-badge-ctn .fi-badge { border-radius: 9999px; min-width: 1.5rem; justify-content: center; }
.meolo-sidebar-fuss { padding: .75rem 1.25rem 1rem; font-size: .75rem; color: var(--gray-400); display: flex; justify-content: space-between; gap: .5rem; }
.meolo-sidebar-fuss a:hover { color: var(--primary-600); }

/* ---------- Seitenkopf ---------- */
.fi-header-heading { font-size: 1.625rem; line-height: 2rem; letter-spacing: -.02em; font-weight: 700; }
@media (min-width: 640px) { .fi-header-heading { font-size: 1.875rem; line-height: 2.25rem; } }
.fi-header-subheading { color: var(--gray-500); }
.fi-breadcrumbs-item-label { font-size: .8125rem; }

/* ---------- Karten, Abschnitte, Tabellen ---------- */
.fi-section:not(.fi-section-not-contained):not(.fi-aside),
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-sc-tabs.fi-contained,
.fi-fo-repeater-item {
    border-radius: var(--meolo-radius);
    box-shadow: var(--meolo-schatten), 0 0 0 1px var(--meolo-rand);
}
.fi-section-header-heading { font-size: .9375rem; font-weight: 600; letter-spacing: -.005em; }
.fi-section-header-description { font-size: .8125rem; }

/* Angaben mit Bezeichnung links: feste Spalte, damit auch „Ansprechpartner“ Platz hat */
@media (min-width: 640px) {
    .fi-in-entry.fi-in-entry-has-inline-label { grid-template-columns: 8.5rem minmax(0, 1fr); column-gap: .75rem; }
    .fi-in-entry.fi-in-entry-has-inline-label .fi-in-entry-content-col { grid-column: auto; }
}
.fi-in-entry-has-inline-label .fi-in-entry-label { color: var(--gray-500); font-weight: 500; }

/* Tabellen: ruhiger Kopf, klare Zeilen, Hover zum Anklicken */
.fi-ta-header-cell {
    background-color: var(--gray-50); color: var(--gray-500);
    font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
    padding-block: .625rem;
}
.fi-ta-header-cell:where(.dark, .dark *) { background-color: color-mix(in oklab, white 3%, transparent); color: var(--gray-400); }
.fi-ta-header-cell-sort-btn { text-transform: inherit; letter-spacing: inherit; }
.fi-ta-row { transition: background-color .1s; }
.fi-ta-row.fi-clickable:hover, .fi-ta-row:has(a.fi-ta-record-url):hover { background-color: color-mix(in oklab, var(--primary-500) 5%, transparent); }
.fi-ta-text:not(.fi-inline) { padding-block: .75rem; }
.fi-ta-text-description { font-size: .8125rem; color: var(--gray-500); }
.fi-ta-search-field .fi-input-wrp { border-radius: .625rem; }
.fi-ta-header-toolbar { padding-block: .625rem; }

/* Reiter (Filter-Tabs über Tabellen, Tabs in der Kundenakte) */
.fi-tabs:not(.fi-vertical) { padding: .25rem; gap: .125rem; border-radius: .75rem; background-color: var(--gray-100); box-shadow: none; }
.fi-tabs:not(.fi-vertical):where(.dark, .dark *) { background-color: color-mix(in oklab, white 5%, transparent); }
.fi-tabs:not(.fi-vertical) .fi-tabs-item { border-radius: .5rem; padding: .375rem .75rem; }
.fi-tabs:not(.fi-vertical) .fi-tabs-item-label { font-size: .875rem; font-weight: 500; color: var(--gray-600); }
.fi-tabs:not(.fi-vertical) .fi-tabs-item-label:where(.dark, .dark *) { color: var(--gray-400); }
.fi-tabs:not(.fi-vertical) .fi-tabs-item.fi-active { background-color: white; box-shadow: 0 1px 2px rgb(15 23 42 / .08), 0 0 0 1px var(--meolo-rand); }
.fi-tabs:not(.fi-vertical) .fi-tabs-item.fi-active:where(.dark, .dark *) { background-color: var(--gray-800); }
.fi-tabs:not(.fi-vertical) .fi-tabs-item.fi-active .fi-tabs-item-label { color: var(--gray-950); font-weight: 600; }
.fi-tabs:not(.fi-vertical) .fi-tabs-item.fi-active .fi-tabs-item-label:where(.dark, .dark *) { color: white; }

/* ---------- Knöpfe, Badges, Eingabefelder ---------- */
.fi-btn { border-radius: .625rem; font-weight: 600; }
.fi-btn:not(.fi-outlined).fi-color { box-shadow: 0 1px 2px rgb(0 0 0 / .08), inset 0 1px 0 rgb(255 255 255 / .12); }
.fi-badge { border-radius: 9999px; padding-inline: .5rem; font-weight: 500; }
.fi-input-wrp { border-radius: .625rem; }
.fi-input-wrp:focus-within { box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary-500) 18%, transparent), 0 0 0 1px var(--primary-500); }
.fi-fo-field-label-content { font-weight: 500; }
.fi-dropdown-panel { border-radius: .75rem; box-shadow: var(--meolo-schatten-hoch), 0 0 0 1px var(--meolo-rand); }
.fi-modal-window { border-radius: 1rem; }

/* ---------- Kennzahlen auf dem Dashboard ---------- */
.fi-wi-stats-overview-stat { padding: 1.25rem 1.5rem; transition: box-shadow .15s, transform .15s; }
a.fi-wi-stats-overview-stat:hover { box-shadow: var(--meolo-schatten-hoch), 0 0 0 1px color-mix(in oklab, var(--primary-500) 35%, transparent); transform: translateY(-1px); }
.fi-wi-stats-overview-stat-label { font-size: .8125rem; font-weight: 500; color: var(--gray-500); }
.fi-wi-stats-overview-stat-value { font-size: 2rem; line-height: 2.5rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fi-wi-stats-overview-stat-label-ctn > .fi-icon { color: var(--primary-500); }

/* Begrüßung mit Schnellzugriff */
.meolo-hallo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; }
.meolo-hallo h2 { margin: 0; font-size: 1.25rem; font-weight: 700; letter-spacing: -.015em; color: var(--gray-950); }
.meolo-hallo h2:where(.dark, .dark *) { color: white; }
.meolo-hallo p { margin: .125rem 0 0; font-size: .875rem; color: var(--gray-500); }
.meolo-schnell { display: flex; flex-wrap: wrap; gap: .5rem; }
.meolo-schnell a, .meolo-schnell button {
    display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .875rem; border-radius: .625rem;
    font-size: .875rem; font-weight: 600; color: var(--gray-700); background: white;
    box-shadow: 0 1px 2px rgb(15 23 42 / .05), 0 0 0 1px var(--meolo-rand); transition: background-color .12s, box-shadow .12s;
}
.meolo-schnell a:where(.dark, .dark *), .meolo-schnell button:where(.dark, .dark *) { color: var(--gray-200); background: color-mix(in oklab, white 5%, transparent); }
.meolo-schnell a:hover, .meolo-schnell button:hover { background: var(--gray-50); box-shadow: 0 1px 2px rgb(15 23 42 / .05), 0 0 0 1px color-mix(in oklab, var(--primary-500) 45%, transparent); }
.meolo-schnell a:where(.dark, .dark *):hover { background: color-mix(in oklab, white 9%, transparent); }
.meolo-schnell svg { width: 1.125rem; height: 1.125rem; color: var(--primary-600); }
.meolo-schnell svg:where(.dark, .dark *) { color: var(--primary-400); }
.meolo-schnell .meolo-schnell-haupt { background: var(--primary-600); color: white; box-shadow: 0 1px 2px rgb(0 0 0 / .1); }
.meolo-schnell .meolo-schnell-haupt svg { color: white; }
.meolo-schnell .meolo-schnell-haupt:hover { background: var(--primary-500); }
.meolo-schnell .meolo-schnell-haupt:where(.dark, .dark *) { background: var(--primary-600); color: white; }
.meolo-system { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; font-size: .875rem; color: var(--gray-600); }
.meolo-system:where(.dark, .dark *) { color: var(--gray-400); }
.meolo-system a { text-decoration: underline; }

/* ---------- Ticketverlauf ---------- */
.meolo-verlauf { display: flex; flex-direction: column; gap: .75rem; }
.meolo-verlauf-eintrag { border: 1px solid var(--meolo-rand); border-radius: .75rem; padding: .875rem 1rem; background: #fff; }
.meolo-verlauf-eintrag header { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin-bottom: .5rem; font-size: .875rem; }
.meolo-verlauf-eintrag header time { margin-left: auto; color: var(--gray-500); font-size: .8125rem; }
.meolo-verlauf-typ { font-size: .75rem; padding: 0 .5rem; border-radius: 9999px; background: var(--gray-100); color: var(--gray-600); }
.meolo-verlauf-antwort { border-left: 3px solid var(--primary-500); }
.meolo-verlauf-antwort .meolo-verlauf-typ { background: var(--primary-50); color: var(--primary-700); }
.meolo-verlauf-notiz { background: rgb(254 252 232); border-color: rgb(253 230 138); }
.meolo-verlauf-notiz .meolo-verlauf-typ { background: rgb(254 243 199); color: rgb(146 64 14); }
.meolo-verlauf-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .9375rem; line-height: 1.55; }
.meolo-verlauf-system { font-size: .8125rem; color: var(--gray-500); padding-left: 1rem; }
.meolo-verlauf-leise { color: var(--gray-500); font-size: .8125rem; }
.meolo-verlauf-anhaenge { margin-top: .5rem; display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .875rem; }
.meolo-verlauf-anhaenge a { display: inline-flex; align-items: center; gap: .25rem; color: var(--primary-600); }
.meolo-verlauf-anhaenge a:hover { text-decoration: underline; }
.dark .meolo-verlauf-eintrag { background: rgb(255 255 255 / .03); }
.dark .meolo-verlauf-notiz { background: rgb(234 179 8 / .08); border-color: rgb(234 179 8 / .25); }
.dark .meolo-verlauf-typ { background: rgb(255 255 255 / .08); color: var(--gray-300); }
.dark .meolo-verlauf-antwort .meolo-verlauf-typ { background: color-mix(in oklab, var(--primary-500) 15%, transparent); color: var(--primary-300); }
.dark .meolo-verlauf-notiz .meolo-verlauf-typ { background: rgb(234 179 8 / .15); color: rgb(253 224 71); }
.dark .meolo-verlauf-anhaenge a { color: var(--primary-400); }
.dark .meolo-verlauf-system, .dark .meolo-verlauf-leise, .dark .meolo-verlauf-eintrag header time { color: var(--gray-400); }

/* ---------- Checkliste ---------- */
.meolo-checkliste { display: flex; flex-direction: column; gap: .5rem; }
.meolo-checkliste label { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; cursor: pointer; font-size: .875rem; }
.meolo-checkliste-erledigt > span:first-of-type { text-decoration: line-through; color: var(--gray-500); }

/* ---------- Netzwerkdiagnose ---------- */
.meolo-diagnose { width: 100%; border-collapse: collapse; font-size: .875rem; font-variant-numeric: tabular-nums; }
.meolo-diagnose td { padding: .5rem .75rem; border-bottom: 1px solid var(--meolo-rand); vertical-align: top; }
.meolo-diagnose tr:last-child td { border-bottom: 0; }
.meolo-diagnose-pruefung { font-weight: 600; white-space: nowrap; width: 9rem; }
.meolo-diagnose-wert { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8125rem; overflow-wrap: anywhere; }
.meolo-diagnose-status { width: 1%; text-align: right; }
.meolo-diagnose-stand { font-size: .875rem; color: var(--gray-500); }
.dark .meolo-diagnose-stand { color: var(--gray-400); }

/* ---------- Laufender Timer in der Kopfleiste ---------- */
.meolo-timer { display: inline-flex; align-items: center; gap: .5rem; height: 2.25rem; padding: 0 .875rem; border-radius: 9999px; background: rgb(220 252 231); color: rgb(21 128 61); font-size: .875rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: inset 0 0 0 1px rgb(22 163 74 / .2); }
.meolo-timer:hover { background: rgb(187 247 208); }
.meolo-timer-punkt { width: .5rem; height: .5rem; border-radius: 9999px; background: rgb(22 163 74); animation: meolo-puls 1.5s ease-in-out infinite; }
.meolo-timer-titel { font-weight: 400; color: rgb(22 101 52); }
.dark .meolo-timer { background: rgb(34 197 94 / .15); color: rgb(134 239 172); }
.dark .meolo-timer-titel { color: rgb(187 247 208); }
@media (max-width: 640px) { .meolo-timer-titel { display: none; } }
@media (max-width: 1279px) { .meolo-timer-titel { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; } }
@keyframes meolo-puls { 50% { opacity: .3; } }

/* Weniger Bewegung, wenn im Betriebssystem so eingestellt */
@media (prefers-reduced-motion: reduce) {
    .meolo-timer-punkt { animation: none; }
    a.fi-wi-stats-overview-stat:hover { transform: none; }
}

/* Logo */
.meolo-logo-name { font-weight: 700; color: var(--gray-950); }
.meolo-logo-name:where(.dark, .dark *) { color: white; }

/* ---------- Kundenauswahl in der Kopfleiste ---------- */
.meolo-kunde { position: relative; display: flex; align-items: center; }
.meolo-kunde-knopf {
    display: inline-flex; align-items: center; height: 2.25rem; border-radius: .625rem;
    background: var(--gray-100); color: var(--gray-700); font-size: .875rem; font-weight: 500;
}
.meolo-kunde-knopf:where(.dark, .dark *) { background: color-mix(in oklab, white 6%, transparent); color: var(--gray-300); }
.meolo-kunde-wahl { display: inline-flex; align-items: center; gap: .375rem; height: 100%; padding: 0 .625rem 0 .75rem; border-radius: inherit; }
.meolo-kunde-wahl:hover { color: var(--gray-950); }
.meolo-kunde-wahl:where(.dark, .dark *):hover { color: white; }
.meolo-kunde-wahl:focus-visible, .meolo-kunde-weg:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; }
.meolo-kunde-wahl > svg { width: 1.125rem; height: 1.125rem; color: var(--gray-400); flex-shrink: 0; }
.meolo-kunde-wahl > svg.meolo-kunde-pfeil { width: .875rem; height: .875rem; }
.meolo-kunde-name { white-space: nowrap; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; }
/* Gewählter Kunde: deutlich farbig, damit niemand vergisst, dass gefiltert wird */
.meolo-kunde-aktiv { background: rgb(254 243 199); color: rgb(146 64 14); box-shadow: inset 0 0 0 1px rgb(217 119 6 / .35); font-weight: 600; }
.meolo-kunde-aktiv .meolo-kunde-wahl > svg { color: rgb(217 119 6); }
.meolo-kunde-aktiv .meolo-kunde-wahl:hover { color: rgb(120 53 15); }
.meolo-kunde-aktiv:where(.dark, .dark *) { background: rgb(245 158 11 / .16); color: rgb(253 230 138); box-shadow: inset 0 0 0 1px rgb(245 158 11 / .35); }
.meolo-kunde-aktiv:where(.dark, .dark *) .meolo-kunde-wahl:hover { color: white; }
.meolo-kunde-weg { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 100%; border-radius: 0 .625rem .625rem 0; border-left: 1px solid rgb(217 119 6 / .25); }
.meolo-kunde-weg:hover { background: rgb(253 230 138); }
.meolo-kunde-weg:where(.dark, .dark *):hover { background: rgb(245 158 11 / .25); }
.meolo-kunde-weg svg { width: 1rem; height: 1rem; }
.meolo-kunde-panel {
    position: absolute; top: calc(100% + .5rem); left: 0; z-index: 40; width: 20rem; max-width: calc(100vw - 2rem);
    padding: .5rem; border-radius: .75rem; background: white; box-shadow: var(--meolo-schatten-hoch), 0 0 0 1px var(--meolo-rand);
}
.meolo-kunde-panel:where(.dark, .dark *) { background: var(--gray-900); }
.meolo-kunde-suche {
    width: 100%; height: 2.25rem; padding: 0 .75rem; border: 0; border-radius: .5rem; font-size: .875rem;
    background: var(--gray-100); color: var(--gray-950); box-shadow: none;
}
.meolo-kunde-suche:focus { outline: none; box-shadow: 0 0 0 2px var(--primary-500); }
.meolo-kunde-suche:where(.dark, .dark *) { background: color-mix(in oklab, white 6%, transparent); color: white; }
.meolo-kunde-liste { display: flex; flex-direction: column; margin-top: .375rem; max-height: 22rem; overflow-y: auto; }
.meolo-kunde-titel { padding: .5rem .5rem .25rem; font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-400); }
.meolo-kunde-eintrag { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .4375rem .5rem; border-radius: .5rem; text-align: left; font-size: .875rem; color: var(--gray-700); }
.meolo-kunde-eintrag:where(.dark, .dark *) { color: var(--gray-200); }
.meolo-kunde-eintrag:hover, .meolo-kunde-eintrag:focus-visible { background: color-mix(in oklab, var(--primary-500) 8%, transparent); outline: none; }
.meolo-kunde-eintrag svg { width: 1.125rem; height: 1.125rem; color: var(--primary-600); flex-shrink: 0; }
.meolo-kunde-eintrag small { display: block; font-size: .75rem; color: var(--gray-500); }
.meolo-kunde-gewaehlt { background: var(--primary-50); box-shadow: inset 3px 0 0 var(--primary-600); }
.meolo-kunde-gewaehlt:where(.dark, .dark *) { background: color-mix(in oklab, var(--primary-500) 14%, transparent); }
.meolo-kunde-hinweis { padding: .5rem; font-size: .8125rem; color: var(--gray-500); line-height: 1.45; }
@media (max-width: 640px) {
    /* Schmal nur das Symbol, der Name steht im Hinweis über der Seite */
    .meolo-kunde-name, .meolo-kunde-wahl > svg.meolo-kunde-pfeil { display: none; }
    .meolo-kunde-wahl { padding: 0 .5rem; }
    .meolo-kunde-panel { position: fixed; top: 4rem; left: 1rem; right: 1rem; width: auto; }
}

/* Hinweis über der Seite, solange ein Kunde gewählt ist */
.meolo-filterhinweis {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: 1rem 0 -.5rem; padding: .625rem 1rem;
    border-radius: var(--meolo-radius); background: rgb(255 251 235); color: rgb(120 53 15); font-size: .875rem;
    box-shadow: inset 0 0 0 1px rgb(217 119 6 / .3);
}
.meolo-filterhinweis:where(.dark, .dark *) { background: rgb(245 158 11 / .1); color: rgb(253 230 138); box-shadow: inset 0 0 0 1px rgb(245 158 11 / .3); }
.meolo-filterhinweis > svg { width: 1.25rem; height: 1.25rem; color: rgb(217 119 6); flex-shrink: 0; }
.meolo-filterhinweis-text { flex: 1 1 16rem; }
.meolo-filterhinweis-nr, .meolo-filterhinweis-leise { opacity: .8; }
.meolo-filterhinweis-aktionen { display: flex; align-items: center; gap: 1rem; font-weight: 600; }
.meolo-filterhinweis-aktionen a, .meolo-filterhinweis-aktionen button { text-decoration: underline; text-underline-offset: 2px; }
.meolo-filterhinweis-aktionen a:hover, .meolo-filterhinweis-aktionen button:hover { color: rgb(146 64 14); }
.meolo-filterhinweis-aktionen :where(.dark, .dark *):hover { color: white; }
@media (max-width: 640px) { .meolo-filterhinweis-leise { display: none; } }

/* Kalender (FullCalendar aus public/js/fullcalendar) */
.meolo-kalender-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.meolo-kalender-filter { display: flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 500; }
.meolo-kalender-filter > span { color: var(--gray-500); }
.meolo-kalender-schalter { display: flex; align-items: center; gap: .4rem; font-size: .875rem; cursor: pointer; }
.meolo-kalender-legende { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin-inline-start: auto; font-size: .8rem; color: var(--gray-500); }
.meolo-kalender-legende span { display: inline-flex; align-items: center; gap: .35rem; }
.meolo-kalender-legende i { width: .7rem; height: .7rem; border-radius: .2rem; display: inline-block; }
.meolo-kalender-google { color: var(--success-600); }
.meolo-kalender-google svg { width: 1rem; height: 1rem; }
.meolo-kalender-google-fehler { color: var(--danger-600); }
.meolo-kalender {
    background: #fff; border-radius: var(--meolo-radius); padding: 1rem;
    box-shadow: var(--meolo-schatten), 0 0 0 1px var(--meolo-rand);
    --fc-border-color: var(--meolo-rand);
    --fc-today-bg-color: color-mix(in oklab, var(--primary-500) 7%, transparent);
    --fc-now-indicator-color: var(--danger-500);
    --fc-button-bg-color: #fff; --fc-button-border-color: var(--meolo-rand); --fc-button-text-color: var(--gray-700);
    --fc-button-hover-bg-color: var(--gray-50); --fc-button-hover-border-color: var(--meolo-rand);
    --fc-button-active-bg-color: var(--primary-600); --fc-button-active-border-color: var(--primary-600);
    --fc-non-business-color: color-mix(in oklab, var(--gray-500) 5%, transparent);
    --fc-neutral-bg-color: var(--gray-50);
    --fc-list-event-hover-bg-color: var(--gray-50);
    --fc-page-bg-color: #fff;
}
.meolo-kalender .fc { font-size: .875rem; }
.meolo-kalender .fc .fc-toolbar-title { font-size: 1.15rem; font-weight: 600; }
.meolo-kalender .fc .fc-button { font-size: .8rem; font-weight: 500; padding: .35rem .7rem; border-radius: .5rem; box-shadow: 0 1px 2px rgb(15 23 42 / .05); text-transform: none; }
.meolo-kalender .fc .fc-button-primary:not(:disabled).fc-button-active { color: #fff; }
.meolo-kalender .fc .fc-button:focus { box-shadow: none; }
.meolo-kalender .fc .fc-button:focus-visible { box-shadow: 0 0 0 2px color-mix(in oklab, var(--primary-500) 40%, transparent); }
.meolo-kalender .fc .fc-col-header-cell-cushion, .meolo-kalender .fc .fc-daygrid-day-number { color: inherit; font-weight: 500; }
.meolo-kalender .fc-event { border-radius: .35rem; padding: 0 .15rem; cursor: pointer; }
.meolo-kalender .fc-h-event, .meolo-kalender .fc-v-event { border: 0; }
.meolo-kalender .fc-daygrid-dot-event .fc-event-title { font-weight: 500; }
.meolo-kalender-zusatz { font-size: .72rem; opacity: .85; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meolo-kalender .fc-list .meolo-kalender-zusatz { white-space: normal; }
.meolo-kalender-fehler { outline: 2px dashed var(--danger-500); outline-offset: 1px; }
.meolo-kalender .fc-timegrid-slot { height: 2rem; }
.meolo-kalender .fc-day-today .fc-daygrid-day-number { background: var(--primary-600); color: #fff; border-radius: 999px; min-width: 1.6rem; text-align: center; margin: .2rem; padding: .1rem .35rem; }
.dark .meolo-kalender {
    background: rgb(255 255 255 / .03);
    --fc-page-bg-color: var(--gray-900);
    --fc-neutral-bg-color: rgb(255 255 255 / .04);
    --fc-list-event-hover-bg-color: rgb(255 255 255 / .05);
    --fc-button-bg-color: rgb(255 255 255 / .05); --fc-button-text-color: var(--gray-200);
    --fc-button-hover-bg-color: rgb(255 255 255 / .1);
}
.dark .meolo-kalender .fc-theme-standard .fc-list-day-cushion { background: rgb(255 255 255 / .04); }
@media (max-width: 640px) {
    .meolo-kalender { padding: .5rem; }
    .meolo-kalender .fc .fc-toolbar-title { font-size: 1rem; }
    .meolo-kalender-legende { margin-inline-start: 0; }
}

/* ---------- Zeitauswertung ---------- */
.meolo-za { display: flex; flex-direction: column; gap: 1rem; }
.meolo-za-karte {
    border-radius: var(--meolo-radius); background: white; box-shadow: var(--meolo-schatten), 0 0 0 1px var(--meolo-rand);
}
.meolo-za-karte:where(.dark, .dark *) { background: var(--gray-900); }
.meolo-za-karte-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .875rem 1rem .25rem; }
.meolo-za-karte-kopf h3 { font-size: .9375rem; font-weight: 600; color: var(--gray-950); }
.meolo-za-karte-kopf h3:where(.dark, .dark *) { color: white; }
.meolo-za-karte-kopf > span { display: flex; gap: .875rem; font-size: .75rem; color: var(--gray-500); }
.meolo-za-karte-kopf > span > span, .meolo-za-legende > span { display: inline-flex; align-items: center; gap: .375rem; }
.meolo-za-punkt { display: inline-block; width: .625rem; height: .625rem; border-radius: 9999px; flex-shrink: 0; }
.meolo-za-schraffur {
    background: repeating-linear-gradient(135deg, var(--gray-300) 0 3px, var(--gray-200) 3px 6px) !important;
}
.meolo-za-schraffur:where(.dark, .dark *) { background: repeating-linear-gradient(135deg, var(--gray-600) 0 3px, var(--gray-700) 3px 6px) !important; }
.meolo-za-abrechenbar { background: var(--primary-600); }
.meolo-za-abrechenbar:where(.dark, .dark *) { background: var(--primary-500); }
.meolo-za-hinweis { padding: .75rem 1rem; font-size: .8125rem; color: var(--gray-500); }
.meolo-za-leer { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 2.5rem 1rem; text-align: center; font-size: .875rem; color: var(--gray-500); }
.meolo-za-leer > svg { width: 2rem; height: 2rem; color: var(--gray-400); }

/* Werkzeugleiste: Zeitraum und Filter */
.meolo-za-werkzeug { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; }
.meolo-za-zeitraum, .meolo-za-filter, .meolo-za-frei { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.meolo-za-frei span { font-size: .875rem; color: var(--gray-500); }
.meolo-za-filter .fi-input-wrp { min-width: 11rem; }
.meolo-za-blaettern { display: inline-flex; align-items: center; height: 2.25rem; border-radius: .625rem; background: white; box-shadow: var(--meolo-schatten), 0 0 0 1px var(--meolo-rand); }
.meolo-za-blaettern:where(.dark, .dark *) { background: var(--gray-900); }
.meolo-za-blaettern button { display: inline-flex; align-items: center; justify-content: center; height: 100%; padding: 0 .5rem; color: var(--gray-600); font-size: .875rem; font-weight: 500; }
.meolo-za-blaettern button:where(.dark, .dark *) { color: var(--gray-300); }
.meolo-za-blaettern button:hover { color: var(--primary-600); }
.meolo-za-blaettern svg { width: 1.25rem; height: 1.25rem; }
.meolo-za-heute { border-inline: 1px solid var(--meolo-rand); padding: 0 .75rem !important; }
.meolo-za-segmente { display: inline-flex; padding: .1875rem; gap: .125rem; border-radius: .625rem; background: var(--gray-100); }
.meolo-za-segmente:where(.dark, .dark *) { background: color-mix(in oklab, white 6%, transparent); }
.meolo-za-segmente button { padding: .3125rem .75rem; border-radius: .5rem; font-size: .8125rem; font-weight: 500; color: var(--gray-600); }
.meolo-za-segmente button:where(.dark, .dark *) { color: var(--gray-300); }
.meolo-za-segmente button:hover { color: var(--gray-950); }
.meolo-za-segmente button:where(.dark, .dark *):hover { color: white; }
.meolo-za-segmente button.ist-aktiv { background: white; color: var(--primary-700); font-weight: 600; box-shadow: var(--meolo-schatten); }
.meolo-za-segmente button.ist-aktiv:where(.dark, .dark *) { background: var(--gray-800); color: var(--primary-300); }
.meolo-za-segmente-klein button { padding: .1875rem .625rem; font-size: .75rem; }

/* Kennzahlen */
.meolo-za-kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem; }
@media (max-width: 640px) {
    .meolo-za-kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .meolo-za-kennzahl:first-child { grid-column: 1 / -1; }
    .meolo-za-kennzahl-wert { font-size: 1.25rem; }
    .meolo-za-filter, .meolo-za-filter .fi-input-wrp { width: 100%; }
    .meolo-za-tabelle .meolo-za-spalte-anteil, .meolo-za-name small { display: none; }
}
.meolo-za-kennzahl {
    display: flex; flex-direction: column; gap: .25rem; padding: .875rem 1rem; border-radius: var(--meolo-radius);
    background: white; box-shadow: var(--meolo-schatten), 0 0 0 1px var(--meolo-rand);
}
.meolo-za-kennzahl:where(.dark, .dark *) { background: var(--gray-900); }
.meolo-za-kennzahl-titel { display: inline-flex; align-items: center; gap: .375rem; font-size: .75rem; font-weight: 500; color: var(--gray-500); }
.meolo-za-kennzahl-wert { font-size: 1.5rem; font-weight: 650; letter-spacing: -.01em; color: var(--gray-950); font-variant-numeric: tabular-nums; }
.meolo-za-kennzahl-wert:where(.dark, .dark *) { color: white; }
.meolo-za-kennzahl-wert small { font-size: .875rem; font-weight: 500; color: var(--gray-500); }
.meolo-za-kennzahl-info { font-size: .75rem; color: var(--gray-500); }
.meolo-za-quote { display: block; height: .3125rem; border-radius: 9999px; overflow: hidden; background: var(--gray-200); }
.meolo-za-quote:where(.dark, .dark *) { background: var(--gray-700); }
.meolo-za-quote span { display: block; height: 100%; background: var(--primary-600); }

/* Reiter mit Legende */
.meolo-za-reiter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.meolo-za-reiter .fi-tabs { margin: 0; }
.meolo-za-legende { display: flex; flex-wrap: wrap; gap: .875rem; font-size: .75rem; color: var(--gray-500); }

/* Zeitleiste */
.meolo-za-zeitleiste { padding: .5rem 0; overflow-x: auto; }
.meolo-za-zeile { display: grid; grid-template-columns: 5.5rem minmax(28rem, 1fr) 5.5rem; align-items: center; min-height: 3rem; padding: 0 1rem; border-top: 1px solid var(--meolo-rand); }
.meolo-za-zeile.meolo-za-skala { min-height: 1.75rem; border-top: 0; }
.meolo-za-zeile.ist-heute { background: color-mix(in oklab, var(--primary-500) 5%, transparent); }
.meolo-za-zeile.ist-wochenende .meolo-za-tag { color: var(--gray-400); }
.meolo-za-tag { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; text-align: left; color: var(--gray-700); }
.meolo-za-tag:where(.dark, .dark *) { color: var(--gray-200); }
.meolo-za-tag:hover { color: var(--primary-600); }
.meolo-za-tag-name { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.meolo-za-tag-datum { font-size: .8125rem; color: var(--gray-500); }
.ist-heute .meolo-za-tag-name, .ist-heute .meolo-za-tag-datum { color: var(--primary-600); }
.meolo-za-spuren { display: flex; flex-direction: column; gap: 2px; padding: .25rem 0; }
.meolo-za-spur[data-person] { margin-left: 1.75rem; }
.meolo-za-spur[data-person]::before {
    content: attr(data-person); position: absolute; left: -1.75rem; top: 50%; transform: translateY(-50%);
    font-size: .625rem; font-weight: 600; color: var(--gray-400); letter-spacing: .02em;
}
.meolo-za-spuren:has(> .meolo-za-spur + .meolo-za-spur) .meolo-za-spur { height: 1.625rem; }
.meolo-za-skala:has(+ .meolo-za-zeile .meolo-za-spur[data-person]) .meolo-za-spur { margin-left: 1.75rem; }
.meolo-za-spur {
    position: relative; height: 2.25rem; cursor: copy; border-radius: .375rem;
    background-image: linear-gradient(to right, var(--meolo-rand) 1px, transparent 1px);
    background-size: calc(100% / var(--za-stunden)) 100%;
}
.meolo-za-skala .meolo-za-spur { height: 1.25rem; background: none; cursor: default; }
.meolo-za-skala .meolo-za-spur span { position: absolute; top: 0; transform: translateX(-50%); font-size: .6875rem; color: var(--gray-400); font-variant-numeric: tabular-nums; }
.meolo-za-skala .meolo-za-spur span:first-child { transform: none; }
.meolo-za-block {
    position: absolute; top: .1875rem; bottom: .1875rem; min-width: 3px; padding: 0 .375rem; overflow: hidden;
    border-radius: .3125rem; background: var(--za-farbe); color: white; font-size: .6875rem; font-weight: 600;
    text-align: left; white-space: nowrap; text-overflow: ellipsis; cursor: pointer;
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08); transition: filter .12s, transform .12s;
}
.meolo-za-block span { display: block; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 1px rgb(0 0 0 / .2); }
.meolo-za-block:hover, .meolo-za-block:focus-visible { filter: brightness(1.08); transform: translateY(-1px); z-index: 2; outline: none; box-shadow: 0 0 0 2px white, 0 0 0 4px var(--za-farbe); }
.meolo-za-block:where(.dark, .dark *):hover { box-shadow: 0 0 0 2px var(--gray-900), 0 0 0 4px var(--za-farbe); }
.meolo-za-block.ist-nicht-abrechenbar {
    background: repeating-linear-gradient(135deg, var(--za-farbe) 0 4px, color-mix(in oklab, var(--za-farbe) 55%, white) 4px 8px);
}
.meolo-za-block.ist-laufend { animation: meolo-za-puls 2s ease-in-out infinite; }
@keyframes meolo-za-puls { 50% { opacity: .65; } }
.meolo-za-jetzt { position: absolute; top: -.25rem; bottom: -.25rem; width: 2px; margin-left: -1px; background: var(--danger-500); border-radius: 1px; pointer-events: none; z-index: 3; }
.meolo-za-tagessumme { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; font-variant-numeric: tabular-nums; }
.meolo-za-tagessumme strong { font-size: .875rem; color: var(--gray-950); }
.meolo-za-tagessumme strong:where(.dark, .dark *) { color: white; }
.meolo-za-tagessumme small { font-size: .6875rem; color: var(--gray-500); }

/* Tagesansicht: Einträge */
.meolo-za-eintraege { padding: .25rem 0; }
.meolo-za-eintrag {
    display: grid; grid-template-columns: .25rem 7rem minmax(0, 1fr) auto 7rem 4.5rem; align-items: center; gap: .875rem;
    width: 100%; padding: .625rem 1rem; text-align: left; font-size: .875rem; border-top: 1px solid var(--meolo-rand);
}
.meolo-za-eintrag:first-child { border-top: 0; }
.meolo-za-eintrag:hover { background: color-mix(in oklab, var(--primary-500) 5%, transparent); }
.meolo-za-streifen { align-self: stretch; border-radius: 9999px; background: var(--za-farbe); }
.meolo-za-eintrag-zeit, .meolo-za-eintrag-dauer { font-variant-numeric: tabular-nums; color: var(--gray-600); }
.meolo-za-eintrag-zeit:where(.dark, .dark *) { color: var(--gray-300); }
.meolo-za-eintrag-dauer { text-align: right; font-weight: 600; color: var(--gray-950); }
.meolo-za-eintrag-dauer:where(.dark, .dark *) { color: white; }
.meolo-za-eintrag-text { display: flex; flex-direction: column; min-width: 0; }
.meolo-za-eintrag-text strong { font-weight: 600; color: var(--gray-950); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meolo-za-eintrag-text strong:where(.dark, .dark *) { color: white; }
.meolo-za-eintrag-text span { color: var(--gray-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meolo-za-eintrag-art { display: flex; gap: .25rem; }
.meolo-za-eintrag-user { font-size: .8125rem; color: var(--gray-500); }
@media (max-width: 768px) {
    .meolo-za-eintrag { grid-template-columns: .25rem minmax(0, 1fr) auto; }
    .meolo-za-eintrag-zeit { grid-column: 2; }
    .meolo-za-eintrag-text { grid-column: 2 / 4; }
    .meolo-za-eintrag-art, .meolo-za-eintrag-user { display: none; }
    .meolo-za-eintrag-dauer { grid-row: 1; grid-column: 3; }
}

/* Balkendiagramm */
.meolo-za-balken { display: grid; grid-template-columns: 2.75rem 1fr; height: 15rem; padding: .75rem 1rem 1rem; }
.meolo-za-achse { position: relative; margin-bottom: 1.5rem; }
.meolo-za-achse span { position: absolute; right: .5rem; transform: translateY(50%); font-size: .6875rem; color: var(--gray-400); font-variant-numeric: tabular-nums; white-space: nowrap; }
.meolo-za-saeulen { position: relative; display: grid; grid-template-columns: repeat(var(--za-anzahl), minmax(0, 1fr)); gap: .25rem; padding-bottom: 1.5rem; }
.meolo-za-gitter { position: absolute; left: 0; right: 0; height: 0; margin-bottom: 1.5rem; border-top: 1px dashed var(--meolo-rand); pointer-events: none; }
.meolo-za-gitter:first-child { border-top-style: solid; }
.meolo-za-saeule { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
.meolo-za-saeule.ist-klickbar { cursor: pointer; }
.meolo-za-saeule-flaeche { display: flex; flex-direction: column-reverse; height: 100%; width: 100%; max-width: 2.75rem; margin: 0 auto; }
.meolo-za-saeule-flaeche span { display: block; width: 100%; transition: filter .12s; }
.meolo-za-saeule-flaeche span:last-child { border-radius: .25rem .25rem 0 0; }
.meolo-za-saeule:hover .meolo-za-saeule-flaeche span { filter: brightness(1.12); }
.meolo-za-saeule:hover { background: color-mix(in oklab, var(--primary-500) 5%, transparent); border-radius: .25rem; }
.meolo-za-saeule-text { position: absolute; left: 50%; bottom: -1.375rem; transform: translateX(-50%); font-size: .6875rem; color: var(--gray-500); white-space: nowrap; }
.meolo-za-saeule.ist-wochenende .meolo-za-saeule-text { color: var(--gray-400); }
.meolo-za-saeule.ist-heute .meolo-za-saeule-text { color: var(--primary-600); font-weight: 700; }
/* Bei vielen Balken nur jede zweite Beschriftung */
.meolo-za-saeulen:has(> .meolo-za-saeule:nth-of-type(25)) .meolo-za-saeule:nth-of-type(even) .meolo-za-saeule-text { display: none; }

/* Kreisdiagramme */
.meolo-za-kreise { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1rem; }
.meolo-za-kreis-karte { container-type: inline-size; }
.meolo-za-kreis-inhalt { display: flex; align-items: center; gap: 1.25rem; padding: .75rem 1rem 1rem; }
@container (max-width: 28rem) {
    .meolo-za-kreis-inhalt { flex-direction: column; align-items: stretch; }
    .meolo-za-kreis { margin: 0 auto .25rem; }
}
.meolo-za-kreis { position: relative; flex-shrink: 0; width: 7.5rem; height: 7.5rem; border-radius: 9999px; }
.meolo-za-kreis > span {
    position: absolute; inset: 1.125rem; display: flex; flex-direction: column; align-items: center; justify-content: center;
    border-radius: 9999px; background: white; line-height: 1.15;
}
.meolo-za-kreis > span:where(.dark, .dark *) { background: var(--gray-900); }
.meolo-za-kreis strong { font-size: 1rem; font-weight: 650; color: var(--gray-950); font-variant-numeric: tabular-nums; }
.meolo-za-kreis strong:where(.dark, .dark *) { color: white; }
.meolo-za-kreis small { font-size: .6875rem; color: var(--gray-500); }
.meolo-za-anteile { display: flex; flex-direction: column; gap: .125rem; flex: 1; min-width: 0; }
.meolo-za-anteile li > * { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .25rem .375rem; border-radius: .375rem; font-size: .8125rem; text-align: left; }
.meolo-za-anteile li > button:hover { background: color-mix(in oklab, var(--primary-500) 7%, transparent); }
.meolo-za-anteil-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gray-700); }
.meolo-za-anteil-name:where(.dark, .dark *) { color: var(--gray-200); }
.meolo-za-anteil-wert { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--gray-950); }
.meolo-za-anteil-wert:where(.dark, .dark *) { color: white; }
.meolo-za-anteil-prozent { width: 2.75rem; text-align: right; font-size: .75rem; color: var(--gray-500); font-variant-numeric: tabular-nums; }

/* Summentabelle */
.meolo-za-tabelle-rahmen { overflow-x: auto; padding: .25rem 0 .25rem; }
.meolo-za-tabelle { width: 100%; font-size: .875rem; border-collapse: collapse; }
.meolo-za-tabelle th {
    padding: .5rem 1rem; text-align: left; white-space: nowrap; font-size: .6875rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .05em; color: var(--gray-500); border-bottom: 1px solid var(--meolo-rand);
}
.meolo-za-tabelle td { padding: .5rem 1rem; border-bottom: 1px solid var(--meolo-rand); color: var(--gray-700); }
.meolo-za-tabelle td:where(.dark, .dark *) { color: var(--gray-200); }
.meolo-za-tabelle tbody tr:hover td { background: color-mix(in oklab, var(--primary-500) 4%, transparent); }
.meolo-za-tabelle tfoot td { border-bottom: 0; font-weight: 700; color: var(--gray-950); }
.meolo-za-tabelle tfoot td:where(.dark, .dark *) { color: white; }
.meolo-za-tabelle .ist-zahl { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.meolo-za-tabelle .ist-leise { color: var(--gray-500); }
.meolo-za-tabelle strong { color: var(--gray-950); font-weight: 600; }
.meolo-za-tabelle strong:where(.dark, .dark *) { color: white; }
.meolo-za-name { display: inline-flex; align-items: center; gap: .5rem; }
.meolo-za-name button { font-weight: 500; text-align: left; color: var(--gray-950); }
.meolo-za-name button:where(.dark, .dark *) { color: white; }
.meolo-za-name button:hover { color: var(--primary-600); text-decoration: underline; text-underline-offset: 2px; }
.meolo-za-name small { font-size: .75rem; color: var(--gray-500); }
.meolo-za-spalte-anteil { width: 22%; min-width: 8rem; }
.meolo-za-anteil-balken { display: flex; height: .5rem; border-radius: 9999px; overflow: hidden; background: var(--gray-100); }
.meolo-za-anteil-balken:where(.dark, .dark *) { background: var(--gray-800); }
.meolo-za-anteil-balken span { display: block; height: 100%; }

/* Druck und PDF: nur der Bericht, ohne Bedienelemente */
.meolo-za-druckkopf { display: none; }
@media print {
    @page { size: A4 landscape; margin: 12mm; }
    .fi-sidebar, .fi-topbar, .fi-header-actions-ctn, .fi-header .fi-ac, .meolo-filterhinweis, .meolo-za-werkzeug, .meolo-za-reiter .fi-tabs, .meolo-za-hinweis, .meolo-za-tabelle-karte .meolo-za-segmente { display: none !important; }
    .fi-main-ctn, .fi-main { padding: 0 !important; margin: 0 !important; max-width: none !important; }
    .fi-body { background: white !important; }
    .meolo-za-druckkopf { display: flex; flex-direction: column; gap: .125rem; font-size: .8125rem; color: var(--gray-600); }
    .meolo-za-druckkopf strong { font-size: 1rem; color: black; }
    .meolo-za-karte, .meolo-za-kennzahl { box-shadow: 0 0 0 1px var(--gray-300); break-inside: avoid; }
    .meolo-za-kreise { grid-template-columns: repeat(3, 1fr); }
    .meolo-za-kreis-inhalt { flex-direction: column; align-items: stretch; }
    .meolo-za-kreis { margin: 0 auto; }
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Geräteliste: Zubehör eingerückt unter seinem Hauptgerät */
.fi-ta-text.meolo-zubehoer { padding-inline-start: 1.5rem; }
.meolo-zubehoer .fi-ta-text-item::before { content: "↳"; display: inline-block; width: 1.25rem; color: var(--gray-400); }
.meolo-zubehoer .fi-ta-text-description { padding-inline-start: 1.25rem; }

/* Einstellungen › Update */
.meolo-update-tabelle { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.5rem; font-size: .875rem; }
.meolo-update-tabelle dt { color: var(--gray-500); }
.meolo-update-leise { font-size: .875rem; color: var(--gray-500); margin-top: .75rem; }
.dark .meolo-update-leise, .dark .meolo-update-tabelle dt { color: var(--gray-400); }
.meolo-update-aenderungen { margin-top: .75rem; padding: .75rem 1rem; border-radius: .5rem; background: var(--gray-50); font-size: .8125rem; white-space: pre-wrap; max-height: 24rem; overflow: auto; }
.dark .meolo-update-aenderungen { background: rgb(255 255 255 / .05); }