@charset "utf-8";

/* [ Resets/Presets/Fixes ]------------------------------------- */

* {
	margin: 0;
	padding: 0;
	-webkit-text-size-adjust: 100%;
	/* Border-Box-Modell -> Andere Berechnung von padding, border, margin */
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

/* Block Elemente für die IE Versionen ohne HTML5 support */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, video { display: block; }

/* Scrollbalken immer einblenden und Schrift auf Basis 10px festlegen */
html {overflow-y: scroll; font-size: 62.5%;}

/* Wenn Menüleiste eingeblendet wird, keinen Scrollbalken für Content anzeigen */
html.active {overflow-y: hidden;}

/* Clearfix */
.clearfix {*zoom: 1;}
.clearfix:before, .clearfix:after {content: " "; display: table;}
.clearfix:after {clear: both;}

/* [ Standard Inline Elemente ]------------------------------------- */

/* Standard Abstand zwischen Inline Elementen */
h1, h2, h3, p, ul, ol, .paragraph {
	margin: 1em 0;
}

/* Links */
a {
	color: #254c8e;
}

a:visited { 
}

a:hover {
	color: #3d619b;
}

a:active { 
}

a img {
	border: none;
	display: block;
}


/* Temporär kennzeichnen: Externe Links auf AFS */

a[href^="http://www.afs-rechtsanwaelte.de"],
a[href^="http://afs-rechtsanwaelte.de"]
{
    background: #ebeff3;
}

/* Clickbare Box */
.clickbox {	cursor: pointer;}

/* Bilder */
img {
	border: none;
}

.col12 img, .col12 .imagelightbox .pic { margin: 1em 0;}

/* Überschriften */
h1 {
	font-size: 24px;
	font-size: 2.4rem;
	line-height: 30px;
	line-height: 3.0rem;	
	margin: 1em 0 .8em;
}

h2 {
	font-size: 20px;
	font-size: 2.0rem;
	line-height: 28px;
	line-height: 2.8rem;
	margin: 1.8em 0 .8em;
}

h3 {
	font-size: 18px;
	font-size: 1.8rem;
	line-height: 22px;
	line-height: 2.2rem;
	margin: 1.5em 0 .8em;
}

/* Google Font für Überschriften */
h1, h2, h3 {
	font-family: 'Roboto', sans-serif;
	clear: both;
	font-weight: normal;
}

/* Textlisten */
ul {
	padding: 0 0 0 12px;
}

ul li {
	margin: 0;
	padding: 0 0 0 20px;
	list-style-type: none;
	background: url('/inc/img/list-dot.png') 0 .5em no-repeat;
	background-size: 6px 6px;
}

/* Liste 2. Ebene */
ul li ul {
	padding: 0 0 0 12px;
	margin: .2em 0 .5em;
}

ul li ul li {
	background: url('/inc/img/list-dot2.png') 0 .5em no-repeat;
	background-size: 6px 6px;
}

/* Liste 3. Ebene */
ul li ul li ul {
	padding: 0 0 0 12px;
	margin: .2em 0 0;
}

ul li ul li ul li {
	background: url('/inc/img/list-dot3.png') 0 .5em no-repeat;
	background-size: 6px 6px;
}

/* Numerierte Listen */
ul ol li {
  background: none;
}

ol {padding: 0 0 0 12px;}
ol li {
	margin: .1em 0;
	padding: 0 0 0 20px;
	}

/* Nummerierung wie in Word hinzufügen */
ol { counter-reset: item }
ol li { display: block }
ol li:before { content: counters(item, ".") "."; counter-increment: item; padding-right:10px; margin-left:-22px;}

/* Liste 2. Ebene */
ol li ol {
	padding: 0 0 0 32px;
	margin: .2em 0 .5em;
	}
ol li ol li:before { content: counters(item, ".") "";}

/* Liste 3. Ebene*/
ol li ol li ol {
	padding: 0 0 0 12px;
	margin: .2em 0 0;
	}

/* Horizontale Linien ausblenden */
hr { 
	display: none; 
}

/* Abkürzungen */
abbr { 
	border-bottom: 1px dotted #666;
	cursor: help; 
}

/* Farbe für Selektierten Text */
::-moz-selection {
    background: #ece8e5;
    text-shadow: none;
}

::selection {
    background: #ece8e5;
    text-shadow: none;
}

/* [ Basiselemnte ]------------------------------------- */

body {
	/*    size/line-height      */
	font: 15px/24px 'Roboto', sans-serif;
	/* font: 1.5rem/2.4rem 'Roboto', sans-serif; */
	background: #fff;
	background: #fff url('/inc/img/bg-body-top.jpg') no-repeat left top;
	transition: background 1s ease-in-out;
	color: #0D3982;
}

/* Breite für äußerste Container */
div.inner {
	margin: 0 auto;
	width: 100%;
	max-width: 1008px;
	/* max-width: 984px; */
	padding: 0 12px;
}

/* Kopfbereich */
header {
	margin: 0 auto;
	padding: 72px 0 0;
}

/* Inhaltsbereich */
article {
	padding: 12px 0;
}

/* Fußbereich */
footer {
	padding: 1em 0;
  border-top: solid rgb(13, 57, 130) 1px;
	margin-top: 2em;
}

footer, footer a {
  /*color: rgba(0, 0, 0, 0.5);*/
	text-decoration: none;
}

footer span.right {
  float: right;
}

/* Section hat keinen Abstand innerhalb von Header, Footer und Nav */
header section, footer section, nav.mainnav section, nav.subnav section /*article section:last-of-type*/ {
	margin-bottom: 0;
}
/* Erste Section im Article hat Abstand oben
article section:first-of-type {
	margin-top: 24px;
}  */

/* Alles Umfassende Section hat keinen Abstand oben oder unten*/
body > section {
	margin-top:0;
	margin-bottom:0;
	background: url('/inc/img/bg-body-bottom.jpg') no-repeat right -230px bottom;
  
	/* Experimental
	height: 100vh;
 	overflow-y: scroll;  */
	min-height: 100vh;
}

/* [ Navigation ]------------------------------------- */

/* Listen innerhalb von Navigation reseten */
nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	}

