/* ========================================
   CSS CUSTOM PROPERTIES (Variablen)
   ======================================== */

/* Hier werden alle Stellschrauben für Größen und Positionen definiert */
:root {
  /* Hero-Sektion Höhe */
  --hero-h: 120svh;
  
  /* Szene nimmt volle Viewport-Breite ein (keine seitlichen Abstände) */
  --scene-w: 100vw;
  --scene-ratio: 16/9;

  /* Linke Insel (Kopenhagen) - Position und Größe */
  --left-w: 172%;              /* Breite der Insel */
  --left-left: -29%;           /* Abstand von links (negativ = ragt raus) */
  --left-bottom: -29%;         /* Abstand von unten (negativ = tiefer) */

  /* Rechte Insel (Malmö) - Position und Größe */
  --right-w: 172%;             /* Breite der Insel */
  --right-right: -48%;         /* Abstand von rechts (negativ = ragt raus) */
  --right-bottom: -14%;        /* Abstand von unten */

  /* Brücke zwischen den Inseln */
  --bridge-w: 65%;             /* Breite der Brücke */
  --bridge-bottom: 0%;         /* Abstand von unten (kleiner = tiefer) */
  --bridge-shift: -32%;        /* Horizontale Verschiebung (negativ = nach rechts) */
}


/* ========================================
   RESET & BASIS-STYLES
   ======================================== */

/* Alle Elemente bekommen box-sizing: border-box und die Inter-Schriftart */
* { 
  box-sizing: border-box; 
  font-family: "Inter", system-ui, sans-serif; 
}

/* HTML und Body nehmen volle Höhe ein, keine Standard-Abstände */
html, body { 
  height: 100%; 
  margin: 0; 
}

