/* ================================================================
   apart wellness — Design-System v2 (Schritt 4/5 Redesign)
   Basierend auf: _reference/apart-wellness-startseite-v1.html
   WICHTIG: Diese Datei ergänzt css/style.css NUR um neue Variablen
   und neue Sektionen (Temperaturband, Prozess, Referenzen, Bewertungen).
   Bestehende Variablen/Klassen in style.css, products.css, porsche.css
   etc. werden NICHT verändert oder überschrieben (siehe Schritt-4-
   Entscheidung: additive CSS-Variablen statt Umbenennung).
   Klassen-Präfix "aw-" (apart wellness v2) verhindert Kollisionen mit
   bestehenden Klassennamen im Projekt.
================================================================ */

:root {
  /* Neue Referenz-Farbpalette (zusätzlich zu --brand, --dark, etc.) */
  --burgund:   #8D0303;
  --warmweiss: #F9F7F4;
  --weiss:     #FFFFFF;
  --warmgrau:  #6B6560;
  --anthrazit: #1A1A1A;
  --linie:     #E8E4DE;

  /* Neue, selbst gehostete Schriften — gelten nur innerhalb der
     .aw-* Sektionen (siehe Schritt-4-Entscheidung: phasenweise Einführung) */
  --font-display: 'Quicksand', sans-serif;
  --font-body:    'Raleway', sans-serif;
}

/* ================================================================
   GEMEINSAME BASISKLASSEN
================================================================ */
.aw-eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--burgund);
  margin-bottom: 16px;
}
.aw-section-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  font-size: clamp(28px, 3.6vw, 44px);
  color: var(--anthrazit);
  margin-bottom: 18px;
}
.aw-sub {
  font-family: var(--font-body);
  color: var(--warmgrau);
  font-size: 16px;
  line-height: 1.7;
  max-width: 620px;
}
.aw-center { text-align: center; margin-top: 44px; }
.aw-btn-line {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  padding: 15px 34px;
  border-radius: 999px;
  border: 2px solid var(--anthrazit);
  color: var(--anthrazit);
  transition: background .2s, color .2s, border-color .2s;
}
.aw-btn-line:hover { background: var(--anthrazit); color: var(--warmweiss); }

/* ================================================================
   TEMPERATURBAND — Signaturelement (zwischen Header/Hero und
   "Unsere Produkte", wie vom Kunden vorgegeben)
================================================================ */
.aw-band {
  background: var(--weiss);
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  padding: 84px 0;
}
.aw-band-scale {
  position: relative;
  height: 10px;
  border-radius: 999px;
  margin: 52px 0 14px;
  background: linear-gradient(90deg, #2E6E8E 0%, #7FA8B8 22%, #D9C9A8 45%, #C97B4A 68%, var(--burgund) 100%);
}
.aw-band-stops {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.aw-band-stop {
  display: block;
  padding-top: 22px;
  border-top: 2px solid transparent;
  font-family: var(--font-body);
}
.aw-band-stop:hover { border-top-color: var(--burgund); }
.aw-band-stop:hover h3 { color: var(--burgund); }
.aw-band-stop h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--anthrazit);
  margin: 6px 0 4px;
}
.aw-band-temp {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--anthrazit);
  display: block;
}
.aw-band-stop p {
  color: var(--warmgrau);
  font-size: 0.88rem;
  margin: 0;
}
@media (max-width: 820px) {
  .aw-band-stops { grid-template-columns: 1fr 1fr; }
  .aw-band-stop:last-child { grid-column: span 2; }
}

