/* ============================================================
   home.css — nur die drei Sprachfassungen /de/, /it/ und /en/
   Nicht geladen von der Sprachweiche, den Rechtstexten und der
   Fehlerseite; die nehmen legal.css.

   Die alte Seite verteilte denselben Inhalt auf sechs Unterseiten je
   Sprache — achtzehn Seiten fuer EINE Ferienwohnung. Hier steht alles
   auf einer Seite je Sprache, die Menuepunkte sind Sprungmarken auf
   Abschnitte. Der Menuetext bleibt derselbe, damit der Kunde sich
   wiederfindet.

   ?v=-Parameter: siehe base.css.
   ============================================================ */

/* --- Titelbild ---
   Ein Bild, darueber der Name. Kein Textblock im Bild: der waere auf dem
   Handy entweder winzig oder verdeckte das Motiv. Die Ueberschrift steht
   darunter und ist damit auch dann lesbar, wenn das Bild nicht laedt.

   loading und decoding stehen im HTML, nicht hier: das Titelbild ist das
   EINZIGE Bild der Seite ohne loading="lazy". Wer es lazy laedt,
   verschiebt genau das Bild, auf das der Besucher wartet. */
.titel{position:relative;background:var(--papier-2)}
.titel img{width:100%;height:clamp(15rem,42vw,26rem);object-fit:cover}

.willkommen{padding-block:2.5rem 1rem;text-align:center}

/* Begruessung in Ziegelrot (--rot), Wunsch der Kundin vom 11.10.2026.
   Beide Zeilen, Ueberschrift und Unterzeile. Die Unterzeile bekommt
   bewusst dieselbe Farbe statt eines aufgehellten Tons: zwei Rottoene
   dicht untereinander sehen nach Versehen aus. Gegen --papier gemessen
   9,32:1 - AA auch fuer die kleinere Unterzeile.
   WER DIE FARBE AENDERT, misst den Kontrast neu; der Wert steht in
   base.css beim Farbsystem. */
.willkommen h1{margin-bottom:.5rem;color:var(--rot)}
.willkommen .unterzeile{font-size:1.1rem;color:var(--rot);
  max-width:var(--lesebreite);margin-inline:auto}

/* --- Abschnitte ---
   scroll-margin-top faengt die Sprungmarken ab: ohne sie klebt die
   Ueberschrift nach einem Menueklick am oberen Fensterrand. */
section.block{padding-block:3rem;scroll-margin-top:1rem}
section.block + section.block{border-top:1px solid var(--linie)}
section.block > h2{margin-bottom:1.25rem}
section.block p{max-width:var(--lesebreite)}

/* Abwechselnder Grund, damit die Seite beim Scrollen gegliedert bleibt.
   Der Abstand kommt von padding, nicht von margin — sonst entstuenden
   weisse Streifen zwischen den eingefaerbten Baendern. */
section.block.getoent{background:var(--papier-2)}

/* --- Merkmalsliste der Wohnung ---
   Die alte Seite hatte diese zwoelf Punkte als schlichte Aufzaehlung,
   dreimal wortgleich (Startseite, Wohnungsseite, und je Sprache). Hier
   stehen sie einmal je Sprache, in Spalten. */
ul.merkmale{list-style:none;margin-top:1.25rem;
  display:grid;gap:.5rem 2rem;
  grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr))}
ul.merkmale li{padding-left:1.5rem;position:relative}
ul.merkmale li::before{content:"—";position:absolute;left:0;
  color:var(--holz)}

/* min(...,100%) an jedem auto-fit-Boden: Ohne den zweiten Wert ist die
   Mindestbreite eine HARTE Untergrenze. Faellt der verfuegbare Platz
   darunter - schmales Telefon, oder jemand hat die Schriftgroesse im
   Browser hochgesetzt -, wird die Spalte trotzdem so breit und schiebt
   die Seite waagrecht auf. Am 12.10.2026 gemessen: 28 px Ueberlauf bei
   280/16, 62 px bei 320/20, 96 px bei 360/24. Mit min() ist die
   Mindestbreite ein Wunsch statt eines Befehls. */

/* --- Bildraster ---
   auto-fit statt fester Spaltenzahl: das Raster rechnet sich selbst aus,
   wie viele Bilder nebeneinander passen. Damit gibt es keinen
   Umbruchpunkt, an dem etwas ueberlaeuft — das Audit hat an der alten
   Seite zwar keinen horizontalen Ueberlauf gefunden (Befund 6.6), aber
   nur, weil dort fast nichts nebeneinander stand. */
