/* Portal als Handy-App: Menüpunkte nur für schmale Bildschirme, Installationshinweis,
   Anpassungen im App-Fenster (ohne Browserleiste) und die Offline-Seite. */

/* Zusätzliche Menüpunkte (Werkzeuge, Leitstand, Abmelden) nur im aufgeklappten Handy-Menü */
.hauptnav .nav-mobil{display:none}
.hauptnav .nav-trenner{margin:8px 14px 2px;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--t3);font-weight:600}
.hauptnav .nav-abmelden button{
  display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:11px 14px;border-radius:7px;font:inherit;font-size:13.5px;font-weight:500;color:var(--t2);
}
.hauptnav .nav-abmelden button:hover{color:var(--w);background:rgba(27,90,138,.14)}
@media(max-width:900px){
  .hauptnav .nav-mobil{display:block}
  .hauptnav.offen{max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);overflow-y:auto}
}
/* Schmale Handys: Abmelden wandert ins Menü, damit die Kopfzeile nicht überläuft */
@media(max-width:480px){
  .kopf-konto{gap:8px}
  .kopf-konto > form.inline:not(.ans-form){display:none}
}

/* Hinweis "Als App installieren" auf der Übersicht */
.app-hinweis{
  display:flex;align-items:center;gap:14px;margin:0 0 24px;padding:14px 16px;
  background:var(--card);border:1px solid var(--bdr2);border-radius:12px;
}
.app-hinweis img{width:44px;height:44px;border-radius:10px;flex-shrink:0}
.app-hinweis .app-hinweis-text{flex:1;min-width:0;font-size:13.5px;line-height:1.45;color:var(--t2)}
.app-hinweis .app-hinweis-text strong{display:block;color:var(--t1);font-size:14px;margin-bottom:2px}
.app-hinweis .app-hinweis-knoepfe{display:flex;gap:8px;flex-shrink:0;align-items:center}
.app-hinweis .app-zu{background:none;border:0;cursor:pointer;color:var(--t3);font-size:22px;line-height:1;padding:4px 6px}
.app-hinweis .app-teilen{display:inline-block;width:15px;height:15px;vertical-align:-2px;margin:0 2px}
@media(max-width:520px){
  .app-hinweis{flex-wrap:wrap}
  .app-hinweis .app-hinweis-text{flex-basis:calc(100% - 60px)}
  .app-hinweis .app-hinweis-knoepfe{width:100%;justify-content:flex-end}
}

/* Am Rechner: Hinweis mit QR-Code, dass es das Portal auch fürs Handy gibt (Übersicht und Profil) */
.app-qr{
  display:flex;align-items:center;gap:20px;margin:0 0 24px;padding:16px 18px;
  background:var(--card);border:1px solid var(--bdr2);border-radius:12px;
}
.app-qr[hidden]{display:none}
.app-qr-profil{margin:4px 0 0;padding:0;background:none;border:0}
.app-qr-code{flex-shrink:0;padding:6px;background:#fff;border-radius:8px;line-height:0}
.app-qr-code svg{display:block;width:132px;height:132px}
.app-qr-text{flex:1;min-width:0;font-size:13.5px;line-height:1.55;color:var(--t2)}
.app-qr-text strong{display:block;color:var(--t1);font-size:14.5px;margin-bottom:4px}
.app-qr-text p{margin:0 0 6px}
.app-qr .app-zu{align-self:flex-start;background:none;border:0;cursor:pointer;color:var(--t3);font-size:22px;line-height:1;padding:4px 6px}
@media(max-width:560px){.app-qr{flex-direction:column;align-items:flex-start}}
@media(display-mode:standalone){.app-qr{display:none}}

/* Im App-Fenster: Abstand zu Kamera-Aussparung und Gestenleiste */
@media(display-mode:standalone){
  .kopf{padding-top:env(safe-area-inset-top)}
  .fuss{padding-bottom:env(safe-area-inset-bottom)}
  .app-hinweis{display:none}
}

/* Offline-Seite */
body.app-offline{
  margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:#EEF2F7;color:#1D2B38;font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;text-align:center;padding:24px;
}
body.app-offline main{max-width:360px}
body.app-offline img{border-radius:20px}
body.app-offline h1{font-size:22px;margin:18px 0 8px}
body.app-offline a{display:inline-block;margin-top:8px;padding:10px 22px;border-radius:8px;background:#1B5A8A;color:#fff;text-decoration:none}
@media(prefers-color-scheme:dark){body.app-offline{background:#0E1621;color:#DDE6EF}}