/* = = = = = = = = = = = = = = = = = 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;
}

body {height:100%;
font-size:1.7rem;
margin: 0 auto;
color:#324147;
}

h1, h2 {text-align:center;
font-weight:normal;color:#FF6600;
}

h3, h4, h5 {
color:#324147;
}

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

h2 {text-transform:uppercase;
font-size:2.5rem;
line-height: 3rem;
margin-top: 1rem;
margin-bottom: 4.5rem;
}

h2:after {display:block;
border-top: 1px solid #FF6600;
width: 100%;
content: "";
margin: 0 auto;
margin-top: 2rem;
}

h3 {color:#324147;
font-size:1.8rem;
line-height: 2.3rem;
margin-top: 5rem;
margin-bottom:-0.5rem;
letter-spacing:0rem;
text-transform:uppercase;
}

h4 {
margin-top: 2rem;
margin-bottom:-1.5rem;
}

.subheadline {
  font-size: 1.7rem;
  color: #FF6600E3;
}

/* quelltext-erklrungen - wenn vorhanden */

pre {white-space:pre-wrap;position:relative;
font-size:1.4rem;
font-family: arial, Verdana, Segoe, 'Open Sans',helvetica,roboto ,sans-serif;
padding:0rem 1rem 2rem 1rem;
margin:4rem auto;
text-align:center;
border:solid 0.1rem rgba(0,0,0,.1);
background:#F7FAFD;
border-radius:1.5rem;
}

pre .extra {display:inline-block;position:absolute;left:-1.5rem;top:1.5rem;font-size:1.8rem;
color:#fff;font-weight:normal;background:orange;padding:0 .5rem;
transform:rotate(-45deg);
}


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

/* bilder -anpassen der grsse */
img {max-width: 100%;display:block;
margin:0 auto;
height: auto;
}

.gallery {
	width: 800;
	height: 530;
}

/*  ----------------------------------------  */
/* allgemeine links */
/*  ----------------------------------------  */

a {
color:#324147;
#text-decoration: underline;
}

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


/*  ----------------------------------------  */
/*   MEHR LESEN-BUTTON  */
/*  ----------------------------------------  */

.button  {display:block;
margin:4rem 0 1rem 0;
text-align:center;
}

.button .mehr_lesen a {display:inline-block;
background:#E3E6E6;color:#4D646F;
text-decoration:none;
padding:.4rem 3rem .4rem 1rem;
border-radius:0;
}

.button .mehr_lesen a:hover {color:white;
background:#FF8000;
}


/*  icon beim MEHR LESEN-BUTTON */

.button .mehr_lesen a:before {display:inline-block;
font-family:'Font Awesome 5 Free';
font-weight: 900;
content:"\f054" ;
transform:scale(.9);
color:dodgerblue;
padding: 0 1rem;
margin:0;
}

.button .mehr_lesen a:hover:before {color:orange; }



/* = = = = = = = = = =  = = = = = = = = = =  = = = = = = = = = = = = = = = = = = = = */
/*  GRID-SYSTEM  - fr Bilder / Spalten */
/* = = =  = = = = = =  = = = = = = = = = =  = = = = = = = = = = = = = = = = = = = = */

.box {display:inline-block;
width:100%;
padding:.5rem;
text-align:left;vertical-align:top;
margin:0rem -.22rem 0rem -.22rem ;/* ausgleich ( minus-margin) fr INLINE-BLOCK-WHITESPACE-BUG*/
}

/*  boxen - grundsystem */

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


/*  boxen - fr mgliche abweichungen vom boxen-grundsystem */

.box-1_of_4b  {width: 50%; }
#gallery .box-1_of_3 {width:33.33%; }
#fuss .box-1_of_4  {width: 100%; }


/*  boxen - extra style foto-galerie/lightbox */

#gallery .box  img {border:solid 10px #C2DAEF; }
#gallery img:hover  {border:solid 10px #5295D1; }


/*  boxen - boxen mit berschriften/text */

article.text {
padding:0 0 0 1rem;
margin:0;
}

article.text h3 {
text-align:left;
font-size:1.8rem;
margin-top:2rem;
margin-bottom:1rem;
}




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

header {background:#fff;}


/* ############################################################ */
/* bereich top */
/* ############################################################ */

#top {
display:block;
color:#53686F;
margin: 0 ;
padding:4rem 0rem 0rem 0rem;
}

