/* ===== Mikaverse – Terminbuchung (Layout + Kalender) ===== */

/* Container */
.vb-wrap{
  max-width:1100px;
  margin:18px auto;
  font-family:inherit;
}

/* Kopf / Box */
.vb-bookbar{
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
  padding:14px;
  margin-bottom:10px;
}

.vb-topline{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.vb-title{
  margin:0;
  font-size:1.1rem;
  line-height:1.15;
}
.vb-mini{
  font-size:.9rem;
  opacity:.72;
  margin:4px 0 0 0;
}

/* Navigation (Tage vor/zurück) */
.vb-nav{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.vb-navbtn{
  appearance:none;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  border-radius:10px;
  padding:8px 12px;
  height:38px;
  cursor:pointer;
  font-weight:900;
}
.vb-navbtn:hover{background:#fafafa}

/* ===== Formular-Layout =====
   Wunsch: max. 3 nebeneinander, luftiger, Actions darunter
*/
.vb-row{
  display:grid;
  grid-template-columns:repeat(3, minmax(220px, 1fr)); /* max 3 Spalten */
  gap:16px;
  align-items:end;
}

/* Feld-Container */
.vb-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0; /* wichtig gegen "kleben" / Schrumpfen */
}

.vb-field label{
  font-size:.85rem;
  opacity:.78;
}

/* Inputs größer + besser lesbar */
.vb-field select,
.vb-field input{
  width:100%;
  padding:12px 14px;
  border:1px solid rgba(0,0,0,.14);
  border-radius:10px;
  font-size:16px;       /* wichtig für Mobile (kein Zoom) */
  outline:none;
  background:#fff;
  box-sizing:border-box;
}

/* Checkbox-/Human-Bereich soll UNTER dem Grid liegen */
.vb-human{
  grid-column:1 / -1;
  margin-top:6px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}

.vb-field.vb-human{
  grid-column:1 / -1;
  margin-top:6px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}


/* Checkbox hübsch und ruhig */
.vb-check{
  display:flex;
  flex-direction: row;
  gap:6px;
  align-items:center;
  font-size:.95rem;
  opacity:.85;
}

.vb-check input[type="checkbox"]{
  margin:0;
  flex-shrink: 0;
}

.vb-check span{
  white-space: nowrap;
}

/* Button soll ebenfalls UNTER dem Grid liegen */
.vb-btn{
  grid-column:1 / -1;   /* neue Zeile (volle Breite) */
  justify-self:end;     /* rechts ausrichten */
  appearance:none;
  border:0;
  border-radius:10px;
  padding:12px 18px;
  height:44px;
  font-weight:800;
  cursor:pointer;
  background:#111;
  color:#fff;
  font-size:16px;
  min-width:220px;
}
.vb-btn:hover{opacity:.92}

/* Hinweistext unter dem Formular */
.vb-hint{
  margin:10px 0 0 0;
  font-size:.9rem;
  opacity:.72;
  line-height:1.35;
}

/* Nachrichten / Feedback */
.vb-msg{margin-top:10px;font-size:.95rem}
.vb-msg.ok{color:#166534}
.vb-msg.err{color:#991b1b}

/* Honeypot (unsichtbar) */
.vb-hp{
  position:absolute;
  left:-9999px;
  top:-9999px;
  height:0;
  overflow:hidden;
}

/* ===== Kalender ===== */
.vb-cal{
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
  overflow:hidden;
}

.vb-cal-head{
  display:grid;
  grid-template-columns:78px 1fr 1fr 1fr;
  background:#fcfcfc;
  border-bottom:1px solid rgba(0,0,0,.08);
}

.vb-cal-head div{
  padding:8px 10px;
  font-size:.82rem;
  opacity:.78;
  border-right:1px solid rgba(0,0,0,.06);
  white-space:nowrap;
}
.vb-cal-head div:last-child{border-right:0}
.vb-cal-head .vb-h-time{opacity:.55}

.vb-grid{
  position:relative;
  display:grid;
  grid-template-columns:78px 1fr 1fr 1fr;
}

.vb-times{
  border-right:1px solid rgba(0,0,0,.06);
  background:#fff;
}

/* Ultra-kompakt: 20min = 14px */
.vb-time{
  height:14px;
  padding-left:10px;
  display:flex;
  align-items:center;
  justify-content:flex-start; /* Zeit LINKS */
  font-size:.78rem;
  opacity:.72;
  border-bottom:1px solid rgba(0,0,0,.05);
  box-sizing:border-box;
}

.vb-col{
  position:relative;
  background:#fff;
  border-right:1px solid rgba(0,0,0,.06);
  cursor:crosshair;
}
.vb-col:last-child{border-right:0}

.vb-slot-line{
  height:14px;
  border-bottom:1px solid rgba(0,0,0,.05);
  box-sizing:border-box;
}

.vb-hover{
  position:absolute;
  left:6px;
  right:6px;
  height:14px;
  border-radius:8px;
  background:rgba(0,0,0,.06);
  display:none;
  pointer-events:none;
}

/* Event / Auswahl */
.vb-event,.vb-pick{
  position:absolute;
  left:6px;
  right:6px;
  border-radius:10px;
  padding:2px 6px;
  font-weight:800;
  font-size:.76rem;
  line-height:1.15;
  box-shadow:0 6px 14px rgba(0,0,0,.10);
  overflow:hidden;

  box-sizing:border-box;}
.vb-event{color:#fff}
.vb-event small,.vb-pick small{
  display:block;
  margin-top:1px;
  font-weight:800;
  opacity:.9;
  font-size:.68rem;

  line-height:1.1;}

/* Farben */
.vb-event.spooky,.vb-pick.spooky{background:#2563eb;color:#fff}
.vb-event.wasserstoff,.vb-pick.wasserstoff{background:#16a34a;color:#fff}
.vb-event.klangbett,.vb-pick.klangbett{background:#7c3aed;color:#fff}
.vb-event.mwo,.vb-pick.mwo{background:#f59e0b;color:#111}
.vb-event.mwo small,.vb-pick.mwo small{color:#111;opacity:.85}

/* Auswahl optisch hervorheben */
.vb-pick{
  border:2px solid rgba(255,255,255,.75);
  outline:2px solid rgba(0,0,0,.15);
  z-index:5;
  user-select:none;
}

.vb-overlay{
  position:absolute;
  left:78px;
  right:0;
  top:0;
  bottom:0;
  pointer-events:none;
}

/* Legende / Footer */
.vb-foot{
  padding:10px 10px;
  border-top:1px solid rgba(0,0,0,.08);
  font-size:.85rem;
  opacity:.75;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  background:#fff;
}

.vb-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 9px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:999px;
  background:#fafafa;
  font-size:.82rem;
  white-space:nowrap;
}

.vb-dot{
  width:9px;
  height:9px;
  border-radius:999px;
  background:#999;
}
.vb-dot.spooky{background:#2563eb}
.vb-dot.wasserstoff{background:#16a34a}
.vb-dot.klangbett{background:#7c3aed}
.vb-dot.mwo{background:#f59e0b}

/* ===== Responsive ===== */
@media (max-width:980px){
  .vb-row{
    grid-template-columns:repeat(2, minmax(220px, 1fr));
    gap:14px;
  }
  .vb-btn{
    justify-self:stretch; /* Button über gesamte Breite, angenehmer */
    width:100%;
    min-width:0;
  }
}

@media (max-width:620px){
  .vb-row{
    grid-template-columns:1fr;
    gap:12px;
  }
}

/* Kalender mobil: nur 1 Spalte anzeigen */
@media (max-width:820px){
  .vb-cal-head{grid-template-columns:70px 1fr}
  .vb-grid{grid-template-columns:70px 1fr}
  .vb-cal-head .vb-h2,.vb-cal-head .vb-h3{display:none}
  .vb-col.vb-col-2,.vb-col.vb-col-3{display:none}
  .vb-overlay{left:70px}
}
/* Dropdown: Schrift nicht abschneiden */
.vb-field select{
  line-height: 1.35;
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Checkbox sauber nebeneinander */
.vb-check{
  display:flex;
  align-items:center;
  gap:10px;
}
.vb-check input{
  margin:0;
}
.vb-human{
  grid-column:1 / -1;
  margin-top:6px;
  display:flex;
  justify-content:flex-start;
}


.vb-check{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
}

.vb-check input{ 
  margin:0;
  flex-shrink: 0;
}

.vb-privacy{
  margin-top: 4px;
  font-size: .85rem;
  opacity: .65;
  line-height: 1.4;
  max-width: 500px;
}

/* Dropdown: Text nicht abgeschnitten */
.vb-field select{
  line-height: 1.35;
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Dropdown-Text sauber lesbar (nicht abgeschnitten) */
.vb-field select{
  box-sizing: border-box;
  width: 100%;
  font-size: 16px;
  line-height: 1.4;
  padding: 12px 14px;
  min-height: 46px;          /* wichtig gegen Abschneiden */
  height: auto;
}

/* iOS/Safari/Chrome: native Select zickt manchmal -> etwas Luft */
.vb-field select option{
  font-size: 16px;
}
/* Dropdown: Text darf nicht abgeschnitten werden */
.vb-field select{min-height:44px;line-height:1.4;}
.vb-field select option{line-height:1.4;}