:root{background:#000;color:#fff;--fade-duration:0.9s}
body{margin:0;font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial}
#controls{display:none;position:fixed;left:10px;top:10px;z-index:40;max-width:calc(100% - 20px)}
#controls .form-label{color:#ddd}
#slideshow{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#000}
/* Slides overlap and crossfade by opacity only (no instant visibility toggles) */
#slideshow img,#slideshow video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity var(--fade-duration,0.9s) ease;opacity:0;z-index:1}
#slideshow img{image-orientation:from-image}
#slideshow img.visible,#slideshow video.visible{opacity:1;z-index:2}

.legacy-android,.legacy-android body{width:100vw;height:100vh;margin:0;overflow:hidden;background:#000}
.legacy-android #slideshow{display:flex;align-items:center;justify-content:center;width:100vw;height:100vh;min-width:100vw;min-height:100vh;background:#000;overflow:hidden}
.legacy-android #slideshow img,.legacy-android #slideshow video{position:static;inset:auto;display:none;width:100vw!important;height:100vh!important;max-width:100vw;max-height:100vh;object-fit:cover!important;transition:none;opacity:1;z-index:2;margin:auto}
.legacy-android #slideshow img.visible,.legacy-android #slideshow video.visible{display:block;opacity:1}
.legacy-android .enterfs,.fully-kiosk .enterfs{display:none!important}

/* Ensure both elements overlap and crossfade without exposing background */
#slideshow{background:transparent}

.slide-meta{position:fixed;left:18px;bottom:16px;z-index:5;max-width:min(420px,calc(100vw - 36px));padding:5px 8px;border-radius:6px;background:rgba(0,0,0,0.35);color:rgba(255,255,255,0.78);font-size:13px;line-height:1.25;pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,0.55)}
.slide-meta.d-none{display:none}
.app-version{position:fixed;right:10px;bottom:8px;z-index:31;padding:3px 6px;border-radius:5px;background:rgba(0,0,0,0.35);color:rgba(255,255,255,0.62);font-size:11px;line-height:1.2;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,0.55)}

