/* ============================================================
   ueber-uns.html — Unterseiten-Sektionen „Petrol-Licht"
   Ergänzt assets/css/main.css (Tokens, Kopf, Hero, Finale liegen dort).
   Copy ist freigegeben und fest: 1:1 aus ueber-uns.astro.
   ============================================================ */

/* ---------- Unterseiten-Held: die Haltung als Monument ----------
   Welle 69, Jonas' Urteil zum Vorgänger: „zu langweilig". Der Held trug nur
   Kicker, eine gleichförmig gesetzte H1 und einen Lead auf leerer weißer
   Fläche — auf einer Seite, die von Haltung handelt, war das eine Behauptung
   ohne Auftritt.

   Die Wucht kommt jetzt aus zwei Quellen und bewusst NICHT aus einem Foto
   oder Zahlen: Das Teamfoto steht unmittelbar danach in voller Breite
   (Dublette), und 35/300/5-in-30 stehen bereits im Finale derselben Seite.
   1. Hierarchie im H1: „System statt Zufall." wird zur Monumentalzeile,
      der Nachsatz fällt auf Fließtextgröße zurück. Vorher war beides gleich
      groß, dadurch war nichts betont und der Satz endete im Waisenwort
      „Wachstumssysteme.".
   2. Mehr Licht: zweiter Orb plus ein diagonaler Lichtschacht geben der
      weißen Bühne Tiefe.
   Das Fächer-Band unten setzt den Held auf ein Fundament, ohne den Lead zu
   wiederholen (der nennt die vier Gewerke seit Welle 69 nicht mehr). */

.unterheld {
  padding-bottom: clamp(40px, 6vh, 72px);
}

.unterheld .hero-lead { margin-bottom: 0; }

.unterheld-haltung {
  padding-bottom: clamp(54px, 8vh, 98px);
}

.unterheld-haltung h1 {
  display: grid;
  gap: clamp(15px, 2vw, 26px);
  margin-bottom: clamp(26px, 3.4vh, 38px);
}

.hh-gross {
  /* groesser als --fs-hero (5.5rem), bleibt unter dem 6rem-Deckel */
  font-size: clamp(3.1rem, 8.2vw, 6rem);
  line-height: 0.94;
  letter-spacing: -0.038em;
  max-width: 14ch;
}

/* Tinte statt Grau: der Nachsatz gehoert sichtbar zur Headline. Waere er
   --ink-soft, saehe er aus wie ein zweiter Lead und die Stufe verschwaende. */
.hh-klein {
  font-family: var(--f-body);
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  font-weight: 500;
  line-height: 1.36;
  letter-spacing: -0.008em;
  color: var(--ink);
  max-width: 30ch;
  text-wrap: balance;
}

.unterheld-haltung .hero-lead { margin-bottom: clamp(28px, 3.6vh, 40px); }

/* Zweite Lichtquelle: diagonaler Schacht von oben rechts. Ohne ihn ist die
   rechte Haelfte des Helds eine leere weisse Flaeche. */
.unterheld-haltung .hero-licht::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(203deg,
    rgba(103, 205, 198, 0.34) 0%,
    rgba(70, 184, 177, 0.16) 18%,
    rgba(14, 94, 99, 0.06) 38%,
    transparent 62%);
}

/* Das Fundament: die vier Gewerke als Faecher, der Schluss ohne Rahmen,
   damit es keine Reihe formgleicher Chips wird. */
.haltung-faecher {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(9px, 1.2vw, 14px);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: clamp(0.88rem, 1.02vw, 0.98rem);
}

.haltung-faecher li {
  padding: 8px 16px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  font-weight: 600;
  color: var(--petrol);
}

.haltung-faecher .hf-haus {
  padding: 8px 2px;
  border: 0;
  background: none;
  font-weight: 500;
  color: var(--ink-leise);
}

/* ---------- Teamfoto: getönte Bühne, ein großes Bild ---------- */

.team-foto {
  background:
    radial-gradient(760px 380px at 88% 0%, rgba(103, 205, 198, 0.14), transparent 62%),
    var(--bg-tint);
  padding-block: clamp(60px, 8.5vh, 108px);
}

.team-foto h2 {
  font-size: var(--fs-h2);
  max-width: 18ch;
  margin-bottom: clamp(28px, 4vh, 48px);
}

/* ---------- Die Haltung: großes Statement statt Karten-Grid ---------- */

.haltung-sektion {
  background: var(--bg);
  padding-block: clamp(60px, 8.5vh, 108px);
}

