/* Farben:
   Text dunkel:     #575757
   Text hell:       #E3F6FF
   Text weiß:       #FFFFFF

   Startseite:      #70a3bd     #E3F6FF
   Das sind Wir:    #d84b38     #fce9f1
   Lieblinge:       #39668f     #E3F6FF
   Lauschen:        #f2b300     #fff8eb

   blau:            #70a3bd

   BG dunkel:       #222225
   BG Navigation:   #f6f6f6*/
.lesezeichen-na {
    position: absolute;
    top: 451px;
    width: 60px;
    height: 50px;
    background-color: transparent;
    border-color: transparent;
    background-image: url(../images/lesezeichen.png);
    background-size: 100%;
    background-repeat: no-repeat;
    }

.lesezeichen-aktiv {
    position: absolute;
    top: 451px;
    width: 60px;
    height: 50px;
    border-color: transparent;
    background-color: transparent;
    background-image: url(../images/lesezeichen-aktiv.png);
    background-size: 100%;
    background-repeat: no-repeat;
    }

body {
    margin: 0;
    position: relative;
}

/* Umschließt alles */
div#gesamt {
    border: 0;
    padding: 0;
    font-family: "Avenir Next", "Avenir";
    font-weight: 100;
    line-height: 125%;
    color: #FFFFFF;
    max-width: 1300px;
    min-width: 1150px; 
    margin: auto;
    background-color: #222225;
}

/* Der Head bereich gesammt */
div#header {
    border: 0;
    margin: 0;
    font-family: "Consolas", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "Monaco", "Courier New", "monospace";
    background-color: #222225;
    z-index: 1;
}


img.language{
    display: inline-block;
    box-sizing: border-box;
    border: none;
    padding-right: 10px;
    width: 35px;
    top: 5px;
    text-decoration: none;
}

div#language-pos{
    position: absolute;
    border: none;
    top: 6px;
    right: 1%;
}


/* Umschließt Logo und Navigation */
div#Kopf {
    box-sizing: border-box;
    margin-top: 0;
    height: 120px;
    z-index: 2;
}

/* Umschließt das Logo */
div.logo {
    box-sizing: border-box;
    display: inline-block;
    height: 100px;
    margin-top: 20px;
    margin-left: 10px;
    z-index: 3;
}

div.logo a img {
    height: 100%;
}

/* Umschließt ganze Navigation */
div#nav {
    margin-top: 75px;
    box-sizing: border-box;
    background-color: #222225;
    color: #FFFFFF;
    float:right;
    z-index: 3;
}

/* Topmenue */
div#nav > ul {
    box-sizing: border-box;
    top: 0;
    margin: 0px;
    padding: 0px;
    height: 45px;
}

/* Listenelemente von Topmenue */
div#nav > ul > li {
    box-sizing: border-box;
    list-style: none;
    display: inline-block;
    float: left;
    background-color: #f6f6f6;
    margin: 0;
    padding: 0;
    text-decoration: none;
    text-align: center;
    height: 45px;
    width: 150px;
}

/*dropdown nicht nichtbar*/
 ul li ul{
      display: none;
    }

/*dropdown sichtbar*/
	ul li:hover ul{
      display: block;
	  padding: 0;
    }
	

/* Erstes Kindelement von Topmenue kein linken Border */
div#nav li:first-child a {
    border: 0;
}

/* Links im Topmenue */
div#nav > ul > li > a {
    display: block;
    box-sizing: border-box;
    height: 45px;
    color: #575757;
    text-decoration: none;
    padding: 10px;
    text-align: center;
    background-color: #f6f6f6;
    border-left: 2px solid #dadada;
    text-transform: uppercase;
}

div#nav > ul > li:hover > a {
    background-color: #70a3bd;
    color: #e8f6ff;
    font-weight: 900;
    height: 50px;
    transition: all 0.3s ease;
}

div#nav > ul > li:hover > a:not(#beitraege) {
    box-shadow: 0px 5px 5px #222225;
}

div#nav > ul > li:last-child:hover {
    box-shadow: 0 0 0;
}


