/* Vertrieb (admin-vertrieb.html). Baut auf style.css auf: Farben, Schriften, Admin-Rahmen.
   Eigene Datei, damit style.css fuer diesen Bereich keine neue Nummer braucht. */

.vt-seite { max-width: 880px; }
.vt-seite[hidden], .vt-seite [hidden] { display: none !important; }

.vt-titelzeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.vt-titel { margin: 2px 0 6px; overflow-wrap: anywhere; }
.vt-unterzeile { color: var(--muted); margin: 0 0 18px; max-width: 62ch; }
.vt-mini { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.vt-leer { color: var(--muted); border: 1px dashed var(--line); border-radius: 12px; padding: 22px; text-align: center; }

/* Knoepfe: schlichter als .btn, damit viele davon nicht laut werden. */
.vt-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 1px solid var(--yellow); border-radius: 8px; background: var(--yellow); color: var(--ink); font-family: var(--font-mono); font-size: 0.82rem; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap; }
.vt-knopf:hover { background: var(--cyan); border-color: var(--cyan); }
.vt-knopf:disabled { opacity: 0.5; cursor: wait; }
.vt-knopf.vt-leise { background: transparent; color: var(--paper); border-color: var(--line); font-weight: 400; }
.vt-knopf.vt-leise:hover { border-color: var(--cyan); color: var(--cyan); }
.vt-knopf.vt-klein { min-height: 36px; padding: 0 10px; font-size: 0.74rem; }
.vt-knopf.vt-gefahr { background: transparent; color: #ff8a8a; border-color: rgba(255,138,138,0.4); font-weight: 400; }
.vt-knopf:focus-visible, .vt-reiter button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* Provision: Karte oben in der Liste und eigene Ansicht */
.vt-provision-karte { background: var(--panel); border: 1px solid rgba(51,230,224,0.35); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; }
.vt-prov-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.vt-prov-kopf a { font-family: var(--font-mono); font-size: 0.76rem; color: var(--cyan); text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.vt-prov-zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 4px; }
.vt-prov-zahlen div { min-width: 0; }
.vt-prov-zahlen b { display: block; font-family: var(--font-head); font-size: 1.35rem; color: var(--paper); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vt-prov-zahlen div:first-child b { color: var(--cyan); }
.vt-prov-zahlen span { display: block; color: var(--muted); font-size: 0.78rem; }
.vt-prov-gross { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 6px 0 18px; }
.vt-prov-gross b { font-size: 1.7rem; }
.vt-prov-hinweis { color: var(--muted); font-size: 0.86rem; margin: 10px 0 0; }
.vt-prov-zeilen { list-style: none; margin: 4px 0 0; padding: 0; }
.vt-prov-zeilen li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; flex-wrap: wrap; }
.vt-prov-zeilen span { color: var(--muted); font-size: 0.88rem; font-variant-numeric: tabular-nums; }
.vt-prov-name { font-size: 1.3rem; margin: 26px 0 4px; }
.vt-tabelle { overflow-x: auto; margin-bottom: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.vt-tabelle table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.vt-tabelle th { text-align: left; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 400; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.vt-tabelle td { padding: 10px 12px; border-bottom: 1px solid rgba(42,42,53,0.6); vertical-align: middle; font-variant-numeric: tabular-nums; }
.vt-tabelle tr:last-child td { border-bottom: 0; }
.vt-tabelle td small { display: block; color: var(--muted); font-size: 0.76rem; }
.vt-tabelle a { color: var(--paper); }
.vt-tabelle .vt-inaktiv td { color: var(--muted); }
.vt-ok { color: var(--cyan); white-space: nowrap; }
.vt-offen { color: var(--yellow); }
.vt-netto { grid-column: 1 / -1; margin: 0; font-size: 0.92rem; }
.vt-netto b { color: var(--cyan); }
.vt-netto span { display: block; color: var(--muted); font-size: 0.8rem; }
.vt-geld-titel { grid-column: 1 / -1; margin: 10px 0 0; }
.vt-briefing li { margin-bottom: 6px; }

/* Heute dran */
.vt-heute { background: var(--panel); border: 1px solid rgba(245,224,0,0.45); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; }
.vt-heute ul { list-style: none; margin: 0 0 8px; padding: 0; }
.vt-heute li { padding: 4px 0; }
.vt-heute li:last-child { padding-bottom: 0; }
.vt-heute a { color: var(--yellow); font-weight: 600; }
.vt-heute span { color: var(--muted); font-size: 0.88rem; }

/* Leitfaden */
.vt-leitfaden { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 18px; }
.vt-leitfaden > summary { cursor: pointer; padding: 12px 16px; min-height: 44px; display: flex; align-items: center; font-weight: 600; list-style: none; }
.vt-leitfaden > summary::-webkit-details-marker { display: none; }
.vt-leitfaden > summary::after { content: '›'; margin-left: auto; color: var(--muted); transition: transform 0.18s ease; }
.vt-leitfaden[open] > summary::after { transform: rotate(90deg); }
.vt-leitfaden-inhalt { padding: 0 16px 16px; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.vt-leitfaden-inhalt h3 { font-size: 1rem; margin: 0 0 6px; }
.vt-leitfaden-inhalt p, .vt-leitfaden-inhalt li { color: var(--muted); font-size: 0.92rem; margin: 0 0 8px; }
.vt-leitfaden-inhalt ul { padding-left: 18px; margin: 0; }
.vt-leitfaden-inhalt b { color: var(--paper); }
.vt-zitat { background: var(--panel-raised); border-left: 2px solid var(--cyan); border-radius: 4px; padding: 8px 10px; color: var(--paper) !important; }

/* Die vier Stapel: Anrufbereit, Geplant, Angerufen, Offen (und Alle) */
.vt-gruppen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.vt-gruppe { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 64px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--muted); font-family: var(--font-mono); font-size: 0.74rem; text-align: left; cursor: pointer; }
.vt-gruppe b { font-family: var(--font-head); font-size: 1.45rem; line-height: 1; color: var(--paper); }
.vt-gruppe:hover { border-color: #3a3a48; color: var(--paper); }
.vt-gruppe[aria-selected="true"] { border-color: var(--yellow); color: var(--yellow); background: rgba(245,224,0,0.06); }
.vt-gruppe[aria-selected="true"] b { color: var(--yellow); }
.vt-gruppe[data-filter="bereit"] b { color: var(--cyan); }
.vt-gruppe:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.vt-punkt { display: inline-block; width: 7px; height: 7px; margin-left: 4px; border-radius: 50%; background: var(--yellow); vertical-align: middle; }
.vt-gruppe-text { color: var(--muted); font-size: 0.86rem; margin: 8px 0 12px; }

/* Zaehler und Filter */
.vt-zaehler { display: block; }
.vt-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.vt-filter input, .vt-filter select { min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--paper); font: inherit; }
.vt-filter input { flex: 1 1 220px; min-width: 0; }
.vt-filter select { flex: 1 1 160px; max-width: 260px; min-width: 0; }
.vt-treffer { color: var(--muted); font-family: var(--font-mono); font-size: 0.74rem; margin: 10px 0 8px; }

/* Eintraege */
.vt-liste { display: grid; gap: 8px; }
.vt-eintrag { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.vt-eintrag[open] { border-color: #3a3a48; }
.vt-eintrag > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 12px 16px; min-height: 56px; }
.vt-eintrag > summary::-webkit-details-marker { display: none; }
.vt-eintrag > summary::after { content: '›'; flex: none; color: var(--muted); font-size: 1.15rem; transition: transform 0.18s ease; }
.vt-eintrag[open] > summary::after { transform: rotate(90deg); }
.vt-eintrag > summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; border-radius: 12px; }
.vt-eintrag > summary:hover .vt-kopf b { color: var(--cyan); }
.vt-kopf { flex: 1; min-width: 0; }
.vt-kopf b { display: block; font-size: 1rem; overflow-wrap: anywhere; }
.vt-kopf small { display: block; color: var(--muted); font-size: 0.82rem; overflow-wrap: anywhere; }
.vt-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.vt-chips-gross { margin: 0 0 18px; }
.vt-chip { font-family: var(--font-mono); font-size: 0.66rem; padding: 3px 7px; border-radius: 4px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.vt-chip.vt-fertig { color: var(--cyan); border-color: rgba(51,230,224,0.45); }
.vt-chip.vt-faellig { color: var(--yellow); border-color: rgba(245,224,0,0.55); }
.vt-chip.vt-art-tot { color: #ff8a8a; border-color: rgba(255,138,138,0.35); }
.vt-status[data-status="interesse"], .vt-status[data-status="termin"], .vt-status[data-status="kunde"], .vt-status[data-status="gesendet"] { color: #7be3a0; border-color: rgba(123,227,160,0.45); }
.vt-status[data-status="rueckruf"] { color: var(--yellow); border-color: rgba(245,224,0,0.45); }
.vt-status[data-status="kein_interesse"] { color: #ff8a8a; border-color: rgba(255,138,138,0.35); }
.vt-inhalt { padding: 0 16px 16px; }

/* Arbeitsblock: links Telefon und Unterlagen, rechts das Formular */
.vt-arbeit { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); padding-top: 6px; border-top: 1px solid var(--line); }
.vt-eintrag-einzeln .vt-arbeit { border-top: 0; padding-top: 0; }
.vt-links { min-width: 0; padding-top: 10px; }
.vt-telefon { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 4px; }
.vt-nummer { font-family: var(--font-head); font-weight: 700; font-size: 1.55rem; color: var(--paper); text-decoration: none; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.vt-nummer:hover { color: var(--yellow); }
.vt-zeit { color: var(--muted); font-size: 0.9rem; margin: 0 0 12px; }
.vt-zeit b { color: var(--paper); font-weight: 600; }
.vt-preis { margin: 0 0 12px; font-size: 0.95rem; }
.vt-preis b { color: var(--cyan); }
.vt-preis span { display: block; color: var(--muted); font-size: 0.82rem; margin-top: 2px; }
.vt-einstieg { margin: 0 0 12px; padding-left: 18px; font-size: 0.92rem; }
.vt-einstieg li { margin-bottom: 4px; }
.vt-hinweis { background: rgba(51,230,224,0.08); border: 1px solid rgba(51,230,224,0.3); border-radius: 8px; padding: 10px 12px; font-size: 0.9rem; margin: 0 0 12px; }
.vt-alt { color: var(--muted); font-size: 0.86rem; margin: 0 0 4px; overflow-wrap: anywhere; }
.vt-alt a { color: var(--muted); }
.vt-alt a:hover { color: var(--cyan); }
.vt-unterlagen { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: center; margin: 0 0 14px; }
.vt-unterlagen:not(:has(.vt-daumen)) { grid-template-columns: minmax(0, 1fr); }
.vt-daumen { display: block; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); transition: border-color 0.2s, transform 0.2s; }
.vt-daumen:hover { border-color: var(--cyan); transform: translateY(-2px); }
.vt-daumen img { display: block; width: 100%; height: auto; }
.vt-unterlagen-knoepfe { display: grid; gap: 8px; min-width: 0; }
.vt-unterlagen-knoepfe .vt-knopf { white-space: normal; text-align: center; padding: 8px 12px; }

.vt-form { min-width: 0; padding-top: 10px; display: grid; gap: 10px; align-content: start; }
.vt-feld { display: grid; gap: 4px; min-width: 0; }
.vt-feld > span { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.vt-feld input, .vt-feld select, .vt-feld textarea { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--ink); color: var(--paper); font: inherit; font-size: 0.95rem; }
.vt-feld textarea { min-height: 88px; resize: vertical; }
.vt-feld input:focus, .vt-feld select:focus, .vt-feld textarea:focus { outline: none; border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(245,224,0,0.15); }
.vt-feld input[type="date"] { color-scheme: dark; }
.vt-feld input[type="file"] { padding: 9px 10px; font-size: 0.85rem; }
.vt-feld-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vt-status-wahl[data-status="interesse"], .vt-status-wahl[data-status="termin"], .vt-status-wahl[data-status="kunde"], .vt-status-wahl[data-status="gesendet"] { border-color: rgba(123,227,160,0.6); }
.vt-status-wahl[data-status="rueckruf"] { border-color: rgba(245,224,0,0.6); }
.vt-status-wahl[data-status="kein_interesse"] { border-color: rgba(255,138,138,0.5); }
.vt-form-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.vt-meldung { color: var(--muted); font-size: 0.8rem; font-family: var(--font-mono); }
.vt-meldung.vt-ok { color: var(--cyan); }

.vt-verlauf, .vt-stamm { margin-top: 14px; border-top: 1px solid var(--line); }
.vt-verlauf > summary, .vt-stamm > summary { cursor: pointer; padding: 10px 0 4px; min-height: 40px; font-family: var(--font-mono); font-size: 0.74rem; color: var(--muted); }
.vt-verlauf > summary:hover, .vt-stamm > summary:hover { color: var(--cyan); }
.vt-verlauf-liste { list-style: none; margin: 4px 0 0; padding: 0; font-size: 0.88rem; }
.vt-verlauf-liste li { padding: 4px 0; border-bottom: 1px solid rgba(42,42,53,0.6); }
.vt-verlauf-liste span { color: var(--muted); font-family: var(--font-mono); font-size: 0.72rem; margin-right: 6px; }
.vt-stamm-form { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin-top: 8px; }
.vt-stamm-form .vt-feld:has(textarea), .vt-stamm-form .vt-form-fuss { grid-column: 1 / -1; }
.vt-pdfs { display: grid; gap: 10px; margin-top: 14px; }

/* Einzelansicht */
.vt-reiter { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
.vt-reiter::-webkit-scrollbar { display: none; }
.vt-reiter button { flex: none; min-height: 44px; padding: 0 14px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); font-family: var(--font-mono); font-size: 0.8rem; cursor: pointer; }
.vt-reiter button:hover { color: var(--paper); }
.vt-reiter button[aria-selected="true"] { color: var(--cyan); border-bottom-color: var(--cyan); }
.vt-dok-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.vt-url { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); overflow-wrap: anywhere; }
.vt-seiten { display: grid; gap: 14px; }
.vt-seiten img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 6px 24px rgba(0,0,0,0.45); background: #fff; }
.vt-bildschirme { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 16px; }
.vt-bildschirme figure { margin: 0; }
.vt-bildschirme img { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); }
.vt-handy img { border-radius: 18px; }
.vt-bildschirme figcaption { color: var(--muted); font-size: 0.78rem; font-family: var(--font-mono); margin-top: 6px; }

/* Neuer Betrieb */
.vt-dialog { width: min(480px, calc(100vw - 32px)); background: var(--panel); color: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.vt-dialog::backdrop { background: rgba(0,0,0,0.65); }
.vt-dialog h2 { font-size: 1.3rem; margin: 0 0 14px; }
.vt-dialog form { display: grid; gap: 10px; }
.vt-dialog-knoepfe { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }

@media (max-width: 720px) {
  .vt-arbeit { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .vt-stamm-form { grid-template-columns: minmax(0, 1fr); }
  .vt-bildschirme { grid-template-columns: minmax(0, 1fr); }
  .vt-handy { max-width: 260px; }
  .vt-filter select { max-width: none; }
}
@media (max-width: 560px) {
  .vt-prov-zahlen b { font-size: 1.1rem; }
  .vt-prov-gross b { font-size: 1.3rem; }
  .vt-gruppen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vt-gruppe[data-filter=""] { grid-column: 1 / -1; min-height: 44px; flex-direction: row; align-items: center; gap: 8px; }
  .vt-gruppe[data-filter=""] b { font-size: 1.1rem; }
}
@media (max-width: 420px) {
  .vt-feld-zeile { grid-template-columns: minmax(0, 1fr); }
  .vt-eintrag > summary { padding: 12px 14px; }
  .vt-inhalt { padding: 0 14px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .vt-daumen, .vt-eintrag > summary::after, .vt-leitfaden > summary::after { transition: none; }
}