/* Graveyard Digger – dunkles "Friedhof bei Nacht"-Theme mit hellem Kalkstein-Theme */
:root {
  color-scheme: light;
  --bg: #E8E9E3;
  --surface: #F4F4EF;
  --surface-2: #DCDED6;
  --line: #C3C7BC;
  --ink: #1E2421;
  --ink-soft: #4E5751;
  --accent: #A45F12;
  --accent-ink: #FFFFFF;
  --moss: #4F6B4A;
  --tech-red: #B23A2E;
  --tech-green: #3F7D3A;
  --tech-blue: #2F5E9E;
  --done: #3F7D3A;
  --spoiler: #D8D2C2;
  --shadow: 0 1px 2px rgb(30 36 33 / .08);
  --surface-hi: #FBFBF7;
  --radius: 10px; --radius-sm: 6px; --radius-lg: 14px;
  --shadow-md: 0 1px 0 rgb(255 255 255 / .6) inset, 0 10px 24px -16px rgb(30 36 33 / .35);
  --bg-art: radial-gradient(1100px 520px at 8% -8%, rgb(164 95 18 / .07), transparent 62%), radial-gradient(900px 480px at 100% 0%, rgb(47 94 158 / .05), transparent 60%);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --f-display: "Pirata One", "UnifrakturMaguntia", Georgia, serif;
  --f-body: "Alegreya Sans", "Segoe UI", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #171B1D; --surface: #1F2528; --surface-2: #283034; --line: #36403F;
    --ink: #DCE0D8; --ink-soft: #9AA59E; --accent: #E09B3D; --accent-ink: #1A1408; --moss: #7FA07A;
    --tech-red: #E0705F; --tech-green: #7DC274; --tech-blue: #74A3E8; --done: #7DC274; --spoiler: #2B2A24;
    --shadow: 0 1px 2px rgb(0 0 0 / .4);
    --surface-hi: #252C30;
    --shadow-md: 0 1px 0 rgb(255 255 255 / .035) inset, 0 12px 28px -16px rgb(0 0 0 / .7);
    --bg-art: radial-gradient(1100px 520px at 8% -8%, rgb(224 155 61 / .075), transparent 62%), radial-gradient(900px 480px at 100% 0%, rgb(116 163 232 / .05), transparent 60%);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #171B1D; --surface: #1F2528; --surface-2: #283034; --line: #36403F;
  --ink: #DCE0D8; --ink-soft: #9AA59E; --accent: #E09B3D; --accent-ink: #1A1408; --moss: #7FA07A;
  --tech-red: #E0705F; --tech-green: #7DC274; --tech-blue: #74A3E8; --done: #7DC274; --spoiler: #2B2A24;
  --shadow: 0 1px 2px rgb(0 0 0 / .4);
  --surface-hi: #252C30;
  --shadow-md: 0 1px 0 rgb(255 255 255 / .035) inset, 0 12px 28px -16px rgb(0 0 0 / .7);
  --bg-art: radial-gradient(1100px 520px at 8% -8%, rgb(224 155 61 / .075), transparent 62%), radial-gradient(900px 480px at 100% 0%, rgb(116 163 232 / .05), transparent 60%);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg-art), var(--bg); background-attachment: fixed; color: var(--ink);
  font: 17px/1.55 var(--f-body);
  padding-inline: 16px;
}
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.2; }
h1 { font: 400 clamp(2.1rem, 1.6rem + 1.2vw, 2.7rem)/1.05 var(--f-display); letter-spacing: .01em; margin: .15em 0 .35em; }
h2 { font-size: 1.45rem; margin: 1.4em 0 .5em; }
h3 { font-size: 1.15rem; margin: 1.2em 0 .4em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.num, .mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: .88em; }
/* Tabellen wie früher im Quirks-Modus (bis zum Doctype): eigene Grundschrift statt 17px/1.55 vom Body – alle Tabellen sind darauf abgestimmt */
table { font-size: medium; line-height: normal; font-weight: normal; font-style: normal; font-variant: normal; white-space: normal; text-align: start; }

/* ---------------------------------------------------------------- Kopfzeile */
.topbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px;
  padding-block: 10px; margin-inline: -16px; padding-inline: 16px;
  background: color-mix(in srgb, var(--bg) 82%, transparent); border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
}
.wordmark {
  font-family: var(--f-display); font-size: 1.9rem; line-height: 1; color: var(--ink);
  text-decoration: none; letter-spacing: .01em; white-space: nowrap;
}
.wordmark::first-letter { color: var(--accent); }
.search { flex: 1 1 260px; margin: 0; }  /* Formulare haben sonst 1em Abstand unten (wie früher im Quirks-Modus, s. Doctype-Ausgleich) */
.search input {
  width: 100%; font: inherit; font-size: 1rem; padding: 7px 12px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 999px;
  padding-left: 38px; transition: border-color .2s, box-shadow .2s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%239AA59E' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M17 17l-4.5-4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 13px 50%;
}
.search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.dlc-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font: 500 .82rem/1 var(--f-body); letter-spacing: .02em;
  padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: var(--ink-soft); cursor: pointer;
}
.chip { transition: background .2s, border-color .2s, color .2s, opacity .2s; }
.chip:hover { border-color: var(--accent); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
/* Links als Chips (Bereichs-Reiter im Bauplan, Kategorien): Text mittig, auch wenn Touch die Höhe auf 40 px zieht */
a.chip { display: inline-flex; align-items: center; justify-content: center; gap: .35em; text-decoration: none; }
/* DLC-Filter: farbiger Punkt je Spiel, aktive Chips getönt statt grell */
.dlc-filter .chip { --dc: var(--ink-soft); display: inline-flex; align-items: center; gap: 6px; opacity: .6; border-style: dashed; }
.dlc-filter .chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dc); box-shadow: 0 0 0 2px color-mix(in srgb, var(--dc) 25%, transparent); }
.dlc-filter .chip[aria-pressed="true"] { opacity: 1; border-style: solid; color: var(--ink); border-color: color-mix(in srgb, var(--dc) 55%, var(--line)); background: color-mix(in srgb, var(--dc) 14%, transparent); }
.dlc-filter .chip[data-dlc="Breaking Dead"] { --dc: var(--tech-green); }
.dlc-filter .chip[data-dlc="Stranger Sins"] { --dc: var(--tech-red); }
.dlc-filter .chip[data-dlc="Game of Crone"] { --dc: var(--accent); }
.dlc-filter .chip[data-dlc="Better Save Soul"] { --dc: var(--tech-blue); }

/* ---------------------------------------------------------------- Layout */
/* Volle Breite am PC: Navigation links bündig, Inhalt füllt den Rest (bei sehr breiten Schirmen gedeckelt, damit Zeilen lesbar bleiben) */
.shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(20px, 2.5vw, 40px); max-width: 2200px; margin: 0; padding-block: 20px 40px; }
/* Seitenleiste klebt unter der Kopfzeile und scrollt für sich (Höhe der Kopfzeile misst app.js → --topbar-h) */
.sidenav { position: sticky; top: calc(var(--topbar-h, 64px) + 12px); align-self: start; display: flex; flex-direction: column; gap: 2px;
  max-height: calc(100vh - var(--topbar-h, 64px) - 24px); max-height: calc(100dvh - var(--topbar-h, 64px) - 24px);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-gutter: stable; padding-right: 6px; margin-right: -6px; }
.sidenav::-webkit-scrollbar { width: 6px; }
.sidenav::-webkit-scrollbar-thumb { border-width: 1px; }
.sidenav:not(:hover)::-webkit-scrollbar-thumb { background-color: color-mix(in srgb, var(--ink-soft) 18%, transparent); }
.sidenav a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 8px;
  color: var(--ink-soft); text-decoration: none; font-weight: 500; position: relative;
  transition: background .18s, color .18s;
}
.sidenav a > span:first-child { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.nav-ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .7; transition: opacity .18s, transform .25s var(--ease); }
.sidenav a .count { font-family: var(--f-mono); font-size: .7rem; line-height: 1; padding: 3px 6px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.sidenav a:hover { background: var(--surface-2); color: var(--ink); }
.sidenav a:hover .nav-ic { opacity: 1; transform: scale(1.1); }
.sidenav a[aria-current="page"] { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), var(--surface)); color: var(--ink); box-shadow: inset 3px 0 0 var(--accent), var(--shadow); }
.sidenav a[aria-current="page"] .nav-ic { color: var(--accent); opacity: 1; }
.sidenav a[aria-current="page"] .count { background: color-mix(in srgb, var(--accent) 24%, transparent); }
.sidenav .sep { height: 1px; background: var(--line); margin: 8px 0; }
.sidenav .nav-group { display: flex; align-items: center; gap: 8px; margin: 14px 10px 4px; font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); opacity: .75; }
.sidenav .nav-group::after { content: ""; flex: 1; height: 1px; background: var(--line); }
main { min-width: 0; }
main:focus { outline: none; }
.footer { max-width: 2200px; margin: 0; padding-block: 16px 32px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: .85rem; }
.loading { color: var(--ink-soft); }

@media (max-width: 820px) {
  .shell { grid-template-columns: 1fr; gap: 16px; padding-block: 12px 32px; }
  .sidenav { position: static; flex-direction: row; overflow-x: auto; overflow-y: visible; max-height: none; gap: 4px; padding-bottom: 4px; padding-right: 0; margin-right: 0; scrollbar-gutter: auto; }
  .sidenav a { white-space: nowrap; background: var(--surface); }
  .sidenav .sep, .sidenav .nav-group { display: none; }
  .wordmark { font-size: 1.6rem; }
}

/* ---------------------------------------------------------------- Bausteine */
.eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); }
main > p.eyebrow:first-child { display: flex; align-items: center; gap: 10px; margin-bottom: 0; }
main > p.eyebrow:first-child::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--accent); flex: none; }
.lede { color: var(--ink-soft); max-width: 65ch; margin-top: 0; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 16px; }
.toolbar input, .toolbar select, .field input, .field select, .field textarea {
  font: inherit; font-size: .95rem; padding: 6px 10px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
}
.toolbar input[type="search"] { flex: 1 1 220px; }
.toolbar select { max-width: 100%; min-width: 0; }  /* lange Einträge (z. B. Ort „Hof, Alchemielabor, …“) nicht breiter als die Seite */
.btn {
  font: 500 .9rem/1 var(--f-body); padding: 8px 14px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  transition: border-color .18s, background .18s, transform .12s var(--ease), box-shadow .18s;
}
.btn:hover:not(:disabled) { border-color: var(--accent); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn.primary:hover:not(:disabled) { box-shadow: 0 6px 16px -8px var(--accent); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.danger { color: var(--tech-red); }
.muted { color: var(--ink-soft); }
.small { font-size: .85rem; }

.dlc-tag {
  display: inline-block; font: 600 .7rem/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 6px; border-radius: 4px; border: 1px solid currentColor; color: var(--ink-soft); white-space: nowrap;
}
.dlc-tag[data-dlc="Breaking Dead"] { color: var(--tech-green); }
.dlc-tag[data-dlc="Stranger Sins"] { color: var(--tech-red); }
.dlc-tag[data-dlc="Game of Crone"] { color: var(--accent); }
.dlc-tag[data-dlc="Better Save Soul"] { color: var(--tech-blue); }

.tp { font-family: var(--f-mono); font-size: .82em; font-weight: 600; white-space: nowrap; margin-right: .5em; }
.tp.rot { color: var(--tech-red); } .tp.grün { color: var(--tech-green); } .tp.blau { color: var(--tech-blue); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.card {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface-hi), var(--surface)); border: 1px solid var(--line); color: var(--ink); text-decoration: none;
  box-shadow: var(--shadow); transition: border-color .2s, transform .2s var(--ease), box-shadow .2s;
}
.card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.card img { width: 48px; height: 48px; object-fit: contain; flex: none; image-rendering: pixelated; }
.card .t { font-weight: 700; }
.card .s { font-size: .85rem; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
table.data { border-collapse: collapse; width: 100%; font-size: .92rem; }
table.data th, table.data td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.data th { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); background: var(--surface-2); position: sticky; top: 0; cursor: pointer; white-space: nowrap; }
table.data tr:last-child td { border-bottom: 0; }
table.data tbody tr { transition: background .15s; }
table.data tbody tr:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
table.data td img { width: 28px; height: 28px; object-fit: contain; image-rendering: pixelated; vertical-align: middle; }
.pager { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 10px; font-size: .9rem; }

.ing { display: inline-flex; align-items: center; gap: 3px; margin: 1px 8px 1px 0; white-space: nowrap; }
.ing .q { font-family: var(--f-mono); font-size: .8rem; color: var(--ink-soft); }
/* Rezepte: Bild beim Ergebnis, Zutaten als Chips mit Bild */
table.data td .ing img { width: 22px; height: 22px; }
table.data td .rec-out { font-weight: 600; gap: 6px; }
table.data td .rec-out img { width: 30px; height: 30px; }
.rec-in { display: flex; flex-wrap: wrap; gap: 4px; }
.rec-in .ing { margin: 0; padding: 2px 8px 2px 4px; border-radius: 999px; background: var(--surface-2); }
.rec-st { white-space: normal; }

/* Fortschrittsbalken */
.progress { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--done) 65%, var(--surface)), var(--done)); transform-origin: left; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.stat { padding: 12px 14px; background: linear-gradient(180deg, var(--surface-hi), var(--surface)); border: 1px solid var(--line); border-radius: var(--radius); display: grid; gap: 6px; text-decoration: none; color: var(--ink);
  box-shadow: var(--shadow); transition: border-color .2s, transform .2s var(--ease), box-shadow .2s; }
.stat:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat .v { font-family: var(--f-mono); font-size: 1.1rem; font-variant-numeric: tabular-nums; }

/* Aufgaben & Notizen */
.todo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.todo-cat { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.todo-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.todo-head h3 { margin: 0; font-size: 1.05rem; }
.todo-cat .plain-list { margin: 0; }
.todo-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 220px) auto; gap: 12px; align-items: end; }
@media (max-width: 640px) { .todo-form { grid-template-columns: 1fr; } }
.todo-items li { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 4px 0; }
.todo-items label { display: flex; gap: 8px; align-items: flex-start; min-width: 0; overflow-wrap: anywhere; cursor: pointer; }
.todo-items input { margin-top: 3px; flex: none; }
.todo-items li.done span { color: var(--ink-soft); text-decoration: line-through; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer; }

/* Wirtschaft */
.econ-phases { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.econ-tip { border-top: 1px solid var(--line); padding-top: 8px; }
.econ-best { padding-left: 1.6em; display: grid; gap: 4px; }
.econ-best li, .econ-tier li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.econ-best .num, .econ-tier .num { margin-left: auto; font-family: var(--f-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.econ-best li.locked, .econ-tier.locked { opacity: .5; }
.econ-list { display: grid; gap: 8px; }
.econ-trader { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.econ-trader > summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px; cursor: pointer; list-style: none; }
.econ-trader > summary::-webkit-details-marker { display: none; }
.econ-portrait img { width: 36px; height: 44px; object-fit: contain; image-rendering: pixelated; }
.econ-name { display: grid; min-width: 0; }
.econ-live { display: grid; justify-items: end; gap: 4px; font-family: var(--f-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.econ-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; padding: 0 14px 14px; border-top: 1px solid var(--line); }
.econ-body h4 { margin: 12px 0 6px; }
.econ-tier { margin-bottom: 8px; }
.econ-tier .ing img, .econ-best .ing img { width: 20px; height: 20px; object-fit: contain; image-rendering: pixelated; }

/* Handelsrechner */
.calc-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 16px; align-items: start; }
@media (max-width: 900px) { .calc-wrap { grid-template-columns: 1fr; } }
.calc { margin: 0; }
.calc-top { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.calc-top select { min-width: 0; max-width: 100%; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.seg button { font: inherit; border: 0; background: none; color: var(--ink); padding: 6px 14px; cursor: pointer; }
.seg button[aria-selected="true"], .seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.calc-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto 72px 96px; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); }
.calc-rows li.locked { opacity: .55; }
.calc-item { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; min-width: 0; }
.calc-item .ing img { width: 20px; height: 20px; object-fit: contain; image-rendering: pixelated; }
.calc-rows input { width: 100%; padding: 4px 6px; font: inherit; font-variant-numeric: tabular-nums; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; }
.calc-rows .num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.calc-rows .hint { flex-basis: 100%; color: var(--done); }
@media (max-width: 560px) { .calc-rows li { grid-template-columns: minmax(0, 1fr) 64px 84px; } .calc-rows li > .num.small { display: none; } }
.calc-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 2px solid var(--ink); padding-top: 8px; margin-top: 4px; }
.calc-total b { font-family: var(--f-mono); font-size: 1.25rem; }
.calc-help details { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.calc-help summary { cursor: pointer; }
.calc-help-item { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 8px; }
.calc-help-item p { margin: .2em 0 0; }
.econ-compare { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-top: 10px; }
.cmp { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.cmp-item { margin-bottom: 6px; font-weight: 700; }
.cmp-item .ing img { width: 20px; height: 20px; object-fit: contain; image-rendering: pixelated; }
.cmp li { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; }
.cmp li .num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cmp li.top { color: var(--done); font-weight: 700; }
.cmp li.locked { opacity: .55; }

/* Tagesübersicht (Startseite) */
.day-overview { --wk: var(--accent); position: relative; overflow: hidden; }
.day-overview::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--wk), color-mix(in srgb, var(--wk) 20%, transparent)); }
.day-overview::after { content: ""; position: absolute; left: -80px; top: -80px; width: 380px; height: 380px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--wk) 22%, transparent), transparent); opacity: .7; }
.day-overview > * { position: relative; z-index: 1; }
.day-hero { display: grid; gap: 2px; }
.day-num { font: 400 2.4rem/1 var(--f-display); letter-spacing: .01em; }
.day-num b { font-weight: 400; font-variant-numeric: tabular-nums; }
.day-name { font: 700 .82rem/1.2 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--wk) 55%, var(--ink)); }
.day-visit { font-size: .92rem; color: var(--ink-soft); margin-top: 4px; }
.day-visit b a { color: var(--ink); text-decoration-color: color-mix(in srgb, var(--wk) 60%, transparent); }
.day-top-main { container-type: inline-size; }
.day-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; }
@container (max-width: 600px) { .day-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fact { display: flex; gap: 10px; align-items: center; min-width: 0; padding: 10px; border-radius: var(--radius); border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 45%, transparent); transition: border-color .2s, transform .2s var(--ease); }
.fact:hover { border-color: color-mix(in srgb, var(--wk) 55%, var(--line)); transform: translateY(-1px); }
.fact-ic { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--accent); }
.fact-ic .game-ic { width: 22px; height: 22px; object-fit: contain; image-rendering: pixelated; }
.fact-ic .nav-ic { width: 18px; height: 18px; opacity: 1; }
.fact-txt { display: grid; gap: 1px; min-width: 0; }
.fact-txt .eyebrow { font-size: .66rem; }
.fact .v { font-family: var(--f-mono); font-size: 1.15rem; font-variant-numeric: tabular-nums; line-height: 1.2; }
.fact .v b { font-weight: 600; }
.fact .v a { text-decoration: none; }
.fact .small { font-size: .72rem; }
.day-next { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; border-top: 1px dashed var(--line); padding-top: 14px; }
.next-card { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; min-width: 0; }
.next-ic { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.next-ic .nav-ic { opacity: 1; }
.next-card p { margin: 0; }
.next-card .next-t { margin: .25em 0 .1em; }

/* Story */
.chapter { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 24px; }
.chapter h2 { font-family: var(--f-display); font-weight: 400; font-size: 1.9rem; margin: .2em 0 .3em; letter-spacing: .01em; }
.chapter .intro { max-width: 70ch; }
.steps { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 4px; }
.step { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 6px 8px; border-radius: 6px; }
.step:hover { background: var(--surface); }
.step.done .label { color: var(--ink-soft); text-decoration: line-through; text-decoration-color: var(--line); }
.step input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--done); }

/* Quests */
details.quest { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); margin-bottom: 6px; }
details.quest > summary { display: flex; gap: 10px; align-items: center; padding: 8px 12px; cursor: pointer; list-style: none; }
details.quest > summary::-webkit-details-marker { display: none; }
details.quest > summary .name { flex: 1; font-weight: 500; }
details.quest[data-done="1"] > summary .name { color: var(--ink-soft); text-decoration: line-through; }
details.quest > summary input { width: 18px; height: 18px; accent-color: var(--done); }
details.quest .body { padding: 4px 14px 14px; border-top: 1px solid var(--line); }
.npc-group h3 { display: flex; align-items: center; gap: 8px; }
.npc-group h3 img { width: 32px; height: 32px; object-fit: contain; }

