/* =========================================================
   T27 ABOUT SLIDER  ·  Praefix t27-ab-
   Ersetzt den vierabsaetzigen Textblock auf /ueber-uns/
   durch belegende Bilder mit kurzem Text.
   Quelle: 27-ueber-uns-bildslider-vorschlag.html, <style>-Block.

   Konstruktionsregeln (Abschnitt 7 des Arbeitspakets), nicht aufloesen:
   - Basiszustand ohne JS = Karten untereinander, Steuerzeile aus
   - Versatz nur per translate3d, kein scroll-left, kein scroll-snap
   - Kartenbreite aus --t27-ab-w, der Rest ist der Anschnitt der naechsten Karte
   - prefers-reduced-motion schaltet Uebergaenge und Autoplay ab
   - Grid-Kinder der Karte behalten min-width:0
   - kein !important, keine Slider-Bibliothek

   Vier bewusste Abweichungen vom Prototyp, alle im Abnahmedokument begruendet:
   1. Schriften nie beim Namen: Breakdance legt sonst beim Import einen
      Google-Fonts-Link nach, also einen Fremdruf vor der Einwilligung.
      Deshalb --font-display / --font-sub / --font-body aus variables.css.
   2. Variablen auf .t27-ab statt auf :root, genau wie .t27-cs und .t27-cd-scope
      es halten. Die Section steckt in einer fremden Seite, nicht in einer Demo.
   3. Kein Aussenabstand und keine eigene Breitenbegrenzung: die Section haengt
      in ts-section (Polsterung) und ts-wrap (max-width). Beides doppelt zu
      setzen haette die Karten schmaler gemacht als gezeichnet.
   4. Kein .t27-ab-facts: die Kennzahlenleiste bleibt ein Breakdance-Element
      (Abschnitt 6 des Arbeitspakets) und behaelt ihr eigenes Aussehen.
   ========================================================= */

.t27-ab{
  --t27-void:#0A0A0B;
  --t27-card:#161618;
  --t27-card2:#1A1A1D;
  --t27-line:rgba(255,255,255,.12);
  --t27-accent:#FFA847;
  --t27-accent-strong:#F2911B;
  --t27-white:#FFFFFF;
  --t27-offwhite:#F3F3F3;
  --t27-muted:#91979E;

  --t27-ab-gap:20px;
  --t27-ab-w:88%;      /* Kartenbreite, Rest = Anschnitt der naechsten Karte */
  --t27-ab-radius:4px;
}

/* ---------- Kopf ---------- */
.t27-ab-kicker{
  font-family:var(--font-sub),sans-serif;
  font-weight:700;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--t27-accent);
  margin:0 0 14px;
}
.t27-ab-title{
  font-family:var(--font-display),sans-serif;
  font-weight:400;
  text-transform:uppercase;
  font-size:clamp(32px,5.2vw,60px);
  line-height:1.02;
  letter-spacing:.005em;
  color:var(--t27-white);
  margin:0 0 18px;
}
.t27-ab-lead{
  max-width:62ch;
  font-family:var(--font-body),sans-serif;
  color:var(--t27-muted);
  margin:0 0 clamp(28px,4vw,44px);
  font-size:clamp(15px,1.15vw,17px);
  line-height:1.6;
}
.t27-ab-lead strong{color:var(--t27-offwhite);font-weight:500;}

/* ---------- Slider Grundgeruest ---------- */
.t27-ab-viewport{
  overflow:hidden;
  touch-action:pan-y;   /* senkrechtes Scrollen bleibt der Seite, Punkt 10 der QA */
}
.t27-ab-track{
  display:flex;
  flex-direction:column;   /* Basiszustand ohne JS */
  gap:var(--t27-ab-gap);
  will-change:transform;
}
.t27-ab-card{
  background:var(--t27-card);
  border:1px solid var(--t27-line);
  border-radius:var(--t27-ab-radius);
  overflow:hidden;
  display:grid;
  grid-template-columns:1fr;
}

/* Erst mit JS wird daraus ein Slider */
.t27-ab.is-enhanced .t27-ab-track{
  flex-direction:row;
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
.t27-ab.is-enhanced .t27-ab-card{
  flex:0 0 var(--t27-ab-w);
  min-width:0;
}
.t27-ab.is-enhanced .t27-ab-card[aria-hidden="true"]{opacity:.45;transition:opacity .4s ease;}

/* ---------- Karteninhalt ---------- */
.t27-ab-media{
  position:relative;
  margin:0;
  background:#0F0F11;
  aspect-ratio:16/10;
}
.t27-ab-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.t27-ab-card > *{min-width:0;}
.t27-ab-body{
  min-width:0;
  padding:clamp(22px,3vw,40px);
  display:flex;
  flex-direction:column;
  gap:14px;
  justify-content:center;
}
.t27-ab-eyebrow{
  font-family:var(--font-sub),sans-serif;
  font-weight:700;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--t27-accent);
  margin:0;
}
.t27-ab-card h3{
  font-family:var(--font-display),sans-serif;
  font-weight:400;
  text-transform:uppercase;
  font-size:clamp(22px,2.4vw,32px);
  line-height:1.08;
  color:var(--t27-white);
  margin:0;
}
/* Der Eyebrow ist ebenfalls ein p und wuerde von dieser Regel geschlagen:
   gleiche Spezifitaet gibt es hier nicht, .t27-ab-card p ist mit 0,2,0 staerker
   als .t27-ab-eyebrow mit 0,1,0. Deshalb ausgenommen statt mit !important. */
