/* ---------- Schriften (selbst gehostet, OFL) ---------- */
@font-face { font-family: "Uncial Antiqua"; src: url("vendor/fonts/uncial-antiqua-latin-400-normal.8d5422e7a790.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Fondamento"; src: url("vendor/fonts/fondamento-latin-400-normal.d0f9bf80f69e.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Fondamento"; font-style: italic; src: url("vendor/fonts/fondamento-latin-400-italic.d19e01ebf576.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Alegreya"; font-weight: 400; src: url("vendor/fonts/alegreya-latin-400-normal.33d9b26d516b.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Alegreya"; font-weight: 400; font-style: italic; src: url("vendor/fonts/alegreya-latin-400-italic.535079bb6791.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Alegreya"; font-weight: 500; src: url("vendor/fonts/alegreya-latin-500-normal.6c160e39a3e6.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Alegreya"; font-weight: 700; src: url("vendor/fonts/alegreya-latin-700-normal.097e881bc296.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Alegreya SC"; font-weight: 500; src: url("vendor/fonts/alegreya-sc-latin-500-normal.70be2e7e8f51.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Alegreya SC"; font-weight: 700; src: url("vendor/fonts/alegreya-sc-latin-700-normal.42445cd91ad8.woff2") format("woff2"); font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  --night: #0B1220;        /* Schreibtisch bei Nacht */
  --bahamut: #23365E;      /* Aukans Schild */
  --platinum: #CDD2D9;
  --platinum-hi: #F2F3F5;
  --leather: #3E2618;
  --leather-hi: #5B3A26;
  --parchment: #E6D6B5;
  --ink: #2A1B12;          /* Eisengallustinte */
  --ink-soft: #5A4232;
  --rule: rgba(42, 27, 18, .25);
  --candle: #D9A44A;

  --font-display: "Uncial Antiqua", "Alegreya", serif;
  --font-hand: "Fondamento", "Alegreya", serif;
  --font-body: "Alegreya", Georgia, serif;
  --font-caps: "Alegreya SC", "Alegreya", serif;

  --turn: 1100ms;
  --turn-ease: cubic-bezier(.55, .05, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: radial-gradient(ellipse 80% 60% at 50% 45%, #16223A 0%, var(--night) 70%), var(--night);
  color: var(--platinum);
  font-family: var(--font-body);
  overflow: hidden;
}
/* Kein blinkender Schreibcursor in normalem Text (z. B. wenn im Browser mit F7 die Textcursor-Navigation
   an ist). Wo man wirklich schreibt, bleibt er sichtbar. */
body { caret-color: transparent; }
input, textarea, select, [contenteditable="true"] { caret-color: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--platinum-hi); outline-offset: 3px; border-radius: 2px; }
.page :focus-visible, .leaflet-container :focus-visible { outline-color: var(--bahamut); }
.page__title:focus { outline: none; }

/* Beim Laden ohne Übergänge, damit eine direkte Adresse nicht erst das Cover umblättert */
.no-anim .cover, .no-anim .desk-nav { transition: none !important; }

/* ---------- Navigation über dem Schreibtisch ---------- */
.desk-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  display: flex; align-items: center; gap: 1.6rem;
  padding: 1rem clamp(1rem, 3vw, 2.5rem);
  font-family: var(--font-caps); font-weight: 500;
  letter-spacing: .08em; font-size: .95rem;
  opacity: 0; visibility: hidden;
  transition: opacity 400ms ease 600ms, visibility 0s linear 1s;
}
.desk-nav__spacer { flex: 1; }
.desk-nav__link { text-decoration: none; color: var(--platinum); opacity: .8; white-space: nowrap; }
.desk-nav__link:hover { opacity: 1; color: var(--platinum-hi); }
.desk-nav__link--strong {
  opacity: 1; padding: .35rem .9rem;
  border: 1px solid rgba(205, 210, 217, .45); border-radius: 2px;
}
.is-open .desk-nav { opacity: 1; visibility: visible; transition: opacity 400ms ease 600ms, visibility 0s; }

/* ---------- Bühne ---------- */
.stage { position: relative; height: 100%; perspective: 2600px; }
/* Flüssiges Umblättern (gemessen mit Chrome-Traces):
   - Bühne, Cover und Buch strikt abgegrenzt. Sonst ragte das große Kartenbild in die Dokumentfläche,
     und Chrome zeichnete diese Fläche bei jedem Bild der Animation neu.
   - Möglichst wenige bildschirmgroße Ebenen: kein Schatten-Overlay, kein Abdunkeln, Kerzenschein aus,
     sobald das Buch offen ist.
   - Cover zu 99,9 % deckend, damit Chrome das Buch darunter schon vorher zeichnet und nicht erst beim Aufdecken. */
@media (min-width: 901px) {
  html { overflow: hidden; }
  .stage { overflow: clip; contain: strict; }
  .spread { contain: strict; }
}

/* ---------- Cover ----------
   Für flüssiges Umblättern wird nur transform und opacity animiert.
   Beides erledigt die Grafikkarte, die Seite muss dabei nicht neu gezeichnet werden. */
.cover {
  position: absolute; inset: 0; z-index: 20;
  transform-origin: left center;
  will-change: transform;
  backface-visibility: hidden;
  contain: strict;
  opacity: .999;
  transition: transform var(--turn) var(--turn-ease), opacity 300ms ease calc(var(--turn) - 300ms);
  background: var(--night);
  overflow: hidden;
}
.cover__image {
  position: absolute; inset: 0;
  background: url("assets/cover-aukan.393f265351b3.webp") 32% 50% / cover no-repeat;
}
/* Kerzenschein: eigene Ebene, nur ihre Deckkraft schwankt */
.cover__glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 22% 30% at 6% 42%, rgba(255, 190, 110, .32), transparent 70%);
  opacity: .6;
  will-change: opacity;
  animation: candle 5.5s ease-in-out infinite alternate;
}
.cover__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(11,18,32,0) 50%, rgba(11,18,32,.3) 80%, rgba(11,18,32,.6) 100%),
    radial-gradient(ellipse 40% 45% at 85% 20%, rgba(11,18,32,.55), transparent 70%),
    linear-gradient(180deg, rgba(11,18,32,.35) 0%, rgba(11,18,32,0) 25%, rgba(11,18,32,0) 82%, var(--night) 100%),
    radial-gradient(ellipse 120% 100% at 35% 45%, transparent 55%, rgba(11,18,32,.7) 100%);
}
@keyframes candle {
  0%   { opacity: .45; }
  35%  { opacity: .75; }
  60%  { opacity: .55; }
  100% { opacity: .85; }
}

.cover__title {
  position: absolute; top: clamp(2rem, 9vh, 6rem); right: clamp(1.5rem, 6vw, 6rem);
  text-align: right;
}
.cover__name {
  /* Der Verlauf füllt nur die Box des Elements: unten Platz für die Unterlänge des „y“,
     per negativem Rand ausgeglichen, damit sich der Abstand zur Unterzeile nicht ändert */
  margin: 0 0 -.25em;
  padding: .05em .05em .25em;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(3.4rem, 8.5vw, 8rem); line-height: .95; letter-spacing: .02em;
  background: linear-gradient(180deg, var(--platinum-hi) 0%, var(--platinum) 55%, #8E96A4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.6));
}
.cover__by {
  margin: .9rem .2rem 0 0;
  font-family: var(--font-caps); font-weight: 500;
  font-size: clamp(.95rem, 1.3vw, 1.2rem); letter-spacing: .14em;
  color: var(--platinum); opacity: .85;
}

/* Das Siegel: Bahamuts Kralle auf blauem Email */
.seal {
  position: absolute; right: clamp(1.5rem, 7vw, 7rem); top: 56%;
  transform: translateY(-50%);
  display: grid; justify-items: center; gap: .8rem;
  padding: .5rem; color: var(--platinum); text-decoration: none;
}
.seal__disc {
  width: clamp(88px, 8vw, 124px); height: auto;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.7));
  transition: transform 450ms var(--turn-ease);
}
/* Goldener Schein als eigene Ebene statt animiertem Filter */
.seal::before {
  content: ""; position: absolute; left: 50%; top: calc(.5rem + clamp(44px, 4vw, 62px));
  width: clamp(120px, 11vw, 170px); aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217,164,74,.45), transparent 65%);
  opacity: 0; transition: opacity 400ms ease; pointer-events: none;
}
.seal__label {
  font-family: var(--font-caps); font-weight: 500;
  font-size: .9rem; letter-spacing: .16em;
  opacity: .7; transition: opacity 300ms ease;
}
.seal:hover::before, .seal:focus-visible::before { opacity: 1; }
.seal:hover .seal__disc, .seal:focus-visible .seal__disc { transform: rotate(-8deg) scale(1.04); }
.seal:hover .seal__label, .seal:focus-visible .seal__label { opacity: 1; }
.seal:active .seal__disc { transform: scale(.94); }
.seal:focus-visible { outline: none; }
.seal:focus-visible .seal__disc { outline: 2px solid var(--platinum-hi); outline-offset: 6px; border-radius: 50%; }

/* Umgeblättert */
.is-open .cover { transform: rotateY(-105deg); opacity: 0; visibility: hidden; transition: transform var(--turn) var(--turn-ease), opacity 300ms ease calc(var(--turn) - 300ms), visibility 0s linear var(--turn); }
.is-open .cover__glow { display: none; }

/* ---------- Doppelseite ---------- */
.spread {
  position: absolute; inset: 0; z-index: 10;
  display: grid; place-items: center;
  /* Feste Zeile: sonst wächst das Buch mit langem Inhalt über den Bildschirm, statt dass die Seite scrollt */
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  padding: clamp(3.5rem, 8vh, 5rem) clamp(.75rem, 3vw, 2.5rem) clamp(1rem, 4vh, 2.5rem);
  will-change: transform;
}

/* Ledereinband mit Platin-Prägelinie */
.book {
  position: relative;
  width: min(1380px, 100%);
  height: min(860px, 100%);
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr);
  padding: 14px;
  border-radius: 6px 10px 10px 6px;
  perspective: 2400px;
  background: linear-gradient(135deg, var(--leather-hi), var(--leather) 60%, #2C1A10);
  box-shadow:
    inset 0 0 0 4px var(--leather),
    inset 0 0 0 5px rgba(205,210,217,.35),
    0 30px 60px rgba(0,0,0,.6), 0 8px 18px rgba(0,0,0,.5);
}

.page {
  position: relative;
  min-height: 0;
  padding: clamp(1.5rem, 4.2vh, 3rem) clamp(1.5rem, 3.6vw, 3.4rem);
  color: var(--ink);
  background:
    radial-gradient(ellipse 60% 40% at 70% 85%, rgba(150,110,60,.16), transparent 70%),
    radial-gradient(ellipse 50% 35% at 20% 15%, rgba(150,110,60,.10), transparent 70%),
    url("assets/parchment.ea367b1b6a3d.webp") 0 0 / 256px 256px,
    var(--parchment);
  box-shadow: inset 0 0 40px rgba(110,80,40,.35);
  overflow: hidden auto;
  scrollbar-width: thin; scrollbar-color: rgba(42,27,18,.3) transparent;
  display: flex; flex-direction: column;
}
.page--left  { border-radius: 3px 0 0 3px; }
.page--right { border-radius: 0 3px 3px 0; }
/* Falz in der Mitte */
.page--left::after, .page--right::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 70px; pointer-events: none;
}
.page--left::after  { right: 0; background: linear-gradient(90deg, transparent, rgba(60,40,20,.10) 60%, rgba(40,25,10,.38)); }
.page--right::before { left: 0; background: linear-gradient(270deg, transparent, rgba(60,40,20,.10) 60%, rgba(40,25,10,.38)); z-index: 2; }

