/* keytos.de/neu/team · nur für diese Seite (Inhalt in index.php): Kopf mit den drei Gründern und „Wer macht was“-Karten, darunter
   drei Gründe, warum wir das Dream Team sind (je Grund eine Farbfläche über das ganze Fenster). Das schwarze Kontakt-Band „Antwort
   am selben Tag, direkt von den Gründern“ ist seit 18.10.2026 entfernt (Jonas). Keine Linien, keine Mini-Großbuchstaben, kein Glas; Flächen trennen sich über Farbe. */

/* Header: füllt den ganzen Bildschirm (Jonas' Vorgabe) – erst beim Scrollen kommen die drei Gründe. lvh = Höhe bei eingeklappter
   Browserleiste, damit auf dem iPhone auch dann nichts darunter hereinragt; vh als Rückfall für ältere Browser. */
.team-kopf { display: flex; flex-direction: column; justify-content: center; gap: 48px; min-height: 100vh; min-height: 100lvh; padding-top: calc(12px + var(--notch-h, 50px) + 32px); padding-bottom: 48px; } /* Notch-Höhe kommt aus neu.css; taste-skill-ignore: 100vh nur Rückfall ohne lvh */
.team-kopf__titel { font-size: clamp(30px, 9.6vw, 128px); }
.team-kopf__leise { color: var(--color-gray-500); } /* große Schrift: 3,5:1 reicht ab 24 px (WCAG AA groß) */
.team-kopf__unten { display: grid; gap: 32px; }
.team-gruender { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.team-gruender__kreise { display: flex; margin: 0; padding: 0 0 0 12px; list-style: none; }
.team-gruender__kreise li { margin-left: -12px; }
.team-gruender__kreise .team-profil { width: 72px; height: 72px; font-size: 26px; text-decoration: none; box-shadow: 0 0 0 4px var(--primitive-white); transition: transform var(--dur-fast) var(--ease-cubic-in-out); } /* taste-skill-ignore: weißer Ring ohne Unschärfe, trennt die überlappenden Kreise */
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .team-gruender__kreise .team-profil:hover { transform: translateY(-4px); } }
.team-gruender__namen { margin: 0; font-family: var(--font-sans); font-size: 17px; font-weight: var(--weight-bold); line-height: 1.35; }
@media (min-width: 744px) { .team-kopf__titel { font-size: clamp(60px, 8.2vw, 128px); } }
@media (min-width: 1020px) {
  .team-kopf { gap: 80px; padding-bottom: 64px; }
  .team-gruender__kreise li { margin-left: -20px; }
  .team-gruender__kreise { padding-left: 20px; }
  .team-gruender__kreise .team-profil { width: 128px; height: 128px; font-size: 44px; box-shadow: 0 0 0 6px var(--primitive-white); } /* taste-skill-ignore: weißer Ring ohne Unschärfe */
  .team-gruender__namen { font-size: 20px; }
}

/* Wer macht was (Jonas, 16.10.2026: Header bunter, nicht so leer): je Gründer eine Karte in seiner Kreisfarbe – Name, Aufgaben als
   weiße Pillen, Werkzeug-Logos auf weißen Kacheln. Flache Farbflächen, weißer Rand wie bei den Kreisen (kein Schatten). li = Lage und
   Drehung (--rot), .team-karte = Karte (Auftritt/Hover per GSAP). Handy/Tablet: untereinander, leicht versetzt; Desktop: Kaskade rechts. */
