/* TokenCheck · Stil "Instrument" (Entwurf A, integriert 17.09.2026)
   Ruhig, praezise, viel Weissraum. Dunkle Kopfflaeche in Markenfarben,
   darunter helle Arbeitsflaeche (dunkel per prefers-color-scheme).
   Violett nur fuer Aktionen, Blau fuer Datenbalken, Zahlen tabellarisch.
   Schrift Inter liegt selbst gehostet unter fonts/ und wird direkt unter diesem Kommentar per @font-face geladen.
   Diese Datei ist mit dem Stylesheet von tokencheck.destinydeutschland.com identisch, damit beide Seiten gleich
   aussehen und Korrekturen nur an einer Stelle anfallen. Deshalb stehen hier auch Regeln fuer Rechner, Formulare,
   Ergebnisblock und Preistabelle, die auf der Dachmarke nicht vorkommen (rund 39 Klassen und sieben IDs).
   Sie bleiben bewusst stehen; wer sie entfernt, muss sie auf der anderen Seite nachziehen. */

/* Schrift Inter (SIL Open Font License 1.1, Lizenztext in fonts/LICENSE.txt), variable Schnitte 100 bis 900,
   Latin und Latin-Erweiterung mit unicode-range. Kein Abruf von Google Fonts oder anderen Dritten. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-20260918.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-ext-20260918.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Marke (fest, themenunabhaengig) */
  --brand-violet: #6C63FF;
  --brand-accent: #A78BFA;
  --brand-blue: #7CA9FF;
  --band-bg: #050508;
  --band-bg-2: #0a0a0f;
  --band-fg: #EDEDF2;
  --band-muted: #9A9AB0;
  --band-line: rgba(237, 237, 242, .14);
  --band-btn: #5B52F0;        /* 5,4:1 mit weissem Text */
  --band-btn-hover: #4A41E0;

  /* Helle Arbeitsflaeche (Standard) */
  --bg: #F6F6F9;
  --card: #FFFFFF;
  --panel: #F1F1F6;
  --line: #E2E2EA;
  --line-strong: #C9C9D6;
  --fg: #15151C;
  --muted: #5F5F72;
  --action: #5B52F0;          /* Buttonfuellung, 5,4:1 mit Weiss */
  --action-hover: #4A41E0;
  --action-fg: #FFFFFF;
  --action-soft: rgba(91, 82, 240, .10);
  --link: #5B52F0;            /* Linktext, 5,4:1 auf Weiss */
  --data: #4F7FE6;
  --warn: #B45309;
  --warn-soft: #FFF6E8;
  --error: #C62828;

  --radius: 8px;
  --max: 1120px;
  --font: Inter, "Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0a0f;
    --card: #111118;
    --panel: #15151d;
    --line: #23232e;
    --line-strong: #34343f;
    --fg: #EDEDF2;
    --muted: #9A9AB0;
    --action: #5B52F0;        /* statt #6C63FF (4,3:1): 5,4:1 mit Weiss */
    --action-hover: #6C63FF;
    --action-fg: #FFFFFF;
    --action-soft: rgba(108, 99, 255, .16);
    --link: #A78BFA;          /* 7,3:1 auf #0a0a0f */
    --data: #7CA9FF;
    --warn: #F0B84C;
    --warn-soft: #2A2110;
    --error: #FF6B6B;
  }
}

