/* = = = = = = = = = = = = = = = = = datei format.css = = = = = = = = = = = = = = = = = = = = = = = = = */


/* ############################################################ */
/* allgemein */
/* ############################################################ */

*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}


html, body {
font-family:'open_sanslight',georgia, tahoma, arial, Verdana, Segoe, 'Open Sans',helvetica,roboto ,sans-serif;
font-size:62.5%;
line-height:1.5;
font-weight:normal;
height:100%;
}

body {
overflow-wrap:break-word;
}

body {
font-size:1.7rem;
margin: 0 auto;
}


p.break  {
line-height:7rem;margin:0;
}


/* �berschriften */

h1, h2, h3, h4, h5 {
color:#000;
text-align:left;
letter-spacing:0px;
font-weight:normal;
-webkit-text-stroke:.4px currentColor;
text-transform:none;
}

h1 {
font-size:3.5rem;
line-height: 3.7rem;
margin-top: 0rem;
margin-bottom: 1.5rem;
}

h1, h2 {
font-size:2.5rem;
line-height: 3rem;
margin-top: 2rem;
margin-bottom: 1.5rem;
}

h1:after, h2:after {text-align:left;
border-top: 6px solid #4684B7;
display: block;
width: 60px;
content: "";
margin: 8px 0 ;
}

h2.no-underline:after {
display:none;
content:none;
border-top:none;
margin:0;
}

h3 {
font-size:2rem;
line-height: 2.3rem;
margin-top: 1rem;
margin-bottom:1rem;
letter-spacing:0rem;
}

/* allgemeine links  */

a {background-color:transparent;
color:#000 ;
text-decoration: underline;
}

a:hover  {color:#000;
text-decoration:none;
}

/* quelltext-erkl�rungen - wenn vorhanden */
pre {white-space:pre-wrap;position:relative;
font-size:1.5rem;
padding:1rem 0.5rem 1rem 0.5rem;
margin:2rem auto;
text-align:center;
background:#2c393a;
color:#CFCFCF;
border:dashed 1px #535353;
font-family:'open_sanslight',georgia, tahoma, arial, Verdana, Segoe, 'Open Sans',helvetica,roboto ,sans-serif;
}

pre .extra {display:inline-block;position:absolute;left:0rem;top:1rem;font-size:2rem;
color:#CFCFCF;font-weight:bold;
transform:rotate(-45deg);
}


/* ############################################################ */
/*  speziell*/
/* ############################################################ */

.container_haupt {
margin:0 auto;
padding:0;
width:100%;background:#fff;
}

/* bilder  anpassen der gr�sse  */
/*
wenn sie eigene einzelne bilder einbauen, unabh�ngig von unserem bilderstystem,
dann werden diese bilder maximal (max-width) so gross wie die original-abmessungen des bildes
bwz. des umschliessenden containers wenn vorhanden
*/

img {max-width: 100%;
height: auto;
margin:0 auto;
}


/* = = = = = = = = = =  = = = = = = = = = =  = = = = = = = = = = = = = = = = = = = = */
/*  GRID-SYSTEM #1  - mit DISPLAY:INLINE-BLOCK */
/* = = = = = = = = = =  = = = = = = = = = =  = = = = = = = = = = = = = = = = = = = = */

.wrapper-box {display:block;
text-align:center;
padding:0rem;
}

.willkommen-flex {
text-align:left;
}

.willkommen-flex .box-1_of_2 {
vertical-align:middle;
}

.willkommen-flex .box-1_of_2:first-child {
padding-right:1.5rem;
}

.willkommen-flex .box-1_of_2:last-child {
padding-left:1.5rem;
}

.willkommen-flex .box-1_of_2:not(:has(img)) {
text-align:justify;
}

.box {display:inline-block;
width:100%;height:100%;
vertical-align:top;
padding:.3rem .3rem .3rem .3rem;
margin:0 -.25rem 0 -.25rem ;/* ausgleich ( minus-margin) f�r INLINE-BLOCK-WHITESPACE-BUG*/
}


.box-1_of_1 ,
.box-1_of_2 ,
.box-1_of_3 ,
.box-1_of_4 ,
.box-1_of_5 ,
.box-1_of_6
{width:100%;
}

.box-1_of_4b
{width:50%;
}

