/* ============================================================================
   Tool-Oberflächen — wird NUR auf Tool-Seiten geladen.

   Eigene Tonalität: höhere Informationsdichte, mehr Linien, mehr Mono,
   kompaktere Abstände. Gleiche Tokens wie main.css, andere Verdichtung.
   Es soll sich wie ein Instrument anfassen, nicht wie eine Marketingseite.
   ========================================================================== */

@layer components {
  /* --- Seitengerüst ---------------------------------------------------- */

  /* Platz für die klebende Ergebnisleiste auf Mobil, damit sie nie Inhalt
     verdeckt. Wird ab der Zweispaltigkeit zurückgenommen. */
  .t-page {
    padding-block-end: 4.5rem;
  }

  /* --- Tool-Kopfzeile -------------------------------------------------- */

  /* Nennt Aufwand und Bedingungen VOR der Nutzung — senkt die Einstiegshürde,
     weil der Nutzer weiß, worauf er sich einlässt. */
  /* Ohne Rahmenlinien: Die getönte Arbeitsfläche direkt darunter grenzt schon
     ab. Zwei Linien plus Flächenkante wären genau die Rasteroptik, die weg
     sollte. */
  .t-header {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-md);
    align-items: baseline;
    justify-content: space-between;
    padding-block-end: var(--space-sm);
  }

  .t-header__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-mono-label);
    hyphens: manual;
  }

  .t-header__meta > * + *::before {
    content: "· ";
  }

  /* --- Zweispaltiges Gerüst: Eingaben links, Ergebnis rechts ----------- */

  /* Das Tool ist jetzt eine erkennbare Arbeitsfläche: getönt, mit Radius,
     ohne Rahmen. Marketingabschnitte sind offen und weiß, das Tool ist ein
     abgegrenztes Instrument. Dadurch entsteht der Unterschied zwischen
     „hochwertig, ruhig" und „präzise, funktional" über die Fläche und nicht
     über noch mehr Linien.
     Nebeneffekt mit Absicht: Das Ergebnis-Panel bleibt weiß und ist damit das
     hellste Element — also das visuell wichtigste. */
  .t-tool {
    display: grid;
    gap: var(--space-lg);
    align-items: start;
    padding: var(--space-lg);
    background: var(--color-surface);
    border-radius: var(--radius);
  }

  /* --- Eingabeblöcke (maximal drei) ----------------------------------- */

  .t-inputs {
    display: grid;
    gap: var(--space-md);
    /* Verhindert, dass lange Labels das Grid sprengen */
    min-width: 0;
  }

  .t-block {
    padding: 0;
    margin: 0;
    border: 0;
  }

  /* Sans statt gesperrtem Mono-Kapitälchen: die Nummer vorn ordnet den Block
     ein, das künstliche Uppercase war der stärkste „Konsole"-Eindruck. */
  .t-block__legend {
    display: block;
    width: 100%;
    padding: 0 0 var(--space-2xs);
    margin-block-end: var(--space-sm);
    border-block-end: var(--border-width) solid var(--color-border-strong);
    color: var(--color-text);
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-normal);
    hyphens: manual;
  }

  .t-block__fields {
    display: grid;
    gap: var(--space-md);
  }

  /* --- Control: Slider + gekoppeltes Zahlenfeld ------------------------ */

  /* Der Slider allein ist für Tastatur und exakte Werte untauglich, das
     Zahlenfeld allein macht Größenordnungen nicht greifbar. Deshalb beides,
     bidirektional gekoppelt (siehe assets/js/lib/tool.js). */
  .t-control {
    display: grid;
    gap: var(--space-3xs);
    min-width: 0;
  }

  .t-control__head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3xs) var(--space-2xs);
    align-items: baseline;
    justify-content: space-between;
  }

  .t-control__label {
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
  }

  .t-control__row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-sm);
    align-items: center;
  }

  /* accent-color statt Nachbau des Sliders: eine Zeile, native
     Tastaturbedienung, native Zustände. Die einfachste Lösung, die die
     Anforderung vollständig erfüllt. */
  .t-control__range {
    width: 100%;
    min-width: 0;
    height: 44px; /* Touch-Ziel */
    accent-color: var(--color-accent);
    cursor: pointer;
  }

  /* Feste Spaltenbreiten, damit die Zahlenfelder aller Steuerelemente
     untereinander fluchten. Mit flex würden unterschiedlich lange Einheiten
     ("h" gegen "€/Mon.") die Felder gegeneinander verschieben — in einem
     Raster-Design ist das sofort sichtbar. */
  .t-control__number {
    display: grid;
    grid-template-columns: 5.5rem 3.25rem;
    gap: var(--space-3xs);
    align-items: center;
  }

  .t-control__input {
    width: 100%;
    min-height: 44px;
    padding: var(--space-3xs) var(--space-2xs);
    background: var(--color-bg);
    border: var(--border-width) solid var(--color-border-strong);
    /* Kleinerer Radius als in Marketingformularen — technischer Charakter. */
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: max(1rem, var(--text-body));
    font-variant-numeric: tabular-nums;
    text-align: right;
  }

  .t-control__unit {
    flex: none;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-mono-label);
    hyphens: manual;
  }

  .t-control__hint {
    color: var(--color-text-muted);
    font-size: var(--text-small);
  }

  /* --- Ergebnis-Panel -------------------------------------------------- */

  .t-result {
    min-width: 0;
    border: var(--border-width) solid var(--color-border);
    /* Kleinerer Radius als im Marketingbereich: technischer, präziser. */
    border-radius: var(--radius-sm);
    background: var(--color-bg);
  }

  /* Akzentgetönte Kopfzeile. Das ist der eine Ort, an dem eine getönte Fläche
     gerechtfertigt ist: Sie markiert die wichtigste Information der Seite.
     Sans, kein Uppercase — die Fläche macht die Auszeichnung, nicht der Satz. */
  .t-result__head {
    padding: var(--space-xs) var(--space-md);
    background: var(--color-accent-surface);
    color: var(--color-accent);
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-normal);
  }

  .t-result__body {
    padding: var(--space-md);
  }

  /* Eine dominante Kennzahl. Sie ist die Antwort, nicht die Dekoration.
     Jetzt in Akzentfarbe und auf der eigenen KPI-Größenstufe — vorher war sie
     neutral und kleiner als die Überschrift der Seite. */
  .t-result__primary {
    display: block;
    color: var(--color-accent);
    font-size: var(--text-kpi);
    font-weight: var(--weight-display);
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-display);
    font-variant-numeric: tabular-nums;
    hyphens: manual;
  }

  .t-result__primary-label {
    display: block;
    margin-block-start: var(--space-2xs);
    color: var(--color-text-muted);
    font-size: var(--text-small);
  }

  /* 2–4 Nebenkennzahlen, durch Linien getrennt statt durch Karten */
  .t-result__grid {
    display: grid;
    gap: var(--space-sm);
    grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr));
    padding-block-start: var(--space-sm);
    margin-block-start: var(--space-sm);
    border-block-start: var(--border-width) solid var(--color-border);
  }

  .t-result__value {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-h3);
    font-variant-numeric: tabular-nums;
  }

  .t-result__label {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--text-small);
    hyphens: manual;
  }

  /* Der eigentliche Wert des Tools: nicht die Zahl, sondern ihre Bedeutung. */
  .t-result__interpretation {
    padding-block-start: var(--space-sm);
    margin-block-start: var(--space-sm);
    border-block-start: var(--border-width) solid var(--color-border);
    font-size: var(--text-small);
  }

  .t-result__actions {
    padding: var(--space-2xs) var(--space-sm) var(--space-sm);
  }

  /* "Ergebnis als PDF" ohne Backend und ohne Datenabgabe: Druckdialog.
     Icon ist funktional (Download/Ausgabe), deshalb zulässig. */
  .t-result__print::before {
    content: "";
    width: 0.9em;
    height: 0.9em;
    background: currentColor;
    mask: var(--icon-download) center / contain no-repeat;
  }

  /* Wertänderung: kurzes Aufblenden, damit die Wirkung der Eingabe sichtbar
     ist. Nur opacity, ≤ 300 ms, kein Layout-Einfluss. Kein Count-up. */
  @keyframes t-flash {
    from {
      opacity: 0.45;
    }
    to {
      opacity: 1;
    }
  }

  .t-result__primary[data-changed],
  .t-result__value[data-changed] {
    animation: t-flash 220ms var(--ease);
  }

  /* --- Klebende Ergebnisleiste (nur Mobil) ---------------------------- */

  .t-bar {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-2xs) var(--container-pad);
    /* Sicherer Bereich auf iPhones mit Home-Indikator */
    padding-block-end: max(var(--space-2xs), env(safe-area-inset-bottom));
    background: var(--color-bg);
    box-shadow: var(--shadow-overlay);
  }

  .t-bar__value {
    font-family: var(--font-mono);
    font-size: var(--text-body);
    font-weight: var(--weight-medium);
    font-variant-numeric: tabular-nums;
  }

  .t-bar__label {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--text-mono-label);
    font-family: var(--font-mono);
    hyphens: manual;
  }

  /* --- Diagramm: CSS statt Bibliothek --------------------------------- */

  /* Ein Balkendiagramm braucht kein JavaScript und keine Chart-Library.
     Der Wert kommt als Custom Property aus dem HTML (--bar: 62%) — das ist
     Daten, nicht Gestaltung. Die Zahl steht zusätzlich als Text daneben,
     damit die Information nicht allein an Länge und Farbe hängt. */
  .t-chart {
    display: grid;
    gap: var(--space-2xs);
  }

  .t-chart__row {
    display: grid;
    grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) auto;
    gap: var(--space-sm);
    align-items: center;
    font-size: var(--text-small);
  }

  .t-chart__label {
    hyphens: manual;
    overflow-wrap: break-word;
  }

  /* display: block ist Pflicht, nicht Kosmetik: Bahn und Balken sind <span>,
     und auf Inline-Elementen wirken width und height nicht. */
  .t-chart__track {
    display: block;
    height: 0.75rem;
    background: var(--color-bg);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-sm);
  }

  .t-chart__bar {
    display: block;
    height: 100%;
    width: var(--bar, 0%);
    background: var(--bar-color, var(--color-data-1));
    border-radius: inherit;
  }

  .t-chart__bar--2 {
    --bar-color: var(--color-data-2);
  }

  .t-chart__bar--3 {
    --bar-color: var(--color-data-3);
  }

  .t-chart__value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
  }

  /* --- Methodik / Annahmen -------------------------------------------- */

  .t-assumptions {
    font-size: var(--text-small);
  }

  .t-assumptions dt {
    color: var(--color-text);
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
  }

  .t-assumptions dd {
    margin: 0 0 var(--space-2xs);
  }

  .t-formula {
    display: block;
    padding: var(--space-xs) var(--space-sm);
    overflow-x: auto;
    background: var(--color-surface);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--text-small);
    hyphens: manual;
  }

  /* --- Frage (Self-Assessment) --------------------------------------------
     Eine Aussage plus eine Antwortskala. Ein <fieldset> gruppiert die
     Radios, die <legend> ist die Frage. Getrennt durch EINE Linie, nicht
     durch Kästen — gleiche Sprache wie die Reihen im Marketingbereich.
     Über lib/tool.js liest das Tool den Wert des gewählten Radios.

     Bewusst KEIN display:grid auf dem <fieldset>: <legend> als Grid-Item
     rendert je nach Browser unzuverlässig. Normaler Blockfluss. */
  .t-question {
    padding: 0;
    margin: 0;
    border: 0;
  }

  .t-question + .t-question {
    padding-block-start: var(--space-md);
    margin-block-start: var(--space-md);
    border-block-start: var(--border-width) solid var(--color-border);
  }

  /* <legend> auf ein normales Blockelement zurücksetzen (wie t-block__legend). */
  .t-question__legend {
    display: block;
    width: 100%;
    padding: 0;
    margin-block-end: var(--space-2xs);
    font-size: var(--text-body);
    font-weight: var(--weight-medium);
    hyphens: manual;
  }

  .t-question__options {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-lg);
  }

  .t-question__option {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    /* Touch-Ziel, ohne die Zeile aufzublähen */
    min-height: 44px;
    cursor: pointer;
  }

  .t-question__option input {
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--color-accent);
    cursor: pointer;
  }
}

/* ============================================================================
   Zweispaltigkeit erst ab 64rem (1024px). Zwischen 768 und 1024 bliebe für
   ein klebendes Panel zu wenig Breite.
   ========================================================================== */

@media (width >= 64rem) {
  @layer components {
    .t-page {
      padding-block-end: 0;
    }

    .t-tool {
      grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
      gap: var(--space-xl);
    }

    /* Das Panel läuft beim Scrollen mit: jede Eingabe wirkt sichtbar. */
    .t-result {
      position: sticky;
      inset-block-start: calc(var(--header-height) + var(--space-md));
    }

    /* Ab hier übernimmt das klebende Panel die Aufgabe der Leiste. */
    .t-bar {
      display: none;
    }
  }
}