/* Grundlagen */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 16px/1.55 var(--font);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -0.015em; font-weight: 600; }
h1 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); letter-spacing: -0.025em; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.05rem; }
h4 { font-size: .95rem; margin-top: 1.6em; }
p { margin: 0 0 1em; }
strong { font-weight: 600; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }
.num, .tnum { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Sprunglink: erst bei Tastaturfokus sichtbar */
.skip { position: absolute; left: 16px; top: -200px; z-index: 20; background: var(--card); color: var(--fg); padding: 10px 14px; border-radius: 6px; border: 1px solid var(--line-strong); font-weight: 500; }
.skip:focus { top: 12px; text-decoration: none; }

/* Kopfzeile: sitzt auf der dunklen Flaeche, in beiden Themen. Eine Zeile: Wortmarke, Navigation, Button */
.band { background: linear-gradient(180deg, var(--band-bg) 0%, var(--band-bg-2) 100%); color: var(--band-fg); }
.top {
  max-width: var(--max); margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; gap: 16px 28px; flex-wrap: wrap;
  border-bottom: 1px solid var(--band-line);
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--band-fg); white-space: nowrap; font-size: .95rem; line-height: 1; flex: none; }
.brand:hover { text-decoration: none; }
.brand .mark { display: block; flex: none; }
.brand-text b { font-weight: 700; letter-spacing: .1em; }
.brand-text .light { font-weight: 300; margin-left: .3em; }
.brand-sep { width: 1px; height: 20px; background: rgba(237, 237, 242, .3); flex: none; }
.brand-product { font-weight: 500; }
.top nav { display: flex; align-items: center; gap: 4px 20px; flex-wrap: wrap; font-size: .9rem; flex: 1 1 auto; }
.top nav a { color: var(--band-fg); opacity: .86; padding: 4px 0; border-bottom: 1px solid transparent; }
.top nav a:hover { opacity: 1; text-decoration: none; border-bottom-color: var(--band-fg); }
.top .cta { flex: none; margin-left: auto; }

/* Aktionen: einzige Verwendung von Violett */
.btn {
  display: inline-block; background: var(--action); color: var(--action-fg);
  padding: 11px 18px; border-radius: 6px; font-weight: 500; border: 1px solid transparent;
  cursor: pointer; font-size: .95rem; line-height: 1.3; font-family: inherit; text-align: center;
  transition: background .12s ease;
}
.btn:hover { text-decoration: none; background: var(--action-hover); }
.btn.ghost { background: transparent; color: var(--link); border-color: var(--link); }
.btn.ghost:hover { background: var(--action-soft); }
.btn.small { padding: 7px 12px; font-size: .88rem; }
.band .btn { background: var(--band-btn); color: #fff; }
.band .btn:hover { background: var(--band-btn-hover); }
.band .btn.ghost { background: transparent; color: var(--band-fg); border-color: rgba(237, 237, 242, .4); }
.band .btn.ghost:hover { border-color: var(--band-fg); background: rgba(237, 237, 242, .06); }

/* Hero */
.hero { max-width: var(--max); margin: 0 auto; padding: 64px 24px 56px; display: grid; gap: 40px; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .8fr); align-items: start; }
.hero h1 { color: var(--band-fg); }
.eyebrow { color: var(--brand-accent); font-weight: 500; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 18px; }
.lead { font-size: 1.12rem; color: var(--band-muted); max-width: 60ch; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 26px 0 30px; }
.proof { list-style: none; padding: 0; margin: 0; display: flex; gap: 8px 28px; flex-wrap: wrap; color: var(--band-muted); font-size: .9rem; }
.proof li { position: relative; padding-left: 16px; }
.proof li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 1px; background: var(--brand-accent); }
.facts { border: 1px solid var(--band-line); border-radius: var(--radius); display: grid; grid-template-columns: 1fr 1fr; margin: 0; }
.facts > div { padding: 20px 22px; border-right: 1px solid var(--band-line); border-bottom: 1px solid var(--band-line); }
.facts > div:nth-child(2n) { border-right: 0; }
.facts > div:nth-last-child(-n+2) { border-bottom: 0; }
.facts dt { font-size: .78rem; color: var(--band-muted); margin: 0 0 6px; letter-spacing: .02em; }
.facts dd { margin: 0; font-size: 1.55rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--band-fg); line-height: 1.1; }
.facts dd small { display: block; font-size: .8rem; font-weight: 400; color: var(--band-muted); margin-top: 4px; letter-spacing: 0; }

