/* FILE: assets/css/krankentransporte.css */

:root{
  --b:#d9d9d9; --r:14px;
  --green:#2ecc71; --yellow:#f1c40f; --red:#e74c3c; --gray:#bbb;
  --greenStrong:#0d7a3a;
  --redStrong:#8b1c1c;
}

.kt-wrap{max-width:1100px;margin:0 auto;padding:14px}

/* Ergebnisleiste unter dem Website-Header fixieren (Header bleibt unverändert) */
.kt-topbar{
  position:sticky;top: var(--site-header-offset, 0px);
  z-index:2000;
  background:rgba(250,250,250,.93);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--b);
}
.kt-topbar .kt-wrap{display:flex;gap:10px;align-items:center;justify-content:space-between}

.kt-badge{
  flex:1; display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--b); border-radius:var(--r);
  padding:10px 12px; box-shadow:0 1px 8px rgba(0,0,0,.06);
  min-width:260px;
  transition: background .15s ease, border-color .15s ease;
}
.kt-lamp{width:14px;height:14px;border-radius:999px;border:1px solid #999;background:var(--gray)}
.kt-badge b{font-size:14px}
.kt-badge span{font-size:13px;color:#333}

/* AMPEL: Hintergrundfarbe stark sichtbar */
.kt-badge.is-red{
  background:#ffd6d6;
  border-color:#e74c3c;
}
.kt-badge.is-red #ampelTitle,
.kt-badge.is-red #ampelText{ color:#7a0b0b; }

.kt-badge.is-green{
  background:#d8ffe7;
  border-color:#2ecc71;
}
.kt-badge.is-green #ampelTitle,
.kt-badge.is-green #ampelText{ color:#0b4f2a; }

.kt-badge.is-yellow{
  background:#fff2c6;
  border-color:#f1c40f;
}
.kt-badge.is-yellow #ampelTitle,
.kt-badge.is-yellow #ampelText{ color:#6b5200; }

.kt-toggles{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  background:#fff; border:1px solid var(--b); border-radius:var(--r);
  padding:6px; box-shadow:0 1px 8px rgba(0,0,0,.06);
  white-space:nowrap;
}
.kt-btn{
  appearance:none; border:1px solid var(--b); background:#fff;
  border-radius:12px; padding:10px 10px; cursor:pointer; font-weight:800;
  display:flex; align-items:center; gap:8px; user-select:none;
}
.kt-btn[data-on="1"]{background:#f6f6f6; outline:2px solid #00000010}
.kt-btn small{font-weight:700;color:#444}
.kt-reset{
  border:1px solid var(--b); background:#fff; border-radius:12px;
  padding:10px 12px; cursor:pointer; font-weight:800;
}

/* OK-Highlight (wie Ampel-Grün) */
.kt-ok{
  background: var(--greenStrong) !important;
  border-color: var(--greenStrong) !important;
  color:#fff !important;
}
.kt-ok small{ color:#fff !important; }
.kt-ok *{ color:#fff !important; }

/* Krankenkasse Button: 1-zeilig + Ellipsis */
.kt-kasse-pill{
  border:1px solid var(--b);
  background:#fff;
  border-radius:12px;
  padding:10px 10px;
  font-weight:900;
  font-size:13px;
  cursor:pointer;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  gap:8px;

  white-space:nowrap;
  overflow:hidden;
  max-width:420px;
  text-align:left;
}
#kasseLabel{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:800;
  color:#111 !important;
  width:100%;
  text-align:left;
}

/* Bemerkung im Button (2 Zeilen). Wird per JS in #kasseBemTop gesetzt */
#kasseBemTop{
  display:block;
  font-size:12px;
  font-weight:900;
  line-height:1.2;
  text-align:left;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-top:2px;
}

/* Bemerkung-Farbe je Art */
.kt-kasse-pill.is-gesetzlich #kasseBemTop{ color:var(--greenStrong); }
.kt-kasse-pill.is-privat     #kasseBemTop{ color:var(--redStrong); }

.kt-card{
  background:#fff; border:1px solid var(--b); border-radius:var(--r);
  box-shadow:0 1px 10px rgba(0,0,0,.06);
  overflow:hidden;
}
.kt-stage{position:relative;width:100%}
.kt-stage img{width:100%;height:auto;display:block}

/* Klickfelder */
.kt-mark{
  position:absolute;
  left:calc(var(--x) * 1%); top:calc(var(--y) * 1%);
  width:calc(var(--w) * 1%); height:calc(var(--h) * 1%);
  min-width:22px; min-height:22px;
  z-index:5;
}
.kt-mark input{
  position:absolute; inset:0;
  width:100%; height:100%;
  margin:0; padding:0; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  appearance:none; background:transparent; border:none;
}
.kt-mark input:checked{
  background:
    linear-gradient(45deg, transparent 42%, #0b0b0b 42%, #0b0b0b 58%, transparent 58%),
    linear-gradient(-45deg, transparent 52%, #0b0b0b 52%, #0b0b0b 68%, transparent 68%);
  opacity:.85; border-radius:2px;
}

/* Hotspot */
.kt-hotspot{
  position:absolute;
  left:calc(var(--x) * 1%); top:calc(var(--y) * 1%);
  width:calc(var(--w) * 1%); height:calc(var(--h) * 1%);
  z-index:10;
  cursor:pointer;
  border-radius:8px;
}
.kt-hotspot:hover{
  outline:2px solid rgba(0,0,0,.12);
  outline-offset:-2px;
}

/* nur für den Krankenkassen-Hotspot (kompakt) */
#kasseHotspot{
  --w:43.875 !important; /* 58.5 * 0.75 */
  --h:6.8 !important;    /* kompakter (≈ 4 Zeilen) */
}
#kasseHotspot:hover{
  outline:2px solid rgba(0,0,0,.18);
  outline-offset:-2px;
}

/* Kostenträger NICHT als Overlay im Formular anzeigen */
.kt-kasse-overlay{ display:none !important; }

/* Kostenträger OK-Haken (klein, rechts im Feld) */
.kt-kasse-ok{
  position:absolute;
  left:calc(var(--x) * 1%); top:calc(var(--y) * 1%);
  width:calc(var(--w) * 1%); height:calc(var(--h) * 1%);
  z-index:9;
  pointer-events:none;
  display:none;
  align-items:center;
  justify-content:flex-end;
  padding-right:8px;
  box-sizing:border-box;
  font-weight:900;
  font-size:22px;
  color:var(--greenStrong);
  text-shadow:0 1px 0 rgba(255,255,255,.7);
  opacity:0;
}
.kt-kasse-ok.show{ display:flex; }

/* --------------------------------
   DATE PICKER OVERLAY
---------------------------------- */
.kt-date-big{
  position:absolute;
  left:calc(var(--x) * 1%); top:calc(var(--y) * 1%);
  width:calc(var(--w) * 1%); height:calc(var(--h) * 1%);
  z-index:12;
  cursor:pointer;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:0 6px;
  box-sizing:border-box;
  overflow:hidden;
}
.kt-date-big:hover{ outline:2px solid rgba(0,0,0,.10); }

.kt-date-text{
  font-weight:900;
  font-size:16px;
  color:#111;
  line-height:1;
  white-space:nowrap;
  opacity:0;
}
.kt-date-big.has-value .kt-date-text{ opacity:1; }

.kt-date-btn{ display:none !important; }

.kt-date-big input[type="date"]{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
  border:0;
  margin:0;
  padding:0;
}

/* Modal */
.kt-modal-backdrop{
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,.35);
  display:none;
}
.kt-modal{
  position:absolute; left:50%; top:8%;
  transform:translateX(-50%);
  width:min(450px, calc(100% - 24px));
  background:#fff;
  border:1px solid var(--b);
  border-radius:16px;
  box-shadow:0 10px 40px rgba(0,0,0,.25);
  overflow:hidden;
}
.kt-modal-head{
  display:flex; gap:10px; align-items:center; justify-content:space-between;
  padding:12px 14px; border-bottom:1px solid var(--b);
}
.kt-modal-head b{font-size:14px}
.kt-modal-close{
  border:1px solid var(--b); background:#fff; border-radius:12px;
  padding:8px 10px; cursor:pointer; font-weight:900;
}
.kt-modal-body{ padding:12px 14px; }

.kt-search{
  width:100%;
  border:1px solid var(--b);
  border-radius:12px;
  padding:10px 12px;
  font-weight:900;
  font-size:14px;
}

/* Modal: eine Spalte */
.kt-list{ margin-top:12px; }
.kt-list.kt-list-one{ display:block; }

.kt-group{
  border:1px solid var(--b);
  border-radius:14px;
  overflow:hidden;
}
.kt-group h3{
  margin:0;
  padding:10px 12px;
  font-size:13px;
  background:#f7f7f7;
  border-bottom:1px solid var(--b);
}
.kt-items{
  max-height:58vh;
  overflow:auto;
}
.kt-item{
  padding:10px 12px;
  border-bottom:1px solid #eee;
  cursor:pointer;
}
.kt-item:hover{ background:#fafafa; }
.kt-item b{ font-size:13px; display:block; }

.kt-tag{
  display:inline-block;
  margin-top:6px;
  font-size:12px;
  font-weight:900;
  color:#666;
}
.kt-tag.privat{ color:var(--red); }
.kt-tag.gesetzlich{ color:var(--green); }

.kt-bem{
  margin-top:10px;
  font-size:12px;
  color:#333;
  font-weight:700;
}

/* Debug (D) */
.kt-debug .kt-mark{outline:2px dashed rgba(0,0,255,.55)}
.kt-debug .kt-hotspot{outline:2px dashed rgba(0,160,0,.55)}
.kt-debug .kt-date-big{outline:2px dashed rgba(255,140,0,.75)}
.kt-debug-banner{
  position:fixed; right:12px; bottom:12px; z-index:60;
  background:#111; color:#fff; padding:8px 10px; border-radius:12px;
  font-size:12px; display:none;
}
.kt-debug .kt-debug-banner{display:block}

.kt-info{
  margin-top:10px; font-size:12px; color:#666;
  background:#fff; border:1px solid var(--b); border-radius:var(--r);
  padding:10px 12px;
}

@media (max-width: 900px){
  .kt-topbar .kt-wrap{flex-direction:column;align-items:stretch}
  .kt-toggles{justify-content:space-between}
  .kt-kasse-pill{max-width:100%;}
}

@media (max-width: 600px){
  .kt-mark{ min-width:18px; min-height:18px; }
}

@media (max-width: 250px){
  .kt-mark{ min-width:12px; min-height:12px; }
}

/* =========================================================
   KOMPAKTE TOPBAR / PRÜFASSISTENT
   ========================================================= */

.kt-topbar .kt-wrap{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:10px;
}

.kt-badge{
  width:100%;
  min-width:0;
}

.kt-toggles{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:10px;
  white-space:normal;
}

.kt-kasse-pill{
  width:100%;
  max-width:none;
}

/* Genehmigung, Befreiung und Reset in einer Reihe */
.kt-actions{
  display:flex;
  gap:10px;
  flex-wrap:nowrap;
  align-items:stretch;
}

.kt-actions .kt-btn{
  flex:1 1 0;
  justify-content:center;
  padding:clamp(10px, 1.2vw, 14px) clamp(10px, 1.4vw, 16px);
}

.kt-actions .kt-btn small{
  font-size:clamp(12px, 1.2vw, 16px);
  line-height:1.15;
}

#btnReset{
  width:100%;
  font-size:clamp(14px, 1.4vw, 18px);
}

/* Überschrift des Prüfassistenten */
.kt-assist-heading{
  width:100%;
  margin:0;
  padding:10px 14px;
  border:1px solid rgba(95, 67, 0, .22);
  border-radius:10px;
  background:
    linear-gradient(
      135deg,
      rgba(255, 250, 235, .98),
      rgba(255, 255, 255, .98)
    );
  box-shadow:0 1px 4px rgba(0,0,0,.05);
}

.kt-assist-kicker{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  font-size:clamp(15px, 1.25vw, 18px);
  line-height:1.2;
  font-weight:900;
  letter-spacing:.02em;
  color:#5f4300;
  text-transform:uppercase;
}

.kt-assist-kicker::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:#c89b2b;
  box-shadow:0 0 0 3px rgba(200,155,43,.14);
  flex:0 0 auto;
}

@media (max-width:720px){
  .kt-actions{
    flex-wrap:wrap;
  }

  .kt-actions .kt-btn{
    flex:1 1 260px;
  }

  .kt-assist-heading{
    padding:8px 10px;
  }

  .kt-assist-kicker{
    font-size:14px;
  }
}