.team-karten { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.team-karte-lage { --rot: -2deg; --farbe: #dbe8ff; position: relative; width: min(100%, 520px); transform: rotate(var(--rot)); }
.team-karte-lage:nth-child(2) { --rot: 2.5deg; --farbe: #d7f0e3; justify-self: end; margin-top: -14px; }
.team-karte-lage:nth-child(3) { --rot: -1.5deg; --farbe: #fde4d3; width: min(94%, 520px); margin: -14px 0 0 6%; }
.team-karte-lage.ist-vorn { z-index: 2; }
.team-karte { display: grid; gap: 14px; padding: 22px 22px 24px; border-radius: 24px; background: var(--farbe); box-shadow: 0 0 0 4px var(--primitive-white); color: var(--primitive-black); text-decoration: none; } /* taste-skill-ignore: weißer Ring ohne Unschärfe wie bei den Kreisen */
.team-karte__name { font-family: var(--font-sans); font-size: 23px; font-weight: var(--weight-bold); letter-spacing: -.02em; line-height: 1.2; }
.team-karte__rollen, .team-karte__werkzeuge { display: flex; flex-wrap: wrap; gap: 6px; }
.team-karte__rollen span { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 999px; background: var(--primitive-white); font-family: var(--font-sans); font-size: 15px; font-weight: var(--weight-bold); line-height: 1; }
.team-karte__werkzeuge i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; background: var(--primitive-white); }
.team-karte__werkzeuge svg { width: 22px; height: 22px; }
@media (min-width: 1020px) {
  /* Kaskade rechts neben dem Titel (Jonas, 17.10.2026: „mittiger – gleicher Abstand zum rechten Bildschirmrand wie zur linken
     Schrift – und ein bisschen größer“): Raster aus zwei Spalten. Links Titel, Kreise und Namen – die Spalte ist genau so breit wie
     der Titel (Kreise/Namen zählen dank contain nicht mit und brechen darin um). Rechts die Fläche bis zum Fensterrand (rechts kein
     Seitenrand), darin die Karten mittig: Abstand zur Schrift = Abstand zum Rand. Breite bis 680 px, mindestens 32 px Luft je Seite.
     Schrift/Abstände der Karten wachsen mit Breite UND Höhe, damit alle drei ins erste Bild passen. */
  .team-kopf { display: grid; grid-template-columns: max-content minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; gap: 80px 0; padding-right: 0; }
  .team-kopf__titel { grid-column: 1; grid-row: 1; align-self: end; font-size: clamp(56px, 6.6vw, 120px); } /* etwas kleiner, damit die Karten größer werden können */
  .team-kopf__unten { grid-column: 1; grid-row: 2; align-self: start; contain: inline-size; } /* Titel unten, Kreise oben in ihrer Zeile: bleiben beisammen, auch wenn die Karten höher sind */
  .team-karten { --kb: clamp(360px, 40vw, 680px); grid-column: 2; grid-row: 1 / 3; align-self: center; justify-self: center; width: min(var(--kb), calc(100% - 64px)); }
  .team-karte-lage { width: 93%; }
  .team-karte-lage:nth-child(2) { margin-top: -4px; }
  .team-karte-lage:nth-child(3) { width: 93%; margin: -4px 0 0 5%; }
  .team-karte { gap: min(1.2vw, 2vh); padding: min(1.9vw, 2.9vh) min(2.2vw, 3.5vh) min(2.1vw, 3.2vh); border-radius: 28px; }
  .team-karte__name { font-size: clamp(20px, min(2.1vw, 3.4vh), 34px); }
  .team-karte__rollen { gap: 8px; }
  .team-karte__rollen span { min-height: clamp(30px, min(2.9vw, 4.6vh), 46px); padding: 0 clamp(12px, 1.2vw, 20px); font-size: clamp(14px, min(1.4vw, 2.2vh), 21px); }
  .team-karte__werkzeuge { gap: 8px; }
  .team-karte__werkzeuge i { width: clamp(36px, min(3.5vw, 5.7vh), 58px); height: clamp(36px, min(3.5vw, 5.7vh), 58px); border-radius: 13px; }
  .team-karte__werkzeuge svg { width: clamp(19px, min(1.9vw, 3.1vh), 31px); height: clamp(19px, min(1.9vw, 3.1vh), 31px); }
}

/* Profilkreis mit Kürzel; je Person eine helle Farbe (Jonas, 15.10.2026): gleiche Helligkeit, verschiedene Töne – Blau, Mint,
   Apricot; Kürzel schwarz (je über 15:1). Gilt für die Kreise im Kopf und auf der Lernkurve. */
.team-profil { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--primitive-black); color: var(--primitive-white); font-family: var(--font-sans); font-size: 26px; font-weight: var(--weight-regular); letter-spacing: -.02em; line-height: 1; user-select: none; }
.team-profil[data-person="fritz"] { background: #dbe8ff; color: var(--primitive-black); }
.team-profil[data-person="julius"] { background: #d7f0e3; color: var(--primitive-black); }
.team-profil[data-person="jonas"] { background: #fde4d3; color: var(--primitive-black); }

/* ── Drei Gründe (Jonas, 16.10.2026) ───────────────────────────────────────────────────────────────────────────────────────
   Je Grund eine Farbfläche über das ganze Fenster: links die Aussage (Titel zweizeilig, zweite Zeile grau), rechts das Bild auf
   weißen Karten. Ohne Bühne stehen die Gründe untereinander; mit Bühne (Klasse vom Skript, ab 1020 × 700 px) liegen sie
   übereinander – jede Fläche bleibt stehen (sticky) und die nächste schiebt sich darüber. */
.team-gruende__kopf { padding: clamp(96px, 12vw, 200px) var(--grid-gutter-width) clamp(48px, 6vw, 96px); }
/* Deckblatt der drei Gründe: Überschrift, darunter die Gründer-Kreise (wie im Kopf) und die drei Gründe als Kapitel in ihren
   Seitenfarben (Sprung zur Seite). Mit Bühne die erste Seite des Stapels (unten). */
.team-deck { position: relative; display: grid; gap: clamp(36px, 4.5vw, 64px); background: var(--primitive-white); }
.team-deck__unten { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 32px; }
.team-deck__gruender { display: flex; margin: 0; padding: 0 0 0 16px; list-style: none; }
.team-deck__gruender li { margin-left: -16px; }
.team-deck__gruender .team-profil { width: 72px; height: 72px; font-size: 26px; box-shadow: 0 0 0 4px var(--primitive-white); } /* taste-skill-ignore: weißer Ring ohne Unschärfe, wie im Kopf */
.team-deck__kapitel { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.team-deck__kapitel a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--farbe); color: var(--primitive-black); font-family: var(--font-sans); font-size: 17px; font-weight: var(--weight-bold); line-height: 1.2; text-decoration: none; transition: transform var(--dur-fast) var(--ease-cubic-in-out); }
.team-deck__kapitel a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .team-deck__kapitel a:hover { transform: translateY(-3px); } }
@media (min-width: 1020px) {
  .team-deck__gruender { padding-left: 20px; }
  .team-deck__gruender li { margin-left: -20px; }
  .team-deck__gruender .team-profil { width: 104px; height: 104px; font-size: 38px; box-shadow: 0 0 0 6px var(--primitive-white); } /* taste-skill-ignore: weißer Ring ohne Unschärfe */
  .team-deck__kapitel a { min-height: 56px; padding: 0 26px; font-size: 19px; }
}
.team-gruende__titel { margin: 0; font-size: clamp(30px, 9.6vw, 128px); }
@media (min-width: 744px) { .team-gruende__titel { font-size: clamp(56px, 7.2vw, 128px); } }
.team-gruende { overflow-x: clip; } /* Auftritte (z. B. hereinfliegende Werkzeuge) ragen nie seitlich hinaus; clip lässt sticky in Ruhe */
.team-argumente { margin: 0; padding: 0; list-style: none; }
.team-arg { position: relative; }
.team-arg__buehne { background: var(--farbe); }
.team-arg__dunkel { position: absolute; inset: 0; z-index: 1; background: var(--primitive-black); opacity: 0; pointer-events: none; } /* dunkelt die zurücktretende Seite ab */
.team-arg__innen { display: grid; gap: 40px; padding: 72px var(--grid-gutter-width) 80px; }
.team-arg__titel { margin: 0; font-family: var(--font-sans); font-size: clamp(38px, 10vw, 72px); font-weight: var(--weight-light); letter-spacing: -.045em; line-height: 1.04; }
.team-arg__titel > span { display: block; }
.arg-zeile-mask { padding-bottom: .14em; margin-bottom: -.14em; } /* Masken der Titelzeilen (SplitText): Platz für g, j, p */
.team-arg__leise { color: var(--color-gray-800); } /* auf den Pastellflächen 5,4–5,8:1 */
.team-arg__satz { max-width: 34em; margin: 20px 0 0; font-family: var(--font-sans); font-size: 18px; line-height: 1.5; text-wrap: pretty; }
.team-arg__punkte { display: grid; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }
.team-arg__punkte li { position: relative; padding-left: 38px; font-family: var(--font-sans); font-size: 17px; font-weight: var(--weight-bold); line-height: 1.4; }
/* Haken im weißen Kreis (wie die Punkte auf /neu/angebote): Kreis = ::before, Haken aus zwei Kanten = ::after */
.team-arg__punkte li::before { content: ""; position: absolute; left: 0; top: -1px; width: 26px; height: 26px; border-radius: 50%; background: var(--primitive-white); }
.team-arg__punkte li::after { content: ""; position: absolute; left: 8px; top: 7px; width: 10px; height: 5px; border-left: 2px solid var(--primitive-black); border-bottom: 2px solid var(--primitive-black); transform: rotate(-45deg); }
.arg-wort { display: inline-block; } /* wechselt per ScrambleText */
.team-arg__bild { display: grid; gap: 16px; min-width: 0; }

/* Karten im Bild: weiß, rund, flach */
.arg-karte { position: relative; display: grid; gap: 12px; min-width: 0; padding: 24px; border-radius: 28px; background: var(--primitive-white); font-family: var(--font-sans); }
.arg-karte p { margin: 0; }
.arg-karte__titel { font-size: 15px; font-weight: var(--weight-bold); line-height: 1.35; }
.arg-karte__titel small { font-size: 15px; font-weight: var(--weight-regular); color: var(--color-gray-800); }
.arg-karte__text { font-size: 17px; line-height: 1.35; color: var(--color-gray-800); }
.arg-zahl__kleiner { margin-right: .12em; }
.arg-zahl__wert { font-variant-numeric: tabular-nums; }

/* Grund 1: „Jünger als 17 Jahre“ – als Satz lesbar, die Zahl groß auf einem Feld in der Grundfarbe */
.arg-alter { display: grid; gap: 8px; }
.arg-alter__satz { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .28em; font-size: clamp(26px, 6.4vw, 36px); font-weight: var(--weight-light); letter-spacing: -.035em; line-height: 1.1; }
.arg-alter__zahl { display: inline-grid; place-items: center; min-width: 1.45em; padding: .06em .14em .04em; border-radius: .2em; background: var(--farbe); font-size: 2.6em; font-weight: var(--weight-regular); letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.arg-alter__wer { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: var(--weight-bold); line-height: 1.35; }
.arg-alter__punkt { width: 10px; height: 10px; border-radius: 50%; background: #2f9e6a; }

/* Grund 1: Werkzeugkasten (Jonas, 18.10.2026: nur Claude, Claude Code, ChatGPT, GitHub, GSAP, Dogado) – Kacheln in der Grundfarbe mit
   Logo und Namen; Claude Code dunkel (Terminal), Dogado als Schriftzug; zuletzt „das nächste Werkzeug“ */
.arg-zahl { font-size: clamp(56px, 14vw, 96px); font-weight: var(--weight-light); letter-spacing: -.05em; line-height: .95; white-space: nowrap; }
.arg-kasten { gap: 16px; }
.arg-kasten__titel { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin-top: 4px; font-size: 17px; font-weight: var(--weight-bold); line-height: 1.35; }
.arg-kasten__titel span { font-weight: var(--weight-regular); color: var(--color-gray-800); }
.arg-kasten__zahl { color: var(--primitive-black); font-variant-numeric: tabular-nums; }
.arg-kasten__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.arg-werkzeug { display: grid; justify-items: center; align-content: center; gap: 8px; padding: 16px 8px 12px; border-radius: 18px; background: var(--farbe); }
.arg-werkzeug__logo { display: grid; place-items: center; height: 34px; font-size: 21px; font-weight: var(--weight-bold); letter-spacing: -.03em; line-height: 1; }
.arg-werkzeug__logo svg { width: 32px; height: 32px; }
.arg-werkzeug__name { font-size: 14px; font-weight: var(--weight-bold); line-height: 1.2; text-align: center; }
.arg-werkzeug.ist-code { background: #141413; color: var(--primitive-white); } /* Claude Code: Claude-Zeichen auf dunkler Kachel wie im Terminal */
.arg-werkzeug--neu { grid-column: 1 / -1; display: flex; justify-content: center; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px; border-radius: 999px; background: var(--primitive-black); color: var(--primitive-white); font-size: 16px; font-weight: var(--weight-bold); }
.arg-werkzeug__plus { display: inline-block; font-size: 24px; font-weight: var(--weight-regular); line-height: 1; }
@media (min-width: 1020px) {
  .arg-werkzeug { gap: min(.8vw, 1.2vh); padding: min(1.6vw, 2.4vh) 8px min(1.1vw, 1.7vh); }
  .arg-werkzeug__logo { height: clamp(30px, min(3vw, 4.6vh), 48px); font-size: clamp(18px, min(1.7vw, 2.6vh), 26px); }
  .arg-werkzeug__logo svg { width: clamp(28px, min(2.8vw, 4.3vh), 44px); height: clamp(28px, min(2.8vw, 4.3vh), 44px); }
  .arg-werkzeug__name { font-size: clamp(13px, 1.05vw, 16px); }
}

/* Grund 2: Effizienz als Balkendiagramm (Jonas, 18.10.2026) – je Frage ein grauer Balken „Große Agentur“ (volle Breite) und ein
   schwarzer „Keytos“ (--w), dahinter Wert und Vorteil in der Grundfarbe. Stationen als einzelne Stufen. */
.arg-balken { gap: 18px; }
.arg-balken__kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 16px; }
.arg-balken__kopf .arg-karte__titel { font-size: clamp(20px, 5vw, 26px); font-weight: var(--weight-light); letter-spacing: -.03em; line-height: 1.15; }
.arg-balken__legende { display: flex; gap: 14px; font-size: 13px; color: var(--color-gray-800); }
.arg-balken__legende span { display: inline-flex; align-items: center; gap: 6px; }
.arg-balken__legende span::before { content: ""; width: 12px; height: 12px; border-radius: 4px; background: #d4d4d4; }
.arg-balken__legende .ist-wir::before { background: var(--primitive-black); }
.arg-balken__gruppe { display: grid; gap: 6px; }
.arg-balken__frage { font-size: 15px; font-weight: var(--weight-bold); line-height: 1.3; }
.arg-balken__zeile { --w: 100%; position: relative; display: flex; align-items: center; height: 34px; }
.arg-balken__balken, .arg-balken__stufen { display: flex; gap: 4px; width: var(--w); height: 100%; }
.arg-balken__balken { border-radius: 9px; background: #d4d4d4; }
.arg-balken__stufen i { flex: 0 0 calc((100% - 16px) / 5); border-radius: 9px; background: #d4d4d4; }
.ist-wir .arg-balken__stufen i { flex-basis: calc((100% - 4px) / 2); }
.ist-wir .arg-balken__balken, .ist-wir .arg-balken__stufen i { background: var(--primitive-black); }
.arg-balken__wert { position: absolute; font-size: 15px; font-weight: var(--weight-bold); line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ist-agentur .arg-balken__wert { right: 12px; color: var(--color-gray-800); }
.arg-balken__hinter { position: absolute; left: calc(var(--w) + 10px); display: flex; align-items: center; gap: 10px; }
.ist-wir .arg-balken__wert { position: static; }
.arg-balken__vorteil { padding: 5px 10px; border-radius: 999px; background: var(--farbe); font-size: 13px; font-style: normal; font-weight: var(--weight-bold); line-height: 1.1; white-space: nowrap; }
.arg-balken__quelle { font-size: 13px; line-height: 1.35; color: var(--color-gray-800); }
@media (min-width: 1020px) {
  .arg-balken { gap: min(1.6vw, 2.6vh); }
  .arg-balken__zeile { height: clamp(30px, min(2.8vw, 4.4vh), 44px); }
  .arg-balken__frage, .arg-balken__wert { font-size: clamp(15px, 1.15vw, 18px); }
}

/* Grund 3 (Jonas, 18.10.2026): nur Gymnasium und über 500 h Claude Code. Schulform in einer Zeile in der Grundfarbe mit Haken; darunter
   „500+“ Stunden mit Claude Code und ein Raster aus 50 Kästchen (je 10 h) in Claude-Orange #D97757 (Markenfarbe). taste-skill-ignore: Markenfarbe des vorgestellten Werkzeugs */
.arg-zeugnis { gap: 16px; padding: 28px 24px 26px; }
.arg-zeugnis__kopf { font-size: clamp(24px, 6vw, 32px); font-weight: var(--weight-light); letter-spacing: -.035em; line-height: 1.1; }
.arg-zeugnis__zeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 16px; padding: 14px 18px; border-radius: 18px; background: var(--farbe); }
.arg-zeugnis__name { font-size: 15px; color: var(--color-gray-800); }
.arg-schulform__wert { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; font-size: clamp(22px, 5.4vw, 30px); font-weight: var(--weight-bold); letter-spacing: -.02em; line-height: 1.15; white-space: nowrap; }
.arg-schule { display: inline-grid; justify-items: end; }
.arg-schule span { grid-area: 1 / 1; }
.arg-schule span:not(:last-child) { visibility: hidden; color: var(--color-gray-500); } /* ohne Skript nur „Gymnasium“; die anderen blass */
.arg-haken { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--primitive-black); }
.arg-haken::after { content: ""; position: absolute; left: 9px; top: 9px; width: 11px; height: 6px; border-left: 2.5px solid var(--primitive-white); border-bottom: 2.5px solid var(--primitive-white); transform: rotate(-45deg); }
.arg-stunden { display: grid; gap: 14px; padding: 18px; border-radius: 18px; background: #f4f4f4; }
.arg-stunden__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.arg-stunden__zahl { display: flex; align-items: flex-start; font-size: clamp(56px, 14vw, 88px); font-weight: var(--weight-light); letter-spacing: -.05em; line-height: .9; font-variant-numeric: tabular-nums; }
.arg-stunden__wert { display: inline-block; min-width: 3ch; } /* gleich breit von 0 bis 500 (Ziffern gleich breit): der Text daneben bleibt stehen */
.arg-stunden__plus { margin-left: .04em; color: #d97757; font-size: .6em; font-weight: var(--weight-regular); line-height: 1; } /* taste-skill-ignore: Claude-Orange = Markenfarbe von Claude Code, das hier vorgestellt wird */
.arg-stunden__text { display: flex; align-items: center; gap: 10px; max-width: 14em; font-size: 17px; line-height: 1.3; }
.arg-stunden__text svg { flex: none; width: 30px; height: 30px; }
.arg-stunden__raster { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; }
.arg-stunden__raster span { aspect-ratio: 1; border-radius: 5px; background: #e2e2e2; }
.arg-stunden__raster i { display: block; width: 100%; height: 100%; border-radius: inherit; background: #d97757; } /* taste-skill-ignore: Claude-Orange = Markenfarbe von Claude Code, das hier vorgestellt wird */
.arg-stunden__legende { font-size: 13px; color: var(--color-gray-800); }
@media (min-width: 1020px) {
  .arg-stunden__zahl { font-size: clamp(64px, min(6vw, 10vh), 112px); }
  .arg-stunden__raster { gap: min(.5vw, .8vh); }
}

@media (min-width: 744px) {
  .team-arg__innen { padding: 96px 48px; }
  .arg-karte { padding: 28px; }
}
@media (min-width: 1020px) {
  .team-arg__innen { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; column-gap: clamp(48px, 6vw, 112px); min-height: 100vh; min-height: 100lvh; padding: calc(12px + var(--notch-h) + 32px) clamp(40px, 5vw, 96px) 56px; } /* taste-skill-ignore: 100vh nur Rückfall ohne lvh */
  .team-arg__titel { font-size: clamp(44px, 4.2vw, 80px); }
  .team-arg__satz { font-size: clamp(18px, 1.35vw, 21px); }
  .team-arg__punkte li { font-size: clamp(17px, 1.25vw, 19px); }
  .arg-zahl { font-size: clamp(64px, 6vw, 112px); }
  .arg-alter__satz { font-size: clamp(28px, 2.5vw, 44px); }
}
/* Bühne: je Grund hereinschieben (1 Bildschirm) + Ruhezone (1,5) – in der Ruhezone scrollt man durch die Animation; Einrasten nur im Übergang (Skript) */
.team-arg-buehne .team-arg { --ruhe: 150lvh; height: calc(200vh + 150vh); height: calc(200lvh + var(--ruhe)); } /* Ruhezone: jede Seite bleibt anderthalb Bildschirme Scrollweg stehen – durch diese Strecke scrollt man sich durch ihre Animation */
.team-arg-buehne .team-arg + .team-arg { margin-top: -100vh; margin-top: -100lvh; }
.team-arg-buehne .team-arg:last-child { height: calc(100vh + 150vh); height: calc(100lvh + var(--ruhe)); } /* taste-skill-ignore: 100vh nur Rückfall ohne lvh */
.team-arg-buehne .team-arg__buehne { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; transform-origin: 50% 0; } /* taste-skill-ignore: 100vh nur Rückfall ohne lvh */
.team-arg-buehne .team-arg__innen { height: 100%; min-height: 0; }
/* Deckblatt als erste Seite des Stapels: steht (sticky) mit kurzer Ruhezone für seinen Auftritt, dann schiebt sich die erste Seite darüber */
.team-arg-buehne .team-gruende__kopf { height: calc(200vh + 80vh); height: calc(200lvh + 80lvh); padding: 0; }
.team-arg-buehne .team-deck { position: sticky; top: 0; height: 100vh; height: 100lvh; align-content: center; padding: calc(12px + var(--notch-h) + 32px) var(--grid-gutter-width) 56px; overflow: hidden; transform-origin: 50% 0; } /* taste-skill-ignore: 100vh nur Rückfall ohne lvh */
.team-arg-buehne .team-arg:first-child { margin-top: -100vh; margin-top: -100lvh; }

/* Bewegung: Teile kommen nacheinander (80 ms). Nur mit Skript + ohne
   reduzierte Bewegung (siehe index.php) – sonst ist alles sofort sichtbar. */
.team-bewegt [data-auftritt] { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease-quart-out), transform .7s var(--ease-quart-out); transition-delay: calc(var(--i, 0) * 80ms); }
.team-bewegt .ist-da [data-auftritt] { opacity: 1; transform: none; }