/* ==========================================================================
   Objektportal HYPA - Stylesheet

   Eine handgeschriebene Datei, kein Utility-Framework und keine Buildkette
   (Plan Abschnitt 6). Frontend und Backend teilen sich alles hier drin;
   nur die Anordnung unterscheidet sich (Plan Abschnitt 10).

   Farbwerte stehen ausschliesslich in tokens.css. In dieser Datei darf kein
   einziger Hex-Wert vorkommen - das ist Abnahmekriterium 12.

   Aufbau:
     1. Grundlagen und Zuruecksetzen
     2. Schriften
     3. Geruest: Kopf, Inhalt, Fuss
     4. Notfallleiste
     5. Objektkopf
     6. Aushangskarten
     7. Formulare und Buttons
     8. Backend: Kacheln, Tabellen, Vorschau
     9. Meldungen und Zustaende
    10. Infobereich und Wetter
    11. Hilfsklassen
    12. Druckausgabe
   ========================================================================== */

/* ==========================================================================
   1. Grundlagen
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--schrift-text);
  font-size: var(--groesse-text);
  font-weight: var(--schrift-gewicht-text);
  line-height: var(--zeilenhoehe-text);
  color: var(--hypa-text);
  background: var(--hypa-flaeche);
}

h1,
h2,
h3 {
  font-family: var(--schrift-ueberschrift);
  font-weight: var(--schrift-gewicht-ueberschrift);
  text-transform: uppercase;
  line-height: var(--zeilenhoehe-eng);
  margin: 0 0 var(--abstand-m);
}

h1 {
  font-size: var(--groesse-h1);
  letter-spacing: var(--sperrung-h1);
}
h2 {
  font-size: var(--groesse-h2);
  letter-spacing: var(--sperrung-h2);
}
h3 {
  font-size: var(--groesse-h3);
  letter-spacing: var(--sperrung-h3);
}

/* h4 folgt auf hypa.de bewusst der Textschrift, nicht der Versalienschrift */
h4 {
  font-family: var(--schrift-text);
  font-size: var(--groesse-h4);
  font-weight: var(--schrift-gewicht-betont);
  text-transform: none;
  letter-spacing: 0;
  line-height: var(--zeilenhoehe-eng);
  margin: 0 0 var(--abstand-s);
}

p {
  margin: 0 0 var(--abstand-m);
}

a {
  color: var(--hypa-rot);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--hypa-rot-dunkel);
}

/* Sichtbarer Fokus fuer die Tastaturbedienung. Nie entfernen. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: var(--fokus-breite) solid var(--fokus-farbe);
  outline-offset: var(--fokus-abstand);
}

img {
  max-width: 100%;
  height: auto;
}

hr {
  border: none;
  border-top: var(--kante-linie) solid var(--hypa-linie);
  margin: var(--abstand-l) 0;
}

/* Sprungmarke fuer Tastatur- und Screenreader-Nutzer */
.sprung-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--abstand-s) var(--abstand-m);
  background: var(--hypa-rot);
  color: var(--hypa-text-invers);
  text-decoration: none;
}

.sprung-link:focus {
  left: 0;
}

/* ==========================================================================
   2. Schriften
   Lokal ausgeliefert, nie von einem fremden Server (Plan Abschnitt 10).
   Sonst ginge die IP-Adresse jedes Mieters an einen Dritten.
   font-display: swap - der Text ist sofort lesbar, auch bevor die Schrift da ist.
   ========================================================================== */

