/* Worldclock — lab-specific styles (overrides of the shared cyber layout). */

body, #side-panel {
    background: #000616 !important;
}
#canvas-container {
    background: radial-gradient(circle at 50% 50%,
        rgba(0, 210, 255, 0.35) 0%,
        rgba(0, 100, 180, 0.15) 30%,
        #000616 65%) !important;
}
.cyber-grid {
    display: none;
}
#math-coach-box {
    background: rgba(0, 6, 22, 0.9);
    border-color: rgba(0, 255, 255, 0.2);
    pointer-events: none; /* Don't block clicks */
}
/* --- School Scheme: ?school=ibb --- */
body.has-school,
body.has-school #side-panel {
    background: #e30613 !important;
}
body.has-school #canvas-container {
    background: #000616 !important;
}
body.has-school .canvas-branding {
    display: none !important;
}
#canvas-container { position: relative; }
/* Centered greeting for ?name=… in normal mode — anchored to clock area, not viewport */
#visitor-greeting {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% - 15vmin));
    padding: clamp(8px, 1.6vmin, 16px) clamp(14px, 2.8vmin, 28px);
    background: rgba(0, 6, 22, 0.78);
    border: 1px solid rgba(0, 210, 255, 0.45);
    border-radius: 1.2vmin;
    box-shadow: 0 0 28px rgba(0, 210, 255, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    letter-spacing: 0.08em;
    font-size: clamp(10px, 1.5vmin, 17px);
    color: #00d2ff;
    text-shadow: 0 0 18px rgba(0, 210, 255, 0.45);
    text-align: center;
    white-space: normal;
    width: clamp(200px, 37vmin, 460px);
    height: clamp(76px, 17.6vmin, 176px);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2400;
    display: none;
}
#visitor-greeting .vg-comma {
    margin-left: -0.18em;
    letter-spacing: 0;
}
.school-logo {
    display: none;
}
body.school-ibb #school-logo-ibb,
body.school-wkoe #school-logo-wkoe,
body.school-alema #school-logo-alema {
    display: block;
    position: fixed;
    top: 4vmin;
    right: 2vmin;
    height: 14.4vmin;
    width: auto;
    z-index: 2500;
    cursor: pointer;
    filter: drop-shadow(0.5vmin 0.5vmin 0.8vmin rgba(0, 0, 0, 0.85));
}
body.school-ibb #school-logo-ibb {
    height: 11.52vmin;
}
body.school-alema #school-logo-alema {
    filter: none;
    background: #fff;
    border-radius: 1.2vmin;
    padding: 1vmin;
    box-sizing: content-box;
}
/* --- Opening hours: ?open=1 --- */
#opening-hours {
    display: none;
    position: fixed;
    top: calc(4vmin + 14.4vmin + 0.6vmin);
    right: calc(2vmin + 14px);
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    font-family: 'Raleway', sans-serif;
    font-weight: 200;
    color: rgba(230, 237, 243, 0.7);
    font-size: clamp(0.94rem, 1.56vmin, 1.33rem);
    letter-spacing: 0.06em;
    line-height: 1.4;
    text-align: right;
    z-index: 2500;
    pointer-events: none;
}
body.school-ibb #opening-hours {
    top: calc(4vmin + 11.52vmin + 0.6vmin);
}
#opening-hours .oh-title { display: none; }
#opening-hours .oh-row {
    display: grid;
    grid-template-columns: 2.4em 1fr;
    gap: 0.6em;
    justify-content: end;
}
#opening-hours .oh-day { color: rgba(230, 237, 243, 0.55); }
#opening-hours .oh-hours { text-align: right; }
#opening-hours .oh-row.is-today .oh-day,
#opening-hours .oh-row.is-today .oh-hours {
    color: rgb(121, 158, 49);
    font-weight: 400;
}
#opening-hours.is-visible { display: block; }
/* --- Globe Mode: ?globe=1 --- */
#globe-stage {
    position: absolute;
    inset: 0;
    display: none;
    z-index: 0;
    pointer-events: none;
}
/* Match the canvas dial/planetarium nudge (cy = h/2 - 15 in worldclock.js) so the sphere
   stays concentric with the city ring instead of sitting 15px low. */
