/* ==========================================================================
   Fonts
   ========================================================================== */

@font-face {
font-family: 'Proxima Nova';
src: url("/css/fonts/ProximaNova.ttf");
}

@font-face {
font-family: 'Proxima Nova Light';
src: url("/css/fonts/ProximaNovaLight.ttf");
}

@font-face {
font-family: 'Proxima Nova Semibold';
src: url("/css/fonts/ProximaNovaSemibold.ttf");
}

@font-face {
font-family: 'Proxima Nova Semibold Italic';
src: url("/css/fonts/ProximaNovaSemiboldItalic.ttf");
}

@font-face {
font-family: 'Noto Sans';
src: url("/css/fonts/NotoSans-Regular.ttf");
}

@font-face {
font-family: 'Noto Sans Italic';
src: url("/css/fonts/NotoSans-Italic.ttf");
}

@font-face {
font-family: 'Noto Serif';
src: url("/css/fonts/NotoSerif-Regular.ttf");
}

@font-face {
font-family: 'Noto Sans Bold';
src: url("/css/fonts/NotoSans-Bold.ttf");
}

@font-face {
font-family: 'Noto Serif Italic';
src: url("/css/fonts/NotoSerif-Italic.ttf");
}

@font-face {
font-family: 'QuatroSlab';
src: url("/css/fonts/QuatroSlab_RegularWeb.eot");
src: url("/css/fonts/QuatroSlab_RegularWeb.eot") format("embedded-opentype"), url("/css/fonts/QuatroSlab_RegularWeb.woff") format("woff");
font-weight: 400;
font-style: normal;
}

@font-face {
font-family: 'San Francisco';
src: url("/css/fonts/SF-Pro-Display-Regular.otf");
font-weight: 400;
}

@font-face {
font-family: 'San Francisco Bold';
src: url("/css/fonts/SF-Pro-Display-Bold.otf");
font-weight: 400;
}

@font-face {
font-family: 'San Francisco Semibold';
src: url("/css/fonts/SF-Pro-Display-Semibold.otf");
font-weight: 400;
}

@font-face {
font-family: 'San Francisco SemiboldItalic';
src: url("/css/fonts/SF-Pro-Display-SemiboldItalic.otf");
font-weight: 400;
}

@font-face {
font-family: 'New York';
src: url("/css/fonts/NewYorkSmall-Regular.otf");
font-weight: 400;
}

@font-face {
font-family: 'New York Semibold';
src: url("/css/fonts/NewYorkSmall-Semibold.otf");
font-weight: 400;
}

@font-face {
font-family: 'New York Regular Italic';
src: url("/css/fonts/NewYorkSmall-RegularItalic.otf");
font-weight: 400;
}

/* ==========================================================================
   Website-Style
   ========================================================================== */

body, html {
background-color: #ffffff;
font-family: 'New York', San Francisco, Helvetica Neue, Helvetica, Arial, sans-serif;
color: #2a2c2f;
letter-spacing: normal;
line-height: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

:root {
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
body, html {
background-color: #3e3d3c;
color: white;
}

header h1 a {
color: white;
}

#content, .contenth1, p, ul {
color: white;
}

#socialmedia img {
-webkit-filter: invert(90%);
filter: invert(90%);
}

#socialmedia img:hover {
-webkit-filter: grayscale(80%);
filter: grayscale(80%);
}

#copyright p a {
color: white;
}

#copyright p a:hover {
color: #0a9eff;
}

}
   
/* Rahmen */
#wrapper {
max-width: 600px;
margin: 0px auto;
margin-top: 20px;
padding: 0 15px 0 15px;
}

/* Header */
header {
width: 100%;
height: 80px;
}

header h1 {
font-family: 'San Francisco SemiboldItalic';
font-size: 26px;
font-weight: normal;
margin: 0px;
}

.headerh1 {
font-family: 'San Francisco SemiboldItalic';
color: #676767;
margin: 0px 0px 0px -1px;
}

header p {
font-size: 18px;
margin: 0px 0px -10px 0px;
float: left;
}

