/* ============================================================
   SITE LAYER — monteurzimmer-oberhausen.eu / Wettkontor Oberhausen
   Loaded AFTER assets/casino.css. Everything here is additive.

   WHY A SECOND FILE: the chassis contract is "recolour :root, never touch a
   rule below it", and verify_chassis.py enforces that by failing on any hex or
   non-greyscale rgba() below the :root block. Stage 07's hard rules need three
   things the chassis does not ship (silver/bronze rank borders with glow, a
   real hero backdrop image, guide thumbnails), so they live here instead of
   forking the chassis. Colours come from tokens defined in casino.css :root.
   ============================================================ */

/* ---- Rule 5: rank borders — #1 gold, #2 silver, #3 bronze, rest brand steel.
        Each border GLOWS via a soft box-shadow in its own border colour.
        The glow is a shadow outside the card, never a blur over text. ---- */
.ch-card[data-rank="1"]{border:2px solid var(--ch-rank1);
  box-shadow:0 0 0 1px var(--ch-rank1-glow),0 8px 26px var(--ch-rank1-glow)}
.ch-card[data-rank="2"]{border:2px solid var(--ch-rank2);
  box-shadow:0 0 0 1px var(--ch-rank2-glow),0 8px 24px var(--ch-rank2-glow)}
.ch-card[data-rank="3"]{border:2px solid var(--ch-rank3);
  box-shadow:0 0 0 1px var(--ch-rank3-glow),0 8px 24px var(--ch-rank3-glow)}
.ch-card[data-rank]:not([data-rank="1"]):not([data-rank="2"]):not([data-rank="3"]){
  border:2px solid var(--ch-rankn);
  box-shadow:0 0 0 1px var(--ch-rankn-glow),0 6px 18px var(--ch-rankn-glow)}
.ch-card[data-rank]:hover{transform:translateY(-2px)}
.ch-card[data-rank="2"] .ch-rank{background:var(--ch-rank2);color:#fff;border-color:var(--ch-rank2)}
.ch-card[data-rank="3"] .ch-rank{background:var(--ch-rank3);color:#fff;border-color:var(--ch-rank3)}
.ch-card[data-rank]:not([data-rank="1"]):not([data-rank="2"]):not([data-rank="3"]) .ch-rank{
  background:var(--ch-rankn);color:#fff;border-color:var(--ch-rankn)}

/* ---- Rule 2: hero backdrop BEHIND ALL TEXT on money pages.
        focal-point note: a wide short hero with `center top` shows only the
        image's sky band. The Gasometer silhouette sits in the middle band of
        the illustration, so the window is pinned at center 58%. Verified by
        screenshot at 1440 and 390 — the rule is met by the SUBJECT being
        visible, not by the file existing. ---- */
.ch-hero.has-backdrop{position:relative;isolation:isolate;
  background-image:linear-gradient(180deg,rgba(253,250,246,.86) 0,rgba(253,250,246,.72) 42%,rgba(253,250,246,.93) 100%),
    var(--hero-img);
  background-size:cover,cover;
  background-position:center,center 58%;
  background-repeat:no-repeat,no-repeat;
  border-bottom:1px solid var(--ch-line-soft)}
@media(max-width:700px){
  .ch-hero.has-backdrop{background-position:center,center 55%}
}

/* ---- Rule 2 (guides): thumbnail in the site's brand identity, one
        consistent treatment for every guide so the set reads as a set. ---- */
.wk-thumb{display:block;width:100%;max-width:560px;height:auto;margin:0 auto 20px;
  border-radius:14px;border:1px solid var(--ch-line);
  box-shadow:0 8px 24px rgba(24,33,44,.10)}
.wk-thumb-sm{max-width:280px;margin-bottom:14px}

/* ---- guide/review index grid (uses the shared thumbnail treatment) ---- */
.wk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin:1.4rem 0}
.wk-grid article{background:var(--ch-card);border:1px solid var(--ch-line);
  border-radius:var(--ch-radius-lg);overflow:hidden;box-shadow:var(--ch-shadow)}
.wk-grid img{display:block;width:100%;height:auto;border:0;border-radius:0;box-shadow:none;margin:0}
.wk-grid .wk-body{padding:16px 18px 18px}
.wk-grid h3{font-family:var(--ch-display);font-size:1.12rem;margin:0 0 .35rem}
.wk-grid h3 a{color:var(--ch-primary);text-decoration:none}
.wk-grid h3 a:hover{text-decoration:underline}
.wk-grid p{margin:0;font-size:.9rem;color:var(--ch-muted);line-height:1.55}

/* ---- author hub bits ---- */
.wk-authorgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin:1.4rem 0}
.wk-authorgrid figure{margin:0;background:var(--ch-card);border:1px solid var(--ch-line);
  border-radius:var(--ch-radius-lg);padding:20px;box-shadow:var(--ch-shadow);text-align:center}
.wk-authorgrid img{width:104px;height:104px;border-radius:50%;object-fit:cover;
  border:3px solid var(--ch-accent-soft)}
.wk-portrait{width:132px;height:132px;border-radius:50%;object-fit:cover;
  border:3px solid var(--ch-accent-soft);float:inline-start;margin:0 22px 12px 0}
.wk-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;margin:1.3rem 0}
.wk-stats div{background:var(--ch-surface);border:1px solid var(--ch-line);border-radius:12px;
  padding:14px 16px;text-align:center}
