/* ==========================================================================
   pferdewetten.info — theme pw
   Palette: turf (racecourse-green-black + antique gilt + winning-post green)
   Type: Oswald (signage) + Bitter (slab body) + Azeret Mono (numerals)
   Signature: tote-tick / flip-in / photo-finish  (+ Zielfoto, Renntag strip)
   Authored with PostCSS (nesting + custom-media + autoprefixer).
   ========================================================================== */

/* ---------- self-hosted fonts ---------- */
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/oswald-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/oswald-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/oswald-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/oswald-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Bitter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/bitter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Bitter"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/bitter-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Bitter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/bitter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Bitter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/bitter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Azeret Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/azeret-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Azeret Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/azeret-mono-latin-700-normal.woff2") format("woff2"); }

/* ---------- tokens ---------- */
:root {
  --pw-ink: #08130e;         /* racecourse-green-black field */
  --pw-ink-2: #060f0b;       /* deepest */
  --pw-green: #0c241a;       /* bottle-green panel */
  --pw-green-2: #10301f;     /* hover panel */
  --pw-gilt: #b98a3c;        /* antique brass */
  --pw-gilt-2: #d3ac63;      /* lit gilt */
  --pw-gilt-lo: #7c5c28;
  --pw-turf: #3fa66a;        /* winning-post green highlight */
  --pw-turf-lit: #57c483;
  --pw-parch: #ece6d5;       /* headings / high-contrast */
  --pw-text: #c9cec2;        /* body on dark */
  --pw-muted: rgba(236,230,213,.52);
  --pw-claret: #b24a3f;      /* 18+/danger */
  --pw-line: rgba(185,138,60,.28);
  --pw-line-soft: rgba(236,230,213,.10);
  --pw-rad: 3px;             /* small radius */
  --pw-wrap: 1180px;
  --pw-ease: cubic-bezier(.2,.9,.3,1);   /* tote-tick: quick snap, micro-settle */
  --pw-fast: 170ms;
}

/* ---------- reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--pw-ink);
  color: var(--pw-text);
  font-family: "Bitter", Georgia, serif;
  font-size: 1.02rem;
  line-height: 1.72;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--pw-gilt-2); text-decoration: none; }

h1, h2, h3, h4, h5 {
  font-family: "Oswald", "Arial Narrow", sans-serif;
  color: var(--pw-parch);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: .005em;
  margin: 0 0 .6em;
}
h1 { font-size: clamp(2.3rem, 5.2vw, 4.1rem); font-weight: 700; text-transform: uppercase; letter-spacing: .01em; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); text-transform: uppercase; }
h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); }
p { margin: 0 0 1.1em; }

.pw-mono { font-family: "Azeret Mono", ui-monospace, monospace; }
.pw-kicker {
  font-family: "Azeret Mono", monospace;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .32em; text-transform: uppercase;
  color: var(--pw-gilt);
}
.pw-wrap { max-width: var(--pw-wrap); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.2rem); }
.pw-skip { position: absolute; left: -999px; }
.pw-skip:focus { left: 1rem; top: 1rem; z-index: 200; background: var(--pw-gilt); color: #000; padding: .6rem 1rem; }

/* ---------- header ---------- */
.pw-head {
  position: sticky; top: 0; z-index: 60;
  background: rgba(6,15,11,.92);
  backdrop-filter: saturate(1.2) blur(6px);
  border-bottom: 1px solid var(--pw-line);
}
.pw-head__in { display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; height: 74px; }
.pw-brand { display: flex; align-items: center; gap: .7rem; color: var(--pw-gilt); }
.pw-marke { width: 40px; height: 40px; flex: none; }
.pw-brand__wort { font-family: "Oswald", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: 1.35rem; color: var(--pw-gilt); }
.pw-brand__wort b { color: var(--pw-parch); font-weight: 400; opacity: .65; }
.pw-nav { display: flex; align-items: center; gap: clamp(.9rem, 2vw, 2.1rem); }
.pw-nav a {
  font-family: "Azeret Mono", monospace; font-size: .72rem; font-weight: 400;
  letter-spacing: .22em; text-transform: uppercase; color: var(--pw-text);
  position: relative; padding: .3rem 0;
}
.pw-badge18 {
  font-family: "Azeret Mono", monospace; font-size: .62rem; font-weight: 700; letter-spacing: .12em;
  color: var(--pw-claret); border: 1px solid rgba(178,74,63,.55); padding: .22rem .5rem; border-radius: 2px;
}
.pw-burger { display: none; background: none; border: 0; color: var(--pw-gilt); cursor: pointer; }
.pw-burger svg { width: 26px; height: 26px; }