/* ── Mobil: Temperaturbalken senkrecht statt waagerecht ── */
@media (max-width: 640px) {
  .aw-band-layout {
    display: flex;
    align-items: stretch;
    gap: 24px;
    margin: 36px 0 0;
  }
  .aw-band-scale {
    flex: 0 0 10px;
    width: 10px;
    height: auto;
    align-self: stretch;
    margin: 0;
    /* Farbverlauf von oben (heiß) nach unten (kalt) */
    background: linear-gradient(180deg, var(--burgund) 0%, #C97B4A 32%, #D9C9A8 55%, #7FA8B8 78%, #2E6E8E 100%);
  }
  .aw-band-stops {
    display: flex;
    flex-direction: column-reverse;
    gap: 26px;
    flex: 1;
  }
  .aw-band-stop {
    padding-top: 0;
    padding-left: 0;
    border-top: none;
    border-left: 2px solid transparent;
    padding-left: 18px;
    margin-left: -19px;
  }
  .aw-band-stop:hover { border-top-color: transparent; border-left-color: var(--burgund); }
  .aw-band-stop:last-child { grid-column: auto; }
}

/* ================================================================
   PROZESS — "Kein Bausatz. Dein Raum."
================================================================ */
.aw-process { background: var(--warmweiss); padding: 120px 0; }
/* Kopfbereich (Eyebrow + Überschrift) mittig über dem breiten Bild */
.aw-process-head { max-width: 640px; margin: 0 auto 48px; text-align: center; }
/* Bild bleibt im echten Querformat (Originalfoto: Gebäude/Werkstatt-Außenansicht) —
   volle Breite der Sektion statt in eine schmale Hochformat-Spalte gequetscht. */
.aw-process-img-wrap--wide { margin-bottom: 56px; }
.aw-process-img--wide {
  border-radius: 20px;
  aspect-ratio: 16/9;
  object-fit: cover;
  width: 100%;
  display: block;
}
/* Die 4 Punkte laufen unter dem Bild in einem 2-spaltigen Raster,
   damit die volle Breite sinnvoll genutzt wird (statt einer langen
   einspaltigen Liste). */
.aw-process-list--grid {
  list-style: none;
  counter-reset: aw-step;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 56px;
  row-gap: 40px;
}
.aw-process-list--grid li {
  counter-increment: aw-step;
  position: relative;
  padding: 0 0 0 62px;
  font-family: var(--font-body);
}
.aw-process-list--grid li::before {
  content: counter(aw-step, decimal-leading-zero);
  position: absolute;
  left: 0; top: 2px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--burgund);
}
.aw-process-list--grid h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--anthrazit);
  margin-bottom: 6px;
}
.aw-process-list--grid p { color: var(--warmgrau); font-size: 0.96rem; margin: 0; }
@media (max-width: 900px) {
  .aw-process-list--grid { grid-template-columns: 1fr; row-gap: 32px; }
  .aw-process-img--wide { aspect-ratio: 4/3; }
}

/* ================================================================
   REFERENZEN — statisches Karussell (Option A), horizontal scrollbar
================================================================ */
.aw-referenzen { background: var(--weiss); padding: 120px 0; }
.aw-ref-track {
  display: flex;
  /* center statt flex-start: die aktive (gezoomte) Karte wächst dadurch
     gleichmäßig nach oben UND unten statt nur nach unten — das Band
     wirkt dadurch insgesamt mittig/ruhig statt oben ausgerichtet und
     unten "ausfransend". */
  align-items: center;
  gap: 22px;
  margin-top: 48px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
  -webkit-overflow-scrolling: touch;
}
/* Nur für den unsichtbaren Moment aktiv, in dem js/carousel.js die
   Zielposition vermisst bzw. ohne Animation springt (Seitenladung,
   Endlos-Realign): Transition und Scroll-Snap kurz deaktivieren, damit
   dabei nichts sichtbar "mitanimiert" oder einrastet. Der eigentliche
   Bildwechsel läuft danach ganz normal über den nativen, weichen
   scrollTo({behavior:'smooth'}). */
.aw-carousel-track.aw-carousel-instant {
  scroll-behavior: auto !important;
  scroll-snap-type: none !important;
}
/* Während einer programmatisch ausgelösten Scroll-Bewegung (Pfeil/Punkt/
   Autoplay) muss scroll-snap kurz pausiert werden: Die anvisierte Karte
   wächst währenddessen per CSS-Transition, wodurch sich ihr Snap-Punkt
   laufend verschiebt — der Browser würde nach Abschluss des Smooth-Scrolls
   sonst zusätzlich auf den (durch das Wachstum) inzwischen leicht
   verschobenen Punkt "nachrasten" und einen spürbaren zweiten Ruck
   erzeugen. Snap wird erst wieder aktiviert, sobald die Bewegung sicher
   beendet ist (siehe js/carousel.js, Scroll-Settle). */
.aw-carousel-track.aw-carousel-animating {
  scroll-snap-type: none !important;
}
/* Während des unsichtbaren Sofort-Sprungs (Seitenladung, Endlos-Realign,
   „Animationen reduzieren") muss die Zoom-Größe der Karte SOFORT gelten,
   bevor die Scroll-Position berechnet wird — sonst würde noch mit der
   alten Größe gerechnet und die Position wäre falsch. */
