/* ==========================================================================
   layout.css — Raster, Kopfzeile, Fusszeile, Abschnittsgeruest
   Fabio Venier DF Immobilienbetreuung

   Zustaendig fuer Positionen und Flaechen, nicht fuer einzelne Bauteile.
   Bauteile stehen in components.css.

   Namensraum: alle Klassen hier sind entweder Strukturklassen (.rahmen,
   .raster, .band) oder Bereichsklassen (.kopf, .fuss, .menue). Bauteile
   in components.css benutzen eigene Praefixe. Dadurch ueberschneiden sich
   die Selektoren nicht und es gibt keine Spezifitaetskonflikte.
   ========================================================================== */


/* ==========================================================================
   1. RAHMEN UND RASTER
   ========================================================================== */

/* Der Rahmen begrenzt die Zeilenlaenge und haelt die Seitenraender.
   Jede Seite und jeder Abschnitt liegt in einem Rahmen. */
.rahmen {
  width: 100%;
  max-width: var(--rahmen);
  margin-inline: auto;
  padding-inline: var(--rand);
}

/* Zwoelf Spalten. Wird nur dort gesetzt, wo tatsaechlich auf Spalten
   gearbeitet wird — nicht pauschal auf jeden Abschnitt. */
.gitter {
  display: grid;
  grid-template-columns: repeat(var(--spalten), minmax(0, 1fr));
  column-gap: var(--steg);
}

/* --- Ehemals: sichtbares Spaltenraster -----------------------------------
   ENTFERNT.

   Ueber jeden Abschnitt liefen zwoelf senkrechte Haarlinien. Gedacht war
   das als Gestaltungselement. In der Abnahme sah es aus wie ein
   Drahtgitter, das versehentlich sichtbar geblieben ist — der staerkste
   Hinweis darauf, dass die Seite generiert wurde.

   Die Struktur kommt jetzt aus dem, was tatsaechlich da ist: Bandwechsel,
   Trennlinien zwischen Zeilen, Spaltenversatz. Nicht aus einem
   aufgemalten Raster.

   Falls es je zurueckkommen soll, gehoert es hoechstens in EINEN Abschnitt
   und nicht auf jeden — und dann deutlich blasser als vorher. */


/* ==========================================================================
   2. ABSCHNITTE UND BAENDER
   --------------------------------------------------------------------------
   .band  — voller Streifen ueber die Seitenbreite, traegt Hintergrund und
            senkrechten Abstand.
   .band-tief — invertiert. Der Farbwechsel der Seite passiert durch
            Inversion ganzer Baender, nicht durch Verlaeufe.
   ========================================================================== */

.band {
  position: relative;
  padding-block: var(--abschnitt-y);
}

.band-tief {
  background: var(--tiefe);
  color: var(--auf-tiefe);
}
.band-tief .label      { color: var(--auf-tiefe-2); }
.band-tief a           { text-decoration-color: var(--linie-auf-tiefe); }
.band-tief a:hover     { text-decoration-color: var(--akzent-hell); }
.band-tief ::selection { background: var(--auf-tiefe); color: var(--tiefe); }

/* Leicht getoentes Band. Setzt einen Abschnitt ab, ohne zu invertieren.
   Gebraucht fuer das Immobilienjahr: dort muessen Blau UND Gruen lesbar
   sein, und beide Markenfarben sind auf dunklem Grund zu dunkel. */
.band-ton { background: var(--papier-tief); }


/* Trennlinie zwischen zwei Baendern gleicher Farbe. */
.band-linie { border-top: var(--linie-staerke) solid var(--linie); }
.band-tief.band-linie { border-top-color: var(--linie-auf-tiefe); }


/* ==========================================================================
   3. ASYMMETRIE-HELFER
   --------------------------------------------------------------------------
   Kein zentrierter Inhalt. Die Seite arbeitet mit drei wiederkehrenden
   Aufteilungen. Sie sind hier benannt, damit derselbe Rhythmus ueber alle
   Seiten laeuft und nicht pro Abschnitt neu erfunden wird.
   ========================================================================== */

