/* brandnext Szenen-Host (js/scene.js): Formationen aus Blättern, Glas und Daten in [data-bn-scene].
   Zustände: is-loading (Three.js lädt, Standbild gedämpft), is-live (Canvas sichtbar), is-still (nur Standbild).
   Ohne JS und im still-Modus bleibt das Standbild voll sichtbar. Dazu: Laubkante als dezenter Sektionsübergang. */

.c-scene { position: relative; margin: 0; width: 100%; aspect-ratio: 4 / 3; isolation: isolate; }
.c-scene::before { content: ""; position: absolute; inset: 6% 4%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(169, 199, 171, .34), rgba(241, 236, 223, .22) 55%, transparent 100%); pointer-events: none; }
.c-scene img.c-scene__still { position: absolute; aspect-ratio: auto; border-radius: 0; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .9s var(--ease, ease); }
.c-scene__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.1s var(--ease, ease);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent); mask-composite: intersect; }
.c-scene.is-loading .c-scene__still { opacity: .35; }
.c-scene.is-live .c-scene__canvas { opacity: 1; }
.c-scene.is-live .c-scene__still { opacity: 0; }
.c-scene.is-still .c-scene__still { opacity: 1; }
.c-scene.is-still .c-scene__canvas { display: none; }

/* Seitenkopf mit Szene: Szene etwas größer als ein Foto, ragt optisch in den Rand */
.c-page-hero--scene .c-page-hero__figure { position: relative; }
@media (min-width: 1025px) {
  .c-page-hero--scene .c-page-hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .c-page-hero--scene .c-scene { margin: -4% -6% -4% 0; width: 106%; }
}
@media (max-width: 1024px) {
  .c-page-hero--scene .c-scene { max-width: 560px; margin-inline: auto; aspect-ratio: 5 / 4; }
}
.c-page-hero.is-dark .c-scene::before { background: radial-gradient(closest-side, rgba(63, 107, 66, .45), transparent 100%); }

/* Laubkante: wenige Blattsilhouetten auf der Sektionsgrenze, sehr dezent, ohne WebGL */
.c-page-hero.has-leaf-edge::before, .c-leaf-edge::before {
  display: none; /* Polish 05.10.2026: Laubkante aus */
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 36px; z-index: 0; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='36' viewBox='0 0 560 36'%3E%3Cpath d='M0 0C5-5.5 15-5.5 20 0C15 5.5 5 5.5 0 0Z' fill='%23A9C7AB' fill-opacity='0.55' transform='translate(10 24.1) rotate(-69) scale(0.59)'/%3E%3Cpath d='M0 0C5-5.5 15-5.5 20 0C15 5.5 5 5.5 0 0Z' fill='%23A9C7AB' fill-opacity='0.55' transform='translate(61 23.6) rotate(-89) scale(0.57)'/%3E%3Cpath d='M0 0C5-5.5 15-5.5 20 0C15 5.5 5 5.5 0 0Z' fill='%23B7CBB8' fill-opacity='0.55' transform='translate(107 27.2) rotate(-101) scale(0.96)'/%3E%3Cpath d='M0 0C5-5.5 15-5.5 20 0C15 5.5 5 5.5 0 0Z' fill='%233F6B42' fill-opacity='0.35' transform='translate(140 25.3) rotate(153) scale(0.84)'/%3E%3Cpath d='M0 0C5-5.5 15-5.5 20 0C15 5.5 5 5.5 0 0Z' fill='%23A9C7AB' fill-opacity='0.55' transform='translate(185 16.3) rotate(-40) scale(0.69)'/%3E%3Cpath d='M0 0C5-5.5 15-5.5 20 0C15 5.5 5 5.5 0 0Z' fill='%23D9CBAA' fill-opacity='0.55' transform='translate(219 26.6) rotate(-46) scale(0.64)'/%3E%3Cpath d='M0 0C5-5.5 15-5.5 20 0C15 5.5 5 5.5 0 0Z' fill='%23A9C7AB' fill-opacity='0.55' transform='translate(271 20.3) rotate(-83) scale(0.58)'/%3E%3Cpath d='M0 0C5-5.5 15-5.5 20 0C15 5.5 5 5.5 0 0Z' fill='%23E3B85C' fill-opacity='0.55' transform='translate(302 25.5) rotate(80) scale(0.71)'/%3E%3Cpath d='M0 0C5-5.5 15-5.5 20 0C15 5.5 5 5.5 0 0Z' fill='%23B7CBB8' fill-opacity='0.55' transform='translate(354 22.6) rotate(-49) scale(0.90)'/%3E%3Cpath d='M0 0C5-5.5 15-5.5 20 0C15 5.5 5 5.5 0 0Z' fill='%233F6B42' fill-opacity='0.35' transform='translate(392 21.1) rotate(143) scale(0.91)'/%3E%3Cpath d='M0 0C5-5.5 15-5.5 20 0C15 5.5 5 5.5 0 0Z' fill='%23A9C7AB' fill-opacity='0.55' transform='translate(433 16.2) rotate(-101) scale(0.93)'/%3E%3Cpath d='M0 0C5-5.5 15-5.5 20 0C15 5.5 5 5.5 0 0Z' fill='%23D9CBAA' fill-opacity='0.55' transform='translate(467 22.1) rotate(-66) scale(0.93)'/%3E%3Cpath d='M0 0C5-5.5 15-5.5 20 0C15 5.5 5 5.5 0 0Z' fill='%23A9C7AB' fill-opacity='0.55' transform='translate(519 17.5) rotate(-63) scale(0.85)'/%3E%3C/svg%3E") repeat-x 0 100% / 560px 36px; opacity: .9;
}
.c-leaf-edge { position: relative; }
.c-leaf-edge--top::before { top: -2px; bottom: auto; transform: scaleY(-1); }
.c-page-hero.is-dark.has-leaf-edge::before { opacity: .5; }
@media (prefers-reduced-motion: no-preference) {
  .c-page-hero.has-leaf-edge::before, .c-leaf-edge::before { animation: c-leaf-edge-in 1.6s var(--ease, ease) both .4s; }
}
@keyframes c-leaf-edge-in { from { opacity: 0; } }

/* Dunkel (prefers-color-scheme oder html[data-theme="dark"]): Szene als Lichtung am Abend, warmer statt grüner Schein */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .c-scene::before { background: radial-gradient(closest-side, rgba(227, 184, 92, .16), rgba(63, 107, 66, .2) 55%, transparent 100%); }
  :root:not([data-theme="light"]) .c-page-hero.has-leaf-edge::before, :root:not([data-theme="light"]) .c-leaf-edge::before { opacity: .45; }
}
:root[data-theme="dark"] .c-scene::before { background: radial-gradient(closest-side, rgba(227, 184, 92, .16), rgba(63, 107, 66, .2) 55%, transparent 100%); }
:root[data-theme="dark"] .c-page-hero.has-leaf-edge::before, :root[data-theme="dark"] .c-leaf-edge::before { opacity: .45; }