body.use-globe #globe-stage { display: block; filter: brightness(0.8); transform: translateY(-15px); }
body.use-globe #canvas { position: relative; z-index: 1; background: transparent; }
/* --- DEBUG: Clock-only cover (fades in 2s after load) --- */
:root { --fade-out-ms: 3000ms; --fade-in-ms: 250ms; }
#debug-clock-cover {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9000;
    opacity: 0;
    transition: opacity var(--fade-out-ms) ease;
}
#debug-clock-cover.show { opacity: 1; }
#debug-clock-cover .cover-piece {
    position: absolute;
    background: #000616;
}
/* Clock-only mode (toggled by 'D'): collapse the mini-rail/side-panel grid
   columns so main-content (radial gradient) fills the viewport edge to edge. */
html body.clock-only-mode,
html body.clock-only-mode:has(#side-panel),
html body.clock-only-mode:has(#side-panel.collapsed),
html body.clock-only-mode:not(:has(#side-panel)) {
    grid-template-columns: 0 0 minmax(0, 1fr) !important;
}
/* --- Radial touch control popup (right-click / long-press), ported from voicerecorder --- */
.mini-stack { display: none; }
.mini-stack.popup {
    display: block;
    position: fixed;
    z-index: 9600;
    width: 320px;
    height: 260px;
    padding: 0;
    pointer-events: none; /* only the buttons are tappable */
}
.mini-stack.popup::before {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    width: 520px; height: 380px;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center,
        rgba(0, 210, 255, 0.18) 0%,
        rgba(0, 210, 255, 0.09) 28%,
        rgba(0, 210, 255, 0.035) 55%,
        rgba(0, 210, 255, 0) 75%);
    pointer-events: none;
    z-index: -1;
    filter: blur(6px);
}
.mini-stack.popup .mini-btn {
    position: absolute;
    pointer-events: auto;
    width: 108px;
    height: 44px;
    transform: translate(-50%, -50%);
    border-radius: 12px;
    cursor: pointer;
    outline: none;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.64rem;
    letter-spacing: 0.1em;
    color: rgba(0, 210, 255, 0.95);
    background: rgba(8, 18, 38, 0.96);
    border: 1px solid rgba(0, 210, 255, 0.8);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 210, 255, 0.25);
    transition: background 0.12s, transform 0.12s;
}
.mini-stack.popup .mini-btn:hover  { background: rgba(0, 210, 255, 0.1); }
.mini-stack.popup .mini-btn:active { transform: translate(-50%, -50%) scale(0.95); }
/* two-line toggle buttons: both states stacked, active one cyan, the other dimmed */
.mini-stack.popup .mini-btn.two-line {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    line-height: 1.05;
    padding: 0;
}
.mini-stack.popup .mini-btn.two-line .opt {
    display: block;
    white-space: nowrap;
    color: rgba(150, 165, 185, 0.5);    /* inactive: dim grey */
    transition: color 0.12s;
}
.mini-stack.popup .mini-btn.two-line .opt.is-active {
    color: rgba(0, 210, 255, 0.95);     /* active: cyan */
}
/* HEUTE: contextual button (not a binary toggle), so both lines share one colour.
   today     → cyan, shows "HEUTE" + the current date (informational)
   not today → orange .action, shows "ZURÜCK ZU / HEUTE" (tap resets to today) */
.mini-stack.popup #wc-mb-today {
    color: rgba(0, 210, 255, 0.95);
    border-color: rgba(0, 210, 255, 0.8);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 210, 255, 0.25);
}
.mini-stack.popup #wc-mb-today.two-line .opt { color: rgba(0, 210, 255, 0.95); }
.mini-stack.popup #wc-mb-today:hover { background: rgba(0, 210, 255, 0.1); }
.mini-stack.popup #wc-mb-today.action {
    color: rgb(245, 194, 66);
    border-color: rgb(245, 194, 66);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 10px rgba(245, 194, 66, 0.3);
}
.mini-stack.popup #wc-mb-today.action.two-line .opt { color: rgb(245, 194, 66); }
.mini-stack.popup #wc-mb-today.action:hover { background: rgba(245, 194, 66, 0.12); }
/* Left-edge hamburger trigger (vertically centred): no frame, dezent; stays three bars (no X).
   When the menu is open the bars turn full cyan with a soft glow. */