@font-face {
  font-family: 'Barlow Semi Condensed';
  src: url('/schrift/barlow-semi-condensed-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Barlow';
  src: url('/schrift/barlow-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans';
  src: url('/schrift/noto-sans-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans';
  src: url('/schrift/noto-sans-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   3. Geruest
   Kopf und Fuss anthrazit wie die Website, Inhaltsbereich hell - dort leben
   Aushaenge, Formulare und das Backend (Plan Abschnitt 10).
   ========================================================================== */

.kopf {
  background: var(--hypa-anthrazit);
  color: var(--hypa-text-invers);
  padding: var(--abstand-m) 0;
}

.kopf__innen,
.fuss__innen,
.inhalt {
  width: 100%;
  max-width: var(--breite-inhalt);
  margin: 0 auto;
  padding-inline: var(--abstand-m);
}

.kopf__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-m);
  flex-wrap: wrap;
}

.kopf__logo {
  display: flex;
  align-items: center;
  gap: var(--abstand-s);
  text-decoration: none;
  color: inherit;
}

.kopf__logo img {
  height: var(--hoehe-logo);
  width: auto;
  display: block;
}

/* Auf dem Handy etwas kleiner, damit der Kopfbereich nicht zu viel vom
   Bildschirm nimmt - darunter hängt ja noch die haftende Notfallleiste. */
@media (max-width: 34rem) {
  .kopf__logo img {
    height: var(--hoehe-logo-klein);
  }
}

.kopf__navigation {
  display: flex;
  align-items: center;
  gap: var(--abstand-m);
  flex-wrap: wrap;
  font-size: var(--groesse-klein);
}

.kopf__navigation a {
  color: var(--hypa-text-invers);
  text-decoration: none;
  padding: var(--abstand-xs) 0;
  border-bottom: 2px solid transparent;
}

.kopf__navigation a:hover,
.kopf__navigation a[aria-current='page'] {
  border-bottom-color: var(--hypa-rot);
  color: var(--hypa-text-invers);
}



.kopf__nutzer {
  color: var(--hypa-text-invers);
  opacity: 0.75;
}

main {
  flex: 1 0 auto;
  padding-block: var(--abstand-xl);
}

main.ohne-abstand-oben {
  padding-top: 0;
}

.inhalt--schmal {
  max-width: var(--breite-schmal);
}

.fuss {
  background: var(--hypa-anthrazit);
  color: var(--hypa-text-invers);
  padding: var(--abstand-l) 0;
  margin-top: var(--abstand-xxl);
  font-size: var(--groesse-klein);
}

.fuss__innen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-m) var(--abstand-l);
  align-items: center;
  justify-content: space-between;
}

.fuss a {
  color: var(--hypa-text-invers);
  text-decoration: underline;
}

.fuss__quelle {
  opacity: 0.7;
}

/* --- Kennzeichnung der Vorführung ---------------------------------------
   Nur auf der Demo-Installation sichtbar. Bewusst in der Warnfarbe und ganz
   oben: Wer hier etwas eintippt, soll vorher wissen, dass es eine Vorführung
   ist und keine echten Personendaten hineingehören.
   ------------------------------------------------------------------------ */

.demo-leiste {
  background: var(--status-arbeit);
  color: var(--hypa-text-invers);
  font-size: var(--groesse-klein);
  line-height: 1.35;
}

.demo-leiste__innen {
  width: 100%;
  max-width: var(--breite-inhalt);
  margin: 0 auto;
  padding: var(--abstand-xs) var(--abstand-m);
  display: flex;
  align-items: baseline;
  gap: var(--abstand-s);
  flex-wrap: wrap;
}

.demo-leiste strong {
  text-transform: uppercase;
  letter-spacing: var(--sperrung-button);
  white-space: nowrap;
}

/* ==========================================================================
   4. Notfallleiste
   Plan Abschnitt 3.2: schmale, beim Rollen haftende Leiste, optisch
   abgesetzt, auf JEDER Seite hinter dem Objekt-Login.
   ========================================================================== */

.notfall {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--hypa-anthrazit);
  color: var(--hypa-text-invers);
  border-top: var(--kante-balken) solid var(--hypa-rot);
  padding: var(--abstand-s) 0;
  font-size: var(--groesse-text);
}

.notfall__innen {
  width: 100%;
  max-width: var(--breite-inhalt);
  margin: 0 auto;
  padding-inline: var(--abstand-m);
  display: flex;
  align-items: center;
  gap: var(--abstand-s) var(--abstand-m);
  flex-wrap: wrap;
}

.notfall__symbol {
  flex: 0 0 auto;
  color: var(--hypa-rot);
}

.notfall__text {
  flex: 1 1 16rem;
}

/* Zwei Fassungen des Hinweises, je nach Platz. Beide stehen im Markup, nur
   eine ist sichtbar - ein Umschalten per JavaScript wäre hier fehl am Platz,
   die Leiste muss auch ohne funktionieren. */
.notfall__text--kurz {
  display: none;
}

@media (max-width: 48rem) {
  .notfall__text--lang {
    display: none;
  }

  .notfall__text--kurz {
    display: block;
  }
}

/* Die Notfallnummer ist ein tel:-Link und muss auch mit dem Daumen sicher zu
   treffen sein.

   Aufbau: Hörersymbol links, daneben ein zweizeiliger Block aus Beschriftung
   und Ziffern. Beide Zeilen sind linksbündig an derselben Kante - zentriert
   wirkte der Block neben dem Symbol unruhig.

   Das gap ist kein Feinschliff, sondern nötig: In einem Flex-Container
   werden Leerzeichen zwischen den Elementen verworfen. Das Leerzeichen aus
   der Vorlage käme nie an, und der Hörer klebte an der Ziffer. */
.notfall__nummer {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-s);
  min-height: var(--klickflaeche-min);
  padding: var(--abstand-s) var(--abstand-m);
  background: var(--hypa-rot);
  color: var(--hypa-text-invers);
  text-decoration: none;
  white-space: nowrap;
}

.notfall__nummer:hover {
  background: var(--hypa-rot-dunkel);
  color: var(--hypa-text-invers);
}

