/* ══════════════════════════════════════════════════════════════════════
   LaFa 2.0 · page.css — Rahmen der Unterseiten (noch ohne Inhalt)
   ══════════════════════════════════════════════════════════════════════ */

/* Der Generator setzt --accent / --accent-2 direkt als Inline-Stil auf
   <body> — je nach Palette der Kachel. Die Werte hier sind nur der
   Rückfall, falls eine Seite ohne Angabe geöffnet wird. */
body {
  --accent:   var(--spice);
  --accent-2: var(--spice-glow);
}

/* ══ Atmosphäre, ruhiger als auf der Landing ═════════════════════════ */
.atmos--page .atmos__wash {
  background:
    radial-gradient(60% 44% at 16% 4%,  color-mix(in oklab, var(--accent-2) 34%, transparent) 0%, transparent 62%),
    radial-gradient(54% 46% at 86% 22%, color-mix(in oklab, var(--accent) 20%, transparent) 0%, transparent 60%),
    radial-gradient(58% 46% at 62% 98%, color-mix(in oklab, var(--sky) 20%, transparent) 0%, transparent 64%);
}

/* ══ Kopfzeile mit Zurück-Weg ════════════════════════════════════════ */
.top__back {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .95rem .5rem .6rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--paper) 62%, transparent);
  backdrop-filter: blur(10px);
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  transition: color var(--t-mid) var(--ease-out),
              border-color var(--t-mid) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out);
}
.top__back:hover {
  color: var(--ink);
  border-color: color-mix(in oklab, var(--accent) 42%, transparent);
  box-shadow: var(--shadow-sm);
}
.top__back svg { width: 15px; height: 15px; transition: transform var(--t-mid) var(--ease-out); }
.top__back:hover svg { transform: translateX(-3px); }

/* ══ Blanko-Bühne ════════════════════════════════════════════════════ */
.blank {
  position: relative;
  z-index: 10;
  min-height: calc(100dvh - 7rem);   /* lässt Platz für die Fußzeile */
  display: grid;
  align-content: center;
  gap: 1.15rem;
  padding: 7rem 0 2rem;
}

.blank__title {
  font-family: var(--font-title, var(--font-display));
  font-size: clamp(2.4rem, 6.6vw, 5.4rem);
  letter-spacing: -.05em;
}

/* Display-Schriften wie Dune Rise laufen deutlich breiter und stehen nur
   in Versalien gut. Der Generator setzt dafür .blank__title--display. */
.blank__title--display {
  font-size: clamp(1.9rem, 5vw, 4.1rem);
  letter-spacing: .01em;
  line-height: 1.14;
  text-transform: uppercase;
  font-weight: 400;
}

/* Farbverlauf in der Akzentfarbe der jeweiligen Seite */
.blank__title .grad {
  background: linear-gradient(102deg,
              color-mix(in oklab, var(--accent) 88%, #000 12%) 0%,
              var(--accent) 42%,
              var(--accent-2) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.blank__lead {
  font-size: clamp(1rem, 1.5vw, 1.16rem);
  color: var(--ink-soft);
  max-width: 48ch;
  text-wrap: pretty;
}

/* Platzhalter-Fläche: markiert, dass hier Inhalt hinkommt */
.slot {
  margin-top: .8rem;
  min-height: clamp(8rem, 19vh, 12.5rem);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: .5rem;
  padding: 1.6rem;
  border-radius: var(--r-xl);
  border: 1px dashed color-mix(in oklab, var(--accent) 30%, var(--line));
  background:
    linear-gradient(color-mix(in oklab, var(--paper) 46%, transparent),
                    color-mix(in oklab, var(--paper) 46%, transparent)),
    repeating-linear-gradient(-45deg,
      color-mix(in oklab, var(--accent) 4%, transparent) 0 11px,
      transparent 11px 22px);
  backdrop-filter: blur(12px);
  text-align: center;
  color: var(--ink-faint);
  transition: border-color var(--t-slow) var(--ease-out), background-position 12s linear;
}
.slot:hover { border-color: color-mix(in oklab, var(--accent) 52%, transparent); }
.slot b {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ink-soft);
  font-weight: 600;
  letter-spacing: -.01em;
}
.slot span { font-size: .84rem; max-width: 42ch; }

.blank__foot {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-top: .6rem;
}

/* ══════════════════════════════════════════════════════════════════════
   Optionen — die Unter-Einträge einer Kachel (z. B. Tools → Live Maps)
   Ruhiger gehalten als die Portale der Startseite: hier wird ausgewählt,
   nicht inszeniert.
   ══════════════════════════════════════════════════════════════════════ */
.opts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1rem;
  margin-top: .6rem;
}

.opt {
  --accent: var(--spice);
  --accent-2: var(--spice-glow);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  min-height: 11.5rem;
  padding: 1.1rem 1.2rem;
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  background: color-mix(in oklab, var(--paper) 88%, transparent);
  border: 1px solid color-mix(in oklab, var(--ink) 8%, var(--glass-edge));
  box-shadow: var(--shadow-sm), inset 0 1px 0 color-mix(in oklab, #fff 65%, transparent);
  backdrop-filter: blur(14px);
  transition: transform var(--t-mid) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out),
              border-color var(--t-mid) var(--ease-out);
}

/* Akzentschimmer aus der unteren Ecke */
.opt::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(110% 80% at 50% 120%,
              color-mix(in oklab, var(--accent) 20%, transparent) 0%, transparent 70%);
  opacity: .55;
  transition: opacity var(--t-mid) var(--ease-out);
}

