/* Plattform-Fusszeile (Rechtstexte). Global im Inertia-Root eingebunden.
   Nutzt bestehende Theme-Variablen -> passt sich Light/Dark automatisch an. */
.app-footer {
    border-top: 1px solid var(--border-light);
    margin-top: 20px;
    padding: 14px 0;
}

.app-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 20px;
}

.app-footer-copy {
    font-size: 13px;
    color: var(--text-muted);
}

.app-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.app-footer-links a {
    font-size: 13px;
    color: var(--text-muted);
    text-decoration: none;
}

.app-footer-links a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

/* Mobil: keine Fusszeile. Dort uebernehmen die feste Bottom-Navigation und
   (im Forum/Chat) das feste Eingabefeld den unteren Bereich; ein Footer wuerde
   sich damit ueberlagern. Die Rechts-Links bleiben ueber Login/Registrierung erreichbar. */
@media (max-width: 768px) {
    .app-footer {
        display: none;
    }
}

/* Fusszeile ausblenden, wenn die Seite/der Tab ein FEST verankertes Eingabefeld
   am unteren Rand hat (Chat, Direktnachrichten, Video-/Blog-Kommentare) - sonst
   ueberlagern sich Fusszeile und Eingabefeld. :has() reagiert live auf Tab-Wechsel
   (Gruppen-Tabs nutzen v-if). Rechts-Links bleiben ueber das Profil-Menue erreichbar.
   Inkl. Diskussions-Antwortfeld (.cd-reply-box: Forum, Blog, Video) - dort klebt das Feld unten. */
.main:has(.sticky-chat-input):not(:has(.chat-shell)) .app-footer,
.main:has(.cd-reply-box) .app-footer {
    display: none;
}
/* Solange Vue den Inhalt noch nicht gemountet hat (#app leer): Fusszeile unsichtbar - sonst stand sie beim Laden unten im Bild und sprang dann weg */
.main:has(> .container > #app:empty) .app-footer { visibility: hidden; }