/* APELT Quartett v24
   Layout bewusst vom restlichen Website-CSS isoliert.
   Proportionen nach gedruckter Autoquartett-Karte: ca. 1 : 1,576. */

.fleet-showcase{
  padding:58px 0 54px !important;
  background:
    radial-gradient(circle at 50% 44%,rgba(255,255,255,.50),transparent 38%),
    linear-gradient(180deg,#f5f0e7 0%,#e9e1d4 100%) !important;
}
.fleet-showcase .section-lead{margin-bottom:0 !important}
.fleet-deck-hint{
  margin:8px 0 0 !important;
  text-align:center;
  color:#70685d !important;
  font-size:11px !important;
}
.fleet-grid{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:0 !important;
  min-height:410px !important;
  padding:34px 24px 20px !important;
  overflow:visible !important;
}

/* Physische Karte */
.fleet-card.quartet-v24{
  --card-w:236px;
  --card-h:372px;
  --paper:#f8f5ed;
  width:var(--card-w) !important;
  min-width:var(--card-w) !important;
  max-width:var(--card-w) !important;
  height:var(--card-h) !important;
  min-height:var(--card-h) !important;
  max-height:var(--card-h) !important;
  flex:0 0 var(--card-w) !important;
  display:block !important;
  position:relative !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  border:1px solid rgba(70,61,49,.18) !important;
  border-radius:15px !important;
  background:
    radial-gradient(circle at 18% 10%,rgba(255,255,255,.74),transparent 28%),
    repeating-linear-gradient(0deg,rgba(89,76,58,.018) 0,rgba(89,76,58,.018) 1px,transparent 1px,transparent 4px),
    var(--paper) !important;
  box-shadow:
    0 20px 32px rgba(58,48,35,.17),
    0 5px 10px rgba(58,48,35,.10),
    inset 0 0 0 1px rgba(255,255,255,.72) !important;
  cursor:pointer;
  transform-origin:50% 96% !important;
  transition:transform .22s ease,box-shadow .22s ease !important;
}
.fleet-card.quartet-v24::before{
  content:"" !important;
  position:absolute !important;
  left:8% !important;
  right:8% !important;
  bottom:-5px !important;
  height:14px !important;
  border-radius:50% !important;
  background:rgba(38,31,24,.20) !important;
  filter:blur(9px) !important;
  z-index:-1 !important;
}
.fleet-card.quartet-v24::after{
  content:"" !important;
  position:absolute !important;
  inset:4px !important;
  border:1px solid rgba(90,79,63,.07) !important;
  border-radius:11px !important;
  pointer-events:none !important;
}
.fleet-card.quartet-v24 + .fleet-card.quartet-v24{margin-left:-18px !important}
.fleet-card.quartet-v24:nth-child(3n+1){transform:rotate(-5deg) translateY(12px) !important;z-index:1}
.fleet-card.quartet-v24:nth-child(3n+2){transform:rotate(.4deg) translateY(-6px) !important;z-index:3}
.fleet-card.quartet-v24:nth-child(3n+3){transform:rotate(5.5deg) translateY(12px) !important;z-index:2}
.fleet-card.quartet-v24:hover{
  transform:translateY(-10px) rotate(0deg) scale(1.025) !important;
  z-index:20 !important;
  box-shadow:0 28px 42px rgba(47,39,29,.22),0 7px 14px rgba(47,39,29,.13) !important;
}
.fleet-card.quartet-v24:focus-visible{outline:3px solid #b80e10 !important;outline-offset:4px !important}

/* Konstanter Innenrand + festes Prozent-Raster */
.fleet-card.quartet-v24 > .qv24-inner{
  width:100% !important;
  height:100% !important;
  padding:13px !important; /* ca. 5,5 % der Kartenbreite */
  display:grid !important;
  grid-template-rows:7% 1% 32% 2% 6% 7% 8% 11% 26% !important;
  gap:0 !important;
  background:transparent !important;
  min-width:0 !important;
  min-height:0 !important;
}

/* 1. Kopfzeile: keine durchgehende Farbfläche */
.qv24-header{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  min-width:0 !important;
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
}
.qv24-number{
  flex:0 0 18% !important;
  height:72% !important;
  display:grid !important;
  place-items:center !important;
  border-radius:3px !important;
  background:#575950 !important;
  color:#fff !important;
  font:900 10px/1 "Arial Narrow",Arial,sans-serif !important;
  letter-spacing:.03em !important;
  text-transform:uppercase !important;
}
.qv24-category{
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  color:#2e2e2c !important;
  font:800 7px/1 "Arial Narrow",Arial,sans-serif !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
}
.qv24-gap{padding:0 !important;margin:0 !important}

/* 2. Bildfeld */
.qv24-photo{
  position:relative !important;
  width:100% !important;
  height:100% !important;
  padding:0 !important;
  overflow:hidden !important;
  border-radius:3px !important;
  background:#d5d2ca !important;
}
.fleet-card.quartet-v24 .qv24-photo > .qv24-photo-img{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
}
.qv24-logo{
  position:absolute !important;
  right:5px !important;
  bottom:5px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:34px !important;
  height:15px !important;
  padding:2px 4px !important;
  border:1px solid rgba(0,0,0,.06) !important;
  border-radius:4px !important;
  background:rgba(251,250,247,.90) !important;
  box-shadow:0 2px 5px rgba(0,0,0,.10) !important;
}
.fleet-card.quartet-v24 .qv24-logo > img{
  width:26px !important;
  height:auto !important;
  max-width:26px !important;
  max-height:10px !important;
  object-fit:contain !important;
  filter:grayscale(1) contrast(.9) !important;
  transform:none !important;
  margin:0 !important;
  padding:0 !important;
}
.fleet-card.quartet-v24:hover .qv24-photo-img{transform:scale(1.01) !important}
.fleet-card.quartet-v24:hover .qv24-logo > img{transform:none !important}

/* 3. Meta-Zeile */
.qv24-meta{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:5px !important;
  min-width:0 !important;
  padding:0 !important;
}
.qv24-plate{
  display:inline-flex !important;
  align-items:stretch !important;
  height:68% !important;
  min-width:0 !important;
  overflow:hidden !important;
  border:1px solid #353535 !important;
  border-radius:3px !important;
  background:#fff !important;
  box-shadow:0 1px 0 rgba(0,0,0,.08) !important;
}
.qv24-eu{
  width:13px !important;
  display:grid !important;
  place-items:center !important;
  background:#174ba6 !important;
  color:#fff !important;
  font:900 5px/1 Arial,sans-serif !important;
}
.qv24-plate-text{
  display:flex !important;
  align-items:center !important;
  padding:0 6px !important;
  color:#171717 !important;
  font:900 7px/1 "Arial Narrow",Arial,sans-serif !important;
  letter-spacing:.03em !important;
  white-space:nowrap !important;
}
.qv24-chip{
  max-width:48% !important;
  height:68% !important;
  display:flex !important;
  align-items:center !important;
  padding:0 6px !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  border:1px solid #d9d0c3 !important;
  border-radius:999px !important;
  background:#f6f1e8 !important;
  color:#b20c0e !important;
  font:900 5.6px/1 "Arial Narrow",Arial,sans-serif !important;
  letter-spacing:.04em !important;
  text-transform:uppercase !important;
}

/* 4. Titel */
.fleet-card.quartet-v24 .qv24-title{
  display:flex !important;
  align-items:flex-start !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  color:#111 !important;
  font:900 15.5px/.92 "Arial Narrow",Arial,sans-serif !important;
  letter-spacing:-.02em !important;
  text-transform:uppercase !important;
  max-height:100% !important;
}

/* 5. Kurzbeschreibung */
.fleet-card.quartet-v24 .qv24-description{
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  color:#4b4b48 !important;
  font:400 7.2px/1.18 Arial,sans-serif !important;
  display:-webkit-box !important;
  -webkit-line-clamp:3 !important;
  -webkit-box-orient:vertical !important;
}

/* 6. Besonderheiten */
.qv24-feature{
  align-self:stretch !important;
  min-height:0 !important;
  overflow:hidden !important;
  padding:5px 6px 4px 8px !important;
  border:1px solid #ddd4c7 !important;
  border-left:3px solid #bb0d10 !important;
  border-radius:5px !important;
  background:rgba(251,248,241,.82) !important;
}
.qv24-feature strong{
  display:block !important;
  margin:0 0 2px !important;
  color:#b20c0e !important;
  font:900 6px/1 "Arial Narrow",Arial,sans-serif !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
}
.fleet-card.quartet-v24 .qv24-feature p{
  margin:0 !important;
  padding:0 !important;
  color:#262624 !important;
  font:400 6.6px/1.15 Arial,sans-serif !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
}

/* 7. Technische Datentabelle */
.qv24-specs{
  min-height:0 !important;
  height:100% !important;
  margin:0 !important;
  padding:0 !important;
  display:grid !important;
  grid-auto-rows:1fr !important;
  overflow:hidden !important;
  border-top:1px solid #ddd5c8 !important;
}
.qv24-spec-row{
  min-width:0 !important;
  min-height:0 !important;
  display:grid !important;
  grid-template-columns:43% 57% !important;
  align-items:center !important;
  border-bottom:1px solid #ddd5c8 !important;
}
.qv24-spec-row dt{
  min-width:0 !important;
  margin:0 !important;
  color:#686761 !important;
  font:600 5.8px/1 "Arial Narrow",Arial,sans-serif !important;
  letter-spacing:.04em !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.qv24-spec-row dd{
  min-width:0 !important;
  margin:0 !important;
  text-align:right !important;
  color:#161616 !important;
  font:800 6.8px/1 "Arial Narrow",Arial,sans-serif !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* Große Detailansicht: identisches Layout, nur skaliert */
.fleet-lightbox-dialog{width:min(92vw,380px) !important}
.fleet-lightbox .fleet-card.quartet-v24{
  --card-w:min(92vw,360px);
  --card-h:min(145vw,567px);
  width:var(--card-w) !important;
  min-width:var(--card-w) !important;
  max-width:var(--card-w) !important;
  height:var(--card-h) !important;
  min-height:var(--card-h) !important;
  max-height:var(--card-h) !important;
  margin:0 !important;
  transform:none !important;
  box-shadow:0 30px 58px rgba(0,0,0,.34),0 10px 20px rgba(0,0,0,.18) !important;
}
.fleet-lightbox .quartet-v24 > .qv24-inner{padding:19px !important}
.fleet-lightbox .qv24-number{font-size:15px !important;border-radius:4px !important}
.fleet-lightbox .qv24-category{font-size:10px !important}
.fleet-lightbox .qv24-logo{width:48px !important;height:21px !important;right:7px !important;bottom:7px !important}
.fleet-lightbox .quartet-v24 .qv24-logo > img{width:37px !important;max-width:37px !important;max-height:14px !important}
.fleet-lightbox .qv24-eu{width:18px !important;font-size:7px !important}
.fleet-lightbox .qv24-plate-text{font-size:10.5px !important;padding:0 9px !important}
.fleet-lightbox .qv24-chip{font-size:8px !important;padding:0 9px !important}
.fleet-lightbox .quartet-v24 .qv24-title{font-size:23px !important}
.fleet-lightbox .quartet-v24 .qv24-description{font-size:10.5px !important;line-height:1.2 !important}
.fleet-lightbox .qv24-feature{padding:7px 9px 6px 11px !important;border-left-width:4px !important}
.fleet-lightbox .qv24-feature strong{font-size:8.5px !important}
.fleet-lightbox .quartet-v24 .qv24-feature p{font-size:9.7px !important}
.fleet-lightbox .qv24-spec-row dt{font-size:8.5px !important}
.fleet-lightbox .qv24-spec-row dd{font-size:10px !important}

/* Mobil: gleiche physische Proportion, nur kleiner und stärker aufgefächert */
@media(max-width:700px){
  .fleet-showcase{padding:40px 0 42px !important}
  .fleet-showcase h2{font-size:32px !important;max-width:340px !important}
  .fleet-showcase .section-lead{font-size:13px !important;max-width:340px !important;margin-bottom:0 !important}
  .fleet-grid{
    min-height:240px !important;
    padding:24px 0 12px !important;
    width:calc(100% + 8px) !important;
    margin-left:-4px !important;
  }
  .fleet-card.quartet-v24{
    --card-w:132px;
    --card-h:208px;
    border-radius:9px !important;
    box-shadow:0 12px 20px rgba(58,48,35,.17),0 3px 6px rgba(58,48,35,.09),inset 0 0 0 1px rgba(255,255,255,.70) !important;
  }
  .fleet-card.quartet-v24 > .qv24-inner{padding:7px !important}
  .fleet-card.quartet-v24 + .fleet-card.quartet-v24{margin-left:-46px !important}
  .fleet-card.quartet-v24:nth-child(3n+1){transform:rotate(-7deg) translateY(8px) !important}
  .fleet-card.quartet-v24:nth-child(3n+2){transform:rotate(0deg) translateY(-3px) !important}
  .fleet-card.quartet-v24:nth-child(3n+3){transform:rotate(7deg) translateY(8px) !important}
  .qv24-header{gap:4px !important}
  .qv24-number{font-size:5.7px !important;border-radius:2px !important}
  .qv24-category{font-size:3.9px !important}
  .qv24-photo{border-radius:2px !important}
  .qv24-logo{width:19px !important;height:9px !important;right:3px !important;bottom:3px !important;padding:1px 2px !important;border-radius:2px !important}
  .fleet-card.quartet-v24 .qv24-logo > img{width:15px !important;max-width:15px !important;max-height:6px !important}
  .qv24-meta{gap:3px !important}
  .qv24-plate{border-radius:2px !important}
  .qv24-eu{width:7px !important;font-size:2.7px !important}
  .qv24-plate-text{font-size:3.8px !important;padding:0 3px !important}
  .qv24-chip{font-size:3px !important;padding:0 3px !important}
  .fleet-card.quartet-v24 .qv24-title{font-size:8.7px !important;line-height:.93 !important}
  .fleet-card.quartet-v24 .qv24-description{font-size:4px !important;line-height:1.12 !important}
  .qv24-feature{padding:3px 3px 2px 4px !important;border-left-width:2px !important;border-radius:3px !important}
  .qv24-feature strong{font-size:3.1px !important;margin-bottom:1px !important}
  .fleet-card.quartet-v24 .qv24-feature p{font-size:3.5px !important;line-height:1.08 !important}
  .qv24-spec-row dt{font-size:3.2px !important}
  .qv24-spec-row dd{font-size:3.7px !important}
  .fleet-deck-hint{font-size:9px !important;margin-top:2px !important}
}
@media(max-width:390px){
  .fleet-grid{min-height:225px !important}
  .fleet-card.quartet-v24{--card-w:124px;--card-h:195px}
  .fleet-card.quartet-v24 + .fleet-card.quartet-v24{margin-left:-43px !important}
}

@media(prefers-reduced-motion:reduce){
  .fleet-card.quartet-v24{transition:none !important}
}


/* v30: Quartett ohne Kennzeichen */
.qv24-meta.qv24-meta-no-plate{
  justify-content:flex-end !important;
}
.qv24-meta.qv24-meta-no-plate .qv24-chip{
  max-width:76% !important;
}