/* Stil der Projektwebsite Hainbach H8 (Plan h8-website, Arbeitspaket 2).

   MOBIL ZUERST. Jede Regel gilt zunaechst fuer das schmale Geraet; breitere Bildschirme
   bekommen ihre Abweichung in einer min-width-Abfrage. Der Seitenrand ist an keiner Breite
   kleiner als 16 px: er sitzt einmal als padding-inline auf den drei Behaeltern
   [data-amn-innen] (kopf.css), .h8-abschnitt und .h8-fuss__innen, und nirgends sonst.

   PALETTE UND MASSE folgen rechner/rechner.css, damit der eingebettete Rechnerblock auf
   /rechner/ nicht wie ein Fremdkoerper wirkt: Grund #efebe2, Karte #fbfaf7, Text #202221,
   leiser Text #5e5d56, Linie #c9c4b8, Salbei #7c8b7d als Akzent. Das Band #ddd8ce ist der
   Grundton der Schwesterseite wohnidyll-w5.de und traegt hier Kopf, Fuss und jeden zweiten
   Abschnitt. Kein Textton liegt unter 4,5:1 auf seinem Grund, kein Tippziel unter 44 px.

   SCHRIFTEN. Selbstgehostet, sagt der Plan. Im Repo liegt keine einzige Schriftdatei, und
   dieses Arbeitspaket laedt nichts aus dem Netz. Es steht deshalb eine Ersatzkette aus
   Systemschriften hier, und seite/statisch/schriften/README.md nennt die vier fehlenden
   Dateien und die zwei Zeilen, die sich danach aendern. Eine erfundene Schriftdatei waere
   ein toter Verweis auf jeder Seite.

   DER KLASSENVERTRAG. Arbeitspaket 3 schreibt das Markup der elf Abschnitte, dieses Arbeitspaket den
   Stil dazu. Damit sich beide nicht verfehlen, sind hier alle Klassen gesetzt, die die
   Abschnitte brauchen, auch wenn ihr Markup noch nicht existiert. Wer eine weitere braucht,
   sagt es, statt eine eigene zu erfinden:

     Gerueste   .h8-band (volle Breite, Grundton) > .h8-abschnitt (Breite und Rand)
                .h8-abschnitt__kopf, .h8-obertitel, .h8-abschnitt__titel, .h8-fliesstext
                .h8-raster, .h8-raster--bild-rechts, .h8-raster--bild-links
     Bausteine  .h8-knopf, .h8-knopf--primaer, .h8-knopfreihe
                .h8-liste, .h8-liste--merkmale, .h8-fussnote, .h8-bild, .h8-vorspann
     Abschnitte .h8-hero (1), .h8-kennzahlen + .h8-kennzahl (2 und 9), .h8-ampel (3 und 5),
                .h8-karten + .h8-karte (5), .h8-zeitleiste (8), .h8-traeger (9)
     Tabelle    .h8-tabelle in .h8-tabelle__rahmen (laeuft quer, nie die Seite)

   Formular und Einwilligungsbanner haben ihren eigenen Stil (Arbeitspakete 7 und 5), und
   seit dem 11.09.2026 auch der Rechner an der Wohnungskarte: `wohnungsrechner.css` mit dem
   Praefix `amk-`, eigener Klassenvertrag in ihrem Kopf. Seit dem 12.09.2026 (Plan
   h8-verkauf-2) kommen sechs weitere dazu, je Datei ein Praefix und ein Vertrag im Kopf:
   kopf.css (amn, die Kopfleiste), vorteile.css (amv), lage.css (aml), wohnungen.css (amw,
   das Blatt an der Wohnungskarte), ansprechpartner.css (amp) und held.css (amb, die
   Bildbuehne). Diese Datei hier weiss nichts davon und soll es nicht: jede Oberflaeche mit
   eigenem Stil ist ein eigener Vertrag. Was hier stand und dort ersetzt wurde (die
   Kopfleiste, die Personenliste), ist entfernt, nicht auskommentiert.

   NACHGETRAGEN am 10.09.2026, Feinschliff nach dem Vorbild von amanthos.com. Der Vertrag
   sagt "wer eine weitere braucht, sagt es"; hier ist es gesagt:

     .h8-hero__schleier    der Verlauf zwischen Motiv und Schrift im Held
     .h8-hero__vorzeile    die gesperrte Vorzeile ueber dem Titel (nutzt .h8-obertitel)
     .h8-fuss__gewaehr     der Haftungshinweis in der Fussleiste jeder Seite
     data-am-einblenden    Merkmal, kein Klassenname: der Abschnitt blendet beim Scrollen
                           ein. Gesetzt von der Vorlage, geschaltet von js/feinschliff.js.
                           VERSTECKT WIRD NUR unter html.hat-einblendung, und diese Klasse
                           setzt allein das Skript. Faellt es aus, ist nichts verborgen.
     .ist-sichtbar         der eingeblendete Zustand dazu

   NACHGETRAGEN am 11.09.2026, zweite Runde:

     .h8-marke__zeichen    die Bildmarke, eingebettet aus teile/marke.html; sie erbt ueber
                           currentColor die Textfarbe und steht auf Sand wie auf Tinte
     .h8-marke__wort       die Wortmarke daneben, bricht nie um
     .h8-kopf__ziel        kein Stil mehr, nur der Haken, an dem js/feinschliff.js die
                           Ziele der Leiste findet; das Skript setzt daneben aria-current,
                           und daran haengt kopf.css den Zustand. Ohne JavaScript bleibt
                           die Zeile schlicht.

   Die Gliederung der Themen laeuft ueber die schon vorgesehene Huelle: .h8-band um jeden
   zweiten .h8-abschnitt. Kein neuer Name, nur der vorhandene endlich benutzt.

   NACHGETRAGEN am 11.09.2026, dritte Runde:

     .h8-kennzahl__ziel    der Verweis, der die Kachel ganz ausfuellt. Frueher trug das <a>
                           dieselbe Klasse wie das <li>: zwei Karten ineinander, doppelte
                           Polsterung, unentschiedenes Ueberfahren
     .h8-kennzahl__zusatz  die ruhige zweite Zeile unter dem Wert, haelt ihn einzeilig
     .h8-kennzahl--stark   die EINE Kachel, die verkauft, in Tinte. Bei zweien hebt sich
                           keine mehr ab
     .h8-fuss__block       Marke, Anschrift und Hinweis als ein Block neben den Rechtszielen

   NACHGETRAGEN am 11.09.2026, vierte Runde:

     .am-zeichen-set       die unsichtbare Huelle des Zeichensatzes aus teile/zeichen.html
     .h8-kennzahl__zeichen das Zeichen der Kachel, in Salbei

   NACHGETRAGEN am 11.09.2026, fuenfte Runde:

     .h8-ampel__eintrag    ein Eintrag der Verkaufsstand-Legende, traegt data-status
     .h8-punkt             das farbige Quadrat. NUR dieses zeichnet ein Quadrat, und es steht
                           ueberall, wo ein Vorfahr data-status traegt: Legendeneintrag und
                           Wohnungskarte. Hiess bis zur sechsten Runde .h8-ampel__punkt und
                           liess die Karte deshalb ohne Zeichen zurueck

   NACHGETRAGEN am 11.09.2026, sechste Runde:

     .h8-karte__kopf       Zeile ueber dem Kartentitel: Nummer links, Stand rechts
     .h8-karte__stand      der Verkaufsstand in der Karte, Punkt plus Wort
     .h8-abschnitt__titel--vorbild
                           Ueberschrift, die VOR dem Kapitelbild steht, mit mehr Luft darunter
     .h8-karte__zeile      ein Paar aus Bezeichnung und Wert in der Wohnungskarte
     .h8-karte__zeile--preis   nur diese eine Zeile steht gross

   NACHGETRAGEN am 11.09.2026, siebte Runde:

     .h8-faq               die Liste der haeufigen Fragen
     .h8-faq__eintrag      ein <details>, traegt den Zustand als [open]
     .h8-faq__frage        das <summary>, zugleich Klappziel, mindestens 44 px
     .h8-faq__antwort      der Text darunter

   NACHGETRAGEN am 17.09.2026, Vertrauensabschnitt:

     .h8-traeger           die Flaeche mit dem Querformat-Logo der Gruppe, ersetzt .h8-personen
     .h8-traeger__logo     der Verweis um das Logo, auf amanthos.com
     .h8-traeger__zeile    die Vorzeile unter dem Logo
     .h8-referenzbild      das Referenzbild mit Legende unter dem Raster

   DIE KENNUNG DER ABSCHNITTE sitzt auf der Ueberschrift, nicht auf der Sektion: sieben der
   elf Abschnitte beginnen mit einem grossen Bild, und ein Sprung landete sonst darin. Die
   Themenmarkierung in js/feinschliff.js sucht sich von dort den umgebenden .h8-abschnitt,
   weil eine Ueberschrift zu kurz ist, um das Messband sinnvoll zu schneiden.

   ZU DEN UNTERSTREICHUNGEN: die Seite setzt `color: inherit`, ein Verweis traegt also keine
   Farbe als Signal. Wer ihm den Unterstrich nimmt, MUSS etwas anderes an seine Stelle setzen.
   Ohne Dauerstrich stehen deshalb nur Stellen, an denen ein Zeichen oder die Form die Aufgabe
   uebernimmt: Kontaktkarte, Fusszeilen-Navigation, Kennzahlkacheln. Verweise im Fliesstext
   behalten ihn, dort ist er die einzige Unterscheidung; Ueberfahren und Tastaturfokus bringen
   ihn ueberall zurueck.

   Die drei Kennwerte --h8-luft, --h8-uebergang und --h8-schwung tragen Rhythmus und
   Bewegung. Wer einen vierten Abstandswert braucht, aendert die Luft, statt eine Zahl
   in eine Regel zu schreiben. */

