/* ============================================================
   SAHR APPARTEMENTS — unterkunft-buchen.css
   Seitenspezifische Styles für unterkunft-buchen.html.
   Globale Styles und Custom Properties: css/global.css
   ============================================================ */


/* === BLOCK: buchen-hero === */

.buchen-hero .hero__img {
  height: clamp(420px, 60vh, 680px);
}

/* === END BLOCK: buchen-hero === */


/* === BLOCK: buchen-intro === */

.buchen-intro__lead {
  max-width: 600px;
  margin-top: 16px;
  margin-bottom: 56px;
  font-size: 1.05rem;
  color: var(--color-text);
  line-height: 1.7;
}

.buchen-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: 900px;
}

.buchen-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.buchen-step__number {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-primary);
  font-size: 1.1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.buchen-step h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-headline);
  margin: 0;
}

.buchen-step p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}

/* === END BLOCK: buchen-intro === */


/* === BLOCK: buchen-apt === */

.buchen-apt-header {
  margin-bottom: 36px;
}

.buchen-apt-meta {
  margin-top: 8px;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.buchen-apt-meta a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}

.buchen-apt-meta a:hover {
  text-decoration: underline;
}

.buchen-widgets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.buchen-widget-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.buchen-widget-block h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-headline);
  margin-bottom: 4px;
}

.buchen-widget-block > p {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  margin-bottom: 16px;
  line-height: 1.55;
}

/* fewo.cloud-Widgets: Hoehe nach Inhalt, gemessen 09.10.2026 in Chromium (tiefste
   Elementkante im iframe, +3 px Reserve fuer abweichende Schriftmetrik):
   Kalender 809 px (zwei Monate untereinander, alle Monate gleich),
   ab ~730 px iframe-Breite zwei Monate nebeneinander 451 px;
   Preisrechner 307 px, nach „Berechnen“ mit Gesamtbetrag bis 441 px.
   scrolling="no" wie Altseite — daher muss die Hoehe den Inhalt voll fassen. */
.buchen-karte .buchen-widget-block {
  container-type: inline-size;
}

.fewo-frame {
  display: block;
  width: 100%;
  border: 0;
}

.fewo-frame--kalender {
  height: 812px;
}

.fewo-frame--preis {
  height: 444px;
}

/* Umschaltpunkt des Widgets haengt vom Monat ab (reines Widget-CSS, flex-wrap): im
   Startmonat ist der Zurueck-Pfeil display:none, ab dem ersten „Monat weiter“ nimmt er
   36,8 px Breite weg. Nebeneinander ab 729 px (Startmonat) bzw. 766 px (geblaettert),
   gemessen 09.10.2026 in Chromium, WebKit und Firefox. Diese Regel ist nur noch der
   Rueckfall fuer Browser ohne CSS-Trigonometrie (siehe @supports unten). */
@container (min-width: 744px) {
  .fewo-frame--kalender {
    height: 454px;
  }
}

/* Ab 562 px Container: Kalender intern immer mit fest 780 px rendern (14 px ueber der
   766-px-Grenze nach dem Blaettern, siehe oben) und auf die Containerbreite verkleinern
   (transform-origin oben links, Rahmenhoehe = 454 px × Faktor, kein Leerraum). Feste
   Breite statt Containerbreite, damit das Widget nie eine Breite zwischen 729 und 766 px
   sieht — dort zeigt es initial nebeneinander und nach dem Blaettern untereinander.
   Faktor = tan(atan2(Breite, 780px)) = Breite / 780px als einheitenlose Zahl; Laenge durch
   Laenge geht in calc() noch nicht browseruebergreifend. Die Breite laeuft ueber die
   registrierte --kal-breite, weil Firefox atan2() mit cqi direkt verwirft; registriert wird
   100cqi vorher zu px.
   Untergrenze 562 px Container = Faktor 0,72 — Tagesziffern im Widget 16 px, effektiv
   also mind. 11,5 px. Darunter bleibt es bei zwei Monaten untereinander (812 px), auf dem
   Handy ohnehin, und bewusst auch bei 1280 px Viewport (544 px Container). Ohne CSS-Trigonometrie greift die Regel nicht (@supports). Restluecke:
   ein Browser mit atan2(), aber ohne @property wuerde den Kalender unskaliert rechts
   abschneiden. */