.box img,
.box a img {display:block;
width: 100%;
height: auto;
aspect-ratio: 3 / 2;
object-fit: cover;
border:none;
box-shadow:0px 1px  2px #000;
}




/* ############################################################ */
/* bereich leiste */
/* ############################################################ */


.leiste-content {
width:100%;
margin:0 auto;
padding:0rem;
}

.box-tabcell-1b .site-logo-above {
display:inline-block;
width:43rem;
max-width:88vw;
height:auto;
margin:0 0 1rem 0;
padding:.8rem 1.5rem;
background:rgba(0,0,0,.5);
box-shadow:0px 0px 0px 1px white;
box-sizing:border-box;
}


/* ############################################################ */
/* bereich slideshow header */
/* ############################################################ */

#slideshow {position:relative;
width:100%;height:30rem;
overflow:hidden;
margin:0;
padding:0;
}


/* ############################################################ */
/* bereich logo */
/* ############################################################ */

.section-logo {position:absolute;
z-index:1;
top:0;left:0;
width:100%;
overflow:hidden;
margin:0;
padding:0;
}

.logo-content {
width:100%;
margin:0 auto;
}

#logo .site-logo {
position:absolute;
left:2rem;
top:50%;
transform:translateY(-50%);
height:40%;
width:auto;
z-index:2;
}

/* name */

.name {display:inline-block;width:auto;
min-width:30rem;
max-width:100%;
box-sizing:border-box;
background:#FFB300; /* IE9 */
background:rgba(0,0,0,.5);
color:#fff;
font-size:2.2rem;
line-height:2.4rem;
text-align:center;
padding:.3rem 1rem;
margin:0;
text-transform:uppercase;
box-shadow:0px  0px 0px 1px white;
}

.name b {
display:inline-block;
white-space:nowrap;
font-weight:normal;
letter-spacing:2px;
font-size:1.4rem;
}


/* -----menu und icons ----- */

#logo ul {
padding:0rem;
margin:0;
}

#logo li {list-style:none;display:inline;
padding:0rem;
margin:0;
}

#logo .fas ,
#logo .fab ,
#logo .far {display:inline-block;
background:#576c5a;
background:rgba(0,0,0,.5);
color:#fff;
font-size:1.6rem;
padding:1rem;
box-shadow:0px  0px 0px 1px white;
margin:0 -.15rem;
transition:all .3s ease-out;
}

#logo a:hover .fas ,
#logo a:hover .fab ,
#logo a:hover .far {
background:#576c5a;
transform:scale(1.3)
}



/* -----GRID-SYSTEM #2  - mit DISPLAY:TABLE  ----- */

#logo .wrapper-box-table {
display:table;
table-layout:fixed;
width:100%;height:30rem;
padding:0;
background:transparent;
text-align:center;
}

#logo .box-tabcell-1a {
display:table-cell;
width: 100%;
padding:1rem 0;
vertical-align:middle;
}

#logo .box-tabcell-1b  {
display:table-cell;
width: 100%;
height:100%;
padding:0 1rem;
vertical-align:middle;
text-align:right;
background:transparent;
}

/* tabellenzelle-reihe */
#logo .tabrow {display:table-row; }


/* ############################################################ */
/* bereich content */
/* ############################################################ */

.section-content {
width:100%;
margin:0;
padding:0;
color:#000 ;
}

.content {
display:block;
width:100%;
min-height:40vh;
margin: 0 auto;
padding:6rem 2rem;
text-align:left;
}

/*  ----------------------------------------  */
/*  der erste abschnitt und davon ausgehend jeder dritte abschnitt, also abschnitt 1, abschnitt 4, abschnitt 7 usw */
/*  ----------------------------------------  */


.section-content:nth-child(3n+1) {
background:#445355;
color:#F4F6F5;
}

.section-content:nth-child(3n+1) h1 ,
.section-content:nth-child(3n+1) h2 ,
.section-content:nth-child(3n+1) h3 ,
.section-content:nth-child(3n+1) h4 {
color:#F4F6F5;
}

.section-content:nth-child(3n+1) h1 span,
.section-content:nth-child(3n+1) h2 span {
font-weight:bold;
}

.section-content:nth-child(3n+1) h1:after,
.section-content:nth-child(3n+1) h2:after  {
border-top: 4px solid #768a78 ;
}