/* Kennwerte ---------------------------------------------------------------- */

:root {
  --h8-text: #202221;
  --h8-leise: #5e5d56;
  --h8-linie: #c9c4b8;
  --h8-grund: #efebe2;
  --h8-band: #ddd8ce;
  --h8-karte: #fbfaf7;
  --h8-akzent: #7c8b7d;
  --h8-rot: #b3261e;
  --h8-gruen: #1e7a44;
  /* Heller als ein Textgelb sein duerfte: diese Farbe fuellt ausschliesslich das Quadrat der
     Ampel, und dort traegt der Rand die Abgrenzung. #8a6100 las sich neben dem Wort "gelb"
     als Oliv. Wird die Farbe je fuer Text benutzt, gehoert der dunkle Wert zurueck. */
  --h8-gelb: #d29b12;

  /* Ersatzkette, solange keine Schriftdatei vorliegt. Merriweather und Lato stehen
     absichtlich vorn: liegen die Dateien einmal da, greifen sie ohne weitere Aenderung
     an dieser Stelle. */
  --h8-titelschrift: Merriweather, Georgia, "Times New Roman", serif;
  --h8-textschrift: Lato, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;

  --h8-breite: 1120px;
  --h8-rand: 16px;
  /* Die tatsaechliche Hoehe der festen Kopfzeile, gemessen. Sie treibt zwei Dinge: den
     Abstand beim Anspringen (sonst verschwindet die Ueberschrift dahinter) und die Hoehe
     des Helden. Unter 900 px zwei Zeilen (Marke mit Ort und RECHNER, darunter Anruf-Knopf
     und Ziele), ab 900 px eine. Wer die Leiste aendert, misst hier nach; die Regeln der
     Leiste stehen in kopf.css. 99 px am 12.09.2026 bei 320 und 390 px gemessen; die zweite
     Markenzeile (Ort) kostet dort nichts, weil der Knopf RECHNER die erste Zeile ohnehin
     hoeher macht als die zweizeilige Marke. */
  --h8-kopfhoehe: 99px;

  /* Luft, Bewegung und Tiefe. Drei Kennwerte statt verstreuter Zahlen, damit der
     Rhythmus der Seite an einer Stelle steht und nicht in vierzig Regeln driftet.
     Die Luft waechst mit der Breite: auf dem Telefon 64 px, auf dem Schreibtisch bis
     116 px. Enge Abschnitte sind das, was eine Seite billig aussehen laesst, noch vor
     der Schriftwahl. */
  --h8-luft: clamp(56px, 6vw, 84px);
  --h8-uebergang: 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
  --h8-schwung: cubic-bezier(0.23, 1, 0.32, 1);
  --h8-schatten: 0 18px 40px rgba(32, 34, 33, 0.10);
  --h8-schatten-tief: 0 26px 60px rgba(32, 34, 33, 0.16);

  /* Bruecke zum Einwilligungsbanner (Arbeitspaket 5). Es faerbt sich ueber --am-*-Variablen
     mit Rueckfallwerten und sollte laut seinem Kopf "spaeter mitfaerben"; die Zuweisung fehlte
     aber, und so stand es mit seiner eigenen blauen Palette, runden Ecken und orangem Fokus
     auf dem Sand der Seite (gemeldet 20.09.2026). Hier steht sie. Wer die Palette oben aendert,
     aendert das Banner mit, ohne dessen Datei anzufassen. */
  --am-schrift: var(--h8-textschrift);
  --am-flaeche: var(--h8-karte);
  --am-text: var(--h8-text);
  --am-text-leise: var(--h8-leise);
  --am-linie: var(--h8-linie);
  /* Der Akzent des Banners ist die Textfarbe, nicht das Salbei: seine beiden Schaltflaechen
     sind dieselben wie .h8-knopf und .h8-knopf--primaer, und die tragen Anthrazit. */
  --am-akzent: var(--h8-text);
  --am-akzent-text: var(--h8-karte);
  --am-fokus: var(--h8-text);
  /* Die Seite kennt genau einen Radius, und der sitzt an einem Diagrammbalken. Alles andere
     hat scharfe Kanten, auch die Knoepfe. */
  --am-radius: 0;
  --am-ew-schleier: rgba(32, 34, 33, 0.35);
}

/* Grundlagen --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  /* Der Kopf liegt fest oben. Ohne diesen Abstand verschwindet die Ueberschrift eines
     angesprungenen Abschnitts darunter. */
  scroll-padding-top: calc(var(--h8-kopfhoehe) + 12px);
  -webkit-text-size-adjust: 100%;
}

/* Ab 900 px 66 statt 63 px: die Zeile "Esslingen am Neckar" unter der Wortmarke kostet auf
   dem Schreibtisch drei Pixel (am 12.09.2026 bei 1280 px gemessen). */
@media (min-width: 900px) { :root { --h8-kopfhoehe: 66px; } }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  /* Spalte mit Mindesthoehe, damit die Fussleiste auf einer kurzen Seite (404,
     Impressum) unten steht und nicht mitten im Bild endet. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--h8-grund);
  color: var(--h8-text);
  font-family: var(--h8-textschrift);
  font-size: 17px;
  line-height: 1.6;
  /* Nichts auf dieser Seite darf sie quer laufen lassen. Wer etwas Breiteres braucht
     (Tabelle), stellt es in .h8-tabelle__rahmen. Bewusst clip statt hidden: hidden macht
     den Rumpf zum Scrollbehaelter und nimmt der Kopfleiste ihr position: sticky. Kennt
     ein Browser clip nicht, gilt der Vorgabewert, und es geht nichts kaputt. */
  overflow-x: clip;
}

.h8-inhalt { flex: 1 0 auto; }

img, svg, video { max-width: 100%; height: auto; }
[hidden] { display: none !important; }

a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--h8-text);
  outline-offset: 2px;
}

h1, h2, h3 {
  font-family: var(--h8-titelschrift);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.4px;
  text-wrap: balance;
  margin: 0 0 14px;
}
h1 { font-size: clamp(30px, 7vw, 46px); }
h2 { font-size: clamp(25px, 5vw, 34px); }
h3 { font-size: clamp(19px, 3.4vw, 23px); }
p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

