/* =========================
   Ferdinand's Check – Styles
   ========================= */

:root{
  --bg: #e9ecef;
  --card: #ffffff;
  --muted: #6b7280;
  --text: #111827;

  --green: #4f8f2f;
  --green-dark: #3e7625;

  --border: rgba(17, 24, 39, .08);
  --shadow: 0 10px 26px rgba(0,0,0,.10);
  --shadow-soft: 0 6px 16px rgba(0,0,0,.08);

  --radius: 14px;
  --radius-sm: 10px;

  --gap: 14px;
  --gap-lg: 22px;
}

/* Reset-ish */
*{ box-sizing:border-box; }
html, body{ height:100%; }
html{ -webkit-text-size-adjust:100%; }
/* PWA/App feel: Zoom deaktivieren, Scroll bleibt aktiv */
html, body{ touch-action: pan-x pan-y; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background: var(--bg);
  overflow-x:hidden; /* <<< wichtig: kein seitliches Scrollen */
}

/* Appbar */
.appbar{
  position: sticky;
  top: 0;
  z-index: 50;
  height: 56px;
  display:flex;
  align-items:center;
  padding: 0 14px;
  background: linear-gradient(0deg, var(--green) 0%, #67a53b 100%);
  color:#fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.appbar-title{
  font-weight: 800;
  letter-spacing:.2px;
  font-size: 18px;
  user-select:none;
}
.appbar-actions{
  margin-left:auto;
  display:flex;
  gap:10px;
  align-items:center;
}

.icon-btn{
  width: 38px;
  height: 38px;
  border:0;
  border-radius: 10px;
  background: rgba(255,255,255,.18);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
}
.icon-btn:active{ transform: translateY(1px); }
.icon-btn.hidden{ display:none !important; }

/* Simple dropdown menu */
.menu-wrapper{ position:relative; }
.menu-wrapper.hidden{ display:none !important; }

.user-menu{
  position:absolute;
  right:0;
  top: 46px;
  min-width: 190px;
  background:#fff;
  border:1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  padding: 8px;
  display:none;
}
.user-menu.open{ display:block; }
.user-menu .menu-item{
  width:100%;
  border:0;
  background:transparent;
  padding:10px 10px;
  border-radius:10px;
  cursor:pointer;
  text-align:left;
  font-weight:600;
  color:#111827;
}
.user-menu .menu-item:hover{ background: rgba(17,24,39,.06); }
.user-menu .menu-item:disabled{ opacity:.45; cursor:not-allowed; }
.user-menu .menu-separator{
  height:1px;
  background: rgba(17,24,39,.10);
  margin: 6px 4px;
}

/* App main container */
#app{
  padding: 18px 12px 32px;
}

/* Card */
.card{
  width: min(520px, calc(100vw - 24px));
  margin: 18px auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}

