/* =========================================================
   GRUNDLAGEN
   ========================================================= */
html, body { margin: 0; height: 100%; }

body{
  overflow-y: scroll;
  overflow-x: hidden;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: #0b0f16;
  color: #f3f6ff;
}

/* =========================================================
   FULLPAGE CANVAS HINTERGRUND
   ========================================================= */
#starsBG{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* =========================================================
   CONTENT-EBENE
   ========================================================= */
.page{
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}

/* Sprachumschaltung (nur funktional) */
.langbar{
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}
.langbtn{
  display: inline-flex;
  align-items: center;
  gap: 6px;

  /* damit der Button sichtbar/klickbar bleibt */
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;

  /* verhindert "zusammenschrumpfen" */
  min-height: 28px;
}

.langbtn img{
  width: 19px;
  height: 11px;
  min-width: 19px;
  min-height: 11px;
  flex-shrink: 0;
  display: block;
}
/**
.img2{
  width: 28px;
  height: 30px;
  min-width: 28px;
  min-height: 30px;
  flex-shrink: 0;
  display: block;
}**/


.langbtn span{
  line-height: 1;
}
.langbtn img,
.langbtn span {
  pointer-events: none;
}
.langbtn, .navlink {
  color: inherit;
}

.navlink {
  text-decoration: none;
}
.langbtn img, .langbtn span { pointer-events: none; }


/**
.langbtn{
  border: 1px solid rgba(255,215,0,0.55);
  background: transparent;
  color: rgba(255,215,0,0.95);
  padding: 6px 10px;
  border-radius: 10px;
  cursor: pointer;
}**/
/* Link in der oberen Leiste (Navigation) */
.navlink{
  margin-left: auto;
  text-decoration: none;
  border: 1px solid rgba(255,215,0,0.55);
  color: rgba(255,215,0,0.95);
  padding: 6px 10px;
  border-radius: 10px;
}
.navlink:hover{
  opacity: 0.9;
}


/* =========================================================
   LAYOUT: 1 / 2 / 1 / 3 / 2 / 1
   ========================================================= */
.layout{
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.row{
  display: grid;
  gap: 14px;
}
.cols-2{ grid-template-columns: repeat(2, 1fr); }
.cols-3{ grid-template-columns: repeat(3, 1fr); }

/* Mobil: alles untereinander */
@media (max-width: 820px){
  .cols-2, .cols-3{ grid-template-columns: 1fr; }
}

/* =========================================================
   BLOCKS: transparent (nur Rahmen)
   ========================================================= */
.block{
  background: transparent;
  /*border: 1px solid rgba(255,255,255,0.25);*/
	border: none;
  border-radius: 10px;
  padding: 14px;
}

/* =========================================================
   TEXT: wie <br> + Einzug
   ========================================================= */
.line{ margin: 0; }
.indent{ padding-left: 2em; }
.title{ font-weight: 650; margin-bottom: 0.5em; }
.muted{ opacity: 0.8; }
.head1{ 
	text-align: center;
	font-size: 30px;
	font-weight: 900;
	color: #FF6600;
	margin-bottom: 0.5em;
}
/* Titel mit Icon */
.title.i18n-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;               /* sauberer Abstand statt Text-Hacks */
}

/* Flag-Icon */
.i18n-icon img{
  width: var(--icon-w, 19px);   /* Default */
  height: var(--icon-h, 11px);  /* Default */
  min-width: var(--icon-w, 19px);
  min-height: var(--icon-h, 11px);
  flex-shrink:0;
  display:block;
  object-fit:contain;

/*.title.i18n-icon img {
  width: 19px;
  height: 11px;
  min-width: 19px;        /* verhindert 0px-Collapse */
  /*min-height: 11px;
  display: inline-block;
  flex-shrink: 0;         /* EXTREM wichtig */
  /*object-fit: contain;*/
}


/**
.title.i18n-icon{
  display: flex;
  align-items: center;
  gap: 8px;
}
.title.i18n-icon img{
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  display: block;
}**/


/* =========================================================
   WOLKEN-TOOLTIP (optisch wolkiger)
   - Pointer Events aktiv, damit Maus "in" der Wolke sein kann
   - Hintergrund opak => Text darunter ist NUR dort "weg"
   ========================================================= */
.cloud-tip{
  position: fixed;
  z-index: 9999;
  pointer-events: auto;            /* wichtig für "hover to pin" */
  opacity: 0;
  transform: translate(-50%, -110%);
  transition: opacity .12s ease, transform .12s ease;
}