a.opt:hover, a.opt:focus-visible {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--accent) 34%, transparent);
  box-shadow: var(--shadow-md),
              0 0 0 1px color-mix(in oklab, var(--accent) 22%, transparent),
              0 18px 44px color-mix(in oklab, var(--accent) 16%, transparent);
}
a.opt:hover::before, a.opt:focus-visible::before { opacity: 1; }

/* Ein geplanter Eintrag führt bewusst nirgendwohin. */
.opt--closed { opacity: .72; }
.opt--closed::before { opacity: .3; }

.opt__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem;
}
.opt__idx {
  font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .2em; color: var(--ink-faint);
}
.opt__status {
  padding: .18rem .55rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  font-family: var(--font-mono); font-size: .55rem;
  letter-spacing: .14em; text-transform: uppercase;
  white-space: nowrap; color: var(--ink-mute);
}
.opt__status--live {
  color: var(--leaf-deep);
  border-color: color-mix(in oklab, var(--leaf) 42%, transparent);
  background: color-mix(in oklab, var(--leaf) 11%, transparent);
}
.opt__status--planned { color: var(--ink-mute); border-style: dashed; }
.opt__status--off {
  color: #8f2b22;
  border-color: color-mix(in oklab, #c0392b 32%, transparent);
}

.opt__body { display: grid; gap: .35rem; margin-bottom: auto; }
.opt__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.14rem; letter-spacing: -.025em; color: var(--ink);
  line-height: 1.15;
}
.opt__desc {
  font-size: .82rem; color: var(--ink-soft);
  line-height: 1.55; text-wrap: pretty;
}

.opt__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; padding-top: .75rem;
  border-top: 1px solid var(--line-soft);
}
.opt__tag {
  font-family: var(--font-mono); font-size: .58rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: color-mix(in oklab, var(--accent) 78%, var(--ink));
}
.opt__arrow {
  display: grid; place-items: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  border: 1px solid var(--line); color: var(--ink);
  transition: color var(--t-mid), border-color var(--t-mid), background var(--t-mid);
}
.opt__arrow svg { width: 15px; height: 15px; transition: transform var(--t-mid) var(--ease-out); }
a.opt:hover .opt__arrow {
  color: var(--paper); border-color: transparent;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
a.opt:hover .opt__arrow svg { transform: translate(2px, -2px); }

/* Auf Seiten mit Optionen ersetzt die Liste den Blanko-Platzhalter. */
.blank--options .slot { display: none; }

/* ══════════════════════════════════════════════════════════════════════
   Seiten mit ausgeschriebenem Inhalt
   Wo eine Seite eine eigene Vorlage mitbringt (templates/parts/), tritt
   diese an die Stelle des Blanko-Platzhalters.
   ══════════════════════════════════════════════════════════════════════ */
.blank--filled { align-content: start; }

/* ══════════════════════════════════════════════════════════════════════
   Serverbeschreibung + Einstellungen
   Die Werte kommen aus der Server-Console; die Seite muss ohne sie
   trotzdem etwas zeigen. Deshalb steht die Beschreibung fest im HTML
   und nur die Tafel darunter füllt sich nach.
   ══════════════════════════════════════════════════════════════════════ */
.srv {
  display: grid;
  gap: 1.6rem;
  margin-top: 1.4rem;
}

.srv__intro { display: grid; gap: .7rem; max-width: 62ch; }
.srv__intro h2 {
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  letter-spacing: -.03em;
}
.srv__text { font-size: .96rem; color: var(--ink-soft); text-wrap: pretty; }
.srv__text--mute { font-size: .88rem; color: var(--ink-mute); }
.srv__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .3rem; }

