/* ===========================================================================
   nachhaltigkeit.css — Benker WP-Theme
   HANDGESCHRIEBEN. Eigene Datei, damit eine Neuextraktion von components.css
   diese Regeln nicht ueberschreibt.

   Deckt die Nachhaltigkeitsseite ab (page-nachhaltigkeit.php, Figma 378:4291):
   zentrierte Aussage, interaktive Circular-Thinking-Grafik (SVG-Kreis mit vier
   Segmenten), zweispaltiger Textabschnitt und ein Bild-Banner mit Headline.
   =========================================================================== */

/* --- Zentrierte Aussage unter dem Hero ------------------------------------ */
.nh-statement {
  padding-top: var(--space-8);
  padding-bottom: calc(var(--space-8) + var(--space-4));
}

.nh-statement__text {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
  font-family: var(--font-heading);
  font-size: var(--fs-heading-m, 32px);
  line-height: var(--lh-heading-m, 1.15);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

/* --- Abschnitt: Circular Thinking ---------------------------------------- */
/* Abgesetzt von den weissen Abschnitten: helles Band #F9FAFC (Figma). */
.cthink {
  background: #f9fafc;
  padding-top: calc(var(--space-8) + var(--space-4));
  padding-bottom: calc(var(--space-8) + var(--space-4));
}

.cthink__grid {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  gap: 96px;
  align-items: center;
}

.cthink__eyebrow {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-heading-5xs, 14px);
  color: var(--color-accent);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-3);
}

.cthink__title {
  font-family: var(--font-heading);
  font-size: var(--fs-heading-l, 36px);
  line-height: var(--lh-heading-l, 1.1);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  margin-bottom: var(--space-5);
}

.cthink__body {
  font-family: var(--font-body);
  font-size: var(--fs-body-m, 16px);
  line-height: 1.5;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

/* Interaktive Grafik: Kreis links, aktive Stichpunkte rechts. */
.cthink__graphic {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-7);
  align-items: center;
}

/* Das Rad: 2x2-Raster aus vier Viertelkreisen (border-radius am Ausseneck). */
.cthink__wheel {
  position: relative;
  width: 320px;
  height: 320px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 6px;
}

.cthink__seg {
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  font-size: 15px;
  line-height: 1.15;
  text-align: center;
  overflow-wrap: anywhere;
  hyphens: auto;
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}

.cthink__seg-label { padding: 0 14%; }

/* "Klimakompensation" ist lang; das Label etwas Richtung Kreismitte ruecken
   (nach rechts/oben), damit es nicht am linken Rand des Kreises klebt. */
.cthink__seg--klima .cthink__seg-label {
  transform: translate(11%, -6%);
}