/* Das Symbol sitzt optisch etwas tiefer als die Mitte des Textblocks, weil
   die kleine Beschriftung oben leichter wiegt als die Ziffern unten.
   Der Versatz gleicht das aus. */
.notfall__hoerer {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin-top: 2px;
}

.notfall__block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}

/* Die Beschriftung ordnet den Knopf zu. Ohne sie stünden zwei rote Knöpfe
   nebeneinander und niemand wüsste, welcher wofür ist. Sie tritt bewusst
   zurück: die Nummer ist das, was zählt. */
.notfall__wofuer {
  font-family: var(--schrift-text);
  font-size: 0.8125rem;
  font-weight: var(--schrift-gewicht-text);
  letter-spacing: 0.01em;
  text-transform: none;
  opacity: 0.8;
}

.notfall__ziffern {
  font-family: var(--schrift-button);
  font-size: var(--groesse-gross);
  font-weight: var(--schrift-gewicht-betont);
  letter-spacing: var(--sperrung-button);
}

/* Der Melde-Knopf steht rechts neben den Rufnummern und sieht ihnen bewusst
   ähnlich - er gehört zur selben Entscheidung: anrufen oder melden.
   Unterschieden wird er über das Symbol (Megafon statt Hörer) und die
   Beschriftung "Kein Notfall", nicht über eine weitere Farbe. */
.notfall__melden {
  margin-left: auto;
}

/* Sobald Text und drei Knöpfe nicht mehr in eine Zeile passen, bekommt der
   Text eine eigene Zeile und die Knöpfe rücken geschlossen darunter.

   Ohne diese Regel bräche nur der letzte Knopf um und stünde allein unter
   den beiden anderen - zwei oben, einer unten sieht nach Versehen aus. */
@media (max-width: 75rem) {
  .notfall__text {
    flex: 1 0 100%;
  }

  .notfall__melden {
    margin-left: 0;
  }
}

/* Die Leiste haftet beim Rollen. Auf einem Handy darf sie deshalb nicht ein
   Viertel des Bildschirms belegen - der Plan verlangt ausdrücklich eine
   schmale Leiste. Auf kleinen Bildschirmen wird sie deshalb kompakter:
   kleinere Schrift, weniger Luft, Beschriftung neben der Nummer statt
   darüber.

   Diese Media Query MUSS hinter den Basisregeln von .notfall__nummer und
   .notfall__wofuer stehen. Weiter oben in der Datei hätte sie dieselbe
   Spezifität wie die Basisregeln und würde von ihnen überschrieben - eine
   Media Query erhöht die Spezifität nicht. */
@media (max-width: 34rem) {
  .notfall {
    padding: var(--abstand-xs) 0;
  }

  .notfall__innen {
    gap: var(--abstand-xs) var(--abstand-s);
  }

  .notfall__text {
    font-size: var(--groesse-klein);
    line-height: 1.35;
  }

  .notfall__nummer {
    min-height: var(--klickflaeche-min);
    padding: var(--abstand-xs) var(--abstand-s);
    flex: 1 1 auto;
    justify-content: center;
    gap: var(--abstand-xs);
  }

  /* Beschriftung neben die Ziffern statt darüber: spart eine Zeile Höhe. */
  .notfall__block {
    flex-direction: row;
    align-items: baseline;
    gap: var(--abstand-xs);
  }

  .notfall__hoerer {
    margin-top: 0;
  }

  .notfall__ziffern {
    font-size: var(--groesse-text);
  }
}

/* Auf sehr schmalen Geräten passen die beiden Knöpfe mit ausgeschriebener
   Beschriftung nicht nebeneinander und rutschen untereinander - die haftende
   Leiste würde dann ein Fünftel des Bildschirms belegen.

   Deshalb entfällt hier die sichtbare Beschriftung. Verloren geht dabei
   nichts: Die 112 kennt jeder, die zweite Nummer ist die einzige andere, und
   der Text daneben nennt beide Fälle. Für Screenreader bleibt die
   Beschriftung erhalten - sie wird nur unsichtbar, nicht entfernt. */
@media (max-width: 26rem) {
  .notfall__wofuer {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* ==========================================================================
   5. Objektkopf
   Plan Abschnitt 3.2: grossformatiges Foto mit dunkler Ueberlagerung, darauf
   der Objektname in weissen Versalien - das Muster der Referenzseiten.
   Ohne Foto: Anthrazitflaeche mit dem Namen.
   ========================================================================== */

.objektkopf {
  position: relative;
  min-height: var(--hoehe-objektkopf);
  display: flex;
  align-items: flex-end;
  background-color: var(--hypa-anthrazit);
  background-size: cover;
  background-position: center;
  color: var(--hypa-text-invers);
  overflow: hidden;
}

.objektkopf--klein {
  min-height: var(--hoehe-objektkopf-klein);
}

/* Die dunkle Ueberlagerung. Ohne sie ist weisser Text auf einem hellen
   Himmel im Foto nicht lesbar. */
.objektkopf::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgb(0 0 0 / 78%) 0%,
    rgb(0 0 0 / 45%) 45%,
    rgb(0 0 0 / 25%) 100%
  );
}

