@import url("./fonts.css");

  /* MoonCycle Dashboard v1.2.9
     Alle visuellen Farben stehen als Theme-Tokens in :root. Fuer kuenftige
     Themes nur diese Tokens ueberschreiben (z.B. [data-theme="rose"]).
     Die Mondtextur, Phase und Ausrichtungslogik bleiben zentral unveraendert.
  */
  :root {
    color-scheme: dark;
    /* Drei bewusst getrennte Schriftrollen; keine externen Font-CDNs. */

    /* Szene / Sternenhimmel */
    --sky-base: #040815;
    --sky-gradient-1: #080e20;
    --sky-gradient-2: #050919;
    --sky-gradient-3: #02050f;
    --sky-nebula-1: rgba(48, 65, 123, .21);
    --sky-nebula-2: rgba(22, 44, 91, .28);
    --sky-nebula-3: rgba(31, 39, 86, .10);
    --sky-haze-1: rgba(90, 109, 187, .075);
    --sky-haze-2: rgba(68, 98, 162, .055);
    --star-primary: #e5eeff;
    --star-secondary: #bbd1ff;
    --star-glow: rgba(191, 210, 255, .50);
    --star-bright-core: rgba(235, 242, 255, .72);
    --star-bright-glow: rgba(148, 175, 255, .38);
    --star-flare: rgba(217, 231, 255, .55);
    --star-flare-vertical: rgba(217, 231, 255, .50);

    /* Mond / Mondschein */
    --moon-glow-core: rgba(110, 138, 219, .145);
    --moon-glow-mid: rgba(78, 105, 184, .075);
    --moon-shadow-near: rgba(138, 171, 245, .18);
    --moon-shadow-far: rgba(73, 102, 182, .10);
    --moon-top: clamp(46px, 7vh, 98px);
    --moon-right: clamp(28px, 5.8vw, 105px);
    /* 67% der bisherigen Groesse: 250 -> 167.5, 35vw -> 23.45vw, 475 -> 318.25 */
    --moon-size: clamp(167.5px, 23.45vw, 318.25px);

    /* Schwebende Glas-Navigation (ausschliesslich Smartphones) */
    --nav-edge-gap: 18px;
    --nav-surface-top: rgba(36, 42, 74, .58);
    --nav-surface-bottom: rgba(20, 25, 50, .70);
    --nav-border: rgba(205, 208, 255, .24);
    --nav-highlight: rgba(255, 255, 255, .15);
    --nav-shadow: rgba(0, 0, 0, .37);
    --nav-text: #eef0ff;
    --nav-label: rgba(235, 235, 255, .86);
    --nav-button-top: rgba(20, 26, 52, .92);
    --nav-button-bottom: rgba(7, 12, 30, .94);
    --nav-button-border: rgba(178, 185, 246, .28);
    --nav-button-inner: rgba(161, 180, 255, .14);
    --nav-button-outer: rgba(3, 7, 24, .45);
    --nav-button-frost: rgba(214, 224, 255, .11);
    --nav-button-frost-2: rgba(255, 255, 255, .08);
    --nav-button-haze: rgba(110, 133, 203, .11);
    --nav-plus-top: rgba(63, 62, 113, .96);
    --nav-plus-bottom: rgba(27, 28, 59, .98);
    --nav-plus-border: rgba(233, 210, 255, .56);
    --nav-purple-soft: rgba(204, 147, 255, .35);
    --nav-purple-mid: rgba(200, 124, 255, .68);
    --nav-purple-bright: rgba(252, 190, 255, .98);
    --nav-orbit-dark: rgba(92, 50, 140, .14);
    --nav-orbit-glow: rgba(186, 108, 249, .52);

    /* Mittlere Wolkenebene / Parallax */
    --cloud-band-top: clamp(30vh, 37vh, 42vh);
    --dashboard-rise: -54px;
    --cloud-band-height: clamp(170px, 30vh, 310px);
    --cloud-band-opacity: .98;
    --cloud-scroll-lift: 0px;
    --cloud-morph: 1;
    --moon-scroll-lift: 0px;
    --cloud-far-highlight: rgba(210, 220, 255, .16);
    --cloud-far-core: rgba(129, 143, 215, .17);
    --cloud-far-shadow: rgba(40, 48, 91, .20);
    --cloud-mid-highlight: rgba(233, 198, 255, .20);
    --cloud-mid-core: rgba(132, 136, 216, .24);
    --cloud-mid-shadow: rgba(58, 44, 96, .22);
    --cloud-near-highlight: rgba(210, 194, 255, .24);
    --cloud-near-core: rgba(120, 103, 177, .29);
    --cloud-near-shadow: rgba(45, 34, 74, .30);
    --cloud-mist-top: rgba(220, 202, 255, .11);
    --cloud-mist-mid: rgba(130, 155, 232, .10);
    --cloud-mist-low: rgba(69, 68, 131, .08);

    /* Neon-Pastell Ribbon */
    /* WebGL Stoffwelle: echte 3D-Mesh-Geometrie, ohne externe Bibliotheken */
    --ribbon-top: clamp(26vh, 31vh, 37vh);
    --ribbon-height: clamp(240px, 35vh, 360px);
    --ribbon-left: -4%;
    --ribbon-width: 108%;
    --ribbon-opacity: .99;
    --ribbon-parallax-x: 0px;
    --ribbon-parallax-y: 0px;
    --ribbon-scroll-lift: 0px;
    --ribbon-cloud-couple: 0px;
    --ribbon-pink: #ff72c7;
    --ribbon-rose: #ff9fdc;
    --ribbon-violet: #d7c2ff;
    --ribbon-blue: #dff3ff;
    --ribbon-cyan: #93efff;
    --ribbon-end-glow: #ffd0a2;
    --ribbon-soft-shine: rgba(255, 246, 255, .44);
    --ribbon-edge-core: rgba(255, 250, 253, 1);
    --ribbon-edge-halo: rgba(255, 183, 236, .86);

    /* Glasbuttons, separate Themenwerte */
    --glass-specular-top: rgba(255,255,255,.59);
    --glass-specular-middle: rgba(220,230,255,.16);
    --glass-specular-bottom: rgba(194,207,255,.18);
    --glass-gloss-shade: rgba(9,16,42,.72);
    --glass-reflection: rgba(240,245,255,.36);
    --glass-gloss-outline: rgba(206,220,255,.27);
  }
  *, *::before, *::after { box-sizing: border-box; }
  html, body { width: 100%; min-height: 100%; margin: 0; }
  body { background: var(--sky-base); overflow-x: hidden; }
  .night {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    background:
      radial-gradient(ellipse 65% 53% at 81% 22%, var(--sky-nebula-1), transparent 75%),
      radial-gradient(ellipse 47% 58% at 17% 78%, var(--sky-nebula-2), transparent 75%),
      radial-gradient(ellipse 58% 38% at 47% 46%, var(--sky-nebula-3), transparent 75%),
      linear-gradient(135deg, var(--sky-gradient-1) 0%, var(--sky-gradient-2) 46%, var(--sky-gradient-3) 100%);
  }
  .night::before {
    content: "";
    position: absolute;
    inset: -30% -25%;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(ellipse at 67% 35%, var(--sky-haze-1), transparent 37%),
      radial-gradient(ellipse at 31% 64%, var(--sky-haze-2), transparent 39%);
    filter: blur(40px);
  }
  .starfield { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
  .star {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: var(--star-color, var(--star-primary));
    box-shadow: 0 0 calc(var(--size) * 3) var(--star-glow);
    opacity: var(--base-opacity);
    will-change: opacity;
    animation: twinkle var(--duration) ease-in-out var(--delay) infinite alternate;
  }
  .star.bright {
    box-shadow: 0 0 5px var(--star-bright-core), 0 0 14px var(--star-bright-glow);
  }
  .star.bright::before, .star.bright::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(90deg, transparent, var(--star-flare), transparent);
    border-radius: 100%;
    pointer-events: none;
  }
  .star.bright::before { width: calc(var(--size) * 6); height: 1px; }
  .star.bright::after {
    width: 1px;
    height: calc(var(--size) * 6);
    background: linear-gradient(transparent, var(--star-flare-vertical), transparent);
  }
  @keyframes twinkle {
    0%, 12% { opacity: var(--low-opacity); }
    56% { opacity: var(--peak-opacity); }
    90%, 100% { opacity: var(--base-opacity); }
  }
  .moon-area {
    position: absolute;
    z-index: 5;
    top: calc(var(--moon-top) + var(--moon-scroll-lift));
    right: var(--moon-right);
    width: var(--moon-size);
    height: var(--moon-size);
    pointer-events: none;
  }
  .moon-area::before {
    content: "";
    position: absolute;
    inset: -19%;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, var(--moon-glow-core) 0%, var(--moon-glow-mid) 38%, transparent 69%);
    filter: blur(32px);
  }
  #moonCanvas {
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    display: block;
    position: relative;
    transform-origin: center;
    filter: drop-shadow(0 0 19px var(--moon-shadow-near))
            drop-shadow(0 0 55px var(--moon-shadow-far));
  }