/* ---------------------------------------------------------------- Wiki-Artikel */
.article-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; }
.article-head h1 { margin-bottom: 0; }
.article-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 16px; }
.wiki { max-width: 1500px; }
.wiki p, .wiki li { max-width: 80ch; }
.wiki img { image-rendering: auto; vertical-align: middle; height: auto; max-width: 100%; }  /* feste Breiten aus dem Wiki (500–600 px) am Handy begrenzen */
.wiki table { border-collapse: collapse; max-width: 100%; }
.wiki .wikitable, .wiki table.infoboxtable { display: block; overflow-x: auto; }
/* Layout-Tabellen des Wikis (ohne Klasse, mit Tabellen nebeneinander und fester Breite): umbrechen statt überstehen */
.wiki table:not([class]):has(table) { display: block; width: auto !important; }
.wiki table:not([class]):has(table) > tbody { display: block; }
.wiki table:not([class]):has(table) > tbody > tr { display: flex; flex-wrap: wrap; gap: 12px; }
.wiki table:not([class]):has(table) > tbody > tr > td { display: block; min-width: 0; max-width: 100%; }
.wiki .wikitable th, .wiki .wikitable td { border: 1px solid var(--line); padding: 5px 8px; vertical-align: top; }
.wiki .wikitable th { background: var(--surface-2); }
.wiki table.infoboxtable {
  float: right; clear: right; width: min(300px, 100%); margin: 0 0 12px 16px; border: 1px solid var(--line);
  background: var(--surface); border-radius: 8px; font-size: .9rem;
}
.wiki table.infoboxtable th, .wiki table.infoboxtable td { padding: 5px 10px; text-align: left; }
.wiki table.infoboxtable .infoboxname { font-size: 1.1rem; text-align: center; background: var(--surface-2); }
.wiki table.infoboxtable .infoboxdetails { background: var(--surface-2); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.wiki table.infoboxtable img { display: block; margin: 0 auto; max-height: 220px; width: auto; }
.wiki figure { margin: 12px 0; max-width: 100%; }
.wiki figure.mw-halign-right, .wiki .tright { float: right; clear: right; margin-left: 16px; }
.wiki figcaption { font-size: .85rem; color: var(--ink-soft); }
.wiki a.gi { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.wiki a.gi img { width: 24px; height: 24px; object-fit: contain; image-rendering: pixelated; }
.wiki a.gi .gi-icon { position: relative; display: inline-flex; flex: none; }
.wiki a.gi img.gi-star { position: absolute; top: -3px; right: -5px; width: 11px; height: 11px; }
.wiki .redlink { color: var(--ink-soft); }
.wiki blockquote { border-left: 3px solid var(--accent); margin-left: 0; padding-left: 14px; }
.wiki h2, .wiki h3 { scroll-margin-top: 80px; }
.wiki .mw-headline { scroll-margin-top: 80px; }
.wiki::after { content: ""; display: block; clear: both; }
.gk-spoiler { position: relative; border: 1px dashed var(--line); border-radius: 8px; padding: 8px 12px; margin: 8px 0; }
.gk-spoiler.hidden-spoiler > :not(.spoiler-btn) { display: none; }
.spoiler-btn { margin: 4px 0; }
.related { margin-top: 32px; border-top: 1px solid var(--line); padding-top: 8px; }

/* Spielstand */
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.field { display: grid; gap: 4px; }
.field label { font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.field textarea { min-height: 120px; resize: vertical; }
.money { display: flex; gap: 6px; }
.money input { width: 100%; min-width: 0; }
.money-in { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.coin-img { width: 16px; height: 16px; flex: none; image-rendering: pixelated; }
/* Geldbeträge mit Münz-Symbolen */
.coins { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; white-space: nowrap; }
.coin { display: inline-flex; align-items: center; gap: 2px; font-variant-numeric: tabular-nums; }
.coin img { width: 1em; height: 1em; object-fit: contain; image-rendering: pixelated; vertical-align: -0.12em; }
.panel { background: linear-gradient(180deg, var(--surface-hi), var(--surface) 160px); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px; margin-bottom: 16px; box-shadow: var(--shadow-md); }
.notice { font-size: .9rem; color: var(--ink-soft); }
.toast { position: fixed; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 9px 18px; border-radius: 999px; z-index: 20;
  box-shadow: 0 10px 30px -10px rgb(0 0 0 / .5); animation: toast-in .35s var(--ease) both; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 12px); } }
.search-hit { padding: 10px 0; border-bottom: 1px solid var(--line); }
.search-hit .t { font-weight: 700; font-size: 1.05rem; }
.search-hit mark { background: color-mix(in srgb, var(--accent) 30%, transparent); color: inherit; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* Bauen: Projekte, Materialien, Planer */
.stepper { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.btn.small-btn { padding: 4px 9px; font-size: .95rem; line-height: 1; }
.btn:disabled { opacity: .45; cursor: default; }
.pill { display: inline-block; font-size: .78rem; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink); white-space: nowrap; margin: 1px 0; }
.ok { color: var(--done); font-weight: 600; }
.miss { color: var(--tech-red); font-weight: 600; }
tr.row-ok td { opacity: .7; }
tr[data-done="1"] b a { text-decoration: line-through; color: var(--ink-soft); }
.ing img { width: 22px; height: 22px; object-fit: contain; image-rendering: pixelated; }
.plan-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .plan-grid { grid-template-columns: minmax(0, 1fr); } }
.c-mats { display: grid; gap: 6px; margin-top: 12px; }
.c-mat { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; gap: 6px; }
.c-mat input, input.have { font: inherit; font-size: .95rem; padding: 5px 8px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; min-width: 0; }
input.have { width: 80px; }
.plain-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer; }
.article-head h1 img { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; vertical-align: middle; }

/* Layouts & Checklisten (Tabellen-Ansicht) */
.ly-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ly-leg { font: inherit; font-size: .85rem; padding: 4px 9px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.ly-leg.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.ly-sheet { display: grid; width: max-content; background: #fff; color: #222; font: 11px/1.15 Arial, "Liberation Sans", sans-serif; padding: 4px; }
.ly-sheet .x { display: flex; align-items: center; min-width: 0; overflow: visible; white-space: pre; position: relative; }
.ly-sheet .x > span { position: relative; z-index: 1; padding: 0 1px; }
.ly-sheet .x.wr { white-space: pre-wrap; overflow: hidden; }
.ly-sheet .x.wr > span { overflow-wrap: anywhere; }
.ly-sheet a { color: #1155cc; }
.ly-sheet .ck { cursor: pointer; }
.ly-sheet .ck:hover { outline: 2px solid #a45f12; outline-offset: -2px; z-index: 2; }
.ly-sheet .ck:focus-visible { outline: 2px solid #a45f12; outline-offset: -2px; z-index: 2; }
.ly-sheet .ck.done { box-shadow: inset 0 0 0 999px rgb(63 125 58 / .45); }
.ly-sheet .ck.done > span { text-decoration: line-through; }
.ly-sheet .ck.done::after { content: "✓"; position: absolute; right: 1px; top: -1px; font-size: 10px; font-weight: 700; color: #1d4d1a; z-index: 3; }
.ly-sheet .hl { outline: 2px solid #d9480f; outline-offset: -2px; z-index: 2; animation: lypulse 1.2s ease-in-out 2; }
@keyframes lypulse { 50% { outline-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .ly-sheet .hl { animation: none; } }
.ly-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin: 4px 0 12px; }
.ly-tabs .chip { text-decoration: none; white-space: nowrap; }
.ly-plan { margin-bottom: 12px; }
.ly-plan .ly-leg { padding: 2px 8px; }
.ly-plan select { font: inherit; font-size: .9rem; padding: 3px 6px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; max-width: 220px; }
.ly-sheet .obj > span { font-weight: 700; letter-spacing: .02em; }
.ly-note { font: 700 10px/1 var(--f-mono); min-width: 16px; height: 16px; padding: 0 3px; border-radius: 999px; border: 0; background: #a45f12; color: #fff; cursor: pointer; }
.ly-note:focus-visible { outline: 2px solid #1e2421; }
.ly-notes { margin-top: 16px; }
.ly-notes ol { padding-left: 1.6em; display: grid; gap: 6px; max-width: 80ch; }
.ly-notes li { padding: 4px 8px; border-radius: 6px; white-space: pre-line; }
.ly-notes li.flash { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.sync-source select { font: inherit; font-size: .9rem; padding: 3px 6px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; max-width: 100%; }
.warn-note { color: var(--accent); margin: 8px 0 0; }

/* Layout-Plan im Stil der Website (nur Anzeige) */
.ly-sheet.ly-site { background: var(--surface); color: var(--ink-soft); font: 11px/1.15 var(--f-body); }
.ly-sheet.paper { background: #fff; color: #222; }
.ly-site .x.area { background: color-mix(in srgb, var(--area) 38%, var(--surface)); }
.ly-site .x.obj { background: color-mix(in srgb, var(--tile) 62%, var(--surface)); color: var(--ink); font-weight: 700; justify-content: center; text-align: center; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 25%, transparent); }
.ly-site .x.obj.done { background: color-mix(in srgb, var(--done) 55%, var(--surface)); color: var(--ink); }
.ly-site .x.obj.done::after { content: "✓"; position: absolute; right: 2px; top: 0; font-size: 10px; font-weight: 700; color: var(--ink); z-index: 3; }
.ly-site .hl { outline: 2px solid var(--accent); outline-offset: -2px; z-index: 2; }
.ly-site a { color: var(--accent); }
/* Gebäudeliste */
.ly-list td { vertical-align: middle; }
.ly-swatch { display: inline-block; min-width: 38px; padding: 2px 6px; border-radius: 4px; text-align: center; background: color-mix(in srgb, var(--tile) 62%, var(--surface)); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 25%, transparent); }
.ly-boxes { display: flex; flex-wrap: wrap; gap: 3px; max-width: 260px; }
.ly-box { width: 18px; height: 18px; padding: 0; border-radius: 4px; border: 1.5px solid var(--line); background: var(--bg); cursor: pointer; }
.ly-box.on { background: var(--done); border-color: var(--done); }
.ly-box.on::after { content: "✓"; color: var(--bg); font-size: 12px; font-weight: 700; line-height: 1; }
.ly-box:hover { border-color: var(--accent); }
/* Laufende Quests und Spielstand-Übersicht */
.pill-active { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); font-weight: 700; font-size: .72rem; letter-spacing: .03em; }
details.quest > summary .pill-active { margin-right: 4px; }
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px 24px; }
.save-info h3 { margin: 1em 0 .4em; }
.rel { display: grid; grid-template-columns: 120px minmax(60px, 1fr) 32px; gap: 8px; align-items: center; }
.ly-site .x.wr { overflow: hidden; }
.ly-site .x.wr > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ly-site .x.area { background: color-mix(in srgb, var(--area) 30%, var(--surface)); }

/* Aktive Quests (live) – Karten wie im Spielmenü „NPCs“ */
.live-bar { align-items: center; gap: 12px; flex-wrap: wrap; }
.live-grid { display: grid; align-items: start; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 12px; }
.live-card { display: grid; grid-template-columns: 76px 1fr; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px; box-shadow: var(--shadow); }
.live-portrait { display: flex; align-items: flex-start; justify-content: center; }
/* Porträt füllt die runde Fassung (Bilder mit eigenem Hintergrund wie bei Euric sonst als Rechteck im Kreis); Kopf bleibt oben im Bild */
.live-portrait img { width: 64px; height: 64px; object-fit: cover; object-position: 50% 12%; image-rendering: pixelated; background: var(--surface-2); border-radius: 50%; }
.live-body h3 { margin: 0 0 4px; font-size: 1.15rem; }
.live-rel { grid-template-columns: 70px minmax(60px, 1fr) 32px; margin-bottom: 6px; }
.live-task { display: grid; grid-template-columns: 14px 1fr; gap: 8px; align-items: start; padding: 4px 0; }
.live-dot { width: 9px; height: 9px; margin-top: .45em; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.live-txt { font-weight: 600; }
.live-sol summary { cursor: pointer; color: var(--ink-soft); }
.live-sol .body { margin-top: 6px; }
.live-done { margin-top: 16px; }
.live-done summary { cursor: pointer; }
@media (max-width: 520px) {
  .live-card { grid-template-columns: 44px 1fr; gap: 10px; padding: 12px; }
  .live-portrait img { width: 44px; height: 44px; }
}

/* Bauplan-Karte: jedes Kästchen = ein Feld im Spiel, quadratisch und auf Seitenbreite skaliert */
:root { --paper: #FFFFFF; --grid: #E2E4DE; --wall: #3A413D; --obj-line: rgb(20 24 22 / .6); --tile-mix: 88%; --obj-ink: #1E2421; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --paper: #1B2022; --grid: #2B3336; --wall: #B5BEB7; --obj-line: rgb(230 235 228 / .55); --tile-mix: 42%; --obj-ink: #E6EAE2; }
}
:root[data-theme="dark"] { --paper: #1B2022; --grid: #2B3336; --wall: #B5BEB7; --obj-line: rgb(230 235 228 / .55); --tile-mix: 42%; --obj-ink: #E6EAE2; }
.ly-mapwrap { container-type: inline-size; position: relative; background: var(--paper); border: 1px solid var(--line); padding: 6px; border-radius: var(--radius-sm); }
.ly-map { display: grid; width: 100%; margin: 0 auto;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr)); grid-template-rows: repeat(var(--m), minmax(0, 1fr));
  background-image: linear-gradient(to right, var(--grid) 1px, transparent 1px), linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: calc(100% / var(--n)) calc(100% / var(--m));
  box-shadow: inset -1px -1px 0 var(--grid);
  font: 700 clamp(5px, min(100cqw / var(--n), 100cqh / var(--m)) * .78, 15px)/1 var(--f-body); color: var(--obj-ink); }
.ly-map .x { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; overflow: hidden; position: relative; white-space: nowrap; }
.ly-map .x > span { overflow: hidden; text-overflow: ellipsis; max-width: 100%; padding: 0 1px; }
.ly-map .x.area { background: color-mix(in srgb, var(--area) 40%, transparent); color: var(--ink-soft); font-weight: 600; }
.ly-map .x.obj { background: color-mix(in srgb, var(--tile) var(--tile-mix), var(--paper)); box-shadow: inset 0 0 0 1px var(--obj-line); color: var(--obj-ink); cursor: pointer; z-index: 1; }
.ly-map .x.obj.done { background: color-mix(in srgb, var(--done) 72%, var(--paper)); }
.ly-map .x.obj.done::after { content: "✓"; position: absolute; right: 1px; top: 1px; font-size: .85em; line-height: 1; }
.ly-map .x.obj:hover, .ly-map .hl { box-shadow: inset 0 0 0 2px var(--accent); z-index: 2; }
.ly-map .hl { animation: lymap 1.2s ease-in-out 2; }
@keyframes lymap { 50% { box-shadow: inset 0 0 0 2px transparent; } }
@media (prefers-reduced-motion: reduce) { .ly-map .hl { animation: none; } }
.ly-map .ly-note { font-size: .8em; min-width: 1.6em; height: 1.6em; padding: 0 .2em; }
.ly-mapwrap:fullscreen, .ly-mapwrap.pseudo-full { container-type: size; display: flex; align-items: center; justify-content: center; padding: 12px; }
.ly-mapwrap.pseudo-full { position: fixed; inset: 0; z-index: 60; }
.ly-mapwrap:fullscreen .ly-map, .ly-mapwrap.pseudo-full .ly-map { width: min(100%, (100cqh) * var(--n) / var(--m)); }
.ly-key { white-space: nowrap; margin-left: 6px; }
.ly-key i { display: inline-block; width: 12px; height: 12px; vertical-align: -1px; margin-right: 3px; box-shadow: inset 0 0 0 1px var(--obj-line); }
.ly-key .k-open { background: color-mix(in srgb, #CFE2F3 var(--tile-mix), var(--paper)); }
.ly-key .k-done { background: color-mix(in srgb, var(--done) 72%, var(--paper)); }
.ly-list tr.flash td { background: color-mix(in srgb, var(--accent) 18%, transparent); }
/* Tabellen und Zusatzinfos: Excel-Optik, Spalten anteilig, kein Querscrollen */
.ly-side-wrap { background: #fff; border: 1px solid var(--line); padding: 4px; margin-bottom: 12px; }
.ly-sheet.ly-side, .ly-sheet.ly-table { width: 100%; padding: 0; }
.ly-side .x, .ly-table .x { white-space: pre-wrap; overflow-wrap: normal; overflow: hidden; }
.ly-side .x.wr > span, .ly-table .x.wr > span { overflow-wrap: normal; }
.ly-side-wrap { overflow-x: auto; }  /* nur auf sehr schmalen Bildschirmen, falls die Wörter nicht mehr passen */
.ly-side .x > span, .ly-table .x > span { padding: 1px 2px; }

/* lange Wörter in Karten (z. B. „Beerenstrauchsetzling“) nicht über den Rand */
.card > div { min-width: 0; }
.card .t, .card .s { overflow-wrap: anywhere; }

/* „Zuletzt aktualisiert“ in der Kopfzeile */
.sidenav a.save-stamp { display: flex; align-items: flex-start; gap: 8px; font-size: .8rem; line-height: 1.3; color: var(--ink-soft); text-decoration: none;
  padding: 7px 10px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.save-stamp .dot { margin-top: .35em; }
@media (max-width: 820px) { .sidenav a.save-stamp { margin-bottom: 0; align-items: center; white-space: nowrap; } .save-stamp .dot { margin-top: 0; } }
.sidenav a.save-stamp[hidden] { display: none; }
.save-stamp .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-soft); flex: none; }
.save-stamp[data-state="ok"] .dot { background: var(--done); }
.save-stamp[data-state="ok"][data-live="1"] .dot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--done) 25%, transparent); }
.save-stamp[data-state="new"] .dot, .save-stamp[data-state="busy"] .dot { background: var(--accent); }
.sidenav a.save-stamp[data-state="new"] { color: var(--accent); border-color: var(--accent); }
.sidenav a.save-stamp:hover { border-color: var(--accent); color: var(--ink); }
.stamp-line { font-size: .88rem; color: var(--ink-soft); margin: 0 0 12px; }
.update-bar { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 70; display: flex; gap: 12px; align-items: center;
  background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: 8px; box-shadow: 0 4px 16px rgb(0 0 0 / .25); max-width: calc(100vw - 32px); }
.starter-box { display: grid; gap: 4px; margin: 8px 0; }
.sync-opts { display: grid; gap: 8px; margin-top: 10px; }
.sync-opts select { font: inherit; font-size: .9rem; padding: 3px 6px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; }
.lan-box { margin-top: 6px; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 6px; display: grid; gap: 4px; }

/* Bauplaner: Voraussetzungen und Herstellungs-Reihenfolge */
.prereq { border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 6px; padding: 10px 12px; margin: 8px 0 12px; background: var(--bg); }
.prereq li { padding: 4px 0; }
.prereq .pre-note { color: var(--ink-soft); }
.flow-h { margin-top: 22px; }
.flow { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; counter-reset: none; }
.flow > li { border-left: 3px solid var(--line); padding-left: 12px; }
.flow-stage { font: 600 .78rem/1.2 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 4px; }
.flow-step { padding: 6px 0; border-bottom: 1px dashed var(--line); }
.flow-step:last-child { border-bottom: 0; }
.flow-step.done { opacity: .6; }
.flow-runs { display: inline-block; min-width: 4.2em; font-family: var(--f-mono); font-weight: 600; color: var(--accent); }
.flow-ratio { font-family: var(--f-mono); font-size: .8rem; color: var(--ink); margin: 2px 0; }
.spare { color: var(--accent); font-weight: 600; }
.remote-form { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.remote-form input { flex: 1 1 200px; font: inherit; font-size: .9rem; padding: 4px 8px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; }
.login-box { max-width: 460px; margin: 40px auto; }
.login-box input { width: 100%; font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); }
.mac-setup { margin: 6px 0; }
.mac-setup summary { cursor: pointer; font-weight: 600; }
pre.cmd { white-space: pre-wrap; word-break: break-all; font: .8rem/1.4 var(--f-mono); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 8px; margin: 6px 0; user-select: all; }
/* Waren mit Qualitätsstufe: Artikelbild + kleiner Stern */
.star-icon { position: relative; display: inline-flex; flex: none; }
.star-icon .star-badge { position: absolute; top: -4px; right: -6px; line-height: 0; }
.star-icon .star-badge img { width: 10px !important; height: 10px !important; }
/* Preise in Wiki-Artikeln: Münzen in normaler Schriftgröße statt 24-px-Symbol */
.wiki a.gi.gi-money { gap: 0; }
.wiki a.gi .coin img { width: 1em; height: 1em; }
/* Fandom-Symbole (<svg><use href="#wds-icons-…">) ohne Größe und ohne Sprite – ausblenden */
.wiki svg:has(> use[href^="#wds-"]), .wiki svg:has(> use[*|href^="#wds-"]) { display: none; }
/* Wochentag: Rad wie im Spiel, Leiste, Wochenkarte */
.day-top { display: flex; gap: 24px; align-items: center; margin: 14px 0 16px; }
.day-top-main { flex: 1; min-width: 0; display: grid; gap: 14px; }
/* Fehlende Technologie an einer Anforderung */
.tech-need { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; padding: 0 6px; border-radius: 999px; font-size: .74rem; white-space: nowrap;
  border: 1px dashed color-mix(in srgb, var(--accent) 60%, transparent); color: var(--ink-soft); cursor: help; }
.tech-need a { color: var(--accent); }
.tech-need .tp { font-size: .7rem; }
/* Herkunft eines Layout-Häkchens: erkennt der Sync oder nur von Hand */
.ly-src { display: inline-block; padding: 0 6px; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .02em; border: 1px solid var(--line); cursor: help; }
.ly-src.sync { color: var(--done); border-color: color-mix(in srgb, var(--done) 45%, transparent); }
.ly-src.hand { color: var(--ink-soft); }
/* Ergebnis der Häkchen-Prüfung */
.check-report { margin: 0 0 .8em; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.check-report summary { cursor: pointer; }
.check-report ul { margin: .4em 0 0; padding-left: 1.2em; columns: 2 260px; }
/* Werte aus den Spieldaten (im Wiki fehlend) */
.from-game { border-bottom: 1px dotted currentColor; cursor: help; }
.wk-wheel { position: relative; width: 208px; height: 208px; flex: none; }
.wk-wheel img { position: absolute; image-rendering: pixelated; }
.wk-frame { position: absolute; inset: 0; width: 208px; height: 208px; overflow: visible; }
.wk-wheel svg.wk-frame { filter: drop-shadow(0 6px 14px rgb(0 0 0 / .45)); }
.wk-portrait { left: 50%; top: 50%; transform: translate(-50%, -48%); max-width: 96px; max-height: 96px; clip-path: circle(48px at 50% 50%); }
.wk-sym { width: 34px; height: 34px; }
.wk-strip { display: flex; gap: 6px; flex-wrap: wrap; }
.wk-day { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 6px; border-radius: 8px; border: 1px solid var(--line); min-width: 52px; }
.wk-day img { width: 28px; height: 28px; image-rendering: pixelated; }
.wk-day span { font-size: .72rem; color: var(--ink-soft); }
.wk-day.on { border-color: var(--wk); background: color-mix(in srgb, var(--wk) 22%, transparent); }
.wk-day.on span { color: var(--ink); font-weight: 700; }
.wk-strip.small { gap: 3px; flex-wrap: nowrap; }
.wk-strip.small .wk-day { min-width: 0; padding: 3px; border-radius: 6px; flex: 1; }
.wk-strip.small .wk-day img { width: 20px; height: 20px; }
.wk-strip.small .wk-day span { display: none; }
.wk-nav { display: block; padding: 6px 8px 10px; text-decoration: none; }
.day-top-main .wk-strip { display: none; }
/* Handy: Rad verkleinert links, Tag und Name daneben, Besuch und Kennzahlen darunter über die volle Breite */
@media (max-width: 640px) {
  .day-top { display: grid; grid-template-columns: 150px minmax(0, 1fr); grid-template-rows: 1fr auto auto auto 1fr; gap: 0 14px; align-items: center; margin-top: 10px; }
  .day-top .wk-wheel { zoom: .72; grid-column: 1; grid-row: 1 / 6; }
  .day-top-main, .day-top .day-hero { display: contents; }
  .day-top .day-num { grid-column: 2; grid-row: 2; font-size: 2.1rem; }
  .day-top .day-name { grid-column: 2; grid-row: 3; margin-top: 2px; }
  .day-top .day-updated { grid-column: 2; grid-row: 4; font-size: .82rem; line-height: 1.35; }
  .day-top .day-visit { grid-column: 1 / -1; grid-row: 6; margin-top: 12px; }
  .day-top .day-facts { grid-column: 1 / -1; grid-row: 7; margin-top: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .day-top:not(:has(.wk-wheel)) { display: block; }
  .day-top:not(:has(.wk-wheel)) .day-top-main, .day-top:not(:has(.wk-wheel)) .day-hero { display: grid; }
}
@media (max-width: 380px) { .day-top { grid-template-columns: 132px minmax(0, 1fr); gap: 0 12px; } .day-top .wk-wheel { zoom: .635; } }
.wk-list { position: relative; margin: 10px 0 0; gap: 0; }
.wk-list::before { content: ""; position: absolute; left: 15px; top: 24px; bottom: 24px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--line), color-mix(in srgb, var(--line) 30%, transparent)); }
.wk-row { position: relative; display: grid; grid-template-columns: 32px 34px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 8px 10px 0; border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); border-radius: 10px; transition: background .2s; }
.wk-row:first-child { border-top: 0; }
.wk-row:hover { background: color-mix(in srgb, var(--wk) 7%, transparent); }
.wk-row.on { background: linear-gradient(90deg, color-mix(in srgb, var(--wk) 20%, transparent), color-mix(in srgb, var(--wk) 5%, transparent)); border-top-color: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wk) 35%, transparent); }
.wk-row.on + .wk-row { border-top-color: transparent; }
.wk-row-sym { position: relative; z-index: 1; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 2px var(--surface); }
.wk-row-sym img { width: 28px; height: 28px; image-rendering: pixelated; }
.wk-row.on .wk-row-sym { box-shadow: 0 0 0 2px var(--surface), 0 0 14px 2px color-mix(in srgb, var(--wk) 60%, transparent); }
.wk-row-pic { width: 27px; height: 42px; object-fit: contain; image-rendering: pixelated; justify-self: center; }
.wk-row-body { min-width: 0; display: grid; gap: 4px; }
.wk-row-top { display: flex; align-items: baseline; gap: 10px; }
.wk-row-name { flex: 1; min-width: 0; }
.wk-row-name b a { color: var(--ink); text-decoration-color: color-mix(in srgb, var(--wk) 70%, transparent); text-decoration-thickness: 2px; }
.wk-when { display: grid; justify-items: end; font-weight: 700; white-space: nowrap; line-height: 1.15; }
.wk-when .small { font-weight: 500; }
.wk-row.on .wk-when { color: color-mix(in srgb, var(--wk) 60%, var(--ink)); }
/* Geforderte Gegenstände unter den Quests, als Chips */
.wk-need { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: .85rem; min-width: 0; padding-top: 6px; border-top: 1px dashed color-mix(in srgb, var(--line) 80%, transparent); }
.wk-need-l { font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-right: 2px; }
.wk-need .ing { margin: 0; padding: 2px 8px 2px 4px; border-radius: 999px; background: var(--surface-2); overflow-wrap: anywhere; white-space: normal; }
.wk-need .ing img { width: 20px; height: 20px; object-fit: contain; image-rendering: pixelated; }
@media (max-width: 480px) { .wk-row { grid-template-columns: 32px minmax(0, 1fr); } .wk-row-pic { display: none; } }

/* Breite Bildschirme: Kopfzeile ebenfalls linksbündig, Startseiten-Raster nutzen die Breite */
@media (min-width: 1400px) {
  body { padding-inline: 24px; }
  .topbar { margin-inline: -24px; padding-inline: 24px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}
/* Startseite: links Tag, Fortschritt und Quests untereinander, rechts die Woche über die volle Höhe */
.home-top { margin-top: 18px; }
.home-main { display: grid; gap: 16px; align-content: start; min-width: 0; }
.home-main > .panel { margin: 0; }
.home-top > .wk-card { margin: 16px 0 0; }
@media (min-width: 1280px) {
  .home-top { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(400px, 1fr); gap: 16px; align-items: start; }
  .home-top > .wk-card { margin: 0; position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow: auto; scrollbar-width: thin; }
}
.wk-quests { margin: 2px 0 0; }
.wk-quests li { padding: 1px 0; overflow-wrap: anywhere; }
.wk-quests .pill-active { margin-right: 2px; }

/* ================================================================ Design v2 */
/* Panel-Kopf: Titel in der Zierschrift, Zusatzinfo rechts, feine Trennlinie */
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; padding-bottom: 10px; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.panel-head h2 { margin: 0; font: 400 1.6rem/1.1 var(--f-display); letter-spacing: .015em; display: inline-flex; align-items: center; gap: 10px; }
.panel-foot { margin: 12px 0 0; }
.badge { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; font: 600 .75rem/1 var(--f-mono); background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--ink); letter-spacing: 0; }
.btn .badge { height: 18px; min-width: 18px; padding: 0 5px; font-size: .7rem; background: color-mix(in srgb, var(--accent-ink) 22%, transparent); color: inherit; }
/* Abschnittsüberschriften mit auslaufender Linie */
main > h2 { display: flex; align-items: center; gap: 14px; }
main > h2::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }
/* Kopfbereich der Startseite */
.hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; }
.hero-txt { min-width: 0; flex: 1 1 520px; }
.hero .eyebrow { display: flex; align-items: center; gap: 10px; margin: 0; }
.hero .eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--accent); flex: none; }
.hero .lede { margin-bottom: 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-actions .btn, .btn:has(.nav-ic) { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; padding: 9px 14px; }
.btn .nav-ic { width: 16px; height: 16px; opacity: .9; }
/* Kennzahlen mit Symbol und Prozent */
.stat-val { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.stat .eyebrow { display: inline-flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat .eyebrow .nav-ic { width: 14px; height: 14px; color: var(--accent); opacity: 1; }
.stat-pct { font-size: .75rem; color: var(--ink-soft); }
.stat .v { font-size: 1.25rem; }
.stat .v b { font-weight: 600; }
.stat .v .muted { font-size: .8em; }
.prog-panel { container-type: inline-size; }
/* Im Fortschritts-Panel als ausgerichtete Zeilen: Bereich | Balken | Wert und Prozent */
.prog-panel .stat-row { margin-top: 10px; grid-template-columns: 1fr; gap: 2px; }
.prog-panel .stat { grid-template-columns: minmax(150px, 190px) minmax(0, 1fr) minmax(150px, auto); grid-template-areas: "l b v"; align-items: center; gap: 16px;
  padding: 8px 10px; border-color: transparent; background: none; border-radius: 8px; }
.prog-panel .stat:hover { transform: none; box-shadow: none; border-color: var(--line); background: color-mix(in srgb, var(--bg) 45%, transparent); }
.prog-panel .stat .eyebrow { grid-area: l; font-size: .72rem; }
.prog-panel .stat .progress { grid-area: b; height: 10px; }
.prog-panel .stat-val { grid-area: v; justify-content: flex-end; gap: 14px; }
.prog-panel .stat .v { font-size: 1.05rem; }
.prog-panel .stat-pct { min-width: 3.2em; text-align: right; }
@container (max-width: 560px) { .prog-panel .stat { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l v" "b b"; gap: 6px 12px; } }
.prog-panel .stat { background: color-mix(in srgb, var(--bg) 45%, transparent); box-shadow: none; }
/* Gesamtfortschritt als Ring */
.ring { --p: 0; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: conic-gradient(var(--done) calc(var(--p) * 1%), var(--surface-2) 0); }
.ring::before { content: ""; grid-area: 1 / 1; width: 36px; height: 36px; border-radius: 50%; background: var(--surface); }
.ring .num { grid-area: 1 / 1; position: relative; font-size: .7rem; font-weight: 600; }
/* Laufende Quests auf der Startseite: zweispaltig */
.aq-list { margin-top: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 18px; }
.aq-list li { position: relative; padding-left: 16px; }
.aq-list li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
/* DLC-Karten mit farbiger Kante */
.dlc-card { --dc: var(--ink-soft); position: relative; overflow: hidden; }
.dlc-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--dc); }
.dlc-card[data-dlc="Breaking Dead"] { --dc: var(--tech-green); }
.dlc-card[data-dlc="Stranger Sins"] { --dc: var(--tech-red); }
.dlc-card[data-dlc="Game of Crone"] { --dc: var(--accent); }
.dlc-card[data-dlc="Better Save Soul"] { --dc: var(--tech-blue); }
.dlc-card[data-dlc="Hauptspiel"] { --dc: var(--moss); }
.dlc-card:hover { border-color: var(--dc); }
/* Wochenrad: Leuchten in der Tagesfarbe hinter dem Rad */
.wk-wheel::before { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--wk, var(--accent)) 45%, transparent), transparent); filter: blur(10px); }