.objektkopf__innen {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--breite-inhalt);
  margin: 0 auto;
  padding: var(--abstand-xl) var(--abstand-m);
}

.objektkopf__name {
  margin: 0;
  font-size: clamp(var(--groesse-h2), 5.5vw, 3.25rem);
  color: var(--hypa-text-invers);
  text-shadow: 0 2px 12px rgb(0 0 0 / 45%);
}

.objektkopf__adresse {
  margin: var(--abstand-xs) 0 0;
  font-size: var(--groesse-gross);
  opacity: 0.9;
}

/* ==========================================================================
   6. Aushangskarten
   Plan Abschnitt 10: Rot als Kante und Zeichen, nie als Flaeche - so bleiben
   Knopf und Alarm auf einen Blick unterscheidbar.
   Und: Farbe ist nie der einzige Traeger der Bedeutung. Neben jeder
   Kennzeichnung steht das Wort, dazu je Typ ein eigenes Symbol.
   ========================================================================== */

.aushaenge {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-m);
  margin: 0;
  padding: 0;
  list-style: none;
}

.aushang {
  position: relative;
  background: var(--hypa-flaeche-karte);
  border: var(--kante-linie) solid var(--hypa-linie);
  border-left: var(--kante-balken) solid var(--hypa-linie-kraeftig);
  border-radius: var(--kante-radius);
  padding: var(--abstand-m) var(--abstand-l);
}

.aushang--stoerung {
  border-left-color: var(--typ-stoerung);
}
.aushang--info {
  border-left-color: var(--typ-info);
}
.aushang--gruss {
  border-left-color: var(--typ-gruss);
}

.aushang__kopf {
  display: flex;
  align-items: center;
  gap: var(--abstand-s) var(--abstand-m);
  flex-wrap: wrap;
  margin-bottom: var(--abstand-s);
}

.aushang__kennzeichnung {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-xs);
  font-family: var(--schrift-ueberschrift);
  font-weight: var(--schrift-gewicht-ueberschrift);
  font-size: var(--groesse-text);
  letter-spacing: var(--sperrung-h3);
  text-transform: uppercase;
}

.aushang--stoerung .aushang__kennzeichnung {
  color: var(--typ-stoerung);
}
.aushang--info .aushang__kennzeichnung {
  color: var(--typ-info);
}
.aushang--gruss .aushang__kennzeichnung {
  color: var(--typ-gruss);
}

.aushang__symbol {
  flex: 0 0 auto;
}

.aushang__kategorie {
  font-size: var(--groesse-klein);
  color: var(--hypa-text-hell);
  padding: 2px var(--abstand-s);
  border: var(--kante-linie) solid var(--hypa-linie);
}

/* Aushang-Titel bewusst ohne Versalien: "Aufzug Aufgang B defekt bis
   voraussichtlich Freitag" muss in einer Zeile lesbar sein, nicht plakativ
   wirken (Plan Abschnitt 10). */
.aushang__titel {
  font-family: var(--schrift-text);
  font-size: var(--groesse-h4);
  font-weight: var(--schrift-gewicht-betont);
  text-transform: none;
  letter-spacing: 0;
  margin: 0 0 var(--abstand-s);
}

.aushang__text {
  font-size: var(--groesse-gross);
  margin: 0 0 var(--abstand-s);
  /* Zeilenumbrueche aus dem Eingabefeld bleiben erhalten, ohne dass dafuer
     HTML im Text noetig waere. */
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.aushang__fuss {
  font-size: var(--groesse-klein);
  color: var(--hypa-text-hell);
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-xs) var(--abstand-m);
}

.aushang--vorschau-neu {
  outline: var(--fokus-breite) dashed var(--hypa-rot);
  outline-offset: var(--fokus-abstand);
}

/* Ruhiger Satz statt leerer Seite (Plan Abschnitt 3.2) */
.leer {
  background: var(--hypa-flaeche-karte);
  border: var(--kante-linie) solid var(--hypa-linie);
  padding: var(--abstand-xl);
  text-align: center;
  color: var(--hypa-text-hell);
  font-size: var(--groesse-gross);
}

/* ==========================================================================
   7. Formulare und Buttons
   Buttons: rote Flaeche, weisse Versalien, keine Rundung - exakt wie auf
   hypa.de (dort: --button_border_radius 0, text-transform uppercase).
   ========================================================================== */

.button,
button.button,
input[type='submit'].button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-s);
  min-height: var(--klickflaeche-min);
  padding: 13px 29px;
  border: none;
  border-radius: var(--kante-radius);
  background: var(--hypa-rot);
  color: var(--hypa-text-invers);
  font-family: var(--schrift-button);
  font-size: var(--groesse-gross);
  font-weight: var(--schrift-gewicht-betont);
  letter-spacing: var(--sperrung-button);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
}

