/*  future.css  */


/* =====================================================================
   ======================== Grundfarben ==============================
   ===================================================================== */

/* ======== Zukunft: accent farben ======== */
/* türkise akzente für futuristische sci fi atmosphäre */
body[data-epoche="zukunft"] {
    --accent: #6ef5ff;
    --pager-accent: #6ef5ff;
    --pager-accent-soft: color-mix(in srgb, #6ef5ff 35%, transparent);
}


/* =====================================================================
   ========================= Live Translate =========================
   ===================================================================== */

/* ======== Live translate wrapper ======== (Quelle: https://cruip.com/making-a-text-scramble-animation-with-javascript/) */
/* container für scramble animation mit zwei übereinanderliegenden spans */
.lt {
    position: relative;
    display: inline-block;
    max-width: 100%;
    line-height: 1.35;
    contain: layout paint;
}

.lt__final, 
.lt__anim {
    display: block;
    white-space: pre-wrap;
    font: inherit;
    letter-spacing: inherit;
}

/* ======== Finaler text ======== */
/* versteckt bis animation fertig -> wird dann sichtbar gemacht */
.lt__final {
    visibility: hidden;
}

/* ======== Animierter scramble text ======== */
/* absolut positioniert über finalText, zeigt glyphen animation */
.lt__anim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    transform: translateZ(0);
    text-rendering: geometricPrecision;
}


/* =====================================================================
   =========================== ZUKUNFT ===============================
   ===================================================================== */

/* ======== Zukunft: hintergrund + schrift ======== */
/* Space Grotesk font + cyan/türkis töne für futuristische sci fi atmosphäre */
.epoche-zukunft {
    --epoch-bg:
        linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0.35) 35%, rgba(0,0,0,0.5)),
        url('../pics/Zukunft.webp');
    background-image:
        linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0.35) 35%, rgba(0,0,0,0.5)),
        url('../pics/Zukunft.webp');
    --epoch-card-bg: rgba(4, 26, 38, 0.7);
    --epoch-card-border: rgba(110, 245, 255, 0.45);
    --epoch-text: #a8f6ff;
    --epoch-subtext: #8ed0df;
    --future-surface: rgba(4, 21, 30, 0.8);
    --future-border: rgba(110, 245, 255, 0.35);
    --future-glow: 0 18px 50px rgba(7, 162, 203, 0.35);
    --future-muted: rgba(232, 247, 255, 0.72);
    padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(10rem, 20vw, 18rem);
    align-items: flex-start;
}

/* ======== Stage container override ======== */
/* entfernt horizontales padding für perfekte zentrierung */
.epoche-zukunft .epoche-stage {
    padding-left: 0; /* kein horizontales padding */
    padding-right: 0; /* seitliches padding wird in .epoche-content gehandhabt */
}

/* ======== Titel + subtitle ======== */
/* Space Grotesk font für moderne, cleane typografie */
.epoche-zukunft .epoche-title,
.epoche-zukunft .epoche-subtitle {
    font-family: 'Space Grotesk', sans-serif;
    color: var(--epoch-text);
    text-align: center;
}

