* {margin:0; padding:0; border:0;}
html {height:100%; overflow-y:scroll; background-color:#ffffff;}
body {height:100%; min-width:60em; background-color:#ffffff; font-size:100%; text-align:left; color:#333; word-wrap:break-word;}
body, .p4 span {font-family: Arial, Helvetica, "Trebuchet MS", Tahoma, Geneva, clean, sans-serif;}
.clear {clear:both;}
.hidden{display:none;}

/*Layout*/
.zentriert {position:relative; width:90vw; margin:0 auto; text-align:left; overflow:hidden;}
.top{scroll-snap-align:start;}
.kopf{position:fixed; width:100%; background:#fff; z-index:9;}
#logo{float:right; width:19em; padding:0.5em 0; max-width:70vw; text-align:center;}
#logo a{outline:none;}
#logo img{width:19em; max-width:100%; height:auto; outline:none; border:0;}
#logo p{margin:0 auto; color:#00407a; }

/*Kopfmenü
#kopfmenu{float:left; width:10%; text-align:left; padding-top:0.75em;}
#kopfmenu ul{display:inline-block;}
#kopfmenu ul li{float:right; margin:0.25em 0 0.25em 2.25em; padding:0; display:block; height:1.5em; text-align:center;}
#kopfmenu ul li a{display:block; height:100%; color:#666; font-size:18px;}
#kopfmenu ul li a.aktiv, #kopfmenu ul li a:hover, #kopfmenu ul li a:focus{color:#ba2080; text-decoration:none; outline:none;}*/

/*Fuss*/
#fussmenu{position:fixed; bottom:0; width:100%; background:#00407a; color:#fff; padding:1em 0; z-index: 9;}
#fussmenu ul{float:left; width:36%; text-align:left; margin:0 0 0 1em;}
#fussmenu ul li{margin:0.25em 0.5em; padding:0; display: inline-block; max-width:9em; height:2.5em; text-align: center; font-size:14px;}
#fussmenu a{color:#fff; text-decoration:underline;}
#fussmenu a:hover, #fussmenu a:focus, #fussmenu a.aktiv{color:#ccc; text-decoration:none;}
#fussmenu p{color:#fff; font-size:0.75em; text-align:right; float:right; width:49%; line-height:150%; margin-right:1em;}

/*Bereiche*/
.bereich-1 .inhalt-baustein-spalte-rechts{clear:right; float:left; overflow:hidden; width:64%;}
.bereich-1 .inhalt-baustein-spalte-links{clear:left; float:left; overflow:hidden; width:34%;}
.inhalt-hellgrau {background-color:#fff; margin:2em 2em 0;}
.inhalt-hellgrau .inhalt-beitrag{padding:1em 0 2em;}
.inhalt-hellgrau h2{padding:0.25em 0 1em; color:#474747; font-weight:normal; font-style:normal;}
.inhalt-hellgrau p{padding:0.8125em;}
.inhalt-hellgrau a:hover, .inhalt-hellgrau a:focus, .inhalt-hellgrau a:active{text-decoration: underline;}
.bereich-2{width:100%; position:relative;}
.bereich-2 .zentriert{padding-top:1em;}
.bereich-2 .inhalt-baustein-3spalten{padding:0.5em 0 0 1em;}
.bereich-2 p{font-size:0.6875em; text-align: left;}
.bereich-2 a{font-weight:normal;}
.bereich-2 a:hover, .bereich-2 a:focus, .bereich-2 a:active{text-decoration:underline;}

/*Bausteine*/
#seite .inhalt-baustein-2spalten, #seite .inhalt-baustein-1spalte{position:relative; height:100vh; scroll-snap-align:start;}
.inhalt-relativ{position:relative;}
.inhalt-baustein-4spalten{clear:both; display:block; height:auto; position:relative; padding:0 3.5em; text-align:left;}
.inhalt-baustein-4spalten .inhalt-baustein-2spalten{clear:none; float:left; overflow:hidden; padding:2.75em 0 3em;}
.inhalt-baustein-4spalten .inhalt-baustein-2spalten.inhalt-baustein-spalten-links{width:42%;}
.inhalt-baustein-4spalten .inhalt-baustein-2spalten.inhalt-baustein-spalten-rechts{width:56%;}
.inhalt-baustein-1spalte .inhalt-beitrag{padding:5em 0;}
.inhalt-baustein-2spalten .inhalt-beitrag{padding:1em 0;}
.inhalt-baustein-2spalten, .inhalt-baustein-1spalte{position:relative;}
.inhalt-baustein-spalte-rechts, .inhalt-baustein-spalte-links{clear:left; float:left; overflow:hidden; width:49%; text-align:right;}
.inhalt-beitrag{width:100%; clear:both; display:block; position:relative;}
.inhalt-beitrag-links{float:left; width:48%; clear:left;}
.inhalt-beitrag-rechts{float:right; width:48%; clear:right;}
.inhalt-baustein-spalte-rechts{clear:right; float:right; text-align:left;}
.inhalt-baustein-4spalten .inhalt-baustein-spalten-rechts{float:right;}
.inhalt-baustein-3spalten .inhalt-baustein-spalte-links {float:left; clear:left; width:31%; min-height:1px; overflow:hidden;}
.inhalt-baustein-3spalten .inhalt-baustein-spalte-mitte {float:left; width:31%; margin-left:1.5%; min-height:1px; overflow:hidden;}
.inhalt-baustein-3spalten .inhalt-baustein-spalte-rechts {float:right; width:31%; overflow:hidden;}

/*Mediaelemente*/
.inhalt-media{margin:0; max-height:75vh;}
.inhalt-media-links{float:left; margin-right:3em;}
.inhalt-media-rechts{float:right; margin-left:3em;}
.inhalt-media-mitte{}
.inhalt-media-22{width:22%;}
.inhalt-media-35{width:35%;}
.inhalt-media-65{width:65%;}
.inhalt-media-100{width:100%;}
.inhalt-media img{}
/*.inhalt-media p{box-shadow:2px 2px 8px #555; width:auto; background:#a84698; color:#f7dfcd; padding:5em 2em; text-align:center; font-weight:bold; border:1em solid #fff; margin:0;}*/

.audio-aussen{text-align:center;}

/*Textformatierung*/
h1{color:#00407a; font-weight:bold; font-style:normal; padding:0.75em 0; font-size:1em; line-height:123%;}
h1 span{ font-size:3em; line-height:135%;}
h2{color:#00407a; font-weight:normal; font-size:30px; margin:0.75em 0 0 1rem;}
h2 span{font-size:0.9375em;}
h3{font-size:20px; padding-top:1em;}
h4{padding-top:1em;}
p{font-size:18px; line-height:135%; max-width:50em; margin:1em 0 1em 1rem; display: table;}
#seite p{max-width:100%;}
.p2{display:block; margin:0 0 2em 0;}
p.text-kleiner{font-size: 0.875em;}
p.text-right{text-align:right;}
.text-pink{color:#00407a;}
.text-rechts{display:block; text-align:right;}
.text-center{display:block; text-align:center;}
.text-center p{margin:0 auto;}
address{margin:1em 0 1em 1rem; line-height:135%; font-style:normal; font-size:18px;}
address p, address h2{padding-right:0;}
address h2{padding-top:0.5em;}
ol, ul{margin:1em auto; display:table; max-width:50em;}
#seite ol, #seite ul{margin:1em 0; display:table; max-width:50em;}
li{font-size:18px;}
ul.hacken li{position:relative; list-style:none; padding:0.25em 0.5em 0.25em 1.75em;}
ul.hacken li:before{content:'\2713'; color:#00407a; font-weight: bold; position:absolute; left:0.25em; top:0.25em; width:1.25em; height:1.25em;}
a{text-decoration:none; color:#00407a;}
a:hover, a:focus, a:active{text-decoration:underline;}
li{padding:0.25em 0.5em; list-style:outside disc; display:list-item;}
img{display:inline-block; max-width:100%;}

/*(Call-to-Action)-Buttons*/
p.button{max-width:100%; padding:1em 0;}
p.button a{display:inline-block; padding:0.5em 0.75em; height:auto; font-size:1em;}
p.button a, p.button a:visited{text-decoration:none; color:#00407a; cursor:pointer; border:2px solid #00407a; border-radius:2em;}
p.button a:hover, p.button a:focus, p.button a:active{text-decoration:none; background-color:#00407a; color:#fff;}
p.button a:after{content:"\00A0\00BB";}

/*Scroll to-down button*/
#to-down{position:fixed; display:block; margin: 0 auto; width:3em; height:3em;}
.to-down a{display:inline-block; width:3em; height:3em; opacity:0.5;}
.to-down a.inaktiv{cursor:inherit;}
.to-down a:hover, #to-down a:focus{opacity:1; }
#to-down img{width:2.5em; height:2em; margin-top:1em;}
#to-down img{animation: bewegen-to-down 2000ms ease-in-out infinite;}
.to-down{height:3em; width:100%; text-align:center;}
@keyframes bewegen-to-down{0%{margin-top:.5em;}50%{margin-top:0;}100%{margin-top:.5em;}}

/*Allgemeine Formatierungen*/
.mt-3{margin-top:3em;}
.mt-2{margin-top:2em;}
.mt-0{margin-top:0;}
.mb-0{margin-bottom:0;}
.mb-1{margin-bottom:1em;}

/*Rechtliches Datenschutz*/
#dsgvo-auto-datenschutz p, #dsgvo-auto-datenschutz .p, #dsgvo-auto-datenschutz dd, #dsgvo-auto-datenschutz address {max-width:50em; margin:0 auto;}
#dsgvo-auto-datenschutz ol li {list-style-type:none;}
#dsgvo-auto-datenschutz ol.ol-liste-ebene1 {counter-reset:listenpunkt_ebene1; list-style-type:none;}
#dsgvo-auto-datenschutz ol.ol-liste-ebene1 li:before {content: counter(listenpunkt_ebene1) ". "; counter-increment:listenpunkt_ebene1;}
#dsgvo-auto-datenschutz ol.ol-liste-ebene2 {counter-reset:listenpunkt_ebene2; list-style-type:none;}
#dsgvo-auto-datenschutz ol.ol-liste-ebene2 li:before {content: counter(listenpunkt_ebene1)"."counter(listenpunkt_ebene2,decimal) ". "; counter-increment:listenpunkt_ebene2;}
#dsgvo-auto-datenschutz ol.ol-liste-ebene2 li.inhalt-hide-nummerierung:before {content:""}
.inhalt-formular-dsgvo-datenschutz .inhalt-formular-checkbox-input {width:auto;}
.inhalt-formular-dsgvo-datenschutz .inhalt-formular-checkbox-label {width:auto; float:left; margin-left: 0.4em;}
#dsgvo-auto-datenschutz h2{padding-left:0; padding-right:0;}

/*Sprungmarke*/
#ausgangspunkt, #weg, #andrea, #kontakt, #coaching{position:absolute; top:-8em;}
#kontakt{top:-10em;}

/*Besonderheiten*/
.bg-weiss{background:#fff; padding:0.5em 0;}
#Intro{text-align:center; padding-top:10.5em;}
#Intro p{font-size:1.25em; color:#666; padding:0;}
#Intro p span{font-size:1.5em;}
#Intro p.p4{text-align: center; padding:5em 0 1em;}
#Intro p.p4 span{font-size:14px;}
#Petra-innen strong{display:inline-block; width:5.5em; float:left;}
#Petra-innen strong.mehrzeilig{padding-bottom:2em;}
#Kontakt-innen address{font-style:normal;}
.kontakt{display:block; background:#fff; height:5.5em;}
.kontakt .kontakt-icons{float:left; width:3em; padding-top:0.5em;}
.kontakt .kontakt-icons-sm{width:10em;}
.kontakt .kontakt-icons-sm a{float:left; width:3em;}
.kontakt .kontakt-icons a{display:block; height:2.25em;}
.kontakt .kontakt-icons a:hover, .kontakt .kontakt-icons a:focus{}
.kontakt .kontakt-icons img{width:2em; display:block; border:0;}
.kontakt .kontakt-infos{float:left; width:16em; display:block; padding:1em 0;}
.kontakt .kontakt-infos a{display:block; padding-top:0.75em;}

/*Mobilansicht
#menue-burger-button {display:none;}
#menue-burger-button {position:absolute; width:48px; height:48px; right:0.75em; top:0; background:transparent; z-index:9999; cursor:pointer;}
#menue-burger-button .menue-burger-button-line{display:block; margin:8px 12px; width:22px; height:2px; background-color:#00407a;}
#menue-burger-button.offen span{background-color:#00407a;}
#menue-burger-button.offen .menue-burger-button-line-1{-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);}
#menue-burger-button.offen .menue-burger-button-line-2{position:absolute; top:15px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}
#menue-burger-button.offen .menue-burger-button-line-3{display:none;}

@media screen and (max-width: 960px) {
    body{min-width:250px;}
    .zentriert{width:100%;}
    .kopf .zentriert{width:100%; padding:1em 0; overflow:initial;}
    #kopfmenu{width:25em;}
    #kopfmenu ul{margin: 1em 1em 1em 0;}
    #kopfmenu ul li{margin-left:1em;}
    #kopfmenu ul li:last-child{margin-left:0;}
    p{margin: 1em 1rem 1em 1rem;}
    .kontakt{padding:0 1em;}
}
@media screen and (max-width: 750px) {
    #menue-burger-button {display: block;}
    #kopfmenu{position:absolute; top:0; right:-23em; width:20em; height:auto; background:#fff; background:rgba(255,255,255,0.85); float:none; transition: right 0.5s ease-in-out;}
    #kopfmenu li{float:none; width:100%; text-align:right;}
    #kopfmenu.offen{right:-2em;}

    h1 span{font-size:2em;}
    #Intro p span{font-size:1.25em;}

    .inhalt-media-links{float:none; width:auto; margin-right:1em;}
    .inhalt-media-rechts{float:none; width:auto; margin-left:1em;}

    #fussmenu ul, #fussmenu p{width:100%; float:none; text-align: center; margin:1em 0;}
    #fussmenu ul li a{padding:1em;}

}

@media screen and (max-width: 500px) {
    .kontakt{height:auto;}
    .kontakt .kontakt-icons a{height:3.25em; width:3.25em;}
    .kontakt .kontakt-infos{width:12em; padding:1em 0 2em;}
    .kontakt .kontakt-infos a{padding-top:2em;}

    .inhalt-beitrag-links, .inhalt-beitrag-rechts, .inhalt-baustein-spalte-links, .inhalt-baustein-spalte-rechts{float:none; width:100%; text-align: left;}
    .p2{margin-left:1rem;}
    #dsgvo-auto-datenschutz p, #dsgvo-auto-datenschutz .p, #dsgvo-auto-datenschutz dd, #dsgvo-auto-datenschutz address {max-width:unset;}
}
*/