#wc-menu-btn {
    position: fixed;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
    cursor: pointer;
    z-index: 9500;
}
#wc-menu-btn span, #wc-menu-btn-r span {
    display: block;
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background: rgba(0, 210, 255, 0.5);     /* dezent */
    transition: background 0.15s, box-shadow 0.15s;
}
#wc-menu-btn:hover span, #wc-menu-btn-r:hover span { background: rgba(0, 210, 255, 0.7); }
#wc-menu-btn.open span, #wc-menu-btn-r.open span {
    background: rgba(0, 210, 255, 1);       /* selected: full cyan */
    box-shadow: 0 0 6px rgba(0, 210, 255, 0.6);
}
/* Right-edge hamburger (mirror of the left): opens the layer toggles. */
#wc-menu-btn-r {
    position: fixed;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
    cursor: pointer;
    z-index: 9500;
}
/* Single-line on/off toggle buttons (right menu): on = cyan (default mini-btn), off = dimmed. */
.mini-stack.popup .mini-btn.toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    padding: 0 6px;
}
.mini-stack.popup .mini-btn.toggle.off {
    color: rgba(150, 165, 185, 0.5);
    border-color: rgba(150, 165, 185, 0.35);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
/* --- Hide the shared mini-rail entirely (always) and reclaim its grid column. --- */
/* Override stays lab-local: the central layout files are untouched. */
#mini-rail { display: none !important; }
#cyber-left-chrome { display: none !important; }
/* steady state: cyber-left-chrome.js wraps rail+sidebar into a 2-col shell grid (main = col 2) */
body.cyber-shell-grid { grid-template-columns: 0 minmax(0, 1fr) !important; }
/* before that wrap runs: cyber-layout.css 3-col grid (main = col 3) */
body:not(.cyber-shell-grid):has(#side-panel) { grid-template-columns: 0 0 minmax(0, 1fr) !important; }

/* --- Planetarium: time-lapse play/pause (bottom-right) --- */
#sky-play {
    position: fixed;
    top: 50%; left: 64px;                /* sits right of the left-edge hamburger (14 + 46 + 4 gap), vertically centred */
    transform: translateY(-50%);
    display: none;                       /* shown by JS only in the planetarium */
    align-items: center; justify-content: center;
    width: 44px;                         /* same height as the mini-btn menu buttons */
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 210, 255, 0.85);
    background: rgba(8, 20, 42, 0.65);
    color: rgba(0, 230, 255, 1);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    z-index: 9560;
    font-family: 'Orbitron', sans-serif;
    pointer-events: auto;
    transition: opacity 0.45s ease;     /* smooth idle fade */
    opacity: 1;
}
#sky-play svg { width: 22px; height: 22px; fill: currentColor; display: block; }
#sky-play .icon-pause { display: none; }
#sky-play.playing .icon-play  { display: none; }
#sky-play.playing .icon-pause { display: block; }
#sky-play:hover { background: rgba(0, 210, 255, 0.18); }
#sky-play.playing {                     /* time-lapse running → keep cyan, subtle cyan glow (icon already changes ▶→⏸) */
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.5);
    background: rgba(0, 210, 255, 0.18);
}
#sky-play.is-hidden {                   /* auto-faded after 5 s of pointer idle — any move/touch wakes it */
    opacity: 0;
    pointer-events: none;
}