header a {
color: #2a2c2f;
text-decoration: none;
-webkit-transition: color 0.6s;
transition: color 0.6s;
}

header a:hover {
color: #2fa6a1;
text-decoration: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}

/* Sprachauswahl */
#language-select {
font-size: 15px;
float: right;
}

#language-select a {
color: #717171;
text-align: center;
text-decoration: none;
-webkit-transition: color 0.6s;
transition: color 0.6s;
}

#language-select a:hover {
color: #0a9eff;
text-decoration: none;
-webkit-text-decoration-color: #4a463b;
text-decoration-color: #4a463b;
-webkit-user-select: none;
-webkit-touch-callout: none;
}

#language-select a.active {
color: #0a9eff;
text-decoration: none;
-webkit-text-decoration-color: #4a463b;
text-decoration-color: #4a463b;
-webkit-user-select: none;
-webkit-touch-callout: none;
}

/* Navigation */
nav {
width: 100%;
margin-bottom: 30px;
}

nav ul {
list-style-type: none;
font-family: 'San Francisco Semibold';
font-size: 15px;
text-transform: uppercase;
text-align: center;
margin: 0;
padding: 0;
}

nav li {
display: inline;
border-right: 1px solid #2a2c2f;
padding-left: 3px;
padding-right: 7px;
}

nav li:last-child {
border-right: none;
}

nav li a {
color: #717171;
text-align: center;
text-decoration: none;
-webkit-transition: color 0.6s;
transition: color 0.6s;
}

nav li a:hover {
color: #0a9eff;
text-decoration: underline;
-webkit-text-decoration-color: #4a463b;
text-decoration-color: #4a463b;
}

nav li a.active {
color: #0a9eff;
text-decoration: underline;
-webkit-text-decoration-color: #4a463b;
text-decoration-color: #4a463b;
}

/* Navigation an iPhone X, XS, 11 Pro, 12 Mini anpassen */
@media only screen 
    and (device-width : 375px)
    and (device-height : 812px)
    and (-webkit-device-pixel-ratio : 3)
    and (orientation : portrait) {
nav ul {
font-size: 13px;
}

}

@media only screen 
    and (device-width : 375px)
    and (device-height : 812px)
    and (-webkit-device-pixel-ratio : 3)
    and (orientation : landscape) {
nav ul {
font-size: 10px;
}

}

/* Navigation an iPhone XS Max, 11 Pro Max anpassen */
@media only screen 
    and (device-width : 414px)
    and (device-height : 896px)
    and (-webkit-device-pixel-ratio : 3)
    and (orientation : portrait) {
nav ul {
font-size: 13px;
}

}

@media only screen 
    and (device-width : 414px)
    and (device-height : 896px)
    and (-webkit-device-pixel-ratio : 3)
    and (orientation : landscape) {
nav ul {
font-size: 10px;
}

}

/* Navigation an iPhone 12, 12 Pro anpassen */
@media only screen 
    and (device-width : 390px)
    and (device-height : 844px)
    and (-webkit-device-pixel-ratio : 3)
    and (orientation : portrait) {
nav ul {
font-size: 13px;
}

}

@media only screen 
    and (device-width : 390px)
    and (device-height : 844px)
    and (-webkit-device-pixel-ratio : 3)
    and (orientation : landscape) {
nav ul {
font-size: 13px;
}

}

/* Navigation an iPhone XR anpassen */
@media only screen 
    and (device-width : 414px)
    and (device-height : 896px)
    and (-webkit-device-pixel-ratio : 2)
    and (orientation : portrait) {
nav ul {
font-size: 14px;
}

}

@media only screen 
    and (device-width : 414px)
    and (device-height : 896px)
    and (-webkit-device-pixel-ratio : 2)
    and (orientation : landscape) {
nav ul {
font-size: 11px;
}

}

/* Navigation an iPhone 6, 6S, 7, 8 anpassen */
@media only screen 
    and (device-width : 375px)
    and (device-height : 667px)
    and (-webkit-device-pixel-ratio : 2)
    and (orientation : portrait) {
nav ul {
font-size: 13px;
}

}

