/* ============================================================================
   dehub.css — Best Stuff Experts (casinoohnelizenz24.com), DE multibrand hub
   Written 2026-08-26.

   DONOR (fixed): spininio.com — cluster flat-minimal, tags light-cream-typographic
   + teal-orange-accent.
   TAKEN from the donor: the warm off-white/cream field as the ONLY ground; empty
   space instead of decor; a flat solid-fill CTA with no gradient, no glow, no bevel;
   monoline icons with no colour fill; large type carrying the whole hierarchy.
   NOT TAKEN: the dot carousel; orange as a primary colour; the donor's light
   turquoise (ours is a deeper teal so white-on-accent clears 4.5:1); any lobby /
   casino-product furniture.

   OWN LINE (what separates dehub from the donor and from the network's other
   direction-2 hub — R10 forbids naming a sibling site in site code, so it is
   named only in _design/STATE.json):
   a consumer-test register, not a SaaS landing — serif headings (--head) over a
   grotesque body, a double hairline rule under every section h2 and above the
   footer as the only divider device, near-square corners (--r 4px / --notch 0),
   brand cards drawn as white dossier rows on cream rather than tiles, and tables
   as the primary carrier of meaning (warm zebra, small-caps th, tabular numerals).

   Inventory: covers every class emitted by _tools\nlhub_build.py and
   _tools\satellite_build.py. No @import, no remote font, no external URL.
   ============================================================================ */

:root {
  --bg: #FBF7F1;
  --bg2: #F3ECE1;
  --panel: #FFFFFF;
  --panel2: #F7F1E7;
  --fg: #1A1714;
  --muted: #6B6155;              /* 5.68 / 5.16 / 5.39 on --bg / --bg2 / --panel2 */
  --line: rgba(26, 23, 20, .14);
  --line2: rgba(26, 23, 20, .26);
  /* The cream field is not one ground: band sections sit on --bg2 and every zebra
     row / cta panel on --panel2, both darker than --bg. An accent tuned against
     --bg alone passes on the hero and fails inside the first band (measured:
     4.37 for the teal, 4.27 for the orange on --bg2). Both accents are therefore
     tuned against the DARKEST of the three grounds, --bg2, so they clear 4.5:1
     everywhere the generator can put them. */
  --accent: #0C7168;             /* 5.50 / 5.00 / 5.22 on the three grounds; white on it = 5.87 */
  --accent-fg: #FFFFFF;
  --accent2: #A84A0D;            /* 5.39 / 4.90 / 5.12; white on it = 5.75 (Anzeige badge) */
  --warn: #A84A0D;
  --bad: #A8322A;                /* 6.24 / 5.67 / 5.92 */
  --r: 4px;
  --notch: 0px;
  --maxw: 1160px;
  --head: 'Source Serif 4', 'Charter', 'Georgia', 'Times New Roman', serif;
  --body: 'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  --measure: 72ch;

  /* Derived, NOT a site token: --line2 lands at 1.74:1 against the cream ground,
     which is fine for a decorative hairline but fails the 3:1 floor for the edge
     of a control a reader has to find (the search field, the ghost button, the
     focus ring). Interactive edges use this instead. */
  --edge: rgba(26, 23, 20, .48);
}

*, *::before, *::after { box-sizing: border-box; }

/* R27: `clip`, never `hidden`. `hidden` turns the element into a scroll container,
   which kills `position: sticky` on the header (the classic trap the render gate
   catches). `clip` cuts the same overflow without creating a scroll port. */
html { scroll-behavior: smooth; scroll-padding-top: 76px; overflow-x: clip; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 16.5px/1.7 var(--body);
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  overflow-x: clip;              /* R27 belt: see the note on html — clip, not hidden */
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--head);
  font-weight: 600;
  letter-spacing: -.006em;
  line-height: 1.2;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(30px, 4.6vw, 50px); line-height: 1.1; }
h2 { font-size: clamp(23px, 3vw, 33px); margin-top: 0; }
h3 { font-size: clamp(18px, 2.1vw, 21.5px); }
h4 { font-size: 15.5px; letter-spacing: 0; }

