/* Gemeinsame App-Leiste der Familie (2026-10-15, Thomas: „Formelsammlung, Helfer und Tabellenbuch einheitlich im Web-App-Design“).
   Bis 900 px (Handy, Tablet): Kopfzeile kompakt (48 px, Hell/Dunkel wandert ins Blatt „Mehr“), feste Leiste unten mit den
   Bereichen der jeweiligen App (nav.app-nav#appNav, Einträge je Seite im HTML), Blätter von unten (.app-blatt, Glas über die
   Variablen von thema.css), Zuletzt-Chips. Am PC (> 900 px) bleibt die Leiste aus und alles wie bisher.
   Verhalten: assets/app-nav.js (window.MWAppNav). Vorbild und erste Ausführung: Tabellenbuch (tabellen.css). */
/* Farben: jede App benennt ihre hellen Grundfarben anders (Helfer/Tabellenbuch --raised, Formelsammlung --flaeche; dunkel liefert thema.css beide), darum eigene Namen mit Fallback-Kette */
:root{--ab-flaeche:var(--raised,var(--flaeche,#fff));--ab-papier:var(--paper,var(--papier,#f4f4f8));--ab-text:var(--ink,var(--text,#0a1540));--ab-leise:var(--muted,var(--text2,#525975));--ab-soft:var(--soft,var(--leise,#5e6680));
  --ab-linie:var(--line,var(--linie,#dcdfe9));--ab-linie2:var(--line-2,var(--linie2,#c6cadb));--ab-blau:var(--blue,var(--blau,#1f3fe0));--ab-blau-hell:var(--blue-soft,var(--blau-hell,#e6ebff));--ab-blau-hover:var(--blue-hover,var(--blue,var(--blau,#1f3fe0)));
  --ab-amber:var(--amber,#ffb21e);--ab-warn:var(--warn,#8a5a00);--ab-warn-hell:var(--warn-soft,var(--warn-bg,#fff1cc));--ab-warn-rand:var(--warn-rand,#f0d58a);--ab-err:var(--err,#b3202a);--ab-err-hell:var(--err-bg,var(--err-hell,#ffe4e5));
  --ab-fokus:var(--focus,var(--fokus,0 0 0 1.5px #1f3fe0,0 0 0 5px rgba(31,63,224,.25)))}
.app-nav{display:none}
.app-blatt-hinter{position:fixed;inset:0;z-index:70;background:rgba(10,21,64,.42);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.app-blatt-hinter[hidden],.app-blatt[hidden]{display:none}
.app-blatt{position:fixed;left:50%;bottom:0;z-index:71;width:min(100%,560px);max-height:calc(100dvh - 40px);overflow:auto;transform:translateX(-50%);padding:6px 18px calc(18px + env(safe-area-inset-bottom,0px));border-radius:22px 22px 0 0;background:var(--ab-flaeche);background-image:var(--glanz);border:1px solid var(--kante);border-bottom:0;box-shadow:var(--schatten-gross);color:var(--ab-text);font-family:inherit;font-size:15px;line-height:1.45}
@media (prefers-reduced-motion:no-preference){.app-blatt{animation:ab-auf .24s cubic-bezier(.2,.8,.2,1)}.app-blatt-hinter{animation:ab-hinter-auf .2s ease-out}}
@keyframes ab-auf{from{transform:translate(-50%,24px);opacity:0}to{transform:translateX(-50%);opacity:1}}
@keyframes ab-hinter-auf{from{opacity:0}to{opacity:1}}
@media (min-width:901px){.app-blatt{bottom:auto;top:50%;transform:translate(-50%,-50%);border-radius:22px;border-bottom:1px solid var(--kante);max-height:calc(100vh - 48px)}@keyframes ab-auf{from{transform:translate(-50%,calc(-50% + 16px));opacity:0}to{transform:translate(-50%,-50%);opacity:1}}.ab-griff{display:none}}
.ab-griff{width:40px;height:4px;border-radius:2px;background:var(--ab-linie2);margin:4px auto 10px}
.ab-kopf{display:flex;align-items:center;gap:10px;margin:0 0 8px}
.ab-kopf h2{flex:1;min-width:0;margin:0;font-size:18px;font-stretch:110%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ab-zu{flex:none;width:44px;height:44px;margin-right:-8px;border:0;background:none;border-radius:12px;color:var(--ab-leise);cursor:pointer;display:grid;place-items:center}
.ab-zu:hover{background:var(--ab-papier);color:var(--ab-text)}
.ab-zu svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.app-blatt h3{margin:14px 0 6px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ab-leise);font-weight:700}
.app-blatt h3:first-of-type{margin-top:6px}
.ab-wahl{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:4px;border-radius:14px;background:var(--ab-papier);box-shadow:var(--feld-innen)}
.ab-wahl button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;border:1px solid transparent;border-radius:11px;background:none;color:var(--ab-leise);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.ab-wahl button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ab-wahl button[aria-pressed=true]{background:var(--ab-flaeche);background-image:var(--glanz-knopf);border-color:var(--kante);color:var(--ab-text);box-shadow:var(--schatten)}
.ab-liste{display:flex;flex-direction:column;gap:2px}
.ab-liste a,.ab-liste button{display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 10px;border:0;border-radius:12px;background:none;color:var(--ab-text);font:inherit;font-size:15px;font-weight:600;text-decoration:none;text-align:left;cursor:pointer;width:100%}
.ab-liste a:hover,.ab-liste button:hover{background:var(--ab-papier)}
.ab-liste a.an,.ab-liste a[aria-current]{background:var(--ab-blau-hell);color:var(--ab-blau)}
.ab-liste svg{width:22px;height:22px;flex:none;fill:none;stroke:var(--ab-blau);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ab-liste svg.stern{fill:var(--ab-amber);stroke:var(--ab-warn)}
.ab-liste span{display:flex;flex-direction:column;min-width:0;flex:1}
.ab-liste span>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ab-liste small{font-weight:500;font-size:13px;color:var(--ab-leise)}
.ab-liste [hidden]{display:none}
.ab-liste .ab-weg{flex:none;width:44px;min-height:44px;padding:0;border:0;background:none;border-radius:10px;color:var(--ab-soft);cursor:pointer;display:grid;place-items:center}
.ab-liste .ab-weg:hover{background:var(--ab-err-hell);color:var(--ab-err)}
.ab-liste .ab-weg svg{width:16px;height:16px;stroke:currentColor;stroke-width:2}
.ab-zeile{display:flex;align-items:center;gap:4px}.ab-zeile>a{flex:1;min-width:0}
.ab-leer{margin:4px 2px 8px;font-size:13.5px;color:var(--ab-leise)}
.ab-knopfzeile{display:flex;justify-content:flex-end;margin:6px 0 0}
.ab-knopfzeile button{min-height:44px;padding:6px 12px;border:1px solid var(--ab-linie);border-radius:10px;background:var(--ab-flaeche);background-image:var(--glanz-knopf);box-shadow:var(--knopf-licht);color:var(--ab-leise);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.ab-knopfzeile button:hover{color:var(--ab-text);border-color:var(--ab-linie2)}
.ab-fuss{margin:14px 0 0;font-size:12.5px;color:var(--ab-leise);text-align:center}
.ab-fuss a{color:inherit}
.app-blatt :focus-visible{outline:none;box-shadow:var(--ab-fokus)}
/* Zuletzt angesehen als Chips (Seitenleiste bzw. Feld) */
.zuletzt-chips{display:flex;gap:6px;overflow-x:auto;padding:2px 4px 8px;margin:0 0 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.zuletzt-chips::-webkit-scrollbar{display:none}
.zuletzt-chips .chip{flex:none;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-flex;align-items:center;min-height:36px;font-size:13px;font-weight:600;padding:5px 11px;border:1px solid var(--ab-linie);border-radius:99px;background:var(--ab-flaeche);background-image:var(--glanz-knopf);box-shadow:var(--knopf-licht);color:var(--ab-text);text-decoration:none;scroll-snap-align:start}
.zuletzt-chips .chip:hover{border-color:var(--ab-blau)}
.zuletzt-chips .chip.an{border-color:var(--ab-blau);color:var(--ab-blau)}
.zuletzt-chips .uhr{width:14px;height:14px;flex:none;align-self:center;margin:0 0 6px 2px;fill:none;stroke:var(--ab-soft);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ---------- App-Layout bis 900 px: Kopf kompakt, Leiste unten ---------- */
@media (max-width:900px){
  :root{--kopf-h:48px;--nav-h:calc(60px + env(safe-area-inset-bottom,0px))}
  header.kopf,header.kopf.kf,header.kopf.kf[data-kopf]{height:var(--kopf-h)}
  header.kopf.kf .thema-knopf{display:none}
  header.kopf.kf .kf-feld{top:calc(var(--kopf-h) + 6px + env(safe-area-inset-top,0px))}
  body{padding-bottom:var(--nav-h)}
  .app-leiste{padding:4px 10px;font-size:13px}
  .app-hinweis{bottom:calc(var(--nav-h) + 12px)}
  .zuletzt-chips .chip{min-height:40px}
  /* Leiste unten: Bereiche mit Symbol und Beschriftung, Glas, Safe-Area */
  .app-nav{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;height:var(--nav-h);padding:0 max(4px,env(safe-area-inset-left)) env(safe-area-inset-bottom,0px) max(4px,env(safe-area-inset-right));background:color-mix(in srgb,var(--ab-flaeche) 88%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);border-top:1px solid var(--kante);box-shadow:0 -1px 0 rgba(255,255,255,.35) inset}
  :root[data-theme="dark"] .app-nav{box-shadow:0 -1px 0 rgba(255,255,255,.06) inset}
  .app-nav a,.app-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:44px;margin:4px 0;padding:0;border:0;border-radius:12px;background:none;color:var(--ab-leise);font:inherit;font-size:11px;font-weight:600;letter-spacing:.01em;line-height:1.2;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .app-nav svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;padding:3px 8px;box-sizing:content-box;border-radius:10px;transition:background-color .18s,color .18s}
  .app-nav .an{color:var(--ab-blau)}
  :root[data-theme="dark"] .app-nav .an{color:var(--ab-blau-hover)}
  .app-nav .an svg{background:var(--ab-blau-hell)}
  .app-nav [aria-expanded=true] svg{background:var(--ab-blau-hell);color:var(--ab-blau)}
  .app-nav :focus-visible{outline:none;box-shadow:var(--ab-fokus)}
  .app-nav [data-nav=gemerkt].an svg,.app-nav [data-nav=m].an svg{fill:var(--ab-amber);stroke:var(--ab-warn)}
  .app-blatt{bottom:var(--nav-h);border-radius:22px 22px 0 0;padding-bottom:18px}
  .toast{bottom:calc(var(--nav-h) + 12px)}
}
@media (max-width:360px){.app-nav a,.app-nav button{font-size:10px}.app-nav svg{padding:3px 6px}}
@media (max-width:900px) and (prefers-reduced-motion:reduce){.app-nav svg{transition:none}}
@media print{.app-nav,.app-blatt,.app-blatt-hinter,.zuletzt-chips{display:none!important}}