/* cmsms stylesheet: wolff-css modified: Freitag, 16. Oktober 2026 11:51:46 */
@import url("/fonts/font.css");

* {
margin : 0;
padding : 0;
}
html, body {
font-family : 'comfortaa';
line-height : 150%;
color : #323232;
font-size : 94%;
width : 100%;
max-width : 100%;
background : #fff;
position: relative;
height: 100%;
}
.screenreader-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Macht den Link sichtbar, sobald ein Tastaturnutzer darauf tabbt */
.screenreader-only:focus {
  position: absolute;
  width: auto;
  height: auto;
  padding: 10px 15px;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  background-color: #fff;
  color: #000;
  outline: 2px solid #000;
  z-index: 9999;
}
main {
 height: auto; 
}

.url {
  opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        height: 0;
        width: 0;
        z-index: -1;
}
p {
margin-bottom: 1em; 
}
#menuright {position: absolute; right: 0 !important; top: -0.8em;}
#menuright ul {
padding: 0;
margin: 0;
}
#menuright ul { }
#menu li, #menuright li {
float : left;
list-style-type : none;
}
#menuright li {
width: 8%;
height: auto;
float: right;
margin-left: 1.5em;

text-align: center;
}

#menuright img {
width: 80%;}
/* Layout-neutraler Fokus-Rahmen für Tastatur-Nutzer */
#menuright a {
  display: block;
  border-radius: 4px;
}

#menuright a:focus-visible {
  outline: 3px solid #005fcc; /* Ihre Kanzlei-Farbe */
  outline-offset: 2px;
}

.oben {
position : fixed;
right : 1em;
bottom : 1em;
z-index : 100000;
width:3em;
}
.oben img {width: 100%; height: auto;}




.adress {
float : left;
border : #000 solid 1px;
width : 25%;
margin : 0 1em 1em 0;
height : 16em;
padding : 1em;
}
.cont {
width : 70%;
max-width : 1000px;
position : relative;
margin : 0 auto;
padding : 12em 0 5em 0;
}
.cont h2 {
background : #ebeaea;
color : #000;
text-align : left;
padding : 0.5em;
margin : 1em 0 0.5em 0;
font-size : 200%;
}
.thumb {
display : inline;
width : 100% !important ;
}

.closeall {
  position: absolute;
width: 100%;
height: 100%;
display: block;
z-index: 102 !important;
}
.previous {
position : fixed;
left : 2em;
top : 42%;
width : 1em !important ;
z-index: 150 !important;
}
.exit {
position : fixed;
bottom : 4px;
right : 2em;
width : 1.2em !important ;
}
.cont h3 {
font-size : 125%;
margin : 1em 0 0.5em 0.75em;
}
.cont ul {
margin : 0 0 0 2em;
}
@keyframes fadeIn {
from {
opacity : 0;
transform : translate3d(0,3%,0);
}
to {
opacity : 1;
transform : translate3d(0,0,0);
}
}
.fadeIn {
animation-name : fadeIn;
animation-duration : 1s;
}


ul {
margin : 5% 0 0 5%;
}
a {
text-decoration : none;
color : #8ea695;
}
h2, .detail h1, .cont h1 {
display : block;
margin-bottom : 1em;
text-align : center;
font-size : 230%;
line-height : 120%;
font-weight: normal;

font-family: 'crimson text';
}

.detail h2 {
font-size : 170%;
}
.hidden {
opacity : 0;
}
.visible {
opacity : 1;
}
h3 {
font-size : 150%;
margin : 0.7em 0 0.7em;
font-weight: bold;
}
.center h3 {
font-size: 120%;
margin-top: 1em;
}

.detail a {
text-decoration : underline;
}

.parallax {
text-align : center;
display : flex;
flex-wrap : wrap;
justify-content : center;
overflow : hidden;
position: relative;
width : 100%;
height: 77vh;
background-position : top center;
background-repeat : no-repeat;
background-attachment : fixed;
background-size : cover !important ;
margin-bottom : 2em;
}
.parasmall {
height : 50% !important ;
}
.parallax h1 {
position: relative;
margin: 0 !important;
box-decoration-break : clone;
line-height: 150%;
font-size : 140%;
color: #000;
font-weight: normal;
width: 100%;
text-align: center;
background: rgba(255,255,255,0.6);
padding: 0 1em 0 1em;
font-family: 'crimson text';
}