/* Sprungmarke fuer die Tastatur: sichtbar, sobald sie den Fokus hat. */
.h8-sprung {
  position: absolute;
  left: -9999px;
  z-index: 20;
  padding: 12px 16px;
  background: var(--h8-text);
  color: var(--h8-karte);
  text-decoration: none;
}
.h8-sprung:focus {
  left: 8px;
  top: 8px;
}

/* Marke, in Kopf und Fuss ----------------------------------------------------- */

/* Die Kopfleiste selbst wohnt seit dem Plan h8-verkauf-2 in kopf.css und haengt an
   data-amn-Merkmalen; die frueheren `.h8-kopf__*`-Regeln sind am 12.09.2026 von hier
   entfernt, nachdem grundgeruest.html das neue Blatt laedt. Zwei Klassen der Leiste bleiben
   in dieser Datei, weil sie nicht nur der Leiste gehoeren: `.h8-kopf` steht weiter am
   <header> fuer die Druckregel unten, und `.h8-kopf__ziel` ist der Haken, an dem
   js/feinschliff.js die Ziele findet; gestaltet wird beides nicht mehr hier.
   Die Bildmarke erbt ueber currentColor die Textfarbe und steht deshalb ohne zweite
   Fassung auf Sand wie auf Tinte. Sie schrumpft nie mit: flex-shrink 0, sonst quetscht
   sie die schmale Kopfzeile zusammen, bevor die Ziele umbrechen. Die Fussleiste nutzt
   dieselbe Bild- und Wortmarke (teile/fuss.html). */
.h8-marke__zeichen { flex: 0 0 auto; width: 26px; height: 26px; }
.h8-marke__wort { white-space: nowrap; }

/* Abschnitte --------------------------------------------------------------- */

.h8-band { background: var(--h8-band); }
.h8-band--karte { background: var(--h8-karte); }

.h8-abschnitt {
  max-width: calc(var(--h8-breite) + 2 * var(--h8-rand));
  margin-inline: auto;
  padding: var(--h8-luft) var(--h8-rand);
}
@media (min-width: 760px) {
  .h8-abschnitt { padding-block: var(--h8-luft); }
}

.h8-abschnitt__kopf { max-width: 62ch; margin-bottom: 24px; }
.h8-obertitel {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  /* Weit gesperrt. Eine Vorzeile ist kein kleiner Text, sie ist ein Signal, und ihre
     Wirkung kommt aus dem Abstand der Zeichen, nicht aus der Groesse. */
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--h8-leise);
}
/* DAS SPRUNGZIEL IST DIE UEBERSCHRIFT, nicht der Abschnitt. Sieben der elf Abschnitte
   beginnen mit einem grossen Bild; wer auf "Lage" klickte, landete technisch richtig, sah
   aber nur Bild und hielt den Verweis fuer kaputt. Am 11.09.2026 gemeldet. Die Kennung sitzt
   deshalb auf der Ueberschrift, und scroll-margin haelt das Bild darueber angeschnitten
   sichtbar, damit der Sprung als Ortswechsel lesbar bleibt. */
.h8-abschnitt__titel { margin-bottom: 12px; scroll-margin-top: 18px; }
/* Steht die Ueberschrift VOR dem Kapitelbild, braucht sie Luft darunter, sonst klebt ein
   560 px hohes Motiv an der Zeile. Die vermessenen Referenzseiten halten dort 100 bis
   480 px Abstand, und auf 37 geprueften Bildern ging KEIN Kapitelbild seiner eigenen
   Ueberschrift voraus. Genau das war die Beschwerde vom 11.09.2026: der Sprung landet
   richtig, zu sehen ist aber nur Motiv. scroll-margin allein heilt das nicht, denn wer
   normal scrollt, trifft das Bild trotzdem zuerst. */
.h8-abschnitt__titel--vorbild { margin-bottom: 26px; }
.h8-fliesstext { max-width: 62ch; }
/* Dieselbe Marke, aber mitten im Text statt als Vorzeile ueber einem Bild. Sie trennt dort
   zwei Bloecke und braucht deshalb Luft nach oben; sie bricht auf dem Telefon auf zwei Zeilen
   um und braucht deshalb Zeilenabstand; und 0,24 em Sperrung, die eine kurze Vorzeile traegt,
   macht eine lange umgebrochene Zeile schwer lesbar. Am 12.09.2026 auf 390 px gemessen. */
.h8-obertitel--abschnitt {
  margin-top: 30px;
  line-height: 1.5;
  letter-spacing: 0.16em;
}

.h8-fussnote {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--h8-leise);
}
/* DER VORSPANN EINES ABSCHNITTS, nicht sein Plakat. Bis zum 13.09.2026 hiess diese Regel
   `h8-grosszahl` und setzte 32 bis 48 px Schauschrift: die Zeile war damit groesser als die
   Ueberschrift ueber ihr. Zusammen mit dem Kennzahlenband und dem Verkaufsstand, die
   unmittelbar davor stehen, war das eine Zahl zu viel an einer Stelle. Jetzt ein ruhiger
   Satz, der der Ueberschrift den Vortritt laesst; `tabular-nums` bleibt, damit die Ziffern
   nicht tanzen. */
.h8-vorspann {
  display: block;
  max-width: 62ch;
  margin: 2px 0 16px;
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.5;
  color: var(--h8-leise);
  font-variant-numeric: tabular-nums;
}

/* Zwei Spalten, auf dem Handy untereinander. --bild-links dreht die Reihenfolge auf
   breiten Bildschirmen um; im Quelltext steht das Bild immer hinter dem Text, damit die
   Vorlesereihenfolge stimmt. */
/* Bild und seine Kennzeichnung als EINE Rasterzelle.
 *
 * Ohne diesen Behaelter waere der Hinweis das dritte Kind von `.h8-raster` und fiele
 * damit in eine zweite Rasterzeile. Beim Energieabschnitt hat das am 13.09.2026 die
 * Merkmalsliste nach unten geschoben, weil das Raster ab 860 px zwei Spalten hat und
 * das dritte Kind eine neue Zeile oeffnet.
 *
 * `min-width: 0` ist Pflicht und kein Beiwerk: ein Rasterkind hat `min-width: auto`
 * und kann seine Spalte sprengen, sobald der Inhalt breiter ist. */
.h8-bildfeld { min-width: 0; }

.h8-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
@media (min-width: 860px) {
  .h8-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
  .h8-raster--bild-links > :first-child { order: 2; }
}

/* DER DECKEL FUER INHALTSBILDER, an genau einer Stelle. Am 11.09.2026 auf der Livefassung
   bei 1512x800 gemessen: sechs dieser Bilder standen 1120x819 px, also 102 % der
   Fensterhoehe, und das hochkante Bad sogar 1120x1400 px = 175 %. Wer scrollt, sieht dann
   Bild, Bild, Bild; wer einen Abschnitt anspringt, landet in einem Motiv und haelt den
   Verweis fuer kaputt. Der Deckel schneidet mittig statt zu stauchen, darum object-fit.
   Die Kartenbilder (330 px breit, 242 px hoch) bleiben unberuehrt, sie liegen darunter. */
/* Nur das Abschnittsfoto, nicht das Bild in der Wohnungskarte: beide tragen `.h8-bild`, und
   in der Karte folgt schon der Bildhinweis mit eigenem Abstand. Ohne diese Zeile beginnt der
   Text unmittelbar an der Unterkante des Fotos. Am 12.09.2026 in sechs Abschnitten gemessen,
   jedes Mal null Pixel; die Ueberschrift darueber haelt 26 px zum Bild, darunter hielt nichts. */
.h8-abschnitt > .h8-bild { margin-bottom: 24px; }

.h8-bild {
  display: block;
  width: 100%;
  max-height: min(62vh, 560px);
  object-fit: cover;
  object-position: center;
  border: 1px solid var(--h8-linie);
  background: var(--h8-karte);
}

