/* Carenti (ruhig, Stand 3.3): Tokens laut docs/design/DESIGN-RICHTLINIEN.md. Keine freien Hex-Werte ausserhalb dieser Datei. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/InterVariable.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/InterVariable-Italic.woff2') format('woff2'); }

:root {
    --cp-primary-900: #12382E;
    --cp-primary-850: #17463A;
    --cp-primary-800: #14533E;
    --cp-primary-750: #0F4634;
    --cp-primary-700: #1B6B50;
    --cp-primary-600: #2E8B68;
    --cp-primary-100: #DDF3E9;
    --cp-primary-050: #EDF8F2;
    --cp-bg-app: #F6F7F9;
    --cp-bg-workspace: #F5F6F8;
    --cp-surface: #FFFFFF;
    --cp-surface-soft: #F9FAFB;
    --cp-chip: #F1F3F5;
    --cp-border: #E1E5EA;
    --cp-border-soft: #EAEDF1;
    --cp-row-border: #EEF0F3;
    --cp-text: #102331;
    --cp-text-secondary: #607180;
    --cp-text-muted: #6B7680;
    --cp-text-disabled: #8A98A5;
    --cp-text-inverse: #FFFFFF;
    --cp-text-on-soft: #176447;
    --cp-count-active: #BFE9D4;
    --cp-hover: #F3F5F7;
    --cp-tab-inactive: #ECEEF1;
    --cp-placeholder-from: #EEF0F3;
    --cp-placeholder-to: #DDE1E6;
    --cp-sidebar-text: #EAF3EE;
    --cp-sidebar-label: #9DBDB0;
    --cp-sidebar-hover: #1C4F41;
    --cp-sidebar-active: #235B4B;
    --cp-sidebar-divider: rgba(255, 255, 255, .10);
    --cp-ok-bg: #DDF5E8; --cp-ok-dot: #1D8A5B; --cp-ok-text: #197A50;
    --cp-info-bg: #E8EEFF; --cp-info-dot: #2559E6; --cp-info-text: #2559E6;
    --cp-warn-bg: #FBE9C9; --cp-warn-dot: #B87400; --cp-warn-text: #935C00;
    --cp-danger-bg: #F8DEDE; --cp-danger-dot: #BE3E3E; --cp-danger-text: #B23A3A;
    --cp-radius-card: 20px;
    --cp-radius-control: 12px;
    --cp-radius-item: 14px;
    --cp-shadow-card: 0 8px 24px rgba(16, 35, 49, .06);
    --cp-shadow-pop: 0 20px 48px rgba(16, 35, 49, .16);
    --cp-focus: 0 0 0 3px rgba(46, 139, 104, .15);
    --cp-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --cp-ease-out: cubic-bezier(.23, 1, .32, 1);
}

html { font-family: var(--cp-font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { color: var(--cp-text); }
::placeholder { color: var(--cp-text-muted); opacity: 1; }
:where(input, select, textarea):focus-visible { outline: none; border-color: var(--cp-primary-600); box-shadow: var(--cp-focus); }
:where(button, a, [role="tab"]):focus-visible { outline: 3px solid rgba(46, 139, 104, .45); outline-offset: 2px; }

/* Buttons und Felder fuer Tailwind-Seiten (ersetzen lange Klassenketten in Seitenkoepfen). */
.cp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px; border: 1px solid var(--cp-border); border-radius: var(--cp-radius-control); background: var(--cp-surface); color: var(--cp-text); font: 600 15px/1 var(--cp-font); white-space: nowrap; cursor: pointer; transition: background-color .15s ease-out, transform .12s ease-out; }
.cp-btn:hover { background: var(--cp-hover); }
.cp-btn:active { transform: scale(.98); }
.cp-btn--primary { background: var(--cp-primary-800); border-color: var(--cp-primary-800); color: var(--cp-text-inverse); box-shadow: 0 6px 16px rgba(20, 83, 62, .22); }
.cp-btn--sm { min-height: 40px; padding: 0 14px; font-size: 14px; }
@media (pointer: coarse) { .cp-btn--sm { min-height: 44px; } }
.cp-btn--primary:hover { background: var(--cp-primary-750); border-color: var(--cp-primary-750); }
.cp-icon { flex: none; width: 18px; height: 18px; }
/* :is(input,select,textarea) hebt die Spezifitaet ueber Tailwind-Utilities wie lg:min-h-0, die sonst die Hoehe auf Desktop kollabieren lassen. */
.cp-field:is(input, select, textarea) { min-height: 48px; }
.cp-field { min-height: 48px; padding: 0 14px; border: 1px solid var(--cp-border); border-radius: var(--cp-radius-control); background: var(--cp-surface); color: var(--cp-text); font: 400 15px/1.2 var(--cp-font); }
select.cp-field { appearance: none; padding-right: 36px; background: var(--cp-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23102331' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 14px center; }
.cp-field--suche { padding-left: 36px; }
@media (pointer: coarse) { .cp-field { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .cp-btn { transition: none; } .cp-btn:active { transform: none; } }

/* Sidebar und mobile Kopfleiste (dunkelgruener Verlauf, siehe DESIGN-RICHTLINIEN.md Abschnitt Sidebar). */
.cp-sidebar { background: linear-gradient(180deg, var(--cp-primary-900), var(--cp-primary-850)); color: var(--cp-sidebar-text); }
.cp-topbar { background-color: var(--cp-primary-900); color: var(--cp-sidebar-text); }
.cp-firmenlogo { display: flex; align-items: center; justify-content: center; background: var(--cp-surface); border-radius: var(--cp-radius-item); padding: 10px; }
.cp-firmenlogo img { max-height: 44px; max-width: 130px; object-fit: contain; }
.cp-brandkarte { display: flex; justify-content: center; background: linear-gradient(135deg, var(--cp-primary-850), var(--cp-primary-900)); border-radius: 16px; padding: 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.cp-brandkarte img { width: 120px; object-fit: contain; }
/* Schmale, zur Sidebar passende Scrollleiste statt grauer System-Leiste mit Pfeilen. */
.cp-sidebar nav { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }
.cp-sidebar nav::-webkit-scrollbar { width: 6px; }
.cp-sidebar nav::-webkit-scrollbar-track { background: transparent; }
.cp-sidebar nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 3px; }
.cp-sidebar nav::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .30); }
.cp-sidebar nav::-webkit-scrollbar-button { display: none; height: 0; }
.cp-nav-link, .cp-nav-gruppe { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 42px; padding: 0 12px; border: 0; border-radius: var(--cp-radius-item); background: transparent; color: var(--cp-sidebar-text); font: inherit; font-size: .875rem; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; transition: background-color .15s ease-out; }
.cp-nav-link:hover, .cp-nav-gruppe:hover { background: var(--cp-sidebar-hover); }
.cp-nav-link[aria-current="page"] { background: var(--cp-sidebar-active); color: var(--cp-text-inverse); }
.cp-nav-gruppe-label { flex: 1; min-width: 0; }
.cp-nav-chevron { opacity: .7; transition: transform .2s ease-out; }
.cp-nav-group.is-open > .cp-nav-gruppe .cp-nav-chevron { transform: rotate(180deg); }
/* Untermenue: Hoehe per grid-rows animiert, geschlossen unsichtbar (kein Tab-Fokus). */
.cp-nav-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .2s ease-out; }
.cp-nav-group.is-open > .cp-nav-sub { grid-template-rows: 1fr; }
.cp-nav-sub-inner { min-height: 0; overflow: hidden; visibility: hidden; margin-left: 22px; padding-left: 8px; border-left: 1px solid var(--cp-sidebar-divider); transition: visibility 0s linear .2s; }
.cp-nav-group.is-open > .cp-nav-sub > .cp-nav-sub-inner { visibility: visible; transition-delay: 0s; }
.cp-nav-link--sub { min-height: 36px; font-weight: 400; opacity: .9; }
.cp-nav-link--sub svg { display: none; }
.cp-nav-link--sub[aria-current="page"] { opacity: 1; font-weight: 500; }
@media (pointer: coarse) { .cp-nav-link, .cp-nav-gruppe { min-height: 44px; } .cp-nav-link--sub { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .cp-nav-sub, .cp-nav-chevron, .cp-nav-sub-inner { transition: none; } }
/* Eingeklappte Sidebar (nur Icons): Gruppenknoepfe weg, alle Unterpunkte als Icons untereinander. */
.sidebar-collapsed .cp-nav-gruppe { display: none; }
.sidebar-collapsed .cp-nav-sub { grid-template-rows: 1fr; }
.sidebar-collapsed .cp-nav-sub-inner { visibility: visible; margin-left: 0; padding-left: 0; border-left: 0; }
.sidebar-collapsed .cp-nav-link--sub { min-height: 42px; opacity: 1; }
.sidebar-collapsed .cp-nav-link--sub svg { display: block; }
.cp-nav-divider { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--cp-sidebar-divider); }