.haltung-sektion > .wrap > h2 {
  font-size: var(--fs-h2);
  max-width: 16ch;
  margin-bottom: clamp(44px, 6vh, 76px);
}

.statement-block {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  margin-bottom: clamp(52px, 7.5vh, 96px);
}

.statement {
  position: relative;
  margin: 0;
  padding-top: clamp(28px, 3.5vw, 48px);
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 3.6vw, 3.1rem);
  line-height: 1.16;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}

/* Großes Anführungszeichen statt Side-Stripe-Border: edel über Weißraum,
   nicht über eine Kante. */
.statement::before {
  content: '\201C';
  position: absolute;
  top: -0.32em;
  left: -0.04em;
  font-size: 2.6em;
  line-height: 1;
  color: var(--petrol);
  opacity: 0.16;
}

.statement em {
  font-style: normal;
  color: var(--petrol);
}

.statement-context {
  display: grid;
  gap: 20px;
}

.statement-context p {
  max-width: 46ch;
  color: var(--ink-soft);
  line-height: 1.65;
}

.prinzipien {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 64px);
}

.prinzipien li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(16px, 1.8vw, 24px);
  align-items: start;
  padding-top: clamp(20px, 2.4vw, 30px);
  border-top: 1px solid var(--linie);
}

.p-num {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 2.8vw, 2.5rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--petrol);
  font-variant-numeric: tabular-nums;
}

.prinzipien h3 {
  font-size: 1.15rem;
  margin-bottom: 8px;
}

.prinzipien p {
  color: var(--ink-soft);
  font-size: 0.98rem;
  max-width: 44ch;
  line-height: 1.6;
}

/* ---------- Die Gründer: getönte Bühne, echte Porträts ---------- */

.gruender {
  background:
    radial-gradient(720px 380px at 8% 100%, rgba(103, 205, 198, 0.14), transparent 60%),
    var(--bg-tint);
  padding-block: clamp(60px, 8.5vh, 108px);
}

.gruender h2 {
  font-size: var(--fs-h2);
  max-width: 14ch;
  margin-bottom: clamp(36px, 5vh, 60px);
}

.gruender-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
}

.gruender-karte {
  display: grid;
  gap: 4px;
  align-content: start;
}

.gruender-bild {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  margin-bottom: 22px;
  box-shadow: var(--karte-schatten);
}

.gruender-bild img {
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.gruender-karte:hover .gruender-bild img { transform: scale(1.04); }

.gruender-karte h3 {
  font-size: 1.3rem;
}

.gruender-rolle {
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--petrol);
  margin-top: 2px;
}

.gruender-karte p {
  margin-top: 12px;
  color: var(--ink-soft);
  max-width: 44ch;
  line-height: 1.6;
}

/* ---------- Das Studio: weiße Bühne, asymmetrische Collage ---------- */

.studio-einblick {
  background: var(--bg);
  padding-block: clamp(60px, 8.5vh, 108px);
}

.studio-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}

.studio-copy {
  display: grid;
  gap: 20px;
}

.studio-copy h2 {
  font-size: var(--fs-h2);
  max-width: 15ch;
}

.studio-copy p {
  color: var(--ink-soft);
  max-width: 48ch;
  line-height: 1.65;
}

/* Bewusst kein gleichmäßiges Raster: großes Hauptbild, drei versetzte
   Nebenbilder unterschiedlicher Größe. */
.studio-collage {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
}

.studio-collage figure {
  margin: 0;
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--karte-schatten);
}

.studio-collage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.studio-collage figure:hover img { transform: scale(1.05); }

.bild-haupt {
  grid-column: 1 / 5;
  grid-row: 1 / 3;
  aspect-ratio: 4 / 3;
}

.bild-a {
  grid-column: 5 / 7;
  grid-row: 1 / 2;
  aspect-ratio: 1 / 1;
}

.bild-b {
  grid-column: 5 / 7;
  grid-row: 2 / 3;
  aspect-ratio: 1 / 1;
  margin-top: clamp(14px, 2vw, 22px);
}

.bild-c {
  grid-column: 1 / 7;
  grid-row: 3 / 4;
  aspect-ratio: 21 / 9;
  margin-top: clamp(4px, 1vw, 10px);
}

.bild-haupt figcaption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(6, 23, 25, 0.62);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 500;
}

/* ---------- Standort: getönte Bühne, eingelassene Karte ---------- */

.standort-sektion {
  background: var(--bg-tint);
  padding-block: clamp(60px, 8.5vh, 108px);
}