/* ── Die Tafel ─────────────────────────────────────────────────────── */
.srv__panel {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: color-mix(in oklab, var(--paper) 88%, transparent);
  border: 1px solid color-mix(in oklab, var(--ink) 8%, var(--glass-edge));
  box-shadow: var(--shadow-sm), inset 0 1px 0 color-mix(in oklab, #fff 65%, transparent);
  backdrop-filter: blur(14px);
}

/* Kopfzeile: Zustand, Auslastung, Stand der Daten */
.srv__bar {
  display: flex;
  align-items: center;
  gap: .8rem 1.4rem;
  flex-wrap: wrap;
  padding: .95rem 1.3rem;
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(120deg,
              color-mix(in oklab, var(--accent) 7%, transparent),
              transparent 62%);
}

.srv__state {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-display); font-weight: 700;
  font-size: .98rem; letter-spacing: -.02em; color: var(--ink);
}
.srv__dot {
  position: relative;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-faint);
  flex: none;
}
/* Nur der laufende Server pulsiert — sonst wäre der Punkt bloß Deko. */
[data-state="bereit"] .srv__dot { background: var(--leaf); }
[data-state="bereit"] .srv__dot::after {
  content: "";
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--leaf);
  animation: ping 2.2s var(--ease-out) infinite;
}
[data-state="fehler"] .srv__dot { background: #c0392b; }

.srv__pop { display: inline-flex; align-items: center; gap: .6rem; }
.srv__popbar {
  width: 5.5rem; height: 5px; border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--ink) 9%, transparent);
  overflow: hidden;
}
.srv__popbar i {
  display: block; height: 100%; width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width var(--t-slow) var(--ease-out);
}
.srv__popnum { font-family: var(--font-mono); font-size: .7rem; color: var(--ink-mute); }

.srv__stand {
  margin-left: auto;
  font-size: .58rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-faint);
}

/* ── Welten ──────────────────────────────────────────────────────────
   Jede Welt ist aufklappbar: Darunter stehen je Sietch die
   Einstellungen, die vom Auslieferungszustand des Spiels abweichen. */
.srv__welten { padding: .3rem 1.3rem; }

.welt { border-top: 1px solid var(--line-hair); }
.srv__welten .welt:first-child { border-top: 0; }

.welt__zeile {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: .5rem 1rem;
  flex-wrap: wrap;
  padding: .85rem 0;
  text-align: left;
  border-radius: var(--r-sm);
  transition: color var(--t-mid) var(--ease-out);
}
button.welt__zeile { cursor: pointer; }
button.welt__zeile:hover .welt__name,
button.welt__zeile:focus-visible .welt__name { color: var(--accent); }
button.welt__zeile:hover .welt__pfeil { border-color: color-mix(in oklab, var(--accent) 44%, transparent); }

.welt__name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.02rem; letter-spacing: -.02em; color: var(--ink);
  transition: color var(--t-mid) var(--ease-out);
}
.welt__sub { font-size: .82rem; color: var(--ink-mute); }
.welt__meta {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .1em; color: var(--ink-faint);
}
.welt__badge {
  padding: .18rem .55rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  font-family: var(--font-mono); font-size: .55rem;
  letter-spacing: .14em; text-transform: uppercase;
  white-space: nowrap; color: var(--ink-mute);
}
.welt__badge--an {
  color: var(--leaf-deep);
  border-color: color-mix(in oklab, var(--leaf) 42%, transparent);
  background: color-mix(in oklab, var(--leaf) 11%, transparent);
}
.welt__badge--aus {
  color: #8f2b22;
  border-color: color-mix(in oklab, #c0392b 32%, transparent);
}

.welt__pfeil {
  display: grid; place-items: center;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--ink-mute);
  transition: transform var(--t-mid) var(--ease-out), border-color var(--t-mid);
}
.welt__pfeil svg { width: 13px; height: 13px; }
[aria-expanded="true"] .welt__pfeil { transform: rotate(180deg); }