/* Seitenkopf der Modulseiten: weisse Karte auf canvas (Referenz: Fahrzeugverwaltung). */
.cp-page-head { margin: 16px 16px 0; padding: 16px 20px; background: var(--cp-surface); border: 1px solid var(--cp-border-soft); border-radius: var(--cp-radius-card); box-shadow: var(--cp-shadow-card); }
.cp-page-title { color: var(--cp-text); font-size: 22px; font-weight: 700; letter-spacing: -.015em; line-height: 1.2; }
.cp-page-sub { margin-top: 4px; color: var(--cp-text-secondary); font-size: 14px; }
.cp-page-count { margin-left: 10px; color: var(--cp-text-on-soft); font-weight: 600; }
@media (min-width: 768px) { .cp-page-head { margin: 20px 20px 0; padding: 20px 24px; } .cp-page-title { font-size: 26px; } }
@media (min-width: 1280px) { .cp-page-head { margin: 24px 24px 0; } .cp-page-title { font-size: 28px; } }

/* Bereichs-Umschalter (Segment wie Finanzen) statt randloser weisser Unterstrich-Leiste.
   Aktiver Zustand ueber aria-selected, die Seiten setzen nur noch dieses Attribut. */
.cp-tabbar { flex-shrink: 0; margin: 16px 16px 0; }
@media (min-width: 768px) { .cp-tabbar { margin: 20px 20px 0; } }
@media (min-width: 1280px) { .cp-tabbar { margin: 20px 24px 0; } }
.cp-seg { display: inline-flex; gap: 4px; max-width: 100%; padding: 4px; overflow-x: auto; background: var(--cp-surface); border: 1px solid var(--cp-border); border-radius: var(--cp-radius-item); box-shadow: 0 1px 2px rgba(16, 35, 49, .04); scrollbar-width: none; }
.cp-seg::-webkit-scrollbar { display: none; }
.cp-seg-btn { flex: none; min-height: 40px; padding: 0 16px; border: 0; border-radius: 10px; background: none; color: var(--cp-text-secondary); font: 600 14px/1 var(--cp-font); white-space: nowrap; cursor: pointer; transition: background-color .15s ease-out, color .15s ease-out; }
.cp-seg-btn:hover { background: var(--cp-hover); color: var(--cp-text); }
.cp-seg-btn[aria-selected="true"] { background: var(--cp-primary-800); color: var(--cp-text-inverse); }
@media (pointer: coarse) { .cp-seg-btn { min-height: 44px; } }
/* Mit Maus gibt es kein Wischen: bei vielen Bereichen (Einstellungen) umbrechen statt versteckt scrollen.
   Auf Touch bleibt die Leiste wischbar; ein Verlauf am Rand zeigt, dass es weitergeht. */
