/* Regeln für einzelne Kundenseiten, die zu klein für styles.css sind.

   Sie standen bis 23.08.2026 als <style>-Blöcke im Markup von 404.html,
   gesperrt.html und impressum.html — und waren damit wirkungslos: die
   Richtlinie für Inhaltssicherheit erlaubt nur style-src 'self', ein
   Inline-Block wird vom Browser stillschweigend verworfen. Das fiel lange
   nicht auf, weil nichts kaputtging, sondern nur nichts passierte.

   Vor Änderungen hier: ops/pruefe-inline-stile.js meldet, wenn wieder
   jemand einen <style>-Block ins Markup schreibt. */

/* --- Seiten, die nur aus einer Mitteilung bestehen ------------------- */
/* 404 und die geschlossene Buchungsseite. Eine einzelne Karte gehört in
   die Mitte des Bildschirms, nicht an den oberen Rand. */
.seite-mitte { min-height: 100vh; display: grid; place-items: center; margin: 0; }
.seite-mitte > .panel { width: min(560px, calc(100% - 32px)); padding: 40px; text-align: center; }
.seite-mitte h1 { font-size: clamp(2rem, 6vw, 3.25rem); margin: 0 0 14px; }
.seite-mitte p { max-width: 38rem; margin: 0 auto 22px; line-height: 1.6; }

