: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}
/* Abstand als margin, nicht als Leerzeichen im Markup: .info-event ist ein Flex-Container,
   dort wird fuehrender Leerraum im Flex-Item verschluckt (sonst "Urlaub(Fr.)"). */
.info-event-end{flex:none;opacity:0.7;margin-left:5px}
.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}
/* Termine-Detail-Modal: Texte 50% groesser (nur dieses Modal, nicht das Wetter-Detail). */
#eventsDetail .wx-detail-title{font-size:18px}
#eventsDetail .events-detail-list{font-size:1.5em}
/* 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;--info-scale-ha: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}
/* Home-Assistant-Sensorwerte: linkes oberes Eck (dort ist sonst nichts) */
.info-panel-ha{left:18px;top:18px;transform:scale(var(--info-scale-ha));transform-origin:left top;text-align:left;max-width:min(320px,32vw);z-index:22;pointer-events:auto;cursor:pointer}
.info-ha-row{display:flex;justify-content:space-between;gap:14px;font-size:16px;line-height:1.5}
.info-ha-row .info-ha-value{font-weight:600;white-space:nowrap}
/* 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:12px 16px}
/* Balkenmodus: Termine/Uhr/Wetter gemeinsam in einem Balken am unteren Rand statt als
   drei einzelne Panels. Skalierung hier ueber zoom (reserviert Layoutplatz), damit ein
   hochskaliertes Widget nicht aus dem Balken herausragt. Grid mit fest zugewiesenen
   Spalten (nicht Flex), damit die Uhr auch dann exakt mittig bleibt, wenn Termine oder
   Wetter ausgeblendet sind - die leere Spalte behaelt ihren Platz. */
.info-overlay.bar-mode:not(.d-none){display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;top:auto;left:0;right:0;bottom:0;padding:10px 18px}
/* Balkenhintergrund auf einem Pseudo-Element statt auf dem Overlay: backdrop-filter am
   Overlay wuerde es zum Containing Block fuer position:fixed-Kinder machen und den
   Aufnahmeort in den Balken ziehen. */