/* Die Kennzeichnung unter einem Abschnittsbild.
 *
 * Seit dem 13.09.2026 sind alle acht Motive KI-ueberarbeitet: die Geometrie stammt weiter
 * aus den Renderings von anitekt, Materialien, Licht und Vegetation kommen aus dem
 * Bildmodell. Ein Objektbild ist damit sichtbar kennzeichnungspflichtig nach Artikel 50
 * KI-VO. Vorher trug den Hinweis nur die Wohnungskarte, weil nur ihre Bilder aus KI kamen.
 *
 * Werte gleichlautend mit `.h8-karte__bildhinweis` oben und mit den Hinweisregeln in
 * wohnungen.css, lage.css und held.css: dieselbe Pflicht darf auf derselben Seite nicht
 * viererlei aussehen. 12 px ist die Untergrenze des Hauses.
 *
 * Die Namen jener Regeln stehen hier bewusst NICHT ausgeschrieben: ein Waechter verbietet
 * fremde Praefixe in diesem Blatt und liest dabei auch Kommentare. */
.h8-bildhinweis {
  margin: 6px 0 0; font-size: 12px; letter-spacing: 0.04em;
  color: var(--h8-leise);
}
/* Die Legende unter dem Referenzbild: eine Zeile je Kachel, gleiche Gestalt wie der Hinweis. */
.h8-bildhinweis--legende { margin-bottom: 20px; }
.h8-bildhinweis--legende span { display: block; }

/* Listen ------------------------------------------------------------------- */

.h8-liste { margin: 0 0 16px; padding: 0 0 0 20px; }
.h8-liste li { margin-bottom: 6px; }
.h8-liste--merkmale {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 8px;
}
/* Acht Bedingungen, die man abhaken koennen soll. Als gewoehnliche Liste stehen acht Saetze
   von je zwei bis drei Zeilen buendig untereinander, und auf dem Telefon ist das eine Wand:
   450 px am Stueck, direkt unter einem 299 px hohen Absatz. Getrennte Zeilen mit Haarlinie
   und der Nummer in eigener Spalte machen daraus acht zaehlbare Einheiten. Die Nummer kommt
   aus einem Zaehler, nicht aus der Listenmarke: nur so steht sie in ihrer eigenen Spalte und
   der Text laeuft darunter nicht ein. */
.h8-liste--bedingungen {
  list-style: none;
  padding: 0;
  margin: 0 0 6px;
  counter-reset: bedingung;
  border-top: 1px solid var(--h8-linie);
}
.h8-liste--bedingungen li {
  counter-increment: bedingung;
  display: grid;
  grid-template-columns: 1.9em 1fr;
  gap: 0 10px;
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid var(--h8-linie);
  font-size: 16px;
  line-height: 1.5;
}
.h8-liste--bedingungen li::before {
  content: counter(bedingung);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--h8-leise);
}
.h8-liste--merkmale li {
  padding-left: 16px;
  border-left: 4px solid var(--h8-akzent);
  font-size: 16px;
}

/* Knoepfe ------------------------------------------------------------------ */