@media only screen 
    and (device-width : 375px)
    and (device-height : 667px)
    and (-webkit-device-pixel-ratio : 2)
    and (orientation : landscape) {
nav ul {
font-size: 10px;
}

}

/* Navigation an iPhone 5, 5S, SE anpassen */
@media only screen 
    and (device-width : 320px)
    and (device-height : 568px)
    and (-webkit-device-pixel-ratio : 2)
    and (orientation : portrait) {
nav ul {
font-size: 12px;
}

}

@media only screen 
    and (device-width : 320px)
    and (device-height : 568px)
    and (-webkit-device-pixel-ratio : 2)
    and (orientation : landscape) {
nav ul {
font-size: 10px;
}

}

/* Inhalt */
#content {
width: 100%;
height: auto;
font-family: 'New York';
color: #2a2c2f;
font-size: 19px;
line-height: 1.5em;
letter-spacing: normal;
margin-bottom: 10px;
}

/* Font-Size Content an iPhone X anpassen */
@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3)
    and (orientation : portrait) {
#content {
font-size: 17px;
}

}

@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3)
    and (orientation : landscape) {
#content {
font-size: 12px;
}

}

/* Font-Size Content an iPhone XS Max anpassen */
@media only screen 
    and (device-width : 414px)
    and (device-height : 896px)
    and (-webkit-device-pixel-ratio : 3)
    and (orientation : portrait) {
#content {
font-size: 17px;
}

}

@media only screen 
    and (device-width : 414px)
    and (device-height : 896px)
    and (-webkit-device-pixel-ratio : 3)
    and (orientation : landscape) {
#content {
font-size: 12px;
}

}

/* Font-Size Content an iPhone XR anpassen */
@media only screen 
    and (device-width : 414px)
    and (device-height : 896px)
    and (-webkit-device-pixel-ratio : 2)
    and (orientation : portrait) {
#content {
font-size: 19px;
}

}

@media only screen 
    and (device-width : 414px)
    and (device-height : 896px)
    and (-webkit-device-pixel-ratio : 2)
    and (orientation : landscape) {
#content {
font-size: 14px;
}

}

/* Font-Size Content an iPhone 6, 6S, 7, 8 anpassen */
@media only screen 
    and (device-width : 375px) 
    and (device-height : 667px) 
    and (-webkit-device-pixel-ratio : 2)
    and (orientation : portrait) {
content {
font-size: 17px;
}

}

@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3)
    and (orientation : landscape) {
#content {
font-size: 12px;
}

}

/* Font-Size Content an iPhone 5, 5S, SE anpassen */
@media only screen 
    and (device-width : 320px) 
    and (device-height : 568px) 
    and (-webkit-device-pixel-ratio : 2)
    and (orientation : portrait) {
#content {
font-size: 17px;
}

}

@media only screen 
    and (device-width : 320px) 
    and (device-height : 568px) 
    and (-webkit-device-pixel-ratio : 2)
    and (orientation : landscape) {
#content {
font-size: 12px;
}

}

.contenth1 {
font-family: 'New York Semibold';
font-size: 27px;
line-height: 1.25em;
}

#content ul {
list-style-type: none;
margin: 0;
padding: 0;
}

#content a {
color: #0a9eff;
text-decoration: underline;
-webkit-text-decoration-color: #4a463b;
text-decoration-color: #4a463b;
-webkit-transition: color 0.6s;
transition: color 0.6s;
}

#content a:hover {
color: #e76a72;
text-decoration: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}

#mainpictureme {
width: auto;
height: auto;
display: block;
position: relative;
width: 160px;
height: 160px;
background: transparent;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}

/* Footer */
footer {
width: 100%;
height: auto;
color: #2a2c2f;
text-align: center;
letter-spacing: normal;
}

/* Tagcloud */
#tagcloud {
color: #2a2c2f;
font-size: 16px;
letter-spacing: normal;
padding: 0px 30px 20px 30px;
}

/* Font-Size Tagcloud an iPhone X anpassen */
@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3)
    and (orientation : landscape) {
#tagcloud {
font-size: 12px;
}

}