/* Ab Tablet greifen die Spaltenzuweisungen. Darunter steht alles
   untereinander — das ist der Normalfall, nicht der Sonderfall. */
@media (min-width: 48rem) {
  .sp-1-6   { grid-column: 1 / span 6; }
  .sp-1-5   { grid-column: 1 / span 5; }
  .sp-1-4   { grid-column: 1 / span 4; }
  .sp-6-7   { grid-column: 6 / span 7; }
  .sp-7-6   { grid-column: 7 / span 6; }
  .sp-8-5   { grid-column: 8 / span 5; }

  /* Dreispaltige Aufteilung der Fusszeile: 4 / 3 / 3 mit Luecken dazwischen,
     damit die Fusszeile denselben asymmetrischen Rhythmus hat wie der
     Rest der Seite und nicht als gleichmaessiges Dreierraster liest. */
  .sp-6-4   { grid-column: 6 / span 4; }
  .sp-7-3   { grid-column: 7 / span 3; }
  .sp-10-3  { grid-column: 10 / span 3; }
}
@media (max-width: 47.99rem) {
  [class*='sp-'] { grid-column: 1 / -1; }
}

/* --- Ehemals: Marginalspalte ---------------------------------------------
   ENTFERNT.

   Hier stand ein Zweispaltengitter (10rem plus Rest) fuer ein kleines
   Label links neben der Ueberschrift. Mit dem Wegfall der
   Abschnittsmarken blieb nur noch ein Kind uebrig — und das landete in
   der 10rem-Spalte. Ergebnis: Ueberschriften in einer 160 Pixel breiten
   Saeule, mit Silbentrennung mitten im Wort.

   Die Regel ist weg, die Klasse ist aus dem HTML entfernt. Wer wieder
   eine Marginalspalte will, muss auch wieder zwei Kinder einsetzen. */

.text-block { max-width: var(--satzbreite); }
.text-eng   { max-width: var(--satzbreite-eng); }


/* ==========================================================================
   4. KOPFZEILE
   --------------------------------------------------------------------------
   Die Telefonnummer steht immer sichtbar. Sie ist der wichtigste
   Handlungsaufruf der ganzen Seite.

   Zustandswechsel beim Scrollen: Es wird ausschliesslich mit Deckkraft
   und transform gearbeitet. Die Hoehe der Kopfzeile aendert sich nicht,
   damit kein Layoutsprung entsteht.
   ========================================================================== */

.kopf {
  position: sticky;
  top: 0;
  z-index: var(--z-kopf);
  /* Der Hintergrund liegt als eigene Ebene darunter, damit er ein- und
     ausgeblendet werden kann, ohne den Inhalt anzufassen. */
  isolation: isolate;
}

.kopf::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--papier);
  border-bottom: var(--linie-staerke) solid var(--linie);
  opacity: 0;
  transition: opacity var(--dauer-mittel) var(--kurve-aus);
}
.kopf[data-gescrollt='ja']::before { opacity: 1; }

.kopf-innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-4);
  min-height: 4.5rem;
  padding-block: var(--raum-2);
}
@media (min-width: 64rem) {
  .kopf-innen { min-height: 7rem; }
}

/* --- Logo in der Kopfzeile --------------------------------------------- */
.kopf-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  /* Verkleinert sich beim Scrollen. transform statt Groessenaenderung,
     damit die Zeilenhoehe der Kopfzeile unveraendert bleibt. */
  transform-origin: left center;
  transition: transform var(--dauer-mittel) var(--kurve-aus);
}
.kopf[data-gescrollt='ja'] .kopf-logo { transform: scale(0.88); }
/* min-height fuer die Trefferflaeche: das Bild ist nur 40 Pixel hoch,
   der Verweis darum herum muss 44 erreichen. */
