/* HafenChat – Basis-Stylesheet. Design-Tokens nach Technischem Paket 10.2, maritimer Retro-Stil. */
:root {
  --navy: #16324F;
  --navy-deep: #0E2236;
  --teal: #0E9AA7;
  --teal-dark: #0B7A84;
  --aqua-soft: #E3F6F8;
  --brass: #B8893A;
  --brass-soft: #F6EBD3;
  --wood: #7A4E2D;
  --surface: #FFFFFF;
  --surface-muted: #F3F6F9;
  --bg: #EAF1F5;
  --text: #1E2933;
  --text-muted: #5A6B7A;
  --border: #CBD5DF;
  --danger: #B42318;
  --danger-soft: #FDECEA;
  --success: #18794E;
  --success-soft: #E6F4EC;
  --info-soft: #E8F0FB;
  --radius-panel: 8px;
  --radius-small: 4px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --shadow: 0 1px 2px rgba(14, 34, 54, .08), 0 4px 12px rgba(14, 34, 54, .06);
  --focus: 0 0 0 3px rgba(14, 154, 167, .45);
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #13263A;
    --surface-muted: #0F1F30;
    --bg: #0A1724;
    --text: #E4EDF4;
    --text-muted: #9FB3C4;
    --border: #2B435B;
    --aqua-soft: #10343E;
    --brass-soft: #3A2E17;
    --danger-soft: #3B1714;
    --success-soft: #12301F;
    --info-soft: #14283F;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font: 16px/1.5 var(--font); color: var(--text); background: var(--bg);
}
main { flex: 1; outline: none; }
a { color: var(--teal-dark); }
@media (prefers-color-scheme: dark) { a { color: #5FD0DA; } }
img { max-width: 100%; height: auto; }
code { font-family: var(--font-mono); font-size: .92em; background: var(--surface-muted); padding: 0 4px; border-radius: 3px; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 var(--space-3); }
h1 { font-size: 1.8rem; color: var(--navy); }
@media (prefers-color-scheme: dark) { h1 { color: #CFE3F1; } }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; margin-top: var(--space-4); }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 3px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--navy); color: #fff; padding: var(--space-2) var(--space-4); z-index: 100; }
.skip-link:focus { left: var(--space-2); }
.muted { color: var(--text-muted); }
.small { font-size: .875rem; }
.strong { font-weight: 700; }
.pre { white-space: pre-wrap; word-break: break-word; }
.inline { display: inline; }
.container { width: 100%; max-width: 1100px; margin: 0 auto; padding: var(--space-6) var(--space-4); }
.narrow { max-width: 480px; }

/* Kopfzeile: Holz/Messing-Anmutung, zurückhaltend */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-2) var(--space-4); background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  border-bottom: 3px solid var(--brass); color: #fff;
}
.brand { display: flex; align-items: center; gap: var(--space-2); color: #fff; text-decoration: none; font-weight: 700; font-size: 1.2rem; letter-spacing: .02em; }
.mainnav { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.mainnav a, .mainnav .linklike { color: #DCEAF4; text-decoration: none; font-size: .95rem; }
.mainnav a:hover, .mainnav .linklike:hover { color: #fff; text-decoration: underline; }
.linklike { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }

.footer { display: flex; gap: var(--space-4); flex-wrap: wrap; justify-content: center; padding: var(--space-4); color: var(--text-muted); font-size: .875rem; border-top: 1px solid var(--border); }
.footer a { color: var(--text-muted); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 40px; padding: 0 var(--space-4); border: 1px solid var(--teal-dark); border-radius: var(--radius-small);
  background: var(--teal); color: #fff; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--teal-dark); }
.btn-small { min-height: 30px; padding: 0 var(--space-3); font-size: .875rem; }
.mainnav .btn { color: #fff; }
.btn-ghost { background: transparent; color: var(--teal-dark); }
.btn-ghost:hover { background: var(--aqua-soft); }
@media (prefers-color-scheme: dark) { .btn-ghost { color: #5FD0DA; } }
.btn-danger { background: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: #8F1C13; }
.btn-sos { background: var(--danger); border-color: #8F1C13; }
.btn-sos:hover { background: #8F1C13; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* Hinweise */
.flash, .alert { padding: var(--space-3) var(--space-4); border-radius: var(--radius-small); border-left: 4px solid; }
.alert-success { background: var(--success-soft); border-color: var(--success); }
.alert-error { background: var(--danger-soft); border-color: var(--danger); }
.alert-info { background: var(--info-soft); border-color: var(--teal); }
/* Seiten-Meldungen als Messing-Schild im Stil der Kopfleiste */
.flash {
  --flash-accent: #E6C27A;
  display: flex; align-items: center; gap: var(--space-3);
  margin: var(--space-3) auto 0; max-width: 1100px; width: calc(100% - 2 * var(--space-4));
  padding: 10px 10px 10px 12px; border: 1px solid var(--brass); border-left: 1px solid var(--brass); border-radius: var(--radius-panel);
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%); color: #EAF1F5;
  box-shadow: inset 0 0 0 1px rgba(246, 235, 211, .08), 0 6px 18px rgba(0, 0, 0, .35);
  animation: flash-in .35s ease-out;
}
.flash-success { --flash-accent: #7FD1A6; }
.flash-error { --flash-accent: #F2A097; border-color: #C0574B; }
.flash-info { --flash-accent: #7FD4DC; }
.flash-icon {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--brass); background: radial-gradient(circle at 35% 30%, #23466B, var(--navy-deep));
  color: var(--flash-accent); font-size: 1.05rem; line-height: 1;
}
.flash-text { flex: 1; min-width: 0; }
.flash a { color: #F3D68C; }
.flash-close {
  flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent;
  color: #DCEAF4; font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.flash-close:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.flash-close:focus-visible { outline: none; box-shadow: var(--focus); }
.flash.is-leaving { animation: flash-out .3s ease-in forwards; }
@keyframes flash-in { from { opacity: 0; transform: translateY(-6px); } }
@keyframes flash-out { to { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .flash, .flash.is-leaving { animation: none; } }

/* Formulare */
.form { display: flex; flex-direction: column; gap: var(--space-2); }
.form label { font-weight: 600; font-size: .95rem; }
.form label.check { font-weight: 400; display: flex; gap: var(--space-2); align-items: flex-start; }
.form .btn { align-self: flex-start; margin-top: var(--space-2); }
input, select, textarea {
  font: inherit; color: var(--text); background: var(--surface); width: 100%;
  border: 1px solid var(--border); border-radius: var(--radius-small); padding: var(--space-2) var(--space-3);
}
input[type="checkbox"] { width: auto; margin-top: 4px; }
input[aria-invalid="true"] { border-color: var(--danger); }
.field-error { color: var(--danger); font-size: .875rem; }
fieldset { border: 1px solid var(--border); border-radius: var(--radius-small); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
legend { font-weight: 600; padding: 0 var(--space-2); }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-panel); padding: var(--space-4); box-shadow: var(--shadow); margin-bottom: var(--space-4); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-4); align-items: start; }
.list { list-style: none; padding: 0; margin: 0; }
.list li { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--border); }
.badge { display: inline-block; min-width: 1.6em; padding: 0 6px; border-radius: 999px; background: var(--brass-soft); color: var(--wood); font-size: .8rem; font-weight: 700; text-align: center; }
.prose { max-width: 760px; }
.prose li { margin-bottom: var(--space-2); }
.auth { padding-top: var(--space-8); }
.error-page { text-align: center; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; color: var(--brass); font-weight: 700; margin: 0 0 var(--space-2); }

/* Startseite */
.hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-6); padding: var(--space-8) var(--space-4);
  background: linear-gradient(180deg, var(--aqua-soft), transparent); }
.hero-inner { max-width: 560px; }
.hero h1 { font-size: clamp(2rem, 5vw, 2.8rem); }
.lead { font-size: 1.1rem; }
.hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin: var(--space-4) 0; }
.hero-online { display: flex; align-items: center; gap: var(--space-2); color: var(--text-muted); }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--success); display: inline-block; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-4); }

/* Rangbarometer */
.rankbar { padding: var(--space-3); border-bottom: 1px solid var(--border); background: var(--brass-soft); }
.rankbar-title { font-weight: 700; color: var(--wood); }
@media (prefers-color-scheme: dark) { .rankbar-title { color: #E8C98A; } }
.rankbar-meter { height: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; margin: var(--space-2) 0; }
.rankbar-meter > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--teal), var(--brass)); transition: width .6s ease; }
.rank-big { font-size: 1.5rem; font-weight: 700; color: var(--wood); margin: 0; }
.rank-toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); z-index: 50; background: var(--navy); color: #fff;
  border: 2px solid var(--brass); border-radius: var(--radius-panel); padding: var(--space-3) var(--space-6); box-shadow: var(--shadow);
  animation: toast-in .4s ease; max-width: calc(100% - 32px); text-align: center; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 20px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ===== Chat "Schiff": klassischer Aufbau (links Mannschaft + Planken-Menü, Mitte Brücke) =====
   Grafiken aus GRAFIKEN.md werden über die markierten Stellen eingehängt; bis dahin Farbverläufe als Ersatz. */
body.is-chat { height: 100vh; height: 100dvh; overflow: hidden; }
body.is-chat main { display: flex; min-height: 0; }
.chat {
  --wood-texture: repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 22px, rgba(0,0,0,.08) 22px 24px, rgba(255,255,255,.02) 24px 58px, rgba(0,0,0,.1) 58px 60px);
  --wood-dark: #3E2615;
  --brass-edge: #C9A15A;
  --deck-accent: var(--teal);
  --deck-banner: linear-gradient(120deg, #16324F 0%, #0E9AA7 100%);
  --logbook-bg: #FBF6EA;
  --logbook-text: #1E2933;
  flex: 1; display: grid; grid-template-columns: 260px 1fr; gap: 10px; min-height: 0; width: 100%;
  padding: 10px; background: var(--wood-texture), var(--chat-bg);
  /* GRAFIKEN 2.1: border-image: url(../img/chat/frame-outer.png) 120 round; */
}
@media (prefers-color-scheme: dark) { .chat { --logbook-bg: #13263A; --logbook-text: #E4EDF4; } }

/* Deck-Themen (je nach Chatraum passend): Akzentfarbe + Banner-Ersatz, echtes Banner kommt per JS */
.chat[data-deck="landungsbruecke"] { --deck-accent: #0E9AA7; --deck-banner: linear-gradient(120deg, #16324F, #2C6E8F 60%, #0E9AA7); }
.chat[data-deck="bruecke"]         { --deck-accent: #B8893A; --deck-banner: linear-gradient(120deg, #0E2236, #16324F 60%, #7A5A24); }
.chat[data-deck="promenadendeck"]  { --deck-accent: #D9692E; --deck-banner: linear-gradient(120deg, #1E3C5A, #C76A3A 70%, #F2B36B); }
.chat[data-deck="ballsaal"]        { --deck-accent: #B03A6A; --deck-banner: linear-gradient(120deg, #2A1530, #6B2448 55%, #C9A15A); }
.chat[data-deck="stadtdeck"]       { --deck-accent: #4F74B8; --deck-banner: linear-gradient(120deg, #0B1626, #22385E 60%, #E0B04A); }
.chat[data-deck="themendeck"]      { --deck-accent: #3F8F5A; --deck-banner: linear-gradient(120deg, #1B2B22, #2F5A3F 60%, #B8893A); }
.chat[data-deck="crewdeck"]        { --deck-accent: #6F7783; --deck-banner: linear-gradient(120deg, #1A1F26, #3A4350 60%, #8A8F98); }

/* ===== Raum-Stile: jeder Raum mit eigenem Erscheinungsbild (RoomStyles.php) =====
   Banner: img/rooms/<style>.webp · Deko: img/rooms/<style>-deco.png (siehe GRAFIKEN.md Abschnitt 3) */
.chat[data-style="willkommen"]     { --deck-accent: #0E9AA7; --logbook-bg: #FBF6EA; --deck-banner: linear-gradient(120deg, #2C6E8F, #6FB7C9 60%, #F2D49B); }
.chat[data-style="ankuendigungen"] { --deck-accent: #C9A15A; --logbook-bg: #0F1E2E; --logbook-text: #E6EDF3; --deck-banner: linear-gradient(120deg, #0B1726, #16324F 60%, #7A5A24); }
.chat[data-style="plauderecke"]    { --deck-accent: #D9692E; --logbook-bg: #FFF8EC; --deck-banner: linear-gradient(120deg, #F2B36B, #E07A3F 50%, #2C6E8F); }
.chat[data-style="hafenkneipe"]    { --deck-accent: #E09A45; --logbook-bg: #1E140E; --logbook-text: #EEDFC6; --deck-banner: linear-gradient(120deg, #1A0F08, #4A2A16 55%, #C47A2C); }
.chat[data-style="ballsaal"]       { --deck-accent: #D4AF37; --logbook-bg: #1E0F1A; --logbook-text: #F3E6EE; --deck-banner: linear-gradient(120deg, #2A1530, #6B2448 55%, #D4AF37); }
.chat[data-style="hamburg"]        { --deck-accent: #A4342A; --logbook-bg: #F7F2EE; --deck-banner: linear-gradient(120deg, #3A1E1A, #A4342A 55%, #6F8FA8); }
.chat[data-style="berlin"]         { --deck-accent: #E0B04A; --logbook-bg: #121826; --logbook-text: #E7ECF4; --deck-banner: linear-gradient(120deg, #0B1020, #22385E 60%, #E0B04A); }
.chat[data-style="koeln"]          { --deck-accent: #2E6E9E; --logbook-bg: #F4F6F8; --deck-banner: linear-gradient(120deg, #4A5560, #2E6E9E 60%, #C9D6E2); }
.chat[data-style="muenchen"]       { --deck-accent: #3B7DBD; --logbook-bg: #F3F7FB; --deck-banner: linear-gradient(120deg, #3B7DBD, #9CC3E6 55%, #FFFFFF); }
.chat[data-style="musik"]          { --deck-accent: #D45BBF; --logbook-bg: #170F1E; --logbook-text: #F1E6F6; --deck-banner: linear-gradient(120deg, #170F1E, #5A1E66 55%, #D45BBF); }
.chat[data-style="spiele-quiz"]    { --deck-accent: #2F7D46; --logbook-bg: #F1F7EF; --deck-banner: linear-gradient(120deg, #1F4D2E, #2F7D46 55%, #E0B04A); }
.chat[data-style="technik"]        { --deck-accent: #39C07A; --logbook-bg: #0E1714; --logbook-text: #D8F0E2; --deck-banner: linear-gradient(120deg, #07100C, #163828 55%, #39C07A); }
.chat[data-style="frachtraum"]     { --deck-accent: #A8844F; --logbook-bg: #120E0A; --logbook-text: #D9CDB5; --brass-edge: #6E5530;
                                     --deck-banner: linear-gradient(120deg, #050403, #1E160E 60%, #4A3820); }
.chat[data-style="jugendkoje"]     { --deck-accent: #1FA39B; --logbook-bg: #F4FBFA; --deck-banner: linear-gradient(120deg, #1E6F8F, #1FA39B 55%, #F2A65A); }
.chat[data-style="schulhof"]       { --deck-accent: #4E8F2F; --logbook-bg: #F6FAF0; --deck-banner: linear-gradient(120deg, #2F6E8F, #6FB04A 55%, #F2D06B); }
.chat[data-style="zockerecke"]     { --deck-accent: #8E6CF0; --logbook-bg: #14121F; --logbook-text: #ECE8FA; --deck-banner: linear-gradient(120deg, #0F0D1A, #3A2A70 55%, #22C3B5); }
.chat[data-style="crew"]           { --deck-accent: #9AA3AF; --logbook-bg: #14181E; --logbook-text: #E3E7EC; --deck-banner: linear-gradient(120deg, #1A1F26, #3A4350 60%, #8A8F98); }

/* Holz/Bordwand je Raum: Basiswerte (ohne color-mix) und raumabhängige Mischung aus der Akzentfarbe */
.chat { --chat-bg: #4A2E1A; --side-bg: #2A1712; --side-head: #3A2216; --plank-light: #E2B987; --plank-mid: #C99257; --plank-dark: #B47C44; }
@supports (color: color-mix(in srgb, red, blue)) {
  .chat {
    --chat-bg: color-mix(in srgb, var(--deck-accent) 22%, #3E2615);
    --side-bg: color-mix(in srgb, var(--deck-accent) 14%, #1E110B);
    --side-head: color-mix(in srgb, var(--deck-accent) 30%, #2E1A10);
    --plank-light: color-mix(in srgb, var(--deck-accent) 22%, #E6C08F);
    --plank-mid: color-mix(in srgb, var(--deck-accent) 26%, #C99257);
    --plank-dark: color-mix(in srgb, var(--deck-accent) 30%, #A86F3B);
  }
}
/* Einzelne Räume mit bewusst eigener Holzstimmung */
.chat[data-style="frachtraum"] { --chat-bg: #17110B; --side-bg: #0D0906; --side-head: #1E160E; --plank-light: #8C7350; --plank-mid: #6E5530; --plank-dark: #54401F; }
.chat[data-style="ballsaal"] { --brass-edge: #D4AF37; }
.chat[data-style="muenchen"], .chat[data-style="koeln"] { --brass-edge: #B9C6D2; }
.chat[data-style="technik"] { --brass-edge: #5E8C73; }

/* Helle Räume bleiben auch im Geräte-Dunkelmodus hell und lesbar */
.chat[data-tone="light"]:not([data-style="standard"]) { --logbook-text: #1E2933; --text-muted: #5A6B7A; --brass-soft: #F6EBD3; --info-soft: #E8F0FB; --border: #CBD5DF; }
.chat[data-tone="light"]:not([data-style="standard"]) .msg-action .msg-body { color: #7A4E2D; }
.chat[data-tone="light"]:not([data-style="standard"]) .msg-name { filter: brightness(.85); }
.chat[data-tone="light"]:not([data-style="standard"]) .watch-box { background: #FFFFFF; color: #1E2933; }
.chat[data-tone="light"]:not([data-style="standard"]) .watch-member { color: #1E2933; }

/* Dunkle Räume: Nebentöne im Logbuch anpassen (Kontrast bleibt AA) */
.chat[data-tone="dark"] { --text-muted: #A99E8A; --brass-soft: rgba(184, 137, 58, .2); --info-soft: rgba(14, 154, 167, .18); --border: #3A3226; }
.chat[data-tone="dark"] .msg-action .msg-body { color: #E8C98A; }
.chat[data-tone="dark"] .msg-name { filter: brightness(1.3); }
.chat[data-tone="dark"] .watch-box { background: #1C1712; color: var(--logbook-text); }
.chat[data-tone="dark"] .watch-member { color: var(--logbook-text); }
.chat[data-style="frachtraum"] .messages { text-shadow: 0 1px 1px rgba(0, 0, 0, .6); }
.chat[data-style="frachtraum"] .panel-talk { box-shadow: inset 0 0 120px rgba(0, 0, 0, .85), 0 2px 8px rgba(0, 0, 0, .6); }

/* Deko-Grafik je Raum (z. B. Ratten an den Kisten): dezent unten rechts, nie über dem Text */
.room-deco { position: absolute; inset: 0; pointer-events: none; z-index: 0; background-repeat: no-repeat;
  background-position: right 12px bottom 6px; background-size: auto 42%; opacity: .9; }
.messages { position: relative; z-index: 1; }

.panel { min-height: 0; display: flex; flex-direction: column; }
.chat-tabs { display: none; }

/* --- Linke Bordwand --- */
.panel-side { gap: 10px; overflow: hidden; }
.panel-side .rankbar { border: 2px solid var(--brass-edge); border-radius: var(--radius-panel); }
.crew-box {
  flex: 1; min-height: 120px; display: flex; flex-direction: column;
  background: var(--side-bg); border: 3px solid var(--brass-edge); border-radius: var(--radius-panel);
  box-shadow: inset 0 0 0 2px #1A0E0A, 0 2px 6px rgba(0,0,0,.4);
  /* GRAFIKEN 2.2: border-image: url(../img/chat/frame-panel.png) 48 round; */
}
.crew-title { margin: 0; padding: 6px 10px; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase;
  color: #F6EBD3; background: linear-gradient(var(--side-head), var(--side-bg)); border-bottom: 1px solid var(--brass-edge); }
.member-list { list-style: none; margin: 0; padding: 4px; overflow-y: auto; flex: 1; }
.member-list li:nth-child(odd) .member { background: rgba(255,255,255,.04); }
.member { display: flex; align-items: center; width: 100%; padding: 4px 8px; border: 0; border-radius: 3px; background: none;
  color: #F1E6CF; font: inherit; font-size: .92rem; text-align: left; cursor: pointer; }
.member:hover, .member:focus-visible { background: rgba(14,154,167,.35) !important; }
.member small { color: #C9B38A; font-size: .72rem; display: block; }
.member.is-staff { color: #8EE3EA; }
.member.is-self { box-shadow: inset 3px 0 0 var(--brass-edge); }
.member.is-bot { color: #E8C98A; }
.member .crew { font-size: .65rem; background: var(--teal); color: #fff; border-radius: 3px; padding: 0 4px; }
.member .bot { font-size: .65rem; background: var(--brass); color: #fff; border-radius: 3px; padding: 0 4px; }

.plank-menu { display: flex; flex-direction: column; gap: 5px; }
.plank {
  display: block; width: 100%; padding: 7px 10px; text-align: center; text-decoration: none; cursor: pointer;
  font: inherit; font-weight: 600; font-size: .92rem; color: #2A1712;
  background: linear-gradient(180deg, var(--plank-light) 0%, var(--plank-mid) 45%, var(--plank-dark) 55%, var(--plank-mid) 100%);
  border: 1px solid #6E4528; border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 0 #4A2E1A;
  /* GRAFIKEN 2.19: background: url(../img/chat/plank.png) center/100% 100%; */
}
.plank:hover { filter: brightness(1.08); }
.plank:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 0 #4A2E1A; }
.plank-leave { color: #5A1410; }

/* --- Brücke (Mitte) --- */
.panel-talk { position: relative; background: var(--logbook-bg); border: 3px solid var(--brass-edge); border-radius: var(--radius-panel);
  overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.45); }
.room-tabs { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-3); padding: 6px 10px 0;
  background: linear-gradient(var(--side-head), var(--side-bg)); border-bottom: 3px solid var(--deck-accent); }
.room-tab { background: var(--logbook-bg); color: var(--logbook-text); padding: 5px 16px 4px; border-radius: 8px 8px 0 0;
  border: 2px solid var(--brass-edge); border-bottom: 0; display: flex; align-items: baseline; gap: 8px; max-width: 70%;
  /* GRAFIKEN 2.20: background: url(../img/chat/room-tab.png) center/100% 100%; */ }
.room-tab h1 { font-size: 1.05rem; margin: 0; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-tab-deck { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--deck-accent); font-weight: 700; white-space: nowrap; }
.room-actions { display: flex; align-items: center; gap: var(--space-3); padding-bottom: 5px; }
.room-actions .btn-sos { min-height: 30px; padding: 0 10px; font-size: .85rem; }
.conn { font-size: .75rem; color: #E8D9B8; }
.conn.is-ok { display: none; }   /* nur Störungen anzeigen – „verbunden“ ist der Normalfall */
.conn.is-bad::before { content: "● "; color: #FF6B5E; }
.room-banner { min-height: 34px; padding: 6px 14px; background-color: #16324F; background-image: var(--deck-banner); background-size: cover; background-position: center;
  display: flex; align-items: center; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.room-banner.has-image { min-height: 70px; box-shadow: inset 0 0 0 999px rgba(10,23,36,.45); }
.room-topic { margin: 0; font-size: .88rem; }

.logbook-area { position: relative; flex: 1; min-height: 0; display: flex; }
.messages { list-style: none; margin: 0; padding: var(--space-3) 240px var(--space-3) var(--space-4); overflow-y: auto; flex: 1; min-height: 0;
  overflow-wrap: anywhere; color: var(--logbook-text);
  /* GRAFIKEN 2.4: background: url(../img/chat/parchment-light.webp); */ }
.msg { padding: 2px 0; display: flex; gap: var(--space-2); align-items: baseline; }
.msg-time { font-size: .72rem; color: var(--text-muted); font-variant-numeric: tabular-nums; flex: none; }
.msg-name { font-weight: 700; color: var(--deck-accent); background: none; border: 0; padding: 0; font: inherit; font-weight: 700; cursor: pointer; filter: brightness(.85); }
@media (prefers-color-scheme: dark) { .msg-name { filter: brightness(1.35); } }
.msg-name:hover { text-decoration: underline; }
.msg-rank { font-size: .68rem; color: var(--brass); margin-left: 3px; }
.msg-body { flex: 1; min-width: 0; }
.msg-action .msg-body { font-style: italic; color: var(--wood); }
@media (prefers-color-scheme: dark) { .msg-action .msg-body { color: #E8C98A; } }
.msg-system { color: var(--text-muted); font-size: .88rem; }
.msg-event { background: var(--brass-soft); border-radius: var(--radius-small); padding: 4px var(--space-2); margin: 2px 0; }
.msg-captain .msg-name { color: var(--wood); }
.msg-ephemeral { background: var(--info-soft); border-left: 3px solid var(--deck-accent); padding: 4px var(--space-2); margin: 2px 0; font-size: .92rem; }
.msg-pending { opacity: .6; }
.msg-failed .msg-body { color: var(--danger); }
.msg-tools { visibility: hidden; display: flex; gap: 4px; }
.msg:hover .msg-tools, .msg:focus-within .msg-tools { visibility: visible; }
.msg-tool { background: none; border: 1px solid var(--border); border-radius: 3px; font-size: .72rem; cursor: pointer; color: var(--text-muted); padding: 0 6px; }
.new-msgs { position: absolute; left: 50%; transform: translateX(-50%); bottom: 10px; border: 0; border-radius: 999px; padding: 6px 16px; background: var(--navy); color: #fff; cursor: pointer; box-shadow: var(--shadow); }

/* Navigatoren auf Wache (schwebend rechts oben) */
.watch-box { position: absolute; top: 10px; right: 14px; width: 210px; max-height: 45%; display: flex; flex-direction: column;
  background: var(--surface); border: 2px solid var(--brass-edge); border-radius: var(--radius-panel); box-shadow: var(--shadow); font-size: .85rem; z-index: 2;
  /* GRAFIKEN 2.21: border-image: url(../img/chat/watch-frame.png) 30 round; */ }
.watch-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; width: 100%; padding: 5px 8px; border: 0;
  background: linear-gradient(#3A2216, #2A1712); color: #F6EBD3; font: inherit; font-weight: 700; cursor: pointer; border-radius: 5px 5px 0 0; }
.watch-head[aria-expanded="false"] { border-radius: 5px; }
.watch-list { list-style: none; margin: 0; padding: 4px; overflow-y: auto; }
.watch-list li { padding: 2px 4px; }
.watch-member { background: none; border: 0; padding: 0; font: inherit; color: var(--text); cursor: pointer; text-align: left; }
.watch-member small { color: var(--text-muted); }

/* Steuerpult: Eingabe + Aktionsleiste */
.console { background: linear-gradient(var(--side-head), var(--side-bg)); border-top: 3px solid var(--brass-edge); padding: 8px 10px; display: flex; flex-direction: column; gap: 6px;
  /* GRAFIKEN 2.7: background: url(../img/chat/console.png) center/100% 100%; */ }
.composer { position: relative; display: flex; gap: var(--space-2); align-items: flex-end; }
.composer textarea { resize: none; min-height: 38px; max-height: 140px; }
.composer.is-disabled textarea { opacity: .7; }
.smiley-btn { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--brass-edge); background: #F6EBD3; font-size: 1.2rem; cursor: pointer; }
.smiley-pop { position: absolute; bottom: 46px; left: 0; z-index: 5; display: grid; grid-template-columns: repeat(6, 36px); gap: 4px; padding: 8px;
  background: var(--surface); border: 2px solid var(--brass-edge); border-radius: var(--radius-panel); box-shadow: var(--shadow); }
.smiley-pop[hidden] { display: none; }
.smiley { width: 36px; height: 36px; border: 0; border-radius: 6px; background: none; font-size: 1.3rem; cursor: pointer; }
.smiley:hover, .smiley:focus-visible { background: var(--aqua-soft); }
.btn-send { background: linear-gradient(#D6A95A, #B8893A); border-color: #7A5A24; color: #2A1712; }
.btn-send:hover { background: linear-gradient(#E2B96C, #C4954A); }
.action-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; color: #F1E6CF; font-size: .85rem; }
.action-bar label { display: flex; align-items: center; gap: 6px; }
.action-bar select { width: auto; max-width: 200px; padding: 3px 6px; font-size: .85rem; }
.action-bar .btn-small { background: linear-gradient(#D6A95A, #B8893A); border-color: #7A5A24; color: #2A1712; }

/* Raumwahl-Dialog */
.dialog-wide { max-width: 640px; }
.deck-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-3); max-height: 60vh; overflow-y: auto; }
.deck h3 { font-size: .9rem; margin: 0 0 var(--space-1); color: var(--navy); border-bottom: 2px solid var(--brass); padding-bottom: 2px; }
@media (prefers-color-scheme: dark) { .deck h3 { color: #CFE3F1; } }
.room-link { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 5px var(--space-2); border: 0; border-radius: var(--radius-small);
  background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.room-link:hover { background: var(--aqua-soft); }
.room-link.is-current { background: var(--navy); color: #fff; }
.room-link .count { font-size: .8rem; color: var(--text-muted); }
.room-link.is-current .count { color: #CFE3F1; }

.dialog { border: 1px solid var(--border); border-radius: var(--radius-panel); padding: var(--space-6); max-width: 440px; width: calc(100% - 32px); background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.dialog::backdrop { background: rgba(10, 23, 36, .55); }
.dialog form { display: flex; flex-direction: column; gap: var(--space-2); }
.dialog-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; margin-top: var(--space-3); }

/* Eigene Fenster im Schiffs-Stil (ersetzen Browser-Standarddialoge) */
.dialog { border: 3px solid #C9A15A; box-shadow: 0 0 0 2px #3A2216, 0 12px 40px rgba(0, 0, 0, .55); }
.dialog > form > h2:first-child, .dialog-head h2 { margin: 0 0 var(--space-3); }
.dialog-confirm { max-width: 400px; padding: 0; overflow: hidden; }
.dialog-confirm .dialog-head { background: linear-gradient(#4A2E1A, #3A2216); border-bottom: 2px solid #C9A15A; padding: var(--space-3) var(--space-4); }
.dialog-confirm .dialog-head h2 { color: #F6EBD3; font-size: 1.05rem; margin: 0; }
.dialog-confirm.is-danger .dialog-head { border-bottom-color: var(--danger); }
.dialog-confirm .dialog-text { margin: 0; padding: var(--space-4) var(--space-4) 0; }
.dialog-confirm .dialog-actions { padding: 0 var(--space-4) var(--space-4); }
.dialog[open] { animation: dlg-in .18s ease-out; }
@keyframes dlg-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

/* Admin */
.subnav { display: flex; flex-wrap: wrap; gap: var(--space-4); padding-bottom: var(--space-3); margin-bottom: var(--space-4); border-bottom: 2px solid var(--brass); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-panel); padding: var(--space-3); font-size: .875rem; color: var(--text-muted); }
.stat span { display: block; font-size: 1.6rem; font-weight: 700; color: var(--text); }
.stat-alert { border-color: var(--danger); background: var(--danger-soft); }
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; background: var(--surface); }
.table th, .table td { text-align: left; padding: var(--space-2); border-bottom: 1px solid var(--border); vertical-align: top; }
.table th { font-size: .8rem; text-transform: uppercase; color: var(--text-muted); }
.table-small td { font-size: .85rem; }
.badge-prio-0 { background: var(--danger); color: #fff; }
.badge-prio-1 { background: #D9480F; color: #fff; }
.dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px var(--space-4); margin: 0; }
.dl dt { font-weight: 600; color: var(--text-muted); }
.dl dd { margin: 0; }
.searchbar { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); max-width: 480px; }
.room-edit summary { cursor: pointer; }
.room-edit .form { margin-top: var(--space-3); }
.badge-new { background: var(--danger); color: #fff; margin-left: 2px; }
.notices li.is-new { border-left: 3px solid var(--brass); padding-left: var(--space-2); }
.secret code { font-size: 1.2rem; letter-spacing: .08em; padding: var(--space-2) var(--space-3); display: inline-block; user-select: all; }
.codes { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.codes code { font-size: 1.05rem; user-select: all; }
blockquote { margin: 0; padding: var(--space-2) var(--space-3); border-left: 3px solid var(--brass); background: var(--surface-muted); }

/* Schmale, farblich angepasste Scrollleisten */
:root { --scroll-thumb: #9DB0C2; --scroll-thumb-hover: var(--teal); --scroll-track: transparent; }
@media (prefers-color-scheme: dark) { :root { --scroll-thumb: #4A6178; --scroll-thumb-hover: var(--brass); } }
* { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) var(--scroll-track); }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: var(--scroll-track); }
*::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }
*::-webkit-scrollbar-button { display: none; height: 0; width: 0; }
*::-webkit-scrollbar-corner { background: transparent; }

/* Mobil: Tabs (Chat | An Bord) statt zwei Spalten */
@media (max-width: 860px) {
  .chat { grid-template-columns: 1fr; grid-template-rows: auto 1fr; padding: 4px; gap: 4px; }
  .chat-tabs { display: flex; background: #3A2216; border-radius: 6px; }
  .chat-tabs button { flex: 1; padding: var(--space-2); border: 0; background: none; font: inherit; color: #E8D9B8; cursor: pointer; border-bottom: 3px solid transparent; }
  .chat-tabs button.is-active { color: #fff; border-bottom-color: var(--brass-edge); font-weight: 700; }
  .panel { display: none; }
  .panel.is-visible { display: flex; }
  .room-tabs { flex-wrap: wrap; padding: 4px 6px 0; }
  .room-tab { max-width: 100%; }
  .room-actions { width: 100%; justify-content: space-between; padding-bottom: 4px; }
  .messages { padding: var(--space-2) var(--space-3); }
  .logbook-area { flex-direction: column; }
  .watch-box { position: static; width: auto; max-height: 30%; margin: 6px 6px 0; }
  .watch-list[hidden] { display: none; }
  .action-bar select { max-width: 140px; }
  .topbar { padding: var(--space-2); flex-wrap: nowrap; }
  .brand span { display: none; }
  .mainnav { gap: var(--space-3); font-size: .9rem; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .msg { display: block; }
  .msg-time { margin-right: var(--space-1); }
  .msg-tools { display: inline-flex; margin-left: var(--space-1); }
  body.is-chat .footer { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { animation: none !important; transition: none !important; }

/* ===== Logbuch-Seite: angelehnt an ein echtes Schiffslogbuch =====
   Grafiken (GRAFIKEN.md Abschnitt 10): log-cover.webp (Ledereinband), log-page.webp (Pergament), log-stamp.png, log-corner.png */
.logbook { max-width: 1000px; }
.log-cover {
  position: relative; text-align: center; color: #F3DFA8; padding: 34px 24px 28px; margin-bottom: 0;
  background: radial-gradient(ellipse at 30% 20%, #6B3A22 0%, #4A2414 55%, #2E160C 100%);
  border-radius: 10px 10px 0 0; box-shadow: inset 0 0 0 3px #2A120A, inset 0 0 0 7px #B8893A, inset 0 0 0 9px #2A120A, 0 6px 16px rgba(0,0,0,.35);
  /* GRAFIKEN 10.1: background: url(../img/logbook/log-cover.webp) center/cover; */
}
.log-cover::before, .log-cover::after { content: ""; position: absolute; top: 12px; width: 26px; height: 26px; border: 3px solid #C9A15A; }
.log-cover::before { left: 12px; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.log-cover::after { right: 12px; border-left: 0; border-bottom: 0; border-radius: 0 6px 0 0; }
.log-cover-label { display: block; font-family: Georgia, "Times New Roman", serif; text-transform: uppercase; letter-spacing: .35em; font-size: .8rem; color: #C9A15A; }
.log-cover h1 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.8rem, 5vw, 2.6rem); color: #F3DFA8; margin: 6px 0;
  text-shadow: 0 1px 0 #2A120A, 0 -1px 0 rgba(255,255,255,.15); letter-spacing: .03em; }
.log-cover-sub { margin: 0; font-style: italic; color: #E2C98F; font-family: Georgia, serif; }

.log-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 10px 0; background: #3A1D10; border-radius: 0 0 6px 6px; margin-bottom: var(--space-4); }
.log-tabs a { padding: 5px 12px; border-radius: 6px 6px 0 0; background: #E9D9B4; color: #4A2414; text-decoration: none; font-weight: 600; font-size: .88rem;
  border: 1px solid #B8893A; border-bottom: 0; }
.log-tabs a:nth-child(2n) { background: #DCC79A; }
.log-tabs a:hover, .log-tabs a:focus-visible { background: #F6EBD3; }

.logbook .log-page {
  --ink: #2A1E12; --ink-soft: #6A5638; --rule: rgba(90, 120, 150, .18);
  position: relative; color: var(--ink); border: 1px solid #C9B48A; border-radius: 3px 8px 8px 3px;
  background-color: #F6EBD3;
  background-image: linear-gradient(90deg, transparent 38px, rgba(180, 35, 24, .35) 38px, rgba(180, 35, 24, .35) 40px, transparent 40px),
                    repeating-linear-gradient(180deg, transparent 0, transparent 27px, var(--rule) 27px, var(--rule) 28px);
  padding: 18px 20px 20px 56px; box-shadow: 0 1px 0 #E2D2AD, 0 3px 0 #EADBB8, 0 4px 10px rgba(60, 35, 10, .25);
  /* GRAFIKEN 10.2: background-image: url(../img/logbook/log-page.webp); */
}
.logbook .log-page h2 { font-family: Georgia, "Times New Roman", serif; font-style: italic; color: #4A2414; border-bottom: 1px solid #B8893A; padding-bottom: 4px; }
.logbook .log-page h3 { font-family: Georgia, serif; color: #4A2414; }
.logbook .log-page .muted, .logbook .log-page small { color: var(--ink-soft); }
.logbook .log-page a { color: #7A3B12; }
.logbook .log-page .list li { border-bottom: 1px dashed #C9B48A; }
.logbook .log-page input, .logbook .log-page select, .logbook .log-page textarea {
  background: rgba(255, 252, 244, .85); color: var(--ink); border-color: #C9B48A; }
.logbook .log-page .btn-ghost { color: #7A3B12; border-color: #7A3B12; }
.logbook .log-page .rank-big { font-family: Georgia, serif; color: #4A2414; }
.logbook .log-page .rankbar-meter { background: #EADBB8; border-color: #B8893A; }
.logbook .log-page::after { content: ""; position: absolute; top: 10px; right: 14px; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #F3DFA8, #B8893A 60%, #6E5530); box-shadow: 0 1px 2px rgba(0,0,0,.4); }
.logbook .notices li { align-items: flex-start; }
.logbook .notices li small { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .02em; }
.logbook .notices li.is-new { border-left: 3px solid #B42318; }
.logbook .alert { background: rgba(255, 252, 244, .7); color: var(--ink); }

/* Anker vor dem Nicknamen (Crew) */
.anchor { color: var(--brass-edge, #C9A15A); font-weight: 700; margin-right: 3px; cursor: help; }
.member .anchor { color: #E8C98A; }
.msg-who .anchor { color: var(--deck-accent); }
.anchor-off { font-size: .65rem; color: #A99E8A; border: 1px dashed #A99E8A; border-radius: 3px; padding: 0 4px; margin-left: 4px; }

/* Rangbarometer in der Bordwand: fester Holz-Stil (lesbar unabhängig vom Gerätemodus) */
.panel-side .rankbar { background: linear-gradient(var(--side-head), var(--side-bg)); }
.panel-side .rankbar-title { color: #F3DFA8; }
.panel-side .rankbar-title small { color: #C9B38A; }
.panel-side .rankbar-next { color: #E2D3B2; }
.panel-side .rankbar-meter { background: #1A0E0A; border-color: #6E4528; }

/* Eingabe passend zum Logbuch des Raums */
.composer textarea { background: var(--logbook-bg); color: var(--logbook-text); border-color: var(--brass-edge); }
.composer textarea::placeholder { color: var(--text-muted); }
.chat[data-style="frachtraum"] .plank { color: #F1E6CF; text-shadow: 0 1px 1px #000; }

/* Raum-Stil: Private Kabine – gemütliche Koje (Banner/Deko: img/rooms/kabine.webp, kabine-deco.png) */
.chat[data-style="kabine"] { --deck-accent: #C98A5A; --logbook-bg: #1F1610; --logbook-text: #F0E3CF; --brass-edge: #B88B5A;
  --deck-banner: linear-gradient(120deg, #1A110B, #4A2E1A 55%, #C98A5A); }

/* Kabinen-Einladungen & Kabinen-Dialog */
.invite-box { position: absolute; left: 14px; right: 240px; top: 10px; z-index: 3; display: flex; flex-direction: column; gap: 6px; }
.invite { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border: 2px solid var(--brass-edge); border-radius: var(--radius-panel);
  background: linear-gradient(var(--side-head), var(--side-bg)); color: #F6EBD3; box-shadow: var(--shadow); }
.invite strong { color: #F3DFA8; }
.invite .btn { min-height: 28px; padding: 0 10px; font-size: .85rem; }
.cabin-list { list-style: none; padding: 0; margin: 0 0 var(--space-3); }
.cabin-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px dashed var(--border); }
@media (max-width: 860px) { .invite-box { position: static; margin: 6px; } }

/* ===== Kennzeichnung Private Kabinen ===== */
.cabin-chips { display: inline-flex; flex-wrap: wrap; gap: 3px; margin-left: 6px; vertical-align: middle; }
.chip { display: inline-block; font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.5;
  padding: 0 6px; border-radius: 999px; background: #E9D9B4; color: #4A2414; border: 1px solid #B8893A; }
.chip-private { background: #4A2414; color: #F3DFA8; border-color: #C9A15A; }
.chip-public { background: #DDF3E6; color: #18794E; border-color: #18794E; }
.chip-lock { background: #FDECEA; color: #B42318; border-color: #B42318; }
.cabin-label { font-weight: 800; letter-spacing: .08em; color: var(--deck-accent); }
.chat.is-cabin .room-tab { border-style: dashed; border-width: 2px; border-color: var(--brass-edge);
  background-image: repeating-linear-gradient(135deg, rgba(201, 161, 90, .10) 0 8px, transparent 8px 16px); }
.chat.is-cabin .room-tab::before { content: "🛏"; margin-right: 2px; }
.chat.is-cabin .room-tabs { border-bottom-style: dashed; }
.room-link.is-cabin { flex-wrap: wrap; }
.room-link.is-cabin .cabin-chips { order: 3; width: 100%; margin: 2px 0 0; }
.opt-group { margin: 4px 0; }
.opt-group .check { align-items: flex-start; font-weight: 400; }
.cabin-settings { border: 1px dashed var(--brass, #B8893A); border-radius: var(--radius-panel); padding: 8px 12px; margin: 8px 0; }
#dlg-cabin { max-width: 520px; max-height: 90vh; overflow-y: auto; }

/* =====================================================================================
   GRAFIKEN EINGEBUNDEN (Stand 2026-10-29) – Dateien siehe GRAFIKEN.md / bin/grafiken-verarbeiten.sh
   Rahmen per border-image (9-Slice, gemessene Werte); Farben/Fallbacks oben bleiben gültig.
   ===================================================================================== */
.chat {
  --chat-tint: rgba(30, 15, 8, .18);
  border: 24px solid transparent;
  border-image: url(../img/chat/frame-outer.webp) 150 / 24px stretch;
  background-image: linear-gradient(var(--chat-tint), var(--chat-tint)), url(../img/chat/wood-planks.webp);
  background-size: auto, 256px 256px;
  background-color: var(--chat-bg);
}
@supports (color: color-mix(in srgb, red, blue)) {
  .chat { --chat-tint: color-mix(in srgb, var(--deck-accent) 20%, rgba(20, 10, 5, .25)); }
}
.chat[data-style="frachtraum"] { --chat-tint: rgba(5, 3, 2, .72); }
.chat[data-tone="dark"]:not([data-style="frachtraum"]) { --chat-tint: rgba(10, 6, 4, .38); }

/* Panels mit Messing-Holz-Rahmen */
.crew-box, .panel-talk {
  border: 14px solid transparent; border-image: url(../img/chat/frame-panel.webp) 48 / 14px stretch;
  background-clip: padding-box; border-radius: 0; box-shadow: 0 3px 10px rgba(0, 0, 0, .45);
}
.panel-side .rankbar { border: 12px solid transparent; border-image: url(../img/chat/frame-panel.webp) 48 / 12px stretch; background-clip: padding-box; border-radius: 0; }

/* Holzplanken-Menü */
.plank-menu::before { content: ""; display: block; height: 16px; margin: -2px 0 2px;
  background: url(../img/chat/rope-divider.webp) center / auto 100% repeat-x; }
.plank {
  border: 0; border-radius: 0; box-shadow: none; background: none;
  border-style: solid; border-width: 0 18px; border-image: url(../img/chat/plank.webp) 0 50 fill / 0 18px stretch;
  color: #FFF4DC; text-shadow: 0 1px 2px rgba(0, 0, 0, .85), 0 0 1px #000; padding: 9px 4px; font-weight: 700;
}
.plank:hover { filter: brightness(1.12); }
.chat[data-tone="dark"] .plank { filter: brightness(.86); }
.chat[data-tone="dark"] .plank:hover { filter: brightness(1); }
.chat[data-style="frachtraum"] .plank { filter: brightness(.6) sepia(.35); color: #F1E6CF; }
.plank-leave { color: #FFD9CF; }

/* Reiterleiste: geschnitzter Balken, Raum-Reiter aus Pergament */
.room-tabs { background: url(../img/chat/header-beam.webp) center / 100% 100% no-repeat, linear-gradient(var(--side-head), var(--side-bg));
  padding: 10px 26px 0; min-height: 52px; }
.room-tab { border: 0; border-radius: 0; background: none; border-style: solid; border-width: 0 14px;
  border-image: url(../img/chat/room-tab.webp) 0 40 fill / 0 14px stretch; padding: 7px 6px 5px; color: #2A1E12; }
.room-tab h1 { color: #2A1E12; }
.chat.is-cabin .room-tab { background-image: none; }

/* Steuerpult: Zierleiste oben */
.console { position: relative; padding-top: 26px; border-top: 0; }
.console::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 26px;
  background: url(../img/chat/console.webp) center / 100% 100% no-repeat; pointer-events: none; }

/* Messing-Knöpfe */
.btn-send, .action-bar .btn-small {
  background: none; border-style: solid; border-color: transparent; border-width: 0 16px; border-radius: 0;
  border-image: url(../img/chat/brass-button.webp) 0 55 fill / 0 16px stretch;
  color: #2A1712; text-shadow: 0 1px 0 rgba(255, 255, 255, .45); font-weight: 800; padding: 0 6px;
}
.btn-send:hover, .action-bar .btn-small:hover { background: none; filter: brightness(1.08); }
.room-actions .btn-sos {
  background: none; border-style: solid; border-color: transparent; border-width: 0 12px 0 34px; border-radius: 0;
  border-image: url(../img/chat/sos-button.webp) 0 40 0 100 fill / 0 12px 0 34px stretch;
  color: #FFF; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); padding: 0 6px; min-height: 34px;
}
.room-actions .btn-sos img { display: none; }
.room-actions .btn-sos:hover { background: none; filter: brightness(1.1); }

/* Smilie-Knopf */
.smiley-btn { border: 0; border-radius: 50%; background: url(../img/chat/smiley-button.webp) center / contain no-repeat; color: transparent; width: 42px; height: 42px; }

/* Kapitäns-Hinweise als Telegramm-Zettel */
.msg-ephemeral { background: none; border: 10px solid transparent; border-image: url(../img/chat/note-captain.webp) 30 fill / 10px stretch;
  color: #2A1E12; padding: 2px 6px; margin: 4px 0; }
.msg-ephemeral .msg-time { color: #6A5638; }

/* Navigatoren auf Wache: Pergamentbrett */
.watch-box { background: none; border: 0; border-style: solid; border-width: 30px 12px 12px; border-radius: 0; box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
  border-image: url(../img/chat/watch-frame.webp) 76 26 26 26 fill / 30px 12px 12px stretch; color: #2A1E12; }
.watch-head { margin-top: -27px; background: none; color: #F6EBD3; padding: 2px 4px 4px 22px; text-shadow: 0 1px 2px #000; }
.watch-list { padding-top: 6px; }
.watch-member, .chat[data-tone="dark"] .watch-member, .chat[data-tone="light"]:not([data-style="standard"]) .watch-member { color: #2A1E12; }
.chat[data-tone="dark"] .watch-box, .chat[data-tone="light"]:not([data-style="standard"]) .watch-box { background: none; color: #2A1E12; }
.watch-list .muted { color: #6A5638; }

/* Logbuch-Pergament im Chat: helle Räume Pergament, dunkle Räume Seekarten-Papier (dezent, Raumfarbe bleibt) */
.chat[data-tone="light"] .messages { background-image: linear-gradient(rgba(251, 246, 234, .55), rgba(251, 246, 234, .55)), url(../img/chat/parchment-light.webp); background-size: auto, 512px 512px; }
.chat[data-tone="dark"] .messages { background-image: linear-gradient(rgba(0, 0, 0, .35), rgba(0, 0, 0, .35)), url(../img/chat/parchment-dark.webp); background-size: auto, 512px 512px; background-blend-mode: normal, luminosity; }
.chat[data-style="frachtraum"] .messages { background-image: linear-gradient(rgba(8, 5, 2, .78), rgba(8, 5, 2, .78)), url(../img/chat/wood-planks.webp); background-size: auto, 256px 256px; }

/* Verbindungsanzeige: Steuerrad dreht sich beim Verbinden */
.conn.is-bad::before { content: ""; display: inline-block; width: 13px; height: 13px; margin-right: 4px; vertical-align: -2px;
  background: url(../img/chat/ship-wheel.webp) center / contain no-repeat; animation: wheel-spin 2.4s linear infinite; }
@keyframes wheel-spin { to { transform: rotate(360deg); } }

/* Raum-wechseln-Fenster auf Seekarte, Deck-Icons */
#dlg-rooms { background: linear-gradient(rgba(246, 235, 211, .9), rgba(246, 235, 211, .9)), url(../img/chat/sea-chart.webp) center / cover; color: #2A1E12; }
#dlg-rooms .deck h3, #dlg-rooms h2 { color: #4A2414; }
#dlg-rooms .room-link { color: #2A1E12; }
#dlg-rooms .room-link .count { color: #6A5638; }
#dlg-rooms .room-link:hover { background: rgba(184, 137, 58, .2); }
#dlg-rooms .room-link.is-current { background: #4A2414; color: #F6EBD3; }
.deck-icon { width: 22px; height: 22px; object-fit: contain; vertical-align: -5px; margin-right: 6px; }

/* Mobile Reiter als Holzschilder */
@media (max-width: 860px) {
  .chat { border-width: 10px; border-image-width: 10px; }
  .chat-tabs button.is-active { border: 0; border-style: solid; border-width: 0 14px; border-image: url(../img/chat/tab-wood.webp) 0 45 fill / 0 14px stretch;
    color: #FFF4DC; text-shadow: 0 1px 2px #000; }
  .room-tabs { padding: 8px 14px 0; }
}

/* Logbuch-Seite: Messing-Eckornamente und Nieten */
.log-cover::before, .log-cover::after { border: 0; border-radius: 0; width: 64px; height: 58px; top: 8px;
  background: url(../img/chat/corner-ornament.webp) center / contain no-repeat; }
.log-cover::before { left: 8px; }
.log-cover::after { right: 8px; transform: scaleX(-1); }
.logbook .log-page::after { width: 20px; height: 20px; background: url(../img/chat/rivet.webp) center / contain no-repeat; box-shadow: none; }

/* Marke & Fehlerseiten */
.brand img { border-radius: 50%; }
.error-art { display: block; margin: 0 auto 12px; height: 140px; width: auto; }

/* Korrekturen nach Sichtprüfung */
[hidden] { display: none !important; }
/* Planken abdunkeln, ohne die Schrift abzudunkeln: Ebene zwischen Holz (border-image) und Text */
.plank { position: relative; isolation: isolate; }
.plank::before { content: ""; position: absolute; inset: 0 -18px; z-index: -1; background: var(--plank-shade, transparent); pointer-events: none; }
.chat[data-tone="dark"] .plank, .chat[data-tone="dark"] .plank:hover,
.chat[data-style="frachtraum"] .plank { filter: none; }
.chat[data-tone="dark"] { --plank-shade: rgba(0, 0, 0, .18); }
.chat[data-style="frachtraum"] { --plank-shade: rgba(10, 6, 2, .5); }
.chat[data-style="frachtraum"] .plank { color: #FFF1D6; }
.plank:hover { filter: none; }
.plank:hover::before { background: rgba(255, 220, 160, .12); }
/* Wache-Kasten: Überschrift einzeilig */
.watch-box { width: 236px; }
.watch-head { font-size: .82rem; white-space: nowrap; }
.messages { padding-right: 262px; }
@media (max-width: 860px) { .watch-box { width: auto; } .messages { padding-right: var(--space-3); } }

/* Mobil: nichts darf breiter als der Bildschirm werden */
.chat, .panel, .room-tab, .room-tabs, .console, .composer, .logbook-area { min-width: 0; }
body.is-chat { overflow-x: hidden; }
@media (max-width: 860px) {
  .chat { width: 100%; max-width: 100vw; }
  .crew-box, .panel-talk { border-width: 8px; border-image-width: 8px; }
  .panel-side .rankbar { border-width: 8px; border-image-width: 8px; }
  .room-tabs { padding: 6px 10px 0; min-height: 0; }
  .room-tab { flex: 1 1 auto; }
  .room-actions { flex-wrap: wrap; gap: 6px; }
  .action-bar { gap: 6px; }
  .action-bar label { flex: 1 1 140px; }
  .action-bar select { flex: 1; min-width: 0; max-width: none; }
  .composer textarea { min-width: 0; }
  .btn-send { padding: 0 2px; }
  .watch-box { max-height: 26%; }
}

/* Mobil: Wache-Kasten als eingeklappte Leiste oben */
@media (max-width: 860px) { .logbook-area .watch-box { order: -1; margin: 4px 6px 0; max-height: 40%; } }

/* Balken & Steuerpult nicht mehr verziehen: nur das Mittelstück wird gestreckt, Endkappen bleiben proportional.
   Gemessen: header-beam 1600x285, Kappen je 178 px → bei 52 px Höhe 32 px breit.
             console 1600x382, Kappen je 285 px → bei 30 px Höhe 22 px breit. */
.room-tabs { position: relative; background: linear-gradient(var(--side-head), var(--side-bg)); }
.room-tabs::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-style: solid; border-color: transparent; border-width: 0 32px;
  border-image: url(../img/chat/header-beam.webp) 0 178 fill / 0 32px stretch; }
.room-tabs > * { position: relative; z-index: 1; }
.console::before { height: 30px; background: none;
  border-style: solid; border-color: transparent; border-width: 0 22px;
  border-image: url(../img/chat/console.webp) 0 285 fill / 0 22px stretch; }
.console { padding-top: 30px; }

/* Icons, Avatare, Rangabzeichen */
.ui-icon { width: 20px; height: 20px; object-fit: contain; vertical-align: -4px; margin-right: 7px; }
.mainnav .ui-icon { width: 18px; height: 18px; margin-right: 5px; opacity: .9; }
.plank .ui-icon { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .8)); }
.btn .ui-icon { width: 18px; height: 18px; margin-right: 6px; }
.avatar-sm { width: 28px; height: 28px; border-radius: 50%; flex: none; margin-right: 8px; object-fit: cover; }
.member { align-items: center; }
.avatar-big { width: 84px; height: 84px; border-radius: 50%; flex: none; }
.profile-head { display: flex; align-items: center; gap: 14px; }
.profile-head h2 { margin: 0; }
.rank-line { margin: 2px 0 0; display: flex; align-items: center; gap: 6px; }
.rank-badge { width: 18px; height: 18px; object-fit: contain; vertical-align: -4px; margin-right: 3px; }
.msg-rank .rank-badge { width: 15px; height: 15px; vertical-align: -3px; margin-right: 2px; }
.rank-badge-big { width: 34px; height: 34px; object-fit: contain; vertical-align: middle; margin-right: 8px; }
.rank-badge-log { width: 64px; height: 64px; object-fit: contain; vertical-align: middle; margin-right: 12px; }
.crew-badge { width: 18px; height: 18px; object-fit: contain; vertical-align: -4px; margin-right: 5px; }
.avatar-captain { width: 22px; height: 22px; border-radius: 50%; vertical-align: -6px; margin-right: 6px; }
.log-avatar { display: block; margin: 0 auto 6px; width: 96px; height: 96px; border-radius: 50%; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .5)); }
.rank-toast { display: flex; align-items: center; gap: 12px; padding: 14px 26px 14px 14px;
  background: radial-gradient(circle at 46px 50%, rgba(255, 215, 120, .35), transparent 60px), var(--navy); }
.toast-badge { width: 64px; height: 64px; object-fit: contain; padding: 6px;
  background: url(../img/ranks/promotion-burst.webp) center / 100% 100% no-repeat; animation: burst 1.2s ease-out; }
@keyframes burst { from { transform: scale(.4) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* ===== Layout-Optimierung nach Nutzer-Screenshot (1918x915) ===== */
/* Raster darf nie höher werden als das Fenster: Inhalte schrumpfen/scrollen statt abgeschnitten zu werden */
.chat { grid-template-rows: minmax(0, 1fr); gap: 8px; padding: 6px; }
.panel-side { min-height: 0; gap: 6px; }
.crew-box { flex: 1 1 auto; min-height: 90px; }
.member-list { min-height: 0; }

/* Balken als eigene Zierleiste über den Reitern (nicht mehr hinter Reiter und Hilferuf) */
.room-tabs { padding: 26px 18px 0; min-height: 0; }
.room-tabs::before { inset: 0 0 auto 0; height: 24px; border-width: 0 15px;
  border-image: url(../img/chat/header-beam.webp) 0 178 fill / 0 15px stretch; }
.room-tab { padding: 5px 6px 4px; }
.room-actions { padding-bottom: 4px; }
.room-banner.has-image { min-height: 58px; }

/* Bordwand kompakter */
.panel-side .rankbar { padding: 8px 10px; }
.plank-menu { gap: 3px; }
.plank-menu::before { height: 12px; margin: 0 0 2px; }
.plank { padding: 6px 4px; font-size: .9rem; }
.plank .ui-icon { width: 18px; height: 18px; }

/* Steuerpult kompakter; auf breiten Bildschirmen Eingabe und Aktionsleiste nebeneinander */
.console { padding: 28px 10px 8px; gap: 6px; }
@media (min-width: 1500px) {
  .console { flex-direction: row; align-items: center; gap: 14px; }
  .composer { flex: 1 1 auto; }
  .action-bar { flex: 0 0 auto; flex-wrap: nowrap; }
}

/* Niedrige Fenster: noch etwas enger */
@media (max-height: 820px) and (min-width: 861px) {
  .panel-side .rankbar-next { display: none; }
  .plank { padding: 4px 4px; font-size: .85rem; }
  .plank-menu::before { display: none; }
  .room-banner.has-image { min-height: 40px; }
  .console { padding-top: 26px; }
}

/* Wache-Kasten neu aufgeteilt (watch-frame 800x340): Kopfbalken inkl. Messingleiste 104 px, links mit Anker 125 px,
   rechts/unten Nieten 45 px – diese Teile bleiben fest, nur Holz/Pergament dehnen sich. Anzeige-Maßstab 0,385. */
.watch-box { width: 250px; border-style: solid; border-color: transparent;
  border-width: 40px 17px 17px 48px; border-image: url(../img/chat/watch-frame.webp) 104 45 45 125 fill / 40px 17px 17px 48px stretch; }
.watch-head { margin: -37px 0 0 -4px; height: 30px; padding: 0 2px 0 0; display: flex; align-items: center; justify-content: space-between;
  gap: 6px; font-size: .84rem; white-space: nowrap; border-radius: 0; }
.watch-head .badge { background: #E9D9B4; color: #4A2414; border: 1px solid #B8893A; min-width: 20px; font-size: .72rem; line-height: 1.4; text-shadow: none; }
.watch-list { margin: 0 -4px 0 -34px; padding: 6px 2px 0; }
.messages { padding-right: 276px; }
@media (max-width: 860px) { .watch-box { width: auto; } .messages { padding-right: var(--space-3); } }

/* Raum-Reiter (room-tab 600x117): Flügel + Nieten je 130 px bleiben fest, nur die erhöhte Mitte wächst mit dem Text.
   Anzeige ~38 px hoch → Maßstab 0,32 → Enden 42 px. */
.room-tab { border-width: 0 42px; border-image: url(../img/chat/room-tab.webp) 0 130 fill / 0 42px stretch;
  padding: 8px 2px 5px; min-height: 38px; align-items: center; }
.room-tab h1 { font-size: 1.02rem; line-height: 1.2; }
.room-tab-deck { font-size: .68rem; }
.watch-head { margin-left: 0; }
@media (max-width: 860px) { .room-tab { border-width: 0 30px; border-image-width: 0 30px; } }

/* Deck-Label auf dem Pergament-Reiter: Akzentfarbe abgedunkelt für Kontrast */
.room-tab-deck { color: #6A4A1A; }
@supports (color: color-mix(in srgb, red, blue)) { .room-tab-deck { color: color-mix(in srgb, var(--deck-accent) 55%, #2A1E12); } }

/* ===== Fenster (Dialoge) im Schiffs-Stil: Messing-Holz-Rahmen, Holz-Kopfbalken, Pergament-Fläche, Tinte ===== */
.dialog {
  --ink: #2A1E12; --ink-soft: #6A5638; --paper-line: #C9B48A;
  border: 16px solid transparent; border-image: url(../img/chat/frame-panel.webp) 48 / 16px stretch; border-radius: 0;
  background: linear-gradient(rgba(251, 246, 234, .78), rgba(251, 246, 234, .78)), url(../img/chat/parchment-light.webp) center / 512px;
  background-clip: padding-box; color: var(--ink); padding: 0 18px 16px; box-shadow: 0 16px 48px rgba(0, 0, 0, .6);
}
.dialog::backdrop { background: rgba(14, 8, 4, .62); }
.dialog > form > h2:first-child, .dialog > form > .dialog-head:first-child, .dialog > form > .profile-head:first-child {
  margin: 0 -18px 12px; padding: 12px 18px 10px; color: #F6EBD3; text-shadow: 0 1px 2px #000;
  background: linear-gradient(rgba(58, 28, 14, .72), rgba(42, 20, 10, .82)), url(../img/chat/wood-planks.webp) center / 256px;
  border-bottom: 3px solid #B8893A; box-shadow: inset 0 -1px 0 #6E4528;
}
.dialog > form > h2:first-child { font-size: 1.15rem; }
.dialog > form > .profile-head:first-child h2 { color: #F6EBD3; }
.dialog > form > .profile-head:first-child .muted, .dialog > form > .profile-head:first-child .rank-line { color: #E2D3B2; }
.dialog-confirm .dialog-head { background: none; border: 0; padding: 0; }
.dialog-confirm .dialog-head h2 { color: #F6EBD3; }
.dialog-confirm .dialog-text { padding: 0 0 4px; }
.dialog-confirm .dialog-actions { padding: 0; }
.dialog h3 { color: #4A2414; font-family: Georgia, "Times New Roman", serif; font-size: 1rem; margin: 14px 0 6px;
  padding-bottom: 3px; border-bottom: 1px solid var(--paper-line); }
.dialog .muted, .dialog small { color: var(--ink-soft); }
.dialog a { color: #7A3B12; }
.dialog label { color: var(--ink); font-weight: 600; }
.dialog input, .dialog select, .dialog textarea { background: #FFFBF2; color: var(--ink); border: 1px solid var(--paper-line); border-radius: 4px; }
.dialog input:focus, .dialog select:focus, .dialog textarea:focus { border-color: #B8893A; }
.dialog fieldset { border: 1px solid var(--paper-line); border-radius: 6px; background: rgba(255, 251, 242, .5); }
.dialog legend { color: #4A2414; font-weight: 700; }
.dialog .cabin-list li { border-bottom: 1px dashed var(--paper-line); }
.dialog .cabin-settings { border-color: #B8893A; background: rgba(255, 251, 242, .4); }
.dialog .field-error { color: #B42318; }

/* Auswahlknöpfe/Häkchen neben dem Text (nicht darüber) */
input[type="radio"], input[type="checkbox"] { width: auto; flex: none; margin: 3px 0 0; accent-color: #B8893A; }
label.check { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; }
.dialog .opt-group .check { padding: 3px 0; }

/* Knöpfe in Fenstern: Messing; Nebenaktion als dezente Holzkante */
.dialog .btn:not(.btn-ghost):not(.btn-danger):not(.btn-sos) {
  background: none; border-style: solid; border-color: transparent; border-width: 0 16px; border-radius: 0;
  border-image: url(../img/chat/brass-button.webp) 0 55 fill / 0 16px stretch;
  color: #2A1712; text-shadow: 0 1px 0 rgba(255, 255, 255, .45); font-weight: 800; padding: 0 6px;
}
.dialog .btn:not(.btn-ghost):not(.btn-danger):not(.btn-sos):hover { filter: brightness(1.08); }
.dialog .btn-ghost { background: rgba(255, 251, 242, .6); color: #4A2414; border: 1px solid #8A6A3A; border-radius: 4px; }
.dialog .btn-ghost:hover { background: rgba(184, 137, 58, .22); }
.dialog .btn-sos, .dialog .btn-danger { border-radius: 4px; }
.dialog .btn .ui-icon { filter: none; }
.dialog .alert { color: var(--ink); }
.dialog .presence { margin-right: 2px; }
#dlg-cabin { max-width: 540px; }
#dlg-friends { min-width: min(440px, calc(100vw - 32px)); }

/* Bestätigungsfenster (app.js): Kopfzeile liegt direkt im Fenster → ebenfalls Holzbalken */
.dialog-confirm { padding: 0 18px 16px; }
.dialog > .dialog-head:first-child, .dialog-confirm > form > .dialog-head:first-child {
  margin: 0 -18px 12px; padding: 12px 18px 10px;
  background: linear-gradient(rgba(58, 28, 14, .72), rgba(42, 20, 10, .82)), url(../img/chat/wood-planks.webp) center / 256px;
  border-bottom: 3px solid #B8893A; }
.dialog-confirm .dialog-head h2 { color: #F6EBD3; text-shadow: 0 1px 2px #000; margin: 0; }
.dialog-confirm.is-danger .dialog-head { border-bottom-color: #B42318; }

/* Raum-wechseln-Fenster: Titel im Holzbalken hell (ältere ID-Regel färbte alle h2 dunkel) */
#dlg-rooms > form > h2:first-child { color: #F6EBD3; text-shadow: 0 1px 2px #000; }

/* Auswahlpunkte/Häkchen: ohne den Innenabstand normaler Eingabefelder, feste Größe, mittig zur ersten Textzeile */
input[type="radio"], input[type="checkbox"] { padding: 0; width: 17px; height: 17px; margin: 2px 0 0; border-radius: 0; }
label.check { align-items: flex-start; line-height: 1.45; }
.dialog fieldset, fieldset.opt-group { padding: 8px 14px 10px; }
.dialog .opt-group .check { padding: 4px 0; }

/* Hilfe-Fenster im Chat */
.dialog-help { width: min(760px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 40px); padding-bottom: 12px; }
.dialog-help > form { display: flex; flex-direction: column; max-height: calc(100vh - 80px); }
.dialog-help h2#dlg-help-title { display: flex; align-items: center; }
.help-body { overflow-y: auto; padding-right: 6px; flex: 1 1 auto; min-height: 0; }
.help-body h2 { font-family: Georgia, "Times New Roman", serif; font-size: 1.08rem; color: #4A2414; margin: 16px 0 6px;
  padding-bottom: 3px; border-bottom: 1px solid #C9B48A; text-shadow: none; }
.help-body p, .help-body li { line-height: 1.55; }
.help-body ul { padding-left: 20px; margin: 6px 0; }
.help-body code { background: rgba(184, 137, 58, .18); color: #4A2414; }
.help-commands { columns: 2; column-gap: 24px; }
.help-emergency { margin-top: 2px; }
.dialog .help-emergency { background: #FDECEA; border-color: #B42318; color: #5A1410; }
.dialog .help-emergency a { color: #B42318; font-weight: 700; }
@media (max-width: 600px) { .help-commands { columns: 1; } }

/* Hilfe-Fenster: nur der Text scrollt, das Fenster selbst nie (vorher doppelter Scrollbalken) */
.dialog-help { height: min(860px, calc(100vh - 40px)); max-height: calc(100vh - 40px); overflow: hidden; }
.dialog-help > form { height: 100%; max-height: none; }
.dialog-help .dialog-actions { flex: none; margin-top: 10px; }

/* Raum-Deko sichtbar machen: Papier/Holz-Hintergrund liegt jetzt auf .logbook-area (unter der Deko),
   der Nachrichtenbereich ist durchsichtig. Reihenfolge: Hintergrund → Deko → Nachrichten. */
.chat .messages, .chat[data-tone="light"] .messages, .chat[data-tone="dark"] .messages, .chat[data-style="frachtraum"] .messages { background: none; }
.logbook-area { background-color: var(--logbook-bg); }
.chat[data-tone="light"] .logbook-area { background-image: linear-gradient(rgba(251, 246, 234, .55), rgba(251, 246, 234, .55)), url(../img/chat/parchment-light.webp); background-size: auto, 512px 512px; }
.chat[data-tone="dark"] .logbook-area { background-image: linear-gradient(rgba(0, 0, 0, .35), rgba(0, 0, 0, .35)), url(../img/chat/parchment-dark.webp); background-size: auto, 512px 512px; background-blend-mode: normal, luminosity; }
.chat[data-style="frachtraum"] .logbook-area { background-image: linear-gradient(rgba(8, 5, 2, .78), rgba(8, 5, 2, .78)), url(../img/chat/wood-planks.webp); background-size: auto, 256px 256px; }
.room-deco { z-index: 0; background-position: right 18px bottom 10px; background-size: auto min(46%, 230px); opacity: .95; }
.messages { position: relative; z-index: 1; }
.watch-box { z-index: 2; }
@media (max-width: 860px) { .room-deco { background-size: auto min(30%, 140px); opacity: .55; } }

/* ===== Feinschliff Ausrichtung (gemessen) =====
   Raum-Deko: Die Grafiken sind unten/rechts beschnitten (Kiste steht auf dem Bildrand) → bündig auf die Kante
   des Logbuchbereichs setzen, direkt auf die Messingleiste der Konsole. */
.room-deco { background-position: right 0 bottom 0; }

/* Raum-Reiter: Deck und Raumname in EINER Schriftgröße auf gemeinsamer Grundlinie, nur Gewicht/Farbe unterscheiden.
   Pergamentfläche der Grafik liegt bei 15–96 % der Höhe → Text optisch in deren Mitte (oben etwas mehr Abstand). */
.room-tab { display: flex; align-items: baseline; justify-content: center; gap: 0;
  min-height: 38px; padding: 11px 4px 2px; line-height: 1; }
.room-tab-deck, .room-tab h1 { font-family: inherit; font-size: .98rem; line-height: 1.25; letter-spacing: .01em; }
.room-tab-deck { text-transform: none; font-weight: 600; }
.room-tab-deck:not(:empty)::after { content: "·"; display: inline-block; margin: 0 .45em; color: #8A6A3A; font-weight: 700; }
.room-tab h1 { font-weight: 700; }

/* ===== Kapitäns-Notiz (note-captain 800x195): gemessene Slices – Niete oben links 58x44, Fasenecken 30 px.
   Maßstab 0,3 → 13/9/9/17 px. Kasten nur so breit wie der Text, nicht über Deko/Wache. */
.msg-ephemeral { width: fit-content; max-width: min(100%, 760px); border-style: solid; border-color: transparent;
  border-width: 13px 9px 9px 17px; border-image: url(../img/chat/note-captain.webp) 44 30 30 58 fill / 13px 9px 9px 17px stretch;
  padding: 1px 8px 2px 4px; margin: 6px 0; }

/* Raum-Reiter öffnet die Raumauswahl */
.room-tab { cursor: pointer; }

/* =====================================================================================
   MOBIL (≤ 860 px) – endgültiges Layout. Steht bewusst am Dateiende und überschreibt
   alle früheren, verstreuten Mobil-Regeln (u. a. .chat grid-template-rows global).
   ===================================================================================== */
@media (max-width: 860px) {
  /* Kopfzeile: nur Symbole, gleichmäßig verteilt (Beschriftung bleibt für Screenreader) */
  .topbar { padding: 6px 10px; gap: 6px; flex-wrap: nowrap; min-height: 0; }
  .brand img { width: 36px; height: 36px; }
  .mainnav { flex: 1; justify-content: flex-end; gap: 2px; overflow: visible; font-size: 1rem; }
  .mainnav a, .mainnav .linklike { position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 40px; padding: 0; border-radius: 8px; }
  .mainnav a:hover, .mainnav .linklike:hover { background: rgba(255, 255, 255, .08); text-decoration: none; }
  .mainnav .ui-icon { width: 26px; height: 26px; margin: 0; opacity: 1; }
  .mainnav .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .mainnav .badge { position: absolute; top: 1px; right: 1px; font-size: .65rem; min-width: 16px; padding: 0 4px; }
  .mainnav form.inline { display: contents; }

  /* Schiff: Reiterleiste (Chat / An Bord) oben, darunter das aktive Panel – füllt die Höhe */
  .chat { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 6px; padding: 4px;
    border-width: 8px; border-image-width: 8px; }
  .chat-tabs { display: flex; position: relative; z-index: 3; gap: 4px; min-height: 40px; padding: 3px;
    background: linear-gradient(#3A2216, #2A1712); border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(201, 162, 90, .35); }
  .chat-tabs button { flex: 1; min-height: 34px; padding: 0 8px; font-size: .95rem; color: #E8D9B8; border-radius: 4px; }
  .chat-tabs button.is-active { color: #FFF4DC; }
  .panel { display: none; }
  .panel.is-visible { display: flex; }
  .panel-talk { border-width: 6px; border-image-width: 6px; }

  /* Kopf des Chatfensters: Reiter + Status-Punkt + runder Hilferuf in EINER Zeile, ohne Balken */
  .room-tabs { flex-wrap: nowrap; align-items: center; gap: 6px; padding: 6px 6px 6px; min-height: 0; }
  .room-tabs::before { display: none; }
  .room-tab { flex: 1 1 auto; min-width: 0; min-height: 34px; padding: 9px 0 2px; justify-content: flex-start;
    border-width: 0 24px; border-image-width: 0 24px; }
  .room-tab-deck { display: none; }
  .room-tab h1 { font-size: .95rem; min-width: 0; }
  .room-actions { flex: none; width: auto; flex-wrap: nowrap; gap: 6px; padding: 0; align-items: center; }
  .conn { font-size: 0; }
  .conn::before { margin: 0 !important; }
  .room-actions .btn-sos { width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0; font-size: 0;
    border: 0; border-image: none; border-radius: 50%; background: url(../img/lifebuoy.svg) center / 30px no-repeat, radial-gradient(#C8382A, #8F1C13);
    box-shadow: 0 0 0 2px var(--brass-edge), 0 2px 4px rgba(0, 0, 0, .5); }

  /* Raum-Banner: schmal, Thema einzeilig */
  .room-banner, .room-banner.has-image { min-height: 0; padding: 6px 10px; }
  .room-topic { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Logbuch: volle Fläche; Wache als kleiner Anker-Chip oben rechts (aufklappbar) */
  .logbook-area { flex-direction: column; }
  .messages { padding: 8px 10px; font-size: .95rem; line-height: 1.4; }
  .logbook-area .watch-box { position: absolute; top: 6px; right: 8px; left: auto; order: 0; width: auto; max-width: 75%; max-height: 50%;
    margin: 0; z-index: 2; border: 0; border-image: none; border-radius: 16px; padding: 0;
    background: rgba(42, 23, 18, .92); box-shadow: 0 0 0 1px var(--brass-edge), 0 2px 6px rgba(0, 0, 0, .45); color: #F6EBD3; }
  .watch-head { margin: 0; height: 30px; padding: 0 6px 0 10px; gap: 6px; font-size: .8rem; color: #F6EBD3; background: none; }
  .watch-head #watch-title { display: none; }
  .watch-head::before { content: "⚓ Wache"; font-weight: 700; }
  .watch-list { padding: 0 8px 6px; overflow-y: auto; }
  .watch-list li, .watch-list a, .watch-list .watch-member { color: #F6EBD3; }
  .msg-ephemeral { max-width: 100%; }
  .room-deco { background-size: auto min(28%, 120px); opacity: .5; }

  /* Steuerpult: Eingabezeile + eine Handlungszeile; Raumwechsel über den Reiter oben */
  .console { flex-direction: column; align-items: stretch; gap: 6px; padding: 16px 6px 6px; }
  .console::before { height: 14px; }
  .composer { display: flex; align-items: center; gap: 6px; }
  .smiley-btn { width: 40px; height: 40px; flex: none; }
  .composer textarea { flex: 1; min-width: 0; height: 40px; min-height: 40px; padding: 8px 10px; font-size: 1rem; }
  .btn-send { flex: none; min-width: 78px; height: 40px; min-height: 40px; padding: 0 10px; }
  .action-bar { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; }
  .action-bar label { display: flex; flex: 1 1 0; min-width: 0; font-size: 0; gap: 0; }
  .action-bar label:first-child { display: none; }
  .action-bar select { flex: 1; width: 100%; min-width: 0; max-width: none; height: 36px; font-size: .9rem; }
  .action-bar .btn-small { flex: none; width: 44px; min-width: 44px; height: 36px; padding: 0; font-size: 0; }
  .action-bar .btn-small .ui-icon { width: 22px; height: 22px; margin: 0; }
}

/* Kapitän in seiner Notiz gut erkennbar: 42 px mit Messingring, Text fließt daneben */
.msg-ephemeral { display: flow-root; }
.msg-ephemeral .msg-time { float: left; margin: 13px 8px 0 0; }
.msg-ephemeral .avatar-captain { float: left; width: 42px; height: 42px; margin: 0 10px 0 0; vertical-align: top;
  border-radius: 50%; object-fit: cover; background: #F6EBD3; box-shadow: 0 0 0 2px #B8893A, 0 1px 3px rgba(0, 0, 0, .45); }
.msg-ephemeral .msg-body { display: block; min-height: 42px; padding-top: 10px; }
@media (max-width: 860px) {
  /* Wache-Chip: gleiche Spezifität wie die Ton-Regeln (light/dark), daher hier nochmals */
  .chat[data-tone] .logbook-area .watch-box { background: rgba(42, 23, 18, .94); color: #F6EBD3; border-image: none; }
  .chat[data-tone] .watch-head, .chat[data-tone] .watch-head::before { color: #F6EBD3; background: none; text-shadow: 0 1px 1px #000; }
  .chat[data-tone] .watch-list, .chat[data-tone] .watch-list li { background: none; border: 0; }
  .chat[data-tone] .watch-list .watch-member, .chat[data-tone] .watch-list button { color: #F6EBD3; }
}
@media (max-width: 860px) {
  .chat[data-tone] .logbook-area .watch-box { min-width: 150px; }
  .chat[data-tone] .watch-list { margin: 0; padding: 0 10px 8px; max-height: 40vh; }
  .chat[data-tone] .watch-list li { margin: 0; padding: 3px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* Notiz: Breite = Textlänge (Float-Bild wird bei fit-content nicht voll mitgerechnet), begrenzt auf 760 px bzw. Bildschirm */
.msg-ephemeral { width: max-content; }
.msg-ephemeral { display: flex; align-items: flex-start; gap: 8px; }
.msg-ephemeral .msg-time { float: none; flex: none; margin: 13px 0 0; }
.msg-ephemeral .msg-body { flex: 0 1 auto; min-width: 0; }
/* Kapitäns-Notiz senkrecht symmetrisch: Bild und Text als Flex-Zeile mittig.
   Gemessen (Maßstab 0,3): Pergament beginnt 4,1 px unter der Oberkante (Rand 13 px), endet 4,5 px über der Unterkante (Rand 9 px)
   → Innenabstand 2 px oben / 6 px unten ergibt je ~11 px Pergament über und unter dem Kapitän. */
.msg-ephemeral { align-items: center; padding: 2px 10px 6px 4px; }
.msg-ephemeral .msg-time { margin: 0; }
.msg-ephemeral .msg-body { display: flex; align-items: center; gap: 10px; padding: 0; min-height: 0; }
.msg-ephemeral .avatar-captain { float: none; flex: none; margin: 0; }
.msg-ephemeral .note-text { min-width: 0; }

/* Rang-gesperrte Räume (Seekarte): sichtbar als Ziel, aber verschlossen */
#dlg-rooms .room-link.is-locked { opacity: .62; cursor: help; }
#dlg-rooms .room-link.is-locked:hover { background: rgba(120, 90, 50, .12); }
#dlg-rooms .room-link.is-locked .count { font-size: .75rem; font-style: italic; color: #6A5638; }

/* Mobil: Höhe = tatsächlich sichtbarer Bereich. Android-Chrome rechnet 100vh OHNE Adressleiste → die alte
   body-Regel min-height:100vh schob das Steuerpult unter die Browserleiste. */
body.is-chat { min-height: 0; height: 100vh; height: 100dvh; }
@supports not (height: 100dvh) { body.is-chat { height: -webkit-fill-available; } }
@media (max-width: 860px) {
  /* Melden/Löschen: auf dem Handy gibt es kein Hover – unsichtbare Knöpfe brachen sonst in eine leere Zeile um.
     Antippen einer Nachricht blendet sie ein. */
  .msg .msg-tools { display: none; }
  .msg.show-tools .msg-tools { display: inline-flex; visibility: visible; vertical-align: middle; }
}

/* Arrest (Frachtraum): Raumwechsel sichtbar gesperrt */
.chat.in-brig #btn-rooms, .chat.in-brig #btn-cabin { opacity: .45; cursor: not-allowed; }
.chat.in-brig .room-tab { cursor: default; }
.chat.in-brig #room-select { opacity: .6; }
.dialog .btn-brig { color: #8F1C13; border-color: rgba(143, 28, 19, .4); }

/* Maschinenraum: Rangverwaltung */
.rank-group summary { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; cursor: pointer; }
.rank-group .rank-badge { width: 28px; height: 28px; object-fit: contain; }
.rank-table input[type="text"], .rank-table input:not([type]) { width: 100%; min-width: 12rem; }
.rank-table input[type="number"] { width: 8rem; }
.rank-table td { vertical-align: middle; }
.rank-table tr.is-inactive td { opacity: .55; }
.rank-group form .btn { margin-top: var(--space-2); }

/* =====================================================================================
   STARTSEITE (body.is-home) – immer Nachthafen, unabhängig vom Farbschema.
   Maße: hero-harbor-v2.webp 1672×941, 16:9 (Schiff links/Mitte, rechts freier Himmel → Text rechts);
   logo-wordmark 900×263, Messingschild innen x 315–864, y 92–183 (→ 35 % / 4 % / 35 % / 30,4 %);
   frame-panel 1000×328, Slice 48, Leiste deckend von 5 bis 35 px → Bild ab 8/48 der Rahmenbreite;
   brass-button 500×109, Slice 55 → bei 52 px Höhe 26 px Kappe.
   ===================================================================================== */
body.is-home { background: #0A1724; color: #C9D6E2; }
.is-home main { overflow-x: clip; }
.is-home .footer { background: #08131F; border-top: 1px solid rgba(184, 137, 58, .3); color: #8FA3B5; }
.is-home .footer a { color: #A9BCCC; }
.home { --home-gold: #F1DDB0; --home-serif: Georgia, "Palatino Linotype", "Book Antiqua", "Times New Roman", serif; }
.home h2, .home h3, .home-claim { font-family: var(--home-serif); color: var(--home-gold); }
.home a { color: #7FD9E2; }
.home-eyebrow { margin: 0 0 6px; font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #D9A94E; }

/* Kopfbild */
.home-hero { position: relative; display: flex; align-items: center; min-height: clamp(540px, 48vw, 720px);
  padding: 48px max(24px, 4vw) 48px 20px;
  background: url(../img/hero-harbor-v2.webp) 28% 4% / cover no-repeat #0A1724; }
.home-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(270deg, rgba(6, 14, 24, .94) 0%, rgba(6, 14, 24, .84) 30%, rgba(6, 14, 24, .35) 42%, rgba(6, 14, 24, 0) 56%),
              linear-gradient(0deg, #0A1724 0%, rgba(10, 23, 36, 0) 18%); }
.home-hero-inner { width: min(480px, 40%); margin-left: auto; }
.home-plaque { container-type: inline-size; position: relative; width: min(440px, 100%); aspect-ratio: 900 / 263; margin: 0 0 18px -6px;
  background: url(../img/logo-wordmark.webp) center / 100% 100% no-repeat; font-size: 26px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .55)); }
.home-plaque span { position: absolute; inset: 35% 4% 30.4% 35%; display: flex; align-items: center; justify-content: center;
  font: 700 5.9cqw/1 var(--home-serif); letter-spacing: .05em; color: #3B2408; text-shadow: 0 1px 0 rgba(255, 244, 205, .75), 0 -1px 0 rgba(90, 55, 10, .35); }
.home-claim, .home-head h2, .home-final h2 { text-wrap: balance; }
.home-claim { margin: 0 0 12px; font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.12; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
.home-lead { margin: 0 0 22px; font-size: 1.12rem; line-height: 1.6; color: #DCE6EF; text-shadow: 0 1px 6px rgba(0, 0, 0, .7); }
.home-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.home .home-btn-brass { min-height: 52px; padding: 0 10px; background: none; border-radius: 0; border-style: solid; border-color: transparent; border-width: 0 26px;
  border-image: url(../img/chat/brass-button.webp) 0 55 fill / 0 26px stretch; color: #2A1712; font-size: 1.05rem; font-weight: 800;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .45); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .45)); }
.home .home-btn-brass:hover { background: none; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .45)) brightness(1.08); }
.home .home-btn-wood { min-height: 52px; padding: 0 22px; border: 1px solid #B8893A; border-radius: 6px; color: #F6E7C8; font-size: 1.05rem;
  background: linear-gradient(rgba(58, 28, 14, .72), rgba(42, 20, 10, .86)), url(../img/chat/wood-planks.webp) center / 256px;
  box-shadow: inset 0 0 0 1px rgba(255, 220, 160, .12), 0 4px 10px rgba(0, 0, 0, .35); }
.home .home-btn-wood:hover { color: #fff; filter: brightness(1.12); }
.home-online { display: flex; align-items: center; gap: 10px; margin: 20px 0 0; color: #B9C9D6; font-size: .95rem; }
.home-online-light { width: 10px; height: 10px; border-radius: 50%; background: #FFC65A; box-shadow: 0 0 0 3px rgba(255, 198, 90, .18), 0 0 12px 2px rgba(255, 190, 80, .7); }

/* Tau als Trenner */
.home-rope { height: 26px; background: url(../img/chat/rope-divider.webp) center / auto 100% repeat-x; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .5)); }

/* Abschnitte */
.home-section { max-width: 1160px; margin: 0 auto; padding: 64px 20px; }
.home-head { max-width: 720px; margin: 0 auto 36px; text-align: center; }
.home-head h2 { margin: 0 0 12px; font-size: clamp(1.7rem, 3vw, 2.3rem); }
.home-head p { margin: 0; line-height: 1.6; }

/* Deck-Rundgang: Deckbilder (3:1) im Messingrahmen */
.home-deck-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.home-deck { display: flex; flex-direction: column; padding: 12px; border: 1px solid rgba(184, 137, 58, .35); border-radius: 10px;
  background: linear-gradient(180deg, #13263A, #0D1C2B); box-shadow: 0 10px 24px rgba(0, 0, 0, .35); }
.home-deck:first-child { grid-column: 1 / -1; }
.home-frame { --fw: 18px; position: relative; aspect-ratio: 1600 / 533; }
.home-deck:first-child .home-frame { --fw: 24px; }
.home-frame img { position: absolute; inset: calc(var(--fw) * 8 / 48); width: calc(100% - var(--fw) * 16 / 48); height: calc(100% - var(--fw) * 16 / 48);
  max-width: none; object-fit: cover; }
.home-frame::after { content: ""; position: absolute; inset: 0; border: var(--fw) solid transparent;
  border-image: url(../img/chat/frame-panel.webp) 48 / var(--fw) stretch; pointer-events: none; }
.home-deck-body { padding: 16px 8px 6px; }
.home-deck h3 { margin: 0 0 6px; font-size: 1.45rem; }
.home-deck p { margin: 0 0 12px; line-height: 1.55; }
.home-rooms { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.home-rooms li { padding: 3px 11px; border: 1px solid rgba(95, 208, 218, .35); border-radius: 999px; background: rgba(14, 154, 167, .14); color: #CFEFF3; font-size: .9rem; }
.home-rooms li.is-locked { border-color: rgba(217, 169, 78, .5); background: rgba(184, 137, 58, .14); color: #EBD3A0; }
.home-rooms li.is-locked::before { content: "\1F512\00A0"; font-size: .8em; }
.home-rooms small { opacity: .8; }

/* Kapitän auf Pergament */
.home-captain-card { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: center; padding: 18px 26px;
  border: 16px solid transparent; border-image: url(../img/chat/frame-panel.webp) 48 / 16px stretch; color: #2A1E12;
  background: linear-gradient(rgba(251, 246, 234, .8), rgba(251, 246, 234, .8)), url(../img/chat/parchment-light.webp) center / 512px; background-clip: padding-box; }
.home-captain { padding-top: 12px; }
.home-captain-img { width: 220px; height: auto; filter: drop-shadow(0 8px 14px rgba(42, 30, 18, .45)); }
.home .home-captain-card h2 { margin: 0 0 10px; font-size: clamp(1.5rem, 2.6vw, 2rem); color: #4A2414; }
.home-captain-card .home-eyebrow { color: #8A5A1C; }
.home-captain-card p { margin: 0 0 14px; line-height: 1.6; }
.home-commands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; margin: 0; }
.home-commands div { display: flex; align-items: baseline; gap: 10px; }
.home-commands dt { flex: none; }
.home-commands dd { margin: 0; }
.home-commands code { display: inline-block; min-width: 6.2em; padding: 2px 8px; border-radius: 4px; background: #2A1712; color: #F6D58A; text-align: center; }

/* Ränge: 12 Gruppenabzeichen */
.home-rank-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.home-rank-list li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 8px 14px; text-align: center;
  border: 1px solid rgba(184, 137, 58, .25); border-radius: 10px; background: radial-gradient(circle at 50% 30%, rgba(184, 137, 58, .16), rgba(19, 38, 58, .6) 70%); }
.home-rank-list img { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); }
.home-rank-list strong { font-family: var(--home-serif); color: var(--home-gold); font-size: .98rem; line-height: 1.25; }
.home-rank-list span { font-size: .8rem; color: #93A8BA; }

/* Sicher an Bord */
.home-safe { padding-top: 24px; }
.home-safe-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.home-safe-grid article { padding: 24px; text-align: center; border: 1px solid rgba(184, 137, 58, .3); border-radius: 10px; background: linear-gradient(180deg, #13263A, #0D1C2B); }
.home-safe-grid img { width: 96px; height: 64px; object-fit: contain; }
.home-safe-grid h3 { margin: 10px 0 8px; font-size: 1.25rem; }
.home-safe-grid p { margin: 0; line-height: 1.55; }

/* Abschluss mit Laternen */
.home-final { display: flex; align-items: center; justify-content: center; gap: 40px; padding: 56px 20px;
  border-top: 1px solid rgba(184, 137, 58, .35);
  background: linear-gradient(rgba(6, 14, 24, .7), rgba(6, 14, 24, .88)), url(../img/decks/promenadendeck.webp) center 60% / cover; }
.home-final-inner { max-width: 560px; text-align: center; }
.home-final h2 { margin: 0 0 10px; font-size: clamp(1.7rem, 3vw, 2.3rem); }
.home-final p { margin: 0 0 22px; color: #DCE6EF; }
.home-final .home-actions { justify-content: center; }
.home-lantern { width: 74px; height: 200px; filter: drop-shadow(0 0 22px rgba(255, 180, 70, .55)); }

/* Startseite: Tablet/Handy */
@media (max-width: 960px) {
  .home-rank-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .home-captain-card { grid-template-columns: 160px minmax(0, 1fr); gap: 20px; }
  .home-captain-img { width: 160px; }
}
@media (max-width: 860px) {
  /* Bild oben vollständig (16:9 → 56,25 vw hoch), Text darunter auf Nachtblau */
  .home-hero { display: block; min-height: 0; padding: calc(56.25vw - 36px) 16px 36px;
    background: url(../img/hero-harbor-v2.webp) center top / 100% auto no-repeat #0A1724; }
  .home-hero::after { background: linear-gradient(180deg, rgba(10, 23, 36, 0) calc(56.25vw - 90px), #0A1724 56.25vw); }
  .home-hero-inner { width: auto; margin: 0; }
  .home-plaque { width: min(340px, 100%); margin: 0 auto 16px; }
  .home-hero .home-eyebrow, .home-claim { text-align: center; }
  .home-lead { font-size: 1.02rem; text-align: center; }
  .home-actions { justify-content: center; }
  .home-online { justify-content: center; }
  .home-section { padding: 44px 16px; }
  .home-deck-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .home-deck:first-child .home-frame, .home-frame { --fw: 14px; }
  .home-safe-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .home-final { gap: 12px; padding: 44px 16px; }
  .home-lantern { width: 44px; height: 119px; }

  /* Gäste-Kopfzeile: Textlinks statt Symbolkacheln */
  .mainnav-guest { gap: 6px; }
  .mainnav-guest a { width: auto; height: 36px; padding: 0 10px; font-size: .95rem; }
  .mainnav-guest a.btn { min-height: 36px; padding: 0 12px; }
}
@media (max-width: 600px) {
  .home-rank-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .home-captain-card { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 14px 12px; }
  .home-commands { grid-template-columns: minmax(0, 1fr); text-align: left; }
  .home-actions .btn { flex: 1 1 100%; }
  .home-lantern { display: none; }
  .mainnav-guest .nav-extra { display: none; }
}

/* Hinweise in Pergament-Fenstern: feste helle Farben, auch im dunklen Farbschema (dunkle Schrift bleibt lesbar) */
.dialog .alert { color: var(--ink); border-radius: 4px; }
.dialog .alert-info { background: rgba(14, 154, 167, .12); border-color: #0B7A84; }
.dialog .alert-success { background: rgba(24, 121, 78, .12); border-color: #18794E; }
.dialog .alert-error { background: rgba(180, 35, 24, .1); border-color: #B42318; }

/* Profilkarte: Steckbrief auf Pergament */
#dlg-user { width: min(440px, calc(100vw - 24px)); }
#dlg-user .profile-head { gap: 16px; padding-top: 14px; padding-bottom: 14px; }
#dlg-user .avatar-big { width: 96px; height: 96px; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .55)); }
#dlg-user .profile-head h2 { font-family: Georgia, "Times New Roman", serif; font-size: 1.45rem; letter-spacing: .01em; }
#dlg-user .rank-line { font-size: .98rem; }
#dlg-user .rank-line .rank-badge { width: 22px; height: 22px; }
.profile-status { position: relative; margin: 2px 0 4px; padding: 8px 14px 8px 30px; font-family: Georgia, "Times New Roman", serif; font-style: italic;
  color: #4A2414; background: rgba(184, 137, 58, .12); border-left: 3px solid #B8893A; border-radius: 0 4px 4px 0; }
.profile-status::before { content: "\201E"; position: absolute; left: 9px; top: -2px; font-size: 1.8rem; line-height: 1; color: #B8893A; }
.profile-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 4px 0 0; }
.profile-facts > div { padding: 7px 10px; border: 1px solid var(--paper-line); border-radius: 6px; background: rgba(255, 251, 242, .6); }
.profile-facts dt { margin: 0 0 1px; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8A5A1C; }
.profile-facts dd { margin: 0; color: var(--ink); font-weight: 600; }
.profile-progress { margin-top: 4px; }
.profile-progress p { margin: 0 0 5px; color: var(--ink-soft); }
.profile-progress-bar { height: 10px; border-radius: 999px; overflow: hidden; background: rgba(90, 60, 20, .15); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); }
.profile-progress-bar span { display: block; height: 100%; width: 2%; border-radius: 999px; background: linear-gradient(90deg, #8A5A1C, #E2B35A); }
.profile-bio h3 { margin-top: 8px; }
.profile-bio p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.profile-hint { margin: 2px 0 0; }
#dlg-user .dialog-actions { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--paper-line); }
#dlg-user .profile-friend { display: inline-block; margin: 6px 0 0; padding: 1px 10px; border: 1px solid rgba(226, 179, 90, .7); border-radius: 999px;
  background: rgba(184, 137, 58, .25); color: #F6E2B0; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-shadow: none; }
#dlg-user .profile-friend::before { content: "\2693\00A0"; }

/* =====================================================================================
   KAPITÄN-GRAFIKEN (img/captain/*): Figuren 720 px hoch freigestellt, Stimmungen 256×256, Szene 1400×876
   ===================================================================================== */
/* Notizen: rundes Stimmungsgesicht (Bullauge füllt das Quadrat) */
.msg-ephemeral .avatar-captain { border-radius: 0; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }

/* Beförderung: jubelnder Kapitän ragt links aus der Einblendung */
.rank-toast { position: relative; padding-left: 92px; overflow: visible; }
.toast-captain { position: absolute; left: 6px; bottom: 0; width: 82px; height: auto; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5));
  animation: captain-pop .5s ease-out; }
.toast-text { display: flex; flex-direction: column; line-height: 1.2; }
.toast-text small { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: #E2B35A; }
@keyframes captain-pop { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Fehlerseiten */
.error-page .error-art { width: auto; height: 240px; margin: 0 auto 8px; display: block; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .35)); }
.error-page .error-art-haengematte { width: min(380px, 100%); height: auto; }

/* Anmeldung: Szene im Messingrahmen (frame-panel, Bild ab 8/48 der Rahmenbreite) */
.auth-scene { --fw: 16px; position: relative; aspect-ratio: 1400 / 876; margin: 0 0 18px; }
.auth-scene img { position: absolute; inset: calc(var(--fw) * 8 / 48); width: calc(100% - var(--fw) * 16 / 48); height: calc(100% - var(--fw) * 16 / 48);
  max-width: none; object-fit: cover; }
.auth-scene::after { content: ""; position: absolute; inset: 0; border: var(--fw) solid transparent;
  border-image: url(../img/chat/frame-panel.webp) 48 / var(--fw) stretch; pointer-events: none; }

/* Registrierung: winkender Kapitän neben der Überschrift */
.auth-greet { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 10px; }
.auth-greet img { width: 104px; height: auto; flex: none; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .3)); }
.auth-greet h1 { margin-bottom: 6px; }
.auth-greet-say { margin: 0 0 6px; font-family: Georgia, "Times New Roman", serif; font-style: italic; color: var(--text-muted); }

/* Hilfe: Kapitän mit Seekarte */
.help-intro { display: flex; align-items: center; gap: 16px; margin: 0 0 14px; padding: 10px 14px; border: 1px solid rgba(184, 137, 58, .45);
  border-radius: 8px; background: rgba(184, 137, 58, .1); }
.help-intro img { width: 96px; height: auto; flex: none; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .3)); }
.help-intro p { margin: 0; font-family: Georgia, "Times New Roman", serif; font-style: italic; line-height: 1.5; }
@media (max-width: 600px) {
  .help-intro img { width: 70px; }
  .auth-greet img { width: 84px; }
  .error-page .error-art { height: 190px; }
}

/* =====================================================================================
   BORDREGELN (/regeln) – Nachthafen-Stil der Startseite (body.is-home + .home)
   Kopfbild decks/bruecke.webp 1600×533 (3:1), Regeln auf Pergament im frame-panel-Rahmen.
   ===================================================================================== */
.rules-hero { display: flex; align-items: center; justify-content: center; min-height: clamp(280px, 30vw, 420px); padding: 40px 20px; text-align: center;
  background: linear-gradient(180deg, rgba(6, 14, 24, .55) 0%, rgba(6, 14, 24, .7) 60%, #0A1724 100%),
              url(../img/decks/bruecke.webp) center 55% / cover no-repeat #0A1724; }
.rules-hero-inner { max-width: 720px; }
.rules-hero h1 { margin: 0 0 12px; font-family: var(--home-serif); font-size: clamp(2.3rem, 5vw, 3.4rem); color: var(--home-gold);
  text-shadow: 0 3px 14px rgba(0, 0, 0, .75); }
.rules-hero p:not(.home-eyebrow) { margin: 0; font-size: 1.12rem; line-height: 1.6; color: #E4ECF3; text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }

.rules-main { padding-bottom: 40px; }
.rules-captain { margin-bottom: 36px; }
.rules-captain .home-captain-img { width: 200px; }

/* Die sechs Regeln: Pergament-Bordordnung, Messing-Nummern */
.rules-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 34px; margin: 0; padding: 22px 30px; list-style: none; counter-reset: none;
  border: 18px solid transparent; border-image: url(../img/chat/frame-panel.webp) 48 / 18px stretch; color: #2A1E12;
  background: linear-gradient(rgba(251, 246, 234, .82), rgba(251, 246, 234, .82)), url(../img/chat/parchment-light.webp) center / 512px; background-clip: padding-box; }
.rules-list li { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; border-bottom: 1px dashed #C9B48A; }
.rules-list li:nth-last-child(-n+2) { border-bottom: 0; }
.rules-num { flex: none; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%;
  font: 700 1.35rem/1 var(--home-serif); color: #3B2408; text-shadow: 0 1px 0 rgba(255, 244, 205, .7);
  background: radial-gradient(circle at 35% 30%, #FFF0B8 0%, #E2B35A 38%, #A8752A 75%, #6E4518 100%);
  box-shadow: 0 0 0 2px #6E4518, 0 0 0 4px #D9A94E, 0 3px 6px rgba(42, 30, 18, .45); }
.home .rules-list h3 { margin: 2px 0 4px; font-size: 1.18rem; color: #4A2414; }
.rules-list p { margin: 0; line-height: 1.55; }

/* Stufenleiter bei Verstößen: Farbe wird von Türkis über Messing zu Rot ernster */
.rules-steps { padding-top: 24px; }
.rules-ladder { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 0 0 32px; padding: 0; list-style: none; counter-reset: step; }
.rules-ladder li { counter-increment: step; position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px 12px 14px;
  border: 1px solid rgba(184, 137, 58, .3); border-top: 4px solid var(--step); border-radius: 8px; background: linear-gradient(180deg, #13263A, #0D1C2B); }
.rules-ladder li::before { content: counter(step); font: 700 .8rem/1 var(--home-serif); color: var(--step); letter-spacing: .08em; }
.rules-ladder strong { font-family: var(--home-serif); color: var(--home-gold); font-size: 1.02rem; line-height: 1.25; }
.rules-ladder span { font-size: .85rem; line-height: 1.4; color: #A9BCCC; }
.rules-step-1 { --step: #5FD0DA; }
.rules-step-2 { --step: #9FD38A; }
.rules-step-3 { --step: #E2C35A; }
.rules-step-4 { --step: #E09A45; }
.rules-step-5 { --step: #E06A3E; }
.rules-step-6 { --step: #D6453A; }
.rules-cards img { width: 96px; height: 64px; object-fit: contain; }
.rules-draft { margin: 28px 0 0; text-align: center; font-size: .8rem; color: #6F8597; }

@media (max-width: 960px) {
  .rules-ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .rules-list { grid-template-columns: minmax(0, 1fr); padding: 10px 16px; border-width: 14px; border-image-width: 14px; }
  .rules-list li:nth-last-child(2) { border-bottom: 1px dashed #C9B48A; }
  .rules-captain .home-captain-img { width: 150px; }
}
@media (max-width: 600px) {
  .rules-ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rules-num { width: 40px; height: 40px; font-size: 1.15rem; }
}

/* =====================================================================================
   HILFE (/hilfe) – Nachthafen-Stil wie Bordregeln: Kopfbild decks/crewdeck.webp, Inhalt auf Pergamentbogen
   ===================================================================================== */
.rules-ladder li::before { font-family: var(--font); font-size: .78rem; font-weight: 800; }
.help-hero { background: linear-gradient(180deg, rgba(6, 14, 24, .55) 0%, rgba(6, 14, 24, .7) 60%, #0A1724 100%),
                         url(../img/decks/crewdeck.webp) center 50% / cover no-repeat #0A1724; }
.help-main { max-width: 980px; padding-top: 40px; }
.help-toc { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 26px; }
.home .help-toc a { padding: 6px 14px; border: 1px solid rgba(217, 169, 78, .5); border-radius: 999px; background: rgba(184, 137, 58, .12);
  color: #EBD3A0; font-size: .92rem; text-decoration: none; }
.home .help-toc a:hover { background: rgba(184, 137, 58, .28); color: #FFF4DC; }
.help-sheet { padding: 26px 34px 30px; color: #2A1E12; scroll-margin-top: 16px;
  border: 18px solid transparent; border-image: url(../img/chat/frame-panel.webp) 48 / 18px stretch;
  background: linear-gradient(rgba(251, 246, 234, .84), rgba(251, 246, 234, .84)), url(../img/chat/parchment-light.webp) center / 512px; background-clip: padding-box; }
.home .help-sheet h2 { margin: 30px 0 8px; padding-bottom: 4px; border-bottom: 1px solid #C9B48A; font-size: 1.4rem; color: #4A2414; scroll-margin-top: 20px; }
.help-sheet p, .help-sheet li { line-height: 1.6; }
.help-sheet ul { padding-left: 22px; margin: 6px 0; }
.help-sheet li { margin-bottom: 4px; }
.help-sheet code { background: rgba(184, 137, 58, .2); color: #4A2414; }
.home .help-sheet a { color: #7A3B12; }
.help-sheet .help-intro { background: rgba(184, 137, 58, .12); border-color: #C9B48A; }
.help-sheet .help-intro img { width: 120px; }
.help-sheet .help-intro p { font-size: 1.05rem; color: #4A2414; }
.help-sheet .help-emergency { margin: 14px 0 0; background: #FDECEA; border-color: #B42318; color: #5A1410; }
.home .help-sheet .help-emergency a { color: #B42318; font-weight: 700; }
@media (max-width: 860px) {
  .help-sheet { padding: 14px 16px 18px; border-width: 14px; border-image-width: 14px; }
  .help-sheet .help-intro img { width: 80px; }
  .home .help-sheet h2 { font-size: 1.22rem; }
}
@media (max-width: 600px) {
  .help-intro { flex-direction: column; text-align: center; gap: 8px; }
  .help-sheet .help-intro img { width: 90px; }
}

/* =====================================================================================
   ANMELDEN / REGISTRIEREN – Nachthafen: Deckbild als Kulisse, links Kapitän, rechts Pergament-Formular
   (Kopf aus wood-planks wie die Fenster, Rahmen frame-panel Slice 48, Messing-Knopf brass-button)
   ===================================================================================== */
.ship-auth { min-height: calc(100vh - 120px); display: flex; align-items: center; padding: 48px 20px;
  background: linear-gradient(180deg, rgba(6, 14, 24, .78), rgba(6, 14, 24, .9)), url(../img/decks/landungsbruecke.webp) center / cover no-repeat #0A1724; }
.ship-auth-register { background-image: linear-gradient(180deg, rgba(6, 14, 24, .78), rgba(6, 14, 24, .9)), url(../img/decks/promenadendeck.webp); }
.ship-auth-inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: center; width: 100%; max-width: 1100px; margin: 0 auto; }
.ship-auth-register .ship-auth-inner { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }

/* Bildseite */
.ship-auth-visual .auth-scene { --fw: 22px; margin: 0; filter: drop-shadow(0 14px 28px rgba(0, 0, 0, .55)); }
.ship-auth-quote { margin: 22px 8px 0; font-family: var(--home-serif); font-style: italic; font-size: 1.2rem; line-height: 1.55; color: #E8DCC0; text-align: center; }
.ship-auth-quote cite { display: block; margin-top: 6px; font-size: .9rem; font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: #D9A94E; }
.ship-auth-greet { display: flex; align-items: flex-end; gap: 6px; }
.ship-auth-greet img { width: 210px; height: auto; flex: none; filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .6)); }
.ship-auth-bubble { position: relative; margin: 0 0 150px; padding: 14px 18px; border: 1px solid #C9B48A; border-radius: 14px; color: #3B2408;
  font-family: var(--home-serif); font-style: italic; font-size: 1.1rem; line-height: 1.45;
  background: linear-gradient(rgba(251, 246, 234, .9), rgba(251, 246, 234, .9)), url(../img/chat/parchment-light.webp) center / 512px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .45); }
.ship-auth-bubble::before { content: ""; position: absolute; left: -9px; bottom: 22px; width: 16px; height: 16px; transform: rotate(45deg);
  background: #F6EEDC; border-left: 1px solid #C9B48A; border-bottom: 1px solid #C9B48A; }
.ship-auth-perks { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.ship-auth-perks li { padding: 10px 14px 10px 44px; position: relative; border: 1px solid rgba(184, 137, 58, .35); border-radius: 8px;
  background: rgba(13, 28, 43, .78); color: #C9D6E2; }
.ship-auth-perks li::before { content: "\2693"; position: absolute; left: 14px; top: 9px; color: #D9A94E; font-size: 1.1rem; }
.ship-auth-perks strong { color: var(--home-gold); font-family: var(--home-serif); }

/* Formular-Karte */
.ship-card { border: 18px solid transparent; border-image: url(../img/chat/frame-panel.webp) 48 / 18px stretch; color: #2A1E12;
  background: linear-gradient(rgba(251, 246, 234, .86), rgba(251, 246, 234, .86)), url(../img/chat/parchment-light.webp) center / 512px;
  background-clip: padding-box; filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .6)); }
.ship-card-head { margin: 0; padding: 14px 24px 12px; font-family: var(--home-serif); font-size: 1.6rem; color: #F6EBD3; text-shadow: 0 1px 2px #000;
  background: linear-gradient(rgba(58, 28, 14, .72), rgba(42, 20, 10, .82)), url(../img/chat/wood-planks.webp) center / 256px;
  border-bottom: 3px solid #B8893A; box-shadow: inset 0 -1px 0 #6E4528; }
.ship-card-body { padding: 18px 24px 22px; }
.ship-card .form { gap: 6px; }
.ship-card label { color: #2A1E12; font-weight: 700; font-size: .95rem; margin-top: 4px; }
.ship-card label small { font-weight: 400; color: #6A5638; }
.ship-card label.check { font-weight: 400; font-size: .92rem; margin-top: 6px; }
.ship-card input:not([type="checkbox"]) { background: #FFFBF2; color: #2A1E12; border: 1px solid #C9B48A; border-radius: 5px; min-height: 42px; }
.ship-card input:not([type="checkbox"]):focus { border-color: #B8893A; box-shadow: 0 0 0 3px rgba(184, 137, 58, .3); }
.ship-card input[aria-invalid="true"] { border-color: #B42318; }
.ship-card .field-error { color: #B42318; }
.ship-card .alert-error { background: #FDECEA; border-color: #B42318; color: #5A1410; }
.ship-card .alert-info { background: rgba(14, 154, 167, .12); border-color: #0B7A84; color: #2A1E12; }
.home .ship-card a { color: #7A3B12; }
.ship-card-note { margin: 0 0 10px; font-size: .9rem; color: #6A5638; }
.ship-card-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ship-card-row > div { display: flex; flex-direction: column; gap: 6px; }
.home .ship-card-submit { width: 100%; margin-top: 14px; }
.ship-card-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin: 16px 0 0; padding: 0; list-style: none; font-size: .9rem; }
.ship-card-switch { margin: 16px 0 0; padding-top: 14px; border-top: 1px dashed #C9B48A; text-align: center; color: #4A2414; }
.home .ship-card-switch a { font-weight: 700; }

@media (max-width: 900px) {
  .ship-auth { padding: 24px 12px 36px; align-items: flex-start; }
  .ship-auth-inner, .ship-auth-register .ship-auth-inner { grid-template-columns: minmax(0, 1fr); gap: 22px; max-width: 560px; }
  .ship-auth-visual .auth-scene { --fw: 14px; }
  .ship-auth-quote { margin-top: 14px; font-size: 1.02rem; }
  .ship-auth-greet { justify-content: center; }
  .ship-auth-greet img { width: 120px; }
  .ship-auth-bubble { margin-bottom: 70px; font-size: .98rem; }
  .ship-auth-perks { display: none; }
  .ship-card { border-width: 14px; border-image-width: 14px; }
  .ship-card-head { padding: 12px 16px 10px; font-size: 1.35rem; }
  .ship-card-body { padding: 14px 16px 18px; }
}
@media (max-width: 480px) {
  .ship-card-row { grid-template-columns: minmax(0, 1fr); }
  .ship-auth-login .ship-auth-quote { display: none; }
}

/* =====================================================================================
   KLEINE ANMELDE-SEITEN, FEHLERSEITE, IMPRESSUM/DATENSCHUTZ – Nachthafen
   ===================================================================================== */
.ship-auth-solo .ship-auth-inner { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
.ship-auth-bg-bruecke { background-image: linear-gradient(180deg, rgba(6, 14, 24, .78), rgba(6, 14, 24, .9)), url(../img/decks/bruecke.webp); }
.ship-card-head-face { display: flex; align-items: center; gap: 14px; padding-top: 10px; padding-bottom: 10px; }
.ship-card-head-face img { width: 64px; height: 64px; flex: none; margin: -2px 0; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .6)); }
.ship-card-head-face h1 { margin: 0; font: inherit; color: inherit; }
.ship-card-text { margin: 0 0 6px; line-height: 1.6; }
.ship-card .alert-success { background: rgba(24, 121, 78, .12); border-color: #18794E; color: #2A1E12; }
.ship-card .linklike { color: #7A3B12; text-decoration: underline; }
.ship-card .ship-code { font: 600 1.4rem/1 var(--font-mono); letter-spacing: .3em; text-align: center; }
@media (max-width: 900px) { .ship-card-head-face img { width: 52px; height: 52px; } }

/* Fehlerseite */
.ship-error { min-height: calc(100vh - 120px); display: flex; align-items: center; padding: 40px 20px;
  background: linear-gradient(180deg, rgba(6, 14, 24, .8), rgba(6, 14, 24, .92)), url(../img/decks/unterdeck.webp) center / cover no-repeat #0A1724; }
.ship-error-inner { display: flex; align-items: center; justify-content: center; gap: 40px; width: 100%; max-width: 980px; margin: 0 auto; }
.ship-error .error-art { flex: none; height: 320px; width: auto; margin: 0; filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .65)); }
.ship-error .error-art-haengematte { width: min(420px, 45vw); height: auto; }
.ship-error-text { max-width: 480px; }
.ship-error h1 { margin: 0 0 12px; font-family: var(--home-serif); font-size: clamp(2rem, 4vw, 2.8rem); color: var(--home-gold); text-shadow: 0 2px 10px rgba(0, 0, 0, .7); }
.ship-error-msg { margin: 0 0 22px; font-size: 1.1rem; color: #DCE6EF; }
.ship-error-id { margin: 22px 0 0; font-size: .8rem; color: #6F8597; }
.ship-error-id code { background: rgba(255, 255, 255, .06); color: #93A8BA; }
@media (max-width: 760px) {
  .ship-error-inner { flex-direction: column; gap: 18px; text-align: center; }
  .ship-error .error-art { height: 210px; }
  .ship-error .error-art-haengematte { width: min(320px, 90vw); height: auto; }
  .ship-error .home-actions { justify-content: center; }
}

/* Impressum / Datenschutz */
.legal-hero { min-height: clamp(220px, 22vw, 300px); }
.legal-hero-stadtdeck { background-image: linear-gradient(180deg, rgba(6, 14, 24, .55) 0%, rgba(6, 14, 24, .72) 60%, #0A1724 100%), url(../img/decks/stadtdeck.webp); }
.legal-hero-unterdeck { background-image: linear-gradient(180deg, rgba(6, 14, 24, .55) 0%, rgba(6, 14, 24, .72) 60%, #0A1724 100%), url(../img/decks/unterdeck.webp); }
.legal-sheet > :first-child { margin-top: 0; }
.help-sheet .alert-error { background: #FDECEA; border-color: #B42318; color: #5A1410; }
.help-sheet .alert-info { background: rgba(14, 154, 167, .12); border-color: #0B7A84; color: #2A1E12; }

/* =====================================================================================
   LOGBUCH (/logbuch) – Nachthafen: Crewdeck-Kulisse, Holz-Einband im Messingrahmen, Pergamentseiten (frame-panel 48)
   ===================================================================================== */
.lb { padding: 32px 16px 56px;
  background: linear-gradient(180deg, rgba(6, 14, 24, .82), rgba(6, 14, 24, .94)), url(../img/decks/crewdeck.webp) center top / cover fixed no-repeat #0A1724; }
.lb-inner { max-width: 1040px; margin: 0 auto; }

/* Einband */
.lb-cover { display: flex; align-items: center; gap: 26px; padding: 22px 30px; color: #F6EBD3;
  border: 20px solid transparent; border-image: url(../img/chat/frame-panel.webp) 48 / 20px stretch;
  background: linear-gradient(rgba(58, 28, 14, .66), rgba(36, 16, 8, .84)), url(../img/chat/wood-planks.webp) center / 256px; background-clip: padding-box;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .55)); }
.lb-avatar { width: 128px; height: 128px; flex: none; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .6)); }
.lb-cover-text { min-width: 0; flex: 1; }
.lb-cover-label { display: block; font-family: var(--home-serif); text-transform: uppercase; letter-spacing: .35em; font-size: .78rem; color: #D9A94E; }
.lb-cover h1 { margin: 4px 0 2px; font-family: var(--home-serif); font-size: clamp(1.9rem, 4.5vw, 2.8rem); color: #F3DFA8; text-shadow: 0 2px 6px rgba(0, 0, 0, .7);
  overflow-wrap: anywhere; }
.lb-cover-rank { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-family: var(--home-serif); font-style: italic; font-size: 1.1rem; color: #E8D3A0; }
.lb-cover-rank img { width: 28px; height: 28px; }
.lb-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.lb-stats li { display: flex; flex-direction: column; padding: 8px 12px; border: 1px solid rgba(217, 169, 78, .45); border-radius: 8px; background: rgba(10, 6, 3, .35); }
.lb-stats strong { font-family: var(--home-serif); font-size: 1.2rem; color: #F6E2B0; line-height: 1.2; }
.lb-stats span { font-size: .78rem; color: #CDB98F; }

/* Kapitel-Reiter */
.lb-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 22px 0 24px; }
.home .lb-tabs a { padding: 6px 14px; border: 1px solid rgba(217, 169, 78, .5); border-radius: 999px; background: rgba(184, 137, 58, .12);
  color: #EBD3A0; font-size: .92rem; text-decoration: none; }
.home .lb-tabs a:hover { background: rgba(184, 137, 58, .28); color: #FFF4DC; }
.lb-new { display: inline-block; min-width: 1.5em; padding: 0 5px; border-radius: 999px; background: #D6453A; color: #fff; font-size: .75rem; font-weight: 700; text-align: center; }

/* Seiten */
.lb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.lb-page { margin: 0 0 24px; padding: 18px 26px 22px; color: #2A1E12; scroll-margin-top: 16px;
  border: 18px solid transparent; border-image: url(../img/chat/frame-panel.webp) 48 / 18px stretch;
  background: linear-gradient(rgba(251, 246, 234, .86), rgba(251, 246, 234, .86)), url(../img/chat/parchment-light.webp) center / 512px; background-clip: padding-box;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .45)); }
.lb-grid > .lb-page { margin-bottom: 0; }
.lb-grid + .lb-grid, .lb-grid + .lb-page, .lb-page + .lb-grid { margin-top: 24px; }
.lb-grid + .lb-page { margin-top: 24px; }
.home .lb-page h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding-bottom: 6px; border-bottom: 1px solid #C9B48A;
  font-family: var(--home-serif); font-size: 1.35rem; color: #4A2414; }
.home .lb-page h3 { margin: 16px 0 6px; font-family: var(--home-serif); font-size: 1.05rem; color: #4A2414; }
.lb-icon { width: 28px; height: 28px; object-fit: contain; }
.lb-page p { line-height: 1.55; }
.home .lb-page a { color: #7A3B12; }
.lb-page label { color: #2A1E12; font-weight: 700; font-size: .95rem; }
.lb-page label small { font-weight: 400; color: #6A5638; }
.lb-page label.check { font-weight: 400; }
.lb-page input:not([type="checkbox"]), .lb-page textarea, .lb-page select { background: #FFFBF2; color: #2A1E12; border: 1px solid #C9B48A; border-radius: 5px; }
.lb-page input:not([type="checkbox"]):focus, .lb-page textarea:focus, .lb-page select:focus { border-color: #B8893A; box-shadow: 0 0 0 3px rgba(184, 137, 58, .3); }
.lb-page .form > .btn { align-self: flex-start; margin-top: 8px; }
.lb-page .btn:not(.btn-ghost):not(.btn-danger) { min-height: 42px; padding: 0 8px; background: none; border-radius: 0; border-style: solid; border-color: transparent;
  border-width: 0 21px; border-image: url(../img/chat/brass-button.webp) 0 55 fill / 0 21px stretch; color: #2A1712; font-weight: 800;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .45); }
.lb-page .btn:not(.btn-ghost):not(.btn-danger):hover { filter: brightness(1.08); }
.lb-page .btn.btn-small:not(.btn-ghost):not(.btn-danger) { min-height: 32px; border-width: 0 16px; border-image-width: 0 16px; }
.lb-page .btn-ghost { background: rgba(255, 251, 242, .6); color: #4A2414; border: 1px solid #8A6A3A; border-radius: 5px; }
.lb-page .btn-ghost:hover { background: rgba(184, 137, 58, .22); }
.lb-page .alert-info { background: rgba(14, 154, 167, .12); border-color: #0B7A84; color: #2A1E12; }
.lb-list { list-style: none; margin: 0; padding: 0; }
.lb-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dashed #C9B48A; }
.lb-list li:last-child { border-bottom: 0; }
.lb-list li > span:first-child { min-width: 0; }
.lb-sub { display: block; color: #6A5638; font-size: .85rem; }
.lb-status { font-style: italic; }
.lb-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.lb-empty, .lb-hint { color: #6A5638; font-size: .9rem; }
.lb-roles { margin: 6px 0 0; font-size: .9rem; }
.lb-dot { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; vertical-align: 1px; }
.lb-dot.is-on { background: #18794E; box-shadow: 0 0 0 2px rgba(24, 121, 78, .25); }
.lb-dot.is-off { background: #B9AB8E; }
.lb-notices li { align-items: flex-start; }
.lb-notices li.is-new { padding-left: 12px; border-left: 3px solid #B8893A; background: rgba(184, 137, 58, .1); }
.lb-date { display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: .78rem; color: #8A5A1C; }

/* Rangbarometer */
.lb-rank { display: flex; align-items: center; gap: 16px; }
.lb-rank-badge { width: 84px; height: 84px; object-fit: contain; flex: none; filter: drop-shadow(0 4px 6px rgba(42, 30, 18, .45)); }
.lb-rank-title { margin: 0; font-family: var(--home-serif); font-size: 1.6rem; font-weight: 700; color: #4A2414; line-height: 1.2; }
.lb-rank-sub { margin: 2px 0 0; color: #6A5638; font-size: .92rem; }
.lb-meter { height: 12px; margin: 16px 0 8px; border: 0; background: rgba(90, 60, 20, .15); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); }
.lb-meter > span { background: linear-gradient(90deg, #8A5A1C, #E2B35A); }
.lb-rank-next { margin: 0 0 8px; }

/* Sicherheit / Konto */
.lb-grid-inner { gap: 30px; }
.lb-grid-inner h3:first-child { margin-top: 0; }
.lb-mfa { display: flex; align-items: center; gap: 12px; margin: 0; padding: 8px 12px; border-radius: 6px; border-left: 3px solid; }
.lb-mfa.is-on { background: rgba(24, 121, 78, .1); border-color: #18794E; }
.lb-mfa.is-off { background: rgba(214, 69, 58, .08); border-color: #D6453A; }
.lb-danger { margin-top: 10px; padding: 10px 14px; border: 1px solid rgba(180, 35, 24, .35); border-radius: 6px; background: rgba(180, 35, 24, .05); }
.lb-danger summary { cursor: pointer; font-weight: 700; color: #8F1C13; }

@media (max-width: 860px) {
  .lb { padding: 18px 10px 40px; background-attachment: scroll; }
  .lb-cover { flex-direction: column; text-align: center; gap: 12px; padding: 14px 14px; border-width: 14px; border-image-width: 14px; }
  .lb-avatar { width: 96px; height: 96px; }
  .lb-cover-rank { justify-content: center; }
  .lb-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lb-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .lb-grid + .lb-grid, .lb-grid + .lb-page, .lb-page + .lb-grid { margin-top: 18px; }
  .lb-page { padding: 12px 14px 16px; border-width: 14px; border-image-width: 14px; margin-bottom: 18px; }
  .lb-list li { flex-wrap: wrap; }
}
.lb-stats strong, .lb-cover-rank, .lb-rank-sub, .home h1, .home h2, .home h3 { font-variant-numeric: lining-nums; }

/* Fußzeile: Desktop eine Zeile (© links), Handy: Links oben gleichmäßig verteilt, © darunter */
.footer { align-items: center; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
.footer-copy { order: -1; }
@media (max-width: 600px) {
  .footer { flex-direction: column; gap: 10px; padding: 18px 12px 22px; }
  .footer-links { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-evenly; width: 100%; gap: 8px; }
  .footer-copy { order: 0; padding-top: 10px; width: 100%; text-align: center; border-top: 1px solid rgba(184, 137, 58, .22); }
}
@media (max-width: 360px) {
  .footer-links { grid-template-columns: repeat(2, auto); }
}

.ship-card .ship-remember { margin-top: 10px; font-weight: 600; }
.ship-card .ship-remember small { font-weight: 400; color: #6A5638; }
/* Tablet: Bild etwas höher und nach links verschoben, damit der Bug nicht unter dem Text liegt */
@media (min-width: 861px) and (max-width: 1180px) {
  .home-hero { min-height: 660px; background-position: 100% 4%; }
}

/* Startseite: Lämpchen „gerade an Bord“ pulsiert wie eine Laterne (bei reduzierter Bewegung durch die globale Regel aus) */
.home-online-light { animation: lamp-blink 1.6s ease-in-out infinite; }
@keyframes lamp-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 3px rgba(255, 198, 90, .18), 0 0 12px 2px rgba(255, 190, 80, .75); }
  50% { opacity: .35; box-shadow: 0 0 0 1px rgba(255, 198, 90, .06), 0 0 3px 0 rgba(255, 190, 80, .2); }
}

/* Holz-Gegenstück zum Messing-Knopf (chat/wood-button.webp 1006×212, runde Enden mit Nieten je 105 px → bei 52 px Höhe 26 px) */
.home .home-btn-wood { min-height: 52px; padding: 0 10px; background: none; border-radius: 0; border-style: solid; border-color: transparent; border-width: 0 26px;
  border-image: url(../img/chat/wood-button.webp) 0 105 fill / 0 26px stretch; color: #F6E7C8; font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .85); box-shadow: none; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .45)); }
.home .home-btn-wood:hover { color: #fff; background: none; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .45)) brightness(1.12); }

/* Startseite: drehendes Leuchtturm-Licht (Position per app.js, --s = Bildmaßstab). Ein Umlauf 8 s:
   0 % Strahl nach rechts übers Wasser → 25 % zeigt zum Betrachter (Aufblitzen) → 50 % nach links → 75 % hinter dem Turm (dunkel). */
.home-hero { overflow: hidden; }
.home-hero > .home-hero-inner { position: relative; z-index: 1; }
.lighthouse { --s: 1; position: absolute; width: 0; height: 0; z-index: 0; pointer-events: none; }
.lh-beam { position: absolute; left: 0; top: calc(var(--s) * -70px); width: calc(var(--s) * 1150px); height: calc(var(--s) * 140px);
  transform-origin: 0 50%; mix-blend-mode: screen; filter: blur(calc(var(--s) * 5px));
  background: linear-gradient(90deg, rgba(255, 240, 190, .85) 0%, rgba(255, 224, 150, .38) 30%, rgba(255, 210, 120, .12) 65%, rgba(255, 210, 120, 0) 100%);
  clip-path: polygon(0 44%, 100% 0, 100% 100%, 0 56%); animation: lh-sweep 8s linear infinite; }
.lh-glow { position: absolute; left: calc(var(--s) * -80px); top: calc(var(--s) * -80px); width: calc(var(--s) * 160px); height: calc(var(--s) * 160px);
  border-radius: 50%; mix-blend-mode: screen; animation: lh-flash 8s linear infinite;
  background: radial-gradient(circle, rgba(255, 250, 220, 1) 0%, rgba(255, 220, 130, .6) 28%, rgba(255, 200, 100, 0) 70%); }
@keyframes lh-sweep {
  0%    { transform: scaleX(1);    opacity: .8; }
  12.5% { transform: scaleX(.71);  opacity: .9; }
  25%   { transform: scaleX(.03);  opacity: 1; }
  37.5% { transform: scaleX(-.71); opacity: .8; }
  50%   { transform: scaleX(-1);   opacity: .6; }
  62.5% { transform: scaleX(-.71); opacity: .3; }
  75%   { transform: scaleX(-.03); opacity: .08; }
  87.5% { transform: scaleX(.71);  opacity: .45; }
  100%  { transform: scaleX(1);    opacity: .8; }
}
@keyframes lh-flash {
  0%, 100% { opacity: .45; transform: scale(1); }
  20%      { opacity: .8;  transform: scale(1.15); }
  25%      { opacity: 1;   transform: scale(1.6); }
  30%      { opacity: .8;  transform: scale(1.15); }
  50%      { opacity: .45; transform: scale(1); }
  75%      { opacity: .15; transform: scale(.8); }
}

/* Startseite: bewegtes Wasser. .hero-water liegt deckungsgleich auf dem Kopfbild (Position per app.js), zeigt dieselbe Grafik,
   beschnitten auf die Wasserfläche (Umriss im Bild 1672×941 per 1-%-Raster gemessen: Horizont 56,5 %, Bug 56–57 %, Rumpf-
   unterkante 63,8 %, Stegpfähle bis 34,2 %/66,2 %, Ecke bis 24,6 %/73,6 % über dem Poller, Stegkante bis 47,5 % unten) und wird per SVG-Filter #hc-water sanft gekräuselt. Darüber ziehen feine Lichtglitzer. */
.hero-water-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.hero-water { position: absolute; z-index: 0; pointer-events: none;
  background: url(../img/hero-harbor-v2.webp) 0 0 / 100% 100% no-repeat; filter: url(#hc-water);
  clip-path: polygon(57% 56.5%, 100% 56.5%, 100% 100%, 47.5% 100%, 38.6% 78%, 37.6% 73.6%, 24.6% 73.6%, 24.6% 66.2%,
    34.2% 66.2%, 34.2% 63.8%, 55.8% 63.8%, 55.9% 63%, 56.2% 60%, 56.6% 58%); }
.hero-water-glint { position: absolute; inset: 0; mix-blend-mode: screen; opacity: .5;
  background: repeating-linear-gradient(176deg, rgba(255, 220, 150, 0) 0 22px, rgba(255, 225, 160, .14) 23px, rgba(255, 220, 150, 0) 26px 48px);
  -webkit-mask-image: linear-gradient(180deg, transparent 56%, #000 66%); mask-image: linear-gradient(180deg, transparent 56%, #000 66%);
  animation: water-glint 9s linear infinite; }
@keyframes water-glint {
  from { background-position: 0 0; }
  to   { background-position: 0 96px; }
}
/* Reihenfolge im DOM: .hero-water vor .lighthouse – der Lichtkegel liegt damit über dem Wasser. */

/* Startseite: flackernde Birnchen der Lichterketten (.hero-bulbs deckungsgleich mit dem Kopfbild, Punkte per app.js) */
.hero-bulbs { --s: 1; position: absolute; z-index: 0; pointer-events: none; }
.hero-bulbs span { position: absolute; width: calc(var(--s) * 22px); height: calc(var(--s) * 22px); margin: calc(var(--s) * -11px) 0 0 calc(var(--s) * -11px);
  border-radius: 50%; mix-blend-mode: screen; opacity: .25;
  background: radial-gradient(circle, rgba(255, 250, 220, .95) 0%, rgba(255, 220, 130, .6) 22%, rgba(255, 190, 90, 0) 65%);
  animation: bulb-twinkle var(--t, 3s) ease-in-out var(--d, 0s) infinite; }
@keyframes bulb-twinkle {
  0%, 100% { opacity: .2;  transform: scale(.85); }
  45%      { opacity: .7;  transform: scale(1.08); }
  60%      { opacity: .45; transform: scale(.98); }
}

/* Seiten springen nicht mehr seitlich, wenn zwischen kurzen und langen Seiten (mit/ohne Bildlaufleiste) gewechselt wird */
html { scrollbar-gutter: stable; }
body.is-chat { scrollbar-gutter: auto; }

/* Maschinenraum: Rollen & Rechte */
.role-tag { display: inline-block; padding: 0 7px; border-radius: 999px; font-size: .72rem; font-weight: 700; line-height: 1.6; vertical-align: 1px; }
.role-tag-crew { background: rgba(184, 137, 58, .18); color: #8A5A1C; border: 1px solid rgba(184, 137, 58, .45); }
.role-table td { vertical-align: middle; }
.role-matrix th, .role-matrix td { text-align: center; }
.role-matrix td:first-child, .role-matrix th:first-child { text-align: left; min-width: 16rem; }
.role-matrix-col { vertical-align: bottom; height: 9.5rem; padding-bottom: 6px; }
.role-matrix-col span { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-size: .8rem; text-transform: none; }
.role-matrix-group th { text-align: left; background: var(--surface-muted); color: var(--text); font-size: .8rem; letter-spacing: .06em; }
.role-matrix-cell.is-on { color: #18794E; font-weight: 800; background: rgba(24, 121, 78, .08); }
.role-grid { align-items: start; }
.role-perms { margin: 10px 0 0; padding: 6px 12px 10px; border: 1px solid var(--border); border-radius: 6px; }
.role-perms legend { padding: 0 6px; font-weight: 700; }
.role-perm { padding: 5px 0; border-bottom: 1px dashed var(--border); }
.role-perm:last-child { border-bottom: 0; }
.role-perm code { font-size: .78rem; color: var(--text-muted); }
.role-perm.is-locked { opacity: .7; }
.role-perm.is-on > span { font-weight: 600; }
.role-form > .btn { margin-top: 12px; align-self: flex-start; }
.role-members li { align-items: flex-start; }
.role-member-meta { display: block; }
.role-add { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border); }
.role-add h3 { margin-top: 0; }

/* Navigator-Bewerbung (Logbuch-Stil) */
.nav-cover .lb-avatar { width: auto; height: 150px; }
.nav-deadline { padding: 8px 12px; border-left: 3px solid #B8893A; background: rgba(184, 137, 58, .1); border-radius: 0 6px 6px 0; }
.nav-quiz { display: flex; flex-direction: column; gap: 14px; }
.nav-q { margin: 0; padding: 12px 16px 10px; border: 1px solid #C9B48A; border-radius: 8px; background: rgba(255, 251, 242, .55); }
.nav-q legend { display: flex; gap: 10px; align-items: baseline; padding: 0 6px; font-weight: 700; color: #4A2414; line-height: 1.45; }
.nav-q-num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFF0B8, #E2B35A 45%, #8A5A1C); color: #3B2408; font-family: Georgia, serif; font-size: .95rem; }
.nav-a { padding: 5px 4px; border-radius: 5px; font-weight: 400 !important; }
.nav-a:hover { background: rgba(184, 137, 58, .12); }
.nav-quiz > .btn { align-self: flex-start; }
.nav-status { padding: 10px 14px; border-radius: 6px; border-left: 3px solid; }
.nav-status.is-ok { background: rgba(24, 121, 78, .1); border-color: #18794E; }
.nav-status.is-wait { background: rgba(184, 137, 58, .12); border-color: #B8893A; }
.nav-status.is-bad { background: rgba(214, 69, 58, .08); border-color: #D6453A; }
.nav-steps li { margin-bottom: 6px; line-height: 1.55; }
/* Maschinenraum */
tr.is-pending td { background: rgba(184, 137, 58, .1); font-weight: 600; }
.nav-review { padding-left: 22px; }
.nav-review li { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; border-bottom: 1px dashed var(--border); }
.nav-review li.is-ok span:first-of-type { color: #18794E; }
.nav-review li.is-bad span:first-of-type { color: var(--danger); }
.nav-pool { padding-left: 22px; }
.nav-pool > li { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.nav-pool > li.is-off { opacity: .55; }
.nav-pool ul { margin: 4px 0 0; padding-left: 16px; list-style: none; font-size: .9rem; }
.nav-pool li.is-correct { color: #18794E; font-weight: 700; }
.nav-edit-a { margin-top: 6px; }

/* Navigator-Test: Countdown, bleibt beim Scrollen oben stehen */
.nav-timer { position: sticky; top: 8px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0 0 12px;
  padding: 10px 16px; border: 2px solid #B8893A; border-radius: 10px; color: #F6EBD3;
  background: linear-gradient(rgba(58, 28, 14, .78), rgba(36, 16, 8, .9)), url(../img/chat/wood-planks.webp) center / 256px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35); }
.nav-timer-label { font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: #E2C98F; }
.nav-timer-clock { margin-left: auto; font: 700 1.7rem/1 var(--font-mono); font-variant-numeric: tabular-nums; color: #F6E2B0; text-shadow: 0 0 10px rgba(255, 200, 100, .45); }
.nav-timer-bar { flex: 1 0 100%; height: 6px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .12); }
.nav-timer-bar > span { display: block; height: 100%; width: 100%; border-radius: 999px; background: linear-gradient(90deg, #8A5A1C, #E2B35A); transition: width 1s linear; }
.nav-timer.is-warn { border-color: #E09A45; }
.nav-timer.is-warn .nav-timer-clock { color: #FFC173; }
.nav-timer.is-warn .nav-timer-bar > span { background: linear-gradient(90deg, #B5651D, #E09A45); }
.nav-timer.is-urgent { border-color: #D6453A; animation: timer-pulse 1s ease-in-out infinite; }
.nav-timer.is-urgent .nav-timer-clock { color: #FF8A7A; }
.nav-timer.is-urgent .nav-timer-bar > span { background: #D6453A; }
@keyframes timer-pulse { 50% { box-shadow: 0 0 0 4px rgba(214, 69, 58, .35), 0 6px 16px rgba(0, 0, 0, .35); } }

/* Fenster mit viel Inhalt: Holzkopf bleibt oben, Knopfleiste unten stehen; schmale Messing-Bildlaufleiste statt grauer Standardleiste */
.dialog { scrollbar-width: thin; scrollbar-color: #B8893A rgba(90, 60, 20, .12); overscroll-behavior: contain; }
.dialog::-webkit-scrollbar { width: 8px; }
.dialog::-webkit-scrollbar-track { background: rgba(90, 60, 20, .1); }
.dialog::-webkit-scrollbar-thumb { background: #B8893A; border-radius: 8px; }
.dialog > form > h2:first-child, .dialog > form > .dialog-head:first-child, .dialog > form > .profile-head:first-child {
  position: sticky; top: 0; z-index: 3; }
.dialog > form > .dialog-actions:last-child {
  position: sticky; bottom: -16px; z-index: 3; margin: 12px -18px -16px; padding: 10px 18px 14px;
  border-top: 1px dashed #C9B48A;
  background: linear-gradient(rgba(251, 246, 234, .94), rgba(251, 246, 234, .94)), url(../img/chat/parchment-light.webp) center / 512px; }
.dialog-help > form > .dialog-actions:last-child { position: static; margin: 10px 0 0; padding: 0; border: 0; background: none; }

/* =====================================================================================
   CHATHOCHZEIT – Hochzeitssaal, Zeremonie im Chat, Urkunde, Formular
   ===================================================================================== */
.chat[data-style="hochzeitssaal"] { --deck-accent: #E7A6B5; --logbook-bg: #1F0F16; --logbook-text: #F8E9EE; --brass-edge: #E6C27A;
  --deck-banner: linear-gradient(120deg, #2A0F1C, #7A2E4A 55%, #E6C27A); }
/* Bot-Bilder im Chat (alle Räume) */
.msg-bot-avatar { width: 26px; height: 26px; margin-right: 6px; vertical-align: -8px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4)); }
/* Zeremonie-Karten im Hochzeitssaal */
.chat[data-style="hochzeitssaal"] .msg-captain { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0; padding: 8px 12px 8px 8px;
  border: 1px solid rgba(230, 194, 122, .55); border-radius: 10px; background: linear-gradient(90deg, rgba(230, 194, 122, .16), rgba(231, 166, 181, .1));
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2); animation: wed-in .5s ease-out; }
.chat[data-style="hochzeitssaal"] .msg-captain .msg-time { order: 9; margin-left: auto; opacity: .6; }
.chat[data-style="hochzeitssaal"] .msg-captain .msg-bot-avatar { width: 46px; height: 46px; flex: none; margin: 0; }
.chat[data-style="hochzeitssaal"] .msg-captain .msg-body { flex: 1; font-size: 1.04em; line-height: 1.5; }
.chat[data-style="hochzeitssaal"] .msg-captain .msg-who { display: block; flex: none; }
.chat[data-style="hochzeitssaal"] .msg-bot-lotte { border-color: rgba(231, 166, 181, .7); }
.chat[data-style="hochzeitssaal"] .msg-bot-fiete { border-color: rgba(120, 180, 230, .6); }
.msg-ask-me { outline: 2px solid #E6C27A; outline-offset: 2px; animation: wed-ask 1.2s ease-in-out 3; }
@keyframes wed-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes wed-ask { 50% { box-shadow: 0 0 0 6px rgba(230, 194, 122, .35); } }
/* Urkunden-Karte im Chat */
.msg-wedding { display: block; padding: 6px 0; }
.wedding-card { display: flex; align-items: center; gap: 14px; max-width: 520px; margin: 4px auto; padding: 10px 14px; text-decoration: none;
  border: 2px solid #E6C27A; border-radius: 12px; color: #3B2408;
  background: linear-gradient(rgba(251, 246, 234, .92), rgba(251, 246, 234, .92)), url(../img/chat/parchment-light.webp) center / 512px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35); animation: wed-in .6s ease-out; }
.wedding-card:hover { filter: brightness(1.04); }
.wedding-card-img { width: 120px; height: auto; flex: none; }
.wedding-card-text { display: flex; flex-direction: column; gap: 2px; }
.wedding-card-text strong { font-family: Georgia, serif; font-size: 1.3rem; color: #7A2E4A; }
/* Rosenblätter, Konfetti, Herzen */
.wedding-rain { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.wedding-rain span { position: absolute; top: -40px; animation: wed-fall var(--t, 5s) linear var(--d, 0s) forwards; }
.wr-petal { width: 14px; height: 18px; border-radius: 70% 0 70% 0; background: radial-gradient(circle at 30% 30%, #FFE3EA, #E7A6B5 60%, #C76F88); opacity: .95; }
.wr-confetti { width: 8px; height: 12px; background: hsl(var(--h, 40), 80%, 60%); }
.wr-heart::before { content: "\2665"; color: #E05A7A; font-size: 18px; }
@keyframes wed-fall {
  0%   { transform: translate(0, 0) rotate(0); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translate(var(--x, 0), 110vh) rotate(var(--r, 360deg)); opacity: .2; }
}
/* Planke + Profilkarte */
.plank-ring { display: inline-flex; align-items: center; justify-content: center; width: 20px; font-size: 15px; }
#dlg-user .profile-married { margin: 6px 0 0; color: #F6E2B0; font-size: .85rem; font-weight: 600; text-shadow: none; }
#dlg-user .profile-married::before { content: "\1F48D\00A0"; }

/* Hochzeits-Verwaltung (/hochzeit) */
.wed-cover .lb-avatar { width: auto; height: 160px; }
.wed-crew li { flex-direction: row; align-items: center; gap: 10px; }
.wed-crew img { width: 48px; height: 48px; object-fit: contain; }
.wed-crew span { font-size: .9rem; color: #F6E2B0; line-height: 1.2; }
.wed-const { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 6px; padding: 10px 12px; border: 1px solid #C9B48A; border-radius: 8px; }
.wed-const legend { padding: 0 6px; font-weight: 700; color: #4A2414; }
.wed-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid #C9B48A; border-radius: 999px; background: #FFFBF2; cursor: pointer; }
.wed-chip:has(input:checked) { border-color: #B8893A; background: rgba(230, 194, 122, .3); font-weight: 700; }
.wed-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.wed-cols fieldset { margin: 0; padding: 10px 14px 14px; border: 1px solid #C9B48A; border-radius: 8px; display: flex; flex-direction: column; gap: 6px; }
.wed-cols legend { padding: 0 6px; font-weight: 700; color: #4A2414; font-family: Georgia, serif; font-size: 1.08rem; }
.wed-field { position: relative; }
.wed-field input { width: 100%; padding-right: 2.4rem; }
.wed-field small { display: block; margin-top: 2px; font-size: .8rem; }
.wed-field.is-ok input { border-color: #18794E !important; }
.wed-field.is-ok small { position: absolute; right: 10px; top: 9px; margin: 0; color: #18794E; font-weight: 800; font-size: 1rem; }
.wed-field.is-bad input { border-color: #B42318 !important; }
.wed-field.is-bad small { color: #B42318; }
.wed-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
.wed-start { margin-top: 18px; padding: 12px 16px; border: 1px dashed #C9B48A; border-radius: 8px; }
.wed-start.is-ready { border-style: solid; border-color: #18794E; background: rgba(24, 121, 78, .08); }
.lb-page .btn[disabled] { filter: grayscale(.8); opacity: .6; cursor: not-allowed; }
.lb-ring { font-size: 22px; display: inline-flex; width: 28px; justify-content: center; }
.lb-marriage-body { display: flex; gap: 18px; align-items: center; }
.lb-cert-thumb img { width: 200px; height: auto; filter: drop-shadow(0 6px 10px rgba(42, 30, 18, .35)); }
.lb-marriage-title { margin: 0; font-size: 1.15rem; }
@media (max-width: 760px) {
  .wed-cols { grid-template-columns: minmax(0, 1fr); }
  .lb-marriage-body { flex-direction: column; align-items: flex-start; }
}

/* Heiratsurkunde (Seite). Freie Pergamentfläche in urkunde.webp (1200×817) gemessen: x 22–78 %, y 25–78 % */
.cert-page { padding: 32px 14px 48px; background: radial-gradient(circle at 50% 30%, #3A1626, #0A1724 70%); }
.cert-wrap { max-width: 1000px; margin: 0 auto; }
.cert { container-type: inline-size; position: relative; aspect-ratio: 1200 / 817; background: url(../img/wedding/urkunde.webp) center / 100% 100% no-repeat;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .55)); }
.cert-text { position: absolute; inset: 25% 22% 22% 22%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.2cqw; text-align: center; color: #3B2408; font-family: Georgia, "Times New Roman", serif; }
.cert-text p { margin: 0; }
.cert-title { font-size: 5.2cqw; font-weight: 700; letter-spacing: .04em; color: #7A2E4A; text-shadow: 0 1px 0 rgba(255, 244, 205, .8); }
.cert-sub { font-size: 1.75cqw; font-style: italic; }
.cert-names { font-size: 3.9cqw; font-weight: 700; color: #4A2414; }
.cert-names em { font-weight: 400; color: #B8893A; margin: 0 .4em; }
.cert-witness { font-size: 1.55cqw; }
.cert-foot { margin-top: .6cqw !important; font-size: 1.3cqw; color: #6A5638; letter-spacing: .04em; }
.cert-ended { font-size: 1.5cqw; color: #8F1C13; font-weight: 700; }

/* Frachtraum (Arrest): Smilies, Raumwechsel und Handlungen ausgeblenden – nur noch schreiben */
.chat.in-brig #btn-smilies, .chat.in-brig #smiley-pop, .chat.in-brig .action-bar { display: none !important; }

/* Hochzeit: Ruhe während der Zeremonie – Eingabe gesperrt, Hinweis gut sichtbar */
.chat.is-silence .composer textarea::placeholder { color: #E6C27A; font-style: italic; opacity: 1; }
.chat.is-silence .composer { box-shadow: inset 0 0 0 2px rgba(230, 194, 122, .5); border-radius: 8px; }
.chat.is-silence .action-bar #action-go, .chat.is-silence #btn-smilies { opacity: .45; pointer-events: none; }

/* Registrierung: Live-Prüfung des Nicknamens */
.nick-status { display: block; min-height: 1.2em; margin-top: -2px; font-size: .85rem; font-weight: 600; }
.nick-status.is-wait { color: #6A5638; font-weight: 400; }
.nick-status.is-ok { color: #18794E; }
.nick-status.is-bad { color: #B42318; }
.ship-card input[aria-invalid="true"][data-nick-check] { border-color: #B42318; }

/* Einspruch-Seite: Kulisse Brücke, Kapitän etwas schmaler (Figur mit verschränkten Armen) */
.ship-auth-appeal { background-image: linear-gradient(180deg, rgba(6, 14, 24, .78), rgba(6, 14, 24, .9)), url(../img/decks/bruecke.webp); }
.ship-auth-appeal .ship-auth-greet img { width: 190px; }
.ship-card textarea, .ship-card select { background: #FFFBF2; color: #2A1E12; border: 1px solid #C9B48A; border-radius: 5px; }

/* =====================================================================================
   CHATHINTERGRÜNDE je Raum (img/chat/bg/<stil>.webp, 512² nahtlos, Flecken ausgeglichen).
   Lesbarkeitsschicht: helle Räume Pergament-Schleier, dunkle Räume Schwarz-Schleier – je Bild abgestimmt.
   ===================================================================================== */
.chat[data-style] .logbook-area { background-size: auto, 512px 512px; background-blend-mode: normal, normal; }
.chat[data-style="willkommen"] .logbook-area     { background-image: linear-gradient(rgba(251, 246, 234, .35), rgba(251, 246, 234, .35)), url(../img/chat/bg/willkommen.webp); }
.chat[data-style="plauderecke"] .logbook-area    { background-image: linear-gradient(rgba(255, 248, 236, .62), rgba(255, 248, 236, .62)), url(../img/chat/bg/plauderecke.webp); }
.chat[data-style="hamburg"] .logbook-area        { background-image: linear-gradient(rgba(250, 244, 240, .72), rgba(250, 244, 240, .72)), url(../img/chat/bg/hamburg.webp); }
.chat[data-style="koeln"] .logbook-area          { background-image: linear-gradient(rgba(246, 250, 252, .55), rgba(246, 250, 252, .55)), url(../img/chat/bg/koeln.webp); }
.chat[data-style="muenchen"] .logbook-area       { background-image: linear-gradient(rgba(248, 251, 254, .62), rgba(248, 251, 254, .62)), url(../img/chat/bg/muenchen.webp); }
.chat[data-style="spiele-quiz"] .logbook-area    { background-image: linear-gradient(rgba(246, 251, 244, .62), rgba(246, 251, 244, .62)), url(../img/chat/bg/spiele-quiz.webp); }
.chat[data-style="ankuendigungen"] .logbook-area { background-image: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), url(../img/chat/bg/ankuendigungen.webp); }
.chat[data-style="hafenkneipe"] .logbook-area    { background-image: linear-gradient(rgba(10, 6, 3, .58), rgba(10, 6, 3, .58)), url(../img/chat/bg/hafenkneipe.webp); }
.chat[data-style="ballsaal"] .logbook-area       { background-image: linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .25)), url(../img/chat/bg/ballsaal.webp); }
.chat[data-style="berlin"] .logbook-area         { background-image: linear-gradient(rgba(5, 8, 16, .62), rgba(5, 8, 16, .62)), url(../img/chat/bg/berlin.webp); }
.chat[data-style="musik"] .logbook-area          { background-image: linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .25)), url(../img/chat/bg/musik.webp); }
.chat[data-style="technik"] .logbook-area        { background-image: linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .25)), url(../img/chat/bg/technik.webp); }
.chat[data-style="crew"] .logbook-area           { background-image: linear-gradient(rgba(0, 0, 0, .15), rgba(0, 0, 0, .15)), url(../img/chat/bg/crew.webp); }
.chat[data-style="frachtraum"] .logbook-area     { background-image: linear-gradient(rgba(6, 4, 2, .35), rgba(6, 4, 2, .35)), url(../img/chat/bg/frachtraum.webp); }
.chat[data-style="kabine"] .logbook-area         { background-image: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), url(../img/chat/bg/kabine.webp); }
.chat[data-style="hochzeitssaal"] .logbook-area  { background-image: linear-gradient(rgba(20, 4, 10, .35), rgba(20, 4, 10, .35)), url(../img/chat/bg/hochzeitssaal.webp); }

/* =====================================================================================
   HOCHZEITSSAAL – festliche linke Spalte
   wedding/plank.webp 1000×151: verzierte Enden je 150 px (Rosen + Niete, gemessen) → bei Plankenhöhe ~38 px = 38 px Kappe.
   wedding/ornament.webp 900×94 (Zierleiste über den Planken), wedding/side.webp 512² (Damast, nahtlos).
   ===================================================================================== */
.chat[data-style="hochzeitssaal"] .panel-side { background: linear-gradient(rgba(20, 4, 10, .25), rgba(20, 4, 10, .25)), url(../img/wedding/side.webp) 0 0 / 384px 384px;
  border-radius: 8px; padding: 6px; box-shadow: inset 0 0 0 2px rgba(230, 194, 122, .55); }
.chat[data-style="hochzeitssaal"] .crew-box,
.chat[data-style="hochzeitssaal"] .panel-side .rankbar { background: linear-gradient(rgba(30, 6, 16, .62), rgba(30, 6, 16, .72)), url(../img/wedding/side.webp) 0 0 / 384px 384px; }
.chat[data-style="hochzeitssaal"] .crew-box { border-color: #E6C27A; }
.chat[data-style="hochzeitssaal"] .crew-title { background: linear-gradient(rgba(122, 46, 74, .85), rgba(74, 20, 40, .9)); border-bottom-color: #E6C27A; }
.chat[data-style="hochzeitssaal"] .plank-menu::before { height: 26px; margin: 0 0 4px;
  background: url(../img/wedding/ornament.webp) center / contain no-repeat; }
.chat[data-style="hochzeitssaal"] .plank { border-width: 0 38px; border-image: url(../img/wedding/plank.webp) 0 150 fill / 0 38px stretch;
  padding: 10px 0; color: #FFF6E8; text-shadow: 0 1px 2px rgba(60, 10, 25, .95), 0 0 2px rgba(0, 0, 0, .8); }
.chat[data-style="hochzeitssaal"] .plank::before { inset: 0 -38px; }
.chat[data-style="hochzeitssaal"] { --plank-shade: transparent; }
.chat[data-style="hochzeitssaal"] .plank:hover::before { background: rgba(255, 220, 230, .14); }
.chat[data-style="hochzeitssaal"] .plank-menu::before { display: block; }
@media (max-height: 820px) and (min-width: 861px) {
  .chat[data-style="hochzeitssaal"] .plank { padding: 5px 0; }
  .chat[data-style="hochzeitssaal"] .plank-menu::before { height: 20px; margin: 0 0 2px; }
}

/* Hochzeit: während der Zeremonie steht unten rechts der Kapitän am Pult statt der Raum-Deko */
.chat.is-ceremony .room-deco { display: block !important; background-image: url(../img/captain/pult.webp) !important;
  background-size: auto min(62%, 320px); background-position: right 20px bottom 0; opacity: 1; animation: wed-in .8s ease-out; }
@media (max-width: 860px) { .chat.is-ceremony .room-deco { background-size: auto min(40%, 180px); opacity: .75; } }

/* Hochzeitssaal: Countdown bis zur Trauung, klebt oben über den Nachrichten */
.wedding-countdown { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; gap: 14px; margin: 8px 250px 0 14px;
  padding: 10px 16px; border: 2px solid #E6C27A; border-radius: 12px; color: #FFF6E8;
  background: linear-gradient(rgba(74, 20, 40, .92), rgba(42, 10, 24, .94)), url(../img/wedding/side.webp) 0 0 / 256px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 230, 200, .15); animation: wed-in .6s ease-out; }
.wedding-countdown-img { width: 52px; height: 52px; flex: none; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); }
.wedding-countdown-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.wedding-countdown-label { font-family: Georgia, serif; font-size: 1rem; color: #F6E2B0; }
.wedding-countdown-clock { font: 700 2rem/1.1 var(--font-mono); font-variant-numeric: tabular-nums; color: #FFE7A8; text-shadow: 0 0 12px rgba(255, 200, 100, .45); }
.wedding-countdown-hint { color: #E8CFD8; font-size: .8rem; }
.wedding-countdown.is-soon { animation: wed-ask 1.4s ease-in-out infinite; }
@media (max-width: 860px) { .wedding-countdown { margin: 6px 8px 0; } .wedding-countdown-clock { font-size: 1.6rem; } }

/* Countdown-Karte: schwebt oben mittig über den Nachrichten (der Bereich ist ein Flex-Container – nicht mitstrecken lassen) */
.logbook-area > .wedding-countdown { position: absolute; top: 12px; left: 14px; right: 262px; height: auto; max-width: 560px;
  margin: 0 auto; align-self: flex-start; }
.chat.has-countdown .messages { padding-top: 112px; }
@media (max-width: 860px) {
  .logbook-area > .wedding-countdown { left: 8px; right: 8px; top: 8px; }
  .chat.has-countdown .messages { padding-top: 100px; }
}

/* =====================================================================================
   MASCHINENRAUM – Gerüst: links Seitenleiste (Holz/Messing, nach Bereichen), rechts Inhalt auf hellem Pergament.
   Alle Admin-Seiten nutzen <section class="container admin"> + Partial admin/_nav → kein Umbau der einzelnen Seiten nötig.
   Farben werden im Maschinenraum fest hell gesetzt (auch im dunklen Farbschema), damit Tabellen und Formulare gut lesbar sind.
   ===================================================================================== */
body:has(> main > .admin) { background: linear-gradient(rgba(246, 238, 220, .88), rgba(246, 238, 220, .92)), url(../img/chat/parchment-light.webp) 0 0 / 512px; }
.admin {
  --surface: #FFFDF8; --surface-muted: #F5ECD9; --bg: #F6EEDC; --text: #2A1E12; --text-muted: #6A5638; --border: #DCCBA6;
  --info-soft: #E6F2F3; --danger-soft: #FBE9E6; --success-soft: #E5F2E9; --brass-soft: #F3E3BF;
  color: var(--text); max-width: 1320px; display: grid; grid-template-columns: 250px minmax(0, 1fr); column-gap: 28px; align-items: start;
  padding-top: 22px; }
.admin > :not(.adm-side) { grid-column: 2; min-width: 0; }
.admin > .adm-side { grid-column: 1; grid-row: 1 / span 40; position: sticky; top: 14px; }
.admin > h1 { margin: 4px 0 14px; font-family: Georgia, "Times New Roman", serif; font-size: 2rem; color: #4A2414;
  padding-bottom: 8px; border-bottom: 2px solid #C9A15A; }
.admin > h1 small, .admin > h1 .muted { font-size: .55em; font-weight: 400; color: var(--text-muted); }
.admin a { color: #7A3B12; }
.admin code { background: rgba(184, 137, 58, .16); color: #4A2414; }

/* Seitenleiste */
.adm-side { display: flex; flex-direction: column; gap: 6px; padding: 14px 10px 12px; color: #F6EBD3;
  border: 14px solid transparent; border-image: url(../img/chat/frame-panel.webp) 48 / 14px stretch;
  background: linear-gradient(rgba(42, 20, 10, .78), rgba(30, 14, 7, .9)), url(../img/chat/wood-planks.webp) center / 256px; background-clip: padding-box;
  box-shadow: 0 10px 24px rgba(42, 30, 18, .3); }
.adm-side-head { display: flex; align-items: center; gap: 10px; padding: 0 4px 10px; border-bottom: 1px solid rgba(217, 169, 78, .4); }
.adm-side-head img { width: 34px; height: 34px; }
.adm-side-head div { display: flex; flex-direction: column; min-width: 0; }
.adm-side-head strong { font-family: Georgia, serif; font-size: 1.1rem; color: #F3DFA8; }
.adm-side-head small { color: #CDB98F; font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-nav { display: flex; flex-direction: column; gap: 2px; }
.adm-nav-group { margin: 12px 6px 4px; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #D9A94E; }
.adm-side .adm-nav a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 6px; color: #F1E3C6; text-decoration: none; font-size: .95rem; }
.adm-nav a img { width: 20px; height: 20px; flex: none; opacity: .9; }
.adm-nav a span { flex: 1; min-width: 0; }
.adm-side .adm-nav a:hover { background: rgba(255, 220, 160, .1); color: #fff; }
.adm-side .adm-nav a.is-active { background: linear-gradient(90deg, rgba(226, 179, 90, .35), rgba(226, 179, 90, .12)); color: #FFF4DC;
  box-shadow: inset 3px 0 0 #E2B35A; font-weight: 700; }
.adm-badge { min-width: 1.6em; padding: 1px 7px; border-radius: 999px; background: #D6453A; color: #fff; font-size: .75rem; text-align: center; }
.adm-side .adm-back { margin-top: 10px; padding: 8px 10px 0; border-top: 1px solid rgba(217, 169, 78, .3); color: #E2C98F; font-size: .88rem; text-decoration: none; }
.adm-side .adm-back:hover { color: #fff; }

/* Karten, Überschriften */
.admin .card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 4px 14px rgba(74, 46, 26, .1); padding: 18px 20px; }
.admin .card h2, .adm-h2 { font-family: Georgia, "Times New Roman", serif; color: #4A2414; font-size: 1.3rem; }
.admin .card h2 { margin: 0 0 12px; padding-bottom: 6px; border-bottom: 1px solid #E5D5B0; }
.admin .card h3 { color: #4A2414; font-family: Georgia, serif; }
.admin details.card > summary { cursor: pointer; }
.adm-h2 { margin: 6px 0 10px; }
.adm-h2 small { font-size: .7em; font-family: var(--font); font-weight: 400; color: var(--text-muted); }
.adm-block { margin-bottom: 22px; }

/* Tabellen */
.admin .table { background: var(--surface); border-radius: 10px; overflow: hidden; box-shadow: 0 2px 10px rgba(74, 46, 26, .08); }
.admin .table th { background: linear-gradient(#5A3520, #3E2314); color: #F3DFA8; border-bottom: 2px solid #C9A15A; font-size: .75rem; letter-spacing: .08em; }
.admin .table th a { color: #F3DFA8; }
.admin .table td { border-bottom: 1px solid #EFE3C8; }
.admin .table tbody tr:nth-child(even) td { background: rgba(245, 236, 217, .5); }
.admin .table tbody tr:hover td { background: rgba(226, 179, 90, .14); }
.admin .table-wrap { margin-bottom: 18px; border-radius: 10px; }

/* Formulare und Knöpfe */
.admin input:not([type="checkbox"]):not([type="radio"]), .admin select, .admin textarea { background: #FFFDF8; color: var(--text); border: 1px solid #D3BF94; border-radius: 6px; }
.admin input:focus, .admin select:focus, .admin textarea:focus { border-color: #B8893A; box-shadow: 0 0 0 3px rgba(184, 137, 58, .25); outline: none; }
.admin fieldset { border: 1px solid var(--border); border-radius: 8px; background: rgba(245, 236, 217, .35); }
.admin legend { font-weight: 700; color: #4A2414; padding: 0 6px; }
.admin .btn:not(.btn-ghost):not(.btn-danger):not(.btn-small) { min-height: 42px; padding: 0 10px; background: none; border-radius: 0; border-style: solid; border-color: transparent;
  border-width: 0 21px; border-image: url(../img/chat/brass-button.webp) 0 55 fill / 0 21px stretch; color: #2A1712; font-weight: 800;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .45); }
.admin .btn:not(.btn-ghost):not(.btn-danger):not(.btn-small):hover { filter: brightness(1.08); }
.admin .btn.btn-small:not(.btn-ghost):not(.btn-danger) { background: #8A5A1C; border-color: #6E4518; color: #FFF4DC; }
.admin .btn-ghost { background: #FFFDF8; color: #4A2414; border: 1px solid #B8893A; }
.admin .btn-ghost:hover { background: rgba(184, 137, 58, .16); }
.admin .form > .btn, .admin .form > button { align-self: flex-start; }
.admin .alert-info { background: var(--info-soft); border-color: #0B7A84; color: var(--text); }
.admin .alert-error { background: var(--danger-soft); border-color: #B42318; color: #5A1410; }
.admin .alert-success { background: var(--success-soft); border-color: #18794E; color: var(--text); }
.admin .searchbar { display: flex; gap: 10px; margin-bottom: 16px; }
.admin .searchbar input { flex: 1; }

/* Übersicht: Aufgaben */
.adm-todo { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.adm-todo-item { display: grid; grid-template-columns: 34px auto 1fr; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 10px;
  text-decoration: none; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 3px 10px rgba(74, 46, 26, .08); color: var(--text); }
.admin .adm-todo-item { color: var(--text); }
.adm-todo-item img { width: 34px; height: 34px; object-fit: contain; }
.adm-todo-n { font: 700 2rem/1 Georgia, serif; color: #4A2414; }
.adm-todo-label { display: flex; flex-direction: column; font-weight: 700; }
.adm-todo-label small { font-weight: 400; color: var(--text-muted); font-size: .8rem; }
.adm-todo-item.is-open { border-left: 5px solid #E2B35A; }
.adm-todo-item.is-alert { border-left-color: #D6453A; background: #FFF6F3; }
.adm-todo-item.is-alert .adm-todo-n { color: #B42318; }
.adm-todo-item.is-clear { opacity: .7; }
.adm-todo-item.is-clear .adm-todo-n { color: #18794E; }
.adm-todo-item:hover { box-shadow: 0 6px 16px rgba(74, 46, 26, .16); transform: translateY(-1px); }

/* Übersicht: Lage an Bord */
.adm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.adm-stat { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 10px; color: #F6EBD3; text-decoration: none;
  background: linear-gradient(rgba(22, 50, 79, .95), rgba(14, 34, 54, .97)); border: 1px solid rgba(201, 161, 90, .55); }
.adm-stat b { font: 700 1.6rem/1.1 Georgia, serif; color: #F3DFA8; }
.adm-stat span { font-size: .82rem; color: #C9D6E2; }
.adm-stat.is-ok { border-color: rgba(24, 121, 78, .8); }
.adm-stat.is-alert { background: linear-gradient(#7A1F18, #561410); border-color: #E06A3E; }
.adm-stat-wedding { background: linear-gradient(rgba(122, 46, 74, .95), rgba(74, 20, 40, .97)); border-color: #E6C27A; }
.adm-stat-wedding span { color: #F6E2B0; }

/* Übersicht: Einstellungen zweispaltig */
.adm-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.adm-settings fieldset { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 10px 14px 14px; }
.adm-settings .adm-span { grid-column: 1 / -1; }
.adm-system { margin: 10px 0 0; font-size: .8rem; color: var(--text-muted); text-align: right; }

/* Handy/Tablet: Seitenleiste oben als waagerechte Leiste */
@media (max-width: 960px) {
  .admin { grid-template-columns: minmax(0, 1fr); }
  .admin > :not(.adm-side) { grid-column: 1; }
  .admin > .adm-side { grid-row: auto; position: static; order: -1; padding: 8px; border-width: 10px; border-image-width: 10px; }
  .adm-side-head { display: none; }
  .adm-nav { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 4px; scrollbar-width: thin; }
  .adm-nav-group { display: none; }
  .adm-side .adm-nav a { flex: none; white-space: nowrap; padding: 6px 10px; }
  .adm-side .adm-back { display: none; }
  .adm-settings { grid-template-columns: minmax(0, 1fr); }
  .admin > h1 { font-size: 1.5rem; }
}

.adm-stat.is-ok b, .adm-stat.is-alert b { font-size: 1.15rem; white-space: nowrap; }

/* Private Kabine: Stilauswahl mit Vorschau */
.cabin-style-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 4px; }
.cabin-style { position: relative; display: flex; flex-direction: column; gap: 3px; cursor: pointer; font-weight: 400 !important; }
.cabin-style input { position: absolute; opacity: 0; pointer-events: none; }
.cabin-style-thumb { display: block; height: 52px; border-radius: 6px; overflow: hidden; border: 2px solid #D3BF94; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.cabin-style-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cabin-style-name { font-size: .78rem; line-height: 1.2; text-align: center; color: var(--ink); }
.cabin-style:hover .cabin-style-thumb { border-color: #B8893A; }
.cabin-style input:checked + .cabin-style-thumb { border-color: #B8893A; box-shadow: 0 0 0 3px rgba(184, 137, 58, .45); }
.cabin-style input:checked ~ .cabin-style-name { font-weight: 700; color: #4A2414; }
.cabin-style input:focus-visible + .cabin-style-thumb { outline: 2px solid #0E9AA7; outline-offset: 2px; }

.adm-legal { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 16px !important; }
.adm-legal legend, .adm-legal p { grid-column: 1 / -1; }
.adm-legal label { grid-column: 1; align-self: center; font-weight: 600; }
.adm-legal input { grid-column: 2; }
.adm-legal input:required:placeholder-shown { border-color: #E09A45; }
@media (max-width: 960px) { .adm-legal { grid-template-columns: minmax(0, 1fr); } .adm-legal label, .adm-legal input { grid-column: 1; } }

/* Rechtstexte */
.legal-missing { color: #B42318; font-weight: 700; background: rgba(180, 35, 24, .08); padding: 0 4px; border-radius: 3px; }
.legal-toc { padding: 10px 14px; border-left: 3px solid #B8893A; background: rgba(184, 137, 58, .1); border-radius: 0 6px 6px 0; }
.legal-stand { margin-top: 26px; font-size: .85rem; color: #6A5638; }

/* =====================================================================================
   VERANSTALTUNGEN (/veranstaltungen) – Nachthafen
   ===================================================================================== */
.events-hero { background-image: linear-gradient(180deg, rgba(6, 14, 24, .55) 0%, rgba(6, 14, 24, .72) 60%, #0A1724 100%), url(../img/decks/promenadendeck.webp); }
.events-main { max-width: 980px; padding-top: 40px; }
.ev-empty { text-align: center; color: #C9D6E2; }
.ev-empty img { width: min(360px, 80%); height: auto; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .6)); }
.ev-list { display: flex; flex-direction: column; gap: 18px; }
.ev-card { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 16px 20px; color: #2A1E12;
  border: 14px solid transparent; border-image: url(../img/chat/frame-panel.webp) 48 / 14px stretch;
  background: linear-gradient(rgba(251, 246, 234, .9), rgba(251, 246, 234, .9)), url(../img/chat/parchment-light.webp) center / 512px; background-clip: padding-box;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .45)); scroll-margin-top: 20px; }
.ev-date { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: 8px; color: #F6EBD3; text-align: center;
  background: linear-gradient(rgba(58, 28, 14, .8), rgba(36, 16, 8, .9)), url(../img/chat/wood-planks.webp) center / 200px; border: 2px solid #B8893A; }
.ev-date strong { font: 700 2rem/1 Georgia, serif; color: #F3DFA8; }
.ev-date span { text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; color: #E2C98F; }
.ev-date small { margin-top: 4px; font-size: .78rem; color: #F6EBD3; }
.ev-kind { margin: 0 0 2px; font-size: .82rem; font-weight: 700; color: #8A5A1C; letter-spacing: .02em; }
.home .ev-body h2 { margin: 0 0 6px; font-family: Georgia, serif; font-size: 1.4rem; color: #4A2414; }
.ev-body p { margin: 0 0 6px; line-height: 1.5; }
.ev-meta { font-size: .85rem; color: #6A5638; }
.ev-live { color: #18794E; }
.ev-card.is-running { border-image-source: url(../img/chat/frame-panel.webp); box-shadow: none; }
.ev-card.is-running .ev-date { border-color: #18794E; }
.ev-actions form { margin: 0; }
.ev-boards { padding-top: 10px; }
.ev-board-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 900px; margin: 0 auto; }
.ev-board h3 { margin: 0 0 10px; font-family: Georgia, serif; color: #4A2414; }
.ev-board ol { list-style: none; margin: 0; padding: 0; }
.ev-board li { display: grid; grid-template-columns: 2.2em minmax(0, 1fr) auto; align-items: baseline; gap: 2px 8px; padding: 6px 0; border-bottom: 1px dashed #C9B48A; }
.ev-board li small { grid-column: 2 / -1; color: #6A5638; font-size: .78rem; }
.ev-pts { font-weight: 700; color: #8A5A1C; }
.ev-rank { font-size: 1.1rem; }
.ev-admin-actions { white-space: nowrap; }
.ev-admin-actions form { display: inline; }
.admin tr.is-off td { opacity: .55; }
.wedding-countdown.is-event { background: linear-gradient(rgba(14, 34, 54, .94), rgba(10, 23, 36, .96)), url(../img/chat/parchment-dark.webp) 0 0 / 256px; border-color: #C9A15A; }
@media (max-width: 760px) {
  .ev-card { grid-template-columns: 72px minmax(0, 1fr); padding: 10px 12px; border-width: 10px; border-image-width: 10px; }
  .ev-actions { grid-column: 1 / -1; }
  .ev-board-grid { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================================
   RAHMEN OHNE LÜCKE – frame-panel.webp (1000×328, Slice 48): die Messingleiste ist nur von 5–34 px deckend,
   34–48 px sind durchsichtig. Mit border-width = Bildbreite begann der Hintergrund (padding-box) erst bei 48/48 →
   sichtbare Lücke zwischen Leiste und Pergament. Lösung: Rand nur 34/48 der Bildbreite (Bild bleibt gleich breit,
   ragt über den Innenrand), Innenabstand um die Differenz erhöht → Text steht exakt wie vorher, Hintergrund stößt an die Leiste.
   Bildbreite W → Rand B = round(W·34/48), Ausgleich d = W − B:  20→14/6 · 18→13/5 · 16→11/5 · 14→10/4 · 12→9/3 · 10→7/3 · 8→6/2 · 6→4/2
   ===================================================================================== */
.crew-box, .panel-talk { border-width: 10px; border-image-width: 14px; }
.panel-side .rankbar { border-width: 9px; border-image-width: 12px; padding: 11px 13px; }

.dialog { border-width: 11px; border-image-width: 16px; padding: 0 23px 21px; }
.dialog > form > h2:first-child, .dialog > form > .dialog-head:first-child, .dialog > form > .profile-head:first-child { margin: 0 -23px 12px; }
.dialog > form > .dialog-actions:last-child { bottom: -21px; margin: 12px -23px -21px; padding: 10px 23px 19px; }
.dialog-help { padding-bottom: 17px; }
.dialog-confirm { padding: 0 23px 21px; }

.home-captain-card { border-width: 11px; border-image-width: 16px; padding: 23px 31px; }
.rules-list { border-width: 13px; border-image-width: 18px; padding: 27px 35px; }
.help-sheet { border-width: 13px; border-image-width: 18px; padding: 31px 39px 35px; }
.ship-card { border-width: 13px; border-image-width: 18px; }
.lb-cover { border-width: 14px; border-image-width: 20px; padding: 28px 36px; }
.lb-page { border-width: 13px; border-image-width: 18px; padding: 23px 31px 27px; }
.adm-side { border-width: 10px; border-image-width: 14px; padding: 18px 14px 16px; }
.ev-card { border-width: 10px; border-image-width: 14px; padding: 20px 24px; }

@media (max-width: 960px) {
  .admin > .adm-side { border-width: 7px; border-image-width: 10px; padding: 11px; }
}
@media (max-width: 900px) {
  .ship-card { border-width: 10px; border-image-width: 14px; }
}
@media (max-width: 860px) {
  .crew-box, .panel-talk { border-width: 6px; border-image-width: 8px; }
  .panel-talk { border-width: 4px; border-image-width: 6px; }
  .panel-side .rankbar { border-width: 6px; border-image-width: 8px; padding: 10px 12px; }
  .rules-list { border-width: 10px; border-image-width: 14px; padding: 14px 20px; }
  .help-sheet { border-width: 10px; border-image-width: 14px; padding: 18px 20px 22px; }
  .lb-cover { border-width: 10px; border-image-width: 14px; padding: 18px; }
  .lb-page { border-width: 10px; border-image-width: 14px; padding: 16px 18px 20px; }
}
@media (max-width: 760px) {
  .ev-card { border-width: 7px; border-image-width: 10px; padding: 13px 15px; }
}
.dialog-help > form > .dialog-actions:last-child { position: static; margin: 10px 0 0; padding: 0; border: 0; background: none; }

/* =====================================================================================
   WORTFILTER – über Bord geworfene Wörter (⸨…⸩) im Chat und im Maschinenraum
   ===================================================================================== */
.censor { display: inline-block; padding: 0 .4em 0 1.45em; border-radius: 999px; font-style: italic; font-weight: 600; line-height: 1.35;
  color: #0E3A55; background: #D8ECF5 url(../img/icons/lifebuoy.webp) .3em 50% / .95em no-repeat; box-shadow: inset 0 0 0 1px rgba(14, 58, 85, .25); cursor: help; }
.wf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.wf-grid .card, .admin #ersatz { margin-bottom: 0; }
.wf-modes { margin: 4px 0 12px; padding: 0; border: 0; }
.wf-modes legend { margin-bottom: 4px; font-weight: 600; }
.wf-result { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px rgba(90, 60, 20, .18); line-height: 1.7; }
.wf-list-head { margin: 26px 0 10px; }
.wf-list-head small { font-size: .8rem; font-weight: 400; margin-left: 6px; }
.admin #ersatz { margin-top: 22px; }
.wf-actions { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
@media (max-width: 760px) { .wf-grid { grid-template-columns: minmax(0, 1fr); } }

/* =====================================================================================
   ILLUSTRATIONEN & SMILIES (GRAFIKEN.md 7, 8, 9)
   ===================================================================================== */
/* Smilies im Text und in der Auswahl */
.smiley-img { display: inline-block; width: 1.5em; height: 1.5em; margin: -.3em .05em -.25em; vertical-align: baseline; }
.smiley-pop { grid-template-columns: repeat(6, 40px); }
.smiley { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; }
.smiley .smiley-img { width: 32px; height: 32px; margin: 0; transition: transform .12s; }
.smiley:hover .smiley-img, .smiley:focus-visible .smiley-img { transform: scale(1.15); }

/* Fehlerseiten */
.ship-error .error-art-illu { width: min(460px, 46vw); height: auto; filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .55)); }
@media (max-width: 760px) { .ship-error .error-art-illu { width: min(360px, 88vw); height: auto; } }

/* Hinweisseite nach der Registrierung */
.ship-card-art { display: block; width: min(380px, 100%); height: auto; margin: -4px auto 10px; filter: drop-shadow(0 8px 14px rgba(20, 10, 0, .35)); }

/* Hilfe: Leuchtturm */
.help-safety-art { float: right; width: min(230px, 38%); height: auto; margin: 0 0 12px 18px; shape-outside: margin-box;
  filter: drop-shadow(0 8px 14px rgba(20, 10, 0, .3)); }
@media (max-width: 560px) { .help-safety-art { float: none; display: block; width: min(240px, 70%); margin: 0 auto 12px; } }

/* Startseite: Dampfer über dem Schluss-Aufruf */
.home-final-ship { display: block; width: min(440px, 100%); height: auto; margin: 0 auto 14px; filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .55)); }

/* Chat: leerer Raum und Funkstille/Wartung */
.messages .msg-empty { list-style: none; display: flex; flex-direction: column; align-items: center; gap: 6px; margin: auto; padding: 24px 12px;
  text-align: center; border: 0; background: none; }
.msg-empty img { width: min(320px, 80%); height: auto; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .35)); }
.msg-empty strong { font-family: Georgia, serif; font-size: 1.15rem; }
.msg-empty span { opacity: .8; font-size: .92rem; }
.conn-card { position: absolute; left: 50%; top: 50%; z-index: 30; width: min(360px, calc(100% - 32px)); transform: translate(-50%, -50%);
  padding: 14px 18px 16px; text-align: center; color: #F6EBD3; border-radius: 12px;
  background: linear-gradient(rgba(14, 34, 54, .95), rgba(10, 23, 36, .97)), url(../img/chat/parchment-dark.webp) 0 0 / 256px;
  border: 2px solid #C9A15A; box-shadow: 0 18px 40px rgba(0, 0, 0, .55); }
.conn-card[hidden] { display: none; }
.conn-card img { display: block; width: 100%; height: auto; margin: -34px auto 6px; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .5)); }
.conn-card strong { display: block; font-family: Georgia, serif; font-size: 1.2rem; color: #F3DFA8; }
.conn-card span { display: block; margin-top: 4px; font-size: .9rem; color: #C9D6E2; }

/* Effekte: Handlungen mit Bild, Feuerwerk beim Feiern */
.msg-fx { display: inline-block; width: 2.1em; height: 2.1em; margin: -.6em 0 -.5em .35em; vertical-align: baseline; object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.msg-fx.is-fresh { animation: msg-fx-pop .7s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes msg-fx-pop { 0% { transform: scale(0) rotate(-20deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.fx-firework { position: absolute; z-index: 40; width: 150px; height: auto; pointer-events: none; opacity: 0;
  animation: fx-firework 1.6s ease-out var(--d, 0s) both; }
@keyframes fx-firework { 0% { transform: scale(.1) rotate(-30deg); opacity: 0; } 25% { opacity: 1; }
  70% { transform: scale(1) rotate(10deg); opacity: .95; } 100% { transform: scale(1.15) rotate(14deg); opacity: 0; } }
.wedding-card-text strong img { width: 1.6em; height: auto; margin: -.35em .3em -.3em 0; vertical-align: baseline; }

/* =====================================================================================
   LOGBUCH ALS BUCH (GRAFIKEN.md 10) – Ledereinband log-cover.webp (1600×527, Messingschild innen 40–66,5 % × 32–68 %),
   Pergament log-page.webp, Eckbeschlag log-corner.webp (oben rechts), Stempel, Federkiel, Lesezeichen
   ===================================================================================== */
.lb-book-cover { position: relative; z-index: 2; container-type: inline-size; aspect-ratio: 1600 / 527; margin: 0;
  background: url(../img/logbook/log-cover.webp) center / 100% 100% no-repeat; filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .6)); }
.lb-book-avatar { position: absolute; left: 26.5%; top: 50%; height: 56%; width: auto; aspect-ratio: 1; transform: translate(-50%, -50%);
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .7)); }
.lb-book-badge { position: absolute; left: 79.5%; top: 50%; height: 46%; width: auto; transform: translate(-50%, -50%);
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .7)); }
.lb-book-plate { position: absolute; left: 41.5%; top: 34%; width: 23.5%; height: 32%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; }
.lb-book-label { font-family: var(--home-serif); font-size: 1.25cqw; font-weight: 700; letter-spacing: .3em; text-transform: uppercase;
  color: #5A3A12; text-shadow: 0 1px 0 rgba(255, 236, 180, .55); }
.home .lb-book-plate h1 { margin: .1em 0 0; max-width: 100%; font-family: var(--home-serif); font-size: 4.4cqw; line-height: 1.05; color: #3B220A;
  text-shadow: 0 1px 0 rgba(255, 236, 180, .65), 0 -1px 0 rgba(60, 30, 5, .35); overflow-wrap: anywhere; }
/* Namenslänge → Schriftstufe, damit der Name einzeilig aufs Schild passt (Georgia fett ≈ 0,6 em je Zeichen, Schild 23,5 cqw) */
.home .lb-book-plate h1.n1 { font-size: 3.3cqw; white-space: nowrap; }
.home .lb-book-plate h1.n2 { font-size: 2.6cqw; white-space: nowrap; }
.home .lb-book-plate h1.n3 { font-size: 2.15cqw; white-space: nowrap; }
.home .lb-book-plate h1.n4 { font-size: 1.85cqw; white-space: nowrap; }
.lb-book-ribbon { position: absolute; right: 4.5%; top: 93%; z-index: -1; width: 3.4cqw; height: auto; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .5)); }
.lb-book-meta { margin: 18px 0 0; padding: 0 9%; }
.lb-book-meta .lb-cover-rank { justify-content: center; color: #E8D3A0; }

.lb-book .lb-page { position: relative;
  background: linear-gradient(rgba(251, 246, 234, .42), rgba(251, 246, 234, .42)), url(../img/logbook/log-page.webp) 0 0 / 600px; background-clip: padding-box; }
.lb-book .lb-page::before, .lb-book .lb-page::after { content: ""; position: absolute; z-index: 3; width: 60px; height: 58px; pointer-events: none;
  background: url(../img/logbook/log-corner.webp) center / contain no-repeat; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45)); }
.lb-book .lb-page::before { top: -15px; right: -15px; }
.lb-book .lb-page::after { bottom: -15px; left: -15px; transform: rotate(180deg); }
.lb-stamp { mix-blend-mode: multiply; pointer-events: none; }
.lb-stamp-ok { float: right; width: 92px; height: auto; margin: -8px 0 0 10px; transform: rotate(-12deg); opacity: .85; }
.lb-notices li.has-stamp { justify-content: flex-start; }
.lb-notices li.has-stamp > span { flex: 1; }
.lb-stamp-warn { flex: none; width: 54px; height: auto; transform: rotate(-10deg); opacity: .85; }
.lb-quill { position: absolute; top: -30px; right: 52px; z-index: 2; height: 108px; width: auto; pointer-events: none;
  filter: drop-shadow(0 6px 8px rgba(40, 20, 0, .4)); }
.lb-rings { width: 30px; height: auto; }

@media (max-width: 860px) {
  .lb-book .lb-page::before, .lb-book .lb-page::after { width: 42px; height: 40px; }
  .lb-book .lb-page::before { top: -11px; right: -11px; }
  .lb-book .lb-page::after { bottom: -11px; left: -11px; }
  .lb-quill { height: 80px; top: -24px; right: 8px; }
  .lb-book-meta { padding: 0 4%; }
}
@media (max-width: 560px) {
  .lb-book-label { display: none; }
  .home .lb-book-plate h1 { font-size: 5cqw; }
  .home .lb-book-plate h1.n1 { font-size: 3.4cqw; }
  .home .lb-book-plate h1.n2, .home .lb-book-plate h1.n3, .home .lb-book-plate h1.n4 { font-size: 2.9cqw; white-space: normal; }
  .lb-book-ribbon { width: 5cqw; }
}

/* Hochzeitssaal nach der Trauung: Countdown bis zum Schließen (Ringe statt Kapitän) */
.wedding-countdown.is-closing { background: linear-gradient(rgba(74, 20, 36, .94), rgba(46, 12, 22, .96)), url(../img/chat/parchment-dark.webp) 0 0 / 256px; border-color: #E2B35A; }

/* =====================================================================================
   BORDKAMERADEN-FENSTER – Karten mit Avatar, Lämpchen, Rang und Statuszeile
   ===================================================================================== */
#dlg-friends { width: min(520px, calc(100vw - 32px)); }
.fr-list { display: flex; flex-direction: column; gap: 8px; max-height: min(52vh, 460px); overflow-y: auto; margin: 4px -4px 10px; padding: 2px 4px; }
.fr-group { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-family: Georgia, serif; font-size: .82rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: #8A5A1C; }
.fr-group::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, #C9A15A, transparent); }
.fr-count { min-width: 1.6em; padding: 0 6px; border-radius: 999px; background: #8A5A1C; color: #FFF4DC; font-family: inherit; font-size: .72rem;
  letter-spacing: 0; text-align: center; }
.fr-card { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 10px 9px 9px;
  border: 1px solid #D8C49A; border-radius: 10px; background: linear-gradient(180deg, rgba(255, 252, 244, .95), rgba(246, 235, 211, .9));
  box-shadow: 0 1px 0 #FFF inset, 0 2px 6px rgba(74, 36, 20, .12); transition: box-shadow .15s, transform .15s; }
.fr-card:hover { box-shadow: 0 1px 0 #FFF inset, 0 4px 12px rgba(74, 36, 20, .2); transform: translateY(-1px); }
.fr-card:not(.is-online) .fr-avatar img { filter: grayscale(.55) brightness(.95); }
.fr-avatar { position: relative; width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #F3DFA8, #B8893A 70%, #7A5426);
  box-shadow: 0 2px 5px rgba(42, 23, 18, .35); }
.fr-avatar img { position: absolute; inset: 3px; width: 46px; height: 46px; border-radius: 50%; object-fit: cover; background: #16324F; }
.fr-initial { position: absolute; inset: 3px; display: grid; place-items: center; border-radius: 50%; background: #16324F; color: #F3DFA8;
  font: 700 1.3rem Georgia, serif; }
.fr-lamp { position: absolute; right: -1px; bottom: -1px; width: 15px; height: 15px; border-radius: 50%; border: 2px solid #FBF6EA;
  background: radial-gradient(circle at 35% 35%, #E8E1D2, #9A907E); }
.fr-card.is-online .fr-lamp { background: radial-gradient(circle at 35% 35%, #B9F5C8, #1FA05A 60%, #106B3A);
  box-shadow: 0 0 0 2px rgba(31, 160, 90, .25), 0 0 8px rgba(31, 200, 100, .7); }
.fr-info { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.dialog .fr-name { align-self: flex-start; max-width: 100%; padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
  font: 700 1.05rem Georgia, serif; color: #4A2414; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dialog .fr-name:hover, .dialog .fr-name:focus-visible { color: #8A3B12; text-decoration: underline; }
.fr-rank { display: flex; align-items: center; gap: 5px; font-size: .8rem; color: #6A5638; }
.fr-rank img { width: 18px; height: 18px; object-fit: contain; }
.fr-status { font-size: .82rem; font-style: italic; color: #5A4A30; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-actions { display: flex; align-items: center; gap: 6px; }
.dialog .fr-invite { min-height: 34px; padding: 0 6px; border-radius: 0; border-style: solid; border-color: transparent; border-width: 0 16px;
  border-image: url(../img/chat/brass-button.webp) 0 55 fill / 0 16px stretch; background: none; color: #2A1712; font-weight: 800;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .45); }
.dialog .fr-invite:hover { filter: brightness(1.08); }
.fr-remove { width: 30px; height: 30px; border: 1px solid transparent; border-radius: 50%; background: none; color: #8A6A3A; font-size: 1.3rem;
  line-height: 1; cursor: pointer; }
.fr-remove:hover, .fr-remove:focus-visible { border-color: rgba(180, 35, 24, .4); background: rgba(180, 35, 24, .08); color: #B42318; }
.fr-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 10px; text-align: center; color: #6A5638; }
.fr-empty strong { font: 700 1.1rem Georgia, serif; color: #4A2414; }
.fr-outgoing { margin: 0 0 10px; padding: 7px 12px; border-left: 3px solid #0E9AA7; border-radius: 6px; background: rgba(14, 154, 167, .08);
  font-size: .85rem; color: #2A3A44; }
.fr-outgoing[hidden] { display: none; }
.fr-tip { display: flex; align-items: center; gap: 12px; margin: 0 0 4px; padding: 10px 12px; border: 1px dashed #C9A15A; border-radius: 10px;
  background: rgba(184, 137, 58, .07); font-size: .86rem; color: #5A4A30; }
.fr-tip img { flex: none; width: 44px; height: auto; transform: rotate(-12deg); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25)); }
.fr-tip strong { display: block; color: #4A2414; font-size: .92rem; }
#friends-incoming h3 { margin: 0 0 6px; font: 700 .82rem Georgia, serif; letter-spacing: .12em; text-transform: uppercase; color: #B42318; }
@media (max-width: 480px) {
  .fr-card { grid-template-columns: 44px minmax(0, 1fr); }
  .fr-avatar { width: 44px; height: 44px; }
  .fr-avatar img, .fr-initial { width: 38px; height: 38px; }
  .fr-actions { grid-column: 1 / -1; justify-content: flex-end; }
}

/* =====================================================================================
   RANG-FREISCHALTUNGEN – Verzierungen am Namen, gesperrte Smilies, Logbuch-Übersicht
   ===================================================================================== */
.deco-tau { padding-bottom: 1px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4'%3E%3Cpath d='M0 3 Q2 0 4 2 T8 1' fill='none' stroke='%23B8893A' stroke-width='1.3'/%3E%3C/svg%3E") left bottom / 8px 4px repeat-x; }
.deco-messing { color: #A8731F !important; text-shadow: 0 1px 0 rgba(255, 236, 180, .5); }
.chat[data-tone="dark"] .deco-messing, .is-home .deco-messing { color: #E2B35A !important; text-shadow: none; }
.deco-stern::after { content: " ✦"; color: #D9A94E; font-size: .85em; }
.deco-lilie::before { content: "⚜ "; color: #C9A15A; }
.deco-schimmer { background: linear-gradient(100deg, #8A5A1C 0%, #E2B35A 35%, #FFF1C2 50%, #E2B35A 65%, #8A5A1C 100%) 0 0 / 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: deco-shimmer 4s linear infinite; }
@keyframes deco-shimmer { to { background-position: -220% 0; } }
.deco-krone::before { content: "♛ "; color: #D9A94E; text-shadow: 0 0 6px rgba(226, 179, 90, .6); }
body.reduce-motion .deco-schimmer { animation: none; }
.smiley.is-locked { cursor: not-allowed; }
.smiley.is-locked .smiley-img { filter: grayscale(1) opacity(.45); }
.smiley.is-locked::after { content: "🔒"; position: absolute; font-size: .62rem; transform: translate(11px, 11px); }
.smiley { position: relative; }

.lb-perk-head { display: flex; align-items: baseline; gap: 8px; margin-top: 18px !important; }
.lb-perk-head small { font-family: var(--font-sans, inherit); font-size: .8rem; font-weight: 400; color: #6A5638; }
.lb-perk-sub { margin: 4px 0 4px; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8A5A1C; }
.lb-perks { list-style: none; margin: 0 0 8px; padding: 0; }
.lb-perks li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px dashed #D8C49A; font-size: .9rem; }
.lb-perks li:last-child { border-bottom: 0; }
.lb-perks li img { width: 20px; height: 20px; object-fit: contain; }
.lb-perks li b { font-size: .75rem; font-weight: 700; color: #8A5A1C; white-space: nowrap; }
.lb-perks.is-soon li { opacity: .78; }
.lb-perks.is-soon li img { filter: grayscale(.6); }
.lb-perks-all summary { cursor: pointer; font-weight: 700; color: #7A3B12; font-size: .9rem; }
.lb-perks-all[open] summary { margin-bottom: 6px; }
.lb-perk-set { margin: 14px 0 6px; padding: 12px 14px; border: 1px solid #D8C49A; border-radius: 8px; background: rgba(255, 251, 242, .55); }
.lb-perk-set legend { padding: 0 6px; font-family: var(--home-serif); font-weight: 700; color: #4A2414; }
.lb-deco-preview { margin: 6px 0 10px; font-size: .88rem; color: #6A5638; }
.lb-deco-name { font-weight: 700; color: #0B5F69; font-size: 1rem; }
.lb-own-line { display: flex; align-items: center; gap: 8px; }
.lb-own-line span { flex: none; font-weight: 700; color: #4A2414; }
.lb-own-line input { flex: 1; min-width: 0; }
.lb-perk-set select:disabled, .lb-own-line input:disabled { opacity: .55; cursor: not-allowed; }

/* =====================================================================================
   KOMPAKTES LOGBUCH IM CHAT (#dlg-logbook): Rang, Profil, Mitteilungen – das ganze Logbuch bleibt unter /logbuch
   ===================================================================================== */
.dialog-logbook { width: min(600px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 40px); padding: 0 18px 0; overflow-y: auto; }
.dialog-logbook > .dialog-head:first-child { position: sticky; top: 0; z-index: 3; }
.dialog-logbook .dialog-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; color: #F6EBD3; text-shadow: 0 1px 2px #000; font-size: 1.2rem; }
.lbm-head { display: flex; align-items: center; gap: 14px; margin: 2px 0 12px; }
.lbm-avatar { width: 64px; height: 64px; border-radius: 50%; padding: 3px; flex: none;
  background: radial-gradient(circle at 35% 30%, #F3DFA8, #B8893A 70%, #7A5426); box-shadow: 0 2px 6px rgba(42, 23, 18, .35); }
.lbm-who { display: flex; flex-direction: column; min-width: 0; }
.lbm-who strong { font: 700 1.35rem Georgia, serif; color: #4A2414; overflow: hidden; text-overflow: ellipsis; }
.lbm-who span { display: flex; align-items: center; gap: 6px; font-style: italic; color: #6A5638; }
.lbm-who img { width: 20px; height: 20px; object-fit: contain; }
.lbm-tabs { display: flex; gap: 6px; margin: 0 0 12px; border-bottom: 2px solid #C9A15A; }
.lbm-tabs button { padding: 7px 14px 6px; border: 1px solid #C9A15A; border-bottom: 0; border-radius: 8px 8px 0 0; background: #EADBB8;
  color: #4A2414; font-weight: 700; cursor: pointer; margin-bottom: -2px; }
.lbm-tabs button:hover { background: #F3E6C6; }
.lbm-tabs button.is-active { background: #FBF6EA; border-bottom: 2px solid #FBF6EA; }
.dialog .lbm-sec { margin: 0 0 12px; padding: 4px 2px 8px; border: 0; border-image: none; background: none; filter: none; }
.dialog .lbm-sec[hidden] { display: none; }
.dialog .lbm-sec .lb-quill { display: none; }
.lbm-actions { position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 -18px; padding: 10px 18px 14px; border-top: 1px dashed #C9B48A;
  background: linear-gradient(rgba(251, 246, 234, .96), rgba(251, 246, 234, .96)), url(../img/chat/parchment-light.webp) center / 512px; }
.dialog .lbm-full { color: #7A3B12; font-weight: 700; text-decoration: none; }
.dialog .lbm-full:hover { text-decoration: underline; }
@media (max-width: 480px) { .lbm-tabs button { padding: 6px 9px 5px; font-size: .9rem; } }

/* =====================================================================================
   EDELSTEINE (Smaragd, Saphir, Diamant) – Symbol am Namen, Shop /edelsteine, Bordkasse, Beleg
   Platzhalter-Symbole als SVG; sobald GRAFIKEN 11.x geliefert sind: img/premium/gem-*.webp
   ===================================================================================== */
.gem { display: inline-block; width: 1.05em; height: 1.05em; margin: 0 .1em 0 .3em; vertical-align: -.12em; background: center / contain no-repeat;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); }
.gem-smaragd { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M8 4h16l6 8-14 17L2 12z' fill='%231E9E5A'/%3E%3Cpath d='M8 4h16l6 8H2z' fill='%237BE0A8'/%3E%3Cpath d='M2 12h28L16 29z' fill='%230F6B3A'/%3E%3Cpath d='M11 12l5 17 5-17M8 4l3 8M24 4l-3 8M16 4l-5 8M16 4l5 8' fill='none' stroke='%23ffffff' stroke-opacity='.45' stroke-width='.8'/%3E%3Cpath d='M8 4h16l6 8-14 17L2 12z' fill='none' stroke='%23000' stroke-opacity='.35' stroke-width='1'/%3E%3C/svg%3E"); }
.gem-saphir { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M8 4h16l6 8-14 17L2 12z' fill='%232C6FD6'/%3E%3Cpath d='M8 4h16l6 8H2z' fill='%238EC8FF'/%3E%3Cpath d='M2 12h28L16 29z' fill='%23173F8C'/%3E%3Cpath d='M11 12l5 17 5-17M8 4l3 8M24 4l-3 8M16 4l-5 8M16 4l5 8' fill='none' stroke='%23ffffff' stroke-opacity='.45' stroke-width='.8'/%3E%3Cpath d='M8 4h16l6 8-14 17L2 12z' fill='none' stroke='%23000' stroke-opacity='.35' stroke-width='1'/%3E%3C/svg%3E"); }
.gem-diamant { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M8 4h16l6 8-14 17L2 12z' fill='%23CFE9FF'/%3E%3Cpath d='M8 4h16l6 8H2z' fill='%23FFFFFF'/%3E%3Cpath d='M2 12h28L16 29z' fill='%238FB8DA'/%3E%3Cpath d='M11 12l5 17 5-17M8 4l3 8M24 4l-3 8M16 4l-5 8M16 4l5 8' fill='none' stroke='%23ffffff' stroke-opacity='.45' stroke-width='.8'/%3E%3Cpath d='M8 4h16l6 8-14 17L2 12z' fill='none' stroke='%23000' stroke-opacity='.35' stroke-width='1'/%3E%3C/svg%3E"); animation: gem-sparkle 3.2s ease-in-out infinite; }
@keyframes gem-sparkle { 0%, 70%, 100% { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); }
  80% { filter: drop-shadow(0 0 2px rgba(255, 255, 255, .75)) drop-shadow(0 0 5px rgba(159, 216, 255, .6)) brightness(1.07); } }
body.reduce-motion .gem-diamant { animation: none; }
.gem-big { width: 72px; height: 72px; margin: 0; }
.gem-hero { display: block; width: 96px; height: 96px; margin: 4px auto 14px; }

.shop-hero { background-image: linear-gradient(180deg, rgba(6, 14, 24, .45) 0%, rgba(6, 14, 24, .7) 60%, #0A1724 100%), url(../img/premium/schatzkammer.webp);
  background-position: center 60%; }
/* Erfolgsseite: Schatztruhe mit dem gekauften Edelstein darüber */
.shop-chest { position: relative; width: min(340px, 100%); margin: 26px auto 10px; }
.shop-chest img { display: block; width: 100%; height: auto; }
.shop-chest .gem.gem-hero { position: absolute; left: 50%; top: -14%; width: 84px; height: 84px; margin: 0; transform: translateX(-50%);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .45)); animation: shop-chest-float 3.2s ease-in-out infinite; }
@keyframes shop-chest-float { 50% { transform: translate(-50%, -6px); } }
@media (prefers-reduced-motion: reduce) { .shop-chest .gem.gem-hero { animation: none; } }
body.reduce-motion .shop-chest .gem.gem-hero { animation: none; }
.shop-main { max-width: 1060px; padding-top: 34px; }
.shop-test { margin: 0 0 18px; padding: 10px 14px; border: 1px dashed #E2B35A; border-radius: 10px; background: rgba(226, 179, 90, .12); color: #F3DFA8; }
.shop-mine { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 20px; padding: 12px 16px; border-radius: 12px;
  background: rgba(14, 154, 167, .14); border: 1px solid rgba(14, 154, 167, .5); color: #E6F4F6; }
.shop-mine small { flex-basis: 100%; color: #A9C7CC; }
.shop-mine-gem { display: inline-flex; align-items: center; gap: 2px; }
.shop-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.shop-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 20px 20px; cursor: pointer;
  color: #2A1E12; text-align: center; border: 14px solid transparent; border-image: url(../img/chat/frame-panel.webp) 48 / 20px stretch;
  background: linear-gradient(rgba(251, 246, 234, .92), rgba(251, 246, 234, .92)), url(../img/chat/parchment-light.webp) center / 512px; background-clip: padding-box;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .45)); transition: transform .15s; }
.shop-card:hover { transform: translateY(-3px); }
.shop-card input { position: absolute; opacity: 0; pointer-events: none; }
.shop-card:has(input:checked) { filter: drop-shadow(0 0 0 #E2B35A) drop-shadow(0 0 14px rgba(226, 179, 90, .75)) drop-shadow(0 10px 20px rgba(0, 0, 0, .45)); }
.shop-card:has(input:checked)::after { content: "✓ gewählt"; position: absolute; top: 8px; left: 10px; font-size: .75rem; font-weight: 700; color: #18794E; }
.shop-card:has(input:focus-visible) { outline: 3px solid #0E9AA7; outline-offset: 4px; }
.shop-card-gem { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .9), rgba(246, 235, 211, 0) 70%); }
.shop-card-name { font: 700 1.6rem Georgia, serif; color: #4A2414; }
.shop-card-smaragd .shop-card-name { color: #146B3E; }
.shop-card-saphir .shop-card-name { color: #1D4FA0; }
.shop-card-diamant .shop-card-name { color: #3E6A8C; }
.shop-card-price { color: #6A5638; }
.shop-card-price strong { font-size: 1.25rem; color: #2A1E12; }
.shop-perks { list-style: none; margin: 8px 0 0; padding: 0; text-align: left; font-size: .9rem; }
.shop-perks li { position: relative; padding: 4px 0 4px 22px; border-top: 1px dashed #D8C49A; }
.shop-perks li::before { content: "⚓"; position: absolute; left: 0; top: 4px; color: #B8893A; font-size: .85rem; }
.shop-perks li.is-inherit { font-weight: 700; color: #7A3B12; }
.shop-ribbon { position: absolute; top: -8px; right: -8px; padding: 3px 10px; border-radius: 6px; background: #B42318; color: #fff; font-size: .75rem;
  font-weight: 800; letter-spacing: .05em; transform: rotate(6deg); box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.shop-durations { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 28px 0 0; padding: 0; border: 0; }
.shop-durations legend { margin-bottom: 10px; font: 700 1.2rem Georgia, serif; color: #F3DFA8; }
.shop-dur { cursor: pointer; }
.shop-dur input { position: absolute; opacity: 0; }
.shop-dur > span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; border: 2px solid rgba(217, 169, 78, .45);
  border-radius: 12px; background: rgba(10, 23, 36, .7); color: #E8D3A0; text-align: center; transition: border-color .15s, background .15s; }
.shop-dur strong { color: #F6EBD3; }
.shop-dur em { display: none; font-style: normal; font-size: 1.15rem; font-weight: 800; color: #FFF4DC; }
.shop-form[data-tier="1"] .shop-dur em[data-tier="1"], .shop-form[data-tier="2"] .shop-dur em[data-tier="2"],
.shop-form[data-tier="3"] .shop-dur em[data-tier="3"] { display: block; }
.shop-dur small { color: #7FD08F; font-weight: 700; }
.shop-dur input:checked + span { border-color: #E2B35A; background: rgba(184, 137, 58, .25); box-shadow: 0 0 0 3px rgba(226, 179, 90, .25); }
.shop-dur input:focus-visible + span { outline: 3px solid #0E9AA7; }
.shop-checkout { margin: 26px auto 0; max-width: 760px; padding: 20px 22px; border-radius: 14px; background: rgba(10, 23, 36, .82);
  border: 1px solid rgba(217, 169, 78, .4); color: #DCE6EF; }
.shop-checkout .check { color: #DCE6EF; align-items: flex-start; margin: 0 0 10px; }
.shop-checkout .check a { color: #E2B35A; }
.shop-pay { display: flex; flex-wrap: wrap; gap: 14px; margin: 16px 0 6px; }
.shop-btn { flex: 1 1 240px; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 58px; font-weight: 800; }
.shop-btn small { font-weight: 400; font-size: .78rem; opacity: .85; }
.shop-btn-stripe { background: linear-gradient(#6A5BF0, #4B3FD0); border-color: #3A2FB0; color: #fff; }
.shop-btn-paypal { background: linear-gradient(#FFD45A, #F6B41F); border-color: #D69A0E; color: #123368; }
.shop-btn:disabled { opacity: .6; cursor: progress; }
.shop-error { margin: 8px 0 0; padding: 8px 12px; border-radius: 8px; background: rgba(214, 69, 58, .18); color: #FFD9D4; }
.shop-error[hidden] { display: none; }
.shop-note { margin: 0 0 8px; font-size: 1.05rem; text-align: center; }
.shop-note a { color: #E2B35A; }
.shop-legal { margin: 12px 0 0; font-size: .8rem; color: #93A8BA; }
.shop-result .ship-card-body { text-align: center; }
@media (max-width: 900px) {
  .shop-cards { grid-template-columns: minmax(0, 1fr); }
  .shop-durations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Bordkasse */
.ks-mode { display: flex; flex-direction: column; gap: 2px; margin: 0 0 16px; padding: 12px 16px; border-radius: 10px; border-left: 5px solid; }
.ks-mode-off { background: rgba(120, 120, 120, .12); border-color: #8A8A8A; }
.ks-mode-test { background: rgba(226, 179, 90, .16); border-color: #D69A0E; }
.ks-mode-live { background: rgba(24, 121, 78, .14); border-color: #18794E; }
.ks-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; margin-bottom: 22px; }
.ks-switch { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 12px; padding: 0; border: 0; }
.ks-switch legend { font-weight: 700; margin-bottom: 4px; }
.ks-prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ks-prices label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; }
.ks-table td, .ks-table th { padding: 5px 8px; font-size: .88rem; }
.ks-ok { color: #18794E; font-weight: 700; }
.ks-no { color: #8A6A3A; }
@media (max-width: 900px) { .ks-grid { grid-template-columns: minmax(0, 1fr); } }

/* Beleg (Druckansicht) */
.receipt-page { background: #EDE7DA; }
.receipt { max-width: 760px; margin: 30px auto; padding: 40px 44px; background: #fff; color: #222; box-shadow: 0 6px 24px rgba(0, 0, 0, .15); font-size: .95rem; }
.receipt-head { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.receipt-title { text-align: right; }
.receipt-title h1 { margin: 0 0 4px; font: 700 1.6rem Georgia, serif; color: #16324F; }
.receipt-table { width: 100%; border-collapse: collapse; margin: 18px 0; }
.receipt-table th, .receipt-table td { padding: 8px 6px; border-bottom: 1px solid #ddd; text-align: left; }
.receipt-table .num { text-align: right; white-space: nowrap; }
.receipt-table tfoot th { border-top: 2px solid #222; }
.receipt-refund { color: #B42318; font-weight: 700; }
.receipt-hint { margin-top: 28px; font-size: .8rem; color: #777; }
@media print { .receipt-page { background: #fff; } .receipt { box-shadow: none; margin: 0; } .receipt-hint { display: none; } }
.plank-gems .gem { width: 20px; height: 20px; margin: 0 2px 0 0; }

/* Edelstein-Grafiken (GRAFIKEN.md 11.1–11.3, 11.6–11.8): schlichter Stein am Namen, gefasster Stein im Shop */
.gem { width: 1.3em; height: 1.05em; vertical-align: -.15em; }
.gem-smaragd { background-image: url(../img/premium/gem-icon-smaragd.webp); }
.gem-saphir { background-image: url(../img/premium/gem-icon-saphir.webp); }
.gem-diamant { background-image: url(../img/premium/gem-icon-diamant.webp); }
.gem-big, .gem-hero { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); }
.gem-big { width: 88px; height: 88px; }
.gem-hero { width: 128px; height: 128px; }
.gem-big.gem-smaragd, .gem-hero.gem-smaragd { background-image: url(../img/premium/gem-smaragd.webp); }
.gem-big.gem-saphir, .gem-hero.gem-saphir { background-image: url(../img/premium/gem-saphir.webp); }
.gem-big.gem-diamant, .gem-hero.gem-diamant { background-image: url(../img/premium/gem-diamant.webp); animation: none; }
.shop-card-gem { width: 112px; height: 112px; }
.plank-gems .gem { width: 24px; height: 20px; }

/* Bordkasse: Abstände, Preisübersicht passt in die Karte */
.admin .adm-stats + .ks-grid, .ks-mode + .adm-stats { margin-top: 18px; }
.ks-grid .card form .btn { margin-top: 10px; }
/* Zahlungsanbieter (Owner) */
.pay-set { margin: 0 0 14px; }
.pay-set legend small { font-weight: 400; }
.pay-set label small { font-weight: 400; margin-left: 6px; }
.pay-clear { margin: 2px 0 8px; font-size: .9rem; }
.pay-check { margin-top: 22px; }
.pay-check .ks-table form { margin: 0; }
.pay-check .ks-table form .btn { margin-top: 0; }
.ks-sub { margin: 22px 0 8px; padding-top: 14px; border-top: 1px dashed #D8C49A; font: 700 .95rem Georgia, serif; color: #4A2414; }
.ks-table-wrap { overflow-x: auto; border-radius: 10px; }
.admin .ks-pricetable { width: 100%; table-layout: fixed; margin: 0; }
.admin .ks-pricetable th, .admin .ks-pricetable td { padding: 7px 8px; white-space: nowrap; }
.admin .ks-pricetable td { text-align: right; font-variant-numeric: tabular-nums; }
.admin .ks-pricetable thead th { text-align: right; }
.admin .ks-pricetable thead th:first-child, .admin .ks-pricetable tbody th { width: 96px; text-align: left; }
.ks-prices label { justify-content: space-between; }

/* =====================================================================================
   BORDLEBEN – Bordwetter & Tageszeit, Kapitänsaufträge, Flaschenpost, Willkommenslotse Fiete, Bordzeitung
   (Daten: app/Modules/Life, app/Modules/Newspaper; Grafiken mit Fallback, Prompts in GRAFIKEN.md Abschnitt 12)
   ===================================================================================== */

/* --- Bordwetter: Ebenen über dem Raum-Banner --- */
.room-banner { position: relative; overflow: hidden; }
.room-banner > .room-topic { position: relative; z-index: 2; flex: 1; min-width: 0; }
.sky { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.sky > * { position: absolute; inset: 0; }
.sky-tint { transition: opacity 2s ease; }
.sky-night { background: linear-gradient(180deg, rgba(8, 16, 46, .72) 0%, rgba(10, 22, 52, .55) 55%, rgba(6, 12, 30, .6) 100%); mix-blend-mode: multiply; }
.sky-dusk { background: linear-gradient(180deg, rgba(255, 128, 64, .32) 0%, rgba(214, 92, 120, .22) 50%, rgba(40, 30, 80, .28) 100%); mix-blend-mode: soft-light; }
.room-banner[data-paint="day"] .sky-dusk { background: linear-gradient(180deg, rgba(255, 140, 70, .45) 0%, rgba(205, 90, 120, .3) 55%, rgba(50, 30, 90, .38) 100%); mix-blend-mode: multiply; }
.sky-dawn { background: linear-gradient(180deg, rgba(255, 196, 160, .35) 0%, rgba(255, 160, 180, .2) 60%, rgba(90, 110, 160, .2) 100%); mix-blend-mode: soft-light; }
.sky-stars i { position: absolute; width: var(--s, 2px); height: var(--s, 2px); border-radius: 50%; background: #FFF8DC;
  box-shadow: 0 0 4px rgba(255, 248, 220, .9); animation: star-twinkle 3.6s ease-in-out var(--d, 0s) infinite; }
@keyframes star-twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.sky-clouds { background: linear-gradient(180deg, rgba(150, 160, 175, .55) 0%, rgba(150, 160, 175, .15) 55%, transparent 80%); mix-blend-mode: multiply; }
.room-banner[data-weather="clouds"] .sky-clouds { background: linear-gradient(180deg, rgba(190, 196, 206, .45) 0%, transparent 60%); }
.room-banner[data-weather="storm"] .sky-clouds { background: linear-gradient(180deg, rgba(40, 46, 60, .8) 0%, rgba(60, 66, 80, .45) 60%, rgba(30, 34, 44, .4) 100%); }
.sky-fog { inset: -20% -50%; background: radial-gradient(ellipse at 30% 60%, rgba(235, 240, 245, .75), transparent 60%),
  radial-gradient(ellipse at 75% 40%, rgba(235, 240, 245, .6), transparent 55%); animation: fog-drift 38s linear infinite alternate; }
.sky-fog-2 { opacity: .7; animation-duration: 55s; animation-direction: alternate-reverse; }
@keyframes fog-drift { from { transform: translateX(-12%); } to { transform: translateX(12%); } }
.sky-rain { inset: -40px 0 0; background-image: repeating-linear-gradient(105deg, transparent 0 9px, rgba(205, 225, 245, .55) 9px 10px, transparent 10px 22px);
  background-size: 120px 120px; animation: rain-fall .45s linear infinite; opacity: .75; }
.sky-rain.is-heavy { opacity: 1; animation-duration: .3s; }
@keyframes rain-fall { from { background-position: 0 0; } to { background-position: -32px 120px; } }
.sky-flash { background: rgba(235, 240, 255, .85); opacity: 0; animation: sky-lightning 9s ease-out infinite; }
@keyframes sky-lightning { 0%, 91%, 100% { opacity: 0; } 92% { opacity: .9; } 93% { opacity: .1; } 94.5% { opacity: .7; } 96% { opacity: 0; } }
.sky-snow { inset: -60px 0 0; background-image: radial-gradient(circle, #fff 1.4px, transparent 2px), radial-gradient(circle, rgba(255, 255, 255, .8) 1px, transparent 1.6px);
  background-size: 46px 46px, 28px 28px; background-position: 0 0, 14px 10px; animation: snow-fall 7s linear infinite; }
.sky-snow-2 { background-size: 70px 70px, 38px 38px; animation-duration: 11s; opacity: .7; }
@keyframes snow-fall { from { transform: translateY(0); } to { transform: translateY(60px) translateX(12px); } }
.sky .sky-gull { inset: auto; left: -40px; width: 22px; height: 10px; opacity: 0;
  animation: gull-fly var(--t, 20s) linear var(--d, 0s) infinite; }
.sky-gull:not(.has-img)::before, .sky-gull:not(.has-img)::after { content: ""; position: absolute; top: 0; width: 11px; height: 7px;
  border-top: 2px solid rgba(30, 36, 44, .85); border-radius: 50% 50% 0 0; animation: gull-flap .6s ease-in-out infinite alternate; }
.sky-gull::before { left: 0; transform-origin: right bottom; }
.sky-gull::after { right: 0; transform-origin: left bottom; }
.sky .sky-gull.has-img { width: 34px; height: 22px; background: center / contain no-repeat; }
@keyframes gull-fly { 0% { left: -40px; opacity: 0; transform: translateY(0); } 4% { opacity: 1; } 50% { transform: translateY(-6px); }
  96% { opacity: 1; } 100% { left: calc(100% + 40px); opacity: 0; transform: translateY(4px); } }
@keyframes gull-flap { from { transform: scaleY(1); } to { transform: scaleY(.45); } }
.sky-chip { position: relative; z-index: 2; flex: none; display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; padding: 3px 10px 3px 6px;
  border: 1px solid rgba(241, 221, 176, .55); border-radius: 999px; background: rgba(10, 22, 36, .55); color: #F6EBD3; font-size: .78rem;
  text-shadow: 0 1px 2px #000; cursor: pointer; backdrop-filter: blur(2px); white-space: nowrap; }
.sky-chip:hover { background: rgba(10, 22, 36, .75); border-color: #F1DDB0; }
.sky-chip img { width: 20px; height: 20px; object-fit: contain; }
.sky-icon { font-size: 1rem; line-height: 1; }
body.reduce-motion .sky *, body.reduce-motion .sky-stars i { animation: none !important; }
body.reduce-motion .sky .sky-gull { display: none; }
@media (prefers-reduced-motion: reduce) { .sky *, .sky-stars i { animation: none !important; } .sky .sky-gull { display: none; } }
@media (max-width: 860px) {
  .sky-chip { margin-left: 6px; padding: 2px 8px 2px 5px; font-size: .72rem; }
  .sky-chip .sky-label { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; }
}

/* --- Neuankömmlinge in der Liste --- */
.member .newbie { margin-left: 3px; font-size: .9em; cursor: help; }

/* --- Planken: Fortschritt der Aufträge --- */
.plank .plank-progress { margin-left: auto; background: rgba(0, 0, 0, .35); color: #F6EBD3; border: 1px solid rgba(241, 221, 176, .45); }
.plank .plank-progress.is-full { background: #2E7D4F; border-color: #8FE0B0; }

/* --- Kapitänsaufträge (Fenster und Logbuch) --- */
.dialog-tasks { width: min(520px, calc(100vw - 32px)); max-width: none; }
.tasks-intro { display: flex; gap: 12px; align-items: center; margin: 4px 0 12px; }
.tasks-intro img { flex: none; width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 0 0 3px #B8893A, 0 2px 6px rgba(0, 0, 0, .3); }
.tasks-intro p { margin: 0; font-style: italic; color: #4A2414; line-height: 1.45; }
.task-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.task-list li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid #DCCBA6; border-radius: 10px;
  background: rgba(255, 252, 244, .75); color: #2A1E12; }
.task-list li > span:nth-child(2) { flex: 1; min-width: 0; font-weight: 600; }
.task-list li small { display: block; font-weight: 400; color: #6A5638; font-size: .82rem; margin-top: 2px; }
.task-list li b { flex: none; font: 700 .9rem Georgia, serif; color: #7A4E2D; }
.task-check { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid #B8893A; border-radius: 6px;
  background: #FFFDF6; color: #fff; font-weight: 900; font-size: .85rem; }
.task-list li.is-done { background: rgba(229, 242, 233, .85); border-color: #9CCBAE; }
.task-list li.is-done .task-check { background: #2E7D4F; border-color: #2E7D4F; }
.task-list li.is-done > span:nth-child(2) { text-decoration: line-through; text-decoration-color: rgba(46, 125, 79, .6); color: #3D5C47; }
.task-week { list-style: none; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 6px 0 10px; padding: 0; }
.task-week li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px 8px; border: 1px dashed #C9B48A; border-radius: 8px;
  color: #6A5638; font-size: .8rem; font-weight: 700; background: rgba(255, 252, 244, .6); }
.task-week li b { width: 34px; height: 34px; border-radius: 50%; border: 2px dashed rgba(122, 78, 45, .35); }
.task-week li.is-today { border-style: solid; border-color: #B8893A; color: #4A2414; }
.task-week li.is-future { opacity: .5; }
.task-week li.is-full b { border: 0; background: url(../img/logbook/stamp-approved.webp) center / contain no-repeat; transform: rotate(-12deg); }
.dialog-tasks h3 small, .lb-perk-head small { font-weight: 400; color: #6A5638; font-size: .8rem; }

/* --- Flaschenpost --- */
.dialog-bottle { width: min(600px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 40px); padding: 0 18px; overflow-y: auto; }
.dialog-bottle > .dialog-head:first-child { position: sticky; top: 0; z-index: 3; }
.dialog-bottle .dialog-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; color: #F6EBD3; text-shadow: 0 1px 2px #000; font-size: 1.2rem; }
.bottle-body { padding: 4px 0 8px; color: #2A1E12; }
.bottle-intro { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 12px; }
.bottle-intro img { flex: none; width: 64px; height: auto; transform: rotate(-14deg); filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .3)); }
.bottle-intro p { margin: 0; line-height: 1.5; }
.bottle-form textarea { width: 100%; resize: vertical; font: inherit; }
.bottle-form-row { display: flex; justify-content: space-between; gap: 8px; margin: 4px 0 6px; }
.bottle-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.bottle-item { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; width: 100%; padding: 9px 12px; text-align: left;
  border: 1px solid #DCCBA6; border-radius: 10px; background: rgba(255, 252, 244, .8); color: #2A1E12; cursor: pointer; font: inherit; }
.bottle-item:hover { border-color: #B8893A; background: #FFFDF6; }
.bottle-item.is-unread { border-color: #B8893A; box-shadow: inset 4px 0 0 #B8893A; }
.bottle-dir { grid-row: span 2; align-self: center; padding: 2px 8px; border-radius: 999px; background: #E6F2F3; color: #0B5A63; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.bottle-prev { font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 36px; }
.bottle-item small { color: #6A5638; }
.bottle-item .badge-new { position: absolute; top: 8px; right: 10px; }
.bottle-item.is-closed, .bottle-item.is-returned { opacity: .7; }
.bottle-back { margin: 4px 0 6px; color: #7A3B12; font-weight: 700; }
.bottle-partner { margin: 0 0 8px; font-style: italic; color: #6A5638; }
.bottle-letters { list-style: none; margin: 0 0 10px; padding: 4px; display: flex; flex-direction: column; gap: 10px; max-height: 46vh; overflow-y: auto; }
.bottle-letters li { position: relative; max-width: 86%; padding: 10px 14px 12px; border-radius: 4px 14px 14px 14px;
  background: linear-gradient(rgba(255, 249, 232, .9), rgba(246, 235, 211, .95)), url(../img/chat/parchment-light.webp) center / 256px;
  box-shadow: 0 2px 5px rgba(60, 35, 10, .2); border: 1px solid #DCCBA6; }
.bottle-letters li.is-me { align-self: flex-end; border-radius: 14px 4px 14px 14px; background: linear-gradient(rgba(230, 242, 243, .92), rgba(214, 234, 236, .95)); border-color: #A9D2D6; }
.bottle-letters li small { display: block; margin-bottom: 4px; color: #6A5638; font-size: .75rem; font-weight: 700; }
.bottle-letters li p { margin: 0; font-family: Georgia, serif; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.bottle-tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
.bottle-tools .btn { min-height: 32px; font-size: .85rem; }
.bottle-ashore { position: absolute; left: 14px; bottom: 12px; z-index: 6; display: flex; align-items: center; gap: 10px; max-width: min(360px, calc(100% - 28px));
  padding: 8px 14px 8px 8px; border: 2px solid #B8893A; border-radius: 14px; cursor: pointer; text-align: left; color: #2A1E12; font: inherit;
  background: linear-gradient(rgba(255, 249, 232, .96), rgba(246, 235, 211, .96)); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.bottle-ashore[hidden] { display: none; }
.bottle-ashore img { flex: none; width: 54px; height: auto; transform: rotate(-16deg); }
.bottle-ashore strong { display: block; color: #7A3B12; font-family: Georgia, serif; font-size: 1.05rem; }
.bottle-ashore.is-in { animation: bottle-wash 2.4s cubic-bezier(.2, .7, .3, 1) both; }
.bottle-ashore.is-in img { animation: bottle-bob 2.2s ease-in-out 2.4s infinite alternate; }
@keyframes bottle-wash { 0% { transform: translate(-120%, 30px) rotate(-8deg); opacity: 0; } 55% { transform: translate(6%, -4px) rotate(3deg); opacity: 1; }
  75% { transform: translate(-2%, 2px) rotate(-1deg); } 100% { transform: none; } }
@keyframes bottle-bob { from { transform: rotate(-20deg) translateY(0); } to { transform: rotate(-10deg) translateY(-3px); } }
.fx-splash { position: fixed; left: 50%; top: 45%; z-index: 2000; width: 160px; margin: -80px 0 0 -80px; pointer-events: none; animation: splash-pop 1.5s ease-out forwards; }
@keyframes splash-pop { 0% { transform: scale(.3) translateY(40px); opacity: 0; } 30% { transform: scale(1.05); opacity: 1; } 100% { transform: scale(1.2) translateY(-20px); opacity: 0; } }
body.reduce-motion .bottle-ashore.is-in, body.reduce-motion .bottle-ashore.is-in img { animation: none; }

/* --- Willkommenslotse Fiete --- */
.guide { position: fixed; right: 28px; bottom: 150px; z-index: 900; display: flex; gap: 12px; align-items: flex-start; width: min(420px, calc(100vw - 32px));
  padding: 12px 14px; border: 2px solid #B8893A; border-radius: 16px; color: #2A1E12;
  background: linear-gradient(rgba(255, 249, 232, .97), rgba(246, 235, 211, .97)), url(../img/chat/parchment-light.webp) center / 512px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45); animation: guide-in .45s ease-out both; }
.guide[hidden] { display: none; }
@keyframes guide-in { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.guide-face { flex: none; width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 0 0 3px #B8893A; }
.guide-body { flex: 1; min-width: 0; }
.guide-name { margin: 0 0 2px; font: 700 .85rem Georgia, serif; color: #7A3B12; letter-spacing: .02em; }
.guide-text { margin: 0 0 10px; line-height: 1.5; font-size: .95rem; }
.guide-actions { display: flex; align-items: center; gap: 12px; }
.guide-dots { display: flex; gap: 4px; margin-right: auto; }
.guide-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(122, 78, 45, .3); }
.guide-dots i.is-on { background: #B8893A; transform: scale(1.3); }
.guide .linklike { color: #6A5638; font-size: .85rem; }
.guide-spot { position: relative; z-index: 850 !important; outline: 3px solid #F1C24E; outline-offset: 3px; border-radius: 8px;
  animation: guide-pulse 1.4s ease-in-out infinite; }
@keyframes guide-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(241, 194, 78, .7); } 50% { box-shadow: 0 0 0 10px rgba(241, 194, 78, 0); } }
body.reduce-motion .guide, body.reduce-motion .guide-spot { animation: none; }
@media (max-width: 860px) {
  .guide { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); width: auto; padding: 10px 12px; }
  .guide.is-top { top: 64px; bottom: auto; }
  .guide-face { width: 48px; height: 48px; }
  .guide-text { font-size: .9rem; }
}

/* --- Bordzeitung --- */
.paper-hero { background-image: linear-gradient(180deg, rgba(6, 14, 24, .55) 0%, rgba(6, 14, 24, .72) 60%, #0A1724 100%), url(../img/decks/landungsbruecke.webp); }
.home-section.paper-main { max-width: 1100px; }
.paper-sheet { position: relative; padding: 28px clamp(16px, 4vw, 44px) 22px; color: #22180E; border-radius: 4px;
  background: linear-gradient(rgba(250, 243, 226, .94), rgba(244, 233, 207, .96)), url(../img/chat/parchment-light.webp) center / 512px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55), inset 0 0 60px rgba(120, 85, 40, .25); }
/* Knittriges Zeitungspapier (GRAFIKEN 12.17), sobald vorhanden */
.paper-sheet.has-texture { background: #F4EAD2 url(../img/paper/paper-texture.webp) center top / 1024px repeat; }
.home .paper-sheet h2, .home .paper-sheet h3 { color: #22180E; }
.paper-head { text-align: center; border-bottom: 4px double #3B2A18; padding-bottom: 10px; margin-bottom: 18px; }
.paper-flags { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 4px 0 8px; border-bottom: 1px solid #3B2A18;
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, var(--home-serif); font-variant-numeric: lining-nums; /* Georgia hat nur Mediävalziffern (4 hängt unter die Zeile) */
  text-transform: uppercase; letter-spacing: .08em; color: #3B2A18; }
.home .paper-title { margin: 10px 0 4px; font: 700 clamp(2.4rem, 7vw, 4.6rem)/1 "Old English Text MT", "UnifrakturMaguntia", Georgia, serif;
  letter-spacing: .02em; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.paper-title-img img { display: block; width: min(100%, 760px); height: auto; margin: 0 auto; }
.paper-sheet.has-texture .paper-title-img img { mix-blend-mode: multiply; } /* heller Schleier im Zeitungskopf verschmilzt mit dem Papier */
.paper-motto { margin: 0; font-style: italic; font-family: var(--home-serif); color: #5A4428; }
.paper-live { display: inline-block; margin: 10px 0 0; padding: 4px 12px; border: 1px dashed #9A3B1F; border-radius: 4px; color: #9A3B1F;
  font-weight: 700; font-size: .88rem; transform: rotate(-1deg); }
.paper-cols { column-count: 2; column-gap: 34px; column-rule: 1px solid rgba(59, 42, 24, .35); }
.paper-cols > section { break-inside: avoid; margin: 0 0 20px; }
.home .paper-cols h3 { margin: 0 0 8px; padding-bottom: 4px; border-bottom: 2px solid #3B2A18; font: 700 1.2rem var(--home-serif); display: flex; align-items: center; gap: 6px; }
.paper-cols h3 img { width: 26px; height: 26px; object-fit: contain; }
.paper-lead { column-span: all; }
.home .paper-lead h3 { font-size: 1.5rem; }
.paper-captain { float: right; width: 120px; height: auto; margin: 0 0 8px 14px; filter: sepia(.35) drop-shadow(0 3px 4px rgba(0, 0, 0, .25)); }
.paper-dropcap { margin: 0 0 12px; font: 1.05rem/1.65 var(--home-serif); text-align: justify; hyphens: auto; }
.paper-dropcap::first-letter { float: left; margin: 4px 8px 0 0; font: 700 3.4rem/.8 var(--home-serif); color: #7A3B12; }
.paper-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; clear: both; }
.paper-stats div { padding: 8px 6px; border: 1px solid rgba(59, 42, 24, .4); text-align: center; background: rgba(255, 255, 255, .25); }
.paper-stats strong { display: block; font: 700 1.5rem var(--home-serif); color: #7A3B12; }
.paper-stats span { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: #5A4428; }
.paper-sub { margin: 8px 0 4px; font-weight: 700; font-style: italic; color: #5A4428; }
.paper-list { margin: 0 0 8px; padding-left: 1.2em; line-height: 1.55; font-family: var(--home-serif); }
.paper-list li { margin: 2px 0; }
.paper-list .rank-badge { width: 20px; height: 20px; vertical-align: -4px; margin-right: 2px; }
.paper-ranked { list-style: none; padding-left: 0; }
.paper-box p { margin: 0 0 8px; font-family: var(--home-serif); line-height: 1.55; }
.paper-box p.muted, .paper-box .muted { color: #6A5638; }
.paper-sheet a { color: #7A3B12; font-weight: 700; }
.paper-wedding { padding: 10px 12px; border: 1px solid rgba(154, 59, 31, .35); background: rgba(255, 236, 236, .35); }
.paper-wx { list-style: none; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 0; padding: 0; text-align: center; }
.paper-wx li { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; border: 1px solid rgba(59, 42, 24, .25); }
.paper-wx span { font-weight: 700; font-size: .8rem; }
.paper-wx b { font-size: 1.3rem; }
.paper-wx b img { display: block; width: 30px; height: 30px; margin: 0 auto; }
.paper-ico { display: inline-block; width: auto; height: 28px; vertical-align: -6px; }   /* feste Höhe, Breite folgt dem Bild (Medaillen sind hochkant) */
.paper-list .paper-ico { height: 22px; vertical-align: -5px; margin-right: 2px; }
.paper-wx small { font-size: .74rem; color: #5A4428; }
.paper-foot { margin-top: 10px; padding-top: 8px; border-top: 4px double #3B2A18; text-align: center; font-style: italic; color: #5A4428; }
.paper-archive { margin-top: 26px; color: #E4ECF3; }
.paper-archive h3 { margin: 0 0 8px; }
.paper-archive ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.paper-archive li { padding: 6px 12px; border: 1px solid rgba(241, 221, 176, .4); border-radius: 999px; background: rgba(10, 22, 36, .5); }
.paper-archive a { color: #F1DDB0; }
.paper-archive small { color: #B9C6D2; margin-left: 4px; }
@media (max-width: 760px) {
  .paper-cols { column-count: 1; }
  .paper-stats { grid-template-columns: repeat(2, 1fr); }
  .paper-captain { width: 84px; }
  .paper-flags { justify-content: center; }
}

.adm-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ev-map { display: block; width: 100%; max-width: 360px; height: auto; margin: 4px 0 10px; border-radius: 8px; }
.ev-howto { font-size: .92rem; }

/* --- Planke „Bordleben“ + Fenster mit drei Kacheln; Hilfe/Von Bord als halbe Planken --- */
.plank-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.plank-pair .plank { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-width: 0 12px; padding-left: 0; padding-right: 0; }
.plank-pair .plank::before { inset: 0 -12px; }
.plank-pair .plank .ui-icon { margin-right: 3px; }
.plank #life-count { margin-left: 4px; }
.plank.is-glow { animation: life-glow 1.6s ease-in-out 4; }
@keyframes life-glow { 50% { box-shadow: 0 0 14px 3px rgba(255, 214, 120, .85); } }
.dialog-life { width: min(560px, calc(100vw - 32px)); max-width: none; }
.dialog-life h2 { display: flex; align-items: center; gap: 8px; }
.life-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 10px; margin: 6px 0 12px; }
.life-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 10px 14px;
  font: inherit; text-align: center; text-decoration: none; cursor: pointer; color: #F6EBD3;
  background: linear-gradient(180deg, #6B4226, #4A2E1A); border: 2px solid #B8893A; border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 230, 180, .25), 0 3px 8px rgba(0, 0, 0, .3); transition: transform .12s, filter .12s; }
.life-tile:hover, .life-tile:focus-visible { transform: translateY(-2px); filter: brightness(1.12); }
.life-tile img { width: 40px; height: 40px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8)); }
.life-tile strong { font-size: 1rem; text-shadow: 0 1px 2px #000; }
.life-tile small { font-size: .78rem; color: #E8D7B4; line-height: 1.3; }
.life-tile .badge { position: absolute; top: 8px; right: 8px; }
.life-tile .plank-progress { background: rgba(0, 0, 0, .35); color: #F6EBD3; border: 1px solid rgba(241, 221, 176, .45); }
.life-tile .plank-progress.is-full { background: #2E7D4F; border-color: #8FE0B0; }
@media (max-width: 560px) {
  .life-tiles { grid-template-columns: 1fr; gap: 8px; }
  .life-tile { display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; align-items: center; text-align: left; padding: 10px 44px 10px 12px; }
  .life-tile img { grid-row: span 2; }
  .life-tile .badge { top: 50%; transform: translateY(-50%); right: 10px; }
}
@media (prefers-reduced-motion: reduce) { .plank.is-glow { animation: none; box-shadow: 0 0 10px 2px rgba(255, 214, 120, .7); } }

/* --- Töne an Bord: Lautsprecher-Knopf im Banner des Hochzeitssaals --- */
.sound-chip { padding: 3px 9px; font-size: .9rem; line-height: 1; }

/* Knopf „Zum Hochzeitssaal“ in der Ankündigung des Kapitäns */
.msg-go-hall { display: inline-flex; margin: 6px 0 2px 8px; background: linear-gradient(#D6A95A, #B8893A); border-color: #7A5A24; color: #2A1712; font-weight: 700; }

/* Lautsprecher leuchtet, solange der Browser noch keinen Ton zulässt (erst nach einem Klick) */
.sound-chip.is-locked { padding: 3px 11px; font-size: .78rem; font-weight: 700; border-color: #F1DDB0; background: rgba(184, 137, 58, .85); color: #fff;
  animation: sound-pulse 1.6s ease-in-out infinite; }
@keyframes sound-pulse { 50% { box-shadow: 0 0 0 4px rgba(241, 221, 176, .35), 0 0 12px rgba(255, 214, 120, .7); } }
@media (prefers-reduced-motion: reduce) { .sound-chip.is-locked { animation: none; } }

/* Mitgliederliste: Eintrag bleibt einzeilig (🌱 direkt hinter dem Namen, lange Zusätze werden gekürzt) */
.member > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Hochzeitssaal: Bot-Namen und Zähler „An Bord“ gut lesbar auf dem dunklen Bordeaux */
.chat[data-style="hochzeitssaal"] .msg-captain .msg-name { color: #F3D68C; filter: none; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
.chat[data-style="hochzeitssaal"] .crew-title .badge, .chat[data-style="hochzeitssaal"] .chat-tabs .badge { background: #E6C27A; color: #3A1222; filter: none; opacity: 1; }

/* Einwände bei der Trauung: Eingabefeld leuchtet, solange alle schreiben dürfen */
.composer.is-objection { animation: objection-pulse 1s ease-in-out infinite; border-radius: 8px; }
.composer.is-objection input, .composer.is-objection textarea { border-color: #E6C27A; box-shadow: 0 0 0 2px rgba(230, 194, 122, .55); }
@keyframes objection-pulse { 50% { box-shadow: 0 0 0 4px rgba(230, 194, 122, .35), 0 0 16px rgba(230, 194, 122, .55); } }
@media (prefers-reduced-motion: reduce) { .composer.is-objection { animation: none; box-shadow: 0 0 0 3px rgba(230, 194, 122, .5); } }

/* Jugendschutz (E38) */
.badge-youth { background: #DDF3F1; color: #0B5F5A; margin-left: 4px; }

/* Abstimmung der Woche (E39) */
.ev-poll { margin: 0 0 24px; }
.ev-poll h2 { margin: 2px 0 12px; }
.ev-poll-options { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 8px; }
.ev-poll-options form { margin: 0; }
.ev-poll-bars { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.ev-poll-bars li { display: grid; grid-template-columns: minmax(90px, 30%) 1fr 3.2em; align-items: center; gap: 10px; }
.ev-poll-bars li.is-mine .ev-poll-label { font-weight: 700; }
.ev-poll-bars b { text-align: right; }
.ev-poll-bar { width: 100%; height: 14px; border: 0; border-radius: 7px; background: rgba(59, 42, 24, .15); overflow: hidden; }
.ev-poll-bar::-webkit-meter-bar { background: rgba(59, 42, 24, .15); border: 0; border-radius: 7px; }
.ev-poll-bar::-webkit-meter-optimum-value { background: linear-gradient(90deg, #0E9AA7, #B8893A); border-radius: 7px; }
.ev-poll-bar::-moz-meter-bar { background: linear-gradient(90deg, #0E9AA7, #B8893A); border-radius: 7px; }
@media (max-width: 560px) { .ev-poll-bars li { grid-template-columns: 1fr 3.2em; } .ev-poll-bars .ev-poll-label { grid-column: 1 / -1; } }
.paper-story-text { font-style: italic; line-height: 1.6; }
.paper-story-text::first-letter { font-size: 1.6em; font-weight: 700; }