/* Bisheriges Display-Design: Logo, Uhr und ältere Anzeigeelemente. */ .fontm{font-family:Figtree,Arial,sans-serif;font-weight:400;font-style:normal} .logo{display:flex;background:transparent;flex-direction:row;margin-top:0;z-index:2;padding:4vw;padding-top:3vw} .logoimg{height:12vw;width:12vw;background:transparent;border-radius:50%;overflow:hidden} .logoimg img{object-fit:cover;height:100%;width:100%} .logoname{display:flex;flex-direction:column;height:10vw;margin-top:1.1vw;background:transparent;padding-left:2.2vw} .logoname p:first-child{font-weight:500}.logoname p{font-size:3.8vw;margin:0;color:#f4f4f4;line-height:1.35;font-weight:400} .time{position:absolute;background:linear-gradient(180deg,#1c45bf,#0e1f49);margin-left:75vw;margin-top:5vw;width:auto;text-align:center;z-index:5} .time p{text-align:center;padding:4vw 5vw 1vw 4vw;margin:0;line-height:1.25;font-size:3.8vw;font-weight:500;color:#e4e4e0} html,body{height:100%;margin:0;padding:0;font-family:Arial,Helvetica,sans-serif}body{background:#000;color:#fff;display:flex} .screen{width:100vw;height:100vh;display:flex;position:absolute;align-items:center;justify-content:center;background-size:cover;background-position:center;text-align:center;transition:background .6s ease,opacity .6s ease;overflow:hidden} .overlay{height:100%;width:100%;padding-top:37vh;overflow:hidden}.title{font-size:7vw;font-weight:700;color:#efefef}.count{font-size:20vw;margin:7vh 0 0;font-weight:700;color:#efefef}.sub,.small{font-size:5.5vw;padding:5vw;margin-top:7vh;font-weight:700;color:#efefef}.small{font-size:7vw}.black{background:#000;width:100vw;height:100vh}.overlay p{margin:6px 0}.count .gebet-name-live{font-size:12vw} .zitat{position:absolute;z-index:1;top:0;left:0}.zitat-bg{position:fixed;top:0;right:0;bottom:0;left:0;background:transparent;z-index:0}.zitat-inner{position:relative;z-index:1;width:100%;background:transparent;height:65vh}.zitat-body{margin:20vh 5vw 0;display:flex;flex-direction:column;background:transparent}.zitat-quote{text-align:start;margin:0;font-size:7.2vw;line-height:1.3;color:#fff;font-weight:700;letter-spacing:.01em;background:transparent}.zitat-source{background:transparent;text-align:start;margin:0;font-size:4.2vw;line-height:1.2;color:#fff;font-weight:500;font-style:italic;opacity:1;padding-top:3vh} .image-stundenplan{display:flex;height:100vh;width:100vw;top:0;left:0;position:absolute;overflow:hidden}.image-stundenplan img{width:100vw;height:100vh;object-fit:cover}.cover-next-gebet{display:flex;flex-direction:row;text-align:center;justify-content:center;padding:6vw;margin:2vw;position:absolute;width:83.5vw;top:11vh;background:transparent;border:.3vw solid #e4e4e0}.title-next-gebet p:first-child{font-size:5.5vw;font-weight:700}.title-next-gebet p:nth-child(2){margin-top:0;font-size:5.5vw;font-weight:700}.count-next-gebet p{margin-top:3vh;font-size:8vw;font-weight:700}.day-details-allgemein{margin-left:13vw;margin-top:.5vh}.day-details-allgemein .sunset{margin-bottom:5vh}.day-details-allgemein p{display:flex;align-items:center;font-size:4.5vw;font-weight:700}.day-details-allgemein p img{width:5vw;height:100%;padding-right:3vw}.info-message{position:absolute;top:90%;font-size:3vw;margin-left:5%} /* Aktuelle Gebetsanzeige, Slideshow, Zitate und Kiosk-Effekte. */ /* Existing css/display.css continues to style the logo and live clock. */ html, body { width:100%; height:100%; margin:0; overflow:hidden; } body.prayer-display { background:rgba(0,0,0,0); } body.prayer-display > .logo, body.prayer-display > .time { z-index:20; } #screen.prayer-screen { position:fixed; top:0; right:0; bottom:0; left:0; width:100%; height:100%; margin:0; padding:0; overflow:hidden; background-color:rgba(0,0,0,0); z-index:0; background-position:center; background-size:cover; background-repeat:no-repeat; filter:none; -webkit-filter:none; transform:none; } #screen.prayer-screen:before { content:""; position:absolute; top:-3%; right:-3%; bottom:-3%; left:-3%; background:rgba(0,0,0,.50); /* Filterfreier Kontrast auch auf älteren Displays. */ pointer-events:none; z-index:0; } #screen.prayer-screen:after { content:none; } #screen.prayer-screen #overlay.prayer-panel { position:absolute; top:0; right:0; bottom:auto; left:0; width:100%; height:44vh; margin:0; padding:0; box-sizing:border-box; z-index:2; background:rgba(0,0,0,0); color:#FFFFFF; opacity:1; border:0; border-radius:0; box-shadow:none; text-align:center; text-shadow:none; transform:none; filter:none; -webkit-filter:none; -webkit-backdrop-filter:none; backdrop-filter:none; transition:background-color .45s ease; } #screen.phase-next #overlay.prayer-panel { background:rgba(0,0,0,0); } #screen.phase-countdown #overlay.prayer-panel { background:#0094C8; } #screen.phase-urgent #overlay.prayer-panel { background:#C52E36; } #screen.phase-live #overlay.prayer-panel { background:#1B3617; } #overlay.prayer-panel .prayer-content { width:100%; height:100%; box-sizing:border-box; padding:12vh 4vw 2.6vh; display:flex; flex-direction:column; align-items:center; justify-content:center; } #overlay.prayer-panel p { margin:0; padding:0; font-family:inherit; line-height:1.15; color:inherit; text-shadow:none; } #overlay.prayer-panel .prayer-title { width:100%; margin:0 0 2vh; padding:0; } #overlay.prayer-panel .prayer-title p { font-size:8.2vw; font-weight:600; overflow-wrap:break-word; word-wrap:break-word; } #overlay.prayer-panel .prayer-eyebrow { margin:0 0 1.3vh; } #overlay.prayer-panel .prayer-eyebrow em { font-size:inherit; font-weight:inherit; font-style:italic; } #overlay.prayer-panel .prayer-eyebrow p { font-size:5vw; font-weight:500; font-style:italic; } #overlay.prayer-panel .prayer-time-box { display:inline-block; flex:0 0 auto; width:auto; max-width:92%; margin:0; padding:.1em .26em .13em; box-sizing:border-box; background:#FFFFFF; color:#000000; border:0; border-radius:0; box-shadow:none; text-align:center; line-height:1; font-size:12.4vw; } #overlay.prayer-panel .prayer-time-box p { font-size:inherit; font-weight:800; line-height:1; color:#000000; white-space:nowrap; font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; } #overlay.prayer-panel .prayer-scheduled-box p { font-size:10vw; } #overlay.prayer-panel .prayer-fasting-box { font-size:7.8vw; } #overlay.prayer-panel .prayer-live-box { letter-spacing:.03em; } #overlay.prayer-panel .prayer-note { max-width:90%; margin:1.65vh 0 0; } #overlay.prayer-panel .prayer-note p { font-size:5vw; font-weight:600; line-height:1.4; } @media (orientation:landscape) { #screen.prayer-screen #overlay.prayer-panel { height:58vh; } #overlay.prayer-panel .prayer-content { padding:12vh 4vw 2vh; } #overlay.prayer-panel .prayer-title { margin-bottom:1.5vh; } #overlay.prayer-panel .prayer-title p { font-size:5.2vw; } #overlay.prayer-panel .prayer-time-box { font-size:7.8vw; } #overlay.prayer-panel .prayer-fasting-box { font-size:5.4vw; } #overlay.prayer-panel .prayer-eyebrow p { font-size:2.3vw; } #overlay.prayer-panel .prayer-note { margin-top:1.2vh; } #overlay.prayer-panel .prayer-note p { font-size:1.3vw; } } /* Kompakteres Overlay nur für „Nächstes Gebet“. */ #screen.prayer-screen.phase-next #overlay.prayer-panel { height:36vh; } #screen.prayer-screen.phase-next #overlay.prayer-panel .prayer-content { padding:10vh 4vw 1.8vh; } @media (orientation:landscape) { #screen.prayer-screen.phase-next #overlay.prayer-panel { height:50vh; } #screen.prayer-screen.phase-next #overlay.prayer-panel .prayer-content { padding:8vh 4vw 1.5vh; } } @media (prefers-reduced-motion:reduce) { #screen.prayer-screen #overlay.prayer-panel { transition:none; } } /* Alter Sperrbildschirm: dunkler Hintergrund, großes Logo, Uhr rechts. */ body.prayer-display.display-locked { background:#0F2240; } body.prayer-display.display-locked #screen { display:none; } body.prayer-display.display-locked > .time { margin-left:74vw; } body.prayer-display.display-locked #clock { padding-left:5vw; padding-right:5vw; font-size:4.2vw; } body.prayer-display.display-locked > .logo { margin-left:8vw; margin-top:35vh; } body.prayer-display.display-locked .logoimg { height:13.5vw; width:13.5vw; } body.prayer-display.display-locked .logoname { margin-top:.7vw; padding-left:3vw; } body.prayer-display.display-locked .logoname p { font-size:4.8vw; } /* Zitat/Gebet unter Logo und Uhr; das Foto liegt als Body-Kind über allem. */ body.prayer-display .display-slide { position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; margin:0; padding:0; box-sizing:border-box; overflow:hidden; display:block; z-index:1; opacity:0; visibility:hidden; pointer-events:none; -webkit-transform:scale(1.006); transform:scale(1.006); transform-origin:center; -webkit-transition:opacity 702ms ease, -webkit-transform 702ms ease; transition:opacity 702ms ease, transform 702ms ease; } body.prayer-display .display-slide.is-active { opacity:1; visibility:visible; -webkit-transform:scale(1); transform:scale(1); pointer-events:auto; z-index:2; } body.prayer-display .display-slide.is-leaving { visibility:visible; opacity:0; pointer-events:none; -webkit-transform:scale(1.004); transform:scale(1.004); } body.prayer-display .display-slide.is-instant { -webkit-transition:none; transition:none; } body.prayer-display .image-slide { background:#0F2240; } #screen.prayer-screen .quote-slide { background:#0F2240; } body.prayer-display > .display-slide.photo-slide { position:fixed; z-index:2147483000; width:100vw; height:100vh; } body.prayer-display.display-locked > .photo-slide { visibility:hidden; opacity:0; transition:none; pointer-events:none; } body.prayer-display .slide-image { position:absolute; top:0; left:0; display:block; width:100%; height:100%; margin:0; padding:0; max-width:none; max-height:none; border:0; border-radius:0; object-fit:cover; object-position:center; } #screen.prayer-screen .quote-backdrop { position:absolute; top:0; right:0; bottom:0; left:0; overflow:hidden; pointer-events:none; } #screen.prayer-screen .quote-backdrop:after { content:""; position:absolute; top:0; right:0; bottom:0; left:0; background:linear-gradient(180deg, rgba(8,18,29,.66) 0%, rgba(8,18,29,.20) 35%, rgba(8,18,29,.20) 100%); } /* Canvas-2D-Licht: weiche Sprites statt CSS-filter/backdrop-filter. */ #slide-transition-glow { position:fixed; top:0; right:0; bottom:0; left:0; z-index:2147483100; pointer-events:none; overflow:hidden; opacity:0; visibility:hidden; background:transparent; } #slide-transition-glow.is-running { visibility:visible; opacity:1; } #slide-transition-canvas { position:absolute; top:0; left:0; display:block; width:100%; height:100%; border:0; margin:0; padding:0; } #screen.prayer-screen .quote-layout { position:absolute; top:25vh; right:8vw; bottom:10vh; left:8vw; z-index:2; display:block; min-width:0; min-height:0; text-align:left; } #screen.prayer-screen .quote-text-area { position:absolute; top:0; left:0; right:0; height:74%; display:block; min-height:0; min-width:0; } #screen.prayer-screen .quote-source-area { position:absolute; top:80%; left:0; right:0; height:16%; display:block; min-height:0; min-width:0; margin:0; } #screen.prayer-screen .quote-copy, #screen.prayer-screen .quote-source { display:block; position:static; width:100%; height:auto; min-height:0; max-height:none; margin:0; padding:0; opacity:1; visibility:inherit; transform:none; filter:none; float:none; border:0; font-family:inherit; font-style:normal; text-align:left; line-height:1.44; text-shadow:none; overflow-wrap:anywhere; word-wrap:break-word; word-break:break-word; } #screen.prayer-screen .quote-copy { font-size:8.2vw; font-weight:700; letter-spacing:-.018em; } #screen.prayer-screen .quote-source { position:static; font-size:2.8vw; font-weight:500; line-height:1.5; letter-spacing:0; } #screen.prayer-screen .quote-strip { display:inline; position:static; float:none; width:auto; height:auto; opacity:1; visibility:inherit; filter:none; transform:none; font:inherit; letter-spacing:inherit; text-transform:none; padding:.04em .16em .06em; border-radius:.035em; background:#FFFFFF; color:#000000; -webkit-text-fill-color:#000000; -webkit-box-decoration-break:clone; box-decoration-break:clone; white-space:pre-line; } #screen.prayer-screen .quote-line { display:block; position:static; width:100%; height:auto; margin:0; padding:0; font:inherit; opacity:1; visibility:inherit; animation:quote-line-reveal 650ms cubic-bezier(.16,.8,.2,1) backwards; } #screen.prayer-screen .quote-line .quote-strip { white-space:pre-wrap; } @keyframes quote-line-reveal { from { opacity:.65; transform:translateY(.16em); } to { opacity:1; transform:translateY(0); } } @media (prefers-reduced-motion:reduce) { body.prayer-display .display-slide { transition:none; transform:none; filter:none; } #slide-transition-glow.is-running { animation:none; opacity:0; visibility:hidden; } #screen.prayer-screen .quote-line { animation:none; } } @media (orientation:landscape) { #screen.prayer-screen .quote-layout { top:23vh; right:10vw; bottom:8vh; left:10vw; } #screen.prayer-screen .quote-copy { font-size:5vw; } #screen.prayer-screen .quote-source { font-size:1.8vw; } } body.prayer-display .slide-video{position:absolute;top:0;left:0;width:100%;height:100%;border:0;object-fit:contain;background:#000;pointer-events:none} /* MTA Live belongs to the prayer slide. The iframe stays mounted while the slideshow rotates; only this holder is shown/hidden. */ #slide-prayer .mta-live { position:absolute; left:0; right:0; top:36vh; bottom:0; width:100%; height:64vh; overflow:hidden; background:#000; z-index:1; visibility:hidden; opacity:0; pointer-events:none; } #slide-prayer .mta-live.is-visible { visibility:visible; opacity:1; } #slide-prayer .mta-live-frame { position:absolute; top:0; left:0; width:100%; height:100%; border:0; margin:0; padding:0; background:#000; transform:scale(1.01); transform-origin:center; } @media (orientation:landscape) { #slide-prayer .mta-live { top:50vh; height:50vh; } } body.prayer-display.display-locked #mta-live { display:none !important; }