.card-body{ padding: 16px 16px 18px; }
.card-title{
  font-weight: 900;
  font-size: 18px;
  margin: 0 0 10px;
}
.card-subtitle{
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.hr{
  height:1px;
  background: rgba(17,24,39,.10);
  margin: 12px 0;
}

/* Form */
label{
  display:block;
  font-weight: 800;
  font-size: 13px;
  margin: 10px 0 6px;
}
input[type="text"],
input[type="password"],
select{
  width:100%;
  border:1px solid rgba(17,24,39,.14);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 16px; /* iOS zoom verhindern */
  outline:none;
  background:#fff;
}
select:disabled{ opacity:.6; }

.form-actions{
  margin-top: 18px; /* <<< mehr Luft nach Dropdowns */
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;        /* <<< Luft zwischen den Buttons */
}

/* Buttons */
.btn{
  border:0;
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 900;
  font-size: 15px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  user-select:none;
  white-space:nowrap;
}
.btn:active{ transform: translateY(1px); }

.btn-primary{
  background: var(--green);
  color:#fff;
  box-shadow: 0 8px 18px rgba(79,143,47,.25);
}
.btn-primary:hover{ background: var(--green-dark); }

.btn-ghost{
  background: rgba(17,24,39,.06);
  color:#111827;
}
.btn-ghost:hover{ background: rgba(17,24,39,.10); }

.btn-wide{ width:100%; }

/* Answer buttons (Ja/Nein etc.) */
.answers{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr 1fr;  /* <<< 2 breite Buttons */
  gap: 12px;                       /* <<< Abstand Ja/Nein */
}
.answers .btn{
  width:100%;
  padding: 12px 14px;
  border-radius: 12px;
}
.btn-yes{
  background: var(--green);
  color:#fff;
}
.btn-no{
  background: rgba(17,24,39,.08);
  color:#111827;
}

/* Navigation buttons inside question card */
.nav-actions{
  margin-top: 28px;  /* <<< wie gewünscht: deutlich Abstand zu Antworten */
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.nav-actions .btn{
  width:100%;
  background: rgba(17,24,39,.06);
  color:#1f3a8a; /* leicht andere Farbe */
}

/* Progress */
.progress-wrap{
  display:flex;
  align-items:center;
  gap: 10px;
  margin: 8px 0 6px;
}
.progress{
  flex:1;
  height: 8px;
  background: rgba(17,24,39,.10);
  border-radius: 999px;
  overflow:hidden;
}
.progress > div{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, var(--green), #79b64d);
  border-radius: 999px;
}
.progress-label{
  font-size: 13px;
  color: var(--muted);
  font-weight: 800;
}

/* Category list (Box-in-Box) */
.cat-box{
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(17,24,39,.04);
  border: 1px solid rgba(17,24,39,.08);
}
.cat-item{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 12px;
  background:#fff;
  border:1px solid rgba(17,24,39,.08);
}
.cat-item + .cat-item{ margin-top: 10px; }

.cat-left{
  min-width: 0;
}
.cat-name{
  font-weight: 900;
  margin:0;
}
.cat-meta{
  margin:4px 0 0;
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
}
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  white-space:nowrap;
  border:1px solid rgba(17,24,39,.10);
  background:#fff;
}
.pill-open{ background: rgba(17,24,39,.06); }
.pill-done{ background: rgba(79,143,47,.12); border-color: rgba(79,143,47,.25); }

/* Toast */
.toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  max-width: min(520px, calc(100vw - 24px));
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(17,24,39,.92);
  color:#fff;
  font-weight: 800;
  box-shadow: var(--shadow);
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
}
.toast.show{
  opacity:1;
  transform: translateX(-50%) translateY(-4px);
}
.toast.toast-error{ background: rgba(185, 28, 28, .95); }
.toast.toast-success{ background: rgba(21,128,61,.95); }

/* Mobile tweaks */
@media (max-width: 480px){
  .card{ width: calc(100vw - 22px); }
  #app{ padding-top: 14px; }
  .form-actions{ grid-template-columns: 1fr; } /* Buttons untereinander auf sehr kleinen Screens */
  .answers{ grid-template-columns: 1fr 1fr; }
  .nav-actions{ grid-template-columns: 1fr 1fr; }
}

/* ==============================
   PATCH: Abstände + Ja/Nein breiter
   (nur Optik, kein JS/Index)
   ================================ */

/* Kein seitliches Scrollen (falls irgendwo was überläuft) */
html, body {
  overflow-x: hidden;
}

/* Mehr Innenabstand in den Karten/Boxen */
.card,
.panel,
.box,
.main-card,
#app .card {
  padding: 18px 18px; /* vorher zu knapp */
}

/* Überschriften/Content nicht direkt an die Kante */
.card h1, .card h2, .card h3,
.panel h1, .panel h2, .panel h3,
.box h1, .box h2, .box h3,
#app h1, #app h2, #app h3 {
  margin-top: 4px;
  margin-bottom: 10px;
}

/* Frage-Block: etwas Luft nach oben/unten */
.question-block,
.check-question,
.question-card,
#app .question {
  margin-top: 10px;
}

/* === Ja/Nein: gleiche Breite wie Kategorien/Dashboard ===
   Wir zielen breit, damit es bei deiner bestehenden Struktur greift. */
.answer-row,
.answer-buttons,
.answers,
.btn-row,
.choice-row,
.yes-no,
#app .answers {
  display: flex;
  gap: 12px;              /* Abstand zwischen Ja/Nein */
  margin-top: 10px;
  margin-bottom: 28px;    /* Abstand zu Kategorien/Dashboard wie gewünscht */
}

/* Buttons in der Answer-Zeile: 50/50 breit */
.answer-row .btn,
.answer-buttons .btn,
.answers .btn,
.btn-row .btn,
.choice-row .btn,
.yes-no .btn,
#app .answers .btn,
.answer-row button,
.answer-buttons button,
.answers button,
.btn-row button,
.choice-row button,
.yes-no button,
#app .answers button {
  flex: 1 1 0;
  width: 0;               /* wichtig für gleichmäßige Flex-Verteilung */
  min-height: 46px;
  font-weight: 700;
}