/* Font-Size Tagcloud an iPhone XS Max anpassen */
@media only screen 
    and (device-width : 414px)
    and (device-height : 896px)
    and (-webkit-device-pixel-ratio : 3)
    and (orientation : landscape) {
nav ul {
font-size: 12px;
}

}

/* Font-Size Tagcloud an iPhone XR anpassen */
@media only screen 
    and (device-width : 414px)
    and (device-height : 896px)
    and (-webkit-device-pixel-ratio : 2)
    and (orientation : portrait) {
#tagcloud {
font-size: 17px;
}

}

@media only screen 
    and (device-width : 414px)
    and (device-height : 896px)
    and (-webkit-device-pixel-ratio : 2)
    and (orientation : landscape) {
#tagcloud {
font-size: 14px;
}

}

/* Font-Size Tagcloud an iPhone 6, 6S, 7, 8 anpassen */
@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3)
    and (orientation : landscape) {
#tagcloud {
font-size: 12px;
}

}

/* Font-Size Tagcloud an iPhone 5, 5S, SE anpassen */
@media only screen 
    and (device-width : 320px) 
    and (device-height : 568px) 
    and (-webkit-device-pixel-ratio : 2)
    and (orientation : landscape) {
#tagcloud {
font-size: 12px;
}

}

#tagcloud span {
color: #2fa6a1;
padding: 0px 0px 0px 10px;
-webkit-transition: color 0.6s;
transition: color 0.6s;
}

#tagcloud span:first-child {
padding: 0px 0px 0px 0px;
-webkit-transition: color 0.6s;
transition: color 0.6s;
}

#tagcloud span:hover {
color: orange;
}

/* Social Media */
#socialmedia {
margin: 0 auto;
text-align: center;
width: 100%;
padding: 0px 0px 40px 0px;
font-size: 14px;
letter-spacing: normal;
}

#socialmedia img {
width: 30px;
height: 30px;
padding-right: 5px;
}

#socialmedia img:hover {
-webkit-filter: invert(70%);
filter: invert(70%);
}

/* Made with love */
#madewithheart {
padding: 0px 0px 20px 0px;
font-family: 'New York Semibold';
font-size: 14px;
letter-spacing: normal;
color: #8b8b8b;
}

/* Font-Size Heart an iPhone X anpassen */
@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3)
    and (orientation : landscape) {
#madewithheart {
font-size: 12px;
}

}

/* Font-Size Heart an iPhone XS Max anpassen */
@media only screen 
    and (device-width : 414px)
    and (device-height : 896px)
    and (-webkit-device-pixel-ratio : 3)
    and (orientation : landscape) {
#madewithheart {
font-size: 12px;
}

}

/* Font-Size Heart an iPhone XR anpassen */
@media only screen 
    and (device-width : 414px)
    and (device-height : 896px)
    and (-webkit-device-pixel-ratio : 2)
    and (orientation : portrait) {
#madewithheart {
font-size: 16px;
}

}

@media only screen 
    and (device-width : 414px)
    and (device-height : 896px)
    and (-webkit-device-pixel-ratio : 2)
    and (orientation : landscape) {
#madewithheart {
font-size: 14px;
}

}

/* Font-Size Heart an iPhone 6, 6S, 7, 8 anpassen */
@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3)
    and (orientation : landscape) {
#madewithheart {
font-size: 12px;
}

}

/* Font-Size Heart an iPhone 5, 5S, SE anpassen */
@media only screen 
    and (device-width : 320px) 
    and (device-height : 568px) 
    and (-webkit-device-pixel-ratio : 2)
    and (orientation : landscape) {
#madewithheart {
font-size: 12px;
}

}

.heart {
-webkit-animation: pulsate 6s ease-out infinite;
-moz-animation: pulsate 6s ease-out infinite;
-o-animation: pulsate 6s ease-out infinite;
animation: pulsate 6s ease-out infinite;
transform: rotate(-45deg);
background-color: #ff2a1a;
display: inline-block;
height: 9px;
margin: 0 3px;
position: relative;
top: 0;
width: 9px;
}
  