.aw-carousel-track.aw-carousel-instant .aw-ref-card,
.aw-carousel-track.aw-carousel-instant .aw-review,
.aw-carousel-track.aw-carousel-instant .aw-ref-body,
.aw-carousel-track.aw-carousel-instant .aw-ref-tag,
.aw-carousel-track.aw-carousel-instant .aw-ref-body h3,
.aw-carousel-track.aw-carousel-instant .aw-ref-body p,
.aw-carousel-track.aw-carousel-instant .aw-stars,
.aw-carousel-track.aw-carousel-instant .aw-review p {
  transition: none !important;
}
.aw-ref-track::-webkit-scrollbar { height: 6px; }
.aw-ref-track::-webkit-scrollbar-thumb { background: var(--linie); border-radius: 999px; }
.aw-ref-card {
  scroll-snap-align: center;
  /* min() statt fester Pixelwert: verhindert unabhängig vom exakten
     Breakpoint, dass die Karte auf schmalen Bildschirmen über den
     Viewport hinausragt (Sicherheitsnetz zusätzlich zur Media Query). */
  flex: 0 0 min(300px, 82vw);
  width: min(300px, 82vw);
  border-radius: 18px;
  overflow: hidden;
  background: var(--weiss);
  border: 1px solid var(--linie);
  display: flex;
  flex-direction: column;
  transition: flex-basis .6s cubic-bezier(.16,1,.3,1),
              width .6s cubic-bezier(.16,1,.3,1),
              box-shadow .5s ease;
  position: relative;
  z-index: 1;
}
.aw-ref-card:hover { box-shadow: 0 20px 40px rgba(26,26,26,.10); }
/* Aktuell ausgewählte Karte: im Slider-Band selbst "herausgezoomt"
   (doppelte Breite/Höhe durch echte Layout-Vergrößerung statt reinem
   CSS-Transform, damit Bild & Text scharf bleiben und nichts vom
   Nachbarn überlagert wird). Bleibt Teil des scrollbaren Streifens. */
.aw-ref-card.is-active {
  /* --aw-active-max wird von js/carousel.js live auf die tatsächlich
     verfügbare Breite des Sliderbands gesetzt (inkl. Sicherheitsabstand) —
     zuverlässiger als ein geschätzter vw-Wert, da Container-Padding je
     nach Breakpoint variiert. Fällt auf 92vw zurück, falls JS deaktiviert
     ist. */
  flex: 0 0 min(600px, var(--aw-active-max, 92vw));
  width: min(600px, var(--aw-active-max, 92vw));
  z-index: 2;
  box-shadow: 0 28px 60px rgba(26,26,26,.18);
}
.aw-ref-placeholder {
  aspect-ratio: 3/2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(45deg, #EFEBE4, #EFEBE4 12px, #F6F2EC 12px, #F6F2EC 24px);
  color: var(--warmgrau);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  text-align: center;
  padding: 18px;
}
.aw-ref-photo {
  aspect-ratio: 3/2;
  overflow: hidden;
  background: #EFEBE4;
}
.aw-ref-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.aw-ref-body { padding: 22px 22px 26px; font-family: var(--font-body); transition: padding .6s cubic-bezier(.16,1,.3,1); }
.aw-ref-tag {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--burgund);
  transition: font-size .6s cubic-bezier(.16,1,.3,1);
}
.aw-ref-body h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--anthrazit);
  margin: 8px 0 6px;
  transition: font-size .6s cubic-bezier(.16,1,.3,1);
}
.aw-ref-body p { color: var(--warmgrau); font-size: 0.92rem; margin: 0; transition: font-size .6s cubic-bezier(.16,1,.3,1); }
/* Vergrößerte Schrift/Innenabstand innerhalb der aktiven, herausgezoomten Karte */
.aw-ref-card.is-active .aw-ref-body { padding: 30px 32px 34px; }
.aw-ref-card.is-active .aw-ref-tag { font-size: 0.8rem; }
.aw-ref-card.is-active .aw-ref-body h3 { font-size: 1.5rem; }
.aw-ref-card.is-active .aw-ref-body p { font-size: 1.02rem; }

