/* /css/layout.css */
:root{
    --tg-red: #e30613;         /* Primärrot */
    --tg-red-600:#c10510;
    --text: #1a1a1a;
    --muted:#6b7280;
    --bg:#ffffff;
    --surface:#f5f6f7;
    --border:#e5e7eb;
    --radius:16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    color:var(--text);
    background:var(--bg);
}

/* Topbar */
.topbar{
    position:sticky; top:0; z-index:50;
    display:flex; align-items:center; justify-content:space-between;
    gap:16px;
    padding:14px 20px;
    border-bottom:1px solid var(--border);
    background:#fff;
}
.topbar__left{display:flex; align-items:center; gap:14px}
.brand{display:inline-flex; align-items:center}
.brand img{height:34px; width:auto; display:block}
.brand__title{font-weight:600; letter-spacing:.2px}

/* App Shell: Sidebar + Main */
.app-shell{
    display:grid;
    grid-template-columns: 260px 1fr;
    gap:0;
    min-height:calc(100vh - 60px); /* abzüglich Header */
}

@media (max-width: 980px){
    .app-shell{grid-template-columns: 1fr}
    .sidebar{display:none}
}

/* Sidebar */
.sidebar{
    border-right:1px solid var(--border);
    background:#fff;
    padding:20px;
}
.sidebar__nav ul{list-style:none; margin:0; padding:0}
.sidebar__nav li{padding:10px 0; color:var(--text)}
.sidebar__nav .muted{color:var(--muted)}

/* Main */
.main{
    padding:24px;
    background:var(--surface);
}

/* Hero */
.hero{
    background:#fff;
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:24px;
    margin-bottom:16px;
}
.hero h1{margin:0 0 8px; font-size:28px; line-height:1.2}
.hero .sub{margin:0; color:var(--muted)}

/* Placeholder Box */
.placeholder{
    padding:6px 0 24px;
}
.placeholder-box{
    background: #fff;
    border:1px dashed var(--border);
    border-radius: var(--radius);
    padding:24px;
}
.placeholder-box h2{margin:0 0 6px; font-size:20px}
.placeholder-box p{margin:0; color:var(--muted)}

/* Footer */
.footer{
    margin-top:24px;
    border-top:1px solid var(--border);
    background:#fff;
}
.footer__inner{
    max-width:1200px;
    margin:0 auto;
    padding:16px 20px;
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    color:var(--muted);
    font-size:14px;
}
.footer__nav a{
    color:var(--muted);
    text-decoration:none;
    margin-left:16px;
}
.footer__nav a:hover{color:var(--text)}