/* ============================================================
   Use-Case-Seiten — Umsetzung des Figma-Frames
   "Index_Landingpage_FassiBottle" (Datei: Use Case ELS)
   Wird nur von den Use-Case-Seiten geladen; style.css bleibt
   unberuehrt. Alle Werte stammen 1:1 aus dem Figma-Frame,
   Referenzbreite 1440px.
   ============================================================ */

/* Open Sans wird in style.css geladen (site-weit). */

/* --- Tokens aus dem Figma-Frame --------------------------- */
.use-case {
  --uc-dunkelblau: var(--primary);
  --uc-mittelblau: var(--accent);
  --uc-hellblau:   var(--accent-light);
  --uc-eisblau:    #D6F0FA;
  --uc-grau:       var(--border);
  --uc-grau-flaeche: rgba(224, 224, 224, 0.4);
  --uc-weiss:      #FFFFFF;

  --uc-font: var(--font);
  --uc-maxw: 1190px;      /* 1440 - 2x125 Rand aus Figma */
  --uc-gutter: 1.5rem;    /* wie style.css auf schmalen Viewports */
  --uc-radius: 10px;

  font-family: var(--uc-font);
  color: var(--uc-dunkelblau);
}

.use-case .uc-container {
  max-width: calc(var(--uc-maxw) + 2 * var(--uc-gutter));
  margin: 0 auto;
  padding: 0 var(--uc-gutter);
}

/* Der Frame definiert eigene Abstaende; die generische
   section-Polsterung aus style.css wuerde sie verdoppeln. */
.use-case .uc-section { padding: 0; }
.use-case .uc-process,
.use-case .uc-applications { padding: 60px 0; }
.use-case .uc-results { padding: 35px 0 60px; }

/* ============================================================
   1. Hero
   ============================================================ */
.uc-hero {
  position: relative;
  min-height: 685px;
  display: flex;
  align-items: center;
  background-image: url('/assets/img/usecase/usecase-hero.webp');
  background-size: cover;
  background-position: center;
  isolation: isolate;
}
.uc-hero::before {          /* Background Shape: Dunkelblau 55 % */
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 58, 93, 0.55);
  z-index: -1;
}
.uc-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 445px) minmax(0, 462px);
  justify-content: space-between;
  align-items: center;
  gap: 2.5rem;
  width: 100%;
}
.uc-hero__title {
  margin: 0 0 17px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.37;
  color: var(--uc-weiss);
}
.uc-hero__cta {
  display: inline-block;
  min-width: 203px;
  padding: 12px 31px;
  border-radius: 5px;
  background: var(--uc-dunkelblau);
  color: var(--uc-weiss);
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  text-align: center;
  transition: background-color 0.15s;
}
.uc-hero__cta:hover { background: #002b45; color: var(--uc-weiss); text-decoration: none; }

/* Story-Karte */
.uc-story {
  padding: 16px 21px;
  border-radius: var(--uc-radius);
  background: var(--uc-weiss);
}
.uc-story__tag {
  display: inline-block;
  margin: 0 0 20px;
  padding: 4px 18px;
  border-radius: 5px;
  background: var(--uc-dunkelblau);
  color: var(--uc-weiss);
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
}
.uc-story__text {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--uc-dunkelblau);
}

/* ============================================================
   2. Eckdaten-Karten (Branche / Material / Verfahren)
   ============================================================ */
.uc-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding-top: 60px;
  padding-bottom: 60px;
}
.uc-fact {
  display: flex;
  align-items: center;
  gap: 29px;
  min-height: 132px;
  padding: 18px 24px;
  border: 2px solid var(--uc-grau);
  border-radius: var(--uc-radius);
  background: var(--uc-grau-flaeche);
}
/* Figma-Textspalte: 184px bestimmen den Zeilenumbruch. Laengere Fachbegriffe
   ragen — wie im Entwurf — in die freie Flaeche rechts daneben. */
.uc-fact__text { width: 190px; }   /* Figma 184px; 6px mehr, damit "PE-HD (Zuckerrohrbasis)"
                                      wie im Entwurf auf eine Zeile passt */
.uc-fact__icon {
  flex: 0 0 auto;
  width: 90px;
  height: 90px;
  color: var(--uc-dunkelblau);
}
.uc-fact__icon svg { width: 100%; height: 100%; display: block; }
.uc-fact__label {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--uc-mittelblau);
}
.uc-fact__value {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.37;
  color: var(--uc-dunkelblau);
}

/* ============================================================
   3. Herausforderung / Loesung — zwei blaue Paneele
   ============================================================ */
.uc-panels {
  display: grid;
  grid-template-columns: 715fr 715fr;
  gap: 11px;                /* 726 - 715 aus Figma */
  align-items: stretch;
  position: relative;
}
.uc-panel {
  position: relative;
  padding: 35px;
  background: var(--uc-mittelblau);
  color: var(--uc-weiss);
}
/* Abweichung vom Frame: dort laufen die Paneele bis an den Rand des
   Artboards. Auf der Website stehen sie buendig im Inhaltsraster, in einer
   Flucht mit Kopfzeile, Eckdaten-Karten und den Abschnitten darunter. */