/* Body mit Hintergrund-Gradient (Himmel-Effekt) und dunkler Textfarbe */
body {
  color: #0a223a;
  background:
    radial-gradient(1200px 800px at 50% -10%, rgba(255,255,255,.2), transparent 60%),
    linear-gradient(180deg, #bfe9ff 0%, #74c1ff 45%, #3da0ff 100%);
  background-attachment: fixed;        /* Hintergrund bleibt beim Scrollen fixiert */
  overflow-x: hidden;                  /* Horizontales Scrollen verhindern */
}


/* ========================================
   HERO-SEKTION
   ======================================== */

/* Haupt-Container für die Hero-Sektion mit Grid-Layout */
.hero {
  position: relative;
  height: auto;
  display: grid;
  grid-template-rows: auto auto 1fr;   /* 3 Bereiche: Titel, Buttons, Szene */
  justify-items: center;               /* Alles horizontal zentrieren */
  padding-top: clamp(28px, 6vh, 72px);
  padding-bottom: 4rem;
  overflow: visible;
  isolation: isolate;                  /* Eigener Stacking Context */
}

/* Haupt-Titel der Seite */
.hero__title {
  margin: 0 12px; 
  color: #fff; 
  font-weight: 800;
  font-size: clamp(40px, 7.5vw, 86px); /* Responsive Schriftgröße */
  text-align: center; 
  letter-spacing: .5px;
  text-shadow: 0 3px 6px rgba(0,0,0,.30), 0 12px 32px rgba(0,50,120,.35);
  position: relative; 
  z-index: 3;                          /* Über der Szene */
  cursor: pointer;                     /* Klickbar */
  user-select: none;                   /* Text nicht markierbar */
}

/* Container für die Toggle-Buttons */
.hero__toggle {
  position: relative; 
  z-index: 3;
  display: flex; 
  gap: clamp(36px, 5vw, 64px);
  margin-top: clamp(14px, 2.4vh, 22px);
}


/* ========================================
   BUTTONS & CONTROLS
   ======================================== */

/* Pill-Buttons (abgerundete Buttons) */
.pill {
  border: 0; 
  border-radius: 12px; 
  cursor: pointer;
  padding: .7rem 1.2rem; 
  font-weight: 800; 
  font-size: clamp(15px, 2.2vw, 20px);
  background: #c8f0d7;                 /* Helles Grün */
  color: #1a3a2a;                      /* Dunkles Grün */
  box-shadow: 0 8px 22px rgba(0,0,0,.14), 0 1px 0 rgba(255,255,255,.55) inset;
  will-change: transform, box-shadow;
  animation: pill-float 6s ease-in-out infinite; /* Sanfte Schwebe-Animation */
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background-color .2s ease,
    filter .2s ease;
}

/* Zweiter Button hat leicht versetzte Animation für natürlicheren Effekt */
.hero__toggle .pill:nth-child(2) { 
  animation-delay: 1.2s; 
}

/* Button-Hover-Effekt: Hebt sich an und wird größer */
.pill:hover {
  animation-play-state: paused;        /* Schwebe-Animation pausieren */
  transform: translateY(-6px) scale(1.04);
  filter: brightness(0.97) saturate(1.05);
  box-shadow: 0 18px 34px rgba(0,0,0,.20), 0 1px 0 rgba(255,255,255,.55) inset;
}

/* Button-Klick-Effekt: Drückt leicht ein */
.pill:active {
  transform: translateY(-3px) scale(1.02);
  filter: brightness(1.95);
}

/* Sichtbarer Fokus-Ring für Tastaturnavigation */
.pill:focus-visible {
  outline: 2px solid rgba(0,0,0,.25);
  outline-offset: 2px;
}

/* Schwebe-Animation für die Buttons */
@keyframes pill-float {
  0%, 100% {
    transform: translateY(0);
    box-shadow: 0 8px 22px rgba(0,0,0,.14), 0 1px 0 rgba(255,255,255,.55) inset;
  }
  50% {
    transform: translateY(-6px);       /* Hebt sich um 6px an */
    box-shadow: 0 16px 30px rgba(0,0,0,.18), 0 1px 0 rgba(255,255,255,.55) inset;
  }
}

/* Animation respektvoll ausschalten für Nutzer mit entsprechender Präferenz */
@media (prefers-reduced-motion: reduce) {
  .pill { 
    animation: none; 
  }
}


/* ========================================
   SZENE & INSELN
   ======================================== */

/* Die Bühne/Szene mit den Inseln und der Brücke */
.scene {
  position: relative;
  width: var(--scene-w);
  max-width: none;
  aspect-ratio: var(--scene-ratio);    /* Seitenverhältnis (16:9) */
  margin-top: clamp(12px, 3vh, 28px);
  z-index: 1;
  overflow: hidden;                    /* Überhängende Teile abschneiden */
  margin-left: 0;
  margin-right: 0;
  left: 50%;
  transform: translateX(-50%);         /* Horizontal zentrieren */
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}

/* Wenn Ergebnisse angezeigt werden, Szene nach unten verschieben */
.hero.results .scene {
  transform: translateX(-50%) translateY(6%);
}

/* Gemeinsame Styles für alle Bilder in der Szene */
.scene img {
  position: absolute;
  user-select: none;                   /* Bilder nicht markierbar */
  pointer-events: none;                /* Keine Maus-Interaktion */
  filter:
    drop-shadow(0 28px 44px rgba(0,40,80,.28))
    drop-shadow(0 10px 18px rgba(0,0,0,.14));
}

/* Linke Insel (Kopenhagen) */
.island--left {
  width: var(--left-w);
  left: var(--left-left);
  bottom: var(--left-bottom);
  transform: rotate(-2deg);            /* Leicht nach links geneigt */
  transform-origin: left bottom;
  z-index: 1;
}

/* Rechte Insel (Malmö) */
.island--right {
  width: var(--right-w);
  right: var(--right-right);
  bottom: var(--right-bottom);
  transform: rotate(2deg);             /* Leicht nach rechts geneigt */
  transform-origin: right bottom;
  z-index: 1;
}

/* Brücke zwischen den Inseln (PNG-Version) */
.bridge {
  width: var(--bridge-w);
  left: 50%;
  bottom: var(--bridge-bottom);
  transform: translateX(var(--bridge-shift)) rotate(0.3deg);
  z-index: 2;                          /* Über den Inseln */
  opacity: 1;
  transition: opacity .3s ease;
  filter:
    drop-shadow(0 24px 36px rgba(0,30,60,.40))
    drop-shadow(0 8px 16px rgba(0,0,0,.18));
}

/* Animierte Brücke (GIF-Version) - liegt deckungsgleich über der PNG */
.bridge-gif {
  position: absolute;
  width: var(--bridge-w);
  left: 50%;
  bottom: var(--bridge-bottom);
  transform: translateX(var(--bridge-shift)) rotate(0.3deg);
  z-index: 3;                          /* Über der PNG-Brücke */
  opacity: 0;                          /* Startet unsichtbar */
  pointer-events: none;
  transition: opacity .3s ease;
}

/* Wenn Ergebnisse gezeigt werden: PNG ausblenden, GIF einblenden */
.hero.results .bridge { 
  opacity: 0; 
}

.hero.results .bridge-gif.show { 
  opacity: 1; 
}

/* Alternative Steuerung für GIF-Anzeige */
.hero.show-gif .bridge { 
  opacity: 1 !important; 
}

.hero.show-gif .bridge-gif { 
  opacity: 1 !important; 
}


/* ========================================
   ERGEBNIS-BADGES & VISUALISIERUNG
   ======================================== */

/* Ergebnis-Badges (zeigen Daten/Zahlen an) */
.result {
  position: absolute;
  display: flex; 
  gap: .5rem; 
  align-items: center;
  padding: .55rem .8rem;
  background: rgba(255,255,255,.95);
  border-radius: 12px;
  font-weight: 800;
  box-shadow: 0 14px 28px rgba(0,0,0,.18);
  opacity: 0;                          /* Startet unsichtbar */
  transform: translateY(8px) scale(.96);
  transition: transform .25s ease, opacity .25s ease;
  z-index: 4;
  pointer-events: none;
}

/* Label innerhalb der Badges */
.result__label { 
  color: #275; 
  opacity: .8; 
  font-size: .9rem; 
}

/* Wert innerhalb der Badges */
.result__value { 
  color: #0a223a; 
  font-size: 1.05rem; 
}

/* Positionen der Badges über den Inseln */
.result--left  { 
  left: 18%; 
  bottom: 44%; 
}

.result--right { 
  right: 18%; 
  bottom: 48%; 
}

/* Badge anzeigen (wird mit JavaScript hinzugefügt) */
.hero.results .result.show { 
  opacity: 1; 
  transform: translateY(0) scale(1); 
}

/* Signatur-Bild (Logo) - erscheint bei Interaktion */
.sign-img {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6vw;
  height: auto;
  opacity: 0;                          /* Startet unsichtbar */
  transition: opacity 0.3s;
  z-index: 10;
}

/* Signatur-Text neben dem Logo */
.sign-text {
  position: absolute;
  top: 10%;
  transform: translateY(-50%);
  font-family: inherit;
  font-weight: 800;
  font-size: clamp(18px, 2vw, 32px);
  color: #fff;
  text-shadow: 0 3px 6px rgba(0,0,0,.30), 0 12px 32px rgba(0,50,120,.35);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 11;
  pointer-events: none;
  white-space: nowrap;
}

.sign-text--left {
  right: 58%;
  text-align: right;
}

.sign-text--right {
  left: 58%;
  text-align: left;
}


/* ========================================
   CHART & VISUALISIERUNG
   ======================================== */

/* Container für Dropdown-Menü (Zeitraum-Auswahl) */
.chart-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 1rem;
  margin: 3rem auto 1.5rem;
  width: min(90vw, 720px);
  max-width: 720px;
}