/* ================================================================ Animationen */
@property --p { syntax: "<number>"; inherits: false; initial-value: 0; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes grow { from { transform: scaleX(0); } }
@keyframes ring-fill { from { --p: 0; } }
@keyframes glow { 0%, 100% { opacity: .55; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes halo { 0%, 100% { box-shadow: 0 0 0 2px var(--surface), 0 0 8px 1px color-mix(in srgb, var(--wk) 45%, transparent); } 50% { box-shadow: 0 0 0 2px var(--surface), 0 0 18px 4px color-mix(in srgb, var(--wk) 70%, transparent); } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c, var(--accent)) 55%, transparent); } 80%, 100% { box-shadow: 0 0 0 7px transparent; } }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } }

/* Seitenwechsel: Blöcke gleiten gestaffelt herein */
main.enter > * { animation: rise .5s var(--ease) both; }
main.enter > :nth-child(2) { animation-delay: .04s; } main.enter > :nth-child(3) { animation-delay: .08s; }
main.enter > :nth-child(4) { animation-delay: .12s; } main.enter > :nth-child(5) { animation-delay: .16s; }
main.enter > :nth-child(6) { animation-delay: .2s; } main.enter > :nth-child(n+7) { animation-delay: .24s; }
main.enter .home-top > .wk-card { animation: rise .55s var(--ease) .12s both; }
main.enter .home-main > * { animation: rise .55s var(--ease) both; }
main.enter .home-main > :nth-child(2) { animation-delay: .1s; } main.enter .home-main > :nth-child(3) { animation-delay: .2s; }
main.enter .wk-row { animation: rise .45s var(--ease) both; animation-delay: calc(.2s + var(--k, 0) * .06s); }
main.enter .fact { animation: rise .45s var(--ease) both; }
main.enter .fact:nth-child(2) { animation-delay: .06s; } main.enter .fact:nth-child(3) { animation-delay: .12s; } main.enter .fact:nth-child(4) { animation-delay: .18s; }
main.enter .grid > *, main.enter .live-grid > *, main.enter .todo-grid > * { animation: rise .45s var(--ease) both; }
main.enter .grid > :nth-child(2), main.enter .live-grid > :nth-child(2), main.enter .todo-grid > :nth-child(2) { animation-delay: .04s; }
main.enter .grid > :nth-child(3), main.enter .live-grid > :nth-child(3), main.enter .todo-grid > :nth-child(3) { animation-delay: .08s; }
main.enter .grid > :nth-child(4), main.enter .live-grid > :nth-child(4), main.enter .todo-grid > :nth-child(4) { animation-delay: .12s; }
main.enter .grid > :nth-child(n+5), main.enter .live-grid > :nth-child(n+5), main.enter .todo-grid > :nth-child(n+5) { animation-delay: .16s; }
/* Balken füllen sich, Ring läuft voll */
main.enter .progress > span { animation: grow .9s var(--ease) .25s both; }
main.enter .ring { animation: ring-fill 1.1s var(--ease) .2s both; }
/* Wochenrad dreht sich beim Öffnen an seinen Platz, Symbole und Porträt bleiben aufrecht */
/* Dauerhaft und dezent: Leuchten hinter dem Rad, heutiger Tag, laufende Quests, Live-Punkt */
.wk-row.on .wk-row-sym { animation: halo 3s ease-in-out infinite; }
.live-dot { animation: ping 2.4s ease-out infinite; }
.save-stamp[data-state="ok"][data-live="1"] .dot { --c: var(--done); animation: ping 2.4s ease-out infinite; }
/* Aufklappen */
details[open] > .body, details[open] > .econ-body, .live-sol[open] .body, .calc-help details[open] > :not(summary) { animation: drop .25s var(--ease) both; }
details > summary { transition: color .15s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .card:hover, .stat:hover, .fact:hover { transform: none; }
}

/* ================================================================ Feinschliff */
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--ink); }
html { scrollbar-color: color-mix(in srgb, var(--ink-soft) 45%, transparent) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink-soft) 40%, transparent); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--accent) 60%, transparent); }
::-webkit-scrollbar-track { background: transparent; }
/* Karten der anderen Seiten im selben Stil wie die Panels */
.live-card, .todo-cat, .econ-trader, details.quest, .cmp, .calc-help details { background: linear-gradient(180deg, var(--surface-hi), var(--surface) 120px); border-radius: var(--radius); }
.live-card, .todo-cat { box-shadow: var(--shadow-md); transition: border-color .2s; }
.live-card:hover, .todo-cat:hover, .econ-trader:hover, details.quest:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.econ-trader, details.quest { transition: border-color .2s; }
.econ-trader[open], details.quest[open] { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.live-portrait img { box-shadow: 0 0 0 2px var(--line); }
.todo-head h3 a { color: var(--ink); text-decoration: none; }
.todo-head h3 a:hover { color: var(--accent); }
/* Handy: Kopfzeile nicht mitscrollen, DLC-Filter als wischbare Zeile */
@media (max-width: 640px) {
  .topbar { position: static; gap: 10px; }
  .dlc-filter { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding-inline: 16px; scrollbar-width: none; width: calc(100% + 32px); }
  .dlc-filter::-webkit-scrollbar { display: none; }
  .dlc-filter .chip { flex: none; }
  .hero-actions .btn { padding: 8px 12px; }
  .panel { padding: 14px; }
  .panel-head h2 { font-size: 1.4rem; }
}

/* ================================================================ Layout-Plan: Namen auf den Kacheln + Tooltip */
.ly-map .x.obj { flex-direction: column; gap: 1px; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; transition: filter .15s; }
.ly-map .x.obj:hover { filter: brightness(1.08); }
.ly-map .obj-name { font-weight: 700; font-size: .8em; line-height: 1.05; white-space: normal; text-align: center; overflow-wrap: normal; hyphens: auto;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ly-map .obj-code { font-size: .68em; font-weight: 600; opacity: .65; line-height: 1; }
/* Passt der Name nicht auf die Kachel, zuerst das Kürzel weglassen, sonst nur das Kürzel zeigen (misst app.js) */
.ly-map .obj.no-code .obj-code { display: none; }
.ly-map .obj.code-only .obj-name { display: none; }
.ly-map .obj.code-only .obj-code { display: inline; font-size: 1em; opacity: 1; }
.ly-tip { position: absolute; z-index: 30; width: max-content; max-width: min(320px, calc(100% - 8px)); pointer-events: none;
  padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  box-shadow: 0 14px 34px -12px rgb(0 0 0 / .55); font: .85rem/1.35 var(--f-body); animation: tip-in .14s var(--ease) both; }
.ly-tip[hidden] { display: none; }
@keyframes tip-in { from { opacity: 0; transform: translateY(4px); } }
.tip-head { display: flex; align-items: center; gap: 8px; }
.tip-head > img { width: 30px; height: 30px; object-fit: contain; image-rendering: pixelated; flex: none; }
.tip-title { display: grid; min-width: 0; }
.tip-title b { font-size: .98rem; }
.tip-en { font-size: .75rem; color: var(--ink-soft); }
.tip-code { margin-left: auto; font: 600 .7rem/1 var(--f-mono); padding: 3px 6px; border-radius: 999px; background: var(--surface-2); color: var(--ink-soft); }
.tip-status { margin-top: 6px; font-weight: 600; color: var(--accent); }
.tip-status.ok { color: var(--done); }
.tip-proj { margin-top: 2px; color: var(--ink-soft); }
.tip-mats { display: flex; flex-wrap: wrap; gap: 3px 4px; margin-top: 6px; }
.tip-mats .ing { margin: 0; padding: 1px 7px 1px 3px; border-radius: 999px; background: var(--surface-2); font-size: .78rem; }
.tip-mats .ing img { width: 18px; height: 18px; }
.tip-note { margin-top: 4px; font-size: .78rem; color: var(--ink-soft); font-style: italic; }
.tip-desc { margin: 6px 0 0; padding-top: 6px; border-top: 1px dashed var(--line); font-size: .8rem; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { .ly-tip { animation: none; } }

/* ================================================================ Seit dem letzten Sync + Verlaufskurven */
.dchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.dchip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: .85rem; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 45%, transparent); }
.dchip b { font-family: var(--f-mono); font-weight: 600; font-size: .85rem; }
.dchip.up { border-color: color-mix(in srgb, var(--done) 45%, var(--line)); }
.dchip.up b { color: var(--done); }
.dchip.down { border-color: color-mix(in srgb, var(--tech-red) 45%, var(--line)); }
.dchip.down b { color: var(--tech-red); }
.dchip.tp-r b { color: var(--tech-red); } .dchip.tp-g b { color: var(--tech-green); } .dchip.tp-b b { color: var(--tech-blue); }
.dchip .coins { font-family: var(--f-mono); }
.chg-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 12px; }
.chg-col { padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 45%, transparent); font-size: .9rem; }
.chg-col .plain-list { margin-top: 4px; }
.chg-col li { position: relative; padding-left: 14px; }
.chg-col li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.chg-done li::before { background: var(--done); }
.chg-done .eyebrow { color: var(--done); }
.chg-inv { display: grid; gap: 10px; margin-top: 12px; }
.chg-inv .rec-in { margin-top: 4px; }
.chg-inv .ing img { width: 20px; height: 20px; }
.sparks { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.spark { margin: 0; display: grid; gap: 4px; min-width: 0; }
.spark figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.spark figcaption b { font-family: var(--f-mono); font-weight: 600; }
.spark svg { width: 100%; height: auto; display: block; overflow: visible; }
.spark-line { fill: none; stroke: var(--sc); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark-area { fill: color-mix(in srgb, var(--sc) 16%, transparent); stroke: none; }
.spark-dot { fill: var(--sc); stroke: var(--surface); stroke-width: 2; }
@keyframes draw { from { stroke-dashoffset: 1; } }
main.enter .spark-line { stroke-dasharray: 1; animation: draw 1.2s var(--ease) .3s both; }
main.enter .spark-area, main.enter .spark-dot { animation: fade .6s ease 1.1s both; }

/* ================================================================ Handel & Herstellen */
.trade-panel { margin-top: 16px; }
.tr-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 12px 28px; margin-top: 8px; }
.tr-h { display: flex; align-items: center; gap: 8px; font-size: 1rem; margin: 10px 0 6px; }
.tr-h .nav-ic { color: var(--accent); opacity: 1; }
.tr-list { gap: 0; }
.tr-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "i v" "w v" "x x"; gap: 2px 12px; align-items: center; padding: 8px 6px; border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); border-radius: 8px; transition: background .15s; }
.tr-row:first-child { border-top: 0; }
.tr-row:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.tr-row > .ing { grid-area: i; margin: 0; font-weight: 600; white-space: normal; }
.tr-row > .ing img { width: 26px; height: 26px; }
.tr-who { grid-area: w; color: var(--ink-soft); }
.tr-who .pill { font-size: .7rem; padding: 1px 7px; }
.tr-val { grid-area: v; display: grid; justify-items: end; gap: 1px; white-space: nowrap; }
.tr-val b { font-family: var(--f-mono); font-weight: 600; }
.tr-ins { grid-area: x; display: flex; flex-wrap: wrap; align-items: center; gap: 3px 5px; margin-top: 4px; }
.tr-ins .ing { margin: 0; padding: 1px 7px 1px 3px; border-radius: 999px; background: var(--surface-2); font-size: .78rem; }
.tr-ins .ing img { width: 18px; height: 18px; }
.tr-ins .ing.short { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tech-red) 55%, transparent); }
.tr-have { color: var(--ink-soft); font-family: var(--f-mono); font-size: .9em; }
.tr-sum { margin: 8px 0 0; }

/* ================================================================ Mods */
.mods-status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
.ms-item { display: grid; gap: 2px; min-width: 0; }
.ms-item code { font-size: .8rem; overflow-wrap: anywhere; }
.ms-note { flex-basis: 100%; margin: 0; }
.mods-status .btn { margin-left: auto; }
.pill-ok { background: color-mix(in srgb, var(--done) 20%, transparent); color: var(--done); font-weight: 600; }
.pill-warn { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); font-weight: 600; }
.mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap: 14px; align-items: start; margin-bottom: 16px; }
.mod-card { background: linear-gradient(180deg, var(--surface-hi), var(--surface) 140px); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px 18px; box-shadow: var(--shadow-md); min-width: 0; }
.mod-card.missing { opacity: .6; }
.mod-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.mod-head h2 { margin: 0; font: 400 1.5rem/1.1 var(--f-display); letter-spacing: .015em; }
.mod-link { margin-left: auto; }
.mod-text { margin: 10px 0 6px; }
.mod-points { margin: 0; padding-left: 1.2em; color: var(--ink-soft); font-size: .92rem; }
.mod-set { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 8px; }
.mod-set > summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-weight: 700; padding: 4px 0; }
.set-sec h4 { margin: 14px 0 4px; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.set-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 8px; border-radius: 8px; border-top: 1px solid color-mix(in srgb, var(--line) 50%, transparent); }
.set-row:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.set-row.changed { box-shadow: inset 3px 0 0 var(--accent); }
.set-txt { min-width: 0; overflow-wrap: anywhere; }  /* lange Zonen-Namen ohne Leerzeichen (Custom_Zone_…) */
.set-txt p { margin: 2px 0 0; font-size: .82rem; color: var(--ink-soft); }
.set-key { font: .7rem var(--f-mono); color: var(--ink-soft); opacity: .8; }
.set-def code, .set-color code { font-size: .78rem; }
.set-ctl input[type="number"], .set-ctl input[type="text"], .set-ctl select { font: inherit; font-size: .9rem; padding: 5px 8px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; max-width: 220px; }
.set-ctl input[type="number"] { width: 100px; }
.set-ctl input[type="text"] { width: 190px; font-family: var(--f-mono); font-size: .8rem; }
.set-ctl :disabled { opacity: .55; cursor: not-allowed; }
.set-color { display: inline-flex; align-items: center; gap: 8px; }
.set-color input[type="color"] { width: 38px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; }
/* Schalter */
.switch { position: relative; display: inline-block; width: 42px; height: 24px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); transition: background .2s, border-color .2s; pointer-events: none; }
.switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink-soft); transition: transform .2s var(--ease), background .2s; }
.switch input:checked + span { background: color-mix(in srgb, var(--done) 35%, var(--surface-2)); border-color: var(--done); }
.switch input:checked + span::after { transform: translateX(18px); background: var(--done); }
.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch input:disabled { cursor: not-allowed; }
.switch input:disabled + span { opacity: .55; }
@media (max-width: 560px) { .set-row { grid-template-columns: 1fr; } .set-ctl input[type="text"] { width: 100%; } }

/* „Zuletzt aktualisiert“ in der Tagesübersicht */
.day-updated { margin-top: 6px; font-size: .9rem; color: var(--ink-soft); }
.day-updated b { color: var(--ink); font-weight: 600; }
.sidenav a.wk-nav { display: block; }
.sidenav a.wk-nav:hover { background: none; }

