/* style.css */

/* Grundstil */


.epunda-sans-<uniquifier> {
    font-family: "Epunda Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
  }
.montserrat-<uniquifier> {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
  }
 
.rubik-glitch-regular {
    font-family: "Rubik Glitch", system-ui;
    font-weight: 200;
    font-style: normal;
  }
  
.saira-stencil-one-regular {
    font-family: "Saira Stencil One", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
    
body {
    font-family: "Epunda Sans", sans-serif;
    line-height: 1.6;
    background: radial-gradient(circle at top, #0d0d0d 0%, #1a1a1a 100%);
    color: white;
    margin: 0;
    padding: 0;
    height: 200vh;
    overflow-x: hidden;
    position: relative;
}

/* Titel */
h1 {
    font-family: "Rubik Glitch", sans-serif;
    color: darkblue;
    text-align: center;
    font-weight: 200;
}

h2 {
    color: darkred;
}

h3,h4 {
  color: darkblue;
}

p {
    margin-left:100px;
    margin-right: 100px;
  }
  
p.txt {
  color: #fff;
}

.pic {
    display: block;          /* Bild als Block */
    margin-left: auto;       /* links automatisch */
    margin-right: auto;      /* rechts automatisch */
    max-width: 400px;        /* optional: maximale Breite */
    border: 3px solid #333;  /* optional: Rahmen, nur zur Demo */
}

.peter {
    color: #38AB1F;
    font-family: "Saira Stencil One", sans-serif;
}

h3 {
    color: #27B0F5;
}

.typewriter {
  font-family: "Courier New", Courier, monospace;
  font-size: 1.6rem;
  white-space: nowrap;
  overflow: hidden;              /* verdeckt den restlichen Text */
  border-right: .12em solid #222;/* Cursor */
  width: 30ch;                   /* sichtbare Zeichenlänge anpassen */
  animation:
    typing 3.5s steps(30, end) 1,
    blink-caret .7s step-end infinite;
    color:#000;
}

.fuess {
  margin: 15%;
}

/* Animationen */
@keyframes typing {
  from { width: 0; }
  to   { width: 30ch; }
}

@keyframes blink-caret {
  50% { border-color: transparent; }
}

/* Bilder */
img {
    /*max-width: 300px;*/
    display: block;
    margin: 20px auto;
    border-radius: 10px;
}

/* Video */
iframe {
    display: block;
    margin: 20px auto;
    border: 2px solid #555;
    border-radius: 8px;
}

/* Newsletter Formular */
div {
   /* background: #fff;
    border: 1px solid #ccc;*/
    padding: 15px;
    /*max-width: 400px;*/
    margin: 20px auto;
    border-radius: 8px;
}

label {
    display: block;
    margin-bottom: 5px;
}

input[type="email"] {
    padding: 8px;
    width: 100%;
    margin-bottom: 10px;
    border: 1px solid #aaa;
    border-radius: 5px;
}

button {
    background: darkblue;
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 5px;
}

button:hover {
    background: navy;
}

/* Rein nur CSS für: <div class="example"></div> */

/* Basis-Setup: Größe, Layout, Variable für schnelle Anpassung */
.example{
  --size: 220px;              /* Größe der Box — anpassen nach Wunsch */
  --accent1: #929fff;
  --accent2: #1100FF;
  --accent3: #7afcff;

  width: var(--size);
  height: var(--size);
  margin: 48px auto;
  display: grid;
  place-items: center;
  position: relative;
  cursor: pointer;

  /* Form + Farbverlauf (animiert durch background-position) */
  border-radius: 38% 62% 52% 48% / 52% 46% 54% 48%;
  background: linear-gradient(135deg, var(--accent1), var(--accent2), var(--accent3));
  background-size: 400% 400%;

  /* sanfter Inner-Glow + Schatten für Tiefe */
  box-shadow:
    0 18px 40px rgba(0,0,0,0.22),
    0 0 48px rgba(122,252,255,0.10) inset;

  /* Performance: transform & filter (GPU-accelerated) */
  transform-origin: center;
  will-change: transform, border-radius, filter, background-position;
  animation:
    float 6s ease-in-out infinite,
    morph 7s ease-in-out infinite,
    hueShift 12s linear infinite;
  color: white;
  font: 600 1rem/1 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  text-align: center;
}

/* subtiler Lichtschimmer oben rechts */
.example::after{
  content: "";
  position: absolute;
  top: 6%;
  right: 8%;
  width: 55%;
  height: 55%;
  pointer-events: none;
  border-radius: 40% 60% 50% 50% / 45% 55% 50% 50%;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.65), rgba(255,255,255,0.08) 18%, transparent 30%);
  transform: translate(6%, -6%) rotate(-8deg);
  filter: blur(6px);
  mix-blend-mode: screen;
  opacity: 0.95;
  animation: shimmer 4s ease-in-out infinite;
}

