/*
 * Das Wohnungsblatt: die waagrechte Leiste an der Wohnungskarte und der Weg zum Menschen
 * je Wohnung (Plan h8-verkauf-2, Wohnungsblatt).
 *
 * Gestaltet die amw-Klassen in seite/vorlagen/teile/wohnungskarte.html. Eigene Datei mit
 * eigenem Praefix, wie formular.css und einwilligung.css es mit am- halten und
 * wohnungsrechner.css mit amk-. stil.css wird nicht angefasst; die dortigen h8-Regeln der
 * Karte bleiben stehen, bis die Verdrahtung sie zieht. 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.
 *
 * KEIN SKRIPT. Die Leiste rastet ueber scroll-snap ein, die Sprungreihe sind Verweise auf
 * die Marken der Felder. Die Richtlinie der Seite laesst nur eigene Skripte zu, und ein
 * Bildwechsler, der ohne JavaScript nichts zeigt, waere auf einer Verkaufsseite die falsche
 * Abhaengigkeit. Ein Verweis bekommt ausserdem Fokus, ein gezeichneter Punkt nicht.
 *
 * MOBIL ZUERST. Ein Feld ist immer genau so breit wie die Karte. Es gibt keine zweite
 * Anordnung ab einer Breite: die Karte selbst wird ab 640 px schmaler, nicht ihr Bild.
 *
 * DER KLASSENVERTRAG. Jede Klasse des Markups steht hier, und hier steht keine, die das
 * Markup nicht schreibt. seite/tests/wohnungskarte.test.js liest beide Dateien als Text und
 * wird rot, sobald die Listen auseinanderlaufen. Keine Klasse steht zugleich auf Behaelter
 * und Inhalt; genau das hat auf dieser Seite am 11.09.2026 dreimal Schaden angerichtet.
 *
 *   .amw-blatt       die Huelle des Blattes, ohne eigene Bewegung
 *   .amw-leiste      die Leiste selbst, das <ul>, und nur sie scrollt
 *   .amw-feld        ein Feld darin, volle Breite der Karte, Rastpunkt und Sprungziel
 *   .amw-bild        ein Foto im Feld, formatfuellend beschnitten
 *   .amw-riss        das Grundrissblatt im Feld, vollstaendig sichtbar statt beschnitten
 *   .amw-hinweis     die Zeile unter dem Feldinhalt: Kennzeichnung, Grenzen, Stand
 *   .amw-tafel       die Raumaufteilung als Tabelle
 *   .amw-tafelkopf   ihre Ueberschrift mit der Summe
 *   .amw-sprungreihe die Reihe der Feldziele, nur bei mehr als einem Feld vorhanden
 *   .amw-sprung      ein Ziel daraus, zugleich die Anzeige der Stellung
 *   .amw-ziele       die Reihe mit dem Hauptweg, dem Rechner dieser Wohnung
 *   .amw-kontaktzeile  die leise Zeile darunter: Anfragen, Anrufen, Termin, Grundriss
 *   .amw-anfrage     die Anfrage zu genau dieser Wohnung, Betreff kommt aus dem Bau
 *   .amw-anruf       der Anruf beim ersten Ansprechpartner
 *   .amw-termin      der Termin, nur vorhanden, solange eine Adresse vorliegt
 *   .amw-grundriss   der vierte Punkt der Zeile: Knopf in die Schau (frei) oder Verweis in
 *                    das Formular (anfrage), gleiche Gestalt; bei aus nicht vorhanden
 *   .amw-lupe        der Knopf um ein Feldbild, oeffnet die Schau
 *   .amw-schau       die Schau selbst, ein <dialog> ueber der ganzen Seite
 *   .amw-schau__zu   ihr Schliessknopf
 *   .amw-schau__bild das vergroesserte Bild darin
 *   .amw-schau__hinweis  der Pflichthinweis, der in der Karte darunter steht
 *
 *   Seit 17.09.2026 legt bildschau.js vier weitere an, nur mit Skript und nie im Markup:
 *   .amw-schau__buehne   der Bezugsrahmen um das Bild, traegt die Pfeile
 *   .amw-schau__pfeil    ein Pfeil zum Blaettern, sichtbar ab zwei Bildern
 *   .amw-schau__pfeil--zurueck, .amw-schau__pfeil--vor  seine Stellung, links oder rechts
 *   .amw-schau__zaehler  die Stelle in der Folge, etwa 2 / 3
 *
 * WARUM KEINE GEZEICHNETEN PUNKTE. Ein ::before je Feld kann die Zahl der Felder zeigen,
 * aber weder Fokus noch Klick annehmen, und welches Feld gerade steht, weiss es ohne Skript
 * ohnehin nicht. Die Sprungreihe leistet beides mit einem Element je Feld. Sie haengt an
 * `blattMehrfach` und ist bei einem einzigen Feld nicht da, statt nur unsichtbar zu sein.
 */

