/* tools.css — Panzer IT: KI-Tools-Seite (Vorstellung, "Tool anfragen").
   Setzt auf base.css/components.css/inner.css auf (nur Tokens, keine
   Neudefinition von Variablen). Eigener Klassen-Namespace (.tool-*),
   kollisionsfrei zu home.css (.steps/.svc-card) und anderen Seiten-CSS. */

/* ===== Section-Kopf (analog Startseite, hier lokal dupliziert, da
   Innenseiten home.css nicht laden) ===== */
.section-head{ max-width:44rem; margin-bottom:clamp(2rem,4vw,3.5rem); }
.section-head h2{ margin-top:var(--sp-1); }
.section-head p{ color:var(--c-muted); margin-top:var(--sp-2); }

/* ==========================================================================
   "So funktioniert's" — 3-Schritte-Erklärung
   ========================================================================== */
.tool-steps{
  display:grid; gap:var(--sp-4);
  grid-template-columns:repeat(3,1fr);
}
.tool-step{ position:relative; padding-top:var(--sp-3); }
.tool-step::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--c-copper),transparent);
}
.tool-step__num{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.6rem; height:2.6rem; border-radius:10px;
  font-family:var(--font-display); font-weight:700; color:var(--c-copper);
  font-size:1.15rem; border:1px solid var(--c-line); background:var(--c-panel);
}
.tool-step h3{ font-size:1.15rem; margin-top:var(--sp-2); }
.tool-step p{ color:var(--c-muted); font-size:.95rem; margin-top:.4rem; }

/* ==========================================================================
   Tool-Karten-Grid
   ========================================================================== */
.tool-grid{
  display:grid; gap:var(--sp-3);
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
}
.tool-card{ display:flex; flex-direction:column; gap:.75rem; height:100%; }
.tool-card__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-2); }
.tool-card h3{ font-size:1.2rem; }
.tool-card p{ color:var(--c-muted); font-size:.95rem; }
.tool-card__badge{
  flex:none; font-family:var(--font-display); font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--c-brass);
  background:rgba(217,165,102,.12); border:1px solid rgba(217,165,102,.35);
  padding:.3em .7em; border-radius:999px; white-space:nowrap;
}
.tool-card__cta{ margin-top:auto; }
.tool-card__cta .btn{ width:100%; justify-content:center; }

/* ==========================================================================
   Hinweis-Zeile (individuelles Dokument)
   ========================================================================== */
.tool-note{
  margin-top:var(--sp-5); color:var(--c-muted); font-size:1rem;
  text-align:center; max-width:52ch; margin-inline:auto;
}

@media (max-width:860px){
  .tool-steps{ grid-template-columns:1fr; gap:var(--sp-5); }
}