/* Textbewertungen als Spalten-Grid (ersetzt den horizontalen Kartenslider
   „Weitere Erfolgsgeschichten"). Markup: scripts/lib/tilda-stories.mjs,
   Inhalte: src/data/stories.ts

   Aufbau: CSS-Spalten in natürlicher (ausgeglichener) Höhe, davor ein
   Clip-Rahmen mit fester Höhe. Dadurch sind alle drei Spalten gleich voll
   und werden unten mitten in den Kacheln abgeschnitten — was das Abblenden
   ins Navy trägt: es sieht aus, als ginge es weiter. Der Rest liegt hinter
   dem Button auf ProvenExpert. */

.lab01-stories {
  background-color: #0f131e;
  padding: 0 20px 72px;
}

.lab01-stories__inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

/* Clip-Rahmen: die feste Höhe gehört hierher, NICHT auf die Spalten selbst.
   Sonst füllt der Browser Spalte für Spalte und schiebt die Kachel, die
   nicht mehr passt, vollständig weiter — es entstünde eine leere Kante. */
.lab01-stories__clip {
  max-height: 1245px;
  overflow: hidden;
}

.lab01-stories__grid {
  columns: 3;
  column-gap: 24px;
}

/* Rahmen-Kacheln wie auf der Karriereseite (rec795163784):
   1px #90dd47, eckig, ohne Fläche — nur der grüne Umriss. */
.lab01-stories__card {
  break-inside: avoid;
  margin: 0 0 24px;
  padding: 26px 28px 24px;
  background: transparent;
  border: 1px solid #90dd47;
  /* Tilda-Seite nutzt durchgehend FuturaPT */
  font-family: 'FuturaPT', 'Futura PT', Arial, sans-serif;
}

.lab01-stories__quote {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.55;
}

.lab01-stories__by {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(144, 221, 71, 0.3);
}

/* Portrait neben dem Namen — eckig wie die Kacheln selbst (CI).
   Quelle der Bilder: scripts/build-portraits.py */
.lab01-stories__photo {
  flex: none;
  width: 38px;
  height: 38px;
  object-fit: cover;
  background: #1d2431;
  border: 1px solid #b7bec9;
}

/* Rückfallebene ohne Portrait: Initialen im grünen Ring */
.lab01-stories__photo--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  border-color: rgba(144, 221, 71, 0.55);
  color: #90dd47;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.lab01-stories__who {
  min-width: 0;
}

.lab01-stories__name {
  display: block;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}

.lab01-stories__role {
  display: block;
  margin-top: 2px;
  color: #90dd47;
  font-size: 13px;
  line-height: 1.3;
}

/* Abblenden nach unten: suggeriert, dass noch mehr Bewertungen folgen */
.lab01-stories__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 220px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(15, 19, 30, 0) 0%, rgba(15, 19, 30, 0.6) 40%, rgba(15, 19, 30, 0.96) 82%, #0f131e 100%);
}

.lab01-stories__more {
  margin-top: 28px;
  text-align: center;
}