nav ul li, nav ul li ul li {
	margin: 0;
	padding: 0;
	background-image: none;
	}
	
/* Hauptnavigation */
nav.mainnav {
	background: #0d3982;
	margin: 0;
	height: 100vh;
	position: fixed;
	width: 100%;
	padding-top: 180px;
	padding-top: 84px;
}

/* 1. Ebene */
nav.mainnav > ul {
	width: 228px;
	background: #fff;
}

nav.mainnav ul li {
}

nav.mainnav ul li a {
	display: block;
	text-decoration: none;
	color: #fff;
	background: transparent;
	padding: 14px 15px;
	border-bottom: solid #fff 1px;
	background: rgb(13, 57, 130);
	transition: background .2s ease-in-out;
}

nav.mainnav ul li a:hover {
	background: rgba(13, 57, 130, 0.9);
}

/* Erster Link auch Border oben */
nav.mainnav > ul > li:first-child > a {
	border-top: solid #fff 2px;
}

/* Erster Link auch Border oben */
nav.mainnav > ul > li > a {
	border-bottom: solid #fff 2px;
}

nav > ul > li > ul {
  border-bottom: solid white 1px;
}

/* a:focus & outline: none um ein besseres tabben durch die Navi */
nav.mainnav ul li a:hover, nav.mainnav ul li a:focus {
	outline: none;
}

nav.mainnav > ul > li.current > a, nav.mainnav > ul > li.current:hover > a {
	background: rgba(13, 57, 130, 0.8);
}

nav.mainnav > ul > li > ul > li.current > a , nav.mainnav > ul > li > ul > li.current:hover > a {
	color: #0d3982;
	background-color: #fff;
}

/* 2. Ebene */
nav.mainnav ul li ul {
	margin: 0;
  padding: 0;
  border-left: solid #fff 8px;
}

nav.mainnav ul > li > ul > li.current > a, nav.mainnav ul > li > ul > li.current:hover > a {
	color: #fff;
	background-color: rgba(255, 255, 255, 0.5);
}

nav.mainnav > ul > li > ul > li > a {
  background-image: url('/inc/img/icon-plus.png');
	background-repeat: no-repeat;
	background-position: center left 15px;
  background-size: 14px;
  padding-left: 35px;
}

nav.mainnav > ul > li > ul > li:hover > a {
  background-image: url('/inc/img/icon-plus.png');
	background-repeat: no-repeat;
	background-position: center left 15px;
  background-size: 14px;
  padding-left: 35px;
}

nav.mainnav > ul > li > ul > li.active > a {
  background-image: url('/inc/img/icon-minus.png');
	background-repeat: no-repeat;
	background-position: center left 15px;
  background-size: 14px;
}

nav.mainnav > ul > li > ul > li.current > a,
nav.mainnav > ul > li > ul > li.current:hover > a,
nav.mainnav > ul > li > ul > li.active > a{
	background-color: rgba(13, 57, 130, 0.9);
}