.button:hover {
  background: var(--hypa-rot-dunkel);
  color: var(--hypa-text-invers);
}

.button[disabled],
.button[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
}

.button--gross {
  width: 100%;
  font-size: var(--groesse-h4);
  padding: var(--abstand-m) var(--abstand-l);
}

/* Zweitrangige Handlung: gleiche Form, aber Umriss statt Flaeche. */
.button--zweitrangig {
  background: transparent;
  color: var(--hypa-anthrazit);
  border: 2px solid var(--hypa-anthrazit);
}

.button--zweitrangig:hover {
  background: var(--hypa-anthrazit);
  color: var(--hypa-text-invers);
}

.button--klein {
  min-height: auto;
  padding: var(--abstand-xs) var(--abstand-m);
  font-size: var(--groesse-klein);
}

.button-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-m);
  align-items: center;
}

.formular {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-l);
}

.feld {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-xs);
}

.feld > label,
.feld__beschriftung {
  font-weight: var(--schrift-gewicht-betont);
  font-size: var(--groesse-text);
}

.feld__hinweis {
  font-size: var(--groesse-klein);
  color: var(--hypa-text-hell);
}

.feld__pflicht {
  color: var(--hypa-rot);
}

input[type='text'],
input[type='email'],
input[type='tel'],
input[type='password'],
input[type='number'],
input[type='datetime-local'],
input[type='date'],
input[type='search'],
select,
textarea {
  width: 100%;
  min-height: var(--klickflaeche-min);
  padding: var(--abstand-s) var(--abstand-m);
  border: var(--kante-linie) solid var(--hypa-linie-kraeftig);
  border-radius: var(--kante-radius);
  background: var(--hypa-flaeche-karte);
  color: var(--hypa-text);
  font-family: var(--schrift-text);
  /* 16px verhindert, dass iOS beim Antippen in das Feld hineinzoomt. */
  font-size: var(--groesse-text);
  line-height: var(--zeilenhoehe-text);
}

textarea {
  min-height: 8rem;
  resize: vertical;
}

input[type='file'] {
  width: 100%;
  padding: var(--abstand-s);
  border: var(--kante-linie) dashed var(--hypa-linie-kraeftig);
  background: var(--hypa-flaeche-karte);
  font-size: var(--groesse-text);
}

select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 20px) calc(50% + 2px),
    calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--abstand-xxl);
}

fieldset {
  border: var(--kante-linie) solid var(--hypa-linie);
  border-radius: var(--kante-radius);
  padding: var(--abstand-m) var(--abstand-l) var(--abstand-l);
  margin: 0;
}

legend {
  font-family: var(--schrift-ueberschrift);
  font-weight: var(--schrift-gewicht-ueberschrift);
  text-transform: uppercase;
  letter-spacing: var(--sperrung-h3);
  padding-inline: var(--abstand-s);
}

.feld-gruppe {
  display: grid;
  gap: var(--abstand-m);
}

@media (min-width: 40rem) {
  .feld-gruppe--zwei {
    grid-template-columns: 1fr 1fr;
  }
}

/* Auswahl mit Radioknoepfen als grosse Klickflaeche, nicht als winziger Punkt */
.wahl {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-s);
}

.wahl__option {
  flex: 1 1 8rem;
}

.wahl__option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.wahl__option label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-xs);
  min-height: var(--klickflaeche-min);
  padding: var(--abstand-s) var(--abstand-m);
  border: 2px solid var(--hypa-linie-kraeftig);
  background: var(--hypa-flaeche-karte);
  cursor: pointer;
  font-weight: var(--schrift-gewicht-betont);
  text-align: center;
}

.wahl__option input:checked + label {
  border-color: var(--hypa-rot);
  background: var(--hypa-rot);
  color: var(--hypa-text-invers);
}

.wahl__option input:focus-visible + label {
  outline: var(--fokus-breite) solid var(--fokus-farbe);
  outline-offset: var(--fokus-abstand);
}

/* Honeypot: fuer Menschen unsichtbar, fuer Automaten ein verlockendes Feld.
   Nicht display:none - manche Automaten pruefen darauf. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Meldungen an den Nutzer --------------------------------------------
   Plan Abschnitt 4.0: Fehlermeldungen sagen, was zu tun ist, nicht was
   kaputt ist. Und: Bestaetigung in Klartext.
   ------------------------------------------------------------------------ */

.hinweis {
  padding: var(--abstand-m) var(--abstand-l);
  border: var(--kante-linie) solid var(--hypa-linie);
  border-left: var(--kante-balken) solid var(--hypa-linie-kraeftig);
  background: var(--hypa-flaeche-karte);
  margin-bottom: var(--abstand-l);
}