.cthink__seg--produktion  { background: #57b07a; border-radius: 100% 0 0 0; transform-origin: bottom right; }
.cthink__seg--umfeld      { background: #2f9159; border-radius: 0 100% 0 0; transform-origin: bottom left; }
.cthink__seg--klima       { background: #3f9d6b; border-radius: 0 0 0 100%; transform-origin: top right; }
.cthink__seg--mitarbeiter { background: #2f9159; border-radius: 0 0 100% 0; transform-origin: top left; }

.cthink__seg:hover,
.cthink__seg:focus-visible { outline: none; filter: brightness(1.06); }

.cthink__seg.is-active {
  background: var(--color-accent);
  transform: scale(1.07);
  box-shadow: 0 12px 32px rgba(0, 91, 168, 0.28);
  z-index: 2;
}

/* Nabe: ruhiger Kern mit Kreislauf-Zeichen, dezente Idle-Rotation. */
.cthink__hub {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 88px;
  height: 88px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--color-neutral-100, #fff);
  box-shadow: 0 6px 22px rgba(8, 8, 8, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  color: var(--color-accent);
}

.cthink__hub svg {
  width: 42px;
  height: 42px;
  animation: cthink-spin 16s linear infinite;
}

@keyframes cthink-spin {
  to { transform: rotate(360deg); }
}

/* Stichpunkte rechts: je Segment ein Panel, nur das aktive ist sichtbar. */
.cthink__panels { position: relative; }

.cthink__panel {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  inset: 0;
  transition: opacity 0.25s ease;
}

.cthink__panel.is-active {
  opacity: 1;
  visibility: visible;
  position: relative;
}

.cthink__panel-title {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-heading-xs, 20px);
  color: var(--color-accent);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-3);
}

.cthink__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }

.cthink__list li {
  position: relative;
  padding-left: 22px;
  font-family: var(--font-body);
  font-size: var(--fs-body-m, 16px);
  line-height: 1.4;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

.cthink__list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
}

.cthink__hint {
  font-family: var(--font-body);
  font-size: var(--fs-body-s, 14px);
  color: var(--color-text-muted, #526075);
  margin-top: var(--space-4);
}

@media (prefers-reduced-motion: reduce) {
  .cthink__hub svg { animation: none; }
  .cthink__seg,
  .cthink__panel { transition: none; }
}

/* --- Zweispaltiger Textabschnitt ------------------------------------------ */
.nh-zwei { padding-top: calc(var(--space-8) + var(--space-4)); padding-bottom: calc(var(--space-8) + var(--space-4)); }

.nh-zwei__grid {
  display: grid;
  grid-template-columns: minmax(0, 740px) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}

.nh-zwei__eyebrow {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-heading-5xs, 14px);
  color: var(--color-accent);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-3);
}

.nh-zwei__title {
  font-family: var(--font-heading);
  font-size: var(--fs-heading-l, 36px);
  line-height: var(--lh-heading-l, 1.1);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

.nh-zwei__body { display: flex; flex-direction: column; gap: var(--space-4); }

.nh-zwei__body p {
  font-family: var(--font-body);
  font-size: var(--fs-body-m, 16px);
  line-height: 1.5;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

/* --- Bild-Banner mit Headline --------------------------------------------- */
.nh-banner-wrap {
  padding-top: calc(var(--space-8) + var(--space-4));
  padding-bottom: calc(var(--space-8) + var(--space-4));
}

.nh-banner {
  position: relative;
  min-height: 340px;
  display: flex;
  align-items: flex-end;
  padding: var(--space-7) var(--space-8);
  border-radius: var(--radius-image);
  overflow: hidden;
  isolation: isolate;
}

.nh-banner__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.nh-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(85deg, rgba(0, 0, 0, 0.5) 25%, rgba(0, 0, 0, 0.05) 100%);
  z-index: -1;
}

.nh-banner__headline {
  max-width: 560px;
  font-family: var(--font-heading);
  font-size: var(--fs-heading-l, 36px);
  line-height: var(--lh-heading-l, 1.1);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-tight);
  color: #fff;
}

/* --- Responsiv ------------------------------------------------------------
   Grenze bei 1200px, NICHT 900 (Tablet-Audit 23.07.2026): Zwischen 901 und
   1200px blieben die Zweispalter aktiv — die linke Spalte (Kreis 320px bzw.
   Text 740px) liess der rechten aber nur noch einen schmalen Streifen, die
   Stichpunkte neben dem interaktiven Rad brachen in Ein-Wort-Zeilen. Bis
   1200px stapeln die Abschnitte deshalb wie mobil (Rad zentriert, Panels
   darunter). */
@media (max-width: 1200px) {
  .cthink__grid,
  .nh-zwei__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .cthink__graphic { grid-template-columns: 1fr; justify-items: center; gap: var(--space-5); }
  .cthink__wheel { width: 280px; height: 280px; }
  .cthink__panels { width: 100%; text-align: center; }
  .cthink__panel { position: relative; }
  .cthink__panel:not(.is-active) { display: none; }
  /* Erlaeuterungen unter dem Kreis zentriert; die Liste als zentrierter Block,
     die Punkte darin linksbuendig, damit die Aufzaehlung lesbar bleibt. */
  .cthink__list { width: fit-content; max-width: 100%; margin-inline: auto; text-align: left; }
  .nh-statement__text { font-size: var(--fs-heading-s, 26px); }
}