/* 3. Ebene */
nav.mainnav ul li ul li ul {
	margin: 0;
	padding: 0;
}

nav.mainnav ul li ul li ul li {
	background: none;
}

nav.mainnav ul li ul li ul li a {
  font-size: 14px;
	font-size: 1.4rem;
  padding: 10px 15px;
}

nav.mainnav ul li ul li ul li.current a, nav.mainnav ul li ul li ul li.current:hover a {
	color: #0d3982;
	background: #fff;
}

/* Subnavigation */
nav.subnav {
	padding-top: 8px;
	background: #777;
}

nav.subnav ul li {
	float: left;
}

nav.subnav ul li a {
	display: block;
	text-decoration: none;
	color: #fff;
	background: #888;
	padding: 10px 15px;
	margin: 0 8px 8px 0;
}

/* a:focus & outline: none um ein besseres tabben durch die Navi */
nav.subnav ul li a:hover, nav.subnav ul li a:focus {
	color: #fff;
	background: #999;
	outline: none;
}

nav.subnav ul li.current a, nav.subnav ul li.current:hover a {
	color: #555;
	background: #fff;
}

/* Sonderbehandlung für letztes Navigationselement */
nav.subnav ul li:last-child a {
	margin-right: 0;
}

/* [ Eigene Formate/Klassen ]------------------------------------- */

/* Logo im Header */
header .logo {
	display: block;
	margin: 12px;
}

header .logo img {
	width: 100%;
	height: auto;
	box-shadow: 0 0 7px rgba(0,0,0,.32);
}

/* Contentbild */
.pic {
	margin:1em 0;
	width: 100%;
	height: auto;
	display:block;
}

/* Infokasten */
.infobox {
	margin: 1em 0;
	padding: .5em 12px;
	border: solid #0D3982 1px;
	-webkit-border-image: url('/inc/img/border-image-infobox.png') 8 8 stretch;
  -o-border-image: url('/inc/img/border-image-infobox.png') 8 8 stretch;
	-moz-border-image: url('/inc/img/border-image-infobox.png') 8 8 stretch;
  border-image: url('/inc/img/border-image-infobox.png') 8 8 stretch;
	border-image-width: 8px;
	/* background: rgba(13, 57, 130, 0.1); */
}

.infobox.clickbox {
	transition: background .2s ease-in-out;}

.infobox.clickbox:hover {
	background: #f7f6f3 ;
	transition: background .2s ease-in-out;
	}

.infobox h2, .infobox h3 { /* komplett blau hinterlegt */
	color: #fff;
	margin-top: -13px !important;
	margin-right: -13px;
	margin-left: -13px;
	padding: 12px;
	background: rgb(13, 57, 130);
	position: relative;
	clear: none;
}

.infobox *:first-child {margin-top: 0;}
.infobox *:last-child {margin-bottom: 0;}


/* Infobox Anwalt mit Foto */
.infobox.anwalt {
	border-image: none;
	border-width: 1px 0;
	}

.infobox.anwalt h2 {
	color: #0D3982;
	background: none;
	padding: 12px 12px 0;
	margin-bottom: .5em;
}

.infobox.anwalt .pic { margin: 0; }

/* Blogseite */

.blog h2, .blog h3 { /* komplett blau hinterlegt */
	color: #fff;
	padding: 12px;
	background: rgb(13, 57, 130);
	position: relative;
	clear: none;
}

.blog h2 a, .blog h3 a {
color: #fff;
text-decoration: none; }

.blog h2 a:hover, .blog h3 a:hover {
text-decoration: underline; }

.more { 
	text-align: right;
	display: block;}

/* Calltoaction */
.calltoaction {
	margin: 1em 3px;
	color: #fff;
	padding: 6px 24px;
	background: #0D3982;
	display: block;
	text-align: center;
	text-decoration: none;
	padding: 20px;
	font-size: 22x;
	font-size: 2.2rem;
	transition: background .2s ease-in-out;
}

.calltoaction span {
	display: block;
	font-size: 16px;
	font-size: 1.6 rem;
	margin-top: 6px;
}

a.calltoaction:hover {
	color: #fff;
	background: rgba(13, 57, 130, 0.9);
}

/* Tabstop */
.tab {
	width: 4.5em;	/* Breite an das breiteste Element anpassen */
	float: left;
	clear: left;
	display: block;
}

/* Kleiner Text für Hinweise */
.minitext { 
	font-size: 13px;
	font-size: 1.3rem;
	line-height: 19px;
	line-height: 1.9rem;
}

/* Bei langen Texten pro Listenpunkt mehr Abstand zwischen li */
ul.listspace > li, ol.listspace > li {padding-bottom: .8em;}
ul.listspace li ul, ol.listspace li ol {margin: .3em 0;}

