/* Legacy-Rahmen der Hauptseite: Seitenrahmen, Kopfbereich, Menüs und Seitenelemente. */
.space { height:8px; width:1px; }
/* Ruhiger Abstand zwischen Footer und Fensterrand. */
#space4 { height:24px; }
.main_center { left:50%; margin-left:-500px; width:1000px; }
.header_height { height:200px; }
.footer_height { height:80px; }
.body_width { position:relative; min-width:1040px; }
.legacy-body { background-color:gray; }
.fixed-background { position:fixed; left:0; top:0; right:0; bottom:0; }
.full-width { width:100%; }
.menu-front { z-index:100; }
.menu-right { right:0; z-index:100; }
.menu-left-highlight { left:4px; }
.menu-right-highlight { right:3px; }
.legacy-inner-table { position:relative; height:100%; }
.fixed-table { table-layout:fixed; }
.fixed-full-table { table-layout:fixed; height:100%; }
.title-image { position:absolute; right:0px; top:-20px; height:180px; }
/* Links mit dem 6px-Innenabstand des Content-Bereichs buendig. */
.header-title { font-size:40px; padding:20px 20px 20px 6px; font-weight:bold; color:#333333; }
.site-title-domain { color:#68961A; }
.content-frame { position:relative; width:100%; min-height:400px; text-align:center; }
.content-inner { text-align:left; display:block; margin-left:6px; margin-right:6px; }
.footer-middle { vertical-align:middle; }
.footer-content { position:relative; width:100%; height:100%; color:#888888; }
.footer-link { position:absolute; right:0; color:#888888; }
.menu_out { position:absolute; margin-top:118px; height:62px; width:100%; background-image:url("../img/layout/menu_bg.png"); }
.menu { position:absolute; margin-top:110px; height:62px; }
.menu_right_end { width:29px; height:62px; background-image:url("../img/layout/menu_right_end.png"); }
.menu_left_end { width:30px; height:62px; background-image:url("../img/layout/menu_left_end.png"); }
.menu_btn { position:relative; background-image:url("../img/layout/menu_bg.png"); height:100%; }
.menu_div_btn { position:absolute; left:1px; right:1px; bottom:4px; top:4px; border-left:solid 1px #F0F0F0; border-right:solid 1px #F0F0F0; }
.menu-left-highlight { border-left:none; }
.menu-right-highlight { border-right:none; }
.outer-menu-line { position:absolute; top:8px; height:50px; width:0; border-left:solid 1px #F0F0F0; }
.outer-menu-line-left { left:4px; }
.outer-menu-line-right { right:4px; }
.menu1_width { width:500px; }
.menu2_width { width:168px; }
table.menu_bg { width:100%; height:100%; border:none; table-layout:fixed; }
table.menu_bg td { margin:0px; padding:0px; border:none; text-align:center; vertical-align:middle; font-size:20px; color:#555555; }

/* Der Tabellenrahmen setzt die transparenten PNG-Ecken pixelgenau zusammen; border-radius wäre keine IE6-Baseline. */
.corner_lt { width:30px; height:30px; background-image:url("../img/layout/corner_lt.png"); }
.corner_t { height:30px; background-image:url("../img/layout/corner_t.png"); }
.corner_rt { width:30px; height:30px; background-image:url("../img/layout/corner_rt.png"); }
.corner_l { width:30px; background-image:url("../img/layout/corner_l.png"); }
.corner_body { position:relative; background-color:white; }
.corner_r { width:30px; background-image:url("../img/layout/corner_r.png"); }
.corner_lb { width:30px; height:30px; background-image:url("../img/layout/corner_lb.png"); }
.corner_b { height:30px; background-image:url("../img/layout/corner_b.png"); }
.corner_rb { width:30px; height:30px; background-image:url("../img/layout/corner_rb.png"); }

.navigation li>ul { display:none; }
.navigation li:hover>ul { display:block; }
/* Kein JavaScript-Menuezustand: Touch bleibt bei :hover; Tastatur wird nur progressiv ergaenzt. */
@media (hover:hover) and (pointer:fine) {
	.navigation li:has(:focus-visible)>ul { display:block; }
}
.navigation li>a { color:#333333; }
.navigation li:hover>a { color:#666666; }
.navigation li>nobr>a { color:#333333; }
.navigation li:hover>nobr>a { color:#666666; }
.navigation { margin:0; padding:0; position:relative; }
.navigation li { list-style:none; height:100%; }
/* Desktop-Basis; mobil werden Haupt- und Untermenues getrennt skaliert. */
.navigation a { font-size:20px; text-decoration:none; }
/* Nur die Trefferflaeche des Hauptmenues vergroessern; die Navigation bleibt ein echter href-Link. */
.main-menu-link { display:block; position:relative; z-index:2; padding:21px 0; margin:-21px 0; }
.main-menu-content { display:inline-block; position:relative; padding:0; }
.main-menu-underline { display:none; position:absolute; left:0; top:35px; width:100%; height:4px; overflow:hidden; font-size:0; line-height:0; background-color:#68961A; }
.navigation li>a.main-menu-active { color:#68961A; }
.navigation li>a.main-menu-active .main-menu-underline { display:block; }
.navigation li:hover>a.main-menu-active { color:#68961A; text-decoration:none; }
.menu-icon-link { text-align:center; }
.main-menu-icon { width:24px; height:24px; margin-right:10px; border:none; vertical-align:-4px; }
.navigation a:hover { text-decoration:underline; text-decoration-skip-ink:none; }

/* Submenues behalten den alten Abstand; nicht an die Hauptlink-Hoehe koppeln. */
.sub_navigation { position:absolute; z-index:1; margin:0; padding:20px 20px 20px 0; margin-top:-1px; min-width:157px; width:auto; }
.sub_navigation li, .sub_navigation2 li { position:relative; height:auto; text-align:left; background-color:white; padding:15px 10px; border:solid 1px silver; margin-bottom:-1px; box-shadow:2px 2px 3px rgba(0,0,0,0.14); }
.sub_navigation nobr, .sub_navigation2 nobr { display:block; }
.sub_navigation a, .sub_navigation2 a { display:block; margin:-10px -10px -15px -10px; padding:10px 40px 15px 40px; white-space:nowrap; }

.sub_navigation2 { position:absolute; left:100%; top:0; z-index:20; margin:0; padding:20px; margin-top:-21px; margin-left:-18px; }
.sub_navigation2 li { z-index:6; }
.sub_navigation2 li+li { z-index:7; }
.sub_navigation2 li+li+li { z-index:8; }
.sub_navigation2 li+li+li+li { z-index:9; }
.sub_navigation2 a { display:block; margin:-10px -10px -15px -10px; padding:10px 40px 15px 40px; white-space:nowrap; }

.arrow { position:absolute; right:2px; top:50%; margin-top:-7px; width:7px; height:15px; background-image:url("../img/layout/arrow.png"); }
/* Verbesserte mobile Lesbarkeit: Alte Smartphones stellen diese Seite in einem etwa 980/1040px breiten Layout-Viewport dar. */
@media screen and (max-width: 1040px), screen and (max-device-width: 700px) {
	/* Browser-Autosizing aus; mobile Groessen werden explizit gesetzt, damit Chrome/Firefox gleich bleiben. */
	/* 72px-Leiste: Home 207px, Projekte/Interaktiv je 237px; 715px + 245px lassen 40px Abstand. */
	/* Overflow nicht auf den Body legen: Sonst erscheint im mobilen Chrome-Desktopmodus
	   unter dem zu kurzen Body ein fester Streifen des Seitenhintergrunds. */
	html { overflow-x:hidden; }
	body { -webkit-text-size-adjust:none; -moz-text-size-adjust:none; text-size-adjust:none; }
	/* 22px hoeherer Header; Titelbild und Menuegrafiken bleiben unskaliert. */
	.header_height { height:222px; }
	/* 37px-Footertext samt 30px-Rahmen oben und unten vollstaendig einschliessen. */
	.footer_height { height:120px; }
	.menu_out { margin-top:133px; }
	.menu { margin-top:125px; }
	.menu_out, .menu { height:72px; }
	.menu_out, .menu_btn { background-size:2px 72px; }
	.menu_left_end { width:35px; height:72px; background-size:35px 72px; }
	.menu_right_end { width:34px; height:72px; background-size:34px 72px; }
	.menu_div_btn { top:5px; bottom:5px; }
	.outer-menu-line { top:9px; height:58px; }
	.menu1_width { width:715px; }
	.menu2_width { width:245px; }
	.home-menu-cell { width:207px; }
	/* Gleiche Maximalgroesse wie mobile Inhaltstitel. */
	.header-title { font-size:48px; }
	table.menu_bg td { font-size:37px; }
	.navigation a { font-size:37px; }
	.navigation a.main-menu-link { font-size:42px; }
	.main-menu-content { display:block; }
	/* Aktive Linie separat ausrichten, damit Text und Icons mittig in der hoeheren Leiste bleiben. */
	.main-menu-underline { left:0; right:0; width:auto; top:55px; }
	#main_menu_projects .main-menu-underline, #main_menu_interactive .main-menu-underline { left:1px; right:1px; }
	#main_menu_home .main-menu-underline { left:4px; right:1px; }
	#main_menu_contact .main-menu-underline { left:1px; right:4px; }
	.main-menu-icon { width:38px; height:38px; margin-right:6px; vertical-align:-7px; }
	/* Erstes Dropdown direkt unter der hoeheren Hauptmenueleiste ausrichten. */
	.sub_navigation { padding-top:8px; margin-top:4px; }
	.sub_navigation2 { margin-top:-22px; margin-left:-16px; }
	/* Grosse vertikale Klickflaechen; 20px horizontal halten auch lange Eintraege innerhalb des Seitenrahmens. */
	.sub_navigation a, .sub_navigation2 a { padding:20px 20px 25px 20px; }
	/* 1px-Rahmen verschwinden mobil teils optisch; 2px bleibt sichtbar. */
	.sub_navigation li, .sub_navigation2 li { border:solid 2px silver; margin-bottom:-2px; }
}