/* ================================================================ Preis-Logbuch */
.price-log td { vertical-align: middle; white-space: nowrap; }
.price-log td .ing { white-space: normal; }
.price-log .pill { font-size: .7rem; }
/* Kennzahlen-Zeilen außerhalb der Tagesübersicht (Wirtschaft, Mein Spielstand): Beschriftung über dem Wert */
.day-facts > div:not(.fact) { display: grid; gap: 4px; min-width: 0; align-content: start; }
.day-facts > div:not(.fact) .v { font-family: var(--f-mono); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.panel.day-facts { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

/* ================================================================ Heute im Spiel: Zeitleiste */
.ev-h { margin: 14px 0 4px; font-size: .95rem; }
.ev-list { gap: 0; position: relative; }
.ev-list::before { content: ""; position: absolute; left: 44px; top: 6px; bottom: 6px; width: 2px; background: color-mix(in srgb, var(--line) 70%, transparent); border-radius: 2px; }
.ev { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 5px 0; font-size: .9rem; position: relative; }
.ev::before { content: ""; position: absolute; left: 41px; top: .75em; width: 8px; height: 8px; border-radius: 50%; background: var(--line); box-shadow: 0 0 0 3px var(--surface); }
.ev-trade::before { background: var(--accent); } .ev-done::before { background: var(--done); } .ev-new::before { background: var(--tech-blue); } .ev-day::before { background: var(--tech-red); }
.ev-t { color: var(--ink-soft); font-size: .78rem; text-align: right; }
.ev-b { min-width: 0; }
.ev-b .rec-in { display: inline-flex; }
.ev-b .ing img { width: 18px; height: 18px; }
main.enter .ev { animation: rise .4s var(--ease) both; }

.chg-head-r { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; justify-content: flex-end; }
.chg-head-r .seg button { padding: 4px 12px; font-size: .85rem; }
.week-table td { vertical-align: middle; white-space: nowrap; }
.week-table tr.cur td { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.wk-row-sym-s { width: 20px; height: 20px; image-rendering: pixelated; vertical-align: -5px; margin-right: 6px; }
.changes-panel .table-wrap { margin-top: 12px; }
/* Herstellen: Rechnung roh → verarbeitet → Mehrwert */
.tr-make { grid-template-areas: "i v" "w v" "c c" "f f"; }
.tr-calc { grid-area: c; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 4px 12px; align-items: baseline; margin-top: 6px; padding: 8px 10px;
  border-radius: 8px; background: color-mix(in srgb, var(--bg) 45%, transparent); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); font-size: .82rem; }
.tc-l { font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.tc-m { min-width: 0; }
.tc-m .ing { margin: 0; }
.tc-m .ing img { width: 18px; height: 18px; }
.tc-r { display: grid; justify-items: end; white-space: nowrap; font-weight: 600; }
.tc-r small { font: 400 .66rem var(--f-body); color: var(--ink-soft); }
.tr-calc .ing.short { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tech-red) 55%, transparent); border-radius: 999px; }
.tr-foot { grid-area: f; margin-top: 4px; }
@media (max-width: 560px) { .tr-calc { grid-template-columns: minmax(0, 1fr) auto auto; } .tc-l { grid-column: 1 / -1; margin-top: 4px; } }
.tc-r > span { display: inline-flex; align-items: baseline; gap: 2px; white-space: nowrap; }

/* Max. Verkaufsmenge je Geldbörse */
.max-q { display: inline-block; padding: 0 6px; border-radius: 999px; font-size: .72rem; font-weight: 600; line-height: 1.5; background: color-mix(in srgb, var(--tech-blue) 16%, transparent); color: var(--ink); white-space: nowrap; cursor: help; }
.calc-maxinfo { color: var(--ink-soft); }
.calc-maxinfo.over { color: var(--tech-red); font-weight: 700; }
.calc-item .linkish { font-size: .78rem; }

/* ================================================================ Herstellen: Baum, Karten, Bilder-Gleichung */
.flow-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-top: 22px; }
.flow-head .flow-h { margin: 0; }
.flow-head .seg button { padding: 4px 12px; font-size: .85rem; }
.cg { margin-top: 14px; }
.cg-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 8px; font-size: 1rem; }
.cg-h .small { font-weight: 400; }
.ct { display: grid; gap: 8px; }
.cn { position: relative; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; background: color-mix(in srgb, var(--bg) 40%, transparent); }
.cn.done { border-color: color-mix(in srgb, var(--done) 45%, var(--line)); background: color-mix(in srgb, var(--done) 8%, transparent); }
.cn-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.cn-head > img { width: 28px; height: 28px; object-fit: contain; image-rendering: pixelated; flex: none; }
.cn-t { flex: 1 1 220px; min-width: 0; }
.cn-t b { font-size: 1rem; }
.cn-st { font-size: .85rem; color: var(--ink-soft); }
.cn-have { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.cn-have input.have { width: 70px; }
/* Häkchen neben „vorhanden“: nur das Kästchen ohne Text (Beschriftung in title/aria-label); der Rand dient als Klickfläche */
.cn-ok { display: inline-flex; align-items: center; justify-content: center; flex: none; padding: 3px; margin-left: -3px; border-radius: 6px; cursor: pointer; }
.cn-ok:hover { background: color-mix(in srgb, var(--done) 14%, transparent); }
.cn-ok input { accent-color: var(--done); margin: 0; width: 18px; height: 18px; cursor: pointer; }
.cn-sum, .cn-okmsg { margin: 6px 0 0; }
.cn-kids { margin: 10px 0 0 14px; padding-left: 16px; border-left: 2px solid color-mix(in srgb, var(--line) 80%, transparent); display: grid; gap: 8px; }
.cn-kids > .cn::before { content: ""; position: absolute; left: -18px; top: 22px; width: 16px; height: 2px; background: color-mix(in srgb, var(--line) 80%, transparent); }
.cn-ref { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-style: dashed; font-size: .88rem; }
.cn-ref img { width: 20px; height: 20px; object-fit: contain; image-rendering: pixelated; }
.cn-base .cn-head > img { width: 24px; height: 24px; }
.data .cn-have { margin: 0; }
@media (max-width: 560px) { .cn-have { margin-left: 0; width: 100%; } .cn-kids { margin-left: 4px; padding-left: 10px; } .cn-kids > .cn::before { left: -12px; width: 10px; } }

/* Händler-Ankaufspreise laut Bestand (app/pricing.js): weicht der aktuelle Preis vom Wiki-Preis ab, ist er gestrichelt unterstrichen */
.px-live { border-bottom: 1px dashed currentColor; cursor: help; }
.calc-maxinfo { white-space: nowrap; }

/* ---------------------------------------------------------------- Technologien: Bäume wie im Spiel (Taste T)
   Brett mit Steinrahmen, Knoten als Tafeln (Name, Symbole der Freischaltungen, Kosten als Tropfen), gelernte Knoten golden,
   Linien golden ab gelernter Voraussetzung. Maße passend zu TT_W / TT_ROW / TT_H in app.js. */
.tt {
  --tt-bg: color-mix(in srgb, var(--bg) 62%, var(--surface-2));
  --tt-node: color-mix(in srgb, var(--surface) 88%, var(--surface-2));
  --tt-head: color-mix(in srgb, var(--surface-2) 85%, var(--ink-soft));
  --tt-edge: color-mix(in srgb, var(--ink-soft) 42%, var(--line));
  --tt-rim: color-mix(in srgb, var(--surface-2) 72%, var(--ink-soft));
  --tt-gold: color-mix(in srgb, var(--accent) 30%, var(--surface));
  --tt-gold-head: color-mix(in srgb, var(--accent) 55%, var(--surface));
}
.tt-tabs { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px; margin: 4px 0 14px; }
.tt-tab {
  position: relative; display: grid; grid-template-rows: 34px minmax(2.3em, auto) auto auto; justify-items: center; align-content: start;
  gap: 3px; padding: 9px 8px 8px; font: inherit; text-align: center; color: var(--ink); cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .15s, background .15s;
}
.tt-tab > img { grid-row: 1; width: 34px; height: 34px; object-fit: contain; image-rendering: pixelated; }
.tt-tab-name { grid-row: 2; align-self: center; font-size: .8rem; font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; hyphens: auto; }
.tt-tab .num { grid-row: 3; font-size: .74rem; color: var(--ink-soft); }
.tt-tab .progress { grid-row: 4; width: 100%; height: 5px; margin-top: 2px; }
.tt-tab:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.tt-tab[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); box-shadow: inset 0 0 0 1px var(--accent); }
.tt-hits { position: absolute; top: -8px; right: -6px; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--tech-blue); color: #fff; font: 700 .72rem/20px var(--f-mono); text-align: center; }
.tt-frame {
  position: relative; border-radius: var(--radius); border: 1px solid var(--tt-edge);
  background: radial-gradient(color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1.6px) 0 0 / 18px 18px, var(--tt-bg);
  box-shadow: inset 0 0 0 3px var(--tt-rim), inset 0 0 0 4px var(--tt-edge), inset 0 10px 26px -12px rgb(0 0 0 / .3), var(--shadow);
}
.tt-frame::before {  /* Nieten in den Ecken des Rahmens */
  content: ""; position: absolute; inset: 7px; pointer-events: none;
  --rv: radial-gradient(circle, var(--tt-edge) 0 2px, transparent 2.6px);
  background: var(--rv) left top / 6px 6px no-repeat, var(--rv) right top / 6px 6px no-repeat, var(--rv) left bottom / 6px 6px no-repeat, var(--rv) right bottom / 6px 6px no-repeat;
}
.tt-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 18px 10px; border-bottom: 1px solid var(--tt-edge); }
.tt-head > img { width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; }
.tt-head h2 { margin: 0; font: 400 1.5rem/1.1 var(--f-display); }
.tt-head h2 a { color: var(--ink); text-decoration: none; }
.tt-head .progress { flex: 1 1 100px; max-width: 200px; height: 6px; }
.tt-pts { margin-left: auto; display: inline-flex; gap: 10px; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--tt-edge); }
.tt-pts .tt-tp { font-size: .8rem; }
.tt-scroll { overflow-x: auto; overscroll-behavior-x: contain; padding: 16px 18px 4px; scrollbar-width: thin; scrollbar-color: var(--tt-edge) transparent; }
.tt-canvas { position: relative; width: min(max(100%, calc(var(--span) * 150px)), calc(var(--span) * 230px)); height: calc(var(--rows) * 96px); }
.tt-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tt-lines path { fill: none; stroke: color-mix(in srgb, var(--ink-soft) 40%, var(--line)); stroke-width: 3; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.tt-lines path.on { stroke: var(--accent); }
.tt-node {
  position: absolute; left: calc(var(--x) * 100% / var(--span)); top: calc(var(--y) * 96px); width: calc(.8 * 100% / var(--span)); height: 82px;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: 0; font: inherit; color: var(--ink); text-align: center; cursor: pointer;
  background: var(--tt-node); border: 1px solid var(--tt-edge); border-radius: 5px; box-shadow: 0 2px 0 rgb(0 0 0 / .16); overflow: hidden;
  transition: transform .15s var(--ease), opacity .15s, border-color .15s;
}
.tt-name { display: block; padding: 2px 7px; font-size: .72rem; font-weight: 600; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--tt-head); border-bottom: 1px solid var(--tt-edge); }
.tt-name.long { font-size: .64rem; letter-spacing: -.01em; }
.tt-ics { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 0; }
.tt-ics img { width: 28px; height: 28px; object-fit: contain; image-rendering: pixelated; }
.tt-foot { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 19px; padding: 0 4px 3px; }
.tt-free { font-size: .68rem; color: var(--ink-soft); letter-spacing: .02em; }
.tt-ok { color: var(--done); font-weight: 900; font-size: 1rem; line-height: 1; text-shadow: 0 1px 0 rgb(0 0 0 / .2); }
.tt-tp { display: inline-flex; align-items: center; gap: 3px; font: 700 .72rem var(--f-mono); color: var(--ink); white-space: nowrap; }
.tt-tp::before { content: ""; width: 8px; height: 8px; border-radius: 50% 0 50% 50%; transform: rotate(-45deg); background: var(--c); box-shadow: inset -1px -1px 0 rgb(0 0 0 / .25); }
.tt-tp.r { --c: var(--tech-red); } .tt-tp.g { --c: var(--tech-green); } .tt-tp.b { --c: var(--tech-blue); }
.tt-node.done { background: var(--tt-gold); border-color: color-mix(in srgb, var(--accent) 70%, var(--line)); }
.tt-node.done .tt-name { background: var(--tt-gold-head); border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }
.tt-node.open { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }
.tt-node.buy { box-shadow: 0 0 0 2px color-mix(in srgb, var(--done) 60%, transparent), 0 2px 0 rgb(0 0 0 / .16); }
.tt-node.locked { opacity: .62; }
.tt-node.locked img { filter: grayscale(.8); }
.tt-node.hid { border-style: dashed; }
.tt-node.hid .tt-name { padding-right: 14px; }
.tt-node.hid::after { content: "?"; position: absolute; top: 1px; right: 5px; font: 700 .7rem/1.4 var(--f-mono); color: var(--ink-soft); }
.tt-node:hover, .tt-node:focus-visible { transform: translateY(-1px); border-color: var(--accent); opacity: 1; }
.tt-node.sel { outline: 2px solid var(--accent); outline-offset: 2px; opacity: 1; }
.tt-canvas.searching .tt-node:not(.hit) { opacity: .22; }
.tt-node.hit { outline: 2px solid var(--tech-blue); outline-offset: 2px; opacity: 1; }
.tt-loose { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 18px 16px; }
.tt-loose p { flex-basis: 100%; margin: 0; }
.tt-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 2px 0; color: var(--ink-soft); }
.tt-legend:empty { display: none; }
.tt-lg::before { content: ""; display: inline-block; width: 16px; height: 11px; margin-right: 5px; vertical-align: -1px; border-radius: 3px; border: 1px solid var(--tt-edge); background: var(--tt-node); }
.tt-lg.done::before { background: var(--tt-gold); border-color: var(--accent); }
.tt-lg.open::before { border-color: var(--accent); }
.tt-lg.buy::before { box-shadow: 0 0 0 2px color-mix(in srgb, var(--done) 60%, transparent); border-color: var(--accent); }
.tt-lg.locked::before { opacity: .55; }
.tt-lg.hid::before { border-style: dashed; }
.tt-detail { margin-top: 12px; scroll-margin: 80px 0 16px; }
.tt-detail > p { margin: 0; }
.tt-card { padding: 14px 16px; border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); box-shadow: var(--shadow-md); }
.tt-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.tt-card-head > img { width: 36px; height: 36px; object-fit: contain; image-rendering: pixelated; }
.tt-card-t { flex: 1 1 200px; min-width: 0; }
.tt-card-t h3 { margin: 0; }
.tt-check { margin-left: auto; }
.tt-state { margin: 10px 0 0; }
.tt-card.done .tt-state b { color: var(--done); }
.tt-card.locked .tt-state b { color: var(--ink-soft); }
.tt-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 10px 0; }
.tt-facts dt { color: var(--ink-soft); font-size: .85rem; padding-top: 2px; }
.tt-facts dd { margin: 0; }
.tt-facts .tt-tp { font-size: .85rem; margin-right: 8px; }
.tt-unl li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.tt-unl img { width: 22px; height: 22px; object-fit: contain; image-rendering: pixelated; }
.tt-link { font: inherit; color: var(--accent); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
@media (max-width: 560px) {
  .tt-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .tt-tab { grid-template-rows: 30px auto auto; padding: 6px 5px; }
  .tt-tab > img { width: 30px; height: 30px; }
  .tt-tab-name { display: none; }
  .tt-tab .num { grid-row: 2; } .tt-tab .progress { grid-row: 3; }
  .tt-head { padding: 10px 14px 8px; }
  .tt-scroll { padding: 12px 12px 2px; }
  .tt-pts { margin-left: 0; }
  .tt-facts { grid-template-columns: 1fr; gap: 2px; }
  .tt-facts dt { margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) { .tt-node, .tt-tab { transition: none; } .tt-node:hover { transform: none; } }

/* ================================================================ Automatisierung */
/* Zombie-Posten je Ort: grün = bemannt, gelb = gebaut ohne Zombie, gestrichelt = geplant */
.panel.auto-facts { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.auto-facts > div > .small { line-height: 1.25; }
.auto-places { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; align-items: start; }
.auto-place { margin: 0; display: grid; gap: 8px; align-content: start; }
.auto-place-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }
.auto-place-h h3 { margin: 0; }
.auto-posts { display: grid; gap: 6px; }
.auto-post, .auto-leg { padding: 8px 10px; border: 1px solid var(--line); border-left-width: 3px; border-radius: var(--radius-sm); background: var(--surface-2); }
.auto-post { display: flex; gap: 10px; align-items: flex-start; }
.auto-post.is-ok, .auto-leg.is-ok { border-left-color: var(--done); }
.auto-post.is-idle, .auto-post.is-off, .auto-leg.is-idle { border-left-color: var(--accent); }
.auto-post.is-plan, .auto-leg.is-none { border-left-style: dashed; border-left-color: var(--ink-soft); }
.auto-post-ic { flex: none; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }
.auto-post-ic img { max-width: 32px; max-height: 32px; object-fit: contain; image-rendering: pixelated; }
.auto-post-ic .nav-ic { width: 20px; height: 20px; opacity: .5; }
.auto-post-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.auto-post-h, .auto-leg-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; }
.auto-hint { margin: 10px 0 0; }
.pill-plan { background: none; box-shadow: inset 0 0 0 1px var(--ink-soft); color: var(--ink-soft); }
/* Lieferketten: Fluss oben (Abschnitt grün = belegt, gelb gestrichelt = Station ohne Zombie, grau gestrichelt = nicht gebaut), darunter je Abschnitt Station, was fehlt und die Waren */
.auto-chains { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 12px; align-items: start; margin-bottom: 8px; }
.auto-chain { margin: 0; display: grid; gap: 10px; align-content: start; }
.auto-flow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.auto-zone { padding: 4px 10px; border-radius: 999px; font-weight: 700; background: var(--surface-2); border: 1px solid var(--line); white-space: nowrap; }
.auto-arrow { display: grid; justify-items: center; min-width: 90px; flex: 1; max-width: 260px; }
.auto-items { font-size: .74rem; color: var(--ink-soft); text-align: center; line-height: 1.2; }
.auto-line { width: 100%; height: 2px; margin-top: 3px; background: repeating-linear-gradient(90deg, var(--ink-soft) 0 6px, transparent 6px 10px); position: relative; }
.auto-line::after { content: ""; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left-color: var(--ink-soft); }
.auto-arrow.is-ok .auto-items { color: var(--done); font-weight: 600; }
.auto-arrow.is-ok .auto-line { background: var(--done); }
.auto-arrow.is-ok .auto-line::after { border-left-color: var(--done); }
.auto-arrow.is-idle .auto-items { color: var(--accent); font-weight: 600; }
.auto-arrow.is-idle .auto-line { background: repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 10px); }
.auto-arrow.is-idle .auto-line::after { border-left-color: var(--accent); }
.auto-legs { display: grid; gap: 8px; }
.auto-leg p { margin: 4px 0; }
.auto-goods > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 40px; cursor: pointer; color: var(--ink-soft); list-style: none; }
.auto-goods > summary::-webkit-details-marker { display: none; }
.auto-goods > summary::after { content: "▾"; margin-left: 4px; transition: transform .15s; }
.auto-goods:not([open]) > summary::after { transform: rotate(-90deg); }
.auto-goods > .rec-in { margin: 2px 0 4px; }
.auto-more { margin-top: 18px; }
.auto-more-t { display: grid; gap: 2px; flex: 1; min-width: 0; }
.auto-more h3 { margin: 14px 0 8px; }
.auto-benches { margin: 14px 0 0; }
.auto-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.auto-card { display: grid; gap: 4px; align-content: start; }
.auto-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.auto-crafts li { padding: 3px 0; border-top: 1px dashed color-mix(in srgb, var(--line) 70%, transparent); }
.auto-crafts li:first-child { border-top: 0; }
.auto-plan { font-size: .85rem; color: var(--ink-soft); margin-top: 4px; }