/* gesamtes Dropdownmenue */
div#nav ul#dropdown{
    position: absolute;
    height: auto;
    margin: 0;
    padding: 0;
    width: 150px;
    overflow: hidden;
    background-color: #f6f6f6;
    border-left:1px solid #dadada;
    z-index: 5;
}

/*Listenelemente im Dropdown*/
div#nav ul#dropdown li {
    list-style: none;
    background-color: #f6f6f6;
    margin: 0;
    padding: 0;
    text-decoration: none;
    text-align: center;
    height: 45px;
    transition: all 500ms;
}

/* Links im Dropdownmenue */
div#nav ul#dropdown li a {
    display: block;
    box-sizing: border-box;
    height: 45px;
    color: #575757;
    text-decoration: none;
    padding: 10px;
    text-align: center;
    background-color: #f6f6f6;
    border-left: 2px solid #dadada;
    text-transform: none;
    font-size: 13.5px;
    white-space: nowrap;

}

/*Hover der links und lis*/
div#nav ul#dropdown a:hover, li:hover {
    background-color: #70a3bd;
    color: #e8f6ff;
    transition: all 0.5s ease;
}


/*Verlinkungen Aktiv*/
div#nav a#startseite {
    background-color: #70a3bd;
    color: #E3F6FF;
}

div#nav a#wir {
    background-color: #d84b38;
    color: #fce9f1;
}

div#nav a#lieblinge {
    background-color: #39668f;
    color: #E3F6FF;
}

div#nav a#lauschen {
    background-color: #f2b300;
    color: #fff8eb;
}

div#nav a.beitrag-a {
   background-color: #39668f;
   color: #E3F6FF; 
}

/* Slider Bild */
div#hero {
    background-image: url(../images/Coverbild.jpg);
    box-sizing: border-box;
    height: 350px;
    width: 100%;
    padding: 20px 20px 50px 20px;
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;;
}

/*Schrift oben im Bild links*/
div#label-left {
    display: inline-block;
    margin: 0;
    padding: 0;
    text-align: left;
    width: 300px;
    color: #E3F6FF;
}

/*Schrift oben im Bild rechts*/
div#label-right {
    display: inline-block;
    float: right;
    margin-right: 0;
    padding: 0;
    width: 300px;
    text-align: right;
    color: #575757;
}

/*Beschriftung Hero*/
div#hero p {
    margin: 0;
    padding: 0;
    border-bottom: 7px #70a3bd solid;
    width: 300px;
}

/*Beschriftung Hero rechts*/
div#hero div#label-right p {
    float: right;
}

/*Erste Zeile Label*/
div#hero .p1 {
    width: 230px;
}

/*Zweite Zeile Label links*/
div#hero .p2 {
    width: 270px;
}

/*Zweite Zeile Label rechts*/
div#hero .p3 {
    width: 240px;
}

/*Dritte Zeile Labellinks*/
div#hero .p4 {
    width: 180px;
}

/*Dritte Zeile Label rechts*/
div#hero .p5 {
    width: 230px;
}

/* Umschließt den Content */
div#main {
    box-sizing: border-box;
    margin-top: 0;
    margin-bottom: 0;
}

/* Eine Zeile */
div.row {
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/*Die überschrift im Contetnt*/
div.row > h1 {
    font-family: "Consolas", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "Monaco", "Courier New", "monospace";
    margin: 5% 0 3% 0;
    font-size: 50px;
    font-weight: 600;
    color: #FFFFFF;
    text-align: center;
}

/*Lienie unter Überschrift*/
div.row > hr {
    width: 45%;
}

/*Infobox links*/
div#infobox1 {
    box-sizing: border-box;
    display: inline-block;
    float: left;
    margin-top: 3%;
    margin-left: 3%;
    background-image: url(../images/Infobox_Light.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-color: #70a3bd;
    background-size: 200%;
    background-attachment: fixed;
    width: 45%;
    height: 300px;
}

/*Infobox rechts*/
div#infobox2 {
    box-sizing: border-box;
    display: inline-block;
    margin-top: 3%;
    margin-left: 3%;
    background-image: url(../images/Infobox_Dark.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-color: #39668f;
    background-size: 200%;
    background-attachment: fixed;
    width: 45%;
    height: 300px;
}

div.row div.info-label {
    padding: 30px;
    text-align: justify;
    text-align-last: center;
}

/*Fließtext auf der Startseite*/
div.row p {
    line-height: 190%;
}

/*Überschrift infoboxen*/
div#infobox1 h1, div#infobox2 h1 {
    font-family: "Consolas", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "Monaco", "Courier New", "monospace";
    color: #FFFFFF;
}

