@charset "UTF-8";
/*
Description: Theme fuer ralph-segert.de - HTML5, CSS3
Author: Ralph Segert
Date: 02/2020
Author URI: https://ralph-segert.de
*/


* {
  margin: 0;
  padding: 0; }

html {
  box-sizing: border-box; }

*, *::before, *::after {
  box-sizing: inherit; }

body {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  font-family: Ubuntu-Light, sans-serif;
  font-weight: 300;
  justify-content: center;
  background-color: #fff;
  font-size: 100%; }

a:focus {
  outline: none; }

img, fieldset {
  border: 0; }

img {
  vertical-align: middle; }

a {
  border: 0;
  text-decoration: none; }


.clearfix::after {
  content: " ";
  display: block;
  clear: both; }
  
  
    .hide {
	display: none;
	}
	
	
  .sharethis-inline-follow-buttons {
	  text-align: left;
	  margin: 0% 0 9% 0;
  }
  

/* ######################################
LINKFARBEN: Navigationselemente und Links
######################################### */
a {
  font-weight: 300; }
  a {
    color: #BD320D;
    transition: .3s;
    }
  a:visited {
    color: #BD320D; }
  a:hover, a:focus {
    color: #999; }
    
    h1 a h2 a, h3 a, h4 a {
	    border-bottom: 0;
    }
    
    p a, ul a {
	        border-bottom: 2px dotted #999;
	        color: #BD320D; 
          font-family: Ubuntu-Medium, sans-serif;

    }
    

.footer a {
  font-weight: 300; }
  .footer a {
    color: #333; }
  .footer a:visited {
    color: #333; }
  .footer a:hover, .footer a:focus {
    color: #999; }
    


/* ################# 
FLEXBOX: Grundlayout 
#################### */
.container {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  max-width: 640px; }

.header {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  max-width: 640px;
  text-align: left;
  padding-top: 5%; }

.header p {
  letter-spacing: 1.5px;
  padding: 2% 0 0 .5%;
  color: #555; }
  

.header img {
  width: 64%;
  height: auto; }

.content {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  width: 100%;
  justify-content: center; }

.main {
  -webkit-flex: 1;
  -ms-flex: 1 100%;
  flex: 1 100%;
  background-color: #fff; }
  
 .main .navsmall {
	 font-size: 100%;
	 margin: -1% 0 9% 4px; 
 }

 .main .navsmall a {
	 color: #777; 
	 border-bottom: 0;
	 margin-right: 2%;
 }
  .main .navsmall a:hover {
	 color: 000; 
	 border-bottom: 1px dotted #888;
 }
 
.main .navsmall .aktiv {
	border-bottom: 0;
	color: #000;    
    } 
 
 
h1, h2, h3, h5 {
  font-weight: normal;
  letter-spacing: 1px;
  text-align: left;
  font-family: Ubuntu-Bold, sans-serif;
  font-weight: 300;
  text-shadow: 0 2px 3px rgba(205, 205, 205, 0.5); }
  
  h2 {
  font-family: Ubuntu-Medium, sans-serif;
  text-transform: uppercase;
  text-shadow: none }
  

.main h5 {
  color: #555;
  font-size: 140%;
  line-height: 1.6em;
   margin: 10% 5% -6px 0; 
   }
 
 .main .borges {
	font-size: 100%;
	text-align: right;
	margin: 0 12% 0 0;
 }
 
.weiterlesen a {
display: block;
font-size: 85%;
letter-spacing: 1px;
text-align: center;
width: 34%;
color: #000;
background: #EBEBEB;
padding: .5% 0 .6% 0;
text-decoration: none;
border-radius: 4px;
margin: 1% 0 8% 0%;
border-bottom: 0;
}

.weiterlesen a:hover {
color: #fff;
background-color: #979797;
transition: .3s;
}

.main .autor {
  font-weight: 300;
  font-size: 85%;
  letter-spacing: 1px;
  margin: 2% 0 1% 0;
  }

.main .autor a {
 border: none;
   font-weight: 400;
  }
  
  
.main .autor2 {
  font-weight: 600;
  font-size: 80%;
  letter-spacing: 1px;
  margin: 0% 0 12% 0;
  }

.main .rubrik {
color: #BD320D;
  margin: 6% 0 0% 0;
  font-size: 180%;
  font-weight: 400; 
}

.main h2 {
  color: #000;
  margin: 12% 0 3% 0;
  font-size: 130%;
  font-weight: 500; }


.main h2:first-of-type {
  margin: 14% 0 2% 0;
}
  
  
.main .buchindex {
  color: #000;
  margin: 12% 0 8% 0;
  font-size: 150%;
  font-weight: 600; }
  
.main .liste {
  color: #000;
  margin: 4% 0 0 0;
  font-size: 105%;
  font-weight: 300; }

.main .links {
  color: #BD320D;
  margin: 7% 0 0 0;
  font-size: 140%;
  font-weight: 600; }

.main .links a {
  color: #BD320D;
  font-weight: 600; }

.main .links a:hover {
  color: #999;
}
  
 .main .teaserbild img {
float: left;
width: 25%;
height: auto;
margin: 4% 4% 1% 0;
}

.main figure {
  margin-bottom: 5%;
}

.main figure img {
width: 100%;
font-size: 90%;
height: auto;
margin: 3% 0 3% 0;
}

.main figcaption {
font-weight: 400;
font-size: 95%;
font-style: italic;
}
  
.main h3 {
  font-size: 250%;
  font-weight: 300;
  margin-bottom: 3%;
  color: #333; }

.main h4 {
  font-size: 180%;
  font-weight: 300;
  margin-bottom: 2%;
  margin-top: 10%;
  color: #333; }
  
  
.main p {
font-family: Ubuntu-Light, sans-serif;
  font-size: 110%;
  line-height: 1.9em;
  color: #000;
  padding: 3% 0 2% 0; }
  
 .main p a {
	 
	 color: #AE260C;
 }



blockquote {
    font-size: 1.8em;
    line-height: 1.5em;
    padding: 4% 0 5% 0;
    margin-left: 7%;
    color: #555;
    font-family: Ubuntu-Light, sans-serif;
    font-weight: 300;
  }

blockquote:before {
    content: "»";
    
    color: #999; }
  
blockquote:after {
    content: "«";
    color: #999; }

.main ul {
  list-style-type: square;
  font-size: 100%;
  color: #444;
  font-weight: 500;
  margin-left: 2.2%;
  padding: 1% 0 3% 0; }

.main li {
  padding-bottom: 1.5%;
  line-height: 1.6em; }

.main img {
  width: 50%;
  height: auto; }
  
 .main .screen img {
  width: 100%;
  margin-top: 2%;
  margin-bottom: 2%;
  height: auto; }

.bildbreite img {
  width: 100%;
  height: auto; }
  
.main strong {
 font-family: Ubuntu-Bold, sans-serif;
 letter-spacing: 1px;
  color: #000000; }

small {
  font-weight: bold;
  font-size: 100%;
  font-style: italic; }

.footer {

    padding-bottom: 12%; 
    padding-top: 16%;
  }

.footer p {
  color: #333;
  font-size: 80%;
  padding-bottom: 12%;
  letter-spacing: 1px;
}

.footer p:first-of-type a {
	color: #000;
  font-size: 110%;
  font-weight: 600;	
}

.footer p:first-of-type .aktiv {
	font-weight: 400;
	border-bottom: 0;
	color: #222;    
    } 

.header p:first-of-type .aktiv {
    font-weight: 400;
    border-bottom: 0;
    color: #222;    
      }         
      
.footer p:first-of-type a:hover {
	color: #999;
}

/* HEADER: Inbox-Formatierungen ########## */
/* ################
NAVIGATIONSELEMENTE
################### */
#back-to-top {
  /* scriptgesteuerter Top-Balken */
  position: fixed;
  /* Fixiert den Balken unten */
  display: none;
  width: auto;
  right: 4.5%;
  bottom: 4%;
  padding: 10px 10px 12px 10px;
  background: #666;
  color: #fff;
  font-size: 130%;
  text-align: center;
  z-index: 1000;
  cursor: pointer;
  transition: all ease-in-out .3s;
  border-radius: 6px; }

#back-to-top:hover {
  bottom: 5%; }

.weiter {
  text-align: center;
  margin: 1% 0 2% 0; }

/* ####
BUTTONS
####### */
.btn-top {
  font-size: 1.3em;
  text-align: center; }

.btn-top::after {
  content: " ↑"; }

.btn-top::before {
  content: "↑ "; }

.btn-card {
  width: 100%;
  display: block;
  text-align: center;
  font-size: 120%;
  letter-spacing: 1px;
  color: #fff;
  background-color: #0040A1;
  padding: 1.8em 0 1.8em 0;
  margin-top: 5%;
  transition: all ease .4s;
  cursor: pointer; }
  
  
  /* #############################################

Formular 

############################################# */

.teamteaser {
	width: 100%;
display: -ms-flexbox;
  display: -webkit-box;
  display: flex; 
}

.teamteaser  form {
margin-top: 4%;
width: 100%;


}

.teamteaser legend {
display: none;
}

.teamteaser label {
	font-size: 1em;
	width: 26%;
	float: left;
	margin: 1% 0 1% 0;
}

.teamteaser select {
	margin-top: 1.5%;
	font-size: 100%;
}

.teamteaser  form p {
	width: 80%;
	font-size: .9em;
	line-height: 1.8em;
	float: left;
}
.teamteaser  form p label  {
	font-size: 1.2em;
}
.teamteaser  .textfeld {
	font-size: 1em;
	padding: 1.3%;
	width: 65%;
	background-color: #fff;
	border: 1px solid #454F7D;
	opacity: 1;
}
.teamteaser  textarea {
	margin-top: 1%;
	font-size: 1em;
	padding: 1.3%;
	width: 65%;
	border: 1px solid #454F7D;
	height: 100px;
}
.teamteaser .sendbutton {
	padding: 2.5% 4% 2.5% 4%; 
	border: 1px solid #fff;
	color: #fff;
	font-size: 1.2em;
	background-color: #555;
	letter-spacing: 1px;
	width: 99%;
	cursor: pointer;
	margin: 0 0 5% 0;
	border-radius: 6px;
	transition: .3s;
} 
.teamteaser .sendbutton:hover {
  color: #fff;
  background-color: #999;
  border: 1px double #777978;
  transition: 0.4s;
  border-radius: 2px;
}


/*Styles for screen 800px and lower*/
/*Styles for screen 640px and lower*/
@media only screen and (max-width: 40em) {
  .container {
    padding-left: 8%;
    padding-right: 8%; } }