/* =========================================================================
   Werkzeuge (werkzeuge.html) · Redesign 10/2026 – nur Klassen mit Präfix .tools-
   Look wie die Startseite: helle Eis-Flächen im Wechsel mit tiefen Petrol-Karten,
   große runde Karten, Sticker mit fester Bedeutung (Bildmarke = Konzept/Check,
   Pflanze = Vermögen/Sparplan, Sanduhr = Vorsorgen/Versorgungslücke, Haus = Immobilien,
   Schild = Absichern), Pillen, Termina-Headlines mit Schlüsselwort im Logo-Verlauf.
   Nur Tokens aus styles.css. Globale Komponenten (.calc, .compass, .choice-card …)
   werden nicht umdefiniert, nur im Seitenkontext ergänzt.
   Bewegung nur über die Bausteine (data-sticker, data-stagger, data-marquee, data-zoom,
   data-reveal) und nie in den Werkzeugen selbst (brand.md §22.5).
   ========================================================================= */


/* =========================================================================
   1 · PAGE-HERO – Datenschutz-Hinweis + Werkzeug-Stapel (drei Petrol-Karten)
   ========================================================================= */
.tools-hero .page-hero__text > .tools-hero__privacy { margin-top: var(--space-7); }
.tools-hero__privacy { max-width: 40rem; }
/* 320 px: „Entscheidungen.“ (Termina) ist bei 30 px 301 px breit – eine Spur kleiner statt Auto-Trennung */
@media (max-width: 359.98px) {
  .tools-hero .page-hero__title { font-size: 1.75rem; hyphens: manual; }   /* jedes Wort passt jetzt in die Zeile */
}
.tools-hero__privacy p { align-self: center; font-size: 1rem; line-height: 1.55; hyphens: manual; }

.tools-index { position: relative; max-width: 36rem; }
.tools-index__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  max-width: none;
}
.tools-index__eyebrow::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 100% 0 0 0;
  background: var(--c-blue-700);
  transform: rotate(180deg);
}
.tools-index__list { display: grid; gap: 10px; }
.tools-index__item {
  --tilt: 0deg;
  position: relative;
  container-type: inline-size;
}
.tools-index__item--check  { --tilt: -1.4deg; --card-fill: var(--gradient-deep); }
.tools-index__item--spar   { --tilt: 1.1deg;  --card-fill: var(--gradient-brand-card); }
.tools-index__item--luecke { --tilt: -0.7deg; --card-fill: var(--gradient-deep-2); }
.tools-index__item:hover,
.tools-index__item:focus-within { z-index: 2; }

/* Ganze Karte ist der Link (Fläche dunkel, Text hell) */
.tools-index__link {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: clamp(12px, 3.6cqi, 18px);
  min-height: 112px;
  padding: clamp(16px, 5cqi, 26px) clamp(16px, 4.6cqi, 24px);
  border-radius: var(--r-lg);
  background: var(--card-fill, var(--gradient-deep));
  color: var(--c-on-dark);
  text-decoration: none;
  box-shadow: 0 28px 46px -28px rgba(var(--shadow-c), 0.78), 0 2px 6px -2px rgba(var(--shadow-c), 0.3);
  rotate: var(--tilt);
  transition: rotate 0.6s var(--ease-spring), translate 0.6s var(--ease-spring), box-shadow var(--dur-2) var(--ease-out);
}
.tools-index__link:hover { color: var(--c-on-dark); }
.tools-index__link:hover,
.tools-index__link:focus-visible {
  rotate: 0deg;
  translate: 0 -5px;
  box-shadow: 0 38px 60px -30px rgba(var(--shadow-c), 0.85), 0 2px 6px -2px rgba(var(--shadow-c), 0.3);
}
.tools-index__link:focus-visible { outline: 3px solid var(--c-blue-700); outline-offset: 4px; }
.tools-index__stk { --s: clamp(36px, 12.5cqi, 56px); }
.tools-index__body { display: grid; justify-items: start; gap: 5px; min-width: 0; }
.tools-index__num {
  display: inline-grid;
  place-items: center;
  min-width: 2.6em;
  height: 1.8em;
  padding: 0 0.6em;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--c-blue-300) 26%, transparent);
  color: var(--c-on-dark);
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums lining-nums;
}
.tools-index__title {
  max-width: 100%;
  font-family: var(--font-display);
  font-size: clamp(1rem, 5cqi, 1.5rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--c-on-dark);
  hyphens: manual;
}
.tools-index__meta {
  max-width: 34ch;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--c-blue-200);   /* ≥ 4,59:1 auch auf der hellsten Petrol-Fläche */
  hyphens: manual;
}
.tools-index__go {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-blue-700);
  box-shadow: 0 8px 18px -10px rgba(var(--shadow-c), 0.7);
}
.tools-index__go .icon--winkel { width: 15px; height: 15px; stroke-width: 2.25; }
/* Schmale Karten (Hero-Spalte bei 1024 px, Handy): Pfeil-Kreis klein oben rechts, Titel bekommt die Breite */
@container (max-width: 420px) {
  .tools-index__link { grid-template-columns: auto minmax(0, 1fr); padding-right: clamp(40px, 13cqi, 52px); }
  .tools-index__go { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; }
  .tools-index__go .icon--winkel { width: 13px; height: 13px; }
}
.tools-index__link:hover .tools-index__go .icon--winkel,
.tools-index__link:focus-visible .tools-index__go .icon--winkel { transform: translate(2px, -2px); }
/* Mini-Grafik des Werkzeugs als große, angeschnittene Deko hinter dem Text */
.tools-index__art {
  position: absolute;
  z-index: -1;
  right: -14px;
  bottom: -26px;
  width: clamp(92px, 27cqi, 124px);
  height: auto;
  opacity: 0.2;
  overflow: visible;
  pointer-events: none;
  transition: translate 0.7s var(--ease-spring), rotate 0.7s var(--ease-spring), opacity var(--dur-2);
}
.tools-index__link:hover .tools-index__art { translate: -6px -6px; rotate: -5deg; opacity: 0.3; }
.tools-art--a { fill: var(--c-blue-300); }
.tools-art--b { fill: var(--c-ice-300); }
.tools-art--line { fill: none; stroke: var(--c-on-dark-2); stroke-width: 3; stroke-dasharray: 6 5; }

