/* SOTA-N/A: eine einzige Deklaration. Keine Werkzeug- oder Musterwahl.
 *
 * live-nachtrag.css — der Unterschied zwischen dem April-Export und dem Live-Stand.
 *
 * ══════════════════════════════════════════════════════════════════════════════
 * WARUM ES DIESE DATEI GIBT
 * ══════════════════════════════════════════════════════════════════════════════
 * Die englischen zanova-Seiten gibt es im Design-Hype-Export nicht; ihre Vorlage ist
 * die Live-Spiegelung vom 31.07.2026. Sie sollen deshalb auch so aussehen wie live —
 * und live gilt ein Stylesheet, das seit dem Export an einer Stelle nachgezogen wurde.
 *
 * ══════════════════════════════════════════════════════════════════════════════
 * GEMESSEN, NICHT VERMUTET (01.08.2026)
 * ══════════════════════════════════════════════════════════════════════════════
 * Verglichen wurden das minifizierte Live-Buendel
 * (zanova-ferienwohnungen.shared.cd62dbf3d.min.css, 160.644 B) und die drei
 * Export-Dateien (normalize.css + components.css + zanova-ferienwohnungen.css)
 * Selektor fuer Selektor: 1.856 gegen 1.877 Einzelselektoren, Werte auf
 * Schreibweise normalisiert (#fff = white, .5em = 0.5em, inset = vier Einzelwerte).
 *
 * Fuer die auf den englischen Seiten benutzten Klassen bleibt genau EIN
 * inhaltlicher Unterschied uebrig:
 *
 *     .display-4xl-3   margin-bottom   live 6px   —   Export 10px
 *
 * Alles Uebrige ist Minifizierer-Schreibweise. Zwei weitere Regeln stehen zwar nur
 * im Live-Buendel (.text-wrap.full.d und .container-8.weg), greifen auf diesen
 * Seiten aber nicht: die Seiten tragen `class="text-wrap full"` ohne `d`, und
 * `container-8` kommt dort ueberhaupt nicht vor (nachgezaehlt: 0 Treffer).
 *
 * ⚠ Diese Datei wird HINTER die drei Originaldateien gehaengt. Sie aendert die
 *   Gestaltung nicht — sie stellt sie auf den Stand, den der Besucher heute sieht.
 *
 * Betroffen sind drei der sechs englischen Seiten: /en/agb (2 Vorkommen),
 * /en/impressum (1), /en/ueber-uns (1). Auf /en/buchen, /en/datenschutz und
 * /en/kontakt kommt die Klasse nicht vor; dort ist die Datei wirkungslos und wird
 * nur der Einheitlichkeit halber mitgeladen.
 *
 * ══════════════════════════════════════════════════════════════════════════════
 * NACHTRAG 01.08.2026 — dieselbe Datei gilt auch im DEUTSCHEN Zweig
 * ══════════════════════════════════════════════════════════════════════════════
 * Der Vergleich fuer die acht deutschen festen Seiten (/, /ueber-uns, /buchen,
 * /impressum, /datenschutz, /agb, /404, /401) kam unabhaengig auf denselben einen
 * Unterschied. 🧪 Gezaehlt, wo `.display-4xl-3` dort vorkommt:
 *     /agb 2 · /impressum 1 · /ueber-uns 1 · alle uebrigen 0
 * (Auf /datenschutz stand die Klasse nur in dem Block, den der Live-Rechtstext
 * ersetzt — danach 0.)
 *
 * ⚠ Anders als im englischen Zweig wird die Datei im deutschen NUR auf den drei
 *   Seiten eingehaengt, die die Klasse wirklich benutzen. Wo sie wirkungslos waere,
 *   wird sie auch nicht geladen.
 *
 * Die zweite nur-live-Regel `.container-8.weg { display: none }` bleibt auch hier
 * draussen: 🧪 die Klassenkombination kommt auf keiner der acht deutschen Seiten vor.
 */

.display-4xl-3 {
  margin-bottom: 6px;
}