/*  links */

.section-content:nth-child(3n+1)  a  {text-decoration:underline;
white-space:nowrap;
color:#F4F6F5;
}

.section-content:nth-child(3n+1)  a:hover  {text-decoration: none;
color:#F4F6F5;
}


/*  ----------------------------------------  */
/*  der zweite abschnitt und davon ausgehend jeder dritte abschnitt, also abschnitt 2, abschnitt 5, abschnitt 8 usw */
/*  ----------------------------------------  */

.section-content:nth-child(3n+2) {
background:#452827;
color:#F6F2F1;
}

.section-content:nth-child(3n+2) h1 ,
.section-content:nth-child(3n+2) h2 ,
.section-content:nth-child(3n+2) h3 ,
.section-content:nth-child(3n+2) h4 {
color:#F6F2F1;
}

.section-content:nth-child(3n+2) h1 span,
.section-content:nth-child(3n+2) h2 span {
font-weight:bold;
}

.section-content:nth-child(3n+2) h1:after,
.section-content:nth-child(3n+2) h2:after  {
border-top: 4px solid #768a78 ;
}

/*  links  */

.section-content:nth-child(3n+2)  a  {text-decoration:underline;
white-space:nowrap;
color:#F6F2F1;
}

.section-content:nth-child(3n+2) a:hover  {text-decoration: none;
color:#F6F2F1;
}


/*  ----------------------------------------  */
/*  der dritte abschnitt und davon ausgehend jeder dritte abschnitt, also abschnitt 3, abschnitt 6, abschnitt 9 usw  */
/*  ----------------------------------------  */

.section-content:nth-child(3n+3) {
background:#576C5A;
color:#FFFFFF;
}

.section-content:nth-child(3n+3) h1 ,
.section-content:nth-child(3n+3) h2 ,
.section-content:nth-child(3n+3) h3 ,
.section-content:nth-child(3n+3) h4 {
color:#FFFFFF;
}

.section-content:nth-child(3n+3) h1 span,
.section-content:nth-child(3n+3) h2 span {
font-weight:bold;
}

.section-content:nth-child(3n+3) h1:after,
.section-content:nth-child(3n+3) h2:after  {
border-top: 4px solid #C6D0C8;
}

/*  links */

.section-content:nth-child(3n+3)  a  {text-decoration:underline;
white-space:nowrap;
color:#FFFFFF;
}

.section-content:nth-child(3n+3)  a:hover  {text-decoration: none;
color:#FFFFFF;
}

/*  ----------------------------------------  */
/*  kontakt box, reduced height (~50% of default) */
/*  ----------------------------------------  */

.kontakt-box {
min-height:12vh;
padding:2rem 2rem;
}

.kontakt-box h2 {
margin-top:.5rem;
margin-bottom:1rem;
}

.kontakt-box h2:after {
margin:4px 0;
}

.kontakt-box .break {
line-height:1.5rem;
}

/*  ----------------------------------------  */
/*  kontakt logo + info, equal sizing         */
/*  ----------------------------------------  */

.kontakt-flex {
display:flex;
flex-wrap:wrap;
align-items:stretch;
}

.kontakt-flex .box-1_of_2 {
display:flex;
flex-direction:column;
justify-content:center;
text-align:left;
font-size:1.5rem;
}

.kontakt-flex .box-1_of_2:last-child {
padding-left:15rem;
padding-top:1.5rem;
}

.kontakt-flex .box-1_of_2 img {
max-width:100% !important;
width:100% !important;
aspect-ratio:auto !important;
object-fit:contain !important;
box-shadow:none !important;
}

.kontakt-flex .box-1_of_2 p {
margin:0 0 .4rem 0;
}

/*  ----------------------------------------  */
/*  kontakt send button                       */
/*  ----------------------------------------  */

.kontakt-send-btn {
display:block;
width:100%;
box-sizing:border-box;
margin-top:1.2rem;
padding:.3rem 2rem;
background:#5f4948;
color:#fff !important;
text-decoration:none !important;
text-align:center;
text-transform:uppercase;
letter-spacing:1px;
font-size:1.3rem;
border-radius:.4rem;
transition:background .2s ease, transform .2s ease;
}

.kontakt-send-btn:hover {
background:#576c5a;
transform:translateY(-2px);
}