/* Die Leiste ---------------------------------------------------------------- */

.amw-blatt { position: relative; }

.amw-leiste {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  /* Der Seitenlauf endet an der Karte. Ohne diese Zeile nimmt der Browser das Wischen am
     Ende der Leiste und schiebt die ganze Seite weiter. */
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.amw-feld {
  /* Genau eine Kartenbreite, nie schmaler, nie breiter. min-width: 0 gehoert dazu: ein
     Flex-Kind waechst sonst ueber seine Spalte hinaus, und dann scrollt nicht die Leiste,
     sondern die Seite (am 12.09.2026 an der Kopfleiste genau so passiert). */
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.amw-bild {
  display: block;
  width: 100%;
  /* Die Visualisierungen liegen in 960 x 640 vor. Das feste Verhaeltnis haelt alle Felder
     gleich hoch, auch wenn ein spaeteres Motiv anders geschnitten ist, und es reserviert
     die Hoehe vor dem Laden. Deshalb tragen die Bilder KEINE Maszahlen im Markup: die
     kaemen dort aus der Wohnung und waeren beim zweiten Motiv still falsch. */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
}

.amw-riss {
  display: block;
  width: 100%;
  /* Dasselbe Feldmass, aber NICHT beschnitten: ein angeschnittener Grundriss ist ein
     falscher Grundriss. Das Blatt ist quadratisch und steht deshalb mit Luft links und
     rechts im Feld. */
  aspect-ratio: 3 / 2;
  object-fit: contain;
  background: var(--h8-karte, #fbfaf7);
}

.amw-hinweis {
  /* Gleichlautend mit .h8-karte__bildhinweis in stil.css: die Kennzeichnung nach Artikel 50
     KI-VO darf beim Zug dieser Regeln nach hier nicht ihr Aussehen wechseln. 12 px ist die
     Untergrenze des Hauses, und genau dieser Satz muss lesbar sein. */
  margin: 6px 0 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--h8-leise, #5e5d56);
}

/* Die Raumaufteilung -------------------------------------------------------- */

.amw-tafel {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.amw-tafelkopf {
  margin-bottom: 6px;
  text-align: left;
  font-weight: 600;
}

.amw-tafel th {
  padding: 6px 0;
  border-bottom: 1px solid var(--h8-linie, #c9c4b8);
  text-align: left;
  font-weight: 400;
}

.amw-tafel td {
  padding: 6px 0;
  border-bottom: 1px solid var(--h8-linie, #c9c4b8);
  text-align: right;
}

/* Die Sprungreihe ----------------------------------------------------------- */

.amw-sprungreihe {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
}

.amw-sprung {
  /* Daumenmass, kein Zierpunkt: diese Ziele werden angetippt. Bei acht Feldern bricht die
     Reihe um, statt die Karte aufzuschieben. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--h8-linie, #c9c4b8);
  border-radius: 50%;
  background: var(--h8-karte, #fbfaf7);
  color: var(--h8-text, #202221);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

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

/* Der Weg zum Menschen ------------------------------------------------------ */

.amw-ziele {
  /* Gleichlautend mit .h8-knopfreihe. Der Umbruch bleibt zugesagt, auch wenn hier heute nur
     noch ein Knopf steht: er ist die Zusage, dass ein zweiter die Karte nicht aufschiebt. */
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 24px 0 0;
}

/* DIE ZEILE STATT DREI KAESTEN. Vorher trug jede Karte fuenf gleich laute Knoepfe. Bei
   Kartenbreite brachen sie zur Treppe um, zwoelf Karten ergaben sechzig Kaesten, und welcher
   davon der Hauptweg ist, war nicht zu sehen. Jetzt steht oben der eine Knopf und hier die
   drei Wege zum Menschen als Zeile: gleiche Funktion, ein Zehntel der Lautstaerke. Der
   Grundriss kommt als vierter Punkt dazu (Regel .amw-grundriss unten). */
.amw-kontaktzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 18px;
  margin: 10px 0 0;
}

.amw-anfrage,
.amw-anruf,
.amw-termin {
  /* Daumenmass, und es bleibt eine Zusage: die Zeile ist leiser, nicht kleiner. 44 px hoch
     bei 15 px Schrift heisst, dass der Daumen trifft, was das Auge als Text liest. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: var(--h8-text, #202221);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--h8-linie, #c9c4b8);
}

.amw-anfrage:hover,
.amw-anruf:hover,
.amw-termin:hover,
.amw-anfrage:focus-visible,
.amw-anruf:focus-visible,
.amw-termin:focus-visible {
  text-decoration-color: var(--h8-akzent, #7c8b7d);
}

/* DER GRUNDRISS MIT RAHMEN (Plan h8-grundriss-referenzen, Entscheid E5, Variante B). Er steht
   in derselben Zeile, gleich hoch und in derselben Schrift wie seine drei Nachbarn, traegt aber
   statt des Unterstrichs einen duennen Rahmen: er ist die Frage, die jeder Kaeufer zuerst hat,
   und soll gefunden werden. Lauter als DIESE WOHNUNG RECHNEN wird er nicht: kein gefuellter
   Grund, kein fettes Wort, 44 statt 48 px. Keine Seite der Vergleichsstichprobe setzt den
   Grundriss ueber den Kontaktblock.

   Knopf und Verweis sehen gleich aus. Deshalb nimmt die Regel dem Knopf alles, was der Browser
   ihm mitgibt (Grund, Rand, Rundung, eigene Schrift, Aussenabstand), und dem Verweis den
   Unterstrich aus stil.css. Die Zeile bricht bei 320 px um, statt die Karte aufzuschieben:
   flex-wrap steht an .amw-kontaktzeile. */
.amw-grundriss {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--h8-linie, #c9c4b8);
  border-radius: 0;
  background: none;
  appearance: none;
  font: inherit;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: var(--h8-text, #202221);
  text-decoration: none;
  cursor: pointer;
}

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

/* --------------------------------------------------------------------------------------
   Das Bild gross ansehen
   --------------------------------------------------------------------------------------
   In der Karte ist ein Foto 360 px breit. Wer die Kueche wirklich sehen will, hat dort zu
   wenig. Der Knopf um das Bild bringt keine eigene Optik mit: er ist ein Knopf, weil er mit
   der Tastatur erreichbar sein und sich als Bedienelement melden muss, und sieht aus wie das
   Bild, das er umschliesst. */

.amw-lupe {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  /* Ohne das setzt der Browser eine Grundlinie unter das Bild und das Feld wird hoeher. */
  line-height: 0;
}

.amw-lupe:focus-visible {
  outline: 3px solid var(--h8-akzent, #7c8b7d);
  outline-offset: -3px;
}

.amw-schau {
  /* Der Browser zentriert einen modalen Dialog selbst; gesetzt wird nur, wieviel Platz er
     hoechstens nimmt, damit ein hochkantes Blatt nicht ueber den Bildschirm hinauswaechst. */
  max-width: min(96vw, 1600px);
  max-height: 94vh;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: var(--h8-karte, #fbfaf7);
  color: var(--h8-text, #202221);
  overflow: hidden;
}

.amw-schau::backdrop {
  /* Der Textton der Seite (--h8-text, #202221) bei 72 Prozent. Ein eigener Grauwert
     waere eine neue Farbe, und die faellt erst auf, wenn zwei Flaechen nebeneinander
     liegen. */
  background: rgba(32, 34, 33, .72);
}

.amw-schau__bild {
  display: block;
  max-width: 100%;
  /* Platz fuer den Hinweis darunter; ohne die Rechnung schiebt ein hohes Bild ihn hinaus. */
  max-height: calc(94vh - 52px);
  margin: 0 auto;
  object-fit: contain;
}

.amw-schau__zu {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 4px;
  background: var(--h8-karte, #fbfaf7);
  color: var(--h8-text, #202221);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.amw-schau__hinweis {
  margin: 0;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--h8-leise, #5e5d56);
}

/* Blaettern in der Schau ---------------------------------------------------------------
   Pfeile und Zaehler legt bildschau.js an, nur wenn eine Karte mehr als ein zoombares Bild
   hat. Die Pfeile sehen aus wie die Sprungpunkte der Leiste (runder Rahmen, Kartengrund,
   44 px Daumenmass) und sitzen mittig an den Bildkanten, nie ueber dem Pflichthinweis. Die
   Buehne ist der Bezugsrahmen dafuer; weil sie positioniert ist, braucht der Schliessknopf
   eine eigene Ebene, sonst laege das Bild ueber ihm. */

.amw-schau__buehne {
  position: relative;
}

.amw-schau__zu {
  z-index: 2;
}

.amw-schau__zu:focus-visible,
.amw-schau__pfeil:focus-visible {
  outline: 3px solid var(--h8-akzent, #7c8b7d);
  outline-offset: 2px;
}

.amw-schau__pfeil {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  padding: 0 0 3px;
  border: 1px solid var(--h8-linie, #c9c4b8);
  border-radius: 50%;
  background: var(--h8-karte, #fbfaf7);
  color: var(--h8-text, #202221);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.amw-schau__pfeil:hover { border-color: var(--h8-text, #202221); }
.amw-schau__pfeil--zurueck { left: 8px; }
.amw-schau__pfeil--vor { right: 8px; }
.amw-schau__pfeil[hidden],
.amw-schau__zaehler[hidden] { display: none; }

.amw-schau__zaehler {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  margin: 0;
  padding: 6px 10px;
  border-radius: 4px;
  background: var(--h8-karte, #fbfaf7);
  color: var(--h8-text, #202221);
  font-size: 14px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}