/* ============================================================
   ITIVARA — Bildsprache-Platzhalter ("Scenes")
   Vektorbasierte Destinations-Atmosphären. Ersetzen im Produkt
   die Fotostrecke des Reisebüros; hier offline-fest und exakt
   auf die Farbwelt kalibriert, damit die Prototypen ohne
   Bildrechte und ohne Netz die richtige Anmutung zeigen.
   Austausch im Code: .scene { background-image: url(foto.jpg) }
   ============================================================ */

.scene {
  position: relative;
  background-color: #241F1A;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  isolation: isolate;
}

/* Filmkorn — bricht den Farbverlauf, wirkt fotografisch */
.scene::before {
  content: "";
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  opacity: .18; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.55'/></svg>");
}

/* Lesbarkeits-Scrim, von unten */
.scene--scrim::after {
  content: "";
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top,
    rgba(14,13,11,.88) 0%, rgba(14,13,11,.62) 26%,
    rgba(14,13,11,.18) 58%, rgba(14,13,11,.30) 100%);
}
.scene--scrim-soft::after {
  content: "";
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(14,13,11,.70) 0%, rgba(14,13,11,.10) 55%, rgba(14,13,11,.22) 100%);
}
.scene > * { position: relative; z-index: 3; }

/* ---------- Silhouetten ---------- */
:root {
  --sil-table: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 420' preserveAspectRatio='none'><path d='M0,420 L0,344 L110,332 L214,302 L268,198 L306,178 L900,178 L958,246 L1058,270 L1140,256 L1200,274 L1200,420 Z' fill='rgb(18,17,15)'/></svg>");
  --sil-table-far: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 420' preserveAspectRatio='none'><path d='M0,420 L0,300 L140,262 L300,286 L470,240 L640,278 L820,236 L1000,272 L1200,244 L1200,420 Z' fill='rgb(52,44,37)'/></svg>");
  --sil-hills: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400' preserveAspectRatio='none'><path d='M0,400 L0,276 C160,236 300,296 452,272 C610,246 720,296 880,266 C1010,242 1110,286 1200,264 L1200,400 Z' fill='rgb(46,50,40)'/></svg>");
  --sil-hills-far: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400' preserveAspectRatio='none'><path d='M0,400 L0,230 C140,196 260,244 420,222 C560,202 700,240 860,214 C1000,192 1100,228 1200,206 L1200,400 Z' fill='rgb(96,96,76)'/></svg>");
  --sil-plain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400' preserveAspectRatio='none'><path d='M0,400 L0,338 C220,326 400,346 600,338 C800,330 980,348 1200,334 L1200,400 Z' fill='rgb(29,24,18)'/></svg>");
  --sil-acacia: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 170'><g fill='rgb(20,17,13)'><path d='M97,170 L97,84 L79,56 L84,53 L99,76 L101,76 L116,50 L121,53 L103,84 L103,170 Z'/><path d='M14,54 C40,32 68,22 100,22 C132,22 160,32 186,54 C186,54 168,45 150,42 C168,50 176,58 176,58 C150,46 124,41 100,41 C76,41 50,46 24,58 C24,58 32,50 50,42 C32,45 14,54 14,54 Z'/><path d='M52,45 L74,62 L70,65 L48,48 Z M148,45 L126,62 L130,65 L152,48 Z'/></g></svg>");
  --sil-skyline: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 260' preserveAspectRatio='none'><path d='M0,260 L0,196 L58,196 L58,150 L96,150 L96,182 L150,182 L150,126 L188,126 L188,168 L240,168 L240,140 L286,140 L286,190 L340,190 L340,110 L378,110 L378,176 L440,176 L440,148 L488,148 L488,186 L546,186 L546,132 L590,132 L590,178 L648,178 L648,156 L700,156 L700,192 L756,192 L756,138 L800,138 L800,180 L860,180 L860,160 L916,160 L916,188 L972,188 L972,144 L1016,144 L1016,182 L1080,182 L1080,164 L1140,164 L1140,194 L1200,194 L1200,260 Z' fill='rgb(15,14,12)'/></svg>");
  --sil-dune: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400' preserveAspectRatio='none'><path d='M0,400 L0,300 C180,246 340,306 520,280 C700,254 860,300 1040,262 C1120,246 1170,268 1200,258 L1200,400 Z' fill='rgb(84,58,36)'/></svg>");
}