/* ---------- background-wipe link treatment (signature) ----------
   A turf-green cell fill sweeps in left->right BEHIND the label — like selecting a
   cell on a tote board. No underline / no scaleX bar (both blocked fleet-wide as of
   2026-07-21). background-size wipe = no reflow, keyboard parity via :focus-visible. */
.pw-nav a,
.pw-flink {
  background-image: linear-gradient(rgba(63,166,106,.22), rgba(63,166,106,.22));
  background-repeat: no-repeat; background-position: left center; background-size: 0% 100%;
  transition: background-size var(--pw-fast) var(--pw-ease), color var(--pw-fast) var(--pw-ease);
}
.pw-nav a:hover, .pw-nav a:focus-visible,
.pw-flink:hover, .pw-flink:focus-visible { background-size: 100% 100%; color: var(--pw-parch); }
.pw-flink { position: relative; color: var(--pw-gilt-2); }
.entry-content a:not(.pw-btn) { color: var(--pw-turf-lit); border-bottom: 1px solid rgba(63,166,106,.35); }
.entry-content a:not(.pw-btn):hover { color: var(--pw-parch); border-bottom-color: var(--pw-turf); }

/* ---------- buttons ---------- */
.pw-btn {
  display: inline-block; font-family: "Oswald", sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em; font-size: .82rem;
  padding: .95rem 2.1rem; border-radius: var(--pw-rad); cursor: pointer;
  transition: transform var(--pw-fast) var(--pw-ease), background var(--pw-fast) var(--pw-ease), color var(--pw-fast);
}
.pw-btn--gilt { background: var(--pw-gilt); color: #17110a; box-shadow: 0 0 26px rgba(185,138,60,.24); }
.pw-btn--gilt:hover { background: var(--pw-gilt-2); transform: translateY(-1px); }
.pw-btn--ghost { border: 1px solid var(--pw-gilt); color: var(--pw-gilt-2); }
.pw-btn--ghost:hover { background: var(--pw-gilt); color: #17110a; }

/* ---------- hero / tote-board ---------- */
.pw-tote {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--pw-green) 0%, var(--pw-ink-2) 100%);
  box-shadow: inset 0 0 120px rgba(0,0,0,.7);
  border-bottom: 1px solid var(--pw-line);
}
.pw-tote__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pw-tote__bg picture { display: block; width: 100%; height: 100%; }
.pw-tote__bg img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; opacity: .24; }
.pw-tote__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,19,14,.45) 0%, rgba(8,19,14,.82) 100%); }
.pw-tote__grid {
  position: absolute; inset: 0; opacity: .16; pointer-events: none; z-index: 1;
  background-image: repeating-linear-gradient(90deg, transparent 0 calc(100%/12 - 1px), var(--pw-line) calc(100%/12 - 1px) calc(100%/12));
}
.pw-hero { padding: clamp(4rem, 11vw, 8.5rem) 0; text-align: center; position: relative; z-index: 2; }
.pw-hero__badge { display: inline-block; border: 1px solid var(--pw-gilt); color: var(--pw-gilt); padding: .34rem 1rem; margin-bottom: 1.6rem; }
.pw-hero h1 { max-width: 15ch; margin-inline: auto; }
.pw-hero h1 em { font-style: normal; color: var(--pw-gilt-2); }
.pw-hero__sub { max-width: 46ch; margin: 1.4rem auto 2.3rem; color: var(--pw-muted); font-size: 1.12rem; }