.page__head { margin-bottom: clamp(.8rem, 2.4vh, 1.6rem); }
.page__kicker {
  margin: 0 0 .2rem;
  font-family: var(--font-caps); font-weight: 500;
  font-size: .85rem; letter-spacing: .14em; color: var(--ink-soft);
}
.page__title {
  margin: 0;
  font-family: var(--font-hand); font-weight: 400;
  font-size: clamp(2.2rem, 3.6vw, 3.2rem); line-height: 1;
  color: var(--bahamut);
}
.subhead {
  margin: 0 0 .6rem;
  font-family: var(--font-caps); font-weight: 700;
  font-size: .95rem; letter-spacing: .12em; color: var(--bahamut);
  border-bottom: 1px solid var(--rule); padding-bottom: .15rem;
}

/* ---------- Das umblätternde Blatt ---------- */
.leaf {
  position: absolute; z-index: 5;
  transform-style: preserve-3d;
  will-change: transform;
  pointer-events: none;
}
.leaf--fwd  { transform-origin: left center; }
.leaf--back { transform-origin: right center; }
.leaf > .leaf__face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  overflow: hidden;
}
.leaf > .leaf__face--back { transform: rotateY(180deg); }
.leaf__shade {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(40,25,10,.55), rgba(40,25,10,.15));
}
.leaf--back .leaf__face--front .leaf__shade,
.leaf--fwd .leaf__face--back .leaf__shade { background: linear-gradient(270deg, rgba(40,25,10,.55), rgba(40,25,10,.15)); }

