/* ==========================================================================
   Seite "Alle Tools" (tools.html)
   Liste der Werkzeuge. Je Eintrag eine gleich grosse Kachel; aufgeklappt
   zeigt sie den Use Case: Anlass, Ablauf und Nutzen im Vertrieb.
   ========================================================================== */

/* ==========================================================================
   Aufmacher
   ========================================================================== */

.tools-hero {
  padding: 70px 7% 55px;
  background: #10192c;
}

.tools-hero h1 {
  font-size: clamp(40px, 5.5cqw, 76px);
  line-height: 1.08;
  letter-spacing: -0.045em;
  max-width: 900px;
}

.tools-hero h1 span {
  color: #83aaff;
}

.tools-hero>p:last-child {
  color: #b8c7dc;
  font-size: 18px;
  line-height: 1.7;
  max-width: 610px;
  margin-top: 25px;
}

/* ==========================================================================
   Werkzeugliste: je Tool ein aufklappbarer Eintrag
   ========================================================================== */

.tool-meta {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 12px;
  color: #3563a7;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 19px;
}

.tools-overview {
  background: #f5f7fa;
  color: #14213a;
  padding: 50px 7% 65px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Gleich hohe Kacheln: die Zeilen des Rasters richten sich nach der
   hoechsten Kachel, und die Zusammenfassung fuellt ihre Kachel aus. Der
   aufgeklappte Eintrag bleibt dabei in seiner Spalte und waechst nach
   unten — die Nachbarkachel rutscht nicht weg. */
.tool-list {
  align-items: stretch;
}

.tool {
  display: flex;
  flex-direction: column;
  align-self: start;
  background: #fff;
  border: 1px solid #c8d1df;
  border-radius: 6px;
  min-width: 0;
  overflow: hidden;
  transition: border-color 0.2s;
}

.tool:hover, .tool[open] {
  border-color: #477ccc;
}

/* min-height statt gleich hoher Rasterzeilen: so sind die Kacheln auch
   dann gleich gross, wenn eine Zeile nur einen Eintrag traegt. Der Umschalter
   sitzt ueber margin-top:auto immer unten. */
.tool>summary {
  display: flex;
  flex-direction: column;
  min-height: 230px;
  list-style: none;
  padding: 29px;
  cursor: pointer;
}

.tool>summary::-webkit-details-marker {
  display: none;
}

.tool h2 {
  font-size: 26px;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.tool-claim {
  font-size: 16px;
  line-height: 1.65;
  color: #546178;
  margin: 15px 0 24px;
  max-width: 470px;
}

.tool-toggle {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 600;
  color: #2354b5;
  min-height: 28px;
}

.tool-toggle-icon {
  font-size: 23px;
  font-weight: 400;
  transition: transform 0.25s;
}

.tool[open] .tool-toggle-icon {
  transform: rotate(45deg);
}

.tool-toggle-open {
  display: none;
}

.tool[open] .tool-toggle-open {
  display: inline;
}

.tool[open] .tool-toggle-closed {
  display: none;
}

.tool-details {
  padding: 23px 29px 29px;
  border-top: 1px solid #d5dfec;
  background: #f7f9fc;
}

.tool-details p {
  font-size: 16px;
  line-height: 1.75;
  color: #4d5e77;
}

.tool-details a {
  display: inline-block;
  color: #2354b5;
  font-size: 14px;
  border-bottom: 1px solid #829ec8;
  padding-bottom: 5px;
  margin-top: 7px;
}

/* --------------------------------------------------------------------------
   Use Case je Werkzeug
   Drei Bloecke in fester Reihenfolge: der Anlass in der Agentur, die Kette
   vom Werkzeug zum Kundengespraech und was daraus im Vertrieb entsteht. Der
   letzte Block ist abgesetzt, weil dort die Antwort auf die Frage steht,
   wegen der jemand die Seite ueberhaupt aufklappt.
   -------------------------------------------------------------------------- */

.tool-case + .tool-case {
  margin-top: 26px;
}

.tool-case-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #3563a7;
  margin-bottom: 10px;
}

/* Die Kette ist nummeriert, weil die Reihenfolge die Aussage traegt. */
.tool-chain {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: schritt;
  display: grid;
  gap: 2px;
}

.tool-chain li {
  counter-increment: schritt;
  position: relative;
  padding: 9px 0 9px 42px;
  font-size: 15px;
  line-height: 1.6;
  color: #2b3b55;
}

.tool-chain li::before {
  content: counter(schritt);
  position: absolute;
  left: 0;
  top: 7px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e3ebf8;
  color: #2354b5;
  font-size: 12px;
  font-weight: 700;
}

/* Die senkrechte Linie verbindet die Schritte zu einer Kette; beim letzten
   Schritt endet sie, sonst liefe sie in den naechsten Block hinein. */
.tool-chain li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 13px;
  top: 33px;
  bottom: -2px;
  border-left: 1px solid #c3d3ea;
}

.tool-case-outcome {
  padding: 20px 22px;
  border-radius: 5px;
  background: #edf3fc;
  border: 1px solid #d2e0f4;
}

.tool-case-outcome .tool-case-label {
  color: #1f4894;
}

.tool-case-outcome p {
  color: #26374f;
}

/* ==========================================================================
   Abschluss
   ========================================================================== */

.tools-closing {
  padding: 55px 7%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}

.tools-closing h2 {
  font-size: clamp(29px, 3.4cqw, 44px);
  line-height: 1.2;
  letter-spacing: -0.035em;
}

/* ==========================================================================
   Schmalere Fenster
   ========================================================================== */

@supports (interpolate-size: allow-keywords) {
  .tool {
    interpolate-size: allow-keywords;
  }

  .tool::details-content {
    block-size: 0;
    overflow: clip;
    opacity: 0;
    transition: block-size 0.3s ease, content-visibility 0.3s allow-discrete, opacity 0.2s;
  }

  .tool[open]::details-content {
    block-size: auto;
    opacity: 1;
  }
}

@container (max-width: 620px) {
  .tools-hero {
    padding: 45px 6%;
  }

  .tools-closing {
    padding: 40px 6%;
    flex-direction: column;
    align-items: start;
  }

  .tools-overview {
    grid-template-columns: 1fr;
    padding: 30px 6% 45px;
  }

  .tool>summary {
    padding: 25px;
  }

  .tool-details {
    padding: 22px 25px 25px;
  }
}