.tools-index__more {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: none;
  margin-top: var(--space-5);
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--text-muted);
  hyphens: manual;
}
.tools-index__duo { flex: none; display: inline-flex; }
.tools-index__duo .stk { --s: 30px; }
.tools-index__duo .stk + .stk { margin-left: -8px; }
.tools-index__more a { color: var(--link); }

@media (max-width: 1023.98px) {
  .tools-index { max-width: 40rem; }
  .tools-index__item--check  { --tilt: -0.9deg; }
  .tools-index__item--spar   { --tilt: 0.7deg; }
  .tools-index__item--luecke { --tilt: -0.5deg; }
}
@media (min-width: 1024px) {
  .tools-hero .page-hero__aside { padding-left: clamp(0px, 1.5vw, 24px); }
}


/* =========================================================================
   Gemeinsam: Abstände, Sticker in Headlines
   ========================================================================= */
.tools-section .section-head { margin-bottom: var(--space-7); }
.tools-section .section-head__num { flex: none; white-space: nowrap; }
@media (min-width: 1024px) {
  .tools-section .section-head { margin-bottom: var(--space-8); }
}
/* Sticker am Ende einer Headline (im u-nowrap mit dem letzten Wort) bzw. vor dem Schlüsselwort */
.tools-head__stk { --s: 0.8em; margin: 0 0 0 0.2em; vertical-align: -0.08em; }
.tools-head__stk--before { margin: 0 0.04em 0 0.06em; }


/* =========================================================================
   2 · FREIHEITS-CHECK – tiefe Petrol-Karte, Werkzeug als helle Karte darin
   ========================================================================= */
.tools-check { display: none; }
.js .tools-check {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: clip;
  background: var(--c-white);
  border-radius: var(--r-xl);
  box-shadow: 0 0 0 1px rgba(var(--shadow-c), 0.2), 0 50px 90px -50px rgba(var(--shadow-c), 0.95);
  color: var(--c-ink);
  /* helle Karte in dunkler Sektion: Rollen-Tokens zurücksetzen (components.md §15 I) */
  --text: var(--c-ink);
  --text-muted: var(--c-ink-2);
  --heading: var(--c-blue-900);
  --link: var(--c-blue-700);
  --link-hover: var(--c-blue-900);
  --accent: var(--c-accent);
  --focus: var(--c-blue-700);
  --border: var(--c-ice-200);
  --em-fill: var(--gradient-em);
  --card-bg: var(--c-white);
}
.tools-noscript { max-width: 44rem; }

/* Randspalte: Kompass mit Feld-Stickern + Fortschritt */
.tools-check__rail {
  padding: var(--space-5);
  background:
    radial-gradient(120% 80% at 0% 0%, var(--c-white) 0%, transparent 60%),
    linear-gradient(165deg, var(--c-ice-50) 0%, var(--c-ice-100) 100%);
}
.tools-check__rail-inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.tools-check__dial {
  flex: none;
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-areas: "tl tr" "c c" "bl br";
  justify-content: center;
  align-items: center;
  gap: var(--space-3) var(--space-5);
}
.tools-check__dial-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink-2);
}
.tools-check__dial-label .stk { --s: 26px; }
.tools-check__dial-label--tl { grid-area: tl; }
.tools-check__dial-label--tr { grid-area: tr; justify-self: end; }
.tools-check__dial-label--bl { grid-area: bl; }
.tools-check__dial-label--br { grid-area: br; justify-self: end; }
.tools-check__compass { grid-area: c; justify-self: center; width: 120px; }

