/* ==========================================================================
   Kostenrechner — nur die Ergänzungen zu styles.css
   ==========================================================================

   Farben, Schriften, Kopf- und Fußzeile, Buttons und der Papierkorn-Layer
   kommen aus styles.css. Diese Datei setzt keine eigenen Farbwerte, sondern
   arbeitet ausschließlich mit den dort definierten Variablen.

   Aufbau: Kopfbereich, Layout, Eingaben, Zeitannahmen, Ergebniskarten,
   Balken, Fußnote, CTA. Mobil zuerst; die zweispaltige Ansicht steht ganz
   am Ende.
   -------------------------------------------------------------------------- */

/* --- Kopfbereich ---------------------------------------------------------- */

.rechner-kopf {
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

/* Eine Stufe kleiner als die H1 der Startseite: hier steht ein Werkzeug,
   keine Bühne. */
.rechner__title {
  max-width: 20ch;
  margin-top: 1.25rem;
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-variation-settings: "opsz" 120, "wght" 600, "SOFT" 10, "WONK" 0;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.rechner-kopf .section__lead {
  margin-top: 1.5rem;
}

/* --- Layout --------------------------------------------------------------- */

.rechner-flaeche {
  padding-top: clamp(2.5rem, 6vw, 4rem);
}

.rechner-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}

/* --- Eingaben ------------------------------------------------------------- */

.eingaben {
  padding: 1.5rem;
  background-color: var(--papier-hoch);
  border: 1px solid var(--espresso-haarlinie);
  border-radius: 18px;
  box-shadow: var(--schatten-weich);
}

.eingaben__titel {
  margin-bottom: 1.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.feld + .feld {
  margin-top: 1.75rem;
}

.feld__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  text-wrap: pretty;
}

/* Der Stundensatz steht rechts in der Zeile des Labels — nur dort, wo ein
   Regler den Wert sonst nirgends zeigt. */
.feld__wert {
  flex: none;
  color: var(--honey);
  font-size: 1.125rem;
  font-weight: 700;
  font-feature-settings: "tnum" 1, "lnum" 1;
  white-space: nowrap;
}

.feld__skala {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  color: var(--espresso-muted);
  font-size: 0.8125rem;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* --- Zähler (Zahl mit Minus und Plus) ------------------------------------- */

/* Zwei Tasten links und rechts vom Feld: auf dem Telefon kommt niemand mit
   der Zahlentastatur schneller ans Ziel. */
.zaehler {
  display: flex;
  align-items: stretch;
  border: 1px solid color-mix(in srgb, var(--espresso) 14%, transparent);
  border-radius: 12px;
  background-color: var(--papier);
  overflow: hidden;
}

.zaehler:focus-within {
  border-color: var(--honey);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--honey) 22%, transparent);
}

.zaehler__taste {
  flex: none;
  width: var(--tap);
  min-height: var(--tap);
  padding: 0;
  background-color: transparent;
  border: 0;
  color: var(--espresso);
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s var(--ease);
}

.zaehler__taste:hover {
  background-color: var(--espresso-hover);
}

.zaehler__taste:focus-visible {
  outline: 2px solid var(--espresso);
  outline-offset: -2px;
}

.zaehler__taste[disabled] {
  opacity: 0.35;
  cursor: default;
}

.zaehler__feld {
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: var(--tap);
  padding: 0.5rem 0.25rem;
  background-color: transparent;
  border: 0;
  border-inline: 1px solid color-mix(in srgb, var(--espresso) 10%, transparent);
  font-size: 1.125rem;
  font-weight: 600;
  font-feature-settings: "tnum" 1, "lnum" 1;
  text-align: center;
}

.zaehler__feld:focus {
  outline: none;
}

/* Die nativen Pfeilchen entfallen: die beiden Tasten machen dasselbe,
   und zwar in Tap-Größe. */
.zaehler__feld::-webkit-outer-spin-button,
.zaehler__feld::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.zaehler__feld[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

/* --- Regler --------------------------------------------------------------- */

.regler {
  width: 100%;
  height: var(--tap);
  margin: 0;
  padding: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.regler:focus {
  outline: none;
}

/* Schiene */
.regler::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 100px;
  background-color: color-mix(in srgb, var(--espresso) 12%, transparent);
}

.regler::-moz-range-track {
  height: 6px;
  border-radius: 100px;
  background-color: color-mix(in srgb, var(--espresso) 12%, transparent);
}

/* Griff — die margin-top zentriert ihn auf der 6px-Schiene (Webkit rechnet
   das nicht selbst). */
.regler::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -10px;
  border: 3px solid var(--papier);
  border-radius: 100px;
  background-color: var(--honey);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--espresso) 20%, transparent);
  cursor: grab;
}

.regler::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border: 3px solid var(--papier);
  border-radius: 100px;
  background-color: var(--honey);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--espresso) 20%, transparent);
  cursor: grab;
}

.regler:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--honey) 35%, transparent);
}