@media (hover: hover) and (pointer: fine) { .cp-seg { flex-wrap: wrap; overflow-x: visible; } }
@media (pointer: coarse) { .cp-seg { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); } .cp-seg.cp-seg--am-ende, .cp-seg:not(.cp-seg--scrollt) { -webkit-mask-image: none; mask-image: none; } }
@media (prefers-reduced-motion: reduce) { .cp-seg-btn { transition: none; } }

/* Tabellenzeile als Karte auf schmalen Breiten (Dokumente, Zahlungen, Reifenlager).
   Rollen je <td>: kz-titel (oben links), kz-aktion (oben rechts), kz-sub (Unterzeile),
   kz-chips (Badges in einer Reihe), kz-meta (Label + Wert), kz-betrag / kz-status (Fusszeile).
   .kz-l sind die Feld-Labels der Tabellenzellen, in der Karte nur bei kz-meta sichtbar.
   cp-kz gilt unter 768 px (Seiten mit md-Tabelle), cp-kz--bis-lg zusaetzlich bis 1023 px. */
@media (max-width: 767.98px) {
  tr.cp-kz { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 6px; padding: 14px 16px; }
  tr.cp-kz > td { display: block; min-width: 0; padding: 0; border: 0; grid-column: 1 / -1; }
  tr.cp-kz > td:not(.kz-meta) > .kz-l { display: none; }
  tr.cp-kz > td.kz-titel { grid-column: 1; grid-row: 1; font-size: 16px; font-weight: 700; color: var(--cp-text); }
  tr.cp-kz > td.kz-aktion { grid-column: 2; grid-row: 1; justify-self: end; }
  tr.cp-kz > td.kz-sub { font-size: 15px; font-weight: 500; color: var(--cp-text); overflow-wrap: anywhere; }
  tr.cp-kz > td.kz-chips { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
  tr.cp-kz > td.kz-meta { display: flex; justify-content: flex-start; align-items: baseline; gap: 12px; font-size: 14px; color: var(--cp-text-secondary); overflow-wrap: anywhere; }
  tr.cp-kz > td.kz-meta > .kz-l { flex: none; width: 72px; font-size: 12px; }
  tr.cp-kz > td.kz-betrag { grid-column: 1; margin-top: 4px; font-size: 17px; font-weight: 700; color: var(--cp-text); }
  tr.cp-kz > td.kz-status { grid-column: 2; margin-top: 4px; justify-self: end; }
  tr.cp-kz > td.kz-status--links { grid-column: 1 / -1; justify-self: start; }
  tr.cp-kz > td.kz-leer { display: none; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  tr.cp-kz--bis-lg { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 6px; padding: 14px 16px; }
  tr.cp-kz--bis-lg > td { display: block; min-width: 0; padding: 0; border: 0; grid-column: 1 / -1; }
  tr.cp-kz--bis-lg > td:not(.kz-meta) > .kz-l { display: none; }
  tr.cp-kz--bis-lg > td.kz-titel { grid-column: 1; grid-row: 1; font-size: 16px; font-weight: 700; color: var(--cp-text); }
  tr.cp-kz--bis-lg > td.kz-aktion { grid-column: 2; grid-row: 1; justify-self: end; }
  tr.cp-kz--bis-lg > td.kz-sub { font-size: 15px; font-weight: 500; color: var(--cp-text); overflow-wrap: anywhere; }
  tr.cp-kz--bis-lg > td.kz-meta { display: flex; justify-content: flex-start; align-items: baseline; gap: 12px; font-size: 14px; color: var(--cp-text-secondary); overflow-wrap: anywhere; }
  tr.cp-kz--bis-lg > td.kz-meta > .kz-l { flex: none; width: 72px; font-size: 12px; }
  tr.cp-kz--bis-lg > td.kz-status--links { grid-column: 1 / -1; justify-self: start; margin-top: 4px; }
}

/* Datum/Uhrzeit auf iOS: Safari gibt diesen Feldern eine feste Mindestbreite und graue
   Systemoptik, in einem zweispaltigen Grid laufen sie dadurch ineinander. */
input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"]) { -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%; }
/* :where ohne Spezifitaet, damit Tailwind-Klassen wie bg-transparent weiter gewinnen. */
:where(input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"])) { display: block; background-color: var(--cp-surface); color: var(--cp-text); }
input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"])::-webkit-date-and-time-value { min-height: 1.4em; text-align: left; }
@media (pointer: coarse) { :where(input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"])) { min-height: 44px; font-size: 16px; } }
.grid > * { min-width: 0; }

/* Seitenkopf-Aktionen auf dem Handy kompakter; "Aktualisieren" nur als Icon. */
@media (max-width: 639.98px) {
  .cp-page-head .cp-btn { min-height: 40px; padding: 0 14px; gap: 6px; font-size: 14px; box-shadow: none; }
  .cp-page-head .cp-btn .cp-icon { width: 16px; height: 16px; }
  .cp-page-head .cp-btn:has(> .cp-btn-text) { width: 40px; padding: 0; }
  .cp-page-head .cp-btn > .cp-btn-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Handy: Menue klappt unter der Kopfleiste auf (volle Breite) statt als Schublade von links.
   Logo-Block und Carenti-Karte entfallen dort, das Firmenlogo steht schon in der Kopfleiste. */
@media (max-width: 767.98px) {
  #navAside.cp-nav-dropdown { position: fixed; top: var(--cp-nav-top, 56px); bottom: auto; left: 0; right: 0; width: auto !important; max-width: none; max-height: calc(100dvh - var(--cp-nav-top, 56px)); border-radius: 0 0 var(--cp-radius-card) var(--cp-radius-card); box-shadow: var(--cp-shadow-pop); animation: cp-nav-auf .2s var(--cp-ease-out); }
  #navAside.cp-nav-dropdown > div:first-child, #navAside.cp-nav-dropdown > div:last-child { display: none; }
  #navAside.cp-nav-dropdown > nav { padding: 4px 12px 16px; overscroll-behavior: contain; }
  #navBackdrop.cp-nav-dropdown-bg { top: var(--cp-nav-top, 56px); }
}
@keyframes cp-nav-auf { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #navAside.cp-nav-dropdown { animation: none; } }

/* Automatische Kartenzeile (bis 1023 px) fuer Tabellen mit Label-Spans je Zelle:
   erste Zelle = Titel, letzte Zelle mit Aktionsmenue = oben rechts, Rest = Label + Wert. */
@media (max-width: 1023.98px) {
  tr.cp-kz-auto { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 8px; padding: 14px 16px; }
  tr.cp-kz-auto > td { display: flex; justify-content: flex-start; align-items: center; gap: 12px; min-width: 0; padding: 0; border: 0; grid-column: 1 / -1; font-size: 14px; color: var(--cp-text); overflow-wrap: anywhere; }
  tr.cp-kz-auto > td > span.text-xs:first-child { flex: none; width: 84px; font-size: 12px; font-weight: 400; color: var(--cp-text-muted); }
  tr.cp-kz-auto > td:first-child { grid-column: 1; grid-row: 1; font-size: 16px; font-weight: 700; }
  tr.cp-kz-auto > td:first-child > span.text-xs:first-child { display: none; }
  tr.cp-kz-auto > td.kz-leer { display: none; }
  tr.cp-kz-auto > td:last-child:has(.aktions-dropdown, [aria-haspopup="menu"]) { grid-column: 2; grid-row: 1; justify-content: flex-end; }
}
/* Handy: Seitenkopf-Aktionen fuellen die Zeile, statt einzeln umzubrechen. */
@media (max-width: 639.98px) {
  .cp-page-head .cp-btn { padding: 0 12px; }
  .cp-page-head .cp-btn--primary { flex: 1 1 auto; }
  .cp-page-head .flex-wrap.gap-3 { gap: 8px; }
}

/* Menue-Knopf der mobilen Kopfleiste: volles Touch-Ziel (44 px), Icon 22 px. */
.cp-menue-knopf { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--cp-radius-control); }
.cp-menue-knopf:active { background: rgba(255, 255, 255, .08); }
.cp-menue-knopf svg { width: 22px; height: 22px; }

/* Niedrige Laptop-Bildschirme (z. B. 1366x768): Sidebar dichter, damit mehr Menuepunkte ohne Scrollen sichtbar sind. */
@media (min-width: 1024px) and (max-height: 900px) {
  #navAside > div:first-child { height: 72px; padding-top: 12px; padding-bottom: 12px; }
  .cp-nav-link, .cp-nav-gruppe { min-height: 38px; }
  .cp-nav-link--sub { min-height: 34px; }
  .cp-brandkarte { padding: 10px; }
  .cp-brandkarte img { width: 96px; }
}

/* KPI-Kacheln (Dashboard): Betrag bleibt einzeilig und passt die Schriftgroesse an die
   Kachelbreite an (Container-Query), statt "€" in eine zweite Zeile zu schieben. */
.cp-kpi { container-type: inline-size; }
.cp-kpi-wert { font-size: 20px; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; }
@supports (font-size: 1cqi) { .cp-kpi-wert { font-size: clamp(16px, 12cqi, 30px); } }

/* Info-Punkt "i" neben einer Option: Hinweis bei Hover und bei Fokus (Tippen auf Touch-Geraeten).
   Markup: <button class="info-tip" aria-describedby="x"> direkt gefolgt von <div id="x" role="tooltip" class="info-tip-text">.
   Der Container braucht position: relative; der Hinweis nimmt dessen volle Breite (kein Ueberlauf am Rand). */
.info-tip {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  min-width: 44px; min-height: 44px; background: none; border: 0; cursor: help;
}
.info-tip > span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 9999px; border: 1.5px solid #94a3b8;
  color: #64748b; font: 600 11px/1 Georgia, serif; font-style: italic;
}
.info-tip:hover > span, .info-tip:focus-visible > span { border-color: var(--cp-primary-700); color: var(--cp-primary-700); }
.info-tip:focus { outline: none; }
.info-tip:focus-visible > span { box-shadow: 0 0 0 3px var(--cp-primary-100); }
.info-tip-text {
  display: none; position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px; z-index: 30;
  padding: 8px 10px; border-radius: 8px; background: #1e293b; color: #fff;
  font-size: 12px; line-height: 1.45; box-shadow: 0 8px 20px rgba(15, 23, 42, .18);
}
.info-tip:hover + .info-tip-text, .info-tip:focus + .info-tip-text { display: block; }

/* Formular-Module (Verkauf, spaeter Ankauf, Freie Rechnung, Angebote): Arbeitsblatt links, Uebersicht rechts.
   Ab 1180 px zwei Spalten; mit Maus scrollen beide Spalten einzeln (die Seite selbst scrollt dort nicht),
   auf dem Tablet scrollt die Seite und die Uebersicht bleibt oben stehen. Darunter steht die Uebersicht
   kompakt ueber dem Formular. Markup: .cp-form-work > .cp-form-sheet (Abschnitte .cp-form-sec) + .cp-form-rail.
   Die Uebersicht ist ein div (role="complementary"), kein <aside>: assets/sidebar.js setzt "aside { overflow: visible !important }". */
.cp-form-work { flex: 1 1 auto; display: flex; flex-direction: column; gap: 16px; padding: 16px; min-width: 0; }
.cp-form-sheet { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cp-form-rail { order: -1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 768px) { .cp-form-work { padding: 20px; gap: 20px; } .cp-form-sheet { gap: 20px; } }
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) { .cp-form-work { min-height: 0; overflow-y: auto; } }
@media (min-width: 1180px) {
  .cp-form-work { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; padding: 20px 24px 24px; }
  .cp-form-rail { order: 0; position: sticky; top: 16px; }
}
@media (min-width: 1180px) and (hover: hover) and (pointer: fine) {
  .cp-form-work { overflow: hidden; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  .cp-form-sheet, .cp-form-rail { position: static; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; }
  .cp-form-sheet { padding-right: 4px; padding-bottom: 8px; }
  .cp-form-rail { align-self: start; max-height: 100%; }
}
@media (min-width: 1440px) { .cp-form-work { grid-template-columns: minmax(0, 1fr) 380px; } }

.cp-form-sec { container-type: inline-size; background: var(--cp-surface); border: 1px solid var(--cp-border-soft); border-radius: var(--cp-radius-card); box-shadow: var(--cp-shadow-card); padding: 18px 16px 20px; scroll-margin-top: 12px; }
@media (min-width: 640px) { .cp-form-sec { padding: 22px 24px 24px; } }
.cp-form-sec-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--cp-border-soft); }
.cp-form-sec-head h3 { margin: 0; color: var(--cp-text); font-size: 17px; font-weight: 700; }
.cp-form-sec-head p { flex-basis: 100%; margin: 0; color: var(--cp-text-secondary); font-size: 13px; }
.cp-form-nr { color: var(--cp-primary-600); font-weight: 700; font-variant-numeric: tabular-nums; }
/* Felder verteilen sich nach Breite auf 1 bis 4 Spalten. */
.cp-form-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px 18px; }
.cp-form-fields > * { min-width: 0; }
.cp-form-span-2 { grid-column: span 2; }
.cp-form-full { grid-column: 1 / -1; }
@container (max-width: 460px) { .cp-form-span-2 { grid-column: 1 / -1; } }
.cp-form-label { display: block; margin-bottom: 6px; color: var(--cp-text-secondary); font-size: 13px; font-weight: 600; }
.cp-form-sec :is(input:not([type="checkbox"]):not([type="radio"]), select) { min-height: 44px; }
.cp-form-group + .cp-form-group { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--cp-border-soft); }
.cp-form-group-title { margin: 0 0 10px; color: var(--cp-text); font-size: 14px; font-weight: 600; }

/* Uebersicht */
.cp-form-ov { background: var(--cp-surface); border: 1px solid var(--cp-border-soft); border-radius: var(--cp-radius-card); box-shadow: var(--cp-shadow-card); padding: 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 24px; }
.cp-form-ov-block { min-width: 0; }
.cp-form-ov-block--weit { grid-column: 1 / -1; }
.cp-form-ov-title { margin: 0 0 8px; color: var(--cp-text-secondary); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.cp-form-ov-leer { color: var(--cp-text-muted); font-size: 14px; }
.cp-form-ov-name { display: block; color: var(--cp-text); font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.cp-form-ov-sub { color: var(--cp-text-muted); font-size: 13px; overflow-wrap: anywhere; }
.cp-form-ov-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cp-form-ov-chips span { padding: 2px 8px; border-radius: 8px; background: var(--cp-chip); color: var(--cp-text-secondary); font-size: 12px; font-variant-numeric: tabular-nums; }
.cp-form-kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; margin: 0; font-variant-numeric: tabular-nums; font-size: 14px; }
.cp-form-kv > div:not(.hidden) { display: contents; }
.cp-form-kv dt { color: var(--cp-text-secondary); }
.cp-form-kv dd { margin: 0; text-align: right; color: var(--cp-text); white-space: nowrap; }
.cp-form-kv > div.cp-form-kv-summe:not(.hidden) { display: flex; grid-column: 1 / -1; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 8px; border-top: 1px solid var(--cp-border-soft); }
.cp-form-kv-summe dt { color: var(--cp-text); font-weight: 600; }
.cp-form-kv-summe dd { font-size: 18px; font-weight: 700; }
.cp-form-kv .cp-form-kv-rest { color: var(--cp-primary-800); font-weight: 600; }
.cp-form-steps { display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0; padding: 0; }
.cp-form-ov-block--nur-breit { display: none; }
/* Handy: Fahrzeug und Kaeufer stehen schon in Abschnitt 1, oben bleibt nur die Summe. */
@media (max-width: 639.98px) { .cp-form-ov-block--ab-sm { display: none; } }
.cp-form-steps button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 6px 10px; border: 0; border-radius: 10px; background: none; color: var(--cp-text); font: 500 14px/1.3 var(--cp-font); text-align: left; cursor: pointer; }
.cp-form-steps button:hover { background: var(--cp-hover); }
.cp-form-step-punkt { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--cp-chip); color: var(--cp-text-secondary); font-size: 11px; font-weight: 700; }
.cp-form-step-punkt.is-ok { background: var(--cp-ok-bg); color: var(--cp-ok-text); }
.cp-form-step-punkt.is-warn { background: var(--cp-warn-bg); color: var(--cp-warn-text); }
.cp-form-step-info { flex: 0 1 auto; max-width: 48%; margin-left: auto; padding-left: 8px; overflow: hidden; color: var(--cp-text-muted); font-size: 12px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.cp-form-step-info.is-warn { color: var(--cp-warn-text); }
.cp-form-hinweis { border-radius: var(--cp-radius-item); padding: 12px 14px; background: var(--cp-warn-bg); color: var(--cp-warn-text); font-size: 13px; }
.cp-form-erfolg { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--cp-radius-item); background: var(--cp-ok-bg); }
.cp-form-erfolg .cp-btn { width: 100%; }
@media (min-width: 1180px) {
  .cp-form-ov { display: flex; flex-direction: column; gap: 0; padding: 20px; }
  .cp-form-ov-block:not(.hidden) ~ .cp-form-ov-block:not(.hidden) { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--cp-border-soft); }
  .cp-form-ov-block--nur-breit { display: block; }
}
/* Rechte Spalte mit zweiter Karte (z. B. Liste "Erstellte Angebote"): unter 1180 px steht die
   Uebersicht ueber dem Formular, die zweite Karte (.cp-form-rail-danach) darunter. */