/* Kompass im Werkzeug: leere Viertel weiß mit feinem Rand */
:where(.tools-check__compass) .compass__q { fill: var(--c-white); stroke: var(--c-ice-300); stroke-width: 1.5; }
.tools-check__compass .compass__q:is(.is-gut, .is-blick, .is-progress, .tools-compass__q--current) { stroke: none; }
.compass__q.tools-compass__q--current { fill: var(--c-blue-300); }

.tools-check__status { flex: 1; min-width: 0; display: grid; gap: var(--space-2); }
.tools-check__count {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums lining-nums;
}
.tools-check__bar {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--c-ice-200);
  overflow: hidden;
}
.tools-check__bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--gradient-brand);
  transform-origin: left center;
  transform: scaleX(var(--progress, 0));
  transition: transform var(--dur-3) var(--ease-out);
}
.tools-check__feld {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: none;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-ink-2);
}
.tools-check__feld .stk { --s: 28px; }
.tools-check__caption { max-width: 30ch; hyphens: manual; }

/* Zustände der Randspalte (Klassen setzt freiheits-check.js) */
.tools-check.is-intro .tools-check__rail-inner,
.tools-check.is-result .tools-check__rail-inner {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.tools-check.is-intro .tools-check__rail,
.tools-check.is-result .tools-check__rail { padding: var(--space-6) var(--space-5); }
.tools-check.is-question .tools-check__dial { display: block; }
.tools-check.is-question .tools-check__dial-label { display: none; }
.tools-check.is-question .tools-check__compass { width: 56px; }
.tools-check.is-question .tools-check__caption { display: none; }
.tools-check.is-result .tools-check__compass { width: min(52vw, 200px); }

/* Inhalt – Ansichtswechsel nur dezent eingeblendet (keine Bewegung im Werkzeug) */
.tools-check__main { min-width: 0; padding: var(--space-6) var(--space-5); }
.tools-check__view { animation: tools-view-in var(--dur-2) var(--ease-out); }
@keyframes tools-view-in { from { opacity: 0; } to { opacity: 1; } }

/* Intro */
.tools-check__intro > * + * { margin-top: var(--space-4); }
.tools-check__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-heading);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
}
.tools-check__text { font-size: var(--fs-lead); line-height: 1.55; max-width: 46ch; color: var(--c-ink-2); hyphens: manual; }
.tools-check__intro .tools-check__start { margin-top: var(--space-6); }
.tools-check__promises {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-7);
}
.tools-check__intro > .tools-check__promises { margin-top: var(--space-7); }
.tools-check__promises li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 6px 16px 6px 6px;
  border-radius: var(--r-pill);
  background: var(--c-ice-50);
  box-shadow: inset 0 0 0 1px rgba(var(--shadow-c), 0.06);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--c-ink);
}
.tools-check__promises .icon {
  flex: none;
  width: 28px;
  height: 28px;
  padding: 6px;
  margin: 0;
  border-radius: 50%;
  background: var(--c-blue-700);
  color: var(--c-white);
  stroke-width: 2.6;
}

/* Frage */
.tools-check__legend {
  max-width: 30ch;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--heading);
  text-wrap: balance;
  hyphens: manual;
}
.tools-check__legend:focus { outline: none; }
.tools-check__hint {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-ink-2);
}
.tools-check__options {
  display: grid;
  gap: var(--space-3);
  max-width: 36rem;
  margin-top: var(--space-6);
}
.tools-check__nudge { margin-top: var(--space-4); }
.tools-check__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  max-width: 36rem;
  margin-top: var(--space-7);
}
.tools-check__back { margin-left: calc(-1 * var(--space-2)); }
.tools-check__back .icon { width: 18px; height: 18px; }

/* Ergebnis */
.tools-result__head { max-width: 100%; }
.tools-result__head > * + * { margin-top: var(--space-3); }
.tools-result__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-heading);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  max-width: 18ch;
}
.tools-result__title:focus { outline: none; }
.tools-result__lead { max-width: 52ch; color: var(--c-ink-2); }
.tools-result__more { display: inline; padding-block: 0; }

