/* 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
   .h8-kopf__innen, .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-grosszahl
     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-personen + .h8-person (10)
     Tabelle    .h8-tabelle in .h8-tabelle__rahmen (laeuft quer, nie die Seite)

   Formular und Einwilligungsbanner haben ihren eigenen Stil (Arbeitspakete 7 und 5).

   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

   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;
  --h8-gelb: #8a6100;

  /* 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;
  --h8-kopfhoehe: 60px;

  /* 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(64px, 8vw, 116px);
  --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);
}

/* 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%;
}

@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;
}

/* Kopfleiste --------------------------------------------------------------- */

.h8-kopf {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--h8-band);
  border-bottom: 1px solid var(--h8-linie);
}
.h8-kopf__innen {
  max-width: calc(var(--h8-breite) + 2 * var(--h8-rand));
  margin-inline: auto;
  padding: 10px var(--h8-rand);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}
.h8-kopf__marke {
  font-family: var(--h8-titelschrift);
  font-size: 19px;
  letter-spacing: 0.02em;
  text-decoration: none;
  /* Wortmarke und Knopf liegen in der ersten Zeile, die Ziele darunter. */
  margin-right: auto;
  padding: 8px 0;
}
.h8-kopf__nav {
  /* Auf dem Handy eine eigene Zeile ueber die volle Breite, damit die sechs Ziele
     umbrechen koennen statt quer zu laufen. */
  order: 3;
  flex-basis: 100%;
}
.h8-kopf__liste {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.h8-kopf__ziel {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--h8-leise);
  transition: color var(--h8-uebergang);
}
/* Der Strich waechst aus der Mitte, statt beim Ueberfahren zu erscheinen. Ein
   Unterstrich, der schlagartig da ist, wirkt wie ein Fehler; einer, der waechst, wie
   eine Antwort. Er liegt auf einem ::after, damit die Zeile nicht springt. */
.h8-kopf__ziel::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 9px;
  height: 1px;
  margin-inline: auto;
  width: 0;
  background: currentColor;
  transition: width var(--h8-uebergang);
}
.h8-kopf__ziel:hover,
.h8-kopf__ziel:focus-visible { color: var(--h8-text); }
.h8-kopf__ziel:hover::after,
.h8-kopf__ziel:focus-visible::after { width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .h8-kopf__ziel::after { transition: none; }
  .h8-kopf__ziel:hover { text-decoration: underline; }
}
.h8-kopf__knopf { flex: 0 0 auto; }

@media (min-width: 900px) {
  .h8-kopf__innen { flex-wrap: nowrap; padding-block: 6px; }
  .h8-kopf__marke { margin-right: 28px; }
  .h8-kopf__nav { order: 0; flex-basis: auto; margin-right: auto; }
  .h8-kopf__liste { flex-wrap: nowrap; gap: 22px; }
}

/* 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);
}
.h8-abschnitt__titel { margin-bottom: 12px; }
.h8-fliesstext { max-width: 62ch; }
.h8-fussnote {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--h8-leise);
}
.h8-grosszahl {
  display: block;
  font-family: var(--h8-titelschrift);
  font-size: clamp(32px, 7vw, 48px);
  line-height: 1.1;
  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. */
.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; }
}

.h8-bild {
  display: block;
  width: 100%;
  border: 1px solid var(--h8-linie);
  background: var(--h8-karte);
}

/* 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;
}
.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;
  /* Unter dem festen Kopf bleibt Luft: 100vh waere unter ihm angeschnitten. */
  min-height: clamp(420px, calc(88vh - var(--h8-kopfhoehe)), 640px);
  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) ------------------------------------------ */

