/* ============================================================
   AUFTRITTE STREET v2 — horizontale Scroll-Galerie
   "Auftritte, die vorne stehen."
   Uebernommen von https://amonbaehler.com/auftritte-street.css,
   Layout korrigiert (v2): der Titelblock liegt als normaler
   Block ueber der Cards-Reihe und UEBERLAPPT diese nicht mehr
   (Original: .street-viewport absolute inset:0 + .street-head
   absolute z-index:6 -> Titel schwebte auf den Card-Bildern).
   Animations-Mechanik (sticky 100vh Stage in 320vh-Container,
   scroll-gebundener Track via street.js) unveraendert.
   ============================================================ */

/* --- Benoetigte CSS-Variablen SCOPED auf die Section (auf /alt/ nicht global
       definiert; Fallbacks bleiben ueberall vorhanden). --- */
.street-strip{
  --paper:#eeede6;
  --ink:#101218;
  --mute:#667185;
  --dim:#6a778a;
  --accent:#244df7;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* === Struktur === */
/* v6 (07.11.2026, ENTKOPPLUNG): Vorher war die Section 320vh hoch und die Stage
   sticky — vertikales Scrollen hat die Karten dadurch automatisch seitlich
   geschoben. Amon wollte das ausdruecklich nicht: man soll selbst entscheiden,
   ob man nach unten vorbeiscrollt oder die Karten seitlich durchfaehrt.
   Jetzt: normale Section in natuerlicher Hoehe, Kartenreihe nativ seitlich
   scrollbar (siehe .street-viewport). Kein Scroll-Jacking mehr. */
.street-strip{position:relative;height:auto;margin-top:clamp(80px,12vh,170px)}
/* v2: Stage ist eine Flex-Spalte — Kopf oben, Galerie darunter.
   v6: nicht mehr sticky und nicht mehr 100vh hoch; overflow bleibt hidden,
   weil .street-bg 800px nach rechts uebersteht und sonst die Seite seitlich
   aufziehen wuerde. */
.street-strip .street-stage{position:relative;height:auto;overflow:hidden;background:var(--paper,#eeede6);
  display:flex;flex-direction:column;
  padding:clamp(36px,5.5vh,68px) 0 clamp(52px,7.5vh,84px)}
/* v4/v5: Hintergrund muss rechts ueberstehen. Der Hintergrund wird per Parallax
   (bg.style.transform = shift*0.18) nach links gezogen; ohne Ueberhang wurde der
   Verlauf (weiche blaue Schatten/Lichter + Farbverlauf) an der umgezogenen rechten
   Kante hart abgeschnitten — sichtbare vertikale "Schnittkante" im Hintergrund.
   Die Gradient-Anker sind in vw/vh verankert (statt %), damit sie an der
   linken Kante haengen bleiben und sich beim Ueberhang nicht verschieben. */
/* v5: Ueberhang in PX statt Prozent. Nachgerechnet ueber alle Fensterbreiten
   (320..3840px): der Hintergrund wird per Parallax (shift*0.18) maximal 725px
   nach links gezogen — das Maximum liegt bei 720px Breite (Mobil-Layout, breite
   78vw-Karten). 800px deckt also jeden Fall ab. Prozentwerte sind hier falsch:
   -40% waeren bei 800px Breite nur 325px (noetig: 325px, kein Puffer) und auf
   Mobil (noetig ~103-111% der Breite) deutlich zu wenig -> rechte Schnittkante
   waere zurueckgekommen. Zugleich ist die Ebene so 29% schmaler als mit -130%
   (2065px statt 2910px bei 1280px Breite) -> weniger Compositing-Arbeit/Frame. */
.street-strip .street-bg{position:absolute;inset:0 -800px 0 0;pointer-events:none;
  /* v6: will-change:transform entfernt — der Hintergrund wird nicht mehr
     parallax verschoben (die Scroll-Kopplung ist weg), eine eigene
     Compositing-Ebene waere hier nur noch unnoetiger Speicherverbrauch.
     Der Ueberhang von 800px bleibt: .street-stage schneidet ihn ab. */
  background:
    radial-gradient(118.6vw 90vh at 17.8vw 8vh, rgba(36,77,247,.10), transparent 55%),
    radial-gradient(89vw 80vh at 93.9vw 110vh, rgba(36,77,247,.08), transparent 60%),
    linear-gradient(180deg,#f2f0ea 0%,#e7e4da 100%)}
/* v2/v4: Karo — der Elternbezug (.street-bg) uebersteht selbst (jetzt -800px),
   deshalb genuegt inset:0; das Karo-Raster haengt wie gehabt an der linken
   Kante und laeuft rechts weit ueber den Viewport hinaus (kein Loch). */
.street-strip .street-bg::after{content:"";position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(to right, rgba(16,18,24,.05) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(to bottom, rgba(16,18,24,.05) 0 1px, transparent 1px 88px)}

/* v2: Head ist ein normaler Block im Flexfluss — kein absolutes Overlay mehr. */
.street-strip .street-head{position:relative;top:auto;flex:0 0 auto;
  padding:0 max(7vw,64px);z-index:6;pointer-events:none}
.street-strip .street-kicker{font-family:var(--mono);font-size:12px;letter-spacing:.30em;text-transform:uppercase;color:var(--accent,#244df7);display:flex;align-items:center;gap:12px}
.street-strip .street-kicker::before{content:"";width:30px;height:1px;background:var(--accent,#244df7)}
.street-strip .street-headline{margin:16px 0 0;font-family:Space,Arial,sans-serif;font-size:clamp(30px,4.2vw,58px);line-height:.98;font-weight:700;letter-spacing:-.035em;text-transform:uppercase;color:var(--ink,#101218)}
.street-strip .street-headline .accent{color:var(--accent,#244df7)}
.street-strip .street-sub{margin:14px 0 0;max-width:44ch;font-size:clamp(13px,1.1vw,16px);line-height:1.6;color:var(--mute,#667185)}

/* v2/v6: Galerie-Viewport.
   v3/v4 (nur noch fuer den Schatten relevant): der Karten-Schatten
   (0 40px 80px -50px) verblasst erst ~70-80px unter der Karte — deshalb
   80px Naht-Raum als padding-bottom, mit margin-bottom:-80px wieder
   herausgerechnet, damit der Abstand nach unten stimmt.
   v6 (07.11.2026): Der Viewport ist jetzt der SCROLLBEHAELTER der Kartenreihe.
   overflow-x:auto erlaubt seitliches Scrollen per Trackpad, Shift+Mausrad,
   Touch und Pfeiltasten. Die Scrollbar wird ausgeblendet (Amon: "das wuerde
   scheisse aussehen") — das Scrollen selbst bleibt voll erhalten. */
.street-strip .street-viewport{position:relative;inset:auto;flex:0 0 auto;
  margin-top:clamp(14px,2.6vh,28px);margin-bottom:-80px;padding-bottom:80px;
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;z-index:3}
.street-strip .street-viewport::-webkit-scrollbar{width:0;height:0;display:none}
/* v6: Track liegt wieder im Fluss (vorher absolute + transform), damit der
   Viewport ihn nativ scrollen kann. width:max-content verhindert, dass die
   Karten am Ende umbrechen. */
.street-strip .street-track{position:relative;top:auto;left:auto;height:auto;
  display:flex;align-items:center;gap:clamp(28px,4vw,64px);
  width:max-content;min-width:100%;
  padding:0 max(7vw,64px)}
.street-strip .street-hint{/* 07.11.2026: stand unten links. Erst nach oben rechts
     auf Kicker-Hoehe gesetzt — Amon wollte ihn aber "etwas tiefer". Jetzt im FLUSS
     zwischen Kopf und Galerie, rechtsbuendig: er sitzt direkt ueber der Kartenreihe,
     genau dort, wo die Entscheidung faellt, ob man seitlich scrollt. */
  position:static;align-self:flex-end;margin:4px max(7vw,64px) 0 0;z-index:6;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim,#6a778a);display:flex;align-items:center;gap:12px}
.street-strip .street-hint .arrow{display:inline-block;animation:streetBob 1.6s ease-in-out infinite}
@keyframes streetBob{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}}

/* Cards */
.street-strip .street-card{position:relative;flex:0 0 auto;width:clamp(280px,29vw,410px);
  background:#fbfaf6;border:1px solid rgba(16,18,24,.12);border-radius:6px;overflow:hidden;
  box-shadow:0 40px 80px -50px rgba(16,18,24,.5);display:flex;flex-direction:column}
.street-strip .street-card .card-bar{display:flex;align-items:center;gap:8px;padding:11px 16px;border-bottom:1px solid rgba(16,18,24,.09);background:#f2f0ea}
.street-strip .street-card .card-bar .dots{display:flex;gap:5px}
.street-strip .street-card .card-bar .dots i{width:8px;height:8px;border-radius:50%;background:rgba(16,18,24,.18)}
.street-strip .street-card .card-bar .dots i:first-child{background:var(--accent,#244df7)}
.street-strip .street-card .card-bar .url{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--dim,#6a778a);margin-left:6px}
.street-strip .street-card .card-shot{position:relative;aspect-ratio:16/10;overflow:hidden;background:#e9e6dc}
.street-strip .street-card .card-shot img{width:100%;height:100%;object-fit:cover;display:block}
.street-strip .street-card .card-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:9px;flex:1}
.street-strip .street-card .card-num{position:absolute;top:13px;right:16px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--dim,#6a778a);z-index:2}
.street-strip .street-card .card-cat{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent,#244df7)}
.street-strip .street-card .card-title{font-family:Space,Arial,sans-serif;font-size:24px;line-height:1;font-weight:700;letter-spacing:-.02em;color:var(--ink,#101218);margin:2px 0}
.street-strip .street-card .card-desc{font-size:13.5px;line-height:1.5;color:var(--mute,#667185);margin:0}
.street-strip .street-card .card-cta{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:10px 15px;border:1px solid var(--accent,#244df7);border-radius:2px;color:var(--accent,#244df7);text-decoration:none;
  transition:background .18s ease,color .18s ease}
.street-strip .street-card .card-cta:hover{background:var(--accent,#244df7);color:#fff}

/* Placeholder-Mockup (generische Demo-Cards ohne echtes Foto) */
.street-strip .street-card .card-shot.mock{display:flex;flex-direction:column;justify-content:center;gap:11px;padding:22px 22px;background:
  radial-gradient(120% 120% at 80% 0%, rgba(36,77,247,.10), transparent 60%), var(--mock-bg,#eae7dd)}
.street-strip .street-card .card-shot.mock .m-kicker{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--mock-accent,#244df7)}
.street-strip .street-card .card-shot.mock .m-h{font-family:Space,Arial,sans-serif;font-size:23px;line-height:1.02;font-weight:700;letter-spacing:-.02em;color:var(--mock-ink,#101218)}
.street-strip .street-card .card-shot.mock .m-lines{display:flex;flex-direction:column;gap:6px;margin-top:3px}
.street-strip .street-card .card-shot.mock .m-lines i{height:6px;border-radius:2px;background:var(--mock-ink,#101218);opacity:.16}
.street-strip .street-card .card-shot.mock .m-lines i:nth-child(2){width:82%}
.street-strip .street-card .card-shot.mock .m-lines i:nth-child(3){width:58%}
.street-strip .street-card .card-shot.mock .m-chip{margin-top:7px;align-self:flex-start;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:7px 12px;border-radius:2px;background:var(--mock-accent,#244df7);color:#fff}
.street-strip .street-card.placeholder .card-cta{opacity:.55}
.street-strip .street-card.placeholder .card-cta:hover{opacity:1}

@media (max-width:720px){
  /* v5: Karten waren mit 78vw (304px bei 390px) zu breit — beim horizontalen
     Gleiten wurde dadurch immer eine Karte mitten im Text angeschnitten.
     Jetzt 72vw (281px) plus groesserer Randabstand, sodass ein klarer
     "Peek" auf die naechste Karte entsteht statt eines Textabrisses. */
  /* v6: height:240vh entfernt. Die Hoehe war nur die Scroll-Strecke fuer die
     sticky Stage (Scroll-Kopplung). Ohne Kopplung wuerde sie eine leere
     Luecke von 240vh unter der Section erzeugen — die Section ist jetzt
     auf allen Breiten natuerlich hoch (height:auto aus der Basisregel). */
  .street-strip .street-stage{padding:28px 0 56px}
  .street-strip .street-track{gap:18px;padding:0 7vw}
  .street-strip .street-card{width:72vw;max-width:300px}
  /* Karten etwas flacher, damit sie die Buehne nicht dominieren */
  .street-strip .street-card .card-shot{aspect-ratio:16/9}
  .street-strip .street-card .card-body{padding:15px 17px 17px;gap:7px}
  .street-strip .street-card .card-title{font-size:19px}
  .street-strip .street-card .card-desc{font-size:12.5px;line-height:1.5}
  .street-strip .street-headline{font-size:26px}
  .street-strip .street-sub{font-size:12.5px}
}