/* Gemeinsames Aussehen aller internen Villa-Kasia-Seiten.
   Eine Datei, damit die Seiten nicht jede fuer sich anders aussehen
   (Vorgabe Artur, 2026-08-07). Farben und Kopfverlauf sind aus dem
   bestehenden Dashboard uebernommen, damit nichts fremd wirkt. */
:root{
  --vk-grund:#f5f5f5;
  --vk-text:#333;
  --vk-leise:#777;
  --vk-rand:#e6e8eb;
  --vk-blau:#3d6b86;
  --vk-gruen:#2b8a3e;
  --vk-gelb:#f59f00;
  --vk-rot:#c92a2a;
  --vk-kopf:linear-gradient(135deg,#ffb199,#b5a8d4 50%,#5a8ca8);
}
*{box-sizing:border-box}
body{font-family:-apple-system,'Segoe UI',Roboto,sans-serif;margin:0;
  background:var(--vk-grund);color:var(--vk-text);-webkit-text-size-adjust:100%}

/* ---------- Kopfleiste: bleibt oben stehen ---------- */
.vk-kopf{position:sticky;top:0;z-index:50;background:var(--vk-kopf);color:#fff;
  padding:11px 18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  box-shadow:0 1px 4px rgba(0,0,0,.14)}
.vk-logo{font-size:19px;font-weight:700;color:#fff;text-decoration:none;
  display:flex;align-items:center;gap:8px;flex:none;white-space:nowrap}
.vk-logo:hover{opacity:.88}
.vk-nav{display:flex;gap:8px;flex:1;flex-wrap:wrap;align-items:center}
/* Schutz: manche Seiten haben eine eigene Regel fuer nav (untere Leiste der
   Service-App). Die darf die Kopf-Navigation nicht einfangen. */
.vk-kopf .vk-nav{position:static;inset:auto;background:transparent;border:0;
  box-shadow:none;padding:0;height:auto;width:auto}
.vk-nav a,.vk-nav button{font-family:inherit;font-size:13.5px;font-weight:700;
  color:#fff;background:rgba(255,255,255,.17);border:1px solid rgba(255,255,255,.45);
  border-radius:9px;padding:7px 13px;text-decoration:none;cursor:pointer;line-height:1.2;
  white-space:nowrap}
.vk-nav a:hover,.vk-nav button:hover{background:rgba(255,255,255,.30)}
.vk-nav .an{background:#fff;color:var(--vk-blau);border-color:#fff}
.vk-nav .gefahr{background:rgba(201,42,42,.30);border-color:rgba(255,255,255,.55)}
.vk-rechts{display:flex;align-items:center;gap:12px;flex:none}
.vk-wer{font-size:12.5px;opacity:.92}
.vk-zahn{font-size:27px;line-height:1;color:#fff;text-decoration:none}
.vk-zahn:hover{opacity:.85}

/* ---------- Inhalt ---------- */
main.vk{padding:14px 18px;max-width:1400px;margin:0 auto}
.vk-karte{background:#fff;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.07);
  padding:14px 16px;margin-bottom:12px}
.vk-karte h2{margin:0 0 12px;font-size:16px}
.vk-karte h3{margin:0 0 10px;font-size:14.5px}
.vk-zeile{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:14px}
.vk-leise{color:var(--vk-leise);font-size:12px}

/* ---------- Bedienelemente ---------- */
.vk-knopf{font-family:inherit;border:0;border-radius:9px;padding:8px 13px;font-size:13px;
  font-weight:700;cursor:pointer;background:var(--vk-blau);color:#fff}
.vk-knopf.still{background:#e9ecef;color:#444}
.vk-knopf.gruen{background:var(--vk-gruen)}
.vk-knopf.rot{background:var(--vk-rot)}
.vk-knopf.wa{background:#25d366}
.vk-knopf:disabled{opacity:.5;cursor:default}
.vk-filter{display:flex;gap:7px;flex-wrap:wrap}
.vk-filter button{font-family:inherit;border:1px solid #ccd3d9;background:#fff;color:#456;
  border-radius:9px;padding:7px 13px;font-size:13px;font-weight:700;cursor:pointer}
.vk-filter button.an{background:var(--vk-blau);color:#fff;border-color:var(--vk-blau)}
input[type=text],input[type=number],input[type=email],select{font-family:inherit;font-size:14px;
  padding:7px 9px;border:1px solid #ccd3d9;border-radius:8px;background:#fff;color:var(--vk-text)}

/* ---------- Tabellen ---------- */
table.vk{width:100%;border-collapse:collapse;font-size:13px}
table.vk th{text-align:left;padding:8px 7px;font-size:11px;text-transform:uppercase;
  letter-spacing:.4px;color:var(--vk-leise);border-bottom:1px solid var(--vk-rand)}
table.vk td{text-align:left;padding:8px 7px;border-bottom:1px solid #f0f1f3;vertical-align:top}
table.vk tr:hover td{background:#fafbfc}
.vk-hinweis{background:#fff3bf;color:#8b6200;border-radius:9px;padding:9px 12px;font-size:13px;
  margin-bottom:12px}
.vk-leer{color:var(--vk-leise);font-size:13px;padding:16px 4px}
.vk-ja{color:var(--vk-gruen);font-weight:700}
.vk-nein{color:var(--vk-rot)}

@media(max-width:640px){
  .vk-kopf{padding:9px 11px;gap:9px}
  .vk-logo{font-size:15px}
  .vk-nav a,.vk-nav button{font-size:12.5px;padding:6px 10px}
  main.vk{padding:10px 8px}
  .vk-zahn{font-size:24px}
}


/* ---------- Aufklappbare Unterpunkte ----------
   Vorher war nur ein kleines Dreieck zu sehen und niemand erkannte, dass die
   Zeile aufgeht. Jetzt steht es als Wort daneben (Artur, 2026-08-08). */
details.vk-auf{border:1px solid var(--vk-rand);border-radius:11px;margin-bottom:9px;background:#fff}
details.vk-auf>summary{display:flex;align-items:center;gap:11px;padding:13px 14px;cursor:pointer;
  font-size:15px;font-weight:650;list-style:none}
details.vk-auf>summary::-webkit-details-marker{display:none}
details.vk-auf>summary::after{content:'aufklappen ▾';margin-left:auto;font-size:12px;font-weight:700;
  color:var(--vk-blau);background:#eef4f8;border-radius:7px;padding:4px 9px;white-space:nowrap}
details.vk-auf[open]>summary::after{content:'schließen ▴'}
details.vk-auf:hover{border-color:#bcc7d0}
details.vk-auf>summary:hover::after{background:#dce9f1}
details.vk-auf .ico{font-size:19px;flex:none}
details.vk-auf .was{font-weight:400;font-size:12.5px;color:var(--vk-leise)}
details.vk-auf .inhalt{padding:2px 14px 14px}


/* ---------- Filterzeile: EIN Bauteil fuer alle Seiten ----------
   Artur arbeitet am PC, Kasia am iPhone, selten am iPad. Deshalb:
     * gleiche Form und gleiche Farbe auf jeder Seite
     * Fingerhoehe 42px, damit man am Telefon nicht danebentippt
     * die Zeile bricht nicht um, sondern schiebt sich seitwaerts —
       so bleibt die Reihenfolge der Filter immer dieselbe
     * Eingabefelder mit 16px, sonst zoomt iOS beim Antippen hinein   */
.vk-tabs{display:flex;gap:7px;align-items:center;overflow-x:auto;padding:2px 0 4px;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;scroll-snap-type:x proximity}
.vk-tabs::-webkit-scrollbar{height:5px}
.vk-tabs::-webkit-scrollbar-thumb{background:#c8d0d6;border-radius:3px}
.vk-tabs>*{flex:0 0 auto;scroll-snap-align:start}
.vk-tabs button,.vk-tabs a.tab{font-family:inherit;font-size:14px;font-weight:700;min-height:42px;
  padding:0 15px;border:1px solid #ccd3d9;background:#fff;color:#456;border-radius:11px;
  cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;text-decoration:none}
.vk-tabs button:hover,.vk-tabs a.tab:hover{background:#eef4f8}
.vk-tabs button.an,.vk-tabs a.tab.an{background:var(--vk-blau);color:#fff;border-color:var(--vk-blau)}
.vk-tabs button b,.vk-tabs a.tab b{font-weight:800;opacity:.85}
.vk-tabs input,.vk-tabs select{min-height:42px;font-size:16px}
.vk-tabs .trenner{width:1px;height:26px;background:var(--vk-rand);margin:0 4px}
.vk-tabs .beschriftung{font-size:13px;color:var(--vk-leise);font-weight:600}
@media(max-width:640px){
  .vk-tabs button,.vk-tabs a.tab{font-size:13.5px;padding:0 13px}
}