/* ===========================================================
   VibaTrip · transfer-redesign.css
   Transfer-Seite, Layout v2:
   - kompakter Hero (Suchleiste sofort sichtbar)
   - zweispaltig: links Suche + Fahrzeugliste, rechts Karte
   - Karte laeuft als position:sticky mit
   Eigenes Praefix vt- -> keine Kollision mit transfer-search.css.
   Bestehende IDs/Klassen werden NICHT umbenannt.
   =========================================================== */

.vt-tr{
  --navy:#0c1c30;
  --navy-soft:#15293f;
  --ink:#1a2436;
  --gold:#caa04a;
  --gold-deep:#a8842f;
  --rust:#bf6a3a;
  --paper:#f4f0e6;
  --line:#ddd4be;
  --muted:#7a7158;
}

.vt-tr,
.vt-tr input,
.vt-tr select,
.vt-tr button{
  font-family:'Outfit',-apple-system,BlinkMacSystemFont,sans-serif;
}
.vt-tr h1,.vt-tr h2,.vt-tr h3,.vt-tr h4,
.vt-tr .vt-fraunces{
  font-family:'Libre Caslon Display','Playfair Display',serif;
}
.vt-tr *{box-sizing:border-box;}
.vt-wrap{max-width:1200px;margin:0 auto;padding:0 26px;}

/* ---------------  KOMPAKTER HERO MIT BILD  --------------- */
.vt-hero{
  position:relative;
  background:#0c1c30;
  overflow:hidden;
  color:#fff;
}
/* Hintergrundbild – volle Breite, vertikal verschiebbar (kein cover-Zoom) */
.vt-hero-bg{
  position:absolute;inset:0;
  background-image:url('../img/Transfer_Bild_Vibatrip.webp');
  background-size:cover;
  background-repeat:no-repeat;
  background-position:right center;
  z-index:0;
}
/* Verlauf: nur sehr leichte gleichmäßige Abdunklung, Bild bleibt hell */
.vt-hero-shade{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,
      rgba(12,28,48,.20) 0%,
      rgba(12,28,48,0) 30%,
      rgba(12,28,48,0) 74%,
      rgba(12,28,48,.30) 100%);
}
.vt-hero .vt-contour{position:absolute;inset:0;opacity:.35;pointer-events:none;z-index:2;}
.vt-hero-inner{
  position:relative;z-index:3;
  padding:26px 0 24px;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  text-align:left;
}
.vt-kicker{
  font-size:10px;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--gold);font-weight:500;
  display:flex;align-items:center;gap:10px;
  margin-bottom:8px;
}
.vt-kicker::before{content:"";width:28px;height:1px;background:var(--gold);}
.vt-hero h1{
  font-weight:500;font-size:1.7rem;line-height:1.1;
  letter-spacing:-.3px;margin:0 0 9px;
  text-shadow:0 2px 5px rgba(0,0,0,.95), 0 4px 24px rgba(0,0,0,.9);
}
.vt-hero h1 .vt-hl{font-style:normal;font-weight:400;color:var(--gold);}
.vt-hero .vt-lead{
  color:rgba(255,255,255,.85);font-size:.86rem;line-height:1.5;
  font-weight:300;max-width:400px;
  border-left:1px solid rgba(255,255,255,.25);
  padding-left:16px;
  text-shadow:0 1px 4px rgba(0,0,0,.95), 0 2px 16px rgba(0,0,0,.9);
}
.vt-hero .vt-since-yr{
  margin-left:auto;
  display:flex;align-items:center;gap:12px;
  color:rgba(255,255,255,.7);font-size:11.5px;
  text-shadow:0 1px 4px rgba(0,0,0,.95), 0 2px 16px rgba(0,0,0,.85);
}
.vt-hero .vt-since-yr b{
  font-family:'Libre Caslon Display','Playfair Display',serif;
  font-size:26px;color:var(--gold);font-weight:500;
}

/* ---------------  ZWEISPALTIGES LAYOUT  --------------- */
.vt-layout{
  display:grid;
  grid-template-columns:1fr 360px;
  gap:24px;
  align-items:start;
  padding:30px 0 50px;
}