/* feine Außenring-Animation für mehr 'energy' */
.example::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(from 120deg, rgba(255,255,255,0.06), transparent 20%, rgba(0,0,0,0.02));
  transform: scale(1.06);
  filter: blur(10px) saturate(1.2);
  opacity: 0.8;
  mix-blend-mode: overlay;
  animation: ringPulse 6.5s ease-in-out infinite;
}

/* KEYFRAMES */

/* schwebende Bewegung */
@keyframes float{
  0%    { transform: translateY(0px) rotateZ(-0.5deg) scale(1); }
  25%   { transform: translateY(-12px) rotateZ(0.6deg) scale(1.02); }
  50%   { transform: translateY(0px) rotateZ(-0.2deg) scale(1); }
  75%   { transform: translateY(8px) rotateZ(0.4deg) scale(0.99); }
  100%  { transform: translateY(0px) rotateZ(-0.5deg) scale(1); }
}

/* border-radius Morphing für organische Blob-Formen */
@keyframes morph{
  0% {
    border-radius: 38% 62% 52% 48% / 52% 46% 54% 48%;
    filter: drop-shadow(0 12px 24px rgba(0,0,0,0.18));
  }
  25% {
    border-radius: 60% 40% 35% 65% / 45% 55% 36% 64%;
    filter: drop-shadow(0 10px 22px rgba(0,0,0,0.16));
  }
  50% {
    border-radius: 48% 52% 70% 30% / 58% 42% 66% 34%;
    filter: drop-shadow(0 16px 30px rgba(0,0,0,0.20));
  }
  75% {
    border-radius: 30% 70% 55% 45% / 40% 60% 52% 48%;
    filter: drop-shadow(0 12px 24px rgba(0,0,0,0.18));
  }
  100% {
    border-radius: 38% 62% 52% 48% / 52% 46% 54% 48%;
    filter: drop-shadow(0 12px 24px rgba(0,0,0,0.18));
  }
}

/* Hintergrund-Gradient läuft langsam durch die Fläche */
@keyframes hueShift{
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* heller Schimmer wandert leicht */
@keyframes shimmer{
  0%   { transform: translate(6%, -6%) rotate(-8deg) scale(1); opacity: 0.9; }
  50%  { transform: translate(-6%, 4%) rotate(6deg) scale(1.06); opacity: 0.6; }
  100% { transform: translate(6%, -6%) rotate(-8deg) scale(1); opacity: 0.95; }
}

/* weiches Pulsieren des Außenrings */
@keyframes ringPulse{
  0%   { transform: scale(1.06); opacity: 0.85; }
  50%  { transform: scale(1.12); opacity: 0.65; }
  100% { transform: scale(1.06); opacity: 0.85; }
}

/* Optional: responsiv kleiner werden auf sehr engen Ansichten */
@media (max-width:420px){
  .example{ --size: 160px; }
}
.example{
  font-family: "Rubik Glitch", sans-serif;
  color: #D4D1FF;
  font-size: 30px;
}

.explosion {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, #222 0%, #000 90%);
  position: relative;
  cursor: pointer;
  overflow: visible;
}

/* Basis: alle Pseudo-Elemente unsichtbar */
.explosion::before,
.explosion::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
}

/* Erste Explosion (zentraler Feuerball) */
.explosion:active::before {
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, #fff 0%, #ffd050 30%, #ff8000 70%, transparent 100%);
  box-shadow: 0 0 80px 40px rgba(255,180,60,0.7);
  animation: fireball1 1s ease-out forwards;
}

/* Zweite Explosion (Druckwelle + Rauch), etwas verzögert */
.explosion:active::after {
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(80,80,80,0.6) 0%, rgba(20,20,20,0.3) 60%, transparent 90%);
  box-shadow:
    0 0 80px 40px rgba(255, 120, 0, 0.4),
    0 0 200px 100px rgba(255, 80, 0, 0.2);
  animation: smoke1 2.5s cubic-bezier(.2,.8,.2,1) 0.3s forwards; /* 0.3s Verzögerung */
}

/* Funken/Trümmer */
.explosion span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffdd66 0%, #ff5500 90%);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
}

/* Funken aktivieren */
.explosion:active span {
  animation: fragments 3s ease-out forwards;
}