/* ======== Content container ======== */
/* kein glaseffekt (transparent), nur grid layout */
.epoche-zukunft .epoche-content {
    width: 100%; /* volle verfügbare breite */
    max-width: 1100px; /* max-breite für große screens, zentriert via margin:auto */
    margin: 0 auto; /* horizontal zentrieren */
    padding: clamp(2.5rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.75rem);
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

/* ======== Future hero sektion ======== */
/* zentrierter hero bereich mit heading + lead text */
.future-hero {
    text-align: center; /* text horizontal zentrieren */
    margin: 0 auto; /* container horizontal zentrieren */
    max-width: 900px; /* maximale breite für lesbarkeit */
}

/* ======== Future überschrift ======== */
/* responsive skalierung für überschriften */
.future-heading {
    font-size: clamp(2rem, 4vw, 2.8rem);
    margin: 0;
    text-align: center;
}

/* ======== Future beschreibung ======== */
/* gedimmter intro text mit max width für lesbarkeit */
.future-lead {
    margin: 0 auto;
    color: var(--future-muted);
    font-size: 1.05rem;
    max-width: 60ch;
    text-align: center; /* text zentrieren */
}


/* =====================================================================
   ======================== Orbit (Zukunft) =========================
   ===================================================================== */

/* ======== Orbit container ======== (Quelle: https://css-tricks.com/how-to-make-an-unobtrusive-scroll-indicator/, https://developer.mozilla.org/de/docs/Web/CSS/transform-function/rotate)
   Kreisförmiges Layout für Zukunfts-Stopps, inspiriert von Planeten im Orbit.

   Design-Konzept:
   - Orbit Items (Stopps) werden im Kreis angeordnet via CSS transform: rotate() + translateX()
   - Jedes Item hat eigenen --orbit-angle CSS Variable (siehe Zeile ~631)
   - --orbit-radius bestimmt Abstand vom Zentrum (responsive via clamp)
   - Rotation Animation via @keyframes orbit-spin (siehe Zeile ~672)

   Technische Umsetzung:
   - position: relative -> ermöglicht absolute Positionierung der Items
   - overflow: visible -> erlaubt Tooltips außerhalb Container
   - width/padding responsive via min() und clamp() für alle Screen-Größen

   Anpassung für Website:
   - Original CSS-Tricks Code nutzte fixed positioning
   - Angepasst auf relative + absolute für scroll-kompatibilität
   - Radius clamp() für mobile optimization (120px-210px range)
   - Padding hinzugefügt für Platz unter Kreis (mobile tooltips) */
.future-orbit{
  width:min(920px,94vw); /* max 920px, auf kleinen screens 94% viewport width */
  margin: 22px auto 0; /* zentriert, 22px top margin für abstand zu hero */
  padding: 8px 0 24px; /* platz oben/unten (24px unten für mobile tooltips) */
  overflow: visible; /* tooltips dürfen über container hinausragen */
  position: relative; /* referenzpunkt für absolute positionierte orbit items */
  --orbit-radius: clamp(120px, 18vw, 210px); /* radius des kreises: 120px (mobile) bis 210px (desktop) */
}

/* ======== Orbit tooltip ======== */
/* tooltip mit glas + glow für hover/focus auf orbit items */
.orbit-preview-tip{
  z-index: 9999;
  max-width: min(360px, calc(100vw - 24px));
  animation: none;
  padding: 0.5rem 0.75rem;
  border-radius: 18px;
  background: color-mix(in srgb, rgba(6,12,18,0.18) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, rgba(255,255,255,0.2));
  backdrop-filter: blur(10px);
  color: rgba(220, 255, 255, 0.96);
  text-shadow: 0 0 12px rgba(110,245,255,0.35);
  box-shadow: 0 10px 22px rgba(0,0,0,0.25), 0 0 16px color-mix(in srgb, var(--accent) 25%, transparent);
}


/* =====================================================================
   =================== Stopp Modal (Zukunft) ========================
   ===================================================================== */

/* ======== Modal accent ======== */
/* türkiser accent für alle modal komponenten */
#stoppModal[data-epoche="zukunft"]{
  --accent: #6ef5ff;
}

/* ======== Modal dialog ======== */
/* kleinere max width für kompaktes kreisförmiges modal */
#stoppModal[data-epoche="zukunft"] .modal-dialog{
  max-width: min(660px, 92vw);
  width: min(660px, 92vw);
}

/* ======== Modal content ======== (Quelle: https://getbootstrap.com/docs/5.0/components/modal/) */
/* kreisförmiges modal (aspect ratio 1:1, border radius 50%) statt rechteckig */
#stoppModal[data-epoche="zukunft"] .modal-content{
  text-align: center;
  display: flex;
  flex-direction: column;
  position: relative;

  aspect-ratio: 1 / 1;
  border-radius: 50%; /* kreisförmig */
  border: 1px solid color-mix(in srgb, var(--accent) 45%, rgba(255,255,255,0.15));
  box-shadow: 0 18px 46px rgba(0,0,0,0.55), 0 0 28px color-mix(in srgb, var(--accent) 35%, transparent);

  overflow: hidden;
  font-family: 'Space Grotesk', sans-serif;
}

/* ======== Modal header verstecken ======== */
/* kein header im kreisförmigen modal (buttons im footer) */
#stoppModal[data-epoche="zukunft"] .modal-header{
  display: none !important;
}

/* ======== Modal body ======== */
/* bild als hintergrund, text darüber (absolut positioniert) */
#stoppModal[data-epoche="zukunft"] .modal-body{
  flex: 1;
  padding: 0;
  overflow: hidden;
  position: relative;
}