/* --- Planetarium: live count of visible stars · constellations (bottom-left) --- */
#sky-count {
    position: fixed;
    left: 50%;
    bottom: 5px;                 /* pinned to the bottom edge */
    transform: translateX(-50%);
    display: none;
    z-index: 9550;
    padding: 8px 22px;
    border-radius: 14px;
    background: rgba(8, 20, 42, 0.55);   /* same box as the top #sky-info */
    text-align: center;
    white-space: nowrap;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.7rem;
    line-height: 1.5;
    letter-spacing: 0.06em;
    color: rgba(150, 185, 235, 0.7);
    pointer-events: none;
}
#sky-count .sc-n { display: inline-block; text-align: right; }
#sky-count .scd { display: inline-block; width: 0.82em; text-align: center; }   /* fixed slot per digit → no jitter (Orbitron isn't tabular) */
#sky-count #sc-stars { min-width: 3.3em; }
#sky-count #sc-mw { min-width: 4.1em; }
#sky-count #sc-cons { min-width: 1.7em; }

/* --- Planetarium: clicked-star identification tooltip --- */
#star-info {
    position: fixed;
    display: none;
    z-index: 9560;
    padding: 6px 12px;
    border-radius: 10px;
    background: rgba(8, 20, 42, 0.88);
    border: 1px solid rgba(0, 210, 255, 0.45);
    font-family: 'Orbitron', sans-serif;
    pointer-events: none;
}
#star-info-name {
    color: rgba(0, 210, 255, 0.95);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}
#star-info-sub {
    margin-top: 2px;
    color: rgba(210, 225, 240, 0.8);
    font-size: 0.66rem;
    letter-spacing: 0.04em;
}

/* --- Planetarium top-center info box (city + local date + digit clock), dark-blue 55%, no border --- */
#sky-info {
    position: fixed;
    top: 38px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    z-index: 9550;
    padding: 10px 24px 12px;
    border-radius: 14px;
    background: rgba(8, 20, 42, 0.55);
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    pointer-events: none;
}
#sky-info-line {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 14px;                   /* date · DRESDEN · time on one line */
}
#sky-info-city {
    font-size: 0.82rem;               /* same size as the date; stays prominent via the cyan colour */
    font-weight: 700;
    letter-spacing: 0.14em;
    color: rgba(0, 210, 255, 0.95);
}
#sky-info-date,
#sky-info-time {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: rgba(210, 225, 240, 0.85);
}
/* The time uses the central CyberClock widget (cyber-clock.js/.css). These overrides match the info-line look:
   slim 600 weight, wider equal-width digit slots, and colons in the same colour as the digits (not cyan). */
#sky-info-time.cyber-clock { --cc-size: 0.82rem; --cc-digit: rgba(210, 225, 240, 0.85); --cc-colon: rgba(210, 225, 240, 0.85); --cc-dw: 0.92em; letter-spacing: normal; }
#sky-info-time.cyber-clock .cc-d,
#sky-info-time.cyber-clock .cc-sep { font-weight: 600; }
/* Caption under the box — fades in only while the sat-pass slow-motion is engaged (lapse + a satellite up). */
#sky-info-slomo {
    margin-top: 4px;
    font-size: 0.82rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: lowercase;
    color: rgba(140, 200, 70, 0.85);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
#sky-info-slomo.is-on { opacity: 1; }

/* --- Planetarium constellation search: sits left of the right-edge hamburger, vertically centred to it.
   Hidden when the right menu is open (so the half-circle never overlaps the input). --- */