.h8-knopfreihe { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }
.h8-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 22px;
  border: 1px solid var(--h8-text);
  background: transparent;
  color: var(--h8-text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: transform var(--h8-uebergang), box-shadow var(--h8-uebergang),
    background-color var(--h8-uebergang), border-color var(--h8-uebergang);
}
.h8-knopf:hover { background: rgba(32, 34, 33, 0.06); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .h8-knopf:hover { transform: translateY(-2px); box-shadow: var(--h8-schatten); }
  .h8-knopf:active { transform: translateY(0); box-shadow: none; }
}
.h8-knopf--primaer { background: var(--h8-text); color: var(--h8-karte); }
.h8-knopf--primaer:hover { background: #343836; }

/* Hero (Abschnitt 1) ------------------------------------------------------- */

/* Der Titel steht IM Bild, nicht darunter. Ein Bildband mit Text darauf folgend ist die
   Anordnung eines Prospekts; ein Motiv, das die ganze Flaeche traegt und die Schrift
   mittraegt, ist die einer Marke. Damit die Schrift sicher steht, liegt zwischen Bild und
   Text ein Verlauf, kein pauschales Abdunkeln des Motivs: der Verlauf ist unten dicht, wo
   die Schrift steht, und oben fast klar, wo das Motiv wirken soll. */
/* Bild und Verlauf liegen absolut, nicht im Fluss. In einem Raster bestimmt sonst die
   natuerliche Hoehe des Motivs die Zeile, und der Held wird hoeher als das Fenster: die
   Knoepfe stehen dann unter der Kante, wo sie niemand sieht. Die Hoehe kommt aus
   min-height und dem Inhalt, nie aus dem Bild. */
.h8-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* Fuellt das Fenster bis auf die Kopfzeile. Vorher deckelte 640px den Helden, und auf
     1920x1080 blieben 377 px Sand darunter; das sah nach angeschnitten aus statt nach Absicht.
     svh statt vh, damit die Adresszeile mobiler Browser den Helden nicht springen laesst; die
     vh-Zeile davor bleibt als Rueckfall fuer Browser ohne svh. KEIN Deckel nach oben: ein
     Deckel liess bei 1920x1080 wieder 37 px Sand stehen, und genau darum ging es. Nur ein
     Boden, damit der Held in einem sehr flachen Fenster nicht zum Streifen wird. */
  min-height: max(420px, calc(100vh - var(--h8-kopfhoehe)));
  min-height: max(420px, calc(100svh - var(--h8-kopfhoehe)));
  background: var(--h8-band);
  overflow: hidden;
  isolation: isolate;
}
.h8-hero__bild,
.h8-hero__schleier {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.h8-hero__bild {
  display: block;
  object-fit: cover;
  z-index: 0;
}
.h8-hero__schleier {
  z-index: 1;
  /* Unten dicht, oben fast klar. Die Schrift steht unten, das Motiv wirkt oben. */
  background:
    linear-gradient(to top, rgba(22, 24, 23, 0.92) 0%, rgba(22, 24, 23, 0.80) 22%,
      rgba(22, 24, 23, 0.46) 48%, rgba(22, 24, 23, 0.16) 74%, rgba(22, 24, 23, 0.06) 100%);
}
.h8-hero__innen {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: calc(var(--h8-breite) + 2 * var(--h8-rand));
  margin-inline: auto;
  padding: 0 var(--h8-rand) clamp(30px, 4.6vw, 54px);
  color: #fff;
}
.h8-hero__vorzeile { color: rgba(255, 255, 255, 0.82); margin-bottom: 14px; }
.h8-hero__titel {
  margin: 0 0 14px;
  color: #fff;
  max-width: 20ch;
  /* Grosse Schrift braucht engere Zeilen und engere Zeichen, sonst zerfaellt sie. */
  font-size: clamp(31px, 4.6vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.h8-hero__unterzeile {
  max-width: 46ch;
  margin: 0 0 26px;
  font-size: clamp(17px, 2.4vw, 21px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
}
.h8-hero .h8-knopfreihe { margin: 0; }
/* Die Knoepfe stehen auf dem Motiv, nicht auf Sand. Der Hauptknopf ist sonst dunkel auf
   dunklem Verlauf und verschwindet; hier traegt er die helle Flaeche und die dunkle
   Schrift, also genau umgekehrt zum Rest der Seite. */
.h8-hero .h8-knopf--primaer {
  background: var(--h8-grund);
  border-color: var(--h8-grund);
  color: var(--h8-text);
}
.h8-hero .h8-knopf--primaer:hover,
.h8-hero .h8-knopf--primaer:focus-visible { background: #fff; border-color: #fff; }
/* Der zweite Knopf steht auf dem Motiv, nicht auf Sand: er braucht einen eigenen Rand. */
.h8-hero .h8-knopf:not(.h8-knopf--primaer) {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(2px);
}
.h8-hero .h8-knopf:not(.h8-knopf--primaer):hover,
.h8-hero .h8-knopf:not(.h8-knopf--primaer):focus-visible {
  background: rgba(255, 255, 255, 0.20);
  border-color: rgba(255, 255, 255, 0.85);
}
.h8-hero__text { max-width: 62ch; }

/* Kennzahlen (Abschnitte 2 und 9) ------------------------------------------ */

/* FLEX STATT RASTER. Bei sieben Kacheln in sechs Spalten blieb die siebte allein, und die
   fuenf leeren Zellen zeigten den Behaelterton als grosses graues Loch neben ihr. Im Fluss
   dehnen sich stattdessen die Kacheln der letzten Zeile auf die volle Breite, und zwar bei
   jeder Anzahl; ein Raster muesste man bei jeder neuen Kachel nachrechnen. Am 11.09.2026
   gemeldet. Der 1px-Abstand auf dem Linienton bleibt: er zeichnet die Trennlinien. */
.h8-kennzahlen {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--h8-linie);
  border: 1px solid var(--h8-linie);
}
.h8-kennzahl {
  flex: 1 1 190px;
  margin: 0;
  background: var(--h8-karte);
}
/* Die Kachel ist ein Verweis in den Abschnitt, der die Zahl ausfuehrt. Das Ziel fuellt sie
   ganz aus, damit die Flaeche klickbar ist und nicht nur die zwei Zeilen Text. Frueher trug
   das <a> dieselbe Klasse wie das <li>: zwei Karten ineinander, doppelte Polsterung, und ein
   Ueberfahren, das sich nicht entscheiden konnte. */
.h8-kennzahl__ziel {
  display: block;
  height: 100%;
  padding: 18px 16px 16px;
  color: inherit;
  text-decoration: none;
  transition: background-color var(--h8-uebergang);
}
/* Der Zeichensatz selbst zeigt nichts, er haelt nur die <symbol>-Vorlagen bereit. Nicht
   display:none: dann faenden manche Browser die Zeichen nicht mehr. */
.am-zeichen-set { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Salbei statt Tinte: die Zeichen sollen fuehren, nicht mit dem Wert um Aufmerksamkeit
   streiten. Auf der hervorgehobenen Kachel kehrt sich das um. */
.h8-kennzahl__zeichen {
  display: block;
  width: 26px;
  height: 26px;
  margin: 0 0 12px;
  color: var(--h8-akzent);
}
.h8-kennzahl--stark .h8-kennzahl__zeichen { color: rgba(255, 255, 255, 0.82); }
/* Die hervorgehobene Kachel laeuft ueber die ganze Breite. Untereinander wuerde sie dort zu
   einem hohen Block; quer gelegt bleibt sie ein Band, und das Zeichen steht vor der Aussage
   statt ueber ihr. */
@media (min-width: 620px) {
  .h8-kennzahl--stark .h8-kennzahl__ziel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 20px;
    align-items: center;
  }
  .h8-kennzahl--stark .h8-kennzahl__zeichen {
    /* span 3 und nicht 1 / -1: ohne explizite Zeilen zeigt -1 auf die erste Zeilenlinie,
       das Zeichen belegte dann nur die erste Zeile und der Wert rutschte darunter. */
    grid-row: 1 / span 3;
    width: 34px;
    height: 34px;
    margin: 0;
  }
}
.h8-kennzahl__name {
  display: block;
  margin: 0 0 7px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--h8-leise);
  /* NIE mitten im Wort. "Baugenehmigung" brach zu "BAUGENEHMIGUN | G", weil die Notbremse
     fuer lange Werte auf der ganzen Kachel lag statt nur auf dem Wert. */
  overflow-wrap: normal;
  hyphens: none;
}
.h8-kennzahl__wert {
  display: block;
  margin: 0;
  font-family: var(--h8-titelschrift);
  font-size: clamp(22px, 1.9vw, 27px);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  /* Die Notbremse gehoert hierher, nicht auf die Kachel. */
  overflow-wrap: anywhere;
}
/* Die zweite Zeile haelt den Wert kurz und einzeilig. "12 Doppelparker" lief sonst ueber
   zwei Zeilen, waehrend die Nachbarkachel einzeilig blieb, und die Reihe franste aus. */
.h8-kennzahl__zusatz {
  display: block;
  margin: 5px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--h8-leise);
}
/* Die eine Kachel, die verkauft. Genau eine: bei zweien hebt sich keine mehr ab. */
.h8-kennzahl--stark { background: var(--h8-text); }
.h8-kennzahl--stark .h8-kennzahl__name { color: rgba(255, 255, 255, 0.62); }
.h8-kennzahl--stark .h8-kennzahl__wert { color: #fff; }
.h8-kennzahl--stark .h8-kennzahl__zusatz { color: rgba(255, 255, 255, 0.72); }

@media (hover: hover) {
  .h8-kennzahl__ziel:hover { background: #fff; }
  .h8-kennzahl--stark .h8-kennzahl__ziel:hover { background: #2c2f2d; }
}

/* Ampel und Wohnungskarten (Abschnitte 3 und 5) ---------------------------- */

/* ZWEI FEHLER AUF EINMAL, beide am 11.09.2026 gemeldet und hier behoben.
   Erstens trug die Klasse h8-ampel die Liste, JEDEN Eintrag und den Punkt darin. Jedes davon
   zeichnete sein eigenes ::before-Quadrat: drei Quadrate vor dem ersten Wort, danach zwei je
   Eintrag. Zweitens hing die Farbe an .h8-ampel--frei und Geschwistern, das Markup schreibt
   aber data-status="frei". Die Regeln haben nie gegriffen, alles blieb grau, und eine
   Farblegende, in der jede Farbe gleich aussieht, ist schlimmer als gar keine.
   Jetzt: die Liste ordnet, der Eintrag traegt den Status, der Punkt zeigt die Farbe. */
.h8-ampel {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.h8-ampel__eintrag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--h8-leise);
}
/* DER STATUSPUNKT GILT UEBERALL, wo ein Vorfahr data-status traegt: in der Legende ist das
   der Eintrag, in der Wohnungskarte der Artikel selbst. Eine Klasse, eine Farbregel, kein
   zweiter Name, den jemand vergessen kann.
   Am 11.09.2026 haderte genau das: die Karte hing ihr Quadrat an .h8-ampel, und als diese
   Klasse zur Legendenliste wurde, verlor die Karte ihr Zeichen und erbte 16 px Fremdabstand.
   Die Farbe steht nie allein, jeder Punkt traegt sein Wort daneben, sonst waere der
   Verkaufsstand fuer Farbfehlsichtige nicht lesbar. */
.h8-punkt {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  border: 1px solid rgba(32, 34, 33, 0.35);
  background: var(--h8-leise);
}
[data-status='frei'] .h8-punkt { background: var(--h8-gruen); }
[data-status='reserviert'] .h8-punkt { background: var(--h8-gelb); }
[data-status='verkauft'] .h8-punkt { background: var(--h8-leise); }

.h8-karten {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) { .h8-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .h8-karten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.h8-karte {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 16px;
  border: 1px solid var(--h8-linie);
  background: var(--h8-karte);
}
/* Nummer links, Verkaufsstand rechts, beides in einer Zeile ueber dem Titel. Der Stand
   gehoert nach oben: dort sucht ihn das Auge, und eine Karte, deren Zustand man erst nach
   fuenf Datenzeilen erfaehrt, laesst einen zweimal hinsehen. */
.h8-karte__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
}
.h8-karte__nr {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--h8-leise);
}
.h8-karte__stand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--h8-leise);
}
/* Verkauft tritt zurueck, ohne zu verschwinden. Eine ausverkaufte Einheit ist ein
   Verkaufsargument und bleibt darum lesbar, sie verliert nur den Vortritt. */
.h8-karte[data-status='verkauft'] { opacity: 0.72; }
.h8-karte__titel { margin: 0; font-size: 19px; }
/* Fuenf Datenzeilen in zwei Spalten, gross gesetzt ist nur der Kaufpreis.
   Vorher hing .h8-karte__preis an ALLEN fuenf Zeilen, also stand auch "Gartengeschoss" in
   22 px Titelschrift, die Karte wurde rund 700 px hoch und die wichtigste Zahl hob sich von
   nichts mehr ab. Dieselbe Falle wie bei der Ampel: ein Name, der eine Sache benennt, an
   fuenf Stellen geschrieben. Am 11.09.2026 im Bildschirmfoto aufgefallen.
   Die Zeilen sind die Gitterzellen, nicht dt und dd: ein <div> je Paar haelt Bezeichnung
   und Wert zusammen, sonst reisst ein langer Wert die Spalten auseinander. */
.h8-karte__zeilen {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  font-size: 15px;
}
.h8-karte__zeilen dt { font-size: 13px; line-height: 1.4; color: var(--h8-leise); }
.h8-karte__zeilen dd { margin: 0; font-variant-numeric: tabular-nums; }
.h8-karte__zeile--preis dd {
  font-family: var(--h8-titelschrift);
  font-size: 22px;
  line-height: 1.2;
}

/* Haeufige Fragen ----------------------------------------------------------
   Aufklappbar, weil zehn ausgeschriebene Antworten den Einseiter um mehrere Bildschirme
   verlaengern wuerden und die meisten Leser nur eine davon suchen. <details> kann das ohne
   JavaScript; faellt ein Skript aus, bleiben die Fragen bedienbar.
   Die Frage ist das Klappziel und mindestens 44 px hoch, sonst trifft sie auf dem Telefon
   niemand. */
.h8-faq { display: grid; gap: 0; border-top: 1px solid var(--h8-linie); }
.h8-faq__eintrag { border-bottom: 1px solid var(--h8-linie); }
.h8-faq__frage {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 14px 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.h8-faq__frage::-webkit-details-marker { display: none; }
/* Das Zeichen sitzt VOR der Frage und dreht sich beim Aufklappen. Es haengt am Zustand des
   Elements (`[open]`), nicht an einer zweiten Klasse, die jemand zu setzen vergisst. */
.h8-faq__frage::before {
  content: '';
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--h8-leise);
  border-bottom: 2px solid var(--h8-leise);
  transform: rotate(-45deg);
  transition: transform 0.2s var(--h8-schwung);
}
.h8-faq__eintrag[open] .h8-faq__frage::before { transform: rotate(45deg); }
.h8-faq__antwort { max-width: 62ch; margin: 0 0 16px; padding-left: 21px; }

/* Zeitleiste (Abschnitt 8) ------------------------------------------------- */

.h8-zeitleiste { margin: 0; padding: 0 0 0 22px; list-style: none; border-left: 2px solid var(--h8-linie); }
.h8-zeitleiste__punkt { position: relative; padding-bottom: 22px; }
.h8-zeitleiste__punkt::before {
  content: "";
  position: absolute;
  left: -29px;
  top: 6px;
  width: 12px;
  height: 12px;
  background: var(--h8-akzent);
  border: 2px solid var(--h8-grund);
}
.h8-zeitleiste__datum { display: block; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--h8-leise); }
.h8-zeitleiste__text { margin: 2px 0 0; }