.kopf-logo { min-height: 2.75rem; }
/* 4rem am Handy, 5.25rem ab Desktop.
   Der Schriftzug ist nur rund ein Drittel der Bildhoehe — bei
   kleineren Werten war "VENIER" kaum zu entziffern. Bei 5.25rem
   (84 px) ist er 29 px hoch. */
.kopf-logo img, .kopf-logo svg { height: 4rem; width: auto; }
@media (min-width: 64rem) {
  .kopf-logo img, .kopf-logo svg { height: 5.25rem; }
}

/* --- Hauptnavigation ---------------------------------------------------- */
.kopf-nav { display: none; }
@media (min-width: 64rem) {
  .kopf-nav { display: flex; align-items: center; gap: var(--raum-4); }
}

.nav-link {
  position: relative;
  font-size: var(--gr-14);
  font-weight: var(--fett-betont);
  text-decoration: none;
  padding-block: var(--raum-1);
  white-space: nowrap;
}

/* Unterstreichung als eigene Linie, damit sie animiert werden kann.
   Sie waechst von links, nicht aus der Mitte. */
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--linie-staerke);
  background: var(--akzent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dauer-mittel) var(--kurve-aus);
}
.nav-link:hover::after,
.nav-link:focus-visible::after { transform: scaleX(1); }

/* Aktuelle Seite. Bleibt dauerhaft unterstrichen. */
.nav-link[aria-current='page']::after { transform: scaleX(1); }
.nav-link[aria-current='page'] { color: var(--akzent-tief); }

/* Der Verweis auf die Hausverwaltungsseite ist hervorgehoben, weil das
   die wichtigste Zielgruppe ist. Kein Button, sondern ein vorangestellter
   Strich in der Akzentfarbe. */
.nav-link-betont { padding-left: var(--raum-3); }
.nav-link-betont::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: var(--raum-2);
  height: var(--linie-staerke);
  background: var(--akzent);
  transform: translateY(-50%);
}

/* Die Telefonnummer in der Kopfzeile ist entfallen — dort steht
   jetzt der Handlungsaufruf. Die Nummer liegt im Anfrage-Sheet und
   in der Fusszeile.
   ------------------------------------------------------------------- */

/* --- Menueschalter (unter 64rem) ---------------------------------------- */
.menue-schalter {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  background: none;
  border: 0;
  padding: var(--raum-2);
  margin-right: calc(var(--raum-2) * -1);
  cursor: pointer;
  font-family: var(--schrift-label);
  font-size: var(--gr-12);
  letter-spacing: var(--lauf-label);
  text-transform: uppercase;
  color: var(--tiefe);
}
@media (min-width: 64rem) { .menue-schalter { display: none; } }

/* Drei Striche, die sich zum Kreuz drehen. Nur transform. */
.schalter-striche { display: block; width: 1.375rem; height: 0.75rem; position: relative; }
.schalter-striche span {
  position: absolute; left: 0; right: 0;
  height: var(--linie-staerke);
  background: currentColor;
  transition: transform var(--dauer-mittel) var(--kurve-aus),
              opacity var(--dauer-kurz) linear;
}
.schalter-striche span:nth-child(1) { top: 0; }
.schalter-striche span:nth-child(2) { top: 50%; }
.schalter-striche span:nth-child(3) { top: 100%; }

[aria-expanded='true'] .schalter-striche span:nth-child(1) { transform: translateY(0.375rem) rotate(45deg); }
[aria-expanded='true'] .schalter-striche span:nth-child(2) { opacity: 0; }
[aria-expanded='true'] .schalter-striche span:nth-child(3) { transform: translateY(-0.375rem) rotate(-45deg); }


