/* ============================================================
   Bühne: drei Bilder nebeneinander, wie auf der bestehenden Seite

   Im Ruhezustand in Marineblau zurückgenommen. Beim Überfahren
   nimmt der Teil mehr Breite ein, kommt in die eigenen Farben
   und legt sich leicht über die Nachbarn.
   ============================================================ */
.drei{position:relative;display:flex;width:100%;
  height:clamp(440px,calc(100svh - 126px),780px);
  overflow:hidden;background:#0D0D24;isolation:isolate}

.drei-teil{position:relative;flex:1 1 0;min-width:0;overflow:hidden;
  background:#1B1B3A;   /* falls ein Bild fehlt */
  transition:flex-grow 620ms cubic-bezier(.16,1,.3,1),
             transform 620ms cubic-bezier(.16,1,.3,1),
             box-shadow 620ms cubic-bezier(.16,1,.3,1)}
.drei-teil img{width:100%;height:100%;object-fit:cover;display:block;
  color:transparent;   /* verhindert, dass der Alt-Text im Bild steht */
  transition:filter 520ms ease-out, transform 900ms cubic-bezier(.16,1,.3,1)}

/* Zurückgenommen: entsättigt und in Marineblau getaucht */
.drei-teil::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(22,22,63,.72) 0%, rgba(13,13,36,.80) 100%);
  mix-blend-mode:multiply;
  transition:opacity 520ms ease-out}
.drei-teil img{filter:saturate(.28) brightness(.86) contrast(1.04)}

/* Überfahren: eigene Farben, mehr Raum, leichte Überlappung */
.drei:hover .drei-teil{flex-grow:.82}
.drei-teil:hover,.drei-teil:focus-within{flex-grow:1.55;z-index:3;
  transform:scale(1.015);
  box-shadow:0 0 0 1px rgba(255,255,255,.10), 0 30px 70px -20px rgba(0,0,0,.6)}
.drei-teil:hover::after,.drei-teil:focus-within::after{opacity:0}
.drei-teil:hover img,.drei-teil:focus-within img{
  filter:saturate(1) brightness(1) contrast(1);transform:scale(1.06)}

/* feine Trennlinien zwischen den Teilen */
.drei-teil + .drei-teil::before{content:'';position:absolute;left:0;top:0;bottom:0;width:1px;
  background:rgba(255,255,255,.14);z-index:4;transition:opacity 420ms ease-out}
.drei:hover .drei-teil + .drei-teil::before{opacity:0}

/* Beschriftung je Teil, erscheint beim Überfahren */
.drei-name{position:absolute;left:0;right:0;bottom:0;z-index:4;
  padding:clamp(20px,2.4vw,30px);color:#fff;text-align:center;
  opacity:0;transform:translateY(10px);
  background:linear-gradient(to top, rgba(8,8,20,.86) 0%, rgba(8,8,20,0) 100%);
  transition:opacity 420ms ease-out, transform 420ms cubic-bezier(.16,1,.3,1)}