/*Button in Infoboxen*/
div.button {
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}

/*Button Infoboxen*/
.button button {
    font-family: "Consolas", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "Monaco", "Courier New", "monospace";
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    padding: 8px 30px;
    width: 173px;
    border: 2px #FFFFFF solid;
    border-radius: 30px;
    color: #FFFFFF;
    background-color: rgba(0,0,0,0.00);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
	}

/*Hover von Butten Infoboxen*/
.button button:hover, .button button:active {
    color: #575757;
    background-color:rgba(255,255,255,0.55);
}

/*Überschrift fließtext*/
div.row h2 {
    font-family: "Consolas", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "Monaco", "Courier New", "monospace";
    margin-top: 35px;
}

/*Zwischenüberschrift*/
div.row h3.headline {
    font-family: "Consolas", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "Monaco", "Courier New", "monospace";
    text-align: left;
    color: #E3F6FF;
}

/*Kleine Überschriften*/
div.row h4 {
    font-family: "Consolas", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "Monaco", "Courier New", "monospace";
    text-align: center;
    font-size: 25px;
    color: #E3F6FF;
    line-height: 90%;
    text-decoration: none;
}

/*Verlinkungen im main*/
div#main a {
    text-decoration: none;
    color: #FFFFFF;
}

/*Umschließt fließtext*/
div#editorial {
    margin: 0;
    padding: 0 100px;
    text-align: left;
    line-height: 190%;
}

div#editorial p.fliesstext {
    text-align: justify;
}

/*Anpassungen der Diashow*/
div.diashow {
    position: relative;
    width: 92%;
    height: 70%;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
    overflow: hidden;
    border-radius: 20px;
}

div.diashow:hover .next, div.diashow:hover .back {
    transition: opacity 0.5s;
    opacity: 1;
}

div.slides {
    transition: opacity 1.5s;
    position: absolute;
    opacity: 0;
    margin: 0;
    padding: 0;
    width: 100%;
}

div.diashow img {
    margin: 0;
    padding: 0;
    width: 100%;
    border-radius: 20px;
}

a.back, a.next {
    cursor: pointer;
    position: absolute;
    top: 45%;
    padding: 20px;
    background-image: linear-gradient(to top, #E2E2E2, #A3A3A3);
    opacity: 0;
    transition: opacity 0.5s;
}

a.back:hover, a.next:hover {
    background-image: linear-gradient(to top, #E2E2E2, #727889)
}

a.back:active, a.next:active {
    background-image: linear-gradient(to top, #4D5159, #838A9B)
}

a.next {
    right: 0;
}

div.nummerierung {
    color: white;
    font-size: 14px;
    padding: 15px 15px;
    position: absolute;
    top: 0;
}

div.Bildbeschreibung {
    color: white;
    background-color: hsla(0,0%,0%,0.50);
    font-size: 14px;
    padding: 30px 12px;
    position: absolute;
    bottom: 5px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    right: 0;
    left: 0;
    height: 30px;
    text-align: center;
}

div.Bildbeschreibung h2 {
    position: absolute;
    bottom: 20%;
    right: 20%;
    left: 20%;
    white-space: nowrap;
}

div#Knoepfe {
    width: 70%;
    list-style: none;
    text-align: center;
    padding: 0;
    margin-left: auto;
    margin-right: auto;
}

div#Knoepfe input {
    display: inline-block;
    color: black;
    background-color: transparent;
    color: transparent;
    border: none;
    width: 150px;
    height: 60px;
    margin-top: 30px;
    margin-left: 40px;
    margin-right: 40px;
    background-size: 100%;
    background-repeat: no-repeat;
}

input#anfang {
    background-image: url(../images/Buttons/anfang.png);
}

input#anfang:hover {
    background-image: url(../images/Buttons/anfang-hover.png);
}

input#anfang:active {
    background-image: url(../images/Buttons/anfang-klick.png);
}

