/* Werkstattbuch – Verwaltung am Rechner: dunkle Seitenleiste, helle breite Fläche */

:root {
  --vw-russ: #0E0E0E;
  --vw-russ-2: #1A1918;
  --vw-kalk: #F4F1EA;
  --vw-papier: #FBFAF7;
  --vw-weiss: #fff;
  --vw-text: #1D1C1A;
  --vw-grau: #6F6B64;
  --vw-grau-hell: #A7A39B;
  --vw-linie: #E4E0D7;
  --vw-linie-dunkel: #2A2826;
  --vw-akzent: #E2601F;
  --vw-gruen: #2F8F5B;
  --vw-rot: #C0392B;
  --vw-display: 'Archivo', 'Arial Narrow', sans-serif;
  --vw-schrift: 'Work Sans', system-ui, sans-serif;
  --vw-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --vw-seite: 260px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

body.vw {
  margin: 0;
  min-height: 100vh;
  background: var(--vw-kalk);
  color: var(--vw-text);
  font: 15px/1.5 var(--vw-schrift);
  -webkit-font-smoothing: antialiased;
}
.vw a { color: inherit; }
.vw :focus-visible { outline: 3px solid var(--vw-akzent); outline-offset: 2px; }
.vw-punkt { color: var(--vw-akzent); }

/* ---------- Seitenleiste */
.vw--angemeldet { display: grid; grid-template-columns: var(--vw-seite) minmax(0, 1fr); }
.vw-seite {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column;
  background: var(--vw-russ); color: var(--vw-kalk);
  padding: 20px 14px;
}
.vw-seite__kopf { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 20px; }
.vw-marke { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.vw-marke__zeichen { font: 900 30px/1 var(--vw-display); font-stretch: 125%; }
.vw-marke__text { display: flex; flex-direction: column; min-width: 0; }
.vw-marke__label { font: 500 11px/1.3 var(--vw-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--vw-grau-hell); }
.vw-marke__firma { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vw-menue { display: none; }
.vw-kopf-app { display: none; }

/* App und Webseite: gut sichtbar direkt unter dem Namen */
.vw-schnell { display: flex; flex-direction: column; gap: 8px; padding: 0 2px 8px; }
.vw-schnell__app, .vw-schnell__webseite {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 12px; border-radius: 10px; font: 600 15px/1.2 var(--vw-schrift); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.vw .vw-schnell__app { background: var(--vw-akzent); color: #fff; border: 1px solid var(--vw-akzent); }
.vw-schnell__app:hover { filter: brightness(1.06); }
.vw a.vw-schnell__webseite { background: transparent; color: var(--vw-kalk); border: 1px solid var(--vw-grau); }
.vw-schnell__webseite:hover { border-color: var(--vw-kalk); background: var(--vw-russ-2); }
.vw-schnell__pfeil { margin-left: auto; }

.vw-nav { display: flex; flex-direction: column; gap: 2px; }
.vw-nav__gruppe { font: 500 11px/1 var(--vw-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--vw-grau); padding: 18px 10px 8px; }
.vw-nav__link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px; border-radius: 8px; text-decoration: none; color: #D8D4CC;
}
.vw-nav__link:hover { background: var(--vw-russ-2); color: var(--vw-weiss); }
.vw-nav__link--aktiv { background: var(--vw-russ-2); color: var(--vw-weiss); box-shadow: inset 3px 0 0 var(--vw-akzent); }
.vw-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vw-zahl {
  margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  background: var(--vw-rot); color: #fff; font: 600 12px/22px var(--vw-schrift); text-align: center;
}

.vw-seite__fuss { margin-top: auto; padding: 20px 10px 0; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--vw-linie-dunkel); }
.vw-seite__extern { font-size: 13px; color: var(--vw-grau-hell); text-decoration: none; }
.vw-seite__extern:hover { color: var(--vw-weiss); }
.vw-seite__extern--knopf { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; cursor: pointer; }
.vw-ich { display: flex; flex-direction: column; margin-top: 8px; }
.vw-ich__name { font-weight: 600; }
.vw-ich__rolle { font: 500 11px/1.3 var(--vw-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--vw-grau-hell); }
.vw-seite__ab { background: none; border: 1px solid var(--vw-linie-dunkel); color: var(--vw-kalk); border-radius: 8px; padding: 8px 12px; cursor: pointer; font: inherit; width: 100%; text-align: left; }
.vw-seite__ab:hover { border-color: var(--vw-grau); }

/* ---------- Inhalt */
.vw-inhalt { padding: 32px 40px 64px; min-width: 0; max-width: 1600px; }
.vw-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.vw-label { font: 500 12px/1.3 var(--vw-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--vw-grau); display: inline-flex; align-items: center; gap: 8px; }
.vw-titel { margin: 4px 0 0; font: 900 clamp(26px, 3vw, 38px)/1.05 var(--vw-display); font-stretch: 125%; text-transform: uppercase; letter-spacing: -.01em; overflow-wrap: anywhere; }
.vw-zwischentitel { font: 700 18px/1.3 var(--vw-display); text-transform: uppercase; margin: 28px 0 12px; }
.vw-zurueck { display: inline-block; margin-bottom: 12px; color: var(--vw-grau); text-decoration: none; font-size: 14px; }
.vw-zurueck:hover { color: var(--vw-text); }
.vw-grau { color: var(--vw-grau); }
.vw-klein { font-size: 13px; color: var(--vw-grau); }
.vw-nowrap { white-space: nowrap; }
.vw-rechts { text-align: right; }
.vw-text { white-space: normal; }
.vw-leer { color: var(--vw-grau); margin: 8px 0; }
.vw-pre { white-space: pre-wrap; font: 12px/1.4 var(--vw-mono); margin: 0; }

.vw-meldung { padding: 12px 16px; border-radius: 8px; background: #FFF4E5; border: 1px solid #F2D4A9; margin: 0 0 16px; }
.vw-meldung--ok { background: #EAF6EF; border-color: #BFE3CD; }
.vw-meldung--fehler { background: #FCEBEA; border-color: #F1C1BC; color: #7A1D13; }

/* Kacheln */
.vw-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }
.vw-kachel { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; background: var(--vw-weiss); border: 1px solid var(--vw-linie); border-radius: 12px; text-decoration: none; }
a.vw-kachel:hover { border-color: var(--vw-grau-hell); }
.vw-kachel--akzent { border-color: var(--vw-akzent); box-shadow: inset 4px 0 0 var(--vw-akzent); }
.vw-kachel__zahl { font: 800 34px/1 var(--vw-display); }
.vw-kachel__zahl--klein { font-size: 22px; }

/* Karten und Spalten */
.vw-spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; margin-bottom: 20px; }
.vw-spalten--breit-schmal { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); }
.vw-stapel { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.vw-karte { background: var(--vw-weiss); border: 1px solid var(--vw-linie); border-radius: 12px; padding: 20px 22px; min-width: 0; }
.vw-karte--schmal { max-width: 760px; }
.vw-karte__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.vw-karte__titel { font: 700 15px/1.3 var(--vw-schrift); margin: 0 0 12px; }
.vw-karte__titel:not(:first-child) { margin-top: 20px; }
.vw-mehr { font-size: 13px; color: var(--vw-grau); text-decoration: none; }
.vw-mitte { text-align: center; }

.vw-daten { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.vw-daten dt { color: var(--vw-grau); }
.vw-daten dd { margin: 0; overflow-wrap: anywhere; }

.vw-liste { list-style: none; margin: 0; padding: 0; }
.vw-liste li + li { border-top: 1px solid var(--vw-linie); }
.vw-liste__zeile { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; text-decoration: none; }
.vw-liste__zeile:hover strong { text-decoration: underline; }

/* Agenda */
.vw-agenda__tag { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--vw-linie); }
.vw-agenda__tag:first-child { border-top: 0; }
.vw-agenda__datum { font-weight: 600; }
.vw-agenda__tag--heute .vw-agenda__datum { color: var(--vw-akzent); }
.vw-agenda__termine { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.vw-agenda__termine a { display: grid; grid-template-columns: 100px 1fr auto; gap: 12px; text-decoration: none; }
.vw-agenda__termine a:hover .vw-agenda__was { text-decoration: underline; }
.vw-agenda__zeit { font-family: var(--vw-mono); font-size: 13px; color: var(--vw-grau); padding-top: 2px; }
.vw-agenda__wer { font-size: 13px; color: var(--vw-grau); }

/* Filter + Suche */
.vw-werkzeuge { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.vw-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.vw-filter__chip, .vw-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--vw-linie); background: var(--vw-weiss); text-decoration: none; font: inherit; font-size: 14px; color: var(--vw-text); cursor: pointer;
}
.vw-filter__chip:hover, .vw-chip:hover { border-color: var(--vw-grau-hell); }
.vw .vw-filter__chip--aktiv, .vw .vw-chip--aktiv { background: var(--vw-russ); border-color: var(--vw-russ); color: var(--vw-weiss); }
.vw-filter__zahl { font-size: 12px; opacity: .7; }
.vw-suche input { width: min(360px, 100%); }
.vw-statuswahl { display: flex; flex-wrap: wrap; gap: 8px; }

/* Tabellen */
.vw-tabelle-rahmen { background: var(--vw-weiss); border: 1px solid var(--vw-linie); border-radius: 12px; overflow-x: auto; }
.vw-tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.vw-tabelle th { text-align: left; font: 500 11px/1.3 var(--vw-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--vw-grau); padding: 12px 14px; border-bottom: 1px solid var(--vw-linie); background: var(--vw-papier); white-space: nowrap; }
.vw-tabelle td { padding: 11px 14px; border-bottom: 1px solid var(--vw-linie); vertical-align: top; }
.vw-tabelle tbody tr:last-child td { border-bottom: 0; }
.vw-tabelle tbody tr[data-zeile] { cursor: pointer; }
.vw-tabelle tbody tr[data-zeile]:hover { background: var(--vw-papier); }
.vw-tabelle a { text-decoration: none; }
.vw-tabelle td a:hover { text-decoration: underline; }
.vw-tabelle--schlicht th { background: none; padding: 8px 8px 8px 0; }
.vw-tabelle--schlicht td { padding: 8px 8px 8px 0; }
.vw-vorbei td { color: var(--vw-grau-hell); }

.vw-status { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; background: #EEE; color: var(--vw-text); }
.vw-status--neu, .vw-status--offen { background: #FDE7DA; color: #9A3C0C; }
.vw-status--angerufen, .vw-status--termin, .vw-status--arbeit { background: #E3EEFB; color: #1E4F8A; }
.vw-status--erledigt, .vw-status--fertig { background: #E2F3E9; color: #1F6B41; }
.vw-status--abgesagt { background: #EEE; color: var(--vw-grau); }
.vw-marke-klein { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; background: #EEE; color: var(--vw-grau); white-space: nowrap; }

/* Galerie */
.vw-galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.vw-galerie img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; display: block; background: var(--vw-linie); }

/* Formulare */
.vw-formular { display: flex; flex-direction: column; gap: 14px; }
.vw-formular--raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.vw-formular--zeile { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 16px 0; }
.vw-formular--zeile .vw-feld { flex: 0 1 auto; }
.vw-formular--zeile .vw-feld--breit { flex: 1 1 200px; }
.vw-feld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vw-feld--breit { grid-column: 1 / -1; }
.vw-feld__label { font-size: 13px; color: var(--vw-grau); }
.vw input:not([type=checkbox]):not([type=hidden]):not([type=file]), .vw select, .vw textarea {
  font: inherit; color: var(--vw-text); background: var(--vw-weiss);
  border: 1px solid #D5D0C6; border-radius: 8px; padding: 9px 12px; min-width: 0; width: 100%;
}
.vw-formular--zeile input, .vw-formular--zeile select { width: auto; }
.vw input:focus, .vw select:focus, .vw textarea:focus { border-color: var(--vw-text); outline: none; }
.vw textarea { resize: vertical; }
.vw-haken { display: flex; gap: 10px; align-items: center; }
.vw-rollen { border: 0; padding: 0; margin: 0; gap: 8px; }
.vw-rollen legend { padding: 0; margin-bottom: 6px; }
.vw-haken input { width: 18px; height: 18px; accent-color: var(--vw-akzent); }

.vw-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.vw-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: 8px; border: 1px solid transparent;
  font: 600 14px/1.2 var(--vw-schrift); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.vw .vw-knopf--akzent { background: var(--vw-akzent); color: #fff; }
.vw .vw-knopf--dunkel { background: var(--vw-russ); color: #fff; }
.vw .vw-knopf--rahmen { background: var(--vw-weiss); border-color: #D5D0C6; color: var(--vw-text); }
.vw-knopf:hover { filter: brightness(.95); }
.vw-knopf--breit { width: 100%; padding: 13px 18px; font-size: 15px; }
.vw-knopf[disabled] { opacity: .6; cursor: progress; }
.vw-link-knopf { background: none; border: 0; padding: 0; color: var(--vw-grau); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
.vw-link-knopf:hover { color: var(--vw-rot); }

.vw-menge { display: flex; align-items: center; gap: 6px; }
.vw .vw-menge input[type=number] { width: 5.5em; padding: 5px 8px; }
.vw-qr svg { width: 260px; height: 260px; max-width: 100%; }
.vw-kopieren { display: flex; gap: 8px; margin-bottom: 12px; }
.vw-kopieren input { font-family: var(--vw-mono); font-size: 13px !important; }

/* ---------- Anmeldung */
body.vw--draussen { background: var(--vw-russ); color: var(--vw-kalk); display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.vw-tuer { width: min(420px, 100%); display: flex; flex-direction: column; gap: 24px; }
.vw-marke--gross .vw-marke__zeichen { font-size: 40px; }
.vw-tuer__karte { background: var(--vw-weiss); color: var(--vw-text); border-radius: 14px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.vw-tuer__karte .vw-titel { margin: 0 0 4px; }
.vw-tuer__karte p { margin: 0; }
.vw-tuer__fuss { text-align: center; font-size: 13px; color: var(--vw-grau-hell); margin: 0; }
.vw-oder { display: flex; align-items: center; gap: 12px; color: var(--vw-grau); font-size: 13px; }
.vw-oder::before, .vw-oder::after { content: ''; flex: 1; border-top: 1px solid var(--vw-linie); }

/* ---------- schmal (Tablet hochkant, Handy) */
@media (max-width: 1100px) {
  .vw-spalten, .vw-spalten--breit-schmal { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .vw--angemeldet { display: block; }
  .vw-seite { position: sticky; z-index: 20; height: auto; padding: 12px 16px; }
  .vw-seite__kopf { padding: 0; }
  .vw-menue { display: inline-flex; flex-direction: column; gap: 5px; background: none; border: 0; padding: 10px 4px; cursor: pointer; }
  .vw-menue span { width: 24px; height: 2px; background: var(--vw-kalk); }
  .vw-seite .vw-nav, .vw-seite .vw-seite__fuss, .vw-seite .vw-schnell { display: none; }
  .vw-kopf-app { display: block; margin-left: auto; margin-right: 8px; }
  .vw-kopf-app .vw-knopf { padding: 8px 14px; }
  .vw-seite--offen { max-height: 100vh; overflow-y: auto; }
  .vw-seite--offen .vw-nav, .vw-seite--offen .vw-seite__fuss, .vw-seite--offen .vw-schnell { display: flex; }
  .vw-seite--offen .vw-schnell { padding-top: 14px; }
  .vw-inhalt { padding: 20px 16px 48px; }
  .vw-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .vw-kachel { padding: 14px; }
  .vw-formular--raster { grid-template-columns: minmax(0, 1fr); }
  .vw-agenda__tag { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .vw-agenda__termine a { grid-template-columns: 90px minmax(0, 1fr); }
  .vw-agenda__wer { grid-column: 2; }
}

/* ---------- Kalender */
.vw-punkt-farbe { width: 10px; height: 10px; border-radius: 50%; background: var(--farbe); display: inline-block; }
.vw-woche { background: var(--vw-weiss); border: 1px solid var(--vw-linie); border-radius: 12px; overflow-x: auto; margin-bottom: 12px; }
.vw-woche__kopf, .vw-woche__raster { display: grid; grid-template-columns: 56px repeat(7, minmax(110px, 1fr)); min-width: 840px; }
.vw-woche__kopf { border-bottom: 1px solid var(--vw-linie); position: sticky; top: 0; background: var(--vw-papier); z-index: 2; }
.vw-woche__tag { padding: 10px 8px; text-align: center; font-size: 13px; color: var(--vw-grau); text-decoration: none; border-left: 1px solid var(--vw-linie); }
.vw-woche__tag strong { color: var(--vw-text); font-size: 16px; }
.vw-woche__tag--heute, .vw-woche__tag--heute strong { color: var(--vw-akzent); }
.vw-woche__raster { --stunde: 52px; }
.vw-woche__zeiten { display: flex; flex-direction: column; }
.vw-woche__zeiten span { height: var(--stunde); font: 11px/1 var(--vw-mono); color: var(--vw-grau); text-align: right; padding: 4px 8px 0 0; }
.vw-woche__spalte {
  position: relative; height: calc(var(--stunde) * 14); border-left: 1px solid var(--vw-linie); cursor: copy;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--stunde) - 1px), var(--vw-linie) calc(var(--stunde) - 1px), var(--vw-linie) var(--stunde));
}
.vw-woche__spalte--heute { background-color: #FFF8F3; }
.vw-termin {
  position: absolute; box-sizing: border-box; padding: 4px 6px; overflow: hidden; border-radius: 6px; text-decoration: none; cursor: pointer;
  background: color-mix(in srgb, var(--farbe) 14%, white); border-left: 3px solid var(--farbe); font-size: 12px; line-height: 1.3;
  display: flex; flex-direction: column; gap: 1px; border-right: 2px solid var(--vw-weiss);
}
.vw-termin:hover { background: color-mix(in srgb, var(--farbe) 24%, white); z-index: 1; }
.vw-termin__zeit { font-family: var(--vw-mono); font-size: 11px; color: var(--vw-grau); }
.vw-termin__wer { color: var(--farbe); font-weight: 600; }
.vw-monat { background: var(--vw-weiss); border: 1px solid var(--vw-linie); border-radius: 12px; overflow: hidden; }
.vw-monat__kopf, .vw-monat__woche { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.vw-monat__kopf span { padding: 8px; font: 500 11px/1 var(--vw-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--vw-grau); background: var(--vw-papier); border-bottom: 1px solid var(--vw-linie); }
.vw-monat__tag { min-height: 118px; padding: 6px; border-right: 1px solid var(--vw-linie); border-bottom: 1px solid var(--vw-linie); display: flex; flex-direction: column; gap: 3px; min-width: 0; cursor: copy; }
.vw-monat__woche .vw-monat__tag:last-child { border-right: 0; }
.vw-monat__tag--aussen { background: var(--vw-papier); }
.vw-monat__tag--aussen .vw-monat__nr { color: var(--vw-grau-hell); }
.vw-monat__nr { font-weight: 600; text-decoration: none; align-self: flex-start; padding: 0 4px; border-radius: 999px; }
.vw-monat__tag--heute .vw-monat__nr { background: var(--vw-akzent); color: #fff; }
.vw-monat__termin { font-size: 12px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 2px 6px; border-radius: 4px; background: color-mix(in srgb, var(--farbe) 14%, white); border-left: 3px solid var(--farbe); cursor: pointer; }
.vw-monat__mehr { font-size: 12px; color: var(--vw-grau); text-decoration: none; }
.vw-dialog { border: 0; border-radius: 14px; padding: 24px; width: min(480px, calc(100vw - 32px)); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.vw-dialog::backdrop { background: rgba(14,14,14,.5); }
@media (max-width: 860px) {
  .vw-monat__tag { min-height: 70px; padding: 4px; }
  .vw-monat__termin { font-size: 0; padding: 0; height: 6px; }
}

/* ---------- Kundenkartei */
.vw-galerie--gross { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.vw-galerie__bild { position: relative; display: block; text-decoration: none; }
.vw-galerie__bild span { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 6px; font-size: 12px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.65)); border-radius: 0 0 8px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Webseite pflegen */
.vw-logo-vorschau { background: var(--vw-russ); border-radius: 8px; padding: 14px; margin-bottom: 6px; }
.vw-logo-vorschau img { height: 48px; width: auto; display: block; }
.vw-farbe { display: flex; gap: 8px; align-items: center; }
.vw .vw-farbe input[type=color] { width: 48px; height: 40px; padding: 2px; border: 1px solid #D5D0C6; border-radius: 8px; background: var(--vw-weiss); }
.vw-editor { border: 1px solid #D5D0C6; border-radius: 8px; background: var(--vw-weiss); }
.vw-editor__leiste { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border-bottom: 1px solid var(--vw-linie); background: var(--vw-papier); border-radius: 8px 8px 0 0; }
.vw-editor__leiste button { font: inherit; font-size: 13px; padding: 4px 10px; border: 1px solid var(--vw-linie); border-radius: 6px; background: var(--vw-weiss); cursor: pointer; }
.vw-editor__leiste button:hover { border-color: var(--vw-grau-hell); }
.vw-editor__flaeche { min-height: 220px; max-height: 60vh; overflow-y: auto; padding: 12px 14px; outline: none; }
.vw-editor__flaeche:focus { box-shadow: inset 0 0 0 2px var(--vw-text); border-radius: 0 0 8px 8px; }
.vw-editor__flaeche p { margin: 0 0 .7em; }
.vw-bildwahl, .vw-eintraege { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.vw-bildwahl__raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.vw-bildwahl__bild { position: relative; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--vw-grau); cursor: pointer; }
.vw-bildwahl__bild input { position: absolute; opacity: 0; }
.vw-bildwahl__bild img, .vw-bildwahl__leer { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; border: 3px solid transparent; background: var(--vw-papier); display: flex; align-items: center; justify-content: center; }
.vw-bildwahl__bild input:checked + img, .vw-bildwahl__bild input:checked + .vw-bildwahl__leer { border-color: var(--vw-akzent); }
.vw-bildwahl__bild input:focus-visible + img { outline: 3px solid var(--vw-akzent); }
.vw-bildwahl__bild span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vw-eintrag { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 12px; border: 1px solid var(--vw-linie); border-radius: 10px; background: var(--vw-papier); }
.vw-eintrag__knoepfe { display: flex; gap: 14px; justify-content: flex-end; }

/* ---------- Fortschritt (Upload, Import) */
.vw-fortschritt { height: 10px; border-radius: 999px; background: var(--vw-linie); overflow: hidden; }
.vw-fortschritt span { display: block; height: 100%; width: 0; background: var(--vw-akzent); transition: width .3s; }

/* ---------- Unterreiter, Raster, Karten mit Fuß */
.vw-reiter { display: flex; gap: 4px; border-bottom: 1px solid var(--vw-linie); margin: -8px 0 24px; overflow-x: auto; }
.vw-reiter__link { padding: 10px 16px; text-decoration: none; color: var(--vw-grau); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; font-weight: 500; }
.vw-reiter__link:hover { color: var(--vw-text); }
.vw-reiter__link--aktiv { color: var(--vw-text); border-bottom-color: var(--vw-akzent); }
.vw-karte--formular { max-width: 920px; padding: 0; }
.vw-karte--formular > .vw-karte__kopf, .vw-karte--formular > .vw-klein, .vw-karte--formular > .vw-raster, .vw-karte--formular > .vw-marke-raster, .vw-karte--formular > .vw-formular { padding-left: 24px; padding-right: 24px; }
.vw-karte--formular > .vw-karte__kopf { padding-top: 20px; }
.vw-karte--formular > .vw-klein { margin-top: 0; }
.vw-karte__fuss { position: sticky; bottom: 0; display: flex; gap: 8px; justify-content: flex-end; padding: 14px 24px; margin-top: 20px; border-top: 1px solid var(--vw-linie); background: color-mix(in srgb, var(--vw-weiss) 92%, transparent); backdrop-filter: blur(6px); border-radius: 0 0 12px 12px; }
.vw-raster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px 18px; }
.vw-raster__1 { grid-column: span 1; } .vw-raster__2 { grid-column: span 2; } .vw-raster__3 { grid-column: span 3; }
.vw-raster__4 { grid-column: span 4; } .vw-raster__5 { grid-column: span 5; } .vw-raster__6 { grid-column: span 6; }
.vw-marke-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.vw-markenfeld { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid var(--vw-linie); border-radius: 12px; background: var(--vw-papier); }
.vw-markenfeld--breit { grid-column: 1 / -1; }
.vw-markenfeld__titel { margin: 0; font-size: 15px; }
.vw-markenfeld__vorschau { min-height: 96px; border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 16px; border: 1px solid var(--vw-linie); background: var(--vw-weiss); }
.vw-markenfeld__vorschau--dunkel { background: var(--vw-russ); border-color: var(--vw-russ); }
.vw-markenfeld__vorschau--dunkel img { max-height: 56px; width: auto; }
.vw-markenfeld__vorschau--dunkel .vw-grau { color: var(--vw-grau-hell); }
.vw-tab-vorschau { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px 10px 0 0; background: #E8E5DF; font-size: 13px; max-width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vw-tab-vorschau img { width: 16px; height: 16px; }
.vw-app-vorschau { width: 60px; height: 60px; border-radius: 14px; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.vw-seitengruppe { margin-bottom: 28px; }
.vw-seitengruppe .vw-zwischentitel { margin-top: 0; display: flex; align-items: center; gap: 10px; }
.vw-elemente { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.vw-element { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; background: var(--vw-weiss); border: 1px solid var(--vw-linie); border-radius: 12px; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.vw-element:hover { border-color: var(--vw-grau-hell); box-shadow: 0 6px 18px rgba(0,0,0,.06); transform: translateY(-1px); }
.vw-element--aus { background: var(--vw-papier); }
.vw-element--aus .vw-element__titel { color: var(--vw-grau); }
.vw-element__titel { font-size: 15px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.vw-element__fuss { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }
.vw-element__los { font-size: 13px; color: var(--vw-grau); }
.vw-element:hover .vw-element__los { color: var(--vw-akzent); }
@media (max-width: 860px) {
  .vw-raster { grid-template-columns: minmax(0, 1fr); }
  .vw-raster > * { grid-column: auto; }
  .vw-marke-raster { grid-template-columns: minmax(0, 1fr); }
}

/* Schalter (z. B. „Auf der Webseite anzeigen“) */
.vw-karte--formular > .vw-karte__kopf { align-items: center; flex-wrap: wrap; }
.vw-karte--formular > .vw-karte__kopf .vw-karte__titel { margin: 0; }
.vw-schalter { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.vw-schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vw-schalter__bahn { position: relative; width: 40px; height: 22px; border-radius: 999px; background: #CFCAC0; transition: background .15s; flex: none; }
.vw-schalter__bahn::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.vw-schalter input:checked + .vw-schalter__bahn { background: var(--vw-gruen); }
.vw-schalter input:checked + .vw-schalter__bahn::after { transform: translateX(18px); }
.vw-schalter input:focus-visible + .vw-schalter__bahn { outline: 3px solid var(--vw-akzent); outline-offset: 2px; }
.vw-karte--formular > .vw-formular { padding-top: 16px; }

/* Datei-Auswahl wie die übrigen Knöpfe */
.vw input[type=file] { font: inherit; font-size: 14px; color: var(--vw-grau); max-width: 100%; }
.vw input[type=file]::file-selector-button {
  font: 600 14px/1.2 var(--vw-schrift); margin-right: 12px; padding: 9px 16px; border-radius: 8px;
  border: 1px solid #D5D0C6; background: var(--vw-weiss); color: var(--vw-text); cursor: pointer;
}
.vw input[type=file]::file-selector-button:hover { border-color: var(--vw-grau-hell); }

/* ---------- Demo */
.vw-demo { margin: 0 0 20px; padding: 10px 14px; border-radius: 10px; background: color-mix(in srgb, var(--vw-akzent) 16%, white); border: 1px solid color-mix(in srgb, var(--vw-akzent) 45%, white); font-size: 14px; }

/* ---------- Kalender: Termine ziehen */
.vw-termin[data-termin], .vw-monat__termin[data-termin] { cursor: grab; touch-action: none; user-select: none; }
.vw-zieht { opacity: .35; }
.vw-geist { position: fixed !important; z-index: 1000; pointer-events: none; cursor: grabbing; box-shadow: 0 12px 32px rgba(0, 0, 0, .25); transform: rotate(-1deg); }
.vw-geist--speichert { opacity: .7; }
.vw-ziel { background: color-mix(in srgb, var(--vw-akzent) 10%, transparent) !important; }

/* ---------- Unterschrift Kunde */
.vw-unterschrift { display: block; max-width: 100%; height: 90px; margin: 4px 0 8px; border-bottom: 1px solid var(--vw-linie); }

/* ---------- Löschen */
.vw .vw-knopf--gefahr { background: #fff; color: var(--vw-rot); border: 1px solid color-mix(in srgb, var(--vw-rot) 45%, white); }
.vw .vw-knopf--gefahr:hover { background: var(--vw-rot); color: #fff; }
.vw-dialog .vw-knopf--gefahr[type=submit] { background: var(--vw-rot); color: #fff; border-color: var(--vw-rot); }
.vw-liste-klein { margin: 0 0 4px; padding-left: 20px; }

/* ---------- Eigene Artikel: Strichcode */
.vw-unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vw-strichcode { display: inline-grid; justify-items: center; gap: 4px; padding: 12px 16px; margin-bottom: 12px; background: #fff; border: 1px solid var(--vw-linie); border-radius: 8px; }
.vw-strichcode svg { display: block; width: 240px; height: 80px; }
.vw-strichcode span { font: 500 14px/1 var(--vw-mono); letter-spacing: .14em; }

/* ---------- Artikel: Warengruppen wählen */
.vw-inline { display: inline; margin-left: 12px; }
.vw-gruppen { display: grid; gap: 12px; margin: 12px 0 16px; }
.vw-gruppen__kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.vw-gruppen__summe { margin: 0; }
.vw-gruppen label { cursor: pointer; }
.vw-gruppen input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--vw-akzent); }
.vw-gruppen__suche { padding: 9px 12px; border: 1px solid #D5D0C6; border-radius: 8px; font: inherit; min-width: 200px; }
.vw-abstand-links { margin-left: 12px; }

/* Lexware: Anleitung zum API-Schlüssel */
.vw-anleitung { margin-top: 16px; }
.vw-anleitung__kopf { cursor: pointer; font-weight: 600; list-style-position: inside; }
.vw-anleitung[open] > .vw-anleitung__kopf { margin-bottom: 12px; }
.vw-anleitung__schritte { margin: 0 0 16px; padding-left: 20px; }
.vw-anleitung__schritte li { margin-bottom: 18px; }
.vw-anleitung__schritte p { margin: 0 0 8px; }
.vw-anleitung__schritte img { display: block; max-width: 100%; height: auto; max-height: 360px; width: auto; border: 1px solid var(--vw-linie); border-radius: 6px; }
.vw-anleitung code { font-family: var(--vw-mono); background: var(--vw-kalk); padding: 1px 5px; border-radius: 4px; }

/* ---------- Webseite: Übersicht mit Bildern, Bilder-Reiter */
.vw-element__bilder { display: flex; gap: 6px; margin: -4px -6px 4px; }
.vw-element__bild { position: relative; flex: 1; min-width: 0; }
.vw-element__bild img, .vw-element__ohne { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: var(--vw-papier); color: var(--vw-grau); font-size: 13px; border: 1px dashed var(--vw-linie); }
.vw-element__bild img { border: 0; }
.vw-element__bildname { position: absolute; left: 6px; bottom: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 11px; }
.vw-element__text { font-size: 13px; color: var(--vw-grau); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vw-element__marken { display: flex; gap: 6px; flex-wrap: wrap; }
.vw-element .vw-element__titel { min-height: 0; }
.vw-bilder-hoch { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 4px 0 18px; }
.vw-bilder { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.vw-bilder__karte { margin: 0; display: flex; flex-direction: column; gap: 8px; padding: 8px; border: 1px solid var(--vw-linie); border-radius: 10px; background: var(--vw-weiss); }
.vw-bilder__karte--frei { background: var(--vw-papier); }
.vw-bilder__karte img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; background: var(--vw-papier); }
.vw-bilder__karte figcaption { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vw-bilder__karte .vw-klein { overflow-wrap: anywhere; }
.vw-bilder__wo { font-size: 13px; font-weight: 600; }
.vw-bilder__wo--frei { color: var(--vw-grau); font-weight: 500; }
.vw-bilder__karte form { margin-top: 2px; }
/* Logos/Grafiken (meist hell, transparent): ganz zeigen, auf dunklem Grund */
.vw-bilder__karte--grafik img { object-fit: contain; background: var(--vw-russ, #1A1917); padding: 10px; }
.vw-element__fuss { flex-wrap: wrap; row-gap: 8px; }
.vw-element__los { margin-left: auto; white-space: nowrap; }
.vw-markenfeld__vorschau--hell { background: #fff; }