@font-face {
 font-family: 'Orbitron';
 /* Gewünschter Name */
 src: url('../fonts/Orbitron-VariableFont_wght.ttf')format('truetype');
 /* für Safari, Android, iOS */
 font-display: swap
}

@font-face {
 font-family: 'Roboto';
 /* Gewünschter Name */
 src: url('../fonts/Roboto-Regular.ttf')format('truetype');
 /* für Safari, Android, iOS */
 font-display: swap
}

@font-face {
 font-family: 'Freeman';
 /* Gewünschter Name */
 src: url('../fonts/Freeman-Regular.ttf')format('truetype');
 /* für Safari, Android, iOS */
 font-display: swap
}

@font-face {
 font-family: 'Montserrat';
 /* Gewünschter Name */
 src: url('../fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
 /* TTF als Fallback */
 font-display: swap;
 font-weight: 100 900;
 /* Variabler Gewichtsbereich */
 font-style: normal;
}
#logo {
 height: 100px;
}

body {
 overflow-x:hidden;
 transition: transform 5s ease;
}
body main {
 color: #ffffff;
 margin-top:220px;
 margin-bottom:100px;
}

audio {
 width:100%;
 margin-top:5px;
}

a.ltrMText {
  unicode-bidi: bidi-override;
  direction: rtl;
}

h2 {
 margin: 10px 0px 0px 0px;
}

.sitemap ul {
 padding-left: 0px;
}

.admin main {
 margin-top:20px;
}

.admin textarea {width: 100%;
}
#social-links {
 margin:30px;
}
#social-links a {
 font-size:50px;
 margin:10px;
 color: #ffffff;
}
#social-links a:hover {
 color: #703bb7;
}

.orbitron {
	 font-family: 'Orbitron';
}

#kontaktformularIframe, #uploadIframe {
 width: 100%;
 border: none;
 /* optional */
 height:650px;
}
.freunde td {
 padding:1%;
}
.freunde table {
 width:100%;
}
.freunde table, .freunde tr,.freunde td {
 border: 1px inset #ffffff;
 border-collapse: collapse;
 border-spacing: 0;
}
.freunde th:first-child {
 width:18% !important;
}
.freundebuch input, .freundebuch textarea {
 width:95%;
 padding:2%;
 border:1px solid #000000;
 margin-bottom:4px;
}
.freundebuch input[type="submit"] {
 width:99%;
}
.splashfam main h1 {
 text-align:center;
}
main {
 margin:0 auto;
}
body {
 margin: 0;
 font-family: proxima-nova, sans-serif;
 padding: 0;
 color: #ffffff;
 overflow-x: hidden;
 display: flex;
 flex-direction: column;
 min-height: 100vh;
 font-size:20px;
background: #222222;
}
a {
 text-decoration: none;
 color: rgb(205 255 62/var(--tw-text-opacity,1));
 font-weight: bold;
}
a:hover {
 color: #703bb7;
 font-weight: bold;
}
.text-shine {
 color: rgb(205 255 62/var(--tw-text-opacity,1));
}

@keyframes rotateAnimation {
 from {
 transform: rotate(0deg);
 }
 to {
 transform: rotate(360deg);
 }
}
.rotate {
 animation: rotateAnimation 5s ease forwards;
}


/* Das Haupt-Galerie-Layout */
.gallery main {
 display: grid;
 grid-template-columns: repeat(2, 1fr); /* Zwei Spalten */
 gap: 20px; /* Abstand zwischen den Bildern */
}

/* Styling für die Bilder direkt im main */
.gallery main img {
 width: 100%;
 height: 250px; /* Feste Höhe für alle Bilder */
 object-fit: cover; /* Verhindert Verzerrung, behält das Bild im Container */
 border-radius: 8px; /* Abgerundete Ecken */
}

.gallery h1 {
 grid-column: 1 / -1; /* Hält das h1 über der Galerie und lässt es über beide Spalten gehen */
 text-align: center; /* Zentriert den Titel */
 margin-bottom: 20px; /* Abstand nach unten */
}