.debug-panel{position:fixed;left:10px;bottom:10px;z-index:3100;max-width:min(520px,calc(100vw - 20px));padding:7px 9px;border-radius:6px;background:rgba(0,0,0,0.68);color:#dff;font:11px/1.35 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;pointer-events:none}
.debug-panel.d-none{display:none}
.offline-notice{position:fixed;left:50%;top:50%;z-index:3200;transform:translate(-50%,-50%);width:min(520px,calc(100vw - 36px));padding:18px 22px;border-radius:12px;background:rgba(12,16,22,0.92);color:#fff;text-align:center;font-size:16px;line-height:1.35;box-shadow:0 10px 36px rgba(0,0,0,0.48);pointer-events:none}
.offline-notice.d-none{display:none}
.offline-notice-title{font-size:18px;font-weight:750;margin-bottom:6px}
.offline-notice-detail{opacity:0.78}

.slide-nav-feedback{position:fixed;top:0;bottom:0;width:50vw;z-index:30;display:flex;align-items:center;justify-content:center;pointer-events:none;color:rgba(255,255,255,0.78);font-size:clamp(58px,14vw,150px);font-family:Georgia,serif;text-shadow:0 2px 16px rgba(0,0,0,0.55);opacity:0;transition:opacity 180ms ease;background:linear-gradient(90deg,rgba(255,255,255,0.14),rgba(255,255,255,0))}
.slide-nav-feedback.is-prev{left:0;right:auto}
.slide-nav-feedback.is-next{right:0;left:auto;transform:scaleX(-1)}
.slide-nav-feedback.is-visible{opacity:1}
.slide-nav-feedback.d-none{display:none}
.legacy-android .slide-nav-feedback{transition:none;font-size:82px}

/* Loader overlay centered */
.loader-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:2000;pointer-events:none}
.loader-overlay .loader-box{pointer-events:auto;background:rgba(0,0,0,0.6);padding:18px;border-radius:10px}
.loader-overlay.d-none{display:none}
#status,#count{margin-top:6px;font-size:13px}

/* Fullscreen prompt button */
.enterfs{position:fixed;right:16px;top:16px;z-index:3000}
.enterfs.d-none{display:none}
.enterfs #enterFsBtn{padding:6px 10px}

/* Background resize info bar */
.bg-info-bar{position:fixed;right:14px;bottom:14px;z-index:3001;background:rgba(0,0,0,0.6);color:#fff;padding:8px 10px;border-radius:8px;font-size:13px;pointer-events:none;opacity:0.95}
.bg-info-bar.d-none{display:none}

.fs #controls{display:none}
.fs #slideshow{background:#000}

/* Responsive tweaks for small screens */
@media (max-width: 576px){
	#controls{left:8px;right:8px;top:8px;padding:8px}
	#controls .row{align-items:center}
}


.folder-modal-toolbar{background:#f8f9fa}
.folder-list{max-height:60vh;overflow-y:auto;background:#fff}
.folder-empty{padding:24px;text-align:center;color:#6c757d}
.folder-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:9px 14px;border-bottom:1px solid rgba(0,0,0,0.06);cursor:pointer;color:#212529}
.folder-row:hover{background:#f6f8fa}
.folder-row.is-root{background:#eef6ff;font-weight:600}
.folder-row.is-hidden{display:none}
.folder-row .form-check-input{margin:0}
.folder-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.folder-path-muted{color:#6c757d;font-weight:400}
.folder-count{font-size:12px;color:#6c757d;background:#f1f3f5;border-radius:999px;padding:2px 8px;white-space:nowrap}
@media (max-width: 576px){
	.folder-row{grid-template-columns:auto minmax(0,1fr);padding:10px 12px}
	.folder-count{grid-column:2;justify-self:start}
}

#dropboxModalMessage{white-space:pre-line}

.dropbox-pairing{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:16px}
.dropbox-pairing.d-none{display:none}
.dropbox-pair-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:24px;font-weight:700;letter-spacing:1px;color:#111}
.dropbox-pair-qr{width:220px;height:220px;border:1px solid #dee2e6;border-radius:8px;background:#fff;padding:8px}

.config-modal-dialog{max-width:min(760px,calc(100vw - 32px));margin-top:3.5rem;margin-bottom:3.5rem}
.config-modal-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:nowrap}
.config-modal-actions{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.config-modal-actions-main{margin-left:auto}
@media (max-width:560px){
  .config-modal-footer{align-items:stretch;flex-direction:column}
  .config-modal-actions{justify-content:space-between;width:100%;flex-wrap:wrap}
  .config-modal-actions-main{margin-left:0}
  .config-modal-actions .btn{flex:1 1 auto}
}


/* InfoScreen overlay: Rand-Infos ueber der Slideshow */
.info-overlay{position:fixed;inset:0;z-index:20;pointer-events:none}
.info-overlay.d-none{display:none}
/* Nachtmodus-Schwarzblende: über Slideshow+InfoScreen, aber unter dem Settings-Modal
   (z-index 1050+), damit ein Admin den Nachtmodus jederzeit wieder abschalten kann. */
.night-overlay{position:fixed;inset:0;background:#000;z-index:1045;opacity:0;pointer-events:none;transition:opacity .8s ease}
.night-overlay.on{opacity:1;pointer-events:auto}

/* Ansage/Nachricht aus der Fernwartung: oben mittig, über der Slideshow, unter der Nacht-Blende */
.announcement-bar{position:fixed;top:0;left:50%;transform:translateX(-50%);max-width:min(90vw,900px);margin-top:14px;z-index:1044;padding:10px 20px;border-radius:10px;background:rgba(20,22,26,0.9);color:#fff;font-size:clamp(15px,2.4vw,22px);line-height:1.3;text-align:center;box-shadow:0 4px 18px rgba(0,0,0,0.45);border:1px solid rgba(255,255,255,0.14);text-shadow:0 1px 2px rgba(0,0,0,0.5)}
.announcement-bar.level-warn{background:rgba(120,80,10,0.92);border-color:rgba(255,196,0,0.45)}
.announcement-bar.level-alert{background:rgba(130,20,20,0.92);border-color:rgba(255,90,90,0.5)}

.info-panel{position:fixed;padding:12px 16px;border-radius:12px;background:rgba(0,0,0,0.42);color:rgba(255,255,255,0.92);text-shadow:0 1px 3px rgba(0,0,0,0.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);max-width:min(340px,42vw)}
.info-panel-title{font-size:12px;text-transform:uppercase;letter-spacing:1px;opacity:0.7;margin-bottom:4px}
.info-panel-body{font-size:15px;line-height:1.35}
.info-placeholder{opacity:0.55;font-style:italic}
.info-event{display:flex;align-items:baseline;margin-bottom:3px;white-space:nowrap;overflow:hidden}
.info-event-when{opacity:0.7;font-size:0.85em;flex:none}
.info-event-sep{opacity:0.5;padding:0 5px;flex:none}
.info-event-title{min-width:0;overflow:hidden;text-overflow:ellipsis}
.info-event-end{flex:none;opacity:0.7}
.info-event-dot{display:inline-block;width:0.6em;height:0.6em;border-radius:50%;margin-right:5px;vertical-align:baseline}
/* Termine-Detail-Modal (breit, ausgeschriebene Termine der naechsten 14 Tage) */
.events-detail-card{max-width:min(560px,92vw);text-align:left}
.events-detail-list{max-height:70vh;overflow-y:auto;margin-top:8px}
.events-detail-row{display:flex;align-items:baseline;gap:8px;padding:7px 2px;border-bottom:1px solid rgba(255,255,255,0.12)}
.events-detail-when{flex:0 0 auto;opacity:0.8;font-variant-numeric:tabular-nums;min-width:6.8em}
.events-detail-title{flex:1 1 auto;word-break:break-word}
/* Widget-Groesse ueber Skalierungsfaktoren (per Einstellungen live steuerbar) */
:root{--info-scale-clock:1;--info-scale-weather:1;--info-scale-events:1;--info-scale-place:1}
/* Termine: links unten (waechst nach oben-rechts, bleibt an der Ecke). Breite begrenzt und
   niedrigerer z-index, damit die Liste niemals Uhr/Ort in der Mitte ueberdeckt. */
.info-panel-events{left:18px;bottom:20px;transform:scale(var(--info-scale-events));transform-origin:left bottom;max-width:min(340px,34vw);z-index:19;pointer-events:auto;cursor:pointer}
/* Uhrzeit: unten mittig */
.info-panel-time{left:50%;bottom:20px;transform:translateX(-50%) scale(var(--info-scale-clock));transform-origin:center bottom;text-align:center;width:max-content;z-index:22}
.info-clock{font-size:clamp(40px,7vw,72px);font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.info-date{font-size:15px;opacity:0.8;margin-top:4px}
/* Aufnahmeort: eigenes Widget, oben rechts, eigener Größenfaktor.
   Das Panel selbst bleibt transparent; die Box sitzt am inneren Element, damit sie bei
   leerem Ort (kein GPS) komplett verschwindet – gleicher Look wie Wetter/Kalender. */
.info-panel-place{right:18px;top:18px;transform:scale(var(--info-scale-place));transform-origin:right top;text-align:right;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0;max-width:min(70vw,520px);z-index:22}
.info-photo-place{display:inline-block;font-size:15px;padding:8px 14px;border-radius:12px;background:rgba(0,0,0,0.42);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.info-photo-place:empty{display:none}
/* In der Einstellungs-Vorschau einen Platzhalter zeigen, damit der Größenregler etwas zum Skalieren hat */
body.info-preview .info-photo-place:empty{display:inline-block}
/* Kalender-Farbwähler in den Einstellungen schmal halten (~1 cm) */
.calendar-entry .cal-color{flex:0 0 36px !important;width:36px !important;min-width:0 !important;padding:2px}
body.info-preview .info-photo-place:empty::before{content:"Aufnahmeort";opacity:0.55;font-style:italic}
/* Wetter: rechts unten (waechst nach oben-links, bleibt an der Ecke) */
.info-panel-weather{right:18px;bottom:20px;text-align:right;transform:scale(var(--info-scale-weather));transform-origin:right bottom;pointer-events:auto;cursor:pointer;width:max-content;max-width:min(240px,30vw);padding:10px 12px}
.wx-current{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.wx-main{display:flex;align-items:flex-start;justify-content:flex-end;gap:8px;line-height:1.15}
.wx-icon{width:clamp(28px,5vw,44px);height:clamp(28px,5vw,44px);flex:0 0 auto}
.wx-icon .wx-svg{width:100%;height:100%;display:block}
.wx-text{text-align:right}
.wx-temp{font-size:clamp(28px,5vw,44px);font-weight:600;line-height:1}
.wx-desc{font-size:14px;opacity:0.9}
.wx-place{font-size:12px;opacity:0.6}
/* Legacy-Android (Android <=7) WebView kennt kein clamp()/min()/max() -> diese Regeln
   werden dort verworfen, wodurch z.B. .wx-icon auf width:auto faellt (riesiges SVG) und
   Panels keine max-width bekommen. Feste Pixel-Fallbacks fuer diese Geraete. */
.legacy-android .wx-icon{width:40px;height:40px}
.legacy-android .wx-temp{font-size:40px}
.legacy-android .info-clock{font-size:60px}
.legacy-android .info-panel-weather{max-width:240px}
.legacy-android .info-panel-events{max-width:320px}
.legacy-android .info-panel-place{max-width:420px}
.legacy-android .slide-nav-feedback{font-size:96px}
.legacy-android .wx-detail-card{min-width:440px}
/* Wetter-Detail-Overlay */
.wx-detail{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.6);pointer-events:auto}
.wx-detail.d-none{display:none}
.wx-detail-card{position:relative;background:rgba(20,24,30,0.96);color:#fff;border-radius:16px;padding:22px 26px;min-width:min(440px,90vw);max-width:90vw;box-shadow:0 10px 40px rgba(0,0,0,0.5)}
.wx-detail-close{position:absolute;top:10px;right:14px;background:none;border:none;color:#fff;font-size:26px;line-height:1;cursor:pointer;opacity:0.7}
.wx-detail-close:hover{opacity:1}
.wx-detail-head{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.wx-icon-lg{width:72px;height:72px}
.wx-detail-temp{font-size:44px;font-weight:600;line-height:1}
.wx-detail-desc{font-size:16px;opacity:0.9}
.wx-detail-place{font-size:13px;opacity:0.6}
.wx-detail-stats{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:18px;font-size:14px}
.wx-detail-stats .wx-stat{opacity:0.85}
.wx-detail-stats .wx-stat b{opacity:1;font-weight:600}
.wx-detail-title{font-size:12px;text-transform:uppercase;letter-spacing:1px;opacity:0.6;margin-bottom:8px}
.wx-forecast{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.wx-fc-day{background:rgba(255,255,255,0.06);border-radius:12px;padding:10px 8px;text-align:center}
.wx-fc-day .wx-fc-name{font-size:13px;opacity:0.8;margin-bottom:4px}
.wx-fc-day .wx-icon{width:38px;height:38px;margin:0 auto 4px}
.wx-fc-temps{font-size:14px}
.wx-fc-temps .wx-fc-max{font-weight:600}
.wx-fc-temps .wx-fc-min{opacity:0.6;margin-left:4px}
.wx-fc-prec{font-size:12px;opacity:0.7;color:#7fbfff;margin-top:2px}
@media (max-width:576px){
  .info-panel{max-width:44vw;padding:8px 10px}
  .info-panel-events{left:10px;bottom:12px}
  .info-panel-weather{right:10px;bottom:12px}
  .info-panel-time{bottom:96px}
  .info-panel-place{right:10px;top:10px;max-width:70vw}
}


/* Live-Vorschau: Info-Overlay ueber den Modal-Backdrop heben, Backdrop durchsichtiger */
body.info-preview .modal-backdrop.show{opacity:0.35}
body.info-preview .info-overlay{z-index:1052}

/* Widget-Zeile: Checkbox links, Groessenregler rechts */
.info-widget-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px}
.info-widget-row .form-check{margin:0}
.info-widget-size{display:flex;align-items:center;gap:8px;flex:0 0 46%;max-width:230px}
.info-widget-size-label{font-size:11px;color:#6c757d;line-height:1}
.info-widget-size .form-range{margin:0}
@media (max-width:576px){
  .info-widget-size{flex-basis:40%}
}

/* Aufklappbare Bereiche (Wetter/Kalender) via native <details> */
.info-sections{margin-top:4px}
.info-section{border:1px solid #dee2e6;border-radius:8px;margin-bottom:8px;overflow:hidden}
.info-section-summary{
  list-style:none;cursor:pointer;padding:10px 12px;font-weight:600;
  display:flex;align-items:center;gap:8px;user-select:none;background:#f8f9fa;
}
.info-section-summary::-webkit-details-marker{display:none}
.info-section-summary::before{
  content:'';flex:0 0 auto;width:0;height:0;
  border-left:6px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent;
  transition:transform .15s ease;opacity:.7;
}
.info-section[open] > .info-section-summary::before{transform:rotate(90deg)}
.info-section-body{padding:12px}

/* Kopf: aktuell konfiguriertes Gerät */
.config-active-device{display:flex;align-items:center;gap:8px;padding:10px 16px;background:#f1f5f9;border-bottom:1px solid #e2e8f0}
.config-active-device-label{font-size:13px;color:#64748b}
.config-active-device-name{font-size:20px;font-weight:700;color:#0f172a}
.config-active-device.is-remote{background:#fff7ed}
.config-active-device.is-remote .config-active-device-name{color:#c2410c}

/* Geräteliste in der Fernwartung */
.admin-device-list{display:flex;flex-direction:column;gap:8px}
.admin-device-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border:1px solid #e2e8f0;border-radius:10px;background:#fff}
.admin-device-row .adr-main{flex:1 1 180px;min-width:0;display:flex;align-items:center;gap:10px;cursor:pointer}
.admin-device-row .adr-main:hover .adr-name{text-decoration:underline}
.admin-device-row:hover{border-color:#cbd5e1}
.admin-device-row .adr-name{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.admin-device-row .adr-self{font-size:12px;color:#64748b;font-weight:400}
.admin-device-row .adr-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.admin-device-row .adr-cmd-wrap{position:relative}
.admin-device-row .adr-cmd-toggle{white-space:nowrap}
.admin-device-row .adr-cmd-caret{display:inline-block;transition:transform .15s ease}
.admin-device-row .adr-cmd-wrap.open .adr-cmd-caret{transform:rotate(90deg)}
.admin-device-row .adr-cmds{position:absolute;z-index:30;top:calc(100% + 4px);right:0;display:none;flex-direction:column;gap:4px;padding:8px;background:#fff;border:1px solid #cbd5e1;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,0.18);min-width:170px}
.admin-device-row .adr-cmds.open{display:flex}
.admin-device-row .adr-cmds .btn{width:100%;text-align:left}
.admin-device-row .adr-remove{flex:0 0 auto}
.admin-device-seen{font-size:12px;color:#64748b;white-space:nowrap}

.ios-install-modal .modal-body{font-size:15px}
.ios-install-steps{display:flex;flex-direction:column;gap:10px}
.ios-install-step{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start;padding:10px;border:1px solid #e9ecef;border-radius:8px;background:#f8f9fa;color:#212529}
.ios-install-step-icon{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:999px;background:#0d6efd;color:#fff;font-weight:700;line-height:1}

/* Hinweis im Einstellungen-Dialog, wenn die Foto-Bibliothek sehr gross / der Scan gekappt ist. */
.cfg-warning{margin-top:8px;padding:10px 12px;border:1px solid #f5c26b;border-left:4px solid #e0a106;border-radius:8px;background:#fff8e6;color:#7a4f00;font-size:13px;line-height:1.4}