.t27-ab-card p:not(.t27-ab-eyebrow){
  margin:0;
  font-family:var(--font-body),sans-serif;
  color:var(--t27-muted);
  font-size:clamp(14px,1.05vw,16px);
  line-height:1.6;
}
.t27-ab-chips{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:4px 0 0;
  padding:0;
}
.t27-ab-chips li{
  font-family:var(--font-sub),sans-serif;
  font-weight:600;
  font-size:12px;
  letter-spacing:.04em;
  color:var(--t27-offwhite);
  border:1px solid var(--t27-line);
  border-radius:2px;
  padding:5px 10px;
  background:var(--t27-card2);
}

/* ---------- Steuerung ---------- */
.t27-ab-controls{
  display:none;
  align-items:center;
  gap:12px;
  margin-top:24px;
}
.t27-ab.is-enhanced .t27-ab-controls{display:flex;}
.t27-ab-btn{
  width:46px;height:46px;
  border-radius:2px;
  display:inline-flex;
  align-items:center;justify-content:center;
  cursor:pointer;
  background:transparent;
  border:1px solid var(--t27-line);
  color:var(--t27-white);
  transition:border-color .2s ease,background .2s ease,color .2s ease,opacity .2s ease;
}
.t27-ab-btn svg{width:18px;height:18px;}
.t27-ab-btn:hover{border-color:var(--t27-accent);color:var(--t27-accent);}
.t27-ab-btn--next{background:var(--t27-accent);border-color:var(--t27-accent);color:#0A0A0B;}
.t27-ab-btn--next:hover{background:var(--t27-accent-strong);border-color:var(--t27-accent-strong);color:#0A0A0B;}
.t27-ab-btn:disabled{opacity:.35;cursor:not-allowed;}
.t27-ab-btn:focus-visible,
.t27-ab-toggle:focus-visible,
.t27-ab-dot:focus-visible{outline:2px solid var(--t27-accent);outline-offset:3px;}
.t27-ab-count{
  white-space:nowrap;   /* bei 390 px bricht sonst "1 / 5" auf zwei Zeilen um */
  font-family:var(--font-sub),sans-serif;
  font-weight:700;
  font-size:13px;
  letter-spacing:.1em;
  color:var(--t27-muted);
  margin:0 0 0 6px;
}
.t27-ab-count b{color:var(--t27-white);font-weight:700;}
.t27-ab-dots{
  display:flex;
  gap:8px;
  margin-left:auto;
}
.t27-ab-dot{
  width:26px;height:3px;
  padding:0;
  border:0;
  background:rgba(255,255,255,.2);
  cursor:pointer;
  transition:background .25s ease;
}
.t27-ab-dot[aria-current="true"]{background:var(--t27-accent);}

/* ---------- Autoplay: Fortschritt und Pause ---------- */
.t27-ab-progress{
  position:relative;
  flex:0 1 220px;
  height:3px;
  background:rgba(255,255,255,.14);
  margin-left:10px;
  overflow:hidden;
  display:none;
}
.t27-ab.is-auto .t27-ab-progress{display:block;}
.t27-ab-progress span{
  position:absolute;
  inset:0 auto 0 0;
  width:0;
  background:var(--t27-accent);
  transition:width .25s linear;
}
.t27-ab-toggle{
  width:46px;height:46px;
  display:none;
  align-items:center;justify-content:center;
  border:1px solid var(--t27-line);
  border-radius:2px;
  background:transparent;
  color:var(--t27-white);
  cursor:pointer;
  transition:border-color .2s ease,color .2s ease;
}
.t27-ab.is-auto .t27-ab-toggle{display:inline-flex;}
.t27-ab-toggle:hover{border-color:var(--t27-accent);color:var(--t27-accent);}
.t27-ab-toggle .t27-ab-ico-pause{display:block;}
.t27-ab-toggle .t27-ab-ico-play{display:none;}
.t27-ab:not(.is-playing) .t27-ab-toggle .t27-ab-ico-pause{display:none;}
.t27-ab:not(.is-playing) .t27-ab-toggle .t27-ab-ico-play{display:block;}
.t27-ab-toggle svg{width:16px;height:16px;}

/* ---------- Breakpoints ---------- */
@media (min-width:900px){
  .t27-ab-card{grid-template-columns:46% 1fr;}
  .t27-ab-card p{max-width:46ch;}
  .t27-ab-media{aspect-ratio:auto;height:100%;min-height:380px;}
}
@media (max-width:899px){
  .t27-ab{--t27-ab-w:94%;--t27-ab-gap:14px;}
  .t27-ab-dots{display:none;}
  .t27-ab-count{margin-left:auto;}
}
@media (prefers-reduced-motion:reduce){
  .t27-ab.is-enhanced .t27-ab-track{transition:none;}
  .t27-ab.is-enhanced .t27-ab-card[aria-hidden="true"]{transition:none;}
  .t27-ab-progress span{transition:none;}
}