.info-overlay.bar-mode:not(.d-none)::before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;z-index:-1;background:rgba(0,0,0,0.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
/* Nur die drei Balken-Widgets umbauen - der Aufnahmeort bleibt komplett unveraendert
   oben rechts, genau wie ohne Balken. width:auto hebt das width:max-content der
   Basisregeln auf, damit Termine bis an den linken und Wetter bis an den rechten
   Rand des Balkens reichen. Selektor mit .info-overlay.bar-mode (drei Klassen), damit
   die weiter unten stehenden .legacy-android-Regeln (max-width) den Balken nicht
   ueberschreiben und das Wetter auf Android 7 nicht am linken Rand seiner Spalte
   klebt. */
.info-overlay.bar-mode .info-panel-events,.info-overlay.bar-mode .info-panel-time,.info-overlay.bar-mode .info-panel-weather{position:static;width:auto;max-width:none;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:0;padding:2px 4px;transform:none;grid-row:1}
.info-overlay.bar-mode .info-panel-events{grid-column:1;text-align:left;zoom:var(--info-scale-events)}
.info-overlay.bar-mode .info-panel-time{grid-column:2;text-align:center;zoom:var(--info-scale-clock)}
.info-overlay.bar-mode .info-panel-weather{grid-column:3;text-align:right;zoom:var(--info-scale-weather)}
/* Zeigt der Balken weder Uhr noch Termine, bleibt nur das Wetter uebrig: dann schrumpft
   der Balken auf dessen Breite, sitzt rechts unten und bekommt oben links ein rundes Eck.
   Das Wetter rueckt dabei in die einzige Spalte (sonst wuerden Spalte 1/2 Luecken lassen). */
.info-overlay.bar-mode.bar-compact:not(.d-none){grid-template-columns:auto;left:auto;right:0;width:max-content;border-top-left-radius:18px}
.info-overlay.bar-mode.bar-compact .info-panel-weather{grid-column:1}
.info-overlay.bar-mode.bar-compact:not(.d-none)::before{border-top-left-radius:18px}
/* Im Balkenmodus sitzt der Aufnahmeort buendig im rechten oberen Eck. Gerundet wird nur das
   freie Eck unten links - die Kanten am Bildschirmrand bleiben eckig. Der sichtbare Kasten
   ist hier das Textfeld, nicht das Panel. */
.info-overlay.bar-mode .info-panel-place{right:0;top:0}
.info-overlay.bar-mode .info-panel-place .info-photo-place{border-radius:0 0 0 12px}
/* ... und die Home-Assistant-Werte buendig im linken oberen Eck. Nur das freie, sichtbare
   Eck (unten rechts) wird gerundet - die Ecken am Bildschirmrand bleiben eckig. */
.info-overlay.bar-mode .info-panel-ha{left:0;top:0;border-radius:0 0 12px 0}
/* Settings: groessere Beschriftung der Tab-Leiste */
#configTabs .nav-link{font-size:1.15rem;padding:0.6rem 1.1rem}
.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{overflow:visible}
.wx-icon .wx-svg{width:100%;height:100%;display:block;overflow:visible}
/* Grid: Icon links ueber die beiden Zeilen wx-temp/wx-desc, wx-place volle Breite darunter */
.wx-text{display:grid;grid-template-columns:auto 1fr;column-gap:clamp(8px,1.5vw,14px);align-items:center;text-align:right}
.wx-text .wx-icon{grid-column:1;grid-row:1 / 3;align-self:center;width:clamp(48px,9vw,80px);height:clamp(48px,9vw,80px);padding:6px;box-sizing:border-box}
.wx-temp{grid-column:2;font-size:clamp(28px,5vw,44px);font-weight:600;line-height:1}
.wx-desc{grid-column:2;font-size:14px;opacity:0.9}
.wx-place{grid-column:1 / -1;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-text .wx-icon{width:72px;height:72px;padding:6px;box-sizing:border-box}
.legacy-android .wx-text{column-gap:10px}
.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 .info-panel-ha{max-width:320px}
.legacy-android .slide-nav-feedback{font-size:96px}
.legacy-android .wx-detail-card{min-width:760px}
/* 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:20px;padding:44px 52px;min-width:min(760px,92vw);max-width:92vw;box-shadow:0 10px 40px rgba(0,0,0,0.5)}
/* Home-Assistant-Oberflaeche im iframe: 95% des Bildschirms, Karte ohne Innenabstand. */
.ha-frame-card{width:95vw;height:95vh;min-width:0;max-width:95vw;padding:0;overflow:hidden}
.ha-frame{width:100%;height:100%;border:0;border-radius:20px;background:#0f1115;display:block}
.ha-frame-card .wx-detail-close{top:2px;right:14px;z-index:2;text-shadow:0 1px 6px rgba(0,0,0,0.9)}
.ha-frame-hint{position:absolute;left:0;right:0;bottom:0;padding:14px 20px;background:rgba(0,0,0,0.72);color:#fff;font-size:15px;line-height:1.4;border-radius:0 0 20px 20px}
.ha-frame-hint.d-none{display:none}
.wx-detail-close{position:absolute;top:14px;right:20px;background:none;border:none;color:#fff;font-size:44px;line-height:1;cursor:pointer;opacity:0.7}
.wx-detail-close:hover{opacity:1}
.wx-detail-head{display:flex;align-items:center;gap:32px;margin-bottom:28px}
.wx-icon-lg{width:144px;height:144px}
.wx-detail-temp{font-size:88px;font-weight:600;line-height:1}
.wx-detail-desc{font-size:32px;opacity:0.9}
.wx-detail-place{font-size:26px;opacity:0.6}
.wx-detail-stats{display:flex;flex-wrap:wrap;gap:28px;margin-bottom:36px;font-size:28px}
.wx-detail-stats .wx-stat{opacity:0.85}
.wx-detail-stats .wx-stat b{opacity:1;font-weight:600}
.wx-detail-title{font-size:24px;text-transform:uppercase;letter-spacing:2px;opacity:0.6;margin-bottom:16px}
.wx-forecast{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.wx-fc-day{background:rgba(255,255,255,0.06);border-radius:16px;padding:20px 16px;text-align:center}
.wx-fc-day .wx-fc-name{font-size:26px;opacity:0.8;margin-bottom:8px}
.wx-fc-day .wx-icon{width:76px;height:76px;margin:0 auto 8px}
.wx-fc-temps{font-size:28px}
.wx-fc-temps .wx-fc-max{font-weight:600}
.wx-fc-temps .wx-fc-min{opacity:0.6;margin-left:8px}
.wx-fc-prec{font-size:24px;opacity:0.7;color:#7fbfff;margin-top:4px}
@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}
  .info-panel-ha{left:10px;top:10px;max-width:60vw}
}


/* 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}