/* Das Gerüst der verschlüsselten Zero-Anwendungen.
   Navigation links, Blattfenster, Meldungen, Listen und Formularteile —
   alles, was Zero Kalender und Zero Finance gleich machen.
   Quelle: /var/www/shared/css/zero-app.css — dort ändern, nicht in den Kopien.
   Die Grundlage (Farben, Anmeldemaske, Karten) steht in zero-ui.css. */

.shell{min-height:100vh;min-height:var(--app-height,100vh);
       display:grid;grid-template-columns:236px 1fr}
.hauptteil{min-width:0;display:grid;grid-template-rows:auto 1fr;align-content:start}
.inhalt{width:min(1240px,100%);margin:0 auto;padding:22px;
        padding-bottom:calc(22px + var(--safe-b))}

/* Die Kopfzeile gibt es nur auf schmalen Bildschirmen - auf dem Rechner steht
   alles, was dort stünde, in der Leiste links. */
.kopf{display:none}
.kopf .luecke{flex:1}

/* --- Navigation links ------------------------------------------------------ */

.seitenleiste{display:flex;flex-direction:column;gap:12px;min-height:0;
              padding:20px 14px;padding-top:calc(20px + var(--safe-t));
              padding-bottom:calc(20px + var(--safe-b));
              background:#0b0f17;border-right:1px solid var(--line);
              position:sticky;top:0;height:100vh;height:var(--app-height,100vh);overflow:auto}