/* ---------- Zurück zum Inhalt ---------- */
.to-contents {
  position: absolute; z-index: 4;
  left: calc(14px + clamp(1.2rem, 2.8vw, 2.6rem));
  bottom: calc(14px + .7rem);
  display: flex; align-items: center; gap: .55rem;
  padding: .2rem .3rem;
  color: var(--ink); text-decoration: none; opacity: .62;
  transition: opacity 200ms ease, color 200ms ease;
}
.to-contents[hidden] { display: none; }
.to-contents svg { width: 66px; height: 22px; transition: transform 250ms var(--turn-ease); }
.to-contents__label {
  font-family: var(--font-caps); font-weight: 500; font-size: .8rem; letter-spacing: .12em;
  opacity: 0; translate: -4px 0; transition: opacity 200ms ease, translate 200ms ease;
}
.to-contents:hover, .to-contents:focus-visible { opacity: 1; color: var(--bahamut); }
.to-contents:hover svg, .to-contents:focus-visible svg { transform: translateX(-5px); }
.to-contents:hover .to-contents__label, .to-contents:focus-visible .to-contents__label { opacity: 1; translate: 0 0; }
.to-contents:focus-visible { outline-color: var(--bahamut); }

/* ---------- Inhaltsverzeichnis ---------- */
.toc {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(.6rem, 2vh, 1.4rem) clamp(1rem, 2.5vw, 2.4rem);
  align-content: start;
}
.toc__heading {
  margin: 0 0 .3rem;
  font-family: var(--font-caps); font-weight: 700;
  font-size: .95rem; letter-spacing: .12em; color: var(--bahamut);
  border-bottom: 1px solid var(--rule); padding-bottom: .15rem;
}
.toc ul, .place-list, .nearby, .companions { list-style: none; margin: 0; padding: 0; }
.toc li { line-height: 1.35; }
.toc a, .nearby a, .place-list__name {
  font-family: var(--font-hand);
  text-decoration: none; color: var(--ink);
  background: linear-gradient(var(--bahamut), var(--bahamut)) 0 100% / 0 1px no-repeat;
  transition: background-size 300ms ease, color 200ms ease;
}
.toc a { font-size: clamp(1.05rem, 1.35vw, 1.3rem); }
.toc a:hover, .toc a:focus-visible,
.nearby a:hover, .nearby a:focus-visible,
.place-list__name:hover, .place-list__name:focus-visible { color: var(--bahamut); background-size: 100% 1px; }

/* Kodex-Zitat am Seitenende */
.codex { margin: auto 0 0; padding-top: 1rem; }
.codex__quote {
  margin: 0;
  font-family: var(--font-hand); font-style: italic;
  font-size: clamp(1.05rem, 1.3vw, 1.25rem); line-height: 1.4; color: var(--ink-soft);
}
.codex__source {
  display: flex; align-items: center; gap: .45rem; margin-top: .4rem;
  font-family: var(--font-caps); font-weight: 500; font-size: .8rem; letter-spacing: .1em;
  color: var(--ink-soft);
}
.codex__claw { width: 1.1rem; height: 1.1rem; fill: var(--bahamut); flex: none; }

