/* Ziehende Wolken (hinter dem Bergkamm) und fahrendes Schiff im Hero-Bild (Tegernsee) */
.hero-scene,
.hero-sky {
    position: absolute;
    inset: 0;
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    container-type: size;
}

/* Bühne mit exakter Bildgeometrie (1024 × 595, object-fit: cover, zentriert) */
.hero-scene-stage {
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100cqw, calc(100cqh * 1024 / 595));
    aspect-ratio: 1024 / 595;
    transform: translate(-50%, -50%);
}

/* Freigestellter Vordergrund (Berge, Ort) über den Wolken: Die Wolken ziehen hinter dem Bergkamm */
.hero-scene-fore {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: auto;
}

/* Wolken liegen in Bildgeometrie, damit sie beim Beschneiden des Bildes am Himmel bleiben.
   Die Ebene liegt über dem dunklen Verlauf (sonst wirken die Wolken matt); die Himmelsmaske
   blendet sie am Bergkamm aus, der gedämpfte Filter ersetzt die Abdunklung durch den Verlauf. */
.hero-sky .hero-scene-stage {
    container-type: inline-size;
    -webkit-mask: url('../media/pages/uebersicht/kloster-tegernsee-himmelmaske.png') left top / 100% auto no-repeat;
    mask: url('../media/pages/uebersicht/kloster-tegernsee-himmelmaske.png') left top / 100% auto no-repeat;
}

.hero-sky .hero-cloud {
    filter: brightness(0.82);
    opacity: 0.92;
}

.hero-cloud {
    position: absolute;
    left: 0;
    top: var(--cloud-top);
    width: var(--cloud-w);
    aspect-ratio: var(--cloud-ratio);
    background: var(--cloud-img) center / 100% 100% no-repeat;
    animation: hero-cloud-drift calc(var(--cloud-duration) / var(--cloud-speed, 1)) linear calc(var(--cloud-delay) / var(--cloud-speed, 1)) infinite;
    will-change: transform;
    backface-visibility: hidden;
}

/* Auf schmalen Bühnen (Handy) wäre das Tempo in Bildschirmpixeln sehr gering, die Wolken
   kröchen pixelweise und ruckelten; daher dort schneller, damit sie ähnlich zügig wie am Desktop ziehen */
@container (max-width: 1400px) { .hero-cloud { --cloud-speed: 1.5; } }
@container (max-width: 1100px) { .hero-cloud { --cloud-speed: 2.2; } }
@container (max-width: 850px)  { .hero-cloud { --cloud-speed: 3; } }
@container (max-width: 650px)  { .hero-cloud { --cloud-speed: 4.2; } }
@container (max-width: 480px)  { .hero-cloud { --cloud-speed: 5.5; } }
@container (max-width: 380px)  { .hero-cloud { --cloud-speed: 6.5; } }

/* Werte in Bildpixeln (Basis 1024 × 595). Dauer = (1024 + Breite) / Tempo,
   Verzögerung = -(Start-x + Breite) / Tempo: Beim Laden steht jede Wolke an ihrer Startposition.
   Tiefe Wolken am Horizont sind flacher und ziehen langsamer. */
.hero-cloud--1 { --cloud-img: url('../media/pages/bad-toelz/wolke-6.webp'); --cloud-top: 3.025%;  --cloud-w: 19.531%; --cloud-ratio: 282 / 158; --cloud-x: 54.688cqw; --cloud-duration: 188.3s; --cloud-delay: -116.9s; }
.hero-cloud--2 { --cloud-img: url('../media/pages/bad-toelz/wolke-3.webp'); --cloud-top: 8.403%;  --cloud-w: 12.695%; --cloud-ratio: 161 / 110; --cloud-x: 11.719cqw; --cloud-duration: 164.9s; --cloud-delay: -35.7s; }
.hero-cloud--3 { --cloud-img: url('../media/pages/bad-toelz/wolke-4.webp'); --cloud-top: 16.807%; --cloud-w: 5.859%;  --cloud-ratio: 75 / 51;   --cloud-x: 24.414cqw; --cloud-duration: 180.7s; --cloud-delay: -51.7s; }
.hero-cloud--4 { --cloud-img: url('../media/pages/bad-toelz/wolke-5.webp'); --cloud-top: 18.151%; --cloud-w: 20.508%; --cloud-ratio: 234 / 88;  --cloud-x: 74.219cqw; --cloud-duration: 274.2s; --cloud-delay: -215.6s; }
.hero-cloud--5 { --cloud-img: url('../media/pages/bad-toelz/wolke-2.webp'); --cloud-top: 23.529%; --cloud-w: 16.602%; --cloud-ratio: 230 / 101; --cloud-x: 1.953cqw;  --cloud-duration: 238.8s; --cloud-delay: -38s; }
.hero-cloud--6 { --cloud-img: url('../media/pages/bad-toelz/wolke-7.webp'); --cloud-top: 3.361%;  --cloud-w: 14.648%; --cloud-ratio: 235 / 219; --cloud-x: 37.109cqw; --cloud-duration: 213.5s; --cloud-delay: -96.4s; }

