/* Aus src/pages/anlaesse.astro uebernommen.
   Jede Regel ist auf `body.t-anlaesse 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. */
/* ---------- Kopf ---------- */
body.t-anlaesse main .kopfbild {
    width: 100%;
    height: clamp(280px, 52vh, 560px);
    overflow: hidden;
  }
body.t-anlaesse main .kopfbild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 58%;
  }
body.t-anlaesse main .einstieg {
    padding-block: var(--a-5) var(--a-4);
  }
body.t-anlaesse main h1 {
    font-size: var(--t-gross);
    margin-bottom: var(--a-3);
  }
body.t-anlaesse main .betont {
    color: var(--rot);
    font-style: italic;
    font-variation-settings: "SOFT" 60, "WONK" 1;
  }
body.t-anlaesse main .vorspann {
    font-size: var(--t-klein);
    color: var(--tinte-leise);
    max-width: 54ch;
    margin-bottom: var(--a-3);
  }
body.t-anlaesse main .einstieg-knoepfe,
body.t-anlaesse main .anfrage-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: var(--a-2);
  }
/* ---------- Räume ---------- */
body.t-anlaesse main .raeume-abschnitt { background: var(--papier-warm); }
body.t-anlaesse main .abschnitt-titel {
    font-size: var(--t-gross);
    margin-bottom: var(--a-4);
  }
body.t-anlaesse main .raeume {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--a-3);
  }
body.t-anlaesse main .raum img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius);
    margin-bottom: var(--a-2);
  }
body.t-anlaesse main .raum h3 {
    font-size: var(--t-mittel);
    margin-bottom: 0.2em;
  }
body.t-anlaesse main .plaetze {
    font-size: var(--t-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--messing);
    margin-bottom: 0.6em;
  }
body.t-anlaesse main .raum-text {
    font-size: var(--t-fein);
    color: var(--tinte-leise);
  }
body.t-anlaesse main .raeume-fuss {
    margin-top: var(--a-4);
    padding-top: var(--a-3);
    border-top: 1px solid var(--linie);
    font-size: var(--t-fein);
    color: var(--tinte-leise);
    max-width: 68ch;
  }
/* ---------- Essen ---------- */
body.t-anlaesse main .essen-raster {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: var(--a-5);
    align-items: start;
  }
body.t-anlaesse main .essen-raster h2 {
    font-size: var(--t-gross);
    margin-bottom: var(--a-3);
  }
body.t-anlaesse main .essen-raster p:not(.marke) { color: var(--tinte-leise); }
body.t-anlaesse main .regeln {
    margin: var(--a-2) 0 var(--a-3);
    border-left: 2px solid var(--messing);
    padding-left: var(--a-2);
  }
body.t-anlaesse main .regeln dt {
    font-weight: 500;
    color: var(--tinte);
  }
body.t-anlaesse main .regeln dd {
    margin: 0 0 var(--a-2);
    color: var(--tinte-leise);
    font-size: var(--t-fein);
  }
body.t-anlaesse main .regeln dd:last-child { margin-bottom: 0; }
body.t-anlaesse main .klein { font-size: var(--t-fein); }
body.t-anlaesse main .dossier {
    background: var(--papier-warm);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    padding: var(--a-3);
  }
body.t-anlaesse main .dossier h3 {
    font-size: var(--t-mittel);
    margin-bottom: var(--a-2);
  }
body.t-anlaesse main .dossier p {
    font-size: var(--t-fein);
    margin-bottom: var(--a-3);
  }
body.t-anlaesse main .dossier-hinweis {
    margin: var(--a-2) 0 0;
    font-size: var(--t-label);
    color: var(--tinte-leise);
  }
/* ---------- Anfrage ---------- */
body.t-anlaesse main .anfrage {
    background: var(--petrol-tief);   /* derselbe Ton wie der Fuss -- ein Blau fuer alle Flaechen */
    color: var(--papier);
    padding-block: var(--a-6);
  }
body.t-anlaesse main .anfrage .marke { color: var(--messing-hell); }
body.t-anlaesse main .anfrage h2 {
    font-size: var(--t-gross);
    margin-bottom: var(--a-2);
  }
body.t-anlaesse main .anfrage p {
    color: rgb(247 242 232 / 0.78);
    max-width: 52ch;
  }
/* Der Fuss bringt seinen Abstand nach oben selbst mit (bausteine.css). Hier
   ist der letzte Abschnitt aber genauso dunkel wie der Fuss -- der Abstand
   erschien als heller Balken zwischen zwei blauen Flaechen. */
body.t-anlaesse main .anfrage { margin-bottom: calc(-1 * var(--a-6)); }
body.t-anlaesse main .anfrage-innen {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--a-4);
    align-items: center;
  }
@media (max-width: 820px) {
body.t-anlaesse main .essen-raster,
body.t-anlaesse main .anfrage-innen {
      grid-template-columns: 1fr;
      gap: var(--a-4);
    }
body.t-anlaesse main .kopfbild { height: clamp(220px, 38vh, 380px); }
}

/* --- 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. */