/* CLUNIQ Teamwear — die Fläche.
 *
 * Ergänzt /stil.css, ersetzt es nicht: Kopfzeile, Fußbereich, Warteliste und
 * Knöpfe kommen weiter von dort, damit Teamwear nicht neben dem Rest der Welt
 * steht. Was hier drinsteht, betrifft allein den Inhalt dazwischen.
 *
 * WARUM ES DIESE DATEI GIBT
 *
 * Am 10.09.2026: «Teamwear ist ziemlich überladen.» Nachgemessen stimmte das —
 * sieben Seiten für zwei Angebote, 25 Knöpfe für eine Entscheidung, 41 Karten,
 * 26 Chips, 75 Überschriften, 2993 Wörter.
 *
 * Der Grund lag aber tiefer als in der Menge. Die Startseite läuft seit ihrem
 * Umbau auf Haarlinien, EINER linken Kante und zwei Schriftgraden; Teamwear
 * lief noch auf Karten mit Schatten, Verlaufsflächen und Chips. Nebeneinander
 * liest sich das als Unruhe, egal wie wenig draufsteht.
 *
 * Diese Datei holt Teamwear auf dieselbe Formsprache. Sie ist bewusst eine
 * Kopie der Haltung und nicht der Zeilen aus web/index.html: Dort steckt sie
 * in einem <style>-Block der Startseite. Sie herauszulösen hiesse, die Seite
 * anzufassen, die gerade erst dreimal umgebaut wurde. Wenn eine dritte Fläche
 * dieselbe Haltung braucht, ist das der Moment zum Herausziehen — nicht
 * früher.
 *
 * DIE REGELN, IN DER REIHENFOLGE IHRER WIRKUNG
 *
 *   1. Keine Kästen. Haarlinien trennen, 1px solid var(--line).
 *   2. Eine linke Kante. Alles beginnt an der Kante von .wrap.
 *   3. Zwei Schriftgrade im Fliesstext, zwei in den Überschriften.
 *   4. Eine Abstandsleiter: 14 · 18 · 26 · 40 · 56 · 88.
 *   5. Ein gefüllter Knopf je Seite. Daneben ein ruhiger Verweis, nie ein
 *      zweiter gefüllter.
 */

/* ZEILENLÄNGE: em, NICHT ch.
 *
 * Gemessen am 10.09.2026 in DM Sans bei 16,5px: die Ziffer «0» ist 11,30px
 * breit, das mittlere Zeichen im Fliesstext aber nur 8,42px. `ch` misst die
 * Null. Eine Spalte mit `66ch` trägt deshalb rund 88 Zeichen, nicht 66 —
 * ein Drittel über dem, was noch angenehm zu lesen ist.
 *
 * Gerechnet wird deshalb in em: 1 Zeichen ≈ 0,51em, also
 * 70 Zeichen ≈ 36em und 65 Zeichen ≈ 33em.
 */

/* ── Abschnitte ──────────────────────────────────────────────────────── */
.tw{padding:88px 0}
.tw + .tw{padding-top:0}
.tw h2{font-size:clamp(28px,3.2vw,40px);font-weight:400;line-height:1.14;
  letter-spacing:-.03em;margin:0;max-width:20em;color:var(--ink);text-wrap:balance}
/* --ink-soft und nicht --ink-faint: Was hier steht, trägt Information.
   --ink-faint kommt auf Creme nur auf 4,33:1 — das reicht für Zierde, nicht
   für Text, der etwas mitteilt. Der Fehler ist in diesem Projekt zweimal
   passiert und steht deshalb in DESIGN.md. */
.tw .fuehrung{margin:18px 0 0;font-size:17.5px;line-height:1.62;
  color:var(--ink-soft);max-width:33em}
.tw .fuehrung + .liste,.tw .fuehrung + .schritte,.tw .fuehrung + .faq{margin-top:40px}
.tw h2 + .liste,.tw h2 + .schritte,.tw h2 + .faq,.tw h2 + .paare{margin-top:40px}

/* ── Die Liste: Begriff links, Erklärung rechts, Haarlinie dazwischen ── */
.liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.liste li{display:grid;grid-template-columns:280px minmax(0,36em);gap:0 32px;
  padding:18px 0;border-bottom:1px solid var(--line)}
.liste b{font-weight:600;font-size:16.5px;color:var(--ink);letter-spacing:-.01em}
.liste span{font-size:16.5px;line-height:1.6;color:var(--ink-soft)}
@media(max-width:720px){
  .liste li{grid-template-columns:1fr;gap:6px}
}

/* ── Die Schritte: dieselbe Liste, nur gezählt ───────────────────────── */
.schritte{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);
  counter-reset:tw}
.schritte li{display:grid;grid-template-columns:34px 236px minmax(0,36em);gap:0 20px;
  padding:18px 0;border-bottom:1px solid var(--line);counter-increment:tw}