input.start {
    background-image: url(../images/Buttons/start.png);
}

input.start:hover{
    background-image: url(../images/Buttons/start-hover.png);
}

input.stop {
    background-image: url(../images/Buttons/stop.png); 
}

input.stop:hover {
    background-image: url(../images/Buttons/stop-hover.png); 
}

/*Footer*/
div#footer {
    margin: 0;
    background-color: #70a3bd;
    height: 100px;
    width: 100%;
}

div#nav-footer {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

/*Navigation im Footer*/
div#footer ul{
    list-style-type: none;
    padding: 0;
}

div#footer li{
    display: inline-block;
    margin-top: 10px;
    padding: 5px;
    text-decoration: underline;
    text-align: center;
    height: 20px;
    width: 23%;
}

div#footer a {
    text-align: center;
    color: white;
}

div#footer p {
    padding-left: 40px;
    font-size: 14px;
}





/*Jetzt kommen alle anderen Seiten, bei denen Anpassungen nötig waren*/

/*Styles für das Puzzle*/
#draggable1, #draggable2, #draggable3, #draggable4, #draggable5, #draggable6, #draggable7, #draggable8, #draggable9 { 
    width: 300px;
    height: 168px; 
    float: left;
    margin: 3px;
    border: none;
    border-radius: 3px;
    background-size: 100%;
    background-repeat: no-repeat;
    z-index: 3;
}
      
#droppable1, #droppable2, #droppable3, #droppable4, #droppable5, #droppable6, #droppable7, #droppable8, #droppable9 {
    float: left;
    width: 298px;
    height: 166px; 
    margin: 0;
    padding: 0;
    border-radius: 3px;
    background-color: #E3F6FF;
    z-index: 1;
}
      
.highlight {
    background-color: #70a3bd;
    border: 1px dashed #39668f;
}

.ui-droppable-hover {
    border: 1px dashed #E3F6FF;
}
      
.right {
    transition-timing-function: ease-in-out;
    -webkit-animation-name: example;
    -webkit-animation-duration: 3s;
    -webkit-animation-delay: -0.5s;
    position: relative;
}
      
@keyframes example {
    0% { box-shadow: 0px 0px 0px}
    50% { ; box-shadow: 0px 0px 20px #33FFB1;}
    100% { box-shadow: 0px 0px 0px}
}

div#puzzle {
    position: relative;
    height: 1450px;
}  
      
div.dragzone {
    position: absolute;
    margin: 0;
    padding: 30px;
    padding-left: 130px;
    top: 850px;
    left: 20px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background-color: #70a3bd;
    z-index: 2;
      }
      
.dropzone {
    position: absolute;
    margin: 0;
    padding-left: 16px;
    padding: 20px 0 50px 130px;
    top: 290px;
    left: 20px;
    width: 1050px; 
    height: 510px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    background-color: #70a3bd;
    z-index: 1;
}

div#erleuterung {
    padding-left: 30px;
    padding-right: 30px;
}

div#spruch {
    width: 1090px;
    height: 150px;
    padding: 3px 40px 3px 40px;;
    background-color: #fff8eb;
    border-radius: 5px;
    color: #f2b300;
    font-weight: bolder;
}

div#spruch span {
    font-weight: bold;
    font-size: 23px;
}

/*Text auf Zeitgesteuerten Kontakt*/
p#offen {
    margin-top: -30px;
    margin-right: 400px;
    position: absolute;
    line-height: 22px;
    visibility: visible;
}


p#geschlossen {
    margin-top: -30px;
    margin-right: 400px;
    position: absolute;
    line-height: 22px;
    visibility: hidden;
}



div#antwort_telefon{
    position: absolute;
    visibility: hidden;
}


div#antwort_email{
    visibility: hidden;
}


body#kontakt a#tel {
    color: #70a3bd;
    text-decoration: underline;
}

/*Form in Kontakt*/
form {
    margin: 50px 50px 50px;
}


form label {
    box-sizing: border-box;
    display: inline-block;
    margin-top: 20px;
    margin-left: 20px;
    width: 100px;
}