/* ── Aufgeklappt: Sietche und ihre Einstellungen ──────────────────── */
.welt__detail {
  padding: .2rem 0 1.3rem;
  animation: welt-auf .4s var(--ease-out);
}
@keyframes welt-auf {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.sietch__wahl { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.1rem; }

.sietch__knopf {
  display: flex; align-items: baseline; gap: .5rem;
  padding: .45rem .85rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--paper) 70%, transparent);
  color: var(--ink-mute);
  transition: color var(--t-mid), border-color var(--t-mid), background var(--t-mid);
}
.sietch__knopf:hover { border-color: color-mix(in oklab, var(--ink) 24%, transparent); }
.sietch__knopf[aria-pressed="true"] {
  color: var(--ink);
  border-color: color-mix(in oklab, var(--accent) 46%, transparent);
  background: color-mix(in oklab, var(--accent) 10%, var(--paper));
}
.sietch__knopf-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: .84rem; letter-spacing: -.01em;
}
.sietch__knopf-sub { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .12em; }
.sietch__knopf-zahl {
  font-family: var(--font-mono); font-size: .58rem;
  padding: .05rem .4rem; border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--ink) 7%, transparent);
}
/* PvP und PvE sollen sich auf einen Blick unterscheiden. */
.sietch__knopf--pvp[aria-pressed="true"] {
  border-color: color-mix(in oklab, #c0392b 40%, transparent);
  background: color-mix(in oklab, #c0392b 8%, var(--paper));
}
.sietch__knopf--pve[aria-pressed="true"] {
  border-color: color-mix(in oklab, var(--leaf) 44%, transparent);
  background: color-mix(in oklab, var(--leaf) 9%, var(--paper));
}

/* Viele kleine Blöcke unterschiedlicher Höhe — Spalten setzen sie
   dichter als ein Raster, in dem jede Zeile so hoch wie ihr größter
   Block wäre. */
.sietch__kats {
  columns: 3 17rem;
  column-gap: 2rem;
}
.sietch__leer { columns: auto; font-size: .86rem; color: var(--ink-mute); }

.kat {
  break-inside: avoid;
  margin: 0 0 1.35rem;
}
.kat__titel {
  font-family: var(--font-mono);
  font-size: .58rem; letter-spacing: .2em; text-transform: uppercase;
  color: color-mix(in oklab, var(--accent) 76%, var(--ink));
  padding-bottom: .3rem;
  border-bottom: 1px solid color-mix(in oklab, var(--accent) 22%, var(--line-hair));
}
.kat__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
  padding: .38rem 0;
  border-bottom: 1px solid var(--line-hair);
}
.kat__label { font-size: .82rem; color: var(--ink-soft); }
.kat__wert {
  display: inline-flex; align-items: baseline; gap: .4rem;
  white-space: nowrap; text-align: right;
}
.kat__wert b {
  font-family: var(--font-mono); font-size: .8rem;
  font-weight: 500; color: var(--ink);
}
/* Der Auslieferungswert, durchgestrichen: Erst daran sieht man, ob 3×
   viel ist. */
.kat__wert s {
  font-family: var(--font-mono); font-size: .66rem;
  color: var(--ink-faint);
  text-decoration-thickness: 1px;
}

/* ── Gruppen ───────────────────────────────────────────────────────── */
.srv__gruppen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
  gap: 0;
  border-top: 1px solid var(--line-soft);
}

.grp {
  padding: 1.15rem 1.3rem 1.3rem;
  border-left: 1px solid var(--line-hair);
}
/* Der linke Rand der ersten Spalte wäre der Rahmen der Tafel doppelt. */
.grp:first-child { border-left: 0; }

.grp__titel {
  font-family: var(--font-mono);
  font-size: .6rem; letter-spacing: .22em; text-transform: uppercase;
  color: color-mix(in oklab, var(--accent) 74%, var(--ink));
  margin-bottom: .5rem;
}

.grp__row {
  display: grid;
  grid-template-columns: minmax(6rem, 8.5rem) 1fr;
  gap: .15rem .9rem;
  padding: .58rem 0;
  border-top: 1px solid var(--line-hair);
}
.grp__row:first-of-type { border-top: 0; }

.grp__label {
  font-family: var(--font-mono);
  font-size: .58rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: .22rem;
}
.grp__value {
  font-weight: 600; font-size: .92rem; color: var(--ink);
  overflow-wrap: anywhere;
}
.grp__hint { grid-column: 2; font-size: .76rem; color: var(--ink-mute); }