.raster{display:grid;gap:1rem;margin-top:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr))}
.raster img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:3px}

/* --- Freizeit: Ort mit Bild und Text --- */
.orte{display:grid;gap:2rem;margin-top:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr))}
.orte h3{margin-bottom:.35rem}
.orte img{width:100%;aspect-ratio:3/2;object-fit:cover;
  border-radius:3px;margin-bottom:.75rem}
.orte p{max-width:none}

/* --- Preise ---
   Die alte Seite nannte "ab 109EUR + 30EUR fuer jeder weitere Person" —
   ohne Jahr, ohne Saison, ohne Mindestaufenthalt, ohne Endreinigung und
   ohne Kurtaxe, und mit Rechtschreibfehler (Audit-Befunde 4.2 und 4.3).
   Der Kasten hier hat Platz fuer die Nebenkosten. Was der Kunde nicht
   liefert, bleibt als sichtbarer Hinweis stehen statt stillschweigend zu
   fehlen — ein fehlender Preisbestandteil ist der haeufigste Grund fuer
   Aerger bei der Abreise. */
.preiskasten{background:var(--papier);border:1px solid var(--linie);
  border-radius:4px;padding:1.75rem;max-width:34rem}
.preiskasten .betrag{font-family:var(--anzeige);font-size:2.1rem;
  line-height:1.2;color:var(--blau)}
.preiskasten .zusatz{color:var(--tinte-mild);margin-top:.35rem}
.preiskasten dl{margin-top:1.25rem;display:grid;gap:.35rem 1rem;
  grid-template-columns:auto 1fr;font-size:.96rem}
.preiskasten dt{color:var(--tinte-mild)}
.preiskasten dd{text-align:right}

/* --- Buchungsblock ---
   Es gibt genau EINEN Buchungsweg: Airbnb. Kein Formular, kein Kalender,
   keine Vortaeuschung von Verfuegbarkeit. Der Knopf traegt deshalb
   ausdruecklich den Hinweis, dass er zu Airbnb fuehrt, und rel="noopener"
   im HTML. */
.buchen{margin-top:2rem;padding:1.75rem;border-radius:4px;
  background:var(--papier-2);border:1px solid var(--linie);
  max-width:34rem}
section.getoent .buchen{background:var(--papier)}
.buchen p{margin-bottom:1rem}

/* --- Kontakt --- */
.kontakt{display:grid;gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr))}
.kontakt address{font-style:normal;line-height:1.9}
/* overflow-wrap:anywhere gegen die E-Mail-Adresse: "info@staudnerhof.it"
   ist ein einziges unumbrechbares Wort. Am 12.10.2026 gemessen - bei
   360 px Fensterbreite und 24 px Grundschrift ragte es 225 px breit aus
   einer 180 px schmalen Rasterzelle und schob die ganze Seite um 58 px
   auf. Betrifft nur, wer die Schrift hochgesetzt hat; bei normaler
   Groesse bricht nichts. */
.kontakt .zeile{display:grid;grid-template-columns:5.5rem 1fr;gap:.5rem;
  overflow-wrap:anywhere}
/* Auch hier Fingergroesse: der Kartenverweis und die Telefonnummern sind
   genau die Verweise, die jemand unterwegs antippt. 12.10.2026 gemessen:
   21,6 px. */
.anfahrt a,.kontakt .zeile a{display:inline-block;padding-block:.6rem}
.kontakt .zeile span:first-child{color:var(--tinte-mild)}

/* Anfahrt: nur ein Verweis auf die Karte, KEINE eingebettete Karte.
   Die alte Seite band Google Maps auf allen drei Kontaktseiten als
   iframe ein — geladen sofort beim Seitenaufruf, ohne Einwilligung
   (Audit-Befund 5.11). Genau daran haengt die Banner-Freiheit: ein
   eingebetteter Kartenrahmen ist ein Drittanbieter im Dokument, ein
   Verweis darauf ist es nicht. Wer hier ein iframe einsetzt, macht die
   Seite einwilligungspflichtig — vorher datenschutz.html Abschnitt 4
   lesen. */
.anfahrt{margin-top:1.5rem}