.seitenleiste .marke{display:flex;align-items:center;gap:9px;font-weight:800;font-size:15px;
                     padding:0 6px 6px;color:#e7edf5}
.seitenleiste .marke .logo{width:30px;height:30px;flex:none}
.suchzeile input{width:100%}
.navliste{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.navknopf{display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;
          border-radius:10px;font-size:13.5px;font-weight:600;text-align:left;
          color:var(--muted);background:transparent;border:1px solid transparent}
.navknopf:hover{background:#131c28;color:#dce5ef}
.navknopf[aria-pressed=true]{color:#06110e;background:var(--accent);border-color:var(--accent)}
.navzeichen{width:20px;flex:none;text-align:center;font-size:15px;line-height:1}
.nurschmal{display:none}

/* --- Zeitleiste der Ansicht ----------------------------------------------- */

.zeitleiste{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.zeitleiste h2{margin:0;font-size:19px;min-width:210px}
.zeitleiste .pfeile{display:flex;gap:4px}
.zeitleiste .pfeile button{width:36px;height:36px;display:grid;place-items:center;
                           border-radius:9px;font-size:16px}

/* --- Zeitleiste der Ansicht ----------------------------------------------- */

.zeitleiste{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.zeitleiste h2{margin:0;font-size:19px;min-width:210px}
.zeitleiste .pfeile{display:flex;gap:4px}
.zeitleiste .pfeile button{width:36px;height:36px;display:grid;place-items:center;
                           border-radius:9px;font-size:16px}

/* --- Listen und Zeilen ---------------------------------------------------- */

.liste{display:grid;gap:8px}
.zeile{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;
       border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.zeile.erledigt{opacity:.55}
.zeile.erledigt .titel{text-decoration:line-through}
.zeile .titel{font-size:14px;font-weight:600}
.zeile .grow{flex:1;min-width:0}
.zeile small{display:block;color:var(--muted);font-size:11.5px;margin-top:3px}
.haken{flex:none;width:22px;height:22px;border-radius:7px;border:1.5px solid #35455c;
       background:transparent;display:grid;place-items:center;cursor:pointer;padding:0;
       font-size:13px;line-height:1;color:#06110e}
.haken[aria-pressed=true]{background:var(--accent);border-color:var(--accent)}
.wichtig-1{border-left:3px solid var(--signal,#ff7785)}
.wichtig-2{border-left:3px solid #ffb454}
.wichtig-3{border-left:3px solid #35455c}
.balken{height:6px;border-radius:3px;background:#1d2634;overflow:hidden;margin-top:8px}
.balken i{display:block;height:100%;background:var(--accent)}
.perlen{display:flex;gap:3px;flex-wrap:wrap;margin-top:8px}
.perle{width:13px;height:13px;border-radius:4px;background:#1d2634}
.perle.an{background:var(--accent)}
.perle.heute{box-shadow:0 0 0 1.5px var(--accent)}
.straehne{font-variant-numeric:tabular-nums;font-weight:800;color:var(--accent)}

/* --- Formulare ------------------------------------------------------------ */

.feldpaar{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.knopfzeile{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:16px}
.knopfzeile .links{margin-right:auto}
.tagwahl{display:flex;gap:5px;flex-wrap:wrap}
.tagwahl button{width:40px;height:36px;border-radius:9px;font-size:12px;font-weight:700;
                color:var(--muted);background:#0e1620;border:1px solid var(--line)}
.tagwahl button[aria-pressed=true]{color:#06110e;background:var(--accent);border-color:var(--accent)}
.teilzeile{display:flex;align-items:center;gap:8px;margin-top:6px}
.teilzeile input[type=text]{flex:1}
.danger-knopf{padding:11px 16px;border-radius:10px;font-size:14px;font-weight:700;
              color:#ffd7dc;background:#481d27;border:1px solid #80303f;cursor:pointer}

/* --- Fenster -------------------------------------------------------------- */

.blatt-grund{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:18px;
             background:#050810cc;backdrop-filter:blur(4px);overflow:auto}
.blatt-karte{width:min(620px,100%);max-height:88dvh;overflow:auto;padding:22px;
             background:var(--panel);border:1px solid var(--line);border-radius:16px;
             box-shadow:0 24px 70px #000a}
.blatt-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.blatt-kopf h2{margin:0;font-size:18px}
.mini{width:32px;height:32px;border-radius:9px;font-size:18px;line-height:1;
      color:var(--muted);background:transparent;border:1px solid var(--line)}
.blatt-rumpf{display:grid;gap:12px}

/* --- Meldung -------------------------------------------------------------- */

.meldung{position:fixed;left:50%;bottom:calc(20px + var(--safe-b));transform:translateX(-50%) translateY(14px);
         z-index:90;max-width:min(520px,92vw);padding:11px 16px;border-radius:11px;font-size:13px;
         color:#dce5ef;background:#141d2b;border:1px solid var(--line);box-shadow:0 12px 40px #0009;
         opacity:0;pointer-events:none;transition:opacity .18s,transform .18s}
.meldung[data-an="1"]{opacity:1;transform:translateX(-50%) translateY(0)}
.meldung[data-art=fehler]{border-color:#80303f;color:#ffd7dc}
.meldung[data-art=warnung]{border-color:#4a3a12;color:#ffd8a8}

/* --- Auf dem Telefon ------------------------------------------------------ */

@media(max-width:900px){
  /* Auf dem Telefon wandert die Navigation an den unteren Rand: dorthin
     reicht der Daumen, und die Beschriftung weicht dem Zeichen. */
  .shell{grid-template-columns:1fr;grid-template-rows:1fr}
  .seitenleiste{position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;
                flex-direction:row;gap:0;padding:6px 4px;
                padding-bottom:calc(6px + var(--safe-b));
                border-right:0;border-top:1px solid var(--line);z-index:40;
                background:#0b0f17f2;overflow:visible}
  .seitenleiste .marke,.seitenleiste>.primary,.suchzeile{display:none}
  .navliste{flex-direction:row;gap:0;margin:0;width:100%;overflow-x:auto;
            scrollbar-width:none}
  .navliste::-webkit-scrollbar{display:none}
  .navknopf{flex-direction:column;gap:3px;min-width:62px;padding:6px 4px;
            border-radius:9px;font-size:9.5px;font-weight:700;text-align:center}
  .navknopf[aria-pressed=true]{background:#15241f;color:var(--accent);border-color:transparent}
  .navzeichen{width:auto;font-size:17px}
  .navname{white-space:nowrap}
  .kopf{display:flex;align-items:center;gap:10px;
        padding:10px 12px;padding-top:calc(10px + var(--safe-t));
        border-bottom:1px solid var(--line);background:#0b0f17;position:sticky;top:0;z-index:30}
  .nurschmal{display:inline-flex}
  .hauptteil{padding-bottom:78px}
  .inhalt{padding:12px}
  .zeitleiste h2{font-size:16px;min-width:0}
  .feldpaar{grid-template-columns:1fr}
  .blatt-grund{padding:0;place-items:end stretch}
  .blatt-karte{width:100%;max-height:92dvh;border-radius:18px 18px 0 0;
               padding-bottom:calc(22px + var(--safe-b))}
}
@media(pointer:coarse){
  .kopf{background:#0b0f17}
  .blatt-grund{backdrop-filter:none;background:#050810f2}
  .reiter button{padding:10px 15px}
  .haken{width:26px;height:26px}
}