/* Googlemap */
div.googlemap iframe {
	width: 100%;	
}

/* Blaue Teaser auf Startseite */
a.teaser {
  background-color: #0D3982;
  display: block;
  color: #fff;
  text-decoration: none;
  text-align: center;
	margin: 1em 0 0;
  background-repeat: no-repeat;
	transition: background .2s ease-in-out;
	
  padding: 24px 24px 24px 50%;
  transition: background .2s ease-in-out;
  background-position: center left 20px;
  background-size: 10%;
}

.icon.pencil {background-image: url('/inc/img/icon-pencil.png');}
.icon.group {background-image: url('/inc/img/icon-group.png');}
.icon.law {background-image: url('/inc/img/icon-law.png');}

a.teaser:hover {
	background-color: #234B8D;
}

/* Fachbereich-Links auf Startseite als blaue Kästchen */
.keylinks {
	text-align: center;}

.keylinks a {
	 color: #fff;
  padding: 6px 12px;
	margin: 0 6px 6px 0;
  background: rgb(13, 57, 130);
  display: inline-block;
	text-decoration: none;
  transition: background .2s ease-in-out;
	}

.keylinks a:hover, .keylinks a:focus {
	background: #234B8D;
  transition: background .2s ease-in-out;
}

/* ****[ OPTIONALES ]****************************************************************************************************** */

/* ==================== Akkordeon ==================== */
.accordion {
margin: 1em 0;
}

.accordion h2 {
margin: 0;
	background: url(/inc/img/accordion/arrow-right.png) no-repeat right;
	background-size: 9px 13px;
	font-weight: normal;
	display: block;
	color: #fff;
	font-size: 18px;
	font-size: 1.8rem;
	padding: 5px 18px;
	position: relative;
	font-weight: normal;
}