/* ==========================================================================
   5. MENUE AM HANDY
   Vollflaechig, invertiert. Wird ueber [hidden] geschaltet, damit es fuer
   Screenreader und Tastatur wirklich aus dem Baum faellt, wenn es zu ist.
   ========================================================================== */

.menue {
  position: fixed;
  inset: 0;
  z-index: var(--z-menue);
  background: var(--tiefe);
  color: var(--auf-tiefe);
  display: flex;
  flex-direction: column;
  padding: var(--raum-4) var(--rand) var(--raum-5);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menue[hidden] { display: none; }

.menue-kopf { display: flex; justify-content: flex-end; margin-bottom: var(--raum-6); }
.menue-liste { display: flex; flex-direction: column; gap: var(--raum-3); margin-bottom: auto; }

.menue-link {
  font-family: var(--schrift-display);
  font-stretch: var(--breite-display);
  font-weight: var(--fett-h);
  font-size: var(--gr-34);
  line-height: var(--zeile-eng);
  letter-spacing: var(--lauf-display);
  text-decoration: none;
  color: inherit;

  /* 34 Pixel Schrift mal 1,15 Zeilenhoehe ergibt eine 39 Pixel hohe
     Trefferflaeche — bei der meistbenutzten Navigation der Seite fuenf
     Pixel zu wenig. Der Verweis wird deshalb zur Flaeche mit Mindest-
     hoehe statt nur zur Zeile. Der Text bleibt senkrecht mittig, die
     Liste waechst dadurch um 5 Pixel je Eintrag — in einem Menue, das
     ohnehin den ganzen Bildschirm einnimmt, faellt das nicht ins
     Gewicht. */
  display: flex;
  align-items: center;
  min-height: 2.75rem;
}
.menue-link[aria-current='page'] { color: var(--akzent-hell); }

/* Im Menuefuss steht der Handlungsaufruf, nicht mehr die Telefonnummer.
   Die Nummer ist im Anfrage-Sheet zu finden, zusammen mit E-Mail und
   Bueroezeiten. */
.menue-fuss {
  margin-top: var(--raum-6);
  padding-top: var(--raum-4);
  border-top: var(--linie-staerke) solid var(--linie-auf-tiefe);
}
.menue-fuss .knopf { width: 100%; background: var(--akzent-hell); border-color: var(--akzent-hell); color: var(--tiefe); }


/* ==========================================================================
   6. FESTER ANRUF-BUTTON AM HANDY
   --------------------------------------------------------------------------
   Steht am unteren Rand, ab Tablet verschwindet er (dort ist die Nummer
   in der Kopfzeile sichtbar). Er darf den Fusszeileninhalt nicht
   verdecken, deshalb bekommt der Body unten Platz.
   ========================================================================== */

.anrufen {
  position: fixed;
  left: var(--raum-3);
  right: var(--raum-3);
  bottom: var(--raum-3);
  z-index: var(--z-anrufen);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--raum-2);
  min-height: 3.25rem;
  padding-inline: var(--raum-4);
  background: var(--akzent);
  color: var(--papier);
  text-decoration: none;
  border-radius: var(--radius);
  font-family: var(--schrift-display);
  font-stretch: var(--breite-display);
  font-weight: var(--fett-display);
  font-size: var(--gr-16);
  letter-spacing: 0.01em;
  /* Geraete mit Aussparung am unteren Rand. */
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.anrufen svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }

@media (min-width: 48rem) { .anrufen { display: none; } }
@media (max-width: 47.99rem) { body { padding-bottom: 5rem; } }

/* Ist das Menue offen, waere der Anruf-Button doppelt. */
body[data-menue='offen'] .anrufen { display: none; }


