/* Aus src/pages/reservation.astro uebernommen.
   Jede Regel ist auf `body.t-reservation main` eingegrenzt. Astro hat das CSS
   je Seite gekapselt, ein gemeinsames Stylesheet tut das nicht -- und das
   `main` haelt die Seitenregeln von Kopf, Fuss und Zustimmungsfenster fern,
   die ausserhalb stehen und eigene Klassen gleichen Namens haben. */
body.t-reservation main .kopf {
    padding-block: var(--a-5) var(--a-2);
  }
body.t-reservation main h1 {
    font-size: var(--t-gross);
    margin-bottom: var(--a-2);
  }
body.t-reservation main .vorspann {
    font-size: var(--t-klein);
    color: var(--tinte-leise);
    max-width: 52ch;
  }
/* Foratable liefert eine weisse Maske. Auf dem cremefarbenen Grund stand sie
   vorher als kantiges weisses Rechteck ohne Rand -- als waere sie
   hineingerutscht. Derselbe Rahmen wie bei den Karten der Seite macht daraus
   ein Feld, das dazugehoert. overflow versteckt die Ecken des iframes, das
   selbst keine Radien kennt. */
body.t-reservation main .fenster {
    max-width: 760px;
    min-height: 480px;
    margin-top: var(--a-4);
    background: #fff;
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    overflow: hidden;
  }
body.t-reservation main .fenster iframe {
    width: 100%;
    border: 0;
  }
body.t-reservation main .platzhalter {
    max-width: 640px;
    padding: var(--a-4);
    border: 1px dashed var(--messing);
    border-radius: var(--radius);
    text-align: center;
  }
body.t-reservation main .platzhalter p {
    color: var(--tinte-leise);
    margin-bottom: var(--a-3);
  }
body.t-reservation main code {
    font-size: 0.9em;
    background: rgb(28 43 51 / 0.06);
    padding: 0.1em 0.35em;
    border-radius: 2px;
  }
/* Haengt wie das Fenster darueber an der linken Kante. Vorher war der Satz
   ueber die Kurzschrift `margin: … auto …` zentriert -- die Suche nach
   `margin-inline: auto` hat ihn deshalb uebersehen. */
body.t-reservation main .hinweis {
    max-width: 640px;
    margin: var(--a-4) 0 var(--a-6);
    font-size: var(--t-label);
    color: var(--tinte-leise);
  }

/* --- Eine linke Kante ----------------------------------------------
   Textbloecke waren schmaler UND zentriert; damit hingen sie mit
   ueber 160 px Einzug neben Bildern und Logo in der Luft. Jetzt sind
   sie normale Bahnen wie alles andere. Die Lesebreite haelt der Text
   selbst (.vorspann in ch, oder var(--breite-text) auf den Kindern),
   nicht mehr der Block. Entschieden mit der Inhaberin. */

/* ---------- Weiter auf der Seite ----------
   Die Reservationsseite war eine Sackgasse: keine Verbindung zu Karte,
   Garten oder Anlaessen. Die Liste haengt an derselben linken Kante wie
   alles darueber. */
body.t-reservation main .weiter-abschnitt {
    padding-block: var(--a-5);
    border-top: 1px solid var(--linie);
  }
body.t-reservation main .weiter-abschnitt h2 {
    font-size: var(--t-mittel);
    margin-bottom: var(--a-3);
  }
body.t-reservation main .wege {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--a-2);
    max-width: var(--breite-text);
  }
body.t-reservation main .wege .dazu {
    display: block;
    font-size: var(--t-fein);
    color: var(--tinte-leise);
    margin-top: 0.15em;
  }