@charset "UTF-8";
/* CSS Document */

* {
padding:0;
margin:0;
}

html {
-webkit-text-size-adjust: none; /* Safari iOS: automatic text autosizing ausschalten */
-ms-text-size-adjust: none;     /* älteres IE/Mobile */
text-size-adjust: none;         /* Standard */
}

body {
margin: 0px 0px 0px 0px;
overflow-x:hidden; 
overflow-y:scroll;
}

a:link{
text-decoration: none;
}

@font-face {
font-family: 'Helvetica-Light';
src: url('_fonts/helveticalight.eot');
src: url('_fonts/helveticalight.eot?#iefix') format('embedded-opentype'),
url('_fonts/helveticalight.woff2') format('woff2'),
url('_fonts/helveticalight.woff') format('woff'),
url('_fonts/helveticalight.ttf')  format('truetype'),
url('_fonts/helveticalight.svg#Helvetica-Light') format('svg');
}

.helv_li1 {
font: 23px Helvetica-Light, Arial;
font-weight: 500;
line-height: 25px;
text-decoration:none;
color: #333;
}

.helv_li2 {
font: 16px Helvetica-Light, Arial;
font-weight: 500;
line-height: 32px;
text-decoration:none;
color:#fff;
}

.helv_li3 {
font: 13px Helvetica-Light, Arial;
font-weight: 500;
line-height: 16px;
text-decoration:none;
color: #333;
}

.silbentrennung {
-moz-hyphens: auto;
-o-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto; 
text-align: justify;
}

.container_ {
background-color: #fff;
margin: auto;
padding-left:1em; 
padding-right:1em;
max-width:800px;
}

.container_menue {
height:36px;
margin: auto;
position: fixed;
width:100%;
}

.container_kopf {
background-color: #E4007D;
margin: auto;
width:100%;
height:206px;
height:216px;
text-align:center;
overflow-x: hidden;
}

.container_fuss {
margin: auto;
padding-left:1em; 
padding-right:1em;
max-width:800px;
}

.container_flex {
display: flex;
}

.menue_element {
background-color: #eee;
width:200px;
height: auto;  
margin: 0 auto; 
padding-top:30px;
padding-bottom:30px;
text-align:center;  
opacity: 0.9; 
position: relative; 
z-index:50;
}

.text_element_inflex {
width: auto;
min-width:156px;
margin-top: 0px;
margin-bottom: 35px;
text-align: left;
line-height: 1.6;
}

.bild_element_inflex {
width: auto;
min-width:120px; 
max-width:500px; 
margin-top: 0px;
margin-bottom: 35px;
}

.bild_element_inflex2 {
width: auto;
min-width:120px; 
max-width:300px; 
margin-top: 0px;
margin-bottom: 35px;
}

.bild_element {
width: 100%; 
height:100%;
object-fit: cover;
}

.taste_ {
background-color:#ff6633;
color:#fff;
width:100px;
height:30px; 
margin-top:10px; 
text-align: center;
}

input,
textarea {
border: 0;
background: #fff;               /* dein weiß auf orange */
-webkit-appearance: none;       /* iOS/Safari default styling abschalten */
appearance: none;
border-radius: 0 !important;    /* keine Rundungen */
box-shadow: none !important;    /* evtl. eingebaute Schatten entfernen */
background-clip: padding-box;    /* sauberer Hintergrund ohne Überlauf */
}

.resizer::before {
content: "";
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
/* unsichtbar, aber erweitert die aktive Fläche */
/* kein Hintergrund nötig */
}

.resizer {
position: absolute;
left: 50%;
bottom: 4px;
transform: translateX(-50%);
width: 40px;
height: 3px;                  /* sichtbare Linie */
border-radius: 3px;
background: #000;
cursor: ns-resize;
user-select: none;
z-index: 2;
/* damit der Cursor auch über dem erweiterten Bereich erscheint */
pointer-events: auto;
}

#logo_dim { 
width:120px;
}

#logo_pos { 
height:100px;
margin-top:36px;
margin-top:46px;
padding-bottom:30px;
}

.einzug1{ 
padding-left:9px;
}

li{ 
color: #333;
}

li.sw{ 
color: #000;
}

li::marker {
vertical-align: middle; /* den Aufzählungspunkt justieren */
font-size: 1.4em;
}

ul {margin-left: 0.6em; padding-left: 0.6em;} /* Einrückungen bei Listen zurücknehmen */

.hover_ {background-color: #ff6633;transition: background-color 0.3s}
.hover_:hover {background-color: #e4007d;}

.hover_w {background-color: #fff;transition: background-color 0.3s}
.hover_w:hover {background-color: #e4007d;}

.desk_menue_display { 
display: flex;
}
.element_abstand_rechts {
margin-right: 20px;
}
.element_abstand_links {
margin-left: 20px;
}
.bildhoehe {
max-height:170px;
}
@media screen and (min-width: 800px) {
/* große Darstellung */
#anschrift {
margin-left: 20px;  /* rückt den Adressblock nach rechts => Linie zum Bild darüber halten, bei großem Bildschirm */
}
}
@media not screen and (min-width: 700px) {
/* kleine Darstellung */
.bildhoehe {
height:150px; 
}
}

@media screen and (min-width: 450px) {
/* kleine Darstellung */
.bild_weg_2 {
display: none;
}
}

@media not screen and (min-width: 450px) {
/* kleine Darstellung */
.bild_weg_1 {
display: none;
}
.element_abstand_rechts {
margin-right: 10px;
}
.element_abstand_links {
margin-left: 10px;
}

.text_element_inflex { /* Zeilenabstand für Texte verringern */
line-height: 1.4;
}

}
@media not screen and (min-width: 600px) {
/* kleine Darstellung */
.desk_menue_display { 
display: none;
}
.container_kopf {
height:206px;
}
#logo_pos { 
margin-top:36px;
}
}

/* zappeln und blitzen des Häkchens */
@keyframes zappel_amimation {
0%   { opacity: 0; transform: scale(0.8) rotate(0deg); }
25%  { opacity: 1; transform: scale(1.1) rotate(-8deg); }  /* Blitz + erste Wackelbewegung */
50%  { transform: rotate(8deg); }                           /* Wackel Mitte */
75%  { transform: rotate(-5deg); }                          /* Wackel Ende */
100% { opacity: 1; transform: scale(1) rotate(0deg); }     /* Ende Zyklus */
}
.zappelblitz  {
animation: zappel_amimation 0.6s ease-in-out var(--zappelzahl, 1);
}
.zappel-1x { --zappelzahl: 1; }
.zappel-2x { --zappelzahl: 2; }
.zappel-3x { --zappelzahl: 3; }


a:link{
	color: #333;
	text-decoration: none;
}
a:visited{
	text-decoration: none;
	color: #333;
}
a:hover{
	text-decoration: none;
	color: #E4007D;
}
a:active{
	text-decoration: none;
	color: #333;
}
a.weiss:link{
	color: #000;
	text-decoration: none;
}
a.weiss:visited{
	text-decoration: none;
	color: #000;
}
a.weiss:hover{
	text-decoration: none;
	color: #fff;
}
a.weiss:active{
	text-decoration: none;
	color: #000;
}
a.sw:link{
	color: #fff;
	text-decoration: none;
}
a.sw:visited{
	text-decoration: none;
	color: #fff;
}
a.sw:hover{
	text-decoration: none;
	color: #000;
}
a.sw:active{
	text-decoration: none;
	color: #fff;
}