/* Villa Schwalbe – Seitenhintergrund „thema-sand“: oben Ostsee, Brandung, unten Sandstrand.
   Die Klasse steht am <html>-Element. */

/* ---------- Gemeinsam ---------- */
.thema-sand body { position: relative; }
.thema-sand { --flaeche: rgba(255, 255, 255, .72); }
.seegrund { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; overflow: clip; }
.seegrund > * { display: none; }

/* Wasser: gerenderte Wasseroberfläche (assets/img/textur/see-wasser.webp aus _quellen/seewasser.js) über dem
   Farbverlauf. Die Grundfläche scrollt mit der Seite; darüber liegt nur im sichtbaren Fenster (sticky) eine zweite,
   größere und gespiegelte Lage, die langsam zum Ufer zieht – so entsteht bewegtes Wasser ohne riesige Ebenen. */
.see-wasser { --kachel: 1024px; --kachel-gross: 1331px; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--ufer) - 24px);
  background: url("../img/textur/see-wasser.webp") 0 0 / var(--kachel) var(--kachel) repeat;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.7) 0, #000 600px, #000 calc(100% - 260px), transparent 100%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,.7) 0, #000 600px, #000 calc(100% - 260px), transparent 100%); }
.see-bewegt { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.see-glanz { position: absolute; left: 0; right: 0; top: calc(var(--kachel-gross) * -1); bottom: 0; opacity: .5;
  background: url("../img/textur/see-wasser.webp") 0 0 / var(--kachel-gross) var(--kachel-gross) repeat; transform: scaleX(-1); }
.see-licht-bahn { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--ufer) - 40px);
  background:
    radial-gradient(38% 9% at 72% 18%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 70%),
    radial-gradient(30% 7% at 24% 46%, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0) 70%),
    radial-gradient(44% 8% at 66% 74%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 70%); }
@media (prefers-reduced-motion: no-preference) {
  .see-glanz { animation: wasserzug 70s linear infinite; }
  .see-licht-bahn { animation: lichtbahn 26s ease-in-out infinite alternate; }
}
.bewegung-aus .see-glanz, .bewegung-aus .see-licht-bahn { animation-play-state: paused; }
@keyframes wasserzug { from { transform: scaleX(-1) translateY(0); } to { transform: scaleX(-1) translateY(var(--kachel-gross)); } }

/* Abschnitte durchsichtig, damit das Wasser durchscheint; Karten bleiben weiß */
.thema-sand :is(.kassenzettel, .stimmen, .ausstattung, .ledger-abschnitt, .thema--grau, .sprung, .fuss) { background: transparent; }
.thema-sand .sprung { border-bottom-color: rgba(8, 63, 77, .12); }
.thema-sand .fuss-unten { border-top-color: rgba(8, 63, 77, .15); }
.thema-sand :is(.wissen-kasten, .rechts-kasten, .ledger-spalte, .direkt-kasten, .bestaetigung, .tabelle-rahmen, .app-karte, .ausflug--gross) { background: rgba(255, 255, 255, .9); }
.thema-sand .preistabelle thead th { background: rgba(255, 255, 255, .6); }
.thema-sand .preistabelle thead .ist-aktiv { background: var(--petrol); }
.thema-sand .bild { background: rgba(255, 255, 255, .5); }