/* Auf sehr kleinen Screens etwas kompakter, aber weiterhin 2 nebeneinander */
@media (max-width: 380px) {
  .answer-row,
  .answer-buttons,
  .answers,
  .btn-row,
  .choice-row,
  .yes-no,
  #app .answers {
    gap: 10px;
  }
}

/* --- cards --- */
.card { padding: 16px; }
.h2 { font-size: 18px; font-weight: 700; margin: 0 0 10px 0; }
.h3 { font-size: 16px; font-weight: 700; margin: 0; }
.muted { color: #666; font-size: 13px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }

.subcard {
  background: #f3f3f3;
  border-radius: 14px;
  padding: 12px;
}

.subcard__top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

/* score box */
.scorebox {
  min-width: 86px;
  background: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  text-align: right;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.scorebox__label { font-size: 12px; color: #777; }
.scorebox__val { font-size: 14px; font-weight: 800; }

/* progress */
.progress {
  height: 10px;
  background: #ddd;
  border-radius: 999px;
  overflow: hidden;
  margin: 10px 0 6px;
}
.progress__bar { height: 100%; background: #2f7d32; }

/* buttons row */
.btnrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.w-100 { width: 100%; }

/* category list = box-in-box */
.catlist { margin-top: 12px; display: grid; gap: 10px; }

.cat-row {
  width: 100%;
  text-align: left;
  border: 0;
  background: #fff;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.cat-title { font-weight: 700; }
.cat-sub { display: flex; gap: 10px; align-items: center; margin-top: 6px; }
.cat-score { font-weight: 800; color: #2f7d32; align-self: center; }

/* pills */
.pill {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.pill--done { background: #e3f2e4; color: #1e6b22; }
.pill--open { background: #f0f0f0; color: #444; }

/* question spacing */
.question { margin-top: 12px; }
.question__text { font-size: 16px; font-weight: 800; margin: 10px 0 12px; }

/* ANSWERS */
.yn-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px; /* Abstand zu Kategorien/Dashboard */
}
.btn-yn {
  padding: 14px 12px;
  font-weight: 800;
  border-radius: 12px;
}

/* scale buttons */
.scale-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin: 10px 0 18px;
}

.btn-answer.is-selected {
  outline: 2px solid rgba(47,125,50,.35);
}

/* followup */
.textarea {
  width: 100%;
  min-height: 70px;
  border-radius: 12px;
  border: 1px solid #ddd;
  padding: 10px;
  font-size: 14px;
  margin-top: 6px;
}
.live-score-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
  font-weight:700;
}
.live-score-label{
  opacity:.7;
}
.live-score-value{
  padding:4px 10px;
  border-radius:999px;
  background:#eef3ea;
  color:#1f3b1f;
  font-weight:800;
}

.btn-danger {
  background: #b91c1c;
  color: #fff;
  font-weight: 800;
}

.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.badge {
  margin: 10px 0;
  font-weight: 900;
}

/* =========================================================
   UI-PATCH v5 (nur Ergänzungen, Grundoptik bleibt gleich)
   Fix:
   - Untere 3 Buttons gleich breit/hoch
   - Mehr Abstand zum Notiz-Bereich
   - Trennlinie über den 3 Buttons FULL-WIDTH innerhalb der Card
   (ohne :has, ohne HTML/JS Änderungen)
   ========================================================= */

/* A) "Check #..." Infobox in Kategorienansicht gezielt -> grün */
#app .card .card-title + div[style*="background:rgba(0,0,0,.04)"],
#app .card .card-title + div[style*="background: rgba(0,0,0,.04)"]{
  background: linear-gradient(0deg, var(--green) 0%, #67a53b 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 8px 18px rgba(79,143,47,.20) !important;
}
#app .card .card-title + div[style*="background:rgba(0,0,0,.04)"] *,
#app .card .card-title + div[style*="background: rgba(0,0,0,.04)"] *{
  color: #fff !important;
}

/* B) Trennlinie zwischen Button-Reihe und Kategorie-Liste */
#app .card .actions + .list{
  border-top: 1px solid rgba(17,24,39,.12);
  padding-top: 12px;
  margin-top: 12px;
}

/* C) Kategorie-Items klickbar + rund + Chevron */
#app .card .list .item[data-cat]{
  border-radius: 12px;
  position: relative;
  border: 1px solid rgba(17,24,39,.10);
  background: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  padding-right: 34px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
#app .card .list .item[data-cat]::after{
  content: "›";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 900;
  color: rgba(17,24,39,.45);
  font-size: 18px;
}
#app .card .list .item[data-cat]:hover{
  border-color: rgba(79,143,47,.35);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}
#app .card .list .item[data-cat]:active{
  transform: translateY(1px);
}

/* D) Notiz / Foto hinzufügen (optional) NICHT fett (robust) */
#app .card *[style*="Notiz / Foto hinzufügen"]{
  font-weight: 600 !important;
}

