/* ===========================================================================
   MIRACLEAN Austria – Startseite
   ---------------------------------------------------------------------------
   Wird ausschliesslich von index.html geladen. Alle Klassen tragen das
   Praefix "home-", damit Aenderungen hier keine andere Seite beruehren.
   Baut auf tokens.css und style.css auf.

   Aufbau:  1 Hero mit Kennzahlen · 2 Warum MIRACLEAN · 3 Vorteile
            4 Ergebnisse · 5 Gebinde · 6 Vertrauen / Nachweise · 7 Anfrage
   =========================================================================== */

/* --- Gemeinsam -------------------------------------------------------------- */
.home-section { padding-block: var(--sp-8); }
@media (min-width: 900px) { .home-section { padding-block: 7rem; } }

.home-heading {
  font-size: clamp(1.6rem, 3.2vw, 2.5rem);
  max-width: 30ch;
  text-wrap: balance;      /* gleich lange Zeilen statt einzelner Restwoerter */
  hyphens: auto;
  overflow-wrap: break-word;
}

/* --- Block 1: Hero ------------------------------------------------------------
   Navy als Grund, dazu ein dezenter, hellerer Lichtkegel hinter der Flasche.
   Der weiche Lichtschein im PNG der Flasche verschmilzt damit wie ein
   Studio-Gegenlicht. */
.home-hero {
  background:
    radial-gradient(ellipse 50% 62% at 76% 52%, rgba(38, 86, 164, .42) 0%, rgba(38, 86, 164, 0) 72%),
    var(--navy);
  color: #fff;
  overflow: hidden;
}
.home-hero__grid {
  display: grid;
  gap: var(--sp-7);
  align-items: center;
  padding-block: var(--sp-8) var(--sp-7);
}
@media (min-width: 900px) {
  .home-hero__grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    gap: var(--sp-8);
    padding-block: 4.5rem var(--sp-7);
  }
}

.home-hero__eyebrow {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--signal);
}
/* Kurzer, kraftvoller Claim statt einer vierzeiligen Ueberschrift. Die
   Suchbegriffe stehen im Seitentitel, in der Zeile darueber und im Text. */
.home-hero__title {
  font-size: clamp(2.3rem, 6vw, 4.25rem);
  line-height: 1;
  letter-spacing: -.025em;
  margin-bottom: var(--sp-5);
  overflow-wrap: break-word;
}
.home-hero__accent { display: block; color: var(--signal); }
.home-hero__text {
  font-size: var(--fs-lg);
  color: #c9d6ec;
  max-width: 48ch;
  margin-bottom: var(--sp-6);
}
.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
@media (max-width: 479px) { .home-hero__actions .btn { flex: 1 1 100%; } }


/* Zielgruppenzeile: dezent, mit kleinen gelben Punkten als Trenner.
   Die Punkte sind reine Flaechen, damit Screenreader sie nicht vorlesen.
   Sie stehen HINTER jedem Begriff: bricht die Zeile um, endet die erste Zeile
   mit einem Punkt, statt dass die zweite mit einem beginnt. */
.home-hero__audience {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8fa6cc;
}
.home-hero__audience li { margin: 0; display: inline-flex; align-items: center; }
.home-hero__audience li:not(:last-child)::after {
  content: "";
  width: 4px;
  height: 4px;
  margin-inline: .65em;
  background: var(--signal);
  border-radius: 50%;
}

.home-hero__media { justify-self: center; position: relative; }
.home-hero .bottle3d img { max-height: 440px; }
@media (min-width: 900px) {
  .home-hero .bottle3d img { max-height: clamp(380px, calc(100vh - 300px), 560px); }
}

