/* Aus src/pages/index.astro uebernommen.
   Jede Regel ist auf `body.t-home 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. */
/* ---------- Auftakt ---------- */
/* Höhe direkt setzen, nicht über aspect-ratio mit max-height: die
     Kombination lässt den Block die BREITE schrumpfen, bis das Verhältnis
     zur gedeckelten Höhe passt — das Bild wird dann schmaler statt kürzer. */
body.t-home main .auftakt-bild {
    position: relative;
    width: 100%;
    height: clamp(340px, 58vh, 620px);
    overflow: hidden;
  }
body.t-home main .auftakt-bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 62%;
  }
/* Bildwechsel: alle Folien liegen uebereinander, nur die aktive ist sichtbar.
   Die Ueberblendung ist eine CSS-Transition; das Skript schaltet nur die
   Klasse um. Wer Bewegung reduziert hat, sieht das erste Bild -- das Skript
   startet dann gar nicht. */
body.t-home main .auftakt-folie {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.4s ease;
  }
body.t-home main .auftakt-folie.aktiv { opacity: 1; }
body.t-home main .auftakt-folie img { width: 100%; height: 100%; object-position: var(--fokus, center 62%); }
body.t-home main .auftakt-text {
    padding-block: var(--a-5) var(--a-4);
  }
/* Die H1 traegt keine eigene Groesse mehr: sie umfasst seit der SEO-Runde
   beide Zeilen, die grosse poetische und den beschreibenden Satz. Die
   Groessen haengen an den Spans, damit sich am Bild nichts aendert. */
body.t-home main h1 {
    margin-bottom: var(--a-3);
  }
body.t-home main .auftakt-gross {
    display: block;
    font-size: var(--t-riesig);
    margin-bottom: var(--a-3);
  }
body.t-home main .betont {
    color: var(--rot);
    font-style: italic;
    font-variation-settings: "SOFT" 60, "WONK" 1;
  }
/* Ein Satz, der sagt, was und wo -- die zweite Zeile INNERHALB der H1.
   Display-Schrift, aber leicht und gedaempft, damit er die grosse Zeile
   nicht ueberstimmt. Den Abstand nach oben bringt .auftakt-gross mit, den
   nach unten die H1 selbst; darum hier margin: 0. */
body.t-home main .auftakt-untertitel {
    display: block;
    font-size: var(--t-mittel);
    font-weight: 400;
    font-variation-settings: "SOFT" 40, "WONK" 0;
    color: var(--tinte-leise);
    max-width: 34ch;
    margin: 0;
  }
body.t-home main .vorspann {
    font-size: var(--t-klein);
    color: var(--tinte-leise);
    max-width: 52ch;
    margin-bottom: var(--a-3);
  }
body.t-home main .auftakt-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: var(--a-2);
    margin-bottom: var(--a-3);
  }
/* Die Oeffnungszeiten sind das Erste, was ein Gast wissen will -- sie duerfen
   nicht wie eine Fussnote aussehen. Eine Stufe groesser, der Kern in voller
   Tinte und halbfett. */
body.t-home main .auftakt-zeiten {
    font-size: var(--t-klein);
    color: var(--tinte-leise);
    padding-top: var(--a-2);
    border-top: 1px solid var(--linie);
  }
body.t-home main .auftakt-zeiten strong { color: var(--tinte); font-weight: 600; }
/* ---------- Willkommen ---------- */
body.t-home main .willkommen h2 {
    font-size: var(--t-gross);
    margin-bottom: var(--a-3);
  }
body.t-home main .unterschrift {
    font-family: var(--schrift-display);
    font-style: italic;
    font-size: var(--t-klein);
    color: var(--rot);
    margin-top: var(--a-3);
  }
/* ---------- Räume ---------- */
body.t-home main .raeume-abschnitt {
    background: var(--papier-warm);
  }
body.t-home main .abschnitt-titel {
    font-size: var(--t-gross);
    margin-bottom: var(--a-4);
  }
body.t-home main .raeume {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--a-3);
  }
body.t-home main .raum img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
    border-radius: var(--radius);
    margin-bottom: var(--a-2);
  }
body.t-home main .raum h3 {
    font-size: var(--t-mittel);
    margin-bottom: 0.35em;
  }
body.t-home main .raum p {
    font-size: var(--t-fein);
    color: var(--tinte-leise);
  }
body.t-home main .raum .plaetze {
    font-size: var(--t-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--messing);
    margin-bottom: 0.5em;
  }
/* ---------- Karte ---------- */
body.t-home main .karte-raster {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--a-5);
    align-items: center;
  }
body.t-home main .karte-text h2 {
    font-size: var(--t-gross);
    margin-bottom: var(--a-3);
  }
body.t-home main .karte-text p:not(.marke) { color: var(--tinte-leise); }
body.t-home main .karte-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: var(--a-2);
    margin-top: var(--a-3);
  }
body.t-home main .karte-bilder {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--a-2);
  }
body.t-home main .karte-bilder img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius);
  }
/* Das breite Bild spannt zwei Spalten, ist also doppelt so breit wie die
     beiden darunter. Es braucht deshalb eine eigene sizes-Angabe — mit der
     gemeinsamen bekam es eine zu kleine Datei und wurde unscharf. */