.hinweis--fehler {
  border-left-color: var(--hypa-rot);
}

.hinweis--erfolg {
  border-left-color: var(--typ-gruss);
}

.hinweis--achtung {
  border-left-color: var(--status-arbeit);
}

.hinweis__titel {
  font-weight: var(--schrift-gewicht-betont);
  font-size: var(--groesse-gross);
  margin: 0 0 var(--abstand-xs);
  display: flex;
  align-items: center;
  gap: var(--abstand-s);
}

.hinweis--fehler .hinweis__titel {
  color: var(--hypa-rot);
}

.hinweis p:last-child {
  margin-bottom: 0;
}

.hinweis ul {
  margin: var(--abstand-s) 0 0;
  padding-left: var(--abstand-l);
}

.feld--fehlerhaft input,
.feld--fehlerhaft select,
.feld--fehlerhaft textarea {
  border-color: var(--hypa-rot);
  border-width: 2px;
}

.feld__fehler {
  color: var(--hypa-rot);
  font-size: var(--groesse-klein);
  font-weight: var(--schrift-gewicht-betont);
}

/* ==========================================================================
   8. Backend
   Plan Abschnitt 4.0: Startseite nach dem Login sind wenige grosse Kacheln.
   Keine Seitenleiste mit vierzehn Menuepunkten.
   ========================================================================== */

.kacheln {
  display: grid;
  gap: var(--abstand-l);
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .kacheln {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  }
}

.kachel {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-s);
  min-height: 9rem;
  padding: var(--abstand-l);
  background: var(--hypa-flaeche-karte);
  border: var(--kante-linie) solid var(--hypa-linie);
  border-top: var(--kante-balken) solid var(--hypa-anthrazit);
  border-radius: var(--kante-radius);
  text-decoration: none;
  color: var(--hypa-text);
}

.kachel:hover {
  border-top-color: var(--hypa-rot);
  background: var(--hypa-flaeche-karte);
  color: var(--hypa-text);
}

.kachel:hover .kachel__titel {
  color: var(--hypa-rot);
}

.kachel__titel {
  font-family: var(--schrift-ueberschrift);
  font-weight: var(--schrift-gewicht-ueberschrift);
  font-size: var(--groesse-h3);
  letter-spacing: var(--sperrung-h3);
  text-transform: uppercase;
  margin: 0;
}

.kachel__text {
  color: var(--hypa-text-hell);
  margin: 0;
}

.kachel__zahl {
  margin-top: auto;
  font-family: var(--schrift-ueberschrift);
  font-size: var(--groesse-h2);
  color: var(--hypa-rot);
  line-height: 1;
}

/* --- Tabellen ----------------------------------------------------------- */

.tabelle-rahmen {
  overflow-x: auto;
  background: var(--hypa-flaeche-karte);
  border: var(--kante-linie) solid var(--hypa-linie);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--groesse-text);
}

th,
td {
  padding: var(--abstand-s) var(--abstand-m);
  text-align: left;
  border-bottom: var(--kante-linie) solid var(--hypa-linie);
  vertical-align: top;
}

thead th {
  background: var(--hypa-anthrazit);
  color: var(--hypa-text-invers);
  font-family: var(--schrift-ueberschrift);
  font-weight: var(--schrift-gewicht-ueberschrift);
  letter-spacing: var(--sperrung-h3);
  text-transform: uppercase;
  white-space: nowrap;
}

tbody tr:last-child td {
  border-bottom: none;
}

tbody tr:hover {
  background: var(--hypa-flaeche);
}

/* Neue Meldungen optisch hervorgehoben (Plan Abschnitt 4.3) */
tbody tr.zeile--neu {
  background: var(--hypa-flaeche);
  font-weight: var(--schrift-gewicht-betont);
}

tbody tr.zeile--neu td:first-child {
  border-left: var(--kante-balken) solid var(--hypa-rot);
}

/* --- Filterleiste ------------------------------------------------------- */

.filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-m);
  align-items: flex-end;
  padding: var(--abstand-m) var(--abstand-l);
  background: var(--hypa-flaeche-karte);
  border: var(--kante-linie) solid var(--hypa-linie);
  margin-bottom: var(--abstand-l);
}

.filter .feld {
  flex: 1 1 12rem;
  min-width: 0;
}

/* --- Live-Vorschau ------------------------------------------------------
   Plan Abschnitt 4.2: Die Vorschau zeigt die Objektseite so, wie der Mieter
   sie nach dem Veroeffentlichen sieht - mit den bereits aktiven Aushaengen
   und dem neuen an seiner richtigen Stelle.
   ------------------------------------------------------------------------ */

.werkbank {
  display: grid;
  gap: var(--abstand-xl);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 62rem) {
  .werkbank {
    grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
  }
  .werkbank__vorschau {
    position: sticky;
    top: var(--abstand-l);
  }
}