/* ==========================================================================
   7. FUSSZEILE
   --------------------------------------------------------------------------
   HELL, nicht invertiert.

   Das Logo existiert nur in einer Fassung: Vollfarbe auf hellem Grund.
   Auf dunklem Grund verschwinden die dunkelblauen Anteile — Gebaeude,
   "FABIO", das Haus-Symbol. Eine helle Logofassung gibt es nicht, und
   eine weisse Platte unter das Logo zu legen sieht nach Aufkleber aus.

   Also wird die Flaeche hell. Abgegrenzt wird sie ueber einen leicht
   getoenten Grund und eine Linie oben. Den dunklen Gegenpol traegt
   weiterhin das Band "Fuer Hausverwaltungen" auf der Startseite.
   ========================================================================== */

.fuss {
  background: var(--papier-tief);
  color: var(--tiefe);
  border-top: var(--linie-staerke) solid var(--linie);
  padding-block: var(--raum-6) var(--raum-5);
}

/* --- Kopf der Fusszeile --------------------------------------------------
   Logo, Kernsatz und Handlungsaufruf in einer Zeile, darunter eine
   Trennlinie. Das gibt der Fusszeile einen Anfang, statt sie mit drei
   Textspalten beginnen zu lassen. */
.fuss-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--raum-4);
  padding-bottom: var(--raum-5);
  margin-bottom: var(--raum-5);
  border-bottom: var(--linie-staerke) solid var(--linie);
}
.fuss-logo { display: block; flex-shrink: 0; text-decoration: none; }
/* Schlichte Fassung ohne Kontaktdaten im Bild. Die Nummer und die
   Adresse stehen direkt darunter als anklickbarer Block — dort sind
   sie in jeder Groesse lesbar und lassen sich antippen.
   5rem = 80 px, damit "VENIER" 28 px hoch ist. */
.fuss-logo img { height: 5rem; width: auto; }

/* Der Kernsatz schiebt den Knopf ans rechte Ende und nimmt sich den
   Rest. Am Handy rutscht er unter das Logo. */
.fuss-satz {
  flex: 1 1 16rem;
  font-family: var(--schrift-display);
  font-size: var(--gr-20);
  font-weight: 600;
  line-height: var(--zeile-eng);
  letter-spacing: -0.02em;
  color: var(--tiefe);
  max-width: 26ch;
}

.fuss-gitter { row-gap: var(--raum-5); }

.fuss h2, .fuss h3 { font-size: var(--gr-20); margin-bottom: var(--raum-3); }
.fuss .label { color: var(--text-2); margin-bottom: var(--raum-2); }

/* gap 0, weil die Verweise selbst 44 Pixel hoch sind und sich damit
   bereits genug Luft schaffen. */
.fuss-liste { display: flex; flex-direction: column; gap: var(--raum-2); }
.fuss-liste:has(.fuss-link) { gap: 0; }
.fuss a { color: inherit; text-decoration-color: var(--linie); }
.fuss a:hover { text-decoration-color: var(--akzent); }

/* Verweise in der Fusszeilen-Navigation. Bewusst ohne die animierte
   Unterstreichung der Kopfzeile — in einer Liste untereinander waere
   die fehl am Platz. Die aktuelle Seite ist am Akzentstrich erkennbar. */