/* Tiefe Wolkenbänke vor dem Bergkamm, am Waldhang über dem Ort: gespiegelt und gestaucht,
   damit sie sich von den hohen Wolken unterscheiden; Unterkante bleibt oberhalb der Häuser */
.hero-lowclouds {
    position: absolute;
    inset: 0;
    overflow: hidden;
    container-type: inline-size;
}

.hero-cloud--low {
    background: none;
}

.hero-cloud--low::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--cloud-img) center / 100% 100% no-repeat;
    transform: scaleX(-1);
}

.hero-cloud--7  { --cloud-img: url('../media/pages/bad-toelz/wolke-5.webp'); --cloud-top: 26.050%; --cloud-w: 19.531%; --cloud-ratio: 200 / 56; --cloud-x: 41.992cqw; --cloud-duration: 222.5s; --cloud-delay: -114.5s; }
.hero-cloud--8  { --cloud-img: url('../media/pages/bad-toelz/wolke-2.webp'); --cloud-top: 27.731%; --cloud-w: 15.625%; --cloud-ratio: 160 / 49; --cloud-x: 74.219cqw; --cloud-duration: 197.3s; --cloud-delay: -153.3s; }
.hero-cloud--9  { --cloud-img: url('../media/pages/bad-toelz/wolke-6.webp'); --cloud-top: 26.891%; --cloud-w: 17.090%; --cloud-ratio: 175 / 59; --cloud-x: 24.414cqw; --cloud-duration: 239.8s; --cloud-delay: -85s; }
.hero-cloud--10 { --cloud-img: url('../media/pages/bad-toelz/wolke-3.webp'); --cloud-top: 25.210%; --cloud-w: 14.648%; --cloud-ratio: 150 / 50; --cloud-x: 3.906cqw;  --cloud-duration: 202.4s; --cloud-delay: -32.8s; }

/* Start direkt hinter dem linken, Ende direkt hinter dem rechten Bildrand.
   translate3d + minimale Drehung verhindern, dass der Browser die langsam ziehenden Wolken
   auf ganze Pixel einrastet (sonst springen sie pixelweise und wirken ruckelig). */
@keyframes hero-cloud-drift {
    from { transform: translate3d(-100%, 0, 0) rotate(0.02deg); }
    to { transform: translate3d(100cqw, 0, 0) rotate(0.02deg); }
}

/* Schiff – fährt per SVG-Bewegungspfad am Ufer entlang (Koordinaten = Bildpixel) */
.hero-ship-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Cessna mit Banner – fliegt vom rechten Bildrand im Bogen nach hinten Richtung Berge und wieder nach vorne bis zum linken Bildrand */
.hero-plane-layer {
    position: absolute;
    inset: 0;
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    container-type: size;
}

.hero-plane {
    position: absolute;
    left: 0;
    top: 0;
    width: clamp(170px, 16cqw, 270px);
    --plane-top: var(--header-height, 78px);
    translate: 100cqw calc(var(--plane-top) + 22cqh);
    transform-origin: 0 50%;
    /* Die Animation beginnt mit dem Heißluftballon, die Cessna folgt nach gut 55 s */
    animation: hero-plane-fly 46s linear 36s infinite;
    will-change: translate, scale;
}

.hero-plane-art {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    filter: drop-shadow(0 2px 3px rgba(10, 20, 30, 0.25));
    transform-origin: 20% 50%;
    animation: hero-plane-drift 11s ease-in-out infinite;
}

/* Halbkreis in der Tiefe: vorne rechts, hinten Richtung Berge, vorne links.
   Halber Takt des Heißluftballons; Takt und Verzögerungen nur gemeinsam ändern.
   Außerhalb des Flugfensters wartet die Cessna rechts außerhalb des Bildes. */