/* ---------- Kapstadt · Tafelberg zur blauen Stunde ---------- */
.scene--cape {
  background-image:
    var(--sil-table),
    var(--sil-table-far),
    radial-gradient(120% 78% at 68% 88%, rgba(200,152,86,.42) 0%, rgba(200,152,86,0) 58%),
    linear-gradient(to bottom, #1B2434 0%, #3A3A44 34%, #7A6250 62%, #C0895A 84%, #E0A96D 100%);
  background-size: 100% 62%, 100% 52%, 100% 100%, 100% 100%;
  background-position: bottom, bottom, center, center;
}

/* ---------- Safari · Savanne, tiefstehende Sonne ---------- */
.scene--safari {
  background-image:
    var(--sil-acacia),
    var(--sil-plain),
    radial-gradient(46% 34% at 26% 72%, rgba(255,214,140,.55) 0%, rgba(255,214,140,0) 62%),
    linear-gradient(to bottom, #3E2C1C 0%, #7B4E26 26%, #C07A33 56%, #E5A44C 78%, #F0C378 100%);
  background-size: 27% auto, 100% 44%, 100% 100%, 100% 100%;
  background-position: 76% 86%, bottom, center, center;
}

/* ---------- Weinland · Morgenlicht über den Hügeln ---------- */
.scene--winelands {
  background-image:
    var(--sil-hills),
    var(--sil-hills-far),
    linear-gradient(to bottom, #6E8AA0 0%, #A9B8B4 30%, #D9CFA8 62%, #E8DBB2 100%);
  background-size: 100% 46%, 100% 58%, 100% 100%;
  background-position: bottom, bottom, center;
}

/* ---------- Küste · Indischer Ozean ---------- */
.scene--coast {
  background-image:
    linear-gradient(to bottom, rgba(12,40,46,0) 62%, rgba(12,40,46,.5) 100%),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.05) 0 1px, rgba(255,255,255,0) 1px 9px),
    linear-gradient(to bottom, #DCC9A6 0%, #B9BFA6 18%, #4E8189 46%, #235A69 74%, #103A47 100%);
  background-size: 100% 100%, 100% 46%, 100% 100%;
  background-position: center, bottom, center;
}

/* ---------- Lodge · Interieur, warmes Kerzenlicht ---------- */
.scene--lodge {
  background-image:
    radial-gradient(38% 46% at 74% 34%, rgba(255,196,116,.44) 0%, rgba(255,196,116,0) 70%),
    radial-gradient(52% 60% at 18% 78%, rgba(168,137,92,.28) 0%, rgba(168,137,92,0) 72%),
    linear-gradient(145deg, #23190F 0%, #38271A 48%, #1D150E 100%);
}

/* ---------- Flug · Wolkendecke über den Wolken ---------- */
.scene--sky {
  background-image:
    radial-gradient(70% 34% at 22% 88%, rgba(255,255,255,.32) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(56% 26% at 78% 96%, rgba(255,226,190,.34) 0%, rgba(255,226,190,0) 62%),
    linear-gradient(to bottom, #16233A 0%, #35455E 40%, #7A6C74 70%, #C58F6E 92%, #E5B183 100%);
}

/* ---------- Kapstadt bei Nacht ---------- */
.scene--city {
  background-image:
    var(--sil-skyline),
    radial-gradient(60% 40% at 50% 96%, rgba(214,168,102,.34) 0%, rgba(214,168,102,0) 66%),
    linear-gradient(to bottom, #0E1220 0%, #1C2233 46%, #33313A 78%, #4A3B34 100%);
  background-size: 100% 40%, 100% 100%, 100% 100%;
  background-position: bottom, center, center;
}

/* ---------- Wüste · Kalahari-Dünen ---------- */
.scene--dune {
  background-image:
    var(--sil-dune),
    linear-gradient(to bottom, #5E4B6B 0%, #A6705C 34%, #D69A5E 64%, #E9BE86 100%);
  background-size: 100% 42%, 100% 100%;
  background-position: bottom, center;
}

/* ---------- Neutral · Tag ohne Bildmaterial ---------- */
.scene--paper {
  background-color: var(--c-paper-sunk);
  background-image:
    repeating-linear-gradient(-45deg, rgba(168,137,92,.055) 0 1px, rgba(168,137,92,0) 1px 8px);
}
.scene--paper::before { display: none; }