.top-a {display:block;
text-align:center;
padding:1.5rem .5rem ;
}

.top-b {display:block;
background:#E5EFF8;
text-align:center;
padding:1rem;
margin:0
}

.name {display:block;font-family:'old_standard_ttitalic';
letter-spacing:0px;
margin:0rem;
padding:0rem 0rem;
font-size:2.3rem;
line-height: 2.6rem;
color:#1f1f1f;
text-transform:none;
text-shadow:none;
}

.phone-link {
text-decoration: none;
}


/* ----- icons ----- */

#top ul.icons { display:block;
list-style:none;
margin:0;
padding:.5rem 0;
}

#top .icons li { display:inline-block;
padding:0 .2rem;
}

#top .icons i {display:inline-block;
color:#53686F;
text-shadow:none;
font-size:1.8rem;
line-height:2.2rem;
padding:0 1rem 0rem 0;
}

#top .icons i:hover {
color:#53686F;
}



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

#logo {display:block;
margin: 0 auto;
padding:0rem;
overflow:hidden;
}

.logo-a {height:99vh;
background-position:50% 50%;
background-repeat:no-repeat;
background-size:cover;
}



/* ############################################################ */
/* bereich inhalt */
/* ############################################################ */

main {display:block;border-top:solid 1rem white;}

#inhalt {display:block;width:100%;
margin:0 auto;
padding:0rem;
}

.section-inhalt {display:block;
width:100%;
margin:0;
padding:0rem;
}

.inhalt-a {display:block;margin:0 auto;
padding:6rem 2rem 6rem 2rem;
}


/*  ----------------------------------------  */
/*  NTH-CHILD - jeder ungerade (odd) abschnitt, also 1, 3, 5 , 7 usw. */
/*  ----------------------------------------  */

.section-inhalt:nth-child(odd) {
background:#DADDDF2B;
}


/*  ----------------------------------------  */
/*  NTH-CHILD - jeder gerade (even) abschnitt , also 2, 4, 6 , 8 usw. */
/*  ----------------------------------------  */

.section-inhalt:nth-child(even) {
background:#fff;
}


/*  ----------------------------------------  */
/* box information  */
/*  ----------------------------------------  */

#information  {display:block; }

#information  .box {display:inline-block;
margin-bottom:2rem;
POSITION:relative;
border:solid 1px rgba(0,0,0,.1);
}

#information .button  {text-align:left;margin-left:-.3rem }

/* button wird am unteren rand der box platziert  */
#information .button span.mehr_lesen a {display:inline-block;
POSITION:absolute;
bottom:0;
background:whitesmoke;
border:0;
margin:0;
padding:.4rem 1rem .4rem 1rem;
}

#map-container {
	height:600px;
	
}

#map-container-box {
	display:flex;
	align-items: center;
    justify-content: center;
	height: 600px;
	
	background:#d0d0d0;
}

#map-container-text {
	text-decoration:underline;
	margin-left:20px;
	margin-right:20px;
}


#map-container-text:hover {
	text-decoration:none;
	cursor:pointer;
	
}

.inputfield {
	height: 35px;
	display: block;
	width: 100%;
	padding: 0px 12px;
	margin-bottom: 10px;
	font-size: 14px;
}

.inputfieldtext {
	height: 200px;
	display: block;
	width: 100%;
	padding: 0px 12px;
	font-size: 14px;
	font-family: tahoma;
	padding-top: 10px;
	
}

.submitbutton {
	margin-top: 20px;
	padding: 8px 25px;
}

.error {
    border: 2px solid red;
}

.checkbox-rahmen {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	padding: 1px;
}

#Datenschutz {
  margin: 0;
}

.input-container {
    position: relative;
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-4px); }
  100% { transform: translateX(0); }
}

.error {
  animation: shake 0.3s;
}


.kontakt-erfolg, .kontakt-fehler {
    animation: fadeIn 0.8s ease forwards;
    opacity: 0; /* initial versteckt */
    margin-left: 30px;
    margin-right: 30px;
}

