/* Konto-Kasten in der Seitenleiste (Paket A). Baut auf den Variablen und Klassen aus insel.css auf. */
.konto .name { margin-bottom: 10px; }
.abzeichen { text-transform: uppercase; letter-spacing: 1px; color: var(--kante); background: var(--sonne); padding: 0 6px; }

.muscheln { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 4px 8px; background: var(--kante); padding: 6px 10px; }
.muscheln svg { grid-row: span 2; image-rendering: pixelated; }
.muscheln strong { font: 26px/1 var(--pixel); font-variant-numeric: tabular-nums; }
.muscheln span { font-size: 13px; color: var(--leise); align-self: end; }
.muscheln small { grid-column: 2 / -1; font-size: 12px; color: var(--sonne); min-height: 0; }
.muscheln small:empty { display: none; }

/* Discord-Knopf kleiner als der große "Discord beitreten", aber gleiche Farbe */
.discord.klein { font-size: 16px; padding: 8px 12px; margin-top: 12px; border-width: 2px; box-shadow: 3px 3px 0 rgba(0,0,0,.35); }
.verbunden { margin-top: 12px !important; font-size: 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; }
.verbunden b { color: var(--text); overflow-wrap: anywhere; }
.link { font: 13px var(--body); color: var(--leise); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; margin-left: auto; }
.link:hover { color: var(--text); }

.sichern { margin-top: 12px; border-top: 2px dashed var(--brett2); padding-top: 8px; }
.sichern summary { font: 15px var(--pixel); color: var(--sonne); cursor: pointer; list-style-position: inside; }
.sichern summary:focus-visible { outline: 3px solid var(--sonne); outline-offset: 2px; }
.sichern > p { font-size: 13px; margin: 6px 0 8px; }
.sichern .name { margin: 12px 0 0; }
.knopf.klein { font-size: 13px; padding: 5px 10px; }
.codebox { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.codebox code { font: 20px var(--pixel); letter-spacing: 2px; background: var(--kante); color: var(--sonne); padding: 4px 10px; user-select: all; }
.warnung { font-size: 12px; color: var(--warn) !important; margin: 0; flex-basis: 100%; }
.warnung:empty { display: none; }
#kCodeEingabe { text-transform: uppercase; letter-spacing: 1px; }