#burger-menu-toggle {
 height:40px;
 float:right;
 display: inline-block;
 padding:0px 0px 20px 20px;
 filter: brightness(0) saturate(100%) invert(11%) sepia(0%) saturate(1%) hue-rotate(151deg) brightness(91%) contrast(91%);
 transition: filter 0.5s;
}
canvas {
 z-index:-5;
}
.gabriela, .gabriella {
 font-family: gabriella, sans-serif;
}
/* Allgemeines Styling */
#site-nav {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 10px 20px;
 position: relative;
 float:right;
}
/* Menü standardmäßig auf Desktop horizontal anzeigen */
#menu.js-loading {
 display: none !important;
}

#menu {
 list-style: none;
 display: flex;
 gap: 10px;
 padding: 0;
 margin: 0;
}
#menu li {
 display: inline;
}
#menu li a {
 text-decoration: none;
 color: #ffffff;
 padding: 8px;
 text-transform: uppercase;
 font-family: gabriella, sans-serif;
 font-size:18px;
 border-radius: 10px;
}
#menu li a:hover, #menu li a.active {
 color:#703bb7;
 background-color:#ffffff;
}
/* Logo */
.nav-logo {
 height: 40px;
}
/* Burger-Button */
#burger-menu-button,#burger-menu-close {
 display: none;
 /* Burger-Button und Close-Button standardmäßig ausblenden */
 height: 30px;
 cursor: pointer;
 position: absolute;
 top: -100px;
 right: 15px;
}

#burger-menu-button {
 display:none;
}

/* Burger-Button sichtbar auf mobilen Geräten */
@media (max-width: 1450px) {
 #burger-menu-button {
 display: block;
 /* Burger-Icon sichtbar machen */
 #menu.js-loading {
 display: none !important;
 }
 }
 #menu {
 display: none;
 flex-direction: column;
 position: fixed;
 top: 138px;
 left: 0;
background-color: #222222;
 /* Semi-transparenter weißer Hintergrund */
 backdrop-filter: blur(10px);
 /* Weichzeichner-Effekt für den Hintergrund */
 border-bottom-right-radius: 010px;
 border-bottom-left-radius: 010px;
 width: 96%;
 padding: 2%;
 }
 #menu.show {
 display: flex;
 }
 #site-nav {
 float:unset;
 }
}
body h1 {
 font-family: gabriella, sans-serif;
 font-size:28px;
 margin-bottom:15px;
 text-transform: uppercase;
 color: rgb(205 255 62/var(--tw-text-opacity,1));
}

ul {
 list-style: none;
}

.challenge ul, .shisha ul, .kaesespaetzel ul, .colin-baumeyer ul {
 list-style-type: disc;
}
body.overflow-hidden {
 overflow: hidden !important;
}
body .headercontent {
 margin:0 auto;
 padding:10px 10px 0px 10px;
}
body header .headercontent h1 {
 font-size:20px;
 margin:0;
}

.splashfam-wrapper {
 display:flex;
 justify-content: center;
 flex-wrap: wrap;
}
.splashfam-wrapper div {
 width:20%;
}

.splashfam-wrapper a {
 display:flex;
}
.splashfam-wrapper div img {
 width:100%;
 transition: transform 0.1s ease-in-out, filter 0.1s ease-in-out;
}

.splashfam-wrapper div img:hover {
 transform: scale(1.05);
 filter: brightness(1.2);
}