.wk-stats b{display:block;font-family:var(--ch-display);font-size:1.5rem;color:var(--ch-primary);
  line-height:1.1}
.wk-stats span{font-size:.8rem;color:var(--ch-muted)}

/* ---- legal / longform prose blocks ---- */
.wk-prose h2{font-size:clamp(1.35rem,2.4vw,1.85rem);margin:2rem 0 .6rem}
.wk-prose h3{font-size:1.14rem;margin:1.5rem 0 .45rem;color:var(--ch-primary)}
.wk-prose p,.wk-prose li{color:var(--ch-ink-soft);line-height:1.72}
.wk-prose ul,.wk-prose ol{margin:.6rem 0 1rem;padding-inline-start:1.3rem}
.wk-prose li{margin:.3rem 0}
.wk-callout{background:var(--ch-primary-bg);border:1px solid var(--ch-primary-bd);
  border-inline-start:4px solid var(--ch-primary);border-radius:10px;padding:16px 20px;margin:1.3rem 0}
.wk-callout p:last-child{margin-bottom:0}
.wk-warn{background:var(--ch-cons-bg);border:1px solid #e6c9cc;
  border-inline-start:4px solid var(--ch-cta-from);border-radius:10px;padding:16px 20px;margin:1.3rem 0}
.wk-warn p:last-child{margin-bottom:0}

/* ---- Off-canvas nav overflow clip -----------------------------------------
   CHASSIS-LEVEL FINDING (monteurzimmer-oberhausen.eu, 2026-08-20). The mobile
   drawer `.ch-nav-links` is position:fixed + transform:translateX(100%), i.e.
   parked one viewport to the right. Chrome still counts that box in
   documentElement.scrollWidth, so at 390x844 the document measured 769px wide
   and the page body scrolled sideways — which the stage-07/stage-10 rules
   forbid. Measured with a bounding-box sweep: every overflowing node was inside
   the parked drawer, nothing in the content.

   `overflow-x:clip` rather than `hidden` on purpose: `hidden` turns the element
   into a scroll container and would break the chassis's own `.ch-sticky`.
   This is additive, so the chassis body stays unforked.
   -------------------------------------------------------------------------- */
html{overflow-x:clip}
body{overflow-x:clip}

/* ---- Footer: this site ships FIVE columns (the eeat-pages hard rule wants the
        whole trust set footer-linked, and splitting it across two themed columns
        beats one 9-link ladder). The chassis grid is `1.4fr .9fr 1.5fr`, so it
        is widened here instead of dropping trust links. -------------------- */