/* E) Frage: Abstand + Ja/Nein größer */
#app .card .question-text{
  margin-top: 16px !important;
  margin-bottom: 14px !important;
}
#app .card .answer-row{
  margin-top: 14px !important;
  margin-bottom: 24px !important;
}
#app .card .answer-row .btn,
#app .card .answer-row button{
  padding: 14px 16px !important;
  min-height: 52px !important;
  font-size: 16px !important;
  font-weight: 900 !important;
}

/* =========================================================
   F) UNTERE 3 BUTTONS (Zurück / Kategorien / Dashboard)
   - gleich groß
   - mehr Abstand zum Notiz-Bereich
   - FULL-WIDTH Trennlinie über der Button-Reihe
   ========================================================= */

/* 1) Gleich groß + 3-spaltig (funktioniert, wenn Parent flex ist) */
#btnPrev, #btnBackCats, #btnBackDash{
  min-height: 46px !important;
  padding: 12px 14px !important;
  font-weight: 900 !important;
  font-size: 15px !important;

  /* wichtig für gleiche Breite in flex-row */
  flex: 1 1 0 !important;
  width: 0 !important;
  min-width: 0 !important;
}

/* 2) Mehr Luft nach oben (Abstand zum Notiz/Foto-Bereich) */
#btnPrev, #btnBackCats, #btnBackDash{
  margin-top: 14px !important;
}

/* 3) Trennlinie FULL-WIDTH innerhalb der Card:
      Wir hängen sie an #btnPrev (erste Taste) als Pseudo-Element,
      das über die komplette Card-Breite "zieht". */
#btnPrev{
  position: relative;
}
#btnPrev::before{
  content:"";
  position:absolute;
  left:-1000px;   /* “überziehen”, damit es bis an die Card-Kanten reicht */
  right:-1000px;
  top:-20px;      /* sitzt genau oberhalb der Button-Reihe */
  height:1px;
  background: rgba(17,24,39,.12);
  pointer-events:none;
}

/* 4) Optional: wenn die Buttons unten “zu eng” am Card-Boden sitzen */
#btnPrev, #btnBackCats, #btnBackDash{
  margin-bottom: 2px !important;
}

/* G) Live-Score Box etwas klarer abgrenzen (dezent grün) */
#app .card div[style*="background:rgba(22,101,52,.08)"],
#app .card div[style*="background: rgba(22,101,52,.08)"]{
  border: 1px solid rgba(79,143,47,.18) !important;
}

/* =========================================================
   CAMERA UPLOAD UI (Proof) – ADDON
   - ersetzt optisch "Datei auswählen" durch Kamera-Button
   - pulsing glow / Hinweis
   - funktioniert nur, wenn spa-main.js die Klassen nutzt
   ========================================================= */

/* File input verstecken, wenn du es so nutzt:
   <input id="proofPhoto" class="proof-file-input" ...>
*/
.proof-file-input{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* Kamera Button */
.proof-camera-btn{
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  background: var(--green);
  color: #fff;
  font-weight: 900;
  font-size: 16px;

  box-shadow: 0 10px 22px rgba(79,143,47,.22);
  position: relative;
  user-select: none;
}
.proof-camera-btn:hover{ background: var(--green-dark); }
.proof-camera-btn:active{ transform: translateY(1px); }

/* Kamera Icon (SVG) */
.proof-camera-btn svg{
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  display:block;
  fill: currentColor;
}

/* Pulsierender Glow */
@keyframes proofGlowPulse{
  0%   { box-shadow: 0 10px 22px rgba(79,143,47,.22), 0 0 0 0 rgba(79,143,47,.35); }
  70%  { box-shadow: 0 10px 22px rgba(79,143,47,.22), 0 0 0 10px rgba(79,143,47,0); }
  100% { box-shadow: 0 10px 22px rgba(79,143,47,.22), 0 0 0 0 rgba(79,143,47,0); }
}
.proof-camera-btn.is-attention{
  animation: proofGlowPulse 1.35s ease-out infinite;
}

/* Kleine Hint-Zeile drunter */
.proof-camera-hint{
  margin-top: 8px;
  font-size: 13px;
  font-weight: 800;
  color: rgba(17,24,39,.62);
  line-height: 1.25;
}

/* "Nur Live-Foto" Badge */
.proof-camera-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(79,143,47,.12);
  border: 1px solid rgba(79,143,47,.22);
  color: #166534;
  font-weight: 900;
  font-size: 12px;
}
.proof-camera-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #16a34a;
  box-shadow: 0 0 0 3px rgba(22,163,74,.18);
}

