: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);
--container-logosbackground-color: rgba(135, 203, 243, 0.3);
--uhrzeit-color: ;
--restlichezeit-color: ;
--gebetszeit-color: ;
--aktuellezeit-color: ;
--vhp-color: ;
--gebetsnamen-color: ;
--restlichezeitname-color: ;
--headertext-color: ;
--qrcode-description-color: ;
--scroller-color: ;
--aktuellezeit-background-color: var(--aktuellezeit-color);
--gebetszeit-background-color:
rgba(0, 0, 0, 0);
--shadow-box-color: rgba(0, 0, 0, 0.7);
--shadow-type-directional: 5px 5px 5px var(--shadow-box-color);
--shadow-type-all-around: 0 0 10px var(--shadow-box-color);
--shadow-type-all-around-strong: 0 0 15px 5px var(--shadow-box-color);
--shadow-type-glow: 0 0 15px rgba(255, 255, 255, 0.3), 0 0 8px var(--shadow-box-color);
--shadow-type-multi: 0 0 5px rgba(0, 0, 0, 0.1), 0 0 10px rgba(0, 0, 0, 0.1), 0 0 15px var(--shadow-box-color);
--shadow-global: var(--shadow-type-directional);
}
html, body {
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
color: white;
overflow: hidden;
}
body {
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
}
.main-container {
display: flex;
flex-direction: column;
height: 100vh; /*calc(100vh - 5px); */
width: 100vw;
gap: 5px;
background: var(--container-mainbackground-color);
margin-bottom: 0px;
overflow: hidden;
}
.top-container {
flex: 1;
min-height: 0;
display: flex;
width: 100%;
align-items: stretch;
}
.prayertimes-container {
height: 16vh;
min-height: 16vh;
width: 100%;
display: flex;
align-items: center;
padding: 0 15px;
box-sizing: border-box;
}
.qr-codes {
position: absolute;
bottom: 5px;
/*left: 50%;
transform: translateX(-50%);*/
left: 10px;
display: flex;
gap: 20px;
background-color: var(--container-qrcodesbackground-color);
border-radius: 20px;
padding: 15px;
z-index: 5;
}
.qr-code-container {
display: flex;
flex-direction: column;
align-items: center; /* Zentriert QR-Code und Beschriftung */
justify-content: center;
}
.qr-code {
width: 9vh;
height: 9vh;
display: block;
margin: 0 auto;
}
.qr-code-description {
margin-top: 5px;
font-size: 16px;
text-align: center;
color: var(--qrcode-description-color);
}
.left-container {
position: relative;
width: 70%;
box-sizing: border-box;
padding: 15px;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.left-container .block {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 15px;
box-shadow: var(--shadow-global);
background-color: var(--container-fullheightbackground-color);
z-index: 1;
}
.text-content {
text-align: center;
flex-grow: 1;
color: var(--headertext-color);
font-family: "Orbitron", sans-serif;
font-size: 2.1vh;
margin-bottom: 0;
padding: 0 10px;
line-height: 1.2;
}
.logo-container-left, .logo-container-right {
position: absolute;
top: 10px;
z-index: 10;
width: auto !important;
height: 12vh !important;
min-width: 5vw;
max-width: 15vw;
min-height: 6vh;
max-height: 12vh;
background-color: var(--container-logosbackground-color);
padding: 5px;
border-radius: 15px;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
}
.logo-container-left {
left: 10px;
}
.logo-container-right {
right: 10px;
}
.top-ev-logo, .top-ue-logo {
height: auto;
width: auto;
max-widht: 100%;
max-height: 100%;
object-fit: contain;
display: block;
border-radius: 10px;
}
.logo-container-left img,
.logo-container-right img {
width: 100% !important;
height: 100% !important;
object-fit: contain;
object-position: center;
border-radius: 10px;
display: block;
}
.email-address {
font-size: 0.8em;
text-align: center;
max-width: 100%;
}
.top-ev-logo img {
max-height: 100%;
max-width: 100%;
object-fit: contain;
border-radius: 10px;
}
.left-container::before {
display: none;
position: relative;/* */
}
.sponsor-container {
overflow: hidden;
width: 100%;
height: 20%;
margin-top: auto;
display: flex;
align-items: center;
/*justify-content: center;*/
justify-content: flex-end;
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
}
.right-container {
width: 30%;
box-sizing: border-box;
padding: 15px 15px 15px 0px;
overflow-y: auto;
font-family: "Scheherazade", serif, "Amiri", serif, Arial, sans-serif;
font-size: 1.9vw;
line-height: 1.5;
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
user-select: none;
height: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: stretch;
}
.top-right-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 11vh;
min-height: 11vh !important;
max-height: 11vh !important;
border-radius: 15px;
overflow: hidden;
box-sizing: border-box;
z-index: 10;
background-color: var(--container-toprightbackground-color);
color: var(--headertext-color);
box-shadow: var(--shadow-global);
text-align: center;
padding: 5px;
}
.top-right-container #baslik {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
}
.small-line-height {
line-height: 1.2;
display: flex;
flex-direction: column;
gap: 0.3em;
}
.small-line-height p {
margin: 0;
padding: 0;
}
.title {
/*font-style: italic;*/
margin-bottom: 0.2em;
}
.text {
font-style: italic;
margin-bottom: 0.2em;
}
.source {
font-size: 0.5em;
}
.right-container .block {
border-radius: 15px;
box-shadow: var(--shadow-global);
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-sizing: border-box;
position: relative;
overflow: hidden;
background-color: var(--container-fullheightbackground-color);
}
.right-container .block::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('../Image/vhp-background.png');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
border-radius: 15px;
z-index: 0;
opacity: 0.3;
}
.right-container .block > div {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
max-height: 100%;
overflow: hidden;
}
.right-container .block #content {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 4vw;
line-height: 1.2;
overflow: hidden;
}
.Uhrzeit-Anzeige {
flex: 0 0 20%;
font-size: clamp(1rem, min(4.9vw, 15vh), 6.4rem);
font-weight: bold;
color: var(--uhrzeit-color);
min-width: 120px;
user-select: none;
box-shadow: var(--shadow-global);
background: var(--container-uhrzeitbackground-color);
border-radius: 15px;
margin-right: 10px;
margin-bottom: 10px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
overflow: hidden;
text-align: center;
word-break: keep-all;
white-space: nowrap;
line-height: 1;
transition: font-size 0.3s ease;
}
.Uhrzeit-Anzeige {
font-size: 30vh;
background: none;
box-shadow: none;
color: var(--uhrzeit-color);
}
.prayer-times {
display: flex;
gap: 10px;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
height: 100%;
width: 100%;
box-sizing: border-box;
}
.prayer-times-values {
font-size: 4vw;
font-weight: 700;
user-select: none;
color: var(--gebetszeit-color);
word-break: keep-all;
white-space: nowrap;
line-height: 1;
transition: font-size 0.3s ease;
}
.prayer-block {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 5px;
margin-bottom: 10px;
border-radius: 15px;
background: var(--container-gebetszeitenbackground-color);
transition: background-color 0.3s ease;
color: var(--gebetsnamen-color);
white-space: nowrap;
height: 100%;
box-sizing: border-box;
box-shadow: var(--shadow-global);
}
.prayer-block[data-status="aktuelle"] {
background: var(--aktuellezeit-background-color);
}
.prayer-block[data-status="aktuelle"] .prayer-times-values {
color: var(--gebetszeit-color);
}
.prayer-block[data-status="normal"] .prayer-times-values {
color: var(--gebetszeit-color);
/*background: var(--container-gebetszeitenbackground-color);*/
}
.prayer-countdown{
display: flex;
flex-direction: column;
align-items: center;
min-width: 10vw;
max-width: 20vw;
text-align: center;
padding: 5px;
margin-bottom: 10px;
border-radius: 15px;
background: var(--container-gebetszeitenbackground-color);
transition: background-color 0.3s ease;
color: var(--gebetsnamen-color);
white-space: nowrap;
height: 100%;
box-sizing: border-box;
box-shadow: var(--shadow-global);
}
.prayer-times-countdown {
font-size: 4vw;
font-weight: 700;
user-select: none;
color: var(--restlichezeit-color);
word-break: keep-all;
white-space: nowrap;
line-height: 1;
transition: font-size 0.3s ease;
}
.prayer-lang1 {
font-size: 0.9vw;
font-family: "Scheherazade", serif, "Amiri", serif, "Arial", sans-serif;
direction: rtl;
margin-bottom: 0.05em;
user-select: none;
color: var(--gebetsnamen-color);
}
.prayer-lang2 {
font-size: 0.9vw;
margin-bottom: 0.05em;
user-select: none;
color: var(--gebetsnamen-color);
}
.prayer-lang3 {
font-size: 0.9vw;
user-select: none;
color: var(--gebetsnamen-color);
}
.scrolltext-container {
height: 7vh;
min-height: 7vh;
width: 100%;
}
.bottom-container {
height: 6.5vh;
min-height: 6.5vh;
width: 85%;
left: 1%;
background-color: var(--container-scrollerbackground-color);
/*box-shadow: var(--shadow-global);*/
border-radius: 20px 0 0 20px;
overflow: hidden;
position: absolute;
bottom: 5px;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
}
.ue-software-link-container {
height: 6.5vh;
min-height: 6.5vh;
width: 13%;
right: 1%;
background-color: rgba(0, 0, 0, 0.7);
/*box-shadow: var(--shadow-global);*/
border-radius: 0 20px 20px 0;
overflow: hidden;
position: absolute;
bottom: 5px;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
}
.ue-software-link-container {
font-size: 1.1vw;
font-weight: bold;
color: var(--qrcode-description-color);
}
.lauftext {
position: absolute;
white-space: nowrap;
color: var(--scroller-color);
font-family: "Orbitron", sans-serif;
font-size: 2.1vw;
left: 100%;
}
#lauftext1 {
animation: scroll linear infinite;
}
#lauftext2 {
animation: scroll linear infinite;
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-200%);
}
}
.left-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
border-radius: 15px;
overflow: hidden;
z-index: 11;
}
@media (max-width: 600px) {
.right-container {
font-size: 3.2vw;
padding: 15px 10px;
}
.scroll-text {
font-size: 1.5vw;
}
}
.single-sponsor {
max-height: 100%;
max-width: 100%;
object-fit: contain;
border-radius: 20px;
display: block;
margin: 0 auto;
}
.sponsor-track1,
.sponsor-track2 {
display: flex;
gap: 10px;
white-space: nowrap;
position: absolute;
will-change: transform;
animation: scrollTrack linear infinite;
justify-content: flex-start;
z-index: 4;
}
.sponsor-track1 img,
.sponsor-track2 img {
max-height: 100%;
object-fit: contain;
border-radius: 20px;
}
@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;
}
}
/* Boder-Animation
.ue-software-link-container {
position: relative;
height: 6.5vh;
min-height: 6.5vh;
width: 12.8%;
right: 1%;
background-color: var(--container-qrcodesbackground-color);
box-shadow: var(--shadow-global);
border-radius: 20px;
overflow: hidden;
position: absolute;
bottom: 5px;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
font-size: 1.1vw;
font-weight: bold;
color: var(--qrcode-description-color);
}
.ue-software-link-container::before {
content: "";
position: absolute;
inset: 0;
border-radius: 20px;
padding: 5px;
background: linear-gradient(270deg,rgb(17, 17, 231),rgb(245, 253, 3), rgb(17, 17, 231));
background-size: 600% 600%;
z-index: 0;
pointer-events: none;
animation: borderAnimation 5s linear infinite;
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask-composite: exclude;
-webkit-mask-composite: xor;
box-sizing: border-box;
}
.ue-software-link-container > * {
position: relative;
z-index: 1;
}
@keyframes borderAnimation {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
*/