p { margin: 0 0 1.05em; max-width: var(--measure); }
ul, ol { max-width: var(--measure); }
li { margin-bottom: .35em; }

/* the one colour job --accent2 has in prose: the list marker */
main ul:not(.toc):not(.pills):not(.steps) { padding-left: 1.15em; list-style: none; }
main ul:not(.toc):not(.pills):not(.steps) > li { position: relative; }
main ul:not(.toc):not(.pills):not(.steps) > li::before {
  content: "";
  position: absolute;
  left: -1.05em;
  top: .62em;
  width: 7px; height: 2px;
  background: var(--accent2);
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* --------------------------------------------------------- the double hairline */
/* The site's one divider device. Two 1px rules, 3px apart, under every section
   heading and above the footer. Nothing else on the page draws a line for effect. */
main > section > .wrap > h2 {
  position: relative;
  padding-bottom: 13px;
  margin-bottom: .7em;
  border-bottom: 1px solid var(--line2);
}
main > section > .wrap > h2::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -4px;
  height: 1px;
  background: var(--line2);
}

/* --------------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font: 700 13.5px/1 var(--body);
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 15px 26px;
  border-radius: var(--r);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { text-decoration: none; }
/* R34: the filled, find-me button is ALWAYS the paid link. Flat solid fill —
   no gradient, no glow, no bevel (donor rule). */
.btn-primary { background: var(--accent); color: var(--accent-fg); }
.btn-primary:hover { background: #0A6259; color: var(--accent-fg); }
/* internal navigation stays an outlined ghost */
.btn-secondary {
  background: transparent;
  color: var(--fg);
  border-color: var(--edge);
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); background: var(--panel2); }

.btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0 0 14px;
}

.adnote {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  margin: 2px 0 0;
}
.headcta { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 auto; }
.adnote.mini { font-size: 10.5px; text-align: center; margin: 0; }
.adnote.mini b { font-size: 9px; padding: 3px 5px; margin-right: 4px; }
.adnote b {
  display: inline-block;
  font: 700 10.5px/1 var(--body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: var(--accent2);
  border-radius: 2px;
  padding: 4px 6px;
  margin-right: 6px;
  vertical-align: 1px;
}

/* ---------------------------------------------------------------------- header */
header.site {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--bg);
  border-bottom: 1px solid var(--line2);
}
header.site .bar {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 76px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.logo { display: flex; align-items: center; gap: 12px; color: var(--fg); flex: 0 0 auto; }
.logo:hover { text-decoration: none; }
.logo b { display: block; font: 600 18px/1.15 var(--head); letter-spacing: -.01em; }
.logo small { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.mark {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r);
  background: var(--accent);
  color: var(--accent-fg);
  font: 600 15px/1 var(--head);
  letter-spacing: .02em;
  overflow: hidden;
  flex: 0 0 auto;
}
.mark.has-emblem { background: none; border: 1px solid var(--line); }
.mark img { width: 100%; height: 100%; object-fit: contain; }

nav.main {
  display: flex;
  gap: 2px;
  margin-left: auto;
  flex-wrap: nowrap;
}
nav.main a {
  color: var(--fg);
  font: 500 14.5px/1 var(--body);
  padding: 10px 11px;
  border-radius: var(--r);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
nav.main a:hover { color: var(--accent); text-decoration: none; }
nav.main a.akt { color: var(--accent); border-bottom-color: var(--accent); }

/* CSS-only hamburger — no JS in the chrome */
.nav-t { display: none; }
.hb { display: none; }

/* ---------------------------------------------------------------------- search */
.search { position: relative; flex: 0 0 auto; }
.search input {
  width: 176px;
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--r);
  color: var(--fg);
  font: 400 14px/1 var(--body);
  padding: 12px 14px;
}
.search input::placeholder { color: var(--muted); }
.search input:focus { border-color: var(--accent); outline: none; box-shadow: inset 0 0 0 1px var(--accent); }
.sres {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: min(360px, 78vw);
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--r);
  padding: 5px;
  max-height: 62vh;
  overflow: auto;
}
.sres.on { display: block; }
.sres a, .sres .nores {
  display: block;
  padding: 10px 12px;
  border-radius: 2px;
  color: var(--fg);
  font-size: 14px;
}
.sres a:hover { background: var(--panel2); color: var(--accent); text-decoration: none; }
.sres .nores { color: var(--muted); }