@keyframes fadeIn {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

.captcha-block {
    margin-bottom: 25px;
}

.captcha-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

.captcha-left img {
    border: 1px solid #ccc;
    border-radius: 5px;
    height: 60px;
    display: block;
}

.refresh-captcha {
    background-color: #FF6600;
    color: white;
    border: none;
    padding: 8px 15px;
    font-size: 18px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    width: 60px;
}

.refresh-captcha:hover {
    background-color: #e55d00;
}

.captcha-input {
    width: calc(60px + 15px + 150px); /* Höhe + Abstand + Bildbreite (geschätzt) */
    max-width: 225px; /* Optionaler Schutz bei kleineren Viewports */
}

.captcha-hint {
    display: none; /* initial versteckt */
    color: #c60000;
    font-size: 1.4rem;
    margin-top: 5px;
    padding: 5px;
    border-left: 4px solid #c60000;
    background-color: #fce9e9;
    border-radius: 3px;
    animation: fadeIn 0.4s ease forwards;
}


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

footer {padding:3rem 0rem 3rem 0rem ;
margin:0 auto;
background:#535353;
}

#fuss {display:block;
width:100%;
margin: 0 auto;
padding:0;
}

.fuss-a {display:block;
margin: 0;
padding:0 1rem;
}

#fuss .box  {
margin-bottom:2rem;padding:0 1rem;
}

#fuss .box h3 {
text-align:left;
font-size:1.6rem;
color:#fff;
font-weight:bold;
margin-bottom:1rem;
}

/* fussmenu plus die wesentlichen schriftformate fr den gesamten footer */

#fuss,
#fuss li a,
.fussmenu li.kein-link {
color:#fff;
font-size:1.5rem;
line-height:2.2rem;
text-decoration:none;
}

.fussmenu  ul {text-align:left;list-style: none;padding: 0;margin: 0; }

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

/* fussmenu - die social media icons */

.social i {font-size:1.2rem;
color:white;
padding-right:.6rem;
}

.social  a:hover i {color:white;transform:scale(1.2);}


/* ############################################################ */
/* bereich cookie banner */
/* ############################################################ */

#cookie-banner {
	position:fixed;
	bottom:20px;
	left:20px;
	right:20px;
	background:#f5f5f5;
	color:#333;
	padding:20px;
	box-shadow:0 4px 12px rgba(0,0,0,0.2);
	border-radius:8px; 
	font-family:Arial, sans-serif;
	z-index:90;
}

#cookie-banner p {
	margin:0;
	font-size:16px;
}

#cookie-banner button {
	padding: 10px 20px; 
	color: white; 
	border: none; 
	border-radius: 4px; 
	cursor: pointer;
}

.accept_button {
	background-color:#0072c6; 
	margin-right:10px;
}

.decline_button {
	background-color:#999;
}


/* ############################################################ */
/* M E D I A   Q U E R I E S */
/* CSS Bildschirmabfragen */
/* ############################################################ */

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

/*
 - hinweis -
fr die kleinste smartphone-auflsung von 320 pixel bentigen wir KEINE bildschirmabragen (css-media queries),
denn hierfr 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 480 pixel ================================== */
@media (min-width: 480px) {

.inhalt-a  {width:90%;}

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

}


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

html {font-size:70%; }

/* - - - - -  GRID-SYSTEM  - - - - - */
#information  .box {width:75%; }
/* - - - - - ende  GRID-SYSTEM  - - - - - */

}


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

/* keine angabe */

}


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

header {height:auto;}
.logo-a {height:30rem; }
.inhalt-a  {width: 96%;}

.box {font-size:1.7rem; }
article.text h3 {font-size:1.7rem; }

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

#top {display:table;
width: 100%;height:100%;
border-spacing:.2rem .2rem;
table-layout:fixed;
border-collapse:separate;
padding:.5rem 0;
}

.top-a {display:table-cell;text-align:center;vertical-align:middle;width:50%; }
.top-b {display:table-cell;text-align:center;vertical-align:middle;width:50%;background:transparent; }

#information  {display:table;
width: 100%;
border-spacing:.5rem .1rem;
table-layout:fixed;
border-collapse:separate;
}

#information  .box {display:table-cell;vertical-align:top; }

#fuss,
#fuss li a,
#fuss li.kein-link {
font-size:1.3rem;
}

#fuss .box h3 {font-size:1.3rem; }

.footer_div {
width: max-content;
margin: auto;
}


}

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

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

}


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

pre {width:70%; }

}


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

@media (min-width: 1200px) {

html {font-size:80%; }

.inhalt-a  {width:80%;}
#fuss {width:94%;}

}


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