/* Falls du im Proof-Item eine Vorschau/Statuszeile renderst */
.proof-preview{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(17,24,39,.10);
}
.proof-preview .proof-preview-title{
  font-weight: 900;
  margin: 0;
}
.proof-preview .proof-preview-sub{
  margin-top: 4px;
  color: rgba(17,24,39,.65);
  font-size: 13px;
  font-weight: 800;
}

/* =====================================================
   VISITS – Besuchsprotokoll (SPA View)
   hinzugefügt: 2026-03-01
   ===================================================== */

.vp-page{max-width:980px;margin:0 auto;padding:14px;}
.vp-top{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:12px;}
.vp-h1{font-size:18px;font-weight:900;margin:0;}
.vp-sub{font-size:12px;opacity:.8;margin-top:2px;}
.vp-top-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}

.vp-layout{display:grid;grid-template-columns:1fr;gap:var(--gap);}
.vp-list{padding:12px;}
.vp-list-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px;}
.vp-list-title{font-weight:900;}
.vp-list-items{display:flex;flex-direction:column;gap:8px;}
.vp-list-item{border:1px solid var(--border);background:#fff;border-radius:12px;padding:10px 10px;display:flex;gap:10px;align-items:center;justify-content:space-between;cursor:pointer;text-align:left;}
.vp-li-title{font-weight:900;font-size:13px;line-height:1.15;}
.vp-li-sub{font-size:12px;opacity:.8;margin-top:3px;}
.vp-li-status{font-size:11px;font-weight:900;opacity:.75;text-transform:uppercase;}
.vp-editor{padding:12px;}
.vp-editor-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px;}
.vp-editor-title{font-weight:900;}
.vp-editor-actions{display:flex;gap:10px;flex-wrap:wrap;}

.vp-form{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:10px;}
.vp-field label{display:block;font-weight:900;font-size:12px;opacity:.85;margin-bottom:6px;}
.vp-field input,.vp-field select,.vp-field textarea{width:100%;border:1px solid var(--border);border-radius:12px;padding:12px;background:#fff;}
.vp-field textarea{min-height:120px;resize:vertical;}
.vp-span{grid-column:1/-1;}

.card-inner{background:rgba(0,0,0,.03);border:1px solid var(--border);border-radius:12px;padding:10px;margin:10px 0;}
.vp-open-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px;}
.vp-open-title{font-weight:900;font-size:13px;}
.vp-open-list{display:flex;flex-direction:column;gap:8px;}
.vp-open-item{display:flex;gap:10px;align-items:flex-start;background:#fff;border-radius:12px;padding:10px;border:1px solid var(--border);}
.vp-open-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;}