.ch-foot-cols.wk-foot5{grid-template-columns:repeat(5,minmax(0,1fr));gap:22px}
@media (max-width:1000px){.ch-foot-cols.wk-foot5{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ch-foot-cols.wk-foot5{grid-template-columns:1fr}}
.ch-foot-legal{margin-top:16px;font-size:.8rem;opacity:.86}

/* ---- Nav: 7 items plus a wordmark do not fit 1132px at the chassis's .8rem
        uppercase + .05em tracking (measured: labels wrapped to two lines and
        collided at 1440). Tighten tracking and gap in the mid range, and let
        the wordmark shrink before the labels do. -------------------------- */
@media (max-width:1240px){
  .ch-nav-links{gap:14px}
  .ch-nav-links a,.ch-dd-toggle{font-size:.75rem;letter-spacing:.02em}
  .ch-brand img{height:34px}
}
@media (max-width:1040px) and (min-width:769px){
  .ch-nav-links{gap:10px}
  .ch-nav-links a,.ch-dd-toggle{font-size:.7rem;letter-spacing:0}
  .ch-brand img{height:30px}
}
/* Nav labels must never wrap to a second line — they collide with the row above
   at 1440px otherwise (measured, stage-07 reference render). */
.ch-nav-links>li>a,.ch-dd-toggle{white-space:nowrap}

/* ---- Dropdown toggle type ---------------------------------------------------
   CHASSIS-LEVEL FINDING #2 (monteurzimmer-oberhausen.eu, 2026-08-20).
   chassis.css sets the nav type once for both element kinds:
       .ch-nav-links a,.ch-dd-toggle{font-weight:600;font-size:.8rem;
                                     text-transform:uppercase;letter-spacing:.05em}
   and then, 8 rules later, resets the toggle:
       .ch-dd-toggle{...;font:inherit}
   `font:inherit` is the shorthand, so it clobbers font-size, font-weight AND
   font-family from the earlier rule. Result: the ONE dropdown label in the
   navbar renders larger, lighter and un-cased next to its siblings — visible
   as "RATGEBER" in a different face from "OHNE OASIS" in the 1440 nav shot.
   Latent on every build using the chassis with a dropdown. Re-declared here
   after the reset instead of forking the chassis body.
   -------------------------------------------------------------------------- */
.ch-nav-links .ch-dd-toggle{font-family:var(--ch-sans);font-weight:600;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.05em;line-height:1.65}
@media (max-width:1240px){
  .ch-nav-links .ch-dd-toggle{font-size:.75rem;letter-spacing:.02em}
}
@media (max-width:1040px) and (min-width:769px){
  .ch-nav-links .ch-dd-toggle{font-size:.7rem;letter-spacing:0}
}
@media (max-width:768px){
  .ch-nav-links .ch-dd-toggle{font-size:.8rem;text-transform:none;letter-spacing:0}
}

/* ---- Pros/cons + review headings: the chassis styles `.ch-proscons h4`, but the
        pros/cons blocks are genuine subsections of their H2 and belong in the
        heading OUTLINE as h3 (the footprint's h3 count is a parity target).
        Same compact treatment, correct semantics. ------------------------- */
.ch-proscons h3{margin:0 0 6px;font-size:1.05rem}

/* ---- in-body explainer icon strip (parity role: wettinsel's repeating
        Vorschaubild trio — Kreditkarte / Recht / Kalender) ---------------- */
.wk-iconstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:1.3rem 0}
.wk-iconstrip figure{margin:0;text-align:center}
.wk-iconstrip img{width:100%;max-width:132px;height:auto;border-radius:14px;
  border:1px solid var(--ch-line);background:var(--ch-card)}
.wk-iconstrip figcaption{font-size:.84rem;color:var(--ch-muted);margin-top:.5rem;line-height:1.45}
@media (max-width:640px){
  .wk-iconstrip{grid-template-columns:1fr;gap:14px}
  .wk-iconstrip figure{display:flex;align-items:center;gap:14px;text-align:start}
  .wk-iconstrip img{max-width:76px;flex:0 0 auto}
  .wk-iconstrip figcaption{margin-top:0}
}