#stoppModal[data-epoche="zukunft"] .modal-body > .d-flex{
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

/* ======== Modal bild ======== */
/* fullsize hintergrund bild mit object fit cover */
#stoppModal[data-epoche="zukunft"] #stoppModalImg{
  width: 100%;
  height: 100%;
  border-radius: 0;
  border: 0;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

/* ======== Modal text container ======== */
/* absolut positioniert über bild, untere hälfte, mit blur backdrop */
#stoppModal[data-epoche="zukunft"] .modal-body .flex-grow-1{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: 0.9rem 1.2rem 1.4rem;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 50%;
  background: transparent;
  backdrop-filter: blur(6px);
}

/* ======== Modal text elemente ======== */
/* zentriert mit max width für lesbarkeit im kreisförmigen layout */
#stoppModal[data-epoche="zukunft"] #stoppModalMeta,
#stoppModal[data-epoche="zukunft"] #stoppModalTitle,
#stoppModal[data-epoche="zukunft"] #stoppModalTeaser{
  text-align: center;
  max-width: min(70%, 32ch);
  margin-left: auto;
  margin-right: auto;
}

#stoppModal[data-epoche="zukunft"] .stopp-hints{
  text-align: center;
  padding-left: 0;
  list-style: none;
  margin: 0.45rem 0 0;
  max-width: min(70%, 34ch);
  margin-left: auto;
  margin-right: auto;
}

/* ======== Modal footer ======== */
/* absolut zentriert am unteren rand, zwei kreisförmige buttons (route + close) */
#stoppModal[data-epoche="zukunft"] .modal-footer{
  position: absolute;
  left: 50%;
  right: auto;
  bottom: 12px;
  transform: translateX(-50%);
  width: min(200px, 46%);
  --future-btn-size: 44px;
  --future-icon-size: 18px;
  --future-icon-stroke: 2px;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.45rem;
  padding: 8px 0.8rem;
  border: 0;
  background: transparent;
  backdrop-filter: none;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* ======== Footer buttons basis ======== */
/* kreisförmige buttons mit blur backdrop + intensivem glow */
#stoppModal[data-epoche="zukunft"] .modal-footer :is(#stoppModalAction, .modal-close-future){
  display: grid;
  place-items: center;
  position: relative;
  margin: 0;
  width: var(--future-btn-size);
  height: var(--future-btn-size);
  padding: 0;
  border-radius: 999px;
  line-height: 1;
  background: transparent;
  backdrop-filter: blur(10px);
  opacity: 1;
  border: 1px solid color-mix(in srgb, var(--accent) 70%, rgba(255,255,255,0.3));
  color: #eafcff;
  text-shadow: 0 0 16px rgba(110,245,255,0.6), 0 0 28px rgba(110,245,255,0.35);
  box-shadow: 0 0 30px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 46px color-mix(in srgb, var(--accent) 35%, transparent);
  filter: drop-shadow(0 0 16px rgba(110,245,255,0.55));
  appearance: none;
  -webkit-appearance: none;
  background-image: none;
}

/* ======== Route action button ======== */
/* text verstecken (nur icon via ::before/::after) */
#stoppModal[data-epoche="zukunft"] .modal-footer #stoppModalAction{
  letter-spacing: 0.02em;
  min-width: 0;
  padding: 0;
  color: transparent;
  text-shadow: none;
}

#stoppModal[data-epoche="zukunft"] .modal-footer .modal-close-future{
  background-image: none;
}

/* ======== Route action icon: plus ======== */
/* plus icon aus zwei weißen balken (horizontal + vertikal) */
#stoppModal[data-epoche="zukunft"] .modal-footer #stoppModalAction::before,
#stoppModal[data-epoche="zukunft"] .modal-footer #stoppModalAction::after{
  content: "";
  position: absolute;
  width: var(--future-icon-size);
  height: var(--future-icon-stroke);
  border-radius: 999px;
  background: rgba(232, 252, 255, 0.95);
  box-shadow: 0 0 12px rgba(110,245,255,0.6), 0 0 22px rgba(110,245,255,0.35);
}

#stoppModal[data-epoche="zukunft"] .modal-footer #stoppModalAction::after{
  transform: rotate(90deg);
}