/* ------------------------------------------------------------------- crumb bar */
.crumbbar {
  border-bottom: 1px solid var(--line);
  background: var(--bg2);
  font-size: 13px;
  color: var(--muted);
}
.crumbbar .wrap {
  display: flex;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 11px;
  padding-bottom: 11px;
  flex-wrap: wrap;
}
.crumbbar .breadcrumb, .crumbbar .cr { min-width: 0; }
.crumbbar a { color: var(--muted); }
.crumbbar a:hover { color: var(--accent); }
.crumbbar span { color: var(--fg); }
.crumbbar .sep { color: var(--muted); }
.updated { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------------- sections */
main > section { padding: 52px 0; }
main > section.band { background: var(--bg2); }
main > section.tight { padding: 30px 0; }

/* the reading column: prose is centred, data grids keep the full shell */
main > section.narrow > .wrap { max-width: 872px; }
main > section.narrow p,
main > section.narrow ul,
main > section.narrow ol { max-width: none; }
.lead {
  color: var(--muted);
  font-size: clamp(17px, 1.6vw, 19.5px);
  line-height: 1.6;
  max-width: 66ch;
}

.src, .srcline { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; max-width: 88ch; }

/* ------------------------------------------------------------------------ hero */
/* Purely typographic, on the cream ground. No illustration, no tint, no glow —
   the empty space IS the decoration (donor rule). */
.hero {
  padding: 62px 0 52px;
  background: var(--bg);
  border-bottom: 1px solid var(--line2);
}
.hero .grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 44px;
  align-items: start;
}
.hero h1 { margin-bottom: .3em; }
.hero > .wrap > .grid > div > .brandlogo { margin-bottom: 18px; }
.kick {
  display: inline-block;
  font: 700 11px/1 var(--body);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 0 0 9px;
  margin-bottom: 14px;
  border-bottom: 2px solid var(--accent);
}
.hero .btns { margin-top: 26px; margin-bottom: 8px; }
.hero .adnote { margin-bottom: 24px; }

/* An h1 for pages that open on a list rather than on a hero (b_pagehead). The
   generator emits kick + h1 + .lead bare into the wrap; the class is styled here so
   a themed variant of that block can never land unstyled. */
.pagehead { display: block; margin-bottom: 8px; }
.pagehead h1, main > section > .wrap > h1 { margin-bottom: .3em; }

/* ---------------------------------------------------------------------- panels */
.panel {
  background: var(--panel);
  border: 1px solid var(--line2);
  border-radius: var(--r);
  padding: 22px;
}
/* This site has no cut corners at all. The class exists because the generator
   stamps it on nearly every box; here it must add nothing and break nothing. */
.notch { border-radius: var(--r); }
.panel h3 { margin-bottom: .6em; }
.panel.cta { background: var(--panel2); padding: 28px; }
.panel.cta p { max-width: 62ch; }

.callout {
  background: var(--panel2);
  border: 1px solid var(--line2);
  border-left: 3px solid var(--accent);
  border-radius: var(--r);
  padding: 18px 22px;
  margin: 22px 0;
}
.callout.gap { border-left-color: var(--warn); }
.callout h3 { margin-bottom: .45em; }
.callout p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------- tables */
/* Tables carry most of the meaning on this site, so they get the care a card grid
   would get elsewhere: warm zebra, small-caps heads, numerals on a fixed grid. */
.tablewrap { margin: 0 0 10px; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tablewrap.wide { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.tablewrap.wide table { min-width: 620px; }
th {
  text-align: left;
  font: 700 11.5px/1.3 var(--body);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--bg2);
  padding: 12px 14px;
  border-bottom: 1px solid var(--line2);
  white-space: nowrap;
}
td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  /* Fact tables carry strings with no break opportunity at all — licence numbers
     like ALSI-202508056-FI2, register ids like OGL/2024/822/0338. In a 44%-wide
     key column on a 375px screen their min-content width is what pushed the whole
     document sideways (scrollWidth 400 > 375). Let them break mid-token; the
     wrapper still scrolls for anything genuinely wide. */
  overflow-wrap: anywhere;
  word-break: break-word;
}
tbody tr:nth-child(even) td { background: var(--panel2); }
tbody tr:last-child td { border-bottom: 0; }
td.k { color: var(--muted); width: 38%; font-size: 14px; }
.na { color: var(--muted); font-style: italic; }

