/*
 * Rechner an der Wohnungskarte, Blatt und Regler (Plan h8-kartenrechner, Arbeitspaket 2).
 *
 * Gestaltet seite/vorlagen/teile/wohnungsrechner.html. Eigene Datei mit eigenem Praefix,
 * wie formular.css und einwilligung.css es mit am- halten; stil.css wird nicht angefasst.
 * Farbe, Schrift und Mass kommen als Kennwerte aus dem :root von stil.css, jeweils mit dem
 * dortigen Wert als Rueckfall. Hier wird keine Farbe erfunden.
 *
 * MOBIL ZUERST. Unter 640 px ist das Overlay ein Blatt am unteren Rand, hoechstens 88 % der
 * Anzeigehoehe hoch, mit eigenem Scrollbereich. Ab 640 px steht es mittig und hoechstens
 * 32 rem breit. Es traegt keine Texteingabe, nur Regler und Knoepfe: eine
 * Bildschirmtastatur kann das Blatt deshalb nicht zerschieben.
 *
 * DER KLASSENVERTRAG. Jede Klasse des Markups steht hier, und hier steht keine, die das
 * Markup nicht schreibt. seite/tests/wohnungsrechner-stil.test.js liest beide Dateien als
 * Text und wird rot, sobald die Listen auseinanderlaufen. Keine Klasse steht zugleich auf
 * Behaelter, Eintrag und Inhalt; genau das hat auf dieser Seite am 11.09.2026 dreimal
 * Schaden angerichtet (Kachel und Verweis, Ampelpunkt und Karte, Karte und Zeile).
 *
 *   .amk                das <dialog> selbst, zugleich die Huelle des Blattes
 *   .amk__zu            der Schliessen-Knopf, festes Ziel von 48 px in der oberen Ecke
 *   .amk__blatt         der Inhalt, und nur er scrollt; Schatten zeigt, wo es weitergeht
 *   .amk__wohnung       die Zeile ueber dem Titel; leer verschwindet sie ganz
 *   .amk__titel         die Ueberschrift des Blattes
 *   .amk__gross         der abgesetzte Block der grossen Zahl
 *   .amk__grossmarke    seine Bezeichnung
 *   .amk__grosswert     die grosse Zahl
 *   .amk__neben         der Behaelter der beiden Nebenzahlen
 *   .amk__nebeneintrag  eine Nebenzahl als Ganzes
 *   .amk__nebenmarke    ihre Bezeichnung
 *   .amk__nebenwert     ihr Wert
 *   .amk__regler        der Behaelter der drei Regler
 *   .amk__reglereintrag ein Regler als Ganzes, das <label>
 *   .amk__reglerkopf    die Zeile aus Bezeichnung und Wert darueber
 *   .amk__reglermarke   die Bezeichnung des Reglers
 *   .amk__reglerwert    der eingestellte Wert, vom Modul geschrieben
 *   .amk__schieber      der Regler selbst
 *   .amk__steuer        der Block "Ihr Vorteil" unter den Reglern
 *   .amk__steuertitel   seine Ueberschrift
 *   .amk__steuerliste   die Liste der drei Zahlen
 *   .amk__steuerzeile   eine Zeile daraus, Marke links und Wert rechts
 *   .amk__steuermarke   die Bezeichnung der Zahl
 *   .amk__steuerwert    die Zahl selbst
 *   .amk__sonder        die Zeile zur Sonderabschreibung nach § 7b EStG
 *   .amk__annahmen      das <details> mit der vollstaendigen Annahmenliste
 *   .amk__annahmenkopf  seine Aufklappzeile
 *   .amk__annahmenliste die Liste darin
 *   .amk__hinweis       der ruhige Satz unter den Reglern
 *   .amk__knopf         der Weg in den vollen Rechner
 *
 * ZUSTAENDE HAENGEN AN MERKMALEN, nie an einer zweiten Klasse. Eine Regel auf einen Namen,
 * den niemand schreibt, faerbt nichts und faellt niemandem auf; auf dieser Seite stand so
 * eine Legende wochenlang grau. Es gibt genau zwei Merkmale:
 *
 *   [open]              setzt der Browser bei showModal(). Ohne dieses Merkmal ist der
 *                       Dialog verborgen und erzeugt keinen Leerraum. Die Regel dafuer
 *                       steht hier ausdruecklich, weil eine Klasse auf dem Dialog sonst
 *                       die Vorgabe des Browsers ueberstimmt und ihn immer zeigt.
 *   [data-amk-laedt]    schreibt das Modul auf den ANKLICKTEN AUSLOESER in der
 *                       Wohnungskarte, solange es die drei Rechenmodule nachlaedt. Der
 *                       Ausloeser gehoert einer anderen Vorlage; dieser Zustand ist damit
 *                       der einzige, den das Markup dieses Teils nicht selbst schreibt,
 *                       und er steht deshalb hier namentlich.
 */