div.fieldset {
    padding: 20px 10px 30px 30px;
    border: none;
    background-color: hsla(209,42%,74%,0.30);
    -webkit-box-shadow: 8px 8px 30px -3px rgba(0, 0, 0, 0.43);
    box-shadow: 8px 8px 30px -3px rgba(0, 0, 0, 0.43);
    border-radius: 20px;
}
div.fieldset h2 {
    margin: 0 0 25px;
    font-variant: small-caps;
    font-size: 17px;
}

input,
select {
    height: 30px;
    width: 250px;
    border-radius: 5px;
    color: #575757;
    margin: 5px 30px 5px 100px;
    font-size: 100%;
    font-weight: 300;
    border: none;
    border-bottom: solid 1.5px #C89A00;
    text-indent: 0.5em;
}

select {
    height: 35px;
    width: 370px;
    padding: 5px 45px 5px 5px;
    border-radius: 5px;
    color: #575757;
    margin: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    background: url("../images/select.png");
    background-size: 2%;
    background-repeat: no-repeat;
    background-position: 350px;
}

div#antwort{
    margin-top: -30px;
    background-color: white;
    width: 370px;
    height: 35px;
    border-radius: 5px;
    margin-left: 20px;
}

select::-ms-expand { 
      display: none;
}

/*Textfeld für Anliegen*/
textarea {
    box-sizing: border-box;
    margin: 50px 0 40px 30px;
    width: 910px;
    height: 500px;
    border-radius: 10px;
    font-family: "Avenir Next", "Avenir";
    color: #575757;
    padding: 20px;
    font-size: 100%;
    font-weight: 300;
    border: none;
    border-bottom: solid 1.5px #C89A00;
    text-indent: 0.5em;
}

/*Buttons zum Senden und Zurücksetzen*/
input[type="submit"],
input[type="reset"]{
    font-family: "Consolas", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "Monaco", "Courier New", "monospace";
    box-sizing: border-box;
    display: inline-block;
    padding: 8px 10px;
    width: 173px;
    height: 40px;
    border-bottom: 2px #FFFFFF solid;
    border-radius: 30px;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500; 
}

/*Button zum Zurücksetzen*/
input[type="reset"] {
    margin-left: 50%;
    width: 160px;
    background-color: rgba(242,125,129,1.00);
}

/*Button zum Senden*/
input[type="submit"] {
    margin-left: 1%;
    color: white;
    background-color: hsla(209,43%,39%,0.8);
}

input#reset:hover {
    border-bottom-color: transparent;
    background-color: rgba(211,83,87,1.00);
}

/*Hover der Beiden Buttons in Kontakt*/
input#submit:hover {
    border-bottom-color: transparent;
    background-color: hsla(208,45%,27%,1.00);
}

/*Infos neben Beitragsbild bei Hypnose*/
div#hypnose {
    display: inline-block;
    float: right;
    margin: -122px 100px 0 0;
}

/*Line neben Infos bei Hypnose*/
hr#info-hyp {
    position: relative;
    display: inline-block;
    right: -900px;
    top: -78px;
    width: 130px;
    transform: rotate(90deg);
    color: #B7D1DE;
}




/*Das sind Wir*/

/*Div in dem die Bilder der Autoren sind*/
div.autoren:not(hover) {
    box-sizing: border-box;
    display: inline-block;
    margin: 4% 4% 0% 4%;
    padding: 0;
    width: 25%;
    height: 322px;
    overflow: hidden;
    border-radius: 0px;
    transition: all 0.4s ease;
}

/*Hoover der Div in der die Bilder der Autoren sind*/
div.autoren:hover {
    border-radius: 20px;
    transition: all 0.4s ease;
}

/*Bilder der Autoren*/
div.autoren img:not(hover) {
    width: 100%;
    transition: all 0.4s;
}

/*Ausnahmen: Zu kleine bilder der Autoren*/
div.autoren1 img:not(hover) {
    width: 170%;
    margin-left: -25%;
    transition: all 0.4s;
}

/*Ausnahmen: Zu kleine bilder der Autoren*/
div.autoren2 img:not(hover) {
    width: 300%;
    transition: all 0.4s;
}

/*Ausnahmen: Zu kleine bilder der Autoren*/
div.autoren3 img:not(hover) {
    width: 170%;
    margin-left: -35%;
    margin-top: -10%;
    transition: all 0.4s;
}