/* ------------------------------------------------------------------ brandcards */
/* Dossier rows, not tiles: a white sheet on the cream field, hairline edge only,
   no shadow, no filled header strip.
   `align-items: start` on purpose — a card that ends where its content ends reads
   better than one padded out to the tallest neighbour in its row.
   12 cards / 3 columns: no orphan row at 1280 or at 1440 (the shell caps at 1160). */
.brands {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 20px;
  margin-top: 24px;
}
.brand {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line2);
  border-radius: var(--r);
  padding: 22px;
  display: flex;
  flex-direction: column;
  transition: border-color .15s ease;
}
.brand:hover { border-color: var(--accent); }
.bhead {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding-right: 40px;
}
.blogo { width: auto; max-height: 34px; border-radius: 2px; }
.bname { font: 600 20px/1.2 var(--head); letter-spacing: -.01em; }

/* rank: the position this pool already gives the brand, made visible */
.brank {
  position: absolute;
  top: 18px; right: 18px;
  min-width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 2px;
  background: var(--bg2);
  border: 1px solid var(--line2);
  color: var(--muted);
  font: 700 14px/1 var(--body);
  font-variant-numeric: tabular-nums;
  padding: 0 5px;
}
.brands > .brand:nth-child(1) .brank {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
}

/* licence chip: regulator at a glance, wording straight from the review */
.lic {
  font: 700 10.5px/1 var(--body);
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 2px;
  padding: 6px 9px;
  border: 1px solid;
  white-space: nowrap;
}
.lic-ok { color: var(--accent); border-color: var(--accent); background: transparent; }
.lic-mid { color: var(--warn); border-color: var(--warn); background: transparent; }
.lic-bad { color: var(--bad); border-color: var(--bad); background: transparent; }
/* missing data is not an accusation — it gets the neutral chip, not the red one */
.lic-mute { color: var(--muted); border-color: var(--line2); background: var(--panel2); }

.safetybadge {
  font: 500 12px/1 var(--body);
  color: var(--muted);
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 6px 9px;
}

/* Safety Index meter — a picture of a number the source already published.
   The fill width arrives inline (style="width:NN%"); nothing here may override it. */
.meter {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 5px 14px;
  margin: 0 0 16px;
}
.mbar {
  grid-column: 1;
  height: 6px;
  border-radius: 0;
  background: var(--bg2);
  border: 1px solid var(--line);
  overflow: hidden;
}
.mbar i {
  display: block;
  height: 100%;
  background: var(--accent);
}
.mval {
  grid-column: 2; grid-row: 1;
  font: 600 19px/1 var(--head);
  font-variant-numeric: tabular-nums;
}
.mval small { font-size: 11.5px; color: var(--muted); font-weight: 400; }
.mlab {
  grid-column: 1 / -1;
  font-size: 11.5px;
  color: var(--muted);
}

/* hero signal strip: the two numbers a reader came for, both sourced */
.signals {
  margin: 26px 0 0;
  padding: 20px 22px;
  background: var(--panel);
  border: 1px solid var(--line2);
  border-radius: var(--r);
  max-width: 520px;
}
.meter.wide { gap: 7px 16px; }
.meter.wide .mbar { height: 9px; }
.meter.wide .mval { font-size: 25px; }
.signals .sigrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}
.sig {
  font-size: 12.5px;
  color: var(--fg);
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 7px 11px;
}
.sig b {
  color: var(--muted);
  font: 700 10.5px/1 var(--body);
  letter-spacing: .11em;
  text-transform: uppercase;
  margin-right: 7px;
}
.blead { font-size: 14.5px; color: var(--muted); margin-bottom: 14px; }
.brand table { font-size: 13.5px; }
.brand th, .brand td { padding: 9px 0; background: none; }
.brand tbody tr:nth-child(even) td { background: none; }
.brand td.k { width: 42%; padding-right: 12px; }
/* the paid button names the brand it opens, so its label can be long; let the pair
   stack rather than wrap into a ragged half-row */
