/* Dieselbe Formensprache wie Website-Check und Exit-Check. Der Index ist die
   Seite, auf der beide nebeneinander stehen — eine dritte Handschrift würde
   hier zuerst auffallen. Tokens bewusst 1:1 übernommen statt neu gemischt. */
#tl{
  --tl-ink:#0f0f11; --tl-muted:#52525b; --tl-soft:#5f5f69; --tl-line:#1b1d1e14;
  --tl-fill:#3546c4; --tl-text:#2c3bb0;
  --tl-gut:#15803d;

  position:relative; color:var(--tl-ink); line-height:1.5;
  font-family:'Inter Tight','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(60% 40% at 10% 2%,  #e6e9ff 0%, transparent 60%),
    radial-gradient(55% 35% at 88% 1%,  #e7f6ff 0%, transparent 62%),
    radial-gradient(70% 45% at 50% 100%,#f2f0ff 0%, transparent 65%), #fdfdfd;
}
#tl *{box-sizing:border-box}
#tl :focus-visible{outline:3px solid var(--tl-fill); outline-offset:2px; border-radius:8px}

.tl-wrap{max-width:880px; margin:0 auto; padding:0 24px}
/* Die Webflow-Navigation liegt fest über der Seite und ist 96 px hoch. */
.tl-head{padding:136px 0 0}
.tl-eyebrow{font-size:12px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--tl-text); margin:0 0 12px}
.tl-h1{margin:0 0 10px; font-size:38px; line-height:1.08; letter-spacing:-1px; font-weight:700}
.tl-lead{margin:0; font-size:16.5px; line-height:1.55; color:var(--tl-muted); max-width:640px}
.tl-lead b{color:var(--tl-ink); font-weight:600}

/* ---------- Abschnitte ---------- */
.tl-abschnitt{padding:44px 0 0}
.tl-h2{margin:0 0 4px; font-size:19px; letter-spacing:-.4px; font-weight:700}
.tl-sub{margin:0 0 20px; font-size:14px; color:var(--tl-soft); max-width:600px}

/* Zwei Spalten ab Tablet. Kein drittes Raster für den Fall „drei Karten" —
   eine halb leere dritte Spalte sieht nach fehlendem Werkzeug aus. */
.tl-karten{display:grid; gap:14px; grid-template-columns:1fr}
@media (min-width:720px){ .tl-karten{grid-template-columns:1fr 1fr} }

/* Die ganze Karte ist der Link, nicht nur ein Wort am Ende: große Klickfläche
   auf dem Handy, und der Zeiger muss nicht gesucht werden (Ledger, Klickgröße). */
.tl-k{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:#ffffffbf; border:1px solid var(--tl-line); border-radius:16px;
  padding:20px 21px 18px; position:relative; overflow:hidden;
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}
.tl-k:hover{
  background:#fff; border-color:#3546c433; transform:translateY(-2px);
  box-shadow:0 2px 4px #0f0f1114, 0 12px 26px #3546c41f;
}
.tl-k:active{transform:translateY(0); box-shadow:0 1px 2px #0f0f1114}

.tl-marke{font-size:11.5px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--tl-text); margin:0 0 9px; display:flex; align-items:center; gap:7px}
.tl-punkt{width:7px; height:7px; border-radius:50%; background:var(--tl-gut); flex:0 0 7px}
.tl-k h3{margin:0 0 6px; font-size:18px; letter-spacing:-.35px; line-height:1.25}
.tl-k p{margin:0 0 14px; font-size:14.5px; color:var(--tl-muted); line-height:1.55}

.tl-fakten{list-style:none; margin:0 0 16px; padding:0; display:flex; flex-wrap:wrap; gap:6px}
.tl-fakten li{font-size:12.5px; color:var(--tl-soft); background:#1b1d1e0a;
  border-radius:999px; padding:5px 11px}

/* Kein <button> im <a>. Die Fläche trägt trotzdem Kontrast und reagiert auf
   Hover/Press der Karte — sonst sieht sie aus wie Text (feedback: Buttons ab
   dem ersten Wurf). */