.hinweis-kontakt { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
/* Ohne gepflegte Telefonnummer oder Adresse bleibt der Text des Verweises
   leer. Dann fällt der Knopf weg, statt als leere Fläche dazustehen — der
   Server escapet eingesetzte Werte und kann kein Markup liefern. */
.hinweis-kontakt a:empty { display: none; }

/* --- Impressum: fehlende Angaben verschwinden ------------------------ */
/* Ein Betrieb ohne Handelsregistereintrag soll keine Zeile „Registergericht:"
   ohne Inhalt sehen, und erst recht keine fremde Angabe. Deshalb steht jeder
   Wert in einem eigenen Element und wird über :empty ausgeblendet. */
.legal-wert:empty { display: none; }
.legal-zeile:has(> .legal-wert:empty) { display: none; }

/* Sind in einer ganzen Karte alle Werte leer, bliebe sonst die Überschrift
   allein stehen — „Registereintrag" ohne alles darunter. Die Karte fällt
   dann komplett weg.
   Absichtlich an .legal-block gebunden: nur Karten, die überhaupt aus
   gepflegten Werten bestehen, dürfen verschwinden. Karten mit festem Text
   (Verbraucherstreitbeilegung) bleiben immer stehen. */
.legal-card:has(.legal-block):not(:has(.legal-wert:not(:empty))) { display: none; }

/* Die Anschrift als Raster statt mit <br>: eine leere Zeile hinterlässt so
   keine Lücke, sondern verschwindet mitsamt ihrem Platz. */
.address-block { display: grid; gap: 2px; }

/* Hinweis auf fehlende Pflichtangaben — nur für den Betrieb selbst
   erkennbar gedacht, erscheint aber bewusst öffentlich: ein unvollständiges
   Impressum ist ein Rechtsmangel und soll nicht unsichtbar bleiben. */
.legal-luecke { display: none; }
.legal-unvollstaendig .legal-luecke { display: block; }


/* ==================================================================
   Kundenseiten im Aussehen der Buchungsseite
   ==================================================================

   Die Buchungsseite hat 2026 einen neuen Anstrich bekommen, der an der
   Körperklasse `booking-page` hängt (Papierton, blau-grüner Kopfstreifen,
   ruhige Karten). Status-, Bestätigungs-, Impressums- und Datenschutzseite
   haben ihn nie bekommen und sahen daneben alt aus.

   Sie tragen die Klasse jetzt ebenfalls. Hier steht nur, was dabei nicht
   passt, weil jene Regeln auf das Buchungsformular zugeschnitten sind. */

/* Der Anstrich liegt auf background-neuruppin.jpg — einer Luftaufnahme der
   Klosterkirche und des Ruppiner Sees, also der Heimatstadt eines einzigen
   Betriebs. Alle anderen bekommen stattdessen einen ruhigen Verlauf in
   denselben Tönen: gleiche Handschrift, keine fremde Stadt.
   Die Klasse setzt der Server (buildHintergrundKlasse in server.js). */
.booking-page.ohne-ortsbild {
  background-image:
    radial-gradient(900px 520px at 88% -8%, rgba(117, 169, 31, .16), transparent 62%),
    radial-gradient(760px 460px at -6% 18%, rgba(0, 106, 167, .14), transparent 66%),
    linear-gradient(168deg, #eef3f5 0%, #e3ebef 46%, #dbe6ec 100%);
  background-attachment: scroll;
}

/* Die Fusszeile der Buchungsseite steht in Weiss — das setzt das dunkle Foto
   voraus. Auf dem hellen Verlauf wäre sie unlesbar. */
.booking-page.ohne-ortsbild .site-footer {
  border-top-color: rgba(16, 43, 61, .14);
  color: #405968;
  text-shadow: none;
}
.booking-page.ohne-ortsbild :is(.footer-meta, .footer-meta strong, .footer-links, .footer-links a) {
  color: #2c4553;
}

/* Der Kopf der Buchungsseite ist auf eine Schlagzeile ausgelegt und deckelt
   die Breite auf 18 Zeichen. „Termin bestätigt" passt, „Anfrage in Prüfung
   durch den Kundendienst" nicht — dort soll umbrochen, nicht abgeschnitten
   werden. */
.booking-page .booking-hero h1 { max-width: 28ch; }

/* Rechtstexte brauchen Lesebreite, keine Formularbreite. */
.booking-page .legal-layout .prose { max-width: 78ch; }

/* Die Fusszeile der Buchungsseite steht in Weiss auf dem Hintergrundbild.
   Das gilt hier genauso — nur der Zusatz „Bereitgestellt mit InstallX" darf
   leiser sein als Name und Anschrift. */
.booking-page .footer-credit { opacity: .78; font-size: 12px; }


/* --- Der Verlauf auf der Statusseite ------------------------------- */
/* Vorher eine Reihe gleich aussehender Kästen: der Kunde musste die
   Zeitstempel lesen, um zu erkennen, was zuletzt passiert ist. Jetzt eine
   Zeitachse mit Punkten, deren letzter hervorgehoben ist. */
.verlauf {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0 0 0 26px;
  list-style: none;
}

.verlauf-punkt {
  position: relative;
  padding: 0 0 22px 0;
}
.verlauf-punkt:last-child { padding-bottom: 0; }

/* Die Linie zwischen den Punkten. Am letzten Eintrag entfällt sie, sonst
   liefe sie ins Leere. */
.verlauf-punkt::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 16px;
  bottom: 0;
  width: 2px;
  background: rgba(16, 43, 61, .14);
}
.verlauf-punkt:last-child::before { display: none; }

.verlauf-punkt::after {
  content: "";
  position: absolute;
  left: -23px;
  top: 6px;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #9fb3bf;
  box-shadow: 0 0 0 1px rgba(16, 43, 61, .16);
}
/* Der jüngste Eintrag ist der Stand der Dinge und wird als einziger farbig
   gesetzt — daran findet der Blick sofort, wo er zu lesen anfangen muss. */
.verlauf-punkt.ist-aktuell::after {
  background: #75a91f;
  box-shadow: 0 0 0 1px rgba(117, 169, 31, .35), 0 0 0 5px rgba(117, 169, 31, .16);
}

.verlauf-zeit {
  display: block;
  color: #5b6d77;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.verlauf-titel { display: block; margin-top: 3px; color: #102b3d; font-size: 15px; }
.verlauf-text { margin: 4px 0 0; color: #405968; line-height: 1.6; }
.verlauf-text:empty { display: none; }

@media (max-width: 680px) {
  .verlauf { padding-left: 22px; }
  .verlauf-punkt::before { left: -16px; }
  .verlauf-punkt::after { left: -21px; }
}

/* Im dunklen Modus liegen die Karten auf dunklem Grund; die fest gesetzten
   hellen Textfarben oben wären dort unlesbar. */
html[data-theme="dark"] .verlauf-punkt::before { background: rgba(230, 240, 244, .18); }
html[data-theme="dark"] .verlauf-punkt::after { border-color: #16303d; background: #4d6b7a; }
html[data-theme="dark"] .verlauf-zeit { color: #9fbecb; }
html[data-theme="dark"] .verlauf-titel { color: #eaf3f6; }
html[data-theme="dark"] .verlauf-text { color: #c6dbe3; }


/* --- Plattformkonto in der Benutzerverwaltung ---------------------- */
/* Es steht in der Liste, damit es in den Mitarbeiterauswahlen auftaucht,
   bekommt aber keine Knöpfe: Ändern und Löschen weist der Server ohnehin ab. */
.admin-user-hinweis {
  display: block;
  padding: 9px 12px;
  border: 1px dashed var(--ui-border-strong, rgba(19, 35, 58, .28));
  border-radius: 9px;
  color: var(--ui-text-secondary, #627087);
  font-size: 13px;
  line-height: 1.55;
}

/* --- Anmeldeseite eines Betriebs ----------------------------------- */
/* Der Firmenname steht jetzt als Überschrift. Ein langer Name darf dabei
   umbrechen statt aus der Karte zu laufen — „Günter Neumann & Sohn GmbH"
   passt bei 52px nicht in eine Zeile. */
.admin-login-body .admin-login-copy h1 {
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.12;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Die Anschrift bestätigt dem Nutzer, dass er beim richtigen Betrieb ist.
   Fehlt sie, fällt die Zeile über .legal-wert:empty weg. */
.admin-login-body .admin-login-anschrift {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .62);
  font-size: 13px;
}

/* Der Hinweis zum vergessenen Passwort ist eine Auskunft, kein Angebot —
   deshalb leise unter dem Knopf statt daneben. */
.admin-login-body .admin-login-hilfe {
  margin: 4px 0 0;
  color: var(--ui-text-secondary, #5e7480);
  font-size: 12.5px;
  line-height: 1.55;
}

/* Die Herkunftszeile gehört unter die Karte, nicht hinein. */
.admin-login-body .admin-login-fuss {
  margin: 16px 0 0;
  color: rgba(16, 43, 61, .45);
  font-size: 12px;
  text-align: center;
}
html[data-theme="dark"] .admin-login-body .admin-login-fuss { color: rgba(230, 240, 244, .38); }