/* ======== Route action icon: minus ======== */
/* nur horizontaler balken wenn data-route-state="remove" */
#stoppModal[data-epoche="zukunft"] .modal-footer #stoppModalAction[data-route-state="remove"]::after{
  display: none;
}

/* ======== Close button icon: X ======== */
/* X icon aus zwei weißen balken (45° + -45°) */
#stoppModal[data-epoche="zukunft"] .modal-footer .modal-close-future::before,
#stoppModal[data-epoche="zukunft"] .modal-footer .modal-close-future::after{
  content: "";
  position: absolute;
  width: var(--future-icon-size);
  height: var(--future-icon-stroke);
  border-radius: 999px;
  background: rgba(232, 252, 255, 0.95);
  box-shadow: 0 0 12px rgba(110,245,255,0.6), 0 0 22px rgba(110,245,255,0.35);
}

#stoppModal[data-epoche="zukunft"] .modal-footer .modal-close-future::before{
  transform: rotate(45deg);
}

#stoppModal[data-epoche="zukunft"] .modal-footer .modal-close-future::after{
  transform: rotate(-45deg);
}

/* ======== Button hover + focus ======== */
/* verstärkter glow für feedback */
#stoppModal[data-epoche="zukunft"] .modal-footer :is(#stoppModalAction, .modal-close-future):hover,
#stoppModal[data-epoche="zukunft"] .modal-footer :is(#stoppModalAction, .modal-close-future):focus-visible{
  box-shadow: 0 0 28px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 40px color-mix(in srgb, var(--accent) 38%, transparent);
  border-color: color-mix(in srgb, var(--accent) 85%, rgba(255,255,255,0.25));
}

/* =====================================================================
   =============== Future Modal Mobile Responsive ====================
   ===================================================================== */

/* ======== Future modal auf smartphone ======== (Quelle: https://getbootstrap.com/docs/5.3/components/modal/) */
/* rechteckiges modal statt kreis, behält desktop layout (bild füllt aus, text von mitte bis unten) -> mehr platz für inhalt */
@media (max-width: 560px) {
  /* modal rechteckig statt kreisförmig, höher für mehr inhalt */
  #stoppModal[data-epoche="zukunft"] .modal-content {
    aspect-ratio: auto; /* kein 1:1 */
    border-radius: var(--radius-xl, 18px); /* statt 50% */
    min-height: 78dvh; /* höher für mehr inhalt */
    max-height: 94dvh; /* dvh für mobile adressleiste */
  }

  /* header versteckt (buttons im footer wie desktop) */
  #stoppModal[data-epoche="zukunft"] .modal-header {
    display: none !important;
  }

  /* modal body behält desktop layout (bild absolut, text darüber) */
  #stoppModal[data-epoche="zukunft"] .modal-body {
    position: relative;
    min-height: 78dvh; /* matcht modal content min height */
    overflow: hidden; /* verhindert overflow durch absolut positionierte elemente */
  }

  /* flex container für bild + text */
  #stoppModal[data-epoche="zukunft"] .modal-body > .d-flex {
    height: 100%;
    min-height: 78dvh; /* matcht modal body */
    position: relative;
  }

  /* bild füllt modal body komplett aus (wie desktop) */
  #stoppModal[data-epoche="zukunft"] #stoppModalImg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: var(--radius-xl, 18px) !important;
    z-index: 1;
  }

  /* text container: von 30% bis buttons höhe, über bild gelayert */
  #stoppModal[data-epoche="zukunft"] .modal-body .flex-grow-1 {
    position: absolute !important;
    top: 30% !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 70px !important; /* platz für footer buttons (44px button + 16px bottom + 10px abstand) */
    transform: none !important; /* kein translateY, text soll oben bei 30% starten */
    padding: 1.2rem 1.5rem 2rem !important; /* extra padding bottom für lesbarkeit */
    width: 100%;
    z-index: 2; /* über bild */
    overflow-y: auto; /* scroll falls text zu lang */
    background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.85) 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  /* font größen für mobile (ca. 20% größer als vorher) */
  #stoppModal[data-epoche="zukunft"] #stoppModalMeta {
    font-size: 0.96rem; /* war 0.8rem */
  }

  #stoppModal[data-epoche="zukunft"] #stoppModalTitle {
    font-size: 1.26rem; /* war 1.05rem */
  }

  #stoppModal[data-epoche="zukunft"] #stoppModalTeaser,
  #stoppModal[data-epoche="zukunft"] .stopp-hints {
    font-size: 1.05rem; /* war 0.88rem */
  }

  /* footer bleibt am unteren rand */
  #stoppModal[data-epoche="zukunft"] .modal-footer {
    bottom: 16px; /* etwas mehr abstand für mobile */
    z-index: 3; /* über text und bild */
  }
}