.cloud-belt {
  position: absolute;
  left: -10%;
  top: calc(var(--cloud-band-top) + var(--dashboard-rise));
  width: 120%;
  height: var(--cloud-band-height);
  z-index: 2;
  pointer-events: none;
  opacity: var(--cloud-band-opacity);
  overflow: hidden;
  --parallax-x: 0px;
  --parallax-y: 0px;
}
.cloud-belt::before,
.cloud-belt::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cloud-belt::before {
  background:
    radial-gradient(ellipse at 20% 55%, var(--cloud-mist-top), transparent 44%),
    radial-gradient(ellipse at 53% 48%, var(--cloud-mist-mid), transparent 40%),
    radial-gradient(ellipse at 82% 58%, var(--cloud-mist-low), transparent 42%);
  filter: blur(18px);
}
.cloud-belt::after {
  inset: auto 8% 2% 8%;
  height: 26%;
  background: linear-gradient(180deg, transparent, rgba(10, 15, 40, .06) 22%, rgba(9, 12, 28, .14) 100%);
  filter: blur(12px);
}
.cloud-parallax {
  position: absolute;
  inset: 0;
  will-change: transform;
  transform: translate3d(0,0,0);
}
.cloud-track {
  position: absolute;
  inset: 0;
  width: 145%;
  left: -12%;
  will-change: transform;
}
.cloud-track--far { animation: cloudDriftFar 116s linear infinite; }
.cloud-track--mid { animation: cloudDriftMid 88s linear infinite; }
.cloud-track--near { animation: cloudDriftNear 72s linear infinite; }
.cloud-group {
  position: absolute;
  width: var(--w);
  height: var(--h);
  left: var(--x);
  top: var(--y);
  opacity: var(--alpha, 1);
  filter: blur(var(--blur, .2px));
}
.cloud-glow,
.cloud-base,
.cloud-puff,
.cloud-shadow {
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
}
.cloud-glow {
  inset: auto auto 6% 0;
  width: 100%;
  height: 74%;
  background: radial-gradient(ellipse at 50% 52%, var(--hi) 0%, color-mix(in srgb, var(--hi) 68%, transparent) 24%, transparent 72%);
  filter: blur(18px);
  opacity: .9;
}
.cloud-base {
  left: 2%;
  right: 2%;
  bottom: 0;
  height: 56%;
  background:
    radial-gradient(ellipse at 50% 40%, var(--hi) 0%, var(--core) 38%, color-mix(in srgb, var(--shadow) 82%, transparent) 72%, transparent 86%),
    linear-gradient(180deg, color-mix(in srgb, var(--core) 65%, transparent), color-mix(in srgb, var(--shadow) 90%, transparent));
  filter: blur(6px);
}
.cloud-shadow {
  left: 10%;
  width: 80%;
  bottom: -4%;
  height: 26%;
  background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--shadow) 78%, transparent), transparent 72%);
  filter: blur(16px);
  opacity: .64;
}
.cloud-puff {
  background: radial-gradient(ellipse at 50% 38%, var(--hi) 0%, var(--core) 48%, color-mix(in srgb, var(--core) 45%, transparent) 72%, transparent 82%);
  filter: blur(5px);
}
@keyframes cloudDriftFar {
  from { transform: translateX(-2.5%); }
  50% { transform: translateX(2.5%); }
  to { transform: translateX(-2.5%); }
}
@keyframes cloudDriftMid {
  from { transform: translateX(3.8%); }
  50% { transform: translateX(-3.5%); }
  to { transform: translateX(3.8%); }
}
@keyframes cloudDriftNear {
  from { transform: translateX(-5.6%); }
  50% { transform: translateX(4.6%); }
  to { transform: translateX(-5.6%); }
}


