/* ============================================================
   ===== KOPFLEISTE + FUSSBEREICH · NEU (schmal, modern) =====
   Bleibt in den bisherigen Hoehen (Kopf 60/46 px, untere Leiste 50 px) - nur Optik.
   Rueckgaengig: bash /root/bak-kopffuss-20261109/zurueck.sh
   ============================================================ */

/* ---------- Kopfleiste ---------- */
html body .kopf {
    background: linear-gradient(180deg, #b50c0c 0%, #930808 100%);
    border-bottom: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 6px 22px rgba(60,0,0,.30);
}
html body .logo a { display: flex; align-items: center; gap: 10px; text-decoration: none; }
html body .logo img { height: 40px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
html body .kopf .kopf-mitte { gap: 2px; align-items: center; }
html body .kopf .such-trigger,
html body .kopf .hamburger {
    width: 42px; height: 42px; min-width: 42px; padding: 0; position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%; background: transparent; box-shadow: none; color: #fff; font-size: 1.12rem;
    transition: background .18s, transform .15s; cursor: pointer;
}
html body .kopf .such-trigger:hover,
html body .kopf .hamburger:hover { background: rgba(255,255,255,.16); }
html body .kopf .such-trigger:active,
html body .kopf .hamburger:active { transform: scale(.9); background: rgba(255,255,255,.24); }
/* "Wer ist online" (Developer): Punkt + Zahl nebeneinander, ohne Ueberlappung */
html body .kopf .online-trigger { width: auto; min-width: 0; padding: 0 12px; gap: 7px; border-radius: 999px; }
html body .kopf .online-trigger .online-trigger-zahl { font-size: .86rem; font-weight: 700; letter-spacing: .01em; position: static; background: none; padding: 0; min-width: 0; }
html body .kopf .btn-header {
    display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 15px; box-sizing: border-box;
    border-radius: 999px; border: 0; background: transparent;
    color: #fff; font-weight: 600; font-size: .86rem; text-decoration: none; transition: background .15s, transform .15s;
}
html body .kopf .btn-header:hover { background: rgba(255,255,255,.16); }
html body .kopf a.btn-header[href^="/registrierung"] { background: #fff; color: #a70909; border-color: #fff; font-weight: 700; box-shadow: 0 3px 10px rgba(0,0,0,.18); }
html body .kopf a.btn-header[href^="/registrierung"]:hover { background: #fff2f2; }
html body .kopf .benutzer-name {
    border-radius: 999px; border: 0; background: transparent; box-shadow: none; padding-right: 10px;
    transition: background .18s;
}
html body .kopf .benutzer-name:hover { background: rgba(255,255,255,.16); }
@media (max-width: 768px) {
    html body .kopf .such-trigger, html body .kopf .hamburger { width: 38px; height: 38px; min-width: 38px; font-size: 1.05rem; }
    html body .kopf .online-trigger { width: auto; padding: 0 8px; gap: 5px; flex-shrink: 0; }
    html body .kopf .kopf-mitte { gap: 0; }
    html body .kopf .btn-header { height: 32px; padding: 0 10px; border-radius: 10px; }
    html body .logo img { height: 34px; }
}

/* ---------- "Wer ist online" + Fussbereich: eine ruhige, dunkle Flaeche ---------- */
html body .wer-online-leiste {
    margin-top: 1.4rem; background: #1b0b0d; border-top: 3px solid #a70909; border-bottom: 1px solid rgba(255,255,255,.07);
}
html body .wol-inner { display: flex; align-items: center; gap: 14px; padding: 8px 1rem; }
html body .wol-liste { flex: 1 1 auto; min-width: 0; }
html body .wol-chip { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.07); padding: 2px 10px 2px 2px; font-size: .74rem; }
html body .wol-chip:hover { background: rgba(255,255,255,.16); }
html body .wol-chip .wol-seit { color: rgba(255,255,255,.55); font-size: .68rem; }
html body .wol-gaeste { flex: none; margin: 0; padding: 0 0 0 14px; border-top: 0; border-left: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.7); font-size: .74rem; white-space: nowrap; }

html body .site-footer { background: #12090a; border-top: 0; }
html body .site-footer::before { display: none; }
html body .footer-app-cta { gap: .5rem; padding: .5rem 1rem; background: transparent; border-bottom: 1px solid rgba(255,255,255,.07); }
html body .footer-app-text { color: rgba(255,255,255,.62); font-size: .74rem; }
html body .footer-app-text i { color: #e0674f; }
html body .footer-app-btn { padding: .28rem .8rem; font-size: .74rem; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); }
html body .footer-app-btn i { font-size: .85rem; }
html body .footer-spenden-btn { background: #a70909; border-color: #a70909; }
html body .footer-bottom { padding: .55rem 1rem .7rem; font-size: .72rem; color: rgba(255,255,255,.5); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 16px; }
html body .footer-bottom .sep { display: none; }
html body .footer-bottom a { color: rgba(255,255,255,.72); font-weight: 500; }
html body .footer-bottom a:hover { color: #fff; text-decoration: none; }
html body .footer-bottom a i { opacity: .6; margin-right: 3px; }

/* ---------- Untere Menueleiste ---------- */
html body .mobile-footer-nav {
    background: linear-gradient(180deg, #a70909 0%, #8d0707 100%);
    border-top: 1px solid rgba(255,255,255,.16); box-shadow: 0 -6px 20px rgba(60,0,0,.28);
}
html body .mobile-footer-nav .mfn-item { font-size: .62rem; opacity: .92; transition: opacity .15s, background .15s; }
html body .mobile-footer-nav .mfn-item:active { opacity: 1; background: rgba(255,255,255,.12); }

/* ---------- Handy: Fussbereich deutlich kompakter ---------- */
@media (max-width: 640px) {
    html body .wol-inner { flex-direction: column; align-items: stretch; gap: 6px; padding: 8px .8rem; }
    html body .wol-gaeste { padding: 6px 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.1); }
    html body .footer-app-cta { flex-direction: row; flex-wrap: nowrap; gap: .4rem; padding: .55rem .8rem; justify-content: center; }
    html body .footer-app-text { display: none; }
    html body .footer-app-btn { flex: 1 1 0; justify-content: center; max-width: 140px; padding: .45rem .5rem; font-size: .76rem; }
    html body .footer-bottom { gap: 6px 14px; padding: .55rem .8rem .7rem; }
}