/* ---- index.css: Homepage-specific styles ---- */

/* Sticky Footer: <main> wächst über flex:1, der Footer behält seine
   natürliche Höhe und bleibt am unteren Rand statt bei kurzem Inhalt den
   restlichen Viewport zu füllen. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

/* ---- Startseiten-Banner/Hero (zwischen Header und Produkten) -------------
   Dunkler Hero mit schwebenden Kartenbildern (Maus-Parallax, siehe
   js/pages/start.js) und Feature-Komposition (Foto auf eine Karte
   "geklebt"). Eigene, lokal gültige Farb-Variablen statt globaler Tokens,
   da der dunkle Look nur hier gilt (der Rest der Seite bleibt hell). */
.hero {
  --hero-cream: var(--cream);
  --hero-muted: var(--cream);
  position: relative;
  /* Der Header liegt hier position: fixed über dem Hero (siehe global.css
     .site-header + body.has-overlay-header) statt eigenen Platz zu
     beanspruchen - height kann daher die volle 100vh nutzen. */
  height: auto;
  min-height: 100vh;
  padding: 120px 0 110px;
  width: 100%;
  overflow: hidden;
  background: radial-gradient(ellipse at 30% 20%, var(--wine-600) 0%, var(--wine-900) 70%);
  display: flex;
  align-items: center;
}

.hero-cards {
  position: absolute;
  inset: 0;
  z-index: 1;
  perspective: 1000px;
  opacity: 0.68;
  filter: blur(0.5px) brightness(0.88) saturate(0.9);
  /* Rein dekorativ - darf keine Klicks abfangen, auch nicht dort, wo sich
     eine der 19 schwebenden Karten mit dem Scroll-Pfeil überschneidet. */
  pointer-events: none;
}

.card-float {
  position: absolute;
  will-change: transform;
  animation: heroCardFloat 7s ease-in-out infinite;
  /* backwards: zeigt während animation-delay (siehe .card-float--1..19) schon den
     0%-Keyframe (rotate(var(--rot))) statt des ungedrehten Ruhezustands -
     sonst kippen die Karten erst nach Ablauf des Delays sichtbar in ihre
     Rotation. */
  animation-fill-mode: backwards;
}

.card-parallax img {
  width: 100%;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.55));
}

.card-parallax--photo img {
  border-radius: 6%;
}

@keyframes heroCardFloat {
  0%   { transform: translateY(0px) rotate(var(--rot, 0deg)); }
  50%  { transform: translateY(-22px) rotate(calc(var(--rot, 0deg) + 2deg)); }
  100% { transform: translateY(0px) rotate(var(--rot, 0deg)); }
}

/* Position, Grösse, Rotation und Deckkraft/Unschärfe je Karte aus dem
   Design-Vorlage. */
.card-float--1  { left: 62%; top: 8%;   width: 130px; --rot: -12deg; animation-delay: 0s;   opacity: 0.9; }
.card-float--2  { left: 80%; top: 18%;  width: 170px; --rot: 8deg;   animation-delay: 1.1s; opacity: 1; z-index: 4; }
.card-float--3  { left: 48%; top: 55%;  width: 110px; --rot: 15deg;  animation-delay: 2s;   opacity: 0.55; filter: blur(1px); }
.card-float--4  { left: 88%; top: 58%;  width: 150px; --rot: -6deg;  animation-delay: 0.6s; opacity: 0.95; }
.card-float--5  { left: 68%; top: 70%;  width: 100px; --rot: 20deg;  animation-delay: 1.8s; opacity: 0.5; filter: blur(1px); }
.card-float--6  { left: 30%; top: 4%;   width: 90px;  --rot: -18deg; animation-delay: 2.6s; opacity: 0.4; filter: blur(1.5px); }
.card-float--7  { left: 6%;  top: 62%;  width: 95px;  --rot: 10deg;  animation-delay: 1.3s; opacity: 0.35; filter: blur(1.5px); }
.card-float--8  { left: 92%; top: 82%;  width: 120px; --rot: -10deg; animation-delay: 0.3s; opacity: 0.85; }
.card-float--9  { left: 40%; top: 82%;  width: 85px;  --rot: 25deg;  animation-delay: 2.2s; opacity: 0.3; filter: blur(2px); }
.card-float--10 { left: 78%; top: 4%;   width: 80px;  --rot: -22deg; animation-delay: 0.9s; opacity: 0.4; filter: blur(1.5px); }
.card-float--11 { left: 58%; top: 32%;  width: 115px; --rot: -8deg;  animation-delay: 1.5s; opacity: 0.95; z-index: 3; }
.card-float--12 { left: 74%; top: 46%;  width: 95px;  --rot: 14deg;  animation-delay: 0.4s; opacity: 0.5; filter: blur(1px); }
.card-float--13 { left: 4%;  top: 12%;  width: 90px;  --rot: -16deg; animation-delay: 2.4s; opacity: 0.4; filter: blur(1.5px); }
.card-float--14 { left: 86%; top: 30%;  width: 100px; --rot: 10deg;  animation-delay: 1.9s; opacity: 0.55; filter: blur(1px); }
.card-float--15 { left: 22%; top: 86%;  width: 90px;  --rot: -14deg; animation-delay: 0.8s;  opacity: 0.35; filter: blur(1.5px); }
.card-float--16 { left: 96%; top: 60%;  width: 110px; --rot: 6deg;   animation-delay: 1.2s;  opacity: 0.65; filter: blur(0.5px); }
.card-float--17 { left: 12%; top: 38%;  width: 95px;  --rot: 12deg;  animation-delay: 1.7s;  opacity: 0.45; filter: blur(1.5px); }
.card-float--18 { left: 55%; top: 90%;  width: 105px; --rot: -9deg;  animation-delay: 0.5s;  opacity: 0.5;  filter: blur(1px); }
.card-float--19 { left: 34%; top: 20%;  width: 80px;  --rot: 18deg;  animation-delay: 2.1s;  opacity: 0.35; filter: blur(1.5px); }

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg, rgba(45, 9, 13, 0.93) 0%, rgba(45, 9, 13, 0.58) 42%, rgba(45, 9, 13, 0.18) 65%, rgba(45, 9, 13, 0.38) 100%);
  pointer-events: none;
}

