/* Buchungs-Trichter (06.10.2026, Gestaltung Baris, Inhalt Ali) – gekapselt unter #act-section-trichter.
   Farben liegen auf den Variablen des neuen Designs (design-neu.css) mit Rückfallwerten fürs alte Design. */
#act-section-trichter {
  --tk-bg: var(--n-bg, #F1F5F9); --tk-card: var(--n-card, #FFFFFF); --tk-card-2: var(--n-card-2, #F8FAFC);
  --tk-line: var(--n-line, #CBD5E1); --tk-line-soft: var(--n-line-soft, #E2E8F0);
  --tk-ink: var(--n-ink, #0F172A); --tk-ink-2: var(--n-ink-2, #475569); --tk-ink-3: var(--n-ink-3, #64748B);
  --tk-acc: var(--n-acc, #84CC16); --tk-acc-hi: #A3E635; --tk-acc-text: var(--n-acc-text, #3F6212); --tk-on-acc: #0F172A; --tk-acc-soft: var(--n-acc-soft, rgba(132,204,22,.16));
  --tk-bar: #334155; --tk-funnel: #E2E8F0; --tk-loss: #B91C1C; --tk-loss-soft: #FEE2E2; --tk-loss-strong: #991B1B; --tk-wenig: #94A3B8;
  --tk-shadow: none; --tk-f-head: var(--n-f-head, 'Outfit', system-ui, sans-serif); --tk-f-text: var(--n-f-text, 'Inter', system-ui, sans-serif);
  --tk-r-l: 16px; --tk-r-m: 12px; --tk-r-s: 8px;
  font-variant-numeric: tabular-nums;
}
#act-section-trichter .card-body { padding: 0 0 4px; }
#act-section-trichter h2, #act-section-trichter h3 { font-family: var(--tk-f-head); margin: 0; }
#act-section-trichter p { margin: 0; }
#act-section-trichter .kopf { padding: 18px 24px 0; }
#act-section-trichter .kopf h3 { font-size: 20px; font-weight: 600; }
#act-section-trichter .leise { color: var(--tk-ink-3); }
#act-section-trichter .klein { font-size: 13px; }
#act-section-trichter td.umbruch { overflow-wrap: anywhere; }
#act-section-trichter .fuss.top { margin: 0 0 10px; }
#act-section-trichter .herkunft li.leise { font-size: 14px; }
#act-section-trichter details { margin: 0; }
#act-section-trichter .lk-zahl .vh, #act-section-trichter .lk-zahl > span { display: inline; }
@media (max-width: 720px) { #act-section-trichter .kopf { padding: 14px 16px 0; } }

/* ── Mietbar-Designsystem, wie Vehicle Control „Neues Design“ (design-neu.css) ── */


/* Vorschau-Rahmen (gehört nicht zum Dashboard) */


#act-section-trichter .kopf { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; padding:20px 24px 0; }
#act-section-trichter .kopf h1 { font-size:22px; font-weight:600; letter-spacing:-.01em; }
#act-section-trichter .kopf .zr { color:var(--tk-ink-3); font-size:13px; margin-top:2px; }

/* Umschalter */
#act-section-trichter .seg { display:inline-flex; padding:3px; gap:2px; border-radius:999px; background:var(--tk-card-2); border:1px solid var(--tk-line-soft); }
#act-section-trichter .seg button { min-height:38px; min-width:44px; padding:0 14px; border:0; border-radius:999px; background:transparent; color:var(--tk-ink-2); cursor:pointer; font-weight:500; font-size:14px; }
#act-section-trichter .seg button[aria-pressed="true"] { background:var(--tk-card); color:var(--tk-ink); font-weight:600; box-shadow:0 0 0 1px var(--tk-line), 0 1px 2px rgba(15,23,42,.08); }

/* ── Oben: Hauptzahl ── */
#act-section-trichter .lead { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:0; margin:20px 24px 0; border:1px solid var(--tk-line-soft); border-radius:var(--tk-r-m); }
#act-section-trichter .lead-haupt { padding:20px 22px; }
#act-section-trichter .lead-zahl { font:700 64px/1 var(--tk-f-head); letter-spacing:-.03em; display:flex; align-items:baseline; gap:10px; }
#act-section-trichter .lead-zahl small { font:600 22px/1 var(--tk-f-head); letter-spacing:0; color:var(--tk-ink-2); }
#act-section-trichter .lead-text { margin-top:6px; font-size:16px; color:var(--tk-ink); max-width:34ch; }
#act-section-trichter .lead.wenig .lead-zahl { color:var(--tk-wenig); }
#act-section-trichter .vergleich { display:grid; grid-template-columns:26px minmax(0,1fr); align-items:start; gap:10px; margin-top:14px; font-size:14px; color:var(--tk-ink-2); }
#act-section-trichter .vgl-zeichen { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:999px; background:var(--tk-card-2); border:1px solid var(--tk-line-soft); flex:none; }
#act-section-trichter .vgl-zeichen svg { width:14px; height:14px; }
#act-section-trichter .vgl-zeichen.auf { background:var(--tk-acc-soft); border-color:var(--tk-acc); color:var(--tk-acc-text); }
#act-section-trichter .vgl-zeichen.ab { background:var(--tk-loss-soft); border-color:var(--tk-loss); color:var(--tk-loss); }
#act-section-trichter .geraete { margin-top:10px; font-size:14px; color:var(--tk-ink-2); }
#act-section-trichter .geraete b { color:var(--tk-ink); font-weight:600; }
#act-section-trichter .warnsatz { margin-top:12px; padding:10px 12px; border-radius:var(--tk-r-s); background:var(--tk-card-2); border:1px dashed var(--tk-line); color:var(--tk-ink-2); font-size:14px; }

#act-section-trichter .lead-neben { border-left:1px solid var(--tk-line-soft); display:grid; grid-template-rows:1fr 1fr; }
#act-section-trichter .fakt { padding:16px 22px; display:flex; flex-direction:column; justify-content:center; }
#act-section-trichter .fakt + .fakt { border-top:1px solid var(--tk-line-soft); }
#act-section-trichter .fakt-zahl { font:700 34px/1.05 var(--tk-f-head); letter-spacing:-.02em; }
#act-section-trichter .fakt-zahl.verlust { color:var(--tk-loss); }
#act-section-trichter .fakt-zahl small { font-size:16px; font-weight:600; letter-spacing:0; margin-left:4px; }
#act-section-trichter .fakt-titel { font-size:14px; color:var(--tk-ink-2); margin-top:4px; }
#act-section-trichter .fakt-klein { font-size:13px; color:var(--tk-ink-3); margin-top:2px; }

/* Klartext */
#act-section-trichter .klartext { margin:18px 24px 0; padding:0 0 0 16px; border-left:3px solid var(--tk-acc); font-size:16px; line-height:1.6; max-width:72ch; }
#act-section-trichter .klartext p + p { margin-top:6px; }
#act-section-trichter .klartext p:first-child { font:600 18px/1.45 var(--tk-f-head); }
@media (max-width:720px){ #act-section-trichter .klartext p:first-child { font-size:17px; } }
#act-section-trichter .aenderungen { margin:10px 24px 0 43px; font-size:13px; color:var(--tk-ink-3); max-width:72ch; }

/* ── Trichter ── */
#act-section-trichter .abschnitt { padding:28px 24px 0; }
#act-section-trichter .abschnitt-kopf { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:10px 16px; margin-bottom:16px; }
#act-section-trichter .abschnitt-kopf h2 { font-size:18px; font-weight:600; }
#act-section-trichter .abschnitt-kopf p { font-size:14px; color:var(--tk-ink-3); margin-top:2px; }

#act-section-trichter .trichter { list-style:none; margin:0; padding:0; }
#act-section-trichter .stufe, #act-section-trichter .luecke { display:grid; grid-template-columns:minmax(0,1fr) 300px; column-gap:24px; }
#act-section-trichter .stufe { grid-template-areas:"balken name" "balken wert"; align-items:center; }
#act-section-trichter .st-balken { grid-area:balken; height:40px; display:flex; justify-content:center; }
#act-section-trichter .st-balken i { display:block; height:100%; width:var(--w); min-width:6px; background:var(--tk-bar); border-radius:6px; }
#act-section-trichter .stufe.gebucht .st-balken i { background:var(--tk-acc); }
#act-section-trichter .stufe.wenig .st-balken i { background:var(--tk-wenig); }
#act-section-trichter .st-name { grid-area:name; font-weight:600; font-size:15px; align-self:end; }
#act-section-trichter .st-wert { grid-area:wert; align-self:start; display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
#act-section-trichter .st-wert b { font:700 26px/1.1 var(--tk-f-head); }
#act-section-trichter .st-wert span { color:var(--tk-ink-2); font-size:14px; }
#act-section-trichter .st-wert em { font-style:normal; color:var(--tk-ink-3); font-size:13px; }
#act-section-trichter .stufe.wenig .st-wert b { color:var(--tk-wenig); }
#act-section-trichter .stufe.gebucht .st-wert b { color:var(--tk-acc-text); }

#act-section-trichter .luecke { grid-template-areas:"form zahl" "form grund"; min-height:52px; }
#act-section-trichter .lk-form { grid-area:form; width:100%; height:100%; min-height:52px; display:block; }
#act-section-trichter .lk-form polygon { fill:var(--tk-funnel); }
#act-section-trichter .lk-zahl { grid-area:zahl; align-self:end; color:var(--tk-loss); font-weight:600; font-size:14px; padding-top:6px; }
#act-section-trichter .lk-zahl b { font:700 18px/1 var(--tk-f-head); }
#act-section-trichter .luecke.groesste .lk-zahl { align-self:end; }
#act-section-trichter .luecke.groesste .lk-zahl span.chip { display:inline-flex; align-items:baseline; gap:6px; background:var(--tk-loss-soft); color:var(--tk-loss-strong); padding:4px 10px; border-radius:999px; }
#act-section-trichter .lk-grund { grid-area:grund; align-self:start; font-size:13.5px; color:var(--tk-ink-2); padding:2px 0 8px; }
#act-section-trichter .lk-grund p + p { margin-top:3px; }
#act-section-trichter .lk-grund .gk { color:var(--tk-ink); font-weight:600; }
#act-section-trichter .geraet-hinweis { font-size:13.5px; color:var(--tk-ink-2); margin:0 0 12px; }
#act-section-trichter .geraet-hinweis:empty { display:none; }
#act-section-trichter .lk-zahl.null { color:var(--tk-ink-3); font-weight:500; }

/* Herkunft */
#act-section-trichter .herkunft { list-style:none; margin:0; padding:0; display:grid; gap:14px; }
#act-section-trichter .hk { display:grid; grid-template-columns:minmax(0,220px) minmax(0,1fr) 200px; gap:4px 16px; align-items:center; }
#act-section-trichter .hk-name { font-weight:600; font-size:15px; }
#act-section-trichter .hk-name small { display:block; font-weight:400; color:var(--tk-ink-3); font-size:13px; }
#act-section-trichter .hk-spur { height:14px; background:var(--tk-card-2); border-radius:999px; overflow:hidden; border:1px solid var(--tk-line-soft); }
#act-section-trichter .hk-spur i { display:block; height:100%; width:var(--w); background:var(--tk-acc); border-radius:999px; }
#act-section-trichter .hk.intern .hk-spur i { background:var(--tk-wenig); }
#act-section-trichter .hk-zahl { text-align:right; font-size:14px; color:var(--tk-ink-2); }
#act-section-trichter .hk-zahl b { font:700 20px/1 var(--tk-f-head); color:var(--tk-ink); }
#act-section-trichter .fuss { font-size:13px; color:var(--tk-ink-3); margin-top:12px; max-width:80ch; }

/* Einklappbare Bereiche */
#act-section-trichter .mehr { padding:28px 24px 8px; }
#act-section-trichter .mehr > h2 { font-size:18px; font-weight:600; margin-bottom:10px; }
#act-section-trichter details { border-top:1px solid var(--tk-line-soft); }
#act-section-trichter details:last-of-type { border-bottom:1px solid var(--tk-line-soft); }
#act-section-trichter summary { list-style:none; cursor:pointer; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 12px; padding:14px 4px; min-height:56px; align-items:center; }
#act-section-trichter summary::-webkit-details-marker { display:none; }
#act-section-trichter summary .s-titel { font-weight:600; font-size:15px; }
#act-section-trichter summary .s-kurz { grid-column:1; font-size:13.5px; color:var(--tk-ink-3); }
#act-section-trichter summary .s-pfeil { grid-row:1 / span 2; grid-column:2; width:28px; height:28px; border-radius:999px; display:grid; place-items:center; border:1px solid var(--tk-line-soft); transition:transform .2s cubic-bezier(.23,1,.32,1); }
#act-section-trichter details[open] summary .s-pfeil { transform:rotate(180deg); }
#act-section-trichter summary:hover .s-titel { color:var(--tk-acc-text); }
#act-section-trichter .d-inhalt { padding:0 4px 18px; }
#act-section-trichter .alarm { color:var(--tk-loss); font-weight:600; }

#act-section-trichter table { width:100%; border-collapse:collapse; font-size:14px; }
#act-section-trichter th, #act-section-trichter td { padding:9px 10px; border-bottom:1px solid var(--tk-line-soft); text-align:left; vertical-align:top; }
#act-section-trichter th { font-weight:600; color:var(--tk-ink-3); font-size:13px; }
#act-section-trichter td.z, #act-section-trichter th.z { text-align:right; white-space:nowrap; }
#act-section-trichter tr:last-child td { border-bottom:0; }
#act-section-trichter .tabelle-rahmen { overflow-x:auto; }
#act-section-trichter .mini-liste { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
#act-section-trichter .mini-liste li { display:grid; grid-template-columns:minmax(0,1fr) minmax(60px,40%) 44px; gap:12px; align-items:center; font-size:14px; }
#act-section-trichter .mini-liste .spur { height:10px; background:var(--tk-card-2); border-radius:999px; overflow:hidden; border:1px solid var(--tk-line-soft); }
#act-section-trichter .mini-liste .spur i { display:block; height:100%; width:var(--w); background:var(--tk-bar); }
#act-section-trichter .mini-liste .n { text-align:right; font-weight:600; }
#act-section-trichter .fakten { display:flex; flex-wrap:wrap; gap:6px 18px; font-size:14px; color:var(--tk-ink-2); margin:12px 0 4px; }
#act-section-trichter .fakten b { color:var(--tk-ink); }
#act-section-trichter .besuch { padding:10px 0; border-bottom:1px solid var(--tk-line-soft); font-size:14px; }
#act-section-trichter .besuch:last-child { border-bottom:0; }
#act-section-trichter .besuch-kopf { display:flex; flex-wrap:wrap; gap:4px 12px; color:var(--tk-ink-3); font-size:13px; }
#act-section-trichter .besuch-kopf b { color:var(--tk-ink); font-weight:600; }
#act-section-trichter .weg { margin-top:4px; display:flex; flex-wrap:wrap; gap:4px; }
#act-section-trichter .weg span { padding:2px 8px; border-radius:999px; background:var(--tk-card-2); border:1px solid var(--tk-line-soft); font-size:13px; }
#act-section-trichter .weg span.zurueck { border-style:dashed; }
#act-section-trichter .weg span.gebucht { background:var(--tk-acc-soft); border-color:var(--tk-acc); color:var(--tk-acc-text); font-weight:600; }
#act-section-trichter .besuch.ist-gebucht .besuch-kopf b { color:var(--tk-acc-text); }
#act-section-trichter .kartenfuss { padding:14px 24px 20px; font-size:13px; color:var(--tk-ink-3); border-top:1px solid var(--tk-line-soft); margin-top:12px; }

/* ── Handy ── */
@media (max-width: 720px) {
  #act-section-trichter .kopf { padding:16px 16px 0; }
  #act-section-trichter .kopf h1 { font-size:20px; }
  #act-section-trichter .lead { grid-template-columns:1fr; margin:16px 16px 0; }
  #act-section-trichter .lead-haupt { padding:16px; }
  #act-section-trichter .lead-zahl { font-size:52px; }
  #act-section-trichter .lead-neben { border-left:0; border-top:1px solid var(--tk-line-soft); grid-template-rows:auto; grid-template-columns:1fr 1fr; }
  #act-section-trichter .fakt { padding:14px 16px; justify-content:flex-start; }
  #act-section-trichter .seg button { min-height:44px; }
  #act-section-trichter .fakt + .fakt { border-top:0; border-left:1px solid var(--tk-line-soft); }
  #act-section-trichter .fakt-zahl { font-size:28px; }
  #act-section-trichter .klartext { margin:16px 16px 0; padding-left:12px; font-size:15.5px; }
  #act-section-trichter .aenderungen { margin:10px 16px 0 31px; }
  #act-section-trichter .abschnitt { padding:24px 16px 0; }
  #act-section-trichter .stufe, #act-section-trichter .luecke { grid-template-columns:minmax(0,1fr) 92px; column-gap:12px; }
  #act-section-trichter .stufe { grid-template-areas:"name name" "balken wert"; }
  #act-section-trichter .st-name { font-size:14px; padding-bottom:4px; }
  #act-section-trichter .st-name em { display:none; }
  #act-section-trichter .st-balken { height:32px; }
  #act-section-trichter .st-wert { align-self:center; flex-direction:column; gap:0; align-items:flex-end; text-align:right; }
  #act-section-trichter .st-wert b { font-size:22px; }
  #act-section-trichter .st-wert span { font-size:12.5px; }
  #act-section-trichter .st-wert em { display:none; }
  #act-section-trichter .luecke { grid-template-areas:"form zahl" "grund grund"; min-height:40px; }
  #act-section-trichter .lk-form { min-height:40px; }
  #act-section-trichter .lk-zahl { align-self:center; text-align:right; padding-top:0; font-size:13px; }
  #act-section-trichter .lk-zahl .lang { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  #act-section-trichter .lk-grund { padding:4px 0 10px; }
  #act-section-trichter .hk { grid-template-columns:minmax(0,1fr) auto; }
  #act-section-trichter .hk-spur { grid-column:1 / -1; grid-row:2; }
  #act-section-trichter .mehr { padding:24px 16px 8px; }
  #act-section-trichter .kartenfuss { padding:14px 16px 18px; }
  #act-section-trichter .mini-liste li { grid-template-columns:minmax(0,1fr) 72px 36px; }
}
@media (max-width: 380px) {
  #act-section-trichter .lead-neben { grid-template-columns:1fr; }
  #act-section-trichter .fakt + .fakt { border-left:0; border-top:1px solid var(--tk-line-soft); }
}
@media (prefers-reduced-motion: reduce) { #act-section-trichter summary .s-pfeil { transition:none; } }


/* ── Chef 06.10.2026 abends: am Handy volle Breite, Kacheln untereinander, im dunklen Modus dunkel ── */
#act-section-trichter { padding: 0 !important; }
@media (max-width: 720px) {
  #act-section-trichter { margin-left: -12px !important; margin-right: -12px !important; width: auto !important; max-width: none !important; border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; }
  #act-section-trichter .lead { margin: 14px 12px 0; }
  #act-section-trichter .lead-haupt { padding: 14px 14px 12px; }
  #act-section-trichter .lead-zahl { font-size: 48px; }
  #act-section-trichter .lead-text { font-size: 15px; }
  #act-section-trichter .klartext { margin: 14px 12px 0; }
  #act-section-trichter .abschnitt { padding: 22px 12px 0; }
  #act-section-trichter .mehr { padding: 22px 12px 8px; }
  #act-section-trichter .kartenfuss { padding: 12px 12px 16px; }
  #act-section-trichter .kopf { padding: 14px 12px 0; }
  #act-section-trichter .kopf .seg button { min-width: 0; padding: 0 10px; }
  #act-section-trichter .stufe, #act-section-trichter .luecke { grid-template-columns: minmax(0,1fr) 104px; column-gap: 10px; }
}
@media (max-width: 560px) {
  #act-section-trichter .lead-neben { grid-template-columns: 1fr; }
  #act-section-trichter .fakt + .fakt { border-left: 0; border-top: 1px solid var(--tk-line-soft); }
  #act-section-trichter .fakt-zahl { font-size: 26px; }
  #act-section-trichter .fakt-zahl small { white-space: nowrap; }
}
/* Dunkler Modus: der Trichter wird dunkel (Chef-Wunsch), der Reiterinhalt dahinter ebenfalls, solange der Trichter offen ist */
html[data-design="neu"][data-vc-theme="dark"] #tab-activity.vc-trichter-aktiv.tab-pane:not(.hidden) { background: transparent; padding: 0; color-scheme: dark; }
html[data-design="neu"][data-vc-theme="dark"] #act-section-trichter {
  --tk-card: #0F172A; --tk-card-2: #1E293B; --tk-line: #334155; --tk-line-soft: rgba(148,163,184,.18);
  --tk-ink: #F8FAFC; --tk-ink-2: #CBD5E1; --tk-ink-3: #94A3B8;
  --tk-acc-text: #A3E635; --tk-acc-soft: rgba(132,204,22,.14);
  --tk-bar: #CBD5E1; --tk-funnel: rgba(148,163,184,.16);
  --tk-loss: #FCA5A5; --tk-loss-soft: rgba(248,113,113,.14); --tk-loss-strong: #FECACA; --tk-wenig: #64748B;
  background: var(--tk-card) !important; border-color: var(--tk-line-soft) !important; color: var(--tk-ink) !important; color-scheme: dark; box-shadow: none !important;
}
html[data-design="neu"][data-vc-theme="dark"] #act-section-trichter .card-body { background: transparent; color: var(--tk-ink); }
html[data-design="neu"][data-vc-theme="dark"] #act-section-trichter #btn-refresh-trichter { background: var(--tk-card-2); color: var(--tk-ink); border: 1px solid var(--tk-line); }
html[data-design="neu"][data-vc-theme="dark"] #act-section-trichter .kopf h3, html[data-design="neu"][data-vc-theme="dark"] #act-section-trichter h2 { color: var(--tk-ink); }
html[data-design="neu"][data-vc-theme="dark"] #act-section-trichter table, html[data-design="neu"][data-vc-theme="dark"] #act-section-trichter td { color: var(--tk-ink); background: transparent; }
@media (max-width: 720px) { html[data-design="neu"][data-vc-theme="dark"] #act-section-trichter { margin-left: -12px !important; margin-right: -12px !important; } }