.fuss-link {
  position: relative;
  /* Bewusst KEIN Flex-Container, obwohl das fuer die senkrechte Mitte
     bequemer waere: Chrome zieht Trennstellen aus hyphens:auto nicht in
     die Mindestbreite eines Flex-Elements ein. Der Verweis blieb dadurch
     bei der Breite seines laengsten Wortes stehen und lief aus der
     Spalte. Als Block greift die Trennung, die Hoehe kommt ueber den
     Innenabstand: 21 Pixel Zeile plus zweimal 11,5 ergibt die noetigen
     44 Pixel Trefferflaeche. */
  display: block;
  padding: 0.71875rem var(--raum-3);
  padding-right: 0;
  font-size: var(--gr-14);
  text-decoration: none;
  color: var(--text-2);
  transition: color var(--dauer-kurz) var(--kurve-aus);

  /* Die Silbentrennung in base.css gilt fuer p, li, dt und dd — ein
     Verweis in der Navigation ist keins davon. Ohne sie bestimmt das
     laengste Wort die Mindestbreite: "Für Hausverwaltungen" brauchte
     146 Pixel in einer 130 Pixel schmalen Fusszeilenspalte und lief
     darueber hinaus. Mit Trennung bricht es zu "Haus-verwaltungen". */
  hyphens: auto;
  -webkit-hyphens: auto;
  /* Letztes Netz, falls der Browser kein Trennwoerterbuch fuer Deutsch
     mitbringt: dann bricht das Wort stumpf, statt aus der Spalte zu
     laufen. Die Trennung oben greift vorher, wo sie verfuegbar ist. */
  overflow-wrap: break-word;
}
.fuss-link::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: var(--raum-2);
  height: var(--linie-staerke);
  background: var(--linie);
  transition: background-color var(--dauer-kurz) var(--kurve-aus),
              width var(--dauer-kurz) var(--kurve-aus);
}
.fuss-link:hover { color: var(--tiefe); }
.fuss-link:hover::before { background: var(--akzent); }
.fuss-link[aria-current='page'] { color: var(--tiefe); font-weight: var(--fett-betont); }
.fuss-link[aria-current='page']::before { background: var(--akzent); }

.fuss-schluss {
  margin-top: var(--raum-6);
  padding-top: var(--raum-3);
  border-top: var(--linie-staerke) solid var(--linie);
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-2) var(--raum-4);
  align-items: baseline;
  justify-content: space-between;
}
.fuss-schluss, .fuss-schluss a { font-size: var(--gr-12); color: var(--text-2); }
.fuss-recht { display: flex; gap: var(--raum-4); }
/* Auch die Rechtsverweise brauchen eine greifbare Flaeche. */
.fuss-recht a { display: inline-flex; align-items: center; min-height: 2.75rem; }


/* --- Kontaktblock in der Fusszeile ---------------------------------------
   Greift die Bildsprache des Logos auf: umkreistes Symbol, blau fuer
   Telefon, gruen fuer E-Mail.

   WARUM ALS TEXT UND NICHT ALS BILD:
   Es gibt vom Logo auch eine Fassung mit Telefonnummer und E-Mail als
   Teil der Grafik. Die ist hier bewusst NICHT eingesetzt. Eine Nummer
   im Bild laesst sich nicht antippen, nicht kopieren, nicht vorlesen
   und waechst nicht mit, wenn jemand die Schrift groesser stellt.
   Genau am Handy — wo die meisten anrufen — waere sie damit unbrauchbar.

   Die Grafikfassung liegt unter assets/logo/original/ und eignet sich
   fuer Briefkopf, E-Mail-Signatur und Fahrzeugbeschriftung. */
.fuss-kontakt { display: grid; gap: var(--raum-2); }

.fk-zeile {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--raum-3);
  min-height: 2.75rem;
  text-decoration: none;
  color: inherit;
}
.fk-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 2px solid currentColor;
  flex-shrink: 0;
  transition: background-color var(--dauer-kurz) var(--kurve-aus),
              color var(--dauer-kurz) var(--kurve-aus);
}
.fk-icon .icon { width: 1.125rem; height: 1.125rem; }
.fk-blau  { color: var(--akzent); }
.fk-gruen { color: var(--signal-text); }

.fk-zeile:hover .fk-icon { background: currentColor; }
.fk-zeile:hover .fk-icon .icon { color: var(--papier); }

.fk-label {
  display: block;
  font-size: var(--gr-12);
  letter-spacing: var(--lauf-label);
  text-transform: uppercase;
  color: var(--text-2);
}
.fk-wert {
  display: block;
  font-weight: var(--fett-betont);
  line-height: var(--zeile-dicht);
  overflow-wrap: anywhere;
}
.fk-zeile:hover .fk-wert { color: var(--akzent-tief); }