/* ── Befehlsliste ─────────────────────────────────────────────────────
   Dieselbe Tafel wie bei den Serverwerten, nur trägt die linke Spalte
   hier einen Befehl statt einer Beschriftung. Die Gruppen stehen
   untereinander statt nebeneinander: `/dune character [name]` und ein
   ganzer Satz passen in einem Drittel der Breite nicht nebeneinander. */
.cmds { display: grid; }

.cmds .grp {
  border-left: 0;
  border-top: 1px solid var(--line-soft);
}
.cmds .grp:first-child { border-top: 0; }

.cmd {
  display: grid;
  grid-template-columns: minmax(9rem, 13.5rem) 1fr;
  gap: .2rem 1.1rem;
  padding: .5rem 0;
  border-top: 1px solid var(--line-hair);
}
.cmd:first-of-type { border-top: 0; }

.cmd__name {
  font-family: var(--font-mono);
  font-size: .78rem;
  line-height: 1.6;
  color: color-mix(in oklab, var(--accent) 58%, var(--ink));
  white-space: nowrap;
}
.cmd__text {
  font-size: .88rem; color: var(--ink-soft);
  line-height: 1.55; text-wrap: pretty;
}
/* Der Vorbehalt gehört unter die Beschreibung, nicht in sie hinein. */
.cmd__hint {
  grid-column: 2;
  font-size: .74rem; color: var(--ink-faint);
}

@media (max-width: 620px) {
  .cmd { grid-template-columns: 1fr; }
  .cmd__hint { grid-column: 1; }
  .cmd__name { white-space: normal; overflow-wrap: anywhere; }
}

/* ── Fußnote der Tafel ─────────────────────────────────────────────── */
.srv__note {
  padding: .8rem 1.3rem .95rem;
  border-top: 1px solid var(--line-soft);
  font-size: .76rem;
  color: var(--ink-faint);
}
.srv__note b { color: var(--ink-mute); font-weight: 600; }

/* ── Ladezustand ───────────────────────────────────────────────────── */
.srv__skeleton { padding: 1.3rem; display: grid; gap: .7rem; }
.srv__skeleton span {
  height: .82rem; border-radius: var(--r-xs);
  background: linear-gradient(90deg,
              color-mix(in oklab, var(--ink) 6%, transparent) 0%,
              color-mix(in oklab, var(--ink) 3%, transparent) 50%,
              color-mix(in oklab, var(--ink) 6%, transparent) 100%);
  background-size: 220% 100%;
  animation: srv-shimmer 1.5s linear infinite;
}
.srv__skeleton span:nth-child(2) { width: 78%; }
.srv__skeleton span:nth-child(3) { width: 61%; }
.srv__skeleton span:nth-child(4) { width: 84%; }
@keyframes srv-shimmer { to { background-position: -220% 0; } }

@media (max-width: 560px) {
  .grp__row { grid-template-columns: 1fr; }
  .grp__hint { grid-column: 1; }
  .welt__meta { margin-left: 0; width: 100%; }
  .srv__stand { margin-left: 0; }
  /* Lange Beschriftung und Wert nebeneinander wird auf dem Handy zur
     Zwei-Wort-Spalte — dann lieber untereinander. */
  .kat__row { flex-wrap: wrap; }
  .kat__wert { margin-left: auto; }
}

/* ══════════════════════════════════════════════════════════════════════
   Impressum und Datenschutz
   Eine Textseite im Seitenrahmen — schmale Spalte, viel Ruhe, keine
   Kacheln. Was hier steht, soll man lesen können, nicht bestaunen.
   ══════════════════════════════════════════════════════════════════════ */
.legal {
  display: grid;
  gap: 2.4rem;
  max-width: 60ch;
  margin-top: 1.4rem;
}

.legal__block {
  display: grid;
  gap: .55rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-soft);
}
.legal__block:first-child { padding-top: 0; border-top: 0; }

.legal__block h2 {
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  letter-spacing: -.03em;
}
.legal__hinweis {
  font-size: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.legal__adresse {
  font-style: normal;
  font-size: 1.02rem;
  line-height: 1.85;
  color: var(--ink);
}
.legal__text {
  font-size: .98rem;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* Die Einstellungen einer Welt ohne Aufklappen — Palworld hat nur eine.
   Sonst dasselbe Bild wie bei den Sietchen: viele kleine Blöcke, die in
   Spalten dichter stehen als in einem Raster. */
.srv__kats {
  padding: 1.25rem 1.3rem .1rem;
  border-top: 1px solid var(--line-soft);
  columns: 3 17rem;
  column-gap: 2rem;
}
.srv__kats .sietch__leer { columns: auto; }