.vorschau {
  border: var(--kante-linie) solid var(--hypa-linie);
  background: var(--hypa-flaeche-karte);
}

.vorschau__leiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-m);
  flex-wrap: wrap;
  padding: var(--abstand-s) var(--abstand-m);
  background: var(--hypa-anthrazit);
  color: var(--hypa-text-invers);
}

.vorschau__titel {
  font-family: var(--schrift-ueberschrift);
  font-weight: var(--schrift-gewicht-ueberschrift);
  letter-spacing: var(--sperrung-h3);
  text-transform: uppercase;
  margin: 0;
  font-size: var(--groesse-text);
}

.vorschau__schalter {
  display: flex;
  gap: 0;
}

.vorschau__schalter button {
  min-height: var(--klickflaeche-min);
  padding: var(--abstand-xs) var(--abstand-m);
  border: 2px solid var(--hypa-text-invers);
  background: transparent;
  color: var(--hypa-text-invers);
  font-family: var(--schrift-button);
  font-size: var(--groesse-klein);
  letter-spacing: var(--sperrung-button);
  text-transform: uppercase;
  cursor: pointer;
}

.vorschau__schalter button + button {
  border-left: none;
}

.vorschau__schalter button[aria-pressed='true'] {
  background: var(--hypa-rot);
  border-color: var(--hypa-rot);
}

.vorschau__buehne {
  padding: var(--abstand-m);
  background: var(--hypa-flaeche);
  overflow-x: auto;
}

/* Der Rahmen, dessen Breite umschaltbar ist: Handy ca. 390 px,
   Bildschirm volle Breite (Plan Abschnitt 4.2). */
.vorschau__rahmen {
  margin: 0 auto;
  background: var(--hypa-flaeche);
  border: var(--kante-linie) solid var(--hypa-linie-kraeftig);
  transition: max-width 0.15s ease-out;
  max-width: 100%;
}

.vorschau__rahmen[data-breite='handy'] {
  max-width: var(--breite-vorschau-handy);
}

.vorschau__inhalt {
  padding: var(--abstand-m);
}

/* Banderole bei zukuenftigem Startdatum (Plan Abschnitt 4.2) */
.vorschau__banderole {
  display: flex;
  align-items: center;
  gap: var(--abstand-s);
  padding: var(--abstand-s) var(--abstand-m);
  background: var(--status-arbeit);
  color: var(--hypa-text-invers);
  font-weight: var(--schrift-gewicht-betont);
  font-size: var(--groesse-klein);
}

.vorschau__stand {
  font-size: var(--groesse-klein);
  color: var(--hypa-text-hell);
  padding: var(--abstand-xs) var(--abstand-m);
  border-top: var(--kante-linie) solid var(--hypa-linie);
}

/* ==========================================================================
   9. Meldungen und Zustaende
   ========================================================================== */

.zustand {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-xs);
  padding: 2px var(--abstand-s);
  border: 2px solid currentColor;
  font-size: var(--groesse-klein);
  font-weight: var(--schrift-gewicht-betont);
  text-transform: uppercase;
  letter-spacing: var(--sperrung-button);
  white-space: nowrap;
}

.zustand--neu {
  color: var(--status-neu);
}
.zustand--in_arbeit {
  color: var(--status-arbeit);
}
.zustand--erledigt {
  color: var(--status-erledigt);
}
.zustand--abgelehnt {
  color: var(--status-abgelehnt);
}
.zustand--aktiv {
  color: var(--typ-gruss);
}
.zustand--geplant {
  color: var(--status-arbeit);
}
.zustand--abgelaufen {
  color: var(--hypa-text-hell);
}
.zustand--zurueckgezogen {
  color: var(--hypa-text-hell);
}

.karte {
  background: var(--hypa-flaeche-karte);
  border: var(--kante-linie) solid var(--hypa-linie);
  padding: var(--abstand-l);
  margin-bottom: var(--abstand-l);
}

.karte__titel {
  font-family: var(--schrift-ueberschrift);
  font-weight: var(--schrift-gewicht-ueberschrift);
  font-size: var(--groesse-h3);
  letter-spacing: var(--sperrung-h3);
  text-transform: uppercase;
  margin: 0 0 var(--abstand-m);
}

/* Angaben als Beschriftung-Wert-Paare */
.angaben {
  display: grid;
  gap: var(--abstand-s) var(--abstand-l);
  margin: 0;
}

@media (min-width: 40rem) {
  .angaben {
    grid-template-columns: max-content 1fr;
  }
}

.angaben dt {
  font-weight: var(--schrift-gewicht-betont);
  color: var(--hypa-text-hell);
}

.angaben dd {
  margin: 0;
  overflow-wrap: break-word;
}