.uc-panel { border-radius: var(--uc-radius); }
.uc-panel--solution { overflow: hidden; }
.uc-panel__body { max-width: 637px; }
.uc-panel--solution .uc-panel__body { max-width: none; }

.uc-panel__title {
  margin: 0 0 20px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.37;
  color: var(--uc-weiss);
}
.uc-panel__intro {
  margin: 0 0 20px;
  max-width: 637px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.37;
  color: var(--uc-weiss);
}
/* Der Fliesstext endet vor der Flasche. Figma haelt hier 35px Abstand;
   im schmaleren Panel bedeutet das eine Zeile mehr Umbruch. */
.uc-panel--solution .uc-panel__intro { max-width: 72%; }

/* Freigestellte Flasche, ragt oben rechts ins Loesungs-Panel.
   Breite als Anteil des Panels (Figma: 319 von 715 = 45 %), damit das
   Verhaeltnis auch im schmaleren Inhaltsraster stimmt. Die linken 38 % der
   Bilddatei sind transparent — die Flasche selbst nimmt also rund 28 % der
   Panelbreite ein, genau wie im Entwurf. */
.uc-panel__photo {
  position: absolute;
  top: 0;
  right: 0;
  width: 45%;
  height: auto;
  pointer-events: none;
}

/* Liste der Punkte (beide Paneele) */
.uc-steps { list-style: none; margin: 0; padding: 0; }
.uc-steps--challenge { display: grid; gap: 40px; max-width: 420px; }

/* Loesung: durchgehende hellblaue Linie hinter den Icons */
.uc-steps--solution {
  position: relative;
  display: grid;
  gap: 40px;
  max-width: 500px;
}
.uc-steps--solution::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 17px;
  bottom: 17px;
  width: 3px;
  background: var(--uc-hellblau);
}
.uc-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
}
.uc-step__icon { flex: 0 0 auto; display: block; }
.uc-steps--challenge .uc-step__icon { width: 40px; height: 40px; color: var(--uc-hellblau); }
.uc-steps--solution  .uc-step__icon { width: 35px; height: 35px; }
.uc-step__icon svg { width: 100%; height: 100%; display: block; }
.uc-step__title {
  display: block;
  margin: 0 0 5px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.37;
  color: var(--uc-weiss);
}
.uc-step__text {
  display: block;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.37;
  color: var(--uc-weiss);
}

/* ============================================================
   4. Der Prozess in Bildern
   ============================================================ */
.uc-subheader {
  margin: 0 0 20px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.37;
  color: var(--uc-mittelblau);
}
.uc-process__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.uc-process__item { display: grid; gap: 15px; align-content: start; }
.uc-process__item img {
  width: 100%;
  height: 148px;
  object-fit: cover;
  border-radius: var(--uc-radius);
}
.uc-process__caption {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.37;
  color: var(--uc-dunkelblau);
}

/* ============================================================
   5. Die Ergebnisse
   ============================================================ */
.uc-results {
  background: var(--uc-grau-flaeche);
}
.uc-results__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 57px;
  margin-top: 20px;
}
.uc-result { display: grid; justify-items: center; gap: 20px; align-content: start; }
.uc-result__icon {
  width: 150px;
  height: 150px;
  display: grid;
  place-items: center;
  color: var(--uc-dunkelblau);
}
.uc-result__icon svg { width: 100%; height: 100%; display: block; }
.uc-result__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.37;
  text-align: center;
  color: var(--uc-dunkelblau);
}
.uc-result__text {
  margin: -5px 0 0;          /* Figma: 25px Abstand Titel -> Text */
  font-size: 16px;
  font-weight: 400;
  line-height: 1.37;
  color: var(--uc-dunkelblau);
}

/* ============================================================
   6. Uebertragbare Anwendungen
   ============================================================ */
.uc-applications__intro {
  margin: 0 0 20px;
  max-width: 786px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.37;
  color: var(--uc-dunkelblau);
}
.uc-applications__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.uc-application {
  display: grid;
  place-items: center;
  min-height: 61px;
  padding: 12px 20px;
  border-radius: var(--uc-radius);
  background: var(--uc-dunkelblau);
  color: var(--uc-weiss);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.37;
  text-transform: uppercase;
  text-align: center;
}

/* ============================================================
   7. Abschluss-Banner
   ============================================================ */
.uc-cta {
  position: relative;
  background: var(--uc-mittelblau);
  color: var(--uc-weiss);
  overflow: hidden;
}
/* Das Element traegt auch .uc-container — dessen `padding: 0 <gutter>` wuerde
   die Polsterung oben und unten wegkuerzen. Deshalb hier mit derselben
   Spezifitaet und als Kurzform, sonst steht das Banner auf schmalen
   Viewports ohne Luft. */