/* Arbeitsflaeche */
main { max-width: var(--max); margin: 0 auto; padding: 8px 24px 72px; }
.section { padding: 40px 0 8px; }
.section-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.section-head .idx { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .85rem; letter-spacing: .04em; }
.section-head h2 { margin: 0; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.intro { max-width: 76ch; }

/* Rechner */
#result, #mapping, #manuell, #assumptions { scroll-margin-top: 24px; }
.drop {
  border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 36px 20px; text-align: center; cursor: pointer;
  background: var(--panel); transition: border-color .12s, background .12s;
}
.drop:hover, .drop.over, .drop:focus-visible { border-color: var(--action); background: var(--action-soft); outline: none; }
.drop p { margin: 0 0 6px; }
.status { min-height: 1.4em; margin: 10px 0 4px; }
.grid { display: grid; gap: 16px 20px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid.four { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

label { font-size: .92rem; font-weight: 500; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field .hint { font-weight: 400; color: var(--muted); font-size: .85rem; }
#mapping-fields label { display: flex; flex-direction: column; gap: 6px; }
input[type=text], input[type=email], input[type=number], input:not([type]), textarea, select {
  font: inherit; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: 6px;
  background: var(--card); color: var(--fg); width: 100%; font-variant-numeric: tabular-nums;
}
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--action); outline-offset: 0; border-color: var(--action); }
textarea { resize: vertical; min-height: 80px; }
[aria-invalid="true"] { border-color: var(--error) !important; box-shadow: 0 0 0 2px rgba(198, 40, 40, .15); }
.range .range-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.range output { font-variant-numeric: tabular-nums; font-weight: 600; font-size: .95rem; white-space: nowrap; flex: none; }
input[type=range] { width: 100%; accent-color: var(--action); margin: 6px 0 0; }
input[type=checkbox] { accent-color: var(--action); width: 16px; height: 16px; margin: 3px 0 0; flex: none; }
label.check { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0; font-weight: 400; font-size: .9rem; color: var(--fg); }

.mapping, .assumptions, .result { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.manual { margin-top: 20px; border: 1px solid var(--line); border-radius: var(--radius); padding: 0 16px; }
.manual summary { cursor: pointer; font-weight: 500; padding: 12px 0; list-style: none; display: flex; align-items: center; gap: 10px; }
.manual summary::-webkit-details-marker { display: none; }
.manual summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg); transition: transform .12s; }
.manual[open] summary::before { transform: rotate(45deg); }
.manual[open] summary { border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.manual .tablewrap { margin: 0; }
.manual .row { padding-bottom: 16px; }

/* Tabellen */
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
thead th { color: var(--muted); font-weight: 500; font-size: .8rem; letter-spacing: .02em; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
.tablewrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius); }
.tablewrap table { min-width: 720px; }
.tablewrap th, .tablewrap td { padding: 9px 12px; }
#manual-table input, #manual-table select { padding: 6px 8px; min-width: 110px; }
#manual-table td:last-child { width: 1%; }
/* Modellspalte: Name bleibt auf einer Zeile, der Hinweis (z. B. Tokenizer-Faktor) darunter */
#detail-table td:first-child { white-space: nowrap; min-width: 180px; }
#detail-table td:first-child .muted { display: block; white-space: normal; max-width: 26ch; }
.row { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

/* Ergebnis (Klassen aus app.js: .lever, .bar > i, .num, .risk, .kpi) */
.kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 6px 0 8px; }
.kpi { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; background: var(--card); }
.kpi.accent { background: var(--panel); border-top: 2px solid var(--fg); }
.k-label { display: block; color: var(--muted); font-size: .8rem; line-height: 1.35; min-height: 2.7em; }
.k-value { display: block; font-size: 1.45rem; font-weight: 600; margin-top: 6px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.2; }
.levers { display: grid; gap: 10px; }
.lever { display: grid; grid-template-columns: 200px 1fr 150px; gap: 14px; align-items: center; font-size: .92rem; }
.bar { height: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--data); }
.lever .num { text-align: right; font-variant-numeric: tabular-nums; }
.risks { margin-top: 18px; display: grid; gap: 8px; }
.risks:empty { display: none; }
.risk { background: var(--warn-soft); border-left: 3px solid var(--warn); padding: 10px 12px; border-radius: 4px; font-size: .92rem; }
.fee { margin-top: 26px; padding: 20px 22px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); }
.fee h4 { margin-top: 0; }
.fee .btn { margin-top: 4px; }

