/* Rentique Weiß — nur für /buchung.html.
   Eingebunden über „css: buchung" im Frontmatter von src/pages/buchung.html,
   geladen als /css/seiten/buchung.css nach site.css und rentique.css.
   Nur Token, keine festen Farben oder Abstände. Wenige Regeln, mehr braucht die
   Seite nicht. */

/* ═══════════════════════════════════════════════════════════════════════════
   1 · Das hidden-Attribut wieder scharf machen

   Das Design-System bringt keine Regel für [hidden] mit, und die des Browsers
   verliert gegen jede Klasse mit eigener display-Angabe (Browserregeln liegen
   in der schwächsten Ebene der Kaskade, unabhängig von Spezifität). Ein
   <button class="rw-btn" hidden> bliebe also sichtbar, weil .rw-btn
   display:inline-flex setzt — dasselbe gilt für .rw-field__error,
   .rw-notice, .rw-skel, .rw-summary__lines li und .rw-summary__total.

   Diese Seite hängt an genau diesem Verhalten: alles, was ohne JavaScript
   ins Leere liefe, trägt „hidden" und wird erst von /js/buchung.js
   freigegeben. Deshalb steht die Regel hier.

   Sie gehört eigentlich nach ds/base/base.css (oder ersatzweise nach
   css/rentique.css) und wirkt dann auf allen Seiten — unter anderem auf die
   mobile Navigationsschublade, die aus demselben Grund offen steht, obwohl
   /js/basis.js sie mit „hidden" schließt. Siehe Bericht.
   ═══════════════════════════════════════════════════════════════════════════ */
[hidden]{display:none !important}

/* ——— 2 · Schrittanzeige: es gibt sie nur, wenn es Schritte gibt ———
   Ohne JavaScript steht die Seite als ein langes Formular da. Eine Leiste,
   die „Schritt 1 von 3" behauptet, wäre dann schlicht falsch. Die Klasse .js
   setzt /js/basis.js an <html>. */
.steps-nav[data-schritte]{display:none}
.js .steps-nav[data-schritte]{display:flex}
.steps-nav__item [data-punkt-zahl]{font-variant-numeric:tabular-nums lining-nums}

/* ——— 3 · Zwei Felder nebeneinander ———
   Vorname/Nachname, E-Mail/Telefon, Abholtag/Rückgabetag. Unter 620 px
   untereinander. Der Abstand kommt aus dem Raster, nicht mehr aus der
   Geschwisterregel von .rw-field. */
.buchung-paare{display:grid;gap:var(--space-5);grid-template-columns:1fr;
  max-width:620px}
@media (min-width:620px){.buchung-paare{grid-template-columns:1fr 1fr}}
.buchung-paare>.rw-field+.rw-field{margin-top:0}

/* ——— 4 · Versandfehler in der Bestellübersicht ———
   Der Hinweis steht unmittelbar über dem Knopf. Ohne diesen Abstand klebte er
   daran; .rw-notice bringt von sich aus keinen mit, weil es sonst überall im
   Weg wäre. */
[data-versandfehler]{margin-bottom:var(--space-4)}

/* ——— 5 · Honigtopf ———
   Aus dem Blick genommen, aber nicht display:none — manche Maschinen prüfen
   genau darauf und lassen solche Felder dann aus. Aus dem Textfluss geschoben
   fällt es ihnen seltener auf. Für Menschen ist es unerreichbar: unsichtbar,
   nicht mit der Tabulatortaste erreichbar (tabindex="-1" im Markup) und für
   Vorlesegeräte per aria-hidden weggeblendet. Dieselbe Regel wie in
   /css/seiten/kontakt.css — dasselbe Feld, derselbe Zweck. */
.buchung-topf{position:absolute;left:-9999px;top:auto;
  width:1px;height:1px;overflow:hidden}

/* ——— 5 · Übersicht: lange Werte dürfen umbrechen (seit 30.09.2026) ———
   Das Design-System setzt .rw-summary__val auf nowrap. Im Warenkorb stehen
   dort mehrere Geräte bzw. Termine („Do 29.10. – Sa 31.10.2026 · Do 05.11. – …")
   – ohne Umbruch wurde die Seite auf dem Handy breiter als der Bildschirm. */
.rw-summary__lines li{min-width:0}
.rw-summary__val{white-space:normal;text-align:right;overflow-wrap:anywhere}