/* Frosted Glass (dunkel) - Override auf das Retro-Dark-Layout.
   Ausgewogen wie die helle Variante, nur dunkel mit Cyan-Akzent.
   Nur Farben/Glas - Groessen/Abstaende bleiben aus
   common.css + dark.css + format.css + meinStil.css. */

/* color-scheme aufs Wurzelelement: Firefox/Chromium rendern damit native
   Widgets (Dropdown-Popup, Scrollbars) dunkel statt im hellen OS-Default. */
html { background: #0d1524; color-scheme: dark; }

body {
	margin: 0;
	padding: 11px;
	box-sizing: border-box;
	background:
		radial-gradient(1100px 560px at 12% -8%, rgba(0, 234, 255, .22), transparent 60%),
		radial-gradient(950px 520px at 110% 2%, rgba(0, 180, 255, .15), transparent 55%),
		#0d1524;
	background-attachment: fixed;
	color: #cdd9e5;
}

h1 { color: #eaf6ff; }

.page_margins {
	display: flow-root;            /* enthaelt die Spalten-Floats */
	width: auto;
	min-width: 335px;             /* Navi 145 + Sidebar 170 bleiben immer nebeneinander; darunter scrollt die Seite */
	max-width: 983px;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
	background-image:
		linear-gradient(rgba(0, 234, 255, .28), rgba(0, 234, 255, .28)),   /* Trenner links (navi)  - links verankert */
		linear-gradient(rgba(0, 234, 255, .28), rgba(0, 234, 255, .28)),   /* Trenner rechts (sidebar) - rechts verankert */
		linear-gradient(rgba(13, 18, 26, .5), rgba(13, 18, 26, .5));
	background-size: 1px 100%, 1px 100%, auto;
	background-position: 144px top, right 170px top, left top;
	background-repeat: no-repeat;
	backdrop-filter: blur(11px) saturate(1.2);
	-webkit-backdrop-filter: blur(11px) saturate(1.2);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 14px;
	box-shadow:
		0 0 0 1px rgba(0, 234, 255, .16),
		0 0 80px rgba(0, 234, 255, .16),
		inset 0 1px 0 rgba(255, 255, 255, .09);
}

/* Center-Spalte scrollt unter 420px separat horizontal; Navi/Sidebar bleiben stehen. */
#inhalt { overflow-x: auto; overscroll-behavior-x: contain; }
#inhalt .inhalt_inner { min-width: 420px; }

/* Sidebar buendig an den rechten Trenner: Box fuellt die volle 170px-Spalte
   (statt 160px + 10px Luft daneben), sonst klebt der Inhalt 14px rechts vom
   Trennstrich. Der kleine .info-Innenabstand bleibt. */
div#infoleiste { width: 170px; margin-left: 0; }

a:link, a.link2 { color: #2ad4e6; }
a:visited, a.link2:visited { color: #9bb6da; }
a:hover, a.link2:hover { color: #6fe7f3; background: none; }

#navlist a,
#navlist a:visited,
#navlist div,
#navlist div.menup {
	background: rgba(255, 255, 255, .05);
	background-image: none;
	border: 1px solid rgba(0, 234, 255, .14);
	border-radius: 8px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 0 12px rgba(0, 234, 255, .06);
	transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

#navlist a, #navlist a:visited { color: #7fe4f0; }
#navlist a:hover {
	color: #fff;
	background: rgba(0, 234, 255, .1);
	border-color: #2ad4e6;
	background-image: none;
	box-shadow: 0 0 20px rgba(0, 234, 255, .5), inset 0 0 13px rgba(0, 234, 255, .14);
}

#navlist div {                       /* aktive Seite */
	color: #fff;
	background: rgba(0, 234, 255, .14);
	border-color: #2ad4e6;
	box-shadow: 0 0 20px rgba(0, 234, 255, .45), inset 0 0 13px rgba(0, 234, 255, .16);
}

#navlist div.menup {
	background: none;
	border: none;
	box-shadow: none;
	color: #6f86b0;
}

#navlist div.leer {
	background: none;
	background-image: none;
	border: none;
	box-shadow: none;
}

div.l-r_objekt_rahmen {
	display: flow-root;     /* volle Breite + enthaelt den Float -> rechtes_objekt fuellt nach rechts */
	background: rgba(255, 255, 255, .03);
	border: 1px solid rgba(0, 234, 255, .1);
	border-radius: 10px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 36px rgba(0, 234, 255, .09);
}

#navend ul li a,
#navend ul li a:visited {
	padding: 3px 7px;
	background: rgba(255, 255, 255, .05);
	background-image: none;
	border: 1px solid rgba(0, 234, 255, .14);
	border-radius: 8px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 0 12px rgba(0, 234, 255, .06);
	color: #7fe4f0;
}

#navend ul li a:hover {
	padding: 3px 7px;
	color: #fff;
	background: rgba(0, 234, 255, .1);
	border: 1px solid #2ad4e6;
	border-radius: 8px;
	box-shadow: 0 0 20px rgba(0, 234, 255, .5), inset 0 0 13px rgba(0, 234, 255, .14);
}

#navlist a:active,
#navend ul li a:active {
	color: #fff;
	border-color: #2ad4e6;
	box-shadow: 0 0 21px rgba(0, 234, 255, .85), inset 0 0 15px rgba(0, 234, 255, .26);
}

table, td { border-color: rgba(0, 234, 255, .18); }

select,
textarea {
	background: rgba(255, 255, 255, .06);
	color: #cdd9e5;
	border: 1px solid rgba(0, 234, 255, .22);
	border-radius: 6px;
}

/* Optionsliste auf die Frosted-Glass-Palette abgestimmt: Navy-Grund,
   Cyan-Akzent fuer die aktive Auswahl. */
select option {
	background: #102038;
	color: #cdd9e5;
}

select option:hover {
	background: #16466a;
	color: #fff;
}

select option:checked {
	background: #2ad4e6;
	color: #06222e;
}

textarea {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 24px rgba(0, 234, 255, .08);
}

textarea:focus {
	outline: none;
	border-color: #2ad4e6;
	box-shadow: 0 0 18px rgba(0, 234, 255, .4), inset 0 0 12px rgba(0, 234, 255, .12);
}

.circle { stroke: rgba(0, 234, 255, .22); }
.hour-marks { fill: #cdd9e5; stroke: #cdd9e5; }
.hour-arm, .minute-arm { fill: #cdd9e5; stroke: #cdd9e5; }
.second-arm { fill: #2ad4e6; stroke: #2ad4e6; }
.mid-circle { fill: #2ad4e6; }