@keyframes hero-plane-fly {
    0%, 43.48% { translate: 100cqw calc(var(--plane-top) + 22cqh); scale: 1; }
    44.99% { translate: calc(98.43cqw + -1.57%) calc(var(--plane-top) + 19.77cqh); scale: 0.843 0.942; }
    46.50% { translate: calc(96.67cqw + -3.33%) calc(var(--plane-top) + 17.63cqh); scale: 0.802 0.885; }
    48.01% { translate: calc(94.73cqw + -5.27%) calc(var(--plane-top) + 15.59cqh); scale: 0.762 0.831; }
    49.52% { translate: calc(92.60cqw + -7.40%) calc(var(--plane-top) + 13.66cqh); scale: 0.722 0.779; }
    51.03% { translate: calc(90.31cqw + -9.69%) calc(var(--plane-top) + 11.85cqh); scale: 0.683 0.730; }
    52.54% { translate: calc(87.86cqw + -12.14%) calc(var(--plane-top) + 10.17cqh); scale: 0.646 0.683; }
    54.05% { translate: calc(85.26cqw + -14.74%) calc(var(--plane-top) + 8.63cqh); scale: 0.610 0.640; }
    55.56% { translate: calc(82.51cqw + -17.49%) calc(var(--plane-top) + 7.23cqh); scale: 0.577 0.600; }
    57.07% { translate: calc(79.64cqw + -20.36%) calc(var(--plane-top) + 5.98cqh); scale: 0.545 0.563; }
    58.57% { translate: calc(76.65cqw + -23.35%) calc(var(--plane-top) + 4.87cqh); scale: 0.516 0.529; }
    60.08% { translate: calc(73.56cqw + -26.44%) calc(var(--plane-top) + 3.91cqh); scale: 0.490 0.500; }
    61.59% { translate: calc(70.37cqw + -29.63%) calc(var(--plane-top) + 3.10cqh); scale: 0.467 0.473; }
    63.10% { translate: calc(67.10cqw + -32.90%) calc(var(--plane-top) + 2.43cqh); scale: 0.447 0.451; }
    64.61% { translate: calc(63.76cqw + -36.24%) calc(var(--plane-top) + 1.89cqh); scale: 0.430 0.433; }
    66.12% { translate: calc(60.37cqw + -39.63%) calc(var(--plane-top) + 1.49cqh); scale: 0.417 0.419; }
    67.63% { translate: calc(56.94cqw + -43.06%) calc(var(--plane-top) + 1.21cqh); scale: 0.408 0.408; }
    69.14% { translate: calc(53.47cqw + -46.53%) calc(var(--plane-top) + 1.05cqh); scale: 0.402 0.402; }
    70.65% { translate: calc(50.00cqw + -50.00%) calc(var(--plane-top) + 1.00cqh); scale: 0.400 0.400; }
    72.16% { translate: calc(46.53cqw + -53.47%) calc(var(--plane-top) + 1.05cqh); scale: 0.402 0.402; }
    73.67% { translate: calc(43.06cqw + -56.94%) calc(var(--plane-top) + 1.19cqh); scale: 0.408 0.408; }
    75.18% { translate: calc(39.63cqw + -60.37%) calc(var(--plane-top) + 1.41cqh); scale: 0.417 0.419; }
    76.69% { translate: calc(36.24cqw + -63.76%) calc(var(--plane-top) + 1.70cqh); scale: 0.430 0.433; }
    78.20% { translate: calc(32.90cqw + -67.10%) calc(var(--plane-top) + 2.05cqh); scale: 0.447 0.451; }
    79.71% { translate: calc(29.63cqw + -70.37%) calc(var(--plane-top) + 2.45cqh); scale: 0.467 0.473; }
    81.22% { translate: calc(26.44cqw + -73.56%) calc(var(--plane-top) + 2.90cqh); scale: 0.490 0.500; }
    82.73% { translate: calc(23.35cqw + -76.65%) calc(var(--plane-top) + 3.38cqh); scale: 0.516 0.529; }
    84.24% { translate: calc(20.36cqw + -79.64%) calc(var(--plane-top) + 3.89cqh); scale: 0.545 0.563; }
    85.75% { translate: calc(17.49cqw + -82.51%) calc(var(--plane-top) + 4.42cqh); scale: 0.577 0.600; }
    87.26% { translate: calc(14.74cqw + -85.26%) calc(var(--plane-top) + 4.96cqh); scale: 0.610 0.640; }
    88.77% { translate: calc(12.14cqw + -87.86%) calc(var(--plane-top) + 5.52cqh); scale: 0.646 0.683; }
    90.28% { translate: calc(9.69cqw + -90.31%) calc(var(--plane-top) + 6.09cqh); scale: 0.683 0.730; }
    91.79% { translate: calc(7.40cqw + -92.60%) calc(var(--plane-top) + 6.66cqh); scale: 0.722 0.779; }
    93.30% { translate: calc(5.27cqw + -94.73%) calc(var(--plane-top) + 7.24cqh); scale: 0.762 0.831; }
    94.81% { translate: calc(3.33cqw + -96.67%) calc(var(--plane-top) + 7.82cqh); scale: 0.802 0.885; }
    96.32% { translate: calc(1.57cqw + -98.43%) calc(var(--plane-top) + 8.40cqh); scale: 0.843 0.942; }
    97.83%, 100% { translate: calc(0.00cqw + -100.00%) calc(var(--plane-top) + 9.00cqh); scale: 0.885 1.000; }
}