#timer {
 display:inline-block;
}
.ytframe {
 width:100% !important;
 height:540px !important;
 border-radius: 10px !important;
}
header {
 background-color: #ffffff;
 top: 0;
 width: 90%;
 position: fixed;
 left: 50%;
 top:90px;
 background-color: rgba(255, 255, 255, 0.4);
 /* Semi-transparenter weißer Hintergrund */
 backdrop-filter: blur(10px);
 /* Weichzeichner-Effekt für den Hintergrund */
 border-radius: 10px;
 /* Abgerundete Ecken für den Milchglaseffekt */
 transform: translateX(-50%);
 z-index:10;
}
.inhalt {
 margin: auto;
 text-align: center;
}
main {
 padding: 20px;
}
#smokingqsimon {
 position: fixed;
 left: 0px;
 bottom:57px;
}
#qsimon2 {
 position: fixed;
 right: -75px;
 bottom:57px;
}
#qsimon2 img {
 height:250px;
}
#smokingqsimon img {
 width: 200px;
}
.cibutton a, input[type="submit"] {
 color:#222222;
 text-decoration:none;
}
.cibutton, input[type="submit"], .ringcam button {
 background-color:rgb(205 255 62/var(--tw-text-opacity,1));
 color:#222222;
 display: inline-block;
 margin:15px auto;
 padding:10px;
 border-radius: 10px !important;
 border:1px solid #000000;
 font-family: gabriella, sans-serif;
 text-transform: uppercase;
}
.cibutton:hover, input[type="submit"]:hover, .ringcam button:hover{
 border:1px solid #703bb7;
 background-color:#703bb7;
 color:#222222;
}
.cibutton:hover a{
 color:#000000;
 font-weight: bold;
}
footer {
 background-color: rgba(255, 255, 255, 0.4);
 width: 90%;
 margin:20px auto;
 color: #222222;
 /* Semi-transparenter weißer Hintergrund */
 backdrop-filter: blur(10px);
 /* Weichzeichner-Effekt für den Hintergrund */
 border-radius: 10px;
 /* Abgerundete Ecken für den Milchglaseffekt */
}
.footer-content {
 width: 950px;
 padding:20px;
 margin:0 auto;
 text-align:center;
}

footer a {
 text-decoration: none;
 color: rgb(205 255 62/var(--tw-text-opacity,1));
 font-weight: bold;
}

.video-frame {
 width:100%;
 height:auto;
 border-radius: 10px !important;
}
.jojo .video-frame, .max .video-frame, .kaesespaetzel .video-frame {
 float:left;
 margin-right:20px;
 width:350px;
}

.vlog2022 .video-frame, .reel2023 .video-frame {
 width: 400px;
 height: auto;
 margin: 0 auto;
 display: block; /* <- wichtig! */
 border-radius: 10px !important;
}

.vlog2022 h1, .reel2023 h1 {
 text-align: center;
}

.kevin .fa-instagram,
.pfandloch .fa-instagram,
.colin-baumeyer .fa-instagram,
.raffgee .fa-instagram,
.lea .fa-instagram,
.danny .fa-instagram,
.maxi .fa-instagram,
.max .fa-instagram,
.lara .fa-instagram,
.kimsi .fa-instagram,
.nico .fa-instagram,
.jojo .fa-instagram,
.ziko-auf-die-1 .fa-instagram,
.qsimon .fa-instagram,
.bernd-das-brot .fa-instagram,
.klick #counter,
.stoppuhr #display,
.phil .fa-instagram,
.smoonjk .fa-instagram,
.elias .fa-instagram,
.felix .fa-instagram,
.smolle .fa-instagram {
 font-size:50px;
}

footer .footer-content .fa-instagram {
 font-size:20px;
}

@keyframes cloud1slide {
 0% {
 left: 10%;
 }
 50% {
 left: 60%;
 }
 100% {
 left: 10%;
 }
}
/* Desktop Styles */
@media screen and (min-width: 1050px) {
 body main {
 width:950px;
 }
}
/* Mobile Styles */
@media screen and (max-width: 1650px) {
 header, footer {
 width: 98%;
 }
}


