:root{color-scheme:dark;font-family:"Segoe UI",Arial,sans-serif;color:#f6f7f3;background:#142a26;font-synthesis:none;--muted:#c0cbc6;--accent:#c9e2b6;--wood:#c8a581;--wood-border:rgba(200,165,129,.4)}
*{box-sizing:border-box}body{margin:0;min-height:100vh;overflow:hidden;cursor:none}a{color:inherit;text-decoration:none}a:focus-visible{outline:2px solid var(--accent)}
.scenery,.photo,.shade{position:fixed;inset:0;pointer-events:none}.scenery{background:linear-gradient(135deg,#183a34,#3b6551 55%,#192e31)}.photo{background-size:cover;background-position:center;opacity:0;transition:opacity var(--background-fade,5s) cubic-bezier(.4,0,.2,1)}.photo.visible{opacity:1}.photo.blending{will-change:opacity}.shade{background:linear-gradient(90deg,rgba(7,23,20,.77),rgba(7,23,20,.24) 72%),linear-gradient(0deg,rgba(6,18,17,.65),transparent 70%)}
.dashboard{position:relative;width:100%;margin:auto;height:100vh;min-height:100vh;padding:4.5vh 4.2vw 2.6vh;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;column-gap:5vw;row-gap:3.4vh}.topbar{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;transform:translateY(-1.4vh)}.brand{display:flex;align-items:center;gap:1.5vw;font-size:clamp(12px,1vw,44px);letter-spacing:.18em;font-weight:600}.brand-mark{display:block;flex-shrink:0;padding:clamp(10px,.52vw,20px) clamp(14px,.73vw,28px)}.brand-mark img{display:block;width:clamp(160px,12vw,576px);height:auto}.brand-divider{height:clamp(28px,1.46vw,56px);width:1px;background:#ffffff50}
.welcome{align-self:center;padding:2vh 0 2.5vh;min-width:0}.eyebrow{font-size:clamp(12px,1.04vw,48px);font-weight:600;letter-spacing:.18em;color:var(--accent)}.welcome .eyebrow{display:flex;align-items:center;gap:14px}.eyebrow>span{width:1.56vw;min-width:30px;height:2px;background:var(--accent)}h1{font-size:clamp(56px,5.9vw,284px);line-height:1.06;font-weight:350;letter-spacing:-.045em;margin:2.4vh 0}h1 strong{font-weight:700}.welcome p{font-size:clamp(16px,1.35vw,60px);color:#e2e9e2;margin:2.5vh 0 0;line-height:1.5}
.weather-panel{grid-column:1/-1;background:rgba(12,29,27,.75);border:1px solid #d9eddf35;border-radius:6px;padding:2.5vh 2vw 1.5vh}.weather-top{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:2vh}h2{font-size:clamp(18px,1.35vw,64px);font-weight:600;margin:0}h2 span{font-size:.75em;color:var(--muted);font-weight:400;margin-left:1.2vw}#weather-status{font-size:clamp(11px,.85vw,40px);color:var(--muted);margin:0}.weather-grid{display:grid;grid-template-columns:1.17fr 3fr;gap:2vw}.current{display:flex;align-items:center;gap:1.1vw;border-right:1px solid #d9eddf30;padding-right:1vw}.current-main{display:flex;align-items:center;gap:.8vw}#temperature{font-size:clamp(36px,3.4vw,164px);letter-spacing:-.055em;white-space:nowrap}#temperature small{font-size:.4em;letter-spacing:0;margin-left:5px}.current-caption{display:flex;flex-direction:column;gap:10px}.current-caption strong{font-size:clamp(15px,1.08vw,52px);font-weight:500}.current-caption>span{font-size:clamp(11px,.85vw,40px);color:var(--muted)}.forecast{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1vw}.forecast-day{text-align:center;border-right:1px solid #d9eddf18;padding:0 .45vw}.forecast-day:last-child{border:0}.day-label{font-size:clamp(15px,1.1vw,52px);font-weight:600}.day-date{font-size:.78em;color:var(--muted);margin-left:6px;font-weight:400}.weather-icon{display:block;width:3.2vw;height:3.2vw;min-width:34px;min-height:34px;color:#d6e8dc;margin:1vh auto}.weather-icon.large{width:4vw;height:4vw;margin:0}.weather-icon svg{display:block;width:100%;height:100%;overflow:visible}.day-temp{font-size:clamp(18px,1.6vw,76px);font-weight:600}.day-temp span{color:var(--muted);font-size:.8em;font-weight:400;margin-left:10px}.day-condition{font-size:clamp(11px,.83vw,40px);color:var(--muted);margin-top:.6vh;white-space:nowrap}.weather-bottom{margin-top:2vh;padding-top:1.3vh;border-top:1px solid #d9eddf20;display:flex;justify-content:space-between;gap:15px;color:#b5c3bc;font-size:clamp(10px,.72vw,34px)}.weather-bottom>span:last-child{letter-spacing:.13em}footer{grid-column:1/-1;display:flex;justify-content:space-between;color:#dee7df;font-size:clamp(11px,.75vw,40px)}footer>span:first-child{display:flex;gap:12px;align-items:center}.footer-line{width:26px;height:1px;background:var(--accent)}.noscript{position:fixed;top:15px;background:#142a26;padding:20px}.stale{color:#f1ce96!important}
/* Wetter: Grün betont aktuelle Temperatur und Tageshöchstwerte;
   Holzbraun hilft bei der zeitlichen Orientierung. Tiefstwerte bleiben zurückhaltend. */
.weather-panel #temperature,.weather-panel .day-temp{color:var(--accent)}
.weather-panel #temperature small{color:var(--muted)}
.weather-panel .day-label{color:var(--wood)}
/* Dauerhafte Zeitanzeige: ruhige Typografie und warmer Eichenholz-Akzent. */
.header-time{display:flex;align-items:center;gap:1.35vw;flex-shrink:0;font-variant-numeric:tabular-nums}
.header-time #clock{font-size:clamp(36px,3.1vw,132px);font-weight:350;line-height:1;letter-spacing:.015em;white-space:nowrap;color:#f6f7f3}
.header-calendar{display:flex;flex-direction:column;justify-content:center;gap:.65vh;padding-left:1.35vw;border-left:1px solid var(--wood-border);white-space:nowrap;text-align:left}
.header-calendar #weekday{font-size:clamp(11px,.8vw,36px);letter-spacing:.17em;font-weight:600;color:var(--wood)}
.header-calendar #date{font-size:clamp(15px,1.12vw,48px);font-weight:400;color:#e2e9e2}
.welcome .eyebrow,.birthday-card .eyebrow{color:var(--wood)}
.welcome .eyebrow>span{background:var(--wood)}
@media(max-width:900px){.header-time{gap:14px}.header-calendar{padding-left:14px;gap:5px}.header-time #clock{font-size:36px}.header-calendar #date{font-size:14px}.topbar{flex-wrap:wrap;row-gap:18px}}
/* Nur dieser Bereich rotiert; Kopf-/Fußzeile und Wallpaper sind unabhängig. */
.slides{display:grid;min-width:0;min-height:0;overflow:hidden;position:relative}
:root{--free-text-shadow:0 clamp(1px,.052vw,2px) clamp(4px,.26vw,10px) rgba(0,0,0,.5)}
.slide{grid-area:1/1;min-width:0;min-height:0;width:100%;height:100%;text-shadow:var(--free-text-shadow)}
/* Geschützte Textflächen brauchen keinen Schatten; Header/Footer liegen außerhalb. */
.weather-panel,.birthday-card,.slide-box{text-shadow:none}
.slide[hidden]{display:none!important}
.slide-dashboard{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;column-gap:5vw;row-gap:3.4vh}
.slide-content{display:flex;flex-direction:column;justify-content:center;gap:2vh;padding:2vh 0}
.slide-birthday{display:grid;place-items:center;padding:2vh 0}
.birthday-card{width:min(100%,78vw);padding:5vh 4vw;text-align:center;background:rgba(12,31,28,.76);border:1px solid #d9eddf35;border-radius:6px;-webkit-backdrop-filter:blur(var(--panel-blur));backdrop-filter:blur(var(--panel-blur))}
.birthday-title{font-size:clamp(30px,3.2vw,140px);line-height:1.2;font-weight:350;letter-spacing:-.025em;margin:2.5vh 0}
.birthday-title strong{display:block;font-size:clamp(42px,5.2vw,220px);font-weight:700;letter-spacing:-.04em;margin-top:1vh;color:var(--accent)}
.birthday-card p{font-size:clamp(16px,1.5vw,64px);line-height:1.65;margin:2.5vh 0;color:#e2e9e2}
.birthday-signature{font-size:clamp(14px,1.1vw,48px);color:var(--wood);margin-top:3vh}
@media(max-width:900px){.birthday-card{width:100%;padding:30px 20px}.birthday-card br{display:none}.birthday-title strong{overflow-wrap:anywhere}}
.slide-media{display:grid;place-items:center}
/* Weihnachtsfeier: drei Menüs und Countdown als direkte Slide-Kinder,
   damit die Glasflächen ihren Blur auch während der Animation behalten. */
.slide-christmas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto;align-content:center;gap:3vh 1.6vw;padding:.6vh 0}
.christmas-intro{grid-column:1/span 2;align-self:center;min-width:0}
.christmas-intro .eyebrow{color:var(--wood);font-size:clamp(11px,.88vw,38px)}
.christmas-intro h2{font-size:clamp(32px,3.6vw,156px);font-weight:600;line-height:1.1;letter-spacing:-.035em;margin:1.1vh 0}
.christmas-intro h2 span{font-size:1em;color:var(--accent);font-weight:350;margin-left:.3em}
.christmas-intro p{font-size:clamp(14px,1.12vw,48px);line-height:1.5;margin:1.2vh 0;color:#e2e9e2}
.christmas-details{display:flex;gap:2.5vw;margin-top:1.6vh;font-size:clamp(13px,1.03vw,44px);line-height:1.45}
.christmas-details>div{display:flex;flex-direction:column;gap:.25vh}
.christmas-details strong,.christmas-details time{font-weight:600}
.christmas-details>div>span:last-child:not(.event-label){color:var(--muted)}
.event-label{font-size:clamp(10px,.78vw,34px);font-weight:600;letter-spacing:.14em;color:var(--wood)}
.event-countdown,.menu-card{background:rgba(12,31,28,.78);border:1px solid #d9eddf35;border-radius:6px;-webkit-backdrop-filter:blur(var(--panel-blur));backdrop-filter:blur(var(--panel-blur))}
.event-countdown{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9vh;padding:1.8vh 1.4vw;text-align:center}
.event-countdown>[data-countdown-value]{font-size:clamp(48px,5.4vw,228px);line-height:1.05;font-weight:600;letter-spacing:-.04em;color:var(--accent);font-variant-numeric:tabular-nums}
.event-countdown>[data-countdown-caption]{font-size:clamp(14px,1.12vw,48px);line-height:1.4;color:#e2e9e2}
.menu-card{min-width:0;min-height:0;padding:1.7vh 1.6vw;display:flex;flex-direction:column}
.menu-card h3{font-size:clamp(18px,1.45vw,62px);font-weight:500;color:var(--accent);margin:.8vh 0 1vh;line-height:1.2}
.menu-card dl{display:flex;flex-direction:column;justify-content:space-around;flex:1;margin:0;gap:.7vh}
.menu-card dl>div{border-top:1px solid #d9eddf20;padding-top:.8vh}
.menu-card dt{font-size:clamp(10px,.75vw,32px);color:var(--wood);letter-spacing:.07em}
.menu-card dd{font-size:clamp(13px,1.02vw,44px);line-height:1.4;margin:.35vh 0 0;color:#edf1ea}
.christmas-note{grid-column:1/-1;display:flex;gap:2vw;font-size:clamp(16px,1.2vw,48px);line-height:1.4;color:var(--wood)}
.christmas-note strong{color:var(--wood);font-weight:500}
@media(max-width:900px){.slide-christmas{grid-template-columns:1fr;grid-template-rows:auto;gap:18px;height:auto}.christmas-intro{grid-column:1}.christmas-details{flex-direction:column;gap:12px}.event-countdown,.menu-card{padding:22px}.christmas-note{flex-direction:column;gap:8px}.menu-card dl{gap:12px}}
.slide iframe,.slide video{max-width:100%;max-height:100%;border:0}
.slide-media>iframe,.slide-media>video{width:100%;height:100%}
/* Am Slide nur Bewegung animieren: opacity/will-change:opacity würden den Blur
   seiner Boxen vom Wallpaper abschneiden (Backdrop-Root). */
.slide.is-entering{z-index:2;animation:slide-in var(--slide-transition,900ms) cubic-bezier(.22,.61,.36,1) both;will-change:transform;pointer-events:none}
.slide.is-leaving{z-index:1;animation:slide-out var(--slide-transition,900ms) cubic-bezier(.4,0,.2,1) both;will-change:transform}
/* Flächen inklusive ihres eigenen Backdrop-Blurs zusammen ein-/ausblenden. */
.slide.is-entering>*{animation:slide-content-in var(--slide-transition,900ms) cubic-bezier(.22,.61,.36,1) both}
.slide.is-leaving>*{animation:slide-content-out var(--slide-transition,900ms) cubic-bezier(.4,0,.2,1) both}
/* Zwei aufeinanderfolgende Phasen: erst hinaus, dann hinein. Keine Textüberlagerung. */
@keyframes slide-in{0%,50%{transform:translateX(var(--slide-entry,5vw))}100%{transform:translateX(0)}}
@keyframes slide-out{0%{transform:translateX(0)}50%,100%{transform:translateX(var(--slide-exit,-5vw))}}
@keyframes slide-content-in{0%,50%{opacity:0}100%{opacity:1}}
@keyframes slide-content-out{0%{opacity:1}50%,100%{opacity:0}}
@media(min-aspect-ratio:2/1){.welcome{padding:1vh 0}h1{font-size:9vh}}
@media(max-width:900px){body{overflow:auto;cursor:auto}.dashboard{height:auto;grid-template-columns:1fr;padding:25px;gap:26px}.slide-dashboard{grid-template-columns:1fr;grid-template-rows:auto;gap:26px}.topbar{gap:15px}.brand{gap:12px}.brand>span:last-child{display:none}.welcome{padding:20px 0 0}h1{font-size:64px}.weather-top{display:block}.weather-top p{margin-top:12px!important}h2 span{display:block;margin:8px 0}.weather-grid{grid-template-columns:1fr;gap:24px}.current{border-right:0;border-bottom:1px solid #d9eddf30;padding-bottom:20px;gap:20px}.forecast{gap:4px}.day-date{display:block;margin:5px 0}.weather-icon{width:40px;height:40px}.weather-icon.large{width:60px;height:60px}.day-temp span{display:block;margin:4px 0}.day-condition{white-space:normal}.weather-bottom>span:last-child{display:none}}
/* Nur den Hintergrund weichzeichnen; Schrift und Symbole bleiben scharf. */
:root{--panel-blur:clamp(6px,.3125vw,12px);--header-blur:clamp(8px,.4167vw,16px)}
.weather-panel{-webkit-backdrop-filter:blur(var(--panel-blur));backdrop-filter:blur(var(--panel-blur))}
/* Der maskierte Blur mischt sich nach unten zunehmend mit dem scharfen Wallpaper. */
.shade::before{content:"";position:absolute;inset:0 0 auto;height:clamp(160px,21vh,560px);-webkit-backdrop-filter:blur(var(--header-blur));backdrop-filter:blur(var(--header-blur));-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 20%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 20%,transparent 100%)}
/* Dunkelgrüne Header-Vignette: bis unter die Kopfzeile kräftig, danach transparent. */
.shade::after{content:"";position:absolute;inset:0 0 auto;height:clamp(160px,21vh,560px);background:linear-gradient(to bottom,rgba(20,42,38,.86) 0%,rgba(20,42,38,.76) 45%,rgba(20,42,38,0) 100%)}
@media(prefers-reduced-motion:reduce){.photo{transition:none}}
/* Desktop-Steuerung: absolut positioniert, ohne Einfluss auf das bestehende Raster. */
.topbar{position:relative}
.slides[data-direction="backward"]{--slide-entry:-5vw;--slide-exit:5vw}
.keyboard-hint{position:absolute;left:59%;top:50%;transform:translate(-50%,-50%);display:none;white-space:nowrap;text-align:center;font-size:clamp(10px,.68vw,30px);color:var(--muted);line-height:1.8}
.keyboard-hint.is-paused{display:block}
.keyboard-help{display:block}.key-separator{margin:0 .35em}
kbd{font:inherit;font-size:.95em;display:inline-block;padding:0 .4em;min-width:1.8em;line-height:1.5;text-align:center;border:1px solid #c9e2b64d;border-radius:.25em;background:#142a266b;color:#edf3e9}
.pause-label{display:block;color:var(--accent);font-weight:600;letter-spacing:.08em}
.pause-label[hidden],.debug-overlay[hidden],.debug-overlay [hidden]{display:none}
.debug-overlay{position:fixed;z-index:50;right:4.2vw;bottom:7vh;width:clamp(310px,26vw,1000px);padding:1.3vw 1.5vw;border:1px solid #c9e2b66b;border-radius:8px;background:rgba(12,29,27,.94);backdrop-filter:blur(12px);box-shadow:0 10px 40px #0005;font-size:clamp(12px,.85vw,36px);color:#f0f4ec}
.debug-heading{display:flex;justify-content:space-between;gap:1em;color:var(--accent);font-size:.78em;letter-spacing:.08em}
.debug-heading span{color:var(--wood);white-space:nowrap;letter-spacing:0}
.debug-overlay dl{margin:1em 0 .6em}.debug-overlay dl>div{display:flex;justify-content:space-between;gap:1em;margin:.35em 0}
.debug-overlay dt{color:var(--muted)}.debug-overlay dd{margin:0;text-align:right}
.debug-overlay progress{display:block;width:100%;height:.32em;appearance:none;border:0;border-radius:1em;overflow:hidden;background:#c9e2b621;accent-color:var(--accent)}
.debug-overlay progress::-webkit-progress-bar{background:#c9e2b621}.debug-overlay progress::-webkit-progress-value{background:var(--accent)}.debug-overlay progress::-moz-progress-bar{background:var(--accent)}
.debug-image{margin-top:1em;padding-top:.7em;border-top:1px solid #c9e2b633}.debug-image>span{display:block;color:var(--wood);font-size:.85em}.debug-image code{display:block;margin-top:.3em;font-size:.9em;overflow-wrap:anywhere}
html.is-paused body,html.is-paused body *{cursor:auto}
#photo-credit{max-width:88%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color: var(--muted);}
/* Explizite Kanten als Fallback für ältere Signage-Webviews ohne inset-Shorthand. */
.scenery,.photo,.shade{top:0;right:0;bottom:0;left:0}
.shade::before,.shade::after{top:0;right:0;bottom:auto;left:0}
/* Samsung/Tizen: Header-Pixel mit Alpha-Auslauf statt maskierter GPU-Backdrop-Ebene. */
.header-photo-blur{display:block;position:absolute;top:0;right:0;left:0;width:100%;height:21vh;pointer-events:none}
.tv-samsung .shade::before{display:none;-webkit-backdrop-filter:none;backdrop-filter:none;-webkit-mask-image:none;mask-image:none}
.tv-samsung .shade::after{height:21vh;background:linear-gradient(to bottom,rgba(20,42,38,.86) 0%,rgba(20,42,38,.76) 45%,rgba(20,42,38,0) 100%)}
.tv-samsung .topbar{-webkit-backdrop-filter:none;backdrop-filter:none}
.tv-samsung .weather-panel,.tv-samsung .birthday-card,.tv-samsung .slide-box{-webkit-backdrop-filter:blur(var(--panel-blur));backdrop-filter:blur(var(--panel-blur));background:rgba(12,29,27,.75)}
/* minmax(0, …) verhindert, dass intrinsische Textbreiten Grid-Spalten aufziehen.
   Ein kleiner Innenabstand schützt Rahmen vor Subpixel-Clipping bei der Animation. */
.tv-samsung .dashboard{max-width:100%;box-sizing:border-box}
.tv-samsung .slides{padding-left:2px;padding-right:2px;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.tv-samsung .slide{width:auto;max-width:100%;justify-self:stretch}
.tv-samsung .weather-panel,.tv-samsung .event-countdown,.tv-samsung .menu-card,.tv-samsung .birthday-card{box-sizing:border-box;min-width:0;max-width:100%;border:1px solid rgba(217,237,223,.21);box-shadow:none}
.tv-samsung .weather-panel{width:100%}
.tv-samsung .weather-grid{grid-template-columns:minmax(0,1.17fr) minmax(0,3fr)}
.tv-samsung .weather-grid>*,.tv-samsung .forecast-day,.tv-samsung .current-caption,.tv-samsung .weather-top>h2{min-width:0}
.tv-samsung .current-caption{overflow-wrap:break-word}
.tv-samsung .day-condition{white-space:normal}
/* Optionaler Slide-Timer, über dem Layout direkt am unteren Bildschirmrand. */
.slide-progress{position:fixed;z-index:40;left:0;right:0;bottom:0;height:clamp(4px,.16vw,6px);overflow:hidden;pointer-events:none;background:rgba(201,226,182,.05)}
.slide-progress[hidden]{display:none}
.slide-progress>span{display:block;width:100%;height:100%;background:rgba(201,226,182,.25);transform:scaleX(0);transform-origin:left center}
/* Heute-Kopfzeile auf derselben Höhe und im Stil der Vorhersagetage. */
.current{flex-direction:column;align-items:stretch;gap:0}
.current-day{text-align:center}
.current-body{display:flex;flex:1;align-items:center;justify-content:center;gap:1.1vw;min-width:0}
.current-extremes{display:flex;justify-content:center;gap:1.2em;margin-top:.4vh;font-size:clamp(13px,1.05vw,48px);line-height:1.35;color:var(--muted)}
.current-extremes strong{font-weight:500}
#current-high{color:var(--accent);font-weight:600}
.photo-description-icon{display:inline-block;width:1em;height:1em;margin-right:.45em;vertical-align:-.13em;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}