:root{
  --bg:#F5F7FA; --bg2:#FFFFFF; --text:#0b0c0f; --muted:#6b7280; --line:#e6e8ef;
  --panel:#ffffff; --brand:#2563eb; --ok:#059669; --grad:linear-gradient(90deg,#2563eb,#10b981);
  --rad:16px; --pad:16px; --shadow:0 6px 20px rgba(0,0,0,.06); --max:1200px;
  --ring:0 0 0 3px rgba(37,99,235,.25);
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;color:var(--text);background:linear-gradient(180deg,var(--bg) 0%, var(--bg2) 60%);font:15px/1.5 system-ui,-apple-system,Segoe UI,Inter,Roboto,Ubuntu,Arial,sans-serif}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.site-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:#fff;font-weight:800;background:var(--grad)}
.brand-name{font-weight:900;font-size:18px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.search{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:#f3f4f6;border-radius:12px;padding:6px 10px}
.search input{width:220px;border:0;background:transparent;outline:0}
.ico{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
.head-actions{display:flex;align-items:center;gap:8px}
.btn{height:36px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer}
.btn:hover{box-shadow:var(--shadow)}
.btn.primary{border:0;background:var(--grad);color:#fff;font-weight:700}
.btn.primary.sm{height:32px;padding:0 12px}
.icon-btn{height:36px;width:36px;border-radius:10px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer}
.icon-btn:hover{box-shadow:var(--shadow)}
.avatar{width:44px;height:44px;border-radius:999px;display:grid;place-items:center;background:#dbeafe;color:#1e3a8a;font-weight:800}
.avatar.sm{width:36px;height:36px}
.avatar.xl{width:96px;height:96px;border-radius:20px;overflow:hidden;box-shadow:0 0 0 4px #fff}
.avatar.xl img{width:100%;height:100%;object-fit:cover}

.grid{display:grid;grid-template-columns:260px 1fr 300px;gap:16px;padding:16px}
.left{position:sticky;top:78px;height:max-content}
.right{position:sticky;top:78px;height:max-content;display:flex;flex-direction:column;gap:16px}
.center{display:grid;gap:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);box-shadow:var(--shadow);padding:16px}
.card.flat{box-shadow:none}
.stack{display:grid;gap:14px}
.row{display:flex;align-items:center;gap:10px}
.row.between{justify-content:space-between}
.bold{font-weight:700}
.small{font-size:12px}
.up{text-transform:uppercase;letter-spacing:.06em}
.muted{color:var(--muted)}
.h6{font-size:18px;font-weight:800}

.nav{display:grid;gap:6px}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;border:1px solid transparent;background:#fff;text-align:left;cursor:pointer}
.nav-item .ico{width:20px;height:20px}
.nav-item:hover{background:#f8fafc;border-color:var(--line)}
.nav-item.active{background:#f1f5ff;border-color:#c7d2fe;font-weight:700}
.nav-note{display:flex;align-items:center;gap:8px;margin-top:8px;color:var(--muted);font-size:12px}

.composer{display:grid;grid-template-columns:auto 1fr;gap:12px}
.composer input{border:1px solid var(--line);border-radius:12px;padding:10px 12px;outline:0;background:#f9fafb}
.composer .row{grid-column:1/-1;display:flex;justify-content:space-between;margin-top:6px}

.post{padding:14px}
.post-head{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}
.post-body{margin:10px 0}
.post-img{overflow:hidden;border-radius:12px;margin-top:10px}
.post-actions{display:flex;gap:16px;color:#4b5563;font-size:14px}

.cover{height:190px;background:linear-gradient(90deg,#bfdbfe,#d1fae5,#dbeafe)}
.profile-row{display:grid;grid-template-columns:auto 1fr auto;gap:14px;margin-top:-40px;align-items:end}
.profile-meta .title{font-size:24px;font-weight:900;line-height:1.1}
.profile-actions .btn{margin-left:6px}

.tabs{padding:0}
.tabbar{display:flex;gap:6px;border-bottom:1px solid var(--line);padding:0 14px}
.tabbar button{padding:12px 14px;border:0;background:transparent;border-bottom:2px solid transparent;cursor:pointer;color:#4b5563}
.tabbar button.active{color:#1d4ed8;border-color:#1d4ed8;font-weight:700}
.pbody{padding:14px}
.pview{display:none}
.pview.active{display:block}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.tile{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:14px}
.tile-row{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.ph-150{height:150px;border-radius:12px;background:linear-gradient(135deg,#f3f4f6,#e5e7eb)}

.ad .ad-box{height:170px;border-radius:14px;background:linear-gradient(135deg,#dbeafe,#d1fae5);display:grid;place-items:center;color:#374151;font-weight:700}

.btn.block{width:100%}

.site-footer{border-top:1px solid var(--line);margin-top:10px;background:#fff}
.foot{display:flex;align-items:center;justify-content:space-between;padding:14px}

.hidden{display:none}

@media (max-width: 1200px){ .grid{grid-template-columns:220px 1fr;}.right{display:none} }
@media (max-width: 900px){
  .search{display:none}
  .grid{grid-template-columns:1fr}
  .left{display:none}
}

/* FW-ADS-STYLES */
.right { display:flex; flex-direction:column; gap:16px; }
@media (min-width: 1024px){
  .right { position:sticky; top:72px; }
}
.ad-card{ border:1px solid #e5e7eb; border-radius:16px; padding:16px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.ad-tag{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:#6b7280; margin-bottom:8px; }
.ad-media{ height:150px; border-radius:12px; background:linear-gradient(135deg,#dbeafe,#d1fae5); display:grid; place-items:center; color:#374151; font-weight:600; }
.ad-row{ margin-top:10px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ad-title{ font-weight:700; }
.ad-brand{ color:#6b7280; font-size:12px; }
.ad-cta{ padding:8px 12px; border-radius:10px; background:#2563eb; color:#fff; border:0; cursor:pointer; }
.ad-cta:hover{ background:#1d4ed8; }


/* FW-NAV-FIX v2 */
.wrap.grid{
  display:grid; gap:16px;
}
@media (min-width: 1024px){
  .wrap.grid{
    grid-template-columns: 220px 1fr 320px;
    align-items:start;
  }
}
.left{ position:sticky; top:72px; z-index:5; }
.nav{ display:flex; flex-direction:column; gap:6px; }
.nav .nav-item{
  display:flex; align-items:center; gap:12px;
  width:100%; text-align:left;
  padding:10px 12px; border-radius:12px; border:0;
  background:#fff; color:#374151;
  cursor:pointer; user-select:none;
}
.nav .nav-item:hover{ background:#f3f4f6; }
.nav .nav-item.active{ background:#f3f4f6; font-weight:600; }
.nav .ico-wrap{ display:inline-flex; width:20px; height:20px; }
.nav .ico{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; }
.nav-note{ margin-top:10px; font-size:12px; color:#6b7280; display:flex; gap:8px; align-items:center; }
.nav-note .ico{ width:18px; height:18px; }

.right{ z-index:1; } /* sicher unter Sidebar */

section[id^="tab-"]{ display:block; }
section[hidden]{ display:none !important; }