/* -- LINKE SPALTE: Suche + Fahrzeugliste -- */
.vt-col-main{min-width:0;}

.vt-formcard{
  background:#fff;
  border-radius:6px;
  box-shadow:0 18px 50px -22px rgba(12,28,48,.45);
  border:1px solid #eadfc4;
  padding:32px 36px 36px;
}
.vt-ftitle{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  margin-bottom:24px;border-bottom:1px solid #eee6d2;padding-bottom:18px;
}
.vt-ftitle h2{font-weight:500;font-size:1.6rem;color:var(--navy);}
.vt-ftitle p{font-size:13.5px;color:#9c9277;}

.vt-tr #search-form,
.vt-tr #search-form.ts-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px 26px;
}
.vt-tr #search-form .ts-field{position:relative;margin:0;}
.vt-tr #search-form .ts-field.vt-full{grid-column:1 / -1;}
.vt-tr #search-form .ts-field > label{
  display:block;font-size:12px;font-weight:600;
  letter-spacing:.5px;text-transform:uppercase;
  color:#8a7f63;margin-bottom:9px;
}
.vt-tr #search-form .ts-field .req{color:var(--rust);}

.vt-tr #search-form input[type=text],
.vt-tr #search-form input[type=date],
.vt-tr #search-form input[type=time],
.vt-tr #search-form select{
  width:100%;font-size:16px;color:var(--navy);
  border:none;border-bottom:2px solid #ddd3b9;
  background:transparent;padding:12px 2px;
  transition:border-color .15s;
}
.vt-tr #search-form .vt-has-ic input{padding-left:30px;}
.vt-tr #search-form input:focus,
.vt-tr #search-form select:focus{
  outline:none;border-bottom-color:var(--gold);
}
.vt-tr #search-form input::placeholder{color:#bdb393;}
.vt-tr #search-form select{appearance:none;cursor:pointer;}

.vt-fic{
  position:absolute;left:0;top:38px;
  width:20px;height:20px;color:var(--gold-deep);pointer-events:none;
}

.vt-tr #search-form .ts-field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.vt-tr #search-form .ts-pax-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}

.vt-tr #search-form .ts-return-toggle{
  grid-column:1 / -1;
  display:flex;align-items:center;gap:11px;
  font-size:14px;color:var(--muted);
  padding:16px 0 4px;
  border-top:1px dashed #e4dbc2;margin-top:6px;
}
.vt-tr #search-form .ts-return-toggle input{
  width:18px;height:18px;accent-color:var(--gold);
}
.vt-tr #search-form #return-group{grid-column:1 / -1;}

.vt-tr #search-form .ts-submit-row{grid-column:1 / -1;margin-top:10px;}
.vt-tr #search-form .ts-submit{
  width:100%;border:none;cursor:pointer;
  background:var(--navy);color:#fff;
  font-size:15.5px;font-weight:600;letter-spacing:.3px;
  padding:18px;border-radius:4px;
  display:flex;align-items:center;justify-content:center;gap:11px;
  transition:background .15s;
}
.vt-tr #search-form .ts-submit:hover{background:#16304c;}

.vt-tr #search-form .ts-suggest{
  position:absolute;left:0;right:0;top:100%;z-index:20;
  background:#fff;border:1px solid #e4dbc2;border-radius:4px;
  box-shadow:0 12px 30px -8px rgba(12,28,48,.35);
  margin-top:2px;overflow:hidden;
}
.vt-tr #search-form .ts-suggest:empty{display:none;}