.brand .btns { margin: auto 0 0; padding-top: 18px; gap: 8px; }
.brand .btn {
  font-size: 12.5px;
  padding: 13px 14px;
  flex: 1 1 auto;
  justify-content: center;
  white-space: normal;
  text-align: center;
}

/* ----------------------------------------------------------------------- tiles */
/* 15 hubs / 3 columns = five full rows, no orphans, and a wide enough tile for a
   real subject line instead of a label. */
.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 22px;
}
.tile {
  --tg: var(--accent);
  display: block;
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line2);
  border-radius: var(--r);
  padding: 20px 22px;
  color: var(--fg);
  transition: border-color .15s ease, background .15s ease;
}
.tile:hover { text-decoration: none; border-color: var(--accent); background: var(--panel2); }
.tile b { display: block; font: 600 18px/1.3 var(--head); margin-bottom: 5px; }
.tile span { display: block; font-size: 13px; color: var(--muted); line-height: 1.55; }
.tile .brandlogo { margin-bottom: 12px; }
.tcat {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--tg);
  font: 700 10px/1 var(--body);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
/* monoline glyph, no fill, no gloss — the donor's icon rule */
.tile .tg, .tg { width: 18px; height: 18px; flex: 0 0 auto; }
/* the five kinds of question stay legible apart without turning the grid into a
   colour chart: only the small glyph + kicker carry the tint */