/* Mobile Styles */
@media screen and (max-width: 1000px) {
 .shop-container {
 flex-direction: column;
 }

 .mobilefull {
 width:100% !important;
 }

 header {
 border-radius: 0px;
 /* Abgerundete Ecken für den Milchglaseffekt */
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
 top:70px;
 }
 .video-frame {
 width:100% !important;
 float:unset !important;
 height:auto;
 margin-bottom:20px;
 }

 .splashfam-wrapper div {
 width:50%;
 }
 .splashfam-wrapper div img {
 width:100%;
 }
 #main, .footer-content {
 width:96%;
 padding:2%;
 }
 .ytframe {
 width:100% !important;
 height:220px !important;
 margin: 0 auto !important;
 border-radius: 10px !important;
 }
}
.angebot-ticker {
 background-color:#604C3F;
 color:#ffffff;
}
.angebot-ticker {
 box-sizing: border-box;
}
@-webkit-keyframes ticker {
 0% {
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
 visibility: visible;
 }
 100% {
 -webkit-transform: translate3d(-100%, 0, 0);
 transform: translate3d(-100%, 0, 0);
 }
}
@keyframes ticker {
 0% {
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
 visibility: visible;
 }
 100% {
 -webkit-transform: translate3d(-100%, 0, 0);
 transform: translate3d(-100%, 0, 0);
 }
}
.ticker-wrap {
 font-family: gabriella, sans-serif;
 width: 100%;
 overflow: hidden;
 padding-left: 100%;
 box-sizing: content-box;
 position:fixed;
 top:0;
 border-bottom-width: 1px;
 border-bottom-style: solid;
 border-color: rgb(205 255 62/var(--tw-text-opacity,1));
 background-color:#222222;
 z-index: 5; }
 .ticker {
 display: inline-block;
 height: 3rem;
 line-height: 3rem;
 white-space: nowrap;
 padding-right: 100%;
 box-sizing: content-box;
 -webkit-animation-iteration-count: infinite;
 animation-iteration-count: infinite;
 -webkit-animation-timing-function: linear;
 animation-timing-function: linear;
 -webkit-animation-name: ticker;
 animation-name: ticker;
 -webkit-animation-duration: 30s;
 animation-duration: 30s;
 &__item {
 display: inline-block;
 padding: 0 2rem;
 color: white;

 }
 }
}
.angebot-ticker:hover .ticker {
 -webkit-animation-play-state: paused;
 animation-play-state: paused;
}

.float-left {
 float: left;
 margin-right: 15px;
 margin-bottom:15px;
}

.packliste h3 {
 margin-top:25px;
}

.images-playlists {
 display: flex;
 gap: 10px;
 text-align: center;
 flex-wrap: wrap; /* Zeilenumbruch erlauben */
 justify-content: center;
}

.images-playlists a {
 display: block;
 flex: 1 1 200px; /* flexibel, mindestens 200px breit */
 max-width: 200px;
 box-sizing: border-box;
}

.images-playlists img {
 width: 100%;
 height: auto;
 display: block;
 margin: 0 auto;
}

.images-playlists a div {
 margin-top: 5px;
 font-size: 14px;
}

.fuckyou .ticker-wrap, .fuckyou .headercontent, .fuckyou footer {
display:none;
}

.fuckyou main {
 text-align:center;
 margin-top:70px;
}

.fuckyou h1 {
 font-size:80px;
}

blockquote {
 padding-left: 0;
 margin: 1em 0;
 font-style: italic;
 text-align: center;
 position: relative;
}

blockquote::before {
 content: "“";
 font-size: 3em;
 position: static; /* nicht absolut */
 display: inline-block;
 margin-right: 0.2em;
 vertical-align: middle;
}


 .splash-fam-image-container {
 position: relative;
 width: 100%;
 }
 .splash-fam-image-container img {
 width: 100%;
 height: auto;
 display: block;
 }
 .splash-fam-image-container .hotspot {
 position: absolute;
 width: 6%;
 aspect-ratio: 1 / 1;
 border-radius: 50%;
 cursor: pointer;
 transition: background 0.3s;
 }

 .ringcam #viewer {
 max-width: 100%;
 height: auto;
 border-radius: 12px;
 margin-top: 20px;
 }
 .ringcam #slider {
 width: 100%;
 margin-top: 20px;
 }
 .ringcam .controls {
 margin-top: 20px;
 }