/* ============================================================
   Hero-Anordnung: Kasten ragt vom rechten Rand herein
   ============================================================
   Ziel: mehr vom Foto sehen. Der grüne Kasten hängt bündig am
   rechten Rand, links daneben bleibt das Bild frei.

   Diese Datei wird ZUSÄTZLICH zu css/hero-unten.css geladen und
   gilt nur ab 769 px. Grund: In der schmalen Ansicht bleibt es
   beim Kasten unter dem Bild — ein von rechts hereinragendes
   Panel hat auf dem Handy keinen Platz. Die Regeln hier nehmen
   deshalb erst die Desktop-Anordnung von hero-unten.css zurück
   und setzen dann das Panel.

   Umschalter unten links auf jeder Seite. Vor dem Go-Live
   entfernen wie die anderen Vorschau-Bausteine.

   Angelegt 06.08.2026.
   ============================================================ */

@media (min-width: 769px) {

  /* ---------- Desktop-Anordnung von hero-unten.css zurücknehmen ---------- */

  .hero-slider,
  .hero-sm {
    display: flex;
    padding-top: 0;
    padding-bottom: 0;
    background-color: var(--color-gray-300);
  }

  .hero-slider { min-height: 85vh; }
  .hero-sm { min-height: 560px; }

  /* Slides wieder über den ganzen Hero */
  .hero-slider .hero-slide {
    inset: 0;
    height: auto;
  }

  /* Das Bildband der Unterseiten wieder aus — dort malt der
     Inline-Hintergrund der Section wieder selbst. */
  .hero-sm::after { display: none; }

  /* Bogen zurück an den unteren Rand, wieder weiß */
  .hero-slider::before,
  .hero-sm::before {
    top: auto;
    bottom: -1px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 80' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,80 L0,55 C580,55 1100,55 1440,0 L1440,80 Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
  }

  .hero-slider .hero-dots {
    top: auto;
    bottom: 68px;
  }

  /* ---------- Das Panel ---------- */

  .hero-slider,
  .hero-sm {
    justify-content: flex-end;   /* statt mittig */
  }

  .hero-slider .hero-content,
  .hero-sm .hero-content {
    width: 520px;
    max-width: 55%;
    margin: 0;
    /* bündig am rechten Rand, deshalb nur links abgerundet */
    border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg);
    background: rgba(27, 94, 32, 0.88);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    padding: var(--space-2xl) var(--space-xl);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Einheitliche Höhe wie bei der Anordnung im Bild — sonst
     springt das Layout beim Seitenwechsel wieder. */
  .hero-sm .hero-content { min-height: 390px; }

  /* Der Titel hat im 520er Panel weniger Platz als in der
     Bildmitte. Eine Stufe kleiner, damit „Zimmer & Übernachtung"
     nicht dreizeilig wird. */
  .hero-slider h1 { font-size: 3.25rem; }
  .hero-sm h1 { font-size: 2.75rem; }
  .hero-slider h1,
  .hero-sm h1 { text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }

  /* ---------- Startseite: Buttons in die freie Fläche links ---------- */

  .hero-slider .hero-buttons {
    position: absolute;
    top: auto;
    bottom: 100px;
    left: 0;
    right: 520px;
    width: auto;
    margin-top: 0;
    justify-content: center;
    /* Links neben dem Panel bleiben nur noch rund 860 px. Mit den
       Standardmaßen brauchen die drei Buttons 913 px und brechen in
       zwei Reihen um — deshalb hier etwas kompakter. */
    gap: var(--space-sm);
    padding: 0 var(--space-md);
  }

  .hero-slider .hero-buttons .btn {
    padding: 13px 22px;
  }

  /* Punkte-Navigation mittig unter die Buttons, nicht unter das Panel */
  .hero-slider .hero-dots {
    left: 0;
    right: 520px;
    width: auto;
  }
}

/* ============================================================
   Sehr breite Schirme: Panel löst sich vom Rand
   ============================================================
   Der übrige Seiteninhalt sitzt in einer 1200 px breiten Spalte.
   Am Fensterrand klebend steht das Panel auf einem 1900-px-Schirm
   weit außerhalb dieser Spalte und wirkt losgelöst vom Text
   darunter. Ab 1400 px rückt es deshalb auf die rechte Kante der
   Inhaltsspalte — es liegt dann etwa im rechten Drittel und
   fluchtet mit dem Inhalt.

   padding-right am Hero verschiebt nur den Kasten: Die Slides und
   der Bogen sind absolut mit inset:0 gesetzt und beziehen sich auf
   die Polsterungs-Box, bleiben also randlos. Buttons und Punkte
   haben eigene Werte und müssen mitwandern.

   Grenze bei 1500 px, nicht früher: Das Einrücken verkleinert die
   Fläche links neben dem Panel, wo auf der Startseite die drei
   Buttons stehen. Bei 1400 px blieben davon nur 773 px übrig und
   sie brachen wieder zweireihig um; ab 1500 px sind es 822 px und
   sie bleiben einreihig.
   ============================================================ */
@media (min-width: 1500px) {
  .hero-slider,
  .hero-sm {
    padding-right: calc((100% - 1200px) / 2);
  }

  /* Nicht mehr bündig, also rundum abgerundet statt nur links */
  .hero-slider .hero-content,
  .hero-sm .hero-content {
    border-radius: var(--border-radius-lg);
  }

  .hero-slider .hero-buttons,
  .hero-slider .hero-dots {
    right: calc(520px + (100% - 1200px) / 2);
  }
}