/* --- Kennzahlen unter dem Hero ---------------------------------------------- */
.home-stats {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (min-width: 900px) { .home-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.home-stat {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: var(--sp-1);
  padding: var(--sp-5) var(--sp-4);
  background: rgba(3, 10, 23, .55);
}
@media (min-width: 900px) { .home-stat { padding: var(--sp-5) var(--sp-6); } }
.home-stat dd {
  margin: 0;
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--signal);
  white-space: nowrap;
}
.home-stat__pre, .home-stat__unit { font-size: .5em; font-weight: 800; letter-spacing: 0; }
.home-stat__pre { color: #c9d6ec; margin-right: .15em; }
.home-stat dt { font-size: var(--fs-sm); color: #b9c9e3; line-height: 1.35; }
.home-stats__note {
  margin: var(--sp-3) 0 0;
  padding-bottom: var(--sp-7);
  font-size: var(--fs-xs);
  color: #8fa6cc;
}

/* Kleiner Textlink mit Pfeil */
.home-link {
  display: inline-flex; align-items: center;
  min-height: var(--tap);
  font-weight: 800;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 2px solid var(--signal);
}
.home-link:hover { color: var(--navy-deep); }

/* --- Block 2: Warum MIRACLEAN --------------------------------------------------
   Mobil: Text, dann Bild. Desktop: Bild links, Text rechts – im Wechsel zum
   Hero, der das Bild rechts hat. */
.home-why { background: var(--mist); }
.home-why__grid {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
}
@media (min-width: 900px) {
  .home-why__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
  .home-why__media { order: -1; }
}
.home-why__text p {
  font-size: var(--fs-lg);
  line-height: 1.7;
  color: var(--ink);
  max-width: 54ch;
  margin: 0 0 var(--sp-4);
}
.home-why__text .home-link { margin-top: var(--sp-2); }
.home-why__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* --- Block 3: Wichtigste Vorteile ------------------------------------------------
   Vier klar getrennte Elemente ohne Kartenflaechen – nur Trennlinien und eine
   gelbe Ordnungszahl. Mobil 1, Tablet 2, Desktop 4 Spalten. */
.home-benefits { background: var(--navy); }
.home-benefits .eyebrow { color: var(--signal); }
.home-benefits .home-heading { color: #fff; margin-bottom: var(--sp-6); }
.home-benefits__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--sp-6);
}
@media (min-width: 640px)  { .home-benefits__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .home-benefits__list { grid-template-columns: repeat(4, 1fr); } }

.home-benefit {
  margin: 0;
  padding: var(--sp-5) 0 var(--sp-6);
  border-top: 1px solid rgba(255, 255, 255, .16);
  /* Ordnungszahl, Ueberschrift und Text je Reihe auf gleiche Hoehe bringen,
     auch wenn eine Ueberschrift mehr Zeilen braucht als die anderen.
     Browser ohne Subgrid zeigen die Elemente einfach ohne Ausrichtung. */
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  align-content: start;
}
.home-benefit__num {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--signal);
  margin-bottom: var(--sp-3);
}
.home-benefit h3 {
  font-size: var(--fs-lg);
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--sp-2);
  hyphens: auto;
}
.home-benefit p { margin: 0; color: #b9c9e3; }

/* --- Block 4: Ergebnisse / Vorher-Nachher ----------------------------------------
   Das Bild ist das zentrale Element. Mobil in voller Hoehe (quadratisch),
   ab Desktop im Querformat zugeschnitten, damit es breit wirkt, ohne den
   Bildschirm zu sprengen. Der Ausschnitt haelt Haende und Flasche im Bild. */
.home-results { background: var(--mist); }
.home-results__intro { max-width: 64ch; margin-bottom: var(--sp-6); }
.home-results__intro p { font-size: var(--fs-lg); color: var(--ink-muted); margin: 0; }
.home-results__figure { margin: 0; }
.home-results__figure img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
@media (min-width: 900px) {
  .home-results__figure img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: 50% 88%;
  }
}
/* Vermerk "Symbolbild": klein und zurueckhaltend, aber direkt am Bild */
.home-results__figure figcaption {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  text-align: right;
}

/* --- Block 5: Vertrauen / Nachweise -----------------------------------------------
   Bewusst ruhig: helle Flaeche, Trennlinien, kleine Symbole, keine Werbegrafik. */
.home-trust { background: var(--mist); }
/* Block 4 und 5 liegen beide auf Hellgrau. Die feine Linie haelt sie als zwei
   Abschnitte auseinander, statt dass sie zu einer Flaeche verschmelzen. */
.home-results + .home-trust { border-top: 1px solid var(--line); }
.home-trust__list {
  list-style: none;
  margin: var(--sp-6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--sp-6);
}
@media (min-width: 900px) { .home-trust__list { grid-template-columns: repeat(3, 1fr); } }

.home-trust__item {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: var(--tap);
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--line);
  font-size: var(--fs-lg);
  font-weight: 800;
  line-height: 1.3;
  color: var(--navy);
}
.home-trust__icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: var(--navy);
  color: var(--signal);
  border-radius: var(--radius);
}
.home-trust__icon svg { width: 18px; height: 18px; }

.home-trust__item a { color: inherit; text-decoration: none; }
.home-trust__item a:hover { text-decoration: underline; text-underline-offset: 3px; }
.home-trust__item a span[aria-hidden] { margin-left: .3em; }

.home-trust__statement {
  margin: var(--sp-7) 0 0;
  max-width: 60ch;
  padding-left: var(--sp-4);
  border-left: 3px solid var(--signal);
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: var(--ink);
}

/* --- Block 5: Gebinde ---------------------------------------------------------------
   Kompakte Uebersicht der drei Gebinde, die Details stehen auf der Produktseite. */
.home-packs { background: #fff; }
.home-packs__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-3) var(--sp-6);
  margin-bottom: var(--sp-6);
}
.home-packs__head .home-heading { margin-bottom: 0; }
.home-packs__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sp-5);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .home-packs__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.home-pack {
  margin: 0;
  padding: var(--sp-5);
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.home-pack:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.home-pack__media {
  position: relative;
  height: 220px;
  margin-bottom: var(--sp-4);
}
.home-pack__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
}
.home-pack h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.home-pack p { margin: 0; font-size: var(--fs-sm); color: var(--ink-muted); }
.home-packs + .home-trust { border-top: 1px solid var(--line); }

/* --- Block 7: Anfrage ---------------------------------------------------------------- */
.home-cta { background: var(--signal); color: var(--navy-deep); }
.home-cta__grid {
  display: grid; gap: var(--sp-6);
  padding-block: var(--sp-8);
}
@media (min-width: 900px) {
  .home-cta__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; gap: var(--sp-8); }
}
.home-cta__title {
  font-size: clamp(1.6rem, 3.2vw, 2.5rem);
  color: var(--navy-deep);
  text-wrap: balance;
}
.home-cta p { margin: 0; max-width: 56ch; color: var(--navy); font-size: var(--fs-lg); }
.home-cta__actions { display: grid; gap: var(--sp-3); }