/* Dropdown-Menü für Zeitraum-Auswahl */
.time-dropdown {
  appearance: none;                    /* Standard-Dropdown-Pfeil entfernen */
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #c8f0d7;
  color: #1a3a2a;
  font-family: inherit;
  font-weight: 700;
  font-size: clamp(14px, 1.8vw, 18px);
  padding: 0.75rem 2.5rem 0.75rem 1.2rem;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.12), 0 1px 0 rgba(255,255,255,.5) inset;
  transition: all 0.2s ease;
  /* Eigener Pfeil als SVG */
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L6 6L11 1" stroke="%231a3a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
  min-width: 200px;
  text-align: left;
}

/* Styling der Dropdown-Optionen */
.time-dropdown option {
  background: #c8f0d7;
  color: #ffffff;
  font-weight: 600;
  padding: 1rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.time-dropdown option:first-child {
  color: #1a3a2a;
}

/* Dropdown Hover-Effekt */
.time-dropdown:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.16), 0 1px 0 rgba(255,255,255,.5) inset;
  filter: brightness(0.97);
}

/* Dropdown Klick-Effekt */
.time-dropdown:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(0,0,0,.10), 0 1px 0 rgba(255,255,255,.5) inset;
}

/* Dropdown Fokus-Zustand */
.time-dropdown:focus {
  outline: 2px solid rgba(0,0,0,.25);
  outline-offset: 2px;
}

/* Chart-Container (für Chart.js) */
#rateChart {
  display: block;
  margin: 0 auto 4rem;
  width: min(90vw, 720px);
  max-width: 720px;
  height: auto;
  max-height: 500px;
  background: #c8f0d7;
  border-radius: 24px;
  padding: 1.5rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  color: #ffffff !important;
}

