@charset "UTF-8"; /* CSS Document zu https://www.engelsrat.de vom Juli 2024*/

@font-face { font-display: swap;  /* Webfont: Raleway */ 
 font-family: 'raleway'; src: url('../webfonts/raleway-v28-latin-regular.woff2') format('woff2'); font-style: normal; font-weight: 400;  }     
    
@font-face { font-display: swap;  /* Webfont: TheRivers-Regular */  
 font-family: 'TheRivers'; src: url('../webfonts/the_rivers_regular-webfont.woff2') format('woff2'); font-style: normal; font-weight: 900; /* text-rendering: optimizeLegibility;*/ }        

html { font-size: 1rem; line-height: 1.7; 
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS. */
  -webkit-font-smoothing: antialiased; }

*{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 
* { margin: 0; padding: 0; }
*, *::before, *::after { box-sizing: border-box; background-repeat: no-repeat; }

body { font-family: 'Raleway', Helvetica, Arial, sans-serif; font-size: 1rem; transition: all 0.7s ease; 
background-color: #495781; overflow-x: hidden; }

h1, h2, h3, h4, figure, p, ol, ul, li { margin: 0; font-weight: inherit; }

p, h1, h2, h3, h4, h5 { color: #050E28; font-weight: inherit; overflow-wrap: break-word; }
a:link, a:active, a:hover, a:visited { color: #050E28; }

h1, h2, h3, h4 { margin-top: 3rem; }
h1 { font-size: 1.8rem;  /*28.8px*/ line-height: 1.5;  }	
h2 { font-size: 1.5rem;  /*24px*/ line-height: 1.3;  }
h3, h4 { font-size: 1.25rem; /*20px*/ line-height: 1.3;  } 

hr { box-sizing: content-box; color: #FFFFFF; overflow: visible; margin-bottom: 0.5rem; margin-top: 2.5rem; }

p { hyphens: auto; hyphenate-limit-chars: 10 3 4; line-height: 1.5; margin: 1rem; } /*hyphens: auto; ist automatische Silbentrennung*/
pre { font-family: monospace, monospace; font-size: 1.5rem; }

b, strong { font-weight: bolder; }
small { font-size: 90%; }
    
img { display: block; height: auto;  max-width: 100%; max-inline-size: 100%; border-style: none; vertical-align: middle;  }
.img-left { float: left; margin: 0.75rem  0.75rem  0.75rem  0.5rem; }
.img-right { float: right; margin: 0.75rem  0.75rem  0.75rem  0.5rem; }
.img-border { border: 1px solid; border-color:#145914; } /*grün*/

ol, ul, li, menu { list-style: none; margin: 0; padding-inline: 0; }
audio, canvas, img, svg, video { height: auto; max-width: 100%; vertical-align: middle; }
button,input, textarea, select { margin: 0; padding: 0; font: inherit; }
::-webkit-file-upload-button {
  -webkit-appearance: button; /* Correct the inability to style clickable types in iOS and Safari. */
  font: inherit; }
  

/* ========= DIVs u HTML elements ============ */

div { box-sizing: border-box; }
#outerContainer {margin: 0 auto; background-color: #BEC5DA; /*#a5afc8; #8D99BF;#8D99BF;#e9ecf5; */ 
border-left:#DEE0ED 1px solid; border-right:#DEE0ED 1px solid; }	
#innerContainer {margin: 0 auto; background-color: #FBFBF5; /*#e9ecf5; #e9ecf5;#dfe3ec;*/ 
border-right:#C9CAD0 1px solid; border-left:#C9CAD0 1px solid;  }

header {margin: 0 auto; text-align: center; } 
.header-font {font-family: 'TheRivers'; color: #8B0B0D; }
#sub-header {margin: 0 auto; text-align: left; font-weight: 550; color: #050E28; }

main { margin: 0 auto; margin: 0.5rem; background-color: #FBFBF5; 
padding: 0.8rem 0.4rem 0.4rem 0.4rem; transition: all 0.7s ease; }
  
aside { margin: 0 auto; padding: 0.25rem; display: block; }
figure { margin-left: 0; margin-right: 0; }
figcaption { padding: 0; text-align: left; }

footer { height: /*12rem*/ auto; margin-top: 2.5rem; margin-bottom: 2.5rem; text-align: center;  }

/* ========= HAUPT - NAVIGATION ============ Handies und Tablets haben kein Hover u Focus! */

nav { font-family: 'Raleway', sans-serif; font-weight: normal; text-decoration: none; } 

.top-nav { text-align: center; border-bottom: thin solid #8B0B0D; border-top: thin solid #8B0B0D; }
.top-nav ul { border: none; /*display: inline;*/ } 
.top-nav li { display: inline-block; margin-top: 0.5rem; }
.top-nav ul li, .top-nav li a { border: none; font-weight: normal; text-decoration: none;  display: inline-block; } 
.top-nav li a { padding: 0.5rem; font-size: 92%; }
.top-nav li a:focus, .top-nav li a:hover, .top-nav li a:active { text-decoration: underline; color: #8B0B0D; } 

.bottom-nav { padding: 0rem 0rem 2.5rem 0.2rem; line-height: 2.3rem; text-align: center;  }
.bottom-nav ul { border: none; /*display: inline;*/ }
.bottom-nav ul li, .bottom-nav li a { border: none; font-weight: normal; text-decoration: none;  display: inline-block; } 
.bottom-nav li a:focus, .bottom-nav li a:hover, .bottom-nav li a:active { text-decoration: underline; color: #8B0B0D; } 

/*in HamburgerMenu verpackte Hauptnavigation: */
nav.main-nav { height: auto; max-height: 0; overflow: hidden; transition: all 0.3s; } 
/*Das Menu bleibt so verborgen*/
.main-nav { margin: 0rem 0.2rem 0rem 0.5rem; }
.main-nav ul { border: none; font-weight: normal; } 
.main-nav ul li, .main-nav li a { border: none; font-weight: normal; text-decoration: none; } 
.main-nav a { display: block; }
.main-nav li a:link, .top-nav li a:link, bottom-nav li a:link
.main-nav li a:visited, .top-nav li a:visited, .bottom-nav li a:visited { text-decoration: none; font-weight: normal; } 
.main-nav li a:focus, .main-nav  li a:hover, .main-nav  li a:active{ text-decoration: underline; color: #8B0B0D; } 
.main-nav p {margin-left: 0; }

/*CSS zu HamburgerMenu von www.mediaevent.de*/

 .row { top: 0; }
  
  label.hamburg { /*legt das Aussehen und Position des Hamburgers fest*/
  display: block; 
  background-color: #F8EFEF; width: 3.5rem; height: 2.8rem; 
  margin-top: 0.5rem; 
  margin-left: auto; margin-right: auto;
  position: relative; cursor: pointer;
  border: 1px solid #8B0B0D;
  border-radius: 0.2rem; 
  }
  
  input#hamburg  {display: none; }
  
  .line { /*legt das Aussehen und Position der Hamburger-Linien und Hintergrundfarbe fest*/
  position: absolute; left: 0.5rem; 
  height: 0.18rem; width: 2.5rem;
  background: #8B0B0D; border-radius: 0.0125rem;
  display: block;
  transition: 0.250s; transform-origin: center; 
  }
  
  .line:nth-child(1) { top: 0.8rem; } /*legt die Position der Hamburger-Linien fest*/
  .line:nth-child(2) { top: 1.3rem; }
  .line:nth-child(3) { top: 1.8rem; }
  
  #hamburg:checked + .hamburg + nav.main-nav { max-height: 150rem; }

/* ========= CLASSES ============ */

.color-red { color:#8B0B0D; }
.color-red-2 { color:#8B0B0D; font-size: 1.5rem; }
.center { margin: 0 auto; padding: 2rem 0 1rem 0; }
.right { padding: 3rem 1.5rem 3rem 0; text-align: right; }

.fett { font-weight: 700; }
.italique { font-style: 500; font-style: italic; }
.normal { font-style: normal; }
.ol { font-weight: 500; padding-left: 2.5rem; }
.sonder { padding: 0.3rem 0 0.3rem 1.2rem; font-weight: 700; color: #8B0B0D; }
.size { font-size: 1.4rem; line-height: 1.8rem; }
.transparent { visibility: hidden; }
.txtdeco-none { text-decoration: none; }
.width { width: 20%; }

.plus-05rem { margin-top: 0.5rem; }
.plus-075rem { margin-top: 0.75rem; }
.plus-1rem { margin-top: 1rem; }
.plus-2rem { margin-top: 2rem; }
.plus-3rem { margin-top: 3rem; }
.plus-4rem { margin-top: 4rem; }
.plus-6rem { margin-top: 6rem; }

.left-1rem { margin-left: 1rem; }
.left-2-5rem { margin-left: 2.5rem;  }

.visually-hidden /*Skiplink für Screenreader, der direkt zum Inhalt führt*/
	{ position: absolute !important; clip: rect(1px, 1px, 1px, 1px) !important;
	padding: 0 !important; border: 0 !important;
	height: 1px !important; width: 1px !important; overflow: hidden !important;  }

/* ========= CLEARINGS ============ */

.clearfloat {clear: both; height: 0;font-size: 1px; line-height: 0px; }
	/* -- Dieses clear-Element sollte direkt auf das #mainContent-div folgen,
	um das #container-div anzuweisen, alle untergeordneten Floats aufzunehmen.---  */
  
/* ========= MEDIA Queries ============ */

@media only screen and (min-width:18.75rem)/*300*/ and (max-width:30em)/*480*/ 
{ 

body { font-size: 101%; line-height: 1.5; }
 #outerContainer { max-width: 30rem; /*480px*/
 background-image: url("../img-bg/ENR_768x400px.jpg"); overflow: visible; }	
 
  header { max-width: 28rem; margin: 0 auto; }
  .header-font { font-size: 4.8rem; padding-top: 2.5rem;  }
  #sub-header { max-width: 24.5rem; padding-top: 0.8rem; margin: 0 auto; text-align: center;}
    
 #innerContainer { margin: 0 auto; }
  main {  }
  nav { font-size: 101%; line-height: 2; } 
  
  aside { max-width: 30rem; display: inline-block; }
  figure { width: 70%; max-width: 85%; height: auto; margin: 0 auto; padding: 0.5rem; } 
  figcaption { padding: 2rem 0 2rem 0; text-align: left; }
  
}

@media only screen and (min-width:30.0625rem)/*481*/ and (max-width:48rem)/*768*/ 
{ 

body { font-size: 102%; line-height: 1.5; }
 #outerContainer { margin: 0 auto; max-width: 48rem; /*768px*/ 
 background-image: url("../img-bg/ENR_768x400px.jpg"); overflow: visible;  }	

  header {  }
  .header-font { font-size: 6.3rem; padding-top: 2.5rem; text-align: center; /*wichtig!*/  }
  #sub-header { max-width: 40rem; text-align: left; text-align: center; /*wichtig!*/  }
    
#innerContainer { margin: 0 auto; }  
  main { margin: 0 auto; max-width: 36rem; /*576px*/ }
  nav { font-size: 102%; line-height: 1.8; }
  
  aside { max-width: auto; display: inline-block; }
  figure { width: 70%; max-width: 85%; height: auto; margin: 0 auto; padding: 0.5rem; }
  figcaption { padding: 2rem 0 2rem 1rem; text-align: left; } 
  
}

@media only screen and (min-width:48.0625rem)/*769*/ and (max-width:64rem)/*1024*/ 
{ 

body { font-size: 104%; line-height: 1.6; }
 #outerContainer { margin: 0 auto; max-width: 64rem; /*1024px*/
 background-image: url("../img-bg/ENR_1024x400px.jpg"); overflow:visible; }	

  header { max-width: 40rem; height: 25rem; }
  .header-font { font-size: 7rem; padding-top: 4rem; text-align:center;  }
   #sub-header { width: 36rem; padding-top: 0.2rem; text-align: center; font-size: 106%; }
    
  #innerContainer { margin: 0 auto; max-width: 50rem; } /*800px*/ 
  main { margin: 0 auto; max-width: 36rem; /*576px*/ }
  nav { font-size: 104%; line-height: 1.5; }
  
  aside {  max-width: auto; display: inline-block;}
  figure { width: 50%; height: auto; padding: 0.5rem; float: left; }
  figcaption { padding: 2rem 0.5rem 1.5rem 1rem; text-align: left; }
  
  }

@media only screen and (min-width: 64.0625rem)/*1025*/ and (max-width:78.75rem)/*1260*/ 
{

body { font-size: 105%; line-height: 1.7; }
 #outerContainer { margin: 0 auto; max-width: 78.75rem; /*1260px*/ min-height: 27.1875rem; 
 background-image: url("../img-bg/ENR_1440x400px.jpg"); overflow: visible; }	

  header { max-width: 42rem; height: 25rem; }
  .header-font { font-size: 7rem; padding-top: 4rem; text-align: center;  }
  #sub-header { width: 45em; padding-top: 0.2rem; text-align: center; font-size: 106%; }
  
 #innerContainer { margin: 0 auto; max-width: 50rem; }/*800px*/ 
  main { margin: 0 auto; max-width: 37.5rem;  } /*600px*/ 
  nav { font-size: 106%; line-height: 1.55; }
  
  aside { max-width: auto; display: inline-block; } 
  figure { width: 50%; height: auto; padding: 0.5rem; float: left; }
  figcaption { padding: 2rem 0.5rem 1.5rem 1rem; text-align: left; }
  
  }

@media only screen and (min-width: 78.8125rem)/*1261*/ and (max-width:90rem)/*1440*/ 
{  

body { font-size: 108%; line-height: 2.3; }
 #outerContainer { margin: 0 auto; max-width: 90rem;/*1440px*/ 
 background-image: url("../img-bg/ENR_1600x400px.jpg"); overflow: visible; }	

  header { max-width: 42rem; height: 25rem; }
  .header-font { font-size: 7rem; padding-top: 4rem; text-align: center; }
  #sub-header { min-width: 45rem; padding-top: 0.2rem; text-align: center; font-size: 106%; } 
    
#innerContainer { margin: 0 auto; max-width: 61rem; }  /*976px*/ 
  main { margin: 0 auto; max-width: 37.5rem;  } /*600px*/ 
  nav { font-size: 108%; line-height: 1.65; }
  
  aside { max-width: auto; display: inline-block; }
  figure { width: 50%; height: auto; padding: 0.7rem; float: left; }
  figcaption { padding: 2rem 0.5rem 1.5rem 1rem; text-align: left; }
  
 }

@media only screen and (min-width: 90.0625rem)/*1441px*/
{

 body { font-size: 110%; line-height: 2.3; }
 #outerContainer { margin: 0 auto; max-width: 100rem; /*1600px*/ 
 background-image: url("../img-bg/ENR_1600x400px.jpg"); overflow: visible;  }	

 header { max-width: 42rem; height: 25rem; }  
 .header-font { font-size: 7rem; padding-top: 4rem; text-align: center; }
 #sub-header { width: 45rem; padding-top: 0.2rem; text-align: center; font-size: 106%; }
 
 #innerContainer { margin: 0 auto; max-width: 61rem; } /*976px*/ 
 main { margin: 0 auto; max-width: 37.5rem;  } /*600px*/ 
 nav { font-size: 108%; line-height: 1.65; }
 
 aside { max-width: auto; display: inline-block; } 
 figure { width: 50%; height: auto; padding: 0.7rem; float: left; }
 figcaption { padding: 2rem 0.5rem 1.5rem 1rem; text-align: left; }

}