/* =====================================================================
   muntafuner.at — App-Shell (Facebook-Handy-Optik)
   Warmes Gelb-Orange. Wird von template.php + index.php (neu) genutzt.
   ===================================================================== */
:root{
    --bg:#f4f1ec;          /* warmer App-Hintergrund */
    --card:#ffffff;
    --line:#ece6db;        /* warme Trennlinie */
    --text:#1f2937;
    --text2:#6b7280;
    --accent:#f59e0b;      /* Amber */
    --accent-2:#ea580c;    /* Orange */
    --accent-grad:linear-gradient(135deg,#f59e0b,#ea580c);
    --sun-grad:linear-gradient(135deg,#fbbf24,#f59e0b);
    --shell:600px;
    --bar:72px;
    --strip:24px;          /* schmaler "im Aufbau"-Streifen oben */
    --radius:14px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
    background:var(--bg);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    color:var(--text);
    -webkit-font-smoothing:antialiased;
}
a{color:inherit;}

/* ---------- "Im Aufbau"-Streifen (ganz oben, schmal) ---------- */
.build-strip{
    position:fixed; top:0; left:50%; transform:translateX(-50%);
    width:100%; max-width:var(--shell); height:var(--strip); z-index:55;
    background:linear-gradient(135deg,#fbbf24,#f59e0b,#ea580c);
    color:#5a2c00; font-size:11.5px; font-weight:800; letter-spacing:.2px;
    display:flex; align-items:center; justify-content:center; gap:7px;
    box-shadow:0 1px 4px rgba(180,83,9,0.25);
}

/* ---------- Top-Bar ---------- */
.topbar{
    position:fixed; top:var(--strip); left:50%; transform:translateX(-50%);
    width:100%; max-width:var(--shell); height:var(--bar); z-index:50;
    background:var(--card); border-bottom:1px solid var(--line);
    display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 12px;
    box-shadow:0 1px 5px rgba(120,80,0,0.07);
}
/* Logo GROSS und MITTIG in der Leiste */
.topbar .logo{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    display:flex; align-items:center; text-decoration:none; }
.topbar .logo-img{ height:64px; width:auto; max-width:220px; object-fit:contain; display:block; background:transparent; }
.topbar .logo-txt{ display:none; }
.topbar .tb-right{ display:flex; align-items:center; gap:10px; flex-shrink:0; z-index:1; }
.tb-btn{
    width:38px; height:38px; border-radius:50%; border:0; cursor:pointer;
    background:var(--bg); color:var(--text); font-size:18px; text-decoration:none;
    display:flex; align-items:center; justify-content:center; flex-shrink:0; position:relative;
}
.tb-btn:hover{ background:#ece4d6; }
.tb-badge{ position:absolute; top:-2px; right:-2px; background:#dc2626; color:#fff; font-size:10px; font-weight:800;
    min-width:17px; height:17px; border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 4px; }
.tb-avatar{ width:38px;height:38px;border-radius:50%;background:var(--accent-grad);
    color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px;
    text-decoration:none; background-size:cover; background-position:center; }

/* ---------- Inhalt ---------- */
.app-main{
    max-width:var(--shell); margin:0 auto;
    padding:calc(var(--strip) + var(--bar) + 10px) 10px calc(var(--bar) + 18px);
    min-height:100vh;
}
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    margin-bottom:12px; box-shadow:0 1px 2px rgba(120,80,0,0.05); overflow:hidden; }

/* Composer */
.composer{ display:flex; align-items:center; gap:10px; padding:12px 14px; }
.composer .tb-avatar{ width:40px;height:40px; }
.composer .ghost-input{
    flex:1; background:var(--bg); border:0; border-radius:999px;
    padding:11px 16px; color:var(--text2); font-size:15px; cursor:pointer; text-align:left;
    text-decoration:none; font-family:inherit;
}
.composer .ghost-input:hover{ background:#ece4d6; }
.composer-actions{ display:flex; border-top:1px solid var(--line); }
.composer-actions a{
    flex:1; cursor:pointer; padding:10px; text-decoration:none;
    display:flex; align-items:center; justify-content:center; gap:7px;
    color:var(--text2); font-weight:700; font-size:13.5px;
}
.composer-actions a:hover{ background:var(--bg); }

/* Beitrag-Karte */
.post-head{ display:flex; align-items:center; gap:10px; padding:12px 14px 8px; }
.post-head .tb-avatar{ width:42px;height:42px; }
.post-head .meta{ min-width:0; flex:1; }
.post-head .meta b{ display:block; font-size:14.5px; line-height:1.2; }
.post-head .meta span{ font-size:12px; color:var(--text2); }
.post-head .meta a{ text-decoration:none; }
.post-open{ color:var(--text2); text-decoration:none; font-size:20px; padding:0 4px; }
.post-title{ padding:2px 14px 0; margin:0; font-size:16px; font-weight:800; color:var(--text);
    text-decoration:none; display:block; }
.post-body{ padding:4px 14px 12px; font-size:15px; line-height:1.45; color:var(--text); text-decoration:none; display:block; }
.post-photo{ display:block; }
.post-photo img,.post-photo video{ width:100%; display:block; max-height:520px; object-fit:cover; background:#000; }
.post-photo.ph{ aspect-ratio:16/10; background:linear-gradient(135deg,#fef3c7,#fde68a);
    display:flex; align-items:center; justify-content:center; color:#f59e0b; font-size:40px; }
.post-cat{ font-weight:700; }
.post-foot{ display:flex; border-top:1px solid var(--line); }
.post-foot a{ flex:1; cursor:pointer; padding:10px; color:var(--text2); text-decoration:none;
    font-weight:700; font-size:13.5px; display:flex; align-items:center; justify-content:center; gap:6px; }
.post-foot a:hover{ background:var(--bg); }
.post-foot a.on{ color:var(--accent-2); }

/* Skeleton */
.sk{ background:linear-gradient(90deg,#eee8dd 25%,#f6f2ea 37%,#eee8dd 63%); background-size:400% 100%;
    animation:shimmer 1.4s ease infinite; border-radius:8px; }
@keyframes shimmer{ 0%{background-position:100% 0;} 100%{background-position:0 0;} }

/* "Mehr laden" */
.more-btn{ display:block; text-align:center; background:var(--card); border:1px solid var(--line);
    border-radius:999px; padding:12px; font-weight:800; color:var(--accent-2); text-decoration:none;
    margin:4px 0 8px; }
.more-btn:hover{ background:#fff7ed; }

.empty-feed{ text-align:center; color:var(--text2); padding:50px 20px; }
.empty-feed .ic{ font-size:48px; }

/* ---------- Bottom-Tabs ---------- */
.bottombar{
    position:fixed; bottom:0; left:50%; transform:translateX(-50%);
    width:100%; max-width:var(--shell); height:var(--bar); z-index:50;
    background:var(--card); border-top:1px solid var(--line);
    display:flex; align-items:stretch; box-shadow:0 -1px 5px rgba(120,80,0,0.07);
}
.bottombar a{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    text-decoration:none; color:var(--text2); font-size:10.5px; font-weight:700;
}
.bottombar a .bi{ font-size:21px; line-height:1; }
.bottombar a.active{ color:var(--accent-2); }
.bottombar a.plus .bi{
    width:42px;height:42px;border-radius:50%;background:var(--accent-grad);
    color:#fff; display:flex; align-items:center; justify-content:center; margin-top:-14px;
    box-shadow:0 4px 12px rgba(234,88,12,0.45); font-size:24px;
}

/* ---------- Drawer ---------- */
.drawer-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:60; opacity:0; visibility:hidden;
    transition:opacity .2s; }
.drawer-overlay.open{ opacity:1; visibility:visible; }
.drawer{
    position:fixed; top:0; left:50%; margin-left:calc(var(--shell) / -2);
    width:280px; max-width:80%; height:100%; background:var(--card); z-index:61;
    transform:translateX(-110%); transition:transform .22s ease; box-shadow:2px 0 18px rgba(0,0,0,0.2);
    display:flex; flex-direction:column;
}
.drawer.open{ transform:translateX(0); }
.drawer-logo{ padding:22px 16px; background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.drawer-logo img{ height:84px; width:auto; max-width:230px; object-fit:contain; display:block; }
.drawer-head{ background:var(--accent-grad); color:#fff; padding:18px 16px;
    display:flex; align-items:center; gap:12px; text-decoration:none; }
.drawer-head .tb-avatar{ width:46px;height:46px;font-size:18px;background:rgba(255,255,255,0.25); }
.drawer-list{ padding:8px; overflow-y:auto; flex:1; }
.drawer-list a{ display:flex; align-items:center; gap:13px; padding:11px 12px; border-radius:9px;
    text-decoration:none; color:var(--text); font-weight:600; font-size:15px; }
.drawer-list a:hover{ background:var(--bg); }
.drawer-list a .di{ font-size:20px; width:26px; text-align:center; }
.drawer-list a .dbadge{ margin-left:auto; background:#dc2626; color:#fff; font-size:11px; font-weight:800;
    padding:1px 8px; border-radius:999px; }
.drawer-sep{ height:1px; background:var(--line); margin:8px 4px; }

@media (min-width:601px){
    .app-main{ border-left:1px solid var(--line); border-right:1px solid var(--line); background:var(--bg); }
}

/* =====================================================================
   Layout MIT festem Seitenmenue links (Einstellungen / Profil / ...).
   Body bekommt Klasse .with-side. Desktop: Menue immer sichtbar links.
   Mobile: Menue als Drawer per ☰, unten die Tab-Leiste.
   ===================================================================== */
.side-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:60; opacity:0; visibility:hidden; transition:opacity .2s; }
.side-overlay.open{ opacity:1; visibility:visible; }
.side-menu{
    position:fixed; top:calc(var(--strip) + var(--bar)); left:0; bottom:0; width:252px; max-width:82%;
    background:var(--card); border-right:1px solid var(--line); z-index:61;
    display:flex; flex-direction:column; overflow-y:auto;
    transform:translateX(-110%); transition:transform .22s ease;
}
.side-menu.open{ transform:translateX(0); box-shadow:2px 0 22px rgba(0,0,0,0.25); }
.side-list{ padding:10px 8px; overflow-y:auto; flex:1; }
/* Profil-Eintrag mit Avatar + Name (oben) */
.side-list .prof-item{ display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px; text-decoration:none; color:var(--text); margin-bottom:4px; }
.side-list .prof-item:hover{ background:var(--bg); }
.side-list .prof-item.active{ background:var(--accent-grad); color:#fff; }
.side-list .prof-item .tb-avatar{ width:40px;height:40px;font-size:16px; }
.side-list .prof-item.active .tb-avatar{ background:rgba(255,255,255,0.3); }
.side-list .prof-item .pi-txt b{ display:block; font-size:15px; line-height:1.2; }
.side-list .prof-item .pi-txt small{ font-size:12px; opacity:.65; }
.side-list .prof-item.active .pi-txt small{ opacity:.9; }
.side-list a{ display:flex; align-items:center; gap:13px; padding:11px 12px; border-radius:9px; text-decoration:none; color:var(--text); font-weight:600; font-size:15px; }
.side-list a:hover{ background:var(--bg); }
.side-list a.active{ background:var(--accent-grad); color:#fff; }
.side-list a .di{ font-size:20px; width:26px; text-align:center; }
.side-list a .dbadge{ margin-left:auto; background:#dc2626; color:#fff; font-size:11px; font-weight:800; padding:1px 8px; border-radius:999px; }
.side-sep{ height:1px; background:var(--line); margin:8px 4px; }
/* Fester Fuss unten im Menue (Abmelden / Anmelden / Registrieren) */
.side-foot{ flex-shrink:0; border-top:1px solid var(--line); padding:8px; display:flex; flex-direction:column; gap:6px; background:var(--card); }
.side-foot a{ display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:9px; text-decoration:none; font-weight:700; font-size:14.5px; }
.side-foot a .di{ font-size:19px; width:24px; text-align:center; }
.side-foot a.logout{ color:#dc2626; }
.side-foot a.logout:hover{ background:#fef2f2; }
.side-foot a.login{ background:var(--accent-grad); color:#fff; justify-content:center; }
.side-foot a.register{ background:var(--bg); color:var(--accent-2); justify-content:center; }
.side-foot a.register:hover{ background:#fff7ed; }

.with-side .topbar{ max-width:none; left:0; transform:none; width:100%; }
.app-content{ padding:calc(var(--strip) + var(--bar) + 14px) 12px calc(var(--bar) + 28px); }
.app-content .wrap{ max-width:660px; margin:0 auto; }

@media (min-width:1000px){
    .side-menu{ transform:none; box-shadow:none; z-index:40; }
    .side-overlay{ display:none !important; }
    .with-side .topbar .hamb{ display:none; }
    body.with-side .app-content{ padding-left:266px; }
    .with-side .bottombar{ display:none; }
}