.heart:after {
content: "";
display: block;
width: 19px;
height: 19px;
background-color: #ff2a1a;
}

.heart:before,
.heart:after {
content: "";
background-color: #ff2a1a;
border-radius: 50%;
height: 9px;
position: absolute;
width: 9px;
}

.heart:before {
top: -5px;
left: 0;
}

.heart:after {
left: 5px;
top: 0;
}

@-webkit-keyframes pulsate {
  0% {
    transform: scale(1) rotate(-45deg); }
  90% {
    transform: scale(1) rotate(-45deg); }
  92% {
    transform: scale(1.4) rotate(-45deg); }
  94% {
    transform: scale(1.2) rotate(-45deg); }
  96% {
    transform: scale(1.4) rotate(-45deg); }
  100% {
    transform: scale(1) rotate(-45deg); } }

@-moz-keyframes pulsate {
  0% {
    transform: scale(1) rotate(-45deg); }
  90% {
    transform: scale(1) rotate(-45deg); }
  92% {
    transform: scale(1.4) rotate(-45deg); }
  94% {
    transform: scale(1.2) rotate(-45deg); }
  96% {
    transform: scale(1.4) rotate(-45deg); }
  100% {
    transform: scale(1) rotate(-45deg); } }

@-o-keyframes pulsate {
  0% {
    transform: scale(1) rotate(-45deg); }
  90% {
    transform: scale(1) rotate(-45deg); }
  92% {
    transform: scale(1.4) rotate(-45deg); }
  94% {
    transform: scale(1.2) rotate(-45deg); }
  96% {
    transform: scale(1.4) rotate(-45deg); }
  100% {
    transform: scale(1) rotate(-45deg); } }

@keyframes pulsate {
  0% {
    transform: scale(1) rotate(-45deg); }
  90% {
    transform: scale(1) rotate(-45deg); }
  92% {
    transform: scale(1.4) rotate(-45deg); }
  94% {
    transform: scale(1.2) rotate(-45deg); }
  96% {
    transform: scale(1.4) rotate(-45deg); }
  100% {
    transform: scale(1) rotate(-45deg); } }

/* Copyright */
#copyright {
padding: 0px 0px 20px 0px;
font-size: 15px;
letter-spacing: normal;
color: #2a2c2f;
}

/* Font-Size Copyright an iPhone X anpassen */
@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3)
    and (orientation : landscape) {
#copyright {
font-size: 12px;
}

}

/* Font-Size Copyright an iPhone XS Max anpassen */
@media only screen 
    and (device-width : 414px)
    and (device-height : 896px)
    and (-webkit-device-pixel-ratio : 3)
    and (orientation : landscape) {
#copyright {
font-size: 12px;
}

}

/* Font-Size Copyright an iPhone XR anpassen */
@media only screen 
    and (device-width : 414px)
    and (device-height : 896px)
    and (-webkit-device-pixel-ratio : 2) {
#copyright {
font-size: 16px;
}

}

@media only screen 
    and (device-width : 414px)
    and (device-height : 896px)
    and (-webkit-device-pixel-ratio : 2)
    and (orientation : landscape) {
#copyright {
font-size: 14px;
}

}

/* Font-Size Copyright an iPhone 6, 6S, 7, 8 anpassen */
@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3)
    and (orientation : landscape) {
#copyright {
font-size: 12px;
}

}

/* Font-Size Copyright an iPhone 5, 5S, SE anpassen */
@media only screen 
    and (device-width : 320px) 
    and (device-height : 568px) 
    and (-webkit-device-pixel-ratio : 2)
    and (orientation : landscape) {
#copyright {
font-size: 12px;
}

}

#copyright a {
color: #2a2c2f;
text-decoration: none;
-webkit-transition: color 0.6s;
transition: color 0.6s;
}

#copyright a:hover {
color: #0a9eff;
text-decoration: underline;
-webkit-text-decoration-color: #4a463b;
text-decoration-color: #4a463b;
}