/* ---- sortable comparison table: the "semi-interactable" requirement is met by
        sorting a table the competitors already run (2 of 3), not by inventing a
        chart none of them has. Sorted column gets a brass caret. ---------- */
.wk-sort th[data-sort]{cursor:pointer;user-select:none;white-space:nowrap}
.wk-sort th[data-sort]:hover{color:var(--ch-primary)}
.wk-sort th[aria-sort]{color:var(--ch-primary)}
.wk-sort th[aria-sort="ascending"]::after{content:" \25B2";color:var(--ch-accent);font-size:.8em}
.wk-sort th[aria-sort="descending"]::after{content:" \25BC";color:var(--ch-accent);font-size:.8em}
.wk-sort tbody tr:hover{background:var(--ch-accent-soft)}
.wk-sort .wk-cmp-brand{font-weight:700;color:var(--ch-primary);text-decoration:none}
.wk-sort .wk-cmp-brand:hover{text-decoration:underline}

/* ---- Mobile toplist card: stack the logo above the text -------------------
   CHASSIS-LEVEL FINDING #4 (monteurzimmer-oberhausen.eu, 2026-08-20).
   At <=768px the chassis re-grids .ch-card to "rank mid" / "cta cta" and sets
   `.ch-features{justify-content:center}` — which only makes sense if the text
   column is full width. But it never changes `.ch-cell-mid` from
   flex-direction:row, so the 120px chip sits BESIDE the text and leaves it
   122px wide at a 390px viewport (measured). Consequences: the .ch-feat fact
   line wrapped to five lines, the .ch-features chips stacked into a vertical
   ladder instead of a centred row, and the card grew to 368px tall for one
   brand. Stacking it is what the chassis's own centring already assumes.
   ------------------------------------------------------------------------- */
@media (max-width:768px){
  .ch-card .ch-cell-mid{flex-direction:column;align-items:center;text-align:center;gap:10px}
  .ch-card .ch-cell-txt{width:100%;min-width:0}
  .ch-card .ch-chip{width:150px;height:74px}
  /* The three facts (licence · min deposit · payout) are already shown as
     .ch-features chips at this width, so the prose line is redundant here —
     the same reason the chassis hides .ch-descriptor on mobile. */
  .ch-card .ch-feat{display:none}
  .ch-card .ch-cardcopy{-webkit-line-clamp:3;line-clamp:3}
}

/* ---- Hero furniture: the Last-Updated pill sits UNDER the author byline ----
   Operator rule 2026-08-20. The chassis makes .ch-byline inline-flex and .ch-upd
   inline-block, so inside a centred hero they flow onto the SAME line whenever
   there is horizontal room — right at 1440, wrong at 1920. Our markup already
   forces the break, but this makes the rule hold in CSS rather than depending on
   a <br> nobody may notice later. Verified by qa_layout.py at 390/768/1024/1440/1920.
   ------------------------------------------------------------------------- */
.ch-hero-copy .ch-upd{display:block;width:fit-content;margin-inline:auto}

/* ---- Guide thumbnail height cap at mobile ---------------------------------
   MEASURED FINDING (stage-10 QA). The guide thumbnails are square-ish 1024x1024
   images, so at a 390px viewport .wk-thumb rendered ~390px TALL and pushed the
   first toplist card to y=842 on /auslaendische-wettanbieter/ and
   /sportwetten-ohne-wettsteuer/ — inside the 844px fold by two pixels, which is
   not "visible on landing" in any meaningful sense. Capping the height and
   cropping to the middle of the image keeps the thumbnail present (it is a
   parity feature) while giving the card real room.
   ------------------------------------------------------------------------- */
@media (max-width:700px){
  .wk-thumb{max-height:170px;object-fit:cover;object-position:center 45%}
}