/* Ablauf */
.steps { list-style: none; padding: 0; margin: 0; counter-reset: step; display: grid; gap: 0; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 56px 1fr; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.steps li:last-child { border-bottom: 0; }
.steps li::before { content: counter(step, decimal-leading-zero); font-variant-numeric: tabular-nums; color: var(--muted); font-size: .85rem; letter-spacing: .04em; padding-top: 3px; }

/* Nachpruefbar */
.trust { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--card); }
.trust > div { padding: 18px 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-right: -1px; margin-bottom: -1px; }
.trust h3 { font-size: .95rem; margin-bottom: .4em; }
.trust p { font-size: .9rem; color: var(--muted); margin: 0; }

/* Preis */
.price { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; background: var(--card); }
.big { font-size: 2.6rem; font-weight: 600; margin: 0 0 6px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pricetable { margin: 4px 0 12px; }
.pricetable td:last-child { text-align: right; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Kontakt */
form .grid { margin-bottom: 16px; }
form .status { margin-top: 12px; }

/* Fusszeile */
footer { border-top: 1px solid var(--line); }
footer .inner { max-width: var(--max); margin: 0 auto; padding: 22px 24px; display: flex; gap: 12px 24px; flex-wrap: wrap; align-items: center; color: var(--muted); font-size: .88rem; }
footer a { color: var(--muted); }
footer .spacer { flex: 1; }
footer .pricedate { font-variant-numeric: tabular-nums; }

/* Unterseiten (Methodik, Analyse, Aenderungen, Ueber uns, Impressum, Datenschutz) */
main.page { max-width: 820px; padding-top: 44px; }
.page h1 { font-size: 2rem; margin-bottom: .6em; }
.page h2 { font-size: 1.3rem; margin-top: 2.2em; padding-top: 1em; border-top: 1px solid var(--line); }
.page h3 { font-size: 1.05rem; margin-top: 1.6em; }
.page p, .page li { max-width: 74ch; }
.page ul, .page ol { padding-left: 22px; margin: 0 0 1.2em; }
.page li { margin-bottom: .5em; }
.page li a, .page p a { overflow-wrap: anywhere; }
.page code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }
.page .pagemeta { color: var(--muted); font-size: .9rem; margin-top: -.4em; }
.page .tablewrap { margin: 16px 0 26px; }
.page .tablewrap table { min-width: 0; }
.page table caption { caption-side: top; text-align: left; color: var(--muted); font-size: .85rem; padding: 10px 12px 6px; }
.page tbody th { font-weight: 500; white-space: nowrap; }
.page td, .page th { vertical-align: top; }
.page .stand { margin-top: 2.5em; }
.legal { max-width: 760px; }

/* Mobil */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 28px; padding: 44px 20px 40px; }
  .facts { max-width: 520px; }
  /* Kopfzeile: siehe Block am Dateiende, sie bricht schon ab 960 Punkten um */
}
@media (max-width: 760px) {
  main { padding: 0 16px 56px; }
  main.page { padding-top: 28px; }
  .section { padding: 32px 0 4px; }
  .card { padding: 18px; }
  .steps li { grid-template-columns: 40px 1fr; }
  .facts > div { padding: 14px 16px; }
  .facts dd { font-size: 1.3rem; }
  .hero { padding: 36px 16px 32px; }
  .hero-cta .btn { flex: 1 1 auto; }
  .drop { padding: 26px 14px; }
  .k-label { min-height: 0; }
}
@media (max-width: 560px) {
  .lever { grid-template-columns: 1fr; gap: 4px; }
  .lever .num { text-align: left; }
}
@media (max-width: 480px) {
  /* Wortmarke und Button muessen zusammen in 343 px passen (375 px Viewport minus Rand) */
  .brand { font-size: .84rem; gap: 6px; }
  .brand-text b { letter-spacing: .06em; }
  .brand-text .light { display: none; }
  .brand .mark { width: 20px; height: 20px; }
  .brand-sep { height: 16px; }
  .top .cta.btn.small { padding: 6px 9px; font-size: .8rem; }
}
@media (max-width: 400px) {
  body { font-size: 15px; }
  .facts { grid-template-columns: 1fr; }
  .facts > div { border-right: 0; }
  .facts > div:nth-last-child(2) { border-bottom: 1px solid var(--band-line); }
}