@property --kal-breite {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}

@supports (scale: tan(atan2(1px, 2px))) {
  @container (width >= 562px) {
    .fewo-kalender-rahmen {
      --kal-breite: 100cqi;
      height: min(454px, var(--kal-breite) * 454 / 780);
      overflow: hidden;
    }

    .fewo-frame--kalender {
      width: 780px;
      height: 454px;
      transform: scale(min(1, tan(atan2(var(--kal-breite), 780px))));
      transform-origin: top left;
    }
  }
}

/* Der Kalender braucht fest 358 px Breite (gemessen 09.10.2026); unter 480 px
   bleiben in der Karte nur Viewport − 66 px. Deshalb laeuft er dort ueber
   Kartenpolster und Seitenrand bis an den Bildschirmrand. */
@media (max-width: 480px) {
  .fewo-frame--kalender {
    width: 100vw;
    max-width: none;
    margin-inline: calc(50% - 50vw);
  }
}

/* Beide Appartements nebeneinander (wie Altseite) — breiter als der Standard-Container,
   damit die fewo.cloud-Kalender gross genug skaliert werden. 1550 px: Variantenvergleich
   09.10.2026 (1400/1550/1700 px und schmalere Polster), Entscheidung Jahn fuer 1550. */
.buchen-weit {
  max-width: 1550px;
  margin-inline: auto;
  padding-inline: 24px;
}

.buchen-karten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 32px;
  align-items: start;
}

.buchen-karte {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
  padding: 28px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}

.buchen-karte__kopf h3 {
  margin: 0;
}

.buchen-widget-block h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-headline);
  margin: 0 0 4px;
}

.buchen-karte .buchen-widget-block > p {
  margin-bottom: 8px;
}

@media (max-width: 900px) {
  .buchen-karten {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .buchen-weit {
    padding-inline: 16px;
  }

  .buchen-karte {
    padding: 20px 16px;
  }
}

/* === END BLOCK: buchen-apt === */


/* === BLOCK: garantien === */

.garantien-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 48px;
  max-width: var(--content-width-image);
  margin-inline: auto;
}

.garantie-card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 32px;
}

.garantie-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--color-section-sage-soft);
  color: var(--color-primary);
  margin-bottom: 20px;
}

.garantie-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-headline);
  margin-bottom: 8px;
}

.garantie-card p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}

/* === END BLOCK: garantien === */


/* === BLOCK: buchen-kontakt === */

.buchen-kontakt {
  text-align: center;
}

.buchen-kontakt .section-badge {
  justify-content: center;
}

.buchen-kontakt h2 {
  max-width: 560px;
  margin-inline: auto;
  margin-bottom: 16px;
}

.buchen-kontakt p {
  max-width: 480px;
  margin-inline: auto;
  margin-bottom: 40px;
  font-size: 1.05rem;
  color: var(--color-stone);
  line-height: 1.7;
}

/* === END BLOCK: buchen-kontakt === */


/* === BLOCK: buchen-responsive === */

@media (max-width: 900px) {
  .buchen-steps {
    grid-template-columns: 1fr;
    gap: 28px;
    max-width: 480px;
  }

  .buchen-step {
    flex-direction: row;
    align-items: flex-start;
  }

  .garantien-grid {
    grid-template-columns: 1fr;
    max-width: 560px;
  }
}

@media (max-width: 768px) {
  .buchen-widgets {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .garantie-card {
    padding: 24px;
  }

  .buchen-kontakt h2 {
    font-size: 1.6rem;
  }
}

/* === END BLOCK: buchen-responsive === */