/*
Theme Name: Casinos Schleswig-Holstein
Theme URI: https://casinosschleswigholstein.de
Author: Redaktion casinosschleswigholstein.de
Description: Atelier-Editorial Casino-Review-Theme für casinosschleswigholstein.de. Vanilla-CSS mit @layer Cascade, Ocean-Palette (Baltic Navy + Amber + Parchment), Faustina + Source Sans 3. Custom-Built, kein Marketplace-Footprint.
Version: 0.1.0
License: Proprietary
Text Domain: casinos-sh
Tags: casino, custom, editorial
*/

/* ------------------------------------------------------------------
   FONT FACES — Self-hosted via wp-content/themes/casinos-sh/fonts/
   ------------------------------------------------------------------ */

@font-face {
  font-family: "Faustina";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("fonts/faustina-400.woff2") format("woff2");
}
@font-face {
  font-family: "Faustina";
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url("fonts/faustina-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Faustina";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("fonts/faustina-600.woff2") format("woff2");
}
@font-face {
  font-family: "Faustina";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("fonts/faustina-700.woff2") format("woff2");
}

@font-face {
  font-family: "Source Sans 3";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("fonts/source-sans-3-400.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url("fonts/source-sans-3-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("fonts/source-sans-3-600.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("fonts/jetbrains-mono-500.woff2") format("woff2");
}

/* ------------------------------------------------------------------
   CASCADE LAYERS — explicit order, diverges from flat-vanilla peer (consigli)
   ------------------------------------------------------------------ */

@layer reset, tokens, base, layout, components, utilities, wp-overrides;

/* ------------------------------------------------------------------
   TOKENS — Ocean palette + spacing + type scale
   ------------------------------------------------------------------ */

@layer tokens {
  :root {
    /* Palette — Ocean family */
    --cs-color-primary:        #0F2A44;  /* deep Baltic navy */
    --cs-color-primary-soft:   #1B3D5C;
    --cs-color-secondary:      #1F7A8C;  /* Baltic teal mid-tone */
    --cs-color-secondary-soft: #4FA0B2;
    --cs-color-accent:         #E5B546;  /* Baltic amber */
    --cs-color-accent-soft:    #F2C863;
    --cs-color-accent-deep:    #B8902F;
    --cs-color-bg:             #F5F1E8;  /* parchment */
    --cs-color-bg-elev:        #FBF8F1;
    --cs-color-bg-card:        #FFFFFF;
    --cs-color-ink:            #1A1F26;
    --cs-color-ink-soft:       #4A525E;
    --cs-color-ink-faint:      #7C8593;
    --cs-color-rule:           #E2DBC8;  /* warm parchment-aged rule */
    --cs-color-rule-strong:    #B8B19D;
    --cs-color-success:        #2D7A4B;
    --cs-color-warn:           #C77B0F;
    --cs-color-danger:         #B6402A;
    --cs-color-badge-ggl-bg:   #E5F1F5;
    --cs-color-badge-ggl-ink:  #0F4E5D;
    --cs-color-badge-sh-bg:    #FAEAC4;
    --cs-color-badge-sh-ink:   #6B4A0F;

    /* Type families */
    --cs-font-head: "Faustina", Georgia, "Times New Roman", serif;
    --cs-font-body: "Source Sans 3", "Helvetica Neue", system-ui, sans-serif;
    --cs-font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;

    /* Type scale — fluid, editorial */
    --cs-fs-xs:   0.82rem;
    --cs-fs-sm:   0.9rem;
    --cs-fs-base: 1.06rem;     /* slightly larger for editorial body */
    --cs-fs-md:   1.18rem;
    --cs-fs-lg:   1.42rem;
    --cs-fs-xl:   1.78rem;
    --cs-fs-2xl:  2.28rem;
    --cs-fs-3xl:  clamp(2.4rem, 4.2vw, 3.4rem);
    --cs-fs-4xl:  clamp(2.9rem, 5.8vw, 4.6rem);

    /* Line-heights */
    --cs-lh-tight: 1.12;
    --cs-lh-snug:  1.28;
    --cs-lh-base:  1.62;
    --cs-lh-loose: 1.78;

    /* Spacing rhythm */
    --cs-sp-1:  0.25rem;
    --cs-sp-2:  0.5rem;
    --cs-sp-3:  0.75rem;
    --cs-sp-4:  1rem;
    --cs-sp-5:  1.5rem;
    --cs-sp-6:  2rem;
    --cs-sp-7:  3rem;
    --cs-sp-8:  4rem;
    --cs-sp-9:  6rem;

    /* Radii (medium scale per footprint lock) */
    --cs-radius-sm:  4px;
    --cs-radius:     8px;
    --cs-radius-md:  12px;
    --cs-radius-lg:  20px;

    /* Shadows — warm amber-tinted (divergence from peers' flat) */
    --cs-shadow-sm: 0 1px 2px rgba(60, 38, 8, 0.06);
    --cs-shadow:    0 4px 12px rgba(60, 38, 8, 0.08), 0 1px 2px rgba(60, 38, 8, 0.05);
    --cs-shadow-md: 0 10px 24px rgba(60, 38, 8, 0.10), 0 2px 6px rgba(60, 38, 8, 0.06);
    --cs-shadow-warm: 0 8px 28px rgba(229, 181, 70, 0.18), 0 2px 6px rgba(60, 38, 8, 0.06);

    /* Container widths */
    --cs-container:        1180px;
    --cs-container-narrow: 760px;
    --cs-container-wide:   1320px;

    /* Layout */
    --cs-header-h: 64px;

    /* Easings */
    --cs-ease: cubic-bezier(0.4, 0.0, 0.2, 1);
  }
}

/* ------------------------------------------------------------------
   RESET — minimal, modern
   ------------------------------------------------------------------ */

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; margin: 0; }
  img, picture, svg, video { max-width: 100%; display: block; height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
  button { background: none; border: 0; cursor: pointer; padding: 0; }
  table { border-collapse: collapse; width: 100%; }
}

/* ------------------------------------------------------------------
   BASE — typography + body
   ------------------------------------------------------------------ */

@layer base {
  html { scroll-behavior: smooth; }
  body {
    font-family: var(--cs-font-body);
    font-size: var(--cs-fs-base);
    line-height: var(--cs-lh-base);
    color: var(--cs-color-ink);
    background: var(--cs-color-bg);
    font-feature-settings: "kern", "liga", "calt";
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3, h4 {
    font-family: var(--cs-font-head);
    color: var(--cs-color-primary);
    line-height: var(--cs-lh-tight);
    letter-spacing: -0.01em;
    font-weight: 700;
  }
  h1 { font-size: var(--cs-fs-3xl); }
  h2 { font-size: var(--cs-fs-2xl); }
  h3 { font-size: var(--cs-fs-xl); font-weight: 600; }
  h4 { font-size: var(--cs-fs-lg); font-weight: 600; }
  h5, h6 {
    font-family: var(--cs-font-body);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--cs-fs-sm);
    color: var(--cs-color-ink-soft);
  }

  /* Reading-width default applies to narrow article context only; wide/FAQ override below */
  .cs-article > p { max-width: 68ch; }
  p + p { margin-top: var(--cs-sp-4); }

  a { color: var(--cs-color-secondary); }
  a:hover { color: var(--cs-color-primary); }

  strong, b { font-weight: 600; color: var(--cs-color-primary); }
  em, i { font-style: italic; }

  hr {
    border: 0;
    border-top: 1px solid var(--cs-color-rule);
    margin: var(--cs-sp-6) 0;
  }

  ::selection { background: var(--cs-color-accent); color: var(--cs-color-primary); }

  code, kbd, samp, pre {
    font-family: var(--cs-font-mono);
    font-weight: 500;
    font-size: 0.96em;
  }

  /* Numeric tabular figures for tables + compliance numbers */
  .cs-num, td.cs-num, .cs-info-value {
    font-variant-numeric: tabular-nums;
  }
}

/* ------------------------------------------------------------------
   LAYOUT — containers, grids, nav
   ------------------------------------------------------------------ */

@layer layout {

  .cs-container {
    width: 100%;
    max-width: var(--cs-container);
    margin-inline: auto;
    padding-inline: var(--cs-sp-5);
  }
  .cs-container--narrow { max-width: var(--cs-container-narrow); }
  .cs-container--wide   { max-width: var(--cs-container-wide); }

  /* Sticky thin topbar (divergence from peers' sidebar nav) */
  .cs-site-header {
    position: sticky;
    top: 0;
    z-index: 80;
    background: rgba(245, 241, 232, 0.92);
    backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--cs-color-rule);
    height: var(--cs-header-h);
  }
  .cs-site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    gap: var(--cs-sp-5);
  }

  /* Logo */
  .cs-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--cs-sp-3);
    text-decoration: none;
    color: var(--cs-color-primary);
  }
  .cs-logo:hover { color: var(--cs-color-primary); }
  .cs-logo__mark {
    width: 36px;
    height: 36px;
    flex: none;
  }
  .cs-logo__wordmark {
    font-family: var(--cs-font-head);
    font-weight: 700;
    font-size: 1.04rem;
    letter-spacing: -0.005em;
    line-height: 1;
  }
  .cs-logo__wordmark em {
    font-style: normal;
    color: var(--cs-color-accent-deep);
  }
  @media (max-width: 540px) {
    .cs-logo__wordmark { display: none; }
  }

  /* Primary nav */
  .cs-nav {
    display: flex;
    gap: var(--cs-sp-5);
    list-style: none;
    margin: 0; padding: 0;
  }
  .cs-nav a {
    color: var(--cs-color-ink);
    text-decoration: none;
    font-size: var(--cs-fs-sm);
    font-weight: 600;
    padding: var(--cs-sp-2) 0;
    border-bottom: 2px solid transparent;
    transition: border-color 160ms var(--cs-ease), color 160ms var(--cs-ease);
  }
  .cs-nav a:hover,
  .cs-nav a[aria-current="page"] {
    color: var(--cs-color-primary);
    border-bottom-color: var(--cs-color-accent);
  }
  /* Dropdown menus: hover/focus reveal panel below parent */
  .cs-nav__item { position: relative; }
  .cs-nav__label {
    color: var(--cs-color-ink);
    font-size: var(--cs-fs-sm);
    font-weight: 600;
    padding: var(--cs-sp-2) 0;
    cursor: default;
    user-select: none;
    border-bottom: 2px solid transparent;
  }
  .cs-nav__item--has-dropdown > a::after,
  .cs-nav__item--has-dropdown > .cs-nav__label::after { content: ""; }
  /* Chevron toggle button — visible on mobile only, drives focus-within on desktop without click */
  .cs-nav__expand {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    padding: var(--cs-sp-2);
    font-size: 0.85em;
    opacity: 0.7;
    display: none; /* hidden on desktop — hover handles it */
  }
  .cs-nav__expand:hover { opacity: 1; }
  .cs-nav__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    margin: 0; padding: var(--cs-sp-3) 0;
    list-style: none;
    background: var(--cs-color-bg-card);
    border: 1px solid var(--cs-color-rule);
    border-radius: var(--cs-radius-md);
    box-shadow: 0 8px 24px rgba(15,42,68,0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
    z-index: 50;
  }
  .cs-nav__item--has-dropdown:hover > .cs-nav__dropdown,
  .cs-nav__item--has-dropdown:focus-within > .cs-nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .cs-nav__dropdown li { margin: 0; }
  .cs-nav__dropdown a {
    display: block;
    padding: var(--cs-sp-2) var(--cs-sp-4);
    font-size: var(--cs-fs-sm);
    font-weight: 500;
    color: var(--cs-color-ink);
    border-bottom: 0;
    white-space: nowrap;
  }
  .cs-nav__dropdown a:hover {
    background: var(--cs-color-bg-elev);
    color: var(--cs-color-primary);
    border-bottom-color: transparent;
  }
  /* Mobile (< 800px): slide-out panel, items stack vertically, dropdowns expand inline on tap */
  @media (max-width: 800px) {
    .cs-nav {
      display: flex;
      position: fixed;
      top: 0; right: 0;
      width: min(86vw, 360px);
      height: 100vh;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      padding: var(--cs-sp-7) var(--cs-sp-5) var(--cs-sp-5);
      background: var(--cs-color-bg-card);
      border-left: 1px solid var(--cs-color-rule);
      box-shadow: -8px 0 32px rgba(15,42,68,0.18);
      overflow-y: auto;
      transform: translateX(100%);
      transition: transform .25s ease;
      z-index: 100;
    }
    .cs-nav.cs-nav--open { transform: translateX(0); }
    body.cs-nav-locked { overflow: hidden; }

    .cs-nav__item { position: static; border-bottom: 1px solid var(--cs-color-rule); }
    .cs-nav__item:last-child { border-bottom: 0; }
    .cs-nav__item > a,
    .cs-nav__item > .cs-nav__label {
      flex: 1; padding: var(--cs-sp-4) 0; border-bottom: 0; font-size: var(--cs-fs-md);
    }
    /* Row layout: parent-link + chevron-button on one line */
    .cs-nav__item--has-dropdown {
      display: flex; flex-wrap: wrap; align-items: center;
    }
    .cs-nav__expand {
      display: inline-flex; align-items: center; justify-content: center;
      min-width: 44px; min-height: 44px;
      font-size: 1.1rem; opacity: 1;
      transition: transform .2s ease;
    }
    .cs-nav__item--open > .cs-nav__expand { transform: rotate(180deg); }

    /* Mobile dropdown: inline expansion, not absolute floating */
    .cs-nav__dropdown {
      position: static;
      width: 100%;
      box-shadow: none;
      border: 0;
      background: var(--cs-color-bg-elev);
      border-radius: var(--cs-radius);
      margin-bottom: var(--cs-sp-3);
      padding: var(--cs-sp-2) 0;
      opacity: 1; visibility: visible;
      transform: none; transition: none;
      max-height: 0; overflow: hidden;
      display: block;
    }
    .cs-nav__item--open > .cs-nav__dropdown { max-height: 600px; }
    .cs-nav__dropdown a {
      padding: var(--cs-sp-3) var(--cs-sp-5);
      font-size: var(--cs-fs-sm);
    }
    /* Hover/focus-within shouldn't fire on touch — explicit class controls visibility on mobile */
    .cs-nav__item--has-dropdown:hover > .cs-nav__dropdown,
    .cs-nav__item--has-dropdown:focus-within > .cs-nav__dropdown {
      max-height: 0;
    }
    .cs-nav__item--open:hover > .cs-nav__dropdown,
    .cs-nav__item--open:focus-within > .cs-nav__dropdown {
      max-height: 600px;
    }
  }

  .cs-nav-toggle {
    display: none;
    align-items: center; gap: var(--cs-sp-2);
    font-size: 1.6rem;
    background: transparent; border: 0; color: var(--cs-color-ink);
    cursor: pointer; padding: var(--cs-sp-2);
    position: relative; z-index: 110;
  }
  @media (max-width: 800px) { .cs-nav-toggle { display: inline-flex; } }

  /* Footer */
  .cs-site-footer {
    margin-top: var(--cs-sp-9);
    background: var(--cs-color-primary);
    color: #DDE5EE;
    padding-block: var(--cs-sp-8) var(--cs-sp-6);
  }
  .cs-site-footer a { color: #FDE9B6; text-decoration: none; }
  .cs-site-footer a:hover { text-decoration: underline; }
  /* Override global strong/b — primary navy would be invisible against the navy footer bg */
  .cs-site-footer strong,
  .cs-site-footer b { color: #FFFFFF; font-weight: 700; }
  /* Footer logo block */
  .cs-site-footer__logo {
    display: inline-flex;
    align-items: center;
    gap: var(--cs-sp-3);
    margin-bottom: var(--cs-sp-7);
    color: #FFFFFF !important;
    text-decoration: none;
  }
  .cs-site-footer__logo:hover { text-decoration: none; }
  .cs-site-footer__logo-mark { width: 40px; height: 40px; flex-shrink: 0; }
  .cs-site-footer__logo-text {
    font-family: var(--cs-font-head);
    font-weight: 700;
    font-size: var(--cs-fs-lg);
    color: #FFFFFF;
    letter-spacing: -0.01em;
  }
  .cs-site-footer h4 {
    color: #FFFFFF;
    font-size: var(--cs-fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--cs-sp-3);
    font-family: var(--cs-font-body);
    font-weight: 600;
  }
  .cs-site-footer__grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cs-sp-7);
    margin-bottom: var(--cs-sp-7);
  }
  .cs-site-footer__col { flex: 1 1 220px; }
  .cs-site-footer ul { list-style: none; padding: 0; margin: 0; }
  .cs-site-footer li { margin-bottom: var(--cs-sp-2); font-size: var(--cs-fs-sm); }
  .cs-site-footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.12);
    padding-top: var(--cs-sp-4);
    font-size: var(--cs-fs-xs);
    color: #B6C0CC;
    line-height: var(--cs-lh-snug);
  }

  /* Main editorial flow — asymmetric, not card-grid */
  main { padding-block: var(--cs-sp-7); }
  section + section { margin-top: var(--cs-sp-8); }
}

