* { box-sizing: border-box; }
body {
    font-family: system-ui, -apple-system, sans-serif;
    background: #0f1720; color: #e8eef5; margin: 0;
    padding-bottom: 40px;
}
.topbar {
    background: #1a2530; border-bottom: 2px solid #e63946;
    padding: 14px 20px; display: flex; justify-content: space-between;
    align-items: center; position: sticky; top: 0; z-index: 10;
}
.topbar h1 { color: #e63946; margin: 0; font-size: 22px; letter-spacing: 1px; }
.topbar .user { font-size: 14px; color: #9fb3c8; }
.topbar a { color: #e63946; text-decoration: none; margin-left: 12px; font-size: 14px; }
.wrap { max-width: 620px; margin: 0 auto; padding: 16px; }
.karte { background: #1a2530; border-radius: 14px; padding: 16px; margin-bottom: 14px; }
.poster textarea {
    width: 100%; border: 1px solid #33414f; background: #0f1720; color: #e8eef5;
    border-radius: 10px; padding: 12px; font-size: 16px; resize: vertical; min-height: 90px;
}
.poster button {
    margin-top: 10px; background: #e63946; color: #fff; border: 0;
    border-radius: 8px; padding: 11px 22px; font-size: 16px; font-weight: 700; cursor: pointer;
    float: right;
}
.poster::after { content: ""; display: block; clear: both; }
.post-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 14px; }
.funkname { font-weight: 700; color: #e63946; }
.rolle { background: #33414f; color: #cfe0f0; padding: 2px 8px; border-radius: 10px; font-size: 12px; }
.zeit { color: #6b8299; margin-left: auto; font-size: 12px; }
.post-text { font-size: 16px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; }
.leer { text-align: center; color: #6b8299; padding: 40px 0; }

/* Emoji-Picker */
.emoji-btn {
    background: #33414f; border: 0; border-radius: 8px; cursor: pointer;
    font-size: 20px; padding: 6px 12px; float: left;
}
.emoji-panel {
    display: none; flex-wrap: wrap; gap: 4px; margin-top: 10px; clear: both;
    background: #0f1720; border: 1px solid #33414f; border-radius: 10px;
    padding: 10px; max-height: 180px; overflow-y: auto;
}
.emoji-item { font-size: 22px; cursor: pointer; padding: 4px; border-radius: 6px; }
.emoji-item:hover { background: #33414f; }

/* Knopf-Leiste im Poster: Emoji links, Funken rechts */
.poster-leiste { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.poster-leiste .emoji-btn { float: none; margin: 0; }
.poster-leiste .funken-btn {
    float: none; margin: 0; background: #e63946; color: #fff; border: 0;
    border-radius: 8px; padding: 11px 22px; font-size: 16px; font-weight: 700; cursor: pointer;
}
.emoji-panel { order: -1; }

/* Bewerten */
.stimmen-leiste { margin-top: 12px; }
.stimm-form { display: inline-flex; align-items: center; gap: 6px;
    background: #0f1720; border: 1px solid #33414f; border-radius: 20px; padding: 4px 8px; }
.daumen { background: none; border: 0; cursor: pointer; font-size: 20px; padding: 4px 8px; border-radius: 14px; }
.daumen:hover { background: #33414f; }
.daumen.aktiv-hoch { background: #1c6b3a; }
.daumen.aktiv-runter { background: #7a1c25; }
.stimm-zahl { min-width: 24px; text-align: center; font-weight: 700; font-size: 15px; }

/* Getrennte Daumen-Zahlen (Facebook-Stil) */
.daumen .zahl { font-size: 15px; font-weight: 700; margin-left: 4px; }
.stimm-form { gap: 10px; }

/* Daumen-Zahlen gut lesbar in Weiß */
.daumen { color: #ffffff; }
.daumen .zahl { color: #ffffff; font-size: 15px; font-weight: 700; }

/* Kommentare */
.zurueck { display: inline-block; color: #e63946; text-decoration: none; margin-bottom: 12px; }
.komm-titel { color: #9fb3c8; font-size: 16px; margin: 20px 0 12px; }
.kommentar { background: #16202b; border-left: 3px solid #e63946; }
.komm-link { display: inline-block; margin-left: 14px; color: #6b8299; text-decoration: none; font-size: 14px; vertical-align: middle; }
.komm-link:hover { color: #e63946; }
.stimmen-leiste { display: flex; align-items: center; }

/* Antworten auf Kommentare (eine Ebene) */
.antwort-ebene { margin-left: 28px; border-left: 3px solid #6b8299; background: #131c25; }
.antwort-link { display: inline-block; margin-top: 8px; color: #6b8299; text-decoration: none; font-size: 13px; }
.antwort-link:hover { color: #e63946; }
.antwort-form { margin-top: 10px; }
.antwort-form textarea {
    width: 100%; box-sizing: border-box; border: 1px solid #33414f; background: #0f1720;
    color: #e8eef5; border-radius: 8px; padding: 10px; font-size: 15px; min-height: 60px;
}
.antwort-form button { margin-top: 8px; }

/* Hashtags */
.hashtag { color: #4ea1ff; text-decoration: none; font-weight: 600; }
.hashtag:hover { text-decoration: underline; }
.tag-titel { color: #4ea1ff; margin: 10px 0 16px; }

/* Hashtag-Wolke */
.tagwolke { margin-top: 24px; }
.wolke-titel { color: #9fb3c8; font-size: 16px; margin: 0 0 14px; }
.wolke { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: baseline; }
.wolke-tag { color: #4ea1ff; text-decoration: none; font-weight: 700; line-height: 1.2; }
.wolke-tag:hover { color: #7cbcff; text-decoration: underline; }

/* Rang-Abzeichen */
.rang-badge {
    background: linear-gradient(135deg, #e63946, #b71c2b);
    color: #fff; padding: 3px 10px; border-radius: 12px;
    font-size: 12px; font-weight: 700; margin-left: 8px; white-space: nowrap;
}

/* Rang-Abzeichen am Beitrag */
.rang-mini {
    background: #2a3a2f; color: #8fe0a8; padding: 2px 8px; border-radius: 10px;
    font-size: 11px; font-weight: 600;
}

/* Konto-Bereich */
.konto-input { width:100%; box-sizing:border-box; padding:11px; margin-bottom:8px;
    border-radius:8px; border:1px solid #33414f; background:#0f1720; color:#e8eef5; font-size:16px; }
.erfolg-box { background:#1c6b3a; padding:12px; border-radius:8px; margin-bottom:12px; }
.karte h3 { margin-top:0; color:#e8eef5; }

/* Profil-Seite */
.profil-kopf { display:flex; align-items:center; gap:16px; }
.profil-avatar {
    width:60px; height:60px; border-radius:50%; background:linear-gradient(135deg,#e63946,#b71c2b);
    display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:800; color:#fff; flex-shrink:0;
}
.profil-statistik { display:flex; justify-content:space-around; text-align:center; }
.profil-statistik strong { display:block; font-size:22px; color:#e63946; }
.profil-statistik span { font-size:13px; color:#9fb3c8; }
a.funkname { text-decoration:none; }
a.funkname:hover { text-decoration:underline; }

/* Melden & Ausblenden */
.melden-form { display:inline; }
.melden-btn { background:none; border:0; cursor:pointer; font-size:16px; margin-left:10px; opacity:0.6; }
.melden-btn:hover { opacity:1; }
.ausgeblendet-box { background:#2a2016; border:1px solid #7a5c1c; border-radius:10px; padding:12px; color:#e0c48f; font-size:14px; }
.ausgeblendet-box summary { cursor:pointer; color:#e63946; margin-top:8px; }

/* Melden-Fahne ganz nach rechts schieben */
.stimmen-leiste { display:flex; align-items:center; }
.melden-form { margin-left:auto; }
.melden-btn { margin-left:0; }

/* Echtzeit-Dashboard */
.live-punkt { display:inline-block; width:12px; height:12px; border-radius:50%; background:#2ecc71; margin-left:8px; transition:opacity 0.5s; }
.kachel.live strong { color:#2ecc71; }
.kachel.warnung strong { color:#f1c40f; }
.admin-spalten { display:flex; flex-wrap:wrap; gap:14px; margin-top:16px; }
.admin-spalten .karte { flex:1; min-width:240px; }
.chip-liste { display:flex; flex-wrap:wrap; gap:8px; }
.chip { background:#0f1720; border:1px solid #33414f; border-radius:14px; padding:5px 12px; font-size:13px; }
.top-user { display:flex; justify-content:space-between; align-items:center; padding:7px 0; border-bottom:1px solid #33414f; font-size:14px; }
.top-user:last-child { border-bottom:0; }

/* Footer */
.footer { max-width:620px; margin:30px auto 0; padding:20px 16px; border-top:1px solid #33414f; text-align:center; }
.footer a { color:#9fb3c8; text-decoration:none; margin:0 10px; font-size:14px; }
.footer a:hover { color:#e63946; }
.footer-copy { color:#6b8299; font-size:12px; margin-top:12px; }

/* Footer sauber mittig */
.footer { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px 4px; }
.footer-copy { width:100%; text-align:center; }

/* Foto-Upload */
.foto-btn { background:#33414f; border-radius:8px; cursor:pointer; font-size:20px; padding:6px 12px; margin-left:6px; display:inline-block; }
.foto-name { color:#9fb3c8; font-size:13px; margin-left:8px; }
.post-bild { max-width:100%; border-radius:10px; margin-top:10px; display:block; }

/* Auth-Boxen (Login/Registrieren) */
.auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.auth-box { width:100%; max-width:440px; background:#1a2530; padding:30px; border-radius:16px; box-shadow:0 10px 40px rgba(0,0,0,0.4); }
.auth-logo { color:#e63946; font-size:30px; font-weight:800; letter-spacing:2px; text-align:center; }
.auth-slogan { color:#9fb3c8; text-align:center; margin:4px 0 20px; font-size:14px; }
.auth-box label { display:block; margin:12px 0 5px; font-weight:600; }
.auth-box input[type=email], .auth-box input[type=password], .auth-box input[type=text], .auth-box select {
    width:100%; box-sizing:border-box; padding:11px; border-radius:8px; border:1px solid #33414f; background:#0f1720; color:#e8eef5; font-size:16px; }
.check-zeile { display:flex; align-items:flex-start; gap:10px; margin:14px 0 0; font-weight:400 !important; font-size:14px; color:#cfe0f0; }
.check-zeile input { margin-top:3px; flex-shrink:0; width:18px; height:18px; }
.check-zeile a { color:#e63946; }

/* Funkrufnamen-Vorschläge sauber als Chips */
.nicks { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.nick {
    cursor:pointer; padding:8px 12px; border-radius:18px;
    border:1px solid #33414f; background:#0f1720; color:#e8eef5;
    font-size:13px; line-height:1; white-space:nowrap; transition:all 0.15s;
}
.nick:hover { border-color:#e63946; }
.nick.aktiv { background:#e63946; border-color:#e63946; color:#fff; }
.neu { margin-top:10px; background:#33414f; color:#fff; border:0; border-radius:8px; padding:9px 14px; font-size:14px; cursor:pointer; }
.neu:hover { background:#455565; }

/* Admin-Bildergalerie */
.bilder-galerie { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:14px; }
.bild-karte { background:#1a2530; border-radius:12px; overflow:hidden; }
.bild-karte img { width:100%; height:160px; object-fit:cover; display:block; cursor:pointer; }
.bild-info { padding:10px; font-size:13px; }
.bild-info .zeit { color:#6b8299; font-size:12px; }
.bild-text { color:#9fb3c8; margin-top:4px; font-size:12px; }
.bild-karte form { padding:0 10px 10px; display:flex; gap:6px; flex-wrap:wrap; }

/* ===== Admin-Redesign ===== */
.admin-body { margin:0; }
.admin-layout { display:flex; min-height:100vh; }
.admin-sidebar {
    width:230px; background:#131c25; border-right:1px solid #2a3744;
    display:flex; flex-direction:column; padding:20px 0; position:sticky; top:0; height:100vh; flex-shrink:0;
}
.admin-logo { color:#e63946; font-size:20px; font-weight:800; letter-spacing:1px; padding:0 22px 20px; border-bottom:1px solid #2a3744; }
.admin-logo span { display:block; color:#6b8299; font-size:12px; font-weight:400; letter-spacing:0; margin-top:2px; }
.admin-nav { display:flex; flex-direction:column; padding:14px 12px; gap:4px; flex:1; }
.admin-nav a { color:#cfe0f0; text-decoration:none; padding:11px 14px; border-radius:9px; font-size:15px; transition:all 0.15s; }
.admin-nav a:hover { background:#1f2b37; }
.admin-nav a.aktiv { background:#e63946; color:#fff; font-weight:700; }
.admin-nav-unten { padding:14px 20px 0; border-top:1px solid #2a3744; display:flex; flex-direction:column; gap:10px; }
.admin-nav-unten a { color:#9fb3c8; text-decoration:none; font-size:14px; }
.admin-nav-unten a:hover { color:#e63946; }
.admin-main { flex:1; padding:26px 30px; max-width:100%; overflow-x:auto; }
.admin-main h2 { margin-top:0; }

/* Handy: Sidebar wird zur oberen Leiste */
@media (max-width: 720px) {
    .admin-layout { flex-direction:column; }
    .admin-sidebar { width:auto; height:auto; position:relative; padding:12px 0; }
    .admin-logo { padding:0 16px 12px; }
    .admin-nav { flex-direction:row; flex-wrap:wrap; padding:12px 10px; }
    .admin-nav a { padding:8px 12px; font-size:14px; }
    .admin-nav-unten { flex-direction:row; padding:12px 16px 0; gap:16px; }
    .admin-main { padding:18px 16px; }
}

/* ===== Kopf-Redesign ===== */
.topbar {
    background:linear-gradient(180deg,#1a2530,#141d26);
    border-bottom:2px solid #e63946; padding:12px 18px;
    display:flex; justify-content:space-between; align-items:center;
    position:sticky; top:0; z-index:20; box-shadow:0 2px 12px rgba(0,0,0,0.3);
}
.marke { text-decoration:none; }
.marke-logo { color:#e63946; font-size:22px; font-weight:800; letter-spacing:1px; }
.topbar-user { display:flex; align-items:center; gap:10px; }
.user-chip { display:flex; align-items:center; gap:9px; background:#0f1720; border:1px solid #33414f;
    border-radius:24px; padding:5px 12px 5px 5px; text-decoration:none; }
.user-chip:hover { border-color:#e63946; }
.user-avatar { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#e63946,#b71c2b);
    display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; font-size:16px; flex-shrink:0; }
.user-info { display:flex; flex-direction:column; line-height:1.2; }
.user-name { color:#e8eef5; font-weight:700; font-size:14px; }
.user-rang { color:#9fb3c8; font-size:11px; }
.top-link { text-decoration:none; font-size:20px; padding:4px; border-radius:8px; }
.top-link:hover { background:#33414f; }

/* Beiträge etwas eleganter */
.karte { box-shadow:0 1px 6px rgba(0,0,0,0.2); }
.post-kopf { flex-wrap:wrap; }

/* Handy: Kopf kompakter */
@media (max-width:520px) {
    .marke-logo { font-size:18px; }
    .user-rang { display:none; }
    .user-avatar { width:30px; height:30px; font-size:14px; }
    .user-name { font-size:13px; }
}

/* ===== Responsive-Feinschliff für alle Geräte ===== */

/* Grundlegend: nichts ragt seitlich heraus, Bilder passen sich an */
* { max-width:100%; }
img { max-width:100%; height:auto; }
.wrap { width:100%; box-sizing:border-box; }

/* Tablet und kleiner */
@media (max-width:768px) {
    .wrap { padding:12px; }
    .karte { padding:14px; }
}

/* Handy */
@media (max-width:520px) {
    body { padding-bottom:30px; }
    .wrap { padding:10px; }
    .karte { padding:12px; border-radius:12px; }

    /* Poster-Leiste: Knöpfe sauber umbrechen statt rauszuragen */
    .poster-leiste { flex-wrap:wrap; gap:8px; }
    .funken-btn { padding:10px 16px; font-size:15px; }

    /* Daumen/Kommentar/Melden-Zeile umbrechen lassen */
    .stimmen-leiste { flex-wrap:wrap; gap:8px; }
    .komm-link { margin-left:6px; }

    /* Post-Kopf: Name, Rolle, Rang, Zeit sauber umbrechen */
    .post-kopf { gap:6px; font-size:13px; }
    .rolle, .rang-mini { font-size:11px; }
    .zeit { font-size:11px; }

    /* Textgrößen etwas kompakter */
    .post-text { font-size:15px; }

    /* Emoji-Auswahl nicht zu hoch auf kleinem Schirm */
    .emoji-panel { max-height:150px; }

    /* Profil-Statistik bleibt lesbar */
    .profil-statistik strong { font-size:19px; }

    /* Hashtag-Wolke etwas enger */
    .wolke { gap:8px 12px; }
}

/* Admin-Tabellen auf kleinen Schirmen scrollbar machen (statt zu quetschen) */
@media (max-width:768px) {
    .admin-main { padding:16px 12px; }
    .admin-tabelle { display:block; overflow-x:auto; white-space:nowrap; }
    .bilder-galerie { grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); }
}

/* Sehr breite Bildschirme: Inhalt nicht unendlich breit ziehen */
@media (min-width:1400px) {
    .wrap { max-width:680px; }
}

/* Mod-/Admin-Abzeichen */
.abz { font-size:10px; font-weight:800; padding:2px 7px; border-radius:8px; margin-left:6px; letter-spacing:0.5px; vertical-align:middle; }
.abz-mod { background:#1e5a8a; color:#cfe8ff; }
.abz-admin { background:#8a6d1e; color:#ffe9a8; }

/* Werbung im Feed */
.werbung-karte { border:1px dashed #4a5a6a; position:relative; }
.werbung-label { position:absolute; top:8px; right:10px; font-size:10px; color:#6b8299; text-transform:uppercase; letter-spacing:1px; }
.werbung-link { text-decoration:none; color:inherit; display:block; }
.werbung-bild { width:100%; border-radius:8px; display:block; margin-bottom:8px; }
.werbung-titel { font-weight:700; color:#e8eef5; }

/* Nachrichten & Chat */
.anfrage-zeile { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; padding:8px 0; border-bottom:1px solid #33414f; }
.chat-zeile { display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.chat-avatar { width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,#e63946,#b71c2b); display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; flex-shrink:0; }
.chat-mitte { flex:1; min-width:0; }
.chat-name { font-weight:700; color:#e8eef5; }
.chat-vorschau { color:#9fb3c8; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-badge { background:#e63946; color:#fff; border-radius:12px; padding:2px 9px; font-size:13px; font-weight:700; }
.top-badge { position:absolute; top:-4px; right:-4px; background:#e63946; color:#fff; border-radius:10px; font-size:11px; padding:1px 6px; font-weight:700; }
.chat-kopf { display:flex; align-items:center; gap:10px; padding:10px 0 14px; border-bottom:1px solid #33414f; margin-bottom:14px; }
.chat-verlauf { display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.nachricht { max-width:75%; padding:10px 12px; border-radius:14px; }
.nachricht.meine { align-self:flex-end; background:#e63946; color:#fff; border-bottom-right-radius:4px; }
.nachricht.andere { align-self:flex-start; background:#1a2530; border-bottom-left-radius:4px; }
.nachricht-zeit { font-size:10px; opacity:0.7; margin-top:4px; text-align:right; }
.chat-eingabe { display:flex; gap:8px; align-items:flex-end; }
.chat-eingabe textarea { flex:1; min-height:48px; max-height:120px; padding:11px; border-radius:10px; border:1px solid #33414f; background:#0f1720; color:#e8eef5; font-size:16px; resize:vertical; }

/* ===== Landingpage mit verschwommenem Feed ===== */
.landing { position:relative; min-height:100vh; overflow:hidden; }
.landing-bg {
    position:absolute; inset:0; padding:20px; max-width:620px; margin:0 auto;
    filter:blur(7px) brightness(0.6); transform:scale(1.05);
    pointer-events:none; user-select:none;
}
.landing-bg .karte { opacity:0.9; }
.landing-overlay {
    position:relative; z-index:2; min-height:100vh;
    display:flex; align-items:center; justify-content:center; padding:20px;
    background:radial-gradient(circle at center, rgba(15,23,32,0.75), rgba(15,23,32,0.95));
}
.landing-box {
    max-width:560px; text-align:center; background:rgba(26,37,48,0.92);
    border:1px solid #33414f; border-radius:20px; padding:40px 30px;
    box-shadow:0 20px 60px rgba(0,0,0,0.5);
}
.landing-logo { color:#e63946; font-size:26px; font-weight:800; letter-spacing:2px; }
.landing-titel { font-size:34px; margin:16px 0 12px; color:#fff; }
.landing-text { color:#cfe0f0; line-height:1.7; font-size:16px; }
.landing-claim { color:#e63946; font-weight:700; font-size:17px; margin:18px 0 26px; }
.landing-buttons { display:flex; flex-direction:column; gap:14px; align-items:center; }
.landing-btn-gross { text-decoration:none; font-size:18px; padding:15px 32px; width:100%; box-sizing:border-box; }
.landing-login { color:#9fb3c8; text-decoration:none; font-size:15px; }
.landing-login:hover { color:#e63946; }
.landing-footer { margin-top:26px; padding-top:18px; border-top:1px solid #33414f; }
.landing-footer a { color:#6b8299; text-decoration:none; font-size:13px; margin:0 4px; }
.landing-footer a:hover { color:#e63946; }

@media (max-width:520px) {
    .landing-titel { font-size:27px; }
    .landing-box { padding:30px 20px; }
}

/* Landing-Hintergrund noch milchiger */
.landing-bg { filter:blur(14px) brightness(0.5) !important; transform:scale(1.12) !important; }
.landing-overlay { background:radial-gradient(circle at center, rgba(15,23,32,0.85), rgba(15,23,32,0.97)) !important; }

/* Live-Zähler unten rechts */
.live-zaehler {
    position:fixed; bottom:18px; right:18px; z-index:5;
    background:rgba(26,37,48,0.95); border:1px solid #33414f; border-radius:24px;
    padding:9px 16px; font-size:14px; color:#e8eef5; box-shadow:0 4px 16px rgba(0,0,0,0.4);
}
.live-zaehler strong { color:#2ecc71; }
.live-dot { display:inline-block; width:9px; height:9px; border-radius:50%; background:#2ecc71; margin-right:4px; animation:pulse 2s infinite; }
@keyframes pulse { 0%{opacity:1;} 50%{opacity:0.3;} 100%{opacity:1;} }

/* ===== Blaulicht & Benachrichtigungen ===== */
.blaulicht-link.aktiv { animation: blaulicht 1.1s infinite; }
@keyframes blaulicht {
    0%, 100% { background:transparent; box-shadow:0 0 0 rgba(37,99,235,0); }
    50% { background:rgba(37,99,235,0.30); box-shadow:0 0 14px rgba(37,99,235,0.85); }
}
.benach-zeile { display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.benach-zeile.neu { border-left:3px solid #e63946; }
.benach-icon { font-size:22px; flex-shrink:0; }
.benach-mitte { display:flex; flex-direction:column; min-width:0; }
.benach-text { color:#e8eef5; }
.benach-zeit { color:#9fb3c8; font-size:12px; margin-top:2px; }

/* Blaulicht: kein Pulsieren, dafuer klare Zahl */
.blaulicht-link.aktiv { animation: none !important; background: transparent !important; box-shadow: none !important; }
.top-badge {
    position:absolute; top:-5px; right:-6px;
    min-width:18px; height:18px; box-sizing:border-box;
    background:#e63946; color:#fff; border-radius:50%;
    font-size:12px; font-weight:800; line-height:18px; text-align:center;
    padding:0 4px; border:2px solid #141d26;
}

/* Abonnieren-Knopf */
.abo-btn { background:#0f1720; border:1px solid #33414f; color:#9fb3c8; border-radius:20px; padding:7px 14px; font-size:14px; font-weight:600; cursor:pointer; white-space:nowrap; }
.abo-btn:hover { border-color:#e63946; color:#e8eef5; }
.abo-btn.aktiv { background:#e63946; border-color:#e63946; color:#fff; }

/* Kommentar-Aktionen (Daumen, Antworten, Melden) */
.komment-aktionen { display:flex; align-items:center; gap:10px; margin-top:8px; flex-wrap:wrap; }
.komment-aktionen .stimm-form { padding:2px 6px; }
.komment-aktionen .daumen { font-size:15px; padding:3px 7px; }
.komment-aktionen .antwort-link { margin-top:0; }
.komment-aktionen .melden-btn { margin-left:auto; }

/* Server-Auslastung */
.balken { background:#0f1720; border:1px solid #33414f; border-radius:8px; height:22px; overflow:hidden; }
.balken-fuell { background:linear-gradient(90deg,#2ecc71,#f1c40f,#e63946); height:100%; width:0; transition:width 0.5s; }

/* Admin-Krone schlank */
.abz-admin { background:none !important; padding:0 !important; font-size:15px; margin-left:5px; }

/* Admin-Krone schlank */
.abz-admin { background:none !important; padding:0 !important; font-size:15px; margin-left:5px; }

/* Willkommen-zurueck & Neu-Markierung */
.willkommen-box { background:linear-gradient(135deg,#e63946,#b71c2b); color:#fff; padding:14px 18px; border-radius:12px; margin-bottom:14px; font-size:15px; }
.neuer-post { border-left:3px solid #e63946; }
.neu-badge { background:#e63946; color:#fff; font-size:10px; font-weight:800; padding:2px 8px; border-radius:8px; margin-right:6px; letter-spacing:0.5px; vertical-align:middle; }

/* Konto-Löschen-Link */
.loeschen-link { text-align:center; margin:20px 0; }
.loeschen-link a { color:#7a4a4a; font-size:14px; }

/* Weiterlesen-Link im Feed */
.weiterlesen { color:#e63946; font-weight:600; text-decoration:none; }
.weiterlesen:hover { text-decoration:underline; }

/* System-Nachrichten */
.sys-nachricht { border-left:3px solid #e63946; }
.sys-kopf { color:#e8eef5; }
.sys-von { color:#9fb3c8; font-size:13px; font-weight:400; }
.sys-ok { color:#2ecc71; font-weight:600; margin-top:10px; }

/* Kodex-Status */
.kodex-status { font-size:14px; font-weight:600; margin-left:8px; }
.kodex-status.gruen { color:#2ecc71; }
.kodex-status.gelb { color:#e6a23a; }
.kodex-status.rot { color:#e63946; }

/* ===== Handy-Fixes: kein horizontales Scrollen ===== */
html, body { overflow-x: hidden; max-width: 100%; }
.wrap { width: 100%; box-sizing: border-box; overflow-wrap: break-word; word-break: break-word; }
img, video, .post-bild { max-width: 100%; height: auto; }
.post-text { overflow-wrap: break-word; word-break: break-word; }
.topbar { box-sizing: border-box; max-width: 100%; }

@media (max-width: 600px) {
    .topbar { padding: 8px 10px; gap: 4px; flex-wrap: nowrap; }
    .topbar-user { gap: 3px; min-width: 0; }
    .user-info { display: none; }          /* auf dem Handy nur Avatar zeigen */
    .user-chip { padding: 3px; }
    .top-link { font-size: 19px; padding: 3px; }
    .marke-logo { font-size: 15px; }
    .marke { min-width: 0; overflow: hidden; }
}

/* Feed-Umschalter & Nachladen */
.feed-umschalter { display:flex; gap:8px; margin:14px 0; }
.feed-tab { flex:1; padding:10px; border-radius:10px; border:1px solid #33414f; background:#0f1720; color:#9fb3c8; font-weight:700; font-size:15px; cursor:pointer; transition:all 0.15s; }
.feed-tab.aktiv { background:#e63946; border-color:#e63946; color:#fff; }
.feed-lade { text-align:center; color:#6b8299; padding:16px; }
.feed-ende { text-align:center; color:#6b8299; padding:20px; font-size:14px; }

/* Funker-Karte */
.marker-fahne { position:relative; font-size:30px; line-height:1; filter:drop-shadow(0 2px 3px rgba(0,0,0,0.5)); }
.marker-zahl { position:absolute; top:-6px; right:-10px; background:#e63946; color:#fff; font-size:12px; font-weight:800; border-radius:10px; padding:1px 6px; border:2px solid #141d26; }
.leaflet-popup-content { color:#141d26; font-size:14px; }

/* Hilfe-Bereich */
.hilfe-box { padding:4px 0; }
.hilfe-punkt { border-bottom:1px solid #23303c; }
.hilfe-punkt:last-child { border-bottom:none; }
.hilfe-punkt summary { cursor:pointer; padding:14px 4px; font-weight:700; color:#e8eef5; font-size:16px; list-style:none; display:flex; align-items:center; justify-content:space-between; }
.hilfe-punkt summary::-webkit-details-marker { display:none; }
.hilfe-punkt summary::after { content:'+'; color:#e63946; font-size:22px; font-weight:400; }
.hilfe-punkt[open] summary::after { content:'−'; }
.hilfe-punkt p { color:#9fb3c8; padding:0 4px 14px; line-height:1.6; margin:0; }
.hilfe-punkt a { color:#e63946; }

/* Aufgeräumtes Menü */
.menu-wrap { position:relative; }
.menu-knopf { font-size:24px; line-height:1; }
.menu-panel { position:absolute; top:44px; right:0; width:250px; background:#141d26; border:1px solid #33414f; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,0.5); padding:6px; z-index:100; display:none; }
.menu-panel.offen { display:block; }
.menu-kopf { display:flex; align-items:center; gap:10px; padding:10px; border-bottom:1px solid #23303c; margin-bottom:6px; }
.menu-avatar { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,#e63946,#b71c2b); display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; flex-shrink:0; }
.menu-name { font-weight:700; color:#e8eef5; }
.menu-rang { font-size:13px; color:#9fb3c8; }
.menu-eintrag { display:flex; align-items:center; gap:8px; padding:11px 12px; border-radius:8px; color:#e8eef5; text-decoration:none; font-size:15px; }
.menu-eintrag:hover { background:#1e2a36; }
.menu-zahl { margin-left:auto; background:#e63946; color:#fff; border-radius:10px; font-size:12px; font-weight:800; padding:1px 8px; }
.menu-logout { color:#ff9ba3; margin-top:4px; border-top:1px solid #23303c; }

/* Menü-Panel im Bildschirm halten (Fix: rechts abgeschnitten) */
.topbar { overflow: visible; }
.topbar-user { position: relative; }
.menu-panel {
    position: fixed;
    top: 56px;
    right: 10px;
    left: auto;
    width: min(250px, calc(100vw - 20px));
    max-width: calc(100vw - 20px);
    box-sizing: border-box;
}
@media (max-width: 600px) {
    .menu-panel { top: 52px; right: 8px; width: calc(100vw - 16px); }
}

/* Umfragen */
.umfrage { margin:10px 0 4px; display:flex; flex-direction:column; gap:8px; }
.umfrage-form { margin:0; }
.umfrage-opt { position:relative; display:block; width:100%; text-align:left; padding:12px 14px; border-radius:10px; border:1px solid #33414f; background:#0f1720; color:#e8eef5; font-size:15px; overflow:hidden; box-sizing:border-box; }
.umfrage-opt.wahl { cursor:pointer; transition:all 0.15s; }
.umfrage-opt.wahl:hover { border-color:#e63946; background:#1a2530; }
.umfrage-opt.ergebnis { cursor:default; }
.umfrage-balken { position:absolute; top:0; left:0; height:100%; background:rgba(230,57,70,0.28); z-index:0; transition:width 0.5s; }
.umfrage-opt.meine .umfrage-balken { background:rgba(230,57,70,0.5); }
.umfrage-text { position:relative; z-index:1; font-weight:600; }
.umfrage-proz { position:relative; z-index:1; float:right; font-weight:800; color:#e8eef5; }
.umfrage-fuss { color:#6b8299; font-size:13px; margin-top:2px; }
.umfrage-badge { display:inline-block; background:#e63946; color:#fff; font-size:11px; font-weight:800; padding:2px 8px; border-radius:8px; margin-left:6px; vertical-align:middle; }

/* Kleiner Umfrage-Button neben Foto/Emoji */
.umfrage-btn { font-size:19px; }
.umfrage-btn.aktiv { color:#e63946; }
.umfrage-bereich { margin:10px 0; padding:12px; background:#0f1720; border:1px solid #33414f; border-radius:10px; }

/* Einheitliche Buttons: Emoji, Foto, Umfrage - exakt gleiches Design */
.icon-btn-reihe { display:flex; align-items:center; gap:6px; }
.icon-btn {
    background:#33414f; border:0; border-radius:8px; cursor:pointer;
    font-size:20px; padding:6px 12px; display:inline-flex; align-items:center; justify-content:center;
    line-height:1; margin:0; color:#e8eef5;
}
.icon-btn.aktiv { background:#e63946; }

/* Einheitliche Buttons: Emoji, Foto, Umfrage - exakt gleiches Design */

/* Icon-Buttons: robuster Reset gegen Browser-Standardstile */
.icon-btn-reihe { display:flex; align-items:center; gap:6px; }
.icon-btn {
    -webkit-appearance:none; appearance:none;
    background:#33414f !important; border:0 !important; border-radius:8px !important;
    cursor:pointer; font-size:20px !important; padding:6px 12px !important;
    display:inline-flex !important; align-items:center; justify-content:center;
    line-height:1; margin:0 !important; color:#e8eef5;
    font-family:inherit; box-sizing:border-box; height:36px; width:44px;
}
.icon-btn.aktiv { background:#e63946 !important; }

/* Funkprotokoll */
.fp-tag { margin-bottom: 22px; }
.fp-datum { color:#e63946; font-weight:800; font-size:15px; margin:18px 0 8px; letter-spacing:0.5px; }
.fp-eintrag { margin-bottom:10px; }
.fp-badge { display:inline-block; font-size:12px; font-weight:800; padding:3px 10px; border-radius:8px; margin-bottom:8px; }
.kat-neu { background:#1c4d6b; color:#8fd4ff; }
.kat-verbessert { background:#4d3d1c; color:#ffd98f; }
.kat-fix { background:#4d1c22; color:#ff9ba3; }
.fp-titel { margin:4px 0 6px; font-size:17px; color:#e8eef5; }
.fp-text { color:#9fb3c8; font-size:14px; line-height:1.6; margin:0; }

/* Kamera/Galerie-Auswahlmenü */
.foto-menu { position:absolute; display:none; flex-direction:column; background:#141d26; border:1px solid #33414f; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,0.5); z-index:50; margin-top:6px; overflow:hidden; min-width:200px; }
.foto-menu.offen { display:flex; }
.foto-menu button { background:none; border:0; color:#e8eef5; text-align:left; padding:12px 16px; font-size:14px; cursor:pointer; }
.foto-menu button:hover { background:#1e2a36; }
.foto-menu button:not(:last-child) { border-bottom:1px solid #23303c; }
.icon-btn-reihe { position:relative; }

/* Hinweis: vom Ersteller selbst bearbeitet */
.eigen-bearbeitet-hinweis { color:#6b8299; font-size:12px; font-style:italic; margin-top:4px; }

/* Eigene Bearbeiten/Löschen-Knöpfe: gleicher Stil wie melden-btn */
.eigen-btn { background:none; border:0; cursor:pointer; font-size:16px; margin-left:10px; opacity:0.6; color:inherit; text-decoration:none; }
.eigen-btn:hover { opacity:1; }
.komment-aktionen .eigen-btn { margin-left:0; }

/* Streak-Anzeige */
.streak-badge { display:block; font-size:11px; color:#ff9a3c; font-weight:700; margin-top:2px; }

/* Frage des Tages */
.frage-badge { background:#7a5c1c; color:#ffe9a8; font-size:11px; font-weight:800; padding:2px 8px; border-radius:8px; margin-right:6px; }

/* Channels */
.channel-info { border-left:3px solid #e63946; }
.komm-gesperrt { color:#6b8299; font-size:13px; }

/* Channel-Badge in Mod-Ansicht */
.channel-badge { background:#7a1c25; color:#ffe4e6; font-size:12px; font-weight:800; padding:2px 8px; border-radius:8px; margin-right:6px; }

/* Installations-Banner */
.install-banner { position:fixed; bottom:0; left:0; right:0; background:#141d26; border-top:2px solid #e63946; padding:12px 14px; display:flex; align-items:center; gap:12px; z-index:200; box-shadow:0 -6px 20px rgba(0,0,0,0.4); }
.install-text { flex:1; font-size:14px; line-height:1.35; color:#e8eef5; }
.install-text span { color:#9fb3c8; font-size:12px; }
.install-aktionen { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.install-btn { background:#e63946; color:#fff; padding:8px 14px; border-radius:8px; text-decoration:none; font-weight:700; font-size:13px; }
.install-schliessen { background:none; border:0; color:#9fb3c8; font-size:20px; cursor:pointer; padding:4px 8px; }
.install-schliessen:hover { color:#e63946; }
/* Feed nicht vom Banner verdecken lassen */
body { padding-bottom: 80px; }
@media (min-width: 600px) { body { padding-bottom: 0; } }

/* Installations-Seite */
.install-karte { border-left:3px solid #e63946; }

/* Sprung-Hervorhebung: kurze rote Pulsierung, wenn per Anker angesprungen */
.anker-blitz {
    animation: ankerBlitz 2.5s ease-out;
    scroll-margin-top: 70px;
}
@keyframes ankerBlitz {
    0%   { background: rgba(230,57,70,0.35); box-shadow: 0 0 0 3px rgba(230,57,70,0.5); }
    100% { background: transparent; box-shadow: 0 0 0 0 rgba(230,57,70,0); }
}

/* Chat-Übersicht: Löschen-Knopf-Zeile */
.chat-zeile-wrap { display:flex; align-items:center; gap:8px; padding:0; }
.chat-zeile-link { display:flex; align-items:center; gap:12px; flex:1; text-decoration:none; color:inherit; padding:12px; }
.chat-loesch-form { margin-right:8px; }
.chat-loesch-btn { background:none; border:0; color:#9fb3c8; font-size:18px; cursor:pointer; padding:8px; opacity:0.5; }
.chat-loesch-btn:hover { opacity:1; color:#e63946; }

/* Gelesene Chats: kompakt ausklappbar */
.chat-gelesen { padding:0; }
.chat-gelesen > summary { display:flex; align-items:center; gap:10px; padding:10px 12px; cursor:pointer; list-style:none; }
.chat-gelesen > summary::-webkit-details-marker { display:none; }
.chat-gelesen > summary:hover { background:rgba(230,57,70,0.05); }
.chat-avatar-mini { width:26px; height:26px; border-radius:50%; background:#e63946; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex-shrink:0; }
.chat-name-mini { flex:1; color:#e8eef5; font-size:14px; }
.chat-datum-mini { color:#6b8299; font-size:12px; }
.chat-gelesen-inhalt { padding:0 12px 12px 46px; }

/* Bestätigte System-Nachrichten: kompakt eingeklappt */
.sys-eingeklappt { padding:0; }
.sys-eingeklappt > summary { display:flex; align-items:center; gap:10px; padding:10px 14px; cursor:pointer; list-style:none; }
.sys-eingeklappt > summary::-webkit-details-marker { display:none; }
.sys-eingeklappt > summary:hover { background:rgba(230,57,70,0.05); }
.sys-titel-kompakt { flex:1; color:#e8eef5; font-size:14px; }
.sys-ok-kompakt { color:#2ecc71; font-size:12px; font-weight:600; }
.sys-eingeklappt[open] > summary { border-bottom:1px solid #23303c; }
.sys-eingeklappt[open] .post-text { padding:0 14px 14px 14px; }

/* Mini-Buttons – kompakt, klar, Handy-freundlich */
.mini-btn {
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:#1e2a36;
    color:#e8eef5;
    border:1px solid #33414f;
    padding:8px 14px;
    border-radius:8px;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    text-decoration:none;
    transition:background 0.15s, border-color 0.15s, transform 0.05s;
    line-height:1.2;
    min-height:36px;
}
.mini-btn:hover { background:#26333f; border-color:#4a5a6b; }
.mini-btn:active { transform:scale(0.97); }

.mini-btn.gruen {
    background:#1f3a2c;
    border-color:#2ecc71;
    color:#8ff0b8;
}
.mini-btn.gruen:hover { background:#26472f; border-color:#3ee082; }

.mini-btn.rot {
    background:#3a1e24;
    border-color:#e63946;
    color:#ff9ba3;
}
.mini-btn.rot:hover { background:#4a252b; border-color:#ff4d5c; }

/* Auf kleinen Bildschirmen etwas größer für bessere Tippbarkeit */
@media (max-width: 600px) {
    .mini-btn { padding:10px 16px; font-size:14px; min-height:40px; }
}

/* Nutzer-Historie in Mod-Ansicht */
.mod-historie {
    background:#0f1720;
    border:1px solid #33414f;
    border-radius:8px;
    padding:10px 14px;
    margin:10px 0 12px;
    font-size:13px;
    line-height:1.7;
}
.mh-zeile { color:#c9d3dc; }
.mh-label { color:#9fb3c8; font-weight:600; }
.mh-gelb { color:#e6a23a; }
.mh-warn { color:#ff6b6b; font-weight:600; }

/* Topbar-Icons: sauberer Abstand + größere Tap-Ziele fürs Handy */
.topbar-user { display:flex; align-items:center; gap:14px; }
.topbar-user .top-link { padding:8px 10px; border-radius:8px; font-size:20px; line-height:1; transition:background 0.15s; }
.topbar-user .top-link:hover { background:rgba(230,57,70,0.1); }
.topbar-user .menu-knopf { font-size:22px; }
.topbar-user .blaulicht-link.aktiv { animation:none; }

/* Blaulicht 🚨 pulsiert, wenn neue Benachrichtigungen da sind */
@keyframes blaulichtPuls {
    0%, 100% { transform:scale(1); filter:drop-shadow(0 0 0 rgba(230,57,70,0)); }
    50%      { transform:scale(1.15); filter:drop-shadow(0 0 8px rgba(230,57,70,0.7)); }
}
.blaulicht-puls { animation:blaulichtPuls 1.4s ease-in-out infinite; }


    /* Foto-Menu Popup verstecken auf Handy - macht dort keinen Sinn */
    
    /* icon-btn 📷 auf Handy leicht ausblenden (weil er nicht funktioniert) */
}

/* ===== Registrierung: Funkrufname-Wahl ===== */
.nick-block { margin-top:18px; padding:14px; background:#0f1720; border:1px solid #23303c; border-radius:10px; }
.nick-erklaerung { color:#c9d3dc; font-size:13px; line-height:1.65; margin:6px 0 10px; }
.nick-warnung { color:#e6a23a; font-size:12px; line-height:1.55; background:#1e1a10; border-left:3px solid #e6a23a; padding:8px 10px; border-radius:6px; margin:0 0 14px; }
.nick-regeln { color:#6b8299; font-size:11px; margin:6px 0 0; }

.nick-modus-schalter { display:flex; gap:8px; margin-bottom:14px; }
.nick-modus {
    flex:1; padding:10px 8px; border-radius:8px; cursor:pointer;
    background:#1a2530; color:#9fb3c8; border:2px solid #33414f;
    font-size:14px; font-weight:700; transition:all .15s;
}
.nick-modus.aktiv { background:#e63946; color:#fff; border-color:#e63946; }

.feld-hinweis { font-size:12px; margin:4px 0 8px; min-height:16px; color:#9fb3c8; }
.feld-hinweis.gut { color:#8ff0b8; }
.feld-hinweis.schlecht { color:#ff9ba3; }

/* Sammel-Fehlerbox */
.fehler-sammel {
    background:#3a1e24; border:1px solid #e63946; border-radius:10px;
    padding:12px 14px; margin-bottom:16px; color:#ffd7db;
}
.fehler-sammel strong { display:block; margin-bottom:6px; color:#ff9ba3; }
.fehler-sammel ul { margin:0; padding-left:18px; }
.fehler-sammel li { margin:4px 0; font-size:13px; line-height:1.5; }

/* ===== Blauer Haken für zertifizierte Nutzer ===== */
.zert-haken {
    color:#4d9eff; font-size:0.9em; margin-left:3px;
    cursor:help; vertical-align:baseline;
}

/* ===== Auszeichnungen: Beruf & Person öffentlichen Lebens ===== */
.zert-stern {
    color:#ffc93c; font-size:0.9em; margin-left:3px;
    cursor:help; vertical-align:baseline;
}
.btn-zert  { background:#1c3a5e !important; color:#8fc4ff !important; }
.btn-stern { background:#3a3018 !important; color:#ffd970 !important; }