/* Chart.js Legende vertikal anordnen */
#rateChart + * .legend,
canvas ~ .legend {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

/* Legende-Text weiß färben */
.chartjs-legend,
.chartjs-legend-item,
.chartjs-legend-item span {
  color: #ffffff !important;
}


/* ========================================
   FOOTER
   ======================================== */

.footer {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);         /* Glasmorphism-Effekt */
  color: #0a223a;
  text-align: center;
  padding: 2rem 1rem;
  margin-top: 4rem;
  font-size: 0.95rem;
  font-weight: 500;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.footer p {
  margin: 0;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}


/* ========================================
   MOBILE MEDIA QUERIES
   ======================================== */

/* Tablets und kleinere Laptops (bis 768px) */
@media (max-width: 768px) {
  :root {
    /* Linke Insel größer und näher an Brücke */
    --left-w: 145% !important;
    --left-left: -26% !important;
    --left-bottom: -10% !important;

    /* Rechte Insel größer und weiter nach rechts */
    --right-w: 150% !important;
    --right-right: -42% !important;
    --right-bottom: 2% !important;

    /* Brücke anpassen */
    --bridge-w: 70% !important;
    --bridge-bottom: 8% !important;
    --bridge-shift: -30% !important;
  }
}

/* Smartphones (bis 640px) */
@media (max-width: 640px) {
  :root {
    --scene-ratio: 16/10;
    --left-w: 115%;
    --left-left: -25%;
    --left-bottom: -8%;
    --right-w: 118%;
    --right-right: -30%;
    --right-bottom: -8%;
    --bridge-w: 72%;
    --bridge-bottom: 5%;
    --bridge-shift: -38%;
  }

  /* Schatten auf Handy reduzieren (Performance) */
  .scene img {
    filter:
      drop-shadow(0 18px 28px rgba(0,40,80,.22))
      drop-shadow(0 6px 12px rgba(0,0,0,.12));
  }

  .bridge {
    filter:
      drop-shadow(0 18px 26px rgba(0,30,60,.30))
      drop-shadow(0 6px 12px rgba(0,0,0,.16));
  }

  /* Chart-Controls anpassen */
  .chart-controls {
    width: 95vw;
    margin: 2rem auto 1rem;
  }

  .time-dropdown {
    font-size: clamp(13px, 3.5vw, 16px);
    padding: 0.7rem 2.2rem 0.7rem 1rem;
    min-width: 180px;
    width: 100%;
    max-width: 280px;
  }

  #rateChart {
    width: 95vw;
    max-height: 400px;
    margin-bottom: 3rem;
  }

  .hero {
    padding-bottom: 3rem;
  }
}

/* Kleine Smartphones (bis 480px) */
@media (max-width: 480px) {
  :root {
    --hero-h: 105svh;
    --scene-ratio: 16/11;
    --left-w: 82%;
    --left-left: -18%;
    --left-bottom: -4%;
    --right-w: 84%;
    --right-right: -20%;
    --right-bottom: -4%;
    --bridge-w: 62%;
    --bridge-bottom: 6%;
    --bridge-shift: -36%;
  }

  .hero {
    grid-template-rows: auto auto 1fr;
    padding-top: clamp(18px, 5vh, 40px);
  }

  .hero__title {
    font-size: clamp(32px, 9vw, 54px);
    line-height: 1.05;
    margin-inline: 10px;
  }

  .hero__toggle {
    gap: clamp(14px, 4vw, 22px);
    margin-top: clamp(10px, 2.5vh, 18px);
  }

  /* Touch-Zielgröße mindestens 44px (Apple/Material Guideline) */
  .pill {
    padding: 0.9rem 1.15rem;
    font-size: clamp(16px, 4.2vw, 18px);
    border-radius: 14px;
    min-height: 44px;
    letter-spacing: .2px;
  }

  .scene { 
    margin-top: clamp(8px, 2.4vh, 16px); 
  }

  /* Ergebnisse weniger weit nach unten schieben */
  .hero.results .scene {
    transform: translateX(-50%) translateY(4%);
  }

  /* Signatur-Elemente größer auf Handy */
  .sign-img { 
    width: 10vw; 
    min-width: 48px; 
  }

  .sign-text {
    font-size: clamp(16px, 4.4vw, 20px);
  }
}

/* Sehr kleine Geräte (bis 360px, z.B. iPhone SE) */
@media (max-width: 360px) {
  :root {
    --scene-ratio: 16/12;
    --bridge-w: 60%;
    --bridge-bottom: 7%;
    --bridge-shift: -37%;
  }

  /* Buttons vertikal stapeln wenn zu eng */
  .hero__toggle {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: min(92vw, 420px);
  }

  .hero__toggle .pill {
    width: 100%;
    text-align: center;
  }

  .hero__title { 
    font-size: clamp(28px, 9.8vw, 44px); 
  }
}