/*Hover der Bilder der Autoren*/
div.autoren img:hover {
    margin-top: -10%;
    margin-left: -15%;
    width: 130%;
    filter: brightness(.5);
    transition: all 0.4s;
}

/*Bilder auf der Seite Beitraege benutzen gleiche klasse brauchen aber durch ids kleine veränderungen*/
div.autoren1 img:hover {
    margin-top: -10%;
    margin-left: -50%;
    width: 200%;
    filter: brightness(.5);
    transition: all 0.4s;
}

div.autoren2 img:hover {
    margin-top: -10%;
    margin-left: -10%;
    width: 360%;
    filter: brightness(.5);
    transition: all 0.4s;
}

div.autoren3 img:hover {
    margin-top: -20%;
    margin-left: -50%;
    width: 200%;
    height: auto;
    filter: brightness(.5);
    transition: all 0.4s;
}

/*Div in der die Beschreibung der Autoren ist*/
div.Autorenbeschreibung {
    box-sizing: border-box;
    margin: 0% 4% 0% 4%;
    display: inline-block;
    float: left;
    padding: 0;
    width: 25%;
    height: 250px;
}

/*Beschreibungen auf der Seite Beitraege haben die selbe Klasse aber benötigten veränderungen durch id*/
div.Beschriftung-Beitraege {
    height: 120px;
}



/*Lieblinge*/

/*Div in der das Bild von Lieblinge sitzt*/
div#main div#lieblinge {
    box-sizing: border-box;
    display: inline-block;
    margin: 50px 50px 0 50px;
    padding: 0;
    width: 35%;
    height: 250px;
    overflow: hidden;
}

/*Hover der div in der das Bild von Lieblinge sitzt*/
div#lieblinge:hover {
    border-radius: 20px;
    transition: all 0.4s ease;
}

div#lieblinge:not(hover){
    border-radius: 0;
    transition: all 0.4s ease;
}

/*Bild von Lieblinge*/
div#lieblinge img:not(hover){
    margin-top: 0;
    margin-left: 0;
    width: 100%;
    transition: all 0.4s;
}

/*Hover des Bilds von Lieblinge*/
div#lieblinge img:hover {
    margin-top: -20%;
    margin-left: -25%;
    width: 150%;
    transition: all 0.4s;
}

div.animation-kreisel {
    position: absolute;
    top: 735px;
    left: 451px;
    height: 110px;
    box-sizing: border-box;
    display: inline-block;
}

div.animation-kreisel img {
    height: 100%;
    transition: all 0.4s;
}

div.animation-kreisel:hover ~ #lieblinge{
        border-radius: 20px;
        transition: all 0.4s ease;
    }

div.animation-kreisel:hover ~ #lieblinge img{
    margin-top: -20%;
    margin-left: -25%;
    width: 150%;
    transition: all 0.4s;
}

/*Lauschen und Lieblinge*/

/*div in der der QR-Code und die unterschrift sitzt*/
div#main div.lauschen {
    box-sizing: border-box;
    display: inline-block;
    margin-left: 90px;
    padding: 0;
    width: 15%;
    height: 170px;
}

/*Bild von Lauschen*/
div.lauschen img {
    width: 85%;
}

/*h4 Überschrift für Bildunterschrift bei Lauschen geändert*/
div.lauschen h4{
    font-weight: 300;
    margin: 0;
    color: #f2b300;
}

/*Text neben Bild bei Lieblinge*/
div#dreiviertel {
    box-sizing: border-box;
    display: inline-block;
    margin-top: 0;
    padding: 0;
    width: 55%;
}

/*Text neben Bild bei Lauschen*/
div#dreiviertel-lauschen {
    box-sizing: border-box;
    display: inline-block;
    padding: 0;
    width: 65%;
    margin-left: 70px;
    margin-top: 30px;
}

/*Div mit Steckbrief als Hintergrund*/
div#steckbrief {
    box-sizing: border-box;
    margin: 100px 0 60px -200px;
    padding: 75px 0 0 500px;
    background-image: url(../images/stat31b.png);
    background-position: top;
    background-repeat: no-repeat;
    background-size: 50%;
    height: 880px;
    transform: rotate(5deg);
}