.regler:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--honey) 35%, transparent);
}

/* --- Zeitannahmen --------------------------------------------------------- */

.annahmen {
  margin-top: 2rem;
  border-top: 1px solid var(--espresso-line);
}

.annahmen__kopf {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--tap);
  padding-top: 1rem;
  cursor: pointer;
  list-style: none;
}

/* Das native Dreieck weg, dafür ein eigenes, das sich dreht. */
.annahmen__kopf::-webkit-details-marker {
  display: none;
}

.annahmen__kopf::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--honey);
  border-bottom: 2px solid var(--honey);
  rotate: -45deg;
  translate: 0 -2px;
  transition: rotate 0.25s var(--ease);
}

.annahmen[open] .annahmen__kopf::before {
  rotate: 45deg;
  translate: 0 -1px;
}

.annahmen__kopf:focus-visible {
  outline: 2px solid var(--espresso);
  outline-offset: 2px;
  border-radius: 4px;
}

.annahmen__titel {
  font-size: 1rem;
  font-weight: 600;
}

.annahmen__hinweis {
  margin-left: auto;
  color: var(--espresso-muted);
  font-size: 0.8125rem;
}

.annahmen__inhalt {
  padding-top: 1.25rem;
}

.annahmen__text,
.annahmen__grundlage {
  color: var(--espresso-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.annahmen__liste {
  margin-top: 1.25rem;
}

.annahme {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding-block: 0.75rem;
}

.annahme + .annahme {
  border-top: 1px solid var(--espresso-haarlinie);
}

.annahme__label {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.35;
  text-wrap: pretty;
}

.annahme__bezug {
  display: block;
  margin-top: 0.125rem;
  color: var(--espresso-muted);
  font-size: 0.8125rem;
  font-weight: 400;
}

.annahme__eingabe {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.annahme__eingabe input {
  width: 4.25rem;
  min-height: var(--tap);
  padding: 0.375rem 0.5rem;
  background-color: var(--papier);
  border: 1px solid color-mix(in srgb, var(--espresso) 14%, transparent);
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  font-feature-settings: "tnum" 1, "lnum" 1;
  text-align: center;
}

.annahme__eingabe input:focus-visible {
  outline: none;
  border-color: var(--honey);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--honey) 22%, transparent);
}

.annahme__einheit {
  color: var(--espresso-muted);
  font-size: 0.8125rem;
}

/* Der Anteil, den Romy übernimmt — als Pille in Honey. */
.annahme__quote {
  justify-self: end;
  padding: 0.25rem 0.5rem;
  background-color: var(--papier-honey);
  border: 1px solid var(--honey-haarlinie);
  border-radius: 100px;
  color: color-mix(in srgb, var(--honey) 75%, var(--espresso));
  font-size: 0.8125rem;
  font-weight: 700;
  font-feature-settings: "tnum" 1, "lnum" 1;
  white-space: nowrap;
}

.annahmen__grundlage {
  margin-top: 1.25rem;
}

.annahmen__zuruecksetzen {
  margin-top: 1.25rem;
}

.btn--klein {
  padding: 0.6rem 1.125rem;
  font-size: 0.875rem;
}

/* --- Ergebnisspalte ------------------------------------------------------- */

.ergebnis-spalte {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.karte {
  padding: 1.5rem;
  background-color: var(--papier-hoch);
  border: 1px solid var(--espresso-haarlinie);
  border-radius: 18px;
  box-shadow: var(--schatten-weich);
}

.karte__titel {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.karte__unterzeile {
  margin-top: 0.25rem;
  color: var(--espresso-muted);
  font-size: 0.875rem;
}

.ergebnis__frage {
  color: var(--espresso-muted);
  font-size: 0.9375rem;
  line-height: 1.4;
  text-wrap: pretty;
}

/* Fraunces mit Tabellenziffern: beim Tippen springt die Zahl dann nicht
   in der Breite. */
.zahl {
  font-family: var(--font-headline);
  font-weight: 600;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}

.zahl--gross {
  margin-top: 0.625rem;
  font-size: clamp(2.5rem, 9vw, 3.5rem);
  font-variation-settings: "opsz" 120, "wght" 600, "SOFT" 10, "WONK" 0;
}

.zahl--honey {
  color: var(--honey);
}

.ergebnis__zusatz {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  text-wrap: pretty;
}

.karte--honey {
  background-color: var(--papier-honey);
  border-color: var(--honey-haarlinie);
}

.karte--honey .ergebnis__frage {
  color: color-mix(in srgb, var(--espresso) 78%, transparent);
}

/* --- Was bei Ihnen bleibt ------------------------------------------------- */

/* Bewusst die leiseste Karte der Spalte: Papier statt der erhöhten Ebene,
   nur eine Haarlinie, kein Schatten, kein Honey. Das ist kein Verkaufsblock. */
.karte--ruhig {
  background-color: transparent;
  border-color: var(--espresso-line);
  box-shadow: none;
}

.karte--ruhig .karte__titel {
  font-size: 1.125rem;
}

.bleibt__text {
  margin-top: 0.875rem;
  color: var(--espresso-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
  text-wrap: pretty;
}

.bleibt__rest {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--espresso-haarlinie);
  font-size: 0.9375rem;
  line-height: 1.55;
  text-wrap: pretty;
}

.bleibt__zahl {
  font-weight: 700;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* --- Kapazität ------------------------------------------------------------ */

.karte--kapazitaet {
  background-color: var(--espresso);
  border-color: transparent;
  color: var(--papier);
  box-shadow: var(--schatten-espresso);
}

.kapazitaet__text {
  font-size: 1.0625rem;
  line-height: 1.5;
  text-wrap: pretty;
}

.kapazitaet__zahl {
  color: var(--honey);
  font-weight: 700;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* --- Aufschlüsselung ------------------------------------------------------ */

.legende {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.5rem;
  margin-top: 1.25rem;
  color: var(--espresso-muted);
  font-size: 0.8125rem;
}

.legende__punkt {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 3px;
}

.legende__punkt--romy {
  background-color: var(--honey);
}

.legende__punkt--mensch {
  background-color: color-mix(in srgb, var(--espresso) 78%, transparent);
}

.legende__text + .legende__punkt {
  margin-left: 0.75rem;
}

.balken-liste {
  margin-top: 1.25rem;
}

.balken-zeile + .balken-zeile {
  margin-top: 1.125rem;
  padding-top: 1.125rem;
  border-top: 1px solid var(--espresso-haarlinie);
}

.balken-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin-bottom: 0.5rem;
}

.balken-name {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.3;
}

.balken-werte {
  display: inline-flex;
  align-items: baseline;
  gap: 0.625rem;
  white-space: nowrap;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.balken-std {
  color: var(--espresso-muted);
  font-size: 0.875rem;
}

.balken-eur {
  font-size: 0.9375rem;
  font-weight: 600;
}

/* Schiene, Füllung, zwei Segmente. Die Füllbreite ist der Anteil an der
   größten Position — so sind die Zeilen untereinander vergleichbar. */
.balken {
  height: 12px;
  background-color: color-mix(in srgb, var(--espresso) 7%, transparent);
  border-radius: 100px;
  overflow: hidden;
}

.balken__fuellung {
  display: flex;
  height: 100%;
  border-radius: 100px;
  overflow: hidden;
  transition: width 0.35s var(--ease);
}

.balken__romy {
  background-color: var(--honey);
  transition: width 0.35s var(--ease);
}

.balken__mensch {
  flex: 1;
  background-color: color-mix(in srgb, var(--espresso) 78%, transparent);
}

/* --- Fußnote und CTA ------------------------------------------------------ */

.fussnote {
  padding-inline: 0.25rem;
  color: var(--espresso-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
  text-wrap: pretty;
}

.karte--cta {
  background-color: var(--papier-hoch);
}

.cta-rechner__text {
  font-size: 1rem;
  line-height: 1.55;
  text-wrap: pretty;
}

.cta-rechner__aktion {
  margin-top: 1.25rem;
}

.cta-rechner__aktion .btn {
  width: 100%;
}

.cta-rechner__hinweis {
  margin-top: 1rem;
  color: var(--espresso-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
  text-wrap: pretty;
}

/* --- Ab Tablet ------------------------------------------------------------ */

@media (min-width: 48rem) {
  .eingaben,
  .karte {
    padding: 2rem;
  }

  .cta-rechner__aktion .btn {
    width: auto;
  }
}

/* --- Ab Desktop: Eingaben links, Ergebnis rechts -------------------------- */

@media (min-width: 64rem) {
  .rechner-layout {
    grid-template-columns: 42fr 58fr;
    gap: 2.5rem;
  }

  .zahl--gross {
    font-size: clamp(3rem, 4.5vw, 4rem);
  }
}

/* Die Eingaben laufen beim Scrollen mit — aber nur, solange die Karte auch
   ins Fenster passt. Sind die Zeitannahmen aufgeklappt, wird sie höher als
   der Bildschirm; dann würde ihr unteres Ende beim Kleben unerreichbar,
   deshalb scrollt sie in diesem Fall wie alles andere mit. Browser ohne
   :has() bekommen die Regel gar nicht erst und scrollen immer.

   Die 60rem sind gemessen, nicht geraten: die zugeklappte Karte ist mit
   fünf Feldern rund 770px hoch, dazu 96px Abstand nach oben und etwas Luft
   nach unten. Auf niedrigeren Fenstern bleibt sie deshalb im Fluss. Wächst
   die Karte um ein weiteres Feld, muss dieser Wert mitwachsen. */
@supports selector(:has(*)) {
  @media (min-width: 64rem) and (min-height: 60rem) {
    .rechner-layout:not(:has(.annahmen[open])) .eingaben {
      position: sticky;
      top: calc(var(--header-h) + 1.5rem);
    }
  }
}