/*
 * ══════════════════════════════════════════════════════════════════════════════
 * NACHTRAG 06.08.2026 — Breite des Offenlegungshinweises ueber dem Kalender
 * ══════════════════════════════════════════════════════════════════════════════
 * Der Hinweis, mit wem der Beherbergungsvertrag zustande kommt, steht auf den 25
 * Ferienwohnungs-Seiten unmittelbar ueber dem Belegungskalender. Er uebernimmt die
 * Bestandsklasse `service-paragraph` — die traegt aber eine feste Breite:
 *
 *     .service-paragraph { width: 496px; max-width: 496px; }
 *
 * GEMESSEN am gerenderten Ergebnis (06.08.2026, hopfenhaus-1):
 *     Hinweis  :  496 px
 *     Kalender : 1307 px
 *
 * Ein 496 px schmaler Absatz ueber einem 1307 px breiten Kalender sieht nicht nach
 * Absicht aus, sondern nach Versehen — und ein Rechtshinweis, der versehentlich
 * wirkt, wird ueberlesen. Deshalb genau eine eigene Regel, die ihn auf die Breite
 * des Kalenders bringt.
 *
 * WARUM KEINE BESTANDSKLASSE: geprueft und verworfen.
 *   `.service-paragraph._80` — 80 % von 496 px, also NOCH schmaler.
 *   `.paragraph`             — rechtsbuendig ausgerichtet (die Zeile
 *                              "Buchen Sie Ihren Besuch" steht damit rechts oben).
 * Eine Klasse, die zufaellig richtig aussieht, waere die schlechtere Wahl als eine
 * benannte eigene Regel.
 *
 * Der Abstand nach unten trennt ihn sichtbar vom Kalender — ohne ihn kleben Text
 * und Kalender aneinander (gemessen: 0 px Abstand).
 */
.offenlegung-kalender {
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
}

/*
 * ══════════════════════════════════════════════════════════════════════════════
 * NACHTRAG 07.08.2026 — Feldbreiten im Anfrageformular
 * ══════════════════════════════════════════════════════════════════════════════
 * GEMESSEN am gerenderten Ergebnis (monteurwohnung-kulmbach-1, 1307 px Fenster):
 *
 *     Anreise     160 px      Abreise      160 px
 *     Personen    175 px      Firma        295 px
 *     Name        204 px      E-Mail       204 px
 *     Telefon    1265 px      Nachricht   1265 px
 *
 * FUENF verschiedene Breiten. Der Grund steht im Bestand: die Zeilen sind zwar
 * `display:flex`, dehnen sich aber nicht (340 / 490 / 428 px statt 1265). Damit
 * richtet sich jedes Feld nach der Laenge seines eigenen Platzhaltertexts — die
 * Felder stehen ausgefranst untereinander statt in einem Raster.
 *
 * Ein Formular, das ausgefranst aussieht, wirkt unfertig — und ein Gast, der ein
 * Formular fuer unfertig haelt, fuellt es nicht aus. Bei einem Anfrageformular,
 * das die EINZIGE Buchungsmoeglichkeit fuer Monteurwohnungen ist, kostet das
 * unmittelbar Anfragen.
 *
 * Die Regel gilt ausdruecklich NUR innerhalb von #anfrage. Dieselben Klassen
 * (.flex, .div-block-25) kommen im Bestand an vielen anderen Stellen vor; sie
 * global anzufassen waere ein Eingriff in fremde Gestaltung.
 */
/*
 * ⚠ NUR AB 480 px. Der Bestand stapelt die Felder darunter selbst
 *   (`@media (max-width: 479px) { .flex { flex-flow: column; gap: 0 } }`) — und
 *   zwar bewusst ohne Abstand, weil dort die Beschriftung des naechsten Feldes
 *   die Trennung uebernimmt. Eine Regel mit `#anfrage` waere staerker und wuerde
 *   das ueberfahren. Geprueft am gebauten Stylesheet, nicht vermutet.
 */
@media screen and (min-width: 480px) {
  #anfrage form > .flex {
    width: 100%;
    gap: 20px;
  }

  #anfrage form > .flex > .div-block-25 {
    flex: 1 1 0;
    min-width: 0;
  }
}

#anfrage form .div-block-25 input,
#anfrage form .div-block-25 select,
#anfrage form .div-block-25 textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}