/* ======== Extra kleine screens ======== */
@media (max-width: 380px) {
  #stoppModal[data-epoche="zukunft"] .modal-body .flex-grow-1 {
    padding: 1rem 1.2rem 1.3rem !important;
  }

  #stoppModal[data-epoche="zukunft"] #stoppModalMeta {
    font-size: 0.9rem; /* war 0.75rem */
  }

  #stoppModal[data-epoche="zukunft"] #stoppModalTitle {
    font-size: 1.14rem; /* war 0.95rem */
  }

  #stoppModal[data-epoche="zukunft"] #stoppModalTeaser,
  #stoppModal[data-epoche="zukunft"] .stopp-hints {
    font-size: 0.98rem; /* war 0.82rem */
  }
}


/* =====================================================================
   ====================== Orbit Bühne ===============================
   ===================================================================== */

/* ======== Orbit stage ======== (Quelle: https://developer.mozilla.org/de/docs/Web/CSS/transform-origin)
   Zentrale Bühne für Orbit Items - dieser Container rotiert via animation (siehe .is-rotating class).

   Technische Details:
   - position: relative -> ermöglicht absolute positionierte Items
   - transform-origin: center -> Rotationsachse in der Mitte (siehe Zeile ~679)
   - height clamp(320px, 42vh, 520px) -> anpassung an viewport höhe
   - overflow: visible -> items und tooltips dürfen außerhalb sichtbar sein

   Rotation-Mechanismus:
   - bei .is-rotating class wird @keyframes orbit-spin animation angewendet (50s für 360°)
   - Items rotieren MIT der stage, werden aber via counter-rotation visuell gerade gehalten
   - auf mobile wird animation via media query deaktiviert (bessere usability) */
.future-orbit .orbit-stage{
  position: relative; /* referenzpunkt für absolute items */
  width: min(760px, 92vw); /* max 760px, responsive auf 92vw */
  height: clamp(320px, 42vh, 520px); /* höhe basiert auf viewport: 320px-520px range, ideal 42vh */
  margin: 0 auto; /* horizontal zentriert */
  overflow: visible; /* items können über stage hinausragen */
}

/* ======== Orbit item ======== (Quelle: https://css-tricks.com/css-translate-rotate-for-rotating-things/, https://stackoverflow.com/questions/12813573/position-icons-into-circle)
   Einzelner Stopp-Button im Orbit-Kreis.

   Transform-Mathematik (4-Schritt-Prozess):
   1. translate(-50%, -50%) -> Item Mittelpunkt nach stage center verschieben
   2. rotate(var(--orbit-angle)) -> um stage center rotieren (-90deg für top position)
   3. translateX(var(--orbit-radius)) -> entlang rotierter X-Achse nach außen schieben
   4. rotate(calc(-1 * var(--orbit-angle))) -> counter-rotation damit item selbst gerade bleibt

   Beispiel für --orbit-angle: -90deg:
   - Item startet in stage mitte (step 1)
   - rotiert -90° (zeigt nach oben, step 2)
   - verschiebt sich nach "rechts" entlang rotierter achse = nach oben (step 3)
   - dreht sich +90° zurück, bleibt visuell gerade (step 4)

   Glas-Effekt:
   - backdrop-filter: blur(6px) -> hintergrund durch item verschwommen
   - rgba background + border -> semi-transparent für glaseffekt
   - will-change: transform -> browser optimization für smooth animation

   Anpassung für Website:
   - StackOverflow Code nutzte feste pixel werte
   - Angepasst mit clamp() für responsive sizes (70px-96px)
   - backdrop-filter hinzugefügt für glaseffekt
   - grid + place-items:center für perfekte zentrierung von ring/dot */