/* ================================================================
   BEWERTUNGEN — Dummy-Platzhalter (Option A)
================================================================ */
.aw-bewertungen { background: var(--warmweiss); padding: 120px 0 130px; }
/* Karussell (analog zu .aw-ref-track): horizontal scrollbar, snap-basiert */
.aw-review-track {
  display: flex;
  /* explizit zentrieren (siehe .aw-ref-track): aktive Karte wächst
     gleichmäßig nach oben/unten statt das Band einseitig zu verschieben. */
  align-items: center;
  gap: 24px;
  margin-top: 48px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
  -webkit-overflow-scrolling: touch;
}
.aw-review-track::-webkit-scrollbar { height: 6px; }
.aw-review-track::-webkit-scrollbar-thumb { background: var(--linie); border-radius: 999px; }
.aw-review {
  scroll-snap-align: start;
  flex: 0 0 min(320px, 84vw);
  width: min(320px, 84vw);
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: 18px;
  padding: 30px;
  font-family: var(--font-body);
  transition: flex-basis .6s cubic-bezier(.16,1,.3,1),
              width .6s cubic-bezier(.16,1,.3,1),
              padding .6s cubic-bezier(.16,1,.3,1),
              box-shadow .5s ease;
  position: relative;
  z-index: 1;
}
.aw-stars {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--burgund);
  letter-spacing: 0.2em;
  margin-bottom: 14px;
  transition: font-size .6s cubic-bezier(.16,1,.3,1);
}
.aw-review p { color: var(--warmgrau); font-size: 0.95rem; line-height: 1.7; transition: font-size .6s cubic-bezier(.16,1,.3,1); }
.aw-review footer {
  margin-top: 16px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--anthrazit);
}
/* Aktuell ausgewählte Bewertungskarte: analog zu .aw-ref-card.is-active
   im Slider-Band selbst "herausgezoomt" (echte Layout-Vergrößerung). */
.aw-review.is-active {
  flex: 0 0 min(480px, var(--aw-active-max, 92vw));
  width: min(480px, var(--aw-active-max, 92vw));
  padding: 38px;
  z-index: 2;
  box-shadow: 0 28px 60px rgba(26,26,26,.18);
}
.aw-review.is-active .aw-stars { font-size: 1.1rem; }
.aw-review.is-active p { font-size: 1.05rem; }
@media (max-width: 900px) {
  .aw-review.is-active { padding: 34px; }
}

/* ================================================================
   KARUSSELL-STEUERUNG — Pfeile (beide Richtungen) + Punkte-Navigation
   + Auto-Advance (siehe js/carousel.js). Gilt für Referenzen & Bewertungen.
================================================================ */
.aw-carousel {
  position: relative;
  margin-top: 48px;
}
.aw-carousel .aw-carousel-track {
  margin-top: 0; /* Abstand jetzt vom .aw-carousel-Wrapper übernommen */
}
.aw-carousel-btn {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--linie);
  background: var(--weiss);
  color: var(--anthrazit);
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(26,26,26,.08);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
  z-index: 2;
}
.aw-carousel-btn:hover { background: var(--burgund); border-color: var(--burgund); color: var(--weiss); }
.aw-carousel-btn:focus-visible { outline: 2px solid var(--burgund); outline-offset: 2px; }
.aw-carousel-prev { left: -14px; }
.aw-carousel-next { right: -14px; }
.aw-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}
.aw-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--linie);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.aw-carousel-dot:hover { background: var(--warmgrau); }
.aw-carousel-dot.is-active { background: var(--burgund); transform: scale(1.2); }

@media (max-width: 720px) {
  .aw-carousel-btn { width: 36px; height: 36px; font-size: 1.2rem; }
  .aw-carousel-prev { left: 2px; }
  .aw-carousel-next { right: 2px; }
  /* Normalgröße auf schmalen Displays etwas kompakter, damit der
     Größenunterschied zur aktiven (gezoomten) Karte spürbar bleibt.
     Die aktive Karte selbst wird NICHT hier fest überschrieben, sondern
     bezieht ihre Maximalbreite live aus --aw-active-max (siehe
     js/carousel.js) — das berücksichtigt das tatsächliche
     Container-Padding und verhindert zuverlässig ein Abschneiden am Rand. */
  .aw-ref-card { flex: 0 0 62vw; width: 62vw; }
}