/* ============================================================
   Hero-Anordnung: Kasten UNTERHALB des Bildes
   ============================================================
   Bildband oben, darunter der Bogen, darunter ein grünes Band
   mit Titel (und auf der Startseite den Buttons).

   Diese Datei ist als Ganzes zuschaltbar. Auf den Seiten steht

       <link rel="stylesheet" href="css/hero-unten.css" id="hero-layout-css">

   und der Umschalter unten links auf jeder Seite setzt
   link.disabled. Aus = die ursprüngliche Anordnung greift, der
   Kasten liegt wieder auf dem Bild — die alten Regeln stehen
   unangetastet in style.css.

   ENDGÜLTIG ENTSCHEIDEN:
   - Kasten unten behalten -> Inhalt hierher nach style.css
     übernehmen, Datei und Umschalter entfernen
   - Kasten oben behalten  -> Datei löschen, <link> und
     Umschalter aus den Seiten nehmen

   Angelegt 06.08.2026.
   ============================================================ */
/* Höhe des Bildbands. Am Desktop höher, weil das Band dort über
   die volle Breite läuft und sonst zum schmalen Streifen wird. */
:root { --hero-band: 55vh; }

@media (max-width: 768px) {
  :root { --hero-band: 44vh; }
}

/* ---------- Startseite: Slider-Hero ---------- */

.hero-slider {
  display: block;
  min-height: 0;
  padding-top: var(--hero-band);
  padding-bottom: var(--space-2xl);
  background-color: #1B5E20;
}

.hero-slider .hero-slide {
  inset: 0 0 auto 0;
  height: var(--hero-band);
}

/* Bogen sitzt am unteren Rand des Bildbands, nicht am Seitenende —
   und ist dort grün statt weiß, weil darunter das grüne Band folgt. */
.hero-slider::before,
.hero-sm::before {
  top: calc(var(--hero-band) - 80px);
  bottom: auto;
  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='%231B5E20'/%3E%3C/svg%3E");
}

.hero-slider .hero-dots {
  top: calc(var(--hero-band) - 104px);
  bottom: auto;
}

/* Der Kasten braucht keinen eigenen Hintergrund mehr — er steht
   ohnehin auf dem grünen Band. */
.hero-slider .hero-content {
  background: transparent;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  margin: 0 auto;
  padding-top: var(--space-lg);
  padding-bottom: 0;
}

.hero-slider .hero-buttons {
  position: static;
  margin-top: var(--space-lg);
}

/* ---------- Unterseiten: Bild-Hero ----------
   Hier gibt es keine Slide-Divs, das Bild steckt als Inline-
   background-image am <section> und liefe über die volle
   Hero-Höhe. Deshalb trägt ::after das Bild — es erbt es per
   background-image: inherit und begrenzt es aufs Band.
   ::after war frei (weiter oben nur auf display:none gesetzt).
   Der Inline-Hintergrund der Section bleibt unangetastet: er ist
   die Quelle fürs inherit und wird ohnehin komplett verdeckt —
   oben vom Band, unten vom deckend grünen Kasten. */

.hero-sm {
  display: block;
  min-height: 0;
  padding-top: var(--hero-band);
  background-color: #1B5E20;
}

.hero-sm::after {
  content: '';
  display: block;
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--hero-band);
  background-image: inherit;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

/* Deckend grün und über die volle Breite — der Kasten verdeckt
   damit den Teil des Section-Hintergrunds, der unter dem Band liegt. */
.hero-sm .hero-content {
  background: #1B5E20;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  max-width: none;
  margin: 0;
  padding: var(--space-xl) var(--space-xl) var(--space-2xl);
  /* Die festen Maße aus style.css gelten nur, solange der Kasten IM
     Bild liegt. Hier läuft er über die volle Breite und wächst mit
     dem Inhalt — sonst stünde er als 620-px-Block im grünen Band. */
  width: auto;
  min-height: 0;
  display: block;
}

/* Der Hero braucht hier keine Mindesthöhe fürs Bild drumherum —
   das Bildband hat seine eigene. */
.hero-sm { min-height: 0; }

/* Auf flachem Grün braucht der Titel keinen Schatten mehr. */
.hero-slider h1,
.hero-sm h1 { text-shadow: none; }

/* Ab Tablet aufwärts: der Titel war auf die Wirkung im Bild
   ausgelegt. Im Band darunter bricht er im 620-px-Kasten
   zweizeilig um und macht den Hero über eine Bildschirmhöhe
   lang. Deshalb breiterer Kasten und eine Stufe kleiner —
   „Gasthof Turmwirt" steht damit einzeilig. */
@media (min-width: 769px) {
  .hero-slider .hero-content { max-width: 900px; }
  .hero-slider h1 { font-size: 4rem; }
  .hero-sm h1 { font-size: 3.5rem; }
}

/* Das Zusammenklappen des Kastens nach oben rechts hatte nur den
   Zweck, das Foto freizuräumen — das erledigt jetzt die Anordnung
   selbst. Sonst würde der Kasten aus dem grünen Band heraus wieder
   aufs Bild springen. Die Mechanik im JavaScript bleibt unangetastet
   und wird hier nur visuell stillgelegt, damit der Rückbau oben sie
   vollständig zurückbringt. */
.hero-content.is-mini,
.hero-content.is-mini:hover,
.hero-content.is-mini:focus-visible {
  transform: none;
  background: transparent;
  box-shadow: none;
}

.hero-content[data-hero-collapse] { cursor: auto; }
.hero-content[data-hero-collapse]::after { content: none; }
.hero-min-btn { display: none; }

/* ---------- Nur schmale Ansicht: Typo eine Stufe kleiner ----------
   Auf dem Foto durfte der Titel bildfüllend sein, im Band darunter
   schöbe er sonst die Buttons aus dem ersten Bildschirm. */
@media (max-width: 768px) {
  .hero-slider h1,
  .hero-sm h1 {
    font-size: 2.4rem;
    margin-bottom: var(--space-sm);
  }

  .hero-slider .subtitle,
  .hero-sm .subtitle {
    font-size: 1.3rem;
    margin-bottom: var(--space-sm);
  }

  .hero-sm .subtitle { margin-bottom: 0; }

  .hero-slider .hero-content p:not(.subtitle) { font-size: 1.05rem; }

  .hero-sm .hero-content {
    padding: var(--space-lg) var(--space-xl) var(--space-xl);
  }
}