.use-case .uc-cta__inner {
  display: grid;
  grid-template-columns: 279px minmax(0, 746px);
  align-items: center;
  gap: 0;
  min-height: 370px;
  padding: 50px var(--uc-gutter);
}
/* Figma: Banner 370px hoch, die Flasche reicht von 21px unter der Oberkante
   bis an die Unterkante. Die negativen Aussenabstaende heben die Polsterung
   des Banners auf, damit das Bild die Bannerhoehe nicht aufblaeht. */
.uc-cta__photo {
  align-self: end;
  width: 167px;
  height: auto;
  margin: -29px 0 -50px;
  filter: drop-shadow(6px -4px 4px rgba(0, 0, 0, 0.05));
}
.uc-cta__title {
  margin: 0 0 30px;
  font-size: 35px;
  font-weight: 600;
  line-height: 1.37;
  color: var(--uc-weiss);
}
.uc-cta__text {
  margin: 0 0 50px;
  max-width: 678px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.37;
  color: var(--uc-weiss);
}
.uc-cta__button {
  display: inline-block;
  min-width: 246px;
  padding: 16px 30px;
  border-radius: var(--uc-radius);
  background: var(--uc-dunkelblau);
  box-shadow: 6px -4px 4px 0 rgba(0, 0, 0, 0.05);
  color: var(--uc-weiss);
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  text-align: center;
  transition: background-color 0.15s;
}
.uc-cta__button:hover { background: #002b45; color: var(--uc-weiss); text-decoration: none; }

/* ============================================================
   Responsive — Figma liefert nur den 1440er-Desktop-Frame.
   Die Stufen darunter sind aus den Breakpoints der uebrigen
   ELS-Seiten abgeleitet (1024 / 860 / 640).
   ============================================================ */
@media (max-width: 1240px) {
  .uc-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 462px); gap: 2rem; }
  .uc-results__grid { gap: 30px; }
  .use-case .uc-cta__inner { grid-template-columns: 220px minmax(0, 1fr); }
}

@media (max-width: 1024px) {
  .uc-facts { grid-template-columns: 1fr; }
  .uc-fact { min-height: 0; }
  .uc-panels { grid-template-columns: 1fr; gap: 20px; }
  .uc-panel { border-radius: var(--uc-radius); }
  .uc-panel__body, .uc-panel--solution .uc-panel__body,
  .uc-panel__intro, .uc-panel--solution .uc-panel__intro { max-width: none; }
  .uc-steps--challenge, .uc-steps--solution { max-width: none; }
  .uc-panel__photo { width: 34%; opacity: 0.9; }
  .uc-panel--solution .uc-panel__intro { max-width: 78%; }
  .uc-process__grid { grid-template-columns: repeat(2, 1fr); }
  .uc-results__grid { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
}

@media (max-width: 860px) {
  .uc-hero { min-height: 0; padding: 80px 0 48px; }
  .uc-hero__inner { grid-template-columns: 1fr; gap: 28px; }
  .uc-hero__title { font-size: 26px; }
  .uc-applications__grid { grid-template-columns: repeat(2, 1fr); }
  .use-case .uc-cta__inner { grid-template-columns: 1fr; justify-items: start; gap: 28px;
                             min-height: 0; padding: 56px var(--uc-gutter); }
  .uc-cta__photo { display: none; }   /* Figma: Bild bleibt am linken Rand — gestapelt traegt es nichts bei */
  .uc-cta__title { font-size: 28px; }
}

@media (max-width: 640px) {
  .uc-facts { padding-top: 40px; padding-bottom: 40px; }
  .use-case .uc-process,
  .use-case .uc-applications { padding: 40px 0; }
  .use-case .uc-results { padding: 28px 0 40px; }
  /* Einspaltig stehen Symbol und Text mittig — wie bei "Die Ergebnisse". */
  .uc-fact { flex-direction: column; align-items: center; gap: 16px; text-align: center; }
  .uc-fact__icon { width: 72px; height: 72px; }
  .uc-fact__text { width: auto; }
  .uc-panel { padding: 24px; }
  .uc-panel__photo { display: none; }
  .uc-process__grid { grid-template-columns: 1fr; }
  .uc-results__grid { grid-template-columns: 1fr; }
  /* Einspaltig bleiben Symbol, Titel und Text mittig — wie im Entwurf.
     Der Fliesstext steht dabei ebenfalls zentriert, sonst haengt er
     unter dem mittigen Symbol sichtbar schief. */
  .uc-result__text { text-align: center; max-width: 34ch; }
  .uc-applications__grid { grid-template-columns: 1fr; }
  .uc-cta__title { font-size: 24px; }
  .use-case .uc-cta__inner { padding: 48px var(--uc-gutter); }
  .uc-cta__button { width: 100%; }
}