/**
 * Stellaro.net - Cosmic Quality
 * Gestaltung der Beobachtungsseite. Haelt sich an die Variablen des
 * Haupt-Stylesheets, damit die Seite nicht aus dem Rahmen faellt.
 */

.pscq {
	--pscq-line: rgba(255, 255, 255, .10);
	--pscq-panel: rgba(10, 14, 32, .72);
	--pscq-gold: var(--sn-gold, #f3c969);
	--pscq-muted: var(--sn-muted, #9aa4cc);
	margin: 8px 0 0;
}

.pscq-intro {
	color: var(--pscq-muted);
	font-size: .95rem;
	line-height: 1.6;
	max-width: 70ch;
	margin-bottom: 18px;
}

/* Einleitung und Statushinweis sitzen unter der Karte und treten dort
   bewusst zurueck: kleine Schrift, schmaler Rahmen. Erst das Bild, dann
   die Erklaerung. */
.pscq-notes { margin-top: 14px; }
.pscq-notes .pscq-intro {
	font-size: .78rem;
	line-height: 1.5;
	max-width: none;
	margin-bottom: 8px;
}
.pscq-notes .pscq-disclaimer {
	font-size: .74rem;
	line-height: 1.45;
	padding: 8px 11px;
	border-radius: 9px;
	margin-bottom: 0;
}

.pscq-intro strong { color: #e8ecfb; font-weight: 600; }

/* Hinweis auf den Status der Darstellung. Steht bewusst oben und bleibt
   sichtbar - die Trennung von Messung, Rechnung und Darstellung ist der
   Kern des Projekts, nicht das Kleingedruckte. */
.pscq-disclaimer {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	border: 1px solid rgba(243, 201, 105, .28);
	background: rgba(243, 201, 105, .06);
	border-radius: 12px;
	padding: 12px 15px;
	margin-bottom: 18px;
	font-size: .88rem;
	line-height: 1.55;
	color: #cdd5ee;
}
.pscq-disclaimer b { color: var(--pscq-gold); }

/* ------------------------------ Bühne ------------------------------ */
.pscq-stage {
	position: relative;
	border: 1px solid var(--pscq-line);
	border-radius: 16px;
	overflow: hidden;
	background: #05070f;
}

.pscq-canvas {
	position: relative;
	width: 100%;
	height: min(68vh, 640px);
	min-height: 360px;
}

.pscq-canvas canvas { display: block; width: 100%; height: 100%; }

.pscq-label {
	position: absolute;
	transform: translate(10px, -50%);
	font-size: .74rem;
	letter-spacing: .04em;
	color: #cfd7f0;
	background: rgba(6, 9, 22, .55);
	border: 1px solid transparent;
	border-radius: 20px;
	padding: 2px 8px;
	pointer-events: auto;
	cursor: pointer;
	white-space: nowrap;
	user-select: none;
}
.pscq-label:hover { border-color: var(--pscq-line); }
.pscq-label.is-on { border-color: var(--pscq-gold); color: var(--pscq-gold); }

/* --------------------------- Bedienleiste --------------------------- */
.pscq-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 16px;
	align-items: center;
	/* Alle Zahlen in der Leiste mit gleicher Zeichenbreite - sonst
	   verschieben laufende Werte ihre Nachbarn. */
	font-variant-numeric: tabular-nums;
	padding: 12px 14px;
	border-top: 1px solid var(--pscq-line);
	background: var(--pscq-panel);
}

.pscq-group {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: .82rem;
	color: var(--pscq-muted);
}

.pscq-group > label { white-space: nowrap; }

.pscq-bar select,
.pscq-bar input[type="datetime-local"] {
	background: rgba(255, 255, 255, .05);
	border: 1px solid var(--pscq-line);
	color: #e6eaf8;
	border-radius: 8px;
	padding: 5px 8px;
	font-size: .82rem;
	font-family: inherit;
	/* Gleich breite Ziffern und eine feste Breite: bei laufender Zeit darf
	   das Feld nicht atmen, sonst zittert die ganze Leiste mit. */
	font-variant-numeric: tabular-nums;
	width: 13.5rem;
	flex: 0 0 auto;
}

/* Die aufgeklappte Auswahlliste zeichnet der Browser selbst und nimmt dort
   oft einen weissen Grund. Mit der hellen Schrift von oben waere sie dann
   praktisch unlesbar, also hier ausdruecklich dunkle Schrift auf Weiss. */
.pscq-bar select option,
.pscq-bar select optgroup {
	background: #ffffff;
	color: #12172a;
}

.pscq-bar input[type="range"] { width: 130px; accent-color: var(--pscq-gold); }

.pscq-btn {
	background: rgba(255, 255, 255, .06);
	border: 1px solid var(--pscq-line);
	color: #e6eaf8;
	border-radius: 8px;
	padding: 6px 12px;
	font-size: .82rem;
	cursor: pointer;
	font-family: inherit;
}
.pscq-btn:hover { border-color: var(--pscq-gold); color: var(--pscq-gold); }
.pscq-play { min-width: 44px; font-size: .9rem; }

.pscq-check {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	white-space: nowrap;
}
.pscq-check input { accent-color: var(--pscq-gold); }

.pscq-val {
	min-width: 76px;
	font-variant-numeric: tabular-nums;
	color: #e6eaf8;
}

/* ----------------------------- Cockpit ----------------------------- */
.pscq-cockpit {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	margin-top: 16px;
	max-width: 100%;
}

/* min-width: 0 ist hier Pflicht, nicht Kosmetik: Rasterzellen haben von
   sich aus min-width: auto und wachsen dann mit ihrem breitesten Kind.
   Die Messwerttabelle hat eine Mindestbreite, also hat sie die Tafel und
   damit das ganze Cockpit ueber den Rahmen der Seite hinausgeschoben.
   Mit 0 bleibt die Tafel in der Spalte und die Tabelle rollt in sich. */
.pscq-panel {
	min-width: 0;
	max-width: 100%;
	border: 1px solid var(--pscq-line);
	border-radius: 14px;
	background: var(--pscq-panel);
	padding: 14px 16px;
}

.pscq-panel h3 {
	margin: 0 0 10px;
	font-size: .78rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--pscq-muted);
	font-weight: 600;
}

.pscq-clock,
.pscq-sum {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 26px;
	margin-bottom: 12px;
}
.pscq-clock > div,
.pscq-sum > div { display: flex; flex-direction: column; gap: 2px; }
.pscq-clock span,
.pscq-sum span { font-size: .72rem; color: var(--pscq-muted); letter-spacing: .05em; }
.pscq-clock b,
.pscq-sum b { font-size: .9rem; color: #e8ecfb; font-variant-numeric: tabular-nums; font-weight: 600; }
.pscq-sum { padding-top: 10px; border-top: 1px solid var(--pscq-line); }

/* Elf Spalten passen in der schmalen Cockpitspalte nicht nebeneinander.
   Statt Werte zu verstecken oder umzubrechen darf die Tabelle waagerecht
   rollen - die Zahlen bleiben vollstaendig und in einer Zeile lesbar. */
.pscq-tablewrap {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	/* Der Schatten am rechten Rand verraet, dass rechts noch Zahlen stehen.
	   Er verschwindet von selbst, sobald ganz nach rechts gerollt wurde. */
	background:
		linear-gradient(to left, rgba(5, 7, 15, .9), rgba(5, 7, 15, 0)) right center / 26px 100% no-repeat,
		linear-gradient(to right, rgba(5, 7, 15, .9), rgba(5, 7, 15, 0)) left center / 26px 100% no-repeat;
	background-attachment: local, local;
}

.pscq-table {
	width: 100%;
	min-width: 640px;
	border-collapse: collapse;
	font-size: .82rem;
	font-variant-numeric: tabular-nums;
}
.pscq-table th {
	text-align: right;
	font-weight: 600;
	font-size: .7rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--pscq-muted);
	padding: 6px 8px;
	border-bottom: 1px solid var(--pscq-line);
	white-space: nowrap;
}
.pscq-table th:first-child { text-align: left; }
.pscq-table td {
	text-align: right;
	padding: 5px 8px;
	border-bottom: 1px solid rgba(255, 255, 255, .04);
	color: #dfe5f7;
	white-space: nowrap;
}
.pscq-table td:first-child { text-align: left; }
.pscq-table tbody tr { cursor: pointer; }
.pscq-table tbody tr:hover { background: rgba(255, 255, 255, .035); }
.pscq-table tbody tr.is-on { background: rgba(243, 201, 105, .10); }
.pscq-table .pscq-z { color: var(--pscq-gold); }
.pscq-c { display: flex; align-items: center; gap: 8px; }
.pscq-c i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }

.pscq-pair { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--pscq-line); }
.pscq-pair h4 { margin: 0 0 10px; font-size: .85rem; color: var(--pscq-gold); font-weight: 600; }
.pscq-pairgrid { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.pscq-pairgrid > div { display: flex; flex-direction: column; gap: 2px; }
.pscq-pairgrid span { font-size: .72rem; color: var(--pscq-muted); }
.pscq-pairgrid b { font-size: .95rem; color: #e8ecfb; font-variant-numeric: tabular-nums; }
.pscq-pairgrid i { font-size: .7rem; color: var(--pscq-muted); font-style: normal; }

/* -------------------------- Weltraumwetter -------------------------- */
.pscq-wx-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pscq-wx {
	flex: 1 1 130px;
	display: flex;
	flex-direction: column;
	gap: 3px;
	border: 1px solid var(--pscq-line);
	border-radius: 11px;
	padding: 10px 12px;
	background: rgba(255, 255, 255, .025);
}
.pscq-wx span { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--pscq-muted); }
.pscq-wx b { font-size: 1.25rem; color: #e8ecfb; font-variant-numeric: tabular-nums; line-height: 1.1; }
.pscq-wx i { font-size: .7rem; font-style: normal; color: var(--pscq-muted); }
.pscq-wx.is-active { border-color: rgba(243, 201, 105, .45); }
.pscq-wx.is-active b { color: var(--pscq-gold); }
.pscq-wx.is-storm { border-color: rgba(232, 122, 122, .5); background: rgba(232, 122, 122, .07); }
.pscq-wx.is-storm b { color: #ff9a9a; }
.pscq-wx.is-severe { border-color: rgba(255, 90, 90, .7); background: rgba(255, 90, 90, .12); }
.pscq-wx.is-severe b { color: #ff7070; }
.pscq-wx-src { margin-top: 10px; font-size: .72rem; color: var(--pscq-muted); }
.pscq-wx-err { font-size: .82rem; color: var(--pscq-muted); }

/* ----------------------------- Legende ----------------------------- */
.pscq-legend {
	margin-top: 16px;
	font-size: .82rem;
	line-height: 1.65;
	color: var(--pscq-muted);
}
.pscq-legend h4 { color: #e8ecfb; font-size: .85rem; margin: 14px 0 6px; font-weight: 600; }
/* Keine Begrenzung der Zeilenlaenge: die Legende soll die volle Breite
   der Seite nutzen, sonst bleibt rechts zu viel Flaeche leer. */
.pscq-legend p { margin: 0 0 8px; max-width: none; }
.pscq-legend code {
	background: rgba(255, 255, 255, .06);
	border-radius: 4px;
	padding: 1px 5px;
	font-size: .9em;
}

/* ------------------------------ Gate ------------------------------- */
.pscq-gate { text-align: center; }
.pscq-gate h3 { color: var(--pscq-gold); }
.pscq-gate-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }

.pscq-noscript { color: var(--pscq-muted); font-size: .9rem; }

/* ------------------------------ Mobil ------------------------------ */
@media (min-width: 900px) {
	.pscq-cockpit { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
	.pscq-canvas { height: 56vh; min-height: 300px; }
	.pscq-bar { gap: 8px 12px; padding: 10px; }
	.pscq-bar input[type="range"] { width: 100px; }
	.pscq-bar input[type="datetime-local"] { width: 12rem; }
	.pscq-table { font-size: .74rem; }
	.pscq-table th, .pscq-table td { padding: 4px 5px; }
	.pscq-table th:nth-child(4), .pscq-table td:nth-child(4) { display: none; }
	.pscq-wx { flex: 1 1 100px; }
	.pscq-wx b { font-size: 1.05rem; }
}

/* ------------------------------------------------------------------ *
 * Astrologie-Layer
 * ------------------------------------------------------------------ */

/* Tierkreissymbole am Ring. Als HTML, damit sie in jeder Zoomstufe
   scharf bleiben und vorgelesen werden koennen. */
.pscq-glyph {
	position: absolute;
	transform: translate(-50%, -50%);
	font-size: 1.15rem;
	line-height: 1;
	color: #cfd9ff;
	text-shadow: 0 0 6px rgba(20, 30, 70, .9);
	opacity: .8;
	pointer-events: none;
	user-select: none;
}

.pscq.is-astro .pscq-glyph { opacity: .92; }

/* Kopfzeile des Layers: welcher Tierkreis, welcher Startpunkt. */
.pscq-frame b { letter-spacing: .01em; }
.pscq-frame i {
	display: block;
	font-style: normal;
	font-size: .76rem;
	opacity: .7;
}

/* Abweichungsspalte gegen die Swiss Ephemeris. Farbe ist eine Aussage
   ueber die eigene Rechnung, nicht ueber den Himmel. */
.pscq-dev { text-align: right; font-variant-numeric: tabular-nums; }
.pscq-dev .is-ok { color: #8fd6a8; }
.pscq-dev .is-warn { color: #e8cf7a; }
.pscq-dev .is-off { color: #e89a8a; }

/* Der Astrologie-Block in der Leiste wird leicht abgesetzt, weil er die
   Ansicht von Astronomie auf Deutungsraster umschaltet. */
.pscq-astrogroup {
	border-left: 1px solid rgba(160, 180, 240, .22);
	padding-left: .7rem;
}
.pscq-astro-main { font-weight: 600; }
.pscq-aygroup { display: inline-flex; align-items: center; gap: .35rem; }
.pscq-aygroup[hidden] { display: none; }

/* Der Tierkreis wird im Tabellenkopf benannt, damit oben und unten
   nachweisbar dasselbe System gemeint ist. */
.pscq-th-sys {
	display: block;
	font-style: normal;
	font-size: .72rem;
	font-weight: 400;
	opacity: .7;
}

/* Sichtbare Fehlermeldung ueber dem Bild. Lieber eine erklaerende Zeile
   als eine schwarze Flaeche, die niemand einordnen kann. */
.pscq-err {
	position: absolute;
	left: 12px; right: 12px; top: 12px;
	padding: 8px 12px;
	border-radius: 6px;
	background: rgba(120, 20, 20, .88);
	border: 1px solid rgba(255, 140, 140, .45);
	color: #ffe8e8;
	font-size: .8rem;
	line-height: 1.4;
	z-index: 5;
}

/* ------------------------------------------------------------------ *
 * Gesperrter Astrologie-Layer
 *
 * Kein graues Feld mit Schloss, das nur aergert: eine ruhige Zeile, die
 * sagt was fehlt und wohin man klickt. Die freie Ansicht bleibt der Held
 * der Seite.
 * ------------------------------------------------------------------ */
.pscq-astrolock {
	gap: 8px;
	padding: 5px 10px;
	border: 1px dashed var(--pscq-line);
	border-radius: 8px;
	font-size: .8rem;
	color: var(--pscq-muted);
}
.pscq-astrolock .pscq-lock { color: var(--pscq-gold); font-size: .95rem; }
.pscq-astrolock .pscq-lockcta {
	color: var(--pscq-gold);
	text-decoration: none;
	border-bottom: 1px solid rgba(243, 201, 105, .45);
}
.pscq-astrolock .pscq-lockcta:hover { border-bottom-color: var(--pscq-gold); }

.pscq-pronote {
	margin: 14px 0 0;
	padding: 10px 12px;
	border-left: 3px solid var(--pscq-gold);
	background: rgba(243, 201, 105, .07);
	border-radius: 0 6px 6px 0;
	font-size: .84rem;
}
.pscq-pronote a { color: var(--pscq-gold); }

/* ------------------------------------------------------------------ *
 * Vollbild
 *
 * Im Vollbild bleibt alles bedienbar: die Leiste sitzt unten, die
 * Messtafeln schweben rechts ueber dem Bild. Zurueck tritt nur, was
 * Fliesstext ist - Einleitung, Hinweis, Legende. Der Knopf "Messtafeln"
 * raeumt auch die schwebenden Tafeln weg, wenn jemand nur das Bild will.
 *
 * WICHTIG, hier lag am 29.09.2026 ein Fehler: die Regeln hingen zuerst an
 * :fullscreen und :-webkit-full-screen, beide in derselben Selektorliste.
 * Kennt ein Browser einen Selektor der Liste nicht, verwirft er die ganze
 * Regel - in Firefox war damit der komplette Vollbildmodus wirkungslos,
 * die Texte blieben stehen und die Bedienleiste rutschte aus dem Bild.
 * Deshalb jetzt eine schlichte Klasse, die das Skript setzt. Die haelt
 * jeder Browser aus.
 * ------------------------------------------------------------------ */

.pscq-panels { display: none; }

.pscq.pscq-isfull {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	background: #05070f;
	overflow: hidden;
}

/* Fliesstext tritt zurueck - er ist im Vollbild nicht die Aufgabe. */
.pscq.pscq-isfull .pscq-intro,
.pscq.pscq-isfull .pscq-disclaimer,
.pscq.pscq-isfull .pscq-legend,
.pscq.pscq-isfull .pscq-noscript { display: none; }

.pscq.pscq-isfull .pscq-stage {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
}

.pscq.pscq-isfull .pscq-canvas {
	flex: 1 1 auto;
	height: auto;
	min-height: 0;
}

/* Die Leiste darf wachsen, aber nie das Bild auffressen. Wird sie zu
   hoch, scrollt sie in sich - kein Regler geht dabei verloren. */
.pscq.pscq-isfull .pscq-bar {
	flex: 0 0 auto;
	max-height: 40vh;
	overflow-y: auto;
	background: rgba(8, 11, 24, .92);
}

/* Messtafeln schweben rechts oben ueber dem Bild. */
.pscq.pscq-isfull .pscq-cockpit {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 6;
	width: min(400px, 38vw);
	max-height: calc(100% - 28px);
	overflow-y: auto;
	margin: 0;
	gap: 10px;
	overscroll-behavior: contain;
}

.pscq.pscq-isfull .pscq-panel { background: rgba(8, 11, 24, .88); }

.pscq.pscq-isfull .pscq-panels { display: inline-block; }

.pscq.pscq-isfull.pscq-nopanels .pscq-cockpit { display: none; }

/* Alles, was sonst noch im Block steckt (Wetterteil unter der Karte),
   bleibt im Vollbild aussen vor. */
.pscq.pscq-isfull .pscq-below { display: none; }

@media (max-width: 860px) {
	.pscq.pscq-isfull .pscq-cockpit {
		position: static;
		width: auto;
		max-height: 26vh;
		margin: 0 10px 10px;
	}
}

/* Weltraumwetter unter der Karte. Sichtbar abgesetzt, damit klar ist:
   hier endet das Modell und es beginnt der Messbericht. */
.pscq-below {
	margin-top: 40px;
	padding-top: 28px;
	border-top: 1px solid var(--pscq-line);
}
.pscq-below-h { margin: 0 0 6px; font-size: 1.6rem; }

.pscq-beta{margin:-.4rem 0 .9rem;font-size:.78rem;line-height:1.4;opacity:.65}


/* Hinweis, wenn der Rechner kein WebGL kann. Statt einer schwarzen Flaeche
   eine Erklaerung - und darunter laufen Messwerte und Wetter weiter. */
.pscq-nogl {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.7rem;
	height: 100%;
	min-height: 260px;
	padding: 2rem clamp(1rem, 4vw, 3rem);
	box-sizing: border-box;
	text-align: center;
	color: #cfd8f0;
	background: radial-gradient(ellipse at 50% 40%, #121a33 0%, #05070f 75%);
	border-radius: inherit;
}
.pscq-nogl strong { font-size: 1.05rem; color: #f2d98c; }
.pscq-nogl p { margin: 0; font-size: 0.92rem; line-height: 1.55; opacity: 0.88; }
.pscq-nogl .pscq-nogl-detail { font-size: 0.78rem; opacity: 0.55; }