﻿/* Seitenaufbau */

.page_margins {
	text-align: left;
	display: inline-block;
}

div#navigation {
	width: 145px;
	float: left;
	margin: 0;
	padding: 0;
	overflow: hidden;
	text-align: left;
}

div#inhalt {
	padding-top: 3px;
	padding-left: 7px;
	padding-right: 7px;
	padding-bottom: 7px; /* Logo am Seitenende: unten gleicher Abstand wie links */
	margin-left: 145px;
	margin-right: 170px;
	margin-top: 0;
}

/* Letztes Element im Footer: als Block, sonst kommt der Schriftlinien-Spalt dazu */
img.logo_unten {
	display: block;
}

/* Download-Pfeil neben Text: vertikal mittig statt auf der Grundlinie */
img.dl {
	vertical-align: middle;
}

/* Sprachflaggen: weicher Schlagschatten (heller Hintergrund).
   Dark-Themes ueberschreiben das in themes/dark/dark.css mit einem Glow. */
.langflag {
	margin: 5px 3px;
	filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .6));
}

/* Fehlerseiten-Ueberschrift: Warn-Icon exakt vertikal mittig zum Text */
h1.fehler {
	display: flex;
	align-items: center;
	gap: .35em;
}

/* Textarea nie breiter als die Inhaltsspalte: cols (z.B. 75 bei den Codern)
   misst Chrome breiter als die ~650px-Spalte -> die Box laeuft ueber. max-width
   kappt das, ohne schmalere Felder (md5-Ausgabe cols=40) zu strecken. */
textarea {
	max-width: 100%;
	box-sizing: border-box;
}

/* Fehlerseiten-Typewriter (animierte bzw. statische Fehlerzeilen).
   Lag frueher als <style> im <body> des Partials -> in IE6 unzuverlaessig. */
.error-typewriter {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: .4em 0 1em;
	padding: .4em;
	font-family: monospace;
	white-space: pre;
	overflow: auto;
	resize: none;
}

/* Dreieck sitzt durch den Schatten-Platzhalter hoch in seiner Box -> optisch nachjustieren */
h1.fehler picture {
	position: relative;
	top: .12em;
}

div#infoleiste {
	width: 160px;
	float: right;
	margin-left: 10px;
	padding: 0;
	overflow: hidden;
}

div.info {
	padding-left: 4px;
	padding-right: 2px;
	padding-top: 5px;
	padding-bottom: 0;
	margin-left: 0;
	margin-bottom: 0;
	display: block;
}


img.mar8 {
	margin-right: 5px;
	margin-bottom: 5px;
}

div.bild1 {
	width: 320px;
}

div.bild2 {
	width: 320px;
	float: right;
	}

div.l-r_objekt_rahmen {
	display: inline-block;
}

div.linkes_objekt {
	width: 320px;
	float: left;
}

div.rechtes_objekt {
	margin-left: 330px;
}

div.ico_48_b {
	width: 55px;
	float: left;
}

div.ico_48_t {
	margin-left: 65px;
}

div.inhse {
	width: 650px;
	display: inline-block;
	}

div.csbild {
	width: 420px;
	float: right;
}

div.cstext {
	width: 230px;
}

div.bild {
	width: 220px;
	height: 150px;
}

div.bildtext {
	width: 400px;
	float: right;
}

div.infoleft {
	width: 130px;
	margin-left : 5px;
}

div#suche {
	width: 650px;
	position: absolute;
}

div#suche2 {
	height: 800px;
}

div.zeichnre {
	width: 325px;
	float: right;
}

div.zeichnli {
	width: 325px;
}

pre.hex {
	font-size: 1.3em;
}

/* Transparent box ensuring arms center properly. */
.sizing-box {
	fill: none;
}

/* Make all arms rotate around the same center point. */
/* Optional: Use transition for animation. */
#hour,
#minute,
#second {
	transform-origin: 300px 300px;
	transition: transform .5s ease-in-out;
}
