:root{ --bg:#0f1216; --card:#12161c; --muted:#a8b3bf; --acc:#5dd2b3; --acc-2:#7aa3ff; --ring:#2a3340; }
.dstb-wrap{ display:flex; justify-content:center; padding:40px 16px; background:linear-gradient(180deg,#0b0e13,#0f1216 40%); }
.dstb-card{ width:min(100%,900px); background:var(--card); color:#e9eef5; border-radius:16px; padding:28px; box-shadow:0 10px 30px rgba(0,0,0,.35); border:1px solid #1c2330; }
.dstb-card h2{ margin:0 0 16px; letter-spacing:.5px; font-size:28px; }
.dstb-card h3{ margin:18px 0 8px; font-size:20px; color:#dfe7f3 }
.dstb-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:16px; }
.dstb-col-span{ grid-column:1/-1; }
.dstb-field{ display:flex; flex-direction:column; gap:6px; }
.dstb-field span{ font-size:13px; color:var(--muted); }
.dstb-field input[type="text"],
.dstb-field input[type="email"],
.dstb-field input[type="tel"],
.dstb-field input[type="date"],
.dstb-field input[type="time"],
.dstb-field input[type="number"],
.dstb-field select,
.dstb-field textarea{ background:#0c1117; color:#e9eef5; border:1px solid #1d2633; border-radius:10px; padding:12px 12px; outline:none; box-shadow: inset 0 0 0 1px transparent; transition:.15s }
.dstb-field textarea{ resize:vertical; }
.dstb-field input:focus,
.dstb-field select:focus,
.dstb-field textarea:focus{ border-color:#2b3650; box-shadow:0 0 0 3px rgba(122,163,255,.15); }


.dstb-divider{ height:1px; background:#1b2230; margin:18px 0; border-radius:1px }


.dstb-availability #dstb-slots{ display:flex; flex-direction:column; gap:10px }
.dstb-slot{ display:grid; grid-template-columns: 1.2fr .9fr .9fr 40px; gap:10px; align-items:end }
.dstb-slot label{ display:flex; flex-direction:column; gap:6px; color:var(--muted); font-size:13px }
.dstb-slot .dstb-remove{ align-self:center; height:42px; border-radius:10px; border:1px solid #2a3340; background:#0c1117; color:#dbe7ff; cursor:pointer }


#dstb-previews{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px }
#dstb-previews img{ width:92px; height:92px; object-fit:cover; border-radius:10px; border:1px solid #1d2633 }


.dstb-check{ display:flex; align-items:center; gap:10px; margin:8px 0 0 }
.dstb-info-box{ background:#0c1117; border:1px solid #2a3340; border-radius:12px; padding:12px 14px; margin-top:16px; color:var(--muted); font-size:13px; }
.dstb-info-box strong{ display:block; color:#e9eef5; margin-bottom:6px; }
.dstb-info-box ul{ margin:6px 0 0 18px; padding:0; }
.dstb-info-box li{ margin:4px 0; line-height:1.4; }
.dstb-actions{ margin-top:14px; display:flex; gap:12px; align-items:center }
.dstb-btn{ background:#0c1117; color:#eaf1ff; border:1px solid #2a3340; padding:10px 14px; border-radius:12px; cursor:pointer; transition:.15s }
.dstb-btn:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.25) }
.dstb-btn.primary{ background:linear-gradient(135deg,var(--acc),var(--acc-2)); color:#081016; border:none }


/* Confirm page */
.dstb-confirm .dstb-wrap{ background:#0f1216; }
.dstb-list{ margin:0; padding-left:18px }
.dstb-option{ display:block; padding:10px; border:1px dashed #2a3340; border-radius:10px; margin-bottom:8px }


/* Responsive */
@media (max-width:820px){ .dstb-grid{ grid-template-columns:1fr } .dstb-slot{ grid-template-columns: 1fr 1fr 1fr 36px } }

/* Kalender-Simulation */
.dstb-calendar-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:12px;
  margin-top:12px;
}
.dstb-day {
  background:#0c1117;
  border:1px solid #1d2633;
  border-radius:10px;
  padding:8px;
}
.dstb-day strong {
  display:block;
  font-size:13px;
  margin-bottom:6px;
  color:#a8b3bf;
}
.dstb-cal-btn {
  display:block;
  width:100%;
  margin-bottom:6px;
  padding:6px 8px;
  background:#121820;
  color:#eaf1ff;
  border:1px solid #2a3340;
  border-radius:8px;
  cursor:pointer;
}
.dstb-cal-btn:hover,
.dstb-cal-btn.active {
  background:linear-gradient(135deg,var(--acc),var(--acc-2));
  color:#081016;
  border:none;
}

/* ====== Tattoo-Kalender (dark style) ====== */
.dstb-cal-card {
  background:#0c1117;
  border:1px solid #1d2633;
  border-radius:14px;
  padding:20px;
  margin-top:20px;
}
.dstb-cal-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}
.dstb-cal-btn { 
  background:#1a2432; 
  color:#eaf1ff; 
  border:1px solid #2a3340; 
  border-radius:8px; 
  cursor:pointer; 
  padding:4px 10px; 
}
.dstb-cal-btn:disabled {
  opacity:0.5;
  cursor:not-allowed;
  background:#10141b;
}
.dstb-cal-btn:hover:not(:disabled) { background:#2a3340; }
.dstb-cal-grid { 
  display:grid; 
  grid-template-columns:repeat(7,1fr); 
  gap:6px; 
  text-align:center;
}
.dstb-day { 
  padding:10px 0; 
  border-radius:10px; 
  cursor:pointer; 
  user-select:none; 
  font-weight:600; 
}
.dstb-day.free { background:#2f8858; color:#fff; }
.dstb-day.booked { background:#a93226; color:#fff; }
.dstb-day.neutral { background:#151a22; color:#aab3c0; }
.dstb-day.past {
  background:#10141b;
  color:#5f6673;
  cursor:not-allowed;
  opacity:0.7;
}
.dstb-day.empty { visibility:hidden; }

.dstb-slot-panel {
  display:none;
  margin-top:18px;
  padding:15px;
  border:1px solid #2a3340;
  border-radius:10px;
  background:#10161e;
}
.dstb-slot-list { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.dstb-slot { padding:8px 10px; border-radius:8px; }
.dstb-slot.free { background:#1f5036; color:#aaffcc; }
.dstb-slot.booked { background:#3c1a1a; color:#ffb0b0; }

.dstb-slot.booked:has(span.vacation),
.dstb-slot.booked:contains("Betriebsurlaub") {
  background-color: #e74c3c !important;
  color: #fff !important;
  font-weight: 600;
  border-radius: 6px;
}

/* =========================================================
   Verbesserte Optik für Zeitfenster-Auswahl (Datum + Startzeit)
   ========================================================= */
#dstb-slots {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}

.dstb-slot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  padding: 14px 16px;
  background: #1b1f27;
  border: 1px solid #2a3340;
  border-radius: 14px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.25);
  transition: all 0.2s ease-in-out;
}

.dstb-slot:hover {
  border-color: var(--acc);
  box-shadow: 0 4px 16px rgba(93,210,179,0.25);
  transform: translateY(-2px);
}

.dstb-slot label {
  display: flex;
  flex-direction: column;
  color: var(--muted);
  font-size: 13px;
  flex: 1 1 180px;
}

.dstb-slot input[type="date"],
.dstb-slot select[data-kind="start"] {
  background: #0c1117;
  color: #e9eef5;
  border: 1px solid #1d2633;
  border-radius: 10px;
  padding: 10px 12px;
  height: 42px;
  font-size: 14px;
  outline: none;
  transition: all 0.15s ease;
}

.dstb-slot input[type="date"]:focus,
.dstb-slot select[data-kind="start"]:focus {
  border-color: var(--acc);
  box-shadow: 0 0 0 3px rgba(93,210,179,0.2);
}

.dstb-slot .dstb-remove {
  align-self: flex-end;
  margin-left: auto;
  background: #222832;
  color: #dbe7ff;
  border: 1px solid #2a3340;
  border-radius: 10px;
  height: 42px;
  width: 42px;
  cursor: pointer;
  font-size: 20px;
  line-height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
}

.dstb-slot .dstb-remove:hover {
  background: linear-gradient(135deg, var(--acc), var(--acc-2));
  color: #081016;
  border: none;
  transform: scale(1.05);
}

/* Button unterhalb der Zeilen */
#dstb-add-slot {
  margin-top: 12px;
  width: 100%;
  max-width: 300px;
  border-radius: 14px;
  padding: 12px;
  background: linear-gradient(135deg,var(--acc),var(--acc-2));
  color: #081016;
  border: none;
  font-weight: 600;
  transition: all .2s ease;
}

#dstb-add-slot:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(93,210,179,0.25);
}

/* Responsive */
@media (max-width:700px){
  .dstb-slot{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .dstb-slot label{
    flex: 1 1 auto;
  }
  #dstb-add-slot{ max-width: 100%; }
}
/* =========================================================
   Verbesserter Kalender-Input mit sichtbarem Symbol
   ========================================================= */

/* Container für Datum */
.dstb-slot input[type="date"] {
  position: relative;
  background: #0c1117 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23a8b3bf" viewBox="0 0 24 24"><path d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-2 .9-2 2v14a2 2 0 002 2h14a2 2 0 002-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11zM7 11h5v5H7z"/></svg>') no-repeat right 12px center;
  background-size: 18px;
  padding-right: 38px !important; /* Platz für Icon */
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

/* Entfernt Browser-eigene Symbole (Safari, Chrome) */
.dstb-slot input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  cursor: pointer;
}

/* Hover- & Fokuszustand */
.dstb-slot input[type="date"]:hover {
  background-color: #10171f;
  border-color: var(--acc);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%235dd2b3" viewBox="0 0 24 24"><path d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-2 .9-2 2v14a2 2 0 002 2h14a2 2 0 002-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11zM7 11h5v5H7z"/></svg>');
  background-size: 19px;
  box-shadow: 0 0 0 3px rgba(93,210,179,0.15);
}

/* Fokus-Animation */
.dstb-slot input[type="date"]:focus {
  border-color: var(--acc);
  box-shadow: 0 0 0 3px rgba(93,210,179,0.25);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%235dd2b3" viewBox="0 0 24 24"><path d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-2 .9-2 2v14a2 2 0 002 2h14a2 2 0 002-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11zM7 11h5v5H7z"/></svg>');
}

/* =========================================================
   Kalender-Popup: bessere Strukturierung der freien Zeiten
   ========================================================= */
.dstb-slot-panel {
  margin-top: 20px;
  padding: 18px;
  background: #10161e;
  border-radius: 14px;
  border: 1px solid #2a3340;
  box-shadow: 0 6px 22px rgba(0,0,0,0.35);
}

.dstb-slot-header h4 {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 600;
  color: var(--acc);
}

.dstb-slot-header .dstb-slot-sub {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--muted);
}

.dstb-slot-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dstb-slot.free, .dstb-slot.booked {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  transition: all .15s ease;
}

.dstb-slot.free {
  background: #1b352a;
  color: #9cf5c9;
}

.dstb-slot.booked {
  background: #3b1f1f;
  color: #ffb0b0;
}

.dstb-slot.free:hover {
  background: #2a5240;
  transform: scale(1.02);
}

.dstb-slot.booked:hover {
  background: #4b2525;
  transform: scale(1.02);
}

/* Kalenderfarben */
.dstb-day.booked { background: #ff5050; color:#fff; }
.dstb-day.free { background: #64e364; color:#051a05; }
.dstb-day.neutral { background: #2a3340; color:#ddd; }

/* NEU: halb gebuchter Tag */
.dstb-day.mixed {
  position: relative;
  overflow: hidden;
  color:#fff;
}

.dstb-day.mixed .dstb-day-split {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #ff5050 50%, #64e364 50%);
  z-index: 0;
  opacity: 0.9;
  border-radius: 4px;
}

.dstb-day.mixed span, 
.dstb-day.mixed div, 
.dstb-day.mixed {
  position: relative;
  z-index: 1;
}