*{box-sizing:border-box}body{margin:0;background:#f8f3e8;color:#3f5149;font:15px/1.6 system-ui,-apple-system,sans-serif}button,input,select{font:inherit}button,a,input,select{outline-offset:5px}a{color:inherit}button,.button{display:inline-flex;justify-content:center;align-items:center;gap:8px;border:0;border-radius:12px;padding:12px 18px;background:#687f69;color:#fff9eb;text-decoration:none;font-weight:650;cursor:pointer;transition:transform .2s,background .2s}button:hover,.button:hover{background:#536b55}.rose{background:#ae7d70}.rose:hover{background:#96675c}.subtle{background:#ede8dc;color:#59685c}
.brand{display:inline-block;line-height:0;text-decoration:none;border-radius:12px}.brand-logo{display:block;height:40px;width:auto;overflow:visible}.brand .gl-herz,.brand .gl-bluete{transform-box:fill-box;transform-origin:50% 50%}.brand .gl-herz{animation:brand-herz 12s ease-in-out infinite}.brand .gl-herz-2{animation-delay:.24s}.brand .gl-bluete{animation:brand-bluete 12s ease-in-out infinite}.brand:hover .gl-herz{animation:brand-herz-jetzt 1.1s ease-in-out}.brand:hover .gl-herz-2{animation-delay:.18s}.brand:hover .gl-bluete{animation:brand-bluete-jetzt 1.4s ease-in-out}@keyframes brand-herz{0%,84%,100%{transform:scale(1)}87%{transform:scale(1.26)}90%{transform:scale(1)}93%{transform:scale(1.16)}96%{transform:scale(1)}}@keyframes brand-herz-jetzt{0%,100%{transform:scale(1)}22%{transform:scale(1.26)}45%{transform:scale(1)}68%{transform:scale(1.16)}90%{transform:scale(1)}}@keyframes brand-bluete{0%,40%,100%{transform:rotate(0)}46%{transform:rotate(-16deg)}53%{transform:rotate(12deg)}59%{transform:rotate(-5deg)}64%{transform:rotate(0)}}@keyframes brand-bluete-jetzt{0%{transform:rotate(0)}100%{transform:rotate(72deg)}}@media (prefers-reduced-motion:reduce){.brand .gl-herz,.brand .gl-bluete{animation:none}}
.tiny{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#8e8270;font-weight:700}
.form{display:grid;grid-template-columns:1fr;gap:15px;margin:15px 0}.form label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:#7f7769}.form input,.form select{width:100%;padding:11px;border:1px solid #d9d1bd;border-radius:10px;background:#fffdf8;color:#465448}
.error{margin:0;color:#92594f;background:#f7e2d9;border-radius:12px;padding:8px 12px;font-size:13px}.error:empty{display:none}
.info{margin:0;color:#5f7556;background:#e6eedb;border-radius:12px;padding:8px 12px;font-size:13px}.info:empty{display:none}
dialog{border:1px solid #e1d5c2;border-radius:24px;padding:18px;max-width:460px;width:calc(100vw - 32px);background:#fffaf1;color:#4e5b4a;box-shadow:0 25px 120px #24342d55}dialog::backdrop{background:#28423744;backdrop-filter:blur(4px)}
.dialog-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:18px}
.close{float:right}
.form-note{font-size:12px;color:#898578}
[hidden]{display:none!important}
.nur-vorlesen{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* v59 · 145b · Startseite „Leiste“ (Nutzer, 06.10.2026: „definitiv B“) — wie eine kleine App: links die Leiste, rechts der Bereich.
   Ruhig und funktional (Menü-Regeln): Titel in Georgia, Kategorie klein (shared/ui/fenster-kopf.js), drei Knopfarten (.fk-knopf ·
   .fk-haupt · .fk-entf), Schildchen (.fk-schild) statt Kästen, keine Zierzeichen. Die Fenster Umbenennen und Löschen: .fk-fenster.
   364 · Aufgeräumt (Nutzer, 08.10.2026: „Abstände etc., das sieht noch nicht clean aus“): EINE Abstandsleiter für das ganze Hauptmenü
   (mode-picker.css, konten.css, shared/ui/inselstart-dialog.css), dieselbe wie im Fensterkit (fenster-kopf.js MASSE.abstaende 4 · 8 · 12 · 18)
   plus 24 und 36 für die große Fläche:
     --ab-1  4   Zeilen im Text, Schildchen, Etikett über einem Feld
     --ab-2  8   Knopf neben Knopf, Eintrag im Menü, Zeile unter einer Überschrift
     --ab-3  12  Rand um ein Bild in einer Karte, Karte unter Karte, Raster der Arten
     --ab-4  18  Innenrand von Flächen und Fenstern (R6), Bild → Text, Block → Block
     --ab-5  24  Spalte → Spalte, Rand oben der Seite
     --ab-6  36  Rand der Seite links und rechts
   Rundungen: 18 Karten und Flächen · 12 Bilder in Karten, Felder, Knöpfe (R2), Kacheln · 8 Bild in einer Kachel · 24 Fenster (R6) · 999 Schildchen.
   Schrift: 10 · 12 · 13 · 16 · 21 · 25 (R6). Jeder Block hat EINE linke Kante: Bild, Titel, Zeilen, Feld und Knöpfe stehen bündig. */
:root{--ab-1:4px;--ab-2:8px;--ab-3:12px;--ab-4:18px;--ab-5:24px;--ab-6:36px;--rund-karte:18px;--rund-bild:12px;--rund-feld:12px;--rund-klein:8px}
.app{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}
.leiste{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:var(--ab-1);padding:var(--ab-5) var(--ab-3) var(--ab-4);background:#fbf7ee;border-right:1px solid #ece3d2;overflow-y:auto}
.leiste .brand{display:flex;align-items:center;height:40px;margin:0 var(--ab-2) var(--ab-4) var(--ab-3);align-self:flex-start}
.leiste .brand-logo{height:36px}
.leiste ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--ab-1)}
.leiste-eintrag{width:100%;justify-content:space-between;gap:var(--ab-2);min-height:34px;padding:0 var(--ab-3);border-radius:var(--rund-feld);background:none;color:#5e5242;font:600 13px/1.2 system-ui,-apple-system,sans-serif;text-align:left}
.leiste-eintrag:hover{background:#f3ebdd}
.leiste-eintrag[aria-current="page"]{background:#ebe5d4;color:#3f4a3b}
.leiste-eintrag:focus-visible{outline:2px solid #c9a27f;outline-offset:1px}
/* 587 / 593 · Das Konto oben rechts (Nutzer, 13.10.2026): neben „Neue Insel“ ein kleiner Kreis mit dem Anfangsbuchstaben des Kontonamens und daneben der Name; ein Klick öffnet das Menü
   „Angemeldet als …“ · „Abmelden“ (inseln-ablage-ui.js füllt die Liste, shared/ui/konto-menue.js öffnet sie). Es ist das Konto, nicht die Figur — es kann mehrere Figuren geben; das Porträt
   der Figur steht auf „Meine Figur“. Der Kreis ist ein ruhiges Salbeigrün aus der Seite (wie der Hauptknopf), ohne Bild; ohne Kontoname steht ein schlichtes Männchen darin. */
.konto-menue{position:relative;display:flex;align-items:center}
.konto-chip{gap:var(--ab-2);height:40px;max-width:220px;padding:var(--ab-1) var(--ab-4) var(--ab-1) var(--ab-1);border-radius:var(--rund-feld);background:#f3ebdd;color:#4d4436;font:400 15px/1.2 Georgia,serif}
.konto-chip:hover,.konto-menue.ist-offen .konto-chip{background:#ede3d2;color:#4d4436}
.konto-chip:focus-visible{outline:2px solid #c9a27f;outline-offset:2px}
.konto-chip-kreis{flex:none;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#dbe4cb;color:#3f4a3b;font:600 15px/1 Georgia,serif;user-select:none}
.konto-chip-kreis svg{width:22px;height:22px;display:block;fill:#8a9a7c}
.konto-chip-name{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.konto-menue-liste{position:absolute;right:0;top:calc(100% + var(--ab-2));z-index:20;min-width:236px;max-width:320px;display:flex;flex-direction:column;padding:var(--ab-2);border-radius:var(--rund-karte);background:#fffaf1;border:1px solid #efe6d4;box-shadow:0 14px 40px #2c3a2a2e}
.konto-menue-kopf{margin:0;padding:var(--ab-2) var(--ab-3);font:400 12px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;color:#7d6c55;overflow-wrap:anywhere}/* ◀ 899b Prüfung: lange Adressen brechen um statt hinauszuragen */

/* Die Kategorie klein unter einem Titel — auch außerhalb eines Fensterkopfs (Karten, Felder), wie .fk-kopf .fk-kat (fenster-kopf.js). */
.app .fk-kat,dialog .fk-kat{display:block;margin:0;font:600 10px/12px system-ui,-apple-system,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#a8876e}
/* ◀ 899b: Steht dort die eigene E-Mail-Adresse (Fenster „Konto“ und „Konto löschen?“), dann so, wie sie ist — nicht in Großbuchstaben, ohne Sperrung. */
.fk-kopf .fk-kat.ist-adresse:not(#fk-nie){font-weight:500;letter-spacing:0;text-transform:none;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}/* ◀ 899b Prüfung: die ganze Adresse, nie abgeschnitten */
/* Die Seite steht in der Mitte der Fläche neben der Leiste (breite Fenster: kein leerer Streifen rechts). Der Kopf jeder Seite ist 40 px hoch
   wie das Logo, damit Titel, Knöpfe und Logo auf einer Mittellinie liegen. */
.haupt{min-width:0;width:100%;max-width:1180px;margin:0 auto;padding:var(--ab-5) var(--ab-6) var(--ab-6)}
.bereich{display:flex;flex-direction:column;gap:var(--ab-4)}
.haupt-kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--ab-4);flex-wrap:wrap;min-height:40px}
.haupt-kopf .fk-kopf:not(#fk-nie){margin:0}
.haupt-knoepfe{display:flex;align-items:center;gap:var(--ab-2);flex-wrap:wrap}

/* Die Inseln: die zuletzt gebaute groß, die anderen als Zeilen. Jede Karte: 12 px Rand ums Bild, 18 px zwischen Bild und Text. */
.saved-list{display:flex;flex-direction:column;gap:var(--ab-3)}
.insel-karte{position:relative;display:grid;grid-template-columns:136px minmax(0,1fr) auto;align-items:center;gap:var(--ab-4);padding:var(--ab-3);border:1px solid #ece3d2;border-radius:var(--rund-karte);background:#fffaf1;min-width:0}
.insel-karte .ik-bild{display:block;line-height:0;border-radius:var(--rund-bild);overflow:hidden;aspect-ratio:16/10;background:#cfe7ea}
.insel-karte .ik-foto{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.insel-karte a.ik-bild:hover .ik-foto{transform:scale(1.03)}
.insel-karte .ik-text{display:flex;flex-direction:column;gap:var(--ab-1);min-width:0}
.insel-karte .ik-name{margin:0;font:400 21px/26px Georgia,serif;color:#4d4436;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.insel-karte .ik-art{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.insel-karte .ik-zeile{display:flex;align-items:center;flex-wrap:wrap;gap:var(--ab-1) var(--ab-3);margin-top:var(--ab-1)}
.insel-karte .ik-wann{margin:0;font-size:12px}
.ik-zahlen{display:flex;flex-wrap:wrap;gap:var(--ab-1);list-style:none;margin:0;padding:0}
.ik-zahlen li{display:inline-flex;align-items:center;gap:var(--ab-1);padding:3px 8px 3px 4px;border-radius:999px;background:#f3ead9;color:#7d6c55;font:600 10px/1.3 system-ui,-apple-system,sans-serif}
.ik-zahlen.ist-leer{margin:0;font-size:12px;color:#94816a}
.ik-z{display:inline-flex;width:16px;height:16px;flex:none}.ik-z svg{width:100%;height:100%;display:block}
.insel-karte .ik-stand{display:flex;align-items:center;gap:var(--ab-2);margin:0;font-size:12px;color:#7b8a70}
.insel-karte .ik-stand.ist-offline,.insel-karte .ik-stand.ist-ohne-konto,.insel-karte .ik-stand.ist-geraet{color:#94816a}
/* ◀ 806 · „Ältere Fassung aufgehoben · Zurückholen“: ruhig, der Knopf wie ein leises Wort (kein Kasten) */
.insel-karte .ik-stand.ist-aufgehoben{gap:4px;color:#8a8270}
.insel-karte .ik-aufgehoben-knopf{all:unset;cursor:pointer;color:#5f8a5a;font:inherit;text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(95,138,90,.45)}
.insel-karte .ik-aufgehoben-knopf:hover{color:#4d7449}
.insel-karte .ik-aufgehoben-knopf:focus-visible{outline:2px solid #8fb08a;outline-offset:2px;border-radius:3px}
.insel-karte .ik-aufgehoben-knopf:disabled{opacity:.55;cursor:default}
.ik-hinweise:empty,.ik-besuch-platz:empty{display:none}
.ik-hinweis{display:flex;align-items:center;flex-wrap:wrap;gap:var(--ab-2);margin-top:var(--ab-2);padding:var(--ab-2) var(--ab-3);border-radius:var(--rund-feld);background:#fbefe2;color:#8a5f45;font-size:12px}
.ik-hinweis.ist-fehler,.ik-hinweis.ist-offline{background:#f6ebe6;color:#92594f}
.ik-hinweis-satz{display:flex;flex-direction:column;gap:var(--ab-1);flex:1 1 200px}.ik-hinweis-satz span{color:#94816a}
.insel-karte .ik-aktionen{display:flex;align-items:center;gap:var(--ab-2);margin:0;flex-wrap:nowrap}
.insel-karte.broken{grid-template-columns:minmax(0,1fr) auto;background:#f8efe8}
/* Die große Karte: das Bild links, rechts in der Mitte eine Gruppe: Name, Zahlen und Stand, 18 px darunter „Weiterbauen“ und das Menü ···. */
.insel-karte.ist-gross{grid-template-columns:minmax(0,1.55fr) minmax(250px,1fr);grid-template-rows:1fr auto auto 1fr;align-items:stretch;gap:0 var(--ab-5)}
.insel-karte.ist-gross .ik-bild{grid-row:1/5;aspect-ratio:16/10}
.insel-karte.ist-gross .ik-text{grid-column:2;grid-row:2;align-self:end}
.insel-karte.ist-gross .ik-name{font-size:25px;line-height:30px;white-space:normal;overflow-wrap:anywhere}
.insel-karte.ist-gross .ik-zeile{margin-top:var(--ab-2)}
.insel-karte.ist-gross .ik-aktionen{grid-column:2;grid-row:3;align-self:start;margin-top:var(--ab-4)}
.insel-karte.ist-gross .ik-weiter{flex:1}
/* Das Menü ··· (shared/ui/inselkarte.js): ein kleiner Nebenknopf, die Liste als ruhiges Blatt. */
.ik-menue{position:relative}
.ik-menue-knopf{width:34px;height:34px;gap:0;padding:0;border-radius:var(--rund-feld);background:#f1e8d9;color:#5e5242}
.ik-menue-knopf:hover{background:#ebe0cd}
.ik-menue-liste{position:absolute;right:0;bottom:calc(100% + var(--ab-2));z-index:20;min-width:236px;display:flex;flex-direction:column;padding:var(--ab-2);border-radius:var(--rund-karte);background:#fffaf1;border:1px solid #efe6d4;box-shadow:0 14px 40px #2c3a2a2e}
.ik-menue.nach-unten .ik-menue-liste{bottom:auto;top:calc(100% + var(--ab-2))}
.ik-menue-eintrag{justify-content:flex-start;gap:var(--ab-2);padding:var(--ab-2) var(--ab-3);border-radius:var(--rund-feld);background:none;color:#4d4436;font:500 13px/1.3 system-ui,-apple-system,sans-serif;text-align:left}
.ik-menue-eintrag:hover,.ik-menue-eintrag:focus-visible{background:#f3ebdd}
.ik-menue-eintrag.ist-gefahr{color:#9c5a4c}
.ik-menue-text{display:flex;flex-direction:column}.ik-menue-text small{font-size:12px;color:#94816a;font-weight:400}
.ik-menue-trenner{height:1px;margin:var(--ab-1) var(--ab-2);background:#ece3d2}
/* Leer: noch keine Insel — dieselbe Karte wie die große, mit demselben Raster. */
.empty{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(250px,1fr);align-items:stretch;gap:var(--ab-5);padding:var(--ab-3);border:1px solid #ece3d2;border-radius:var(--rund-karte);background:#fffaf1}
.empty img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:var(--rund-bild);display:block}
.empty-text{align-self:center}
#bereich-inseln:has(#empty:not([hidden])) #create{display:none}
.empty-titel{margin:0 0 var(--ab-3);font:400 25px/30px Georgia,serif;color:#4d4436}
/* v59 · 206 · Inseln im Konto, die noch nicht auf diesem Gerät liegen: dieselben Karten unter „Deine Inseln“ (Weiterbauen holt sie). */
.ablage-nur-server.ist-vermisst{border-color:#e2c9b4}
/* v59 · 206 · Das Archiv ganz unten: ein ruhiger, zugeklappter Abschnitt; die Karten etwas blasser, ohne Hauptknopf. */
.archiv-bereich{margin-top:var(--ab-2)}
.archiv-kopf{display:flex;align-items:center;gap:var(--ab-2);padding:var(--ab-1) 0;cursor:pointer;list-style:none;border-radius:var(--rund-feld)}
.archiv-kopf::-webkit-details-marker{display:none}
.archiv-kopf::before{content:'';width:7px;height:7px;margin:0 var(--ab-1) 0 0;border-right:1.6px solid #94816a;border-bottom:1.6px solid #94816a;transform:rotate(-45deg);transition:transform .2s ease}
.archiv-bereich[open]>.archiv-kopf::before{transform:rotate(45deg)}
.archiv-kopf:focus-visible{outline:2px solid #b9cfae;outline-offset:2px}
.archiv-kopf .fk-abschnitt{flex:1;margin:0}
.archiv-list{display:flex;flex-direction:column;gap:var(--ab-3);margin-top:var(--ab-3)}
.ablage-im-archiv{background:#fbf7ee}
.ablage-im-archiv .ik-foto{filter:saturate(.7) brightness(1.04)}
@media (prefers-reduced-motion:reduce){.archiv-kopf::before{transition:none}}
/* 830 · Ein kompakter Dateiweg unter der gemeinsamen Inselübersicht. */
.insel-datei-oeffnen{margin-top:var(--ab-4)}
.insel-datei-oeffnen .fk-knopf{padding:var(--ab-1) var(--ab-3);font-size:12px}
.vermisste-inseln{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ab-3) var(--ab-4);margin:0}.vermisste-inseln p{margin:0;flex:1 1 320px}.vermisste-inseln button{padding:var(--ab-2) var(--ab-3);font-size:13px}

/* Meine Figur: die lebende Figur auf ihrer Bühne, daneben Name, Satz und „Figur ändern“ — wie jede Karte mit 12 px Rand ums Bild. */
#bereich-figur .wer-karte{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:var(--ab-5);padding:var(--ab-3);border:1px solid #ece3d2;border-radius:var(--rund-karte);background:#fffaf1;overflow:hidden;box-shadow:none}
#bereich-figur .wer-karte .art{min-height:400px;height:auto;padding:0;border-radius:var(--rund-bild);overflow:hidden;background:linear-gradient(165deg,#fbeedf,#f6dfd2 55%,#efd2c4)}
#bereich-figur .wer-karte .art .wer-kopf{width:min(210px,70%)}
#bereich-figur .wer-karte .art .wer-kopf svg{width:100%}
#bereich-figur .wer-karte .card-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:0;padding:var(--ab-3) var(--ab-3) var(--ab-3) 0}
#bereich-figur .wer-karte .card-copy h2,#bereich-figur .wer-karte.hat-figur .card-copy h2{margin:0;font:400 25px/30px Georgia,serif;color:#4d4436;overflow-wrap:anywhere}
#bereich-figur .wer-karte .fk-kat{margin:var(--ab-1) 0 0}
#bereich-figur .wer-karte .wer-satz,#bereich-figur .wer-karte.hat-figur .wer-satz{display:block;margin:var(--ab-3) 0 0;padding:0;background:none;font-size:13px;color:#7d6c55}
#bereich-figur .wer-karte .wer-satz[hidden]{display:none}
#bereich-figur .wer-karte button.fk-knopf{margin-top:var(--ab-3);box-shadow:none}
#bereich-figur .wer-karte button.fk-knopf:hover{transform:none}
#bereich-figur .wer-karte .wer-hinweis{margin:var(--ab-2) 0 0}

/* 594b · Meine Figuren (Entwurf 594E, Tafel 1): mit einer Figur bleibt ihre große Karte; mit mehreren ein Raster aus Karten, vorne die Hauptfigur
   (#wer-karte, auf ihrer Bühne), dahinter die anderen als Bild. Je Karte das Bild (300 px hoch), Name und „Hauptfigur“, ihr Satz, wo sie lebt,
   „Aussehen“ und das Menü ···. Bei 1440 × 900 vier Karten nebeneinander, ohne Scrollen; mehr Figuren dürfen in die nächste Reihe wachsen. */
.figuren-raster{display:grid;gap:var(--ab-3)}
.figuren-raster.ist-mehrere{grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}
#bereich-figur .figuren-raster.ist-mehrere .wer-karte,#bereich-figur .figur-karte{display:flex;flex-direction:column;gap:0;padding:var(--ab-2);border:1px solid #ece3d2;border-radius:var(--rund-karte);background:#fffaf1;min-width:0;overflow:visible}
#bereich-figur .figuren-raster.ist-mehrere .wer-karte .art,#bereich-figur .figur-karte .art{position:relative;height:300px;min-height:0;padding:0;display:grid;place-items:center;border-radius:var(--rund-bild);overflow:hidden;background:linear-gradient(165deg,#fbeedf,#f6dfd2 55%,#efd2c4)}
#bereich-figur .figur-karte .fig-bild{width:100%;height:100%;object-fit:cover;display:block}
#bereich-figur .figur-karte .fig-kopfbild{width:min(150px,62%)}
#bereich-figur .figur-karte .fig-kopfbild svg{width:100%;height:auto;display:block}
#bereich-figur .figuren-raster.ist-mehrere .wer-karte .card-copy,#bereich-figur .figur-karte .card-copy{flex:1;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:var(--ab-3) var(--ab-2) var(--ab-1)}
#bereich-figur .fig-kopf{display:flex;align-items:center;flex-wrap:wrap;gap:var(--ab-1) var(--ab-2);min-width:0}
#bereich-figur .figuren-raster.ist-mehrere .card-copy h2,#bereich-figur .figur-karte .card-copy h2{margin:0;font:400 21px/26px Georgia,serif;color:#4d4436;overflow-wrap:anywhere}
#bereich-figur .fig-haupt{background:#e6eedb;color:#4f5d45}
#bereich-figur .figuren-raster.ist-mehrere .wer-karte .wer-satz,#bereich-figur .figur-karte .wer-satz{display:block;margin:var(--ab-1) 0 0;padding:0;background:none;font-size:13px;line-height:1.4;color:#7d6c55}
#bereich-figur .figur-karte .wer-satz[hidden]{display:none}
#bereich-figur .fig-inseln{display:flex;flex-wrap:wrap;gap:var(--ab-1);list-style:none;margin:var(--ab-2) 0 0;padding:0}
#bereich-figur .fig-inseln[hidden]{display:none}
#bereich-figur .fig-insel{background:#f3ead9;color:#6d5d48}
#bereich-figur .fig-insel.ist-archiv{background:#f1eee6;color:#7d7566}
#bereich-figur .fig-keine{font-size:12px;line-height:1.5;color:#8c7b6d}
#bereich-figur .fig-aktionen{display:flex;align-items:center;gap:var(--ab-2);margin-top:auto;padding-top:var(--ab-3)}
#bereich-figur .fig-aktionen .fig-aussehen{flex:1;margin:0;box-shadow:none}
#bereich-figur .fig-aktionen .fig-aussehen:hover{transform:none}
#bereich-figur .figuren-raster.ist-mehrere .wer-karte button#wer-bist-du{align-self:stretch;margin-top:auto}
#bereich-figur .figuren-raster.ist-mehrere .wer-karte .fig-inseln{margin-bottom:var(--ab-3)}
#bereich-figur .figuren-raster.ist-mehrere #wer-text,#bereich-figur .figuren-raster.ist-mehrere #wer-tiny,#bereich-figur .figuren-raster.ist-mehrere .wer-hinweis.ist-ruhig{display:none}
#bereich-figur .figuren-raster:not(.ist-mehrere) .fig-inseln{margin:var(--ab-3) 0 0}
.figuren-voll{background:#f1e8d9;color:#6d5d48}
/* 594b · B3: nach „Konto anlegen“ eine ruhige Zeile oben auf Meine Inseln. */
.figur-zeile{margin:0;padding:var(--ab-2) var(--ab-3);border-radius:var(--rund-feld);background:#e9f0e0;color:#4f5d45;font:400 14px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif}
.figur-zeile[hidden]{display:none}

/* Die Fenster Umbenennen, Löschen, Zwei Stände, Endgültig löschen: Innenrand 18 (R6), das × so, dass sein Zeichen auf der rechten Kante des Inhalts steht
   (die Klickfläche ist 32 px, das Zeichen 13 px: 8 px über den Innenrand hinaus) und auf der Mittellinie der Titelzeile. */
dialog.fk-fenster{max-width:420px}
dialog.fk-fenster>.close{position:absolute;top:15px;right:10px;float:none}
dialog.fk-fenster .fk-kopf{padding-right:var(--ab-5)}
.neu-name{display:flex;flex-direction:column;gap:var(--ab-1);min-width:0}
.neu-name input{width:100%;height:34px;padding:0 var(--ab-3);border:1px solid #e3d9c6;border-radius:var(--rund-feld);background:#fffdf8;color:#4d4436;font-size:13px}
.neu-name input:focus-visible{outline:2px solid #c9a27f;outline-offset:1px}
.neu-name .name-grund{color:#92594f}
/* 536 · Nutzer 13.10.: Namensfeld der neuen Insel etwas größer (Schrift und Höhe); die Umbenennen-Karte und die Inselseite bleiben klein */
.neu-gross .neu-name input{height:44px;font-size:16px}
.neu-name input::placeholder{color:#a79b86}
dialog.fk-fenster .neu-name{margin-top:var(--ab-1)}
dialog.fk-fenster .fk-leise{margin:var(--ab-1) 0 0}
dialog.fk-fenster .error{margin:var(--ab-3) 0 0}
dialog#ablage-konflikt{max-width:520px}

@media(max-width:900px){.haupt{padding:var(--ab-5) var(--ab-4) var(--ab-6)}.insel-karte.ist-gross{grid-template-columns:1fr;grid-template-rows:auto;gap:var(--ab-3)}.insel-karte.ist-gross .ik-bild{grid-row:auto}.insel-karte.ist-gross .ik-text,.insel-karte.ist-gross .ik-aktionen{grid-column:auto;grid-row:auto;align-self:auto}.insel-karte.ist-gross .ik-text{padding:var(--ab-1) var(--ab-2) 0}.insel-karte.ist-gross .ik-aktionen{margin-top:0;padding:0 var(--ab-2) var(--ab-2)}.empty{grid-template-columns:1fr;gap:var(--ab-3)}.empty-text{padding:var(--ab-1) var(--ab-2) var(--ab-2)}}
@media(max-width:760px){
 .app{grid-template-columns:1fr}
 .leiste{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--ab-2);padding:var(--ab-3) var(--ab-4);border-right:0;border-bottom:1px solid #ece3d2}
 .leiste .brand{height:auto;margin:0 var(--ab-2) 0 0;align-self:center}.leiste .brand-logo{height:32px}
 .leiste ul.leiste-nav{flex-direction:row}
 .haupt{padding:var(--ab-4) var(--ab-3) var(--ab-6)}
 .insel-karte{grid-template-columns:96px minmax(0,1fr);gap:var(--ab-3)}
 .insel-karte:not(.ist-gross) .ik-aktionen{grid-column:1/-1;justify-content:flex-end}
 #bereich-figur .wer-karte{grid-template-columns:1fr;gap:var(--ab-3)}#bereich-figur .wer-karte .art{min-height:320px}#bereich-figur .wer-karte .card-copy{padding:var(--ab-1) var(--ab-2) var(--ab-2)}
}

/* 389 · Der Kopf bleibt beim Laden stehen; vorläufige Karten/Knöpfe erscheinen nicht einzeln. */
.bereich-inhalt{display:flex;flex-direction:column;gap:var(--ab-4);min-width:0}
.bereich-laden{display:none;margin:0;color:#7d6c55;font-size:13px}
.bereich[data-laedt]>.bereich-laden{display:flex;align-items:center;gap:var(--ab-3);flex-wrap:wrap}
.bereich[data-laedt]>.bereich-inhalt{visibility:hidden}
.bereich[data-laedt]>.haupt-kopf .haupt-knoepfe>:not(.konto-menue){visibility:hidden}

.app[data-inseln-laedt] #leiste-zahl,.app[data-figur-laedt] #leiste-zahl-figuren{visibility:hidden}