#sky-search {
    position: fixed;
    top: 50%;
    right: 74px;                                /* 14 (hamb right) + 46 (hamb w) + 14 gap */
    transform: translateY(-50%);
    z-index: 9555;
    display: none;
    width: 220px;
    font-family: 'Orbitron', sans-serif;
}
#sky-search.is-on { display: block; }
/* Hide while the right hamburger menu (mini-stack-r) is open — its half-circle would otherwise overlap. */
body:has(#mini-stack-r.popup) #sky-search { display: none; }
#sky-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 10px;
    background: rgba(8, 20, 42, 0.7);
    border: 1px solid rgba(0, 210, 255, 0.35);
    border-radius: 8px;
    color: rgba(220, 235, 250, 0.95);
    font-family: inherit;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    outline: none;
}
#sky-search-input::placeholder { color: rgba(150, 185, 235, 0.55); }
#sky-search-input:focus { border-color: rgba(0, 210, 255, 0.75); }
#sky-search-list {
    list-style: none;
    margin: 4px 0 0;
    padding: 4px 0;
    max-height: 260px;
    overflow-y: auto;
    background: rgba(8, 20, 42, 0.85);
    border: 1px solid rgba(0, 210, 255, 0.25);
    border-radius: 8px;
    display: none;
    /* Firefox scrollbar — matches the index page (muted thumb, lighter track). */
    scrollbar-width: thin;
    scrollbar-color: rgba(72, 88, 112, 0.95) rgba(38, 46, 64, 0.88);
}
/* WebKit (Chromium / Safari / Edge) scrollbar — also matches the index page. */
#sky-search-list::-webkit-scrollbar { width: 11px; height: 11px; }
#sky-search-list::-webkit-scrollbar-track {
    background: rgba(40, 48, 68, 0.72);
    border-radius: 999px;
    margin: 6px 0;
}
#sky-search-list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(78, 92, 118, 0.95) 0%, rgba(52, 64, 86, 0.92) 100%);
    border-radius: 999px;
    border: 2px solid rgba(34, 42, 58, 0.85);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.35);
}
#sky-search-list::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(92, 108, 134, 0.98) 0%, rgba(68, 82, 108, 0.95) 100%);
    box-shadow: 0 0 10px rgba(100, 118, 145, 0.22);
}
#sky-search-list::-webkit-scrollbar-corner { background: transparent; }
#sky-search-list.is-on { display: block; }
/* Book-index look: name left, secondary right, dotted leader fills the gap between them. */
#sky-search-list li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 14px;
    color: rgba(210, 225, 240, 0.85);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    cursor: pointer;
}
#sky-search-list li:hover,
#sky-search-list li.is-sel { background: rgba(0, 210, 255, 0.14); color: rgba(0, 210, 255, 0.95); }
#sky-search-list li .main { flex: 0 0 auto; }
#sky-search-list li .dots {
    flex: 1 1 auto;
    min-width: 16px;
    border-bottom: 1px dotted rgba(150, 185, 235, 0.28);
    transform: translateY(-3px);                 /* lift the dots so they sit on the typographic baseline */
}
#sky-search-list li .sub {
    flex: 0 0 auto;
    color: rgba(150, 185, 235, 0.65);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
}

/* Satellite table — DOM overlay HUD (top-left of the planetarium). The "sichtbar" countdown per row
   is rendered by the central CyberClock (cyber-clock.js/.css); states colour the cells via [data-st]. */