.h8-kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--h8-linie);
  border: 1px solid var(--h8-linie);
}
.h8-kennzahl {
  margin: 0;
  padding: 16px 14px;
  background: var(--h8-karte);
  /* Die Mindestbreite oben ist so gewaehlt, dass "Doppelparker" und "provisionsfrei"
     in eine Zeile passen. break-word ist die Notbremse fuer noch laengere Werte und
     bricht nur, wenn ein Wort allein wirklich nicht passt. */
  overflow-wrap: break-word;
}
.h8-kennzahl__name {
  display: block;
  margin: 0 0 4px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--h8-leise);
}
.h8-kennzahl__wert {
  display: block;
  margin: 0;
  font-family: var(--h8-titelschrift);
  font-size: 21px;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
/* Eine anklickbare Kachel bleibt eine Kachel, nur mit Tippziel. */
a.h8-kennzahl { display: block; text-decoration: none; }
a.h8-kennzahl:hover { background: #fff; }

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

.h8-ampel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--h8-leise);
}
.h8-ampel::before {
  content: "";
  width: 10px;
  height: 10px;
  border: 1px solid currentColor;
  background: currentColor;
  flex: 0 0 auto;
}
/* Die Farbe steht nie allein: jede Ampel traegt ihr Wort daneben, sonst waere der
   Verkaufsstand fuer Farbfehlsichtige nicht lesbar. */
.h8-ampel--frei { color: var(--h8-gruen); }
.h8-ampel--reserviert { color: var(--h8-gelb); }
.h8-ampel--verkauft { color: 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);
}
.h8-karte__nr {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--h8-leise);
}
.h8-karte__titel { margin: 0; font-size: 19px; }
.h8-karte__zeilen { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 15px; }
.h8-karte__zeilen dt { color: var(--h8-leise); }
.h8-karte__zeilen dd { margin: 0; font-variant-numeric: tabular-nums; }
.h8-karte__preis {
  font-family: var(--h8-titelschrift);
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}

/* 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) ------------------------------------------- */

.h8-personen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 700px) { .h8-personen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.h8-person { padding: 18px 16px; border: 1px solid var(--h8-linie); background: var(--h8-karte); }
/* Name, Rolle und die beiden Zeilen sind im Markup span und a, also von Haus aus inline.
   Vertikale Abstaende greifen an einem inline-Element nicht, und ein Umbruch entsteht auch
   nicht: die vier Angaben liefen in einer einzigen Zeile zusammen. Auf dem Telefon brach die
   Telefonnummer mitten in der Ziffernfolge um, ihre letzten beiden Ziffern standen dadurch
   vor der Adresse, und es las sich als "75julian.neyer@amanthos.com", also als eine Adresse,
   die es nicht gibt. Am 10.09.2026 auf dem Telefon gemessen. */
.h8-person__name,
.h8-person__rolle,
.h8-person__zeile { display: block; }
.h8-person__name { margin: 0 0 2px; font-size: 19px; }
.h8-person__rolle { margin: 0 0 10px; font-size: 14px; color: var(--h8-leise); }
.h8-person__zeile { margin: 0 0 4px; font-size: 15px; }
/* Eine Rufnummer wird nie umgebrochen; eine Adresse darf im Notfall in der Karte umbrechen,
   statt aus ihr herauszulaufen. */
.h8-person__zeile[href^='tel:'] { white-space: nowrap; }
.h8-person__zeile[href^='mailto:'] { overflow-wrap: anywhere; }

/* 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 { margin: 0 0 4px; font-family: var(--h8-titelschrift); font-size: 18px; }
.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);
}
.h8-fuss__liste {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.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);
  text-decoration: underline;
  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) {
  .h8-karte,
  .h8-person,
  .h8-kennzahl {
    transition: transform 0.5s var(--h8-schwung), box-shadow 0.5s var(--h8-schwung);
  }
  .h8-karte:hover,
  .h8-person:hover,
  .h8-kennzahl:hover {
    transform: translateY(-4px);
    box-shadow: var(--h8-schatten);
  }
}

/* Ein Motiv, das sich beim Ueberfahren langsam heranschiebt. Der Rahmen schneidet,
   das Bild selbst waechst; ohne overflow: hidden waechst es aus dem Rahmen heraus. */
.h8-bild { overflow: hidden; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .h8-bild img { transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
  .h8-bild:hover img { transform: scale(1.04); }
}

/* 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; }
}