/* =====================================================================
   Ergaenzungen fuer die echte App (Entwurf 10 Royal bleibt in stil.css).
   Nur Variablen aus stil.css nutzen, damit Dunkel und Hell stimmen.
   ===================================================================== */
#buehne{height:100vh;height:100dvh}
.insel{display:none!important}
body.handy #buehne{height:100vh;height:100dvh;padding:0;display:block;background:var(--bg-chat)!important}
body.handy .geraet{width:auto;height:100%;border-radius:0;padding:0;background:none!important;box-shadow:none!important}
body.handy .schirm{border-radius:0}
body.handy .ckopf{padding-top:calc(env(safe-area-inset-top) + 12px);min-height:0}
body.handy .reiter{padding-bottom:calc(env(safe-area-inset-bottom) + 8px)}
body.handy .kanalliste,body.handy .mitglieder{padding-top:calc(env(safe-area-inset-top) + 12px)}
.rail .sp{flex:1}
.rail .ich{margin-top:0}
.rail .ich .bild{cursor:pointer}

/* Profilbilder */
.bild{overflow:hidden;cursor:pointer}
.bild img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.name{cursor:pointer}
.name .spitz{color:var(--txt3);font-weight:400;margin-left:6px}

/* Kanalliste: gesperrt vor den Regeln, ungelesen */
.kanal.zu{opacity:.42}
.kanal .neu{min-width:18px;height:18px;padding:0 5px;border-radius:9px;display:inline-grid;place-items:center;font-size:11px;font-weight:600;background:var(--akzent);color:var(--akzent-ink)}

/* Nachrichten: Werkzeuge, angeheftet, Bild */
.nachricht{position:relative}
.werkzeug{position:absolute;right:14px;top:-12px;display:none;gap:2px;padding:3px;border-radius:6px;background:var(--bg-fenster);box-shadow:inset 0 0 0 1px var(--linie),var(--schatten);z-index:5}
.nachricht:hover .werkzeug,.nachricht.wz-auf .werkzeug{display:flex}
.werkzeug button{padding:4px 8px;border-radius:4px;font-size:12px;color:var(--txt2)}
.werkzeug button:hover{background:var(--bg-aktiv);color:var(--akzent)}
.pinmarke{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--akzent);margin-bottom:4px}
.bearbeitet{font-size:11px;color:var(--txt3);margin-left:6px}
.bildanhang{margin-top:8px;max-width:520px;border-radius:6px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--linie);cursor:zoom-in}
.bildanhang img{display:block;width:100%;height:auto}
.inhalt a{color:var(--akzent);text-decoration:underline;text-underline-offset:2px}
.reaktion .wer{display:none}
.reaktion.plus{font-weight:600;color:var(--txt3)}
.wahl{display:flex;gap:4px;padding:6px;border-radius:8px;background:var(--bg-fenster);box-shadow:inset 0 0 0 1px var(--linie),var(--schatten);position:absolute;z-index:8}
.wahl button{width:34px;height:34px;border-radius:6px;font-size:18px;display:grid;place-items:center}
.wahl button:hover{background:var(--bg-aktiv)}
.bearbeiten textarea{width:100%;min-height:80px;padding:10px 12px;border-radius:6px;border:0;background:var(--bg-eingabe);box-shadow:inset 0 0 0 1px var(--linie);resize:vertical}
.bearbeiten .zeile{display:flex;gap:8px;justify-content:flex-end;margin-top:6px}

/* Hinweisleisten oben im Chat (Regeln, Installieren) */
.hleiste{margin:12px 18px 0;padding:12px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;border-radius:6px;background:var(--bg-embed);box-shadow:inset 0 0 0 1px var(--akzent);font-size:13.5px;color:var(--txt2)}
.hleiste b{color:var(--titel)}
.hleiste .sp{flex:1}
.hleiste .knopf{padding:8px 14px}

/* Regeln im Kanal */
.regelkarte{text-align:left!important}
.regelkarte ol{margin:12px 0 0 0;list-style:none;display:grid;gap:10px}
.regelkarte li{display:grid;grid-template-columns:32px 1fr;gap:10px;font-size:14px;color:var(--txt)}
.regelkarte li span{font:600 14px var(--f-ui);color:var(--akzent);text-align:right}
.regelkarte .disclaimer{margin-top:14px}
.regelkarte .fknoepfe{margin-top:16px;display:flex;justify-content:flex-end}

/* Profilkarte */
.profil{display:grid;gap:14px}
.profil .kopf{display:flex;align-items:center;gap:16px}
.profil .bild{width:84px;height:84px;font-size:32px;cursor:default}
.profil .pn{font:600 22px var(--f-ui);color:var(--titel)}
.profil .ps{color:var(--txt3);font-size:14px}
.profil .status{font-size:14px;color:var(--txt)}
.profil .anw{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--txt2)}
.profil .anw i{width:8px;height:8px;border-radius:50%;background:var(--txt3)}
.profil .anw.on i{background:var(--online)}
.profil .werte{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.profil .werte div{padding:10px 12px;border-radius:6px;background:var(--bg-embed);box-shadow:inset 0 0 0 1px var(--linie2)}
.profil .werte small{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt3)}
.profil .werte b{font:600 16px var(--f-ui);color:var(--titel)}
.pfad{display:flex;align-items:center;gap:0;margin:4px 2px}
.pfad i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--akzent);flex:none;display:grid;place-items:center}
.pfad i.an{background:var(--akzent)}
.pfad i.jetzt{box-shadow:0 0 0 4px var(--bg-aktiv),inset 0 0 0 1px var(--akzent);background:var(--akzent)}
.pfad span{flex:1;height:1px;background:var(--linie)}
.pfad span.an{background:var(--akzent)}
.pfadtext{display:flex;justify-content:space-between;font-size:11px;color:var(--txt3)}
.balken{height:6px;border-radius:3px;background:var(--bg-embed);box-shadow:inset 0 0 0 1px var(--linie2);overflow:hidden}
.balken i{display:block;height:100%;background:var(--akzent)}
.profil .ff label{font-size:12px;color:var(--txt2)}

/* Suche */
.treffer{margin:10px 18px;padding:12px 14px;border-radius:6px;background:var(--bg-embed);box-shadow:inset 0 0 0 1px var(--linie2);cursor:pointer}
.treffer:hover{box-shadow:inset 0 0 0 1px var(--akzent)}
.treffer small{color:var(--txt3)}
.suchkopf{margin:14px 18px 0;font-size:13px;color:var(--txt2);display:flex;gap:10px;align-items:center}

/* Nachricht hervorheben (Sprung aus Suche oder Link) */
.nachricht.blitz{box-shadow:inset 0 0 0 1px var(--akzent)!important}

/* Groesseres Bild ansehen */
.gross{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.82);display:grid;place-items:center;padding:20px;cursor:zoom-out}
.gross img{max-width:100%;max-height:100%;border-radius:6px}

.eingabe .bildvorschau{height:32px;width:32px;border-radius:4px;object-fit:cover;box-shadow:inset 0 0 0 1px var(--linie)}