/* ---------- Renntag split-flap strip (signature moment) ---------- */
.pw-renntag {
  display: inline-flex; align-items: stretch; gap: 0; margin-top: 2.4rem;
  border: 1px solid var(--pw-line); border-radius: var(--pw-rad); overflow: hidden;
  background: rgba(6,15,11,.6);
}
.pw-renntag__lab { display: flex; align-items: center; padding: .55rem 1rem; background: var(--pw-gilt); color: #17110a; font-family: "Azeret Mono", monospace; font-size: .62rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.pw-renntag__flap { display: flex; align-items: center; gap: 1.1rem; padding: .55rem 1.2rem; }
.pw-renntag__name { font-family: "Oswald", sans-serif; text-transform: uppercase; color: var(--pw-parch); font-weight: 600; letter-spacing: .04em; }
.pw-renntag__meta { font-family: "Azeret Mono", monospace; font-size: .82rem; color: var(--pw-turf-lit); }
.pw-flap {
  display: inline-block; min-width: 1.1em; padding: .05em .16em; margin: 0 .02em;
  background: #060f0b; color: var(--pw-gilt-2); border-radius: 2px;
  font-family: "Azeret Mono", monospace; font-weight: 700;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.6); text-align: center;
}

/* ---------- odds board (operator ranking) ---------- */
.pw-sec { padding: clamp(3.4rem, 7vw, 6rem) 0; }
.pw-sec--panel { background: var(--pw-green); border-block: 1px solid var(--pw-line); }
.pw-sec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--pw-line); padding-bottom: 1.4rem; margin-bottom: 2.4rem; }
.pw-sec__head p { margin: .4rem 0 0; color: var(--pw-muted); font-family: "Azeret Mono", monospace; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; }
.pw-liveclock { font-family: "Azeret Mono", monospace; color: var(--pw-turf-lit); font-size: 1rem; text-shadow: 0 0 10px rgba(63,166,106,.35); }

.pw-board { display: flex; flex-direction: column; gap: .55rem; }
.pw-board__h,
.pw-row {
  display: grid; align-items: center; gap: 1rem;
  /* last track FIXED (was `auto`): the header's CTA cell is empty, so `auto`
     resolved to 0 there but ~165px in the rows -> the fr tracks redistributed
     unevenly and the labels drifted off their columns. A fixed width makes both
     grids resolve identically. */
  grid-template-columns: 46px minmax(140px,2.4fr) 92px 1.3fr 2fr 184px;
}
.pw-board__h { padding: 0 1.6rem .4rem; }
.pw-board__h span { font-family: "Azeret Mono", monospace; font-size: .6rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--pw-gilt); opacity: .7; }
.pw-row {
  padding: 1.35rem 1.6rem; background: var(--pw-ink-2);
  border: 1px solid var(--pw-line-soft); border-radius: var(--pw-rad);
  transition: border-color var(--pw-fast) var(--pw-ease), background var(--pw-fast);
}
.pw-row:hover { border-color: var(--pw-line); background: #0a1a12; }
.pw-row--top { background: var(--pw-green); border: 1px solid var(--pw-gilt); box-shadow: 0 0 26px rgba(185,138,60,.12); position: relative; overflow: hidden; }
.pw-pos { font-family: "Azeret Mono", monospace; font-size: 1.7rem; font-weight: 700; color: rgba(236,230,213,.4); }
.pw-row--top .pw-pos { color: var(--pw-turf-lit); text-shadow: 0 0 12px rgba(63,166,106,.5); }
.pw-op { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.pw-op__txt { display: block; min-width: 0; }
.pw-op__name { font-family: "Oswald", sans-serif; font-size: 1.28rem; font-weight: 600; text-transform: uppercase; color: var(--pw-parch); letter-spacing: .02em; }
.pw-op__lic { display: block; font-family: "Azeret Mono", monospace; font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--pw-gilt); margin-top: .15rem; }
/* ---- operator logo chip (light card on the dark board) ----
   Logo files are pre-normalised to one identical 3:2 white canvas with baked-in
   padding, so every chip is a 3:2 box and the image simply fills it -> uniform. */
.pw-logo-chip { display: inline-flex; flex: 0 0 auto; background: #fff; border-radius: 5px; box-shadow: 0 1px 3px rgba(0,0,0,.4); overflow: hidden; }
.pw-logo-chip img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; display: block; }
.pw-logo-chip--zeile { width: 60px; height: 40px; }
.pw-logo-chip--gross { width: 138px; height: 92px; border-radius: 8px; }
/* default (comparison-table) chip */
.pw-logo-chip:not(.pw-logo-chip--zeile):not(.pw-logo-chip--gross) { width: 54px; height: 36px; }
.pw-cell-op { display: inline-flex; align-items: center; gap: .55rem; }
@media (max-width: 640px) { .pw-op { gap: .5rem; } .pw-logo-chip--zeile { width: 51px; height: 34px; } }
.pw-rate { font-family: "Azeret Mono", monospace; font-size: 1.5rem; font-weight: 700; color: var(--pw-turf-lit); text-shadow: 0 0 10px rgba(63,166,106,.3); }
.pw-rate small { color: var(--pw-muted); font-size: .7rem; }
.pw-bonus { font-family: "Oswald", sans-serif; font-weight: 600; color: var(--pw-parch); text-transform: uppercase; letter-spacing: .02em; }
.pw-verdict { color: var(--pw-muted); font-style: italic; font-size: .95rem; }
/* CTA cell: primary /go/ button (leaves site) + secondary internal review link */
.pw-cta { display: flex; flex-direction: column; align-items: stretch; gap: .5rem; }
.pw-row .pw-cta { justify-self: end; width: 100%; }
.pw-cta .pw-btn { width: 100%; text-align: center; padding-inline: 1rem; }
.pw-cta__info {
  font-family: "Azeret Mono", monospace; font-size: .56rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; text-align: center;
  color: var(--pw-gilt); background-size: 0% 100%;
}
.pw-cta__info:hover, .pw-cta__info:focus-visible { color: var(--pw-parch); }
.pw-flag { position: absolute; top: 0; left: 0; background: var(--pw-gilt); color: #17110a; font-family: "Azeret Mono", monospace; font-size: .55rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; padding: .22rem .7rem; border-bottom-right-radius: var(--pw-rad); }

/* Zielfoto (photo-finish) sweep on the Testsieger row, once on load */
.pw-row--top::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent 0, rgba(63,166,106,.16) 46%, rgba(236,230,213,.5) 50%, rgba(63,166,106,.16) 54%, transparent 100%);
  transform: translateX(-120%);
}
.pw-js .pw-row--top.is-develop::after { animation: pw-zielfoto 1150ms var(--pw-ease) 1 both; }
@keyframes pw-zielfoto { to { transform: translateX(120%); } }