/* ================================================================ Preisbewertung und Handel auf Gegenstandsseiten */
.px-good, .num.px-good { color: var(--tech-green); cursor: help; }
.px-bad, .num.px-bad { color: var(--tech-red); cursor: help; }
.num.px-bad::before { content: "▼ "; font-size: .7em; vertical-align: .1em; }
.item-trade { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px 28px; }
.item-trade h3 { margin: 6px 0 6px; font-size: 1rem; }
.item-trade li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 6px 0; border-top: 1px dashed color-mix(in srgb, var(--line) 70%, transparent); }
.item-trade li:first-child { border-top: 0; }
.item-trade li.locked { opacity: .55; }
.item-trade .num { margin-left: auto; font-family: var(--f-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.item-trade .it-star img { width: 16px; height: 16px; object-fit: contain; image-rendering: pixelated; vertical-align: -3px; }
.item-trade .it-none { padding: 10px 12px; border: 1px dashed var(--line); border-radius: var(--radius); margin: 0; }

/* ================================================================ Sammelprojekte: Teile als Kästchen */
.proj-parts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.part-cb { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 2px 10px 2px 6px; border: 1px solid var(--line); border-radius: 999px; font-size: .82rem; cursor: pointer; background: var(--surface); }
.part-cb input { width: 18px; height: 18px; margin: 0; }
.part-cb.done { border-color: color-mix(in srgb, var(--done) 55%, var(--line)); background: color-mix(in srgb, var(--done) 12%, var(--surface)); }

/* ================================================================ Sanftes Neuzeichnen: drehendes Wochenrad, springende Tagesleiste, geänderte Zahlen */
.wk-rot { position: absolute; inset: 0; }
.wk-strip { position: relative; }
.wk-ghost { position: absolute; border: 1px solid; border-radius: 8px; pointer-events: none; z-index: 1; }
.wk-strip.small .wk-ghost { border-radius: 6px; }
.wk-day.arriving { border-color: var(--line); background: none; }
.val-bump { animation: val-bump 1.4s ease-out; border-radius: 4px; }
@keyframes val-bump { 0%, 30% { background: color-mix(in srgb, var(--accent) 30%, transparent); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .val-bump { animation: none; } }

/* ================================================================ Hinweisfenster „Update“ / Neuigkeiten */
.news-dlg { width: min(560px, calc(100vw - 32px)); max-height: min(80vh, 720px); padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow); overflow: auto; }
.news-dlg::backdrop { background: rgb(0 0 0 / .5); }
.news-dlg h2 { margin: 0 0 6px; font: 400 1.6rem/1.15 var(--f-display); }
.news-dlg h3 { margin: 14px 0 4px; font-size: 1rem; }
.news-dlg ul { margin: 0; padding-left: 1.2em; }
.news-dlg li { margin: 4px 0; line-height: 1.4; }
.news-dlg .toolbar { margin-top: 16px; justify-content: flex-end; }
.news-dlg .btn { min-height: 42px; min-width: 120px; }


/* ================================================================ Seelen (DLC Better Save Soul): ätherischer Look, Präfix .so- */
.so-hero, .so-card, .so-planner, .so-meter, .so-shard { --so-glow: #7cc8ff; --so-deep: color-mix(in srgb, var(--bg) 22%, #0c1330); }
.so-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; margin: 0 0 16px; padding: 22px 24px;
  border-radius: var(--radius-lg); border: 1px solid color-mix(in srgb, var(--so-glow) 30%, var(--line)); color: #e8f1ff;
  background: radial-gradient(420px 220px at 12% 40%, rgb(124 200 255 / .22), transparent 70%), radial-gradient(600px 300px at 100% 0%, rgb(160 120 255 / .14), transparent 65%), var(--so-deep);
  box-shadow: var(--shadow-md), inset 0 0 60px -20px rgb(124 200 255 / .35); }
.so-hero h1 { margin: .05em 0 .2em; color: #f4f8ff; text-shadow: 0 0 18px rgb(124 200 255 / .45); }
.so-hero .eyebrow { color: #b7cff0; }
.so-hero .lede { color: #cddcf2; margin-bottom: 0; }
.so-orb { position: relative; width: 92px; height: 92px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 36% 30%, #ffffff 0 6%, #d8f1ff 14%, #8fd0ff 34%, #3f86e6 58%, rgb(40 70 170 / .55) 70%, transparent 72%);
  box-shadow: 0 0 34px 8px rgb(124 200 255 / .45), 0 0 90px 24px rgb(124 160 255 / .18); animation: so-pulse 4.2s ease-in-out infinite; }
.so-orb span { position: absolute; inset: -10px; border-radius: 50%; border: 1px solid rgb(180 225 255 / .35); animation: so-ring 4.2s ease-in-out infinite; }
.so-orb::after { content: ""; position: absolute; left: 50%; top: -18px; width: 22px; height: 30px; margin-left: -11px; border-radius: 50% 50% 40% 40%;
  background: radial-gradient(circle at 50% 80%, rgb(200 236 255 / .8), transparent 70%); filter: blur(2px); opacity: .7; }
@keyframes so-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 34px 8px rgb(124 200 255 / .45), 0 0 90px 24px rgb(124 160 255 / .18); }
  50% { transform: scale(1.05); box-shadow: 0 0 46px 12px rgb(124 200 255 / .6), 0 0 110px 30px rgb(124 160 255 / .24); } }
@keyframes so-ring { 0%, 100% { transform: scale(.96); opacity: .5; } 50% { transform: scale(1.06); opacity: .15; } }
@media (prefers-reduced-motion: reduce) { .so-orb, .so-orb span { animation: none; } }
@media (max-width: 560px) { .so-hero { grid-template-columns: 1fr; justify-items: start; padding: 18px; } .so-orb { width: 64px; height: 64px; } }
.so-src { display: inline-block; font: 600 .66rem/1.5 var(--f-body); letter-spacing: .03em; padding: 0 7px; border-radius: 999px; border: 1px dashed var(--line);
  color: var(--ink-soft); white-space: nowrap; vertical-align: .1em; }
.so-warn { border-left: 3px solid var(--accent); padding: 6px 10px; background: color-mix(in srgb, var(--accent) 9%, transparent); border-radius: 0 6px 6px 0; }
.so-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 10px; margin-bottom: 8px; }
.so-fact { --wk: #7cc8ff; }
.so-fact .fact-ic img, .so-fact .fact-ic .nav-ic { width: 22px; height: 22px; object-fit: contain; image-rendering: pixelated; }
.so-hero img, .so-card img, .so-sin img, .so-sk img, .so-planner img, .so-meter img, .so-devs img, .so-spend img, .so-shard img, .so-types img { image-rendering: pixelated; }
/* Sünden-Plakette mit Wochentags-Symbol */
.so-sin { --sc: var(--accent); display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 2px; border-radius: 999px; font-weight: 700; font-size: .85rem; line-height: 1.2;
  border: 1px solid color-mix(in srgb, var(--sc) 60%, var(--line)); background: color-mix(in srgb, var(--sc) 18%, var(--surface)); color: var(--ink); white-space: nowrap; }
.so-sin img { width: 22px; height: 22px; border-radius: 50%; background: #120b0d; object-fit: contain; padding: 1px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--sc) 70%, transparent); }
.so-sin.big { font-size: .95rem; padding: 4px 14px 4px 4px; }
.so-sin.big img { width: 28px; height: 28px; }
/* Schädel: Symbol + Zahl (Farbe nie allein) */
.so-sk { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.so-sk > span { display: inline-flex; align-items: center; gap: 2px; }
.so-sk img { width: 16px; height: 16px; object-fit: contain; }
.so-sk b { font-weight: 700; }
.so-sk-r b { color: var(--tech-red); }
/* Seelen-Karten: Desktop 3, Tablet 2, schmal 1 */
.so-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 12px; }
.so-card { display: grid; gap: 8px; align-content: start; padding: 14px; border-radius: var(--radius-lg); border: 1px solid color-mix(in srgb, var(--so-glow) 28%, var(--line));
  background: radial-gradient(260px 120px at 0% 0%, color-mix(in srgb, var(--so-glow) 12%, transparent), transparent 70%), linear-gradient(180deg, var(--surface-hi), var(--surface));
  box-shadow: var(--shadow-md); min-width: 0; }
.so-card[data-kind="healed"] { border-color: color-mix(in srgb, var(--so-glow) 60%, var(--line)); box-shadow: var(--shadow-md), 0 0 22px -10px var(--so-glow); }
.so-card[data-kind="body"] { border-style: dashed; }
.so-card-h { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.so-card-h > img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 0 6px rgb(124 200 255 / .6)); }
.so-card-h > div { display: grid; min-width: 0; }
.so-card-p { font-size: 1.05rem; }
.so-card-sins { gap: 6px; }
.so-card-sins li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.so-card p { margin: 0; }
.so-next { font-size: .92rem; }
.so-open { justify-self: start; min-height: 40px; }
.so-empty { padding: 14px; border: 1px dashed var(--line); border-radius: var(--radius); }
/* Zustands-Balken wie im Spiel: rot = Zustand, blau = nach der Heilung */
.so-bar { position: relative; height: 14px; border-radius: 99px; background: var(--surface-2); overflow: hidden; box-shadow: inset 0 1px 2px rgb(0 0 0 / .25); }
.so-bar-red { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(180deg, #e46a5a, #a8261c); }
.so-bar-blue { position: absolute; left: 0; top: 4px; bottom: 4px; border-radius: inherit; background: linear-gradient(180deg, #b9e6ff, #3d97f0); box-shadow: 0 0 8px rgb(124 200 255 / .8); }
.so-bar-l { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.so-key { display: inline-block; width: 12px; height: 8px; border-radius: 3px; }
.so-key.red { background: #c2382a; } .so-key.blue { background: #3d97f0; }
/* Planer: Schritt-für-Schritt-Karte mit großen Chips */
.so-planner { border-color: color-mix(in srgb, var(--so-glow) 25%, var(--line)); }
.so-steps { list-style: none; margin: 0; padding: 0 0 0 16px; display: grid; gap: 14px; }
.so-steps > li { padding-left: 16px; border-left: 2px solid color-mix(in srgb, var(--so-glow) 35%, var(--line)); min-width: 0; }
.so-steps h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 10px; }
.so-stepn { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font: 700 .9rem/1 var(--f-mono); color: #0c1330;
  background: radial-gradient(circle at 35% 30%, #fff, #9fdbff 55%, #4a9cf0); box-shadow: 0 0 12px rgb(124 200 255 / .6); margin-left: -32px; }
.so-chips, .so-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.so-chip { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; min-height: 44px; padding: 6px 12px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 .9rem/1.2 var(--f-body); cursor: pointer; text-align: left; transition: border-color .15s, background .15s, box-shadow .15s; }
.so-chip img { width: 20px; height: 20px; vertical-align: -5px; }
.so-chip:hover { border-color: color-mix(in srgb, var(--so-glow, #7cc8ff) 60%, var(--line)); }
.so-chip[aria-pressed="true"] { border-color: #4a9cf0; background: color-mix(in srgb, #4a9cf0 16%, var(--surface)); box-shadow: 0 0 0 2px color-mix(in srgb, #4a9cf0 30%, transparent); }
.so-pick-sin { padding: 4px; border-radius: 999px; }
.so-pick-sin[aria-pressed="false"] .so-sin { opacity: .55; filter: grayscale(.6); }
.so-req { gap: 6px; margin-bottom: 10px; }
.so-req li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.so-req-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 0; border-top: 1px dashed var(--line); }
.so-lvs { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.so-lvl-l { display: inline-flex; align-items: center; gap: 3px; font-size: .82rem; color: var(--ink-soft); margin-right: 2px; }
.so-lvl-l img { width: 16px; height: 16px; }
.so-lv { min-width: 40px; min-height: 40px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 700 .95rem/1 var(--f-mono); cursor: pointer; }
.so-lv.r[aria-pressed="true"] { background: color-mix(in srgb, var(--tech-red) 22%, var(--surface)); border-color: var(--tech-red); }
.so-lv.w[aria-pressed="true"] { background: color-mix(in srgb, var(--ink) 14%, var(--surface)); border-color: var(--ink); }
.so-now, .so-sum { margin: 0 0 8px; }
.so-sum img { width: 18px; height: 18px; vertical-align: -4px; }
.so-planner .toolbar .btn, .so-planner > ol .btn { min-height: 42px; }
.so-rules { margin-top: 10px; }
.so-rules > summary { cursor: pointer; font-weight: 600; min-height: 40px; display: flex; align-items: center; }
.so-rules ul { margin: 6px 0 0; padding-left: 1.2em; display: grid; gap: 4px; }
/* Dankbarkeit */
.so-meter { display: grid; gap: 8px; }
.so-meter-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.so-meter-h > img { width: 32px; height: 32px; filter: drop-shadow(0 0 6px rgb(124 200 255 / .6)); }
.so-meter-v { font: 400 2rem/1 var(--f-display); }
.so-meter-v b { font-family: var(--f-mono); font-size: 1.6rem; font-weight: 600; }
.so-meter p { margin: 0; }
.so-gp-bar { height: 10px; }
.so-gp-bar > span { background: linear-gradient(90deg, #6fb6ff, #b9e6ff); box-shadow: 0 0 10px rgb(124 200 255 / .6); }
.so-devs { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 10px; }
.so-dev { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); display: grid; gap: 6px; align-content: start; min-width: 0; }
.so-dev p { margin: 0; }
.so-dev-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.so-dev-h .num img { width: 16px; height: 16px; vertical-align: -3px; }
.so-dev .btn, .so-exts .btn, .so-euric .btn { min-height: 40px; }
.so-dev-b { display: flex; flex-wrap: wrap; gap: 6px; }
.so-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.so-two > div { display: grid; gap: 6px; align-content: start; justify-items: start; }
.so-exts { gap: 6px; }
.so-exts li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.so-planner .linkish, .so-exts .linkish { min-height: 32px; text-align: left; }
/* Ausgeben und Euric: zwei Spalten ab Tablet */
.so-spend, .so-euric { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 14px; align-items: start; margin-bottom: 14px; }
.so-spend .panel, .so-euric .panel { margin: 0; min-width: 0; }
.so-spend h3, .so-euric h3 { margin-top: 0; }
.so-euric .panel h3:not(:first-child) { margin-top: 16px; }
.so-totems li { display: block; }
.so-techs li, .so-qs li, .so-tasks li, .so-room li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.so-techs li { justify-content: space-between; padding: 4px 0; border-top: 1px dashed color-mix(in srgb, var(--line) 70%, transparent); }
.so-techs li:first-child { border-top: 0; }
.so-tech.done > span:first-child a { color: var(--ink-soft); }
.so-tech-c { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.so-gp { display: inline-flex; align-items: center; gap: 2px; }
.so-gp b { color: #3d8fe0; }
.so-gp-l { font-size: .72rem; color: var(--ink-soft); margin-left: 2px; }
.so-pairs { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.so-pairs > span { white-space: nowrap; }
.so-gp img, .so-spend p img { width: 16px; height: 16px; vertical-align: -3px; }
.so-totems { grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: 2px 12px; margin: 8px 0; }
.so-shards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 10px; }
.so-shard { --sc: var(--accent); padding: 12px; border-radius: var(--radius); border: 1px solid var(--line); border-left: 4px solid var(--sc);
  background: linear-gradient(180deg, color-mix(in srgb, var(--sc) 8%, var(--surface-hi)), var(--surface)); min-width: 0; }
.so-shard.done { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--done) 35%, transparent); }
.so-shard-h { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; }
.so-shard-pic { width: 46px; height: 46px; object-fit: contain; border-radius: 10px; background: color-mix(in srgb, var(--sc) 30%, #120b0d); }
.so-shard-s { margin: 0; }
.so-types-l { gap: 6px; }
.so-types-l li { display: flex; flex-wrap: wrap; gap: 6px 10px; padding: 4px 0; border-top: 1px dashed color-mix(in srgb, var(--line) 70%, transparent); }
.so-type-p { display: inline-flex; align-items: center; gap: 6px; }

/* ================================================================ Friedhof & Leichen (#/friedhof)
   Steinbrett wie das Technologie-Brett (Rahmen, Nieten), Gräber als Kacheln auf Rasen, Werte immer als Zahl + Symbol. */
.gy-stats .eyebrow img { width: 18px; height: 18px; image-rendering: pixelated; vertical-align: -4px; }
.gy-stat .v b { font-weight: 600; }
.gy-stats { grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); margin-bottom: 16px; }
.gy-gain { white-space: nowrap; }
.gy-swipe { display: none; }
@media (max-width: 640px) { .gy-swipe { display: inline; } }
.gy-show { font: inherit; font-family: var(--f-mono); font-size: .88em; white-space: nowrap; min-height: 40px; }
.gy-src { font-size: .72rem; letter-spacing: .02em; }
.gy-goals ul { display: grid; gap: 10px; margin: 12px 0 0; }
.gy-goal { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(90px, 1fr) minmax(120px, auto); align-items: center; gap: 6px 14px; }
.gy-goal .progress { height: 8px; }
.gy-goal.done .progress span { background: var(--done); }
@media (max-width: 560px) { .gy-goal { grid-template-columns: minmax(0, 1fr) auto; } .gy-goal .progress { grid-column: 1 / -1; grid-row: 2; } }

.gy-frame {
  --gy-edge: color-mix(in srgb, var(--ink-soft) 42%, var(--line));
  --gy-rim: color-mix(in srgb, var(--surface-2) 72%, var(--ink-soft));
  --gy-bg: color-mix(in srgb, var(--bg) 62%, var(--surface-2));
  --gy-grass: color-mix(in srgb, var(--moss) 26%, var(--gy-bg));
  --gy-earth: color-mix(in srgb, var(--accent) 20%, color-mix(in srgb, var(--ink-soft) 38%, var(--surface-2)));
  position: relative; margin-bottom: 16px; border-radius: var(--radius); border: 1px solid var(--gy-edge);
  background: radial-gradient(color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1.6px) 0 0 / 18px 18px, var(--gy-bg);
  box-shadow: inset 0 0 0 3px var(--gy-rim), inset 0 0 0 4px var(--gy-edge), inset 0 10px 26px -12px rgb(0 0 0 / .3), var(--shadow);
}
.gy-frame::before {  /* Nieten in den Ecken */
  content: ""; position: absolute; inset: 7px; pointer-events: none;
  --rv: radial-gradient(circle, var(--gy-edge) 0 2px, transparent 2.6px);
  background: var(--rv) left top / 6px 6px no-repeat, var(--rv) right top / 6px 6px no-repeat, var(--rv) left bottom / 6px 6px no-repeat, var(--rv) right bottom / 6px 6px no-repeat;
}
.gy-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 18px 8px; border-bottom: 1px solid var(--gy-edge); }
.gy-head > img { width: 30px; height: 30px; object-fit: contain; image-rendering: pixelated; }
.gy-head h2 { margin: 0; font: 400 1.5rem/1.1 var(--f-display); }
.gy-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 8px 18px 0; }
.gy-legend li { display: inline-flex; align-items: center; gap: 6px; }
.gy-lg { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--gy-edge); background: var(--gy-earth); }
.gy-lg.q3 { background: color-mix(in srgb, var(--tech-green) 58%, var(--gy-earth)); }
.gy-lg.q1 { background: color-mix(in srgb, var(--tech-green) 30%, var(--gy-earth)); }
.gy-lg.neg { background: color-mix(in srgb, var(--tech-red) 42%, var(--gy-earth)); }
.gy-lg.hole { background: color-mix(in srgb, var(--ink) 60%, var(--gy-earth)); border-style: dashed; }
.gy-lg-worn, .gy-t-worn { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font: 700 .7rem/1 var(--f-mono); }
.gy-scroll { container-type: inline-size; overflow-x: auto; overscroll-behavior-x: contain; padding: 12px 18px; scrollbar-width: thin; scrollbar-color: var(--gy-edge) transparent; }
.gy-plan {
  --cell: max(14px, min(34px, calc((100cqw - 14px) / var(--cols))));
  display: grid; grid-template-columns: repeat(var(--cols), var(--cell)); grid-template-rows: repeat(var(--rows), var(--cell));
  width: max-content; margin-inline: auto; padding: 6px; border-radius: 8px; border: 1px solid var(--gy-edge);
  background: radial-gradient(color-mix(in srgb, var(--moss) 45%, transparent) 1px, transparent 1.8px) 0 0 / 11px 9px, var(--gy-grass);
}
.gy-tile {
  position: relative; margin: 3px; min-width: 0; min-height: 0; padding: 2px; display: grid; grid-template-rows: minmax(0, 1fr) auto; place-items: center;
  font: inherit; color: var(--ink); cursor: pointer; background: var(--gy-earth);
  border: 1px solid color-mix(in srgb, var(--ink) 35%, transparent); border-radius: 7px 7px 3px 3px; box-shadow: 0 2px 0 rgb(0 0 0 / .25);
  transition: transform .15s var(--ease), box-shadow .15s;
}
.gy-tile.q3 { background: color-mix(in srgb, var(--tech-green) 58%, var(--gy-earth)); }
.gy-tile.q1 { background: color-mix(in srgb, var(--tech-green) 30%, var(--gy-earth)); }
.gy-tile.neg { background: color-mix(in srgb, var(--tech-red) 42%, var(--gy-earth)); }
.gy-tile.hole { background: color-mix(in srgb, var(--ink) 60%, var(--gy-earth)); border-style: dashed; color: var(--surface); }
.gy-tile.plan { background: transparent; border: 2px dotted var(--gy-edge); box-shadow: none; }
.gy-tile:hover { transform: translateY(-2px); box-shadow: 0 4px 0 rgb(0 0 0 / .22); }
.gy-tile[aria-pressed="true"] { outline: 3px solid var(--accent); outline-offset: 1px; z-index: 1; }
.gy-t-ic { display: grid; place-items: center; min-height: 0; }
.gy-t-ic img { width: calc(var(--cell) * 1.25); height: calc(var(--cell) * 1.25); object-fit: contain; image-rendering: pixelated; }
.gy-t-none { font-size: calc(var(--cell) * .8); line-height: 1; opacity: .7; }
.gy-t-v { font: 700 clamp(.66rem, calc(var(--cell) * .42), 1rem)/1 var(--f-mono); padding: 1px 4px; border-radius: 4px; background: color-mix(in srgb, var(--surface) 82%, transparent); color: var(--ink); }
.gy-t-no { position: absolute; top: 1px; left: 3px; font-size: .6rem; opacity: .7; }
.gy-t-worn { position: absolute; top: -6px; right: -6px; }
@container (max-width: 640px) { .gy-t-ic { display: none; } .gy-tile { grid-template-rows: auto; } .gy-t-no { display: none; } }
.gy-detail { padding: 12px 18px 16px; border-top: 1px solid var(--gy-edge); background: color-mix(in srgb, var(--surface) 72%, transparent); border-radius: 0 0 var(--radius) var(--radius); }
.gy-detail h3 { margin: 0 0 6px; display: flex; align-items: center; gap: 10px; font: 400 1.35rem/1.1 var(--f-display); }
.gy-badge { font: 700 .9rem/1.4 var(--f-mono); padding: 0 9px; border-radius: 999px; background: var(--surface-2); }
.gy-badge.pos { background: color-mix(in srgb, var(--tech-green) 22%, var(--surface)); color: var(--tech-green); }
.gy-badge.neg { background: color-mix(in srgb, var(--tech-red) 20%, var(--surface)); color: var(--tech-red); }
.gy-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 8px 0; }
.gy-facts dt { font-size: .82rem; font-weight: 700; color: var(--ink-soft); padding-top: 3px; }
.gy-facts dd { margin: 0; min-width: 0; }
@media (max-width: 520px) { .gy-facts { grid-template-columns: 1fr; gap: 2px; } .gy-facts dt { margin-top: 6px; } }
.gy-formula-line { font-family: var(--f-mono); font-size: .85rem; }
.gy-parts summary, .gy-formula summary, .gy-outside summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; gap: 8px; }
.gy-frame img, .gy-calc img, .gy-body img, .gy-ups img { image-rendering: pixelated; }

.gy-sks { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; vertical-align: middle; }
.gy-sk { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px 1px 3px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: .85rem; }
.gy-sk img { width: 16px; height: 16px; object-fit: contain; }
.gy-sks.big .gy-sk img { width: 20px; height: 20px; }
.gy-sk.w { background: #3a3e3b; border-color: #3a3e3b; color: #f2f2ec; }
.gy-sk.r { border-color: color-mix(in srgb, var(--tech-red) 50%, var(--line)); background: color-mix(in srgb, var(--tech-red) 10%, var(--surface)); }
.gy-sk.g { border-color: color-mix(in srgb, var(--tech-green) 50%, var(--line)); background: color-mix(in srgb, var(--tech-green) 10%, var(--surface)); }

.gy-check { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; }
.gy-check input { width: 20px; height: 20px; margin: 0; }
.gy-table td { vertical-align: middle; }
.gy-step { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: 2px 0; }
.gy-planbtn { min-height: 42px; white-space: nowrap; }

.gy-body-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; margin-top: 12px; }
.gy-body { display: grid; gap: 8px; align-content: start; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.gy-body-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.gy-fresh { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.gy-fresh .progress { height: 8px; }
.gy-advice { margin: 0; }
.gy-adv { padding: 6px 10px; margin: 4px 0; border-left: 3px solid var(--line); background: color-mix(in srgb, var(--bg) 40%, transparent); border-radius: 0 6px 6px 0; }
.gy-adv.begraben { border-color: var(--tech-green); } .gy-adv.verbrennen { border-color: var(--accent); }
.gy-adv.fluss { border-color: var(--tech-blue); } .gy-adv.frische, .gy-adv.zombie { border-color: var(--moss); }

.gy-calc-top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 28px; margin: 12px 0 4px; }
.gy-calc .field { display: grid; gap: 4px; min-width: min(100%, 260px); }
.gy-calc select { min-height: 44px; max-width: 100%; font: inherit; }
.gy-stepper { display: grid; gap: 4px; }
.gy-stepper .stepper { display: inline-flex; align-items: center; gap: 6px; }
.gy-stepper .stepper .btn { min-width: 44px; min-height: 44px; font-size: 1.25rem; line-height: 1; }
.gy-stepper .num { min-width: 3.4em; text-align: center; font-size: 1.15rem; }
.gy-hand { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 10px 0; }
.gy-plist, .gy-emb { display: grid; gap: 6px; margin: 0; }
.gy-erow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.gy-tog { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
.gy-tog img { width: 24px; height: 24px; object-fit: contain; }
.gy-tog[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); border-color: var(--accent); font-weight: 700; }
.gy-erow.bad { border-color: var(--tech-red); }
/* Teile als Bild-Kacheln (Leichen-Karten und Rechner) mit Infokasten */
.gy-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
.gy-tile { display: grid; justify-items: center; align-content: start; gap: 3px; min-height: 44px; padding: 6px 4px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: inherit; font: inherit; cursor: pointer; text-align: center; }
.gy-tile:hover, .gy-tile:focus-visible { border-color: var(--accent); }
.gy-tile[aria-expanded="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); box-shadow: 0 0 0 1px var(--accent) inset; }
.gy-tile-img img { width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; }
.gy-tile-n { font-size: .78rem; line-height: 1.15; }
.gy-tile-sk { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
.gy-tile-sk .gy-sk { padding: 0 5px 0 2px; font-size: .74rem; }
.gy-tile-sk .gy-sk img { width: 13px; height: 13px; }
.gy-tile.ghost { border-style: dashed; opacity: .6; }
.gy-tile.off { opacity: .55; }
.gy-tile.off .gy-tile-n { text-decoration: line-through; }
.gy-tile-tag { font-size: .7rem; color: var(--accent); font-weight: 700; }
.gy-embed { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.gy-pinfo { padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.gy-pinfo[hidden] { display: none; }
.gy-pi-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 6px; }
.gy-pi-h > img { width: 28px; height: 28px; object-fit: contain; image-rendering: pixelated; }
.gy-pi { margin: 0; display: grid; gap: 4px; }
.gy-pi-r { display: grid; grid-template-columns: minmax(96px, 150px) 1fr; gap: 2px 10px; padding: 4px 0; border-top: 1px dashed color-mix(in srgb, var(--line) 70%, transparent); }
.gy-pi-r dt { font-weight: 600; font-size: .9rem; }
.gy-pi-r dd { margin: 0; font-size: .9rem; }
.gy-pi-r dd > img { width: 18px; height: 18px; object-fit: contain; vertical-align: -4px; image-rendering: pixelated; }
.gy-pi-v { display: inline-flex; align-items: center; gap: 3px; margin-right: 8px; }
.gy-plist { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.gy-pcard { display: grid; gap: 6px; align-content: start; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--bg) 35%, var(--surface)); }
.gy-pcard.miss-part { border-style: dashed; }
.gy-pcard .gy-tile { width: 100%; }
.gy-pcard-a { display: grid; gap: 4px; }
.gy-pcard-a .btn, .gy-pcard-a select { width: 100%; min-height: 44px; }
.gy-e-src { flex-basis: 100%; }
#gy-calc .gy-pinfo { margin-top: 8px; }
@media (max-width: 640px) { .gy-pi-r { grid-template-columns: 1fr; } .gy-plist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gy-best { margin-top: 14px; }
.gy-best .btn { min-height: 44px; }
.gy-result {
  position: sticky; bottom: 8px; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px;
  margin: 14px 0 6px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-hi) 94%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: var(--shadow-md);
}
.gy-r { display: grid; gap: 2px; min-width: 0; }
.gy-big { font: 700 1.5rem/1.1 var(--f-mono); }
.gy-risk { flex-basis: 100%; }
@media (max-width: 640px) { .gy-result { position: static; gap: 10px 20px; } }
.gy-formula ul { margin: 4px 0 0; padding-left: 1.2em; }
.gy-formula li { margin: 3px 0; }
.gy-links { margin-top: 18px; }
@media (prefers-reduced-motion: reduce) { .gy-tile { transition: none; } .gy-tile:hover { transform: none; } }

/* ================================================================ Lager & Truhen: Holzkisten-Karten, Platzraster, Suche „Wo liegt …?“ */
.lg-hero, .lg-box, .lg-hit, .lg-pick {
  --lg-edge: color-mix(in srgb, var(--accent) 38%, color-mix(in srgb, var(--ink-soft) 55%, var(--line)));
  --lg-plank: color-mix(in srgb, var(--accent) 16%, var(--surface-2));
  --lg-wood: color-mix(in srgb, var(--accent) 8%, var(--surface-hi));
}
.lg-hero { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.lg-hero-txt { min-width: 0; }
.lg-hero-txt h1 { margin-bottom: .2em; }
.lg-hero-txt .lede { margin: 0; }
.lg-hero-ic { flex: none; display: grid; place-items: center; width: 76px; height: 76px; border-radius: var(--radius); border: 2px solid var(--lg-edge);
  background: repeating-linear-gradient(0deg, transparent 0 12px, color-mix(in srgb, var(--lg-edge) 22%, transparent) 12px 13px), var(--lg-plank);
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--lg-wood) 70%, transparent), var(--shadow-md); }
.lg-hero-ic img { width: 56px; height: 56px; object-fit: contain; image-rendering: pixelated; }
.lg-warn-t { color: var(--accent); font-weight: 600; }

/* Suche */
.lg-search-l { display: block; font: 400 1.5rem/1.1 var(--f-display); letter-spacing: .015em; margin-bottom: 8px; }
.lg-search input { width: 100%; min-height: 46px; font: inherit; font-size: 1.05rem; padding: 8px 14px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); }
.lg-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
#lg-hits { margin-top: 12px; }
.lg-hint { margin: 0 0 8px; }
.lg-none { margin: 0; padding: 12px 14px; border: 1px dashed var(--line); border-radius: var(--radius); }
.lg-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.lg-pick { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 12px 4px 6px; font: inherit; font-size: .9rem; color: var(--ink); cursor: pointer;
  background: var(--lg-wood); border: 1px solid var(--lg-edge); border-radius: 999px; transition: border-color .15s, background .15s; }
.lg-pick:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.lg-pick img { width: 26px; height: 26px; object-fit: contain; image-rendering: pixelated; }
.lg-pick .num { color: var(--ink-soft); }
.lg-hits { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 12px; }
.lg-hit { min-width: 0; padding: 12px 14px; border: 1px solid var(--lg-edge); border-radius: var(--radius); background: linear-gradient(180deg, var(--lg-wood), var(--surface) 90px); box-shadow: var(--shadow); }
.lg-hit-head { display: flex; align-items: center; gap: 10px; }
.lg-hit-head > img { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; flex: none; }
.lg-hit-t { display: grid; min-width: 0; flex: 1; }
.lg-hit-t b { overflow-wrap: anywhere; }
.lg-hit-n { font-size: 1.35rem; font-weight: 700; color: var(--ink); }
.lg-at { margin-top: 8px; gap: 0; }
.lg-at li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px dashed color-mix(in srgb, var(--line) 80%, transparent); }
.lg-at-ic img { width: 26px; height: 26px; object-fit: contain; image-rendering: pixelated; display: block; }
.lg-at-t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.lg-at-t a.anchor { color: var(--ink); text-decoration: none; min-height: 28px; display: inline-flex; align-items: center; }
.lg-at-t a.anchor:hover { color: var(--accent); }
.lg-at .num { font-weight: 700; }
.lg-quals { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; width: 100%; }
.lg-q { display: inline-flex; align-items: center; gap: 3px; font-size: .78rem; color: var(--ink-soft); white-space: nowrap; }
.lg-q img { width: 14px; height: 14px; object-fit: contain; image-rendering: pixelated; }
.lg-q .num { color: var(--ink); }
.lg-where { margin: 0 0 8px; }
.lg-insearch li { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }

/* Rucksack + Kategorien */
.lg-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 6px; }
@media (max-width: 1100px) { .lg-row { grid-template-columns: minmax(0, 1fr); } }
.lg-row > .panel { margin: 0; }
/* Rucksack groß: Felder mit Bild, Menge und Name (oben auf der Seite, volle Breite) */
.lg-box.lg-bag { margin: 0 0 16px; }
.lg-bagslots { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 10px 0 4px; }
.lg-bs { display: flex; flex-direction: column; align-items: center; gap: 5px; min-height: 96px; padding: 8px 6px 6px; border: 1px solid var(--line);
  border-radius: 10px; background: color-mix(in srgb, var(--moss) 14%, var(--surface-hi)); color: var(--ink); text-decoration: none; text-align: center; }
.lg-bs.empty { background: color-mix(in srgb, var(--ink) 3%, transparent); border-style: dashed; border-color: color-mix(in srgb, var(--ink) 22%, transparent); }
a.lg-bs:hover, a.lg-bs:focus-visible { border-color: var(--accent); }
.lg-bs-ic { position: relative; display: grid; place-items: center; width: 46px; height: 46px; }
.lg-bs-ic > img { width: 42px; height: 42px; object-fit: contain; image-rendering: pixelated; }
.lg-bs-n { position: absolute; right: -8px; bottom: -4px; padding: 1px 5px; border-radius: 6px; background: var(--bg); border: 1px solid var(--line);
  font: 700 .8rem/1.2 var(--f-mono); color: var(--ink); }
.lg-bs-q { position: absolute; left: -6px; top: -4px; } .lg-bs-q img { width: 15px; height: 15px; display: block; }
.lg-bs-name { font-size: .8rem; line-height: 1.2; overflow-wrap: break-word; hyphens: auto; max-width: 100%; }
@media (max-width: 640px) { .lg-bagslots { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 6px; } .lg-bs { min-height: 86px; } .lg-bs.empty { display: none; } }  /* Handy: freie Plätze stehen oben als Zahl (12/20) */
.lg-cats .plain-list { gap: 2px; }
.lg-cats summary { display: grid; grid-template-columns: minmax(8em, 11em) minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; list-style: none; padding: 2px 4px; border-radius: 6px; }
.lg-cats summary::-webkit-details-marker { display: none; }
.lg-cats summary:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.lg-cats summary .num { font-weight: 700; min-width: 3ch; text-align: right; }
.lg-cat-n { font-size: .92rem; overflow-wrap: anywhere; }
.lg-cat-n::before { content: "▸"; display: inline-block; width: 1em; color: var(--ink-soft); transition: transform .15s; }
.lg-cats details[open] .lg-cat-n::before { transform: rotate(90deg); }
.lg-cats details .rec-in { padding: 4px 4px 10px 1.2em; }
.lg-bar { height: 10px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.lg-bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, var(--surface)), var(--accent)); transform-origin: left; }
@media (max-width: 480px) { .lg-cats summary { grid-template-columns: minmax(0, 1fr) auto; } .lg-cats summary .lg-bar { grid-column: 1 / -1; grid-row: 2; } }
.lg-tools { margin: 8px 0 0; }

/* Übersicht: Bereiche mit Kisten-Karten (Desktop 3–4 Spalten, Tablet 2, schmal 1) */
.lg-list-head { justify-content: space-between; align-items: center; margin-top: 1.2em; }
.lg-list-head h2 { margin: .4em 0; }
.lg-list-head .seg button { min-height: 40px; }
/* Bereiche nebeneinander, so breit wie ihre Karten (--n = Anzahl, höchstens 4) – kleine Bereiche füllen gemeinsam eine Zeile */
.lg-areas { display: flex; flex-wrap: wrap; gap: 0 18px; }
.lg-area { flex: 1 1 calc(var(--n, 1) * 284px - 14px); min-width: min(100%, 250px); max-width: 100%; margin-bottom: 14px; }
.lg-area .lg-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.lg-area-h { font: 400 1.45rem/1.1 var(--f-display); letter-spacing: .015em; margin: 14px 0 8px; display: flex; align-items: baseline; gap: 8px; }
.lg-area-h .num { font-family: var(--f-mono); font-size: .8rem; }
.lg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(min(100%, 270px), calc((100% - 42px) / 4)), 1fr)); gap: 14px; }
.lg-box {
  position: relative; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; border-radius: var(--radius);
  border: 2px solid var(--lg-edge); color: var(--ink);
  background: repeating-linear-gradient(90deg, transparent 0 46px, color-mix(in srgb, var(--lg-edge) 9%, transparent) 46px 47px), linear-gradient(180deg, var(--lg-wood), var(--surface));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--lg-wood) 70%, transparent), var(--shadow-md); transition: border-color .2s, box-shadow .2s;
}
.lg-box::before {  /* Nieten in den Ecken wie beim Technologie-Brett */
  content: ""; position: absolute; inset: 5px; pointer-events: none;
  --rv: radial-gradient(circle, var(--lg-edge) 0 2px, transparent 2.6px);
  background: var(--rv) left top / 6px 6px no-repeat, var(--rv) right top / 6px 6px no-repeat, var(--rv) left bottom / 6px 6px no-repeat, var(--rv) right bottom / 6px 6px no-repeat;
}
.lg-box-head { display: flex; align-items: center; gap: 10px; margin: -10px -12px 0; padding: 8px 12px; border-bottom: 1px solid var(--lg-edge); border-radius: calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0 0;
  background: repeating-linear-gradient(0deg, transparent 0 9px, color-mix(in srgb, var(--lg-edge) 16%, transparent) 9px 10px), var(--lg-plank); }
.lg-box-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; }
.lg-box-ic img { width: 36px; height: 36px; object-fit: contain; image-rendering: pixelated; }
.lg-box-t { display: grid; min-width: 0; flex: 1; line-height: 1.25; }
.lg-box-t b { font-size: 1rem; overflow-wrap: anywhere; }
.lg-fill { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: .8rem; white-space: nowrap;
  background: color-mix(in srgb, var(--surface) 75%, transparent); border: 1px solid var(--lg-edge); }
.lg-fill .num { font-size: .85rem; }
.lg-fill-t { font-weight: 700; }
.lg-fill-warn { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.lg-fill-full { background: var(--tech-red); border-color: var(--tech-red); color: #fff; }
.lg-fill-unknown { color: var(--ink-soft); }
.lg-box.lg-warn { border-color: var(--accent); }
.lg-box.lg-full { border-color: var(--tech-red); }
.lg-box.lg-match { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tech-blue) 55%, transparent), var(--shadow-md); }
.lg-box.lg-match::after { content: "Treffer"; position: absolute; top: -10px; right: 12px; padding: 1px 8px; border-radius: 999px; font: 700 .7rem/1.5 var(--f-body); letter-spacing: .04em;
  background: var(--tech-blue); color: #fff; }
/* Platzraster: ein Feld je Platz, belegte mit Bild und Stapelgröße, gefärbt nach Füllstand */
.lg-slots { --lg-on: color-mix(in srgb, var(--moss) 20%, var(--surface-hi)); display: grid; grid-template-columns: repeat(auto-fill, minmax(26px, 1fr)); gap: 3px; }
.lg-warn .lg-slots { --lg-on: color-mix(in srgb, var(--accent) 24%, var(--surface-hi)); }
.lg-full .lg-slots { --lg-on: color-mix(in srgb, var(--tech-red) 20%, var(--surface-hi)); }
.lg-slots i { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 4px; overflow: hidden;
  background: color-mix(in srgb, var(--lg-edge) 16%, var(--surface)); box-shadow: inset 0 1px 2px rgb(0 0 0 / .18); }
.lg-slots i.on { background: var(--lg-on); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lg-edge) 55%, transparent); }
.lg-slots img { width: 82%; height: 82%; object-fit: contain; image-rendering: pixelated; }
.lg-slots i span { position: absolute; right: 2px; bottom: 0; font: 700 .58rem/1.1 var(--f-mono); color: var(--ink); text-shadow: 0 0 2px var(--surface-hi), 0 0 2px var(--surface-hi); }
.lg-top { display: flex; flex-wrap: wrap; gap: 4px; }
.lg-top .ing { margin: 0; padding: 2px 8px 2px 4px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 80%, transparent); border: 1px solid color-mix(in srgb, var(--lg-edge) 35%, transparent); white-space: normal; }
.lg-top .ing img, .lg-all img { width: 22px; height: 22px; object-fit: contain; image-rendering: pixelated; }
.lg-diff { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.lg-diff .eyebrow { width: 100%; font-size: .66rem; }
.lg-diff .dchip { padding: 2px 8px; font-size: .78rem; }
.lg-all summary { display: flex; align-items: center; min-height: 40px; cursor: pointer; font-size: .88rem; color: var(--accent); font-weight: 600; }
.lg-all ul { gap: 0; }
.lg-all li { display: flex; align-items: center; gap: 6px; padding: 3px 0; border-top: 1px dashed color-mix(in srgb, var(--line) 70%, transparent); font-size: .9rem; }
.lg-all li .num { margin-left: auto; font-weight: 700; }
.lg-tag { margin: 0; overflow-wrap: anywhere; }
/* Einblenden: Karten gestaffelt (ohne Animation bei „weniger Bewegung“, siehe Regel oben) */
main.enter .lg-grid > *, main.enter .lg-hits > * { animation: rise .45s var(--ease) both; }
main.enter .lg-grid > :nth-child(2), main.enter .lg-hits > :nth-child(2) { animation-delay: .04s; }
main.enter .lg-grid > :nth-child(3), main.enter .lg-hits > :nth-child(3) { animation-delay: .08s; }
main.enter .lg-grid > :nth-child(n+4), main.enter .lg-hits > :nth-child(n+4) { animation-delay: .12s; }
main.enter .lg-bar > span { animation: grow .9s var(--ease) .2s both; }
@media (prefers-reduced-motion: reduce) { .lg-box, .lg-pick { transition: none; } }
@media (max-width: 480px) { .lg-hero-ic { width: 60px; height: 60px; } .lg-hero-ic img { width: 44px; height: 44px; } .lg-box-head { flex-wrap: wrap; } }

/* ================================================================ Garten (Startseite) */
.garden-panel h2 { display: flex; align-items: center; gap: 8px; }
.gd-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 6px 0 12px; }
.gd-stat { display: grid; justify-items: center; padding: 10px 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.gd-stat b { font: 700 1.6rem/1 var(--f-mono); }
.gd-stat span { font-size: .8rem; color: var(--ink-soft); }
.gd-stat.on { border-color: color-mix(in srgb, var(--done) 60%, var(--line)); background: color-mix(in srgb, var(--done) 14%, var(--surface)); }
.gd-stat.on b { color: var(--done); }
.gd-ready, .gd-grow { margin-bottom: 10px; }
.gd-grow li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 5px 0; border-top: 1px dashed color-mix(in srgb, var(--line) 70%, transparent); }
.gd-grow li:first-child { border-top: 0; }
.gd-how { flex-basis: 100%; padding-left: 46px; }
.gd-ring { --p: 0; position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--done) calc(var(--p) * 1%), color-mix(in srgb, var(--line) 80%, transparent) 0); }
.gd-ring::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--surface); }
.gd-ring span { position: relative; font: 700 .68rem var(--f-mono); }
.gd-empty, .gd-bees { margin: 6px 0 0; }