/* ---- Feature-Showcase: Foto "geklebt" auf eine Jasskarte ---- */
.feature-showcase {
  position: absolute;
  left: 70%;
  top: 50%;
  z-index: 5;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.feature-item {
  animation: heroFeatureFloat 6s ease-in-out infinite;
}

@keyframes heroFeatureFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

.feature-group {
  position: relative;
  display: inline-block;
}

.feature-card-img {
  display: block;
  height: clamp(280px, 27vw, 380px);
  width: auto;
  border-radius: 6%;
  filter: drop-shadow(0 22px 36px rgba(0, 0, 0, 0.55));
  image-rendering: -webkit-optimize-contrast;
}

.feature-photo-wrap {
  position: absolute;
  top: 64%;
  left: calc(94% + 50px);
  /* Das WebP-Polaroid füllt sein Bild bis zum Rand. Faktor 0.83 gleicht die
     Breite an die Kartengrösse der übrigen Hero-Bilder an (Polaroid = 83 %
     der Bildbreite). */
  width: calc((68% + 60px) * 0.83);
  transform: translate(-50%, -50%) rotate(-8deg);
}

.feature-photo-img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  border-radius: 3%;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.5));
  image-rendering: -webkit-optimize-contrast;
}

.feature-tape {
  position: absolute;
  top: 0;
  left: 50%;
  width: 48%; /* Breite relativ zu .feature-photo-wrap */
  aspect-ratio: 3.2 / 1;
  transform: translate(-50%, -55%) rotate(-4deg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(224, 217, 193, 0.78));
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.22);
  z-index: 2;
}

/* Die Bilder im Hero und in den Abschnitten darunter tragen width/height-
   Attribute (verhindert Layoutsprünge beim Laden). Ohne height:auto würde das
   Höhen-Attribut zusammen mit einer per CSS gesetzten Breite das Bild
   verzerren. :where() hält die Spezifität bei null, damit Klassenregeln mit
   eigener Höhe (z.B. .feature-card-img) weiterhin gewinnen. */
:where(.hero, .home-extra) img {
  height: auto;
}

/* max-width gilt inkl. des seitlichen Paddings (box-sizing: border-box), so
   bleibt die Textspalte schmal. Block-Layout mit Abständen
   statt Flex-Gap, damit Überschrift, Lead und Knopf wie vorgesehen stehen. */
.hero-content {
  position: relative;
  z-index: 3;
  max-width: 880px;
  padding: 0 10vw;
}

.hero-content h1 {
  margin: 0 0 22px;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.12;
  font-weight: 800;
  color: var(--hero-cream);
}

.hero-content .hero-lead {
  margin: 0 0 18px;
  max-width: 760px;
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  line-height: 1.6;
  color: var(--hero-cream);
}

.hero-content .btn-primary {
  margin-top: 14px;
}