/* ------------------------------------------------------------------
   COMPONENTS — cards, badges, hero, operator, rg-notice
   ------------------------------------------------------------------ */

@layer components {

  /* Hero — atelier editorial, NOT card-grid */
  .cs-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--cs-sp-7);
    align-items: center;
    padding-block: var(--cs-sp-7) var(--cs-sp-6);
  }
  @media (max-width: 880px) {
    .cs-hero { grid-template-columns: 1fr; }
  }
  .cs-hero__copy h1 {
    font-size: var(--cs-fs-4xl);
    margin-bottom: var(--cs-sp-4);
  }
  .cs-hero__deck {
    font-size: var(--cs-fs-md);
    color: var(--cs-color-ink-soft);
    max-width: 56ch;
    line-height: var(--cs-lh-snug);
  }
  .cs-hero__cta { display: flex; gap: var(--cs-sp-4); margin-top: var(--cs-sp-5); flex-wrap: wrap; }
  .cs-hero__img {
    border-radius: var(--cs-radius-md);
    overflow: hidden;
    box-shadow: var(--cs-shadow-warm);
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, #1B3D5C 0%, #1F7A8C 60%, #E5B546 100%);
  }
  .cs-hero__img img { width: 100%; height: 100%; object-fit: cover; }
  .cs-hero__disclaimer {
    margin-top: var(--cs-sp-4);
    font-size: var(--cs-fs-xs);
    color: var(--cs-color-ink-faint);
    border-top: 1px solid var(--cs-color-rule);
    padding-top: var(--cs-sp-3);
  }

  /* Buttons */
  .cs-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--cs-sp-2);
    padding: var(--cs-sp-3) var(--cs-sp-5);
    border-radius: var(--cs-radius);
    font-weight: 600;
    font-size: var(--cs-fs-sm);
    text-decoration: none;
    transition: transform 140ms var(--cs-ease), box-shadow 140ms var(--cs-ease), background 140ms var(--cs-ease);
    line-height: 1.2;
  }
  .cs-btn--primary {
    background: var(--cs-color-accent);
    color: var(--cs-color-primary);
    box-shadow: var(--cs-shadow);
  }
  .cs-btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: var(--cs-shadow-warm);
    background: var(--cs-color-accent-soft);
  }
  .cs-btn--ghost {
    background: transparent;
    color: var(--cs-color-primary);
    border: 1px solid var(--cs-color-primary);
  }
  .cs-btn--ghost:hover { background: var(--cs-color-primary); color: var(--cs-color-bg); }
  .cs-btn--text {
    padding: var(--cs-sp-3) 0;
    color: var(--cs-color-secondary);
    border-bottom: 1px solid currentColor;
    border-radius: 0;
  }

  /* Badges */
  .cs-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--cs-sp-1);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: var(--cs-fs-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
  }
  .cs-badge--ggl {
    background: var(--cs-color-badge-ggl-bg);
    color: var(--cs-color-badge-ggl-ink);
  }
  .cs-badge--sh {
    background: var(--cs-color-badge-sh-bg);
    color: var(--cs-color-badge-sh-ink);
  }
  .cs-badge--age {
    background: var(--cs-color-danger);
    color: #FFF;
  }

  /* Featured operator row — 3 cards, NOT a grid of 6+ */
  .cs-featured-ops {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--cs-sp-5);
  }
  @media (max-width: 800px) {
    .cs-featured-ops { grid-template-columns: 1fr; }
  }
  .cs-op-card {
    background: var(--cs-color-bg-card);
    border-radius: var(--cs-radius-md);
    padding: var(--cs-sp-5);
    box-shadow: var(--cs-shadow);
    display: flex;
    flex-direction: column;
    gap: var(--cs-sp-3);
    position: relative;
    transition: transform 160ms var(--cs-ease), box-shadow 160ms var(--cs-ease);
  }
  .cs-op-card:hover { transform: translateY(-2px); box-shadow: var(--cs-shadow-md); }
  .cs-op-card--featured::before {
    content: "Top-Pick";
    position: absolute; top: -10px; left: var(--cs-sp-4);
    background: var(--cs-color-accent);
    color: var(--cs-color-primary);
    font-size: var(--cs-fs-xs);
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--cs-radius-sm);
    letter-spacing: 0.04em;
  }
  .cs-op-card__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--cs-sp-3);
  }
  .cs-op-card__brand {
    font-family: var(--cs-font-head);
    font-size: var(--cs-fs-lg);
    font-weight: 700;
    color: var(--cs-color-primary);
  }
  .cs-op-card__bonus {
    font-size: var(--cs-fs-md);
    color: var(--cs-color-ink);
    line-height: var(--cs-lh-snug);
  }
  .cs-op-card__bonus strong { color: var(--cs-color-accent-deep); }
  .cs-op-card__meta {
    display: flex; justify-content: space-between; align-items: center;
    font-size: var(--cs-fs-sm);
    color: var(--cs-color-ink-soft);
  }
  .cs-op-card__rating {
    font-family: var(--cs-font-mono);
    font-weight: 500;
    color: var(--cs-color-primary);
  }
  .cs-op-card__cta {
    margin-top: auto;
    display: flex; gap: var(--cs-sp-3);
  }
  .cs-op-card--pending {
    opacity: 0.7;
    background: var(--cs-color-bg-elev);
    border: 1px dashed var(--cs-color-rule-strong);
  }
  .cs-op-card--pending .cs-op-card__cta-placeholder {
    color: var(--cs-color-ink-faint);
    font-style: italic;
  }

  /* Pillar-CTA banner */
  .cs-pillar-cta {
    background: linear-gradient(120deg, var(--cs-color-primary) 0%, var(--cs-color-primary-soft) 60%, var(--cs-color-secondary) 100%);
    color: #F5F1E8;
    border-radius: var(--cs-radius-md);
    padding: var(--cs-sp-6) var(--cs-sp-7);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cs-sp-5);
    flex-wrap: wrap;
    box-shadow: var(--cs-shadow);
  }
  .cs-pillar-cta__text {
    font-family: var(--cs-font-head);
    font-size: var(--cs-fs-lg);
    line-height: var(--cs-lh-snug);
    max-width: 60ch;
  }
  .cs-pillar-cta__text strong { color: var(--cs-color-accent); }

  /* Spieltyp tiles — asymmetric masonry, NOT clean 3-col grid */
  .cs-spieltyp-grid {
    display: grid;
    gap: var(--cs-sp-4);
    grid-template-columns: 1.4fr 1fr 1fr;
    grid-auto-rows: minmax(140px, auto);
  }
  .cs-spieltyp-grid > :nth-child(1) { grid-row: span 2; }
  .cs-spieltyp-grid > :nth-child(4) { grid-column: span 2; }
  @media (max-width: 800px) {
    .cs-spieltyp-grid { grid-template-columns: 1fr 1fr; }
    .cs-spieltyp-grid > :nth-child(1),
    .cs-spieltyp-grid > :nth-child(4) { grid-column: span 2; grid-row: auto; }
  }
  .cs-tile {
    background: var(--cs-color-bg-card);
    padding: var(--cs-sp-5);
    border-radius: var(--cs-radius-md);
    text-decoration: none;
    color: var(--cs-color-primary);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--cs-sp-3);
    box-shadow: var(--cs-shadow-sm);
    transition: box-shadow 160ms var(--cs-ease), transform 160ms var(--cs-ease);
    position: relative;
    overflow: hidden;
  }
  .cs-tile:hover { box-shadow: var(--cs-shadow); transform: translateY(-2px); }
  /* Static (non-clickable) tile — no hover affordance, used for info cards like Spielbank-Standorte */
  .cs-tile--static { cursor: default; }
  .cs-tile--static:hover { box-shadow: var(--cs-shadow-sm); transform: none; }
  .cs-tile__icon { font-size: 1.6rem; color: var(--cs-color-secondary); }
  .cs-tile__title { font-family: var(--cs-font-head); font-weight: 600; font-size: var(--cs-fs-lg); line-height: var(--cs-lh-snug); }
  .cs-tile__desc  { font-size: var(--cs-fs-sm); color: var(--cs-color-ink-soft); }
  .cs-tile--sh-locked::after {
    content: "SH-Lizenz";
    position: absolute; top: var(--cs-sp-3); right: var(--cs-sp-3);
    font-size: var(--cs-fs-xs);
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--cs-color-badge-sh-bg);
    color: var(--cs-color-badge-sh-ink);
  }

  /* Breadcrumbs */
  .cs-breadcrumbs {
    padding-block: var(--cs-sp-3) var(--cs-sp-2);
    font-size: var(--cs-fs-xs);
    color: var(--cs-color-ink-faint);
    letter-spacing: 0.04em;
  }
  .cs-breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--cs-sp-2); margin: 0; padding: 0; }
  .cs-breadcrumbs li { display: inline-flex; align-items: center; gap: var(--cs-sp-2); }
  .cs-breadcrumbs li + li::before { content: "›"; color: var(--cs-color-accent-deep); font-weight: 600; }
  .cs-breadcrumbs a { color: var(--cs-color-ink-soft); text-decoration: none; }
  .cs-breadcrumbs a:hover { color: var(--cs-color-secondary); }
  .cs-breadcrumbs [aria-current="page"] { color: var(--cs-color-primary); font-weight: 600; }

  /* Ranking table (Pillar) — 5 columns desktop, stacked mobile */
  .cs-rank-table { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--cs-color-rule); border-radius: var(--cs-radius-md); overflow: hidden; background: var(--cs-color-bg-card); }
  .cs-rank-table__head {
    display: grid;
    grid-template-columns: 60px 1.6fr 1.4fr 1fr 1fr;
    gap: var(--cs-sp-4);
    padding: var(--cs-sp-3) var(--cs-sp-4);
    background: var(--cs-color-primary);
    color: #FFFFFF;
    font-family: var(--cs-font-body);
    font-size: var(--cs-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .cs-rank-table__th--rank { text-align: center; }
  .cs-rank-table__row {
    display: grid;
    grid-template-columns: 60px 1.6fr 1.4fr 1fr 1fr;
    gap: var(--cs-sp-4);
    align-items: center;
    padding: var(--cs-sp-4);
    border-top: 1px solid var(--cs-color-rule);
  }
  .cs-rank-table__row:first-of-type { border-top: 0; }
  .cs-rank-table__row--featured { background: linear-gradient(180deg, rgba(229,181,70,0.06) 0%, rgba(229,181,70,0) 100%); border-left: 4px solid var(--cs-color-accent); padding-left: calc(var(--cs-sp-4) - 4px); }
  .cs-rank-table__cell--rank { font-family: var(--cs-font-head); font-weight: 700; font-size: 2.2rem; color: var(--cs-color-accent-deep); text-align: center; }
  .cs-rank-table__badges { display: flex; gap: var(--cs-sp-2); flex-wrap: wrap; margin: var(--cs-sp-2) 0; }
  .cs-rank-table__highlight { font-size: var(--cs-fs-sm); color: var(--cs-color-ink-soft); margin: 0; }
  .cs-rank-table__games-num { font-family: var(--cs-font-head); font-size: 1.6rem; font-weight: 700; color: var(--cs-color-secondary); line-height: 1; }
  .cs-rank-table__games-label { font-size: var(--cs-fs-xs); color: var(--cs-color-ink-faint); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; }
  .cs-rank-table__cell--rating .cs-op-card__rating { font-family: var(--cs-font-head); font-size: 1.6rem; font-weight: 700; color: var(--cs-color-primary); }
  .cs-rank-table__cta { margin-top: var(--cs-sp-3); display: inline-block; }
  .cs-rank-table__th-mobile { display: none; }
  .cs-rank-table__footnote { font-size: var(--cs-fs-xs); color: var(--cs-color-ink-faint); margin-top: var(--cs-sp-4); text-align: center; }
  @media (max-width: 880px) {
    .cs-rank-table__head { display: none; }
    .cs-rank-table__row { grid-template-columns: 1fr; gap: var(--cs-sp-3); padding: var(--cs-sp-5); }
    .cs-rank-table__cell--rank { text-align: left; font-size: 1.4rem; color: var(--cs-color-accent-deep); }
    .cs-rank-table__th-mobile { display: block; font-size: var(--cs-fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cs-color-ink-faint); margin-bottom: 4px; }
  }

  /* Pillar figure / SVG timeline — bigger caption + embed */
  .cs-figure { margin: var(--cs-sp-8) 0; }
  .cs-figure__img { width: 100%; height: auto; display: block; }
  .cs-figure__img--timeline { max-width: 1080px; margin: 0 auto; }
  .cs-figure__caption {
    font-size: var(--cs-fs-md);
    font-family: var(--cs-font-head);
    color: var(--cs-color-ink-soft);
    margin-top: var(--cs-sp-4);
    text-align: center;
    font-style: italic;
    line-height: var(--cs-lh-snug);
  }
  .cs-figure__embed { margin-top: var(--cs-sp-4); max-width: 720px; margin-inline: auto; }
  .cs-figure__embed summary { font-size: var(--cs-fs-sm); color: var(--cs-color-ink-soft); cursor: pointer; padding: var(--cs-sp-2) 0; }
  .cs-figure__embed textarea { width: 100%; min-height: 90px; font-family: var(--cs-font-mono); font-size: 12px; padding: var(--cs-sp-3); border: 1px solid var(--cs-color-rule); border-radius: var(--cs-radius); margin-top: var(--cs-sp-2); background: var(--cs-color-bg-card); }

  /* Body figure (mid-article images) — generous breathing room before/after */
  .cs-body-figure { margin: var(--cs-sp-9) 0; }
  .cs-body-figure + h2,
  .cs-body-figure + h3 { margin-top: var(--cs-sp-7); }
  .cs-body-figure img { width: 100%; height: auto; border-radius: var(--cs-radius-md); display: block; box-shadow: var(--cs-shadow-warm); }
  .cs-body-figure figcaption {
    font-size: var(--cs-fs-md);
    color: var(--cs-color-ink-soft);
    font-style: italic;
    margin-top: var(--cs-sp-4);
    text-align: center;
    line-height: var(--cs-lh-snug);
    max-width: 720px;
    margin-inline: auto;
  }

  /* Bonus-Hub 4-column nav grid */
  .cs-bonus-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--cs-sp-4);
  }
  @media (max-width: 1024px) { .cs-bonus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 560px)  { .cs-bonus-grid { grid-template-columns: 1fr; } }
  .cs-tile--bonus { background: var(--cs-color-bg-card); border-left: 3px solid var(--cs-color-accent); }
  .cs-tile--bonus .cs-tile__icon { color: var(--cs-color-accent-deep); }

  /* Ratgeber-Hub 2-column split */
  .cs-ratgeber-split {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: var(--cs-sp-7);
    align-items: start;
    padding-block: var(--cs-sp-5);
  }
  @media (max-width: 880px) { .cs-ratgeber-split { grid-template-columns: 1fr; gap: var(--cs-sp-5); } }
  .cs-ratgeber-col__title {
    font-family: var(--cs-font-head);
    font-size: var(--cs-fs-lg);
    font-weight: 600;
    color: var(--cs-color-primary);
    padding-bottom: var(--cs-sp-2);
    margin-bottom: var(--cs-sp-4);
    border-bottom: 1px solid var(--cs-color-rule);
    letter-spacing: 0.01em;
  }
  .cs-ratgeber-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--cs-sp-4); }
  .cs-ratgeber-list li { padding-left: var(--cs-sp-4); border-left: 2px solid var(--cs-color-rule); transition: border-color 0.15s ease; }
  .cs-ratgeber-list li:hover { border-left-color: var(--cs-color-accent); }
  .cs-ratgeber-list li a {
    display: block;
    font-family: var(--cs-font-head);
    font-weight: 600;
    font-size: var(--cs-fs-md);
    color: var(--cs-color-ink);
    text-decoration: none;
    margin-bottom: 2px;
    line-height: var(--cs-lh-snug);
  }
  .cs-ratgeber-list li a:hover { color: var(--cs-color-secondary); }
  .cs-ratgeber-list li span { display: block; font-size: var(--cs-fs-sm); color: var(--cs-color-ink-soft); line-height: var(--cs-lh-snug); }

  /* Lizenz-Trust 2-column split */
  .cs-trust-split {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: var(--cs-sp-7);
    align-items: start;
    padding-block: var(--cs-sp-6);
  }
  @media (max-width: 800px) { .cs-trust-split { grid-template-columns: 1fr; } }
  .cs-trust-split__intro p { font-size: var(--cs-fs-md); line-height: var(--cs-lh-loose); }
  .cs-trust-split__intro p:first-of-type::first-letter {
    font-family: var(--cs-font-head);
    font-size: 4.2em;
    font-weight: 700;
    float: left;
    line-height: 0.9;
    padding-right: var(--cs-sp-3);
    padding-top: 0.1em;
    color: var(--cs-color-accent-deep);
  }
  .cs-info-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--cs-sp-3);
  }
  .cs-info-tile {
    background: var(--cs-color-bg-elev);
    border: 1px solid var(--cs-color-rule);
    border-radius: var(--cs-radius);
    padding: var(--cs-sp-4);
  }
  .cs-info-tile__label { font-size: var(--cs-fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--cs-color-ink-faint); }
  .cs-info-tile__value { font-family: var(--cs-font-mono); font-weight: 500; font-size: var(--cs-fs-lg); color: var(--cs-color-primary); margin-top: var(--cs-sp-1); }
  .cs-info-tile__note  { font-size: var(--cs-fs-xs); color: var(--cs-color-ink-soft); margin-top: var(--cs-sp-2); }

  /* Editorial list — latest guides, single-column not grid */
  .cs-editorial-list {
    display: flex; flex-direction: column;
    border-top: 1px solid var(--cs-color-rule);
  }
  .cs-editorial-list__item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--cs-sp-4);
    padding: var(--cs-sp-5) 0;
    border-bottom: 1px solid var(--cs-color-rule);
    align-items: baseline;
  }
  .cs-editorial-list__title {
    font-family: var(--cs-font-head);
    font-size: var(--cs-fs-lg);
    font-weight: 600;
    color: var(--cs-color-primary);
    text-decoration: none;
  }
  .cs-editorial-list__title:hover { color: var(--cs-color-secondary); }
  .cs-editorial-list__excerpt { color: var(--cs-color-ink-soft); margin-top: var(--cs-sp-2); font-size: var(--cs-fs-base); max-width: 60ch; }
  .cs-editorial-list__meta { font-size: var(--cs-fs-xs); color: var(--cs-color-ink-faint); text-align: right; white-space: nowrap; }

  /* Author block */
  .cs-authors {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--cs-sp-6);
    padding-block: var(--cs-sp-6);
  }
  @media (max-width: 700px) { .cs-authors { grid-template-columns: 1fr; } }
  .cs-author-card {
    display: flex; gap: var(--cs-sp-4); align-items: center;
  }
  .cs-author-card__portrait {
    width: 72px; height: 72px; border-radius: 50%;
    background: var(--cs-color-secondary-soft);
    flex: none;
    border: 2px solid var(--cs-color-accent);
  }
  .cs-author-card__portrait img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
  .cs-author-card__name { font-family: var(--cs-font-head); font-size: var(--cs-fs-md); font-weight: 600; color: var(--cs-color-primary); }
  .cs-author-card__role { font-size: var(--cs-fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--cs-color-ink-faint); margin-top: 2px; }
  .cs-author-card__bio  { font-size: var(--cs-fs-sm); color: var(--cs-color-ink-soft); margin-top: var(--cs-sp-2); }

  /* RG notice — must appear on every money page */
  .rg-notice {
    background: var(--cs-color-bg-elev);
    border-left: 4px solid var(--cs-color-danger);
    padding: var(--cs-sp-5);
    border-radius: var(--cs-radius);
    font-size: var(--cs-fs-sm);
    line-height: var(--cs-lh-snug);
    color: var(--cs-color-ink);
    margin-block: var(--cs-sp-6);
  }
  .rg-notice strong { display: block; margin-bottom: var(--cs-sp-2); color: var(--cs-color-danger); font-size: var(--cs-fs-base); }

  /* Section heading w/ rule */
  .cs-section-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--cs-sp-4);
    margin-bottom: var(--cs-sp-5);
    border-bottom: 1px solid var(--cs-color-rule);
    padding-bottom: var(--cs-sp-3);
  }
  .cs-section-head h2 { font-size: var(--cs-fs-xl); }
  /* Homepage matches the wide-article H2 scale on inner pages */
  body.home .cs-section-head h2 { font-size: var(--cs-fs-2xl); line-height: var(--cs-lh-snug); }
  body.home .cs-closing h2 { font-size: var(--cs-fs-2xl); line-height: var(--cs-lh-snug); }
  /* Widen the homepage main container to match the wide-article scale */
  body.home #cs-main.cs-container { max-width: var(--cs-container-wide); }
  /* Release every inherited reading-width cap on homepage prose blocks */
  body.home main > section > p,
  body.home main > section > header + p,
  body.home .cs-hero__deck,
  body.home .cs-pillar-cta__text,
  body.home .cs-editorial-list__excerpt,
  body.home .cs-trust-split__intro p { max-width: none; }
  .cs-section-head__link { font-size: var(--cs-fs-sm); color: var(--cs-color-secondary); text-decoration: none; border-bottom: 1px solid currentColor; }

  /* Pillar article body (used on /online-casinos/) */
  .cs-article {
    max-width: 760px;
    margin-inline: auto;
  }
  .cs-article--wide {
    max-width: none;
    margin-inline: 0;
    margin-top: var(--cs-sp-8);
  }
  .cs-article--wide > p,
  .cs-article--wide > ul,
  .cs-article--wide > ol {
    max-width: none;
  }
  .cs-article--wide > h2,
  .cs-article--wide > h3 {
    margin-left: 0;
    max-width: none;
    font-size: var(--cs-fs-2xl);
    line-height: var(--cs-lh-snug);
  }
  .cs-article--wide > h3 { font-size: var(--cs-fs-xl); }
  /* Hero subtitle (cs-hero__deck) defaults to 56ch — release the cap on wide pages */
  .cs-article--wide .cs-hero__deck { max-width: none; }
  /* FAQ answers must fill the section width too */
  .cs-faq p { max-width: none; }
  .cs-article > h2 { margin-top: var(--cs-sp-7); }
  .cs-article > h3 { margin-top: var(--cs-sp-6); }
  .cs-article > p, .cs-article > ul, .cs-article > ol { margin-top: var(--cs-sp-4); }
  .cs-article ul, .cs-article ol { padding-left: 1.2em; }
  .cs-article li { margin-block: var(--cs-sp-2); }
  .cs-article > p:first-of-type::first-letter {
    font-family: var(--cs-font-head);
    font-size: 4em;
    font-weight: 700;
    float: left;
    line-height: 0.92;
    padding-right: var(--cs-sp-3);
    color: var(--cs-color-accent-deep);
  }
  .cs-article blockquote {
    margin: var(--cs-sp-6) 0;
    padding-left: var(--cs-sp-5);
    border-left: 3px solid var(--cs-color-accent);
    font-family: var(--cs-font-head);
    font-style: italic;
    font-size: var(--cs-fs-lg);
    color: var(--cs-color-primary);
    line-height: var(--cs-lh-snug);
  }
  .cs-article table {
    margin-block: var(--cs-sp-5);
    font-size: var(--cs-fs-sm);
    border: 1px solid var(--cs-color-rule);
    border-radius: var(--cs-radius);
    overflow: hidden;
  }
  .cs-article th, .cs-article td {
    padding: var(--cs-sp-3) var(--cs-sp-4);
    text-align: left;
    border-bottom: 1px solid var(--cs-color-rule);
  }
  .cs-article th {
    background: var(--cs-color-primary);
    color: #F5F1E8;
    font-weight: 600;
    font-size: var(--cs-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .cs-article tr:last-child td { border-bottom: 0; }
  .cs-article tr:nth-child(even) td { background: var(--cs-color-bg-elev); }

  /* FAQ accordion */
  .cs-faq { margin-block: var(--cs-sp-6); }
  .cs-faq details {
    border-bottom: 1px solid var(--cs-color-rule);
    padding: var(--cs-sp-4) 0;
  }
  .cs-faq summary {
    cursor: pointer;
    font-family: var(--cs-font-head);
    font-size: var(--cs-fs-md);
    font-weight: 600;
    color: var(--cs-color-primary);
    list-style: none;
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--cs-sp-4);
  }
  .cs-faq summary::-webkit-details-marker { display: none; }
  .cs-faq summary::after {
    content: "+";
    font-family: var(--cs-font-mono);
    font-weight: 500;
    font-size: var(--cs-fs-lg);
    color: var(--cs-color-accent-deep);
  }
  .cs-faq details[open] summary::after { content: "−"; }
  .cs-faq p { margin-top: var(--cs-sp-3); color: var(--cs-color-ink-soft); }

  /* Provider thumbnails grid (Spieltyp pages) */
  .cs-provider-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--cs-sp-5);
    margin-block: var(--cs-sp-6);
    max-width: none;
  }
  .cs-provider-card {
    margin: 0;
    background: var(--cs-color-bg-card, #fff);
    border: 1px solid var(--cs-color-rule);
    border-radius: var(--cs-radius-md);
    padding: var(--cs-sp-4);
    display: flex; flex-direction: column; gap: var(--cs-sp-3);
    box-shadow: 0 1px 2px rgba(15,42,68,0.04);
    transition: box-shadow .18s ease, transform .18s ease;
  }
  .cs-provider-card:hover { box-shadow: 0 6px 18px rgba(15,42,68,0.10); transform: translateY(-2px); }
  .cs-provider-card__logo {
    height: 80px;
    display: flex; align-items: center; justify-content: center;
    padding: 4px 8px;
  }
  .cs-provider-card__logo img {
    max-width: 100%; max-height: 100%;
    width: auto; height: auto;
    object-fit: contain; display: block;
  }
  .cs-provider-card figcaption {
    font-size: var(--cs-fs-sm);
    line-height: var(--cs-lh-snug);
    color: var(--cs-color-ink);
    border-top: 1px solid var(--cs-color-rule);
    padding-top: var(--cs-sp-3);
  }
  .cs-provider-card figcaption strong {
    display: block;
    font-family: var(--cs-font-head);
    color: var(--cs-color-primary);
    margin-bottom: var(--cs-sp-1);
  }

  /* Game thumbnails grid */
  .cs-game-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--cs-sp-5);
    margin-block: var(--cs-sp-6);
    max-width: none;
  }
  .cs-game-card {
    margin: 0;
    display: flex; flex-direction: column; gap: var(--cs-sp-3);
  }
  .cs-game-card img {
    width: 100%; height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    border-radius: var(--cs-radius-md);
    box-shadow: 0 4px 14px rgba(15,42,68,0.10);
  }
  /* Portrait variant — for vendor game-poster artwork (5:7) */
  .cs-game-grid--portrait { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .cs-game-grid--portrait .cs-game-card img { aspect-ratio: 5 / 7; }
  .cs-game-card figcaption {
    font-size: var(--cs-fs-sm);
    line-height: var(--cs-lh-snug);
    color: var(--cs-color-ink-soft);
  }
  .cs-game-card figcaption strong {
    font-family: var(--cs-font-head);
    color: var(--cs-color-primary);
  }

  /* Bottom-of-page Spieltyp navigation */
  .cs-spieltyp-bottom-nav {
    margin-top: var(--cs-sp-9);
    padding-top: var(--cs-sp-7);
    border-top: 2px solid var(--cs-color-rule);
  }
  .cs-spieltyp-bottom-nav h2 {
    font-size: var(--cs-fs-xl);
    margin-bottom: var(--cs-sp-5);
  }
  .cs-spieltyp-bottom-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--cs-sp-4);
  }
  .cs-spieltyp-bottom-card {
    display: flex; flex-direction: column; gap: var(--cs-sp-2);
    padding: var(--cs-sp-5);
    background: var(--cs-color-bg-elev);
    border: 1px solid var(--cs-color-rule);
    border-radius: var(--cs-radius-md);
    text-decoration: none;
    color: inherit;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  }
  .cs-spieltyp-bottom-card:hover {
    border-color: var(--cs-color-secondary);
    box-shadow: 0 6px 18px rgba(15,42,68,0.10);
    transform: translateY(-2px);
  }
  .cs-spieltyp-bottom-card i {
    font-size: 1.6rem;
    color: var(--cs-color-accent-deep);
  }
  .cs-spieltyp-bottom-card__title {
    font-family: var(--cs-font-head);
    font-weight: 700;
    font-size: var(--cs-fs-md);
    color: var(--cs-color-primary);
  }
  .cs-spieltyp-bottom-card__desc {
    font-size: var(--cs-fs-sm);
    color: var(--cs-color-ink-soft);
    line-height: var(--cs-lh-snug);
  }
}

/* ------------------------------------------------------------------
   UTILITIES
   ------------------------------------------------------------------ */

@layer utilities {
  .cs-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .cs-mt-0 { margin-top: 0 !important; }
  .cs-mt-3 { margin-top: var(--cs-sp-3); }
  .cs-mt-5 { margin-top: var(--cs-sp-5); }
  .cs-mb-5 { margin-bottom: var(--cs-sp-5); }
  .cs-text-center { text-align: center; }
  .cs-mono { font-family: var(--cs-font-mono); font-weight: 500; }
}

/* ------------------------------------------------------------------
   WP OVERRIDES — Admin bar, block editor, WP defaults
   ------------------------------------------------------------------ */

@layer wp-overrides {
  body.admin-bar .cs-site-header { top: 32px; }
  @media (max-width: 782px) {
    body.admin-bar .cs-site-header { top: 46px; }
  }
  .wp-caption { max-width: 100%; }
  .alignleft  { float: left;  margin-right: var(--cs-sp-4); margin-bottom: var(--cs-sp-3); }
  .alignright { float: right; margin-left:  var(--cs-sp-4); margin-bottom: var(--cs-sp-3); }
  .aligncenter { display: block; margin-inline: auto; }
  .screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
}