.cloud-tip.is-on{
  opacity: 1;
  transform: translate(-50%, -120%);
}

/* Wolkenkörper */
.cloud-tip__inner{
  position: relative;
  padding: 12px 14px;
  max-width: 320px;

  /* Mehrzeilig: Zeilenumbrüche aus Text anzeigen */
  white-space: pre-line;

  color: rgba(255,215,0,0.98);
  font-size: 13px;
  line-height: 1.35;

  background: rgba(11, 15, 22, 0.96);
  border: 1px solid rgba(255,215,0,0.65);
  border-radius: 28px;

  /* Weicher, wolkiger Eindruck */
  filter: drop-shadow(0 14px 28px rgba(0,0,0,0.35));
}

/* "Puffs" (mehrere Wolken-Bubbles) */
.cloud-tip__inner::before,
.cloud-tip__inner::after{
  content:"";
  position:absolute;
  background: rgba(11, 15, 22, 0.96);
  border: 1px solid rgba(255,215,0,0.55);
  border-radius: 999px;
}

/* Puff 1 */
.cloud-tip__inner::before{
  width: 22px; height: 22px;
  left: 16px; top: -14px;
}

/* Puff 2 */
.cloud-tip__inner::after{
  width: 34px; height: 34px;
  left: 44px; top: -22px;
}

/* Puff 3 + Puff 4 als separate "Kinder" via shadow-trick */
.cloud-tip__text{
  position: relative;
	white-space: pre-line;
}

/* Zusätzliche Puffs über box-shadow auf einem unsichtbaren Punkt */
.cloud-tip__text::before{
  content:"";
  position:absolute;
  left: 78px;
  top: -26px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: rgba(11, 15, 22, 0.96);
  border: 1px solid rgba(255,215,0,0.5);
  box-shadow:
    22px 6px 0 0 rgba(11,15,22,0.96),
    22px 6px 0 1px rgba(255,215,0,0.5),
    44px 14px 0 0 rgba(11,15,22,0.96),
    44px 14px 0 1px rgba(255,215,0,0.5);
}

/* Tail zur Linie */
.cloud-tip::after{
  content:"";
  position:absolute;
  left: 50%;
  bottom: 10px;
  width: 10px; height: 10px;
  transform: translateX(-50%) rotate(45deg);
  background: rgba(11, 15, 22, 0.96);
  border-left: 1px solid rgba(255,215,0,0.55);
  border-bottom: 1px solid rgba(255,215,0,0.55);
}

/* =========================================================
   DIAG-TREPPE mit festen Kartenbreiten + Überlappung
   Ziel:
   - Karten haben fixe Breite (z.B. 250px)
   - X-Position pro Zeile "Spalte n"
   - Wenn Container schmaler wird, wird der Schritt (Abstand) kleiner
     => Karten überlappen sich, Treppe bleibt sichtbar
   ========================================================= */

.diag-stair{
  /* Einstellbar */
  --cardW: 400px;       /* feste Kartenbreite */
  --gapY: 30px;         /* Abstand zwischen Reihen */
  --cols: 4;            /* Default Spaltenanzahl (kann JS aus data-cols überschreiben) */

  position: relative;
  width: 100%;
  /* Höhe ergibt sich durch Inhalte; wir stapeln in Y normal */
  display: flex;
  flex-direction: column;
  gap: var(--gapY);

  /* optional: damit nichts horizontalen Scroll zwingt */
  overflow: visible;
}

/* Karte: ohne Rand */
.diag-card{
  width: var(--cardW);
  border: none;
  background: transparent;
  padding: 0;

  /* Die X-Position: (Spalte-1) * Schrittweite */
  /* Schrittweite ist eine CSS Variable (--step), die JS setzt */
  transform: translateX(calc((var(--col) - 1) * var(--step)));

  /* optional: ein bisschen Tiefe, aber ohne Border */
  /* box-shadow: 0 10px 20px rgba(0,0,0,0.18); */
}

/* Mobile: ab sehr schmal -> alles untereinander ohne X-Versatz */
@media (max-width: 520px){
  .diag-card{
    width: 100%;
    transform: none;
  }
}

.hydro-stage { width: 100%; }
.hydro-stage .hydro-img{
  max-width: 100%;
  height: auto;
  display: block;
}