@font-face {
font-family: 'Digital7Mono';
src: url('../Font/Digital7Mono-B1g5.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
:root {
--transparenz-gebetszeiten: 0;
--transparenz-topright: 0;
--transparenz-restlichezeit: 0;
--transparenz-uhrzeit: 0;
--transparenz-bottom: 0;
--transparenz-qrcode: 0;
--transparenz-fullheight: 0;
--transparenz-scroller: 0;
--container-gebetszeitenbackground-color:
rgba(0, 0, 0, 0);
--container-toprightbackground-color:
rgba(0, 0, 0, 0);
--container-restlichezeitbackground-color:
rgba(0, 0, 0, 0);
--container-uhrzeitbackground-color:
rgba(0, 0, 0, 0);
--container-mainbackground-color: ;
--container-fullheightbackground-color:
rgba(0, 0, 0, 0);
--container-qrcodesbackground-color:
rgba(0, 0, 0, 0);
--container-scrollerbackground-color:
rgba(0, 0, 0, 0);
--uhrzeit-color: ;
--restlichezeit-color: ;
--gebetszeit-color: ;
--aktuellezeit-color: ;
--vhp-color: ;
--gebetsnamen-color: ;
--restlichezeitname-color: ;
--headertext-color: ;
--qrcode-description-color: ;
--scroller-color: ;
}
body,
html {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-color: var(--container-mainbackground-color);
margin: 0;
height: 100%;
}
body::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
opacity: 0.9;
z-index: 0;
}
.main-container {
display: flex;
height: 100vh;
width: 100%;
position: relative;
}
.container_gebetszeiten{
background-color: var(--container-gebetszeitenbackground-color);
}
.top-right-container{
background-color: var(--container-toprightbackground-color);
}
.container_restlichezeit {
background-color: var(--container-restlichezeitbackground-color);
}
.container_uhrzeit {
background-color: var(--container-uhrzeitbackground-color);
}
.left-container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(auto-fit, calc((100% - (5px *7)) / 8));
row-gap: 5px;
height: 99vh;
padding: 5px;
padding-bottom: 5px;
width: 30%;
}
.container_gebetszeiten,
.container_uhrzeit,
.container_restlichezeit {
display: flex;
justify-content: center;
align-items:center;
border-radius: 20px;
width: 100%;
border: 0 solid var(--container-border-color);
box-sizing: border-box;
}
.top-right-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: calc((100% - (5px * 7)) / 8);
border-radius: 20px;
overflow: hidden;
padding: 10px;
border: 0 solid var(--container-border-color);
box-sizing: border-box;
gap: 10px;
min-width: 0;
}
.gebetsnamen {
font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
text-align: left;
font-size: 1.2vw;
flex: 1;
color: var(--gebetsnamen-color);
padding-left: 10px;
}
.restlichezeitname {
font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
text-align: left;
font-size: 1.2vw;
flex: 1;
color: var(--restlichezeitname-color);
padding-left: 10px;
}
.gebetsnamen_text {
margin: 5px;
}
.gebetszeit {
display: flex;
align-items: center;
text-align: center;
color: var(--gebetszeit-color);
font-family: "Digital7Mono", sans-serif;
flex: 1;
font-size: 6.7vw;
margin: 0;
padding-right: 20px;
}
.restlichezeit {
display: flex;
align-items: center;
text-align: center;
color: var(--restlichezeit-color);
font-family: "Digital7Mono", sans-serif;
flex: 1;
font-size: 5.3vw;
margin: 0;
padding-right: 20px;
}
.uhrzeit {
justify-content: center;
align-items: center;
text-align: center;
color: var(--uhrzeit-color);
font-family: "Digital7Mono", sans-serif;
flex: 1;
font-size: 7.5vw;
}
.right-container {
overflow: hidden;
display: flex;
flex-direction: column;
width: 70%;
height: 100vh;
padding-top: 5px;
box-sizing: border-box;
gap: 5px;
padding-right: 5px;
position: relative;
z-index: 0;
}
.email-address {
margin-top: 5px;
font-size: 0.8vw;
color: var(--headertext-color);;
text-align: center;
font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
.logo-left {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 10px;
}
.logo-right {
width: 5vw;
}
.logo-right-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.top-right-container img {
height: auto;
object-fit: contain;
border-radius: 10px;
}
.top-right-container img {
height: auto;
object-fit: contain;
border-radius: 10px;
}
.text-content {
text-align: center;
flex-grow: 1;
color: var(--headertext-color);
font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: clamp(0.5rem, 1vw, 1.2rem);
padding: 0 5px;
overflow: hidden;
line-height: 1.1;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
word-wrap: break-word;
}
.text-content #baslik {
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.full-height-container h1, .full-height-container p {
text-shadow: 2px 2px 0 #000,
-2px 2px 0 #000,
2px -2px 0 #000,
-2px -2px 0 #000;
z-index: 2;
}
.logo-right-container {
display: flex;
flex-direction: column;
align-items: center;
}
.full-height-container {
flex-grow: 1;
display: flex;
flex-direction: column;
background-color: var(--container-fullheightbackground-color);
background-position: center;
background-repeat: no-repeat;
color: var(--vhp-color);
margin: 0;
border-radius: 20px;
margin: 1px;
width: 100%;
position: relative;
padding: 5px;
border: 0 solid var(--container-border-color);
box-sizing: border-box;
overflow: hidden;
font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
text-align: center;
color: var(--vhp-color);
z-index: 1;
}
#livestream-container {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 10;
overflow: hidden;
}
#livestream-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
z-index: 10;
}
.full-height-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
border: none; /* Entfernt den Rahmen des iframe */
}
.full-height-container {
position: relative; /* Positionierung für absolute Positionierung der QR-Codes */
padding-bottom: 120px; /* Platz für QR-Codes */
}
.qr-codes {
position: absolute;
bottom: 5px;
display: flex;
/*left: 50%;
transform: translateX(-50%);*/
right: 10px;
justify-content: center;
z-index: 1;
gap: 5px;
background-color: var(--container-qrcodesbackground-color);
border-radius: 20px;
padding: 10px;
margin: 0 auto;
width: auto;
max-width: 100%;
}
.qr-code-container {
display: flex;
flex-direction: column; /* QR-Code über dem Text */
align-items: center; /* Zentrieren der Inhalte */
margin: 0 20px; /* Abstand zwischen den QR-Codes */
}
.qr-code {
width: 9vh; /* Breite der QR-Codes */
height: 9vh; /* Höhe der QR-Codes */
}
.qr-code-description {
margin-top: 5px;
margin-bottom: 10px;
font-size: 16px;
text-align: center; /* Text zentrieren */
color: var(--qrcode-description-color);
}
#content{
position:relative;
z-index: 2;
}
.small-line-height{
z-index: 3;
}
.bottom-container {
background-color: var(--container-scrollerbackground-color);
border-radius: 20px;
overflow: hidden;
position: relative;
height: 6.5vh;
margin-bottom: 5px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
}
.lauftext {
position: absolute;
white-space: nowrap;
color: var(--scroller-color);
font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: 2.3vw;
left: 100%;
}
#lauftext1 {
animation: scroll linear infinite;
}
#lauftext2 {
animation: scroll linear infinite;
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-200%);
}
}
.single-sponsor {
max-height: 100%;
max-width: 100%;
object-fit: contain;
background-color: #f9f9f9;
border-radius: 20px;
display: block;
margin: 0 auto;
}
.sponsor-container {
overflow: hidden;
position: absolute;
display: flex;
align-items: center;
justify-content: flex-end;
width: 100%;
height: 20%;
bottom: 0px;
right: 0px;
}
#content {
position: relative;
z-index: 1;
}
#livestream-container {
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
z-index: 10000;
border-radius: 20px;
overflow: hidden;
}
#livestream-container iframe {
width: 100%;
height: 100%;
border: none;
border-radius: 20px;
}
.sponsor-track1, .sponsor-track2 {
display: flex;
gap: 10px;
white-space: nowrap;
position: absolute;
will-change: transform;
animation: scrollTrack linear infinite;
justify-content: flex-start;
}
.sponsor-track1 img, .sponsor-track2 img {
max-height: 100%;
object-fit: contain;
background-color: #f9f9f9;
border-radius: 20px;
}
/* Keyframes für die Scroll-Animation */
@keyframes scrollTrack {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
.fade-in {
opacity: 0;
animation: fadeIn 1.5s forwards;
}
.fade-out {
opacity: 1;
animation: fadeOut 1.5s forwards;
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes fadeOut {
0% { opacity: 1; }
100% { opacity: 0; }
}