/* ================================================================ Hinweise: Glocke und Liste */
.bell { position: relative; display: inline-grid; place-items: center; width: 42px; height: 42px; margin-left: auto; border: 1px solid var(--line); border-radius: 50%;
  background: var(--surface); color: var(--ink-soft); cursor: pointer; }
.bell:hover, .bell.has { color: var(--ink); border-color: var(--accent); }
.bell-n { position: absolute; top: -4px; right: -4px; min-width: 20px; padding: 0 5px; border-radius: 999px; background: var(--tech-red); color: #fff; font: 700 .72rem/20px var(--f-mono); text-align: center; }
.bell.has svg { animation: bell-ring 1.2s ease-in-out 1; transform-origin: 50% 10%; }
@keyframes bell-ring { 0%, 100% { transform: none; } 20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { .bell.has svg { animation: none; } }
.nt-list li a { display: grid; gap: 2px; padding: 10px 12px; margin: 6px 0; border: 1px solid var(--line); border-left-width: 4px; border-radius: 8px; color: var(--ink); text-decoration: none; min-height: 44px; }
.nt-list li.unread a { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.nt-list li.nt-warn a { border-left-color: var(--tech-red); }
.nt-list li.nt-ok a { border-left-color: var(--done); }
.nt-list li.nt-info a { border-left-color: var(--tech-blue); }
.nt-list li a span { font-size: .9rem; }
.notes-set { display: grid; gap: 8px; margin: 12px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); }
.notes-set legend { padding: 0 6px; font-weight: 700; }
.notes-set label { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.notes-set .btn { justify-self: start; min-height: 40px; }

/* ================================================================ Bauplaner: Spalte „Im Lager“ */
.pl-stock { min-width: 84px; max-width: 170px; }
.pl-stock-n { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; text-decoration: none; font-weight: 700; }
.pl-stock-n .num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.pl-stock-at { line-height: 1.35; overflow-wrap: anywhere; }
.pl-stock-at a { white-space: normal; }
.lg-box.lg-flash { animation: lg-flash 2.2s ease-out; }
@keyframes lg-flash { 0%, 35% { box-shadow: 0 0 0 3px var(--accent), var(--shadow); } 100% { box-shadow: var(--shadow); } }
@media (prefers-reduced-motion: reduce) { .lg-box.lg-flash { animation: none; outline: 3px solid var(--accent); } }
.lg-box { scroll-margin-top: calc(var(--topbar-h, 64px) + 12px); }

/* ================================================================ Herstellungsplan: Bild-Gleichung „je Durchgang“ / „insgesamt“ */
.cn-eq { display: grid; gap: 6px; margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; font-size: .9rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 70%, transparent), color-mix(in srgb, var(--surface-2) 35%, transparent));
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.cn-eq-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.cn-eq-row + .cn-eq-row { padding-top: 6px; border-top: 1px dashed color-mix(in srgb, var(--line) 80%, transparent); }
.cn-eq-l { min-width: 104px; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.cn-eq-row.tot .cn-eq-l { color: var(--accent); }
.cq { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 2px 10px 2px 3px; white-space: nowrap;
  border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 0 rgb(0 0 0 / .08); }
.cq img { width: 26px; height: 26px; padding: 2px; border-radius: 50%; object-fit: contain; image-rendering: pixelated; background: color-mix(in srgb, var(--surface-2) 80%, transparent); }
.cq .q { font: 700 .95rem var(--f-mono); }
.cq-n { font-size: .82rem; }
.cq.out { background: color-mix(in srgb, var(--done) 12%, var(--surface)); border-color: color-mix(in srgb, var(--done) 45%, var(--line)); }
.cn-eq-row.tot .cq:not(.out) { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.cn-eq .op { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-weight: 800; line-height: 1;
  color: var(--ink-soft); background: color-mix(in srgb, var(--surface-2) 90%, transparent); }
.cn-eq .op.to { width: auto; height: auto; padding: 0 2px; background: none; color: var(--accent); font-size: 1.15rem; }
.cn-spare { padding: 2px 8px; border-radius: 999px; font-size: .78rem; font-weight: 700; color: var(--ink-soft); border: 1px dashed var(--line); }
@media (max-width: 560px) { .cn-eq-l { min-width: 0; flex-basis: 100%; } .cq-n { white-space: normal; } .cq { white-space: normal; } }
/* Materialliste im zweispaltigen Bauplaner: enger setzen, damit „Fehlt“ ohne seitliches Scrollen sichtbar bleibt */
.plan-grid table.data th, .plan-grid table.data td { padding-inline: 7px; }
.plan-grid table.data th { letter-spacing: .03em; }
.plan-grid table.data td:first-child .ing { white-space: normal; }
.plan-grid table.data input.have { width: 52px; }
/* Materialliste in schmaler Spalte (iPad quer mit halber Breite, Handy): Karten statt fünf Spalten – Material oben,
   darunter Benötigt · Vorhanden · Fehlt, dann „Im Lager“ mit den Fundorten über die volle Breite */
.pl-matpanel { container-type: inline-size; }
@container (max-width: 560px) {
  .pl-mats thead { display: none; }
  .pl-mats, .pl-mats tbody { display: block; }
  .pl-mats tr { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 6px 18px; align-items: stretch; padding: 10px 12px; border-top: 1px solid var(--line); }
  .pl-mats tr:first-child { border-top: 0; }
  .plan-grid table.data.pl-mats td, table.data.pl-mats td { display: block; min-width: 0; max-width: none; padding: 0; border: 0; text-align: left; }
  .pl-mats td:nth-child(1) { grid-column: 1 / -1; }
  .pl-mats td:nth-child(2) { grid-area: 2 / 1; }
  .pl-mats td:nth-child(3) { grid-area: 2 / 2; }
  .pl-mats td:nth-child(5) { grid-area: 2 / 3; }
  .pl-mats td:nth-child(4) { grid-area: 3 / 1 / auto / -1; }
  .pl-mats td[data-l]::before { content: attr(data-l); display: block; margin-bottom: 2px; font: 700 .62rem/1.3 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
  /* Zahlen auf Höhe des Eingabefelds daneben: Zellen der Zeile gleich hoch, Wert mittig unter der Beschriftung */
  .plan-grid table.data.pl-mats td.num, table.data.pl-mats td.num { display: grid; grid-template-rows: auto 1fr; align-items: center; font-size: 1rem; }
}
/* Handy: geplante Projekte zweizeilig – Häkchen und Projekt oben, der Zähler darunter */
@media (max-width: 640px) {
  .plan-proj, .plan-proj tbody { display: block; }
  .plan-proj tr { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; border-top: 1px solid var(--line); }
  .plan-proj tr:first-child { border-top: 0; }
  table.data.plan-proj td { border: 0; min-width: 0; }
  .plan-proj td:nth-child(3) { grid-column: 2; padding-top: 0; }
}

/* ================================================================ Aktive Quests: Reparatur-Aufgaben mit Teilen und Material */
.live-rep { margin: 6px 0 4px; padding: 8px 10px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.live-parts { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.live-parts li { padding: 2px 9px; border-radius: 999px; font-size: .8rem; border: 1px solid var(--line); background: var(--surface); }
.live-parts li.done { color: var(--done); border-color: color-mix(in srgb, var(--done) 50%, var(--line)); background: color-mix(in srgb, var(--done) 12%, var(--surface)); }
.live-rep-h { margin: 8px 0 4px; font-weight: 700; }
.live-mats { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 12px; }
.live-mats li { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: .86rem; }
.live-mats li img { width: 20px; height: 20px; object-fit: contain; image-rendering: pixelated; }
.live-mats li > span:last-child { margin-left: auto; white-space: nowrap; }
.live-mats li.ok > span:last-child { color: var(--done); font-weight: 600; }
.live-mats li.miss > span:last-child { color: var(--tech-red); font-weight: 600; }
.live-rep-a { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 8px; }
.live-rep-a .btn { min-height: 36px; }

/* ================================================================ Karte (app/map.js): Canvas-Karte, Steuerung, Infokarte, Legende, Listen */
.map-head .lede { margin-bottom: 10px; }
.map-note-top { margin: 0 0 12px; }
.map-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 16px; align-items: start; }
.map-stage { position: relative; height: clamp(360px, 70vh, 780px); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line);
  background: #bf945e; box-shadow: var(--shadow-md); touch-action: none; -webkit-user-select: none; user-select: none; }
.map-stage:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.map-stage canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.map-stage canvas:active { cursor: grabbing; }
.map-stage.map-hot canvas { cursor: pointer; }
.map-stage.map-placing canvas { cursor: crosshair; }
.map-ctrl { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; z-index: 2; }
.map-ctrl > * { pointer-events: auto; }
.map-b { min-width: 40px; min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid rgb(255 255 255 / .2); background: rgb(14 19 23 / .84);
  color: #EEF0EA; font: 600 1.15rem/1 var(--f-body); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.map-b-t { font-size: .9rem; }
.map-b:hover:not(:disabled) { border-color: var(--accent); }
.map-b[aria-pressed="true"] { background: #FF8FCF; color: #1B0F16; border-color: #FF8FCF; }
.map-b:disabled { opacity: .45; cursor: default; }
.map-b .map-sym { width: 20px; height: 20px; padding: 0; background: none; }
.map-views { background: rgb(14 19 23 / .84); border-color: rgb(255 255 255 / .2); }
.map-views button { min-height: 40px; color: #EEF0EA; font-size: .9rem; }
.map-views button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.map-sym { width: 22px; height: 22px; flex: none; padding: 2px; border-radius: 50%; background: #10151A; }
.map-tip, .map-card { position: absolute; z-index: 3; left: 8px; top: 8px; }
.map-tip[hidden], .map-card[hidden] { display: none; }
.map-tip { pointer-events: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; max-width: 320px; padding: 6px 10px; border-radius: 8px;
  background: rgb(14 19 23 / .94); color: #EEF0EA; font-size: .9rem; border: 1px solid rgb(255 255 255 / .16); box-shadow: 0 8px 20px -10px rgb(0 0 0 / .7); }
.map-tip .small { flex-basis: 100%; padding-left: 30px; color: #AAB3AD; font-size: .75rem; }
.map-tip-l { flex-basis: 100%; padding-left: 30px; gap: 1px; font-size: .8rem; color: #D5DAD3; }
.map-card { width: min(380px, calc(100% - 16px)); max-height: calc(100% - 16px); overflow: auto; padding: 12px 14px; border-radius: 12px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 14px 34px -12px rgb(0 0 0 / .65); }
.map-card.docked { left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; max-height: 58%; }
.map-card-h { display: flex; gap: 10px; align-items: flex-start; padding-right: 38px; }
.map-card-h > div { display: grid; gap: 1px; min-width: 0; }
.map-card-h .map-sym { width: 28px; height: 28px; }
.map-card p { margin: 8px 0 0; }
.map-card ul { margin-top: 8px; }
.map-x { position: absolute; top: 4px; right: 4px; width: 40px; height: 40px; border: 0; border-radius: 8px; background: none; color: var(--ink-soft);
  font-size: 1.5rem; line-height: 1; cursor: pointer; }
.map-x:hover { background: var(--surface-2); color: var(--ink); }
.map-card-a { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.map-card-a .btn { min-height: 40px; display: inline-flex; align-items: center; text-decoration: none; }
.map-note { display: grid; gap: 4px; margin-top: 10px; }
.map-note input { font: inherit; font-size: .95rem; min-height: 40px; width: 100%; padding: 6px 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface-hi); color: var(--ink); }
.map-pill-block { background: color-mix(in srgb, var(--tech-red) 20%, transparent); color: var(--tech-red); font-weight: 600; }
.map-items li { display: flex; gap: 6px; }
.map-pick { margin-top: 8px; gap: 4px; }
.map-pick-b { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface-hi); color: var(--ink); font: inherit; font-size: .92rem; text-align: left; cursor: pointer; }
.map-pick-b:hover { border-color: var(--accent); }
.map-fish-wrap { overflow-x: auto; margin-top: 8px; }
.map-fish { border-collapse: collapse; width: 100%; font-size: .82rem; }
.map-fish th, .map-fish td { text-align: left; vertical-align: top; padding: 4px 6px; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.map-fish th { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.map-help { margin: 8px 0 0; }
/* Legende: Ebenen mit Symbol, Text und Anzahl (ganze Zeile antippbar, mindestens 40 px hoch) */
.map-legend { position: sticky; top: calc(var(--topbar-h, 64px) + 12px); max-height: calc(100vh - var(--topbar-h, 64px) - 24px); overflow: auto;
  padding: 12px 12px 8px; margin: 0; scrollbar-width: thin; }
.map-lg-h { margin: 0 0 4px; font: 400 1.45rem/1.1 var(--f-display); }
.map-lg-g { border: 0; margin: 0 0 6px; padding: 0; min-width: 0; }
.map-lg-g legend { padding: 8px 0 2px; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.map-lg { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 3px 6px; border-radius: 8px; cursor: pointer; }
.map-lg:hover { background: var(--surface-2); }
.map-lg input { width: 18px; height: 18px; flex: none; margin: 0; accent-color: var(--accent); }
.map-lg-t { display: grid; min-width: 0; line-height: 1.2; font-size: .92rem; }
.map-lg-t .small { font-size: .74rem; }
.map-lg .count, .map-list .count { margin-left: auto; font-size: .72rem; padding: 2px 7px; border-radius: 999px; background: var(--surface-2); }
.map-lg.off { opacity: .55; cursor: default; }
.map-lg-sub { margin-left: 26px; }
.map-search { display: grid; gap: 4px; padding: 2px 6px 8px; }
.map-search input { font: inherit; font-size: .9rem; min-height: 40px; width: 100%; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); }
.map-terr { gap: 2px; }
.map-terr li { display: flex; align-items: center; gap: 8px; font-size: .84rem; }
.map-sw { width: 18px; height: 14px; flex: none; border-radius: 3px; border: 1px solid rgb(128 128 128 / .4); }
.map-sw-sq { width: 14px; margin-inline: 2px; border-color: rgb(20 14 10 / .8); }
.map-store { gap: 6px; margin-top: 8px; }
.map-store li { display: grid; gap: 1px; padding: 6px 8px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); background: var(--surface-hi); }
.map-store li a { min-height: 24px; display: inline-flex; align-items: center; }
.map-store li.map-store-hit { border-color: #E0A96A; box-shadow: inset 3px 0 0 #FFD166; }
/* Listen unter der Karte */
.map-lists { display: grid; margin-top: 16px; }
.map-list > summary { display: flex; align-items: center; min-height: 40px; cursor: pointer; list-style: none; }
.map-list > summary::-webkit-details-marker { display: none; }
.map-list > summary::before { content: "▸"; margin-right: 10px; color: var(--ink-soft); transition: transform .2s var(--ease); }
.map-list[open] > summary::before { transform: rotate(90deg); }
.map-list > summary h2 { margin: 0; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; font: 400 1.45rem/1.1 var(--f-display); }
.map-rows { gap: 0; margin-top: 8px; }
.map-rows li { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.map-rows li > span:nth-child(2) { display: grid; flex: 1; min-width: 0; }
.map-rows li.map-today { background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 8px; }
.map-rows li.map-done { opacity: .62; }
.btn.map-show { margin-left: auto; min-height: 40px; min-width: 40px; }
.map-fish-spot { margin-top: 12px; }
.map-fish-h { display: flex; align-items: center; gap: 8px; }
@media (max-width: 1100px) {
  .map-wrap { grid-template-columns: minmax(0, 1fr); }
  .map-legend { position: static; max-height: none; columns: 2 240px; column-gap: 18px; }
  .map-lg-h { column-span: all; }
  .map-lg-g { break-inside: avoid; }
}
@media (max-width: 820px) { .map-stage { height: clamp(340px, 62vh, 640px); } }

/* ================================================================ Rezept-Mengen: Perk-Bonus aus Technologien */
.perk-tag { display: inline-block; margin-left: 6px; font-family: var(--f-body); padding: 1px 8px; border-radius: 999px; font-size: .74rem; font-weight: 600; line-height: 1.5;
  white-space: nowrap; color: var(--ink-soft); border: 1px dashed var(--line); vertical-align: middle; }
.perk-tag.ok { color: var(--done); border-style: solid; border-color: color-mix(in srgb, var(--done) 50%, var(--line));
  background: color-mix(in srgb, var(--done) 10%, transparent); }
.qty-wiki { display: block; font-weight: 400; }
@media (max-width: 560px) { .perk-tag { white-space: normal; } }


/* ================================================================ Handy: untere Leiste, Menü-Blatt, kompakte Kopfzeile */
.tabbar { display: none; }
.menu-sheet { width: 100%; max-width: 100%; max-height: min(86vh, 760px); margin: auto 0 0; padding: 14px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  border: 1px solid var(--line); border-bottom: 0; border-radius: 18px 18px 0 0; background: var(--surface); color: var(--ink); box-shadow: 0 -12px 40px rgb(0 0 0 / .45); overflow: auto; overscroll-behavior: contain; }
.menu-sheet[open] { animation: sheet-up .25s var(--ease) both; }
.menu-sheet::backdrop { background: rgb(0 0 0 / .5); }
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } }
.menu-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.menu-head h2 { margin: 0; font: 400 1.6rem/1.1 var(--f-display); }
.menu-x { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font-size: 1.1rem; cursor: pointer; }
.menu-sheet .eyebrow { margin: 14px 2px 6px; }
.menu-dlc { flex-wrap: wrap; }
.menu-dlc .chip { min-height: 40px; padding-inline: 12px; }
.menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.menu-grid a { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-content: center; column-gap: 10px; row-gap: 1px; min-height: 50px; padding: 7px 10px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); text-decoration: none; font-weight: 500; font-size: .9rem; line-height: 1.2; min-width: 0; }
.menu-grid a > span:not(.count) { grid-column: 2; min-width: 0; overflow-wrap: normal; hyphens: auto; }
.menu-grid a .nav-ic { grid-row: 1 / span 2; align-self: center; color: var(--accent); opacity: 1; }
.menu-grid a .count { grid-column: 2; font: .68rem/1.2 var(--f-mono); color: var(--ink-soft); }
.menu-grid a[aria-current="page"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--bg)); }
@media (max-width: 640px) {
  :root { --tabbar-h: calc(62px + env(safe-area-inset-bottom, 0px)); }
  body { padding-bottom: var(--tabbar-h); }
  .tabbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 5px 6px calc(5px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); }
  .tabbar a, .tabbar button { position: relative; display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 52px; padding: 0; border: 0; border-radius: 12px;
    background: none; color: var(--ink-soft); font: 600 .7rem/1 var(--f-body); letter-spacing: .01em; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .tabbar .nav-ic { width: 22px; height: 22px; opacity: 1; }
  .tabbar [aria-current="page"], .tabbar button.on { color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); }
  .tab-n { position: absolute; top: 3px; left: calc(50% + 5px); min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: var(--accent-ink, #1a1206);
    font: 700 .64rem/18px var(--f-mono); text-align: center; }
  .toast { bottom: calc(var(--tabbar-h) + 12px); }
  .update-bar { bottom: calc(var(--tabbar-h) + 12px); }
  /* Seitenleiste oben: nur Wochentage und Spielstand-Stempel, die Seiten liegen in der unteren Leiste und im Menü */
  .sidenav > a:not(.wk-nav):not(.save-stamp), .sidenav .sep, .sidenav .nav-group { display: none; }
  .sidenav { overflow: hidden; gap: 6px; padding-bottom: 0; }
  .sidenav a.save-stamp { flex: 1; min-width: 0; overflow: hidden; white-space: normal; line-height: 1.25; }
  .save-stamp .t { min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
  /* Kopfzeile in einer Zeile: Logo, Suche, Glocke; der DLC-Filter liegt im Menü */
  .topbar { flex-wrap: nowrap; gap: 8px; padding-block: 8px; }
  .wordmark { font-size: 1.35rem; flex: none; }
  .search { flex: 1 1 auto; min-width: 0; }
  .search input { padding-block: 9px; padding-right: 8px; }
  .topbar > .dlc-filter { display: none; }
  .bell { flex: none; margin-left: 0; }
}
@media (max-width: 380px) { .wordmark { font-size: 1.12rem; } .search input { padding-left: 32px; background-position: 10px 50%; } }
/* Touch (Handy, Tablet): Bedienelemente mindestens 40 px hoch, kleine Häkchen und Schalter mit größerer Trefferfläche */
@media (pointer: coarse), (max-width: 640px) {
  main .btn, main .seg button, main select, main input:not([type]), main input[type="text"], main input[type="number"], main input[type="search"], main input[type="password"], main input[type="color"] { min-height: 40px; }
  main .btn.small-btn, main button.linkish { min-width: 40px; min-height: 40px; }
  main summary { padding-block: 10px; }
  main .mod-set > summary { min-height: 42px; }
  main input[type="checkbox"], main input[type="radio"] { width: 22px; height: 22px; }
  main .switch input { width: 100%; height: 100%; }
  main label:has(> input[type="checkbox"], > input[type="radio"]):not(.switch):not(.map-lg):not(.cb-cell) { display: block; padding-block: 9px; }
  main label:has(> input[type="checkbox"], > input[type="radio"]):not(.switch):not(.map-lg):not(.cb-cell) > input { vertical-align: middle; margin: 0 8px 0 0; }
  /* Schalter (Mods): 40 px hoch antippbar, sichtbar 28 px */
  .switch { width: 48px; height: 40px; }
  .switch span { inset: 6px 0; }
  .switch span::after { width: 22px; height: 22px; }
  .switch input:checked + span::after { transform: translateX(20px); }
  .switch::before { content: ""; position: absolute; inset: 0 -4px; }
  /* Abhaken in Tabellen (Bauprojekte, Bauplaner, Erfolge): die ganze Häkchen-Zelle ist antippbar */
  td > .cb-cell { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: -7px; cursor: pointer; }
  main td > .cb-cell > input[type="checkbox"] { width: 26px; height: 26px; margin: 0; }
  /* Quests: Häkchen im Kopf der Quest mit 40-px-Trefferfläche (sichtbar 24 px); daneben tippen klappt weiter auf */
  details.quest > summary input[type="checkbox"] { -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 40px; height: 40px; margin: -8px -2px -8px -10px; padding: 0;
    border: 0; border-radius: 8px; cursor: pointer; --cb-ring: color-mix(in srgb, var(--ink-soft) 80%, transparent); --cb-fill: var(--bg);
    background: linear-gradient(var(--cb-fill), var(--cb-fill)) center / 20px 20px no-repeat, linear-gradient(var(--cb-ring), var(--cb-ring)) center / 24px 24px no-repeat; }
  details.quest > summary input[type="checkbox"]:checked { --cb-ring: var(--done); --cb-fill: var(--done); }
  details.quest > summary input[type="checkbox"]:checked::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; font: 700 16px/1 var(--f-body); color: var(--bg); }
  details.quest > summary input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  /* Bauplan: „Gebaut“-Kästchen mit 40-px-Trefferfläche, sichtbar ein 24-px-Kästchen in der Mitte (Schrein: 6 Kästchen in 2 Reihen zu 3) */
  .ly-boxes { gap: 0; min-width: 120px; }
  .ly-box, .ly-box.on { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; background: none; }
  .ly-box::before { content: ""; position: absolute; inset: 8px; border-radius: 5px; border: 1.5px solid var(--line); background: var(--bg); }
  .ly-box.on::before { background: var(--done); border-color: var(--done); }
  .ly-box.on::after { position: relative; font-size: 15px; }
  .ly-box:hover::before { border-color: var(--accent); }
  .ly-box:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
  /* Hinweis-Nummern im Plan: Trefferfläche unsichtbar größer (so weit die Zelle reicht), in den Zusatztabellen auch sichtbar größer */
  .ly-note { position: relative; z-index: 2; }
  .ly-note::before { content: ""; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%); }
  .ly-sheet .ly-note { min-width: 26px; height: 26px; font-size: 12px; }
}
/* Handy: Einleitungstexte zweizeilig mit „mehr“ */
.lede-more { display: none; }
@media (max-width: 640px) {
  .lede.lede-clamp:not(.open) { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 0; }
  .lede-more { display: inline-flex; align-items: center; min-height: 40px; margin: 0 0 6px; font-size: .9rem; }
  .lede.open { margin-bottom: 0; }
}
/* Handy: Übersicht nach Wichtigkeit – Tag, Woche (heute zu Besuch), laufende Quests, Heute im Spiel, Fortschritt */
@media (max-width: 640px) {
  .home-top { display: flex; flex-direction: column; gap: 16px; }
  .home-top .home-main { display: contents; }
  .home-top > .wk-card { margin: 0; }
  .home-top .day-overview { order: 1; }
  .home-top .wk-card { order: 2; }
  .home-top .active-quests { order: 3; }
  .home-top .changes-panel { order: 4; }
  .home-top .prog-panel { order: 5; }
}
/* Handy: lange Blöcke zugeklappt – Knopf und Kurzinfo nur dort, am PC ist alles offen */
.fold-btn, .fold-sum { display: none; }
@media (max-width: 640px) {
  .fold-btn { display: inline-flex; align-items: center; min-height: 40px; font-size: .9rem; }
  .m-fold:not(.open) .m-foldable, .m-fold.whole:not(.open) > :not(.panel-head) { display: none !important; }
  .m-fold.whole:not(.open) > .panel-head { padding-bottom: 0; border-bottom: 0; }
  .m-fold.whole:not(.open) .fold-sum { display: block; flex-basis: 100%; margin: 0; }
  .panel-head .fold-btn { margin-left: auto; }
  .changes-panel > .fold-btn { margin-top: 6px; }
}
/* Handy: Kennzahl-Kacheln zu zweit nebeneinander statt je über die volle Breite */
@media (max-width: 640px) {
  .stat-row, .gy-stats, .so-facts, .panel.day-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .stat-row .stat, .gy-stats .stat { padding: 10px 12px; }
  .stat-row .stat .eyebrow, .gy-stats .stat .eyebrow { white-space: normal; overflow-wrap: anywhere; }
}

/* ================================================================ Kaufmann & Kistenhandel */
.kf-hero, .kf-next, .kf-crate {
  --lg-edge: color-mix(in srgb, var(--accent) 38%, color-mix(in srgb, var(--ink-soft) 55%, var(--line)));
  --lg-plank: color-mix(in srgb, var(--accent) 16%, var(--surface-2));
  --lg-wood: color-mix(in srgb, var(--accent) 8%, var(--surface-hi));
}
.kf-hero { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.kf-hero-pic { flex: none; display: grid; place-items: center; width: 82px; height: 82px; border-radius: 50%; overflow: hidden;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--wk) 40%, transparent), var(--surface-2)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wk) 60%, var(--line)), var(--shadow-md); }
.kf-hero-pic img { width: 54px; height: 84px; object-fit: contain; image-rendering: pixelated; transform: translateY(8px); }
.kf-next { border-top: 3px solid var(--wk); }
.kf-next-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 14px 24px; align-items: end; margin: 12px 0; }
.kf-when { display: grid; gap: 2px; }
.kf-when-big { font: 400 2.4rem/1 var(--f-display); color: color-mix(in srgb, var(--wk) 45%, var(--ink)); }
.kf-exp { display: grid; gap: 3px; justify-items: end; text-align: right; }
.kf-exp-v { font: 600 1.6rem/1.1 var(--f-mono); }
.kf-pals { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.kf-pal { display: grid; justify-items: center; align-content: center; gap: 2px; width: 72px; height: 64px; border-radius: 8px; font-size: .78rem; font-weight: 600;
  border: 2px dashed var(--line); color: var(--ink-soft);
  background: repeating-linear-gradient(0deg, transparent 0 13px, color-mix(in srgb, var(--lg-edge) 18%, transparent) 13px 15px), color-mix(in srgb, var(--lg-plank) 45%, transparent); }
.kf-pal-ic { font-size: 1.25rem; line-height: 1; }
.kf-pal.full { border: 2px solid var(--lg-edge); color: var(--ink); background: repeating-linear-gradient(0deg, transparent 0 13px, color-mix(in srgb, var(--lg-edge) 30%, transparent) 13px 15px), var(--lg-plank); box-shadow: var(--shadow); }
.kf-pal.full .kf-pal-ic { color: var(--done); }
.kf-pal.odd { border-style: solid; border-color: var(--accent); color: var(--accent); }
.kf-legend { margin: 2px 0 10px; }
.kf-facts { margin: 12px 0 0; }
.kf-facts .fact .v b { font-weight: 600; }
.kf-plan { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--wk) 10%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--wk) 30%, var(--line)); }
/* Beziehung mit Schwellen */
.kf-rel { margin: 12px 0 6px; }
.kf-rel-top { display: flex; align-items: baseline; gap: 8px; }
.kf-rel-bar { position: relative; height: 12px; margin: 8px 0 22px; border-radius: 999px; background: var(--surface-2); }
.kf-rel-bar > span { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--done) 60%, transparent), var(--done)); }
.kf-rel-bar i { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink-soft); font-style: normal; }
.kf-rel-bar i.ok { background: var(--done); }
.kf-rel-bar i span { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); font: .7rem var(--f-mono); color: var(--ink-soft); }
.kf-qlist { display: grid; gap: 2px; margin-top: 8px; }
.kf-q { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 6px; border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.kf-q:first-child { border-top: 0; }
.kf-q .pill { justify-self: start; }
.kf-q.done .kf-q-body > a { color: var(--ink-soft); }
.kf-q.run { background: color-mix(in srgb, var(--accent) 7%, transparent); border-radius: 8px; }
.kf-q-body { min-width: 0; display: grid; gap: 4px; }
.kf-q-prog { color: var(--accent); font-weight: 600; }
/* Kisten-Rechner */
.kf-crate { margin-top: 16px; }
.kf-crate-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.kf-crate-head h3 { margin: 0; }
.kf-rec td { vertical-align: top; }
.kf-rec td:first-child { min-width: 220px; }
.kf-rec .ing { margin: 1px 4px 1px 0; }
.ing.kf-short { border: 1px dashed color-mix(in srgb, var(--ink-soft) 55%, transparent); }
.kf-shop { margin-top: 20px; padding-top: 14px; border-top: 1px dashed var(--line); }
.kf-shop h3 { margin-top: 0; }
.kf-shop-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.kf-shop-form .field { display: grid; gap: 4px; }
.kf-shop-form select { max-width: min(100%, 520px); }
.kf-shop-form input[type="number"] { width: 90px; }
.kf-shop-list { display: grid; gap: 6px; margin: 12px 0 6px; }
/* Direkt-Handel und Verlauf nebeneinander */
.kf-cols { display: grid; gap: 16px; margin: 16px 0; }
.kf-cols > .panel { margin: 0; }
@media (min-width: 1100px) { .kf-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.kf-h3 { font-size: .95rem; margin: 14px 0 6px; }
.kf-buys { display: grid; gap: 4px; }
.kf-buys li { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.kf-cash { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 12px 0; }
.kf-cash > div { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--bg) 45%, transparent); }
.kf-cash b { font-size: 1.15rem; }
/* So funktioniert es */
.kf-steps { counter-reset: kf; list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 10px; }
.kf-steps li { counter-increment: kf; position: relative; padding-left: 40px; }
.kf-steps li::before { content: counter(kf); position: absolute; left: 0; top: -2px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
  font: 700 .85rem/1 var(--f-mono); color: var(--accent-ink); background: var(--accent); }
.kf-costs { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.kf-costs > div { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--bg) 40%, transparent); }
.kf-costs .kf-h3 { margin-top: 0; }
.kf-costs p { margin: 4px 0; }
@media (max-width: 640px) {
  .kf-hero-pic { width: 64px; height: 64px; }
  .kf-hero-pic img { width: 42px; height: 66px; }
  .kf-next-top { grid-template-columns: 1fr; }
  .kf-exp { justify-items: start; text-align: left; }
  .kf-when-big { font-size: 2rem; }
  .kf-pal { width: 62px; height: 58px; }
  .kf-q { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .kf-rec td:first-child { min-width: 180px; }
}
.kf-note { display: block; margin-top: 3px; font: .75rem/1.3 var(--f-body); color: var(--ink-soft); }
.kf-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1100px) { .kf-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .kf-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kf-facts .fact { padding: 8px; gap: 8px; }
  /* Rechner-Tabelle als Karten: Inhalt oben, darunter Vorrat, Einzelwert und Gewinn mit Beschriftung */
  .kf-rec thead { display: none; }
  .kf-rec, .kf-rec tbody { display: block; }
  .kf-rec tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; padding: 10px 12px; border-top: 1px solid var(--line); }
  .kf-rec tr:first-child { border-top: 0; }
  .kf-rec td { display: block; padding: 0; border: 0; min-width: 0 !important; }
  .kf-rec td:first-child { grid-column: 1 / -1; }
  .kf-rec td[data-l]::before { content: attr(data-l); display: block; font: 700 .62rem/1.3 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 2px; }
  .kf-rec td.num { text-align: left; }
}
.kf-rec .coins { flex-wrap: nowrap; }
.kf-rec td.num > b { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
@media (max-width: 640px) {
  table.data.kf-rec td { border-bottom: 0; padding: 0; }
  .kf-drk tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kf-drk td:nth-child(-n+2) { grid-column: 1 / -1; }
}
.wk-kf { margin: 4px 0 0; color: var(--ink-soft); }
.day-facts .v a { font: 600 1rem/1.3 var(--f-body); }

/* ================================================================ Garten & Dünger */
.gd-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 12px 0; }
@media (min-width: 1100px) { .gd-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gd-hint { margin: 0 0 16px; }
/* Beet-Raster: ein Feld je Beet an seiner Spielposition */
.gd-plan-wrap { overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: thin; }
.gd-plan { display: grid; grid-template-columns: repeat(var(--cols), minmax(42px, 58px)); grid-template-rows: repeat(var(--rows), auto); gap: 5px; width: max-content; margin: 8px 0; }
.gd-tile { position: relative; aspect-ratio: 1; min-width: 42px; display: grid; place-items: center; padding: 2px; border-radius: 8px; cursor: pointer; font: inherit; color: var(--ink);
  border: 1px solid color-mix(in srgb, #6b4a2b 55%, var(--line)); background: color-mix(in srgb, #6b4a2b 30%, var(--surface)); transition: transform .15s, box-shadow .15s; }
.gd-tile img { width: 26px; height: 26px; object-fit: contain; image-rendering: pixelated; grid-area: 1 / 1; }
.gd-tile .gd-t-m { grid-area: 1 / 1; align-self: start; justify-self: end; font: 700 .62rem/1 var(--f-mono); padding: 1px 3px; border-radius: 4px; background: rgb(0 0 0 / .45); color: #fff; }
.gd-tile .gd-t-f { position: absolute; left: 3px; bottom: 2px; font: 600 .58rem/1 var(--f-mono); color: var(--ink-soft); }
.gd-tile.empty { background: color-mix(in srgb, #6b4a2b 16%, var(--surface)); border-style: dashed; }
.gd-tile.empty .gd-t-m { position: static; background: none; color: var(--ink-soft); font-size: .9rem; }
.gd-tile.fert .gd-t-f { color: var(--done); }
.gd-tile.ready { border-color: var(--done); box-shadow: 0 0 0 1px var(--done) inset, 0 0 10px -2px color-mix(in srgb, var(--done) 60%, transparent); }
.gd-tile.ready .gd-t-m { background: var(--done); color: var(--bg); }
.gd-tile.grow .gd-t-m { background: color-mix(in srgb, var(--accent) 80%, #000); }
.gd-tile:hover, .gd-tile.sel { transform: translateY(-1px); box-shadow: 0 0 0 2px var(--accent); }
.gd-legend { margin: 2px 0 8px; }
.gd-sel { padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 45%, transparent); }
.gd-sel p { margin: 0 0 6px; }
.gd-cols { display: grid; gap: 16px; margin: 16px 0; }
.gd-cols > .panel { margin: 0; }
@media (min-width: 1100px) { .gd-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.gd-prev { display: grid; gap: 10px; margin: 10px 0; }
.gd-prev li { display: grid; gap: 4px; }
.gd-stock { display: grid; gap: 6px; }
.gd-stock li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 3.5em minmax(0, 1fr); gap: 8px; align-items: center; }
.gd-stock b.num { text-align: right; }
/* Kisten am Garten: Mini-Karten in einer Reihe, neue reihen sich an */
.gd-chests { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin: 10px 0 4px; }
.gd-chest { display: grid; gap: 6px; padding: 8px 10px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); text-decoration: none; color: var(--ink);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, var(--surface-hi)), var(--surface)); min-width: 0; }
.gd-chest:hover { border-color: var(--accent); }
.gd-chest-top { display: flex; justify-content: space-between; gap: 8px; font-size: .85rem; }
.gd-chest-top .num { color: var(--ink-soft); }
.gd-chest.lv-warn .gd-chest-top .num { color: var(--accent); font-weight: 600; }
.gd-chest.lv-full .gd-chest-top .num { color: var(--tech-red); font-weight: 600; }
.gd-chest-bar { display: block; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.gd-chest-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--done); }
.gd-chest.lv-warn .gd-chest-bar > span { background: var(--accent); }
.gd-chest.lv-full .gd-chest-bar > span { background: var(--tech-red); }
.gd-chest-items { display: grid; gap: 2px; font-size: .78rem; line-height: 1.3; }
.gd-chest-items > span { display: flex; align-items: center; gap: 5px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gd-chest-items img { width: 16px; height: 16px; object-fit: contain; image-rendering: pixelated; flex: none; }
.gd-chest-items .num { min-width: 2.2em; text-align: right; }
/* Komposthaufen */
.gd-heaps { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 10px 0; }
.gd-heap { display: grid; gap: 4px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 40%, transparent); font-size: .85rem; }
.gd-heap.busy { border-color: color-mix(in srgb, var(--done) 50%, var(--line)); }
@media (max-width: 640px) {
  .gd-facts { gap: 8px; }
  .gd-facts .fact { padding: 8px; gap: 8px; }
  .gd-stock li { grid-template-columns: minmax(0, 1fr) auto; }
  .gd-stock li > .small:nth-child(2) { grid-column: 1; grid-row: 2; }
  .gd-stock li > .small:last-child { grid-column: 2; grid-row: 2; text-align: right; }
  .gd-chests { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .gd-rec thead, .gd-eff thead { display: none; }
  .gd-rec, .gd-rec tbody { display: block; }
  .gd-rec tr { display: grid; gap: 4px; padding: 10px 12px; border-top: 1px solid var(--line); }
  table.data.gd-rec td { border: 0; padding: 0; }
  .gd-rec td[data-l]::before { content: attr(data-l) ": "; font-size: .7rem; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; }
}
.gd-swipe { display: none; }
@media (max-width: 640px) { .gd-swipe { display: inline; } .gd-plan { grid-template-columns: repeat(var(--cols), 42px); gap: 4px; } }
.gd-fert { margin: 10px 0 0; }
/* Feld mit Liste daneben: Raster | Angepflanzt + Düngen möglich. Passt die Liste (26rem) nicht neben das Raster, rutscht sie darunter;
   die Liste selbst teilt sich ab 30rem in zwei Spalten (Container-Abfrage), sonst untereinander. Legende und Auswahl bestimmen die Breite nicht mit. */
.gd-field { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: flex-start; }
.gd-field-main { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.gd-field-main > .gd-legend, .gd-field-main > .gd-sel { contain: inline-size; }
.gd-side { flex: 1 1 26rem; min-width: min(100%, 26rem); container-type: inline-size; }
.gd-side-in { display: grid; gap: 16px 22px; align-items: start; }
@container (min-width: 30rem) { .gd-side-in { grid-template-columns: minmax(0, 1fr) minmax(11rem, 14rem); } }
.gd-side-h { margin: 0 0 8px; font-size: 1rem; }
.gd-crops > ul, .gd-cap > ul { display: grid; gap: 8px; margin: 0; }
.gd-fc { display: grid; gap: 4px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--bg) 40%, transparent); }
.gd-fc-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.gd-fc-h > img { width: 24px; height: 24px; object-fit: contain; image-rendering: pixelated; }
.gd-fc-h > .num { margin-left: auto; font-weight: 700; }
.gd-fc-f { color: var(--ink-soft); }
.gd-fc-f b { color: var(--ink); font-weight: 600; }
.gd-fc-free { gap: 2px; border-style: dashed; }
.gd-side-note { margin: 8px 0 0; }
.gd-cap > p { margin: -4px 0 8px; }
.gd-cap > p:last-child { margin: 8px 0 0; }
.gd-cap li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.gd-cap li > img { width: 24px; height: 24px; object-fit: contain; image-rendering: pixelated; }
.gd-cap-n { display: grid; min-width: 0; font-size: .88rem; line-height: 1.25; }
.gd-cap li > b.num { font-size: 1.15rem; text-align: right; }
.gd-cap li.gd-cap-none { opacity: .55; }
.or-side { flex-basis: 22rem; min-width: min(100%, 22rem); }
.or-side .table-wrap { margin: 0; }
.gd-chests-home { margin-top: 12px; }
.gd-chests-home .gd-chests { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
@media (max-width: 640px) { .gd-chests, .gd-chests-home .gd-chests { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); } .gd-chest-items { font-size: .74rem; } }

/* ================================================================ Seelen: Heilungs-Planer mit Kacheln, Bilanz und Schritt-Plan */
.so-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px; margin: 8px 0 0; }
.so-tile { display: grid; gap: 6px; align-content: start; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.so-tile.locked { border-style: dashed; }
.so-tile-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.so-tile-need { display: inline-flex; align-items: center; gap: 6px; }
.so-otile { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; min-height: 48px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg) 35%, var(--surface)); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.so-otile:hover, .so-otile:focus-visible { border-color: var(--accent); }
.so-otile[aria-expanded="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.so-otile-img img { width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; }
.so-otile-t { display: grid; gap: 1px; min-width: 0; }
.so-sk.ghost { opacity: .6; }
.so-q { position: relative; height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--line) 60%, transparent); overflow: hidden; }
.so-q.big { height: 14px; }
.so-q span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; }
.so-q-to { background: color-mix(in srgb, var(--tech-blue) 55%, transparent); }
.so-q-now { background: var(--tech-green); }
.so-q-l { display: flex; justify-content: space-between; gap: 8px; margin: 0; }
.so-tile-up { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.so-tile-up img { width: 16px; height: 16px; }
.so-oinfo { margin-top: 10px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.so-oinfo[hidden] { display: none; }
.so-oinfo .gy-pi-h img { width: 28px; height: 28px; object-fit: contain; image-rendering: pixelated; }
.so-olist { display: grid; gap: 4px; margin: 0; }
.so-olist li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.so-bal { display: grid; gap: 8px; padding: 10px 12px; margin: 8px 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--bg) 35%, var(--surface)); }
.so-bal-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.so-bal-soul { display: grid; gap: 4px; }
.so-bal-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 8px; }
.so-bal-c { display: grid; gap: 2px; padding: 6px 8px; border-radius: var(--radius-sm); background: var(--surface); }
.so-bal-c b { font-size: 1.15rem; display: inline-flex; align-items: center; gap: 4px; }
.so-bal-c img { width: 18px; height: 18px; }
.so-plan-h { margin: 14px 0 6px; }
.so-plan-steps { display: grid; gap: 6px; margin: 0; padding-left: 1.4em; }
.so-plan-steps li { padding: 6px 8px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); }
.so-plan-steps li.done { opacity: .7; }
.so-plan-steps img { width: 16px; height: 16px; vertical-align: middle; }

