/* ------------------------------------------------------------------
   ABELS Sanierung - Stylesheet
   ------------------------------------------------------------------ */

* { margin: 0; padding: 0; }

body {
	background: #d9d9d4 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><rect width='4' height='4' fill='%23d9d9d4'/><rect width='1' height='1' fill='%23d2d2cc'/><rect x='2' y='2' width='1' height='1' fill='%23e0e0db'/></svg>");
	font-family: Verdana, Geneva, Arial, sans-serif;
	font-size: 12px;
	line-height: 1.65;
	color: #3a3a36;
}

a { color: #1b4f80; }
a:hover { color: #c8781a; }

img { border: 0; }

#wrapper {
	width: 960px;
	margin: 0 auto;
	background: #ffffff;
	border-left: 1px solid #b6b6ae;
	border-right: 1px solid #b6b6ae;
	box-shadow: 0 0 12px rgba(0,0,0,.28);
}

/* --- Topbar ------------------------------------------------------- */

#topbar {
	background: #2c3e50;
	background: linear-gradient(#3d5266, #26364a);
	border-bottom: 1px solid #16212e;
	color: #b8c6d4;
	font-size: 10px;
	letter-spacing: .04em;
	padding: 5px 18px;
	overflow: hidden;
}
#topbar .left { float: left; }
#topbar .right { float: right; font-weight: bold; color: #ffffff; }
#topbar a { color: #d8e4ef; text-decoration: none; }
#topbar a:hover { color: #f2b33d; }

/* --- Kopf --------------------------------------------------------- */

#header {
	background: #f4f4f0;
	background: linear-gradient(#ffffff, #eeeee8);
	border-bottom: 3px solid #c8781a;
	padding: 18px 18px 14px 18px;
	overflow: hidden;
}
#logo { float: left; }
#logo .name {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 32px;
	font-weight: bold;
	line-height: 1.1;
	color: #2c3e50;
	text-shadow: 1px 1px 0 #ffffff;
	letter-spacing: -.01em;
}
#logo .name span { color: #c8781a; }
#logo .claim {
	font-size: 10px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #7a7a72;
	padding-left: 2px;
}
#headbox {
	float: right;
	text-align: right;
	border: 1px solid #d5d5cc;
	background: #ffffff;
	padding: 7px 12px;
	font-size: 11px;
	color: #5c5c55;
	box-shadow: inset 0 1px 0 #ffffff;
}
#headbox strong {
	display: block;
	font-family: Georgia, serif;
	font-size: 20px;
	color: #1b4f80;
	line-height: 1.2;
}
#headbox em { font-size: 10px; color: #8b8b82; font-style: italic; }

/* --- Navigation --------------------------------------------------- */

#nav {
	background: #1b4f80;
	background: linear-gradient(#2a6ba8, #16456f);
	border-top: 1px solid #4d8bc0;
	border-bottom: 1px solid #0e2f4d;
	overflow: hidden;
}
#nav ul { list-style: none; }
#nav li { float: left; border-right: 1px solid #14415f; }
#nav li a {
	display: block;
	padding: 9px 20px;
	color: #ffffff;
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: .06em;
	text-decoration: none;
	text-shadow: 0 1px 1px rgba(0,0,0,.45);
	border-right: 1px solid #3d7cb2;
}
#nav li a:hover,
#nav li.aktiv a {
	background: #c8781a;
	background: linear-gradient(#dd8f2b, #b76a12);
	color: #ffffff;
}

/* --- Banner ------------------------------------------------------- */

#banner {
	background: #4a5c6b;
	background: linear-gradient(160deg, #5b7186 0%, #37485a 60%, #2b3a49 100%);
	border-bottom: 4px solid #c8781a;
	padding: 26px 28px;
	color: #ffffff;
	overflow: hidden;
}
#banner h1 {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 26px;
	font-weight: normal;
	line-height: 1.3;
	text-shadow: 1px 1px 2px rgba(0,0,0,.5);
	margin-bottom: 8px;
}
#banner h1 strong { color: #f5c46a; font-weight: bold; }
#banner p {
	font-size: 12px;
	color: #dbe4ec;
	max-width: 600px;
	margin-bottom: 14px;
}
#banner .siegel {
	float: right;
	width: 118px;
	height: 118px;
	margin: -4px 0 0 20px;
	border: 3px double #f5c46a;
	border-radius: 60px;
	text-align: center;
	font-family: Georgia, serif;
	color: #f5c46a;
	background: rgba(0,0,0,.18);
	line-height: 1.25;
	padding-top: 22px;
	box-sizing: border-box;
}
#banner .siegel b { display: block; font-size: 26px; }
#banner .siegel i { display: block; font-size: 10px; font-style: normal; letter-spacing: .12em; text-transform: uppercase; }