.drei-teil:hover .drei-name,.drei-teil:focus-within .drei-name{opacity:1;transform:none}
.drei-name b{display:block;color:#fff!important;font-size:clamp(16px,1.5vw,19px);font-weight:600;letter-spacing:-.022em}
.drei-name span{display:block;color:#D5D4E2!important;margin-top:5px;font-size:12.5px;color:#D5D4E2}

/* Der Satz in der Mitte — liegt über allen dreien */
.drei-satz{position:absolute;inset:0;z-index:5;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:clamp(20px,3vw,44px);color:#fff}
.drei-marke{display:inline-flex;align-items:center;gap:11px;white-space:nowrap;
  color:#fff!important;
  font-size:clamp(10.5px,.95vw,13px);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;margin-bottom:clamp(14px,1.8vw,22px);
  text-shadow:0 1px 4px rgba(8,8,20,.7)}
.drei-marke::before,.drei-marke::after{content:'';width:26px;height:1.5px;
  background:rgba(255,255,255,.62)}
.drei-satz h1{margin:0;color:#fff!important;font-weight:700;
  font-size:clamp(27px,3.5vw,50px);line-height:1.1;letter-spacing:-.035em;
  text-shadow:0 2px 6px rgba(8,8,20,.5), 0 2px 40px rgba(8,8,20,.75);
  max-width:30ch;text-wrap:balance}
.drei-satz p{margin-top:clamp(14px,1.8vw,22px);color:#EDECF5!important;
  font-size:clamp(16px,1.5vw,21px);font-weight:400;letter-spacing:-.01em;
  color:#EDECF5;text-shadow:0 1px 4px rgba(8,8,20,.6), 0 1px 26px rgba(8,8,20,.8);max-width:44ch}
.drei-knoepfe{pointer-events:auto;display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
  margin-top:clamp(22px,2.6vw,34px)}
.drei-knoepfe a{display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--s);font-size:14.5px;font-weight:600;letter-spacing:-.012em;
  text-decoration:none;padding:14px 30px;border-radius:999px;
  transition:background-color 200ms ease-out, color 200ms ease-out,
             border-color 200ms ease-out, transform 120ms ease-out}
.drei-knoepfe a:active{transform:scale(.97)}
.drei-k1{background:var(--rot)!important;color:#fff!important}
.drei-k1:hover{background:var(--rot-hell);color:#fff}
.drei-k2{background:rgba(13,13,36,.55)!important;color:#fff!important;border:1.5px solid rgba(255,255,255,.55);
  backdrop-filter:blur(8px)}   /* dunkel unterlegt: bleibt auch über hellen
                                  Bildbereichen lesbar */
.drei-k2:hover{background:#fff;color:var(--navy);border-color:#fff}

/* Auf schmalen Geräten untereinander statt gequetscht */
@media (max-width:900px){
  .drei{flex-direction:column;height:auto}
  /* flex:1 1 0 wuerde die Teile auf null schrumpfen lassen — hier muss
     die Groesse aus dem Seitenverhaeltnis kommen, nicht aus dem Rest. */
  .drei-teil{flex:0 0 auto;width:100%;aspect-ratio:16/10}
  .drei-teil:nth-child(n+3){display:none}   /* display:none nimmt sie auch
     aus der Tabreihenfolge — visibility oder Hoehe 0 wuerde das nicht tun */
  .drei:hover .drei-teil{flex-grow:1}
  .drei-teil:hover{flex-grow:1;transform:none}
  .drei-satz{position:relative;background:var(--navy);padding-block:clamp(34px,7vw,52px)}
  .drei-satz h1{text-shadow:none}
  .drei-satz p{text-shadow:none}
}

@media (prefers-reduced-motion:reduce){
  .drei-teil,.drei-teil img,.drei-name{transition:none}
  .drei-teil:hover{transform:none}
  .drei-teil:hover img{transform:none}
}


/* ============================================================
   Touch-Geräte: kein Überfahren möglich, also keine Abdunklung.
   Steht bewusst ganz am Ende, damit es die Regeln oben schlägt.
   ============================================================ */
@media (hover:none),(max-width:900px){
  .drei-teil::after{opacity:0}
  .drei-teil img{filter:none!important;transform:none!important}
  .drei:hover .drei-teil{flex-grow:1}
  .drei-name{opacity:1;transform:none;
    background:linear-gradient(to top,rgba(8,8,20,.88) 0%,rgba(8,8,20,.18) 62%,rgba(8,8,20,0) 100%)}
}

/* ============================================================
   Handy: ein Bild statt drei, Überschrift darüber

   Vorher standen zwei hohe Fotos vor der Überschrift — wer die Seite
   öffnete, sah zuerst ein Fahrzeugfoto ohne Zusammenhang und musste
   scrollen, um zu erfahren, worum es geht.
   ============================================================ */
@media (max-width:900px){
  .drei{position:relative;display:block;height:auto}
  /* Feste Höhe statt Seitenverhältnis: Auf dem Tablet wäre das Bild sonst
     über tausend Pixel hoch und die Überschrift verschwände darunter. */
  .drei-teil{display:block;width:100%;height:clamp(320px,54svh,520px);aspect-ratio:auto}
  .drei-teil{overflow:hidden}
  .drei-teil img{width:100%!important;height:100%!important;object-fit:cover!important}
  .drei-teil:nth-child(n+2){display:none}
  .drei-teil::after{opacity:1!important;
    background:linear-gradient(to bottom,rgba(8,8,20,.35) 0%,rgba(8,8,20,.72) 55%,rgba(8,8,20,.88) 100%)}
  .drei-name{display:none}
  .drei-satz{position:absolute;inset:auto 0 0 0;background:none;
    padding:0 20px clamp(26px,6vw,40px);text-align:center}
  .drei-satz h1{text-shadow:0 1px 3px rgba(8,8,20,.7), 0 2px 20px rgba(8,8,20,.6);
    font-size:clamp(27px,7.6vw,36px)}
  .drei-satz p{text-shadow:0 1px 3px rgba(8,8,20,.75);font-size:15.5px}
  .drei-satz .btns{justify-content:center}
}