.scroll-arrow {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--hero-cream);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  animation: heroScrollBounce 2.2s ease-in-out infinite;
  transition: background 0.2s, border-color 0.2s;
}

@media (hover: hover) and (pointer: fine) {
  .scroll-arrow:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: var(--gold);
  }
}

@keyframes heroScrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(10px); }
}

/* Ab 1101px liegt der Header fix über der Seite (siehe global.css). Ist der
   Hero ausgeblendet (Schritt "Welches Kartenbild?", siehe catalog.js), würde
   der Inhalt sonst unter dem Header beginnen und der Titel wäre verdeckt. */
@media (min-width: 1101px) {
  body.has-overlay-header:has(.home-banner.hidden) .shop-wizard {
    padding-top: 112px;
  }

  /* Auf dem dunklen Hero wäre der rote Standard-Fokusrahmen kaum sichtbar. */
  .hero :focus-visible {
    outline-color: var(--cream);
  }
}

/* Schmalere Viewports: bis 1280px steht das Feature-Bild
   (König-Karte mit Polaroid) über dem Text statt rechts daneben, bis 720px
   werden Bild und Ränder kleiner und der Verlauf läuft von oben nach unten.
   Die schwebenden Karten und der Hero in voller Höhe bleiben auf allen
   Breiten. Unter 1101px liegt der Header nicht über dem Hero (siehe
   global.css), deshalb dort weniger Abstand oben. */
@media (max-width: 1280px) {
  .hero {
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
  }

  .feature-showcase {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    align-self: flex-start;
    margin: 0 0 36px 10vw;
  }

  .feature-card-img {
    height: clamp(200px, 28vw, 300px);
  }
}

@media (max-width: 1100px) {
  .hero {
    padding-top: 64px;
  }
}

@media (max-width: 720px) {
  /* Weniger Karten im Hintergrund (Performance auf Mobile): die unscharfen,
     blassen Karten fallen weg, die scharfen Karten vorne bleiben. */
  .card-float--5,
  .card-float--6,
  .card-float--7,
  .card-float--9,
  .card-float--10,
  .card-float--13,
  .card-float--15,
  .card-float--17,
  .card-float--18,
  .card-float--19 {
    display: none;
  }

  /* Kein Filter auf dem ganzen Kartenbereich: sonst muss der Browser bei jedem
     Frame alle animierten Karten erst in eine Ebene rendern und dann filtern.
     Das leichte Abdunkeln übernimmt eine etwas tiefere Deckkraft. */
  .hero-cards {
    filter: none;
    opacity: 0.6;
  }

  /* Kleinerer Schatten (weniger Weichzeichner pro Karte und Frame) und kein
     zusätzliches blur() auf den drei übrigen Hintergrundkarten. */
  .card-parallax img {
    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.5));
  }

  .card-float--3,
  .card-float--12,
  .card-float--16 {
    filter: none;
  }

  .feature-showcase {
    margin: 0 0 28px 24px;
  }

  .feature-card-img {
    height: clamp(160px, 42vw, 220px);
  }

  .hero-content {
    padding: 0 24px;
    max-width: 100%;
  }

  .hero-overlay {
    background: linear-gradient(180deg, rgba(45, 9, 13, 0.55) 0%, rgba(45, 9, 13, 0.85) 55%, rgba(45, 9, 13, 0.95) 100%);
  }
}

/* ==========================================================================
   Weitere Startseiten-Abschnitte (nach dem Produkt-Wizard, siehe
   view/index.html, .home-extra): Anlässe, Ablauf, Nachhaltigkeit,
   Kundenreferenzen, FAQ. Werte nach der Design-Vorlage. Mobile-first.
   ========================================================================== */
.home-extra {
  flex: none;
}

.section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(64px, 10vw, 100px) clamp(18px, 4vw, 32px);
}

/* Dieser Abschnitt hat 80px statt 100px Abstand. */
.process-section .section-inner {
  padding-top: clamp(56px, 8vw, 80px);
  padding-bottom: clamp(56px, 8vw, 80px);
}

/* Abschnittstitel (h2): Grösse laut Vorlage, zentriert, dunkler Text. */
.section-tag {
  display: block;
  margin: 0 0 24px;
  font-family: var(--font-heading);
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  color: var(--text-dark);
}

/* ---- Anlässe (weinrote Kacheln) ---- */
.occasion {
  background: var(--wine-900);
}

.occasion-grid {
  display: grid;
  grid-template-columns: 1fr;
}

.occasion-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 32px;
  text-align: center;
  background: var(--wine-700);
  transition: background 0.25s ease;
}

.occasion-card:nth-child(even) {
  background: var(--wine-800);
}