/* Vier Felder als Kacheln in Quadrantenlage (große Außenecke wie die Bildmarke) */
.tools-result__fields {
  display: grid;
  gap: var(--fuge);
  margin-top: var(--space-7);
}
.tools-field {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--c-ice-50);
  border-radius: var(--r-lg);
}
.tools-field__name {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: none;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--c-blue-900);
  hyphens: manual;
}
.tools-field__name .stk { --s: 40px; }
.tools-field__state { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); max-width: none; }
.tools-field__swatch { flex: none; width: 26px; height: 26px; overflow: visible; }
.tools-field__swatch .compass__q { stroke-width: 1.5; transform: none; }
.tools-field__state .badge { max-width: 100%; white-space: normal; }
.tools-field__text { font-size: var(--fs-small); line-height: 1.5; color: var(--c-ink); hyphens: manual; }

/* Themen fürs Erstgespräch als helle Karte */
.tools-result__block {
  margin-top: var(--space-7);
  padding: var(--space-5);
  border-radius: var(--r-lg);
  background: var(--c-white);
  box-shadow: inset 0 0 0 1.5px var(--c-ice-200);
}
.tools-result__subtitle {
  margin-bottom: var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-ink-2);
}
.tools-result__themen li { line-height: 1.5; hyphens: manual; }
.tools-result__thema-feld {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-accent);
}
.tools-result__empty { color: var(--c-ink); }
.tools-result__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-5);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px dashed var(--c-ice-300);
}
.tools-result__tools-label { font-size: var(--fs-small); color: var(--c-ink-2); }
.tools-result__tools-list { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }
.tools-result__actions {
  margin-top: var(--space-7);
  gap: var(--space-3) var(--space-4);
}
.tools-result__actions .btn--ghost .icon,
.calc__actions .btn--ghost .icon { width: 18px; height: 18px; }
.tools-result__disclaimer { margin-top: var(--space-5); max-width: 60ch; }
.tools-result__disclaimer a { color: var(--link); }

.tools-result__answers { margin-top: var(--space-4); }
.tools-result__answers > summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-blue-700);
  text-decoration: underline;
  text-underline-offset: 0.3em;
  cursor: pointer;
}
.tools-answers { display: grid; gap: var(--fuge); margin-top: var(--space-3); }
.tools-answers > div {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-md);
  background: var(--c-ice-50);
}
.tools-answers dt { font-size: var(--fs-small); line-height: 1.45; color: var(--c-ink-2); }
.tools-answers dd { font-family: var(--font-ui); font-size: 0.875rem; font-weight: 500; color: var(--c-ink); }
.tools-answers__num {
  display: inline-grid;
  place-items: center;
  min-width: 1.75rem;
  height: 1.4rem;
  margin-right: 0.35em;
  padding: 0 0.4em;
  border-radius: var(--r-pill);
  background: var(--c-ice-200);
  color: var(--c-blue-900);
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
  vertical-align: 0.1em;
}