.amk {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  /* Blatt von unten: oben Luft, unten keine. */
  margin: auto auto 0;
  width: 100%;
  max-width: none;
  max-height: 88vh;
  max-height: 88dvh;
  padding: 0;
  border: 0;
  border-radius: 14px 14px 0 0;
  background: var(--h8-karte, #fbfaf7);
  color: var(--h8-text, #202221);
  box-shadow: var(--h8-schatten-tief, 0 26px 60px rgba(32, 34, 33, 0.16));
  font-family: var(--h8-textschrift, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  overflow: hidden;
}

/* Ohne diese Zeile zeigt der Dialog sich immer: die Vorgabe des Browsers haengt am
   Elementnamen und verliert gegen jede Klasse. */
.amk:not([open]) { display: none; }

/* Der Rumpf bleibt unberuehrt, die Top-Layer-Schicht bringt ihren eigenen Grund mit.
   Kennwerte gelten in ::backdrop nicht in jedem Browser, darum steht die Tinte hier als
   Zahl. Es ist der Ton von --h8-text mit Deckung, wie ihn --h8-schatten schon benutzt. */
.amk::backdrop { background: rgba(32, 34, 33, 0.62); }

.amk__zu {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 1;
  min-width: 48px;
  min-height: 48px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--h8-leise, #5e5d56);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.amk__zu:hover,
.amk__zu:focus-visible { color: var(--h8-text, #202221); }

/* showModal() setzt den Fokus auf den ersten Knopf. Der Ring liegt deshalb innen, sonst
   schneidet er ueber die abgerundete Ecke des Blattes hinaus. */
.amk__zu:focus-visible {
  outline: 2px solid var(--h8-text, #202221);
  outline-offset: -3px;
}

.amk__blatt {
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px var(--h8-rand, 16px) calc(var(--h8-rand, 16px) + 8px);
  /* Schatten an der Kante, solange in dieser Richtung noch etwas steht. Die beiden Verlaeufe
     mit `local` scrollen mit und decken den Schatten am Anfang bzw. Ende ab; die beiden mit
     `scroll` bleiben stehen und sind der Schatten. Ohne Skript: auf dem Telefon war der
     letzte Satz mitten im Wort abgeschnitten und sah nach Fehler aus statt nach mehr. */
  background-image:
    linear-gradient(to bottom, var(--h8-karte, #fbfaf7) 42%, transparent),
    linear-gradient(to top, var(--h8-karte, #fbfaf7) 42%, transparent),
    linear-gradient(to bottom, rgba(32, 34, 33, 0.11), transparent),
    linear-gradient(to top, rgba(32, 34, 33, 0.11), transparent);
  background-position: 0 0, 0 100%, 0 0, 0 100%;
  background-size: 100% 22px, 100% 22px, 100% 11px, 100% 11px;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}

.amk__wohnung {
  margin: 0 0 2px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--h8-leise, #5e5d56);
}

/* Solange das Modul die Nummer nicht geschrieben hat, steht hier keine leere Zeile. */
.amk__wohnung:empty { display: none; }

.amk__titel {
  margin: 0 0 14px;
  /* Platz fuer den Schliessen-Knopf, damit der Titel nicht darunter laeuft. */
  padding-right: 44px;
  font-family: var(--h8-titelschrift, Merriweather, Georgia, "Times New Roman", serif);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 600;
}

.amk__gross {
  margin: 0 0 14px;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--h8-grund, #efebe2);
}

.amk__grossmarke {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  color: var(--h8-leise, #5e5d56);
}

.amk__grosswert {
  display: block;
  margin-top: 4px;
  font-family: var(--h8-titelschrift, Merriweather, Georgia, "Times New Roman", serif);
  font-size: clamp(28px, 8vw, 38px);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.amk__neben {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.amk__nebeneintrag {
  flex: 1 1 44%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--h8-linie, #c9c4b8);
  border-radius: 8px;
}

.amk__nebenmarke {
  display: block;
  font-size: 12px;
  line-height: 1.35;
  color: var(--h8-leise, #5e5d56);
}

.amk__nebenwert {
  display: block;
  margin-top: 2px;
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.amk__regler {
  display: grid;
  gap: 14px;
  margin: 0 0 18px;
}

.amk__reglereintrag { display: block; }

.amk__reglerkopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.amk__reglermarke {
  font-size: 13px;
  color: var(--h8-leise, #5e5d56);
}

.amk__reglerwert {
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.amk__schieber {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  margin: 0;
  /* Salbei traegt hier keine Schrift, nur die Spur. Als Textton laege er unter 4,5:1. */
  accent-color: var(--h8-akzent, #7c8b7d);
  cursor: pointer;
}

.amk__schieber:focus-visible {
  outline: 2px solid var(--h8-text, #202221);
  outline-offset: 2px;
}

.amk__hinweis {
  margin: 0 0 16px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--h8-leise, #5e5d56);
}

.amk__knopf {
  display: block;
  box-sizing: border-box;
  min-height: 48px;
  padding: 15px 18px;
  border-radius: 6px;
  background: var(--h8-text, #202221);
  color: var(--h8-karte, #fbfaf7);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.amk__knopf:hover,
.amk__knopf:focus-visible { background: var(--h8-leise, #5e5d56); }

/* Der wartende Ausloeser in der Wohnungskarte, siehe Kopf. */
[data-amk-laedt] {
  cursor: progress;
  opacity: 0.72;
}

@media (min-width: 640px) {
  .amk {
    margin: auto;
    width: calc(100% - 32px);
    max-width: 32rem;
    border-radius: 12px;
  }

  .amk__blatt { padding: 22px 24px 24px; }

  .amk__titel { font-size: 22px; }
}

/* --- Steuervorteil und Annahmen (Plan h8-verkauf, Arbeitspaket 2) --------------------------
   Zwei Punkte von Bosko in einem Block: der Vorteil als Zahl, und die Annahmen direkt
   darunter. Die Annahmen stehen NEBEN der Zahl und nicht in einer Fussnote, weil eine
   Zahl ohne ihre Annahme eine Zusage ist, die niemand geben wollte. Seit dem 12.09.2026
   stehen drei Zahlen in der Liste: die dritte ist der Zinsvorteil des KfW-Darlehens, und
   der Block heisst darum "Ihr Vorteil" und nicht mehr nur steuerlich.

   Die Zeile zur Sonderabschreibung haengt allein an [data-amk-sonder]. Vorgabe ist verborgen:
   solange niemand geprueft hat, ob § 7b greift, behauptet die Seite es auch nicht. */
.amk__steuer {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--h8-linie, #c9c4b8);
}
.amk__steuertitel {
  margin: 0 0 10px; font-family: var(--h8-titelschrift, Merriweather, Georgia, serif);
  font-size: 17px; line-height: 1.25; font-weight: 400;
}
.amk__steuerliste { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.amk__steuerzeile {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  font-size: 14px;
}
.amk__steuermarke { color: var(--h8-leise, #5e5d56); }
.amk__steuerwert { font-variant-numeric: tabular-nums; white-space: nowrap; }

.amk__sonder { margin: 10px 0 0; font-size: 13px; line-height: 1.5; }
.amk__sonder:not([data-amk-sonder='ja']) { display: none; }

.amk__annahmen { margin-top: 12px; }
.amk__annahmenkopf {
  font-size: 13px; cursor: pointer; list-style: none;
  color: var(--h8-leise, #5e5d56);
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 0;
}
.amk__annahmenkopf::-webkit-details-marker { display: none; }
.amk__annahmenkopf::after {
  content: ''; width: 6px; height: 6px; flex: 0 0 auto;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform 140ms ease;
}
.amk__annahmen[open] .amk__annahmenkopf::after { transform: rotate(225deg) translate(-2px, -2px); }
.amk__annahmenkopf:hover, .amk__annahmenkopf:focus-visible { color: var(--h8-text, #202221); }
.amk__annahmenliste {
  margin: 6px 0 0; padding-left: 17px;
  font-size: 13px; line-height: 1.65; color: var(--h8-leise, #5e5d56);
}