/*h1 Überschrift für Steckbrief geändert*/
div#steckbrief h1 {
    font-family: "Consolas", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "Monaco", "Courier New", "monospace";
    font-size: 50px;
    font-weight: 600;
    color: #39668f;
}

/*Erstes h2 im Steckbrief geändert*/
div#steckbrief h2#first {
    margin-top: 98px;
    transform: rotate(1deg)
}

/*Zweites h2 im Steckbrief geändert*/
div#steckbrief h2#second {
    margin-top: 61px;
    transform: rotate(1deg)
}

/*Drittes h2 im Steckbrief geändert*/
div#steckbrief h2#third {
    margin-top: 93px;
    transform: rotate(1deg)
}

/*Letztes h2 im Steckbrief geändert*/
div#steckbrief h2#last {
    margin-top: 110px;
    transform: rotate(1deg)
}

/*Farbe von h2 im Steckbrief geändert*/
div#steckbrief h2 {
    color: #575757;
}

/*Text auf Steckbrief*/
div#steckbrief p {
    margin-top: -15px;
    font-size: 17px;
    color: #575757;
    width: 56%;
    transform: rotate(1deg)
}



/*Rest von Lauschen*/

/*Div für das Bild mit Kopfhörern*/
div#kopfhoerer {
    box-sizing: border-box;
    margin: 30px 0 50px;
    background-image: url(../images/Kophoerer.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 700px;
    margin-bottom: 50px;
}

/*div für die Interpreten links*/
div#interpret {
    box-sizing: border-box;
    display: inline-block;
    margin: 370px 0 0 440px;
    line-height: 190%;
    font-weight: 500;
    letter-spacing: 0.1em;
}

/*Div für die Songs rechst*/
div#song {
    box-sizing: border-box;
    display: inline-block;
    margin: 370px 20px 0 10px;
    line-height: 190%;
    letter-spacing: 0.1em;
}

/*Beiträge*/

/* Dialog */
.ui-dialog .ui-dialog-titlebar {
    height: 30px;
    color: black;
    font-size: 20px;
    background-color: white;
    border: none;
    border-bottom: solid #39668f;
}

.ui-dialog .ui-dialog-content {
    font-family: "Avenir Next";
    background-color: white;
    color: black;
    font-size: 15px;
    font-weight: 100;
}

.ui-dialog h2{
    font-family: "Avenir";
    font-size: 18px;
    color: #39668f;
}

.ui-icon {
    background-color: white;
    border-radius: 3px;
}

.ui-icon:hover{
    background-color: #E3F6FF;
}

.ui-icon:active, .ui-icon:focus{
    background-color: #39668f;
    border: 0;
}



/*Div in dem das Beitragsbild für jeden Beitrag sitzen*/
div#beitragsbild:not(hover) {
    box-sizing: border-box;
    display: inline-block;
    margin: 50px 50px 0 50px;
    padding: 0;
    width: 70%;
    height: 400px;
    overflow: hidden;
    border-radius: 0px;
    transition: all 0.4s ease;
}

/*Hover für das div mit dem Beitragsbild*/
div#beitragsbild:hover {
    border-radius: 20px;
    transition: all 0.4s ease;
}

/*Beitragsbild*/
div#beitragsbild img:not(hover){
    margin-top: -12%;
    margin-left: 0px;
    width: 100%;
    transition: all 0.4s ease;
}

/*Hover für das Beitragsbild*/
div#beitragsbild img:hover {
    margin-top: -15%;
    margin-left: -10%;
    width: 115%;
    transition: all 0.4s ease;
}

/*Div für Beitragsbild auf Traumdeutung - War zu klein*/
div#beitragsbild img#traumdeutung-img {
    margin-top: 0;
    width: 125%;
    margin-left: -15px;
}

/*Hover für Beitragsbild bei Traumdeutung*/
div#beitragsbild img#traumdeutung-img:hover {
    margin-left: -8%;
    width: 140%;
    transition: all 0.4s ease;
}

/*H2 Überschriften für die Beitrag Seiten verändert - Wird auch auf Impressum und Datenschutz genutzt*/
#beitrag h2 {
    line-height: 20%;
}