@media (min-width: 480px) {
  .tools-check.is-intro .tools-check__compass { width: 144px; }
}
@media (min-width: 768px) {
  .tools-check__rail { padding: var(--space-5) var(--space-6); }
  .tools-check__main { padding: var(--space-7) var(--space-6); }
  .tools-check.is-result .tools-check__compass { width: 216px; }
  .tools-result__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "tl tr" "bl br";
  }
  .tools-field--tl { grid-area: tl; border-radius: var(--r-xl) var(--r-sm) var(--r-sm) var(--r-sm); }
  .tools-field--tr { grid-area: tr; border-radius: var(--r-sm) var(--r-xl) var(--r-sm) var(--r-sm); }
  .tools-field--br { grid-area: br; border-radius: var(--r-sm) var(--r-sm) var(--r-xl) var(--r-sm); }
  .tools-field--bl { grid-area: bl; border-radius: var(--r-sm) var(--r-sm) var(--r-sm) var(--r-xl); }
  .tools-result__block { padding: var(--space-6); }
}
@media (min-width: 1024px) {
  .js .tools-check { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .tools-check__rail,
  .tools-check.is-intro .tools-check__rail,
  .tools-check.is-result .tools-check__rail { padding: var(--space-8) var(--space-5); }
  .tools-check__rail-inner,
  .tools-check.is-intro .tools-check__rail-inner,
  .tools-check.is-result .tools-check__rail-inner {
    position: sticky;
    top: calc(var(--header-offset, var(--header-h)) + var(--subnav-h) + var(--space-6));
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
    text-align: center;
  }
  .tools-check__compass,
  .tools-check.is-question .tools-check__compass { width: 168px; }
  .tools-check.is-intro .tools-check__compass { width: 184px; }
  .tools-check.is-result .tools-check__compass { width: 200px; }
  .tools-check.is-question .tools-check__status { text-align: center; }
  .tools-check.is-question .tools-check__feld { justify-content: center; }
  .tools-check.is-intro .tools-check__rail { display: flex; align-items: center; justify-content: center; }
  .tools-check.is-intro .tools-check__rail-inner { position: static; }
  .tools-check__status { width: 100%; flex: none; gap: var(--space-3); }
  .tools-check__main { padding: var(--space-8) clamp(var(--space-6), 4vw, var(--space-8)) var(--space-7); }
  .tools-check__intro { padding-block: var(--space-4); }
}


/* =========================================================================
   3/4 · RECHNER (Sparplan, Versorgungslücke) – Ergänzungen zu .calc
   ========================================================================= */
.tools-calc__group + .tools-calc__group { margin-top: var(--space-7); }
.tools-calc__legend {
  float: left;           /* Legende als normaler Block statt im Fieldset-Rahmen */
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-accent);
  hyphens: manual;
}
.tools-calc__legend::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 100% 0 0 0;
  background: var(--c-blue-700);
  transform: rotate(180deg);
}
.tools-calc__legend + * { clear: both; }
.tools-calc__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}
.tools-calc__row + .field,
.field + .tools-calc__row,
.tools-calc__row + .tools-calc__row { margin-top: var(--space-5); }
.tools-calc__label { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.tools-calc__key .field__hint { max-width: 52ch; }
.tools-calc .field__hint { hyphens: manual; }
.tools-calc .calc__more > summary + * { margin-top: var(--space-4); }
.tools-calc .calc__more[open] { padding-bottom: var(--space-2); }
.tools-calc__prefill {
  margin-bottom: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-left: 4px solid var(--c-blue-700);
  border-radius: var(--r-sm);
  background: var(--c-white);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-ink);
  max-width: none;
}
@media (min-width: 768px) {
  .tools-calc__row { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .tools-calc__row > .field + .field { margin-top: 0; }
  /* Label, Hinweis, Eingabe und Range zweier Felder auf gleicher Höhe (Subgrid) */
  @supports (grid-template-rows: subgrid) {
    .tools-calc__row { grid-template-rows: repeat(5, auto); row-gap: 0; column-gap: var(--space-5); }
    .tools-calc__row > .field {
      grid-row: span 5;
      grid-template-rows: subgrid;
      row-gap: var(--space-2);
      align-items: end;
    }
    .tools-calc__row > .field > .field__label { align-self: end; }
    .tools-calc__row > .field > .field__hint { align-self: start; }
  }
  /* Einzelne Felder (Laufzeit, Rente) nicht über die volle Breite ziehen */
  .tools-calc__narrow { max-width: calc(50% - var(--space-5) / 2); }
  .tools-calc__narrow + .range { max-width: calc(50% - var(--space-5) / 2); }
}

/* Flächen: im weißen Sparplan-Abschnitt sind die Eingaben eisblau, Ergebnis und Verlauf heben sich ab */
.tools-sparsec .tools-calc .calc__inputs { background: var(--c-ice-50); box-shadow: none; }
.tools-sparsec .tools-calc__prefill { background: var(--c-white); }
.tools-calc .calc__result { border-radius: var(--r-xl); }
.tools-lueckesec .tools-calc .calc__result { background: var(--c-ice-200); --chart-track: var(--c-white); }
.tools-lueckesec .tools-calc .calc__kpi { border-top-color: var(--c-ice-300); }

/* Ergebnis-Spalte: klebt seit der Konsolidierung (13.10.2026) global nur noch, wenn sie passt
   (main.js setzt .is-sticky) – hier sind beide Ergebnisse höher als Fenster bzw. Eingabe-Spalte,
   der Sparplan hat den Verlauf darunter → sie bleiben im Fluss. Die frühere Seitenregel entfällt. */

/* Ergebnis */
/* Solange eine Angabe fehlt (Rente leer oder Feld während der Eingabe leer): Werte „–“ gedämpft */
.tools-calc.is-unvollstaendig .calc__hero-value { color: var(--c-ink-2); }
@media (max-width: 479.98px) {
  .tools-calc .calc__actions > .btn:not(.btn--ghost),
  .tools-result__actions > .btn--primary { width: 100%; }
}
.tools-calc .calc__hero-value.is-long { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); }
.tools-calc .calc__kpi dt { hyphens: manual; }
.tools-calc .calc__kpi { display: flex; flex-direction: column; justify-content: space-between; }
.tools-calc .calc__result .calc__stack { background: var(--c-white); }
.tools-split__label {
  margin-bottom: var(--space-3);
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--c-ink);
  max-width: none;
}
.tools-split__label strong { font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.tools-legend--values li { flex-wrap: wrap; }
.tools-legend__value {
  font-family: var(--font-ui);
  font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.tools-calc .calc__table th[scope="row"] { font-weight: var(--fw-body); text-align: left; padding-left: 0; }

/* Teil der Einzahlungen, den die Kosten aufgezehrt haben (Wert unter den Einzahlungen, Sparplan):
   umrandet in der Farbe von „Eingezahlt“, schraffiert in der Farbe des Kosten-Effekts */
.tools-seg--aufgezehrt,
.tools-swatch--aufgezehrt {
  background: repeating-linear-gradient(135deg, var(--chart-3) 0 1.5px, transparent 1.5px 4.5px);
  box-shadow: inset 0 0 0 1.5px var(--chart-1);
}

/* Platzhalter statt leerer Diagramme, solange Angaben fehlen (Klasse setzt das Skript) */
.tools-chart-empty { display: none; }
.tools-calc.is-unvollstaendig .tools-chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  max-width: none;
  padding: var(--space-2) var(--space-4);
  border: 1.5px dashed var(--c-blue-300);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--c-ink-2);
  text-align: center;
  hyphens: manual;
}
.tools-calc.is-unvollstaendig .tools-chart-empty--tall { min-height: 160px; border-radius: var(--r-lg); }
.tools-calc.is-unvollstaendig :is(.calc__stack, .calc__bars, .calc__legend, .tools-split__label--value, .tools-timeline__axis) { display: none; }
/* Ohne JavaScript rechnet die Versorgungslücke nicht (Startzustand ohne Rente): kein Diagramm-Platzhalter,
   kein „Trag … ein“-Hinweis – stattdessen der <noscript>-Hinweis im Ergebnis */