/* Abstandshelfer */
.mt { margin-top: 18px; }

/* Dachmarke destinydeutschland.com (18.09.2026): Produktkarten mit Bereich und Status.
   Nutzt die Tokens oben; hell und dunkel ueber dieselben Variablen. */
.grid.three { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.offer { display: flex; flex-direction: column; }
.offer-head { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 14px; }
.kicker { color: var(--muted); font-size: .78rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.tag { display: inline-block; font-size: .78rem; font-weight: 500; line-height: 1.3; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--muted); white-space: nowrap; }
.tag.live { color: var(--link); border-color: var(--link); background: var(--action-soft); }
.offer h3 { margin-bottom: .6em; }
.offer p { max-width: 60ch; }
.offer .offer-action { margin: auto 0 0; padding-top: 6px; }
.offer .offer-action .btn { margin-top: 4px; }
.offer .offer-action a:not(.btn) { overflow-wrap: anywhere; }

/* Dachmarke: ohne Produktzusatz passt die volle Wortmarke ab 360 px neben den Button.
   :last-child trifft nur die Dachmarke; bei TokenCheck ist .brand-product das letzte Kind, dort bleibt die Regel wirkungslos. */
@media (min-width: 360px) and (max-width: 480px) { .brand-text:last-child .light { display: inline; } }

/* Korrekturen vom 18.09.2026 (Nachpruefung der Dachmarken-Seite) */

/* Kopfzeile: Zwischen 901 und 941 Punkten brach die Zeile zufaellig um, der Knopf rutschte allein
   in die zweite Reihe. Die geordnete zweite Reihe beginnt deshalb schon bei 960 Punkten. */
@media (max-width: 960px) {
  /* Wortmarke und Button fest in Zeile 1, Navigation als eigene Zeile 2 */
  .top { padding: 12px 16px; gap: 10px 12px; }
  .top nav { order: 3; flex: 1 0 100%; width: 100%; flex-wrap: nowrap; overflow-x: auto; gap: 18px; padding-bottom: 4px; scrollbar-width: none; -ms-overflow-style: none; }
  .top nav::-webkit-scrollbar { display: none; }
  .top nav a { white-space: nowrap; }
  .top .cta { order: 2; }
}

/* Navigation: Unter 560 Punkten passt sie nicht in eine Zeile. Die Bildlaufleiste ist ausgeblendet,
   deshalb war der letzte Eintrag unsichtbar. Hier bricht die Navigation um, statt zu scrollen. */
@media (max-width: 560px) {
  .top nav { flex-wrap: wrap; overflow-x: visible; gap: 6px 18px; }
}

/* Startseite: Hero und Abschnitte liegen gemeinsam in main, damit der Sprunglink vor der h1 landet.
   Die Kopfzeile bleibt ausserhalb von main. Damit an der Naht keine Kante entsteht, traegt die
   Kopfzeile die Startfarbe des Verlaufs und der Hero den Verlauf selbst.
   .home hebt die Breitenbegrenzung von main auf, die Abschnitte tragen sie dafuer selbst. */
.band { background: var(--band-bg); }
.band-hero { background: linear-gradient(180deg, var(--band-bg) 0%, var(--band-bg-2) 100%); }
.home { max-width: none; padding: 0; }
.home > .section { max-width: var(--max); margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.home > .section:first-of-type { padding-top: 48px; }
.home > .section:last-child { padding-bottom: 80px; }
@media (max-width: 760px) {
  .home > .section { padding-left: 16px; padding-right: 16px; }
  .home > .section:first-of-type { padding-top: 32px; }
  .home > .section:last-child { padding-bottom: 60px; }
}

/* Titelpruefung (18.09.2026). .leitsatz steht im Markup von content/titelpruefung.html,
   alle Klassen mit tp- erzeugt site/titelpruefung.js beim Anzeigen der Funde; die Liste der
   erzeugten Klassen steht im Kopf des Moduls. Nur Tokens von oben, hell und dunkel ueber
   dieselben Variablen. */
.leitsatz {
  margin: 20px 0; padding: 14px 16px; border: 1px solid var(--line-strong);
  border-left: 3px solid var(--action); border-radius: var(--radius);
  background: var(--action-soft); font-weight: 600; max-width: 60ch;
}
#titelpruefung { margin: 18px 0 8px; }
#titelpruefung .status { margin-top: 12px; }
/* Zwischenstand waehrend eines Laufs. Das Feld traegt bewusst kein aria-live, damit ein
   vorlesendes Programm nicht jede Zwischenzahl meldet und die Schlussmeldung uebertoent. */
#tp-fortschritt { margin: 4px 0 0; color: var(--muted); font-size: .9rem; min-height: 1.2em; }
.tp-summe { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 14px 16px; margin: 16px 0; }
.tp-summe p { margin: 0 0 6px; max-width: 70ch; }
.tp-summe p:last-child { margin-bottom: 0; }
.tp-summe-zahl { font-weight: 600; }
.tp-satz { font-weight: 600; }
.tp-stand { color: var(--muted); font-size: .85rem; }
.tp-zeile { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: 14px 16px; margin: 0 0 14px; }
.tp-titelzeile { font-size: 1rem; margin: 0 0 8px; overflow-wrap: anywhere; }
.tp-nummer { display: block; color: var(--muted); font-size: .78rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.tp-bilanz { margin: 0 0 10px; }
.tp-ohne { margin: 0; color: var(--muted); max-width: 70ch; }
.tp-trefferliste { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.tp-treffer { border-top: 1px solid var(--line); padding-top: 12px; }
.tp-treffer:first-child { border-top: 0; padding-top: 0; }
.tp-treffer p { margin: 0 0 4px; max-width: 70ch; }
/* Ohne Registernummer: sichtbar schwaecher als ein belegter Fund, nicht nur etwas blasser.
   Dazu die Marke "unbestaetigt" in der Kopfzeile mit gestricheltem Rand. */
.tp-schwach { border-left: 3px solid var(--line-strong); padding-left: 12px; color: var(--muted); }
.tp-klasse.tp-offen { border-style: dashed; }
.tp-trefferkopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tp-trefferkopf strong { font-size: 1.02rem; overflow-wrap: anywhere; }
.tp-klasse { display: inline-block; font-size: .78rem; line-height: 1.3; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--muted); white-space: nowrap; }
.tp-felder { display: grid; grid-template-columns: max-content 1fr; gap: 2px 14px; margin: 10px 0; font-size: .9rem; }
.tp-felder dt { color: var(--muted); }
.tp-felder dd { margin: 0; overflow-wrap: anywhere; }
.tp-unbestaetigt { color: var(--warn); font-size: .88rem; }
.tp-hinweis { font-size: .9rem; }
.tp-quelle { font-size: .85rem; color: var(--muted); overflow-wrap: anywhere; }
.tp-quelle a { overflow-wrap: anywhere; }
.tp-feldname { color: var(--muted); }
.tp-verworfen { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 10px; font-size: .9rem; }
.tp-verworfen summary { cursor: pointer; color: var(--muted); }
.tp-verworfen ul { margin: 8px 0 0; padding-left: 20px; }
@media (max-width: 560px) {
  .tp-felder { grid-template-columns: 1fr; gap: 0; }
  .tp-felder dd { margin-bottom: 8px; }
}