.standort-karte {
  background: #ffffff;
  border: 1px solid var(--linie);
  border-radius: 24px;
  padding: clamp(32px, 4.5vw, 56px);
  box-shadow: 0 1px 2px rgba(11, 27, 29, 0.04), 0 18px 48px rgba(14, 94, 99, 0.07);
}

.standort-karte h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  max-width: 26ch;
  margin-bottom: 16px;
}

.standort-karte p {
  color: var(--ink-soft);
  max-width: 62ch;
  line-height: 1.65;
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  .studio-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .statement-block { grid-template-columns: minmax(0, 1fr); }
  .statement-block { gap: clamp(24px, 5vw, 40px); }
}

@media (max-width: 720px) {
  .gruender-grid { grid-template-columns: minmax(0, 1fr); }

  .studio-collage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bild-haupt { grid-column: 1 / 3; grid-row: 1 / 2; aspect-ratio: 16 / 9; }
  .bild-a { grid-column: 1 / 2; grid-row: 2 / 3; aspect-ratio: 4 / 3; margin-top: 0; }
  .bild-b { grid-column: 2 / 3; grid-row: 2 / 3; aspect-ratio: 4 / 3; margin-top: clamp(16px, 4vw, 24px); }
  .bild-c { grid-column: 1 / 3; grid-row: 3 / 4; aspect-ratio: 16 / 9; }
}

@media (max-width: 620px) {
  .prinzipien { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Das Team: vier Köpfe als Einzelkarten (Welle 5) ---------- */

.mannschaft {
  background:
    radial-gradient(900px 460px at 50% 0%, rgba(103, 205, 198, 0.12), transparent 65%),
    var(--bg-tint);
  padding-block: clamp(64px, 9vh, 116px);
}

.mannschaft h2 {
  font-size: var(--fs-h2);
  margin-bottom: clamp(32px, 5vh, 52px);
}

.mannschaft-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(20px, 2.8vw, 36px);
  align-items: start;
}

.kopf-karte {
  position: relative;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfdfd 100%) padding-box,
    linear-gradient(160deg, rgba(14, 94, 99, 0.2), rgba(255, 255, 255, 0.9) 40%, rgba(103, 205, 198, 0.3)) border-box;
  border: 1px solid transparent;
  border-radius: 26px;
  padding: clamp(30px, 3vw, 38px) clamp(22px, 2.4vw, 30px) 28px;
  box-shadow:
    0 2px 6px rgba(11, 27, 29, 0.04),
    0 30px 70px rgba(14, 94, 99, 0.13);
  text-align: center;
  transition: box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.kopf-karte:hover {
  box-shadow:
    0 2px 6px rgba(11, 27, 29, 0.05),
    0 42px 96px rgba(14, 94, 99, 0.2);
}

.kopf-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--petrol);
  background: #ffffff;
  border: 1px solid rgba(14, 94, 99, 0.14);
  border-radius: 999px;
  padding: 6px 13px;
  margin-bottom: 20px;
  box-shadow: 0 6px 18px rgba(14, 94, 99, 0.12);
}

.badge-punkt {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--petrol);
}

.kopf-karte::before {
  content: '';
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 3px;
  border-radius: 999px;
  background: var(--shimmer);
  background-size: 200% 100%;
  animation: schimmer-lauf 6s linear infinite;
}

.kopf-karte:nth-child(even) { margin-top: clamp(12px, 2.4vh, 30px); }

.kopf-bild {
  width: clamp(122px, 9vw, 140px);
  height: clamp(122px, 9vw, 140px);
  margin: 6px auto 18px;
  padding: 4px;
  border-radius: 50%;
  background: conic-gradient(from 210deg,
    rgba(14, 94, 99, 0.35), rgba(103, 205, 198, 0.6), rgba(14, 94, 99, 0.1),
    rgba(103, 205, 198, 0.45), rgba(14, 94, 99, 0.35));
  box-shadow: 0 16px 36px rgba(11, 27, 29, 0.18);
}

.kopf-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.kopf-text {
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.6;
}

.kopf-tags {
  list-style: none;
  margin: 16px 0 18px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
}

.kopf-tags li {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--petrol);
  border: 1px solid rgba(14, 94, 99, 0.18);
  border-radius: 999px;
  padding: 4px 11px;
}

.kopf-fuss {
  margin-top: auto;
  border-top: 1px solid rgba(11, 27, 29, 0.08);
  padding-top: 16px;
}

.kopf-fuss h3 {
  font-size: 1.32rem;
  margin-bottom: 4px;
}

.kopf-rolle {
  font-size: 0.85rem;
  color: var(--ink-leise);
}

@media (max-width: 720px) {
  .kopf-karte:nth-child(even) { margin-top: 0; }
}