.vt-managehint{
  font-size:13px;color:var(--muted);
  margin:16px 2px 0;line-height:1.5;
}
.vt-managehint a{color:var(--gold-deep);font-weight:600;text-decoration:none;}
.vt-managehint a:hover{text-decoration:underline;}
.vt-managehint .vt-s{font-size:12px;color:#988d70;margin-top:3px;}

.vt-tr #results-area{margin-top:22px;}
.vt-tr #results-area:empty{display:none;}

/* -- RECHTE SPALTE: mitlaufende Karte -- */
.vt-col-map{
  position:sticky;
  top:18px;
}
.vt-mapwell{
  position:relative;background:#0e2236;
  border-radius:5px;overflow:hidden;
  box-shadow:0 18px 48px -22px rgba(0,0,0,.55);
  border:1px solid #1e344f;
}
.vt-map-bar{
  position:absolute;top:0;left:0;right:0;z-index:5;
  display:flex;align-items:center;justify-content:flex-end;gap:8px;
  padding:8px 12px;
  background:transparent;
  font-size:10.5px;
  pointer-events:none;
}
.vt-map-bar > span{
  color:#5a5145;
  text-shadow:0 1px 3px rgba(255,255,255,.9);
}
.vt-map-bar .vt-live{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--gold-deep);font-weight:700;text-transform:uppercase;
  letter-spacing:1.2px;font-size:9.5px;
  text-shadow:0 1px 3px rgba(255,255,255,.9);
}
.vt-map-bar .vt-live i{
  width:6px;height:6px;border-radius:50%;background:var(--gold);
  animation:vtBeat 2s infinite;font-style:normal;
}
@keyframes vtBeat{
  0%{box-shadow:0 0 0 0 rgba(202,160,74,.5);}
  70%{box-shadow:0 0 0 8px rgba(202,160,74,0);}
  100%{box-shadow:0 0 0 0 rgba(202,160,74,0);}
}
/* Leaflet-Zoombuttons über allem, klickbar */
.vt-map-cv .leaflet-control-container{z-index:6;}
.vt-map-cv .leaflet-control-zoom{margin-top:34px !important;}
.vt-map-cv{
  position:relative;
  height:430px;
  background:
    radial-gradient(300px 220px at 24% 26%, #1f3a3a, transparent 72%),
    radial-gradient(280px 240px at 80% 74%, #20382f, transparent 74%),
    linear-gradient(160deg,#11304a 0%, #0e2740 55%, #0c1f33 100%);
}
.vt-map-cv .vt-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:46px 46px;
}
.vt-map-cv .vt-coast{position:absolute;inset:0;}
#transfer-map{position:absolute;inset:0;width:100%;height:100%;z-index:1;background:#0e2236;}

/* Platzhalter, solange noch keine Route berechnet ist */
.vt-map-empty{
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  background:linear-gradient(160deg,#11304a 0%, #0e2740 55%, #0c1f33 100%);
  color:rgba(255,255,255,.6);font-size:12.5px;line-height:1.6;
  pointer-events:none;
}
.vt-map-empty .vt-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:46px 46px;
}
.vt-map-empty span{position:relative;z-index:1;padding:0 20px;}
/* Readout über der Karte */
.vt-readout{z-index:3;}

.vt-pin{position:absolute;transform:translate(-50%,-100%);}
.vt-pin .vt-head{
  width:28px;height:28px;border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  display:flex;align-items:center;justify-content:center;
  border:2px solid #fff;box-shadow:0 8px 18px rgba(0,0,0,.45);
}
.vt-pin .vt-head b{
  transform:rotate(45deg);
  font-family:'Libre Caslon Display','Playfair Display',serif;
  font-size:12px;color:#fff;
}
.vt-pin.vt-a .vt-head{background:var(--gold);}
.vt-pin.vt-b .vt-head{background:var(--rust);}
.vt-pin .vt-lbl{
  margin-top:9px;position:absolute;left:50%;
  transform:translateX(-50%);
  background:rgba(255,255,255,.96);color:var(--navy);
  font-size:10.5px;font-weight:600;padding:3px 9px;border-radius:3px;
  white-space:nowrap;box-shadow:0 5px 14px rgba(0,0,0,.3);
}
.vt-readout{
  position:absolute;left:16px;bottom:16px;z-index:3;
  display:flex;align-items:flex-end;gap:20px;
  background:rgba(244,240,230,.97);
  padding:12px 18px;border-radius:3px;
  box-shadow:0 14px 34px rgba(0,0,0,.4);
}
.vt-readout .vt-blk b{
  display:block;
  font-family:'Libre Caslon Display','Playfair Display',serif;
  font-weight:500;font-size:20px;color:var(--navy);line-height:1;
}
.vt-readout .vt-blk span{
  font-size:9.5px;letter-spacing:1.3px;text-transform:uppercase;
  color:var(--muted);margin-top:4px;display:block;
}
.vt-readout .vt-sep{width:1px;height:28px;background:var(--line);}

.vt-map-note{
  margin-top:10px;font-size:11.5px;color:var(--muted);
  text-align:center;line-height:1.45;
}

/* ---------------  WERTE (asymmetrisch)  --------------- */
.vt-values{margin:10px auto 30px;}
.vt-vhead{font-weight:500;font-size:1.55rem;color:var(--navy);margin-bottom:5px;}
.vt-vsub{font-size:13px;color:var(--muted);margin-bottom:24px;}
.vt-vgrid{
  display:grid;grid-template-columns:1.5fr 1fr 1fr;
  border-top:1px solid var(--line);
}
.vt-v{padding:24px 24px 24px 0;border-right:1px solid var(--line);}
.vt-vgrid .vt-v:last-child{border-right:none;padding-right:0;}
.vt-vgrid .vt-v:not(:first-child){padding-left:24px;}
.vt-vic{width:25px;height:25px;color:var(--gold-deep);margin-bottom:12px;}
.vt-v h4{font-weight:500;font-size:1rem;color:var(--navy);margin-bottom:6px;}
.vt-v p{font-size:12.5px;color:var(--muted);line-height:1.55;font-weight:300;}
.vt-v.vt-lead-v h4{font-size:1.2rem;}

/* ---------------  ABLAUF  --------------- */
.vt-flow{margin:44px auto 64px;}
.vt-fhead{font-weight:500;font-size:1.55rem;color:var(--navy);margin-bottom:24px;}
.vt-fline{display:grid;grid-template-columns:repeat(3,1fr);counter-reset:vts;}
.vt-fstep{position:relative;padding:0 26px 0 0;}
.vt-fstep:not(:last-child)::after{
  content:"";position:absolute;right:18px;top:6px;
  width:8px;height:8px;
  border-top:1.5px solid var(--gold);
  border-right:1.5px solid var(--gold);transform:rotate(45deg);
}
.vt-fstep .vt-num{
  counter-increment:vts;
  font-family:'Libre Caslon Display','Playfair Display',serif;
  font-size:12.5px;color:var(--gold-deep);
  font-weight:600;letter-spacing:1px;margin-bottom:7px;
}
.vt-fstep .vt-num::before{content:"0" counter(vts) " --- ";}
.vt-fstep h4{font-weight:500;font-size:1rem;color:var(--navy);margin-bottom:5px;}
.vt-fstep p{font-size:12.5px;color:var(--muted);line-height:1.55;font-weight:300;}

/* ---------------  RESPONSIVE  --------------- */
@media (max-width:980px){
  .vt-layout{
    grid-template-columns:1fr;
    gap:18px;
  }
  .vt-col-map{
    position:static;
    order:-1;
  }
  .vt-map-cv{height:300px;}
  .vt-hero-inner{height:auto;min-height:230px;padding:28px 0;align-items:flex-start;text-align:left;}
  .vt-hero h1{font-size:1.7rem;}
  .vt-hero .vt-lead{
    border-left:none;padding-left:0;
    border-top:1px solid rgba(255,255,255,.18);padding-top:12px;
  }
  .vt-hero .vt-since-yr{margin-left:0;width:100%;}
  .vt-tr #search-form,
  .vt-tr #search-form.ts-form-grid{grid-template-columns:1fr;}
  .vt-vgrid{grid-template-columns:1fr;}
  .vt-v{border-right:none;border-bottom:1px solid var(--line);padding:20px 0;}
  .vt-vgrid .vt-v:not(:first-child){padding-left:0;}
  .vt-fline{grid-template-columns:1fr;gap:20px;}
  .vt-fstep:not(:last-child)::after{display:none;}
}

/* -- Smartphones: Karte komplett ausblenden -- */
/* Die mitlaufende Karte bringt auf kleinen Touch-Geräten keinen Mehrwert
   und fängt Wisch-Gesten ab. Daher unter 768px Breite ausgeblendet. */
@media (max-width:768px){
  .vt-col-map{display:none;}
}