.accordion .title {
	cursor: pointer;
	padding: 0 18px 0 0;
	margin-bottom: 5px;
	background: #0D3982; 
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

.accordion .title:hover {
	background: rgba(13, 57, 130, 0.9);
}

.accordion .content {
	display: none;
	background: #fff;
	margin-bottom: 5px;
	padding: .5em 24px;
}

.accordion p {
	margin: 0;
	padding: .5em 0;
}

.accordion .content h1, .accordion .content h2, .accordion .content h3 {
	margin: 0;
	padding: .5em 0;
}

/* wenn Akkordeon offen */
.accordion .open {
	background: rgba(13, 57, 130, 0.9);
}

.accordion .open h2 {
	background: url(/inc/img/accordion/arrow-down.png) no-repeat right;
	background-size: 13px 9px;
}

/* Tabelle für Urteile */

table.urteile {
	margin: 1em 0;
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;}

table.urteile tr {
	border: 2px solid grey;
	border-width: 1px 0;}

table.urteile th, table.urteile td {
	vertical-align: top; }

table.urteile th {
	padding: .5em 12px;
	font-weight: normal;
	text-align: left;
	background: #f7f6f3; }

table.urteile td {
	padding: .25em 12px;
	}

/* ==================== Formular Styles ==================== */
form.contactform fieldset {
	border: none;
	border-top: solid rgb(13, 57, 130) 1px;
	margin-top: 1em;
}

form.contactform legend {
	font-size: 20px;
	font-size: 2.0rem;
	line-height: 34px;
	line-height: 3.4rem;
	margin: .8em 0 .6em;
	padding-right: 10px;
}

form.contactform .field {
	padding: .5em 0;
	position: relative;
}

	form.contactform label {
	display: block;
	padding: 2px 0;
}

form.contactform input, form.contactform textarea, form.contactform select {
	border: none;
	border: solid lightgrey 1px;
	outline: none;
	font: 14px/22px 'Roboto', sans-serif;
	font: 1.4rem/2.2rem 'Roboto', sans-serif;
	padding: 2px 6px;
	width: 100%;
}

form.contactform button[type=submit] {
	background: rgb(13, 57, 130);
	color: #fff;
	border: none;
	padding: 20px;
	font-size: 16px;
	font-size: 1.6rem;
	padding: 10px 15px;
	cursor: pointer;
	outline: none;
	margin: 1em auto;
	transition: background .2s ease-in-out;
	display: block;
	width: 80%;
}

form.contactform button[type=submit]:hover {
	color: #fff;
	background: rgba(13, 57, 130, 0.9);
}

form.contactform select {
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 0;
  background: url('/inc/img/bg-dropdown.png') right 6px center no-repeat;
  background-size: 16px;
}

/* Daten nach Abschicken in Tabelle anzeigen */
table.confirmationtable td {
	padding: .2em 10px .2em 0;
}

/* Hinweisemeldungen über dem Formular */
.alert {
	padding: 10px;
	border: solid 1px #C5C5C5;
	border-radius: 4px;
	background-color: #F1F1F1;
	color: #666;
	font-size: 14px;
	line-height: 22px;
	margin: 10px 0;
	
	-webkit-animation: fadein 1s; /* Safari 4+ */
	-moz-animation:    fadein 1s; /* Fx 5+ */
	-o-animation:      fadein 1s; /* Opera 12+ */
	animation:         fadein 1s; /* IE 10+ */
	}
		
ul.alerts {padding: 0;}
li.alert {list-style-type: none;margin: 5px 0;background:none;}

.alert.error {
	border-color: #ebccd1;
	background-color: #f2dede;
	color: #a94442;
	}
	
.alert.warning {
	background-color: #fcf8e3;
	border-color: #faebcc;
	color: #8a6d3b;
	}
	
.alert.success {
	background-color: #dff0d8;
	border-color: #d6e9c6;
	color: #3c763d;
	}

/* Animation um Errors einzublenden */
@-webkit-keyframes fadein {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes fadein {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes fadein {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fadein {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* Navigation ein und ausblenden */
nav.mainnav {
	top: 0;
	right: -100%;
	z-index: 9998;
	transition: right .2s ease-in-out, box-shadow .2s ease-in-out;
	overflow-y: scroll;
	box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0);
}

nav.mainnav.active {
	right: auto;
	right: -20%;
	box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.72);
}

/* Navi Button */
button.pull {
  content: '';
  background: red;
  position: fixed;
  width: 50px;
  height: 50px;
  top: 12px;
  right: 12px;
  z-index: 10000;
  padding: 0;
}

button.pull {
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 60px;
  height: 60px;
  font-size: 0;
  text-indent: -9999px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: none;
  border-radius: none;
  border: none;
  cursor: pointer;
  -webkit-transition: background 0.3s;
          transition: background 0.3s;
}

button.pull:focus {
  outline: none;
}

button.pull span {
  display: block;
  position: absolute;
  top: 50%;
  left: 10px;
  right: 10px;
  height: 4px;height: 3px;
  background: white;
  margin-top: -2px;  margin-top: -1.5px;
}

button.pull span::before,
button.pull span::after {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: 4px; height: 3px;
  background-color: #fff;
  content: "";
}

button.pull span::before {
  top: -14px; top: -12px;
}

button.pull span::after {
  bottom: -14px; bottom: -12px;
}

/* Fancy Button Animation */
button.pull {
  background-color: #0D3982;
	box-shadow: 0 0 7px rgba(0, 0, 0, 0.32);
}

button.pull span {
  -webkit-transition: background 0 0.3s;
          transition: background 0 0.3s;
}

button.pull span::before,
button.pull span::after {
  -webkit-transition-duration: 0.3s, 0.3s;
          transition-duration: 0.3s, 0.3s;
  -webkit-transition-delay: 0.3s, 0;
          transition-delay: 0.3s, 0;
}

button.pull span::before {
  -webkit-transition-property: top, -webkit-transform;
          transition-property: top, transform;
}

button.pull span::after {
  -webkit-transition-property: bottom, -webkit-transform;
          transition-property: bottom, transform;
}

/* active state, i.e. menu open */
button.pull.active {
  background-color: #194B9D;
}

button.pull.active span {
  background: none;
}

button.pull.active span::before {
  top: 0;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}

button.pull.active span::after {
  bottom: 0;
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

button.pull.active span::before,
button.pull.active span::after {
  -webkit-transition-delay: 0, 0.3s;
          transition-delay: 0, 0.3s;
}



/* Lose Inputs */
.looseinputwrap {
  display: block;
  float: left;
  /* border: solid black 1px; */
  width: 500px;
  max-width: 359px;
}

form.contactform .looseinputwrap label {
  float: none;
  text-align: left;
  display: inline-block;
  padding: 0 0 0 18px;
  width: auto;
  margin: 0 0 .5em;
}

form.contactform .looseinputwrap input {
  display: inline-block;
  width: auto;
}

span.required-icon {
  background: rgb(13, 57, 130);
  color: #fff;
  width: 14px;
  display: inline-block;
  height: 14px;
  text-align: center;
  cursor: pointer;
  margin-left: 6px;
  line-height: normal;
  position: absolute;
	right: 0;
  border-radius: 0 0 0 2px;
}