.button {
	display: inline-block;
	background: #c8781a;
	background: linear-gradient(#e39430, #b3660f);
	border: 1px solid #8f5008;
	border-radius: 3px;
	padding: 8px 18px;
	color: #ffffff !important;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
	text-shadow: 0 1px 1px rgba(0,0,0,.4);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.button:hover { background: linear-gradient(#efa441, #c1731a); }

/* --- Brotkrumen --------------------------------------------------- */

#krumen {
	background: #f6f6f2;
	border-bottom: 1px solid #e2e2da;
	padding: 6px 18px;
	font-size: 10px;
	color: #8b8b82;
}
#krumen a { text-decoration: none; }

/* --- Layout ------------------------------------------------------- */

#inhalt { overflow: hidden; padding: 20px 18px 8px 18px; }
#haupt { float: left; width: 620px; }
#seitenleiste { float: right; width: 280px; }

h2 {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 20px;
	font-weight: normal;
	color: #1b4f80;
	border-bottom: 1px solid #dcdcd2;
	padding-bottom: 5px;
	margin-bottom: 12px;
}
h3 {
	font-family: Georgia, serif;
	font-size: 14px;
	color: #2c3e50;
	margin-bottom: 4px;
}
h4 {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: #7a7a72;
	margin: 18px 0 6px 0;
}

p { margin-bottom: 12px; }

#haupt ul { margin: 0 0 12px 18px; }
#haupt li { margin-bottom: 3px; }

.hinweis {
	background: #fdf6e6;
	border: 1px solid #e8d8ae;
	border-left: 4px solid #c8781a;
	padding: 10px 12px;
	margin-bottom: 16px;
	font-size: 11px;
	color: #6b5a2e;
}

/* --- Leistungen --------------------------------------------------- */

.leistung {
	border: 1px solid #e2e2da;
	background: #fbfbf8;
	padding: 11px 13px;
	margin-bottom: 10px;
	overflow: hidden;
	box-shadow: inset 0 1px 0 #ffffff;
}
.leistung .nr {
	float: left;
	width: 34px;
	height: 34px;
	margin: 2px 12px 0 0;
	background: #1b4f80;
	background: linear-gradient(#2a6ba8, #16456f);
	color: #ffffff;
	font-family: Georgia, serif;
	font-size: 17px;
	text-align: center;
	line-height: 34px;
	border-radius: 2px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}
.leistung p { margin: 0; font-size: 11px; color: #55554e; }

/* --- Tabelle ------------------------------------------------------ */

table.daten {
	width: 100%;
	border-collapse: collapse;
	font-size: 11px;
	margin-bottom: 14px;
}
table.daten th {
	background: #eef1f4;
	border: 1px solid #d5dde4;
	text-align: left;
	padding: 6px 9px;
	color: #2c3e50;
}
table.daten td {
	border: 1px solid #e2e2da;
	padding: 6px 9px;
	vertical-align: top;
}
table.daten tr:nth-child(even) td { background: #fafaf7; }

/* --- Seitenleiste ------------------------------------------------- */

.widget {
	border: 1px solid #d5d5cc;
	margin-bottom: 16px;
	background: #ffffff;
}
.widget .titel {
	background: #eeeee8;
	background: linear-gradient(#f7f7f3, #e6e6de);
	border-bottom: 1px solid #d5d5cc;
	padding: 7px 11px;
	font-family: Georgia, serif;
	font-size: 13px;
	color: #2c3e50;
	text-shadow: 1px 1px 0 #ffffff;
}
.widget .rumpf { padding: 11px; font-size: 11px; }
.widget .rumpf p { margin-bottom: 8px; }
.widget ul { list-style: none; }
.widget li {
	border-bottom: 1px dotted #ddddd4;
	padding: 4px 0 4px 13px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='7' height='7'><path d='M1 0l5 3.5L1 7z' fill='%23c8781a'/></svg>") no-repeat 0 8px;
}
.widget li:last-child { border-bottom: 0; }
.widget a { text-decoration: none; }

.widget.kontakt { border-color: #c8781a; }
.widget.kontakt .titel {
	background: linear-gradient(#dd8f2b, #b76a12);
	border-bottom-color: #8f5008;
	color: #ffffff;
	text-shadow: 0 1px 1px rgba(0,0,0,.35);
}
.tel {
	font-family: Georgia, serif;
	font-size: 20px;
	color: #1b4f80;
	display: block;
	line-height: 1.25;
}

/* --- Einsatzgebiet ------------------------------------------------ */

#gebiet {
	clear: both;
	background: #f6f6f2;
	border-top: 1px solid #e2e2da;
	padding: 14px 18px;
	font-size: 11px;
	color: #6b6b63;
}
#gebiet strong { color: #2c3e50; }

/* --- Fuss --------------------------------------------------------- */

#fuss {
	background: #2c3e50;
	background: linear-gradient(#3d5266, #26364a);
	border-top: 3px solid #c8781a;
	color: #a8b8c8;
	font-size: 11px;
	padding: 18px;
	overflow: hidden;
}
#fuss .spalte { float: left; width: 33%; }
#fuss .spalte h5 {
	color: #ffffff;
	font-family: Georgia, serif;
	font-size: 13px;
	font-weight: normal;
	margin-bottom: 6px;
}
#fuss a { color: #d8e4ef; text-decoration: none; }
#fuss a:hover { color: #f2b33d; }
#fuss ul { list-style: none; }
#fuss li { padding: 1px 0; }

#unterfuss {
	background: #1c2833;
	color: #7d8b98;
	font-size: 10px;
	padding: 9px 18px;
	overflow: hidden;
	border-top: 1px solid #16212e;
}
#unterfuss .right { float: right; }
#unterfuss a { color: #9fb0bf; text-decoration: none; }

/* --- Rechtstexte -------------------------------------------------- */

.recht { padding: 20px 24px 10px 24px; }
.recht h2 { margin-top: 22px; }
.recht h2:first-child { margin-top: 0; }
.recht h3 { margin-top: 16px; }
.recht p, .recht li { font-size: 11.5px; }
.recht ul { margin: 0 0 12px 20px; }
.recht address { font-style: normal; margin-bottom: 12px; }

@media screen and (max-width: 990px) {
	#wrapper { width: auto; }
	#haupt, #seitenleiste { float: none; width: auto; }
	#seitenleiste { margin-top: 20px; }
	#logo, #headbox { float: none; text-align: left; margin-bottom: 10px; }
	#banner .siegel { display: none; }
	#nav li { float: none; }
	#fuss .spalte { float: none; width: auto; margin-bottom: 14px; }
}