body.t-home main .karte-bilder .breit {
    grid-column: span 2;
    aspect-ratio: 16 / 9;
  }
/* ---------- Anlässe ---------- */
body.t-home main .anlaesse {
    background: var(--petrol-tief);   /* derselbe Ton wie der Fuss -- ein Blau fuer alle Flaechen */
    color: var(--papier);
  }
body.t-home main .anlaesse-raster {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--a-5);
    align-items: center;
    padding-block: var(--a-6);
  }
body.t-home main .anlaesse h2 {
    font-size: var(--t-gross);
    margin-bottom: var(--a-3);
  }
body.t-home main .anlaesse p { color: rgb(247 242 232 / 0.78); }
body.t-home main .anlaesse .marke { color: var(--messing-hell); }
body.t-home main .anlaesse-bild img {
    width: 100%;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    border-radius: var(--radius);
  }
body.t-home main .anlaesse-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: var(--a-2);
    margin-top: var(--a-3);
  }
/* ---------- Geschichte ---------- */
body.t-home main .geschichte h2 {
    font-size: var(--t-gross);
    margin-bottom: var(--a-3);
  }
body.t-home main .geschichte p:not(.marke) { color: var(--tinte-leise); }
/* ---------- Anfahrt ---------- */
body.t-home main .anfahrt {
    border-top: 1px solid var(--linie);
    padding-block: var(--a-6);
  }
body.t-home main .anfahrt-raster {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--a-5);
  }
body.t-home main .anfahrt h2 {
    font-size: var(--t-mittel);
    margin-bottom: var(--a-2);
  }
body.t-home main .anfahrt p:not(.marke) { color: var(--tinte-leise); }
body.t-home main .anfahrt-liste { margin: 0; }
body.t-home main .anfahrt-liste dt {
    font-size: var(--t-label);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--messing);
    margin-bottom: 0.3em;
  }
body.t-home main .anfahrt-liste dd {
    margin: 0 0 var(--a-3);
    color: var(--tinte-leise);
    font-size: var(--t-fein);
  }
/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 900px) {
body.t-home main .karte-raster,
body.t-home main .anlaesse-raster,
body.t-home main .anfahrt-raster {
      grid-template-columns: 1fr;
      gap: var(--a-4);
    }
body.t-home main .anlaesse-bild { order: -1; }
body.t-home main .auftakt-bild { height: clamp(260px, 42vh, 420px); }
}
/* ============================================================
   Ab hier von Hand ergaenzt (nicht mehr aus der Astro-Fassung
   erzeugt): Hinweis unter den Raeumen, Ambiente-Bilder und die
   Bilder beim Abschnitt „Woher der Name kommt".
   ============================================================ */
/* Der Satz, der klarstellt, dass man sich den Platz nicht aussuchen kann.
   Er steht unter dem Raster, nicht darueber: erst die drei Raeume sehen,
   dann erfahren, wie die Verteilung zustande kommt. */
body.t-home main .raeume-hinweis {
  margin-top: var(--a-3);
  max-width: 62ch;
  font-size: var(--t-fein);
  color: var(--tinte-leise);
}
/* Der Weg zur eigenen Gartenterrassen-Seite. Steht unter dem Hinweis, nicht
   daneben: der Hinweis erklaert, warum man den Platz nicht waehlen kann --
   der Link ist ein Angebot und keine Einschraenkung. */
body.t-home main .raeume-link {
  margin-top: var(--a-2);
}

body.t-home main .ambiente-abschnitt { background: var(--papier-warm); }
body.t-home main .ambiente-text {
  max-width: 58ch;
  margin-bottom: var(--a-4);
  color: var(--tinte-leise);
}
/* Wischbare Leiste statt Raster: ein Bild pro Ansicht auf dem Handy, rund
   zweieinhalb auf dem Desktop. Sechs Bilder untereinander waren auf dem Handy
   ein Turm -- so bleibt die Reihe ein Streifen, und kein Bild muss weg. */
body.t-home main .ambiente {
  display: flex;
  gap: var(--a-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--rand);
  padding-block: var(--a-1);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
body.t-home main .ambiente::-webkit-scrollbar { display: none; }
/* Ein leeres Stueck am Ende, so breit wie die Bahn minus ein Bild: sonst kann
   die Leiste am Desktop nur bis zum drittletzten Bild scrollen, und die
   letzten Punkte leuchten nie -- es sah aus, als gaebe es zu viele. So gibt
   es je Bild genau eine Position, auf jeder Breite. */
body.t-home main .ambiente::after {
  content: '';
  flex: 0 0 calc(100% - min(85vw, 420px));
}
body.t-home main .ambiente:focus-visible { outline: 3px solid var(--messing); outline-offset: 4px; }
body.t-home main .ambiente-bild {
  flex: 0 0 min(85vw, 420px);
  scroll-snap-align: start;
}
body.t-home main .leiste-steuerung {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--a-2);
  margin-top: var(--a-2);
}
body.t-home main .leiste-pfeil {
  width: 44px; height: 44px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--papier);
  color: var(--tinte);
  font-size: 1.1rem;
  cursor: pointer;
}
body.t-home main .leiste-pfeil:hover { border-color: var(--tinte); }
body.t-home main .leiste-punkte { display: flex; gap: 0.5rem; }
body.t-home main .leiste-punkt {
  width: 10px; height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--linie);
  cursor: pointer;
}
body.t-home main .leiste-punkt[aria-selected="true"] { background: var(--rot); }
body.t-home main .ambiente-bild { margin: 0; }
/* Alle Bilder auf dasselbe Format bringen — sonst zerfaellt die Reihe,
   sobald jemand ein Hochformat hochlaedt, und genau das wird passieren:
   Gaestefotos kommen vom Handy. */