.vp-section{margin-top:12px;}
.vp-section-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px;}
.vp-section-title{font-weight:900;}
.vp-notes{display:flex;flex-direction:column;gap:10px;}
.vp-note{border:1px solid var(--border);border-radius:12px;padding:10px;background:#fff;}
.vp-note-actions{display:flex;justify-content:flex-end;margin-top:8px;}

.vp-todos{display:flex;flex-direction:column;gap:8px;}
.vp-todo-row{border:1px solid var(--border);border-radius:12px;background:#fff;padding:10px;}
.vp-todo-row.done{opacity:.7;}
.vp-todo-lab{display:flex;gap:10px;align-items:flex-start;font-weight:800;}
.vp-todo-text{flex:1;}
.vp-todo-add{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;}
.vp-todo-add input{flex:1;min-width:220px;border:1px solid var(--border);border-radius:12px;padding:12px;background:#fff;}
.vp-footer{display:flex;justify-content:flex-end;margin-top:10px;}

@media(min-width:860px){
  .vp-layout{grid-template-columns:.9fr 1.1fr;}
  .vp-form{grid-template-columns:1fr 1fr;}
}

/* =====================================================
   MODULE HUB – Besuchsprotokoll / Check Auswahl
   hinzugefügt: 2026-03-01
   ===================================================== */

.hub-wrap{max-width:920px;margin:0 auto;padding:18px 14px 30px;}
.hub-card{background:rgba(255,255,255,0.92);border-radius:14px;box-shadow:var(--shadow);padding:16px;border:1px solid var(--border);}
.hub-title{font-weight:900;font-size:18px;margin:2px 2px 14px;}
.hub-grid{display:grid;grid-template-columns:1fr;gap:12px;}
.hub-tile{width:100%;text-align:left;border:0;border-radius:14px;padding:16px 14px;display:flex;gap:12px;align-items:center;cursor:pointer;background:#ffffff;box-shadow:var(--shadow-soft);transition:transform .08s ease, box-shadow .08s ease;}
.hub-tile:active{transform:scale(0.99);box-shadow:0 6px 14px rgba(0,0,0,0.10);}
.hub-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:22px;flex:0 0 44px;background:rgba(17,24,39,0.06);}
.hub-text{min-width:0;}
.hub-tile-title{font-size:18px;font-weight:900;line-height:1.1;margin-bottom:3px;}
.hub-tile-sub{font-size:13px;opacity:0.85;line-height:1.25;}
.hub-tile--check{border-left:10px solid var(--green);}
.hub-tile--visits{border-left:10px solid var(--green);}
.hub-tile--order{border-left:10px solid var(--green);}
@media (min-width:720px){.hub-card{padding:18px;}.hub-title{font-size:20px;}.hub-grid{grid-template-columns:1fr 1fr;gap:14px;}.hub-tile{padding:18px 16px;}}

/* --- VISITS Landing / Letzte Besuche kompakt --- */
.vp-landing{padding:14px;text-align:center;}
.vp-landing-title{font-weight:900;margin-bottom:10px;}
.vp-landing-btn{width:100%;max-width:520px;margin:0 auto;display:block;padding:14px 14px;font-size:16px;border-radius:12px;}

.vp-last{padding:12px;margin-top:12px;}
.vp-last-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px;}
.vp-last-title{font-weight:900;}
.vp-last-items{display:flex;flex-direction:column;gap:8px;}
.vp-last-item{border:1px solid var(--border);background:#fff;border-radius:12px;padding:10px 10px;display:flex;gap:10px;align-items:center;justify-content:flex-start;cursor:pointer;text-align:left;}
@media(min-width:860px){.vp-landing-btn{font-size:18px;padding:16px 16px;}}

/* Secondary check answers: visible controls, below the prominence of Yes/No. */
#app[data-view]:not([data-view="login"]) .btn.rc-answer-secondary{
  box-sizing:border-box;border:1px solid rgba(63,86,68,.22)!important;
  background:#f5f7f5!important;color:#526157!important;font-weight:600!important;
  box-shadow:none;white-space:normal;line-height:1.35;
}
#app[data-view]:not([data-view="login"]) .btn.rc-answer-secondary.is-active{
  border-color:#66876c!important;background:#e7f0e9!important;color:#315d38!important;
  box-shadow:inset 0 0 0 1px rgba(79,125,79,.1);
}
@media(hover:hover){#app[data-view]:not([data-view="login"]) .btn.rc-answer-secondary:hover{background:#edf2ee!important;border-color:#8b9d90!important}}
#app .btn.rc-answer-secondary:focus-visible{outline:2px solid #4f7d4f;outline-offset:3px}
/* Continuous horizontal scrolling: three orientation markers, not page buttons. */
#app .rc-scroll-hint{display:flex;align-items:center;justify-content:center;gap:9px;margin:9px 0 3px;padding:2px 0;color:#657369;font-size:11px;line-height:1.4;pointer-events:none;user-select:none}
#app .rc-scroll-hint[hidden]{display:none!important}
#app .rc-scroll-hint-dots{display:inline-flex;gap:5px;align-items:center}
#app .rc-scroll-hint-dot{display:block;width:5px;height:5px;border-radius:50%;background:#d0dbd2}
#app .rc-scroll-hint-dot.is-active{background:#5b7f63}
#app .rc-scroll-position{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}