.title {
position: relative;
color : #fff;
text-align: center;
top: 75% !important;
width: 100%;
}
.anker {
display : block;
position : relative;
top : -7em;
visibility : hidden;
}
.bigwrap {
padding : 1em 0 1em 0;
}
.dark {
background : #dee5e0;
background-size : 40%;
}


.mitte {
clear : both;
width : 100%;
overflow : hidden;
}
.mitte img {
width : 100%;
height : auto;
}

.exit {
position : fixed;
bottom : 4px;
right : 2em;
width : 1.2em !important ;
}
.tp {
top : 4px;
}

header {
width : 100%;
position : fixed;
top : 0;
height :4.5em;
background : #fff;
z-index : 100;
border-bottom: 1.9em solid  #525254;
}
.center {
max-width : 1200px;
margin : 0 auto;
text-align : left;
width : 80%;
padding : 2% 0 2% 0;
}
.sub {padding: 0 !important;display : flex;
flex-wrap : wrap;
justify-content : center;}
.sub ul {
list-style-type: none;
margin: 0;}
.sub li {
margin-right: 0.5em;}
.sub a {
color: #525254;
}
.hi {
width: 100%;
height: 100%;
position: relative;
}



h1 {
display : inline;
margin-bottom : 1em;
font-size : 200%;
}
#headcenter {
width : 80%;
max-width : 1200px;
position : relative;
margin : 0 auto;
text-align : left;
height: 9em;
}
#logo {
margin-top : 1.3em;
font-size: 140%;
font-family: 'crimson text';
width: 50%;
}
#logo a {color: #323232;}
#logo img {
width : 100%;
}


.sm img {
width: 60%;
box-shadow: none;}
.lightbox .pic {
width : 22%;
float : none;
margin-bottom : 0;
margin-left : 3em;
}


.topnav {
position: absolute;
font-family: 'crimson text';
bottom: 4.5em;
width: 80%;

}
.topnav ul, #foot.topnav li {
padding: 0;
margin: 0;
font-size: 116%;
}
.topnav li, #foot.topnav li {
float : left;
margin-right : 1px;
list-style-type : none;
}
.topnav a {
color : #fff;
display : block;
padding : 0.2em 1em 0 1em;

}
.topnav a.currentpage, .topnav a:hover {
transition : background 1s ease;
background: #c5cfc8;
color : #525254;
}
/* Der Hauptcontainer nutzt Flexbox zum Zentrieren */
#thumblist {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2em 3em; /* Steuert den Abstand sauber (Modernes Ersatz für margin-right) */
  width: 100%;
  padding: 0;
  text-align: center;
}

/* Die einzelnen Kacheln (Links) */
.pic {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 40%;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
}

/* WICHTIG FÜR TAB-NAVIGATION: Zeigt Tastatur-Nutzer, wo sie sich befinden */
.pic:focus-visible {
  outline: 3px solid #0056b3; /* Hier Ihre Wunschfarbe einfügen */
  outline-offset: 5px;
}

/* Die Bilder in den Kacheln */
.pic img {
  width: 100%;
  height: auto;
  margin-bottom: 0.8em; /* Abstand zwischen Bild und Texttext */
  border: 3px solid #fff;
  border-radius: 2px;
  box-shadow: 0 1px 1px rgba(0,0,0,0.11),
              0 2px 2px rgba(0,0,0,0.11),
              0 4px 4px rgba(0,0,0,0.11),
              0 6px 8px rgba(0,0,0,0.11),
              0 8px 16px rgba(0,0,0,0.11);
}