.occasion-card:hover {
  background: var(--wine-600);
}

.occasion-icon {
  width: 52px;
  height: 52px;
  margin-bottom: 18px;
  color: var(--gold);
}

.occasion-icon svg {
  width: 100%;
  height: 100%;
}

.occasion-card h3 {
  margin: 0 0 8px;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--cream);
}

.occasion-card p {
  max-width: 300px;
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--cream);
}

.occasion-more {
  margin-top: 14px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gold);
}

@media (min-width: 561px) {
  .occasion-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Schachbrett bei zwei Spalten. */
  .occasion-card:nth-child(4n + 1),
  .occasion-card:nth-child(4n + 4) {
    background: var(--wine-700);
  }

  .occasion-card:nth-child(4n + 2),
  .occasion-card:nth-child(4n + 3) {
    background: var(--wine-800);
  }

  .occasion-card:hover {
    background: var(--wine-600);
  }
}

@media (min-width: 901px) {
  .occasion-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .occasion-card:nth-child(odd) {
    background: var(--wine-700);
  }

  .occasion-card:nth-child(even) {
    background: var(--wine-800);
  }

  .occasion-card:hover {
    background: var(--wine-600);
  }
}

/* ---- So einfach geht's (heller Abschnitt) ----
   Gemeinsame Regeln (Schritte, Icons, Animation) stehen in components.css. */
.process-section {
  background: var(--paper);
}

.process-section h2 {
  margin: 0 0 24px;
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  color: var(--text-dark);
}

.process-step h3 {
  font-weight: 700;
  line-height: 1.3;
}

.process-step p {
  color: var(--text-dark);
}

/* ---- Nachhaltigkeit ---- */
.sustainability {
  position: relative;
  overflow: hidden;
  background: var(--bg-light);
}

.sustainability-image {
  position: relative;
  height: 220px;
  overflow: hidden;
}

/* Das Bild ist höher als sein Rahmen und wird per start.js beim Scrollen
   verschoben (leichter Parallax-Effekt). */
.sustainability-image-img {
  position: absolute;
  left: 0;
  right: 0;
  top: -40%;
  height: 180%;
  background: url('../assets/images/inhalt/nachhaltigkeit-keimling-960w.webp') center / cover no-repeat;
  will-change: transform;
}

.sustainability-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--bg-light) 0%, rgba(248, 248, 248, 0) 70%);
}

.sustainability-inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 24px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}

.sustainability-icon {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.sustainability-text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sustainability h2 {
  margin: 0 0 24px;
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--text-dark);
}

.sustainability p {
  max-width: 640px;
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--text-dark);
}

@media (min-width: 800px) {
  .sustainability-image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 62%;
    height: auto;
  }

  .sustainability-image-img {
    background-image: url('../assets/images/inhalt/nachhaltigkeit-keimling.webp');
  }

  .sustainability-image::after {
    background: linear-gradient(to right, var(--bg-light) 0%, rgba(248, 248, 248, 0.85) 25%, rgba(248, 248, 248, 0) 70%);
  }

  .sustainability-inner {
    flex-direction: row;
    gap: 48px;
    padding: 88px 32px;
    text-align: left;
  }

  .sustainability-icon {
    width: 96px;
    height: 96px;
  }

  .sustainability-text {
    align-items: flex-start;
    max-width: 560px;
  }

  .sustainability p {
    font-size: 1.2rem;
  }
}

/* ---- Kundenreferenzen ---- */
.customers {
  padding-bottom: 100px;
  background: var(--paper);
}

.customers-heading-band {
  padding: 48px 20px 24px;
}

.customers-logobar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0 20px;
}

.customers-logo-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  padding: 16px;
  border: 0;
  border-radius: var(--button-radius);
  cursor: pointer;
  background: #eee;
  transition: background 0.25s ease, opacity 0.25s ease;
}

.customers-logo-btn:nth-child(odd) {
  background: var(--bg-light);
}

/* Die Logos sind weiss (für den dunklen Hintergrund ab 900px); auf dem
   hellen Mobil-Layout werden sie per Filter dunkel dargestellt. */
.customers-logo-btn img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: brightness(0);
  opacity: 0.7;
}

.customers-logo-btn:hover,
.customers-logo-btn.is-active {
  background: rgba(112, 58, 62, 0.14);
}

.customers-logo-btn.is-active img {
  opacity: 1;
}

.customers-panel[hidden] {
  display: none;
}

.customers-media {
  margin-top: 12px;
  padding: 0 20px;
}

.customers-main {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--button-radius);
  cursor: zoom-in;
}