body.t-home main .ambiente-bild img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
  display: block;
}
body.t-home main .geschichte-bilder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--a-2);
  margin-top: var(--a-4);
}
body.t-home main .geschichte-bilder figure { margin: 0; }
body.t-home main .geschichte-bilder img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  width: 100%;
  border-radius: var(--radius);
  display: block;
}
body.t-home main .geschichte-bilder figcaption {
  margin-top: 0.5em;
  font-size: var(--t-label);
  line-height: 1.45;
  color: var(--tinte-leise);
}

/* Der Bildnachweis steht unter der Bildunterschrift, eine Spur leiser --
   lesbar bleiben muss er trotzdem, sonst ist die Lizenzbedingung nur
   formal erfuellt. */
body.t-home main .geschichte-bilder .bildnachweis {
  display: block;
  margin-top: 0.35em;
  opacity: 0.85;
}

/* --- 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. */
body.t-home main .willkommen > *,
body.t-home main .geschichte > * { max-width: var(--breite-text); }

/* --- Lageplan ------------------------------------------------------
   Erst ein Feld mit Adresse und zwei Knoepfen, nach dem Klick die Karte.
   Die Hoehe kommt vom Seitenverhaeltnis, nicht von max-height: die
   Kombination laesst Bloecke schmaler werden statt kuerzer. */
body.t-home main .lageplan {
  margin-top: var(--a-5);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--papier-warm);
  overflow: hidden;
}
body.t-home main .lageplan-platzhalter { padding: var(--a-4); }
body.t-home main .lageplan-adresse { margin: 0 0 var(--a-3); line-height: 1.5; }
body.t-home main .lageplan-knoepfe { display: flex; flex-wrap: wrap; gap: var(--a-2); }
body.t-home main .lageplan-hinweis {
  margin: var(--a-2) 0 0;
  font-size: var(--t-label);
  color: var(--tinte-leise);
}
body.t-home main .lageplan iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}
body.t-home main .lageplan-geladen { background: none; }

/* ================================================================
   PROBE -- zentrierte Seitenkoepfe. Greift nur mit ?zentriert in der
   Adresse. Nicht committen: entweder wird daraus die Regel, oder der
   Block verschwindet. Was zentriert wird: Ueberzeile, Titel, kurzer
   Vorspann, Knoepfe, Zeiten -- und die zwei Briefbloecke (Willkommen,
   Geschichte) ganz. Raster, Listen und die geteilten Abschnitte
   (Karte, Anlaesse, Anfahrt) bleiben, wie sie sind.
   ================================================================ */
body.t-home main.probe-zentriert .auftakt-text,
body.t-home main.probe-zentriert .willkommen,
body.t-home main.probe-zentriert .geschichte,
body.t-home main.probe-zentriert .raeume-abschnitt .marke,
body.t-home main.probe-zentriert .raeume-abschnitt .abschnitt-titel,
body.t-home main.probe-zentriert .raeume-hinweis,
body.t-home main.probe-zentriert .ambiente-abschnitt .marke,
body.t-home main.probe-zentriert .ambiente-abschnitt .abschnitt-titel,
body.t-home main.probe-zentriert .ambiente-text { text-align: center; }

/* Die Lesebreite bleibt; der schmale Block rueckt in die Mitte. */
body.t-home main.probe-zentriert .auftakt-text .vorspann,
body.t-home main.probe-zentriert .willkommen > *,
body.t-home main.probe-zentriert .geschichte > *,
body.t-home main.probe-zentriert .raeume-hinweis,
body.t-home main.probe-zentriert .ambiente-text { margin-inline: auto; }

body.t-home main.probe-zentriert .auftakt-knoepfe { justify-content: center; }
body.t-home main.probe-zentriert .geschichte-bilder figcaption { text-align: left; }

/* ---------- Vegan ---------- */
body.t-home main .vegan-abschnitt { background: var(--papier-warm); }
/* Lesebreite auf den Kindern, nicht auf der Bahn -- sonst zentriert die Bahn
   den Block, und er stuende als einziger auf der Seite in der Mitte. */
body.t-home main .vegan > * { max-width: var(--breite-text); }
body.t-home main .vegan h2 { font-size: var(--t-gross); margin-bottom: var(--a-3); }
body.t-home main .vegan p:not(.marke) { color: var(--tinte-leise); }
body.t-home main .vegan-link { margin-top: var(--a-3); }