/* HPTEAM 12.10.2026: the page team.html (v3\team.py) — loaded ONLY by team.html (not in the hp.css bundle: budget).
   Only existing colour keys of tokens.css (gold, karte, rand, text, matt) — dark and light follow by themselves.
   The team strip above the header on every DE page needs no rule here (existing classes zs-hinweis + chip neu). */
.team-band .chip { text-decoration: none; }

.team-rumpf { display: flex; flex-direction: column; gap: var(--ab6); }
.team-abschnitt > h2 { margin: 0 0 var(--ab3); }
.team-gitter { display: grid; gap: var(--ab3); }
.team-drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.team-fuenf { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.team-karte { display: flex; flex-direction: column; gap: 8px; padding: var(--ab4); min-width: 0; }
.team-karte h3 { margin: 0; }
.team-karte p { margin: 0; }
.team-zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ab3); }
.team-regeln, .team-erwartung { padding: var(--ab5); min-width: 0; }
.team-regeln h2, .team-erwartung h2 { margin: 4px 0 var(--ab3); }
.team-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.team-liste li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.team-liste li > svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--text-gold); }
.team-liste b { color: var(--text); }
.team-schritte { list-style: none; margin: 0 0 var(--ab3); padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--ab3); }
.team-schritte li { display: flex; flex-direction: column; gap: 8px; padding: var(--ab4); min-width: 0; }
.team-schluss { padding: var(--ab5); display: flex; flex-direction: column; align-items: flex-start; gap: var(--ab3); }
.team-schluss p { margin: 0; }
.team-warnung { display: flex; gap: 8px; align-items: center; }
.team-warnung svg { flex: none; width: 16px; height: 16px; }
.team-kurz { padding: var(--ab4) var(--ab5); min-width: 0; }
.team-kurz .knopfreihe { margin-top: var(--ab4); }
/* the intro is the call itself — never clipped to 2–3 lines on the phone like other pages' intros */
.us-kopf.team-kopf .us-vorspann { display: block; -webkit-line-clamp: none; overflow: visible; }
.team-kurz .knopf, .team-schluss .knopf { white-space: normal; text-align: left; }

@media (max-width: 1100px) {
  .team-fuenf, .team-schritte { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .team-zwei { grid-template-columns: minmax(0, 1fr); }
  /* phone: card rows swipe sideways (the HP's rs-karussell pattern) instead of one long column */
  .team-drei, .team-fuenf { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 84%;
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; }
  .team-drei::-webkit-scrollbar, .team-fuenf::-webkit-scrollbar { display: none; }
  .team-drei > *, .team-fuenf > * { scroll-snap-align: start; }
  /* the five application steps stay visible one under the other, compact: number left, text right */
  .team-schritte { grid-template-columns: minmax(0, 1fr); gap: var(--ab2); }
  .team-schritte li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--ab3); row-gap: 2px; }
  .team-schritte li .rs-nr { grid-row: span 2; }
  .team-kurz { padding: var(--ab4); margin-top: var(--ab3); }
  .team-rumpf { gap: var(--ab5); }
  .team-karte, .team-schritte li { padding: var(--ab3) var(--ab4); }
  .team-regeln, .team-erwartung, .team-schluss { padding: var(--ab4); }
}