/* Frosted Glass (hell) - Override auf das Retro-Light-Layout.
   Nur Farben/Glas - Groessen/Abstaende bleiben aus
   common.css + light.css + format.css + meinStil.css. */

html { background: #eaf0f7; }

body {
	margin: 0;
	padding: 11px;
	box-sizing: border-box;
	background:
		radial-gradient(1000px 500px at 10% -10%, rgba(9, 105, 218, .14), transparent 60%),
		radial-gradient(900px 460px at 112% 4%, rgba(0, 200, 255, .12), transparent 55%),
		#eaf0f7;
	background-attachment: fixed;
	color: #1f2328;
}

h1 { color: #0a2540; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }

.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(9, 105, 218, .3), rgba(9, 105, 218, .3)),   /* Trenner links (navi)  - links verankert */
		linear-gradient(rgba(9, 105, 218, .3), rgba(9, 105, 218, .3)),   /* Trenner rechts (sidebar) - rechts verankert */
		linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, .55));
	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.3);
	-webkit-backdrop-filter: blur(11px) saturate(1.3);
	border: 1px solid rgba(255, 255, 255, .7);
	border-radius: 14px;
	box-shadow:
		0 0 0 1px rgba(9, 105, 218, .08),
		0 24px 55px rgba(31, 35, 40, .14);
}

/* 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: #0969da; }
a:visited, a.link2:visited { color: #4a7bc4; }
a:hover, a.link2:hover { color: #0a58ca; background: none; }

#navlist a,
#navlist a:visited,
#navlist div,
#navlist div.menup {
	background: rgba(255, 255, 255, .55);
	background-image: none;
	border: 1px solid rgba(9, 105, 218, .14);
	border-radius: 8px;
	box-shadow: 0 1px 2px rgba(31, 35, 40, .05);
	transition: color .15s ease, background .15s ease, border-color .15s ease;
}

#navlist a, #navlist a:visited { color: #0969da; }
#navlist a:hover {
	color: #000;
	background: rgba(11, 182, 212, .07);
	border-color: #0bb6d4;
	background-image: none;
	box-shadow: 0 0 12px rgba(11, 182, 212, .22), inset 0 0 8px rgba(11, 182, 212, .07);
}

#navlist div {                       /* aktive Seite */
	color: #000;
	background: rgba(11, 182, 212, .09);
	border-color: #0bb6d4;
	box-shadow: 0 0 14px rgba(11, 182, 212, .28), inset 0 0 9px rgba(11, 182, 212, .09);
}

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

#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, .5);
	border: 1px solid rgba(9, 105, 218, .12);
	border-radius: 10px;
}

#navend ul li a,
#navend ul li a:visited {
	padding: 3px 7px;
	background: rgba(255, 255, 255, .55);
	background-image: none;
	border: 1px solid rgba(9, 105, 218, .14);
	border-radius: 8px;
	box-shadow: 0 1px 2px rgba(31, 35, 40, .05);
	color: #0969da;
}

#navend ul li a:hover {
	padding: 3px 7px;
	color: #000;
	background: rgba(11, 182, 212, .07);
	border: 1px solid #0bb6d4;
	border-radius: 8px;
	box-shadow: 0 0 12px rgba(11, 182, 212, .22), inset 0 0 8px rgba(11, 182, 212, .07);
}

#navlist a:active,
#navend ul li a:active {
	color: #000;
	border-color: #0bb6d4;
	box-shadow: 0 0 13px rgba(11, 182, 212, .55), inset 0 0 11px rgba(11, 182, 212, .2);
}

table, td { border-color: rgba(9, 105, 218, .2); }

select,
textarea {
	background: rgba(255, 255, 255, .7);
	color: #1f2328;
	border: 1px solid rgba(9, 105, 218, .25);
	border-radius: 6px;
}

textarea {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 20px rgba(9, 105, 218, .08);
}

textarea:focus {
	outline: none;
	border-color: #0969da;
	box-shadow: 0 0 16px rgba(9, 105, 218, .3), inset 0 1px 0 rgba(255, 255, 255, .6);
}

.circle { stroke: rgba(9, 105, 218, .25); }
.hour-marks { fill: #57606a; stroke: #57606a; }
.hour-arm, .minute-arm { fill: #1f2328; stroke: #1f2328; }
.second-arm { fill: #0bb6d4; stroke: #0bb6d4; }
.mid-circle { fill: #0bb6d4; }