/* Ansprechpartner (Abschnitt 10) ------------------------------------------- */

/* Die Personenliste mit Bildnis, Rolle und Wegen ist seit dem Plan h8-verkauf-2 der
   Streifen `.amp` aus ansprechpartner.css und steht zweimal im Einseiter. Die sieben
   `.h8-person*`-Regeln, die bis zum 12.09.2026 hier standen, hatten danach kein Markup
   mehr und sind entfernt; die Zusicherungen (44 px je Weg, Umbruch zwischen Zeichen und
   Nummer, nie mitten in der Ziffernfolge) leben in ansprechpartner.css weiter und werden in
   mobil-stil.test.js dort geprueft. Die letzte Regel dieser Art, `.h8-personen`, ist am
   17.09.2026 entfallen: der Vertrauensabschnitt setzt seine Liste seither als
   `.h8-liste--merkmale`, wie der Energieabschnitt. */

/* Wer hinter dem Projekt steht (Abschnitt 9) ----------------------------------- */

/* GEBAUT WIE DER ENERGIEABSCHNITT, am 17.09.2026 auf Wunsch von Bogdan: zwei Spalten im
   `.h8-raster`, links eine ruhige Flaeche mit dem Querformat-Logo der Gruppe, rechts Titel,
   Absatz und Liste. Vorher begann der Abschnitt mit einem 560 px hohen Referenzbild, und das
   Zeichen der Gruppe kam darin gar nicht vor. Das Bild steht jetzt unter dem Raster, damit
   der Abschnitt mit Absender und Aussage beginnt.

   Die Flaeche ist gestaltet wie ein Abschnittsbild (`.h8-bild`): Kartengrund, Haarlinie,
   keine Rundung. Sie streckt sich auf die Hoehe der Textspalte, so wie dort das Bild die
   Spalte fuellt; auf dem Telefon steht sie oben und haelt eine Mindesthoehe.

   Das Logo ist eine Bilddatei mit den Markenfarben und wird NICHT eingefaerbt. 70 % Breite
   auf dem Telefon, 360 px auf dem Schreibtisch; die Zeile darunter traegt die Gestalt der
   Vorzeile, Farbe --h8-leise auf --h8-karte (6,3:1). Auf dem Telefon bricht sie um; enger
   gesperrt und ausgeglichen, sonst stand am 17.09.2026 bei 390 px "2020" allein darunter. */
.h8-traeger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  min-height: 220px;
  padding: 40px var(--h8-rand);
  background: var(--h8-karte);
  border: 1px solid var(--h8-linie);
  text-align: center;
}
.h8-traeger__logo {
  display: block;
  width: min(360px, 70%);
  text-decoration: none;
}
.h8-traeger__logo img { display: block; width: 100%; height: auto; }
.h8-traeger__zeile {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--h8-leise);
  text-wrap: balance;
}
@media (max-width: 859px) { .h8-traeger__zeile { letter-spacing: 0.16em; } }
/* Die kurze Salbeilinie ueber der Zeile nimmt den Akzent der Merkmalsliste daneben auf. */
.h8-traeger__zeile::before {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  margin: 0 auto 18px;
  background: var(--h8-akzent);
}
@media (min-width: 860px) {
  .h8-traeger { align-self: stretch; min-height: 420px; }
}
.h8-referenzbild { margin-top: var(--h8-luft); }

/* Tabelle ------------------------------------------------------------------ */

.h8-tabelle__rahmen { overflow-x: auto; margin: 0 0 16px; }
.h8-tabelle { width: 100%; border-collapse: collapse; font-size: 15px; }
.h8-tabelle th, .h8-tabelle td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--h8-linie);
  text-align: left;
  vertical-align: top;
}
.h8-tabelle th { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--h8-leise); }
.h8-tabelle td { font-variant-numeric: tabular-nums; }

/* Fehlerseite -------------------------------------------------------------- */

.h8-fehler { min-height: 52vh; }
.h8-fehler__titel { margin-bottom: 12px; }
.h8-fehler__text { max-width: 52ch; }
.h8-fehler__wege { margin-top: 32px; }
.h8-fehler__wege .h8-liste { margin-bottom: 0; }

/* Fussleiste --------------------------------------------------------------- */

.h8-fuss {
  margin-top: 8px;
  background: var(--h8-band);
  border-top: 1px solid var(--h8-linie);
}
.h8-fuss__innen {
  max-width: calc(var(--h8-breite) + 2 * var(--h8-rand));
  margin-inline: auto;
  padding: 32px var(--h8-rand);
}
.h8-fuss__marke {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 4px;
  font-family: var(--h8-titelschrift);
  font-size: 18px;
}
.h8-fuss__marke .h8-marke__zeichen { width: 24px; height: 24px; }
.h8-fuss__anschrift { margin: 0 0 8px; font-size: 15px; color: var(--h8-leise); }
/* Der Haftungshinweis steht auf jeder Seite, auch auf denen ohne Zahlen: eine Aussage, die
   nur dort steht, wo gerechnet wird, deckt die Preise im Wohnungsabschnitt nicht mit ab. */