html:not(.js) .tools-calc.is-unvollstaendig .calc__chart,
html:not(.js) .tools-notice { display: none; }

/* Scrollbare Tabellen sind per Tab erreichbar (tabindex="0", role="region") */
.tools-table-wrap:focus-visible,
.tools-calc .calc__table-wrap:focus-visible { outline-offset: 2px; border-radius: var(--r-xs); }

/* Hinweis im Ergebnis (Versorgungslücke ohne Rente / ohne Lücke) */
.tools-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}
.tools-notice p { max-width: 36ch; hyphens: manual; }
.tools-notice__btn { display: none; margin-right: calc(-1 * var(--space-2)); }
.js .tools-notice__btn { display: inline-flex; }

/* Verlauf über die Jahre – volle Breite unter Eingaben und Ergebnis */
.tools-calc__timeline { display: none; }
.js .tools-calc__timeline {
  display: block;
  padding: var(--space-5);
  background: var(--c-ice-50);
  border-radius: var(--r-xl);
  color: var(--c-ink);
}
.tools-timeline__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  margin-bottom: var(--space-5);
}
.tools-timeline__title {
  font-size: var(--fs-h4);
  font-weight: 500;
  line-height: 1.25;
  color: var(--c-blue-900);
}
.tools-timeline__legend { margin-top: 0; }
.tools-timeline__bars { height: 160px; }
.tools-timeline__bars .calc__bar > span { border-radius: 3px; }
.tools-timeline__axis {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1.5px solid var(--c-ice-300);
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--c-ink-2);
  font-variant-numeric: tabular-nums lining-nums;
  max-width: none;
}
.tools-calc__timeline .calc__table { margin-top: var(--space-3); }
@media (min-width: 768px) {
  .js .tools-calc__timeline { padding: var(--space-6); }
  .tools-timeline__bars,
  .tools-calc.is-unvollstaendig .tools-chart-empty--tall { height: 200px; }
}
@media (min-width: 1024px) {
  .tools-calc > .tools-calc__timeline { grid-column: 1 / -1; }
  .js .tools-calc__timeline { padding: var(--space-7); }
  .tools-timeline__bars,
  .tools-calc.is-unvollstaendig .tools-chart-empty--tall { height: 220px; }
}


/* =========================================================================
   Laufband zwischen Sparplan (weiß) und Versorgungslücke (Eis) – data-marquee
   Ohne Bewegung: ruhiges, umbrechendes Band; mit Bewegung schräg und scroll-gekoppelt.
   ========================================================================= */
.tools-tape {
  --tape-above: var(--c-white);
  --tape-below: var(--c-ice-50);
  --tape-h: clamp(150px, 15vw, 230px);
}
.tools-tape__band { --tape-tilt: -2.4deg; --tape-fs: clamp(1.0625rem, 0.75rem + 1.6vw, 2.125rem); }
/* Ohne Bewegung dürfen lange Begriffe umbrechen (zentriert); erst das laufende Band bleibt einzeilig */
.tools-tape li { text-align: center; hyphens: manual; white-space: normal; }
.tools-tape .marquee.is-running li { white-space: nowrap; }


/* =========================================================================
   5 · WEITERE WERKZEUGE – hellere Petrol-Karte, zwei große Karten (gestaffelt)
   ========================================================================= */