.lab01-stories__btn {
  display: inline-block;
  padding: 15px 38px;
  border-radius: 999px;
  background: #90dd47;
  /* Tilda setzt Links in diesem Record auf transparente Schrift
     (Gradient-Überschrift im Block darüber) — hier zurückholen. */
  color: #0f131e;
  -webkit-text-fill-color: #0f131e;
  font-family: 'FuturaPT', 'Futura PT', Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 0 24px rgba(144, 221, 71, 0.35);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.lab01-stories__btn:hover {
  box-shadow: 0 0 34px rgba(144, 221, 71, 0.55);
  transform: translateY(-1px);
}

/* Gleiche Optik wie das ProvenExpert-Band im Hero (#fcfcfc, 16px, weight 500) —
   also auch die Sterne hell, nicht grün. */
.lab01-stories__rating {
  margin: 14px 0 0;
  color: #fcfcfc;
  font-family: 'FuturaPT', 'Futura PT', Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

/* Hier stehen Sterne und Note NEBENeinander (im Hero untereinander). */
.lab01-stories__rating .lab01-badge__stars {
  display: inline;
  margin-right: 8px;
  font-size: inherit;
}

@media screen and (max-width: 1199px) {
  .lab01-stories__grid {
    columns: 2;
  }
}

@media screen and (max-width: 639px) {
  .lab01-stories {
    padding: 0 16px 56px;
  }
  .lab01-stories__grid {
    columns: 1;
  }
  .lab01-stories__clip {
    max-height: 1020px;
  }
  .lab01-stories__card {
    padding: 22px 22px 20px;
  }
  .lab01-stories__fade {
    height: 200px;
  }
  .lab01-stories__btn {
    padding: 14px 30px;
    font-size: 15px;
  }
}

/* ---------------------------------------------------------------------------
   ProvenExpert-Band im Hero (Markup: tilda-stories.mjs -> buildHeroRating)

   Eigener Block im Hero-Artboard statt des früheren Zero-Block-Buttons:
   Der CTA „Jetzt unverbindliches Erstgespräch buchen" endet bei 502px, das
   Logo-Laufband beginnt erst bei ~592px — dazwischen sitzt das Band.
   --------------------------------------------------------------------------- */
.lab01-rating-slot {
  position: absolute;
  top: 518px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  z-index: 60;
}

.lab01-rating {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  text-decoration: none;
  font-family: 'FuturaPT', 'Futura PT', Arial, sans-serif;
}

/* Sterne und Note linksbündig untereinander */
.lab01-rating__text {
  display: block;
  text-align: left;
}

.lab01-badge__stars,
.lab01-badge__line {
  display: block;
  line-height: 1.25;
  color: #fcfcfc;
  -webkit-text-fill-color: #fcfcfc;
  font-size: 16px;
  font-weight: 500;
}

.lab01-badge__stars {
  letter-spacing: 2px;
}

.lab01-avatars {
  display: inline-flex;
  flex: none;
}

.lab01-avatars img {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border: 1px solid #b7bec9;
  background: #1d2431;
  /* dunkler Ring trennt die gestapelten Bilder voneinander */
  box-shadow: 0 0 0 2px #0f131e;
}

/* gestapelt wie hingelegte Karten: überlappend und leicht gegeneinander
   verdreht — eckig bleibt es trotzdem. */
.lab01-avatars img + img {
  margin-left: -10px;
}

.lab01-avatars img:nth-child(1) { transform: rotate(-8deg); }
.lab01-avatars img:nth-child(2) { transform: rotate(5deg); }
.lab01-avatars img:nth-child(3) { transform: rotate(-6deg); }
.lab01-avatars img:nth-child(4) { transform: rotate(7deg); }
.lab01-avatars img:nth-child(5) { transform: rotate(-5deg); }

/* Unter 960px ist der CTA höher (er bricht um), das Band rutscht nach. */
@media screen and (max-width: 959px) {
  .lab01-rating-slot {
    top: 525px;
  }
  .lab01-rating {
    gap: 15px;
  }
  .lab01-avatars img {
    width: 27px;
    height: 27px;
  }
  .lab01-badge__stars,
  .lab01-badge__line {
    font-size: 14px;
  }
}

@media screen and (max-width: 639px) {
  .lab01-rating-slot {
    padding: 0 12px;
  }
}

/* Unter 360px ist der Hero-Artboard kürzer getaktet (638 statt 747) und der
   CTA sitzt höher — sonst liefe das Band ins Logo-Laufband. Ein Portrait
   weniger, weil die Zeile sonst randlos wird. */
@media screen and (max-width: 359px) {
  .lab01-rating-slot {
    top: 450px;
  }
  .lab01-avatars img:nth-child(n + 5) {
    display: none;
  }
}