.future-orbit .orbit-item{
  position:absolute; /* für transform positioning im orbit */
  width: clamp(70px, 8.5vw, 96px); /* responsive: 70px (mobile) bis 96px (desktop) */
  height: clamp(70px, 8.5vw, 96px); /* quadratisch für perfekten kreis */
  border-radius: 999px; /* komplett rund */
  background: rgba(0,0,0,0.28); /* semi-transparent schwarz */
  border: 1px solid rgba(120,255,255,0.18); /* türkiser rand, leicht transparent */
  cursor: pointer; /* hand cursor für klickbarkeit */
  padding:0; /* kein innen-abstand */
  display:grid; /* für zentrierung von ring + dot */
  place-items:center; /* ring + dot perfekt zentriert */
  backdrop-filter: blur(6px); /* glaseffekt: hintergrund verschwommen */
  top: 50%; /* start position: stage mitte (wird via transform verschoben) */
  left: 50%; /* start position: stage mitte (wird via transform verschoben) */
  transform:
    translate(-50%, -50%)                          /* step 1: item center nach stage center */
    rotate(var(--orbit-angle, 0deg))              /* step 2: um center rotieren (winkel aus css variable) */
    translateX(var(--orbit-radius))               /* step 3: entlang rotierter achse nach außen */
    rotate(calc(-1 * var(--orbit-angle, 0deg))); /* step 4: counter-rotation (item bleibt gerade) */
  will-change: transform; /* browser hint für performance optimization */
}

/* ======== Orbit ring ======== */
/* innerer ring mit glow (visuelles feedback für button) */
.future-orbit .orbit-ring{
  position:absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid rgba(120,255,255,0.55);
  box-shadow: 0 0 18px rgba(120,255,255,0.22);
  pointer-events:none;
}

/* ======== Orbit dot ======== */
/* kleiner zentraler punkt (wie planet kern) */
.future-orbit .orbit-dot{
  width: 16%;
  height: 16%;
  border-radius: 999px;
  background: rgba(120,255,255,0.95);
  box-shadow: 0 0 14px rgba(120,255,255,0.55);
  pointer-events:none;
}

/* ======== Orbit mobile tooltip ======== (Quelle: https://developer.mozilla.org/de/docs/Web/CSS/backdrop-filter) */
/* tooltip-box mit jahr + titel für jedes orbit-item (desktop versteckt, mobile dauerhaft sichtbar) */
.future-orbit .orbit-mobile-tip {
  display: none; /* desktop: versteckt (hover-tooltip via JS aktiv) */
}

/* ======== Item hover + focus ======== */
/* verstärkter border + glow für feedback */
.future-orbit .orbit-item:hover,
.future-orbit .orbit-item:focus-visible{
  border-color: rgba(120,255,255,0.45);
  box-shadow: 0 0 22px rgba(120,255,255,0.18);
  outline: none;
}

/* ======== Orbit winkel ======== */
/* jeder stopp hat eigenen winkel (gleichmäßig verteilt im kreis) */
.future-orbit .orbit-item[data-orbit-id="future-1"]{ --orbit-angle: -90deg; }
.future-orbit .orbit-item[data-orbit-id="future-2"]{ --orbit-angle: -18deg; }
.future-orbit .orbit-item[data-orbit-id="future-3"]{ --orbit-angle:  54deg; }
.future-orbit .orbit-item[data-orbit-id="future-4"]{ --orbit-angle: 126deg; }
.future-orbit .orbit-item[data-orbit-id="future-5"]{ --orbit-angle: 198deg; }


/* =====================================================================
   ======================= Orbit Animation ==========================
   ===================================================================== */

/* ======== Orbit rotation ======== (Quelle: https://developer.mozilla.org/de/docs/Web/CSS/@keyframes, https://css-tricks.com/almanac/properties/a/animation/)
   Kontinuierliche 360° Rotation der Orbit-Stage für dynamischen "Planeten im Orbit" Effekt.

   Animation-Details:
   - @keyframes orbit-spin: dreht stage von 0° bis 360° (eine volle umdrehung)
   - Dauer: 50s -> sehr langsam, subtil, nicht aufdringlich
   - timing: linear -> konstante geschwindigkeit (keine easing)
   - iteration: infinite -> endlos-schleife
   - transform-origin: center -> rotiert um eigene mitte

   Warum funktioniert das ohne dass Items sich drehen?
   - Stage rotiert MIT allen Items (sie drehen mit)
   - ABER: Items haben counter-rotation in ihrem transform (siehe .orbit-item Zeile ~588)
   - Counter-rotation kompensiert stage-rotation -> Items bleiben visuell gerade
   - Effekt: Items bewegen sich im Kreis, aber "schauen" immer nach vorne

   Performance-Optimization:
   - will-change: transform auf .orbit-item (Zeile ~589) -> browser pre-optimization
   - transform statt left/top -> nutzt GPU statt CPU (60fps statt 30fps)
   - linear timing -> kein recalculation von easing curves

   Mobile-Anpassung:
   - animation: none auf mobile via media query (Zeile ~684)
   - Grund: touch-devices profitieren nicht von hover-rotation
   - Bessere usability: statische items = leichter klickbar mit finger

   Anpassung für Website:
   - Original CSS-Tricks Beispiel nutzte 10s rotation (zu schnell, ablenkend)
   - Auf 50s verlangsamt für subtilen, professionellen effekt
   - .is-rotating class ist hart in index.html gesetzt */