/* ############################################################ */
/* bereich fuss */
/* ############################################################ */

.section-fuss {display:table;
width:100%;
height:4rem;
background:#576C5A;
color:#9dad9f;
}

.fuss-content {display:table-cell;
text-align:center;
vertical-align:middle;
margin: 0rem auto;
padding:.5rem 0 ;
}


/* -----menu und icons ----- */

#fuss ul {text-align:center;
padding:0rem;
margin:0;
}

#fuss  li {list-style:none;display:block;
padding:0rem .2rem;
margin:0;
}

#fuss li a {display:inline-block;
text-decoration : none;
font-size:1.4rem;
letter-spacing:0rem;
padding:0rem ;
margin: 0;
color:#9dad9f;
}

#fuss li a:hover {background:transparent;
color:#fff;
text-decoration:underline;
}

#fuss .fas {
font-size:1.6rem;
vertical-align:middle;
}

#fuss li a:hover .fas {
text-decoration:none;
}


/* ############################################################ */
/* M E D I A   Q U E R I E S - RESPONSIVE-BILDSCHIRMABFRAGEN */
/* ############################################################ */

/* ==================================== ab 320 pixel ================================== */


/* - - - - -  nur info - - - - - */
/*  f�r die kleinste smartphone-aufl�sung von 320pixel ben�tigen wir KEINE bildschirmabragen (media queries), denn hierf�r gilt ja automtisch der gesamte vorstehende quelltext-code - weil wir das template ja 'mobile-first' angelegt haben */



/* ==================================== ab 360 pixel ================================== */

@media (min-width: 360px) {

/* keine angabe */

}


/* ==================================== ab 400 pixel ================================== */

@media (min-width: 400px) {

/* keine angabe */

}


/* ==================================== ab 480 pixel ================================== */

@media (min-width: 480px) {

.content {padding:6rem 3rem; }


}


/* ==================================== ab 600 pixel ================================== */
@media (min-width: 600px) {


/* - - - - -   GRID-SYSTEM #1   - - - - - */
.box-1_of_1 {width: 50%; }
.box-1_of_2 {width: 50%; }
.box-1_of_3 {width: 33.33%;  }
.box-1_of_4 {width: 50%; }
.box-1_of_4b {width: 25%; }

/* - - - - - ende  GRID-SYSTEM #1 - - - - - */


/* - - - - -  GRID-SYSTEM #2 - mit display:table/table-cell - - - - - */
#logo .box-tabcell-1a ,
#logo .box-tabcell-1b  {width: 50%; display:table-cell}
#logo .tabrow {display:none; }
/* - - - - - ende  GRID-SYSTEM #2  - - - - - */


}


/* ==================================== ab 768 pixel ================================== */
@media (min-width: 768px) {

html {font-size:70%;}

.content {padding:6rem 4.5rem; }

/* - - - - -   GRID-SYSTEM #1  - - - - - */
.box-1_of_2 {width: 50%;  }
/* - - - - - ende  GRID-SYSTEM #1  - - - - - */


#fuss  li {display:inline; }

}


/* ==================================== ab 800 pixel ================================== */

@media (min-width: 800px) {

/* keine angabe */


}


/* ===================================== ab 1024 pixel ================================= */

@media (min-width: 1024px) {

.name {font-size:3.6rem; line-height:3.6rem; }

.name b {font-size:1.8rem; }

/* - - - - -  GRID-SYSTEM #1   - - - - - */
.box-1_of_4 {width: 25%;  }
.box-1_of_5 {width: 20%;  }
/* - - - - - ende  GRID-SYSTEM #1  - - - - - */

}



/* ===================================== ab 1100 pixel ================================= */

@media (min-width: 1100px) {

html { font-size:75%; }

.content {padding:6rem 7rem; }

pre {width:50vw; }


}


/* ===================================== ab 1200 pixel ================================= */

@media (min-width: 1200px) {

/* einr�cken der bilder */
.content .wrapper-box {padding:0rem 5rem; }

}



/* ===================================== ab 1400 pixel ================================= */

@media (min-width: 1400px) {

html { font-size:80%; }

.content {padding:6rem 9rem; }

}



/* +  +  +  +  + +  +  +  +  +  C O D E ENDE  +  +  +  +  +  +  +  +  +  + */