/* v59 · Inselstart — „Neue Insel“ als eigene Seite (145b, Entwurf B „Leiste“, Nutzer 06.10.2026). Geladen von index.html; alles gilt nur in
   #new-island. Seit 594c in der Reihenfolge Du · Bewohner · Insel: zuerst die Figuren als Kacheln (wie die Arten) und rechts die gewählte groß und
   lebend; dann „Wie ähnlich sind dir deine Bewohner?“ (links die Figur, rechts drei Karten); dann links alle Arten in einem Raster (Südsee, dann
   Verwunschen lila abgesetzt), rechts die gewählte groß mit Satz und Name. Menü-Regeln: Titel und Kategorie aus shared/ui/fenster-kopf.js, drei
   Knopfarten, Schildchen, keine Zierzeichen. Lautlos; prefers-reduced-motion ohne Übergänge.
   364 · Aufgeräumt: die Abstandsleiter --ab-1…--ab-6 und die Rundungen stehen in mode-picker.css (Kopf des Abschnitts „Startseite Leiste“).
   Der Insel-Code ist fort — die große Insel rechts trägt nur noch Bild, Name der Art und das Feld „Name“, alles auf EINER linken Kante. */
#new-island{--neu-salbei:#63755a;--neu-lila:#f1ebfa;--neu-lila-rand:#ddd0f1;--neu-lila-text:#6c5a92;position:relative;gap:var(--ab-4)}
/* Das × steht auf der Mittellinie der Kopfzeile (40 px) und mit seinem Zeichen auf der rechten Kante des Inhalts (8 px über die Klickfläche hinaus). */
#new-island .close{position:absolute;top:4px;right:-8px;float:none;z-index:3}
#new-island .neu-kopf{display:flex;align-items:center;flex-wrap:wrap;gap:var(--ab-2) var(--ab-5);min-height:40px;padding-right:var(--ab-6)}
#new-island .neu-kopf .fk-kopf{margin:0}
#new-island .neu-kopf h1:focus{outline:none}
/* Die Schrittzeile: drei ruhige Punkte mit Namen. */
.neu-schritte{display:flex;gap:var(--ab-2);list-style:none;margin:0;padding:0}
.neu-schritte button{gap:var(--ab-2);padding:var(--ab-1) var(--ab-3) var(--ab-1) var(--ab-1);border-radius:999px;background:#f3ead9;color:#7d6c55;font:600 12px/1.2 system-ui,-apple-system,sans-serif}
.neu-schritte button:hover{background:#ece1cd}
.neu-schritte button[aria-current="step"]{background:var(--neu-salbei);color:#fffdf3}
.neu-schritte button.ist-erledigt{background:#e6eedb;color:#55684d}
.neu-punkt{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#fffaf1;color:#7d6c55;font:700 10px/1 system-ui,-apple-system,sans-serif}
.neu-schritte button[aria-current="step"] .neu-punkt{color:var(--neu-salbei)}
#island-form{display:flex;flex-direction:column;gap:var(--ab-4)}
.neu-schritt h2:focus{outline:none}
.neu-wahl{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,1fr);gap:var(--ab-5);align-items:start}
#neu-schritt-leute .neu-wahl{grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr)}
/* v59 · 594c · Schritt 1 · links „Wer bist du auf dieser Insel?“ (Titel und Schildchen „bleibt für diese Insel“) über den Kacheln der Figuren. */
.neu-links{display:flex;flex-direction:column;gap:var(--ab-3);min-width:0}
#new-island .neu-links .fk-kopf:not(#fk-nie){margin:0}
#new-island .neu-figuren{border:0;margin:0;padding:0;min-width:0}
.neu-figuren-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--ab-3)}
#new-island .fig-kachel .type-art{aspect-ratio:4/5;display:grid;place-items:center;background:linear-gradient(165deg,#fbeedf,#f6dfd2 55%,#efd2c4)}
#new-island .fig-kachel .type-art img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.fig-kachel-kopf{display:block;width:62%;line-height:0}.fig-kachel-kopf svg{width:100%;height:auto;display:block}
#new-island .fig-kachel .type-copy{display:flex;align-items:center;justify-content:space-between;gap:var(--ab-2);min-width:0;min-height:34px}/* mit und ohne Schildchen dieselbe Zeile */
#new-island .fig-kachel .type-copy strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#new-island .fig-kachel .type-copy .fk-schild{flex:0 0 auto}
/* „Neue Figur“: eine stille Kachel mit gestricheltem Rand (das Zeichen ist ein schlichtes Plus), so hoch wie die anderen. */
.fig-kachel-neu{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ab-2);min-height:180px;margin:0;padding:var(--ab-3);border:1px dashed #d9ccb3;border-radius:var(--rund-feld);background:transparent;color:#7d6c55;font:400 14px/1.25 Georgia,serif;cursor:pointer;transition:border-color .2s,background .2s}
.fig-kachel-neu:hover{border-color:#c9b896;background:#fffaf1}
.fig-kachel-neu:focus-visible{outline:2px solid #c9a27f;outline-offset:3px}
.fig-kachel-plus{display:block;width:24px;height:24px;line-height:0}.fig-kachel-plus svg{width:100%;height:100%}
.fig-kachel-voll{align-self:center;justify-self:center}
/* Schritt 1 · links die Arten: 12 px zwischen den Kacheln, 4 px Rand ums Bild, der Name steht bündig mit dem Bild. */
#new-island .neu-arten{border:0;margin:0;padding:0;min-width:0}
#new-island .neu-arten>.fk-abschnitt:first-of-type{margin-top:0}
#new-island .fk-abschnitt.ist-verwunschen{color:var(--neu-lila-text)}
/* Die Zahl neben „Südsee“ und „Verwunschen“ ist ein Schildchen (R3: 999 px rund, 10 px/600, 3 · 8 innen), nicht das alte Georgia-Kärtchen des Kits. */
#new-island .fk-abschnitt>b:not(#fk-nie){padding:3px 8px;border-radius:999px;font:600 10px/1.2 system-ui,-apple-system,sans-serif}
#new-island .fk-abschnitt.ist-verwunschen>b{background:var(--neu-lila);color:var(--neu-lila-text)}
.neu-arten-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:var(--ab-3)}
.neu-arten-raster.ist-verwunschen{padding:var(--ab-3);border-radius:var(--rund-karte);background:var(--neu-lila);box-shadow:inset 0 0 0 1px var(--neu-lila-rand)}
#new-island .type{position:relative;display:flex;flex-direction:column;margin:0;padding:var(--ab-1);border-radius:var(--rund-feld);background:#fffaf1;border:1px solid #ece3d2;cursor:pointer;transition:box-shadow .2s,border-color .2s}
#new-island .neu-arten-raster.ist-verwunschen .type{background:#fbf8fe;border-color:var(--neu-lila-rand)}
#new-island .type:hover{border-color:#d9ccb3}
/* Das Radio deckt die ganze Kachel (Fokus und Bildlauf meinen die Kachel, nicht einen Punkt oben links); die Knopfleiste unten bleibt beim Bildlauf frei (54 px Leiste + 30 Luft). */
#new-island .type input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:none}
html:has(#new-island:not([hidden])){scroll-padding-bottom:84px;scroll-padding-top:18px}/* oben 18 px Luft, damit der Fokusring (2 px + 3 px Abstand) beim Hochblättern nicht am Fensterrand abgeschnitten wird */
#new-island .type-art{display:block;line-height:0;border-radius:var(--rund-klein);overflow:hidden;aspect-ratio:16/10;background:#cfe7ea}
#new-island .neu-arten-raster.ist-verwunschen .type-art{background:#2c3557}
#new-island .type-art img{width:100%;height:100%;object-fit:cover;display:block}
#new-island .type-copy{padding:var(--ab-2) 0 var(--ab-1)}
#new-island .type-copy strong{display:block;font:400 13px/1.25 Georgia,serif;color:#4d4436;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;hyphenate-limit-chars:auto 5 5}
#new-island .type-copy small{display:none}
#new-island .type:has(input:checked){border-color:var(--neu-salbei);box-shadow:0 0 0 2px var(--neu-salbei)}
#new-island .type:has(input:focus-visible){outline:2px solid #c9a27f;outline-offset:3px}
/* Schritt 1 · rechts die gewählte groß: 18 px Innenrand, Bild, Name der Art, Satz und das Feld „Name“ auf derselben linken Kante.
   Eine verwunschene Art färbt die ganze Fläche lila (wie ihre Kachel und der Blick zurück in Schritt 2), kein Ring ums Bild. */
.neu-gross{position:sticky;top:var(--ab-4);display:flex;flex-direction:column;gap:var(--ab-4);padding:var(--ab-4);border:1px solid #ece3d2;border-radius:var(--rund-karte);background:#fffaf1}
.neu-gross:has(.neu-vorschau.ist-verwunschen){background:#fbf8fe;border-color:var(--neu-lila-rand)}
.neu-vorschau{margin:0;display:flex;flex-direction:column;gap:var(--ab-3)}
.neu-vorschau img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:var(--rund-bild);display:block;background:#cfe7ea}
.neu-vorschau.ist-verwunschen img{background:#2c3557}
.neu-vorschau figcaption{display:flex;flex-direction:column;gap:var(--ab-1);padding:0}
.neu-vorschau.ist-verwunschen .fk-kat{color:var(--neu-lila-text)}
.neu-vorschau strong{font:400 25px/30px Georgia,serif;color:#4d4436}
.neu-vorschau-satz{font-size:13px;line-height:1.45;color:#7d6c55}
/* Schritt 2 · links die gewählte Figur: dasselbe Maß, 18 px Innenrand, Bild und Text bündig. */
.neu-summe{display:flex;flex-direction:column;gap:var(--ab-3);padding:var(--ab-4);border:1px solid #ece3d2;border-radius:var(--rund-karte);background:#fffaf1}
.neu-summe.ist-verwunschen{background:#fbf8fe;border-color:var(--neu-lila-rand)}
.neu-summe img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:var(--rund-bild);display:block}
.neu-summe-text{display:flex;flex-direction:column;gap:var(--ab-1);padding:0}
.neu-summe-text strong{font:400 21px/26px Georgia,serif;color:#4d4436;overflow-wrap:anywhere}
.neu-summe-figur-bild{display:grid;place-items:center;aspect-ratio:1/1;border-radius:var(--rund-bild);overflow:hidden;background:linear-gradient(165deg,#fbeedf,#f6dfd2 55%,#efd2c4)}
.neu-summe .neu-summe-figur-bild img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:50% 20%;border-radius:0}
.neu-summe-figur.ohne-figur .neu-summe-figur-bild{background:linear-gradient(165deg,#f4efe4,#ece3d2)}
/* Schritt 3 · der Blick zurück: leise unter dem Namen der Insel — wer du bist und wie ähnlich die Bewohner werden. */
.neu-rueckblick{display:flex;align-items:center;gap:var(--ab-2);margin:0;font-size:13px;line-height:1.35;color:#7d6c55}
.neu-rueckblick[hidden]{display:none}
.neu-rueckblick-bild{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border-radius:50%;overflow:hidden;background:#f6dfd2}
.neu-rueckblick-bild img{width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.neu-rueckblick-bild .fig-kachel-kopf{width:100%}
.neu-rechts{display:flex;flex-direction:column;gap:var(--ab-3);min-width:0}
/* R1: auch hier steht der Titel in EINER Zeile (passt er nicht, endet er auf „…“ und trägt den ganzen Text als title); „später änderbar“ steht direkt dahinter (898, .neu-zusatz). */
#new-island .neu-rechts .fk-kopf:not(#fk-nie){margin:0}
/* Schritt 2 · die drei Karten der Bewohner (aufbau/aehnlichkeit-wahl.js, kurz: Name und eine Zeile). */
#new-island .aehnlichkeit-wahl{margin:0}
#new-island .aehnlichkeit-wahl legend{display:none}
#new-island .aeh-stufen{gap:var(--ab-3)}
#new-island .aeh-stufe{border:1px solid #ece3d2;border-radius:var(--rund-karte);background:#fffaf1;padding:var(--ab-2);box-shadow:none;transition:box-shadow .2s,border-color .2s}
#new-island .aeh-stufe:hover{transform:none;border-color:#d9ccb3;box-shadow:none}
#new-island .aeh-stufe:has(input:checked){border-color:var(--neu-salbei);box-shadow:0 0 0 2px var(--neu-salbei)}
#new-island .aeh-stufe:has(input:checked) strong::after{content:none}
#new-island .aeh-stufe:has(input:focus-visible){outline:2px solid #c9a27f;outline-offset:3px}
#new-island .aeh-bild{display:block;line-height:0;border-radius:var(--rund-bild);overflow:hidden;aspect-ratio:3/2;background:#f6dfd2}
#new-island .aeh-bild svg{width:100%;height:100%;display:block}
#new-island .aeh-bild img.aeh-foto{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
#new-island .aeh-kopie{padding:var(--ab-3) 0 var(--ab-1)}
#new-island .aeh-kopie strong{font:400 16px/1.2 Georgia,serif;color:#4d4436}
#new-island .aeh-kopie small{font-size:12px;line-height:1.35;color:#94816a;margin-top:var(--ab-1)}
#new-island .aeh-satz,#new-island .aeh-hinweis{display:none}
/* Schritt 1 · Du (seit 594c rechts): die gewählte groß und lebend, darunter Name, „lebt schon auf …“ und ihr Satz. */
.insel-figur{position:sticky;top:var(--ab-4);display:flex;flex-direction:column;gap:var(--ab-4);padding:var(--ab-4);border:1px solid #ece3d2;border-radius:var(--rund-karte);background:#fffaf1}
.insel-figur-buehne{position:relative;aspect-ratio:16/11;border-radius:var(--rund-bild);overflow:hidden;background:linear-gradient(165deg,#fbeedf,#f6dfd2 55%,#efd2c4)}
.insel-figur-buehne canvas.startfigur{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;opacity:0;transition:opacity .5s ease}
.insel-figur-buehne.zeigt canvas.startfigur{opacity:1}
.insel-figur-buehne img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 70%}
.insel-figur-text{display:flex;flex-direction:column;align-items:flex-start;gap:var(--ab-1);min-width:0}
.insel-figur-titel{font:400 25px/30px Georgia,serif;color:#4d4436;overflow-wrap:anywhere}
.insel-figur-satz{margin:0}
.insel-figur.ohne-figur .insel-figur-buehne{background:linear-gradient(165deg,#f4efe4,#ece3d2)}
/* Unten: Fehler und die Knöpfe (Zurück · Weiter · Insel gründen), 8 px zwischen den Knöpfen wie überall. */
.neu-fuss{position:sticky;bottom:0;z-index:2;display:flex;align-items:center;justify-content:flex-end;gap:var(--ab-2);padding:var(--ab-3) 0 var(--ab-2);background:linear-gradient(#f8f3e800,#f8f3e8 30%)}
.neu-fuss .error{margin:0 auto 0 0}
.neu-fuss .dialog-actions{margin:0}
@media(prefers-reduced-motion:reduce){.insel-figur-buehne canvas.startfigur,#new-island .type,#new-island .aeh-stufe,.fig-kachel-neu{transition:none}}
@media(max-width:900px){
 .neu-wahl{grid-template-columns:1fr}
 .neu-gross,.insel-figur{position:static;order:-1}
 .neu-summe{flex-direction:row;align-items:center}.neu-summe img{width:120px}.neu-summe-figur-bild{flex:0 0 120px}
}
@media(max-width:560px){
 .neu-arten-raster,.neu-figuren-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
 #new-island .aeh-stufen{grid-template-columns:1fr}
 #new-island .aeh-stufe{flex-direction:row!important;align-items:center}
 #new-island .aeh-bild{flex:0 0 46%}
 #new-island .aeh-kopie small{display:block!important}
}
/* ◀ 880 · Insel · Du · Bewohner: statt eines toten „Weiter“ ruhig „Wähl deine Insel“ / „Wähl deine Figur“; ohne Wahl ist die Vorschau leise; ohne Figur die Silhouette. */
.neu-wahl-fehlt{align-self:center;padding:0 var(--ab-2);font:italic 400 16px/22px Georgia,serif;color:#8a7a62}
.neu-wahl-fehlt[hidden]{display:none}
.neu-vorschau.ist-leer img{opacity:.4;filter:saturate(.55)}
.neu-summe-figur-bild.ist-silhouette{color:#a8957a}
.neu-summe-figur-bild.ist-silhouette svg{width:46%;height:auto}
.neu-schritte button:disabled{cursor:default;opacity:.55}
/* ◀ 887a (K6): Solange das Konto keine Insel hat, kein ✕ (und im ersten Schritt kein Abbrechen, inselstart-dialog.js). */
.neu-seite.ist-erste #close-new{display:none}
/* ◀ 880 (Nachtrag 6) · Der Name: eine ruhige Zeile statt der Prüfblase, ein sanfter Rahmen; der kleine Würfel im Feld für einen neuen Vorschlag. */
.neu-name{position:relative}
/* ◀ 886: „später änderbar“ neben „Name“ (umbenennen geht über den Stift oben auf der Insel). */
.neu-name-kopf{display:flex;align-items:baseline;justify-content:flex-start;gap:0;margin-bottom:4px}
/* ◀ 898 (Nachtrag 2) · „später änderbar“ ist keine Pille mehr, sondern ein leiser Zusatz direkt hinter dem Etikett („NAME · später änderbar“): dieselbe Zeile, dieselbe
   Grundlinie, normale kleine Schrift in gedämpfter Farbe (Kontrast wie der Blick zurück, 468), nicht in Großbuchstaben. Ebenso hinter der Frage der Bewohner. */
.neu-zusatz{flex:none;font:400 13px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:0;text-transform:none;white-space:nowrap;color:#7d6c55}
.neu-zusatz::before{content:"·";margin:0 7px}
#new-island .neu-rechts .fk-kopf:not(#fk-nie){display:flex;align-items:baseline;gap:0}
#new-island .neu-rechts .fk-kopf .fk-titel:not(#fk-nie){flex:0 1 auto;margin-right:0}
.neu-name input{padding-right:42px}
.neu-wuerfel{position:absolute;right:6px;bottom:6px;width:30px;height:30px;display:grid;place-items:center;padding:0;border:0;border-radius:9px;background:transparent;color:#9a8a70;cursor:pointer}
.neu-wuerfel:hover{background:#f3eadb;color:#6f624d}
.neu-wuerfel:focus-visible{outline:2px solid #c9a27f;outline-offset:1px}
.neu-wuerfel svg{width:20px;height:20px}
.neu-name.ist-fehler input{border-color:#d4a39b;box-shadow:0 0 0 3px #f3dcd6}
.neu-name-fehlt{display:block;margin-top:6px;font-size:14px;line-height:19px;color:#a8574d}
.neu-name-fehlt[hidden]{display:none}