.h8-fuss__gewaehr {
  max-width: 62ch;
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--h8-leise);
  /* Verhindert die Waise: ohne das landete "Impressum." als einziges Wort in der letzten
     Zeile und sah aus wie ein Fehler, obwohl es nur ein Umbruch war. Wo der Browser
     text-wrap nicht kennt, bricht er wie bisher; niemandem fehlt etwas. */
  text-wrap: pretty;
}
.h8-fuss__liste {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* ZWEI SPALTEN AB DEM SCHREIBTISCH. Vorher stand alles untereinander links, der
   Haftungshinweis auf 62 Zeichen begrenzt, und rechts blieb die halbe Breite leer; das
   sieht nach Fehler aus, nicht nach Absicht. Am 11.09.2026 gemeldet. Auf dem Telefon
   bleibt es eine Spalte, dort ist Nebeneinander falsch. */
@media (min-width: 860px) {
  /* Flex und nicht Raster: bei einem Raster spannte die Navigation ueber alle Zeilen, und
     das Raster verteilte ihre Hoehe auf die Textzeilen daneben. Zwei Bloecke nebeneinander
     ist ohnehin das, was es inhaltlich ist. */
  .h8-fuss__innen {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 56px;
  }
  .h8-fuss__block { flex: 1 1 auto; min-width: 0; }
  .h8-fuss__nav { flex: 0 0 auto; }
  .h8-fuss__gewaehr { max-width: 70ch; margin-bottom: 0; }
  .h8-fuss__liste { flex-direction: column; align-items: flex-end; gap: 0; }
}
/* NUR fuer die Ziele der Fusszeilen-Navigation. `inline-flex` mit 44 px Mindesthoehe ist ein
   Fingerziel; mitten im Fliesstext sprengt es die Zeile und schiebt den Verweis allein auf
   eine neue. Am 11.09.2026 genau so im Haftungshinweis passiert. Ein Verweis IM Satz traegt
   diese Klasse deshalb nicht, sondern den gewoehnlichen a-Stil. */
/* Eine Navigationsliste ist als solche erkennbar; der Dauerstrich machte aus drei Zielen
   drei Striche. Unterstrich bleibt bei Ueberfahren und Tastaturfokus, wie in der Kopfzeile. */
.h8-fuss__ziel { text-decoration: none; }
.h8-fuss__ziel:hover,
.h8-fuss__ziel:focus-visible { text-decoration: underline; }
.h8-fuss__ziel {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  color: var(--h8-text);
}
.h8-fuss__knopf {
  border: 0;
  padding: 0;
  background: none;
  font-family: inherit;
  font-size: 15px;
  color: var(--h8-text);
  /* Kein Dauerstrich: er soll aussehen wie seine Nachbarn in der Liste, und die tragen
     seit dem 11.09.2026 keinen mehr. Den Unterstrich bei Ueberfahren erbt er von
     .h8-fuss__ziel. */
  text-decoration: none;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* Druck: die Seite soll als Blatt lesbar bleiben, ohne Leiste und ohne Knoepfe. */
@media print {
  .h8-kopf, .h8-fuss__nav, .h8-knopfreihe, .h8-sprung { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  .h8-abschnitt { padding-block: 12px; }
}


/* Zustaende und Bewegung ----------------------------------------------------
   Alles hier ist Zugabe: die Seite ist ohne eine einzige dieser Regeln vollstaendig
   lesbar und bedienbar. Deshalb steht der Block am Ende und deshalb steht jede
   Bewegung hinter `prefers-reduced-motion: no-preference`. Wer Bewegung abbestellt
   hat, bekommt die Seite in ihrem Ruhezustand, nicht eine langsamere Fassung. */

/* Karten heben sich beim Ueberfahren leicht an. Nur bei echtem Zeigergeraet: auf dem
   Telefon bliebe der Zustand nach der Beruehrung haengen und sieht dann aus wie ein
   Fehler. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  /* Kennzahlkacheln heben sich NICHT an: sie sitzen in einem Verbund mit 1px-Fugen, und
     eine einzelne angehobene Kachel reisst die Linien auf. Sie wechseln stattdessen den
     Grundton, was in einem Verbund die ruhigere und deutlichere Antwort ist. */
  .h8-karte {
    transition: transform 0.5s var(--h8-schwung), box-shadow 0.5s var(--h8-schwung);
  }
  .h8-karte:hover {
    transform: translateY(-4px);
    box-shadow: var(--h8-schatten);
  }
}

/* Hier stand eine Heranschiebe-Bewegung fuer Bilder, die nie gelaufen ist: .h8-bild IST
   das Bild, ein .h8-bild img gibt es im Markup nirgends, und overflow greift auf einem
   ersetzten Element ohnehin nicht. Am 11.09.2026 entfernt statt repariert, weil die
   Bewegung eine Huelle um jedes der neun Bilder gebraucht haette und das Motiv seit dem
   Deckel oben bereits beschnitten wird. */

/* Einblendung beim Scrollen. Das Merkmal setzt die Vorlage, die Klasse setzt
   js/feinschliff.js, sobald der Abschnitt in Sicht kommt. Ohne JavaScript bleibt das
   Merkmal unberuehrt, und die Regel unten sorgt dafuer, dass dann NICHTS versteckt
   ist: sichtbar ist der Grundzustand, verborgen nur, wer sich gleich zeigen wird.
   Andersherum waere die Seite ohne JavaScript leer, und das ist der Grund, warum
   Einblendungen so oft ganze Inhalte verschlucken. */
@media (prefers-reduced-motion: no-preference) {
  html.hat-einblendung [data-am-einblenden] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.8s var(--h8-schwung), transform 0.8s var(--h8-schwung);
  }
  html.hat-einblendung [data-am-einblenden].ist-sichtbar {
    opacity: 1;
    transform: none;
  }
  /* Gestaffelt: Kinder eines eingeblendeten Behaelters folgen kurz nacheinander. Der
     Versatz bleibt klein, sonst wartet man beim Scrollen auf seine eigene Seite. */
  html.hat-einblendung [data-am-einblenden]:nth-child(2) { transition-delay: 0.08s; }
  html.hat-einblendung [data-am-einblenden]:nth-child(3) { transition-delay: 0.16s; }
  html.hat-einblendung [data-am-einblenden]:nth-child(4) { transition-delay: 0.24s; }
  html.hat-einblendung [data-am-einblenden]:nth-child(n + 5) { transition-delay: 0.32s; }
}

/* Beim Drucken zeigt sich alles, unabhaengig davon, was der Browser gescrollt hat. */
@media print {
  html.hat-einblendung [data-am-einblenden] { opacity: 1 !important; transform: none !important; }
}

/* --- Geschossschema ----------------------------------------------------------------------
   Sechs Baender uebereinander, wie das Haus steht. Die Bandbreite steht fuer die
   Geschossflaeche im Verhaeltnis zur groessten Etage, die Blockbreite fuer die Wohnflaeche.
   Kein Bild, kein Skript: Breiten kommen als Inline-Stil aus dem Bau, die CSP erlaubt das
   ausdruecklich (style-src 'unsafe-inline').
   Bewusst KEINE Positionstreue: die Reihenfolge im Band ist die Wohnungsnummer, nicht die
   Lage im Grundriss. Das Schema beantwortet "welche Wohnung liegt auf welcher Etage und wie
   gross ist sie", nicht "wo genau im Haus". */
/* Wer hinter dem Projekt steht. Stand bisher nur im Fliesstext und im Impressum; das
   Zeichen der Gruppe kam auf der Seite gar nicht vor. Klein, ruhig, unter der Anschrift. */
.h8-fuss__haus { margin: 14px 0 0; font-size: 13px; }
.h8-fuss__hausziel {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; color: var(--h8-leise); text-decoration: none;
}
.h8-fuss__hausziel:hover, .h8-fuss__hausziel:focus-visible {
  color: var(--h8-text); text-decoration: underline; text-underline-offset: 4px;
}
.h8-fuss__hauszeichen { width: 20px; height: 20px; flex: 0 0 auto; }

/* DIE RECHNERSEITE HATTE KEINE EINZIGE REGEL. Bis zum 13.09.2026 stand `.rechnerseite`
   in keiner Stildatei: Rahmen, Ueberschrift, Block und Fussnoten lagen alle bei links 0
   ueber die volle Fensterbreite, und die zwei Absaetze unter dem Rechner liefen sichtbar
   bis an den Bildschirmrand. Aufgefallen ist es nur deshalb nicht frueher, weil der
   Rechnerblock selbst seinen Textkoerper mitbringt und die Seite dadurch halbwegs richtig
   aussah. Hier bekommt sie denselben Textkoerper wie jeder Abschnitt der Startseite. */
.rechnerseite {
  max-width: calc(var(--h8-breite) + 2 * var(--h8-rand));
  margin-inline: auto;
  padding: 0 var(--h8-rand);
}
.rechnerseite__kopf { padding-block: clamp(28px, 4.4vw, 52px) clamp(18px, 2.6vw, 28px); }
.rechnerseite__block { margin-bottom: clamp(26px, 4vw, 44px); }
.rechnerseite__fussnoten {
  /* Eine Zeile ueber rund 75 Zeichen liest sich schlecht; die Fussnoten liefen vorher ueber
     die ganze Fensterbreite. */
  max-width: 72ch;
  margin: 0 0 var(--h8-luft);
  font-size: 15px;
  line-height: 1.6;
  color: var(--h8-leise);
}
.rechnerseite__fussnoten p { margin: 0; }
.rechnerseite__fussnoten p + p { margin-top: 12px; }

/* Dieselbe Herkunftszeile direkt unter dem Helden, als erstes im Ueberblick. Leise: sie ist
   eine Fussnote zum Titel und keine Ansage. Im Helden selbst hat sie keinen Platz, dort
   sichern drei Waechter genau ein Bild, keinen Kommentar und unveraendertes Markup zu. */
.h8-haus {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 16px; font-size: 13px;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--h8-leise);
}
.h8-haus__zeichen { width: 18px; height: 18px; flex: 0 0 auto; }