.tile.g-pay { --tg: #0C7168; }
.tile.g-access { --tg: #2F5D8C; }
.tile.g-bonus { --tg: #A84A0D; }
.tile.g-trust { --tg: #3C6B4A; }
.tile.g-play { --tg: #6B4A7A; }

/* ------------------------------------------------------------------------- toc */
ul.toc {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 6px;
  padding: 0;
  max-width: none;
}
ul.toc li { margin: 0; }
ul.toc a {
  display: block;
  font: 500 13.5px/1 var(--body);
  color: var(--fg);
  background: var(--panel);
  border: 1px solid var(--line2);
  border-radius: var(--r);
  padding: 10px 14px;
}
ul.toc a:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }

/* ----------------------------------------------------------------------- steps */
ol.steps {
  list-style: none;
  counter-reset: s;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  max-width: none;
}
ol.steps li {
  counter-increment: s;
  background: var(--panel);
  border: 1px solid var(--line2);
  border-radius: var(--r);
  padding: 20px 20px 20px 20px;
  margin: 0;
}
ol.steps li::before {
  content: counter(s);
  display: block;
  font: 600 15px/1 var(--head);
  color: var(--accent);
  padding-bottom: 9px;
  margin-bottom: 11px;
  border-bottom: 1px solid var(--line2);
}
ol.steps b { display: block; font: 600 16.5px/1.3 var(--head); margin-bottom: 5px; }
ol.steps span { font-size: 13.5px; color: var(--muted); }

/* ------------------------------------------------------------------- pros/cons */
.pc { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; }
.pc ul { margin: 0; padding-left: 1.15em; max-width: none; }
.pc li { margin-bottom: .5em; font-size: 14.5px; }
.pc .pros h3 { color: var(--accent); }
.pc .pros li::before { background: var(--accent); }
.pc .cons h3 { color: var(--bad); }
.pc .cons li::before { background: var(--bad); }

/* ----------------------------------------------------------------------- tiers */
.cards { display: grid; gap: 16px; margin-top: 22px; }
.cards.c1 { grid-template-columns: 1fr; }
.cards.c2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cards.c3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.tier {
  background: var(--panel);
  border: 1px solid var(--line2);
  border-radius: var(--r);
  padding: 22px;
}
.tier.gap { border-left: 3px solid var(--warn); }
.tname {
  display: block;
  font: 700 11px/1 var(--body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.thead { font: 600 24px/1.2 var(--head); margin: 10px 0 6px; }
.tdetail { font-size: 14.5px; color: var(--muted); }
.tterms {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 12px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

/* -------------------------------------------------- figures / screenshots (R56) */
/* A screenshot lives INSIDE the section it belongs to, never in a gallery. */
figure.shot, figure.shot-inline, .shots figure {
  margin: 26px auto;
  max-width: 780px;
  background: var(--panel);
  border: 1px solid var(--line2);
  border-radius: var(--r);
  overflow: hidden;
}
figure.shot > div, figure.shot-inline > div, .shots figure > div { background: var(--bg2); }
figure.shot img, figure.shot-inline img, .shots figure img { width: 100%; height: auto; display: block; }
figcaption {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
  padding: 12px 16px;
  border-top: 1px solid var(--line);
}
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.shots figure { margin: 0; max-width: none; }
.shots figure.void > div, figure.shot.void > div {
  display: grid;
  place-items: center;
  min-height: 150px;
  color: var(--muted);
  font-size: 13.5px;
  padding: 20px;
  text-align: center;
}

/* ---------------------------------------------------------------- game cards */
.games {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px;
  margin-top: 22px;
}
.game-link { display: block; }
.game-link:hover { text-decoration: none; }
.game {
  background: var(--panel);
  border: 1px solid var(--line2);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color .15s ease;
}
.game-link:hover .game { border-color: var(--accent); }
.game .shot { background: var(--bg2); margin: 0; border: 0; border-radius: 0; max-width: none; }
.game .shot img { width: 100%; height: auto; display: block; }
.game .meta { padding: 12px 14px 14px; display: block; }
.gname { display: block; font: 600 15px/1.3 var(--head); color: var(--fg); }
.gprov { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
.gnum {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------- logo strips / logos */
/* Wide by nature: it scrolls inside its own box rather than widening the page. */
.logostrip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
  /* the strip sits between a table and the next h3 inside "Kennzahlen"; without a
     bottom margin the chips butted straight into that heading (judge, round 2) */
  margin-bottom: 18px;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.logo-chip {
  display: grid;
  place-items: center;
  background: #FFFFFF;
  border: 1px solid var(--line2);
  border-radius: var(--r);
  padding: 10px 14px;
  width: 96px;
  height: 48px;
  flex: 0 0 auto;
}
.logo-chip img { max-width: 68px; max-height: 26px; width: auto; height: auto; object-fit: contain; }
.logostrip.cardpay { margin-top: 4px; margin-bottom: 4px; flex-wrap: wrap; overflow: visible; }
.logostrip.cardpay .logo-chip { width: 64px; height: 34px; padding: 7px 10px; }
.logostrip.cardpay img { max-width: 44px; max-height: 20px; }

/* Brand logos arrive in every shape and on every ground — white marks, dark marks,
   flat SVG. One neutral box with a light plate keeps a dark logo from vanishing
   into the cream and a white one from vanishing into the sheet. */
.brandlogo {
  width: auto;
  max-width: 148px;
  height: 40px;
  object-fit: contain;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 4px 8px;
  flex: 0 0 auto;
}
/* the 20px inline mark inside a table row or a sentence: it must sit on the text
   baseline and add nothing to the line box */
.brandlogo.mini {
  display: inline-block;
  width: 20px; height: 20px;
  max-width: 20px;
  padding: 1px;
  margin: -4px 6px -4px 0;
  vertical-align: -4px;
  border-radius: 2px;
}

/* ------------------------------------------------------------------------- faq */
details.faq {
  background: var(--panel);
  border: 1px solid var(--line2);
  border-radius: var(--r);
  margin: 0 0 10px;
  max-width: 92ch;
}
details.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 17px 48px 17px 20px;
  font: 600 17px/1.45 var(--head);
  position: relative;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  font: 400 22px/1 var(--body);
}
details.faq[open] summary::after { content: "\2212"; }
details.faq .a { padding: 0 20px 6px; }
details.faq .a p { font-size: 15px; color: var(--muted); }

/* ---------------------------------------------------------------------- byline */
.byline { display: flex; align-items: center; gap: 14px; }
.byline span { font-size: 14px; color: var(--muted); }
.byline b { display: block; font: 600 16px/1.3 var(--head); }
.byline b a { color: var(--fg); }
.byline b a:hover { color: var(--accent); }
.medal {
  flex: 0 0 auto;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--panel2);
  border: 1px solid var(--line2);
  color: var(--accent);
  font: 600 15px/1 var(--head);
  overflow: hidden;
}
.medal.big { width: 100px; height: 100px; font-size: 30px; }
.medal.has-portrait { border-color: var(--accent); }
.medal img { width: 100%; height: 100%; object-fit: cover; }

.authorpage .authorhead { align-items: flex-start; margin-bottom: 26px; }
.authorpage .authorhead h1 { margin-bottom: .2em; }
.authorpage .authorhead b { color: var(--accent); font-size: 14.5px; }
.authorphoto {
  float: right;
  width: min(44%, 400px);
  margin: 4px 0 24px 30px;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--line2);
  background: var(--panel);
}
.authorphoto figcaption { border-top: 1px solid var(--line); }
.authorpage::after { content: ""; display: block; clear: both; }

/* the material list is navigation, so it reads as chips rather than bullets */
.authorpage > ul {
  list-style: none;
  padding: 0;
  margin: 14px 0 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: none;
}
.authorpage > ul li { margin: 0; }
.authorpage > ul li::before { content: none; }
.authorpage > ul a {
  display: block;
  font: 500 13.5px/1 var(--body);
  color: var(--fg);
  background: var(--panel);
  border: 1px solid var(--line2);
  border-radius: var(--r);
  padding: 10px 14px;
}
.authorpage > ul a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
ul.pills { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 0; padding: 0; max-width: none; }
ul.pills li {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 7px 11px;
}

/* ---------------------------------------------------------------------- footer */
/* The second place the double hairline appears — and the last line on the page. */
footer.site {
  background: var(--bg2);
  border-top: 1px solid var(--line2);
  box-shadow: 0 -4px 0 -3px var(--line2);
  padding: 48px 0 32px;
  margin-top: 10px;
}
footer.site .cols {
  display: grid;
  grid-template-columns: 1.25fr repeat(4, 1fr);
  gap: 28px;
}
footer.site h4 { color: var(--fg); margin-bottom: 12px; }
footer.site ul { list-style: none; margin: 0; padding: 0; max-width: none; }
footer.site li { margin-bottom: 8px; }
footer.site li::before { content: none; }
footer.site a { color: var(--muted); font-size: 13.8px; }
footer.site a:hover { color: var(--accent); }
footer.site .srcline { margin-top: 14px; max-width: 36ch; }
.agebadge {
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--warn);
  color: var(--warn);
  font: 700 13px/1 var(--body);
  margin-bottom: 12px;
}
footer.site .legal {
  border-top: 1px solid var(--line2);
  margin-top: 32px;
  padding-top: 20px;
  font-size: 12.5px;
  color: var(--muted);
}
footer.site .legal p { max-width: 105ch; margin-bottom: .7em; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1080px) {
  footer.site .cols { grid-template-columns: 1fr 1fr 1fr; }
  .hero .grid { grid-template-columns: 1fr; gap: 30px; }
  .brands { grid-template-columns: repeat(2, 1fr); }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .search input { width: 160px; }
}

@media (max-width: 900px) {
  .hb {
    display: grid;
    place-items: center;
    order: 3;
    margin-left: auto;
    width: 42px; height: 42px;
    border-radius: var(--r);
    border: 1px solid var(--edge);
    cursor: pointer;
    flex: 0 0 auto;
  }
  .hb span, .hb span::before, .hb span::after {
    content: "";
    display: block;
    width: 18px; height: 2px;
    background: var(--fg);
    position: relative;
  }
  .hb span::before { position: absolute; top: -6px; }
  .hb span::after { position: absolute; top: 6px; }
  /* The bar stays one short row while scrolling; search and the paid CTA live in
     the panel the hamburger opens. Pinning all three cost a quarter of a 375px
     screen on every page. R27: the closed header is ~58px tall here. */
  header.site .bar { flex-wrap: wrap; row-gap: 10px; min-height: 58px; }
  nav.main, header.site .search, header.site .headcta { display: none; }
  .nav-t:checked ~ nav.main,
  .nav-t:checked ~ .search,
  .nav-t:checked ~ .headcta { display: flex; }
  nav.main {
    order: 5;
    width: 100%;
    flex-direction: column;
    gap: 0;
    margin: 4px 0 0;
    border-top: 1px solid var(--line2);
    padding-top: 6px;
  }
  nav.main a {
    padding: 13px 6px;
    font-size: 16px;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
  }
  nav.main a.akt { border-bottom-color: var(--accent); }
  header.site .search { order: 6; width: 100%; }
  .search input { width: 100%; }
  .sres { width: 100%; }
  header.site .headcta { order: 7; width: 100%; margin-bottom: 8px; }
  header.site .headcta .btn-primary { width: 100%; justify-content: center; }
  .logo small { display: none; }
}

@media (max-width: 760px) {
  main > section { padding: 38px 0; }
  main > section.tight { padding: 24px 0; }
  .hero { padding: 38px 0 32px; }
  .pc { grid-template-columns: 1fr; }
  .brands { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr; }
  footer.site .cols { grid-template-columns: 1fr 1fr; }
  .btns .btn { flex: 1 1 auto; justify-content: center; }
  .wrap { padding: 0 18px; }
  .authorphoto { float: none; width: 100%; margin: 0 0 24px; }
  .games { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  td.k, .brand td.k { width: 44%; }
}

@media (max-width: 460px) {
  body { font-size: 16px; }
  footer.site .cols { grid-template-columns: 1fr; }
  .shots { grid-template-columns: 1fr; }
  .brand .btns { flex-direction: column; }
  .brand .btn { width: 100%; }
  .signals { padding: 16px; }
  th, td { padding: 10px 10px; }
}

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

/* ============================================================================
   TOKEN NOTES (to be carried back into _engine/sites/dehub.json if accepted)

   Two colour tokens WERE deepened (2026-08-26, R27 render gate). The first pass
   measured every accent against --bg only; the page has three grounds, and the
   darkest of them, --bg2, is where the band sections and the zebra rows live.
   Measured against all three (--bg #FBF7F1 / --bg2 #F3ECE1 / --panel2 #F7F1E7):

     --accent  #0E7B72 -> #0C7168 ..... was 4.81 / 4.37 ✘ / 4.56  now 5.50 / 5.00 / 5.22
     --accent2 #B8500E -> #A84A0D ..... was 4.69 / 4.27 ✘ / 4.46  now 5.39 / 4.90 / 5.12
     --warn    follows --accent2 (same value, same reason)
     --accent-fg #FFF on --accent ..... 5.13 -> 5.87 (filled CTA; deepening only helps)
     #FFF on --accent2 (Anzeige badge)  5.01 -> 5.75
     --muted #6B6155 unchanged ........ 5.68 / 5.16 / 5.39
     --bad   #A8322A unchanged ........ 6.24 / 5.67 / 5.92
     --edge  unchanged, composited .... 3.15 / 3.09 / 3.12 (edge floor is 3:1)

   The two literal tints that duplicate an accent (.tile.g-pay, .tile.g-bonus)
   were moved with them. Anything new that paints text must be checked against
   --bg2, not --bg.

   Two additions, neither of them a replacement:
   1) --measure: 72ch. dehub.json carries no `measure`; 72ch suits a 16.5px
      grotesque body under serif heads (the network default of 74ch reads slightly
      wide at this size).
   2) --edge: rgba(26,23,20,.48). NOT a site colour — a derived edge for
      INTERACTIVE control borders only (search field, ghost button, hamburger).
      --line2 composites to ~1.74:1 against the cream ground, which is fine for a
      decorative hairline but under the 3:1 floor for the boundary of a control a
      reader has to locate. --edge composites to ~4.4:1. If this is carried into
      dehub.json, add it as its own token; do not widen --line2, which would
      coarsen every table rule on the site.
   ============================================================================ */