/* Offline-Status und eigenständige Installation, bewusst außerhalb des BASIS-Teils. */
/* Eine ruhige Zeile statt eines Kastens: Das Quadrat zeigt den Verbindungsstand (grau prüft oder
   ohne Offline-Speicher, grün offline nutzbar, bernstein gestört), der Text sagt den Rest. Die Erklärung dazu steht in der FAQ. */
.offline-status{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem 1rem;margin:0 0 1rem;color:var(--color-text-faint);font-size:var(--fs-2);line-height:1.6}
.offline-status p::before{content:"";display:inline-block;width:.5rem;height:.5rem;margin-right:.5rem;vertical-align:.05em;background:var(--color-border-strong)}
.offline-status[data-bereit="true"] p::before{background:var(--color-success)}
.offline-status[data-zustand="fehler"] p::before{background:var(--color-warning)}
.offline-status p{margin:0;flex:1 1 15rem}
.offline-status button{font:inherit;min-height:2.75rem;padding:.35rem .65rem;border:1px solid var(--color-border-strong);background:transparent;color:var(--color-text);cursor:pointer}
.offline-status button:hover{border-color:var(--brand);color:var(--brand-text)}
.offline-status button:disabled{opacity:.5;cursor:wait}
.offline-status button:focus-visible,.installieren:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.installieren{display:inline-flex;align-items:center;gap:.45rem;min-height:2rem;padding:.45rem .7rem;border:1px solid var(--brand);color:var(--brand-text);background:transparent;font-family:inherit;font-size:var(--fs-1);font-weight:600;white-space:nowrap;cursor:pointer}
.installieren:hover{background:var(--brand);color:var(--color-text-on-brand)}
.installieren svg{width:15px;height:15px;flex:none}
/* Höhe wie die Kopfknöpfe (.kopf-btn); am Handy reicht der Platz nur für die Kurzform */
.install-kurz{display:none}
.install-hilfe{margin:0 0 1rem;padding:.75rem;border:1px solid var(--color-border);font-size:var(--fs-3);color:var(--color-text-muted)}
@media(max-width:560px){.site-header .wrap{gap:.5rem}.installieren{font-size:var(--fs-1);padding-inline:.45rem}.install-lang{display:none}.install-kurz{display:inline}}
/* Unter 380px passt auch die Kurzform nicht mehr neben Wortmarke, Farbschema und Menü — das Wort
   lief über das Symbol (01.11.2026). Dann trägt das Symbol allein, der Name steht im title. */
@media(max-width:380px){.installieren{flex:none}.install-kurz{display:none}}