/* ==========================================================================
   8. HANDYANSICHT
   --------------------------------------------------------------------------
   Nur Zusammenruecken und Vergroessern von Trefferflaechen — keine
   zusaetzliche Gestaltung. Die Fusszeile war am Handy 1171 Pixel hoch;
   der Grossteil davon war Luft zwischen gestapelten Spalten.
   ========================================================================== */

@media (max-width: 47.99rem) {

  .fuss { padding-block: var(--raum-5) var(--raum-4); }

  /* Logo, Kernsatz und Knopf stehen untereinander. Der Knopf nimmt die
     volle Breite — am Handy ist er der wichtigste Weg zur Anfrage. */
  .fuss-kopf {
    gap: var(--raum-3);
    padding-bottom: var(--raum-4);
    margin-bottom: var(--raum-4);
  }
  .fuss-kopf .knopf { width: 100%; }
  .fuss-satz { flex-basis: 100%; font-size: var(--gr-16); max-width: none; }
  .fuss-logo img { height: 3.5rem; }

  /* Gestapelte Spalten brauchen weniger Abstand als nebeneinander. */
  .fuss-gitter { row-gap: var(--raum-4); }
  .fuss-schluss { margin-top: var(--raum-4); }


  /* Kopfzeile schmaler halten, damit mehr Inhalt oben Platz hat. */
  .kopf-innen { min-height: 5rem; }

  /* Die Fehlerseite laedt bewusst kein content.js und schreibt ihre
     Verweise deshalb von Hand — ohne die Trefferflaeche, die .fuss-link
     mitbringt. Gemessen 21 bis 26 Pixel hoch. Hier nachgereicht, damit
     ausgerechnet die Seite, auf der man sich verlaufen hat, am Handy
     bedienbar bleibt. */
  .fuss-liste a:not(.fuss-link) {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
  }
}

/* Fuenf Verweise mit je 44 Pixeln ergeben eine 220 Pixel hohe Saeule.
   Zweispaltig halbiert das, ohne die Trefferflaeche anzutasten.

   Die untere Grenze ist gemessen, nicht gewaehlt: Bei 320 Pixeln
   Fensterbreite sind die Spalten 130 Pixel breit, "Für Hausverwaltungen"
   braucht aber 146. Silbentrennung waere der elegantere Ausweg, sie ist
   aber vom Trennwoerterbuch des Browsers abhaengig und damit nicht
   verlaesslich. Ab 23rem sind die Spalten 154 Pixel breit — dort passt
   es ohne Trennung. Darunter bleibt es einspaltig. */
@media (min-width: 23rem) and (max-width: 47.99rem) {
  .fuss-liste:has(.fuss-link) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--raum-3);
  }
}

/* Oeffnungszeiten als echte Definitionsliste, nicht als Tabelle aus divs.
   Zweispaltig, solange Platz ist. */
.zeiten { display: grid; grid-template-columns: auto 1fr; gap: var(--raum-1) var(--raum-3); }
.zeiten dt { font-family: var(--schrift-label); font-size: var(--gr-12); letter-spacing: var(--lauf-label); text-transform: uppercase; color: var(--text-2); }
.zeiten dd { font-variant-numeric: tabular-nums; }

/* In der Fusszeile stehen Tag und Zeit UNTEREINANDER.
   Nebeneinander bleiben in einer Fusszeilenspalte nur rund 140 Pixel
   fuer die Zeit — dort brach "09:00-12:00 und 14:00-17:00 Uhr" auf drei
   Zeilen um und die Uhrzeit stand vom Tag abgerissen da. */
.fuss .zeiten { grid-template-columns: 1fr; gap: 0; }
.fuss .zeiten dt { color: var(--text-2); margin-top: var(--raum-2); }
.fuss .zeiten dt:first-child { margin-top: 0; }
.fuss .zeiten dd { font-size: var(--gr-14); white-space: nowrap; }