/* ---------- generic panels / cards ---------- */
.pw-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; background: var(--pw-line-soft); }
.pw-card { padding: 2.4rem 1.9rem; background: var(--pw-ink-2); transition: background var(--pw-fast) var(--pw-ease); }
.pw-card:hover { background: var(--pw-green-2); }
.pw-card__tag { display: block; font-family: "Azeret Mono", monospace; font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--pw-gilt); margin-bottom: 1rem; }
.pw-card h3 { color: var(--pw-parch); margin-bottom: .6rem; }
.pw-card p { color: var(--pw-muted); font-size: .95rem; margin: 0; }
.pw-ikon { width: 30px; height: 30px; color: var(--pw-gilt); margin-bottom: 1rem; }

/* two-column feature (Quoten) */
.pw-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.pw-deflist { display: flex; flex-direction: column; gap: 1.6rem; margin-top: 1.8rem; }
.pw-def { display: flex; gap: 1.2rem; }
.pw-def__mark { width: 46px; height: 46px; flex: none; border: 1px solid var(--pw-line); display: flex; align-items: center; justify-content: center; font-family: "Azeret Mono", monospace; color: var(--pw-turf-lit); border-radius: var(--pw-rad); }
.pw-def h4 { font-family: "Oswald", sans-serif; color: var(--pw-parch); margin: 0 0 .3rem; text-transform: uppercase; font-size: 1.15rem; }
.pw-def p { margin: 0; color: var(--pw-muted); font-size: .93rem; }

/* site-specific callout (NOT the border-l-4 AI-slop default): a "Form-Notiz" —
   a ticketed margin note with a mono ticket tab + gilt rule top, turf tab */