/* DAS SCHEMA ALS SAEULEN, nicht als Baender. Drei Anlaeufe hat die Bandform gebraucht,
   bis klar war, warum sie nicht traegt: sechs Zeilen verschiedener Breite mit ausgefransten
   rechten Kanten, und die Wohnungen liessen sich nur INNERHALB ihres Geschosses
   vergleichen. Dazu sind drei der sechs Geschosse fast gleich gross (110,37 / 110,02 /
   107,82 m²), also sahen drei Baender ohnehin gleich aus.

   Jetzt ist die Hoehe die Flaeche, gemessen an der groessten Wohnung des Hauses. Alle zwoelf
   stehen damit auf EINER Skala nebeneinander: das Penthouse ist die volle Hoehe, die
   kleinste Wohnung ein Drittel davon, und das sieht man ohne Bildunterschrift. Die Gruppen
   wachsen mit der Zahl ihrer Wohnungen, damit jede Saeule gleich breit ist. */
.h8-schema {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  margin: 0 0 var(--h8-luft);
}
.h8-schema__gruppe {
  display: flex; flex-direction: column; min-width: 0;
  /* flex-basis: 0 ist hier kein Feinschliff, sondern die Bedingung: ohne sie verteilt
     flex-grow nur den REST, und eine Gruppe mit drei Saeulen startet breiter als eine mit
     einer. Gemessen am 13.09.2026: 64 px je Saeule im Dreiergeschoss gegen 155 px im
     Dachgeschoss. Mit basis 0 waechst jede Gruppe genau mit ihrer Zahl, und jede Saeule
     ist ueberall gleich breit. */
  flex-basis: 0;
}
.h8-schema__saeulen {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  /* Die Bezugshoehe. Alles darin ist ein Prozentsatz davon, und nur deshalb sind die
     Saeulen ueber Gruppengrenzen hinweg vergleichbar. */
  height: 190px;
}
.h8-schema__saeule {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  padding: 6px 2px 8px;
  border: 1px solid var(--h8-linie);
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
  background: var(--h8-karte);
  color: inherit;
  text-decoration: none;
  transition: background-color 120ms ease;
}
.h8-schema__saeule:hover, .h8-schema__saeule:focus-visible {
  background: color-mix(in srgb, var(--h8-akzent) 12%, var(--h8-karte));
}
.h8-schema__saeule[data-status='reserviert'] {
  background: color-mix(in srgb, var(--h8-gelb) 12%, var(--h8-karte));
}
.h8-schema__saeule[data-status='verkauft'] {
  background: color-mix(in srgb, var(--h8-linie) 30%, var(--h8-karte));
  color: var(--h8-leise);
}
/* Das Mass steht oben in der Saeule, die Nummer unten: so liest man von oben nach unten
   "wie gross" und dann "welche". Unter 760 px ist dafuer kein Platz, dort traegt die Saeule
   nur die Nummer und das Mass steht auf der Karte darunter. */
.h8-schema__mass {
  font-size: 12px; color: var(--h8-leise); white-space: nowrap;
  order: -1; margin-bottom: auto;
}
.h8-schema__nr { font-family: var(--h8-titelschrift); font-size: 17px; line-height: 1.1; }
.h8-schema__etage {
  display: flex; flex-direction: column; gap: 2px;
  margin: 8px 0 0; padding-top: 8px;
  border-top: 1px solid var(--h8-linie);
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--h8-leise);
}
.h8-schema__name { font-weight: 600; }
/* Zwei Formen, immer genau eine sichtbar: die Kurzform traegt das Telefon, die Langform den
   Schreibtisch. Beide stehen im Markup, damit ein Vorleseprogramm die Langform findet. */
.h8-schema__kurz { display: none; font-weight: 600; }
.h8-schema__flaeche { text-transform: none; letter-spacing: 0; }
/* Nur fuer Vorleseprogramme: der Titel und der Stand gehoeren in den Linktext, sonst heisst
   jeder Link nur "3". Sichtbar waere es Rauschen, das die schmalen Saeulen sprengt. */
.h8-schema__lesehilfe {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.h8-fussnote--schema { margin-top: -14px; }
@media (max-width: 760px) {
  .h8-schema { gap: 10px; }
  .h8-schema__saeulen { height: 130px; gap: 3px; }
  .h8-schema__saeule { padding: 4px 1px 6px; }
  .h8-schema__mass { display: none; }
  .h8-schema__nr { font-size: 14px; }
  /* 12 px ist der Boden der Seite, nicht 11: seite/tests/mobil-stil.test.js haelt ihn fest. */
  .h8-schema__etage { font-size: 12px; letter-spacing: 0.03em; }
  /* Auf dem Telefon nur die Kurzform und keine Flaeche: eine Saeule ist dort rund 26 px
     breit, und eine Beschriftung, die nicht hineinpasst, schiebt die ganze Seite auf. */
  .h8-schema__name, .h8-schema__flaeche { display: none; }
  .h8-schema__kurz { display: block; }
}


/* Die Angaben unter der Summenzeile. Fuenf Zeilen Kleinschrift hat niemand gelesen; weg
   duerfen sie nicht, denn die Flaechen sind Planungswerte (die Kaltmiete steht seit dem
   17.09.2026 nur noch im Rechner).
   Also ein Schalter, der wie eine Fussnote aussieht und nicht wie ein Knopf: er soll
   auffindbar sein, nicht werben. */
.h8-angaben { margin: 18px 0 0; }
.h8-angaben__schalter {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; cursor: pointer; list-style: none;
  font-size: 13px; color: var(--h8-leise);
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: var(--h8-linie);
}
.h8-angaben__schalter::-webkit-details-marker { display: none; }
.h8-angaben__schalter::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;
}
.h8-angaben[open] .h8-angaben__schalter::after { transform: rotate(225deg) translate(-2px, -2px); }
.h8-angaben .h8-fussnote { margin-top: 10px; }

/* Kennzeichnung der Visualisierungen. Die Kartenbilder sind erzeugte Darstellungen des
   beworbenen Objekts und damit nach Artikel 50 KI-VO sichtbar zu kennzeichnen. Der Satz steht
   deshalb unter jedem Bild und nicht nur in der Fussnote: eine Kennzeichnung, die man suchen
   muss, ist keine. */
.h8-karte__bildhinweis {
  /* 12 px ist die Untergrenze des Hauses. Bei 11 px war der Pflichthinweis zur KI-Erzeugung
     auf dem Telefon die kleinste Schrift der ganzen Seite, und genau er muss lesbar sein. */
  margin: 6px 0 0; font-size: 12px; letter-spacing: 0.04em;
  color: var(--h8-leise);
}