/*
Theme Name: Deutsche Online Casinos Register
Theme URI: https://www.deutscheonlinecasinos.org
Author: iGaming
Description: Amtsblatt-Brutalismus — Register lizenzierter Anbieter. Flaches 1px-Rasterlayout, keine Rundungen, keine Schatten, self-hosted Fontsource-Schriften (DSGVO).
Version: 0.2.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: deutscheonlinecasinos-org
*/

/* ==========================================================================
   1. Schriften — self-hosted (Fontsource, SIL OFL). Kein Google-Fonts-CDN.
   ========================================================================== */

@font-face { font-family: "Newsreader"; src: url("fonts/newsreader-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("fonts/newsreader-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("fonts/newsreader-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("fonts/newsreader-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("fonts/archivo-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("fonts/archivo-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("fonts/archivo-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("fonts/archivo-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

/* ==========================================================================
   2. Grundlagen
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; padding: 0; background-color: #f5f0e6; color: #43331f; font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-size: 17px; line-height: 25px; }
::selection { background-color: #43331f; color: #f5f0e6; }

body .wrapper { width: 100%; }
body .wrapper img { max-width: 100%; height: auto; display: block; }
body .wrapper a { color: #9b2c1e; text-decoration: underline; text-underline-offset: 2px; transition: color 120ms linear, background-color 120ms linear, border-color 120ms linear; }
body .wrapper a:hover { color: #43331f; }
body .wrapper a:focus-visible, body .wrapper span:focus-visible, body .wrapper input:focus-visible, body .wrapper summary:focus-visible { outline: 2px solid #9b2c1e; outline-offset: 2px; }

body .wrapper h1, body .wrapper h2, body .wrapper h3, body .wrapper h4 { font-family: "Newsreader", Georgia, "Times New Roman", serif; font-weight: 600; color: #43331f; margin: 0 0 15px 0; }
body .wrapper h1 { font-size: 30px; line-height: 34px; font-weight: 700; letter-spacing: -0.01em; }
body .wrapper h2 { font-size: 24px; line-height: 29px; margin-top: 45px; }
body .wrapper h3 { font-size: 19px; line-height: 25px; margin-top: 30px; }
body .wrapper h4 { font-size: 17px; line-height: 23px; margin-top: 30px; font-family: "Archivo", Arial, sans-serif; font-weight: 700; }
body .wrapper p { margin: 0 0 15px 0; }

/* Lange unbrechbare Tokens duerfen die Seite nicht sprengen: Domainnamen und E-Mail-Adressen
   sind auf dieser Domain Fliesstext-Inhalt, nicht Ausnahme. Gemessen 13.08.2026 bei 320px:
   die H1 "David Ritter: Herausgeber von deutscheonlinecasinos.org" lief 79px hinaus (Seite 64px),
   "E-Mail: redaktion@deutscheonlinecasinos.org" 16px (Seite 1px). Der Footer hatte die Regel
   fuer die langen Behoerdennamen schon, der Textkoerper nicht.
   `break-word` statt `anywhere`: es greift NUR, wenn ein Wort allein nicht in die Zeile passt —
   normaler Text bricht weiter an Wortgrenzen. */
body .wrapper h1, body .wrapper h2, body .wrapper h3, body .wrapper h4,
body .wrapper p, body .wrapper li, body .wrapper dd, body .wrapper td, body .wrapper th { overflow-wrap: break-word; }
body .wrapper ul, body .wrapper ol { margin: 0 0 15px 0; padding-left: 20px; }
body .wrapper li { margin-bottom: 8px; }
body .wrapper strong { font-weight: 600; }
body .wrapper hr { border: 0; border-top: 1px solid #c9bca4; margin: 30px 0; }
body .wrapper blockquote { margin: 30px 0; padding: 0 0 0 15px; border-left: 2px solid #9b2c1e; font-family: "Newsreader", Georgia, serif; font-size: 19px; line-height: 27px; }

body .wrapper .skip-link { position: absolute; left: -9999px; top: 0; background-color: #43331f; color: #f5f0e6; padding: 10px 15px; font-size: 14px; z-index: 100; }
body .wrapper .skip-link:focus { left: 0; }

body .wrapper .breite { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 15px; }
body .wrapper .text { max-width: 900px; }
body .wrapper .text p, body .wrapper .text ul, body .wrapper .text ol, body .wrapper .text h2, body .wrapper .text h3, body .wrapper .text h4, body .wrapper .text blockquote { max-width: 680px; }
body .wrapper .text .fakten, body .wrapper .text .fakten p, body .wrapper .text .fakten ul, body .wrapper .text .fakten ol, body .wrapper .text .schritte, body .wrapper .text .schritte li, body .wrapper .text .registerkopf, body .wrapper .text .registerkopf-titel, body .wrapper .text .registerkopf dd, body .wrapper .text .tabelle-rahmen, body .wrapper .text .registertabelle td, body .wrapper .text .registertabelle th, body .wrapper .text .kennzahlen, body .wrapper .text .kennzahlen-titel, body .wrapper .text .kennzahlen-raster, body .wrapper .text .kennzahl-wert, body .wrapper .text .kennzahl-label, body .wrapper .text .seitenindex-liste, body .wrapper .text .merksatz, body .wrapper .text .merksatz-text { max-width: none; }
body .wrapper .band { border-top: 1px solid #c9bca4; padding: 30px 0; }
body .wrapper .band-erst { padding: 30px 0; border-top: 0; }

/* ==========================================================================
   3. Cookie-Leiste — Top, ein Button, localStorage
   ========================================================================== */

body .wrapper .consent { display: none; background-color: #2b2013; color: #f5f0e6; border-bottom: 1px solid #43331f; }
body .wrapper .consent.consent-sichtbar { display: block; }
body .wrapper .consent .consent-inner { max-width: 1180px; margin: 0 auto; padding: 12px 15px; display: flex; flex-direction: column; gap: 10px; }
body .wrapper .consent .consent-text { font-size: 13px; line-height: 19px; margin: 0; }
body .wrapper .consent .consent-text a { color: #f5f0e6; }
body .wrapper .consent .consent-text a:hover { color: #e6c9a8; }
body .wrapper .consent .consent-aktion { flex: 0 0 auto; }
body .wrapper .consent .consent-ok { display: inline-block; cursor: pointer; font-family: "Archivo", Arial, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 8px 18px; border: 1px solid #f5f0e6; color: #f5f0e6; background-color: transparent; }
body .wrapper .consent .consent-ok:hover { background-color: #f5f0e6; color: #2b2013; }

/* ==========================================================================
   4. Kopfleiste
   ========================================================================== */

body .wrapper .kopf { background-color: #f5f0e6; border-bottom: 2px solid #43331f; }
body .wrapper .kopf .kopf-inner { max-width: 1180px; margin: 0 auto; padding: 15px; display: flex; align-items: center; justify-content: space-between; gap: 15px; }
body .wrapper .kopf .marke { font-family: "Newsreader", Georgia, serif; font-size: 21px; line-height: 25px; font-weight: 700; color: #43331f; text-decoration: none; letter-spacing: -0.01em; }
body .wrapper .kopf .marke:hover { color: #9b2c1e; }
body .wrapper .kopf .marke-zusatz { display: block; font-family: "Archivo", Arial, sans-serif; font-size: 11px; line-height: 15px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #7a5c2e; }
body .wrapper .kopf .nav-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #43331f; border: 1px solid #43331f; padding: 8px 12px; }
body .wrapper .kopf .nav-toggle:hover { background-color: #43331f; color: #f5f0e6; }
body .wrapper .kopf .nav-toggle svg { width: 14px; height: 14px; }
body .wrapper .hauptnav { display: none; border-top: 1px solid #c9bca4; background-color: #f5f0e6; }
body .wrapper .hauptnav.nav-offen { display: block; }
body .wrapper .hauptnav ul { list-style: none; margin: 0; padding: 0; max-width: 1180px; margin-left: auto; margin-right: auto; }
body .wrapper .hauptnav li { margin: 0; border-bottom: 1px solid #c9bca4; }
body .wrapper .hauptnav a { display: block; padding: 12px 15px; font-size: 14px; font-weight: 500; color: #43331f; text-decoration: none; }
body .wrapper .hauptnav a:hover { background-color: #fbf8f1; color: #9b2c1e; }
body .wrapper .hauptnav .current-menu-item > a { color: #9b2c1e; font-weight: 600; }

/* ==========================================================================
   5. Seitenkopf, Meta, Byline
   ========================================================================== */

body .wrapper .seitenkopf { padding: 30px 0; }
body .wrapper .seitenkopf .kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #7a5c2e; margin: 0 0 10px 0; }
body .wrapper .seitenkopf .lead { font-size: 19px; line-height: 27px; max-width: 640px; margin: 0 0 15px 0; }
body .wrapper .stand { font-family: "JetBrains Mono", "Courier New", monospace; font-size: 12px; line-height: 17px; color: #7a5c2e; margin: 0; }

body .wrapper .byline { display: flex; align-items: center; gap: 12px; border-top: 1px solid #c9bca4; border-bottom: 1px solid #c9bca4; padding: 12px 0; margin: 0 0 30px 0; }
body .wrapper .byline .byline-bild { width: 44px; height: 44px; flex: 0 0 44px; border: 1px solid #c9bca4; background-color: #fbf8f1; }
body .wrapper .byline .byline-bild img { width: 100%; height: 100%; object-fit: cover; }
/* Ohne hinterlegtes Portraet faellt der Rahmen weg, statt als leeres Kaestchen zu stehen.
   Der flex-gap entfaellt mit display:none automatisch mit. */
body .wrapper .byline .byline-bild:empty { display: none; }
body .wrapper .byline .byline-daten { font-size: 13px; line-height: 18px; }
body .wrapper .byline .byline-name { font-weight: 600; color: #43331f; }
body .wrapper .byline .byline-ressort { color: #7a5c2e; }
body .wrapper .byline .byline-datum { font-family: "JetBrains Mono", monospace; font-size: 12px; color: #7a5c2e; }

/* ==========================================================================
   6. Registerkomponenten
   ========================================================================== */

body .wrapper .registerkopf { border: 2px solid #43331f; background-color: #fbf8f1; padding: 0; margin: 0 0 30px 0; }
body .wrapper .registerkopf .registerkopf-titel { font-family: "Archivo", Arial, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #f5f0e6; background-color: #43331f; padding: 7px 12px; margin: 0; }
body .wrapper .registerkopf dl { display: grid; grid-template-columns: 1fr; margin: 0; }
body .wrapper .registerkopf dt { font-family: "Archivo", Arial, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #7a5c2e; padding: 10px 12px 0 12px; }
body .wrapper .registerkopf dd { font-family: "JetBrains Mono", "Courier New", monospace; font-size: 14px; line-height: 19px; color: #43331f; margin: 0; padding: 2px 12px 10px 12px; border-bottom: 1px solid #c9bca4; }
body .wrapper .registerkopf dd:last-of-type { border-bottom: 0; }

body .wrapper .badge { display: inline-block; font-family: "Archivo", Arial, sans-serif; font-size: 11px; line-height: 15px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border: 1px solid #7a5c2e; color: #7a5c2e; background-color: transparent; }
body .wrapper .badge.badge-gelistet { border-color: #2f5d3a; color: #2f5d3a; }
body .wrapper .badge.badge-nicht-gelistet { border-color: #9b2c1e; color: #9b2c1e; }

body .wrapper .tabelle-rahmen { width: 100%; overflow-x: auto; margin: 0 0 15px 0; }
body .wrapper .registertabelle { width: 100%; min-width: 640px; border-collapse: collapse; font-family: "JetBrains Mono", "Courier New", monospace; font-size: 14px; line-height: 19px; font-variant-numeric: tabular-nums; }
body .wrapper .registertabelle caption { text-align: left; font-family: "Archivo", Arial, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #7a5c2e; padding: 0 0 8px 0; }
/* Kopfzellen duerfen umbrechen. `white-space: nowrap` zwang die sechsspaltige Registertabelle
   auf rund 1.004px Mindestbreite; auf /anbieter/ und /whitelist/ sitzt sie in der 900px-Textspalte
   und scrollte deshalb ab 1024px Viewport um 104px seitwaerts (gemessen 13.08.2026). Da diese
   Zeilen in einem CTA enden, ist das ein Verstoss gegen den Wide-Table-Standard — und der
   Phase-2-Beleg deckte ihn nicht ab, weil damals nur Startseite, Datenblatt und Anleitung
   gemessen wurden, nicht die beiden Seiten mit dem vollen 20-Zeilen-Register.
   Der CTA-Zelle bleibt nowrap (siehe unten): "Zu AdmiralBet" darf nicht brechen. */
/* Tabellenkopf als Flaeche statt Unterstrich — gleiches Muster wie .registerkopf-titel und
   .fakten-titel. Damit hat jede Tabelle auf der Seite eine sichtbare Oberkante. */
body .wrapper .registertabelle th { text-align: left; font-family: "Archivo", Arial, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #f5f0e6; background-color: #43331f; border-bottom: 0; padding: 8px 10px; white-space: normal; }
body .wrapper .registertabelle td { border-bottom: 1px solid #c9bca4; padding: 10px; vertical-align: top; }
body .wrapper .registertabelle tbody tr:nth-child(even) { background-color: #fbf8f1; }
body .wrapper .registertabelle .zelle-marke { font-family: "Archivo", Arial, sans-serif; font-weight: 600; font-size: 15px; }
body .wrapper .registertabelle .zelle-cta { white-space: nowrap; }
body .wrapper .cta.cta-klein { font-size: 12px; padding: 8px 14px; }
/* Alle Register-CTAs gleich breit (Gregor, 17.08.2026). Vorher richtete sich die Breite nach
   der Textlaenge, "Zu SlotMagie" war sichtbar schmaler als "Zu JackpotPiraten" — in einer
   Registerspalte liest sich das als Rangunterschied, den es nicht gibt.
   Die Spaltenbreite steht durch nowrap ohnehin am laengsten Markennamen; width:100% fuellt
   nur die vorhandene Zelle aus und verbreitert die Tabelle deshalb NICHT (gemessen, s.u.). */
body .wrapper .registertabelle .zelle-cta .cta { display: block; width: 100%; box-sizing: border-box; text-align: center; }
body .wrapper .tabelle-hinweis { font-size: 12px; line-height: 17px; color: #7a5c2e; margin: 0 0 30px 0; }

/* Jede Zeile ist ein Registereintrag (Record) und wird zum Block gestapelt.
   Kein seitliches Scrollen. Kopfzeile bleibt fuer Screenreader in der Seite.
   Breakpoint liegt bei 920px, NICHT beim Layout-Breakpoint 768: die Zeile endet in
   einem CTA und darf deshalb bei keiner Breite seitwaerts scrollen.
   Von 900 auf 920 gezogen am 13.08.2026: bei genau 900px Viewport blieb die Startseiten-Box
   um 3px scrollbar — die Media Query griff dort nicht mehr, die echte Tabelle brauchte aber
   noch 3px mehr als die Spalte hergab. Drei Pixel sind kein Rundungsfehler, wenn die Regel
   "keine CTA-Zeile scrollt seitwaerts" binaer gilt. */
@media (max-width: 919px) {
  body .wrapper .tabelle-rahmen { overflow-x: visible; }
  body .wrapper .registertabelle { min-width: 0; }
  body .wrapper .registertabelle,
  body .wrapper .registertabelle tbody,
  body .wrapper .registertabelle tr,
  body .wrapper .registertabelle td { display: block; }
  body .wrapper .registertabelle thead { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  body .wrapper .registertabelle thead th { white-space: normal; max-width: 1px; padding: 0; }
  body .wrapper .registertabelle caption { display: block; width: 100%; }
  body .wrapper .registertabelle tbody tr,
  body .wrapper .registertabelle tbody tr:nth-child(even) { border: 1px solid #43331f; background-color: #fbf8f1; margin: 0 0 12px 0; }
  body .wrapper .registertabelle td { border-bottom: 1px solid #c9bca4; padding: 9px 12px; }
  body .wrapper .registertabelle tr td:last-child { border-bottom: 0; }
  body .wrapper .registertabelle td[data-label]::before { content: attr(data-label); display: block; font-family: "Archivo", Arial, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #7a5c2e; margin: 0 0 3px 0; }
  body .wrapper .registertabelle .zelle-marke { background-color: #f0e9da; border-bottom-color: #43331f; }
  /* CTA schliesst den Block ab: volle Breite, ohne Feldbeschriftung (Button spricht fuer sich) */
  body .wrapper .registertabelle .zelle-cta { white-space: normal; padding: 12px; }
  body .wrapper .registertabelle td.zelle-cta[data-label]::before { display: none; }
  body .wrapper .registertabelle .zelle-cta .cta { display: block; text-align: center; }
  /* display:block oben schlaegt sonst das Default [hidden]{display:none} */
  body .wrapper .registertabelle [hidden] { display: none !important; }
}

/* Kopfzeile auf schmalen Geraeten. Gemessen am 12.08.2026: bei 320px sprengten
   Marke (21px Newsreader, rund 250px) und Menue-Schalter (87px) die Flex-Zeile
   um 59px — auf JEDER Seite, also ein Theme-Befund, kein Content-Befund. Der
   Phase-2-Beleg "39/39 sauber" traf diese Kombination nicht.
   overflow-wrap haelt den Fall auch unter 320px, die Groessen geben die Reserve. */
@media (max-width: 400px) {
  body .wrapper .kopf .kopf-inner { padding: 12px; gap: 10px; }
  body .wrapper .kopf .marke { font-size: 16px; line-height: 20px; min-width: 0; overflow-wrap: anywhere; }
  body .wrapper .kopf .marke-zusatz { font-size: 10px; letter-spacing: 0.04em; }
  body .wrapper .kopf .nav-toggle { font-size: 11px; padding: 6px 8px; gap: 6px; flex: 0 0 auto; }
}

body .wrapper .quelle { font-family: "JetBrains Mono", "Courier New", monospace; font-size: 12px; line-height: 17px; color: #7a5c2e; margin: 0 0 30px 0; padding-left: 10px; border-left: 1px solid #c9bca4; }
body .wrapper .quelle a { color: #7a5c2e; }
body .wrapper .quelle a:hover { color: #43331f; }

/* Fakten-Box sichtbar machen (Gregor, 17.08.2026: "Textwueste").
   Befund: die Box hob sich mit #fbf8f1 auf #f5f0e6 um 1,07:1 vom Seitenhintergrund ab — also
   gar nicht. Struktur war da (doc_fakten steht auf 20 von 37 Seiten), sie war nur unsichtbar.
   Kein neuer Look: uebernommen wird exakt das Muster, das .registerkopf schon traegt
   (2px Rahmen + dunkler Titelbalken) — das einzige Element, das auf der Seite heraussticht. */
body .wrapper .fakten { border: 2px solid #43331f; background-color: #fbf8f1; margin: 0 0 30px 0; }
body .wrapper .fakten .fakten-titel { font-family: "Archivo", Arial, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #f5f0e6; background-color: #43331f; border-bottom: 0; padding: 7px 12px; margin: 0; }
body .wrapper .fakten .fakten-inhalt { padding: 15px; font-size: 15px; line-height: 22px; }
body .wrapper .fakten .fakten-inhalt p:last-child, body .wrapper .fakten .fakten-inhalt ul:last-child { margin-bottom: 0; }

/* Kennzahlen-Kacheln (17.08.2026). Der einzige neue Baustein aus dem Textwuesten-Befund.
   Die Zahl traegt die Kachel, deshalb Mono in Rot und gross — das ist im Amtsblatt-Raster
   der staerkste erlaubte Akzent (kein Schatten, keine Rundung, kein Verlauf).
   Raster ohne Media Query: auto-fit haelt die Kacheln von 320px bis 1920px lesbar und
   kann nicht seitwaerts ausbrechen (minmax-Untergrenze 150px passt in 320px Viewport). */
body .wrapper .kennzahlen { border: 2px solid #43331f; background-color: #fbf8f1; margin: 0 0 30px 0; }
body .wrapper .kennzahlen .kennzahlen-titel { font-family: "Archivo", Arial, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #f5f0e6; background-color: #43331f; padding: 7px 12px; margin: 0; }
body .wrapper .kennzahlen .kennzahlen-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 0; }
body .wrapper .kennzahlen .kennzahl { padding: 14px 15px; border-right: 1px solid #c9bca4; border-bottom: 1px solid #c9bca4; }
body .wrapper .kennzahlen .kennzahl-wert { font-family: "JetBrains Mono", "Courier New", monospace; font-size: 26px; line-height: 32px; font-weight: 500; color: #9b2c1e; margin: 0; }
body .wrapper .kennzahlen .kennzahl-label { font-family: "Archivo", Arial, sans-serif; font-size: 12px; line-height: 17px; color: #43331f; margin: 3px 0 0 0; }

/* Inhaltsverzeichnis (17.08.2026). Bewusst KEIN Kasten mit Flaeche: es steht direkt unter
   dem Kurzantwort-Block, zwei gerahmte Bloecke uebereinander erschlagen den Einstieg.
   Linke Kante als Marker reicht, die Zahlen tragen die Struktur. */
/* Lesebreite, nicht Datenbreite: der Index besteht aus Textzeilen. Auf 900px gezogen stand
   die linke Kante 220px neben kurzen Links und der rechte Rand franste gegen Fliesstext (680)
   und Tabelle (1140) aus — drei verschiedene Kanten uebereinander (Sichtcheck 17.08.2026).
   Kacheln und Tabellen bleiben breit, die sind Daten und keine Zeilen. */
body .wrapper .seitenindex { border-left: 3px solid #43331f; padding: 0 0 0 15px; margin: 0 0 30px 0; max-width: 680px; }
body .wrapper .seitenindex .seitenindex-titel { font-family: "Archivo", Arial, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #7a5c2e; margin: 0 0 8px 0; }
body .wrapper .seitenindex .seitenindex-liste { list-style: none; margin: 0; padding: 0; counter-reset: seitenindex; }
body .wrapper .seitenindex .seitenindex-liste li { counter-increment: seitenindex; margin: 0 0 5px 0; padding-left: 28px; position: relative; font-size: 15px; line-height: 21px; }
body .wrapper .seitenindex .seitenindex-liste li::before { content: counter(seitenindex, decimal-leading-zero); position: absolute; left: 0; top: 1px; font-family: "JetBrains Mono", "Courier New", monospace; font-size: 12px; color: #9b2c1e; }
body .wrapper .seitenindex .seitenindex-liste a { color: #43331f; text-decoration: none; border-bottom: 1px solid #c9bca4; }
body .wrapper .seitenindex .seitenindex-liste a:hover { color: #9b2c1e; border-bottom-color: #9b2c1e; }

/* Merksatz: ein Fakt, der aus dem Fliesstext heraustreten soll. Rote Kante links, damit er
   sich vom Inhaltsverzeichnis (braune Kante) unterscheidet, ohne ein weiterer Kasten zu sein. */
body .wrapper .merksatz { border-left: 3px solid #9b2c1e; background-color: #fbf8f1; padding: 14px 18px; margin: 0 0 30px 0; }
body .wrapper .merksatz .merksatz-titel { font-family: "Archivo", Arial, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #9b2c1e; margin: 0 0 5px 0; }
body .wrapper .merksatz .merksatz-text { font-size: 17px; line-height: 26px; color: #43331f; margin: 0; }

body .wrapper .schritte { list-style: none; margin: 0 0 30px 0; padding: 0; border-top: 1px solid #c9bca4; }
body .wrapper .schritte .schritt { display: flex; gap: 15px; border-bottom: 1px solid #c9bca4; padding: 15px 0; margin: 0; }
body .wrapper .schritte .schritt-nr { font-family: "JetBrains Mono", "Courier New", monospace; font-size: 14px; font-weight: 500; color: #9b2c1e; flex: 0 0 34px; border: 1px solid #c9bca4; height: 34px; display: flex; align-items: center; justify-content: center; }
body .wrapper .schritte .schritt-text { flex: 1 1 auto; font-size: 16px; line-height: 23px; }
body .wrapper .schritte .schritt-titel { display: block; font-weight: 600; margin-bottom: 4px; }

/* CTA gefuellt statt Outline (Gregor, 17.08.2026: "auffaelliger"). Der Umriss-Button ging im
   Amtsblatt-Beige unter. Groesse bewusst unveraendert — Schriftgroesse anzufassen haette die
   Registerspalte verbreitert, und genau daran scrollte die Tabelle am 13.08. um 104px.
   Kontrast gemessen: #f5f0e6 auf #9b2c1e = 6,67:1, Hover auf #7a2317 = 8,89:1 (beide AA). */
body .wrapper .cta { display: inline-block; font-family: "Archivo", Arial, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; color: #f5f0e6; background-color: #9b2c1e; border: 1px solid #9b2c1e; padding: 11px 20px; }
body .wrapper .cta:hover { background-color: #7a2317; border-color: #7a2317; color: #f5f0e6; }
body .wrapper .cta-zeile { margin: 0 0 15px 0; }
body .wrapper .cta-hinweis { font-size: 12px; line-height: 17px; color: #7a5c2e; margin: 0 0 30px 0; }

body .wrapper .hublinks { list-style: none; margin: 0; padding: 0; border-top: 1px solid #c9bca4; }
body .wrapper .hublinks li { margin: 0; border-bottom: 1px solid #c9bca4; }
body .wrapper .hublinks a { display: block; padding: 14px 0; text-decoration: none; color: #43331f; }
body .wrapper .hublinks a:hover { background-color: #fbf8f1; color: #9b2c1e; }
body .wrapper .hublinks .hublink-titel { display: block; font-family: "Newsreader", Georgia, serif; font-size: 19px; line-height: 25px; font-weight: 600; }
body .wrapper .hublinks .hublink-text { display: block; font-size: 14px; line-height: 20px; color: #7a5c2e; }

/* ==========================================================================
   7. Inhalt, Beitragslisten, 404
   ========================================================================== */

body .wrapper .inhalt { padding: 0 0 30px 0; }
body .wrapper .inhalt table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 0 0 30px 0; }
body .wrapper .inhalt table th { text-align: left; border-bottom: 2px solid #43331f; padding: 8px 10px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
body .wrapper .inhalt table td { border-bottom: 1px solid #c9bca4; padding: 10px; }

body .wrapper .liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid #c9bca4; }
body .wrapper .liste .liste-eintrag { border-bottom: 1px solid #c9bca4; padding: 20px 0; margin: 0; }
body .wrapper .liste .liste-titel { font-family: "Newsreader", Georgia, serif; font-size: 21px; line-height: 27px; font-weight: 600; margin: 0 0 6px 0; }
body .wrapper .liste .liste-titel a { text-decoration: none; color: #43331f; }
body .wrapper .liste .liste-titel a:hover { color: #9b2c1e; }
body .wrapper .liste .liste-meta { font-family: "JetBrains Mono", monospace; font-size: 12px; color: #7a5c2e; margin: 0 0 8px 0; }

body .wrapper .blaettern { display: flex; justify-content: space-between; gap: 15px; padding: 20px 0; font-size: 14px; }

/* ==========================================================================
   8. Footer
   ========================================================================== */

body .wrapper .fuss { background-color: #2b2013; color: #f5f0e6; margin-top: 60px; }
body .wrapper .fuss .fuss-inner { max-width: 1180px; margin: 0 auto; padding: 30px 15px; }
body .wrapper .fuss .fuss-warn { display: flex; align-items: flex-start; gap: 12px; border: 1px solid #7a5c2e; padding: 12px; margin: 0 0 30px 0; }
body .wrapper .fuss .fuss-warn svg { width: 26px; height: 26px; flex: 0 0 26px; color: #f5f0e6; }
body .wrapper .fuss .fuss-warn-text { font-size: 13px; line-height: 19px; margin: 0; }
body .wrapper .fuss .fuss-warn-text a { color: #f5f0e6; }
body .wrapper .fuss h2 { color: #f5f0e6; font-size: 15px; line-height: 21px; font-family: "Archivo", Arial, sans-serif; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 12px 0; }
body .wrapper .fuss ul { list-style: none; margin: 0 0 30px 0; padding: 0; }
body .wrapper .fuss li { margin: 0 0 8px 0; font-size: 14px; line-height: 20px; }
body .wrapper .fuss a { color: #f5f0e6; text-decoration: none; border-bottom: 1px solid #7a5c2e; }
body .wrapper .fuss a:hover { border-bottom-color: #f5f0e6; color: #f5f0e6; }
body .wrapper .fuss .fuss-quelle { font-family: "JetBrains Mono", monospace; font-size: 12px; line-height: 18px; color: #e0d3bd; border-top: 1px solid #7a5c2e; padding-top: 15px; margin: 0; }

/* ==========================================================================
   9. Breakpoints
   ========================================================================== */

@media (min-width: 768px) {
  body .wrapper .breite { padding: 0 20px; }
  body .wrapper h1 { font-size: 38px; line-height: 43px; }
  body .wrapper h2 { font-size: 27px; line-height: 33px; }
  body .wrapper h3 { font-size: 21px; line-height: 27px; }
  body .wrapper .kopf .kopf-inner { padding: 18px 20px; }
  body .wrapper .kopf .nav-toggle { display: none; }
  body .wrapper .hauptnav { display: block; }
  body .wrapper .hauptnav ul { display: flex; flex-wrap: wrap; padding: 0 20px; }
  body .wrapper .hauptnav li { border-bottom: 0; border-right: 1px solid #c9bca4; }
  body .wrapper .hauptnav li:last-child { border-right: 0; }
  body .wrapper .hauptnav a { padding: 11px 15px; }
  /* War `a:first-child` und traf damit JEDEN Menuelink (jedes a ist erstes Kind seines li):
     alle Punkte hatten links 0 und rechts 15px, der Text klebte am Trennstrich und die
     Luecke sass auf der falschen Seite. Gemeint war immer nur der erste Eintrag, damit er
     buendig zum Raster startet. Gefunden 17.08.2026 am Livestand (Gregor: "sieht komisch aus"). */
  body .wrapper .hauptnav li:first-child > a { padding-left: 0; }
  body .wrapper .consent .consent-inner { flex-direction: row; align-items: center; justify-content: space-between; padding: 12px 20px; }
  body .wrapper .consent .consent-aktion { align-self: center; }
  body .wrapper .registerkopf dl { grid-template-columns: 200px 1fr; }
  body .wrapper .registerkopf dt { padding: 10px 12px; border-bottom: 1px solid #c9bca4; border-right: 1px solid #c9bca4; }
  body .wrapper .registerkopf dd { padding: 10px 12px; }
  body .wrapper .registerkopf dt:last-of-type { border-bottom: 0; }
  body .wrapper .band { padding: 45px 0; }
  body .wrapper .seitenkopf { padding: 45px 0; }
  body .wrapper .fuss .fuss-inner { padding: 45px 20px; display: flex; flex-wrap: wrap; gap: 45px; }
  body .wrapper .fuss .fuss-warn { flex: 1 1 100%; margin-bottom: 0; }
  body .wrapper .fuss .fuss-spalte { flex: 1 1 200px; }
  body .wrapper .fuss .fuss-quelle { flex: 1 1 100%; }
}

@media (min-width: 1024px) {
  body .wrapper h1 { font-size: 42px; line-height: 48px; }
  body .wrapper .seitenkopf .lead { font-size: 20px; line-height: 29px; }
  body .wrapper .inhalt-raster { display: flex; gap: 45px; align-items: flex-start; }
  body .wrapper .inhalt-raster .inhalt-haupt { flex: 1 1 auto; min-width: 0; }
  body .wrapper .inhalt-raster .inhalt-seite { flex: 0 0 300px; }

  /* Kurzantwort NEBEN den Einstieg, nicht darunter — nur auf breiten Schirmen.
     Grund (gemessen 13.08.2026): mobil hat das Vorziehen der Kurzantwort die Antwort in den
     Fold geholt (654px, vorher keine), auf dem Desktop aber die Registertabelle von 734px auf
     974px geschoben, also unter die 900er-Kante. Auf einer Register-Domain ist die Tabelle das
     Produkt — dieser Tausch waere ein schlechter gewesen. Zweispaltig kostet der Block auf dem
     Desktop keine Bauhoehe: Antwort UND Tabelle stehen ueber der Falzkante.
     Mobil bleibt es bewusst einspaltig gestapelt (dort gibt es keine ungenutzte Breite). */
  body .wrapper .seitenkopf .kopf-raster { display: flex; gap: 45px; align-items: flex-start; }
  body .wrapper .seitenkopf .kopf-raster .kopf-text { flex: 1 1 auto; min-width: 0; }
  body .wrapper .seitenkopf .kopf-raster .kurzantwort-kopf { flex: 0 0 620px; margin: 0; }
  body .wrapper .seitenkopf .kopf-raster .kurzantwort-kopf .fakten { margin-top: 0; }
  /* Stichpunkte zweispaltig: bei 620px Breite halbiert das die Kastenhoehe (gemessen 422px ->
     rund 230px) und holt die Registertabelle zurueck ueber die 900er-Kante. `break-inside`
     verhindert, dass ein Stichpunkt mitten im Satz umbricht. */
  body .wrapper .seitenkopf .kopf-raster .kurzantwort-kopf .fakten-inhalt ul { column-count: 2; column-gap: 30px; }
  body .wrapper .seitenkopf .kopf-raster .kurzantwort-kopf .fakten-inhalt li { break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  body .wrapper a, body .wrapper .cta, body .wrapper .consent .consent-ok { transition: none; }
}

/* --- Pflichttexte der DE/GGL-Compliance (Audit 13.08.2026) ---------------------
   Vorgeschriebene Exakttexte: IST2021-Disclosure im Kopf, Affiliate-Disclosure
   und RG-Botschaft im Fuss, RG-Botschaft unter jedem Brand-Listing. Bewusst
   zurueckgenommen gesetzt (klein, gedeckt), aber ohne display:none und ohne
   Farbe unter dem Kontrast-Minimum — ein versteckter Pflichttext gilt als fehlend. */
/* Werbehinweis: aufklappbare Leiste (_fix-spec.md T2). Zugeklappt kostet der Pflichttext rund
   40px statt 213px — gemessen bei 375px, siehe docs/phase4a-hook-atf.md. Der Text bleibt im DOM. */
body .wrapper .pflicht-hinweis { background-color: #f0e9db; border-bottom: 1px solid #d6c8ad; }
body .wrapper .pflicht-hinweis .pflicht-hinweis-label {
  max-width: 1180px; margin: 0 auto; padding: 9px 15px; cursor: pointer;
  font-family: "JetBrains Mono", monospace; font-size: 11px; line-height: 16px;
  letter-spacing: 0.08em; text-transform: uppercase; color: #5c4a2f; list-style: none;
}
body .wrapper .pflicht-hinweis .pflicht-hinweis-label::-webkit-details-marker { display: none; }
body .wrapper .pflicht-hinweis .pflicht-hinweis-label::after {
  content: "+"; margin-left: 8px; font-weight: 700;
}
body .wrapper .pflicht-hinweis[open] .pflicht-hinweis-label::after { content: "\2212"; }
body .wrapper .pflicht-hinweis .pflicht-hinweis-label:focus-visible { outline: 2px solid #8c1c13; outline-offset: -2px; }
body .wrapper .pflicht-hinweis .pflicht-hinweis-inner { max-width: 1180px; margin: 0 auto; padding: 0 15px 10px 15px; }
body .wrapper .pflicht-hinweis p { font-size: 11px; line-height: 16px; color: #5c4a2f; margin: 0; hyphens: auto; }
body .wrapper .fuss .fuss-rg-pflicht { font-size: 13px; line-height: 19px; margin: 10px 0 0 0; font-weight: 600; }
body .wrapper .fuss .fuss-rg-pflicht a { color: #f5f0e6; overflow-wrap: anywhere; }
body .wrapper .fuss .fuss-behoerden { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; line-height: 19px; margin: 12px 0 0 0; }
/* Die Behoerdennamen sind lang und duerfen bei 320px nicht die Zeile sprengen (gemessen 13.08.2026: +94px). */
body .wrapper .fuss .fuss-warn-inhalt { flex: 1 1 auto; min-width: 0; }
body .wrapper .fuss .fuss-behoerden a { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) {
  body .wrapper .fuss .fuss-behoerden { display: block; }
  body .wrapper .fuss .fuss-behoerden a { display: block; margin: 0 0 8px 0; }
}
body .wrapper .fuss .fuss-disclosure { flex: 1 1 100%; border: 1px solid #7a5c2e; padding: 12px; margin: 0 0 30px 0; }
body .wrapper .fuss .fuss-disclosure p { font-family: "JetBrains Mono", monospace; font-size: 11px; line-height: 17px; color: #e0d3bd; margin: 0; hyphens: auto; }
body .wrapper .cta-rg, body .wrapper .tabelle-rg { font-size: 12px; line-height: 18px; color: #43331f; margin: 8px 0 0 0; font-weight: 600; }
body .wrapper .cta-rg a, body .wrapper .tabelle-rg a { color: #43331f; overflow-wrap: anywhere; }
body .wrapper .registertabelle .cta-rg { font-weight: 400; }

@media print {
  body .wrapper .pflicht-hinweis { display: none; }
}

@media print {
  body .wrapper .consent, body .wrapper .hauptnav, body .wrapper .kopf .nav-toggle { display: none; }
  body { background-color: #ffffff; }
}

/* Sprungliste ueber langen Markentabellen (>=10 Zeilen), UX-Review 13.08.2026 P0-Gap 1.
   Chips statt Liste: bei 375px passen vier pro Zeile, damit steht das ganze Register
   in etwa 150px statt in 10,5 Bildschirmen Suchstrecke. */
body .wrapper .register-sprungliste { border: 1px solid #d6c8ad; background-color: #f7f2e7; padding: 12px 14px; margin: 0 0 18px 0; }
body .wrapper .register-sprungliste p { font-family: "JetBrains Mono", monospace; font-size: 11px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; color: #5c4a2f; margin: 0 0 10px 0; }
body .wrapper .register-sprungliste ul { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
body .wrapper .register-sprungliste li { margin: 0; }
body .wrapper .register-sprungliste a { display: block; border: 1px solid #b9a67f; background-color: #fffdf8; padding: 7px 10px; font-size: 13px; line-height: 17px; color: #43331f; text-decoration: none; min-height: 32px; }
body .wrapper .register-sprungliste a:hover, body .wrapper .register-sprungliste a:focus-visible { background-color: #43331f; border-color: #43331f; color: #f5f0e6; }
/* Angesprungene Zeile markieren, sonst weiss man nach dem Sprung nicht, wo man gelandet ist. */
body .wrapper .registertabelle tr:target { outline: 2px solid #8c1c13; outline-offset: 2px; }
body .wrapper .register-weiter { margin: 14px 0 0 0; font-size: 15px; line-height: 22px; font-weight: 600; }