/* =====================================================================
   muntafuner.at — App-Shell (Facebook-Handy-Optik)
   Ruhiger App-Look. Wird von template.php + index.php (neu) genutzt.
   ===================================================================== */
:root{
    --bg:#f6f7f5;          /* ruhiger App-Hintergrund */
    --card:#ffffff;
    --line:#e6e8df;        /* weiche Trennlinie */
    --text:#1f2937;
    --text2:#6b7280;
    --accent:#0f9f8f;      /* Montafon-Teal */
    --accent-2:#2563eb;    /* klares Blau fuer Links */
    --accent-warm:#f59e0b; /* warmer Akzent */
    --accent-grad:linear-gradient(135deg,#0f9f8f,#2563eb);
    --sun-grad:linear-gradient(135deg,#fbbf24,#f59e0b);
    --soft-grad:linear-gradient(135deg,#ecfeff,#eff6ff);
    --shadow-soft:0 8px 24px rgba(31,41,55,0.08);
    --shell:600px;
    --bar:62px;
    --strip:22px;          /* schmaler "im Aufbau"-Streifen oben */
    --radius:8px;
}
*{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; text-underline-offset:3px;}

/* ---------- "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,#ecfeff,#dbeafe);
    color:#155e75; font-size:11px; font-weight:800; letter-spacing:.2px;
    display:flex; align-items:center; justify-content:center; gap:7px;
    box-shadow:0 1px 4px rgba(15,118,110,0.18);
}

/* ---------- 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:rgba(255,255,255,0.96); border-bottom:1px solid var(--line);
    display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 12px;
    box-shadow:0 8px 22px rgba(31,41,55,0.08);
    backdrop-filter:blur(10px);
}
/* 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:46px; width:auto; max-width:190px; 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; }
/* Markenname in cooler Schrift, mittig in der Leiste */
.topbar .brand-center{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    font-family:'Righteous', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size:21px; line-height:1; color:#0f766e; text-decoration:none;
    white-space:nowrap; letter-spacing:.5px; text-shadow:0 1px 0 rgba(0,0,0,0.06); }
@media (max-width:420px){ .topbar .brand-center{ font-size:18px; } }
/* Quick-Links Bilder/Freunde/Gemeinde — jetzt auf PC UND Handy gleich (1:1 wie Handy). */
.topbar .top-quick{ display:flex; gap:24px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.topbar .top-quick a{ display:flex; flex-direction:column; align-items:center; gap:1px;
    font-size:9.5px; font-weight:800; color:#334155; text-decoration:none; white-space:nowrap;
    padding:4px 7px; border-radius:8px; transition:background .12s, color .12s, transform .12s; }
.topbar .top-quick a:hover{ background:#f1f5f9; color:#0f766e; transform:translateY(-1px); }
.topbar .top-quick a .tq-ic{ font-size:17px; line-height:1; }
/* Markenname nur zeigen, wenn KEINE Quick-Links da sind (= ausgeloggt). */
.topbar:has(.top-quick) .brand-center{ display:none; }
@media (max-width:420px){ .topbar .top-quick{ gap:18px; } }
.tb-btn{
    width:32px; height:32px; border-radius:50%; border:1px solid var(--line); cursor:pointer;
    background:#fff; color:#334155; font-size:15px; text-decoration:none;
    display:flex; align-items:center; justify-content:center; flex-shrink:0; position:relative;
}
.tb-btn:hover{ background:#f1f5f9; color:#0f766e; }
.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:32px;height:32px;border-radius:50%;background:var(--accent-grad);
    color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px;
    text-decoration:none; background-size:cover; background-position:center; }

/* ---------- Inhalt ---------- */
.app-main{
    width:100%; max-width:var(--shell); margin:0 auto; box-sizing:border-box;
    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:10px; box-shadow:0 1px 2px rgba(31,41,55,0.04); overflow:hidden; }

/* Composer */
.composer{ display:flex; align-items:center; gap:9px; padding:9px 12px; }
.composer .tb-avatar{ width:34px;height:34px; }
.composer .ghost-input{
    flex:1; background:var(--bg); border:0; border-radius:999px;
    padding:9px 14px; color:var(--text2); font-size:14px; cursor:pointer; text-align:left;
    text-decoration:none; font-family:inherit;
}
.composer .ghost-input:hover{ background:#eef6f4; color:#0f766e; }
.composer-actions{ display:flex; border-top:1px solid var(--line); }
.composer-actions a{
    flex:1; cursor:pointer; padding:8px; text-decoration:none;
    display:flex; align-items:center; justify-content:center; gap:6px;
    color:var(--text2); font-weight:600; font-size:12.5px;
}
.composer-actions a:hover{ background:var(--bg); }

/* Beitrag-Karte */
.post-head{ display:flex; align-items:center; gap:9px; padding:10px 12px 6px; }
.post-head .tb-avatar{ width:36px;height:36px; }
.post-head .meta{ min-width:0; flex:1; }
.post-head .meta b{ display:block; font-size:13.5px; line-height:1.2; }
.post-head .meta span{ font-size:11.5px; color:var(--text2); }
.post-head .meta a{ text-decoration:none; }
.post-open{ color:var(--text2); text-decoration:none; font-size:17px; padding:0 4px; border-radius:7px; }
.post-open:hover{ background:#f1f5f9; color:#0f766e; }
.post-title{ padding:2px 12px 0; margin:0; font-size:14.5px; font-weight:700; color:var(--text);
    text-decoration:none; display:block; }
.post-body{ padding:3px 12px 10px; font-size:14px; 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, .post-foot button{ flex:1; cursor:pointer; padding:7px 6px; color:var(--text2); text-decoration:none;
    font-weight:700; font-size:11.8px; display:flex; align-items:center; justify-content:center; gap:5px;
    background:none; border:0; outline:none; box-shadow:none; -webkit-appearance:none; appearance:none; font-family:inherit; }
.post-foot button:focus{ outline:none; }
.post-foot a:hover, .post-foot button:hover{ background:#f8fafc; color:#0f766e; }
.post-foot a.on, .post-foot .hock-btn.on{ color:var(--accent-2); font-weight:800; }
.post-foot .hock-btn{ gap:5px; }
.post-foot .hock-btn .hk-ic{ font-size:14px; line-height:1; display:inline-block; transition:transform .15s; }
.post-foot .hock-btn .hk-cnt{ font-size:11.5px; font-weight:800; color:var(--text2); margin-left:2px; }
.post-foot .hock-btn .hk-cnt[hidden]{ display:none; }
.post-foot .hock-btn.on .hk-cnt{ color:var(--accent-2); }
.post-foot .hock-btn.on .hk-ic{ transform:scale(1.18) rotate(-8deg); }
.post-foot .hock-btn.pop .hk-ic{ animation:hockpop .38s ease; }
@keyframes hockpop{ 0%{transform:scale(1);} 40%{transform:scale(1.55) rotate(-12deg);} 100%{transform:scale(1.18) rotate(-8deg);} }

/* Inline-Kommentare */
.cmts{ border-top:1px solid var(--line); padding:8px 12px 10px; }
.cmt-form{ display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.cmt-input{ flex:1; min-width:0; border:1px solid var(--line); border-radius:18px; padding:8px 13px; font-family:inherit; font-size:13.5px; background:var(--bg); }
.cmt-input:focus{ outline:none; border-color:var(--accent); background:#fff; }
.cmt-send{ width:32px; height:32px; border-radius:50%; border:0; background:var(--accent-grad); color:#fff; font-size:14px; cursor:pointer; flex-shrink:0; }
.cmt-login{ display:block; font-size:13px; color:var(--accent-2); text-decoration:none; padding:6px 0; font-weight:700; }
.cmt-list{ display:flex; flex-direction:column; gap:7px; }
.cmt{ display:flex; gap:8px; align-items:flex-start; }
.cmt-av{ width:30px; height:30px; border-radius:50%; background:var(--accent-grad) center/cover no-repeat; color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; }
.cmt-bub{ background:var(--bg); border-radius:14px; padding:7px 12px; font-size:13.5px; line-height:1.4; min-width:0; }
.cmt-name{ font-weight:700; color:var(--text); text-decoration:none; margin-right:4px; }
.cmt-time{ font-size:10.5px; color:var(--text2); margin-top:2px; }
.cmt-more{ display:block; width:100%; margin-top:8px; padding:7px 0; background:none; border:0; color:var(--accent-2); font-weight:700; font-size:13px; cursor:pointer; text-align:left; font-family:inherit; }
.cmt-more[hidden]{ display:none; }
.cmt-more:hover{ text-decoration:underline; }
.post-photo img.zoomable{ cursor:zoom-in; }

/* Bild-Grossansicht (Lightbox) */
.lightbox{ position:fixed; inset:0; z-index:500; background:rgba(0,0,0,.92); display:none; align-items:center; justify-content:center; padding:10px; }
.lightbox.show{ display:flex; }
.lightbox img{ max-width:100%; max-height:100%; border-radius:6px; }

/* Teilen-Menü (Fallback wenn kein natives Teilen) */
.share-menu{ position:fixed; inset:0; z-index:480; background:rgba(15,23,42,.5); display:flex; align-items:flex-end; justify-content:center; }
.share-menu[hidden]{ display:none; }
.share-menu-card{ background:var(--card); width:100%; max-width:var(--shell); border-radius:16px 16px 0 0; padding:10px 12px calc(12px + env(safe-area-inset-bottom,0px)); }
.share-menu-card h4{ margin:6px 8px 8px; color:var(--text); font-size:15px; }
.share-menu a, .share-menu button{ display:flex; align-items:center; gap:12px; width:100%; padding:13px 12px; border:0; background:none;
    font-family:inherit; font-size:15px; font-weight:600; color:var(--text); text-decoration:none; cursor:pointer; border-radius:10px; text-align:left; }
.share-menu a:hover, .share-menu button:hover{ background:var(--bg); }
.share-menu a .si, .share-menu button .si{ font-size:20px; width:26px; text-align:center; }

/* 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:8px; padding:7px; font-weight:800; font-size:12.5px; color:#0f766e; text-decoration:none;
    margin:2px 0 6px; }
.more-btn:hover{ background:#ecfeff; border-color:#99f6e4; }

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

/* ---------- 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:rgba(255,255,255,0.96); border-top:1px solid var(--line);
    display:flex; align-items:stretch; box-shadow:0 -8px 22px rgba(31,41,55,0.08);
    backdrop-filter:blur(10px);
}
.bottombar a, .bottombar button{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    text-decoration:none; color:var(--text2); font-size:9.8px; font-weight:700;
    background:none; border:0; cursor:pointer; font-family:inherit;
}
.bottombar a .bi, .bottombar button .bi{ font-size:17px; line-height:1; }
.bottombar a:hover, .bottombar button:hover{ color:#0f766e; }
.bottombar a.active{ color:#0f766e; }
.bnav-badge{ position:absolute; top:-7px; right:-11px; background:#dc2626; color:#fff; font-size:10px; font-weight:800;
    min-width:16px; height:16px; padding:0 4px; border-radius:999px; line-height:16px; text-align:center; box-shadow:0 0 0 2px var(--card); }
/* Handy: roter, leicht pulsierender Nachrichten-Hinweis links unter dem Menü-Pfeil */
.msg-pulse{ display:none; }
@media (max-width:640px){
    .msg-pulse.show{ position:fixed; left:0; top:calc(50% + 62px); z-index:62;
        width:34px; height:48px; border-radius:0 13px 13px 0; background:#dc2626; color:#fff;
        display:flex; align-items:center; justify-content:center; text-decoration:none; font-size:19px;
        box-shadow:2px 2px 12px rgba(220,38,38,.55); animation:msgPulse 1.5s ease-in-out infinite; }
    .msg-pulse .msg-pulse-n{ position:absolute; top:-5px; right:-5px; background:#fff; color:#dc2626;
        font-size:10px; font-weight:800; min-width:16px; height:16px; line-height:16px; text-align:center;
        padding:0 3px; border-radius:999px; box-shadow:0 0 0 2px #dc2626; }
}
@keyframes msgPulse{
    0%,100%{ transform:scale(1);   box-shadow:2px 2px 10px rgba(220,38,38,.45); }
    50%    { transform:scale(1.09); box-shadow:2px 2px 20px rgba(220,38,38,.85); }
}
/* Drawer: Leute-Suche oben */
.side-search{ padding:2px 8px 6px; }
.side-search input{ width:100%; box-sizing:border-box; padding:9px 12px; border:1px solid var(--line); border-radius:9px;
    font-size:14px; font-family:inherit; background:var(--bg); color:var(--text); }
.side-search input:focus{ outline:none; border-color:#0f9f8f; background:#fff; box-shadow:0 0 0 3px rgba(15,159,143,.12); }
.side-suggest{ margin:0 8px 6px; background:#fff; border:1px solid var(--line); border-radius:9px; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,0.12); }
.side-suggest .ss-item{ display:flex; align-items:center; gap:9px; padding:7px 10px; text-decoration:none; color:var(--text); border-bottom:1px solid var(--line); }
.side-suggest .ss-item:last-child{ border-bottom:0; }
.side-suggest .ss-item:hover{ background:var(--bg); }
.side-suggest .ss-av{ width:30px; height:30px; border-radius:50%; flex-shrink:0; background:var(--accent-grad); background-size:cover; background-position:center; color:#fff; font-weight:800; font-size:12px; display:flex; align-items:center; justify-content:center; }
.side-suggest .ss-name{ font-size:13.5px; font-weight:600; line-height:1.2; display:flex; flex-direction:column; min-width:0; }
.side-suggest .ss-name small{ font-size:10.5px; color:var(--text2); font-weight:500; }
/* Drawer: "Neue aus deiner Gemeinde"-Hinweis unten */
.side-gemhint{ display:flex; align-items:center; gap:10px; width:calc(100% - 16px); margin:6px 8px; padding:10px 12px;
    background:var(--soft-grad); border:1px solid #bae6fd; border-radius:8px;
    cursor:pointer; font-family:inherit; text-align:left; color:#155e75; animation:gemHintPulse 2s ease-in-out infinite; }
.side-gemhint .gh-ic{ font-size:22px; flex-shrink:0; line-height:1; }
.side-gemhint .gh-txt{ flex:1; min-width:0; line-height:1.25; }
.side-gemhint .gh-txt b{ font-size:13px; display:block; }
.side-gemhint .gh-txt small{ font-size:11px; color:#64748b; }
.side-gemhint .gh-badge{ flex-shrink:0; background:#dc2626; color:#fff; font-size:11px; font-weight:800; min-width:20px; height:20px;
    border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 6px; }
@keyframes gemHintPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(234,88,12,0.30);} 50%{ box-shadow:0 0 0 6px rgba(234,88,12,0);} }
/* Gemeinde-Hinweis-Popup (zentriert) */
.gemhint-modal{ position:fixed; inset:0; z-index:9997; background:rgba(15,23,42,0.72); align-items:center; justify-content:center; padding:16px; }
.gemhint-card{ background:#fff; border-radius:18px; max-width:440px; width:100%; max-height:84vh; display:flex; flex-direction:column;
    padding:20px; box-shadow:0 24px 60px rgba(0,0,0,0.4); position:relative; }
.gemhint-x{ position:absolute; top:10px; right:12px; background:none; border:0; font-size:26px; color:var(--text2); cursor:pointer; line-height:1; }
.gemhint-card h2{ margin:0 6px 4px 0; color:var(--accent-2); font-size:19px; }
.gemhint-sub{ color:var(--text2); font-size:13px; margin:0 0 14px; line-height:1.45; }
.gemhint-list{ overflow-y:auto; display:flex; flex-direction:column; gap:6px; }
.gemhint-row{ display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:10px; background:var(--bg); }
.gemhint-av{ width:38px; height:38px; border-radius:50%; flex-shrink:0; background:var(--accent-grad); background-size:cover;
    background-position:center; color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; text-decoration:none; }
.gemhint-name{ flex:1; min-width:0; font-weight:700; color:var(--text); font-size:14.5px; text-decoration:none;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gemhint-add{ flex-shrink:0; background:var(--accent-grad); color:#fff; border:0; border-radius:8px; padding:7px 12px;
    font-weight:800; font-size:12.5px; cursor:pointer; font-family:inherit; }
.gemhint-add.done{ background:#dcfce7; color:#166534; cursor:default; }
.gemhint-add:disabled{ opacity:.75; }
.bottombar .plus .bi{
    width:36px;height:36px;border-radius:50%;background:var(--accent-grad);
    color:#fff; display:flex; align-items:center; justify-content:center; margin-top:-12px;
    box-shadow:0 6px 14px rgba(37,99,235,0.28); font-size:20px;
}

/* ---------- Plus-Sheet (Erstellen-Menue) ---------- */
.plus-sheet{ position:fixed; inset:0; z-index:120; background:rgba(15,23,42,0.5); display:flex; align-items:flex-end; justify-content:center; }
.plus-sheet[hidden]{ display:none; }
.plus-sheet-card{ background:var(--card); width:100%; max-width:var(--shell); border-radius:16px 16px 0 0; padding:10px 12px calc(12px + env(safe-area-inset-bottom,0px)); animation:psUp .18s ease; }
@keyframes psUp{ from{ transform:translateY(30px); } to{ transform:translateY(0); } }
.ps-handle{ width:40px; height:4px; background:#cbd5e1; border-radius:2px; margin:4px auto 12px; }
.ps-item{ display:flex; align-items:center; gap:12px; width:100%; padding:12px 12px; border:0; background:none;
    font-family:inherit; font-size:15px; font-weight:600; color:var(--text); text-decoration:none; cursor:pointer; border-radius:10px; text-align:left; }
.ps-item:hover{ background:var(--bg); }
.ps-item span{ font-size:20px; width:26px; text-align:center; }
.ps-cancel{ width:100%; margin-top:8px; padding:12px; background:var(--bg); border:0; border-radius:10px; font-weight:700; color:var(--text2); cursor:pointer; font-family:inherit; }

/* ---------- 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:0; margin-left:0;
    width:276px; max-width:80%; height:100%; background:var(--card); z-index:61;
    transform:translateX(calc(-100% - 24px)); 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); }

/* Edge-Pfeile (nur Handy ≤640px): kleine Pfeile links (Menü) / rechts (Kalender) */
.edge-tab{ display:none; }
@media (max-width:640px){
    .edge-tab{ position:fixed; top:50%; transform:translateY(-50%); z-index:70; width:26px; height:88px;
        display:flex; align-items:center; justify-content:center; background:var(--accent-grad); color:#fff; border:0;
        cursor:pointer; font-size:18px; font-weight:800; padding:0; box-shadow:0 2px 10px rgba(0,0,0,.26);
        -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
    /* Unsichtbare, vergroesserte Tap-Zone (nach innen + oben/unten), damit man nicht genau treffen muss */
    .edge-tab::after{ content:''; position:absolute; top:-16px; bottom:-16px; }
    .edge-tab-left{ left:0; border-radius:0 11px 11px 0; }
    .edge-tab-left::after{ left:0; right:-22px; }
    .edge-tab-right{ right:0; border-radius:11px 0 0 11px; }
    .edge-tab-right::after{ right:0; left:-22px; }
    /* Menü-Drawer schiebt sich vom linken Rand über den Inhalt */
    .drawer{ left:0; margin-left:0; width:84%; max-width:300px; }
}
.drawer-logo{ padding:6px 12px; background:#fff; border-bottom:1px solid var(--line); display:flex; justify-content:center; flex-shrink:0; }
.drawer-logo img{ width:78%; max-width:188px; height:auto; display:block; }

/* Desktop-Struktur: zentrierte Gruppe aus Menue, Inhalt und Kalender. */
@media (min-width:1100px){
    .drawer{
        left:max(16px, calc(50% - 580px));
        width:276px;
        max-width:276px;
        transform:none;
        box-shadow:0 8px 24px rgba(31,41,55,0.10);
        border-right:1px solid var(--line);
        border-radius:0;
        z-index:42;
    }
    .drawer-overlay{ display:none !important; }
    .app-main{
        max-width:600px;
        width:600px;
        margin-left:max(314px, calc(50% - 280px));
        margin-right:auto;
    }
    .topbar,
    .build-strip,
    .bottombar{
        max-width:600px;
    }
    .topbar #menuBtn{ display:none; }
    .bottombar{ display:none; }
}

/* ===================== MESSENGER / CHAT ===================== */
.app-main:has(.msgr), .app-main:has(.chat-host--full){ min-height:0; padding:0; }
.chat-host--full{ position:fixed; top:calc(var(--strip) + var(--bar)); bottom:var(--bar); left:50%; transform:translateX(-50%);
    width:100%; max-width:var(--shell); display:flex; }
.chat-host--full .chat{ width:100%; }
.chat{ display:flex; flex-direction:column; height:100%; min-height:0; background:var(--bg); }
.chat-head{ flex-shrink:0; display:flex; align-items:center; gap:6px; background:var(--card); border-bottom:1px solid var(--line); padding:6px 10px; }
.chat-head .chat-back{ font-size:24px; color:var(--accent-2); text-decoration:none; line-height:1; padding:0 4px; display:none; }
.chat-head .chat-headlink{ display:flex; align-items:center; gap:9px; text-decoration:none; min-width:0; }
.chat-head .chat-av{ width:32px;height:32px;border-radius:50%;background:var(--accent-grad) center/cover no-repeat;color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0; }
.chat-head .chat-name{ font-weight:700; font-size:15px; color:var(--text); overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.chat-scroll{ flex:1; min-height:0; overflow-y:auto; padding:10px; }
.cmsg{ display:flex; margin:3px 0; }
.cmsg.me{ justify-content:flex-end; }
.cwrap{ max-width:80%; display:flex; flex-direction:column; }
.cmsg.me .cwrap{ align-items:flex-end; }
.cbubble{ padding:7px 11px; border-radius:14px; font-size:14px; line-height:1.4; word-break:break-word; }
.cmsg.them .cbubble{ background:var(--card); border:1px solid var(--line); border-bottom-left-radius:4px; }
.cmsg.me .cbubble{ background:var(--accent-grad); color:#fff; border-bottom-right-radius:4px; }
.ctime{ font-size:10px; color:var(--text2); margin:1px 4px 0; }
.chat-empty{ text-align:center; color:var(--text2); padding:30px 16px; font-size:14px; }
.chat-compose{ flex-shrink:0; display:flex; gap:8px; align-items:flex-end; background:var(--card); border-top:1px solid var(--line); padding:7px 10px; }
.chat-compose textarea{ flex:1; resize:none; border:1px solid var(--line); border-radius:18px; padding:8px 13px; font-family:inherit; font-size:14px; max-height:120px; background:var(--bg); }
.chat-compose textarea:focus{ outline:none; border-color:var(--accent); background:#fff; }
.chat-compose button{ width:38px; height:38px; border-radius:50%; border:0; background:var(--accent-grad); color:#fff; font-size:16px; cursor:pointer; flex-shrink:0; }

.msgr-searchbar{ position:fixed; top:calc(var(--strip) + var(--bar)); left:50%; transform:translateX(-50%);
    width:100%; max-width:var(--shell); height:48px; z-index:46; background:var(--card); border-bottom:1px solid var(--line);
    display:flex; align-items:center; gap:8px; padding:0 10px; }
.msgr-searchbar input{ flex:1; min-width:0; border:1px solid var(--line); border-radius:18px; padding:8px 14px; font-size:13px; background:var(--bg); }
.msgr-searchbar input:focus{ outline:none; border-color:var(--accent); background:#fff; }
.msgr-searchbar button{ border:0; background:var(--accent-grad); color:#fff; border-radius:14px; padding:8px 14px; font-weight:700; font-size:13px; cursor:pointer; flex-shrink:0; }
.msgr{ position:fixed; top:calc(var(--strip) + var(--bar) + 48px); bottom:var(--bar); left:50%; transform:translateX(-50%);
    width:100%; max-width:var(--shell); display:grid; grid-template-columns:1fr; background:var(--bg); }
@media(min-width:760px){ .msgr{ grid-template-columns:172px 1fr; } }
@media (min-width:1100px){
    .msgr-searchbar,
    .msgr,
    .chat-host--full{
        left:max(314px, calc(50% - 280px));
        transform:none;
        width:600px;
        max-width:600px;
    }
    .msgr,
    .chat-host--full{
        bottom:0;
    }
}
.msgr-list{ overflow-y:auto; border-right:1px solid var(--line); background:var(--card); min-height:0; }
.msgr-chat{ min-height:0; display:flex; }
.msgr-chat .chat{ width:100%; }
.msgr-search{ display:flex; gap:6px; padding:8px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--card); z-index:1; }
.msgr-search input{ flex:1; border:1px solid var(--line); border-radius:18px; padding:7px 12px; font-size:13px; background:var(--bg); }
.msgr-search button{ border:0; background:var(--accent-grad); color:#fff; border-radius:50%; width:32px;height:32px; cursor:pointer; flex-shrink:0; }
.msgr-sec{ font-size:11px; font-weight:700; color:var(--text2); text-transform:uppercase; letter-spacing:.4px; padding:8px 10px 4px; }
.conv{ display:flex; align-items:center; gap:7px; padding:8px 8px; text-decoration:none; color:var(--text); border-bottom:1px solid var(--line); }
.conv:hover, .conv.active{ background:var(--bg); }
.conv .conv-av{ width:32px;height:32px;border-radius:50%;background:var(--accent-grad) center/cover no-repeat;color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0; }
.conv .conv-mid{ flex:1; min-width:0; }
.conv .conv-name{ font-weight:700; font-size:14px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.conv .conv-snip{ font-size:12px; color:var(--text2); overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.conv .conv-meta{ display:flex; flex-direction:column; align-items:flex-end; gap:3px; flex-shrink:0; }
.conv .conv-time{ font-size:10px; color:var(--text2); }
.conv .conv-unread{ background:#dc2626; color:#fff; font-size:11px; font-weight:800; min-width:18px; height:18px; border-radius:999px; display:flex;align-items:center;justify-content:center; padding:0 5px; }
.msgr-placeholder{ display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--text2); font-size:14px; padding:30px; text-align:center; gap:8px; }
@media(max-width:759px){
    .msgr.has-chat .msgr-list{ display:none; }
    .msgr:not(.has-chat) .msgr-chat{ display:none; }
    .chat-head .chat-back{ display:inline; }
}
.drawer-head{ background:var(--accent-grad); color:#fff; padding:14px 14px;
    display:flex; align-items:center; gap:11px; text-decoration:none; }
.drawer-head .tb-avatar{ width:40px;height:40px;font-size:16px;background:rgba(255,255,255,0.25); }
.drawer-list{ padding:6px; overflow-y:auto; flex:1; }
.drawer-list a{ display:flex; align-items:center; gap:12px; padding:9px 11px; border-radius:8px;
    text-decoration:none; color:var(--text); font-weight:600; font-size:14px; }
.drawer-list a:hover{ background:var(--bg); }
.drawer-list a .di{ font-size:18px; width:24px; 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:#f8fafc; color:#0f766e; }
.side-list .prof-item.active{ background:var(--accent-grad); color:#fff; }
.side-list .prof-item .tb-avatar{ display:none; }
.side-list .prof-item.active .tb-avatar{
    box-shadow:0 0 0 2px rgba(255,255,255,0.55);
    background-size:cover;
    background-position:center;
}
.side-list .prof-item .pi-txt b{ display:block; font-size:14px; line-height:1.2; }
.side-list .prof-item .pi-txt small{ font-size:11.5px; opacity:.65; }
.side-list .prof-item.active .pi-txt small{ opacity:.9; }
.side-list a{ display:flex; align-items:center; gap:11px; padding:8px 10px; border-radius:8px; text-decoration:none; color:var(--text); font-weight:650; font-size:13.5px; }
.side-list a:hover{ background:#f8fafc; color:#0f766e; }
.side-list a.active{ background:var(--accent-grad); color:#fff; }
.side-list a .di{ font-size:17px; width:23px; 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; }
/* Gemeinde-Ausklapper im Menue */
.side-list .side-gem-toggle{ display:flex; align-items:center; gap:11px; width:100%; padding:8px 10px; border-radius:8px;
    background:none; border:0; cursor:pointer; font-family:inherit; font-weight:700; font-size:13.5px; color:var(--text); text-align:left; }
.side-list .side-gem-toggle:hover{ background:#f8fafc; color:#0f766e; }
.side-list .side-gem-toggle .di{ font-size:17px; width:23px; text-align:center; }
.side-list .side-gem-toggle .chev{ margin-left:auto; color:var(--text2); font-size:12px; }
.side-list .side-gem-list a{ padding-left:34px; font-size:14px; }
.side-list .side-gem-list a .di{ color:var(--text2); }
/* 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:10px; padding:9px 11px; border-radius:8px; text-decoration:none; font-weight:800; font-size:13.5px; }
.side-foot a .di{ font-size:17px; width:23px; 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:#f8fafc; color:#0f766e; justify-content:center; }
.side-foot a.register:hover{ background:#ecfeff; }

.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; }
}

/* ---------- Rubriken-Seite (rubriken.php) — global, damit es auch nach pjax-Wechsel greift ---------- */
.rub-topbar{ top:var(--strip); justify-content:flex-start; padding:0 12px; }
.rub-back{ font-weight:800; font-size:16px; color:var(--accent-2); text-decoration:none; }
.rub-grid{ display:flex; flex-direction:column; gap:8px; width:100%; }
.rub-grid[hidden]{ display:none; }
.rub-card{ display:flex; align-items:center; gap:12px; width:100%; box-sizing:border-box;
    background:var(--card); border:1px solid var(--line);
    border-radius:10px; padding:13px 16px; text-decoration:none; color:var(--text); font-weight:600; font-size:15px; transition:background .12s, border-color .12s; }
.rub-card:hover{ background:#fff7ed; border-color:#fed7aa; }
.rub-ic{ font-size:21px; line-height:1; flex-shrink:0; width:26px; text-align:center; }
.rub-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rub-arrow{ flex-shrink:0; color:var(--text2); font-size:18px; font-weight:700; line-height:1; }
.rub-more{ display:block; width:100%; margin:12px 0 4px; padding:11px; background:var(--card); border:1px solid var(--line);
    border-radius:10px; font-weight:700; color:var(--accent-2); cursor:pointer; font-family:inherit; font-size:14px; }
.rub-more:hover{ background:#fff7ed; }

/* ===== Admin-Seiten: breiter (kein Kalender), passt rechts neben das Menü ===== */
body.is-admin .app-main{ max-width:900px; }
@media (min-width:1000px){
    /* Inhalt beginnt direkt rechts vom Menü (dessen rechte Kante ≈ 50%vw − 328px) und
       läuft bis kurz vor den rechten Rand — so wird der leere "Kalender-Bereich" genutzt. */
    body.is-admin .app-main{ margin-left:calc(50% - 312px); margin-right:24px; max-width:1200px; width:auto; }
}
/* Sicherheitsnetz: breite Tabellen/Inhalte in Admin nie aus dem Bild laufen lassen */
body.is-admin .app-main table{ max-width:100%; }
body.is-admin .app-main img{ max-width:100%; height:auto; }

/* ===== Admin überall kompakt: kleinere Buttons, engere Tabellen & Felder ===== */
body.is-admin .app-main .btn{ padding:6px 12px !important; font-size:12.5px !important; border-radius:7px; gap:5px; font-weight:700; }
body.is-admin .app-main .btn:hover{ transform:none; box-shadow:none; }
body.is-admin .app-main .btn-sm{ padding:4px 8px !important; font-size:11.5px !important; }
body.is-admin .app-main button:not(.btn):not(.tb-btn):not(.plus){ font-size:12.5px; }
body.is-admin .app-main table{ font-size:12.5px; border-collapse:collapse; }
body.is-admin .app-main table th, body.is-admin .app-main table td{ padding:6px 9px; }
body.is-admin .app-main input, body.is-admin .app-main select, body.is-admin .app-main textarea{ font-size:13px; }
body.is-admin .app-main h1{ font-size:22px; }
body.is-admin .app-main h2{ font-size:17px; }
body.is-admin .app-main h3{ font-size:15px; }