/* ================================================================ Tablet & Touch: einzeilige Kopfzeile, „Alle Seiten“, Abschnitte, größere Trefferflächen */
.pages-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; margin-left: auto; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink); font: 600 .9rem/1 var(--f-body); white-space: nowrap; cursor: pointer; transition: border-color .18s, background .18s; }
.pages-btn .nav-ic { width: 20px; height: 20px; opacity: 1; color: var(--accent); }
.pages-btn:hover { border-color: var(--accent); }
.pb-f { padding: 3px 7px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--ink); font: 700 .7rem/1 var(--f-mono); }
.pb-f[hidden] { display: none; }
.pages-btn + .bell { margin-left: 0; }
/* Bis 1365 px (iPad quer, kleinere Laptops): DLC-Filter aus der Kopfzeile ins Blatt „Alle Seiten“, damit die Kopfzeile einzeilig bleibt */
@media (max-width: 1365px) { .topbar { flex-wrap: nowrap; } .topbar > .dlc-filter { display: none; } .search { min-width: 0; } }
@media (max-width: 640px) { .pages-btn { display: none; } }
/* „Alle Seiten“ ab Tablet: mittiges Fenster, Gruppen als Spalten – alle Bereiche auf einen Blick, ohne Scrollen */
@media (min-width: 641px) {
  .menu-sheet { width: min(1080px, calc(100vw - 48px)); max-width: none; max-height: min(90vh, 960px); max-height: min(90dvh, 960px); margin: auto; padding: 16px 22px 20px;
    border-bottom: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 60px rgb(0 0 0 / .5); }
  .menu-groups { columns: 4 210px; column-gap: 18px; }
  .menu-group { break-inside: avoid; padding-bottom: 4px; }
  .menu-group .menu-grid { grid-template-columns: minmax(0, 1fr); }
  .menu-recent { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
  .menu-sheet .menu-grid { gap: 4px; }
  .menu-sheet .menu-grid a { min-height: 42px; padding-block: 4px; }
  .menu-sheet .eyebrow { margin: 10px 2px 5px; }
}
/* Seitenwerkzeuge unten rechts: Abschnitte der Seite, nach oben */
.page-tools { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 30;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none; }
.pt-btn { pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 48px; min-height: 48px; padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--ink);
  font: 600 .9rem/1 var(--f-body); box-shadow: 0 8px 24px rgb(0 0 0 / .35); cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pt-btn .nav-ic { width: 20px; height: 20px; opacity: 1; color: var(--accent); }
.pt-btn:hover { border-color: var(--accent); }
.pt-btn[hidden] { display: none; }
.pt-top { width: 48px; padding: 0; }
.sec-dlg { width: min(420px, calc(100vw - 32px)); max-height: min(70vh, 640px); margin: auto 16px calc(84px + env(safe-area-inset-bottom, 0px)) auto; padding: 14px 16px 16px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: 0 18px 50px rgb(0 0 0 / .5); overflow: auto; overscroll-behavior: contain; }
.sec-dlg::backdrop { background: rgb(0 0 0 / .35); }
.sec-dlg .menu-head h2 { font-size: 1.35rem; }
.sec-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; counter-reset: sec; }
.sec-list button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); color: var(--ink); font: 500 .95rem/1.25 var(--f-body); text-align: left; cursor: pointer; }
.sec-list button::before { counter-increment: sec; content: counter(sec); min-width: 22px; font: 700 .75rem/1 var(--f-mono); color: var(--ink-soft); }
.sec-list button:hover { border-color: var(--accent); }
.sec-list button[aria-current="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--bg)); }
.sec-list button[aria-current="true"]::after { content: "hier"; margin-left: auto; font-size: .75rem; font-weight: 700; color: var(--accent); }
main h2 { scroll-margin-top: calc(var(--topbar-h, 64px) + 16px); }
@media (max-width: 640px) {
  .page-tools { bottom: calc(var(--tabbar-h) + 12px); }
  .pt-sec { width: 48px; padding: 0; }
  .pt-sec span { display: none; }
  .sec-dlg { margin: auto auto calc(var(--tabbar-h) + 72px); }
}
/* Touch: kein Doppeltipp-Zoom-Verzug, sichtbares Tipp-Feedback, Kopfzeile und Seitenleiste mit großen Trefferflächen */
a, button, summary, label, select, [role="button"] { touch-action: manipulation; }
html.touch a, html.touch button, html.touch summary { -webkit-tap-highlight-color: color-mix(in srgb, var(--accent) 22%, transparent); }
html.touch .sidenav a { min-height: 42px; }
html.touch .chip { min-height: 40px; padding-inline: 12px; }
html.touch .bell { width: 44px; height: 44px; }
html.touch .pages-btn { min-height: 44px; }
html.touch .wordmark { padding-block: 7px; }
html.touch .sidenav a:active, html.touch .menu-grid a:active, html.touch .sec-list button:active, html.touch .chip:active, html.touch .pt-btn:active { background: color-mix(in srgb, var(--accent) 20%, var(--surface)); }
/* Ohne Maus bleibt ein „Hover“ nach dem Tippen hängen: dort keine Hover-Hintergründe und -Bewegungen in der Navigation */
@media (hover: none) {
  .sidenav a:not([aria-current]):hover { background: none; color: var(--ink-soft); }
  .sidenav a:hover .nav-ic { transform: none; }
}

/* ================================================================ Angeln: Fisch-Finder, Angelplätze, Ausrüstung, Verwendung */
.fi-tiles { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.fi-tile .gy-tile-img img { width: 40px; height: 40px; }
.fi-t-sub { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 6px; font-size: .74rem; }
.fi-q { color: var(--accent); letter-spacing: -.05em; font-size: .8rem; }
.fi-lvl { color: var(--ink-soft); }
.fi-tile.got { border-color: color-mix(in srgb, var(--tech-green) 55%, var(--line)); }
.fi-tile.got .gy-tile-tag { color: var(--tech-green); }
.fi-info { margin-top: 10px; }
.fi-combo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; padding: 4px 0; }
.fi-combo + .fi-combo { border-top: 1px dotted var(--line); }
.fi-p { margin-left: auto; font: 700 .9rem/1 var(--f-mono); color: var(--accent); }
.fi-where { display: block; }
.fi-filter .chip { min-height: 40px; }
/* Wahl für die Angelplätze klebt beim Scrollen unter der Kopfzeile – am Tablet Angel/Köder umstellen, ohne hochzuscrollen */
.fi-ctl { position: sticky; top: calc(var(--topbar-h, 64px) + 6px); z-index: 5; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 10px 0 14px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--surface) 94%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.fi-ctl .seg button { min-height: 40px; }
.fi-bait { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.fi-bait select { min-height: 40px; font: inherit; font-weight: 400; }
.fi-spots { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; align-items: start; }
.fi-spot { margin: 0; }
.fi-spot .panel-head h3 { margin: 0; }
.fi-tab { width: 100%; border-collapse: collapse; font-size: .9rem; }
.fi-tab th, .fi-tab td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.fi-tab td { font-family: var(--f-mono); font-size: .85rem; white-space: nowrap; }
.fi-tab td.small { font-family: inherit; white-space: normal; }
.fi-tab .fi-top { font-weight: 700; color: var(--accent); }
.fi-tab .fi-na { color: var(--ink-soft); opacity: .5; }
.fi-tab thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.fi-tab tbody th img { width: 22px; height: 22px; vertical-align: middle; image-rendering: pixelated; }
.fi-tab .linkish { text-align: left; }
.fi-rods { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.fi-rod { margin: 0; }
.fi-rod.got { border-color: color-mix(in srgb, var(--tech-green) 55%, var(--line)); }
.fi-tips li { margin: 6px 0; }
/* Am Handy klebt die Wahl auch, aber kompakt in zwei flachen Zeilen: Tageszeit und Köder, darunter die drei Angeln */
@media (max-width: 640px) {
  .fi-spots { grid-template-columns: minmax(0, 1fr); }
  .fi-ctl { top: calc(var(--topbar-h, 56px) + 4px); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 8px; margin: 8px 0 12px; padding: 6px; }
  .fi-ctl .seg { min-width: 0; }
  .fi-ctl .seg button { min-height: 36px; padding: 4px 10px; font-size: .88rem; white-space: nowrap; }
  .fi-ctl .seg:nth-child(1) { grid-column: 1; grid-row: 1; }
  .fi-ctl .seg:nth-child(2) { grid-column: 1 / -1; grid-row: 2; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .fi-ctl .seg:nth-child(2) button { padding-inline: 4px; overflow: hidden; text-overflow: ellipsis; }
  .fi-bait { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px; font-size: .88rem; }
  .fi-bait select { min-height: 36px; width: 100%; min-width: 0; }
}

/* ================================================================ Leichen bearbeiten: in der Karte, Plan mit Schritten, Teile antippen, Injektionen kompakt */
.gy-body.editing { grid-column: 1 / -1; border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.gy-body-h .gy-close { margin-left: auto; min-height: 40px; }
.gy-inline { display: grid; gap: 8px; }
.gy-inline > h3 { margin: 10px 0 4px; }
.gy-plan-box { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.gy-plan-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.gy-plan-v { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; font-size: 1.05rem; }
.gy-plan-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.gy-plan-btns .btn { min-height: 44px; }
.gy-plan-box > p { margin: 0; }
.gy-steps { margin: 0; padding-left: 1.4em; display: grid; gap: 2px; }
.gy-steps label { display: flex; align-items: flex-start; gap: 10px; min-height: 40px; padding: 6px 0; cursor: pointer; }
.gy-steps input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--accent); }
.gy-steps input:checked + span { text-decoration: line-through; opacity: .65; }
/* Teile zum Antippen: Kachel = entnehmen/zurücklegen (entnommen: durchgestrichen + Schild), „ⓘ Infos“ darunter */
.gy-tile.act { cursor: pointer; }
.gy-tile.act[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.gy-tile:disabled { cursor: default; opacity: .7; }
.gy-pcard-a .gy-i { min-height: 40px; font-size: .85rem; color: var(--ink-soft); }
/* Injektionen als Schalter-Kacheln */
.gy-emb-c { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.gy-echip { display: grid; gap: 4px; align-content: start; }
.gy-echip .gy-tog { width: 100%; justify-content: flex-start; text-align: left; padding: 8px 10px; }
.gy-e-t { display: grid; gap: 1px; min-width: 0; }
.gy-echip.bad .gy-tog { border-color: var(--tech-red); }
.gy-emb-more { margin-top: 6px; }
.gy-emb-more > summary { min-height: 40px; display: flex; align-items: center; cursor: pointer; }
.gy-emb-more .gy-emb-c { margin-top: 6px; }
/* In der Leichen-Karte steht der Grabwert schon groß im Plan – die Ergebnis-Leiste klebt dort nicht über den Teilen */
.gy-inline .gy-result { position: static; }

/* ================================================================ Taverne & Events */
.tv-q { margin-top: 4px; }
.tv-q .stepper { display: inline-flex; align-items: center; gap: 8px; }
.tv-seg { display: flex; flex-wrap: wrap; border-radius: var(--radius-sm); margin: 6px 0 12px; }
.tv-seg button { flex: 1 1 auto; min-height: 44px; }
.tv-ev .panel-head h3 { margin: 0; }
.tv-ev h4 { margin: 14px 0 6px; font-size: 1rem; }
.tv-cost { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.tv-goal { padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.tv-goal.ok-box { border-color: color-mix(in srgb, var(--tech-green) 50%, var(--line)); background: color-mix(in srgb, var(--tech-green) 8%, var(--surface)); }
.tv-goal.miss-box { border-color: color-mix(in srgb, var(--tech-red) 50%, var(--line)); background: color-mix(in srgb, var(--tech-red) 7%, var(--surface)); }
.tv-goal span { display: block; margin-top: 4px; }
.tv-sim { display: grid; gap: 4px; }
.tv-sm { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px; font: 600 .82rem/1.4 var(--f-mono); white-space: nowrap; border: 1px solid transparent; }
.tv-sm.happy { color: var(--tech-green); border-color: color-mix(in srgb, var(--tech-green) 45%, transparent); background: color-mix(in srgb, var(--tech-green) 10%, transparent); }
.tv-sm.normal { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.tv-sm.sad { color: var(--tech-red); border-color: color-mix(in srgb, var(--tech-red) 45%, transparent); background: color-mix(in srgb, var(--tech-red) 8%, transparent); }
.tv-group { margin: 6px 0; }
.tv-group > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; }
.tv-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 6px; margin: 6px 0 0; }
.tv-item { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); min-height: 44px; }
.tv-item img { width: 24px; height: 24px; object-fit: contain; image-rendering: pixelated; }
.tv-item.has { border-color: color-mix(in srgb, var(--tech-green) 40%, var(--line)); }
.tv-item.has-out { border-style: dashed; border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
/* Vorrat in der Taverne je Ort, Nachschub aus den Truhen */
.tv-places { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 8px; }
.tv-place { white-space: nowrap; }
.tv-place-empty { white-space: normal; }
.tv-fetch { display: grid; gap: 4px; margin: 4px 0 0; }
.tv-item > span:first-of-type { flex: 1 1 auto; min-width: 0; }
.tv-all > summary { min-height: 40px; display: flex; align-items: center; cursor: pointer; }
.tv-tab td { white-space: nowrap; }
.tv-check h3 { margin-top: 0; }

/* Obstgarten: größere Felder mit Zustand und nächster Ernte als Text (kein Antippen nötig) */
.or-plan { grid-template-columns: repeat(var(--cols), minmax(92px, 130px)); gap: 8px; }
.or-tile { aspect-ratio: auto; min-height: 104px; cursor: default; grid-template-rows: auto auto auto auto; place-items: center; align-content: center; gap: 2px; padding: 8px 4px 6px; text-align: center; }
.or-tile img { grid-area: auto; width: 30px; height: 30px; }
.or-tile .gd-t-m, .or-tile.empty .gd-t-m { position: absolute; top: 4px; right: 4px; font-size: .7rem; }
.or-t-k { font-size: .74rem; font-weight: 700; line-height: 1.15; }
.or-tile.apple .or-t-k { color: var(--tech-red); }
.or-tile.berry .or-t-k { color: var(--tech-blue); }
.or-t-l { font-size: .76rem; line-height: 1.15; }
.or-t-e { font-size: .72rem; color: var(--ink-soft); line-height: 1.15; }
.or-tab th, .or-tab td { vertical-align: top; }

/* Tipps aus Community-Guides (app/tipps.js): einklappbare Kästen, Beatrices Enden, verpassbare Erfolge, Seelen-Hinweis */
.tip-box { padding: 12px 16px; }
.tip-box > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 44px; cursor: pointer; list-style: none; }
.tip-box > summary::-webkit-details-marker { display: none; }
.tip-box > summary::after { content: "▾"; margin-left: auto; color: var(--ink-soft); transition: transform .15s; }
.tip-box:not([open]) > summary::after { transform: rotate(-90deg); }
.tip-box[open] > summary { margin-bottom: 6px; }
.tip-list { display: grid; gap: 8px; margin: 0 0 8px; }
.tip-list > li { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: baseline; }
.tip-tp { display: flex; flex-direction: column; width: 3.2em; }
.tip-tp .tp { margin-right: 0; }
.tip-ic { width: 1.2em; color: var(--accent); text-align: center; }
.gc-ends { margin-top: 14px; }
.gc-ends h3 { margin-top: 0; }
.gc-before { margin: 6px 0 10px; display: grid; gap: 4px; }
.gc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 10px; }
.gc-end { border: 1px solid var(--line); border-left: 4px solid var(--done); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--surface); }
.gc-end.bad-end { border-left-color: var(--tech-red); }
.gc-end h4 { margin: 0 0 4px; }
.gc-end p { margin: 0 0 6px; }
.gc-facts { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; }
.gc-facts dt { color: var(--ink-soft); font-weight: 600; }
.gc-facts dd { margin: 0; }
.ach-missable td { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.ach-tip { display: inline-block; margin-top: 4px; }
.ach-miss-note { margin: 0 0 8px; }
/* Erfolge: Prüfhilfe für Spiel-Kennungen ohne feste Zuordnung (A15) – Status immer als Text/Symbol, Knöpfe auf Touch ≥ 40 px */
.ach-chk h3 { margin: 12px 0 6px; }
.ach-chk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ach-chk-row { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px; background: var(--surface); min-width: 0; }
.ach-chk-row[data-state="done"] { background: var(--surface-2); }
.ach-chk-row p { margin: 4px 0; }
.ach-chk-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.ach-chk-gid { overflow-wrap: anywhere; }
.ach-chk-act { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 6px; }
.ach-chk-act select { flex: 1 1 14em; min-width: 0; max-width: 100%; font: inherit; font-size: .92rem; padding: 6px 8px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.ach-chk-copy { margin-top: 12px; align-items: center; }
.ach-chk-text { display: block; width: 100%; min-height: 7em; margin-top: 8px; font: .85rem/1.4 var(--f-mono); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; box-sizing: border-box; }
.ach-chk-text[hidden] { display: none; }
html.touch .ach-chk .btn, html.touch .ach-chk-act select { min-height: 40px; }
html.touch .ach-chk .btn.small-btn { min-width: 40px; }
.so-hint { margin: 0 0 12px; }

/* ---------------------------------------------------------------- Doctype-Ausgleich */
/* Bis zum <!doctype html> lief die App im Quirks-Modus. Dort zählt eine Zeile ohne eigenen Text nur so hoch wie ihre
   Elemente (kein „Strut“ der Zeilenhöhe, keine Lücke unter Bildern). Die Regeln hier halten diese Stellen so kompakt wie vorher. */
/* Bilder als eigene Kachel-Zeile: ohne Grundlinien-Lücke darunter */
.gy-tile-img img, .so-otile-img img, .econ-portrait img { display: block; }
/* Zweite Zeile nach <br> (Story-Schritte, Erfolge): Höhe der kleinen Schrift statt der Zeilenhöhe darüber; der <br> danach
   (vor dem Erfolgs-Tipp) würde sonst eine Leerzeile erzeugen */
label > br + .small, td > br + .small { display: block; }
td > br + .small + br { display: none; }
/* Kleine Überschrift allein über einem Block (Nächster Story-Schritt, Händler-Stufen, Garten auf der Startseite, Technologie-Karte) */
.next-card .eyebrow, .econ-tier > .eyebrow, .gd-ready > .eyebrow, .gd-grow > .eyebrow, .gd-chests-home > .eyebrow, .tt-card-t > .small { display: block; }
/* Kennzahl nur aus Münzen, einem Link oder Technologiepunkten (Wirtschaft: Dein Geld, Kistenhandel; Technologie: Kosten)
   und Schalter/Eingabefeld der Mod-Einstellungen: so hoch wie der Inhalt */
.day-facts .v:has(> .coins:only-child, > a:only-child), .tt-facts dd:has(> .tt-tp), .set-ctl { display: flex; flex-wrap: wrap; }
/* Gegenstand mit Bild (App und Wiki) in einer Tabellenzelle: Zeile so hoch wie der Gegenstand (sonst je Zeile ~4 px höher,
   weil die Grundlinie unter dem Bild liegt und die Zeilenhöhe darunter noch Platz anhängt) */
:is(td, th) > :is(.ing, a.gi), .cmp-item > .ing:only-child, .wiki .pi-data-value > a.gi { vertical-align: middle; }
/* Absätze, Listen usw. am Anfang/Ende einer Tabellenzelle ohne Standard-Außenabstand und Formulare mit 1em Abstand unten –
   wie die Browser-Vorgaben im Quirks-Modus; :where() hält die Regeln schwächer als jede eigene Angabe */
:where(td, th) > :where(p, ul, ol, menu, dl, blockquote, h4, h5, h6, pre):where(:first-child) { margin-top: 0; }
:where(td, th) > :where(p, pre):where(:last-child) { margin-bottom: 0; }
:where(form) { margin-bottom: 1em; }
/* Design-Schalter unten im Menü (Handy): V3 ist Standard, V2 bleibt wählbar */
.menu-design { display: block; width: 100%; margin-top: 14px; }
/* Aufwertungs-Vorschläge: Zusammenfassung und Leichen, die ihr Grab begrenzen */
.gy-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 12px 0 6px; padding: 10px 12px; border-radius: var(--radius); background: color-mix(in srgb, var(--done) 8%, transparent); border: 1px solid color-mix(in srgb, var(--done) 30%, var(--line)); }
.gy-swap-h { margin: 18px 0 4px; }
.gy-swaps li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 6px 0; border-top: 1px solid var(--line); }