/* Grund-Setup */
:root{
  --font-title: "Cinzel", serif;
  --font-body: "Crimson Text", serif;

  /* Farben grob am Mockup orientiert */
  --ink: #0a2a3a;
  --ink-soft: #00526C;
  --btn-bg: #3d7a68;
  --btn-bg-hover: #316153;
  --btn-ink: #ffffff;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-body);
  background: #b9e2f5;
}

/* Bühne mit Wasser-Hintergrund */
.stage{
  position: relative;
  min-height: 100dvh;
  width: 100%;
  overflow: hidden;

  /* Ebene 1: Wasserbild */
  background-image: url("images/Background.png");
  background-size: cover;
  background-position: center;

  display: flex;
  align-items: center;      /* vertikal zentrieren */
  justify-content: center;  /* horizontal zentrieren */
}

/* Ebene 2: kleine Schwäne als Muster */


/* Screenreader-only Text */
.sr-only, .visually-hidden{
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden; clip: rect(1px,1px,1px,1px);
  white-space: nowrap;
}

.hero{
  position: relative;       /* behalten */
  z-index: 1;
  margin: 0 auto;
  text-align: center;
  width: min(820px, 90vw);
  padding-inline: 16px;       
  background-color: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); /* Für Safari-Kompatibilität */
  position: relative;
  z-index: 10;
  border-radius: 12px;
}



/* Titel & Untertitel – Größen an Mockup angelehnt */
.hero h1{
  color: #FEEFD3;
  font-family: var(--font-title);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: clamp(48px, 9vw, 120px);
  line-height: 0.95;
  margin: 0 0 10px;
  text-shadow: 0 2px 0 rgba(50, 50, 50, 0.6);
}

.hero h2{
  font-weight: 535;
  font-size: clamp(16px, 2.2vw, 28px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 8px;
  color: var(--ink-soft);
}

.hint{
  margin: 8px 0 22px;
  font-size: clamp(12px, 1.6vw, 16px);
  opacity: .9;
  color: #00526C;
}

/* Controls */
.controls{
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 8px;
  backdrop-filter: blur(2px);
}

.control{
  appearance: none;
  font: inherit;
  color: var(--ink);
  background: white;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 8px;
  padding: 10px 12px;
  min-width: 160px;
}

.dropdown{
  position: relative;
  display: inline-block;          /* sitzt schön in deiner .controls Zeile */
}

.dropdown__toggle{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-right: 14px;            /* Platz für Pfeil */
  cursor: pointer;
}

.dropdown__caret{
  opacity: .75;
  transition: transform .15s ease;
}
[aria-expanded="true"] .dropdown__caret{
  transform: rotate(180deg);
}

/* Aufklapp-Popup wie im Mock (Glas + Blur) */
.dropdown__menu{
  position: absolute;
  left: 0;
  right: 0;                       /* gleiche Breite wie Toggle */
  top: calc(100% + 8px);          /* Abstand nach unten */
  z-index: 10;
  display: none;                  /* per .open sichtbar */
  padding: 8px 0;
  border-radius: 12px;
  max-height: 200px; 
  overflow-y: auto; 

  background: rgba(255,255,255,0.65);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);

  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 10px 24px rgba(0,0,0,0.20);
    
}

.dropdown.open .dropdown__menu{ display: block; }

.dropdown__menu li{ list-style: none; }

.dropdown__item{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  font: inherit;
  color: var(--ink);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.dropdown__item:hover,
.dropdown__item[aria-selected="true"],
.dropdown__item:focus{
  outline: none;
  background: rgba(255,255,255,0.88);
}

.btn{
  font: inherit;
  padding: 10px 14px;
  border-radius: 8px;
  border: none;
  background: var(--btn-bg);
  color: var(--btn-ink);
  cursor: pointer;
  transition: background .2s ease;
  min-width: 120px;
}
.btn:hover{ background: var(--btn-bg-hover); }

/* Briefmarken an den vier Ecken */
/* ========== Briefmarken: nur größer + mehr Schatten bei Hover ========== */
.stamp{
  position: absolute;              /* lassen, damit die Ecken-Positionen wirken */
  z-index: 1;
  margin: 0;
  filter: drop-shadow(0 6px 6px rgba(0,0,0,.15));
  transform-origin: center center;
  transition: transform .18s ease, filter .18s ease;
  cursor: pointer;
}

@media (hover:hover) {
  .stamp:hover{
    transform: scale(1.10);                           /* größer werden */
    filter: drop-shadow(0 14px 18px rgba(0,0,0,.22)); /* stärkerer Schatten */
    z-index: 2;                                     /* über andere Elemente */
}
}

/* Tastaturfokus (optional, barrierefrei) */
.stamp:focus-within{
  transform: scale(1.07);
  filter: drop-shadow(0 14px 18px rgba(0,0,0,.22));
}

/* Bewegungen für Nutzer mit reduzierter Bewegung aus */
@media (prefers-reduced-motion: reduce){
  .stamp{ transition: none; }
}

.stamp img{
  display: block;
  width: clamp(120px, 18vw, 200px); /* passt die Größenverhältnisse an */
  height: auto;
}

/* Positionierung wie im Screenshot */
.stamp--tl{ top: 6vh;  left: 6vw; }
.stamp--tr{ top: 6vh;  right: 6vw; }
.stamp--bl{ bottom: 6vh; left: 6vw; }
.stamp--br{ bottom: 6vh; right: 6vw; }



/* Responsives Feintuning */
@media (max-width: 820px){
  .controls{ flex-wrap: wrap; }
  .control{ min-width: 46vw; }
}

/* style.css */

/* Container für die dynamisch erzeugten Schwäne */
.swan-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0; /* Stellt sicher, dass die Schwäne HINTER dem Text/Filter liegen */
  pointer-events: none; /* Macht den Container nicht klickbar */
}

/* Füge dies zum .stage Container hinzu, um Schwäne absolut zu positionieren */
.stage {
  /* ... bestehende Stile ... */
  position: relative; /* Sicherstellen, dass absolute Positionierung relativ zur Stage ist */
}

/* Container für die dynamisch erzeugten Schwäne */
.swan-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0; 
  pointer-events: none;
  /* Schwäne verschwinden lassen, wenn sie ausserhalb der Stage sind */
  overflow: hidden; 
}

/* Styling für einen einzelnen Schwan */
.swan {
  position: absolute; /* Wichtig für die zufällige Position */
  width: 72px;
  height: auto;
  /* Grosse Transitionszeit für das "Schwimmen" */
  transition: all 24s linear; 
}