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

.verlauf-knopf{flex:none}
@media (max-width:860px){.verlauf-knopf .kopf-btn-label{display:none}.verlauf-knopf{padding-inline:.55rem}}
/* Fenster unter dem Verlauf-Knopf — Rahmen und Lage wie .menue, Zeilen wie im Report Generator */
/* Kopf und Fuß bleiben stehen, nur die Liste scrollt — wie in PartSurfer etwa acht Einträge hoch.
   Die Obergrenze des ganzen Fensters setzt offline.js beim Öffnen aus dem Platz unter dem Knopf:
   Die Grenze von .menue rechnet mit der Kopfzeile, der Knopf steht aber tiefer neben dem Titel —
   bei vielen Suchen lag „Alles löschen“ unter dem Bildschirmrand (René, 29.10.2026). */
.verlauf-fenster{width:min(24rem,calc(100vw - 2rem));overflow:hidden}
.verlauf-fenster[open]{display:flex;flex-direction:column}
.verlauf-fenster > *{flex:none}
.verlauf-fenster .verlauf-liste{flex:0 1 auto;min-height:0;max-height:min(52vh,420px);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
.verlauf-liste{list-style:none;margin:0;padding:0 .25rem 0 .75rem}
.verlauf-liste li{display:flex;align-items:center;gap:.5rem}
.verlauf-liste li + li{border-top:1px solid var(--hair)}
.verlauf-eintrag{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:.2rem;padding:.65rem 0;border:0;background:none;color:var(--color-text);font:inherit;text-align:left;cursor:pointer;overflow-wrap:anywhere}
.verlauf-eintrag strong{font-size:var(--fs-3)}
.verlauf-eintrag span{font-size:var(--fs-2);color:var(--color-text-muted)}
.verlauf-eintrag:hover strong{color:var(--brand-text)}
.verlauf-eintrag:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--radius-in)}
.verlauf-x{flex:none;display:grid;place-items:center;width:2.75rem;height:2.75rem;border:0;border-radius:var(--radius-ctl);background:none;color:var(--color-text-faint);font:inherit;font-size:1.4rem;line-height:1;cursor:pointer;transition:background-color .15s ease,color .15s ease}
.verlauf-x:hover{background:var(--color-bg-sunken);color:var(--color-danger)}
.verlauf-x:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.verlauf-leer{padding:1.1rem 0;font-size:var(--fs-3);color:var(--color-text-faint);text-align:center}
.verlauf-fuss{display:flex;justify-content:flex-end;padding:.5rem .75rem;border-top:1px solid var(--color-border)}
.verlauf-fuss-knopf{min-height:2rem;padding:.35rem .6rem;border:1px solid var(--color-border);border-radius:var(--radius-in);background:transparent;color:var(--color-text-muted);font:inherit;font-size:var(--fs-1);font-weight:700;font-stretch:88%;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:border-color .15s ease,color .15s ease}
.verlauf-fuss-knopf:hover:not(:disabled){border-color:var(--color-danger);color:var(--color-danger)}
.verlauf-fuss-knopf:disabled{opacity:.45;cursor:default}
.verlauf-fuss-knopf:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media (pointer:coarse){.verlauf-fuss-knopf{min-height:2.75rem}}