/* ---------- Karte ---------- */
.map-frame {
  position: relative; flex: 1; min-height: 260px;
  padding: 6px;
  background: rgba(120,90,50,.18);
  box-shadow: 0 0 0 1px rgba(42,27,18,.35), 0 1px 6px rgba(42,27,18,.25);
}
.map-frame--detail { flex: 0 0 auto; height: 52%; }
.map { width: 100%; height: 100%; background-color: #52696E; background-repeat: no-repeat; position: relative; overflow: hidden; }
.map-note { margin: .7rem 0 0; font-style: italic; font-size: .95rem; color: var(--ink-soft); }

.place-marker {
  display: block; width: 16px; height: 16px; border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 3px var(--parchment), 0 0 0 5px var(--bahamut), 0 2px 6px rgba(0,0,0,.4);
  transition: transform 200ms ease;
}
.leaflet-marker-icon:hover .place-marker,
.leaflet-marker-icon:focus-visible .place-marker,
.static-marker:hover .place-marker,
.static-marker:focus-visible .place-marker { transform: scale(1.3); }
.leaflet-marker-icon:focus-visible { outline: none; }

.static-marker { position: absolute; left: -8px; top: -8px; display: block; }
.static-marker:focus-visible { outline: none; }
.static-marker.is-active .place-marker {
  width: 20px; height: 20px; margin: -2px;
  background: var(--bahamut);
  box-shadow: 0 0 0 3px var(--platinum-hi), 0 0 0 5px var(--ink), 0 0 16px 4px rgba(217,164,74,.65);
}

.leaflet-tooltip.place-tooltip {
  font-family: var(--font-hand); font-size: 1.05rem;
  background: var(--parchment); color: var(--ink);
  border: 1px solid rgba(42,27,18,.4); border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.leaflet-popup-content-wrapper {
  background: var(--parchment) url("assets/parchment.ea367b1b6a3d.webp"); color: var(--ink);
  border-radius: 2px; box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.leaflet-popup-tip { background: var(--parchment); }
.leaflet-popup-content { margin: 1rem 1.2rem; font-family: var(--font-body); font-size: 1rem; line-height: 1.45; }
.popup__name { margin: 0; font-family: var(--font-hand); font-weight: 400; font-size: 1.5rem; line-height: 1.1; color: var(--bahamut); }
.popup__meta { margin: .1rem 0 .5rem !important; font-family: var(--font-caps); font-weight: 500; font-size: .8rem; letter-spacing: .1em; color: var(--ink-soft); }
.popup__text { margin: 0 0 .7rem !important; }
.popup__text--empty, .empty { font-style: italic; color: var(--ink-soft); }
.popup__link, .button {
  display: inline-block;
  font-family: var(--font-caps); font-weight: 700; letter-spacing: .08em; font-size: .85rem;
  color: var(--parchment) !important; background: var(--bahamut);
  padding: .3rem .8rem; border-radius: 2px; text-decoration: none;
}
.popup__link:hover, .button:hover { background: #2E4677; }
.button { align-self: flex-start; }
.button[aria-disabled="true"] { opacity: .75; cursor: not-allowed; }
.popup__hint { margin: .5rem 0 0 !important; font-size: .85rem; font-style: italic; color: var(--ink-soft); }
.map.leaflet-container { background-color: #52696E; }
.leaflet-container a.leaflet-popup-close-button { color: var(--ink-soft); }

.leaflet-bar a {
  background: var(--parchment); color: var(--ink);
  border-bottom-color: rgba(42,27,18,.3);
  font-family: var(--font-body);
}
.leaflet-bar a:hover { background: #F0E4C8; color: var(--bahamut); }
.leaflet-bar { border: 1px solid rgba(42,27,18,.45) !important; box-shadow: none !important; }

/* Die Pfote von Aukans Wolf */
.paw {
  position: absolute; right: 7%; bottom: 3.5%;
  width: 34px; height: 34px;
  fill: var(--ink); opacity: .25;
  transform: rotate(-24deg);
  pointer-events: none;
}

/* ---------- Orte ---------- */
.place-list { display: grid; gap: 1rem; }
.place-list__name { font-size: 1.5rem; line-height: 1.1; }
.place-list__kind {
  display: block; font-family: var(--font-caps); font-weight: 500;
  font-size: .8rem; letter-spacing: .1em; color: var(--ink-soft);
}
.place-list__short { margin: .2rem 0 0; font-size: 1.02rem; line-height: 1.4; }

.facts { margin: 0 0 1.2rem; display: grid; gap: .25rem; }
.facts__row { display: grid; grid-template-columns: 9.5rem 1fr; gap: .8rem; padding-bottom: .25rem; border-bottom: 1px dotted var(--rule); }
.facts dt { font-family: var(--font-caps); font-weight: 500; font-size: .85rem; letter-spacing: .08em; color: var(--ink-soft); padding-top: .1rem; overflow-wrap: anywhere; }
.facts dd { margin: 0; font-size: 1.02rem; line-height: 1.35; }

.prose { margin: 0 0 .8rem; font-size: 1.08rem; line-height: 1.55; hyphens: auto; }
.prose--first::first-letter {
  float: left; margin: .08em .12em 0 0;
  font-family: var(--font-display); font-size: 3.3em; line-height: .8;
  color: var(--bahamut);
}
.empty { margin: 0 0 1rem; font-size: 1.1rem; }

.nearby { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; }
.nearby a { font-size: 1.2rem; }
.nearby span { font-family: var(--font-caps); font-size: .75rem; letter-spacing: .1em; color: var(--ink-soft); }
.map-frame--detail + .subhead, .nearby + .subhead { margin-top: 1.2rem; }

/* ---------- Gefährten ---------- */
.companions { display: grid; gap: clamp(.5rem, 1.4vh, 1rem); }
.companion { display: grid; grid-template-columns: 64px 1fr; gap: 1rem; align-items: start; }
.companion__portrait {
  width: 64px; height: 64px; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 2px var(--parchment), 0 0 0 3px var(--ink-soft);
  background: #CDBB94; display: grid; place-items: center;
}
.companion__portrait img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.15); }
.companion__portrait span { font-family: var(--font-hand); font-size: 1.8rem; color: var(--ink-soft); }
.companion__name { margin: 0; font-family: var(--font-hand); font-weight: 400; font-size: 1.35rem; line-height: 1.1; color: var(--ink); }
.companion__what { margin: 0 0 .15rem; font-family: var(--font-caps); font-weight: 500; font-size: .8rem; letter-spacing: .1em; color: var(--ink-soft); }
.companion__text { margin: 0; font-size: .98rem; line-height: 1.38; }
.companion__status { margin: .2rem 0 0; font-style: italic; font-size: .95rem; color: var(--bahamut); }

.companion__more {
  display: inline-block; margin-top: .25rem;
  font-family: var(--font-hand); font-size: 1.05rem; color: var(--bahamut); text-decoration: none;
  background: linear-gradient(var(--bahamut), var(--bahamut)) 0 100% / 0 1px no-repeat;
  transition: background-size 300ms ease;
}
.companion__more::after { content: " →"; }
.companion__more:hover, .companion__more:focus-visible { background-size: 100% 1px; }

/* ---------- Charakterseite: Text links ---------- */
.cp-text .prose-head { margin: 1.2rem 0 .5rem; }
.prose-list { margin: 0 0 .9rem; padding-left: 1.3rem; font-size: 1.08rem; line-height: 1.5; }
.prose-list li { margin-bottom: .2rem; }
.prose-list li::marker { color: var(--bahamut); }
.prose-minor { margin: 1rem 0 .35rem; font-family: var(--font-hand); font-weight: 400; font-size: 1.2rem; line-height: 1.2; color: var(--bahamut); }
.cp-text code, .prose-list code { font-family: ui-monospace, monospace; font-size: .85em; background: rgba(42,27,18,.07); padding: 0 .2em; border-radius: 2px; }
.prose-table { margin: 0 0 1rem; overflow-x: auto; }
.prose-table table { width: 100%; border-collapse: collapse; font-size: .95rem; line-height: 1.35; }
.prose-table th { text-align: left; font-family: var(--font-caps); font-weight: 500; font-size: .8rem; letter-spacing: .06em; color: var(--ink-soft); border-bottom: 1px solid var(--rule); padding: .25rem .5rem .25rem 0; }
.prose-table td { vertical-align: top; border-bottom: 1px dotted var(--rule); padding: .3rem .5rem .3rem 0; }
.cp-foot {
  margin-top: auto; padding-top: 1.2rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem;
}
.cp-edited { flex: 1 0 100%; margin: 0; font-size: .9rem; font-style: italic; color: var(--ink-soft); }
.page--left .cp-foot { padding-bottom: 2.4rem; }   /* Platz für den Tintenpfeil unten links */
.cp-up { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); }
.cp-up:hover, .cp-up:focus-visible { color: var(--bahamut); border-bottom-color: var(--bahamut); }
.button--quiet { background: transparent; color: var(--bahamut) !important; box-shadow: inset 0 0 0 1px var(--bahamut); }
.button--quiet:hover { background: rgba(35,54,94,.08); }
button.button:disabled { opacity: .6; cursor: progress; }

.cp-label {
  font-family: var(--font-caps); font-weight: 500; font-size: .85rem; letter-spacing: .1em; color: var(--ink-soft);
}
.cp-editor {
  flex: 1; min-height: 16rem; width: 100%; margin-top: .3rem; resize: vertical;
  padding: .7rem .8rem;
  font-family: var(--font-body); font-size: 1.05rem; line-height: 1.5; color: var(--ink);
  background: rgba(255, 250, 238, .45);
  border: 1px solid rgba(42,27,18,.35); border-radius: 2px;
}
.cp-editor:focus-visible { outline: 2px solid var(--bahamut); outline-offset: 1px; }
.cp-help { margin: .4rem 0 0; font-size: .88rem; color: var(--ink-soft); }
.cp-help code { font-family: ui-monospace, monospace; font-size: .85em; background: rgba(42,27,18,.07); padding: 0 .2em; border-radius: 2px; }
.cp-foot--edit { padding-top: .8rem; }
.cp-note { font-style: italic; color: var(--ink-soft); }
.cp-alert { max-width: none; }
.cp-alert__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem !important; }

/* ---------- Charakterseite: Galerie rechts (eingeklebte Bilder) ---------- */
.gallery {
  list-style: none; margin: 0; padding: .3rem .2rem 1rem;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr));
  gap: 1.3rem 1.1rem; align-items: start;
}
.gallery__item { display: grid; gap: .35rem; }
.gallery:not(.gallery--edit) .gallery__item:nth-child(3n+1) { rotate: -1.2deg; }
.gallery:not(.gallery--edit) .gallery__item:nth-child(3n+2) { rotate: .8deg; }
.gallery:not(.gallery--edit) .gallery__item:nth-child(3n) { rotate: -.4deg; }
.gallery__open {
  display: block; padding: 5px; border: 0; cursor: zoom-in;
  background: #F4EBD6;
  box-shadow: 0 1px 2px rgba(42,27,18,.35), 0 4px 10px rgba(42,27,18,.18);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.gallery__open:hover, .gallery__open:focus-visible {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 2px 4px rgba(42,27,18,.35), 0 10px 20px rgba(42,27,18,.22);
}
.gallery img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; filter: sepia(.08); }
.gallery__caption { margin: 0; font-family: var(--font-hand); font-size: .98rem; line-height: 1.25; text-align: center; color: var(--ink-soft); }

