/* ============================================================
   seite-zusammenarbeit.css — Unterseite „Zusammenarbeit"
   Nutzt main.css-Tokens und -Klassen (.hero, .naht, .garantie, .schritte,
   .faq, .finale ...). Hier nur, was die homepage-CSS nicht schon liefert:
   Unterseiten-Held-Feintuning, die drei Stufen, Garantie-Bedingungen,
   die Anforderungen-Ledger.
   ============================================================ */

/* ---------- Unterseiten-Held: hero-grid + schwebende Bildkarte ---------- */

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

.unterheld .wrap {
  position: relative;
  z-index: var(--z-inhalt);
}

/* Kleiner als die main.css-Held-Größe: neben der Bildkarte ist die Spalte
   schmaler, und „Ausbaustufen." ist als längstes Wort sonst breiter als die
   Spalte und läuft unters Bild. Der obere Deckel ist niedriger als bei
   seite-mitarbeitergewinnung (4.5rem), weil der wrap ab ~1300px nicht mehr
   mitwächst, die Schrift per vw aber schon: gemessen 3.8rem = 43px Puffer
   bei 1440px, 4.5rem lief dort 61px heraus. */
.unterheld h1 {
  max-width: 20ch;
  font-size: clamp(2.5rem, 5vw, 3.8rem);
}

.unterheld .hero-lead {
  max-width: 34rem;
}

/* .beweis-foto liegt absolut in der Spalte, die Spalte braucht darum eine
   eigene Höhe (3:2 aus main.css bei max. 430px Breite = 287px). */
.unterheld .hero-beweis { min-height: 300px; }

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

/* ---------- Die drei Stufen ---------- */

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

.stufen-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
  padding-top: 28px;
}

.stufe {
  position: relative;
  display: grid;
  gap: 18px;
  align-content: start;
}

.stufe:not(.stufe-hoch) {
  padding: clamp(26px, 2.6vw, 38px) clamp(2px, 0.8vw, 12px) 0;
  border-top: 1px solid var(--linie);
  transition: border-color 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.stufe:not(.stufe-hoch):hover {
  border-top-color: var(--petrol);
}

.stufe.stufe-hoch {
  margin-top: -28px;
  padding: clamp(30px, 3vw, 46px) clamp(26px, 2.6vw, 40px) clamp(32px, 3.2vw, 44px);
  border-radius: 24px;
  background: linear-gradient(160deg, var(--petrol-hell), var(--petrol) 55%, var(--petrol-tief));
  color: #ffffff;
  box-shadow: 0 24px 64px rgba(14, 94, 99, 0.35);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.stufe.stufe-hoch:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 76px rgba(14, 94, 99, 0.45);
}

.stufe-badge {
  position: absolute;
  top: -14px;
  left: clamp(24px, 2.4vw, 38px);
  padding: 7px 16px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--petrol-tief);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 8px 20px -8px rgba(14, 94, 99, 0.5);
}

.stufe-kopf {
  display: grid;
  gap: 4px;
  margin-bottom: 2px;
}

.stufe-kicker {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--petrol);
}

.stufe.stufe-hoch .stufe-kicker {
  color: rgba(255, 255, 255, 0.72);
}

.stufe-ziffer {
  display: block;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(3rem, 4.6vw, 4.6rem);
  line-height: 0.85;
  color: var(--petrol);
  font-variant-numeric: tabular-nums;
}

.stufe.stufe-hoch .stufe-ziffer {
  color: #ffffff;
}

.stufe-name {
  font-size: clamp(1.5rem, 2vw, 1.9rem);
  color: var(--ink);
}

.stufe.stufe-hoch .stufe-name {
  color: #ffffff;
}

.stufe-claim {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 34ch;
}

.stufe.stufe-hoch .stufe-claim {
  color: rgba(255, 255, 255, 0.82);
}

.stufe-liste {
  list-style: none;
  margin: 6px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--linie);
  display: grid;
  gap: 12px;
}

.stufe.stufe-hoch .stufe-liste {
  border-top-color: rgba(255, 255, 255, 0.22);
}

.stufe-liste li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 11px;
  align-items: start;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.stufe.stufe-hoch .stufe-liste li {
  color: rgba(255, 255, 255, 0.85);
}

.stufe-liste svg {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--petrol);
  flex: none;
}

.stufe.stufe-hoch .stufe-liste svg {
  color: #ffffff;
}

.stufe-fuerwen {
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--linie);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.stufe.stufe-hoch .stufe-fuerwen {
  border-top-color: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.85);
}

.stufe-fuerwen strong {
  color: inherit;
}

.stufen-abbinder {
  margin-top: clamp(28px, 3.5vw, 44px);
  max-width: 74ch;
  font-size: 0.98rem;
  color: var(--ink-soft);
}

/* ---------- Garantie: Bedingungen-Zusatz unter dem Petrol-Text ---------- */

.garantie-bedingungen-block {
  margin-top: clamp(32px, 4.5vh, 52px);
  padding-top: clamp(28px, 3.5vw, 40px);
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  max-width: 66ch;
  text-align: left;
}

.gb-head {
  display: block;
  font-weight: 700;
  font-size: 0.95rem;
  color: #ffffff;
  margin-bottom: 16px;
}

.garantie-bedingungen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.garantie-bedingungen li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
}

.gb-num {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  font-size: 0.75rem;
  font-weight: 700;
  color: #ffffff;
}

/* ---------- Was wir brauchen: getönte Bühne, Ledger-Zeilen ---------- */

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

.anford-layout {
  display: grid;
  grid-template-columns: 0.6fr 1.4fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

.anford-intro {
  position: sticky;
  top: clamp(90px, 12vh, 130px);
}

.anford-intro h2 {
  font-size: var(--fs-h2);
  max-width: 13ch;
}

.anford-ledger {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.anford-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: baseline;
  padding-block: clamp(20px, 2.4vw, 30px);
  border-top: 1px solid var(--linie);
  transition: border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.anford-row:last-child {
  border-bottom: 1px solid var(--linie);
}

.anford-row:hover {
  border-top-color: var(--petrol);
}

.anford-ziffer {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 0.85;
  color: var(--petrol);
  font-variant-numeric: tabular-nums;
}

.anford-body {
  display: grid;
  gap: 8px;
}

.anford-body h3 {
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
}

.anford-body p {
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 52ch;
}

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

@media (max-width: 1024px) {
  .stufen-grid {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin-inline: auto;
    gap: clamp(22px, 5vw, 34px);
  }

  .stufe.stufe-hoch {
    margin-top: 0;
  }

  .anford-layout {
    grid-template-columns: 1fr;
    gap: clamp(28px, 6vw, 40px);
  }

  .anford-intro {
    position: static;
    top: auto;
  }

  .anford-intro h2 {
    max-width: none;
  }
}

@media (max-width: 720px) {
  .hero.unterheld { padding-top: 108px; }
  .unterheld .hero-ctas .btn-gross { width: 100%; justify-content: center; }

  .anford-row { gap: 16px; }
  .anford-ziffer { font-size: 2rem; }
}