/* Vertriebs-Modul (22.10.2026): tablet-taugliche Bedienelemente und Lesetext für Rechtstexte.
   Ergänzt das vorgebaute tailwind.min.css (dort fehlen einige Klassen); Hell/Dunkel über html.dark. */
.vt-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; padding: .75rem 1.25rem;
  border-radius: .75rem; font-size: 1rem; font-weight: 600; line-height: 1.25; cursor: pointer; border: 1px solid transparent;
  transition: background-color .15s, color .15s, border-color .15s; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.vt-btn:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
.vt-btn-primary { background: #2563eb; color: #fff; }
.vt-btn-primary:hover { background: #1d4ed8; }
.vt-btn-secondary { background: #fff; color: #1e293b; border-color: #cbd5e1; }
.vt-btn-secondary:hover { background: #f1f5f9; }
.vt-btn-danger { background: #dc2626; color: #fff; }
.vt-btn-danger:hover { background: #b91c1c; }
.vt-btn-ghost { background: transparent; color: #475569; border-color: transparent; }
.vt-btn-ghost:hover { background: #f1f5f9; }
.vt-btn-lg { min-height: 3.5rem; font-size: 1.125rem; padding: .9rem 1.5rem; }
.vt-btn[disabled], .vt-btn.is-disabled { opacity: .5; cursor: not-allowed; }
.dark .vt-btn-secondary { background: #1e293b; color: #e2e8f0; border-color: #475569; }
.dark .vt-btn-secondary:hover { background: #334155; }
.dark .vt-btn-ghost { color: #cbd5e1; }
.dark .vt-btn-ghost:hover { background: #334155; }

.vt-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 1rem; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.dark .vt-card { background: #1e293b; border-color: #334155; }
.vt-card-head { padding: 1rem 1.25rem; border-bottom: 1px solid #f1f5f9; font-weight: 600; }
.dark .vt-card-head { border-color: #334155; }
.vt-card-body { padding: 1.25rem; }

.vt-input, .vt-select, .vt-textarea { display: block; width: 100%; min-height: 3rem; padding: .7rem .9rem; font-size: 1rem; border: 1px solid #cbd5e1;
  border-radius: .75rem; background: #fff; color: #0f172a; }
.vt-textarea { min-height: 6rem; }
.vt-input:focus, .vt-select:focus, .vt-textarea:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .25); }
.dark .vt-input, .dark .vt-select, .dark .vt-textarea { background: #0f172a; border-color: #475569; color: #f1f5f9; }
.vt-label { display: block; font-size: .875rem; font-weight: 500; color: #475569; margin-bottom: .35rem; }
.dark .vt-label { color: #cbd5e1; }

.vt-check { display: flex; align-items: flex-start; gap: .9rem; padding: 1rem; border: 2px solid #e2e8f0; border-radius: 1rem; cursor: pointer; min-height: 3.5rem; }
.vt-check:has(input:checked) { border-color: #2563eb; background: #eff6ff; }
.vt-check input[type=checkbox] { width: 1.75rem; height: 1.75rem; flex: 0 0 auto; margin-top: .1rem; accent-color: #2563eb; }
.vt-check.is-disabled { opacity: .55; cursor: not-allowed; }
.dark .vt-check { border-color: #475569; }
.dark .vt-check:has(input:checked) { background: rgba(37, 99, 235, .18); border-color: #60a5fa; }
.vt-chip { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: .5rem .9rem; border: 2px solid #e2e8f0; border-radius: 999px; cursor: pointer; font-size: .95rem; }
.vt-chip:has(input:checked) { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; }
.vt-chip input { width: 1.1rem; height: 1.1rem; accent-color: #2563eb; }
.dark .vt-chip { border-color: #475569; }
.dark .vt-chip:has(input:checked) { background: rgba(37, 99, 235, .18); color: #bfdbfe; border-color: #60a5fa; }

.vt-list-item { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; min-height: 4.25rem; border-top: 1px solid #f1f5f9; text-decoration: none; color: inherit; }
.vt-list-item:first-child { border-top: 0; }
.vt-list-item:hover { background: #f8fafc; }
.dark .vt-list-item { border-color: #334155; }
.dark .vt-list-item:hover { background: #273548; }

.vt-badge { display: inline-flex; align-items: center; padding: .2rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.vt-badge-gray { background: #f1f5f9; color: #475569; }
.vt-badge-green { background: #dcfce7; color: #166534; }
.vt-badge-blue { background: #dbeafe; color: #1e40af; }
.vt-badge-amber { background: #fef3c7; color: #92400e; }
.vt-badge-red { background: #fee2e2; color: #991b1b; }
.dark .vt-badge-gray { background: #334155; color: #cbd5e1; }

.vt-prose { font-size: .95rem; line-height: 1.6; color: #1e293b; }
.vt-prose h1 { font-size: 1.35rem; font-weight: 700; margin: 1.25rem 0 .5rem; }
.vt-prose h2 { font-size: 1.15rem; font-weight: 700; margin: 1.25rem 0 .5rem; }
.vt-prose h3 { font-size: 1rem; font-weight: 600; margin: 1rem 0 .4rem; }
.vt-prose p { margin: 0 0 .75rem; }
.vt-prose ul, .vt-prose ol { margin: 0 0 .75rem 1.25rem; padding: 0; }
.vt-prose ul { list-style: disc; }
.vt-prose ol { list-style: decimal; }
.vt-prose li { margin-bottom: .25rem; }
.vt-prose blockquote { margin: .75rem 0; padding: .5rem 1rem; border-left: 4px solid #cbd5e1; background: #f8fafc; }
.vt-prose table { width: 100%; border-collapse: collapse; margin: .75rem 0; font-size: .875rem; }
.vt-prose th, .vt-prose td { border: 1px solid #e2e8f0; padding: .4rem .6rem; text-align: left; vertical-align: top; }
.vt-prose th { background: #f8fafc; }
.vt-prose a { color: #2563eb; text-decoration: underline; }
.vt-prose code { font-size: .85em; background: #f1f5f9; padding: .1rem .3rem; border-radius: .25rem; }
.vt-prose hr { border: 0; border-top: 1px solid #e2e8f0; margin: 1.25rem 0; }
.dark .vt-prose { color: #e2e8f0; }
.dark .vt-prose blockquote { background: #0f172a; border-color: #475569; }
.dark .vt-prose th, .dark .vt-prose td { border-color: #475569; }
.dark .vt-prose th { background: #0f172a; }
.dark .vt-prose code { background: #0f172a; }
.dark .vt-prose a { color: #93c5fd; }
.vt-prose-sm { font-size: .85rem; }
.vt-scroll { max-height: 24rem; overflow-y: auto; padding: 1rem 1.25rem; border: 1px solid #e2e8f0; border-radius: .75rem; background: #fafafa; }
.dark .vt-scroll { background: #0f172a; border-color: #475569; }

.vt-platzhalter { background: #fef9c3; color: #713f12; padding: 0 .2rem; border-radius: .2rem; border-bottom: 2px dotted #ca8a04; }
.dark .vt-platzhalter { background: #422006; color: #fde68a; }

.vt-grid-produkte { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 1rem; }
.vt-produkt { background: #fff; border: 1px solid #e2e8f0; border-radius: 1rem; overflow: hidden; }
.vt-produkt .bild { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; background: #f8fafc; }
.vt-produkt .bild img { max-width: 100%; max-height: 100%; object-fit: contain; padding: .75rem; }
.vt-produkt .name { padding: .75rem; font-weight: 600; font-size: .95rem; }
.dark .vt-produkt { background: #1e293b; border-color: #334155; }
.dark .vt-produkt .bild { background: #0f172a; }

.vt-praes { background: #0f172a; color: #f8fafc; min-height: 100vh; }
.vt-praes .vt-grid-produkte { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1.5rem; }
.vt-praes .vt-produkt { background: #1e293b; border-color: #334155; }
.vt-praes .vt-produkt .bild { background: #fff; }
.vt-praes .vt-produkt .name { font-size: 1.1rem; color: #f8fafc; }

.vt-dialog { max-width: 52rem; margin: 0 auto; }
.vt-dialog .kurztext { font-size: 1.1rem; line-height: 1.6; }
.vt-dialog .kurztext blockquote { border: 0; background: transparent; padding: 0; margin: 0; }
.vt-dialog .kurztext h2 { display: none; }
.vt-ok { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; padding: 1rem 1.25rem; border-radius: 1rem; }
.vt-warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; padding: 1rem 1.25rem; border-radius: 1rem; }
.vt-err { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; padding: 1rem 1.25rem; border-radius: 1rem; }
.dark .vt-ok { background: rgba(16, 185, 129, .12); border-color: #065f46; color: #a7f3d0; }
.dark .vt-warn { background: rgba(245, 158, 11, .12); border-color: #92400e; color: #fde68a; }
.dark .vt-err { background: rgba(239, 68, 68, .12); border-color: #991b1b; color: #fecaca; }
.vt-muted { color: #64748b; }
.dark .vt-muted { color: #94a3b8; }
.vt-kv td { padding: .3rem .75rem .3rem 0; vertical-align: top; font-size: .9rem; }
.vt-kv td:first-child { color: #64748b; white-space: nowrap; }
.vt-sync { position: fixed; right: 1rem; bottom: 1rem; z-index: 60; font-size: .85rem; padding: .5rem .9rem; border-radius: 999px; background: #1e293b; color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.25); display: none; }
.vt-sync.is-visible { display: inline-flex; align-items: center; gap: .5rem; }
.vt-sync.is-offline { background: #92400e; }
.vt-sync.is-error { background: #991b1b; }
@media (max-width: 640px) { .vt-grid-produkte { grid-template-columns: repeat(2, 1fr); } }
[x-cloak]{display:none!important}
/* Galerie je Produkt (alle Bilder je Gebinde, Symbolbild-Fallback) */
.vt-galerie { display: flex; gap: .35rem; overflow-x: auto; padding: .4rem .5rem 0; }
.vt-galerie-knopf { flex: 0 0 auto; width: 3.6rem; border: 2px solid transparent; border-radius: .5rem; background: #fff; padding: .15rem; cursor: pointer; font-size: .6rem; color: #475569; line-height: 1.1; }
.vt-galerie-knopf img { width: 100%; height: 2.6rem; object-fit: contain; display: block; }
.vt-galerie-knopf span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.vt-galerie-knopf.is-aktiv { border-color: #2563eb; }
.vt-praes .vt-galerie-knopf { background: #fff; }