/* Große, unterschiedlich fliegende Trümmer */
.explosion span:nth-child(1)  { --tx: 180px;  --ty: -80px; --delay: 0s; }
.explosion span:nth-child(2)  { --tx: -200px; --ty: 100px; --delay: 0.1s; }
.explosion span:nth-child(3)  { --tx: 160px;  --ty: 120px; --delay: 0.05s; }
.explosion span:nth-child(4)  { --tx: -140px; --ty: -100px; --delay: 0.15s; }
.explosion span:nth-child(5)  { --tx: 120px;  --ty: -150px; --delay: 0.08s; }
.explosion span:nth-child(6)  { --tx: -160px; --ty: 140px; --delay: 0.12s; }
.explosion span:nth-child(7)  { --tx: 200px;  --ty: 60px; --delay: 0.07s; }
.explosion span:nth-child(8)  { --tx: -180px; --ty: -40px; --delay: 0.09s; }
.explosion span:nth-child(9)  { --tx: 140px;  --ty: 180px; --delay: 0.11s; }
.explosion span:nth-child(10) { --tx: -120px; --ty: -160px; --delay: 0.06s; }

/* --- KEYFRAMES --- */
@keyframes fireball1 {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 0; filter: blur(20px); }
  15%  { transform: translate(-50%, -50%) scale(2.5); opacity: 1; filter: blur(4px); }
  50%  { transform: translate(-50%, -50%) scale(3); opacity: 0.9; filter: blur(6px); }
  100% { transform: translate(-50%, -50%) scale(5); opacity: 0; filter: blur(20px); }
}

@keyframes smoke1 {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 0.8; filter: blur(4px); }
  30%  { transform: translate(-50%, -50%) scale(1.8); opacity: 1; filter: blur(2px); }
  60%  { transform: translate(-50%, -50%) scale(3.2); opacity: 0.6; filter: blur(6px); }
  100% { transform: translate(-50%, -50%) scale(5.5); opacity: 0; filter: blur(12px); }
}

@keyframes fragments {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  20%  { transform: translate(calc(-50% + var(--tx)/3), calc(-50% + var(--ty)/3)) scale(1.3); opacity: 1; }
  60%  { transform: translate(calc(-50% + var(--tx)/1.5), calc(-50% + var(--ty)/1.5)) scale(0.9); opacity: 0.8; }
  100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0.5); opacity: 0; }
}

/* reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
  .explosion:active::before,
  .explosion:active::after,
  .explosion:active span {
    animation: none;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}



.explosion{
  font-family: "Rubik Glitch", sans-serif;
  color: #443AC6;
  font-size: 60px;
}

.explosion2 {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, #222 0%, #000 90%);
  position: relative;
  cursor: pointer;
  overflow: visible;
}

/* gemeinsame Basis */
.explosion2::before,
.explosion2::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
}

/* innerer Feuerball */
.explosion2:active::before {
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, #fff 0%, #ffd050 30%, #ff8000 70%, transparent 100%);
  box-shadow:
    0 0 60px 20px #ffb000,
    0 0 150px 80px rgba(255, 120, 0, 0.5);
  animation: fireball 2.2s ease-out forwards;
}

/* Rauch + Druckwelle */
.explosion2:active::after {
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(80,80,80,0.7) 0%, rgba(20,20,20,0.4) 60%, transparent 90%);
  box-shadow:
    0 0 60px 40px rgba(255, 180, 100, 0.5),
    0 0 160px 80px rgba(255, 120, 0, 0.3),
    0 0 240px 120px rgba(100, 60, 20, 0.2);
  animation: smoke 4s cubic-bezier(.2,.8,.2,1) forwards;
}

/* Partikel */
.explosion2 span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffdd66 0%, #ff5500 90%);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
}

/* beim Klick aktivieren */
.explosion2:active span {
  animation: fragment 3s ease-out forwards;
}

/* verschiedene Richtungen */
.explosion2 span:nth-child(1)  { --tx: 140px;  --ty: -60px; }
.explosion2 span:nth-child(2)  { --tx: -160px; --ty: 50px; }
.explosion2 span:nth-child(3)  { --tx: 110px;  --ty: 90px; }
.explosion2 span:nth-child(4)  { --tx: -120px; --ty: -80px; }
.explosion2 span:nth-child(5)  { --tx: 90px;   --ty: -120px; }
.explosion2 span:nth-child(6)  { --tx: -70px;  --ty: 130px; }
.explosion2 span:nth-child(7)  { --tx: 160px;  --ty: 30px; }
.explosion2 span:nth-child(8)  { --tx: -190px; --ty: -20px; }
.explosion2 span:nth-child(9)  { --tx: 60px;   --ty: 160px; }
.explosion2 span:nth-child(10) { --tx: -40px;  --ty: -160px; }