#sat-table {
    position: absolute;
    top: 14px;
    left: 16px;
    z-index: 9550;
    display: none;
    pointer-events: none;
    font-family: 'Orbitron', sans-serif;
}
#sat-table .st-grid {
    display: grid;
    grid-template-columns: auto 3.4em auto;     /* Höhe column fixed → it never shifts (and so the time column stays put) */
    column-gap: 21px;
    row-gap: 6px;
    align-items: baseline;
}
#sat-table .st-h {                              /* header row — left-aligned, uppercase, brighter */
    font-size: 0.74rem;
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(170, 230, 255, 0.95);
}
#sat-table .st-name,
#sat-table .st-alt,
#sat-table .st-word {                           /* "nie" / "sichtbar" share the value size */
    font-size: 0.8rem;
    font-weight: 600;
}
#sat-table .st-alt,
#sat-table .st-h:nth-child(2) { text-align: right; }   /* HÖHE header + values right-aligned (so the "°" stays anchored) */
#sat-table .st-alt .st-c {                      /* each glyph in an equal-width slot → digits never jitter (Orbitron isn't monospaced) */
    display: inline-block;
    width: 0.64em;
    text-align: center;
}
/* state colours: up = green, below-horizon-but-coming-up = orange (whole row), no data / never = dim */
#sat-table [data-st="up"]     { color: rgba(140, 200, 70, 0.95); }
#sat-table [data-st="down"]   { color: rgb(245, 194, 66); }       /* λ orange — below horizon, counting up */
#sat-table [data-st="rise"]   { color: rgb(245, 194, 66); }       /* same orange for the countdown → whole row orange */
#sat-table [data-st="nodata"] { color: rgba(150, 165, 185, 0.5); }
/* the central clock in the time column: slim 600 weight, sized like the old 11px canvas text, coloured by state */
#sat-table .st-clock.cyber-clock { --cc-size: 0.8rem; --cc-dw: 0.66em; }
#sat-table .st-clock[data-st="up"]   { --cc-digit: rgba(140, 200, 70, 0.95); --cc-colon: rgba(140, 200, 70, 0.95); }
#sat-table .st-clock[data-st="rise"] { --cc-digit: rgb(245, 194, 66); --cc-colon: rgb(245, 194, 66); }
#sat-table .st-clock .cc-d,
#sat-table .st-clock .cc-sep { font-weight: 600; }

/* The two edge hamburgers are planetarium-only: in clock mode the canvas toolbar (globe / direction /
   Orion) covers the clock controls, and the Orion icon is the way into the planetarium. */
body:not(.planetarium-on) #wc-menu-btn,
body:not(.planetarium-on) #wc-menu-btn-r { display: none; }

/* Live-weather overlay on the city image (globe-mode info box): icon + temperature + wind.
   Sky-tinted gradient fades the image into the readout so the text stays legible over any photo. */
#city-info-weather {
    --ciw-icon: 54px;
    --ciw-temp: 1.5rem;
    --ciw-wind: 0.72rem;
    position: absolute;
    top: 0; left: 0; right: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px 14px;
    background: linear-gradient(180deg, rgba(8, 20, 42, 0.82) 0%, rgba(8, 20, 42, 0.42) 58%, rgba(8, 20, 42, 0) 100%);
    pointer-events: none;
    font-family: 'Orbitron', sans-serif;
    color: #eaf4ff;
}
#city-info-weather:not(.is-on) { display: none; }
#ciw-icon {
    width: var(--ciw-icon);
    height: var(--ciw-icon);
    flex: 0 0 auto;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.55));
}
.ciw-readout { display: flex; flex-direction: column; line-height: 1.05; }
#ciw-temp {
    font-size: var(--ciw-temp);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
}
#ciw-wind {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
    font-size: var(--ciw-wind);
    font-weight: 400;
    color: rgba(220, 235, 255, 0.88);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}
#ciw-wind-arrow {
    display: inline-block;
    font-size: 1.05em;
    color: #00d2ff;
    transition: transform 0.3s ease;
}

/* In the planetarium, hide the search box and the "Personalisieren" link (decluttered sky view). */
body.planetarium-on #wc-search,
body.planetarium-on #search-mount,
body.planetarium-on .search-container,
body.planetarium-on #wc-link-icon { display: none !important; }

/* LOCAL-environment marker — shown ONLY when served from localhost/LAN/file. No red ring = you are on the LIVE site. */
.env-local body { box-shadow: inset 0 0 0 4px rgb(176, 36, 24); }   /* Υ red, purely visual — never intercepts clicks */
.env-local .env-badge {
    position: fixed; top: 0; right: 0;
    background: rgb(176, 36, 24); color: #fff;
    font: 700 12px/1 'Orbitron', system-ui, sans-serif; letter-spacing: 2px;
    padding: 6px 14px; border-radius: 0 0 0 8px;
    z-index: 100000; pointer-events: none;
}