/* =====================================================================
   LAYOUT.CSS — App-Rahmen: Seitenbreite, Kopfzeile, Navigation.
   Handy (Standard): Navigationsleiste unten + "+"-Knopf.
   Desktop (≥ 1000 px): Navigationsleiste links, Inhalt in zwei Spalten.
   ===================================================================== */

.app { min-height: 100vh; min-height: 100dvh; }

.main {
    width: 100%; max-width: 720px; margin: 0 auto;
    padding: 0 16px calc(104px + var(--safe-bottom));
}

.view[hidden] { display: none; }

/* ---------- Kopfzeile jeder Seite ---------- */
.top {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: max(16px, calc(var(--safe-top) + 8px)) 0 12px; min-height: 76px;
}
.top-actions { display: flex; align-items: center; gap: 10px; }
.title { font-size: 28px; line-height: 1.1; font-weight: 650; letter-spacing: -0.02em; }

.only-mobile { display: inline-grid; }

/* ---------- Spalten (nur Desktop zweispaltig) ---------- */
.cols { display: block; }
.col { min-width: 0; }

/* ---------- Navigation unten (Handy/Tablet) ---------- */
.nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: flex; align-items: center; gap: 4px;
    padding: 8px 12px calc(10px + var(--safe-bottom));
    background: var(--bg); border-top: 1px solid var(--line);
}
.tab {
    flex: 1; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    font-size: 12px; font-weight: 600; color: var(--muted); text-decoration: none; border-radius: 14px;
}
.tab-ico { width: 56px; height: 30px; border-radius: 15px; display: grid; place-items: center; }
.tab.on { color: var(--text); font-weight: 700; }
.tab.on .tab-ico { background: var(--accent-soft); color: var(--accent); }
.tab-account { display: none; }

.fab {
    order: 9; width: 52px; height: 52px; flex: none; margin-left: 6px;
    display: grid; place-items: center; border: 0; padding: 0;
    border-radius: 18px; background: var(--accent); color: var(--on-accent);
}
@media (hover: hover) { .fab:hover { filter: brightness(1.08); } }

/* Tablet: etwas breiter */
@media (min-width: 760px) {
    .main { max-width: 820px; padding-left: 24px; padding-right: 24px; }
    .title { font-size: 32px; }
}

/* ---------- Desktop: Seitenleiste links, zwei Spalten ---------- */
@media (min-width: 1000px) {
    .app { display: grid; grid-template-columns: 96px minmax(0, 1fr); }

    .nav {
        position: sticky; top: 0; left: auto; right: auto; bottom: auto; height: 100vh; height: 100dvh;
        flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px;
        padding: 24px 0; border-top: 0; border-right: 1px solid var(--line);
    }
    .fab { order: -1; margin: 0 0 20px; }
    .tab { flex: none; width: 80px; }
    .tab-account { display: flex; margin-top: auto; }
    .only-mobile { display: none; }

    .main { max-width: 1240px; margin: 0; padding: 0 40px 56px; }
    .top { padding-top: 32px; }
    .title { font-size: 36px; }

    .cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
    .toast { bottom: 32px; }
}