.pw-notiz {
  position: relative; margin: 2rem 0; padding: 1.7rem 1.8rem 1.7rem 1.9rem;
  background: var(--pw-green); border: 1px solid var(--pw-line); border-radius: var(--pw-rad);
  border-top: 3px solid var(--pw-turf);
}
.pw-notiz__tab {
  position: absolute; top: -1px; right: 1.4rem; transform: translateY(-50%);
  background: var(--pw-ink); border: 1px solid var(--pw-turf);
  font-family: "Azeret Mono", monospace; font-size: .58rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--pw-turf-lit); padding: .28rem .7rem; border-radius: 2px;
}
.pw-notiz p:last-child { margin-bottom: 0; }

/* ---------- content / prose ---------- */
.pw-main { padding: clamp(2.6rem, 6vw, 4.6rem) 0; }
.entry-content { max-width: 72ch; margin-inline: auto; }
.entry-content > * { max-width: 72ch; }
.entry-content h2 { margin-top: 2.2em; }
.entry-content h3 { margin-top: 1.6em; color: var(--pw-gilt-2); }
.entry-content ul, .entry-content ol { padding-left: 1.3rem; }
.entry-content li { margin-bottom: .5rem; }
.entry-content strong { color: var(--pw-parch); }
.entry-content table { width: 100%; border-collapse: collapse; margin: 1.6rem 0; font-size: .95rem; }
.entry-content th, .entry-content td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--pw-line-soft); }
.entry-content th { font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .05em; color: var(--pw-gilt); font-weight: 600; }
/* wide comparison tables scroll INSIDE their own box so the page never scrolls sideways
   (390px viewport bug on /pferdewetten-anbieter/). Wrap wide tables in .pw-tablescroll. */
.pw-tablescroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.6rem 0; max-width: 100%; }
.pw-tablescroll > table { margin: 0; min-width: 34rem; }

/* data figure / infographic */
.pw-figure { margin: 2.4rem 0; border: 1px solid var(--pw-line); border-radius: var(--pw-rad); background: var(--pw-ink-2); padding: 1.4rem 1.5rem 1.1rem; }
.pw-figure svg { display: block; width: 100%; height: auto; }
.pw-figure figcaption { font-family: "Azeret Mono", monospace; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--pw-muted); margin-top: 1rem; }

/* page hero banner (featured image) */
.pw-phero { position: relative; border: 1px solid var(--pw-line); border-radius: var(--pw-rad); overflow: hidden; margin-bottom: 2.6rem; }
.pw-phero img { display: block; width: 100%; height: clamp(220px, 34vw, 430px); -o-object-fit: cover; object-fit: cover; }
.pw-phero__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,19,14,.10) 0%, rgba(8,19,14,.52) 52%, rgba(8,19,14,.93) 100%); }
.pw-phero__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(1.4rem, 3.4vw, 2.6rem); }
.pw-phero__cap h1 { margin: .5rem 0 0; max-width: 26ch; }

.pw-artikel-kopf { border-bottom: 1px solid var(--pw-line); padding-bottom: 1.6rem; margin: 0 auto 2.2rem; max-width: 72ch; }
.pw-artikel-kopf .pw-datum { font-family: "Azeret Mono", monospace; font-size: .72rem; letter-spacing: .1em; color: var(--pw-muted); text-transform: uppercase; }

/* FAQ accordion */
.pw-faq { margin: 2.4rem 0; }
.pw-faq details { border: 1px solid var(--pw-line); border-radius: var(--pw-rad); margin-bottom: .7rem; background: var(--pw-ink-2); }
.pw-faq summary { list-style: none; cursor: pointer; padding: 1.1rem 1.3rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pw-faq summary::-webkit-details-marker { display: none; }
.pw-faq h3 { font-family: "Oswald", sans-serif; font-size: 1.08rem; margin: 0; color: var(--pw-parch); text-transform: none; letter-spacing: 0; font-weight: 500; }
.pw-faq .pw-faq__chev { width: 20px; height: 20px; color: var(--pw-gilt); flex: none; transition: transform var(--pw-fast) var(--pw-ease); }
.pw-faq details[open] .pw-faq__chev { transform: rotate(90deg); }
.pw-faq__body { padding: 0 1.3rem 1.2rem; color: var(--pw-text); }
.pw-faq__body p:last-child { margin-bottom: 0; }

/* review header meta strip */
.pw-metrik { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px,1fr)); gap: 1px; background: var(--pw-line-soft); border: 1px solid var(--pw-line); border-radius: var(--pw-rad); margin: 1.8rem auto 2.2rem; max-width: 72ch; overflow: hidden; }
.pw-metrik div { background: var(--pw-ink-2); padding: 1.2rem 1.3rem; }
.pw-metrik dt { font-family: "Azeret Mono", monospace; font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--pw-gilt); margin: 0 0 .4rem; }
.pw-metrik dd { margin: 0; font-family: "Oswald", sans-serif; font-size: 1.25rem; color: var(--pw-parch); }
.pw-metrik .pw-metrik__rate { color: var(--pw-turf-lit); }