.beschreibung {
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.bilder {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-m);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bilder a {
  display: block;
  border: var(--kante-linie) solid var(--hypa-linie);
}

.bilder img {
  display: block;
  max-height: 12rem;
  width: auto;
}

/* ==========================================================================
   10. Infobereich und Wetter
   ========================================================================== */

/* Haekchenliste im Stil der Referenzseiten: "Nutzung: Buerogebaeude" */
.steckbrief {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--abstand-s);
}

.steckbrief li {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-s);
}

.steckbrief__haken {
  flex: 0 0 auto;
  color: var(--hypa-rot);
  margin-top: 0.15em;
}

.steckbrief__beschriftung {
  font-weight: var(--schrift-gewicht-betont);
}

.kontakte {
  display: grid;
  gap: var(--abstand-m);
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 40rem) {
  .kontakte {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  }
}

.kontakt {
  padding: var(--abstand-m);
  border: var(--kante-linie) solid var(--hypa-linie);
  background: var(--hypa-flaeche-karte);
}

.kontakt__name {
  font-weight: var(--schrift-gewicht-betont);
}

.kontakt__funktion {
  color: var(--hypa-text-hell);
  font-size: var(--groesse-klein);
}

.kontakt__zeile {
  margin-top: var(--abstand-xs);
}

.dokumente {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--abstand-s);
}

.dokumente a {
  display: flex;
  align-items: center;
  gap: var(--abstand-s);
  min-height: var(--klickflaeche-min);
  padding: var(--abstand-s) var(--abstand-m);
  border: var(--kante-linie) solid var(--hypa-linie);
  background: var(--hypa-flaeche-karte);
  text-decoration: none;
  color: var(--hypa-text);
}

.dokumente a:hover {
  border-color: var(--hypa-rot);
  color: var(--hypa-rot);
}

/* --- Wetter ------------------------------------------------------------- */

.wetter {
  display: flex;
  align-items: center;
  gap: var(--abstand-l);
  flex-wrap: wrap;
  padding: var(--abstand-m) var(--abstand-l);
  background: var(--hypa-flaeche-karte);
  border: var(--kante-linie) solid var(--hypa-linie);
}

.wetter__jetzt {
  display: flex;
  align-items: center;
  gap: var(--abstand-m);
}

.wetter__temperatur {
  font-family: var(--schrift-ueberschrift);
  font-size: var(--groesse-h1);
  line-height: 1;
}

.wetter__ort {
  font-size: var(--groesse-klein);
  color: var(--hypa-text-hell);
}

.wetter__verlauf {
  display: flex;
  gap: var(--abstand-l);
  flex-wrap: wrap;
  margin-left: auto;
}

.wetter__stunde {
  text-align: center;
  font-size: var(--groesse-klein);
  color: var(--hypa-text-hell);
}

.wetter__stunde b {
  display: block;
  font-size: var(--groesse-text);
  color: var(--hypa-text);
}

/* ==========================================================================
   11. Hilfsklassen
   ========================================================================== */

.nur-fuer-vorleser {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.abschnitt {
  margin-bottom: var(--abstand-xxl);
}

.abschnitt__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--abstand-m);
  flex-wrap: wrap;
  margin-bottom: var(--abstand-m);
}

.abschnitt__kopf h2,
.abschnitt__kopf h3 {
  margin: 0;
}

.zurueck {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-xs);
  margin-bottom: var(--abstand-m);
  font-size: var(--groesse-text);
}

.gedaempft {
  color: var(--hypa-text-hell);
}

.klein {
  font-size: var(--groesse-klein);
}

.nowrap {
  white-space: nowrap;
}

.blaettern {
  display: flex;
  gap: var(--abstand-m);
  align-items: center;
  justify-content: center;
  margin-top: var(--abstand-l);
}

/* ==========================================================================
   12. Druckausgabe
   Ein Schwarz-Weiss-Ausdruck fuers Schwarze Brett muss funktionieren
   (Plan Abschnitt 10). Deshalb traegt jede Kennzeichnung neben der Farbe
   auch das Wort und ein Symbol.
   ========================================================================== */

@media print {
  .kopf,
  .fuss,
  .notfall,
  .button,
  .filter,
  .vorschau__leiste,
  .sprung-link {
    display: none !important;
  }

  body {
    background: none;
    color: var(--hypa-text);
    font-size: 11pt;
  }

  .objektkopf {
    min-height: auto;
    background: none;
    color: var(--hypa-text);
    border-bottom: 2pt solid var(--hypa-text);
  }

  .objektkopf::after {
    display: none;
  }

  .objektkopf__name,
  .objektkopf__adresse {
    color: var(--hypa-text);
    text-shadow: none;
  }

  .aushang {
    border: 1pt solid var(--hypa-text);
    border-left: 4pt solid var(--hypa-text);
    break-inside: avoid;
    page-break-inside: avoid;
  }

  main {
    padding: 0;
  }
}

/* Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}