/* Numeriert, weil die Reihenfolge etwas bedeutet: Freigeben geht nicht vor
   Veredeln. Ohne echte Folge waeren Nummern Zierrat — mit fuehrender Null
   sind sie es immer, das ist der Zierrat, an dem man erzeugte Seiten
   erkennt. Also «1.» und nicht «01». */
.schritte li::before{content:counter(tw) ".";
  font-size:16.5px;font-weight:600;color:var(--green-800);
  font-variant-numeric:tabular-nums}
.schritte b{font-weight:600;font-size:16.5px;color:var(--ink);letter-spacing:-.01em}
.schritte span{font-size:16.5px;line-height:1.6;color:var(--ink-soft)}
@media(max-width:720px){
  .schritte li{grid-template-columns:26px 1fr;gap:4px 12px}
  .schritte b{grid-column:2}
  .schritte span{grid-column:2}
}

/* ── Zwei Dinge nebeneinander, ohne Kasten drumherum ─────────────────── */
.paare{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;
  border-top:1px solid var(--line)}
.paare > div{padding:26px 0 4px}
.paare h3{font-size:19px;font-weight:600;letter-spacing:-.015em;margin:0 0 12px;color:var(--ink)}
.paare p{font-size:16.5px;line-height:1.62;color:var(--ink-soft);margin:0 0 12px}
@media(max-width:820px){
  .paare{grid-template-columns:1fr;gap:0}
  .paare > div + div{border-top:1px solid var(--line)}
}

/* ── Häufige Fragen ──────────────────────────────────────────────────── */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:18px 40px 18px 0;position:relative;
  font-size:16.5px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:26px;
  width:9px;height:9px;border-right:1.6px solid var(--ink-soft);
  border-bottom:1.6px solid var(--ink-soft);transform:rotate(45deg);
  transition:transform .18s ease}
.faq details[open] summary::after{transform:rotate(225deg);top:30px}
.faq details p{margin:0 0 20px;font-size:16.5px;line-height:1.65;
  color:var(--ink-soft);max-width:36em}
@media(prefers-reduced-motion:reduce){.faq summary::after{transition:none}}

/* ── Der Hinweis am Fuß eines Abschnitts ─────────────────────────────── */
.tw .nachsatz{margin:26px 0 0;font-size:16.5px;line-height:1.6;color:var(--ink-soft);max-width:36em}
.tw .taten{margin-top:40px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
@media(max-width:640px){
  .tw .taten .btn{white-space:normal;max-width:100%;text-align:center}
}

/* ── Die Gegenüberstellung der zwei Angebote ─────────────────────────── */
/* Auf schmalen Geräten rollt die Tafel seitwärts, und die Beschriftungsspalte
   bleibt stehen. Am 10.09.2026 im Bild nachgesehen: Bei 390px ist von der
   zweiten Spalte NICHTS zu sehen — ohne diesen Hinweis erfährt ein Leser am
   Telefon nie, dass es einen zweiten Weg gibt. Die Startseite trägt denselben
   Hinweis über ihrer Auslage, aus demselben Grund. */
.rollhinweis{display:none}
@media(max-width:720px){
  .rollhinweis{display:block;margin:26px 0 0;font-size:14.5px;color:var(--ink-soft)}
  .rollhinweis::before{content:"\2192\00a0"}
  .rollhinweis + .wahl{margin-top:12px}
}
.wahl{margin-top:40px;overflow-x:auto;overscroll-behavior-x:contain}
.wahl table{border-collapse:collapse;width:100%;min-width:680px;
  text-align:left;table-layout:fixed}
.wahl th,.wahl td{padding:17px 24px 18px 0;vertical-align:baseline;
  border-top:1px solid var(--line);font-weight:400;font-size:16.5px;
  line-height:1.58;color:var(--ink-soft)}
.wahl thead th{border-top:0;padding-bottom:8px;font-size:20px;
  font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.wahl .frage{width:132px;position:sticky;left:0;background:var(--cream);
  font-size:14px;line-height:1.5;color:var(--ink-soft);padding-right:24px}
.wahl tfoot td{padding-top:24px}
.wahl tfoot .frage{background:var(--cream)}
@media(max-width:640px){
  .wahl th,.wahl td{padding:15px 18px 16px 0;font-size:16px}
  .wahl .frage{width:104px;font-size:13px}
}

/* ── Was der Browser mitbringt, gehört auch zur Gestaltung ───────────── */
.tw a:not(.btn){text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.18em;text-decoration-color:rgba(0,104,55,.38)}
.tw a:not(.btn):hover{text-decoration-color:var(--green-800)}
/* Der Tastaturfokus war nur in Kopfzeile und Ökosystem-Leiste gezeichnet;
   im Inhalt blieb die Voreinstellung des Browsers stehen. */
.tw :focus-visible,.hero :focus-visible{outline:2px solid var(--green-700);outline-offset:3px;
  border-radius:3px}