/* Tiles by day, Night by night (owner, 25 Oct 2026: "lets try completely different UI", then "3 for day and 2 for night … I love how it looks, do it").
   Loaded after core and the page CSS on every page. Day = the Tiles look on html[data-skin="tiles"]: a soft grey canvas, every block a
   rounded white card, a floating header bar, a red quick-answer card. Night = html[data-theme="dark"], set before the first paint by
   the head script in template.cjs (the visitor's stored choice, else the device setting) and switched by .theme-switch (core.js):
   the Night version's colours, red glows and neon line on the same Tiles shapes, so switching never moves anything.
   Every hardcoded light colour in core, light, home and payout.css has a night value below (contrast audit: every text on all
   16 pages, desktop and phone, 0 failures). Art, logo, icons and text are unchanged. */

/* Day: Tiles */
html[data-skin="tiles"]{--canvas:#eceff3;--card:#fff;--soft:#f5f6f8;--line:#e6e9ed;--radius:28px;--lift:0 1px 2px #1d282e0d,0 14px 34px -24px #1d282e59}
html[data-skin="tiles"] body{background:var(--canvas)}
html[data-skin="tiles"] :is(h1,h2){font-weight:800}

/* Floating header bar */
html[data-skin="tiles"] .site-header{max-width:1224px;margin:16px auto 0;padding:16px 24px 10px;background:var(--card);border:0;border-radius:24px;box-shadow:var(--lift)}
html[data-skin="tiles"] .desktop-menu{margin-top:12px;padding-top:8px;border-top:1px solid var(--line)}
html[data-skin="tiles"] .menu-item{position:relative;isolation:isolate;padding:4px 10px;border-radius:14px}
html[data-skin="tiles"] .menu-item.is-current{color:var(--red);font-weight:700;background:#fdecea}
@media(hover:hover) and (pointer:fine){html[data-skin="tiles"] .menu-item:not(.is-current):hover{background:var(--soft)}}

/* The header slides away while reading down and comes back on any scroll up, on phone and desktop (owner, 25 Oct 2026:
   "shouldn't the top menu also stick on mobile … and also on desktop?"). core.js sets .head-hidden or .head-pinned on <html>
   and --hh (the header height). While it is pinned, the Laufzettel rail (desktop) and bar (phone) sit below it. In-page jumps
   hide it at once (.head-instant, no slide), so their target still lands right under the Laufzettel bar. */
html[data-skin="tiles"] .site-header{position:sticky;top:10px;z-index:30;transition:transform .32s var(--ease-out)}
html.head-hidden .site-header{transform:translateY(calc(-100% - 30px))}
html.head-hidden .site-header:focus-within{transform:none}
html[data-skin="tiles"] :is(.routing-slip,.phone-toc){transition:top .32s var(--ease-out)}
html.head-pinned[data-skin="tiles"] .routing-slip{top:calc(var(--hh) + 26px)}
html.head-pinned .phone-toc{top:calc(var(--hh) + 12px)}
html.head-pinned .lz-chart{max-height:calc(100dvh - var(--lh,64px) - var(--hh) - 12px)}
html.head-instant :is(.site-header,.routing-slip,.phone-toc){transition:none}
@media(prefers-reduced-motion:reduce){html[data-skin="tiles"] :is(.site-header,.routing-slip,.phone-toc){transition:none}}

/* Hero as one big card, quick answer as a red card */
html[data-skin="tiles"] main{max-width:1224px;padding:0}
html[data-skin="tiles"] .hero{margin-top:16px;padding:44px 48px 0;background:var(--card);border-radius:var(--radius);box-shadow:var(--lift)}
html[data-skin="tiles"] .hero h1{letter-spacing:-2.4px}
html[data-skin="tiles"] .eyebrow>span{border-radius:999px;padding:5px 10px}
html[data-skin="tiles"] .quick-answer{background:linear-gradient(135deg,#d03a3d,#b9292d);border-radius:22px;margin-bottom:44px;box-shadow:0 20px 40px -26px #9e1f2499}
html[data-skin="tiles"] .quick-label{color:#fff}
html[data-skin="tiles"] .quick-answer blockquote{color:#fff}
html[data-skin="tiles"] .quick-answer a{color:#fff}

/* Hub grid, Laufzettel, sections: all cards */
html[data-skin="tiles"] .hub-grid{margin:16px 0 0;gap:16px}
html[data-skin="tiles"] .hub-card{border:0;border-radius:24px;box-shadow:var(--lift)}
html[data-skin="tiles"] .hub-card::before{left:26px;right:auto;top:0;width:44px;height:5px;border-radius:0 0 6px 6px}
html[data-skin="tiles"] .hc-facts{background:var(--soft);border-radius:16px}
html[data-skin="tiles"] .hub-note{background:var(--card);border:0;border-radius:18px;box-shadow:var(--lift)}
html[data-skin="tiles"] .reading-layout{margin-top:16px;gap:16px}
html[data-skin="tiles"] .routing-slip{top:16px;background:var(--card);border:0;border-radius:24px;box-shadow:var(--lift)}
html[data-skin="tiles"] .routing-slip a{border-radius:12px}
html[data-skin="tiles"] .section{margin-bottom:16px;padding:40px 44px;background:var(--card);border-radius:var(--radius);box-shadow:var(--lift)}
/* Desktop only: on phones core.css keeps the gap that clears the sticky Laufzettel bar. */
@media(min-width:701px){html[data-skin="tiles"] .section{scroll-margin-top:16px}}
html[data-skin="tiles"] .section h2{letter-spacing:-1.4px}
html[data-skin="tiles"] .margin-note{background:var(--soft);border-left:0;border-radius:18px}
html[data-skin="tiles"] .source-callout{border-radius:18px}

/* Tables as rows of white pills on a soft panel */
html[data-skin="tiles"] .comparison-table{background:var(--soft);border:0;border-radius:22px;padding:6px}
html[data-skin="tiles"] .comparison-table table{border-collapse:separate;border-spacing:0 6px}
html[data-skin="tiles"] .comparison-table thead{background:none}
html[data-skin="tiles"] .comparison-table :is(td,th){border-bottom:0}
html[data-skin="tiles"] .comparison-table tbody :is(td,th){background:var(--card)}
html[data-skin="tiles"] .comparison-table tbody th{border-radius:16px 0 0 16px}
html[data-skin="tiles"] .comparison-table tbody td:last-child{border-radius:0 16px 16px 0}

/* Casino files: a soft folder with a white sheet inside */
html[data-skin="tiles"] .profile-file{border:0;border-radius:24px;background:var(--soft);box-shadow:none}
html[data-skin="tiles"] .profile-tab{background:none;border-bottom:0}
html[data-skin="tiles"] .profile-inner{margin:0 8px 8px;border-radius:18px}
html[data-skin="tiles"] .data-strip{border-radius:14px}
html[data-skin="tiles"] .casino-shot{border-radius:16px;overflow:hidden}

/* FAQ as separate rounded rows, help and footer as cards */
html[data-skin="tiles"] .faq-list details{background:var(--soft);border:0;border-radius:18px;padding:0 22px;margin-bottom:10px}
html[data-skin="tiles"] .rg-block{border-radius:var(--radius)}
html[data-skin="tiles"] .utility-dock{border:0;border-radius:20px;box-shadow:var(--lift)}
html[data-skin="tiles"] .site-footer{max-width:1224px;margin:16px auto 20px;padding:36px 44px 40px;background:var(--card);border:0;border-radius:var(--radius);box-shadow:var(--lift)}

/* The 404 is a card too: grey text straight on the grey canvas would be too faint. */
html[data-skin="tiles"] .not-found{max-width:none;margin-top:16px;padding:56px 48px 64px;background:var(--card);border-radius:var(--radius);box-shadow:var(--lift)}
html[data-skin="tiles"] .not-found>*{max-width:750px}
@media(max-width:700px){html[data-skin="tiles"] .not-found{margin-top:10px;padding:32px 18px 40px;border-radius:22px}}

@media(max-width:1260px){html[data-skin="tiles"] main{padding:0 18px}html[data-skin="tiles"] .site-header{margin:16px 18px 0}html[data-skin="tiles"] .site-footer{margin:16px 18px 20px}}
@media(max-width:700px){
 html[data-skin="tiles"] main{padding:0 10px}
 html[data-skin="tiles"] .phone-toc{--l:10px;--r:10px}
 html[data-skin="tiles"] .site-header{margin:10px 10px 0;padding:14px 14px 8px;border-radius:20px}
 html[data-skin="tiles"] .menu-item{padding:4px 2px;border-radius:12px}
 html[data-skin="tiles"] .hero{margin-top:10px;padding:24px 18px 0;border-radius:22px}
 html[data-skin="tiles"] .quick-answer{border-radius:18px;margin-bottom:24px}
 html[data-skin="tiles"] .hub-grid{margin-top:10px;gap:10px}
 html[data-skin="tiles"] .reading-layout{margin-top:10px}
 html[data-skin="tiles"] .section{padding:26px 18px;margin-bottom:10px;border-radius:22px}
 html[data-skin="tiles"] .comparison-table{padding:4px}
 html[data-skin="tiles"] .comparison-table tbody tr{background:var(--card);border-radius:16px;margin-bottom:6px;border-bottom:0}
 html[data-skin="tiles"] .comparison-table tbody :is(td,th){background:none;border-radius:0}
 html[data-skin="tiles"] .profile-inner{margin:0 6px 6px}
 html[data-skin="tiles"] .faq-list details{padding:0 16px}
 html[data-skin="tiles"] .site-footer{margin:10px 10px 14px;padding:26px 20px calc(90px + env(safe-area-inset-bottom));border-radius:22px}
}

/* Day/night switch in the header (both themes). Without JavaScript it can't work and the head script never sets
   data-theme, so it stays hidden. */
html:not([data-theme]) .theme-switch{display:none}
.theme-switch{position:relative;flex:none;width:58px;height:32px;padding:0;border:1px solid var(--line);border-radius:999px;background:var(--soft,#f4f5f8);cursor:pointer;-webkit-tap-highlight-color:transparent}
.theme-switch::before{content:"";position:absolute;inset:-7px -4px}
.ts-hint{position:absolute;top:8px;width:14px;height:14px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ts-hint-sun{left:8px}.ts-hint-moon{right:8px}
.ts-knob{position:absolute;top:3px;left:3px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #1d282e33,0 2px 6px #1d282e1f;transition:transform .24s var(--ease-out),background-color .24s}
.ts-knob svg{grid-area:1/1;width:15px;height:15px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:opacity .16s,transform .24s var(--ease-out)}
.ts-sun{stroke:#c52f32}
.ts-moon{stroke:#ffcf8a;fill:#ffcf8a;opacity:0;transform:rotate(-50deg) scale(.6)}
.theme-switch:active .ts-knob{scale:.92}
@media(hover:hover) and (pointer:fine){.theme-switch:hover .ts-knob{box-shadow:0 1px 2px #1d282e40,0 3px 10px #1d282e33}}
html[data-theme="dark"] .ts-knob{transform:translateX(26px);background:#2a3940;box-shadow:0 0 0 1px #ffffff14,0 2px 8px #000}
html[data-theme="dark"] .ts-sun{opacity:0;transform:rotate(50deg) scale(.6)}
html[data-theme="dark"] .ts-moon{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.ts-knob,.ts-knob svg{transition:none}}

/* Night tokens: --red is the bright red for text on dark, --red-deep the fill behind white text (5:1) */
html[data-theme="dark"]{color-scheme:dark;--bg:#0b1114;--paper:#131b1f;--accent:#1a242a;--canvas:#0b1114;--card:#131b1f;--soft:#1a242a;--sunk:#0f161a;--hover:#222e35;--line:#26343b;--edge:#3a4a52;--ink:#e9eef0;--text2:#c3ced3;--muted:#9aa8ae;--red:#ff6b70;--red-deep:#d12f36;--link:#ff8a90;--red-tint:#2a1416;--lift:0 0 0 1px #ffffff0d,0 20px 40px -26px #000}
html[data-theme="dark"] body{background:var(--canvas);color:var(--ink)}
html[data-theme="dark"] :is(a,button,input,summary):focus-visible{outline-color:var(--link)}
html[data-theme="dark"] .skip-link{background:var(--red-deep)}
html[data-theme="dark"] .age-mark{border-color:var(--edge)}

/* Header card: red glow behind the logo, neon line above the menu, current category ringed in red */
html[data-theme="dark"] .site-header{background:radial-gradient(420px 150px at 8% 22%,#c8102e3d,#0000 72%),linear-gradient(180deg,#172127,#11181c)}
/* The wordmark is dark ink and red; at night it turns all white (header and footer), the same as the white logo file. */
html[data-theme="dark"] .brand-wordmark{filter:brightness(0) invert(1)}
html[data-theme="dark"] .header-tools{color:var(--muted)}
html[data-theme="dark"] .header-tools b{color:#fff}
html[data-theme="dark"] .at-flag{box-shadow:0 0 0 1px #ffffff40}
html[data-theme="dark"] .desktop-menu{position:relative;border-top:0}
html[data-theme="dark"] .desktop-menu::before{content:"";position:absolute;top:-1px;left:0;right:0;height:2px;background:linear-gradient(90deg,#0000,#e0353a 18%,#ff5a5f 50%,#e0353a 82%,#0000);box-shadow:0 0 14px 1px #e0353a73;pointer-events:none}
html[data-theme="dark"] .menu-item{color:#dfe5e8}
html[data-theme="dark"] .menu-item.is-current{color:#fff;background:var(--red-tint);box-shadow:inset 0 0 0 1.5px #e0353a,0 0 14px -2px #e0353a99}
@media(hover:hover) and (pointer:fine){html[data-theme="dark"] .menu-item:not(.is-current):hover{color:#ff9d97;background:var(--hover)}}

/* Hero card: red glow behind the art, glass quick answer with a red edge */
html[data-theme="dark"] .hero{background:linear-gradient(180deg,#151e23,#121a1e)}
html[data-theme="dark"] .eyebrow{color:var(--muted)}
html[data-theme="dark"] .eyebrow>span{background:var(--red-tint);color:#ff9da2}
html[data-theme="dark"] .byline p{color:var(--muted)}
html[data-theme="dark"] .byline a{color:#fff}
html[data-theme="dark"] .byline img{outline-color:#ffffff1f}
html[data-theme="dark"] .hero-intro{color:var(--text2)}
html[data-theme="dark"] .hero-visual{background:radial-gradient(closest-side,#c8102e30,#0000)}
html[data-theme="dark"] .hero-floor{border-top-color:#33444c;border-bottom-color:#1a252a}
html[data-theme="dark"] .quick-answer{background:radial-gradient(420px 140px at 0 0,#c8102e2e,#0000 70%),linear-gradient(135deg,#1d292f,#151d22);border:1px solid #e0353a59;box-shadow:0 20px 40px -28px #000}
html[data-theme="dark"] .quick-label{color:var(--link)}
html[data-theme="dark"] .quick-answer blockquote{color:#dde5e8}
html[data-theme="dark"] .quick-answer a{color:var(--link)}

/* Laufzettel (desktop rail and phone bar) */
html[data-theme="dark"] .routing-slip a{color:var(--text2)}
html[data-theme="dark"] .routing-slip a[aria-current]{background:var(--red-tint);color:#ff9da2}
html[data-theme="dark"] .routing-slip a i{background:none;color:var(--link)}
html[data-theme="dark"] .routing-slip a i::before{color:var(--link)}
html[data-theme="dark"] :is(.routing-foot,.routing-count){color:var(--muted)}
@media(hover:hover) and (pointer:fine){html[data-theme="dark"] .routing-slip a:hover{background:var(--hover)}}
html[data-theme="dark"] :is(.phone-toc,.lz-chart){background:var(--card);color:var(--ink);border-color:var(--line)}
html[data-theme="dark"] .lz-dots{stroke:#e9eef04d}
html[data-theme="dark"] .lz-pocket{background:var(--soft);border-color:var(--edge)}
html[data-theme="dark"] [aria-current]>.lz-pocket{border-color:#e0353a}
html[data-theme="dark"] .lz-stamp{border-color:#ff6b7080;color:var(--link)}
html[data-theme="dark"] :is(.lz-bar,.lz-stops a):active{background:var(--red-tint)}

/* Text, notes, quotes */
html[data-theme="dark"] :is(.editorial-copy p,.editorial-copy li,.section-lead,.payout-intro p,.faq-answer){color:var(--text2)}
html[data-theme="dark"] :is(.editorial-copy a,.faq-answer a,.payout-intro a,.section-lead a,.hub-note a,.not-found a){color:var(--link)}
html[data-theme="dark"] .margin-note{background:var(--soft)}
html[data-theme="dark"] .margin-note p{color:var(--text2)}
html[data-theme="dark"] .source-callout{background:#24161a;color:var(--ink)}
html[data-theme="dark"] .page-calm .hero-followup .source-callout{background:var(--soft);color:var(--ink)}
html[data-theme="dark"] .source-callout p{color:var(--text2)}

/* Tables: lighter rows on a sunken panel */
html[data-theme="dark"] .comparison-table{background:var(--sunk)}
html[data-theme="dark"] .comparison-table tbody :is(td,th){background:var(--soft)}
html[data-theme="dark"] .comparison-table td{color:var(--text2)}
@media(max-width:700px){html[data-theme="dark"] .comparison-table tbody tr{background:var(--soft)}html[data-theme="dark"] .comparison-table tbody :is(td,th){background:none}}

/* Casino files, licence seal, screenshots */
html[data-theme="dark"] .profile-file{background:var(--sunk)}
html[data-theme="dark"] .profile-tab{color:var(--text2)}
html[data-theme="dark"] .profile-inner{background:var(--soft)}
html[data-theme="dark"] .data-strip{background:var(--sunk);color:var(--text2)}
html[data-theme="dark"] .licence-seal{background:var(--soft);border-color:var(--edge);box-shadow:inset 2px 2px 4px #0008,inset -2px -2px 4px #ffffff0f}
html[data-theme="dark"] .licence-seal small{color:var(--text2)}
html[data-theme="dark"] .casino-shot{background:var(--card);border-color:var(--line)}
html[data-theme="dark"] .shot-bar{background:var(--soft);border-bottom-color:var(--line)}
html[data-theme="dark"] .shot-bar i{background:var(--edge)}
html[data-theme="dark"] .casino-shot figcaption{border-top-color:var(--line)}
html[data-theme="dark"] .akten-register a{background:var(--soft);border-color:var(--line);color:var(--ink)}

/* Gadgets: timing check (Formular G1), documents (G2), story, phone mock-ups */
html[data-theme="dark"] .gadget{background:var(--card);border-color:var(--line);box-shadow:none}
html[data-theme="dark"] .folder-tab{background:var(--soft);color:var(--text2)}
html[data-theme="dark"] .file-tabs button{background:var(--soft);border-color:var(--edge);color:var(--text2)}
html[data-theme="dark"] .file-tabs button[aria-selected=true]{background:var(--red-deep);border-color:var(--red-deep);color:#fff}
@media(hover:hover) and (pointer:fine){html[data-theme="dark"] .file-tabs button:not([aria-selected=true]):hover{background:var(--hover)}}
html[data-theme="dark"] .check-steps{background:var(--card)}
html[data-theme="dark"] .check-steps li{background:var(--soft);border-color:var(--line)}
html[data-theme="dark"] :is(.step-number,.step-detail){color:var(--muted)}
html[data-theme="dark"] .is-faint .step-mark{color:#d99a9d;border-color:#8b5a5d}
html[data-theme="dark"] .timing-result{background:var(--card)}
html[data-theme="dark"] .story-card{background:var(--soft);border-color:var(--line);box-shadow:none}
html[data-theme="dark"] .story-scene{background:var(--sunk)}
html[data-theme="dark"] .story-step-number{border-color:var(--edge)}
html[data-theme="dark"] .story-buttons button[aria-pressed=true]{background:var(--hover);border-color:#33444c;color:var(--link)}
html[data-theme="dark"] .story-buttons button[aria-pressed=true] .story-step-number{background:var(--red-deep);border-color:var(--red-deep)}
@media(hover:hover) and (pointer:fine){html[data-theme="dark"] .story-buttons button:not([aria-pressed=true]):hover{background:var(--hover)}}
html[data-theme="dark"] .story-nav button{background:var(--soft);border-color:var(--line);color:var(--ink)}
html[data-theme="dark"] .story-next{color:var(--link)}
html[data-theme="dark"] .story-static li{background:var(--soft)}
html[data-theme="dark"] :is(.payout-request,.static-phone b){background:var(--red-deep)}
/* The phone mock-ups are pictures of a real phone: their screens stay white with the day colours inside */
html[data-theme="dark"] :is(.phone-screen,.static-phone){--ink:#1d282e;--muted:#627078;--line:#e1e5e8;--soft:#f4f5f8;--red:#c52f32;--link:#a1262b;background:#fff;color:var(--ink)}
html[data-theme="dark"] .static-phone{border-color:#4a5a62}
html[data-theme="dark"] .ready-stamp{border-color:#5fae8c;color:#7fc7a5}
html[data-theme="dark"] :is(.verification-station,.page-calm .verification-station){background:var(--soft);color:var(--ink)}
html[data-theme="dark"] .step-check{background:none;border-color:#ff6b7080;color:var(--link)}

/* Hub grids */
html[data-theme="dark"] .hub-card{background:var(--card)}
html[data-theme="dark"] .hc-facts{background:var(--soft)}
html[data-theme="dark"] .hc-button{background:var(--red-deep)}
@media(hover:hover) and (pointer:fine){html[data-theme="dark"] .hc-button:hover{background:#e0353a;box-shadow:0 0 18px -4px #ff4f57}}
html[data-theme="dark"] .hub-note{color:var(--muted)}

/* Help, dock, Rohrpost, footer */
html[data-theme="dark"] :is(.rg-block,.page-calm .rg-block){background:#12201b;border-color:#1f3a30}
html[data-theme="dark"] .rg-block p{color:var(--text2)}
html[data-theme="dark"] .rg-block a{color:#8fd4b6}
html[data-theme="dark"] .post-station{background:var(--soft);border-color:var(--line);color:var(--ink)}
html[data-theme="dark"] .post-station span{color:var(--muted)}
html[data-theme="dark"] .post-station b{color:var(--ink)}
html[data-theme="dark"] .utility-dock{background:#131b1ff2;border-color:var(--line);box-shadow:0 10px 30px -12px #000}
html[data-theme="dark"] :is(.post-button,.page-calm .post-button){color:var(--ink)}
html[data-theme="dark"] .page-calm .post-button{background:var(--soft);border-color:var(--line)}
@media(hover:hover) and (pointer:fine){html[data-theme="dark"] .post-button:hover{background:var(--hover)}}
html[data-theme="dark"] .site-footer>p{color:var(--muted)}