/* Uferkante der Wasserbänder läuft in die Farbe des Seitengrunds aus */
.thema-sand .ufer path:last-child { fill: var(--grund-oben); }
/* Startbild und Kopfbänder: unten entlang der Wellenlinie ausgeschnitten, damit die Wasseroberfläche direkt anschließt */
.thema-sand :is(.held.foto, .wasser--band) { --ufer-hoehe: clamp(60px, 9vw, 130px);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 130' preserveAspectRatio='none'%3E%3Cpath d='M0 98 C 220 84 380 112 590 98 S 930 80 1110 94 S 1330 112 1440 92 V0 H0 Z'/%3E%3C/svg%3E") bottom / 100% var(--ufer-hoehe) no-repeat,
                linear-gradient(#000, #000) top / 100% calc(100% - var(--ufer-hoehe) + 1px) no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 130' preserveAspectRatio='none'%3E%3Cpath d='M0 98 C 220 84 380 112 590 98 S 930 80 1110 94 S 1330 112 1440 92 V0 H0 Z'/%3E%3C/svg%3E") bottom / 100% var(--ufer-hoehe) no-repeat,
                linear-gradient(#000, #000) top / 100% calc(100% - var(--ufer-hoehe) + 1px) no-repeat; }
.thema-sand :is(.held.foto, .wasser--band) > .ufer path:last-child { display: none; }

/* ---------- Sand unten, Meer oben ---------- */
.thema-sand { --grund-oben: #d6e3ea; --sand: #ecdfbf; --sand-tief: #e3d2ab; --ufer: 58%; }
.thema-sand body.startseite { --ufer: 62.5%; }
.thema-sand body {
  background: linear-gradient(180deg,
    var(--grund-oben) 0%, #cddde5 14%, #c4d6df 36%, #bdd2da calc(var(--ufer) - 14%), #b9d1d4 calc(var(--ufer) - 5%),
    #b6cfcf calc(var(--ufer) - 70px), #e9f0f0 calc(var(--ufer) - 26px), #cbbf9f calc(var(--ufer) - 8px),
    var(--sand) calc(var(--ufer) + 2%), var(--sand-tief) 100%);
}
.thema-sand .see-wasser, .thema-sand .see-licht-bahn { display: block; }
.thema-sand .sand-korn {
  display: block; position: absolute; left: 0; right: 0; top: calc(var(--ufer) - 10px); bottom: 0;
  background: url("../img/textur/sand.webp") repeat; background-size: 512px 512px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 70px);
          mask-image: linear-gradient(180deg, transparent 0, #000 70px);
}
/* Brandung: Wellen schwappen aufs Ufer und ziehen sich zurück, der nasse Sand dunkelt nach */
.thema-sand .brandung { display: block; position: absolute; left: 0; right: 0; top: calc(var(--ufer) - 150px); height: 260px; overflow: hidden; }
.nasser-sand { position: absolute; left: 0; right: 0; top: 118px; height: 110px; background: linear-gradient(180deg, rgba(150, 124, 78, .55), rgba(165, 140, 92, .32) 45%, rgba(165, 140, 92, 0)); animation: nass 10s ease-in-out infinite; }
.schwall { position: absolute; left: -6%; right: -6%; top: 0; height: 160px; will-change: transform, opacity; transform-origin: 50% 0; }
.schwall svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 3px 2px rgba(120, 100, 60, .18)); }
.schwall.s1 { animation: schwappen 10s cubic-bezier(.45, .05, .35, 1) infinite; }
.schwall.s2 { animation: schwappen 12.5s cubic-bezier(.45, .05, .35, 1) -4.2s infinite; }
.schwall.s3 { animation: schwappen 15s cubic-bezier(.45, .05, .35, 1) -9s infinite; }
@keyframes schwappen {
  0% { transform: translate3d(0, -52px, 0) scaleY(.88); opacity: 0; }
  14% { opacity: 1; }
  46% { transform: translate3d(-1.2%, 16px, 0) scaleY(1.04); opacity: 1; }
  68% { transform: translate3d(-1.6%, 10px, 0) scaleY(1); opacity: .75; }
  100% { transform: translate3d(0, -52px, 0) scaleY(.88); opacity: 0; }
}
@keyframes nass { 0%, 100% { opacity: .5; } 50% { opacity: .95; } }
.bewegung-aus .schwall, .bewegung-aus .nasser-sand { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .schwall, .nasser-sand { animation: none !important; } .schwall.s1 { transform: translateY(6px); opacity: 1; } .schwall.s2, .schwall.s3 { opacity: 0; } }

/* Strandkörbe über dem Fuß (nur am Strand) */
.strandkorb-reihe { display: none; }
.thema-sand .strandkorb-reihe { display: block; position: relative; height: 92px; max-width: 1600px; margin: -40px auto 1.5rem; overflow: hidden; }
.strandkorb-reihe .korb { position: absolute; left: var(--x); top: var(--y); width: calc(64px * var(--s)); height: auto; }
@media (max-width: 760px) { .strandkorb-reihe .korb:nth-child(even) { display: none; } }

/* Am Strand ruht das Schlussband auf dem Sand statt im tiefen Wasser */
.thema-sand .schluss { background: transparent; color: var(--text); }
.thema-sand .schluss .ufer-oben { display: none; }
.thema-sand .schluss h2 { color: var(--text-kopf); }
.thema-sand .schluss p { color: var(--text); }
.thema-sand .schluss-kontakt a { background: rgba(255, 255, 255, .85); color: var(--tinte); box-shadow: 0 0 0 1px rgba(8, 63, 77, .12); }
.thema-sand .schluss-kontakt a:hover { background: var(--weiss); color: var(--tinte); }
.thema-sand .schluss-kontakt .icon { color: var(--petrol); }
.thema-sand .schluss-kontakt .anfrage-link { background: var(--petrol); color: var(--weiss); box-shadow: var(--schatten-leicht); }
.thema-sand .schluss-kontakt .anfrage-link:hover { background: var(--petrol-tief); color: var(--weiss); }
.thema-sand .schluss-kontakt .anfrage-link .icon { color: var(--weiss); }
.thema-sand .schluss { padding-top: clamp(2rem, 4vw, 3rem); }
.thema-sand .schluss-inhalt { padding-top: 0; }


/* ---------- Strandleben: Spülsaum mit Möwen, Strandkörben, Sandburg und Fundstücken (auf jeder Seite, wo der Sand beginnt) ---------- */
.strandleben { position: relative; height: 200px; max-width: 1500px; margin: -1rem auto 0; overflow: hidden; pointer-events: none; }
.ding { position: absolute; left: var(--x); top: var(--y); width: var(--b); height: auto; overflow: visible; }
.ding.gedreht-a { transform: rotate(-24deg); }
.ding.gedreht-b { transform: rotate(31deg); }
.ding.gespiegelt { transform: scaleX(-1); }
@media (prefers-reduced-motion: no-preference) {
  .flug { animation: segeln 9s ease-in-out infinite alternate; }
  .flug-b { animation-duration: 11s; animation-delay: -4s; }
  .flug-c { animation-duration: 13s; animation-delay: -7s; }
}
.bewegung-aus .flug { animation-play-state: paused; }
@keyframes segeln {
  0% { transform: translate(0, 0) rotate(-3deg); }
  35% { transform: translate(28px, -10px) rotate(2deg); }
  70% { transform: translate(54px, 4px) rotate(-1deg); }
  100% { transform: translate(80px, -6px) rotate(3deg); }
}
@media (max-width: 760px) {
  .strandleben { height: 170px; }
  .strandleben .ding:not(.flug) { width: calc(var(--b) * .8); }
  .strandleben svg.ding:nth-of-type(2), .strandleben svg.ding:nth-of-type(7), .strandleben svg.ding:nth-of-type(9), .strandleben svg.ding:nth-of-type(13), .strandleben svg.ding:nth-of-type(15) { display: none; }
}