/*Div für die Einleitung der Beiträge*/
div#einleitung {
    box-sizing: border-box;
    margin: 30px 400px 50px 100px;
    font-family: "Courier New", "Consolas", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "Monaco", "Courier New", "monospace";
    font-weight: 100;
    text-align: justify;
}

    

/*Lineheit für Einleitung gändert*/
div#einleitung p {
    line-height: 150%;
}

/*Angaben zu Textart und Autor mit Tab*/
span.tab {
    margin-left: 50px;
}

/*Zitate in den Beiträgen*/
div.fliesstext-beitrag p.zitat {
    font-family: "Courier New", "Consolas", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "Monaco", "Courier New", "monospace";
    font-style: italic;
    text-align: center;
    margin: 40px 0;
}

/*Erzählungen kursiv*/
p.erzaehlung {
    font-style: italic;
}

/*Erzählungen bei Hypnose blau*/
p.blau {
    color: #B7D1DE;
}

/*Div mit Fließtext der Beiträge*/
div.fliesstext-beitrag {
    box-sizing: border-box;
    margin: 30px 220px 50px 100px;
    font-weight: 100;
}

/*Div für Bidler im Text*/
div.fliesstext-beitrag div.image {
    box-sizing: border-box;
    margin: 10px 0 0 10px;
    width: 380px;
    height: 309px;
    display: inline-block;
    overflow: hidden;
    float: right;
}

/*Bilder im Text*/
div.fliesstext-beitrag div.image img {
    width: 122%;
    margin-left: -60px;
}

/*Div für ausnahme Bilder*/
div.fliesstext-beitrag #second-img {
    margin-top: 10px;
    height: 350px;
}

div.fliesstext-beitrag #third-img {
    margin-top: 10px;
    height: 350px;
}

div.fliesstext-beitrag .second-img > img {
    width: 138%;
}

div.fliesstext-beitrag #third-img > img {
    width: 100%;
    margin:0;
}

/*Bildbeschreibung für Beitragsbild*/
p.caption-haupt {
    font-family: "Courier New", "Consolas", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "Monaco", "Courier New", "monospace";
    margin: -30px 0 0 60px;
    font-size: 12px;
}

/*Ausnahmen bei Bildbeschreibung für Beitragsbild*/
p#caption {
    margin: 0 0 0 60px;
    line-height: 130%;
    font-size: 12px;
}

/*Bildbeschreibung der Bilder im Text*/
div.fliesstext-beitrag .caption {
    position: absolute;
    display: inline-block;
    box-sizing: border-box;
    font-family: "Courier New", "Consolas", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "Monaco", "Courier New", "monospace";
    font-size: 12px;
    right: 335px;
    margin-top: 225px;
    float: right;
    transform: rotate(-90deg);
}

/*Ausnahmen der Bildbeschreibungen für Bilder im Text*/
div.fliesstext-beitrag .caption1 {
    right: 290px;
    margin-top: 140px;
}

div.fliesstext-beitrag #caption2 {
    right: 275px;
    margin-top: 123px;
}

div.fliesstext-beitrag .caption3 {
    right: 335px;
    margin-top: 184px;
}

div.fliesstext-beitrag .caption4 {
    right: 398px;
    margin-top: 45px;
}

div.fliesstext-beitrag #caption5 {
    right: 427px;
    margin-top: 14px;
}

div.fliesstext-beitrag #caption6 {
    clear: both;
    position: static;
    margin: 0;
    margin-top: -10px;
    margin-bottom: 50px;
    width: 100%;
    text-align: center;
    transform: rotate(0deg);
}

div.fliesstext-beitrag #caption7 {
    right: 345px;
    margin-top: 146px;
}

/*Div für QR-Codes im Text*/
div.fliesstext-beitrag div.qr-beitrag {
    box-sizing: border-box;
    margin: 8px 0 0 10px;
    width: 110px;
    height: 110px;
    display: inline-block;
    float: right;
}

/*Bild des QR-Codes*/
div.fliesstext-beitrag div.qr-beitrag > img {
    width: 100%;
}

/*Fette Worte im Text*/
div.fliesstext-beitrag b {
    font-weight: 300;
}