@keyframes orbit-spin {
  from { transform: rotate(0deg); }   /* start: 0° (12 uhr position) */
  to   { transform: rotate(360deg); } /* ende: 360° (wieder 12 uhr) -> endlos-schleife */
}

.future-orbit.is-rotating .orbit-stage {
  animation: orbit-spin 50s linear infinite; /* 50s pro umdrehung, linear (konstant), infinite (endlos) */
  transform-origin: center; /* rotiert um eigenen mittelpunkt (nicht um ecke) */
}

/* ======== Mobile: rotation stoppen + tooltip dauerhaft ======== (Quelle: https://developer.mozilla.org/de/docs/Web/CSS/animation) */
/* orbit rotation deaktivieren, tooltip-boxen mit jahr + titel dauerhaft sichtbar */
@media (max-width: 768px), (hover: none) {
  /* rotation stoppen -> items bleiben statisch für bessere klickbarkeit */
  .future-orbit.is-rotating .orbit-stage {
    animation: none; /* überschreibt orbit-spin animation */
  }

  /* orbit items etwas größer für bessere klickbarkeit mit finger */
  .future-orbit .orbit-item {
    width: clamp(75px, 9vw, 95px);
    height: clamp(75px, 9vw, 95px);
  }

  /* hover-tooltip auf mobile verstecken (verhindert doppelt-anzeige bei touch) */
  .orbit-preview-tip {
    display: none !important; /* hover-tooltip komplett ausblenden */
  }

  /* mobile tooltip-boxen dauerhaft anzeigen (nur titel unter jedem orbit-item, ersetzt hover-system) */
  .future-orbit .orbit-mobile-tip {
    display: block; /* sichtbar machen */
    position: absolute; /* relativ zum orbit-item button */
    left: 50%; /* horizontal zentriert */
    top: calc(100% + 0.8rem); /* unter dem button, 0.8rem abstand */
    transform: translateX(-50%); /* zentriert via transform */
    z-index: 10; /* über anderen elementen */
    max-width: min(280px, 80vw); /* responsive breite */
    padding: 0.5rem 0.75rem; /* innerer abstand */
    border-radius: 12px; /* abgerundete ecken */
    background: color-mix(in srgb, rgba(6,12,18,0.18) 70%, transparent); /* dunkler glas */
    border: 1px solid color-mix(in srgb, var(--accent) 55%, rgba(255,255,255,0.2)); /* türkiser rand */
    backdrop-filter: blur(10px); /* blur-effekt für glas */
    -webkit-backdrop-filter: blur(10px); /* safari/iOS support */
    color: rgba(220, 255, 255, 0.96); /* heller türkiser text */
    text-shadow: 0 0 12px rgba(110,245,255,0.35); /* neon glow */
    box-shadow: 0 10px 22px rgba(0,0,0,0.25), 0 0 16px color-mix(in srgb, var(--accent) 25%, transparent); /* schatten + glow */
    font-size: 0.75rem; /* kleinere schrift für mobile */
    white-space: nowrap; /* kein umbruch */
    overflow: hidden; /* überfluss verstecken */
    text-overflow: ellipsis; /* ... bei zu langem text */
    pointer-events: none; /* klicks gehen durch zur orbit-item button */
  }
}

/* ======== Reduced motion ======== (Quelle: https://developer.mozilla.org/de/docs/Web/CSS/@media/prefers-reduced-motion) */
/* respektiert accessibility preference -> keine animation bei prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .future-orbit.is-rotating .orbit-stage { animation: none; }
}