.li-text {
float : left;
width : 45%;
max-width : 480px;
margin-bottom : 1.5em;
}
.re-text img {
float : right;
box-shadow:  0 1px 1px rgba(0,0,0,0.11),
              0 2px 2px rgba(0,0,0,0.11),
              0 4px 4px rgba(0,0,0,0.11),
              0 6px 8px rgba(0,0,0,0.11),
              0 8px 16px rgba(0,0,0,0.11);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.rightpic {
float: right;
width: 40% !important;
margin: 0 0.5em 1.5em 1.5em;
border: 4px solid #fff;
}
.li-text img, .rightpic {
box-shadow:  0 1px 1px rgba(0,0,0,0.11),
              0 2px 2px rgba(0,0,0,0.11),
              0 4px 4px rgba(0,0,0,0.11),
              0 6px 8px rgba(0,0,0,0.11),
              0 8px 16px rgba(0,0,0,0.11);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.li-text img, .re-text img {
width : 100%;
height : auto;
border: 4px solid #fff;
margin-bottom: 2em;
}
.re-text {
float : right;
width : 42%;
max-width : 500px;
margin-left : 3%;
margin-bottom : 1em;
}

.re-text ul, .li-text ul, .mitte ul {
margin : 00.5em 0 0.5em 1em;

}
.re-text li, .li-text li, .mitte li {

}

a.more {
display : inline-block;
background : #378ba6;
color : #fff;
text-align : center;
font-weight : normal;
text-transform: uppercase;
letter-spacing: 2px;
padding : 0.7em 1em 0.5em 1em;
color : #fff;
font-size : 110%;
box-shadow:  0 1px 1px rgba(0,0,0,0.11),
              0 2px 2px rgba(0,0,0,0.11),
              0 4px 4px rgba(0,0,0,0.11),
              0 6px 8px rgba(0,0,0,0.11),
              0 8px 16px rgba(0,0,0,0.11);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 4px;
    margin-bottom: 15px;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#c5cfc8), to(#a0b1a5));
    background: -moz-linear-gradient(#c5cfc8, #a0b1a5);
    background: linear-gradient(#c5cfc8, #a0b1a5);
    border: solid 1px #dbe7df;

 text-shadow: 0 1px 0 #8ea695;

}
.thumblist {
overflow : hidden;
width: 100%;
text-align : center;
display : flex;
flex-wrap : wrap;
justify-content : center;
min-height : 100%;
z-index : 10;
}
footer {
font-size : 90%;
background : #525254;
color : #dfe0e0;
position: relative;
}
.foo {

}
footer a {
color : #dfe0e0;
}
.foot {
float : left;
margin-right : 2em;
}
.required {
float : left;
width : 45%;
margin-right: 4%;
}
label {
float : left !important ;
display : block;
margin-bottom: 0.5em;
}
input, textarea, select {
width: 100%;
margin-bottom: 1em;
border-radius : 3px;
background : #fff;
padding-left : 0.3em;
border : none;
height : 2.5em;
font-family : "Titilium Web";
font-size : 80%;
-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box;
box-sizing:content-box;
font-family : 'Titillium Web';
}
textarea {
height : 10em;
clear: both !important;
float: none;
}
.cms_checkbox {
width: 1em;
clear: both;
float: left;
margin-right: 0.5em;
margin-bottom: 0;}
.cms_submit {
width : 45%;
height : 2em;
color : #fff;
}
.chk {float: none; padding-top: 1em; clear: both;}
.chk label {float: left; margin-top: 0.2em; }
.cms_submit.fbsubmit {
background : #0f7394;
}
.kontakt label {float: none !important;}
.kontakt input, .kontakt textarea, .kontakt select, .kontakt.own {
float: none !important; width: 100% !important; background : #ebeaea;}
 .kontakt .required {float: none !important; width: 100% !important;}
.own {
width: 45%;}
.captcha {width: 45%; clear: both; float: none;}
.captcha img {clear: both;
box-shadow : none !important ;
width : 70% !important ;
height : auto !important ;
float : none;
margin : 0.5em 0 0.5em 0;
}
.kontakt .captcha {width: 100%; float: none !important;}
.confirm {
position: absolute;
background: rgba(255,255,255,0.95);
padding: 3em;
top: 12em;
left: 3em;
border: 1px solid;
box-shadow:  0 1px 1px rgba(0,0,0,0.11),
              0 2px 2px rgba(0,0,0,0.11),
              0 4px 4px rgba(0,0,0,0.11),
              0 6px 8px rgba(0,0,0,0.11),
              0 8px 16px rgba(0,0,0,0.11);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.topnav .toggle-icon, .menu-toggle-btn {
  display: none;
}

@media screen and (max-width: 60em) {
.parallax {background-attachment: scroll !important;}
.center {
width : 90% !important ;
}
.topnav a, #menuright {
display : none;
}
.next {display: none;}
#res-call {
position: relative;
z-index: 1000;
}
header {height: 6em; border-bottom: 0.1em solid  #525254;}
#logo {width: 16em;}
.topnav {
  position: fixed !important; 
top: 0;
left: 0;
width: 100%;
}

/* Visuelles Verstecken des Texts ohne "Punkte" */
.topnav .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Der Button-Container */
.topnav .menu-toggle-btn {
  display: flex;           
  align-items: center;
  justify-content: center;
  position: absolute;    
  top: 30px !important;              
  right: 15px !important;          
  background: transparent !important; 
  border: none !important;            
  padding: 0;
  width: 24px;             
  height: 24px;
margin: 0 !important;
background: red;
  cursor: pointer;
  z-index: 1005;      
}



.topnav #menuToggle[aria-expanded="true"] {
  position: fixed;         
  top: 15px;               
  right: 15px;             
}


.topnav .menu-toggle-btn:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}


.topnav .menu-toggle-btn img {
  width: 24px;
  height: 24px;
  display: block;
}



/* Standardzustand (Geschlossen): Hamburger zeigen, Close verstecken */
.topnav .icon-hamburger { display: block; }
.topnav .icon-close { display: none !important; }
/* Garantiert, dass der Hamburger standardmäßig IMMER sichtbar ist und das Kreuz versteckt bleibt */
.topnav .menu-toggle-btn .icon-hamburger { 
  display: block !important; 
}
.topnav .menu-toggle-btn .icon-close { 
  display: none !important; 
}


/* Geöffneter Zustand: Hamburger verstecken, Close zeigen */
/* Wenn geöffnet, wird der Hamburger versteckt und das Kreuz echten Platz einnehmen */
.topnav #menuToggle[aria-expanded="true"] .icon-hamburger { 
  display: none !important; 
}
.topnav #menuToggle[aria-expanded="true"] .icon-close { 
  display: block !important; 
}

/* Das geöffnete mobile Menü-Panel */
.topnav.responsive {
  position: fixed;
  background: rgba(0,0,0,0.95);
  left: 0;
  top: 0;                 
  transition: 0.5s;
  width: 100%;
  height: 100vh;          
  padding: 5em 2em 2em; 
  z-index: 1000;          
  overflow-y: auto; /* Verhindert, dass lange Menüs auf kleinen Handys abgeschnitten werden */
}




  .topnav.responsive a, .topnav.responsive li {
    display: block;
    float: none;
    text-align: left;
    color: #fff;
    border: none !important;
    margin-bottom: 1em;
width: 90%;
  }

.topnav a::after {
transform: none;
height: 0;
}
.topnav a:hover::after {
transform: none;
}
.sm {width: 36% !important;}

#logo {
z-index : 1000;
}

footer {
padding-bottom : 2.5em !important ;
}
.foot {float: none !important;}
}
@media screen and (max-width: 700px) {
.parallax h1, parasmall h1 {
font-size : 130%;
}
.itemtext {
position: relative;
height: 100%;
min-height: 100%;
background: #ebeaea;
padding: 2em 2em 2em 2em;
border-radius: 5px;
}
.rightpic {
float: none !important;
width: 95% !important;
margin: 0 0 1.5em 0;
}
.single-counter {width: 90%; height: 8em;}

.description {
width: 60% !important;
padding: 1em;
}
label, .own, .required, input, cms_select, .captcha {width: 100%;}
.chk label {width: 80%;}

.li-text img, .re-text img {
margin : 1em 0 1em 0;
}
.center {
width : 90% !important ;
}
.li-text, .re-text {
width : 100%;
float : none;
margin : 0 0 0.3em 0;
}


.thumblist {overflow: visible !important;}
.pic  {width: 96% !important; margin-right: 0 !important;}
.sm {width: 86% !important;}
.back img {
width : 70%;
text-align : left;
}
}
@media screen and (max-width: 400px) {
#logo {font-size: 100%;}
.cont h1 {font-size : 150%;}
}