/* Paket D2 · Konten und Inselablage. Eigene Datei neben mode-picker.css,
   nutzt aber dieselben Klassen und Farben (.button, .subtle, .tiny, .save,
   .form, .error, .info, Georgia-Überschriften) — die Ablage soll aussehen
   wie der Rest des Spiels, nicht wie ein Verwaltungswerkzeug. */

/* --- Das Konto-Menü oben rechts in der Lobby (587; Aussehen: mode-picker.css .konto-menue-liste) ----------------------- */
/* v59 · Ohne Konto kein Spiel (Prüfung 37, M1): Scheitert das Abmelden, steht der Grund oben im Menü, in den Farben der Fehlerzeile. */
.konto-leiste.ist-fehler{border-color:#e6c4b8}
.konto-leiste.ist-fehler .konto-menue-kopf{color:#92594f}

/* --- Abzeichen und Zusatzknöpfe an jeder Inselkarte --------------------- */
.ablage-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:9px;padding-top:9px;border-top:1px dashed #e1dac9}
.ablage-abzeichen{font-size:10.5px;letter-spacing:.03em;color:#8a8062;background:#f3efe1;border-radius:20px;padding:4px 10px}
/* Beim Sichtnachweis zu diesem Paket aufgefallen und hier mitgenommen, weil es
   genau die Knöpfe betrifft, die dieses Paket ergänzt: mode-picker.css gibt
   JEDEM Knopf beim Überfahren das dunkle Grün (`button:hover{background:#536b55}`),
   auch den hellen `.subtle`-Knöpfen — deren Textfarbe (#59685c) bleibt dabei
   stehen. Dunkelgrün auf Dunkelgrün: Die Beschriftung verschwindet, solange der
   Zeiger darauf steht. Betrifft „Auf den Server legen", „Vom Server holen",
   „Umbenennen", „Löschen", „Inselsicherung öffnen" und den neuen
   Sichtbarkeitsschalter. konten.css wird nach mode-picker.css geladen, deshalb
   reicht hier eine Zeile; mode-picker.css selbst bleibt unangetastet. */
.subtle:hover,button.subtle:hover{background:#dfd9c8;color:#4d5b50}
.save.ablage-nur-server{background:#f4f1e4;border-style:dashed}

.konto-einladung{color:#7b8d70;font-weight:650;text-decoration:none;border-bottom:1px dotted #a9b79e;padding-bottom:1px}
.konto-einladung:hover{color:#5f7357;border-bottom-style:solid}

/* Verborgene eigene Inseln: derselbe Kartenrahmen, nur ruhiger — man soll
   ohne Hinsehen erkennen, welche Insel gerade niemand sonst findet. */
.sichtbarkeit{gap:5px}
.sichtbarkeit.ist-verborgen{background:#e7e2d3;color:#7a7263}
.save.insel-verborgen{background:#f4f2ea;border-style:dashed;border-color:#d9d2bf}
.save.insel-verborgen h3{color:#6f7a6b}

/* --- Begrüßungsbildschirm ------------------------------------------------ */
/* v59 · 771 · Anmeldefenster ruhig (Nutzer 20.10.2026: „Ich würde im Hintergrund nicht schon das Menü zeigen. Der Fokus soll wirklich auf dem
   Pop-up bleiben.“): Vorher lag die Karte auf einem durchscheinenden Grün mit Weichzeichner, dahinter erkennbar „Meine Inseln“ mit Leiste und Knöpfen.
   Jetzt ist die Fläche voll: dieselbe ruhige Papier- und Wasserfläche wie die Ladeseite des Hauptmenüs (#menue-start in index.html, über #f8f3e8).
   Nach dem Anmelden lädt die Seite neu; dann steht genau diese Fläche mit Logo und Blüte da, und die Übersicht blendet weich ein (menue-start-ein).
   Nur die Karte blendet ein, nicht die Fläche: So springt nichts zwischen Ladeseite und Anmeldung. Dahinter ist #app unsichtbar (nicht nur `inert`). */
.willkommen{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(ellipse 30% 24% at 50% 48%,#fffaf0d9,#fffaf000),radial-gradient(ellipse at 50% 46%,#fffaeceb,#e9efe0db 58%,#c7dcd3d9),#f8f3e8}
.willkommen:focus{outline:none}
body:has(#willkommen:not([hidden])) #app{visibility:hidden;animation:none}
@keyframes willkommen-einblenden{from{opacity:0}to{opacity:1}}
.willkommen-karte{width:100%;max-width:760px;max-height:calc(100vh - 48px);overflow:auto;background:#fff8e9;border:1px solid #e1d5c2;border-radius:24px;box-shadow:0 26px 90px #3d4a3a2e,0 2px 8px #3d4a3a14;display:grid;grid-template-columns:1fr 1.25fr;animation:willkommen-einblenden .5s ease both}
/* 771: klein oben links das Logo, an derselben Stelle wie in der Leiste der Übersicht (mode-picker.css .leiste .brand-logo, 36 px). Nur wo neben
   der Karte Platz ist; sonst trägt der Titel „Willkommen bei Cozymoa“ den Namen allein. Kein Link: Das Fenster hat bewusst keinen Weg hinaus. */
.willkommen-logo{display:none;position:absolute;top:26px;left:24px;height:36px;width:auto;pointer-events:none;user-select:none;animation:willkommen-einblenden .5s ease both}
@media(min-width:1240px),(min-width:900px) and (min-height:760px){.willkommen-logo{display:block}}
/* Die Bildseite ist eine ganze kleine Szene, nicht ein Bildchen auf einer
   leeren Fläche: Das SVG füllt die Seite randlos (wie .art in der Lobby,
   mode-picker.css), statt mit max-width:230px in der Mitte zu schweben. */
.willkommen-kunst{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(150deg,#dcefe0,#a9d2c8);border-radius:24px 0 0 24px;min-height:330px}
.willkommen-kunst svg{position:absolute;inset:0;width:100%;height:100%;display:block}
/* 594b · B3: Kam eine Figur von der Startseite mit, steht sie beim Anlegen links, wo sonst die Insel ist — ihr Köpfchen auf Pastell, ihr Name und „Deine Figur“. */
.willkommen-kunst.hat-figur{background:linear-gradient(165deg,#fbeedf,#f6dfd2 55%,#efd2c4)}
.willkommen-kunst.hat-figur>svg{display:none}
.willkommen-figur{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:var(--ab-4) var(--ab-4) 72px}
.willkommen-figur[hidden]{display:none}
.willkommen-figur-bild{width:min(190px,72%)}
.willkommen-kunst .willkommen-figur-bild svg{position:static;inset:auto;width:100%;height:auto;display:block}
.willkommen-figur-bild.ist-bild{position:absolute;inset:0;width:auto}
.willkommen-figur-bild img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
.willkommen-figur-schild{position:absolute;left:var(--ab-3);bottom:var(--ab-3);margin:0;padding:var(--ab-2) var(--ab-3);border-radius:var(--rund-feld);background:#fffaf1e8;display:flex;flex-direction:column;gap:2px}
.willkommen-figur-name{font:400 17px/1.2 Georgia,serif;color:#4d4436}
.willkommen-figur-schild .fk-kat{display:block;margin:0;font:600 10px/12px system-ui,-apple-system,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#a8876e}
.willkommen-inhalt{padding:var(--ab-5);min-width:0}
/* v59 · 145c: Der Kopf ist der gemeinsame (shared/ui/fenster-kopf.js): Titel oben, die Kategorie klein darunter. Das Fenster hat kein ×: Ohne Konto gibt
   es keine Insel, also gibt es nichts, wohin man es schließen könnte. */
.willkommen-inhalt .fk-kopf{margin:0 0 8px}
/* Damit „Cozymoa“ auf schmalen Ansichten nicht allein auf eine eigene Zeile rutscht (Hinweis 3 der Prüfung). */
.willkommen-nowrap{white-space:nowrap}
.willkommen-intro{color:#788071;margin:8px 0 18px;font-size:13px;line-height:1.55}
.willkommen-tabs{display:flex;gap:8px;margin-bottom:18px}
/* v59 · 145c: Die Reiter 34 px hoch, 12 px rund, 12 px/600; 364: Sand, der gewählte dunklerer Sand (nicht Salbei: das ist dem Hauptknopf vorbehalten). */
.willkommen-tab{display:inline-flex;align-items:center;height:34px;border:0;background:#f1e8d9;color:#5e5242;border-radius:12px;padding:0 12px;font:600 12px/1 system-ui,-apple-system,"Segoe UI",sans-serif;cursor:pointer;transition:background .2s,color .2s}
.willkommen-tab:hover{background:#f1e8d9;color:#5e5242;filter:brightness(.96)}
/* 364: der gewählte Reiter ist dunkler Sand (deutlich dunkler als die anderen), damit nur „Anmelden“ / „Konto anlegen“ im Formular grün ist. */
.willkommen-tab[aria-selected="true"],.willkommen-tab[aria-selected="true"]:hover{background:#e3d9c4;color:#3f4a3b;filter:none}
.willkommen-form{display:flex;flex-direction:column;gap:12px}
/* 364: Etikett wie im übrigen Kit (10 px, Versalien, braun), Feld 34 px hoch, 12 rund. */
.willkommen-form label{display:flex;flex-direction:column;gap:4px;font:600 10px/12px system-ui,-apple-system,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#a8876e}
.willkommen-form input{width:100%;height:34px;padding:0 12px;border:1px solid #e3d9c6;border-radius:12px;background:#fffdf8;color:#4d4436;font:400 13px/1 system-ui,-apple-system,sans-serif;letter-spacing:0;text-transform:none}
.willkommen-form input:focus-visible{outline:2px solid #c9a27f;outline-offset:1px}
.willkommen-form .form-note{font-size:12px;color:#8d876f;margin:0}
.willkommen-form button[type=submit]{align-self:flex-end}
/* v59 · 595a · Passwort vergessen: links unter dem Passwortfeld ruhig „Passwort vergessen?“ (Salbei, gepunktet wie .konto-einladung), rechts
   wie bisher „Anmelden“. Die Karten danach: der leise Knopf links, der grüne Hauptknopf rechts. */
.willkommen-fuss,.willkommen-knoepfe{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.willkommen-vergessen,.willkommen-vergessen:hover{height:auto;margin:0 auto 0 0;padding:0 0 1px;border:0;border-bottom:1px dotted #a9b79e;border-radius:0;background:none;color:#7b8d70;font:600 12px/1.3 system-ui,-apple-system,"Segoe UI",sans-serif;cursor:pointer}
.willkommen-vergessen:hover{color:#5f7357;border-bottom-style:solid}
.willkommen-vergessen:focus-visible{outline:2px solid #c9a27f;outline-offset:2px}
.willkommen-zeile{margin:0}
.willkommen-zeile strong{font-weight:650;color:#5e5242}
/* v59 · 601b · Konto zu (Entwurf 601E, Tafel 2 und 3): Ist das Konto in der Bedenkzeit oder gesperrt, zeigt die Karte nur die eigene E-Mail-Adresse als Titel (◀ 899b; vorher den Kontonamen),
   den einen beschlossenen Satz und die Knöpfe. Der Satz ist das, was man liest (Georgia 19 px); Kopf, Satz und Knöpfe stehen ruhig in der Mitte der
   rechten Seite, sonst wäre die Karte halb leer. */
.willkommen-satz{margin:6px 0 22px;font:400 19px/1.45 Georgia,serif;color:#4d4436}
.willkommen-karte.ist-zustand .willkommen-inhalt{display:flex;flex-direction:column;justify-content:center}
.willkommen-karte.ist-zustand .willkommen-form{gap:0}
.willkommen-karte.ist-zustand .error:not(:empty){margin:0 0 12px}
/* v59 · 717 · „Wir haben dir eine E-Mail geschickt“ (gleich nach „Konto anlegen“) und „E-Mail bestätigt“ (der Link aus der Mail): dieselbe ruhige
   Mitte wie „Konto zu“, darüber ein kleiner Umschlag mit rosa Siegel (beim Bestätigen mit Haken). Links leise „Nichts angekommen?“. */
.willkommen-post{display:block;width:64px;height:48px;margin:0 0 12px}
.willkommen-satz strong{font-weight:600;color:#5e5242;overflow-wrap:anywhere}
/* ◀ 898 (Nachtrag 1) · Die E-Mail-Adresse steht in einer eigenen Zeile, in einer Zeile; zu lang → etwas kleiner (willkommen.js, shared/konto/adresse-zeile.js), und erst dann bricht sie, nur vor dem @. */
.willkommen-adresse{display:block;margin:3px 0;white-space:nowrap}
.willkommen-adresse.bricht{white-space:normal}
.willkommen-adresse strong,.willkommen-zeile .willkommen-adresse strong{overflow-wrap:normal;word-break:normal}
.willkommen-knoepfe-post{flex-wrap:wrap}
.willkommen-nichts{margin:0 auto 0 0;font-size:12px;line-height:1.3;color:#8d876f}
.willkommen-nichts .willkommen-vergessen{margin:0 0 0 4px}
.willkommen-vergessen:disabled{opacity:.55;cursor:default;border-bottom-style:dotted}
.willkommen-karte.ist-zustand .willkommen-lage:not([hidden]){margin:-10px 0 16px}
/* v59 · 601b · Die ruhige Zeile im Fenster „Konto löschen?“ bei Vollversion (fk-leise, über dem Passwort), die Adresse etwas kräftiger. */
dialog.fk-fenster .loeschen-zeile{margin:var(--ab-1) 0 var(--ab-3)}
.loeschen-zeile strong{font-weight:600;color:#7d6c55}
/* v59 · 777 · Das Konto-Fenster (Kontomenü „Konto“): schmal und ruhig. Die Angaben als zwei Spalten (die kleine Oberzeile links, der Wert rechts),
   darunter nach einer zarten Linie, klein und abgesetzt, „Konto löschen“ — ein leiser Textknopf in der warmen Farbe der Oberzeilen, nicht Rosé,
   gepunktet unterstrichen wie „Passwort vergessen?“ in der Anmeldung. */
dialog.konto-fenster{max-width:360px}
.konto-angaben{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--ab-3) var(--ab-4);align-items:baseline;margin:var(--ab-4) 0 0}
.konto-angaben>div{display:contents}
.konto-angaben dt{margin:0}
.konto-angaben dd{margin:0;min-width:0;font:500 14px/1.35 system-ui,-apple-system,"Segoe UI",sans-serif;color:#4d4436;overflow-wrap:anywhere}
.konto-fenster-fuss{display:flex;margin-top:var(--ab-5);padding-top:var(--ab-3);border-top:1px solid #ece3d2}
.konto-fenster-loeschen,.konto-fenster-loeschen:hover{height:auto;margin:0;padding:0 0 1px;border:0;border-bottom:1px dotted #c8b9a2;border-radius:0;background:none;color:#94816a;font:500 12px/1.3 system-ui,-apple-system,"Segoe UI",sans-serif;cursor:pointer}
.konto-fenster-loeschen:hover{color:#6f604c;border-bottom-style:solid}
.konto-fenster-loeschen:focus-visible{outline:2px solid #c9a27f;outline-offset:2px}
/* v59 · Ohne Konto kein Spiel: „Ohne Konto weiterspielen →“ ist fort. Bleibt die eine ruhige Zeile, wenn der Server nicht antwortet. */
.willkommen-lage{margin:0 0 18px;padding:8px 12px;border-radius:12px;background:#f1e8d9;color:#7a6a52;font-size:12px;line-height:1.45}
/* Schmale Ansicht: Die Bildseite wird zum Banner über dem Formular. Dank
   preserveAspectRatio="slice" beschneidet die Szene sauber, statt sich zu
   verzerren — die Insel mit dem Häuschen bleibt dabei in der Mitte. */
@media(max-width:620px){.willkommen{padding:var(--ab-3)}.willkommen-karte{grid-template-columns:1fr;max-height:calc(100vh - 24px)}.willkommen-kunst{border-radius:24px 24px 0 0;min-height:168px}.willkommen-inhalt{padding:var(--ab-4)}}

/* Ruhige Bewegung im Begrüßungsbild: ein leicht schaukelndes Boot, ein
   sacht schwenkendes Herzwimpel-Fähnchen und zwei blinzelnde Sterne —
   langsam und gemütlich, kein Gezappel. */
.willkommen-boot{transform-origin:235px 195px;animation:willkommen-schaukeln 4.5s ease-in-out infinite}
@keyframes willkommen-schaukeln{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(2deg) translateY(-2px)}}
.willkommen-wimpel{transform-origin:236px 144px;animation:willkommen-wehen 3.2s ease-in-out infinite}
@keyframes willkommen-wehen{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
.willkommen-stern{animation:willkommen-blinzeln 2.6s ease-in-out infinite}
.willkommen-stern.spaeter{animation-delay:1.1s}
@keyframes willkommen-blinzeln{0%,100%{opacity:.35}50%{opacity:1}}
/* Alles Weitere bewusst sehr langsam und sehr klein: Die Szene soll atmen,
   nicht beschäftigen. Zwei Wolken ziehen, eine Möwe gleitet einmal durchs
   Bild, die Palme wiegt sich, der Hund wedelt, die Fenster werden warm, das
   Wasser kräuselt sich. Nichts davon ist schneller als ein Atemzug. */
.willkommen-wolke{animation:willkommen-ziehen 34s ease-in-out infinite}
.willkommen-wolke.spaeter{animation-duration:46s;animation-delay:-12s}
@keyframes willkommen-ziehen{0%,100%{transform:translateX(-9px)}50%{transform:translateX(9px)}}
.willkommen-moewe{animation:willkommen-gleiten 19s ease-in-out infinite}
@keyframes willkommen-gleiten{0%{transform:translate(0,0);opacity:0}8%{opacity:.9}50%{transform:translate(150px,-16px)}92%{opacity:.9}100%{transform:translate(236px,6px);opacity:0}}
.willkommen-palme{transform-origin:172px 192px;animation:willkommen-wiegen 7.5s ease-in-out infinite}
@keyframes willkommen-wiegen{0%,100%{transform:rotate(-1.4deg)}50%{transform:rotate(1.4deg)}}
.willkommen-hund{transform-origin:150px 184px;animation:willkommen-wedeln 3.8s ease-in-out infinite}
@keyframes willkommen-wedeln{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
.willkommen-fenster{animation:willkommen-fensterlicht 9s ease-in-out infinite}
@keyframes willkommen-fensterlicht{0%,100%{fill:#fff8e3}50%{fill:#ffe9b8}}
.willkommen-welle{animation:willkommen-kraeuseln 8s ease-in-out infinite}
@keyframes willkommen-kraeuseln{0%,100%{transform:translateX(-4px)}50%{transform:translateX(4px)}}
@media(prefers-reduced-motion:reduce){
 .willkommen,.willkommen-karte,.willkommen-logo{animation:none}
 .willkommen-boot,.willkommen-wimpel,.willkommen-stern,
 .willkommen-wolke,.willkommen-moewe,.willkommen-palme,
 .willkommen-hund,.willkommen-fenster,.willkommen-welle{animation:none}
}

/* --- Konflikt-Dialog beim zweiten Ablegen (Entscheidung 9) -------------- */

/* --- v59 · Der selbsttätige Abgleich ------------------------------------
   Das Abzeichen sagt jetzt einen Zustand, keine Einstellung. Also darf man ihm
   auch ansehen, welcher es ist — aber leise: Ein grüner Haken an jeder Insel
   wäre genauso laut wie ein rotes Ausrufezeichen, und die Übersicht soll nach
   Inseln aussehen, nicht nach einer Überwachungsanlage. Gedeckte Töne, nur die
   Nachfrage darf auffallen. */
.ablage-abzeichen.abzeichen-ok{background:#e7efe0;color:#5f7355}
.ablage-abzeichen.abzeichen-laeuft{background:#eceadf;color:#8a8062}
.ablage-abzeichen.abzeichen-geraet{background:#f3efe1;color:#8a8062}
.ablage-abzeichen.abzeichen-fehler{background:#f6e6e2;color:#a05f55}
.ablage-abzeichen.abzeichen-frage{background:#f7ecd9;color:#8a6636;font-weight:600}

/* Zwei Stände nebeneinander — der ganze Sinn dieses Dialogs ist, dass man sie
   vergleichen kann, statt eine Uhrzeit vorgesetzt zu bekommen. */
.abgleich-gegenueber{display:flex;gap:12px;margin:18px 0 0}
.abgleich-gegenueber>div{flex:1 1 0;min-width:0;background:#f7f3e6;border:1px solid #ebe3d2;border-radius:12px;padding:12px}
.abgleich-gegenueber .fk-kat{margin-bottom:4px}
.abgleich-gegenueber strong{display:block;font:500 16px/1.25 Georgia,serif;color:#4f5c4c}
.abgleich-gegenueber span:not(.fk-kat){display:block;font-size:12px;color:#82836f;margin-top:4px}
.abgleich-zusage{color:#5f7355}
@media(max-width:520px){.abgleich-gegenueber{flex-direction:column}}
/* ◀ 887a · „Meintest du …?“ unter der E-Mail: ruhig, der Vorschlag ein leiser Knopf. (898: die grüne Zeile „Du kannst schon loslegen.“ ist weg.) */
.willkommen-tippfehler{margin:-6px 0 10px;font-size:14px;line-height:19px;color:#7a6a52}
.willkommen-tippfehler[hidden]{display:none}
.willkommen-vorschlag{border:0;background:none;padding:0;font:inherit;font-weight:600;color:#5d7a52;text-decoration:underline dotted;text-underline-offset:3px;cursor:pointer}
.willkommen-vorschlag:focus-visible{outline:2px solid #c9a27f;outline-offset:2px;border-radius:4px}