.tools-moresec {
  /* hellere Petrol-Fläche: Sekundärtext eine Stufe heller (≥ 4,5:1 auch oben links auf #335b67) */
  --text-muted: var(--c-blue-200);
  --on-dark-muted: var(--c-blue-200);
  background: var(--gradient-brand-card);
}
.tools-more {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(12px, 1.4vw, 20px);
}
@media (min-width: 768px) {
  .tools-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.tools-more__card {
  container-type: inline-size;
  gap: var(--space-4);
  min-height: 100%;
  padding: clamp(24px, 3.4vw, 48px);
  border-radius: var(--r-xl);
}
.tools-more__card--ice { background: var(--c-ice-200); --card-bg: var(--c-ice-200); }
.tools-more__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: clamp(var(--space-4), 5cqi, var(--space-8));
}
.tools-more__stk { flex: none; }
.card--feature .tools-more__preview { margin: 0; }
.card--feature .tools-more__preview svg { width: clamp(96px, 30cqi, 168px); }
.tools-more__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); flex: 1; }
.tools-more__title {
  max-width: 100%;
  font-size: clamp(1.25rem, 6.2cqi, 2rem);
  line-height: 1.08;
  letter-spacing: -0.028em;
}
.tools-more__body .card__text { max-width: 44ch; hyphens: manual; }
.tools-more__body .link-arrow { margin-top: auto; padding-top: var(--space-3); }
.tools-more__card:hover .tools-more__stk { --r: 4deg; }
/* Fokusrahmen liegt außerhalb der Karte auf Petrol: Blau-700 (Karten-Token) wäre dort kaum sichtbar */
.tools-more__card:has(.card__link:focus-visible) { outline-color: var(--c-white); }

/* Dekorative Mini-Grafiken (ohne Werte) */
.tools-glyph-1 { fill: var(--chart-1); }
.tools-glyph-2 { fill: var(--chart-2); }
.tools-glyph-3 { fill: var(--c-blue-300); }
.tools-glyph-track { fill: var(--c-ice-100); }
.tools-more__card--ice .tools-glyph-track { fill: var(--c-white); }
.tools-prev-house { fill: none; stroke: var(--c-blue-700); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.tools-prev-box { fill: none; stroke: var(--c-blue-500); stroke-width: 2; }
.tools-prev-box.is-on { fill: var(--c-blue-700); stroke: var(--c-blue-700); }
.tools-prev-check { fill: none; stroke: var(--c-white); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }


/* =========================================================================
   6 · SO RECHNEN UNSERE WERKZEUGE – Kopf links (klebt), Accordion rechts
   ========================================================================= */
.tools-annahmen-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7) var(--grid-gap);
}
.tools-annahmen__head.section-head { margin-bottom: 0; }
@media (min-width: 1024px) {
  .tools-annahmen-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
    column-gap: calc(var(--grid-gap) * 2);
  }
  .tools-annahmen__head {
    position: sticky;
    top: calc(var(--header-offset, var(--header-h)) + var(--subnav-h) + var(--space-6));
  }
}
.tools-annahmen .accordion__panel > * + * { margin-top: var(--space-5); }
.tools-formula { max-width: 64ch; }
.tools-formula li { line-height: 1.6; }
.tools-formula--steps { display: grid; gap: var(--space-3); counter-reset: tools-step; }
.tools-formula--steps > li {
  position: relative;
  padding-left: 2.9rem;
  counter-increment: tools-step;
}
.tools-formula--steps > li::before {
  content: counter(tools-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.12em;
  display: inline-grid;
  place-items: center;
  min-width: 2.2rem;
  height: 1.55rem;
  padding: 0 0.5em;
  border-radius: var(--r-pill);
  background: var(--c-ice-200);
  color: var(--c-blue-900);
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums lining-nums;
}
.tools-formula sup { font-size: 0.7em; line-height: 0; }
.tools-table-wrap { overflow-x: auto; max-width: 100%; }
.tools-table {
  min-width: 100%;
  font-size: var(--fs-small);
  line-height: 1.45;
  font-variant-numeric: tabular-nums lining-nums;
}
.tools-table th,
.tools-table td {
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--c-ice-200);
}
.tools-table thead th {
  /* Kein Notumbruch mitten im Wort („GESPRÄCH|STHEMA“ bei 320 px): getrennt wird nur am &shy;,
     der Trennstrich darf dabei ins rechte Zellen-Padding ragen (Endabnahme). */
  overflow-wrap: normal;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink-2);
  border-bottom: 1.5px solid var(--c-ice-300);
}
.tools-table tbody th {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--c-ink);
}
.tools-table__note {
  display: block;
  margin-top: 2px;
  font-family: var(--font-text);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--c-ink-2);
}
.tools-table td { font-variant-numeric: tabular-nums lining-nums; }
.tools-annahmen__disclaimer {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-md);
  background: var(--c-ice-50);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-ink-2);
  max-width: none;
}
.tools-annahmen__clear { padding-top: var(--space-2); }