/* ---------- footer ---------- */
.pw-foot { background: var(--pw-ink-2); border-top: 1px solid var(--pw-line); padding: clamp(3rem,6vw,5rem) 0 2.4rem; color: var(--pw-muted); font-size: .92rem; }
.pw-foot__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: clamp(2rem,5vw,4rem); margin-bottom: 3rem; }
.pw-foot h5 { font-family: "Azeret Mono", monospace; font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--pw-parch); margin: 0 0 1.3rem; }
.pw-foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.pw-foot__legal { display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: center; justify-content: space-between; padding-top: 1.8rem; border-top: 1px solid var(--pw-line-soft); }
.pw-foot__legal p { margin: 0; font-family: "Azeret Mono", monospace; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; }
.pw-foot__18 { display: flex; align-items: center; gap: 1rem; }
.pw-foot__18 span { border: 1px solid rgba(178,74,63,.5); color: var(--pw-claret); padding: .3rem .55rem; font-family: "Azeret Mono", monospace; font-size: .62rem; font-weight: 700; }

/* legality note */
.pw-legal-note { background: var(--pw-ink-2); border-top: 1px solid var(--pw-line-soft); padding: 2.6rem 0; }
.pw-legal-note p { max-width: 90ch; font-size: .82rem; color: var(--pw-muted); margin: 0; }

/* ---------- clip-wipe reveal (signature) ----------
   Rows/cards "unroll" left->right like a results ticker printing across — pairs with
   the Zielfoto photo-finish moment. Replaces the fade-rise (opacity+translateY),
   blocked fleet-wide as of 2026-07-21. Never on the LCP hero. Fails open: without JS
   the `.pw-js` scope never matches, so content is fully visible. */
.pw-js .pw-reveal { clip-path: inset(0 100% 0 0); }
.pw-js .pw-reveal.is-in { clip-path: inset(0 0 0 0); transition: clip-path 520ms var(--pw-ease); }

/* ---------- responsive ---------- */

@media (max-width: 960px) {
  .pw-nav { display: none; }
  .pw-burger { display: inline-flex; }
  .pw-split { grid-template-columns: 1fr; }
  .pw-foot__grid { grid-template-columns: 1fr 1fr; }
  .pw-board__h { display: none; }
  .pw-row { grid-template-columns: 40px 1fr auto; row-gap: .5rem; }
  .pw-row .pw-rate-cell, .pw-row .pw-bonus-cell { grid-column: 2; }
  .pw-verdict { grid-column: 1 / -1; }
  .pw-row .pw-cta { grid-column: 1 / -1; justify-self: stretch; text-align: center; }
}
@media (max-width: 720px) {
  .pw-foot__grid { grid-template-columns: 1fr; }
  h1 { font-size: 2.2rem; }
}

/* nav drawer (mobile) */
.pw-nav.is-open { display: flex; position: fixed; inset: 74px 0 auto 0; flex-direction: column; gap: 0; background: var(--pw-ink-2); border-bottom: 1px solid var(--pw-line); padding: 1rem 0; }
.pw-nav.is-open a { padding: .9rem clamp(1rem,4vw,2.2rem); border-bottom: 1px solid var(--pw-line-soft); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .pw-js .pw-reveal { clip-path: none; }
  .pw-row--top::after { display: none; }
}