.tl-los{
  margin-top:auto; align-self:flex-start;
  padding:11px 20px; border-radius:12px; font-size:14.5px; font-weight:600;
  background:var(--tl-fill); color:#fff;
  box-shadow:0 1px 2px #0f0f1114, 0 6px 16px #3546c42e;
  transition:background .14s ease, box-shadow .14s ease;
}
.tl-k:hover .tl-los{background:#2a389f; box-shadow:0 2px 4px #0f0f111f, 0 10px 22px #3546c43d}
.tl-k:active .tl-los{box-shadow:0 1px 2px #0f0f1114}

/* ---------- Werkstatt (ohne Links) ---------- */
.tl-werkstatt{background:#ffffff96; border:1px solid var(--tl-line); border-radius:16px;
  padding:22px 24px}
.tl-werkstatt ul{margin:0; padding:0; list-style:none;
  display:grid; gap:11px; grid-template-columns:1fr}
@media (min-width:720px){ .tl-werkstatt ul{grid-template-columns:1fr 1fr; gap:11px 26px} }
.tl-werkstatt li{font-size:14px; color:var(--tl-muted); line-height:1.5;
  padding-left:16px; position:relative}
.tl-werkstatt li::before{content:""; position:absolute; left:0; top:8px;
  width:6px; height:6px; border-radius:50%; background:#3546c466}
.tl-werkstatt b{color:var(--tl-ink); font-weight:600}
.tl-nachsatz{margin:18px 0 0; font-size:13.5px; color:var(--tl-soft); line-height:1.6}

/* ---------- Schluss ---------- */
.tl-schluss{margin:44px 0 0; padding:26px 26px 28px; border-radius:18px;
  background:linear-gradient(135deg,#2c3bb0,#3546c4); color:#fff}
.tl-schluss h2{margin:0 0 7px; font-size:21px; letter-spacing:-.45px}
.tl-schluss p{margin:0 0 18px; font-size:15px; line-height:1.55; color:#ffffffd9; max-width:520px}
/* Umkehrung auf der Markenfläche — ohne sie steht der Knopf Marke auf Marke. */
.tl-schluss .tl-cta{
  display:inline-block; text-decoration:none; padding:13px 24px; border-radius:12px;
  background:#fff; color:#2a389f; font-weight:600; font-size:15px;
  box-shadow:0 2px 6px #00000024;
  transition:background .14s ease, transform .14s ease, box-shadow .14s ease;
}
.tl-schluss .tl-cta:hover{background:#eef0ff; transform:translateY(-2px);
  box-shadow:0 8px 20px #00000033}
.tl-schluss .tl-cta:active{transform:translateY(0); box-shadow:0 2px 6px #00000024}
.tl-schluss .tl-cta:focus-visible{outline:3px solid #fff; outline-offset:3px}

.tl-abschnitt:last-of-type{padding-bottom:0}
.tl-fuss{padding:0 0 64px}

@media (max-width:640px){
  .tl-head{padding:112px 0 0}
  .tl-h1{font-size:29px; letter-spacing:-.6px}
  .tl-wrap{padding:0 18px}
  .tl-los{align-self:stretch; text-align:center}
  .tl-schluss .tl-cta{display:block; text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .tl-k, .tl-k:hover, .tl-k:active,
  .tl-schluss .tl-cta, .tl-schluss .tl-cta:hover{transform:none; transition:none}
}
/* ---------- Anschluss-Werkzeug ----------
   Ein Werkzeug, das auf einem anderen aufbaut, steht UNTER dessen Karte statt
   als fünfte Karte daneben: es ist der zweite Schritt, kein zweites Angebot.
   Fünf gleichrangige Karten würden die Wahl schwerer machen, nicht die Auswahl
   größer (feedback: weniger Auswahl, mehr Abschlüsse).

   Eigenes Element als Geschwister, nicht verschachtelt: `.tl-k` IST bereits ein
   <a>, ein Link darin wäre ungültiges Markup und bricht in echten Browsern. */
.tl-kbox{display:flex; flex-direction:column; gap:10px}
.tl-kbox .tl-k{flex:1}

.tl-danach{
  display:flex; align-items:baseline; gap:9px;
  text-decoration:none; color:var(--tl-muted); font-size:13.5px; line-height:1.5;
  background:#ffffff8c; border:1px solid var(--tl-line); border-radius:12px;
  padding:12px 15px;
  transition:background .14s ease, border-color .14s ease, color .14s ease;
}
.tl-danach b{color:var(--tl-ink); font-weight:600}
.tl-danach .tl-pfeil{color:var(--tl-text); font-weight:600; flex:0 0 auto}
.tl-danach:hover{background:#fff; border-color:#3546c433; color:var(--tl-ink)}

/* Ohne das streckt sich die Nachbarkarte auf die Hoehe von Karte + Anschluss,
   und `margin-top:auto` am Knopf reisst ein Loch von ~85 px darueber auf.
   Nur das Raster, das einen Anschluss enthaelt — im zweiten Abschnitt sind
   zwei gleich hohe Karten weiterhin richtig.
   Faellt `:has()` aus, gilt wieder Strecken plus `.tl-kbox .tl-k{flex:1}`:
   dasselbe Bild wie vorher, kein Bruch. */
.tl-karten:has(.tl-kbox){align-items:start}