.gallery--edit .gallery__item { padding: 5px; background: rgba(255,250,238,.4); box-shadow: 0 0 0 1px rgba(42,27,18,.25); }
.gallery__caption-input {
  width: 100%; font-family: var(--font-hand); font-size: 1rem; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid rgba(42,27,18,.4); padding: .1rem .1rem .15rem;
}
.gallery__caption-input:focus-visible { outline: none; border-bottom-color: var(--bahamut); box-shadow: 0 1px 0 var(--bahamut); }
.gallery__tools { display: flex; gap: .3rem; }
.gallery__tools button {
  flex: 1; min-height: 2rem; cursor: pointer;
  font-family: var(--font-caps); font-weight: 500; font-size: .8rem; letter-spacing: .05em;
  color: var(--bahamut); background: transparent; border: 1px solid rgba(35,54,94,.45); border-radius: 2px;
}
.gallery__tools button:hover:not(:disabled) { background: rgba(35,54,94,.08); }
.gallery__tools button:disabled { opacity: .3; cursor: default; }
.gallery__tools [data-cp="remove"] { flex: 2; color: #8A1F1F; border-color: rgba(138,31,31,.45); }

.dropzone {
  display: grid; justify-items: center; gap: .5rem; text-align: center;
  margin: 0 0 1.2rem; padding: 1.2rem 1rem;
  border: 2px dashed rgba(42,27,18,.35); border-radius: 3px;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.dropzone p { margin: 0; }
.dropzone > p:first-child { font-family: var(--font-hand); font-size: 1.2rem; }
.dropzone.is-over { border-color: var(--bahamut); background: rgba(35,54,94,.07); }
.dropzone .button { cursor: pointer; align-self: center; }
.dropzone .button:focus-within { outline: 2px solid var(--bahamut); outline-offset: 2px; }
.dropzone .form-errors { text-align: left; }

/* Großansicht */
.viewer {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(11, 18, 32, .94); color: var(--platinum);
}
.viewer::backdrop { background: transparent; }
.viewer[open] { display: grid; place-items: center; }
.viewer__figure { margin: 0; display: grid; justify-items: center; gap: .8rem; padding: 3.5rem 4.5rem 2rem; }
.viewer__img { max-width: min(92vw, 1600px); max-height: calc(100dvh - 9rem); object-fit: contain; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.viewer__caption { font-family: var(--font-hand); font-size: 1.3rem; text-align: center; max-width: 60ch; }
.viewer__btn {
  position: fixed; display: grid; place-items: center; width: 3rem; height: 3rem; cursor: pointer;
  font-size: 2rem; line-height: 1; color: var(--platinum); background: rgba(11,18,32,.5);
  border: 1px solid rgba(205,210,217,.35); border-radius: 50%;
}
.viewer__btn:hover { color: var(--platinum-hi); border-color: var(--platinum); }
.viewer__btn[hidden] { display: none; }
.viewer__btn--prev { left: 1rem; top: 50%; translate: 0 -50%; }
.viewer__btn--next { right: 1rem; top: 50%; translate: 0 -50%; }
.viewer__btn--close { right: 1rem; top: 1rem; }

/* ---------- Leere Seite ---------- */
.blank { margin: auto; display: grid; justify-items: center; gap: 1rem; color: var(--ink-soft); }
.blank__claw { width: 120px; height: 120px; fill: var(--ink); opacity: .08; }
.blank p { margin: 0; font-family: var(--font-hand); font-style: italic; font-size: 1.2rem; opacity: .7; }

/* ---------- Formulare (Anmelden, Einrichten) ---------- */
.form-field { display: grid; gap: .2rem; margin: 0 0 1.1rem; max-width: 28rem; }
.form-field > label {
  font-family: var(--font-caps); font-weight: 500;
  font-size: .85rem; letter-spacing: .1em; color: var(--ink-soft);
}
.form-field input:not([type="checkbox"]) {
  font-family: var(--font-hand); font-size: 1.35rem; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid rgba(42,27,18,.45); border-radius: 0;
  padding: .15rem .1rem .2rem;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.form-field input:not([type="checkbox"]):focus-visible {
  outline: none; border-bottom-color: var(--bahamut); box-shadow: 0 1px 0 var(--bahamut);
}
.form-field input[type="password"] { letter-spacing: .12em; }
.has-error input:not([type="checkbox"]) { border-bottom-color: #8A1F1F; }
.form-help { margin: .1rem 0 0; font-size: .92rem; font-style: italic; color: var(--ink-soft); }
.form-errors { list-style: none; margin: .1rem 0 0; padding: 0; color: #8A1F1F; font-size: .98rem; }
.form-alert {
  margin: 0 0 1.2rem; padding: .6rem .8rem; max-width: 28rem;
  border-left: 3px solid #8A1F1F; background: rgba(138,31,31,.07); color: #6E1717;
}
.form-alert p { margin: 0; }
.form-field--check > label.check {
  display: flex; gap: .6rem; align-items: flex-start; cursor: pointer;
  font-family: var(--font-body); font-weight: 400; letter-spacing: 0; font-size: 1.05rem; color: var(--ink);
}
.form-field--check input { width: 1.1rem; height: 1.1rem; margin-top: .2rem; accent-color: var(--bahamut); flex: none; }
.form-field--check .form-help { padding-left: 1.7rem; }
button.button { border: 0; cursor: pointer; }
.button--large { font-size: .95rem; padding: .55rem 1.1rem; margin-top: .4rem; }
.lede { margin: 0 0 1.2rem; font-size: 1.08rem; line-height: 1.5; max-width: 30rem; }

/* Notiz auf der rechten Seite der Anmeldung */
.note { margin: auto 0; max-width: 28rem; display: grid; gap: .2rem; }
.note p { margin: 0 0 1rem; font-size: 1.05rem; line-height: 1.5; }
.note__claw { width: 54px; height: 54px; fill: var(--bahamut); opacity: .7; margin-bottom: .6rem; }
.note .note__motto {
  font-family: var(--font-hand); font-style: italic;
  font-size: clamp(1.4rem, 2vw, 1.8rem); line-height: 1.3; color: var(--bahamut); margin-bottom: 1.6rem;
}

/* Angemeldet: Name und Abmelden in der Navigation */
.desk-nav__who { opacity: .75; font-family: var(--font-body); letter-spacing: .02em; white-space: nowrap; }
.desk-nav__form { margin: 0; }
.desk-nav__form button { font: inherit; letter-spacing: inherit; background: transparent; cursor: pointer; }

/* ---------- Fraktionen ---------- */
.faction-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.faction-row {
  display: grid; grid-template-columns: 56px 1fr; gap: 1rem; align-items: start;
  padding: .55rem .5rem; margin: 0 -.5rem; border-radius: 3px;
  color: var(--ink); text-decoration: none;
  transition: background-color 200ms ease;
}
.faction-row:hover, .faction-row:focus-visible { background: rgba(35,54,94,.07); }
.faction-row__emblem img, .faction-row__emblem .faction-initial {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 2px var(--parchment), 0 0 0 3px var(--ink-soft);
}
.faction-initial {
  display: grid; place-items: center; background: #CDBB94;
  font-family: var(--font-hand); font-size: 1.6rem; color: var(--ink-soft);
}
.faction-row__body { display: grid; gap: .05rem; }
.faction-row__name { font-family: var(--font-hand); font-size: 1.45rem; line-height: 1.15; color: var(--bahamut); }
/* Aufgelöste Fraktionen: rot durchgestrichen, etwas blasser */
.faction-row--dissolved .faction-row__name,
.faction-group--dissolved a { color: #8A1F1F; text-decoration: line-through; text-decoration-thickness: 1.5px; }
.faction-row--dissolved .faction-row__emblem { opacity: .55; filter: grayscale(.6); }
.facts__row--dissolved dd { color: #8A1F1F; }
.faction-row__meta { font-family: var(--font-caps); font-weight: 500; font-size: .8rem; letter-spacing: .1em; color: var(--ink-soft); }
.faction-row__summary { font-size: 1rem; line-height: 1.4; margin-top: .15rem; }
.faction-group { margin-bottom: 1rem; }
.faction-group .nearby a { font-size: 1.15rem; }
.faction-group--hostile .subhead { color: #8A1F1F; }
.faction-create { margin-top: auto; padding-top: 1rem; display: grid; gap: .3rem; justify-items: start; }

.faction-lede { margin: 0 0 1rem; font-family: var(--font-hand); font-style: italic; font-size: 1.2rem; line-height: 1.4; color: var(--ink-soft); }
.faction-logo {
  margin: 0 auto 1.2rem; width: min(220px, 60%); aspect-ratio: 1;
  display: grid; place-items: center; padding: 8px;
  background: #F4EBD6; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(42,27,18,.35), 0 0 0 6px rgba(205,187,148,.6), 0 4px 14px rgba(42,27,18,.25);
}
/* Quadratisch über die Breite, sonst zieht ein hohes Bild den Rahmen zum Oval */
.faction-logo img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; border-radius: 50%; }
.npc-token img { object-fit: cover; }
.faction-logo--empty svg { width: 45%; height: 45%; fill: var(--ink); opacity: .12; }
.faction-people { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.faction-people__name { font-family: var(--font-hand); font-size: 1.25rem; color: var(--ink); }
.faction-people__role { margin-left: .5rem; font-family: var(--font-caps); font-weight: 500; font-size: .8rem; letter-spacing: .08em; color: var(--ink-soft); }
.faction-people__note { margin: .1rem 0 0; font-size: .98rem; line-height: 1.4; }

.fc-form { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1rem; }
.fc-field { display: grid; gap: .15rem; align-content: start; min-width: 0; }
.fc-field--wide { grid-column: 1 / -1; }
.fc-field label { font-family: var(--font-caps); font-weight: 500; font-size: .8rem; letter-spacing: .1em; color: var(--ink-soft); }
.fc-field input, .fc-field select, .fc-person input, .fc-person textarea {
  width: 100%; font-family: var(--font-body); font-size: 1.02rem; color: var(--ink);
  background: rgba(255,250,238,.45); border: 1px solid rgba(42,27,18,.35); border-radius: 2px; padding: .35rem .5rem;
}
.fc-field input:focus-visible, .fc-field select:focus-visible, .fc-person input:focus-visible, .fc-person textarea:focus-visible {
  outline: 2px solid var(--bahamut); outline-offset: 1px;
}
#fc-name { font-family: var(--font-hand); font-size: 1.4rem; }
.fc-area { flex: none; min-height: 0; margin-top: 0; }
.fc-logo-drop { margin-bottom: 1.4rem; padding: .9rem; }
.fc-people { list-style: none; margin: 0 0 .7rem; padding: 0; display: grid; gap: .8rem; }
.fc-person {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: .35rem .5rem;
  padding: .5rem; background: rgba(255,250,238,.3); box-shadow: 0 0 0 1px rgba(42,27,18,.2);
}
.fc-person textarea { grid-column: 1 / 3; resize: vertical; }
.fc-person__remove {
  grid-row: 1 / 3; grid-column: 3; align-self: start; cursor: pointer;
  font-family: var(--font-caps); font-weight: 500; font-size: .8rem; color: #8A1F1F;
  background: transparent; border: 1px solid rgba(138,31,31,.45); border-radius: 2px; padding: .35rem .5rem;
}
.button--danger { color: #8A1F1F !important; box-shadow: inset 0 0 0 1px rgba(138,31,31,.6); }
.button--danger:hover { background: rgba(138,31,31,.07); }
button.button--quiet:disabled { opacity: .5; cursor: default; }

/* ---------- Personen ---------- */
.npc-place { margin-bottom: 1.1rem; }
.npc-place[hidden], .npc-list li[hidden] { display: none; }
.npc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.npc-row {
  display: grid; grid-template-columns: auto 1fr; column-gap: .7rem; align-items: center;
  padding: .3rem .5rem; margin: 0 -.5rem; border-radius: 3px; color: var(--ink); text-decoration: none;
  transition: background-color 200ms ease;
}
.npc-row:hover, .npc-row:focus-visible { background: rgba(35,54,94,.07); }
.npc-row__token { grid-row: 1 / 3; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; font-size: 1.05rem;
  box-shadow: 0 0 0 1px var(--parchment), 0 0 0 2px var(--ink-soft); }
.npc-row__name { font-family: var(--font-hand); font-size: 1.2rem; line-height: 1.15; color: var(--bahamut); }
.npc-row__title { grid-column: 2; font-size: .95rem; line-height: 1.3; color: var(--ink-soft); }
.npc-row:not(:has(.npc-row__token)) { grid-template-columns: 1fr; }
.npc-row:not(:has(.npc-row__token)) .npc-row__title { grid-column: 1; }
.npc-dead { font-family: var(--font-body); font-size: .9em; color: var(--ink-soft); }
.npc-search { margin-bottom: .4rem; }
.npc-search ~ .subhead { margin-top: 1.4rem; }
.npc-new { display: grid; gap: .7rem; margin-bottom: .6rem; }
.npc-new__actions { display: flex; align-items: center; gap: 1rem; margin: 0; }
.npc-token { width: min(170px, 50%); }
.npc-token__initial { width: 100%; height: 100%; border-radius: 50%; font-size: 3.4rem; }
.faction-logo--empty .npc-token__initial { opacity: .7; }
.faction-members { margin-top: 1.4rem; }

/* ---------- Götter, Gegenstände, Zauber, Rezepte, Sitzungen ---------- */
.kx-image { margin: 0 auto 1.2rem; max-width: min(320px, 80%); padding: 6px; background: #F4EBD6;
  box-shadow: 0 1px 2px rgba(42,27,18,.35), 0 4px 12px rgba(42,27,18,.2); rotate: -.6deg; }
.kx-image img { display: block; width: 100%; height: auto; }
.kx-image--empty { display: grid; place-items: center; aspect-ratio: 4 / 3; width: min(220px, 60%); rotate: 0deg;
  background: transparent; box-shadow: 0 0 0 1px rgba(42,27,18,.25); }
.kx-image--empty svg { width: 30%; height: 30%; fill: var(--ink); opacity: .1; }
.kx-check { align-self: end; }
.kx-check .check { display: flex; gap: .5rem; align-items: center; cursor: pointer;
  font-family: var(--font-body); font-weight: 400; letter-spacing: 0; font-size: 1.02rem; color: var(--ink); }
.kx-check input { width: 1.1rem; height: 1.1rem; accent-color: var(--bahamut); }
.fc-field[hidden] { display: none; }
.kx-srd { list-style: none; margin: .3rem 0 1rem; padding: 0; display: grid; gap: .3rem; }
.kx-srd li { display: grid; grid-template-columns: 1fr auto; column-gap: .8rem; align-items: center; }
.kx-srd__name { font-family: var(--font-hand); font-size: 1.15rem; color: var(--bahamut); }
.kx-srd__meta { grid-column: 1; font-size: .9rem; color: var(--ink-soft); }
.kx-srd .button { grid-row: 1 / 3; grid-column: 2; }
.kx-srd-note { margin-top: 1.2rem; }
.kx-ai { margin-top: 1.2rem; padding: .9rem; display: grid; gap: .5rem; justify-items: start;
  background: rgba(35,54,94,.05); box-shadow: inset 0 0 0 1px rgba(35,54,94,.25); border-radius: 3px; }
.kx-ai__status { margin: 0; font-style: italic; color: var(--bahamut); }
.kx-draft { width: 100%; margin-top: .4rem; }
.kx-draft__text { max-height: 22rem; overflow: auto; padding: .4rem .6rem; background: rgba(255,250,238,.45);
  box-shadow: inset 0 0 0 1px rgba(42,27,18,.2); }

/* ---------- Karte bearbeiten und Reise ---------- */
.map-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.2rem; margin-top: .7rem; }
.map-tools__toggle { display: flex; align-items: center; gap: .4rem; cursor: pointer;
  font-family: var(--font-caps); font-weight: 500; font-size: .8rem; letter-spacing: .08em; color: var(--ink-soft); }
.map-tools__toggle input { accent-color: var(--bahamut); }
.map-tools .button { margin-left: auto; }
.map-tools + .map-note { margin-top: .4rem; }
.map-legend { display: flex; flex-wrap: wrap; gap: .2rem .9rem; font-size: .85rem; color: var(--ink-soft); }
.map-legend__item { display: inline-flex; align-items: center; gap: .3rem; }
[data-map-edit][aria-pressed="true"] { background: var(--bahamut); color: var(--parchment) !important; }

.map-edit {
  position: absolute; z-index: 1000; top: 12px; left: 56px; right: 12px;
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  padding: .45rem .6rem; background: rgba(230,214,181,.95); border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(42,27,18,.4), 0 4px 12px rgba(0,0,0,.25);
}
.map-edit[hidden] { display: none; }
.map-edit .button { padding: .25rem .6rem; font-size: .78rem; }
.map-edit [aria-pressed="true"] { background: var(--bahamut); color: var(--parchment) !important; }
.map-edit__hint { flex: 1 0 100%; margin: 0; font-size: .9rem; font-style: italic; color: var(--ink-soft); }
.map-frame.is-editing { box-shadow: 0 0 0 2px var(--bahamut), 0 1px 6px rgba(42,27,18,.25); }
.map.is-placing, .map.is-placing .leaflet-interactive { cursor: crosshair; }
.map-frame.is-editing .leaflet-marker-draggable { cursor: move; }

.map-form { display: grid; gap: .45rem; font-family: var(--font-body); }
.map-form .popup__name { margin-bottom: .2rem; }
.map-form__field { display: grid; gap: .1rem; }
.map-form__field > span { font-family: var(--font-caps); font-weight: 500; font-size: .75rem; letter-spacing: .08em; color: var(--ink-soft); }
.map-form input, .map-form select, .map-form textarea {
  width: 100%; font: inherit; font-size: .98rem; color: var(--ink);
  background: rgba(255,250,238,.6); border: 1px solid rgba(42,27,18,.35); border-radius: 2px; padding: .25rem .4rem;
}
.map-form textarea { resize: vertical; }
.map-form__error { margin: 0 !important; color: #8A1F1F; font-size: .9rem; }
.map-form__error[hidden] { display: none; }
.map-form__actions { display: flex; flex-wrap: wrap; gap: .4rem; margin: .2rem 0 0 !important; }
.map-form__actions .button, .map-form__actions .popup__link { padding: .25rem .6rem; font-size: .78rem; }
.leaflet-tooltip.route-tooltip { font-family: var(--font-body); font-size: .95rem; line-height: 1.35; width: max-content; max-width: 260px; white-space: normal; }

/* ---------- Impressum, Datenschutz ---------- */
.legal-links {
  position: fixed; right: clamp(1rem, 3vw, 2.5rem); bottom: .45rem; z-index: 25;
  display: flex; gap: 1.2rem;
  font-family: var(--font-caps); font-weight: 500; font-size: .75rem; letter-spacing: .08em;
}
.legal-links a { color: var(--platinum); opacity: .55; text-decoration: none; }
.legal-links a:hover, .legal-links a:focus-visible { opacity: 1; }
.legal p { margin: 0 0 .8rem; font-size: 1rem; line-height: 1.5; hyphens: auto; }
.legal .subhead { margin-top: 1rem; }
.legal .page__head + .subhead { margin-top: 0; }
.legal .prose-list { font-size: 1rem; }
.legal code { font-family: ui-monospace, monospace; font-size: .85em; background: rgba(42,27,18,.07); padding: 0 .2em; border-radius: 2px; }
.legal a { color: var(--bahamut); }
.legal-address { font-style: normal; font-size: 1.05rem; line-height: 1.5; margin: 0 0 .6rem; }
.legal-missing { font-style: italic; color: #8A1F1F; }
.legal-stand { font-style: italic; color: var(--ink-soft); }
.legal-back { margin-top: auto !important; padding-top: 1rem; font-family: var(--font-hand); font-size: 1.1rem; }

/* ---------- Kleinere Bildschirme: eine Seite nach der anderen ---------- */
@media (max-width: 900px) {
  body { overflow: auto; }
  .desk-nav { position: absolute; gap: .9rem; padding-inline: 1rem; font-size: .8rem; letter-spacing: .04em; }
  .desk-nav__link--strong { padding: .3rem .6rem; }
  .desk-nav__who { display: none; }
  .is-open .stage { height: auto; }
  .spread { position: relative; padding-top: 4rem; }
  .book { grid-template-columns: 1fr; grid-template-rows: none; height: auto; perspective: none; }
  .page { overflow: visible; }
  .page--left  { border-radius: 3px 3px 0 0; }
  .page--right { border-radius: 0 0 3px 3px; }
  .page--left::after, .page--right::before { display: none; }
  .map-frame { flex: none; height: 62vh; }
  .map-frame--detail { height: 45vh; }
  .facts__row { grid-template-columns: 1fr; gap: 0; }
  .cp-editor { min-height: 55vh; }
  .legal-links { position: static; justify-content: center; padding: 1rem 0 1.4rem; }
  .gallery { grid-template-columns: 1fr 1fr; gap: 1rem .8rem; }
  .fc-form { grid-template-columns: 1fr; }
  .fc-person { grid-template-columns: 1fr; }
  .fc-person textarea { grid-column: auto; }
  .fc-person__remove { grid-row: auto; grid-column: auto; justify-self: start; }
  .viewer__figure { padding: 3.5rem 1rem 2rem; }
  .cover__title { left: 1.5rem; right: 1.5rem; text-align: center; top: 6vh; }
  .cover__image { background-position: 30% 50%; }
  .seal { right: 50%; top: auto; bottom: 7vh; transform: translateX(50%); }
  .cover__shade {
    background: linear-gradient(180deg, rgba(11,18,32,.8) 0%, rgba(11,18,32,.1) 35%, rgba(11,18,32,.1) 60%, rgba(11,18,32,.9) 100%);
  }
}

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  :root { --turn: 1ms; }
  .cover { transition: opacity 300ms ease; }
  .is-open .cover { transform: none; }
  .cover__glow { animation: none; }
  .seal__disc, .toc a { transition: none; }
}

/* Bestiarium: Attributswerte als Reihe wie im Werteblock */
.kx-abilities { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .35rem; margin: .9rem 0 1rem;
  padding: .55rem 0; border-block: 1px solid var(--rule); text-align: center; }
.kx-ability { display: grid; gap: .05rem; }
.kx-ability abbr { font-family: var(--font-caps); font-size: .85rem; letter-spacing: .06em; color: var(--ink-soft); text-decoration: none; }
.kx-ability b { font-family: var(--font-hand); font-size: 1.35rem; font-weight: 400; line-height: 1.1; color: var(--bahamut); }
.kx-ability span { font-size: .9rem; color: var(--ink-soft); }
@media (max-width: 420px) { .kx-abilities { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: .6rem; } }

/* Szenenwechsel in langen Texten („---“ in einer eigenen Zeile) */
.scene-break { margin: 1.1rem 0; text-align: center; font-size: 1.1rem; color: var(--ink-soft); letter-spacing: .4em; }