/* --- ANIMATIONEN --- */

@keyframes fireball {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 0; filter: blur(20px); }
  15%  { transform: translate(-50%, -50%) scale(2.2); opacity: 1; filter: blur(4px); }
  50%  { transform: translate(-50%, -50%) scale(3); opacity: 0.9; filter: blur(6px); }
  100% { transform: translate(-50%, -50%) scale(5); opacity: 0; filter: blur(20px); }
}

@keyframes smoke {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 0.8; filter: blur(4px); }
  30%  { transform: translate(-50%, -50%) scale(1.6); opacity: 1; filter: blur(2px); }
  60%  { transform: translate(-50%, -50%) scale(3); opacity: 0.6; filter: blur(8px); }
  100% { transform: translate(-50%, -50%) scale(5.5); opacity: 0; filter: blur(12px); }
}

/* fliegende Trümmer / Funken */
@keyframes fragment {
  0%   {  opacity: 1;
          transform: translate(-50%, -50%) scale(1); }
  20%  {  transform: translate(calc(-50% + var(--tx)/3), calc(-50% + var(--ty)/3)) scale(1.3); }
  60%  {  opacity: 0.9;
          transform: translate(calc(-50% + var(--tx)/1.5), calc(-50% + var(--ty)/1.5)) scale(0.8); }
  100% {  transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0.4);
          opacity: 0; }
}

.explosion2{
  font-family: "Rubik Glitch", sans-serif;
  color: #2793A9;
  font-size: 60px;
}

/* Carousel-Container */
* { box-sizing: border-box; }
.container {  max-width: 800px;
              margin: 48px auto;
              padding: 0 16px; }
h1 {  font-size: 1.6rem;
      margin-bottom: 0.25rem; }
.gallery {  display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 12px; margin-top: 16px; }
.gallery a {  display: block;
              border-radius: 8px;
              overflow: hidden;
              box-shadow: 0 2px 8px rgba(0,0,0,0.08);
              text-decoration: none; }
.gallery img {  display: block;
                width: 100%;
                height: auto;
                vertical-align: middle; }
.note { margin-top: 16px;
        color: #555;
        font-size: 0.9rem; }
.controls { margin-top: 18px;
            display:flex;
            gap:8px; }
.controls button {  padding:8px 12px;
                    border-radius:6px;
                    border:1px solid #ccc;
                    background:white;
                    cursor:pointer; }
#open-first {color:#000;
    font-family: "Epunda Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
    }
#open-video {color:#000;
    font-family: "Epunda Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
    }
    
/* File: styles.css */
/* Reset / Basis */
* { box-sizing: border-box;
    margin: 0;
    padding: 0; }
html,body { height: 100%; }
/*body { font-family: Inter,Segoe UI,Roboto,Arial, sans-serif; line-height: 1.4; color: #1a1a1a; background: #f7fafc; }*/
.container {  max-width: 800px;
              margin: 0 auto;
              padding: 0 16px;
              background-color: rgba(255, 255, 255, 0.5);}


/* Header */
.site-header {  
                color: white;
                position: fixed;
                top: 20px;
                left: 50%;              /* mittig ausrichten */
                transform: translateX(-50%); /* wieder um halbe Breite verschieben */
                z-index: 1000;
                text-align: center;
                padding: 10px 20px;
                border-radius: 10px;}
                
.site-header .container { display: flex;
                          align-items: center;
                          justify-content: space-between;
                          height: 64px; }
.logo { color: white;
        text-decoration: none;
        font-weight: 700;
        font-size: 1.15rem; }


/* Navigation */
.main-nav ul {  list-style: none;
                display: flex;
                gap: 20px; }