.ribbon-stage {
  position: absolute;
  z-index: 4;
  left: var(--ribbon-left);
  top: calc(var(--ribbon-top) + var(--ribbon-scroll-lift));
  width: var(--ribbon-width);
  height: var(--ribbon-height);
  pointer-events: none;
  overflow: visible;
  opacity: var(--ribbon-opacity);
  transform: translate3d(var(--ribbon-parallax-x), var(--ribbon-parallax-y), 0);
}
.ribbon-webgl {
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
}
/* Wird ausschliesslich eingeblendet, wenn kein WebGL2 verfuegbar ist. */
.ribbon-fallback {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  overflow: visible;
}
.ribbon-stage.is-fallback .ribbon-webgl { display: none; }
.ribbon-stage.is-fallback .ribbon-fallback { display: block; }

  /* Die experimentelle Stoffwelle ist vorerst abgeschaltet.
     Zum bewussten Reaktivieren data-ribbon="enabled" am html-Element setzen.
     Auch die WebGL-Ausfuehrung wird ueber diesen Schalter verhindert. */
  html:not([data-ribbon="enabled"]) .ribbon-stage { display: none !important; }

  /* MoonCycle Statistiken – themenfaehige Glas-Tachometer */
  :root {
    --stats-diameter: clamp(102px, 11vw, 134px);
    --stats-row-width: 560px;
    --stats-bg-top: rgba(33, 40, 79, .85);
    --stats-bg-bottom: rgba(8, 14, 37, .96);
    --stats-border: rgba(184, 199, 250, .21);
    --stats-edge-glow: rgba(146, 160, 239, .24);
    --stats-track: rgba(181, 195, 250, .14);
    --stats-label: rgba(231, 235, 255, .84);
    --stats-number: #fbfaff;
    --stats-arrow: rgba(230, 217, 251, .76);
    --stats-energy: #9ea7ff;
    --stats-energy-glow: rgba(135, 154, 255, .86);
    --stats-rest: #ff71af;
    --stats-rest-glow: rgba(255, 111, 182, .82);
    --stats-flow: #72f0bf;
    --stats-flow-glow: rgba(93, 255, 190, .80);
    --info-box-width: min(calc(100% - 36px), 580px);
    --info-box-height: clamp(94px, 14vh, 138px);
  }
  .stat-dials {
    position: absolute;
    left: 50%;
    top: calc(var(--cloud-band-top) + var(--dashboard-rise) + var(--cloud-band-height) - var(--stats-diameter) * .98 + var(--cloud-scroll-lift));
    z-index: 8;
    width: min(calc(100% - 36px), var(--stats-row-width));
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    justify-items: center;
    gap: clamp(10px, 1.8vw, 24px);
    transform: translateX(-50%);
    pointer-events: none;
  }
  .stat-dial {
    position: relative;
    width: min(100%, var(--stats-diameter));
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--stats-border);
    background:
      radial-gradient(ellipse at 28% 18%, rgba(236,242,255,.18), transparent 35%),
      radial-gradient(circle at 50% 74%, rgba(93,96,175,.16), transparent 56%),
      radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--stat-color) 12%, transparent), transparent 52%),
      linear-gradient(155deg, var(--stats-bg-top) 2%, var(--stats-bg-bottom) 78%);
    box-shadow:
      inset 0 2px 5px rgba(245,245,255,.12),
      inset 0 -12px 23px rgba(2,5,18,.48),
      0 0 0 5px rgba(15,19,48,.55),
      0 0 0 6px var(--stats-border),
      0 12px 27px rgba(1,4,16,.35),
      0 0 24px var(--stats-edge-glow),
      0 0 32px color-mix(in srgb, var(--stat-glow) 34%, transparent);
    -webkit-backdrop-filter: blur(12px) saturate(1.25);
    backdrop-filter: blur(12px) saturate(1.25);
    animation: statMaterialize .9s ease-out both;
    isolation: isolate;
  }
  .stat-dial:nth-of-type(2) {animation-delay: .12s;}
  .stat-dial:nth-of-type(3) {animation-delay: .24s;}
  .stat-dial::before {
    content: "";
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    border: 1px solid rgba(227,232,255,.09);
    background: radial-gradient(circle at 43% 21%, rgba(255,255,255,.07), transparent 47%), radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--stat-color) 8%, transparent), transparent 68%);
    pointer-events: none;
  }
  .stat-dial__gauge {
    position: absolute;
    inset: 3.5%;
    width: 93%;
    height: 93%;
    overflow: visible;
    filter: drop-shadow(0 0 8px var(--stat-glow));
  }
  .stat-dial__track, .stat-dial__progress {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
    transform-origin: 60px 60px;
    transform: rotate(122deg);
  }
  .stat-dial__track {stroke: var(--stats-track);stroke-dasharray: 221 264;}
  .stat-dial__progress {
    stroke: var(--stat-color);
    stroke-dasharray: var(--stat-arc) 264;
    filter: drop-shadow(0 0 6px var(--stat-glow)) drop-shadow(0 0 12px color-mix(in srgb, var(--stat-glow) 70%, transparent));
  }
  .stat-dial__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(1px,.4vw,5px);
    transform: translateY(1%);
    text-align: center;
    text-shadow: 0 2px 8px rgba(0,0,0,.5), 0 0 10px color-mix(in srgb, var(--stat-glow) 28%, transparent);
  }
  .stat-dial__name {
    color: var(--stats-label);
    font-size: clamp(10px, 1.2vw, 14px);
    line-height: 1.1;
    font-weight: 550;
    letter-spacing: .01em;
  }
  .stat-dial__value {
    color: var(--stats-number);
    font-size: clamp(27px, 3vw, 39px);
    line-height: 1;
    letter-spacing: -.045em;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
  }
  .stat-dial--energy {--stat-color: var(--stats-energy); --stat-glow: var(--stats-energy-glow);}
  .stat-dial--rest {--stat-color: var(--stats-rest); --stat-glow: var(--stats-rest-glow);}
  .stat-dial--flow {--stat-color: var(--stats-flow); --stat-glow: var(--stats-flow-glow);}
  .stats-info-box {
    position: absolute;
    left: 50%;
    top: calc(var(--cloud-band-top) + var(--dashboard-rise) + var(--cloud-band-height) + var(--stats-diameter) * .28 + var(--cloud-scroll-lift));
    z-index: 7;
    width: var(--info-box-width);
    min-height: var(--info-box-height);
    transform: translateX(-50%);
    border-radius: 28px;
    border: 1px solid rgba(214, 226, 255, .22);
    background:
      radial-gradient(ellipse at 18% 0%, rgba(255,255,255,.16), transparent 34%),
      radial-gradient(ellipse at 88% 100%, rgba(126, 153, 255, .11), transparent 36%),
      radial-gradient(ellipse at 28% 18%, rgba(255,255,255,.08), transparent 44%),
      linear-gradient(160deg, rgba(28,38,82,.34), rgba(8,14,38,.48));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.18),
      inset 0 -10px 22px rgba(3,6,24,.18),
      0 18px 42px rgba(1,4,16,.20),
      0 0 26px rgba(146, 160, 239, .10),
      0 0 0 1px rgba(255,255,255,.05);
    -webkit-backdrop-filter: blur(24px) saturate(1.28);
    backdrop-filter: blur(24px) saturate(1.28);
    padding: clamp(14px, 2vw, 18px) clamp(18px, 2.6vw, 26px);
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    pointer-events: none;
  }
  .stats-info-box__title {
    color: rgba(245, 247, 255, .94);
    font-size: clamp(14px, 1.55vw, 18px);
    font-weight: 600;
    letter-spacing: -.01em;
  }
  .stats-info-box__body {
    color: rgba(226, 232, 255, .78);
    font-size: clamp(11px, 1.25vw, 14px);
    line-height: 1.42;
  }
  .stats-info-box__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .stats-info-box__chip {
    border-radius: 999px;
    padding: 6px 10px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(206, 220, 255, .14);
    backdrop-filter: blur(8px);
    color: rgba(234, 238, 255, .82);
    font-size: 11px;
    line-height: 1;
  }
  .moon-meta {
    position: absolute;
    z-index: 7;
    right: max(18px, calc(var(--moon-right) - 6px));
    top: clamp(12px, 2.6vh, 24px);
    width: min(44vw, 230px);
    text-align: right;
    pointer-events: none;
  }
  .moon-meta__eyebrow {
    display: block;
    color: rgba(229, 236, 255, .72);
    font-size: clamp(11px, 1.1vw, 13px);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 4px;
  }
  .moon-meta__title {
    display: block;
    color: rgba(248, 249, 255, .96);
    font-size: clamp(18px, 2vw, 24px);
    line-height: 1.08;
    font-weight: 600;
    text-shadow: 0 4px 18px rgba(5, 8, 28, .45);
  }
  .moon-meta__date {
    display: block;
    margin-top: 6px;
    color: rgba(210, 220, 255, .78);
    font-size: clamp(11px, 1.15vw, 13px);
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0,0,0,.4);
  }
  @keyframes statMaterialize {
    from {opacity:0;transform:translateY(12px) scale(.94);}
    to {opacity:1;transform:translateY(0) scale(1);}
  }
  @media (max-width: 720px) {
    :root {
      --stats-diameter: clamp(70px, 22vw, 96px);
      --stats-row-width: 340px;
      /* Ausgleich fuer die unterschiedliche sichtbare Nebelkante je Displaybreite. */
      --stats-cloud-offset: clamp(0px, calc(55vw - 176px), 50px);
      --dashboard-rise: -46px;
      --info-box-width: min(calc(100% - 26px), 360px);
      --info-box-height: clamp(88px, 17vh, 126px);
    }
    .stat-dials {
      width: min(calc(100% - 24px), var(--stats-row-width));
      gap: clamp(2px,.8vw,6px);
      top: min(
        calc(var(--cloud-band-top) + var(--dashboard-rise) + var(--cloud-band-height) - var(--stats-diameter) * 1.02 - var(--stats-cloud-offset) + var(--cloud-scroll-lift)),
        calc(100dvh - var(--nav-height) - var(--nav-edge-gap) - var(--stats-diameter) - 34px)
      );
    }
    .stat-dial__name {font-size: clamp(10px, 3vw, 12px);}
    .stat-dial__value {font-size: clamp(22px, 7.1vw, 30px);}
    .stat-dial__gauge {inset: 2%;width:96%;height:96%;}
    .stat-dial__track, .stat-dial__progress {stroke-width: 8.2;}
    .stats-info-box {
      top: min(
        calc(var(--cloud-band-top) + var(--dashboard-rise) + var(--cloud-band-height) + var(--stats-diameter) * .26 + var(--cloud-scroll-lift) - var(--stats-cloud-offset)),
        calc(100dvh - var(--nav-height) - var(--nav-edge-gap) - var(--info-box-height) - 34px)
      );
      border-radius: 24px;
      padding: 13px 14px;
      gap: 6px;
    }
    .stats-info-box__title {font-size: clamp(13px, 4vw, 16px);}
    .stats-info-box__body {font-size: clamp(10px, 3.2vw, 12px);}
    .moon-meta { width: min(52vw, 220px); top: clamp(10px, 2.5vh, 18px); }
    .moon-meta__title { font-size: clamp(16px, 5vw, 20px); }
  }
  @media (max-width: 340px) {
    .stat-dials {width: calc(100% - 20px);gap:4px;}
    .stat-dial__name {font-size:10px;}
    .stats-info-box__chips {gap: 6px;}
  }
  @media (prefers-reduced-motion: reduce) {
    .stat-dial {animation:none;}
  }

  /* DESKTOP: Die Navigation bleibt dort unsichtbar. */
  .mobile-nav { display: none; }

  /* Dashboard v1.2.6 – kurvenfoermige Glasflaeche ohne Verbindungslinien/Konturen */
  @media (max-width: 720px) {
    :root {
      --moon-top: clamp(42px, 8vh, 64px);
      --moon-right: clamp(18px, 5vw, 36px);
      --moon-size: clamp(130.65px, 42.88vw, 231.15px);
      --ribbon-top: 32vh;
      --ribbon-height: clamp(230px, 31vh, 300px);
      --nav-edge-gap: clamp(14px, 4vw, 20px);
      --nav-height: clamp(128px, 37vw, 149px);
      --nav-outer-size: clamp(38px, 11.3vw, 50px);
      --nav-near-size: clamp(43px, 12.3vw, 53px);
      --nav-center-size: clamp(66px, 19.2vw, 80px);
      --nav-outer-y: clamp(41px, 12vw, 50px);
      --nav-near-y: clamp(24px, 7vw, 29px);
      --nav-center-y: 5px;
      --nav-glass-core: rgba(27,32,63,.74);
      --nav-glass-mid: rgba(25,29,56,.63);
      --nav-glass-deep: rgba(8,13,34,.88);
      --nav-circle-frame: rgba(210,226,255,.36);
      --nav-circle-lustre: rgba(216,229,255,.16);
      --nav-circle-smoke: rgba(8,16,41,.54);
      --nav-neon-primary: #f1b9ff;
      --nav-neon-white: #ffe9ff;
      --nav-neon-secondary: #a57aff;
      --nav-neon-halo: rgba(210,109,255,.36);
      --nav-blackhole-violet: #ae74fa;
      --nav-blackhole-blue: #7da8ff;
      --nav-blackhole-amber: #ffb39c;
      --nav-blackhole-hot: #fff3ed;
      --nav-blackhole-spin: 115s; /* extrem langsame Lichtbewegung, nur waehrend des Touch-Impulses */
      --nav-touch-duration: 1500ms; /* ein einmaliger, gut erkennbarer Touch-Impuls */
      --nav-touch-corona: rgba(253,197,255,.88);
      --nav-touch-violet: rgba(190,116,255,.81);
      --nav-touch-blue: rgba(122,155,255,.63);
      --nav-touch-amber: rgba(255,200,181,.48);
      /* Zusätzliche Theme-Werte für den Ereignishorizont und das Plus. */
      --nav-neon-glass-highlight: rgba(255,220,255,.20);
      --nav-neon-glass-shadow: rgba(168,91,238,.18);
      --nav-neon-soft-border: rgba(160,99,223,.2);
      --nav-neon-soft-shadow: rgba(190,107,250,.17);
      --nav-neon-rim-glow: rgba(215,117,255,.15);
      --nav-blackhole-core: #000006;
      --nav-blackhole-inner: #01020a;
      --nav-blackhole-rim-dark: #070713;
      --nav-blackhole-rim: #100e22;
      --nav-blackhole-core-dark: #010208;
      --nav-blackhole-near-core: #060915;
      --nav-blackhole-edge: #201a42;
      --nav-blackhole-white: #fff1ea;
      --nav-blackhole-soft-pink: #e3a8ff;
      --nav-blackhole-soft-purple: #eacaff;
      --nav-blackhole-pale-blue: #8fcfff;
      --nav-blackhole-photon-1: #89b7ff;
      --nav-blackhole-photon-2: #d3a2ff;
      --nav-blackhole-photon-3: #fff5f5;
      --nav-blackhole-photon-4: #ffadad;
      --nav-blackhole-glow: rgba(197,118,255,.25);
    }
    /* Die SVG-Aussenkante wird aus den realen Button-Positionen erzeugt.
       Damit stimmen die Kurven bei jeder Handybreite mit allen fuenf Ringen ueberein. */
    .mobile-nav {
      position: fixed;
      z-index: 20;
      left: calc(var(--nav-edge-gap) + env(safe-area-inset-left, 0px));
      right: calc(var(--nav-edge-gap) + env(safe-area-inset-right, 0px));
      bottom: calc(var(--nav-bottom-gap, var(--nav-edge-gap)) + env(safe-area-inset-bottom, 0px));
      height: var(--nav-height);
      display: flex;
      justify-content: center;
      align-items: flex-start;
      gap: clamp(10px, 3.3vw, 17px);
      isolation: isolate;
      filter: drop-shadow(0 13px 22px var(--nav-shadow));
    }
    .nav-sculpture {
      position: absolute;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
      z-index: -1;
      overflow: visible;
      pointer-events: none;
    }
    .nav-sculpture .nav-fill { fill: url(#moonNavGlass); }
    /* Nur die Glas-Fuellung bleibt: KEINE Linien zwischen Buttons oder am
       oberen/unteren Rand. Die Rundung und der weiche Schatten bleiben. */
    .nav-item {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      gap: 10px;
      min-width: 0;
      width: auto;
      min-width: 0;
      flex: 0 0 auto;
      text-align: center;
      z-index: 2;
      padding-top: var(--nav-outer-y);
    }
    .nav-item--near { padding-top: var(--nav-near-y); }
    .nav-item--add { padding-top: var(--nav-center-y); z-index: 4; }
    .nav-circle {
      display: grid;
      place-items: center;
      position: relative;
      flex: 0 0 auto;
      width: var(--nav-outer-size);
      height: var(--nav-outer-size);
      padding: 0;
      border-radius: 50%;
      color: var(--nav-text);
      border: 1px solid color-mix(in srgb, var(--nav-circle-frame) 82%, rgba(255,255,255,.10));
      background:
        radial-gradient(circle at 32% 24%, var(--nav-button-frost-2), transparent 30%),
        radial-gradient(circle at 46% 35%, var(--nav-button-frost), transparent 48%),
        radial-gradient(circle at 50% 84%, rgba(9, 12, 28, .26), transparent 46%),
        linear-gradient(155deg, color-mix(in srgb, var(--nav-button-top) 84%, rgba(255,255,255,.04)), color-mix(in srgb, var(--nav-button-bottom) 92%, rgba(255,255,255,.02)));
      box-shadow:
        inset 0 1px 2px rgba(255,255,255,.15),
        inset 0 8px 18px rgba(197,208,255,.08),
        inset 0 -8px 18px rgba(8,14,36,.34),
        inset 0 0 16px var(--nav-button-haze),
        0 0 0 3px rgba(4, 8, 23, .30),
        0 0 0 4px rgba(199, 210, 255, .18),
        0 10px 22px rgba(4,8,23,.28);
      outline-offset: 6px;
      cursor: default;
      -webkit-tap-highlight-color: transparent;
      -webkit-backdrop-filter: blur(18px) saturate(1.5);
      backdrop-filter: blur(18px) saturate(1.5);
      overflow: hidden;
    }
    .nav-circle::before {
      content: '';
      position: absolute;
      inset: 12% 10% 16% 10%;
      border-radius: 50%;
      background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.14), rgba(255,255,255,.04) 34%, rgba(161,183,255,.06) 58%, transparent 78%);
      filter: blur(8px);
      opacity: .9;
      pointer-events: none;
    }
    .nav-circle::after {
      content: '';
      position: absolute;
      inset: 22% 16% 18% 16%;
      border-radius: 50%;
      background: radial-gradient(circle at 50% 55%, rgba(84, 104, 171, .12), transparent 70%);
      filter: blur(9px);
      opacity: .8;
      pointer-events: none;
    }
    /* Specular reflections / "light probe" look without three.js.
       Glanzlicht folgt der Kugelform; Schatten und weiche Reflektion erzeugen Tiefe. */
    .nav-circle:not(.nav-circle--add) {
      background:
        radial-gradient(ellipse 58% 32% at 36% 10%, var(--glass-specular-middle) 0%, transparent 100%),
        radial-gradient(ellipse 70% 54% at 25% 0%, rgba(225,233,255,.22), transparent 76%),
        radial-gradient(circle at 50% 100%, var(--glass-gloss-shade), transparent 78%),
        linear-gradient(148deg, rgba(76,88,136,.48) 0%, rgba(17,24,54,.72) 53%, rgba(7,11,31,.83) 100%);
      box-shadow:
        inset 0 1px 0 var(--glass-specular-top),
        inset 0 5px 7px rgba(210,229,255,.13),
        inset 0 -7px 15px rgba(2,8,24,.60),
        inset -4px -5px 10px rgba(6,13,33,.33),
        0 0 0 3px rgba(6,10,27,.42),
        0 0 0 4px var(--glass-gloss-outline),
        0 8px 20px rgba(2,6,20,.32);
      -webkit-backdrop-filter: blur(23px) saturate(1.5);
      backdrop-filter: blur(23px) saturate(1.5);
    }
    .nav-circle:not(.nav-circle--add)::before {
      inset: 7% 12% 36% 12%;
      border-radius: 50% 50% 48% 48%;
      background:
        radial-gradient(ellipse 68% 62% at 38% 4%, var(--glass-specular-top),transparent 93%),
        linear-gradient(180deg,rgba(255,255,255,.21),rgba(210,232,255,.055) 58%,transparent);
      filter: blur(4px);
      opacity: .75;
    }
    .nav-circle:not(.nav-circle--add)::after {
      inset: auto 24% 7% 24%;
      height: 12%;
      border-radius: 999px;
      background: var(--glass-specular-bottom);
      filter: blur(4px);
      opacity: .70;
    }
    .nav-circle:not(.nav-circle--add) > svg {
      position: relative;
      z-index: 3;
      filter: drop-shadow(0 1px 1px rgba(2,4,18,.8));
    }

    .nav-item--near .nav-circle { width: var(--nav-near-size); height: var(--nav-near-size); }
    .nav-circle:disabled { opacity: 1; color: var(--nav-text); }
    .nav-circle svg {
      width: clamp(20px, 5.7vw, 24px);
      height: clamp(20px, 5.7vw, 24px);
      stroke: currentColor;
      fill: none;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .nav-label {
      color: var(--nav-label);
      font-family: inherit;
      font-weight: 540;
      font-size: clamp(9px, 2.68vw, 12px);
      line-height: 1.15;
      white-space: nowrap;
      letter-spacing: -.005em;
      text-shadow: 0 2px 8px rgba(2,4,14,.8);
      pointer-events: none;
    }
    .nav-circle--add {
      width: var(--nav-center-size);
      height: var(--nav-center-size);
      border: 1.6px solid var(--nav-neon-primary);
      cursor: pointer;
      overflow: visible;
      background: radial-gradient(circle at 50% 43%,var(--nav-plus-top),var(--nav-plus-bottom) 77%);
      box-shadow:
        inset 0 0 0 2px var(--nav-neon-glass-highlight),
        inset 0 0 22px var(--nav-neon-glass-shadow),
        0 0 0 3px var(--nav-neon-soft-border),
        0 0 11px var(--nav-neon-halo),
        0 0 23px var(--nav-neon-soft-shadow);
    }
    .nav-circle--add:focus-visible { outline: 2px solid var(--nav-neon-white); }
    .nav-circle--add::before {
      content: '';
      position: absolute;
      inset: -3px;
      border-radius: 50%;
      border: 1px solid var(--nav-neon-primary);
      box-shadow: 0 0 10px var(--nav-neon-halo), inset 0 0 10px var(--nav-neon-rim-glow);
      opacity: .68;
      pointer-events: none;
    }
    .nav-circle--add::after {
      content: '';
      position: absolute;
      inset: -6px;
      border-radius: 50%;
      border: 1px solid var(--nav-neon-secondary);
      opacity: .18;
      filter: blur(4px);
      pointer-events: none;
    }
    .nav-plus {
      position: relative;
      z-index: 7;
      width: 38px !important;
      height: 38px !important;
      stroke: var(--nav-neon-white) !important;
      stroke-width: 1.7 !important;
      filter:
        drop-shadow(0 0 3px var(--nav-neon-primary))
        drop-shadow(0 0 7px var(--nav-neon-halo));
    }
    .nav-item--add .nav-label { visibility: hidden; }

    /* v1.2.9: Impuls ist ein EINZIGES Canvas statt mehrerer GPU-
       CSS-Layer. Keine CSS-Masken, transformierten radialen Gradienten,
       backdrop-filter oder rotierenden Pseudoelemente im Effekt. */
    .bh-canvas {
      position: absolute;
      left: -10px;
      top: -10px;
      width: calc(100% + 20px);
      height: calc(100% + 20px);
      z-index: 30;
      display: block;
      pointer-events: none;
      visibility: hidden;
      opacity: 0;
      background: transparent;
    }
    .nav-circle--add.is-pulsing .bh-canvas {
      visibility: visible;
      opacity: 1;
    }
    .nav-circle--add.is-pulsing .nav-plus {
      visibility: hidden !important;
    }
    @media (max-width: 360px) {
      .nav-label { font-size: 9px; }
      .nav-item { gap: 8px; }
      .nav-circle--add .nav-plus { width: 31px !important; height: 31px !important; }
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .star { animation: none; will-change: auto; }
    .cloud-track { animation: none !important; }
    .cloud-parallax { transform: none !important; }
    .ribbon-webgl { animation: none !important; }
  }



  /* ===== v1.4.4: ein gemeinsamer responsiver Inhaltsfluss ===== */
  html:not([data-clouds="enabled"]) .cloud-belt { display: none !important; }
  body { font-family: var(--font-body); }
  .night {
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
  }
  :root {
    --moon-size: clamp(142.375px, 19.9325vw, 270.5125px); /* 15% kleiner */
    --content-gap: clamp(20px, 2.8vh, 30px);
    --content-top: max(calc(var(--moon-top) + var(--moon-size) + 36px), 35dvh);
    --stat-track-radius: 49;
    --nav-cut: 0px;
  }
  .moon-meta {
    position: absolute;
    z-index: 7;
    left: 50%;
    right: auto;
    top: clamp(12px, 2.5vh, 24px);
    transform: translateX(-50%);
    width: min(92%, 420px);
    text-align: center;
    pointer-events: none;
  }
  .moon-meta__eyebrow { display: none; }
  .moon-meta__title {
    font-family: var(--font-brand);
    font-weight: var(--font-brand-weight);
    font-size: clamp(22px, 3.1vw, 31px);
    letter-spacing: .012em;
    line-height: 1.06;
  }
  .moon-meta__date {
    font-family: var(--font-body);
    margin-top: 7px;
    color: rgba(225,231,255,.82);
    font-size: clamp(12px, 1.25vw, 14px);
    line-height: 1.25;
  }
  .dashboard-content {
    position: relative;
    z-index: 8;
    width: 100%;
    min-height: 100dvh;
    box-sizing: border-box;
    padding-top: var(--content-top);
    padding-bottom: clamp(35px, 7vh, 85px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--content-gap);
  }
  /* Die transparente Flaeche des Dashboard-Layouts darf nicht den darunterliegenden
     Mond abfangen. Nur die sichtbaren Inhaltselemente bekommen Pointer-Events. */
  .dashboard-content { pointer-events: none; }
  .dashboard-content .stat-dials,
  .dashboard-content .stats-info-box { pointer-events: auto; }
  .dashboard-content .stat-dials,
  .dashboard-content .stats-info-box {
    position: relative;
    left: auto;
    top: auto;
    right: auto;
    bottom: auto;
    transform: none;
    flex: 0 0 auto;
  }
  .dashboard-content .stat-dials {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    justify-items: center;
    align-items: center;
    width: min(calc(100% - 36px), var(--stats-row-width));
    gap: clamp(12px, 2.4vw, 28px);
  }
  .dashboard-content .stat-dial { width: min(100%, var(--stats-diameter)); }
  /* Aeusserste Zierlinie und Schattenring entfernt; Korpusgroesse unveraendert. */
  .dashboard-content .stat-dial {
    border: 1px solid rgba(188,204,255,.14);
    box-shadow:
      inset 0 2px 6px rgba(246,248,255,.10),
      inset 0 -12px 25px rgba(2,5,18,.42),
      0 9px 24px rgba(1,4,16,.29),
      0 0 19px color-mix(in srgb, var(--stat-glow) 26%, transparent);
  }
  .dashboard-content .stat-dial__gauge { inset: 0; width: 100%; height: 100%; }
  .dashboard-content .stat-dial__track,
  .dashboard-content .stat-dial__progress { stroke-width: 7.9; }
  .dashboard-content .stat-dial__track { stroke-dasharray: 257 308; }
  .dashboard-content .stat-dial__progress { stroke-dasharray: var(--stat-arc) 308; }
  .dashboard-content .stat-dial__name { font-family: var(--font-heading); }
  .dashboard-content .stats-info-box {
    width: min(calc(100% - 36px), 580px);
    min-height: auto;
    height: auto;
    margin: 0;
    padding: clamp(13px,2vw,20px) clamp(15px,2.4vw,24px);
    gap: 8px;
  }
  .stats-info-box__title { font-family: var(--font-heading); }
  .stats-info-box__body, .stats-info-box__chip { font-family: var(--font-body); }
  .nav-label { font-family: var(--font-body); }

  @media (max-width: 720px) {
    :root {
      --moon-size: clamp(111px, 36.448vw, 196.5px); /* alter mobiler Wert * .85 */
      --moon-top: clamp(88px, 13dvh, 135px);
      --content-top: max(calc(var(--moon-top) + var(--moon-size) + 22px), clamp(210px, 38dvh, 365px));
      --content-gap: clamp(16px, 2.6dvh, 24px);
      --nav-height-base: clamp(128px, 37vw, 149px);
      /* v1.4.5: 12,5 % niedrigere Glasflaeche als in v1.4.4.
         Der hoehere Cut gleicht die kuerzere Nav-Hoehe aus, damit die
         unteren Innenraum separat reduzieren, ohne Buttongroessen zu aendern. */
      --nav-height: calc(var(--nav-height-base) * .7);
      --nav-cut: calc(var(--nav-height-base) * .3);
      /* Abstand unter der Leiste bewusst kleiner als seitliche Abstaende. */
      --nav-bottom-gap: clamp(8px, 2.5vw, 11px);
      /* Verringert den leeren Glas-Boden unter den Button-Beschriftungen. */
      --nav-item-downshift: 16px;
    }
    .moon-meta { width: calc(100% - 30px); top: clamp(11px,2dvh,18px); }
    .moon-meta__title { font-size: clamp(20px, 5.4vw, 25px); }
    .moon-meta__date { font-size: clamp(11px, 3.15vw, 13px); margin-top: 5px; }
    .dashboard-content {
      padding-bottom: calc(var(--nav-height) + var(--nav-bottom-gap) + env(safe-area-inset-bottom,0px) + 35px);
    }
    .dashboard-content .stat-dials {
      width: min(calc(100% - 28px), var(--stats-row-width));
      gap: clamp(8px, 2.7vw, 16px);
    }
    .dashboard-content .stats-info-box {
      width: min(calc(100% - 28px), 360px);
      border-radius: 23px;
      padding: clamp(12px, 3.5vw, 17px);
      gap: 7px;
    }
    /* Kompakterer Dreieckswinkel, gleichmaessiger Abstand zwischen den
       Mittelpunkthoehen. Aeussere Buttons behalten ihre Bildschirmhoehe. */
    .mobile-nav .nav-item {
      padding-top: 0;
      top: calc(var(--nav-outer-y) - var(--nav-cut) + var(--nav-item-downshift));
    }
    .mobile-nav .nav-item--near {
      top: calc(var(--nav-near-y) - var(--nav-cut) + 8px + var(--nav-item-downshift));
    }
    .mobile-nav .nav-item--add {
      top: calc(var(--nav-center-y) - var(--nav-cut) + 8px + var(--nav-item-downshift));
    }
  }
  @media (max-width: 360px) {
    .dashboard-content .stats-info-box { padding: 11px 13px; }
    .stats-info-box__chips { gap: 5px; }
    .dashboard-content .stat-dials { gap: 7px; }
  }
  @media (max-height: 650px) and (max-width: 720px) {
    :root { --content-gap: 15px; }
    .dashboard-content { padding-top: max(calc(var(--moon-top) + var(--moon-size) + 18px), 33dvh); }
    /* Kleines Display: sekundäre Demo-Chips ausblenden; Inhalte bleiben lesbar. */
    .stats-info-box__chips { display: none; }
  }

  


/* 1.4.7 – responsiver Kartenbereich / feste Aussenabstaende */
:root {
  --dashboard-card-gap: clamp(14px, 2.5dvh, 24px);
  --dashboard-card-min-height: 155px;
  --dashboard-content-bottom: clamp(28px, 5dvh, 64px);
  --card-dots: rgba(205, 214, 250, .34);
  --card-dots-active: #f1c7ff;
  --card-dots-glow: rgba(221, 146, 255, .54);
}
.dashboard-content {
  gap: var(--dashboard-card-gap);
  padding-bottom: var(--dashboard-content-bottom);
}
.dashboard-content .stats-info-box {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: var(--dashboard-card-min-height);
  max-height: 360px;
  padding: clamp(16px, 2.5vw, 25px);
  gap: 8px;
  pointer-events: auto;
  overflow: hidden;
}
.stats-info-box__viewport {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  outline-offset: -3px;
}
.stats-info-box__viewport::-webkit-scrollbar { display: none; }
.stats-info-box__viewport:focus-visible { outline: 2px solid var(--card-dots-active); border-radius: 8px; }
.info-slide {
  box-sizing: border-box;
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  min-width: 0;
  overflow-y: auto;
  scrollbar-width: none;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(8px, 1.6vh, 16px);
  padding: 0 2px 5px;
}
.info-slide::-webkit-scrollbar { display: none; }
.info-slide__overline {
  color: rgba(223, 206, 255, .65);
  text-transform: uppercase;
  letter-spacing: .13em;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
}
.info-slide .stats-info-box__title { margin: 0; font-size: clamp(17px, 4vw, 22px); }
.info-slide .stats-info-box__body { margin: 0; line-height: 1.52; font-size: clamp(12px, 2.7vw, 15px); max-width: 58ch; }
.info-slide .stats-info-box__chips { margin-top: auto; }
.stats-info-box__pagination {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  min-height: 22px;
}
.info-page-dot {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  background: var(--card-dots);
  transition: width .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.info-page-dot.is-active {
  width: 21px;
  background: var(--card-dots-active);
  box-shadow: 0 0 10px var(--card-dots-glow);
}
.info-page-dot:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
@media (max-width: 720px) {
  :root { --dashboard-content-bottom: calc(var(--nav-height) + var(--nav-bottom-gap) + env(safe-area-inset-bottom, 0px) + var(--dashboard-card-gap)); }
  .dashboard-content { min-height: 100dvh; padding-bottom: var(--dashboard-content-bottom); }
  .dashboard-content .stats-info-box {
    flex: 1 1 auto;
    max-height: none;
    min-height: var(--dashboard-card-min-height);
    width: min(calc(100% - 28px), 360px);
    padding: clamp(13px, 3.7vw, 18px);
  }
  .info-slide { gap: clamp(7px, 1.2dvh, 13px); }
}
@media (max-height: 650px) and (max-width: 720px) {
  :root { --dashboard-card-min-height: 132px; }
  /* Keine versteckten Kartenchips: die Slides scrollen intern, wenn noetig. */
  .info-slide .stats-info-box__chips { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .info-page-dot { transition: none; }
}
/* Compact devices: grow the card only into genuinely available space; scroll inside it if needed. */
@media (max-width: 720px) {
  .dashboard-content .stats-info-box { flex: 1 1 0; min-height: var(--dashboard-card-min-height); }
}
@media (max-width: 720px) and (max-height: 670px) {
  :root { --dashboard-card-min-height: 118px; --dashboard-card-gap: 13px; }
  .dashboard-content .stats-info-box { padding: 10px 12px; gap: 4px; }
  .info-slide { gap: 6px; }
  .info-slide .stats-info-box__chips { display: none; }
  .info-slide .stats-info-box__body { font-size: 11px; line-height: 1.37; }
  .stats-info-box__pagination { min-height: 16px; }
}

/* Demo-Tachometerwerte, statt Inline-Styles */
.stat-dial--energy { --stat-arc: 185.04; }
.stat-dial--rest { --stat-arc: 102.80; }
.stat-dial--flow { --stat-arc: 218.45; }

/* MoonCycle 1.4.8 — 2D-Karten, symmetrische Abstaende, flachere Navigation */
:root {
  --card-dots: rgba(205,214,250,.35);
  --card-dots-active: #f1c7ff;
  --card-dots-glow: rgba(221,146,255,.54);
  --dashboard-clearance: calc(var(--nav-height, 103px) + var(--nav-bottom-gap, 9px) + 12px);
}
@media (max-width:720px) {
  :root {
    /* Niedrigere Dreieckshoehe bei unveraenderten Button-Durchmessern. */
    --nav-angle-reduction: clamp(4px, 1.35vw, 6px);
    --nav-bottom-gap: clamp(3px, 1.05vw, 5px);
    --dashboard-card-gap: clamp(14px, 2.5dvh, 24px);
    --dashboard-content-bottom: calc(var(--dashboard-clearance) + var(--dashboard-card-gap));
  }
  /* Navigation ohne GPU-Gruppenclip; Schatten allein auf der Glasform. */
  .mobile-nav { filter: none; }
  .mobile-nav .nav-sculpture { filter: drop-shadow(0 13px 22px var(--nav-shadow)); }
  .mobile-nav .nav-item--near {
    top: calc(var(--nav-near-y) - var(--nav-cut) + 8px + var(--nav-item-downshift) + var(--nav-angle-reduction) * .5);
  }
  .mobile-nav .nav-item--add {
    top: calc(var(--nav-center-y) - var(--nav-cut) + 8px + var(--nav-item-downshift) + var(--nav-angle-reduction));
  }
  /* Nutzt die tatsaechlich gemessene Oberkante des Plus-Buttons als Grenze. */
  .dashboard-content { padding-bottom: var(--dashboard-content-bottom); }
}
/* Der Animationseffekt darf ausserhalb des Plus-Kreises strahlen.
   Pixelzeichnung und CSS verwenden dieselbe Reserve. */
@media (max-width:720px) {
  .nav-circle--add { --nav-blackhole-bleed: clamp(68px, 23vw, 98px); overflow: visible; }
  .nav-circle--add .bh-canvas {
    left: calc(-1 * var(--nav-blackhole-bleed));
    top: calc(-1 * var(--nav-blackhole-bleed));
    width: calc(100% + 2 * var(--nav-blackhole-bleed));
    height: calc(100% + 2 * var(--nav-blackhole-bleed));
    max-width: none;
    max-height: none;
  }
}
/* Deck: 3 vertikale Ebenen, jede davon 3 horizontale Zeitraeume. */
.dashboard-content .stats-info-box {
  position: relative;
  isolation: isolate;
  padding: clamp(14px, 2.5vw, 24px);
  overflow: hidden;
}
.card-deck {
  position: relative;
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  outline-offset: -3px;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.card-deck:active { cursor: grabbing; }
.card-deck:focus-visible { outline: 2px solid var(--card-dots-active); border-radius: 9px; }
.card-deck__levels {
  height: 100%; width: 100%;
  display: flex;
  flex-direction: column;
  transform: translate3d(0, var(--card-y, 0%), 0);
  transition: transform .36s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}
.card-level { height: 100%; flex: 0 0 100%; min-height: 0; width: 100%; overflow: hidden; }
.card-level__row {
  display: flex;
  height: 100%; width: 100%;
  transform: translate3d(var(--card-x, 0%), 0, 0);
  transition: transform .36s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}
.card-level .info-slide {
  box-sizing: border-box;
  flex: 0 0 100%;
  width: 100%; height: 100%;
  min-height: 0;
  padding: 0 25px 5px 2px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  scroll-snap-align: unset;
}
.card-level .info-slide::-webkit-scrollbar { display: none; }
.stats-info-box__vertical-pagination {
  position: absolute;
  z-index: 2;
  right: clamp(9px, 2.6vw, 17px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
}
.info-level-dot {
  -webkit-appearance: none; appearance: none;
  display: block; padding: 0; border: none;
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--card-dots);
  cursor: pointer;
  transition: height .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.info-level-dot.is-active {
  height: 21px;
  background: var(--card-dots-active);
  box-shadow: 0 0 10px var(--card-dots-glow);
}
.info-level-dot:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.card-mini-stats {
  width: min(100%, 300px);
  display: grid;
  gap: clamp(5px,1.15dvh,9px);
  margin-top: 4px;
  --mini-energy: #9ea7ff;
  --mini-rest: #ff71af;
  --mini-flow: #72f0bf;
}
.card-mini-stat { display: grid; grid-template-columns: 59px minmax(0,1fr) 26px; align-items:center; gap:9px; font: 11px/1.2 var(--font-body); color:rgba(232,239,255,.8); }
.card-mini-stat b { font-variant-numeric:tabular-nums; text-align:right; font-weight:600; }
.card-mini-stat__track { height:6px; border-radius:99px; background:rgba(190,203,255,.12); overflow:visible; }
.card-mini-stat__track i { display:block; width:var(--fill,0%); height:100%; border-radius:99px; background:var(--mini-color); box-shadow:0 0 10px var(--mini-color); }
.card-mini-stat--energy { --mini-color:var(--mini-energy); }
.card-mini-stat--rest { --mini-color:var(--mini-rest); }
.card-mini-stat--flow { --mini-color:var(--mini-flow); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:720px) and (max-height:670px) {
  .dashboard-content .stats-info-box { padding: 11px 12px; }
  .card-level .info-slide { padding-right: 24px; }
  .card-mini-stats { gap: 4px; }
}
@media (prefers-reduced-motion:reduce) {
  .card-deck__levels, .card-level__row, .info-level-dot { transition:none; }
}
/* Sehr kurze Displays: Beispielerklaerung auf Statistikebene ausblenden,
   damit alle drei Messbalken trotz zweiachsiger Navigation sichtbar sind. */
@media (max-width:720px) and (max-height:670px) {
  .card-level[data-level="1"] .stats-info-box__body { display:none; }
  .card-level[data-level="1"] .info-slide { gap:4px; }
  .card-level[data-level="1"] .card-mini-stats { margin-top:2px; gap:4px; }
}


/* 1.4.9: Wischgesten isolieren und iOS-Rubber-Band unterbinden. */
.card-deck, .card-deck__levels, .card-level, .card-level__row,
.card-level .info-slide {
  touch-action: none;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
}
.card-level .info-slide {
  overflow: hidden;  /* Native Scroll-Container hatten vertikales Wischen abgefangen. */
  -webkit-overflow-scrolling: auto;
}
@media (max-width: 720px) {
  /* Stabile Layout-Hoehe unabhaengig von der animierten Safari-Adressleiste.
     100vh ist Fallback fuer aeltere Browser. */
  .night, .dashboard-content { min-height: 100vh; }
  @supports (height: 100svh) {
    .night, .dashboard-content { min-height: 100svh; }
    :root { --dashboard-card-gap: clamp(14px, 2.5svh, 24px); }
    .dashboard-content { min-height: 100svh; }
  }
}

/* Himmel nicht skalieren; nur Mond 10% kleiner als Referenzstand. */
.night{--moon-size:clamp(128.1375px,17.93925vw,243.46125px)}
@media(max-width:799px){.night{--moon-size:clamp(99.9px,32.8032vw,176.85px)}}