.customers-thumbs {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
}

.customers-thumbs img {
  width: 64px;
  height: 44px;
  object-fit: cover;
  cursor: pointer;
  opacity: 0.5;
  border-radius: var(--button-radius);
  border-bottom: 3px solid transparent;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

.customers-thumbs img.is-active {
  opacity: 1;
  border-bottom-color: var(--wine-600);
}

.customers-info {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 20px 48px;
  text-align: center;
}

.customers-info h3 {
  margin: 0 0 8px;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-dark);
}

.customers-panel-text {
  max-width: 520px;
  margin: 0 auto 14px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-dark);
}

.customers-panel-quote {
  max-width: 520px;
  margin: 0 auto 6px;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--text-dark);
}

.customers-panel-quote-author {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gold-dark);
}

@media (min-width: 900px) {
  .customers {
    padding-bottom: 130px;
    background: var(--wine-800);
  }

  .customers-heading-band {
    padding: 72px 32px 32px;
  }

  .customers .section-tag {
    color: var(--gold);
  }

  .customers-logobar {
    max-width: 640px;
    margin: 0 auto 40px;
    padding: 0;
    gap: 16px;
  }

  .customers-logo-btn,
  .customers-logo-btn:nth-child(odd) {
    background: transparent;
    border-radius: 16px;
    opacity: 0.75;
  }

  .customers-logo-btn img {
    max-width: 70%;
    max-height: 56px;
    filter: none;
    opacity: 1;
  }

  .customers-logo-btn:hover,
  .customers-logo-btn.is-active {
    background: rgba(255, 255, 255, 0.1);
    opacity: 1;
  }

  .customers-logo-btn:focus-visible {
    outline-color: rgba(255, 255, 255, 0.6);
  }

  .customers-showcase {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
  }

  .customers-media {
    margin: 0 0 36px;
    padding: 0;
  }

  /* Desktop: Mosaik aus drei Bildern statt Hauptbild + Vorschau. */
  .customers-main {
    display: none;
  }

  .customers-thumbs {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 220px 220px;
    padding: 0;
  }

  .customers-thumbs img {
    width: 100%;
    height: 100%;
    opacity: 1;
    border-bottom: 0;
    cursor: zoom-in;
  }

  .customers-thumbs img:first-child {
    grid-row: 1 / 3;
  }

  .customers-info {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    column-gap: 48px;
    align-items: start;
    padding: 0;
    text-align: left;
  }

  .customers-info h3 {
    margin: 0 0 8px;
    color: var(--cream);
  }

  .customers-panel-text,
  .customers-panel-quote {
    max-width: none;
    margin-left: 0;
    color: var(--cream);
  }

  .customers-panel-quote {
    margin-bottom: 8px;
  }

  .customers-panel-quote-author {
    color: var(--gold);
  }
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 9, 8, 0.9);
}

.lightbox[hidden] {
  display: none;
}

.lightbox-img {
  max-width: 92vw;
  /* Mobil: oben Platz für «Schliessen», unten für die Pfeile, damit nichts
     das Bild überdeckt. */
  max-height: calc(100vh - 170px);
  max-height: calc(100dvh - 170px);
  border-radius: var(--button-radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
}

.lightbox-close svg,
.lightbox-prev svg,
.lightbox-next svg {
  width: 55%;
  height: 55%;
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
  background: rgba(255, 255, 255, 0.25);
}

.lightbox :focus-visible {
  outline-color: #fff;
}

.lightbox-close {
  top: 22px;
  right: 24px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
}

.lightbox-prev,
.lightbox-next {
  bottom: 28px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}

/* Mobil: Pfeile nebeneinander unter dem Bild. */
.lightbox-prev { left: calc(50% - 56px); }
.lightbox-next { left: calc(50% + 8px); }

/* Ab 601px seitlich neben dem Bild, vertikal mittig. */
@media (min-width: 601px) {
  .lightbox-img {
    max-width: calc(100vw - 200px);
    max-height: 82vh;
  }

  .lightbox-prev,
  .lightbox-next {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }

  .lightbox-prev { left: 20px; }
  .lightbox-next { left: auto; right: 20px; }
}

/* Textlinks in Fliesstext (FAQ-Antworten, Nachhaltigkeit). */
.text-link {
  font-weight: 700;
  color: var(--gold-dark);
}

@media (hover: hover) and (pointer: fine) {
  .text-link:hover {
    color: var(--red);
  }
}

.sustainability-btn {
  margin-top: 22px;
  padding: 14px 34px;
  font-size: 1.05rem;
  white-space: nowrap;
}