/* ============================================================
   webdesign.schoscho.at – Saison-Dekoration im Hero: Aufbau
   Autor: Geri (2026)
   Design & Umsetzung: webdesign.schoscho.at
   ============================================================ */

/* Wird nur während einer Saison geladen, zusammen mit dem Stylesheet
   der jeweiligen Saison (Motive und Animationen). Außerhalb jeder
   Saison ist keine dieser Regeln im Spiel.

   Ebenen im Hero: Die Dekoration liegt als erstes Kind im Hero mit
   z-index 0, Überschrift, Text und Knöpfe folgen danach (z-index 1)
   und liegen deshalb immer darüber. Die Szene selbst ist am unteren
   Rand verankert; ihre Mitte ist leer, Motive stehen links, rechts und
   unten.

   Zwei Arten von Szenen: ein schmaler Streifen (etwa 3:1) am unteren
   Rand oder ein Rahmen (16:9, Klasse .saison-rahmen an der Dekoration),
   der den ganzen Hero einfasst. */
.hero-sektion > .saison-dekoration {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

/* PC und Tablet: Szene über die ganze Breite, höchstens 2000 px. Die
   Verschiebung nach unten (--saison-versatz) hält den Nebel in der
   Mitte unter dem Anfrageknopf; die Szene einer Saison kann den Wert
   in ihrem eigenen Stylesheet ändern. */
.saison-szene {
  position: absolute;
  left: 50%;
  bottom: var(--saison-versatz, 0px);
  width: min(100%, 2000px);
  max-width: none;
  height: auto;
  transform: translateX(-50%);
  display: block;
}
.saison-szene-haelfte { display: none; }

/* Rahmen (16:9, Mitte durchsichtig): unten verankert und mittig. Breite
   über Container-Einheiten der Dekoration (cqw/cqh = Breite/Höhe des
   Hero):
   - breiter Hero (ab 16:9): volle Breite, oben wird beschnitten – der
     Rahmen reicht bis an den oberen Rand;
   - höherer Hero: so breit, dass er die Höhe füllt (177.8cqh), aber
     höchstens 115 % der Breite, damit links und rechts höchstens 7,5 %
     wegfallen. Ohne diese Grenze blieben bei hohen Fenstern (Tablet
     hochkant, schmaler Browser) nur die Mitte und damit kaum Motive
     übrig; dann bleibt oben ein Streifen frei.
   Am Handy die zwei Hälften (siehe unten), etwas höher als beim
   Streifen, weil die Motive eines Rahmens am Rand höher reichen. */
.hero-sektion > .saison-rahmen { container-type: size; --saison-hoehe-handy: 220px; }
.hero-sektion > .saison-rahmen .saison-szene {
  width: max(100cqw, min(177.8cqh, 115cqw));
  height: auto;
}

/* Ebene in Größe und Lage des Rahmens: Animationen, die genau auf
   einem Motiv des Rahmens sitzen müssen (z. B. Feuerschein über einem
   gemalten Feuerkorb), stehen darin und werden in Prozent des Bildes
   angegeben. Seitenverhältnis wie die Rahmen (1672 × 941); ein Rahmen
   in anderem Format braucht hier einen eigenen Wert. Mittig über left
   statt transform: Ein transform machte die Ebene zu einer eigenen
   Stapelebene, mix-blend-mode darin würde dann nicht mehr mit dem
   Rahmen darunter mischen. Am Handy (Hälften statt ganzer Szene)
   ausgeblendet. */
.hero-sektion > .saison-rahmen .saison-rahmenlage {
  --rahmen-breite: max(100cqw, min(177.8cqh, 115cqw));
  position: absolute;
  left: calc(50% - var(--rahmen-breite) / 2);
  bottom: 0;
  width: var(--rahmen-breite);
  aspect-ratio: 1672 / 941;
}

/* Rahmen mit Motiven bis an den oberen Bildrand (Klasse
   .saison-oberkante-weich an der Dekoration, z. B. Feuerwerk oder
   Blütenzweige): In hohen Fenstern reicht der Rahmen nicht bis an den
   oberen Rand des Hero – Seitenverhältnis unter 1,54, das ist 16:9
   geteilt durch den höchstens 15 % breiteren Rahmen (Breitenregel
   oben). Ohne Ausblenden entstünde an der Oberkante des Bildes eine
   harte waagrechte Kante. Die Hälften am Handy beginnen mitten im
   Motiv und werden oben ebenfalls ausgeblendet (siehe unten). */
@container (max-aspect-ratio: 1.54) {
  .saison-oberkante-weich .saison-szene {
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%);
            mask-image: linear-gradient(to bottom, transparent, #000 14%);
  }
}

.saison-animation {
  position: absolute;
  inset: 0;
}

/* Lesbarkeit von „Entdecken“ am unteren Rand: Dort liegen helle
   Motive (Nebel, deckender Schnee). Ein dunkler, fast deckender Grund
   hält das Wort auf jedem Motiv lesbar. */
.hero-sektion > .scroll-hinweis {
  padding: 6px 16px 4px;
  border-radius: 999px;
  color: var(--text-haupt);
  background: color-mix(in srgb, var(--bg-void) 82%, transparent);
}

/* Hinweiszeilen im Hero (die der Saison und die der Winteraktion,
   beide mit Klasse .aktion-hinweis): während einer Saison mit fast
   deckendem Hintergrund, weil Motive der Szene darunter liegen können
   (z. B. deckender Schnee). Der Text steht in einem eigenen Element:
   Als ein Flex-Element bricht er bei Bedarf normal um, statt in Spalten
   zu zerfallen. Unter 1200 px entfällt der lange Teil der Saison-Zeile,
   die kurze Zeile bleibt dann mittig und frei von den Motiven am Rand. */
.hero-sektion > .aktion-hinweis {
  background: color-mix(in srgb, var(--bg-void) 88%, transparent);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.hero-sektion > .aktion-hinweis:hover,
.hero-sektion > .aktion-hinweis:focus-visible {
  background: color-mix(in srgb, var(--bg-void) 72%, var(--flieder));
}
@media (max-width: 1199px) {
  .saison-hinweis .aktion-hinweis-lang { display: none; }
}

/* Handy: Die volle Szene wäre nur rund 130 px hoch und ihre Mitte
   läge unter Text und Knopf. Stattdessen zwei Hälften – links der
   linke, rechts der rechte Teil der Szene –, jeweils zur Mitte hin
   ausgeblendet, damit „Entdecken“ frei bleibt. */
@media (max-width: 700px) {
  .saison-szene { display: none; }
  .saison-szene-haelfte {
    display: block;
    position: absolute;
    bottom: 0;
    width: 50%;
    height: var(--saison-hoehe-handy, 190px);
    max-width: none;
    object-fit: cover;
  }
  .saison-szene-links {
    left: 0;
    object-position: left bottom;
    -webkit-mask-image: linear-gradient(to right, #000 55%, transparent);
            mask-image: linear-gradient(to right, #000 55%, transparent);
  }
  .saison-szene-rechts {
    right: 0;
    object-position: right bottom;
    -webkit-mask-image: linear-gradient(to left, #000 55%, transparent);
            mask-image: linear-gradient(to left, #000 55%, transparent);
  }
  /* Oberkante zusätzlich weich: beide Verläufe überlagert (intersect) */
  .saison-oberkante-weich .saison-szene-links {
    -webkit-mask-image: linear-gradient(to right, #000 55%, transparent), linear-gradient(to bottom, transparent, #000 30%);
            mask-image: linear-gradient(to right, #000 55%, transparent), linear-gradient(to bottom, transparent, #000 30%);
    mask-composite: intersect;
  }
  .saison-oberkante-weich .saison-szene-rechts {
    -webkit-mask-image: linear-gradient(to left, #000 55%, transparent), linear-gradient(to bottom, transparent, #000 30%);
            mask-image: linear-gradient(to left, #000 55%, transparent), linear-gradient(to bottom, transparent, #000 30%);
    mask-composite: intersect;
  }
  .saison-rahmenlage { display: none; }
}

/* „Bewegung reduzieren“: nur die ruhende Szene, keine Animationen */
@media (prefers-reduced-motion: reduce) {
  .saison-animation { display: none; }
}

@media print {
  .saison-dekoration { display: none; }
}