/* Langsames Steigen und Sinken; Nase hebt sich beim Steigen (positiv = Nase hoch, da Flug nach links) */
@keyframes hero-plane-drift {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-5px) rotate(1deg); }
    50% { transform: translateY(-7px) rotate(0deg); }
    75% { transform: translateY(-2px) rotate(-1deg); }
}

/* Heißluftballon (AUGEN TEGERNSEE) weiter hinten über dem Hang bzw. Ort: liegt unter dem dunklen Verlauf
   wie das Foto selbst. Fliegt vom rechten Bildrand herein, kehrt um und fliegt steigend wieder hinaus.
   Doppelter Takt der Cessna (92 s statt 46 s); über die Verzögerung der Cessna ist die Phase so gewählt,
   dass sie dem Ballon nie nahekommt. Takt und Verzögerungen nur gemeinsam ändern. */
.hero-balloon-layer {
    position: absolute;
    inset: 0;
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    container-type: size;
}

.hero-balloon {
    --balloon-turn: 62cqw;
    --balloon-y: calc(var(--header-height, 78px) + 9cqh + 60px);
    position: absolute;
    left: 0;
    top: 0;
    height: min(20cqh, 14cqw);
    aspect-ratio: 320 / 405;
    transform: translate3d(100cqw, var(--balloon-y), 0);
    animation: hero-balloon-fly 92s linear infinite;
    will-change: transform;
    backface-visibility: hidden;
}

/* Handy: Text liegt unter dem Bild, daher Umkehr weiter links; Höhe unterhalb der Cessna-Bahn */
@media (max-width: 768px) {
    .hero-balloon {
        --balloon-turn: 35cqw;
        --balloon-y: max(44cqh, calc(var(--header-height, 78px) + 22px));
        height: 22cqh;
    }

    /* Im flachen Handybild sonst zu tief über dem Ort */
    .hero-plane {
        --plane-top: calc(var(--header-height, 78px) - 25px);
    }
}

.hero-balloon-art {
    display: block;
    width: 100%;
    height: 100%;
    transform-origin: 50% 35%;
    animation: hero-balloon-sway 92s ease-in-out infinite;
    backface-visibility: hidden;
}

/* Beim Einschweben minimales Hin- und Herdrehen um die eigene Achse, zum Wendepunkt ausklingend.
   Gleicher Takt wie hero-balloon-fly. */
@keyframes hero-balloon-sway {
    0% { transform: perspective(600px) rotateY(0deg) rotate(0deg); }
    7% { transform: perspective(600px) rotateY(-26deg) rotate(1deg); }
    19.6% { transform: perspective(600px) rotateY(24deg) rotate(-0.9deg); }
    32.2% { transform: perspective(600px) rotateY(-20deg) rotate(0.7deg); }
    43.4% { transform: perspective(600px) rotateY(14deg) rotate(-0.5deg); }
    53.26%, 100% { transform: perspective(600px) rotateY(0deg) rotate(0deg); }
}

/* Von etwas tiefer kommend nach links aufsteigend bis zum Wendepunkt (abbremsen), kurz umkehren,
   dann beschleunigt und weiter steigend hinaus.
   Linke Kante bei 100cqw = außerhalb des Bildes. Minimale Drehung verhindert das Einrasten auf ganze Pixel. */
@keyframes hero-balloon-fly {
    0% {
        transform: translate3d(100cqw, calc(var(--balloon-y) + 8cqh), 0) rotate(0.02deg);
        animation-timing-function: cubic-bezier(0.25, 0.6, 0.4, 1);
    }
    53.26% {
        transform: translate3d(var(--balloon-turn), calc(var(--balloon-y) + 0.5cqh), 0) rotate(0.02deg);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    }
    61.41% {
        transform: translate3d(calc(var(--balloon-turn) + 1.5cqw), var(--balloon-y), 0) rotate(0.02deg);
        animation-timing-function: cubic-bezier(0.45, 0, 0.75, 0.85);
    }
    96.74%, 100% {
        transform: translate3d(100cqw, calc(var(--balloon-y) - 10cqh), 0) rotate(0.02deg);
    }
}

/* Bildunterschrift unten rechts im Foto */
.hero-caption-layer {
    position: absolute;
    inset: 0;
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    z-index: 4;
    pointer-events: none;
}

.hero-caption {
    position: absolute;
    right: clamp(12px, 2vw, 28px);
    bottom: clamp(8px, 1.4vw, 18px);
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(0.75rem, 0.9vw, 0.95rem);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 0 12px rgba(0, 0, 0, 0.35);
}

@media (prefers-reduced-motion: reduce) {
    .hero-cloud {
        animation: none !important;
        transform: translateX(var(--cloud-x));
    }

    .hero-plane-layer {
        display: none;
    }

    .hero-balloon {
        animation: none;
        transform: translate3d(var(--balloon-turn), var(--balloon-y), 0);
    }

    .hero-balloon-art {
        animation: none;
    }
}