@media (max-width: 1179.98px) {
  .cp-form-rail--geteilt { display: contents; }
  .cp-form-rail--geteilt > .cp-form-ov:first-child { order: -1; }
  .cp-form-rail--geteilt > .cp-form-rail-danach { order: 1; }
}
@media (prefers-reduced-motion: reduce) { .cp-form-sheet { scroll-behavior: auto; } }

/* Einstellungen: Bereichsnavigation links, rechts eine Karte mit Zeilen "Titel + Erklaerung links, Felder rechts".
   Unter 1024 px wird die Navigation zur wischbaren Leiste ueber dem Inhalt, unter 1280 px stehen Titel und
   Felder einer Zeile untereinander. Markup: .cp-set-work > .cp-set-nav + .cp-set-pane > [role=tabpanel] >
   .cp-set-karte > .cp-set-zeile > .cp-set-kopf + .cp-set-inhalt. Breite Inhalte (Tabellen): .cp-set-zeile--breit. */
.cp-set-work { flex: 1 1 auto; display: flex; flex-direction: column; gap: 16px; padding: 16px; min-width: 0; }
.cp-set-nav, .cp-set-pane { min-width: 0; }
.cp-set-nav-liste { display: flex; gap: 4px; padding: 6px; overflow-x: auto; background: var(--cp-surface); border: 1px solid var(--cp-border-soft); border-radius: var(--cp-radius-card); box-shadow: var(--cp-shadow-card); scrollbar-width: none; }
.cp-set-nav-liste::-webkit-scrollbar { display: none; }
.cp-set-nav-gruppe { display: none; margin: 14px 12px 4px; color: var(--cp-text-secondary); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.cp-set-nav-gruppe:first-child { margin-top: 6px; }
.cp-set-nav button { flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: none; color: var(--cp-text-secondary); font: 600 14px/1.2 var(--cp-font); text-align: left; white-space: nowrap; cursor: pointer; transition: background-color .15s ease-out, color .15s ease-out; }
.cp-set-nav button:hover { background: var(--cp-hover); color: var(--cp-text); }
.cp-set-nav button[aria-selected="true"] { background: var(--cp-primary-100); color: var(--cp-text-on-soft); }
.cp-set-nav button svg { flex: none; width: 18px; height: 18px; }
@media (min-width: 768px) { .cp-set-work { padding: 20px; gap: 20px; } }
@media (min-width: 1024px) {
  .cp-set-work { display: grid; grid-template-columns: 236px minmax(0, 1fr); align-items: start; padding: 20px 24px 24px; }
  .cp-set-nav { position: sticky; top: 16px; }
  .cp-set-nav-liste { flex-direction: column; padding: 10px; overflow: visible; }
  .cp-set-nav-gruppe { display: block; }
  .cp-set-nav button { width: 100%; white-space: normal; }
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .cp-set-work { min-height: 0; overflow: hidden; grid-template-rows: minmax(0, 1fr); }
  .cp-set-nav { position: static; max-height: 100%; overflow-y: auto; }
  .cp-set-pane { align-self: stretch; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; padding-bottom: 8px; }
}
.cp-set-karte { padding: 2px 16px; background: var(--cp-surface); border: 1px solid var(--cp-border-soft); border-radius: var(--cp-radius-card); box-shadow: var(--cp-shadow-card); }
@media (min-width: 640px) { .cp-set-karte { padding: 4px 28px; } }
.cp-set-zeile { display: grid; gap: 14px; padding: 20px 0; min-width: 0; }
.cp-set-zeile + .cp-set-zeile { border-top: 1px solid var(--cp-border-soft); }
.cp-set-kopf { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.cp-set-kopf :is(h2, h3) { margin: 0; color: var(--cp-text); font-size: 15px; font-weight: 700; }
.cp-set-kopf p { max-width: 46ch; }
.cp-set-inhalt { min-width: 0; }
.cp-set-zeile--breit > .cp-set-kopf { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
@media (min-width: 1280px) {
  .cp-set-zeile { grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: 32px; padding: 24px 0; }
  .cp-set-zeile--breit { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (prefers-reduced-motion: reduce) { .cp-set-nav button { transition: none; } }

/* Einstellungen fuer Nicht-Admins: alles lesen, nichts aendern; Administration nur verschwommen. */
.cp-set-nurlesen-hinweis { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; padding: 12px 16px; border-radius: var(--cp-radius-item); background: var(--cp-info-bg); color: var(--cp-info-text); font-size: 13px; font-weight: 500; line-height: 1.45; }
.cp-set-nurlesen-hinweis svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.cp-nur-lesen button:not([data-lesen]), .cp-nur-lesen div:has(> input[type="file"]) { display: none !important; }
.cp-nur-lesen :is(input, select, textarea):disabled { opacity: 1; color: var(--cp-text); -webkit-text-fill-color: var(--cp-text); background-color: var(--cp-surface-soft); cursor: default; }
.cp-set-gesperrt { position: relative; min-height: 320px; }
.cp-set-gesperrt > .cp-set-karte { filter: blur(6px); user-select: none; pointer-events: none; }
.cp-set-platzhalter { display: inline-block; max-width: 100%; height: 10px; border-radius: 5px; background: var(--cp-placeholder-to); vertical-align: middle; }
.cp-set-sperre { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding: 56px 16px 16px; }
.cp-set-sperre-karte { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 340px; padding: 20px 24px; text-align: center; background: var(--cp-surface); border: 1px solid var(--cp-border-soft); border-radius: var(--cp-radius-card); box-shadow: var(--cp-shadow-card); color: var(--cp-text-secondary); font-size: 13px; line-height: 1.45; }
.cp-set-sperre-karte svg { width: 22px; height: 22px; color: var(--cp-text-secondary); }
.cp-set-sperre-titel { margin: 0; color: var(--cp-text); font-size: 15px; font-weight: 700; }