/* =========================================================================
   DRUCK: Druck-Button eines Werkzeugs druckt nur dessen Sektion
   (Klassen setzt das jeweilige Werkzeug-Skript, nach dem Druck entfernt)
   ========================================================================= */
@media print {
  .tools-is-printing main > :not(.tools-print-scope):not(.print-head) { display: none; }
  .tools-print-scope { padding-block: 0; }
  .tools-print-scope .section-head { margin-bottom: 6mm; }
  .tools-print-scope .section-head__lead { display: none; }
  .tools-head__stk, .tools-tape { display: none; }

  /* Werkzeug-Stapel im Hero: hell und lesbar */
  .tools-index__link {
    background: none;
    border: 1px solid var(--c-blue-400);
    box-shadow: none;
    rotate: none;
    color: var(--c-ink);
  }
  .tools-index__title { color: var(--c-blue-700); }
  .tools-index__meta { color: var(--c-ink-2); }
  .tools-index__num { background: none; color: var(--c-ink); }
  .tools-index__art, .tools-index__go, .tools-index__stk, .tools-index__duo { display: none; }

  .js .tools-check { border: 0; box-shadow: none; }
  /* hellere Petrol-Fläche: eigener Sekundärtext-Token würde die Druck-Umbiegung (styles.css) überstimmen */
  .tools-moresec { --text-muted: var(--c-ink-2); --on-dark-muted: var(--c-ink-2); }
  .tools-check__rail { background: none; }
  .tools-check__caption,
  .tools-check__promises,
  .tools-calc__prefill,
  .tools-notice__btn { display: none; }
  .tools-field, .tools-answers > div { background: none; border: 1px solid var(--c-blue-400); }
  .tools-result__block { box-shadow: none; border: 1px solid var(--c-blue-400); }
  .tools-calc__timeline { break-inside: avoid; }
  .tools-calc__timeline .calc__table-wrap { max-height: none; overflow: visible; }
  /* Diagramme, Legenden-Farbfelder, Zustands-Badges und Feld-Sticker sind Hintergrundflächen –
     ohne diese Angabe druckt der Browser sie nicht (Balken und Sticker wären leer) */
  .tools-calc :is(.calc__stack > span, .calc__bar > span, .calc__swatch),
  .tools-calc .calc__kpi--accent dt::before,
  .tools-check :is(.stk, .badge, .tools-check__bar, .tools-check__bar > span) {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .tools-more__card--ice { background: var(--c-white); }

  /* Rechner im Druck: Eingaben als kompakte Liste „Label … Wert“, dann das Ergebnis */
  .tools-print-scope .calc,
  .tools-calc { break-inside: auto; }
  .tools-calc .calc__inputs { padding: 0; border: 0; }
  .tools-calc__group + .tools-calc__group { margin-top: 4mm; padding-top: 0; border: 0; }
  .tools-calc__legend { margin-bottom: 1mm; }
  .tools-calc__legend::before { display: none; }
  .tools-calc__row { display: block; }
  .tools-calc .field,
  .tools-calc__row > .field {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 4mm;
    margin: 0;
    padding: 1.2mm 0;
    border-bottom: 1px solid var(--c-blue-400);
  }
  .tools-calc .field__hint,
  .tools-calc .field__error,
  .tools-calc .calc__more > summary,
  .tools-calc__prefill,
  .tools-calc__timeline .calc__table { display: none; }
  .tools-calc .calc__more { margin: 0; border: 0; }
  .tools-calc .input-group { display: inline-flex; align-items: baseline; width: auto; max-width: none; }
  .tools-calc .input {
    width: 12ch;
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 10pt;
  }
  .tools-calc .input-group__suffix { position: static; transform: none; margin-left: 1mm; font-size: 10pt; color: var(--c-ink); }
  .tools-calc .calc__result,
  .tools-calc__timeline { break-inside: avoid; }
  .tools-calc .calc__result { margin-top: 5mm; background: var(--c-white); }
  .js .tools-calc__timeline { margin-top: 5mm; background: var(--c-white); padding: 0; }
  .tools-timeline__bars { height: 32mm; }
}
/* Geschlossene <details> im Druck öffnen: Chromium legt den Inhalt in ::details-content
   (content-visibility: hidden) – die globale Regel details:not([open]) > * greift dort nicht. */
@media print {
  @supports selector(::details-content) {
    .tools-calc .calc__more::details-content,
    .tools-result__answers::details-content { content-visibility: visible; block-size: auto; }
  }
}

/* Kleine Viewport-Höhe (200–400 % Zoom, Tablet quer): Header und Subnav scrollen dann mit (global),
   deshalb klebt auch hier nichts */
@media (max-height: 500px) {
  .tools-check__rail-inner,
  .tools-check.is-intro .tools-check__rail-inner,
  .tools-check.is-result .tools-check__rail-inner,
  .tools-annahmen__head { position: static; }
}