.main-nav a { color: white;
              text-decoration: none;
              padding: 8px 16px;
              border-radius: 6px;
              background: #0005ff;}
.main-nav a:hover, .main-nav a:focus {  background: #bde6ff;
                                        color:#0005ff;}


/* Hamburger - hidden checkbox */
.nav-toggle { display: none; }
.nav-toggle-label { display: none;
                    cursor: pointer;
                    width: 40px;
                    height: 36px;
                    align-items: center;
                    justify-content: center; }
.hamburger {  display: block;
              width: 26px;
              height: 2px;
              background: #5200cc;
              position: relative;
              transition: transform 200ms ease; }
.hamburger::before, .hamburger::after { content: "";
                                        position: absolute;
                                        left: 0;
                                        width: 26px;
                                        height: 2px;
                                        background: #5200cc;
                                        transition: transform 200ms ease, top 200ms ease, opacity 200ms ease; }
.hamburger::before { top: -8px; }
.hamburger::after { top: 8px; }


/* Mobile styles */
@media (max-width: 720px) {
.site-header {
  left:80px;
}
.site-header .container { height: 56px; }
.main-nav { position: absolute;
    top: 56px;
    left: 20px;
    right: 20px;
    background: #0b1220;
    max-height: 0;
    overflow: hidden;
    transition: max-height 300ms ease; }
.main-nav ul {  flex-direction: column;
                padding: 12px;
                gap: 8px;
                background: #0066ff}
.nav-toggle-label { display: flex; }


/* When checkbox is checked, open menu */
.nav-toggle:checked + .nav-toggle-label .hamburger { transform: rotate(45deg); }
.nav-toggle:checked + .nav-toggle-label .hamburger::before { transform: rotate(90deg); top: 0; }
.nav-toggle:checked + .nav-toggle-label .hamburger::after { opacity: 0; }


/* The + selector above selects the label; to affect the nav we need a different selector. We'll move nav after label in DOM to allow this pattern,
but in this HTML nav is after label already, so we can use :checked ~ .main-nav */
.nav-toggle:checked ~ .main-nav { max-height: 320px; }
}


/* Desktop - ensure nav visible */
@media (min-width: 721px) {
.main-nav { position: static;
            max-height: none;
            margin-left: auto;
            margin-right: auto;}
}


/* Content + Footer */
.content { padding: 28px 0; }
.site-footer {  padding: 12px 0;
                text-align: center;
                color: #334155;
                font-size: 0.9rem; }


/* Accessibility: focus styles */
a:focus { outline: 3px solid #c7f3ff; outline-offset: 2px; }
.nav-toggle:focus + .nav-toggle-label { outline: 3px solid #c7f3ff;
                                        outline-offset: 2px;
                                        border-radius: 6px; }
                


.raindrop {
  position: fixed;
  top: -50px;
  width: 2px;
  height: 2px;
  background: rgba(173, 216, 230, 0.8);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(173, 216, 230, 0.5);
  animation: fall linear infinite;
  pointer-events: none;
}

.ganz {
  margin: 15%;
  background: radial-gradient(circle at top, #0d0d0d 0%, #1a1a1a 100%);
}

  .ganzGal {
    margin: 15%;
    border-radius: 10px;
    background: #bde6ff;
  }
.kon {
  background: none;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center bottom;
  z-index: 1;
}
@keyframes fall {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0.9;
  }
  100% {
    transform: translateY(110vh) translateX(1vw);
    opacity: 0.1;
  }
}

:root{
--bg:#0b2340;
--mid:#185a9d;
--front:#e6e9f0;
--text:#f8f9fb;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,'Helvetica Neue',Arial}
body{background:linear-gradient(180deg,var(--bg) 0%, #081428 60%);color:var(--text);}
.parallax-wrapper{position:relative;min-height:200vh;overflow-x:hidden;}
.parallax-layer{position:fixed;
                left:0;
                top:0;
                width:100%;
                height:100%;
                pointer-events:none;
                transform:translate3d(0,0,0);
                will-change:transform;
                position: fixed;
              }
.layer-bg {
  background-image: url("../bilder/sea.gif");
  background-size: cover;
  background-repeat: repeat-y;
  background-position: center bottom;
  z-index: 1;
  margin: 0;
}

.layer-mid {
  background: none;
  background-image: url("../bilder/orca.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  opacity: 0.95;
  z-index: 2;
  margin: 40px;
  top:50px;
}

.layer-front {
  background-image: linear-gradient(180deg,
     rgba(255,255,255,0.02), rgba(0,0,0,0.08)),
     url('data:image/svg+xml;utf8,<svg ...>');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  z-index: 3;
}


/* Content area sits on top of layers */
.content{position:relative;z-index:10;max-width:900px;margin:0 auto;padding:6rem 1rem 8rem}
h1{font-size:clamp(1.8rem, 3.2vw, 3rem);margin:0 0 1rem}
.lead{opacity:0.95;margin-bottom:1.5rem}
.spacer{height:480px}
.spacer.large{height:640px}
.card{background:rgba(255,255,255,0.04);padding:1.25rem;border-radius:10px;margin-bottom:1.5rem;box-shadow:0 6px 18px rgba(0,0,0,0.4)}
.card h2{margin-top:0}
.footer{margin-top:2rem;opacity:0.8}


/* small screens tweak */
@media (max-width:600px){.spacer{height:320px}.spacer.large{height:420px}.content{padding-top:4rem}}