/* ============================================================================
   Spezitest stylesheet — vendored from the "Spezitest Design System" project
   (claude.ai/design, project 4f98487d-8b5d-4676-97f6-ef705d5cab1e).

   This is a concatenation of the design system's token files, css/base.css and
   css/components.css, in the order declared by its styles.css, followed by a
   small local compatibility block that defines variables the upstream files
   reference but do not yet declare. Do not hand-edit the vendored sections;
   re-generate this file when the design system changes (see docs/DESIGN_SYSTEM
   notes in the project).
   ============================================================================ */

/* --- tokens/colors.css ---------------------------------------------------- */
:root{
  --navy:#002D55;
  --red:#E60005;
  --gray:#646567;
  --white:#FFFFFF;
  --black:#000000;

  --navy-900:#001A31;
  --navy-700:#002444;
  --navy-100:#D9E0E6;
  --navy-050:#EDF1F4;
  --red-900:#A80004;
  --gray-700:#4A4B4D;
  --gray-300:#B7B8B9;
  --gray-150:#E3E4E5;
  --gray-075:#F2F2F2;

  --text-strong:var(--navy);
  --text-body:var(--gray-700);
  --text-muted:var(--gray);
  --text-editorial:var(--black);
  --text-inverse:var(--white);
  --text-accent:var(--red);
  --text-on-navy:var(--white);
  --text-on-red:var(--white);
  --text-link:var(--navy);
  --text-link-hover:var(--red);

  --surface-page:var(--white);
  --surface-subtle:var(--gray-075);
  --surface-tint:var(--navy-050);
  --surface-card:var(--white);
  --surface-invert:var(--navy);
  --surface-accent:var(--red);
  --surface-gray:var(--gray);
  --surface-photo:var(--white);

  --line-hairline:var(--gray-150);
  --line-strong:var(--navy);
  --line-accent:var(--red);
  --line-on-navy:rgba(255,255,255,.28);

  --action-primary:var(--navy);
  --action-primary-hover:var(--navy-700);
  --action-primary-active:var(--navy-900);
  --action-accent:var(--red);
  --action-accent-hover:var(--red-900);
  --focus-ring:var(--red);
  --focus-ring-inverse:var(--white);

  --state-identified-fg:var(--gray-700);
  --state-identified-bg:var(--white);
  --state-identified-line:var(--gray);
  --state-acquired-fg:var(--white);
  --state-acquired-bg:var(--navy);
  --state-acquired-line:var(--navy);
  --state-tested-fg:var(--white);
  --state-tested-bg:var(--red);
  --state-tested-line:var(--red);

  --feedback-error-fg:var(--red-900);
  --feedback-error-bg:#FDEBEB;
  --feedback-info-fg:var(--navy);
  --feedback-info-bg:var(--navy-050);
}

/* --- tokens/typography.css ---------------------------------------------- */
:root{
  --font-core:Arial, Helvetica, sans-serif;
  --font-display:Arial, Helvetica, sans-serif;
  --font-mono:"Courier New", Courier, monospace;

  --fw-regular:400;
  --fw-bold:700;

  --fs-d1:clamp(2.5rem,9vw,5.5rem);
  --fs-d2:clamp(2rem,6vw,3.75rem);
  --fs-d3:clamp(1.625rem,4.5vw,2.5rem);
  --fs-h1:1.875rem;
  --fs-h2:1.5rem;
  --fs-h3:1.25rem;
  --fs-h4:1.0625rem;
  --fs-body:1rem;
  --fs-body-lg:1.125rem;
  --fs-sm:0.875rem;
  --fs-xs:0.8125rem;
  --fs-label:0.75rem;

  --lh-tight:1.02;
  --lh-snug:1.15;
  --lh-heading:1.2;
  --lh-body:1.55;
  --lh-loose:1.7;

  --ls-display:-0.025em;
  --ls-heading:-0.015em;
  --ls-body:0;
  --ls-label:0.09em;
  --ls-eyebrow:0.14em;

  --measure-text:34rem;
}

/* --- tokens/spacing.css ------------------------------------------------- */
:root{
  --sp-0:0;
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:24px;
  --sp-6:32px;
  --sp-7:48px;
  --sp-8:64px;
  --sp-9:96px;
  --sp-10:128px;
  --gutter:20px;
  --section-y:64px;
  --section-y-lg:112px;
  --touch-min:44px;
}
@media (min-width:768px){
  :root{
    --gutter:32px;
    --section-y:80px;
    --section-y-lg:136px;
  }
}

/* --- tokens/layout.css ------------------------------------------------- */
:root{
  --w-text:44rem;
  --w-content:1180px;
  --w-wide:1440px;
  --w-admin:1520px;
  --w-form:520px;

  --bp-xs:480px;
  --bp-sm:768px;
  --bp-md:1024px;
  --bp-lg:1280px;

  --z-base:0;
  --z-sticky:10;
  --z-header:20;
  --z-overlay:40;
}

/* --- tokens/borders.css ---------------------------------------------- */
:root{
  --radius-0:0;
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;
  --radius-pill:999px;
  --bw-hair:1px;
  --bw-strong:2px;
  --bw-rule:3px;
  --bw-block:6px;
  --shadow-overlay:0 16px 40px rgba(0,45,85,0.12);
  --shadow-sm:0 2px 8px rgba(0,45,85,0.08);
}

/* --- tokens/motion.css --------------------------------------------- */
:root{
  --dur-fast:120ms;
  --dur-base:180ms;
  --dur-slow:260ms;
  --ease-out:cubic-bezier(.2,.6,.3,1);
  --ease-in-out:cubic-bezier(.4,0,.2,1);
  --motion-hover:background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
@media (prefers-reduced-motion:reduce){:root{--dur-fast:0ms;--dur-base:0ms;--dur-slow:0ms}}

/* --- local compatibility shims -------------------------------------------
   The vendored css/components.css references these custom properties but the
   upstream token files do not define them yet. Values chosen to match the
   design system's evident intent (a plain .stack sits between .stack-sm and
   .stack-lg; --radius-1/2/3 map to the sm/md/lg radius ramp). Remove once the
   design system ships its own definitions. */
:root{
  --stack:var(--sp-5);
  --radius-1:var(--radius-sm);
  --radius-2:var(--radius-md);
  --radius-3:var(--radius-lg);
  --shadow-card-hover:var(--shadow-sm);
}

/* --- css/base.css ---------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-core);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-body);background:var(--surface-page);text-wrap:pretty}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:var(--fw-bold);color:var(--text-strong);line-height:var(--lh-heading);letter-spacing:var(--ls-heading)}
p,figure,figcaption,blockquote,dd,dl{margin:0}
ul,ol{margin:0;padding:0}
li{list-style:none}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--text-link);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--text-link-hover)}
button,input,select,textarea{font:inherit;color:inherit}
table{border-collapse:collapse;width:100%}
:focus{outline:none}
:focus-visible{outline:var(--bw-rule) solid var(--focus-ring);outline-offset:2px}
.on-navy :focus-visible,.site-footer :focus-visible{outline-color:var(--focus-ring-inverse)}
[hidden]{display:none!important}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
::selection{background:var(--red);color:var(--white)}
.skip-link{position:absolute;left:var(--sp-4);top:-100px;background:var(--navy);color:var(--white);padding:var(--sp-3) var(--sp-4);font-weight:var(--fw-bold);z-index:var(--z-overlay)}
.skip-link:focus{top:var(--sp-4);color:var(--white)}

/* --- css/components.css -------------------------------------------- */
.wrap{width:100%;max-width:var(--w-content);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--wide{max-width:var(--w-wide)}
.wrap--text{max-width:var(--w-text)}
.wrap--admin{max-width:var(--w-admin)}
.wrap--flush{padding-inline:0}
.section{padding-block:var(--section-y)}
.section--lg{padding-block:var(--section-y-lg)}
.section--tint{background:var(--surface-tint)}
.section--subtle{background:var(--surface-subtle)}
.section--navy{background:var(--surface-invert);color:var(--text-on-navy)}
.section--navy h1,.section--navy h2,.section--navy h3{color:var(--text-on-navy)}
.stack>*+*{margin-top:var(--stack)}
.stack-sm>*+*{margin-top:var(--sp-2)}
.stack-lg>*+*{margin-top:var(--sp-6)}
.cluster{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}
.cluster--tight{gap:var(--sp-2)}
.cluster--between{justify-content:space-between}
.grid{display:grid;gap:var(--sp-5)}
.grid--2{grid-template-columns:1fr}
.grid--3{grid-template-columns:1fr}
.grid--4{grid-template-columns:repeat(2,1fr)}
.grid--cards{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--sp-4)}
.rule{height:var(--bw-strong);background:var(--line-strong);border:0}
.rule--hair{height:var(--bw-hair);background:var(--line-hairline)}
.rule--accent{height:var(--bw-rule);background:var(--line-accent)}
@media (min-width:768px){.grid--2{grid-template-columns:1fr 1fr}.grid--3{grid-template-columns:repeat(2,1fr)}.grid--4{grid-template-columns:repeat(4,1fr)}.grid--cards{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--sp-5)}}
@media (min-width:1024px){.grid--3{grid-template-columns:repeat(3,1fr)}}

.display-1{font-size:var(--fs-d1);line-height:var(--lh-tight);letter-spacing:var(--ls-display);color:var(--text-strong);font-weight:var(--fw-bold)}
.display-2{font-size:var(--fs-d2);line-height:var(--lh-tight);letter-spacing:var(--ls-display);color:var(--text-strong);font-weight:var(--fw-bold)}
.display-3{font-size:var(--fs-d3);line-height:var(--lh-snug);letter-spacing:var(--ls-display);color:var(--text-strong);font-weight:var(--fw-bold)}
.display-1.on-black,.display-2.on-black{color:var(--text-editorial)}
.h1{font-size:var(--fs-h1)}
.h2{font-size:var(--fs-h2)}
.h3{font-size:var(--fs-h3)}
.h4{font-size:var(--fs-h4)}
.eyebrow{display:block;font-size:var(--fs-label);font-weight:var(--fw-bold);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.eyebrow--accent{color:var(--text-accent)}
.eyebrow--on-navy{color:rgba(255,255,255,.72)}
.lede{font-size:var(--fs-body-lg);line-height:var(--lh-body);color:var(--text-body);max-width:var(--measure-text)}
.meta{font-size:var(--fs-sm);color:var(--text-muted)}
.meta--dl{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-2) var(--sp-4);margin:0}
.meta--dl dt{font-weight:var(--fw-bold);color:var(--text-muted);font-size:var(--fs-xs);letter-spacing:var(--ls-label);text-transform:uppercase}
.meta--dl dd{margin:0;color:var(--text-strong);font-weight:var(--fw-bold)}
.mark{display:inline-block;background:var(--surface-accent);color:var(--text-on-red);font-weight:var(--fw-bold);padding:.06em .28em .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.mark--gray{background:var(--surface-gray)}
.mark--navy{background:var(--surface-invert)}
.prose{max-width:var(--w-text)}
.prose p+p{margin-top:var(--sp-4)}
.prose h2{font-size:var(--fs-h2);margin-top:var(--sp-7)}
.prose h3{font-size:var(--fs-h3);margin-top:var(--sp-6)}
.prose h2+p,.prose h3+p{margin-top:var(--sp-3)}
.prose ul{margin-top:var(--sp-3);display:grid;gap:var(--sp-2)}
.prose ul li{padding-left:var(--sp-5);position:relative}
.prose ul li::before{content:"";position:absolute;left:0;top:.6em;width:12px;height:var(--bw-rule);background:var(--line-accent)}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:11px 20px;border:none;border-radius:var(--radius-md);font-size:var(--fs-body);font-weight:700;cursor:pointer;transition:all 120ms;gap:8px;min-height:44px;text-decoration:none}
.btn--primary{background:var(--action-primary);color:var(--text-on-navy);border-color:var(--action-primary)}
.btn--primary:hover{background:var(--navy-900);box-shadow:var(--shadow-sm);color:var(--text-on-navy)}
.btn--primary:active{background:var(--action-primary-active)}
.btn--accent{background:var(--action-accent);color:var(--text-on-red);border-color:var(--action-accent);font-size:var(--fs-body-lg)}
.btn--accent:hover{background:var(--action-accent-hover);border-color:var(--action-accent-hover);color:var(--text-on-red)}
.btn--secondary{background:var(--white);color:var(--navy);border-color:var(--navy);border-width:var(--bw-strong);border-style:solid}
.btn--secondary:hover{background:var(--navy-050);color:var(--navy)}
.btn--ghost{background:transparent;color:var(--navy);border-color:transparent;padding-inline:var(--sp-2)}
.btn--ghost:hover{color:var(--red)}
.btn--on-navy{background:var(--white);color:var(--navy);border-color:var(--white)}
.btn--on-navy:hover{background:var(--navy-050);color:var(--navy)}
.btn--sm{min-height:38px;padding:var(--sp-2) var(--sp-4);font-size:var(--fs-sm)}
.btn--icon{padding-inline:var(--sp-2);gap:0}
.btn--icon svg{display:block;width:16px;height:16px}
.btn--danger.btn--icon{border:0;background:none;color:var(--red)}
.btn--danger.btn--icon:hover{background:var(--red);color:var(--white)}
.btn--lg{min-height:58px;padding:var(--sp-4) var(--sp-7);font-size:var(--fs-body-lg)}
.btn--block{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{background:var(--gray-150);border-color:var(--gray-150);color:var(--gray-700);cursor:not-allowed;opacity:1}
.btn-icon{display:inline-flex;align-items:center;justify-content:center;width:var(--touch-min);height:var(--touch-min);background:transparent;border:var(--bw-hair) solid var(--line-hairline);border-radius:var(--radius-1);color:var(--navy);cursor:pointer;transition:var(--motion-hover)}
.btn-icon:hover{border-color:var(--navy);color:var(--red)}
.link-arrow{display:inline-flex;align-items:center;gap:var(--sp-2);font-weight:var(--fw-bold);color:var(--navy);text-decoration:none;border-bottom:var(--bw-strong) solid var(--red);padding-bottom:2px}
.link-arrow:hover{color:var(--red)}
.link-arrow::after{content:"\2192"}

.badge{display:inline-flex;align-items:center;gap:var(--sp-1);padding:4px 10px;border-radius:var(--radius-pill);font-size:var(--fs-label);font-weight:var(--fw-bold);letter-spacing:var(--ls-label);text-transform:uppercase;border:var(--bw-hair) solid var(--line-hairline);color:var(--text-body);background:var(--white)}
.badge--navy{background:var(--navy);border-color:var(--navy);color:var(--white)}
.badge--gray{background:var(--gray);border-color:var(--gray);color:var(--white)}
.badge--red{background:var(--red);border-color:var(--red);color:var(--white)}
.badge--outline{border-color:var(--navy);color:var(--navy)}
.state{display:inline-flex;align-items:center;gap:var(--sp-2);padding:5px 12px 5px 10px;border-radius:var(--radius-pill);font-size:var(--fs-label);font-weight:var(--fw-bold);letter-spacing:var(--ls-label);text-transform:uppercase;border:var(--bw-hair) solid}
.state::before{font-size:1.1em;line-height:1}
.state--identified{background:var(--state-identified-bg);color:var(--state-identified-fg);border-color:var(--state-identified-line);border-style:dashed;border-width:var(--bw-hair)}
.state--identified::before{content:"\25CB"}
.state--acquired{background:var(--state-acquired-bg);color:var(--state-acquired-fg);border-color:var(--state-acquired-line)}
.state--acquired::before{content:"\25D0"}
.state--tested{background:var(--state-tested-bg);color:var(--state-tested-fg);border-color:var(--state-tested-line)}
.state--tested::before{content:"\25CF"}
.state--lg{font-size:var(--fs-sm);padding:8px 16px 8px 13px}

.card{border:1px solid var(--line-hairline);border-radius:var(--radius-lg);background:#fff;transition:all 120ms}
.card--strong{border:var(--bw-strong) solid var(--line-strong)}
.card--flat{border:0;border-top:var(--bw-strong) solid var(--line-strong);border-radius:0;box-shadow:none;overflow:visible}
.card__body{padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-2);flex:1}
.card__title{font-size:var(--fs-h4);color:var(--text-strong)}
.card__foot{margin-top:auto;padding-top:var(--sp-3);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)}
.card-link{text-decoration:none;color:inherit;transition:var(--motion-hover);display:flex;flex-direction:column}
.card-link:hover{color:inherit;border-color:var(--navy-100);box-shadow:var(--shadow-card-hover)}
.card-link:hover .card__title{color:var(--red)}

.pimg{position:relative;background:var(--surface-photo);border:var(--bw-hair) solid var(--line-hairline);border-radius:var(--radius-2);overflow:hidden;aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;padding:var(--sp-3)}
.pimg img{width:100%;height:100%;object-fit:contain;object-position:center bottom;mix-blend-mode:normal}
.pimg--hero{aspect-ratio:4/5;border:0;border-radius:var(--radius-3);background:var(--surface-tint);padding:var(--sp-7)}
.pimg--square{aspect-ratio:1/1}
.pimg--thumb{aspect-ratio:1/1;padding:var(--sp-1);width:56px;flex:0 0 56px;border-radius:var(--radius-1)}
.pimg--bare{border:0;background:transparent;padding:0}
.pimg__ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2);background:var(--surface-tint);color:var(--text-muted);text-align:center;padding:var(--sp-3)}
.pimg__ph::before{content:"";width:22%;min-width:18px;aspect-ratio:1/2.4;background:var(--gray-300);clip-path:polygon(38% 0,62% 0,62% 12%,80% 26%,80% 100%,20% 100%,20% 26%,38% 12%)}
.pimg__ph span{font-size:var(--fs-label);font-weight:var(--fw-bold);letter-spacing:var(--ls-label);text-transform:uppercase}
.pimg__flag{position:absolute;top:0;left:0;background:var(--surface-gray);color:var(--white);font-size:var(--fs-label);font-weight:var(--fw-bold);letter-spacing:var(--ls-label);padding:2px var(--sp-2);text-transform:uppercase}
.pimg--lowres img{image-rendering:auto;filter:none}

.score{display:inline-flex;flex-direction:column;align-items:flex-start;line-height:1}
.score__num{font-size:var(--fs-h2);font-weight:var(--fw-bold);color:var(--text-strong);letter-spacing:var(--ls-display);font-variant-numeric:tabular-nums}
.score__label{font-size:var(--fs-label);font-weight:var(--fw-bold);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted);margin-top:var(--sp-1)}
.score--hero .score__num{font-size:clamp(3rem,12vw,5rem)}
.score--hero .score__label{font-size:var(--fs-h4);letter-spacing:var(--ls-heading);text-transform:none;color:var(--text-accent)}
.score--block{background:var(--surface-accent);color:var(--text-on-red);padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-1);align-items:center}
.score--block .score__num,.score--block .score__label{color:var(--text-on-red)}
.score--empty .score__num{color:var(--gray-300)}
.verdict{font-size:var(--fs-h3);font-weight:var(--fw-bold);color:var(--text-strong)}

.ratings{display:grid;gap:var(--sp-3)}
.rating{display:grid;grid-template-columns:1fr auto;gap:var(--sp-1) var(--sp-3);align-items:baseline}
.rating__label{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--text-strong)}
.rating__val{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--text-strong);font-variant-numeric:tabular-nums}
.rating__bar{grid-column:1/-1;display:block;height:10px;background:var(--gray-075);border-radius:var(--radius-pill);overflow:hidden;position:relative}
.rating__track{grid-column:1/-1;position:relative}
.rating__bar i{position:absolute;inset:0 auto 0 0;background:var(--navy);display:block}
.rating--total .rating__bar i{background:var(--red)}
.rating--total .rating__label,.rating--total .rating__val{font-size:var(--fs-body)}
.rating__scale{display:flex;justify-content:space-between;font-size:var(--fs-label);color:var(--text-muted);letter-spacing:var(--ls-label)}
/* Hover/focus a category bar to see each tester's grade for it. A small pill
   pops up right above the bar (anchored to .rating__track, which is only as
   tall as the bar), centred on the pointer, caret pointing down at it. */
.rating--peek{position:relative}
.rating--peek:focus-visible{outline:var(--bw-strong) solid var(--navy);outline-offset:4px;border-radius:var(--radius-sm)}
.rating__peek{position:absolute;left:var(--peek-x,50%);bottom:calc(100% + 6px);z-index:6;width:max-content;max-width:100%;display:flex;gap:var(--sp-2);padding:5px 10px;background:var(--surface-invert);color:var(--text-on-navy);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);font-size:var(--fs-label);letter-spacing:var(--ls-label);white-space:nowrap;opacity:0;visibility:hidden;transform:translate(-50%,3px);transition:opacity 110ms ease,transform 110ms ease,visibility 110ms;pointer-events:none}
.rating__peek span:not(:first-child)::before{content:"·";margin-right:var(--sp-2);color:var(--line-on-navy)}
.rating__peek::after{content:"";position:absolute;top:100%;left:50%;width:0;height:0;border:5px solid transparent;border-top-color:var(--surface-invert);transform:translateX(-50%)}
.rating__peek b{margin-left:var(--sp-1);font-weight:var(--fw-bold);font-variant-numeric:tabular-nums}
.rating--peek:hover>.rating__peek,.rating--peek:focus-visible>.rating__peek,.rating--peek:focus-within>.rating__peek{opacity:1;visibility:visible;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.rating__peek{transition:none}}
.testers{display:grid;gap:var(--sp-3);grid-template-columns:repeat(3,1fr)}
.tester{border-top:var(--bw-strong) solid var(--line-strong);padding-top:var(--sp-2)}
.tester__name{font-size:var(--fs-label);font-weight:var(--fw-bold);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted)}
.tester__val{font-size:var(--fs-h2);font-weight:var(--fw-bold);color:var(--text-strong);font-variant-numeric:tabular-nums}

.rank{display:grid}
.rank__row{display:grid;grid-template-columns:auto 56px 1fr auto;gap:var(--sp-3);align-items:center;padding:var(--sp-3) var(--sp-2);border-bottom:var(--bw-hair) solid var(--line-hairline);text-decoration:none;color:inherit}
.rank__row:hover{background:var(--surface-tint);color:inherit;border-radius:var(--radius-1)}
.rank__pos{font-size:var(--fs-h3);font-weight:var(--fw-bold);color:var(--text-muted);font-variant-numeric:tabular-nums;min-width:2.2ch;text-align:right}
.rank__name{font-size:var(--fs-h4);font-weight:var(--fw-bold);color:var(--text-strong);letter-spacing:var(--ls-heading)}
.rank__sub{font-size:var(--fs-sm);color:var(--text-muted)}
.rank__score{text-align:right;font-size:var(--fs-h3);font-weight:var(--fw-bold);color:var(--text-strong);font-variant-numeric:tabular-nums}
.rank__row--podium{border-bottom:var(--bw-strong) solid var(--line-strong);padding-block:var(--sp-4)}
.rank__row--podium .rank__pos{font-size:2.5rem;color:var(--red)}
.rank__row--podium .rank__name{font-size:var(--fs-h2)}

/* Previous/next Spezi pager on the detail page: a plain, slim link — no card
   chrome — with the score folded into the same line as the manufacturer so
   it sits right next to the name instead of pinned to a far edge. */
.neighbour{display:flex;align-items:center;gap:var(--sp-3);padding-block:var(--sp-2);text-decoration:none;color:inherit}
.neighbour .pimg--thumb{width:40px;flex:none}
.neighbour__text{display:grid;gap:1px;min-width:0}
.neighbour__label{font-size:var(--fs-label);font-weight:var(--fw-bold);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted)}
.neighbour__name{font-size:var(--fs-body);font-weight:var(--fw-bold);color:var(--text-strong);overflow-wrap:anywhere}
.neighbour__sub{font-size:var(--fs-xs);color:var(--text-muted);overflow-wrap:anywhere}
.neighbour:hover .neighbour__name{color:var(--red);text-decoration:underline;text-decoration-thickness:2px}
.podium{display:grid;gap:var(--sp-4)}
.podium__item{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-4);align-items:end;background:var(--surface-tint);border-radius:var(--radius-2);padding:var(--sp-5)}
.podium__item--1{background:var(--surface-accent);color:var(--text-on-red)}
.podium__item--1 .rank__name,.podium__item--1 .rank__score,.podium__item--1 .rank__pos{color:var(--text-on-red)}
.podium__item--1 .rank__sub{color:rgba(255,255,255,.85)}
.podium__num{font-size:clamp(3rem,10vw,5.5rem);font-weight:var(--fw-bold);line-height:.8;letter-spacing:var(--ls-display);color:var(--navy)}
@media (min-width:768px){.testers{gap:var(--sp-4)}.podium{grid-template-columns:repeat(3,1fr);align-items:stretch}}

.table{font-size:var(--fs-sm)}
.table th{text-align:left;font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted);font-weight:var(--fw-bold);padding:var(--sp-3) var(--sp-4);border-bottom:var(--bw-strong) solid var(--line-strong);white-space:nowrap}
.table td{padding:14px var(--sp-4);border-bottom:var(--bw-hair) solid var(--line-hairline);vertical-align:middle;color:var(--text-body)}
.table td strong{color:var(--text-strong)}
.table tbody tr:hover{background:var(--surface-tint)}
.table__num{text-align:right;font-variant-numeric:tabular-nums;font-weight:var(--fw-bold);color:var(--text-strong)}
.table th.table__num,.table th.table__actions{text-align:right}
.run-num{display:flex;align-items:center;justify-content:center;width:44px;aspect-ratio:1/1;background:var(--surface-tint);border-radius:var(--radius-1);font-weight:var(--fw-bold);font-size:var(--fs-body-lg);color:var(--navy);font-variant-numeric:tabular-nums}
.table--compact td{padding:10px var(--sp-3)}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table a{font-weight:var(--fw-bold);text-decoration:none;color:var(--navy)}
.table a:hover{color:var(--red);text-decoration:underline}

.field{display:grid;gap:var(--sp-2)}
.label{font-size:var(--fs-label);font-weight:var(--fw-bold);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-strong)}
.label .req{color:var(--red)}
.input,.select,.textarea{padding:12px 14px;border:1px solid var(--line-hairline);border-radius:var(--radius-md);font-size:var(--fs-body);font-family:inherit;background:#fff;color:var(--text-strong);transition:border-color 120ms,box-shadow 120ms}
.input,.select{min-height:48px}
.textarea{min-height:120px;line-height:var(--lh-body);resize:vertical}
.input::placeholder,.textarea::placeholder{color:var(--gray)}
.input:hover,.select:hover,.textarea:hover{border-color:var(--gray)}
.input:focus-visible,.select:focus-visible,.textarea:focus-visible{border-color:var(--navy);outline:none;box-shadow:0 0 0 3px var(--navy-050),0 0 0 1px var(--navy)}
.select{appearance:none;cursor:pointer;background-image:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%228%22 viewBox=%220 0 12 8%22><path d=%22M1 1l5 5 5-5%22 fill=%22none%22 stroke=%22%23646567%22 stroke-width=%221.6%22/></svg>');background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.hint{font-size:var(--fs-xs);color:var(--text-muted)}
.field--error .input,.field--error .select,.field--error .textarea{border-color:var(--red);border-width:var(--bw-strong)}
.error-text{font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--feedback-error-fg);display:flex;gap:var(--sp-1)}
.error-text::before{content:"\26A0"}
.form-row{display:grid;gap:var(--sp-5)}
.form-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}
.check{display:flex;gap:var(--sp-3);align-items:flex-start;min-height:var(--touch-min);cursor:pointer}
.check input{width:22px;height:22px;margin:0;accent-color:var(--navy);flex:0 0 22px;margin-top:2px}
.check span{font-size:var(--fs-sm);color:var(--text-body)}
.search{display:flex;border:var(--bw-strong) solid var(--navy);border-radius:var(--radius-2);overflow:hidden;background:var(--white)}
.search input{flex:1;min-width:0;border:0;padding:var(--sp-3) var(--sp-5);min-height:52px;font-size:var(--fs-body-lg);background:transparent}
.search input:focus-visible{outline:none}
.search:focus-within{outline:var(--bw-rule) solid var(--focus-ring);outline-offset:2px}
.search button{border:0;background:var(--navy);color:var(--white);font-weight:var(--fw-bold);padding-inline:var(--sp-4);cursor:pointer;min-height:var(--touch-min);letter-spacing:var(--ls-heading)}
.search button:hover{background:var(--red)}
.filters{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.chip{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:38px;padding:var(--sp-2) 14px;background:var(--white);border:var(--bw-hair) solid var(--gray-300);border-radius:var(--radius-pill);font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--text-body);cursor:pointer;text-decoration:none;transition:var(--motion-hover)}
.chip:hover{border-color:var(--navy);color:var(--navy)}
.chip[aria-pressed="true"],.chip--active{background:var(--navy);border-color:var(--navy);color:var(--white)}
.chip[aria-pressed="true"]::after,.chip--active::after{content:"\00D7";font-size:1.1em}
.chip__count{color:var(--text-muted);font-weight:var(--fw-regular)}
.chip[aria-pressed="true"] .chip__count,.chip--active .chip__count{color:rgba(255,255,255,.8)}
.filter-group{display:grid;gap:var(--sp-2);padding-block:var(--sp-4);border-top:var(--bw-hair) solid var(--line-hairline)}
.filter-group__title{font-size:var(--fs-label);font-weight:var(--fw-bold);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-strong)}
.uploader{display:grid;place-items:center;gap:var(--sp-2);padding:var(--sp-6);border:var(--bw-strong) dashed var(--gray-300);border-radius:var(--radius-2);background:var(--surface-subtle);text-align:center;color:var(--text-muted);cursor:pointer;min-height:132px}
.uploader:hover{border-color:var(--navy);color:var(--navy)}
.uploader strong{color:var(--text-strong);font-size:var(--fs-body)}
.segmented{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:var(--bw-strong) solid var(--navy);border-radius:var(--radius-1);overflow:hidden}
.segmented button,.segmented label{min-height:48px;border:0;background:var(--white);color:var(--navy);font-weight:var(--fw-bold);cursor:pointer;padding:var(--sp-2);display:flex;align-items:center;justify-content:center;gap:var(--sp-2);transition:var(--motion-hover)}
.segmented button+button,.segmented label+label{border-left:var(--bw-hair) solid var(--navy)}
.segmented button[aria-pressed="true"]{background:var(--navy);color:var(--white)}
.segmented input{position:absolute;opacity:0;pointer-events:none}
.segmented input:checked+span,.segmented label:has(input:checked){background:var(--navy);color:var(--white)}
.segmented label:has(input:focus-visible){outline:var(--bw-rule) solid var(--focus-ring);outline-offset:-3px}
.grade-scale{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.grade-scale button,.grade-scale label{min-width:56px;min-height:56px;display:inline-flex;align-items:center;justify-content:center;border:var(--bw-hair) solid var(--gray-300);border-radius:var(--radius-1);background:var(--white);font-weight:var(--fw-bold);font-size:var(--fs-body-lg);color:var(--text-strong);cursor:pointer;font-variant-numeric:tabular-nums;transition:var(--motion-hover)}
.grade-scale button:hover,.grade-scale label:hover{border-color:var(--navy)}
.grade-scale button[aria-pressed="true"],.grade-scale label:has(input:checked){background:var(--navy);border-color:var(--navy);color:var(--white)}
.grade-scale input{position:absolute;opacity:0;pointer-events:none}
.grade-scale label:has(input:focus-visible){outline:var(--bw-rule) solid var(--focus-ring);outline-offset:2px}

.site-header{position:sticky;top:0;z-index:var(--z-header);background:rgba(255,255,255,.96);backdrop-filter:saturate(140%) blur(6px);border-bottom:var(--bw-hair) solid var(--line-hairline)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);min-height:76px}
.brand{display:flex;align-items:center;gap:var(--sp-3);text-decoration:none;color:var(--navy)}
.brand img{height:36px;width:auto;display:block}
@media (min-width:768px){.brand img{height:42px}}
.brand__word{font-weight:var(--fw-bold);font-size:var(--fs-h4);letter-spacing:var(--ls-heading);line-height:1.05}
.brand__word small{display:block;font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted);font-weight:var(--fw-bold)}
.nav{display:none;align-items:center;gap:var(--sp-5)}
.nav a{font-weight:var(--fw-bold);font-size:var(--fs-sm);letter-spacing:var(--ls-label);text-transform:uppercase;text-decoration:none;color:var(--navy);padding-block:var(--sp-2);border-bottom:var(--bw-rule) solid transparent}
.nav a:hover{border-bottom-color:var(--gray-300);color:var(--navy)}
.nav a[aria-current="page"]{border-bottom-color:var(--red)}
.nav__more{position:relative;display:flex}
.nav__more-btn{display:inline-flex;align-items:center;gap:var(--sp-1);font:inherit;font-weight:var(--fw-bold);font-size:var(--fs-sm);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--navy);background:none;border:0;border-bottom:var(--bw-rule) solid transparent;padding-block:var(--sp-2);cursor:pointer}
.nav__more-btn::after{content:"";width:.42em;height:.42em;margin-left:.15em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-.12em) rotate(45deg);transition:transform 150ms var(--ease-out)}
.nav__more:hover .nav__more-btn::after,.nav__more:focus-within .nav__more-btn::after,.nav__more.is-open .nav__more-btn::after{transform:translateY(.06em) rotate(225deg)}
.nav__more-btn:hover{border-bottom-color:var(--gray-300)}
.nav__more[data-current] .nav__more-btn{border-bottom-color:var(--red)}
.nav__more-menu{position:absolute;top:calc(100% + var(--sp-2));right:0;z-index:1;display:grid;gap:2px;width:max-content;padding:var(--sp-2);background:var(--white);border:var(--bw-hair) solid var(--line-hairline);border-radius:var(--radius-1);box-shadow:var(--shadow-overlay);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity 140ms var(--ease-out),transform 140ms var(--ease-out),visibility 140ms}
.nav__more::after{content:"";position:absolute;top:100%;right:0;width:120px;height:var(--sp-2)}
.nav__more:hover .nav__more-menu,.nav__more:focus-within .nav__more-menu,.nav__more.is-open .nav__more-menu{opacity:1;visibility:visible;transform:none}
.nav__more-menu a{padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-1);border-bottom:0;font-weight:var(--fw-bold);font-size:var(--fs-sm);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--navy);white-space:nowrap;text-align:right}
.nav__more-menu a:hover{border-bottom:0;background:var(--surface-tint);color:var(--navy)}
.nav__more-menu a[aria-current="page"]{border-bottom:0;background:var(--surface-tint);color:var(--red)}
.nav-toggle{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:var(--touch-min);padding-inline:var(--sp-4);background:transparent;border:var(--bw-strong) solid var(--navy);border-radius:var(--radius-1);color:var(--navy);font-weight:var(--fw-bold);font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;cursor:pointer}
.mobile-nav{display:grid;border-bottom:var(--bw-hair) solid var(--line-hairline);background:var(--white)}
.mobile-nav a{min-height:var(--touch-min);display:flex;align-items:center;padding:var(--sp-3) var(--gutter);font-weight:var(--fw-bold);text-decoration:none;color:var(--navy);border-top:var(--bw-hair) solid var(--line-hairline)}
.mobile-nav a[aria-current="page"]{background:var(--surface-tint);box-shadow:inset var(--bw-block) 0 0 var(--red)}
@media (min-width:1024px){.nav{display:flex}.nav-toggle{display:none}.mobile-nav{display:none}}
.breadcrumb{display:flex;flex-wrap:wrap;gap:var(--sp-2);font-size:var(--fs-sm);color:var(--text-muted)}
.breadcrumb a{color:var(--text-muted);text-decoration:none}
.breadcrumb a:hover{color:var(--red)}
.breadcrumb li+li::before{content:"/";margin-right:var(--sp-2);color:var(--gray-300)}
.breadcrumb li{display:flex}
.pagination{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;justify-content:center}
.pagination a,.pagination span{min-width:var(--touch-min);min-height:var(--touch-min);display:inline-flex;align-items:center;justify-content:center;border:var(--bw-hair) solid var(--line-hairline);border-radius:var(--radius-1);text-decoration:none;font-weight:var(--fw-bold);color:var(--navy);font-variant-numeric:tabular-nums;padding-inline:var(--sp-2)}
.pagination a:hover{border-color:var(--navy);color:var(--red)}
.pagination [aria-current="page"]{background:var(--navy);border-color:var(--navy);color:var(--white)}
.site-footer{background:var(--navy);color:var(--white);padding-block:var(--sp-7)}
.site-footer a{color:var(--white);text-decoration:none;font-size:var(--fs-sm)}
.site-footer a:hover{color:var(--white);text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px}
.site-footer h3{color:var(--white);font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;margin-bottom:var(--sp-3)}
.site-footer .rule{background:var(--line-on-navy);height:1px}

.figure-row{display:grid;gap:var(--sp-5);grid-template-columns:repeat(2,1fr)}
.figure{border-top:var(--bw-rule) solid var(--line-accent);padding-top:var(--sp-3)}
.figure__num{font-size:clamp(2.25rem,7vw,3.5rem);font-weight:var(--fw-bold);line-height:1;letter-spacing:var(--ls-display);color:var(--text-strong);font-variant-numeric:tabular-nums}
.figure__label{font-size:var(--fs-sm);color:var(--text-muted);margin-top:var(--sp-2)}
.barchart{display:grid;gap:var(--sp-3)}
.barchart__row{display:grid;grid-template-columns:minmax(88px,auto) 1fr auto;gap:var(--sp-3);align-items:center;font-size:var(--fs-sm)}
.barchart__label{font-weight:var(--fw-bold);color:var(--text-strong)}
.barchart__track{height:16px;background:var(--gray-075);border-radius:var(--radius-pill);overflow:hidden}
.barchart__track i{display:block;height:100%;background:var(--navy);transition:width 700ms var(--ease-out)}
@media (prefers-reduced-motion:reduce){.barchart__track i{transition:none}}
.barchart__row--accent .barchart__track i{background:var(--red)}
.barchart__val{font-variant-numeric:tabular-nums;font-weight:var(--fw-bold);color:var(--text-strong)}
.barchart__row[data-bin-trigger]{cursor:pointer;border-radius:var(--radius-1);transition:var(--motion-hover)}
.barchart__row[data-bin-trigger]:hover,.barchart__row[data-bin-trigger]:focus-visible{background:var(--surface-subtle)}
.barchart__row[data-bin-trigger]:focus-visible{outline:var(--bw-rule) solid var(--focus-ring);outline-offset:2px}
.barchart__detail{display:grid;gap:var(--sp-2);margin:0 0 var(--sp-2);padding:var(--sp-3) var(--sp-3) var(--sp-1);border-left:var(--bw-rule) solid var(--line-accent);font-size:var(--fs-sm)}
.barchart__detail li{display:flex;justify-content:space-between;gap:var(--sp-3)}
.barchart__detail a{color:var(--text-strong)}
.barchart__detail span{font-variant-numeric:tabular-nums;color:var(--text-muted)}
/* Statistik: wide-label bar charts, category top-fives with bottles, tester picks. */
.barchart--wide .barchart__row{grid-template-columns:minmax(120px,42%) 1fr auto}
.stat-cols{display:grid;gap:var(--sp-6);grid-template-columns:1fr}
.lboard{display:grid}
.lboard a{display:grid;grid-template-columns:1.6rem 44px minmax(0,1fr) auto;gap:var(--sp-2) var(--sp-3);align-items:center;padding:var(--sp-2) 0;border-bottom:var(--bw-hair) solid var(--line-hairline);text-decoration:none;color:inherit}
.lboard a:last-child{border-bottom:0}
.lboard a:hover .lboard__name{color:var(--red)}
.lboard__pos{font-weight:var(--fw-bold);color:var(--text-muted);font-variant-numeric:tabular-nums;text-align:right}
.lboard>a>.pimg{width:44px;aspect-ratio:1/1;padding:3px;border-radius:var(--radius-1)}
.lboard__name{font-weight:var(--fw-bold);color:var(--text-strong);font-size:var(--fs-sm);line-height:1.25;overflow-wrap:anywhere}
.lboard__val{font-weight:var(--fw-bold);color:var(--text-strong);font-variant-numeric:tabular-nums}
.stat-lines{display:flex;flex-direction:column;gap:2px;min-width:0}
.stat-lines .tester__val{line-height:1;margin:2px 0}
.stat-lines>a{font-weight:var(--fw-bold);color:var(--text-strong);text-decoration:none;overflow-wrap:anywhere}
.stat-lines>a:hover{color:var(--red)}
.statpick{display:flex;gap:var(--sp-3);align-items:center}
@media (min-width:768px){
  .figure-row{grid-template-columns:repeat(4,1fr)}
  .stat-cols{grid-template-columns:repeat(3,1fr);gap:var(--sp-7)}
}

/* Preis/Leistung scatter chart: one dot per priced test, price against
   Gesamtwertung. Reuses the origin map's .map__halo/.map__pin hover motion so
   the same "hover to preview, click to open" idiom appears twice in one
   consistent visual language. */
.scatter{margin:0}
.scatter__plot{width:100%;height:auto;max-height:360px;overflow:visible}
.scatter__caption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-2);margin-top:var(--sp-3);font-size:var(--fs-xs);color:var(--text-muted)}
.scatter__readout{min-height:1.6em;margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:var(--bw-hair) solid var(--line-hairline);display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);font-size:var(--fs-sm)}
.scatter__readout strong{color:var(--text-strong);font-size:var(--fs-body-lg)}
.scatter__readout span{color:var(--text-muted)}

.notice{display:flex;gap:var(--sp-3);padding:14px var(--sp-5);background:var(--feedback-info-bg);border-left:var(--bw-block) solid var(--navy);border-radius:var(--radius-1);font-size:var(--fs-sm)}
.notice--sample{background:var(--surface-subtle);border-left-color:var(--gray)}
.notice--error{background:var(--feedback-error-bg);border-left-color:var(--red);color:var(--feedback-error-fg)}
.notice strong{color:var(--text-strong)}
.empty{border:var(--bw-hair) dashed var(--gray-300);border-radius:var(--radius-2);padding:var(--sp-8) var(--sp-6);text-align:center;display:grid;gap:var(--sp-3);justify-items:center;background:var(--surface-subtle)}
.empty__title{font-size:var(--fs-h3)}
.empty p{max-width:36ch;color:var(--text-muted);font-size:var(--fs-sm)}

.admin{min-height:100vh;display:grid;grid-template-rows:auto 1fr;background:var(--surface-subtle)}
.admin-top{background:var(--navy);color:var(--white);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-3) var(--gutter);position:sticky;top:0;z-index:var(--z-header);min-height:64px}
.admin-top a{color:var(--white);text-decoration:none}
.admin-top__brand{display:flex;align-items:center;gap:var(--sp-3);font-weight:var(--fw-bold);letter-spacing:var(--ls-label);text-transform:uppercase;font-size:var(--fs-sm)}
.admin-top__brand img{border-radius:var(--radius-sm)}
.admin-top__brand span{background:var(--red);padding:4px 10px;border-radius:var(--radius-sm)}
.admin-body{display:grid;grid-template-columns:1fr}
.admin-side{display:none;background:var(--white);border-right:var(--bw-hair) solid var(--line-hairline);padding:var(--sp-4) 0}
.admin-side a{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);text-decoration:none;color:var(--navy);font-weight:var(--fw-bold);font-size:var(--fs-sm);border-radius:0 var(--radius-1) var(--radius-1) 0;margin-right:var(--sp-3)}
.admin-side a:hover{background:var(--surface-tint);color:var(--navy)}
.admin-side a[aria-current="page"]{background:var(--surface-tint);box-shadow:inset var(--bw-block) 0 0 var(--red)}
.admin-side__group{font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted);padding:var(--sp-4) var(--sp-4) var(--sp-2)}
.admin-main{padding:var(--sp-5) var(--gutter) var(--sp-9);min-width:0}
.admin-head{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:end;justify-content:space-between;margin-bottom:var(--sp-5)}
.admin-title{font-size:var(--fs-h1)}
.panel{background:var(--white);border:var(--bw-hair) solid var(--line-hairline);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:var(--sp-5)}
.panel--pad{padding:var(--sp-6)}
.panel__head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding-bottom:var(--sp-3);margin-bottom:var(--sp-3);border-bottom:var(--bw-strong) solid var(--line-strong)}
.panel__title{font-size:var(--fs-h4)}
.toolbar{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;justify-content:space-between;margin-bottom:var(--sp-4)}
.sticky-actions{position:sticky;bottom:0;background:rgba(255,255,255,.97);border-top:var(--bw-hair) solid var(--line-hairline);box-shadow:0 -6px 20px rgba(0,45,85,.06);padding:var(--sp-3) var(--gutter);margin-inline:calc(var(--gutter) * -1);display:flex;flex-wrap:wrap;gap:var(--sp-3);z-index:var(--z-sticky)}
.admin-tabs{display:flex;gap:var(--sp-4);border-bottom:var(--bw-strong) solid var(--line-strong);margin-bottom:var(--sp-5);overflow-x:auto}
.admin-tabs a{padding:var(--sp-3) 0;font-weight:var(--fw-bold);font-size:var(--fs-sm);text-decoration:none;color:var(--text-muted);white-space:nowrap;border-bottom:var(--bw-rule) solid transparent;margin-bottom:calc(var(--bw-rule) * -1)}
.admin-tabs a[aria-current="page"]{color:var(--navy);border-bottom-color:var(--red)}
@media (min-width:1024px){.admin-body{grid-template-columns:236px 1fr}.admin-side{display:block}.admin-main{padding:var(--sp-6) var(--sp-6) var(--sp-9)}}

.hero{display:grid;gap:var(--sp-5)}
.hero__media{background:var(--surface-tint);border-radius:var(--radius-3);display:flex;align-items:center;justify-content:center;padding:var(--sp-6);min-height:280px}
.hero__media img{max-height:60vh;width:auto;object-fit:contain}
.band{background:var(--surface-accent);color:var(--text-on-red)}
.band__inner{padding-block:var(--sp-6);display:grid;gap:var(--sp-4)}
.band h2,.band .display-3{color:var(--text-on-red)}
.band .eyebrow{color:rgba(255,255,255,.8)}
.split{display:grid;gap:var(--sp-6)}
@media (min-width:1024px){.hero{grid-template-columns:1.05fr .95fr;align-items:center;gap:var(--sp-8)}.split{grid-template-columns:1fr 1fr;gap:var(--sp-8)}.split--sidebar{grid-template-columns:minmax(0,1fr) 300px}.split--filters{grid-template-columns:250px minmax(0,1fr)}}
.sticky-side{position:sticky;top:88px}

.brand__block{width:9px;height:36px;background:var(--red);border-radius:var(--radius-pill);flex:0 0 9px}
.filter-panel{border:var(--bw-hair) solid var(--line-hairline);border-radius:var(--radius-2);background:var(--white);padding:var(--sp-3) var(--sp-5)}
.filter-panel>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);min-height:var(--touch-min);font-weight:var(--fw-bold);font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--navy)}
.filter-panel>summary::-webkit-details-marker{display:none}
.filter-panel>summary::after{content:"\25BE";font-size:1.2em}
.filter-panel[open]>summary::after{content:"\25B4"}
.filter-panel>.stack{margin-top:var(--sp-3)}
.filter-panel .filter-group:first-child{border-top:0;padding-top:0}
@media (min-width:1024px){.filter-panel{border:0;padding:0;position:sticky;top:88px}.filter-panel>summary{display:none}.filter-panel>.stack{margin-top:0}}

.card>.pimg{border-radius:0;border-width:0 0 var(--bw-hair) 0}

/* --- local polish (Packet 8 UX cleanup) --------------------------------------
   Small, targeted rules layered on the vendored design system: long-name
   wrapping, tighter list rows, and clickable admin stat panels. No new tokens
   or visual identity. */
/* Homepage winner: the score sits inside the image panel, not on its corner. */
.winner{position:relative;display:block;text-decoration:none;color:inherit}
.winner__tag{position:absolute;left:var(--sp-5);bottom:var(--sp-5);display:grid;gap:2px;background:var(--surface-accent);color:var(--text-on-red);padding:var(--sp-3) var(--sp-5);border-radius:var(--radius-2);box-shadow:var(--shadow-overlay);max-width:calc(100% - var(--sp-8))}
.winner__score{font-size:var(--fs-h1);font-weight:var(--fw-bold);line-height:1;letter-spacing:var(--ls-display);font-variant-numeric:tabular-nums}
.winner__label{font-size:var(--fs-label);font-weight:var(--fw-bold);letter-spacing:var(--ls-label);text-transform:uppercase;opacity:.85}
.winner__name{font-size:var(--fs-sm);font-weight:var(--fw-bold);overflow-wrap:anywhere}
.winner:hover .winner__tag{background:var(--red-900)}

/* Detail verdict: position first, weighted score alongside it. */
.verdict-row{display:flex;flex-wrap:wrap;gap:var(--sp-6);align-items:flex-end;border-top:var(--bw-strong) solid var(--line-strong);padding-top:var(--sp-4)}
.verdict-rank{display:inline-flex;flex-direction:column;line-height:1}
.verdict-rank__num{font-size:clamp(3rem,10vw,4.5rem);font-weight:var(--fw-bold);letter-spacing:var(--ls-display);color:var(--red);font-variant-numeric:tabular-nums}
.verdict-rank__label{font-size:var(--fs-h4);font-weight:var(--fw-bold);color:var(--text-muted);margin-top:var(--sp-2)}
.verdict-row .score__num{font-size:var(--fs-d3);color:var(--text-strong)}
.verdict-row .score__label{font-size:var(--fs-sm);text-transform:none;letter-spacing:0;color:var(--text-muted)}

/* Detail hero: give the title column room; the bottle does not need half the page. */
@media (min-width:1024px){.hero--detail{grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:var(--sp-8);align-items:start}}
.hero--detail .pimg--hero{padding:var(--sp-5);aspect-ratio:1/1}

/* Search type-ahead. */
.search-wrap{position:relative}
.suggest{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:var(--z-overlay);background:var(--white);border:var(--bw-strong) solid var(--navy);border-radius:var(--radius-2);box-shadow:var(--shadow-overlay);max-height:420px;overflow-y:auto;padding:var(--sp-2)}
.suggest__item a{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:var(--sp-3);align-items:center;padding:var(--sp-2);border-radius:var(--radius-1);text-decoration:none;color:inherit}
.suggest__item.is-active a,.suggest__item a:hover{background:var(--surface-tint);color:inherit}
.suggest__img{display:flex;align-items:center;justify-content:center;height:44px;background:var(--surface-tint);border-radius:var(--radius-1);overflow:hidden}
.suggest__img img{max-height:38px;width:auto;object-fit:contain}
.suggest__body{display:grid;gap:1px;min-width:0}
.suggest__name{font-weight:var(--fw-bold);color:var(--text-strong);overflow-wrap:anywhere}
.suggest__sub{font-size:var(--fs-xs);color:var(--text-muted);overflow-wrap:anywhere}
.suggest__rank{font-weight:var(--fw-bold);color:var(--red);font-variant-numeric:tabular-nums}

.team-photo{margin:0;border-radius:var(--radius-3);overflow:hidden;background:var(--surface-tint)}
.team-photo img{width:100%;height:100%;object-fit:cover;display:block}

/* Stacked definition lists so long drink names are not squeezed into a column. */
.meta--dl-stack{display:grid;grid-template-columns:1fr;gap:var(--sp-3)}
.meta--dl-stack dt{margin-bottom:2px}
.meta--dl-stack dd{overflow-wrap:anywhere}
/* Label left, number right — for short key/count pairs. */
.meta--dl-rows{grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-2) var(--sp-4)}
.meta--dl-rows dt{align-self:center;overflow-wrap:anywhere}
.meta--dl-rows dd{text-align:right;font-variant-numeric:tabular-nums}

/* Podium: three equal cards with the same internal rhythm. */
.podium__item{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto auto;gap:var(--sp-2);text-decoration:none;color:inherit;align-items:start;align-content:start;overflow:hidden;
  transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.podium__item:hover{color:inherit;transform:translateY(-4px);box-shadow:var(--shadow-overlay)}
.podium__item:active{transform:translateY(-1px)}
.podium__media{display:flex;align-items:flex-end;justify-content:center;min-height:150px}
.podium__media img{max-height:150px;width:auto;transition:transform var(--dur-slow) var(--ease-out)}
.podium__item:hover .podium__media img{transform:scale(1.06)}
.podium__item:hover .rank__name{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.podium__body{display:grid;gap:2px}
.podium__score{font-size:var(--fs-h3);font-weight:var(--fw-bold);line-height:1.1;font-variant-numeric:tabular-nums;color:var(--text-muted)}
.podium__score small{font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--gray-300);margin-left:var(--sp-2)}
.podium__item--1 .podium__score{color:rgba(255,255,255,.9)}
.podium__item--1 .podium__score small{color:rgba(255,255,255,.65)}
.podium__num{line-height:.9}
.podium__num::before{content:"#";font-size:.55em;vertical-align:.35em;opacity:.45;margin-right:.04em}
.podium__item--1 .podium__num{color:var(--text-on-red)}
@media (prefers-reduced-motion:reduce){.podium__item:hover{transform:none}.podium__item:hover .podium__media img{transform:none}}

/* The vendored .card sets a radius but no clipping, so the square-cornered
   .pimg inside it pokes past the rounded corners. (.card--flat already
   overrides overflow:visible, so hiding it here is the upstream intent.) */
.card{overflow:hidden}

/* Product cards respond to the pointer: a small lift and scale. */
.card-link{transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.card-link:hover{transform:translateY(-4px) scale(1.015);box-shadow:var(--shadow-overlay);border-color:var(--navy-100)}
.card-link:active{transform:translateY(-1px) scale(1.005)}
.card-link:focus-visible{transform:translateY(-4px) scale(1.015)}
@media (prefers-reduced-motion:reduce){
  .card-link:hover,.card-link:active,.card-link:focus-visible{transform:none}
}

/* ---- Spezistream cockpit and Spezirad --------------------------------- */
.run-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--sp-3)}
.run-picker__item{display:grid;grid-template-columns:auto 52px minmax(0,1fr);align-items:center;gap:var(--sp-3);
  min-height:76px;padding:var(--sp-3);border:2px solid var(--navy-100);border-radius:var(--radius-2);background:var(--white);cursor:pointer;
  transition:transform 160ms var(--ease-out),border-color 160ms ease,box-shadow 160ms ease}
.run-picker__item:has(input:checked){border-color:var(--red);box-shadow:inset 4px 0 var(--red),var(--shadow-sm)}
.run-picker__item:hover{transform:translateY(-2px);border-color:var(--navy)}
.run-picker__item .thumb{width:52px;height:64px}
.run-picker__item strong,.run-picker__item small,.run-add__option strong,.run-add__option small{display:block}
.run-picker__item small,.run-add__option small{margin-top:3px;color:var(--text-muted)}

.run-lineup{display:grid;gap:var(--sp-2);margin:0;padding:0;list-style:none}
.run-lineup__item{display:grid;grid-template-columns:52px minmax(0,1fr) auto auto;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3);border:1px solid var(--navy-100);border-radius:var(--radius-1);background:var(--white)}
.run-lineup__item .thumb{width:52px;height:64px}
.run-lineup__body strong,.run-lineup__body small{display:block}
.run-lineup__body small{margin-top:2px;color:var(--text-muted)}
.run-lineup__actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-2)}
.run-add{padding-top:var(--sp-2);border-top:1px solid var(--navy-100)}
.run-add>summary{width:max-content;list-style:none}.run-add>summary::-webkit-details-marker{display:none}
.run-add[open]>summary{margin-bottom:var(--sp-3)}
.run-add__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--sp-2);max-height:360px;overflow:auto}
.run-add__option{display:grid;grid-template-columns:auto 40px minmax(0,1fr);align-items:center;gap:var(--sp-2);padding:var(--sp-2);
  border:1px solid var(--navy-100);border-radius:var(--radius-1);cursor:pointer}
.run-add__option .pimg--tile{width:40px;flex-basis:40px}
.run-report-empty{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3)}
.run-tools>summary{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);list-style:none;cursor:pointer;color:var(--navy)}
.run-tools>summary::-webkit-details-marker{display:none}
.run-tools>summary::after{content:"+";display:grid;place-items:center;width:26px;height:26px;flex:none;border:1px solid var(--navy-100);
  border-radius:50%;font-size:var(--fs-body);line-height:1;transition:transform 160ms var(--ease-out)}
.run-tools[open]>summary::after{transform:rotate(45deg)}
.run-tools[open]>summary{margin-bottom:var(--sp-4)}
.run-tools>form+form{margin-top:var(--sp-2)}
.run-tools--danger>summary{color:var(--red)}
.run-tools--danger>summary::after{border-color:rgba(230,0,5,.25)}
.wheel-thumb{display:block;width:148px;aspect-ratio:1;margin:auto;border:4px solid var(--navy);border-radius:50%;object-fit:cover;box-shadow:var(--shadow-sm)}
.wheel-thumb--empty{display:grid;place-items:center;background:conic-gradient(var(--navy) 0 25%,var(--red) 0 50%,var(--navy) 0 75%,var(--red) 0);color:var(--white)}
.wheel-thumb--empty span{padding:4px 8px;border-radius:var(--radius-pill);background:rgba(0,45,85,.82);font-weight:var(--fw-bold)}

.wheel-stage{display:grid;grid-template-columns:minmax(320px,680px) minmax(260px,360px);align-items:center;justify-content:center;gap:clamp(var(--sp-5),6vw,var(--sp-9));
  padding:clamp(var(--sp-4),5vw,var(--sp-8));border-radius:var(--radius-2);background:linear-gradient(145deg,var(--navy-050),var(--white));box-shadow:var(--shadow-card)}
.lucky-wheel__wrap{position:relative;width:min(100%,62vh,680px);aspect-ratio:1;margin:auto;filter:drop-shadow(0 8px 16px rgba(0,45,85,.16))}
.lucky-wheel{position:absolute;inset:2%;overflow:hidden;border-radius:50%;background:var(--white);
  border:6px solid var(--navy);transition:transform 9s cubic-bezier(.1,0,.12,1);will-change:transform}
.lucky-wheel__art,.lucky-wheel__segments{position:absolute;inset:0;border-radius:50%}
.lucky-wheel__art{background-image:var(--wheel-art,none);background-position:center;background-size:cover}
.lucky-wheel__segments{background:var(--wheel-segments)}
.lucky-wheel__segments>span{position:absolute;z-index:2;width:44%;color:var(--white);text-align:center;
  font-size:clamp(.85rem,2.5vw,1.2rem);font-weight:var(--fw-bold);line-height:1.15;overflow-wrap:anywhere;text-shadow:0 1px 2px rgba(0,0,0,.5);
  transform:translate(-50%,-50%) rotate(var(--wheel-label-angle))}
/* pointer sits on the right edge so the winning label reads straight across */
.lucky-wheel__pointer{position:absolute;z-index:7;right:-1%;top:50%;width:0;height:0;transform:translateY(-50%);
  border-top:18px solid transparent;border-bottom:18px solid transparent;border-right:38px solid var(--navy)}
.lucky-wheel__spin{position:absolute;z-index:6;left:50%;top:50%;width:clamp(72px,16%,110px);aspect-ratio:1;padding:0;border:0;border-radius:50%;
  background:none;cursor:pointer;box-shadow:0 0 0 5px var(--white),0 3px 10px rgba(0,45,85,.28);
  transform:translate(-50%,-50%);transition:transform 120ms ease}
.lucky-wheel__spin img{display:block;width:100%;height:100%;border-radius:50%;pointer-events:none}
.lucky-wheel__spin:hover,.lucky-wheel__spin:focus-visible{transform:translate(-50%,-50%) scale(1.05)}
.lucky-wheel__spin:disabled{cursor:default}
.wheel-controls{align-self:center}
.wheel-result{display:grid;gap:var(--sp-2);min-height:150px;align-content:center;padding:var(--sp-4);border-radius:var(--radius-2);background:var(--navy-050);text-align:center}
.wheel-result strong{font-size:var(--fs-h3);line-height:var(--lh-heading);color:var(--navy);overflow-wrap:anywhere}
.wheel-result.is-ready{animation:gameResultIn 260ms var(--ease-out)}
.wheel-result .btn{margin-top:var(--sp-2)}

/* The Spezirad opens as a modal over the Spezistream overview; it is sized to
   the viewport so it never scrolls. The wheel leads on the left so it can run
   as large as the height allows, with the result card alongside it. */
.wheel-page{display:grid;place-items:center;min-height:56vh}
.wheel-modal{width:min(96vw,1040px);max-width:none;max-height:96vh;margin:auto;border:none;border-radius:var(--radius-3);
  padding:clamp(var(--sp-3),2.4vw,var(--sp-6));background:var(--white);color:inherit;box-shadow:var(--shadow-overlay);overflow:hidden}
.wheel-modal:not([open]){display:none}
.wheel-modal[open]{display:grid;gap:var(--sp-2)}
.wheel-modal::backdrop{background:rgba(0,26,49,.55)}
.wheel-modal__bar{display:flex;justify-content:flex-end}
.wheel-modal .wheel-stage{grid-template-columns:minmax(0,1fr) minmax(220px,300px);gap:clamp(var(--sp-4),3vw,var(--sp-7));
  align-items:center;background:none;box-shadow:none;padding:0}
.wheel-modal .lucky-wheel__wrap{width:min(100%,80vh,660px)}
.wheel-modal .wheel-result{min-height:0}

@media (max-width:820px){
  .wheel-modal{width:min(96vw,520px)}
  .wheel-modal .wheel-stage{grid-template-columns:1fr;gap:var(--sp-3);justify-items:center}
  .wheel-modal .lucky-wheel__wrap{width:min(100%,52vh,440px)}
  .wheel-modal .wheel-controls{width:min(100%,440px)}
}
@media (min-width:840px) and (max-width:1023px){
  .run-cockpit{grid-template-columns:minmax(0,1fr) 290px;gap:var(--sp-5)}
}
@media (max-width:620px){
  .run-lineup__item{grid-template-columns:48px minmax(0,1fr) auto}.run-lineup__actions{grid-column:2/-1;justify-content:flex-start}
  .wheel-stage{padding:var(--sp-3)}.lucky-wheel__segments>span{font-size:clamp(.7rem,3.4vw,.95rem)}
  .lucky-wheel__spin{width:clamp(58px,15%,84px);font-size:var(--fs-sm);border-width:4px}
  .lucky-wheel__pointer{border-top-width:14px;border-bottom-width:14px;border-right-width:28px}
}
@media (prefers-reduced-motion:reduce){.lucky-wheel{transition-duration:50ms}.run-picker__item,.wheel-result.is-ready{animation:none;transition:none}}

/* Catalog card: the position leads, the score follows. */
.card__foot{align-items:baseline}
.card__rank{font-size:var(--fs-h2);font-weight:var(--fw-bold);line-height:1;letter-spacing:var(--ls-display);color:var(--navy);font-variant-numeric:tabular-nums}
.card__rank--none{font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted)}
.card-link:hover .card__rank{color:var(--red)}
.card__score{text-align:right;font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--text-muted);font-variant-numeric:tabular-nums;line-height:1.2}
.card__score small{display:block;font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--gray-300)}
/* An active chip is navy-on-navy; the base :hover recolours the label to navy
   and makes it vanish. Keep it white and darken the chip instead. */
.chip--active:hover,.chip[aria-pressed="true"]:hover{background:var(--red);border-color:var(--red);color:var(--white)}
.chip--reset{border-style:dashed}
.chip--reset::after{content:none}
.chip--reset:hover{border-color:var(--red);color:var(--red)}

/* A page always fills its rows: 24 items divide evenly by 2, 3 and 4 columns,
   so the last row is never short. */
.grid--cards{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:640px){.grid--cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.grid--cards{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---- Herkunftskarte ------------------------------------------------------
   An abstracted Germany drawn in the brand palette: navy land, red dots, no
   tiles and no third-party map. Dots and outline share one projection. */
.map{display:grid;gap:var(--sp-6)}
@media (min-width:900px){.map{grid-template-columns:minmax(0,1fr) 340px;gap:var(--sp-8);align-items:start}}
.map__canvas{position:relative;margin:0;display:grid;gap:var(--sp-4);justify-items:center}
.map__canvas svg{width:100%;max-width:440px;height:auto;overflow:visible}
.map__land{fill:var(--white);stroke:var(--navy);stroke-width:2;stroke-linejoin:round}
.map__dot{cursor:pointer;outline:none}
.map__halo{fill:var(--red);opacity:0;transition:opacity var(--dur-base) var(--ease-out)}
.map__pin{fill:var(--red);stroke:var(--white);stroke-width:1.5;transition:transform var(--dur-base) var(--ease-out);transform-box:fill-box;transform-origin:center}
.map__dot:hover .map__pin,.map__dot:focus-visible .map__pin,.map__dot.is-active .map__pin{transform:scale(1.35)}
.map__dot:hover .map__halo,.map__dot:focus-visible .map__halo,.map__dot.is-active .map__halo{opacity:.22}
.map__dot:focus-visible .map__pin{stroke:var(--navy);stroke-width:2.5}
.map__legend{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-xs);color:var(--text-muted);text-align:center;max-width:38ch}
.map__legend-dot{width:10px;height:10px;border-radius:var(--radius-pill);background:var(--red);flex:0 0 10px}
.map__side{min-width:0}
/* Side panel and map are the same height; both lists scroll inside it and fade
   at the bottom edge while there is more to come. */
/* Distance from the readout card's outer edge to its content: border + padding. */
.map{--map-h:520px;--readout-inset:calc(var(--bw-strong) + var(--sp-5))}
.map__readout{border:var(--bw-strong) solid var(--navy);border-radius:var(--radius-2);background:var(--white);padding:var(--sp-5);display:flex;flex-direction:column;max-height:var(--map-h)}
.map__readout .map__drinks{overflow-y:auto;min-height:0;flex:1;padding-right:var(--sp-2)}
.map__readout .map__entry-title{flex:none}
.map__readout .map__back{flex:none}
.map__scroller{position:relative;min-width:0}
/* The fade sits above the scroll area and switches off once the end is reached. */
.map__scroller::after{content:"";position:absolute;left:0;right:var(--sp-2);bottom:0;height:56px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(237,241,244,0),var(--surface-tint));opacity:0;transition:opacity var(--dur-base) var(--ease-out)}
.map__scroller.is-scrollable::after{opacity:1}
/* With the readout card open the hint belongs inside its frame, sitting on the
   scrolling list rather than on the border. */
.map__scroller.is-detail::after{left:var(--readout-inset);right:var(--readout-inset);bottom:var(--readout-inset);
  background:linear-gradient(to bottom,rgba(255,255,255,0),var(--white))}
.map__scroller.is-detail .map__more{bottom:calc(var(--readout-inset) + 4px)}
.map__more{position:absolute;left:50%;bottom:var(--sp-2);transform:translateX(-50%);display:none;align-items:center;justify-content:center;
  width:24px;height:24px;background:var(--navy);color:var(--white);border-radius:var(--radius-pill);
  font-size:11px;line-height:1;pointer-events:none;z-index:1}
.map__scroller.is-scrollable .map__more{display:inline-flex}
.map__more::after{content:"\25BE"}
.map__back{align-self:flex-start;margin-bottom:var(--sp-4);background:transparent;border:0;padding:0;font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--navy);cursor:pointer;border-bottom:var(--bw-strong) solid var(--red)}
.map__back:hover{color:var(--red)}
.map__back::before{content:"\2190";margin-right:var(--sp-2)}
/* The inner scroll area only makes sense beside the map; on narrow screens the
   list flows with the page instead of nesting a second scroller. */
.map__list{padding-right:var(--sp-2)}
@media (min-width:900px){
  .map__canvas svg{max-height:var(--map-h)}
  .map__list{max-height:var(--map-h);overflow-y:auto}
}
@media (max-width:899px){
  .map__scroller::after,.map__more{display:none}
}
.map__entry{padding-block:var(--sp-3);border-bottom:var(--bw-hair) solid var(--line-hairline)}
.map__entry:last-child{border-bottom:0}
.map__entry.is-active{background:var(--white);box-shadow:inset var(--bw-block) 0 0 var(--red);padding-left:var(--sp-4)}
.map__entry-title{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);font-size:var(--fs-h4)}
.map__entry-count{font-size:var(--fs-label);font-weight:var(--fw-bold);letter-spacing:var(--ls-label);color:var(--white);background:var(--navy);border-radius:var(--radius-pill);padding:2px 9px;flex:none}
.map__drinks{display:grid;gap:var(--sp-1);margin-top:var(--sp-2)}
.map__drinks li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-1) var(--sp-3);align-items:baseline;font-size:var(--fs-sm)}
.map__drinks a{font-weight:var(--fw-bold);text-decoration:none;overflow-wrap:anywhere}
.map__drinks a:hover{text-decoration:underline;text-decoration-thickness:2px}
.map__place{grid-column:1;font-size:var(--fs-xs);color:var(--text-muted)}
.map__drinks--photo li{display:flex;gap:var(--sp-3);align-items:flex-start}
.map__drinks--photo .map__drink-thumb{flex:none;width:34px;height:54px;object-fit:contain;object-position:center;border-radius:var(--radius-sm);background:var(--surface-sunken)}
.map__drinks--photo .map__drink-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.map__drinks--photo .map__place{grid-column:auto}
.map__grade{grid-row:1;grid-column:2;font-weight:var(--fw-bold);color:var(--text-strong);font-variant-numeric:tabular-nums}
.map__rest{display:grid;gap:var(--sp-1);margin-top:var(--sp-2);font-size:var(--fs-sm);color:var(--text-muted)}
.map__rest li{display:flex;justify-content:space-between;gap:var(--sp-3)}
.map__rest span{font-weight:var(--fw-bold);color:var(--text-strong);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.map__pin{transition:none}}

/* Hunt map (/karte): a real Leaflet map beside the same scrolling place list as
   the origin map. The map is progressive enhancement; the list stands alone. */
.karte{display:grid;gap:var(--sp-6);--map-h:620px}
@media (min-width:900px){.karte{grid-template-columns:minmax(0,1fr) 340px;gap:var(--sp-8);align-items:start}}
.karte__stage{position:relative;z-index:0;display:grid;gap:var(--sp-3);min-width:0}
#karte-map{height:var(--map-h);border:var(--bw-strong) solid var(--navy);border-radius:var(--radius-2);background:var(--navy-050)}
#karte-map:focus-visible{outline:var(--bw-block) solid var(--red);outline-offset:2px}
.karte__noscript{padding:var(--sp-5);margin:0;color:var(--text-muted);font-size:var(--fs-sm)}
.karte__credit{margin:0;font-size:var(--fs-xs);color:var(--text-muted)}
.karte__credit a{color:var(--text-muted);text-decoration:underline}
.karte__credit a:hover{color:var(--navy)}
.karte__side{min-width:0}
.karte__tabs{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-4)}
.karte__tabs a{display:inline-flex;align-items:center;padding:var(--sp-1) var(--sp-3);border:var(--bw-strong) solid var(--navy);border-radius:var(--radius-pill);font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--navy);text-decoration:none;background:var(--white)}
.karte__tabs a:hover{background:var(--navy-050)}
.karte__tabs a[aria-current="page"]{background:var(--navy);color:var(--white)}
.karte__toolbar{display:grid;gap:var(--sp-3);justify-items:start}
.karte__toolbar-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:start;width:100%}
.karte__toolbar-buttons{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.karte__search{display:flex;flex:1 1 15rem;max-width:26rem;border:var(--bw-strong) solid var(--navy);border-radius:var(--radius-1);background:var(--white)}
.karte__search input{flex:1;min-width:0;border:0;background:transparent;padding:0 var(--sp-3);min-height:38px;font-size:var(--fs-sm);color:var(--text-strong);border-radius:var(--radius-1) 0 0 var(--radius-1)}
.karte__search input::-webkit-search-cancel-button{-webkit-appearance:none}
.karte__search input:focus-visible{outline:none}
.karte__search:focus-within{outline:var(--bw-strong) solid var(--focus-ring);outline-offset:2px}
.karte__search button[type="submit"]{display:inline-flex;align-items:center;justify-content:center;border:0;background:var(--navy);color:var(--white);padding-inline:var(--sp-3);min-height:38px;cursor:pointer;border-radius:0 2px 2px 0}
.karte__search button[type="submit"]:hover{background:var(--red)}
.karte__search .btn__icon{width:1.05em;height:1.05em}
.karte__search .suggest__item>.suggest__body{width:100%;text-align:left;font:inherit;background:none;border:0;padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-1);cursor:pointer;color:inherit}
.karte__search .suggest__item.is-active>.suggest__body,.karte__search .suggest__item>.suggest__body:hover{background:var(--surface-tint)}
.karte__hint{margin:0;font-size:var(--fs-xs);color:var(--text-muted);max-width:60ch}
.karte__hint--error{color:var(--feedback-error-fg)}
.btn__icon{width:1.15em;height:1.15em;flex:none}
@media (min-width:900px){
  .karte__list{
    max-height:var(--map-h);overflow-y:auto;scrollbar-gutter:stable;
    scroll-snap-type:y proximity;padding-bottom:var(--sp-6);
    -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - var(--sp-6)),transparent);
    mask-image:linear-gradient(to bottom,#000 calc(100% - var(--sp-6)),transparent);
  }
  .karte__list .map__entry{scroll-snap-align:start;scroll-margin-top:var(--sp-1)}
}
.karte__approx{color:var(--text-muted);font-weight:var(--fw-bold)}
.map__entry-dist{font-size:var(--fs-label);font-weight:var(--fw-bold);letter-spacing:var(--ls-label);color:var(--text-muted);font-variant-numeric:tabular-nums;flex:none}
.map__rest a{font-weight:var(--fw-bold);text-decoration:none}
.map__rest a:hover{text-decoration:underline;text-decoration-thickness:2px}

/* Each entry's map links live in a closed disclosure so the list stays quiet. */
.map__entry-more{margin-top:var(--sp-2)}
.map__entry-more>summary{display:inline-flex;align-items:center;gap:var(--sp-1);cursor:pointer;list-style:none;font-size:var(--fs-label);font-weight:var(--fw-bold);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted)}
.map__entry-more>summary::-webkit-details-marker{display:none}
.map__entry-more>summary::after{content:"\25BE";font-size:.8em}
.map__entry-more[open]>summary::after{content:"\25B4"}
.map__entry-more>summary:hover{color:var(--navy)}
.map__entry-more[open]>summary{color:var(--navy)}

/* Leaflet overrides: match the site type and the square, navy-framed look.
   The tile pane is desaturated so the red markers dominate; markers, popups
   and controls sit in their own panes and keep their colour. */
.leaflet-container{font:inherit;background:var(--navy-050)}
.leaflet-tile-pane{filter:grayscale(1) contrast(.92) brightness(1.03)}
.leaflet-container a{color:var(--navy)}
.leaflet-bar,.leaflet-popup-content-wrapper,.leaflet-popup-tip{border-radius:var(--radius-1)}
.leaflet-bar a{color:var(--navy)}
.leaflet-control-attribution{font-size:var(--fs-xs);background:rgba(255,255,255,.85)}
.karte-pop .leaflet-popup-content{margin:var(--sp-3) var(--sp-4);font-size:var(--fs-sm)}
.karte-pop__place{margin:0 0 var(--sp-2);font-weight:var(--fw-bold);color:var(--text-strong)}
.karte-pop__approx{color:var(--text-muted)}
.karte-pop__list{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2)}
.karte-pop__list li{display:flex;gap:var(--sp-2);align-items:flex-start}
.karte-pop__thumb{flex:none;width:44px;height:70px;object-fit:contain;border-radius:var(--radius-sm);background:var(--surface-sunken)}
.karte-pop__drink{min-width:0}
.karte-pop__list a{font-weight:var(--fw-bold);text-decoration:none;color:var(--navy)}
.karte-pop__list a:hover{color:var(--red);text-decoration:underline}
.karte-pop__sub{display:block;font-size:var(--fs-xs);color:var(--text-muted)}
.karte-pop__actions,.map__entry-actions{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-2) var(--sp-3);margin:var(--sp-3) 0 0;font-size:var(--fs-xs)}
.map__entry-actions{margin-top:var(--sp-2)}
.karte-pop__actions a,.map__entry-actions a{font-weight:var(--fw-bold);color:var(--navy);text-decoration:none;border-bottom:var(--bw-strong) solid var(--red);padding-bottom:1px}
.karte-pop__actions a:hover,.map__entry-actions a:hover{color:var(--red)}
.map__dl{display:inline-flex;align-items:center;gap:3px}
.map__dl .btn__icon{width:1em;height:1em}
.karte-pop__btn{font:inherit;font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--navy);background:none;border:0;border-bottom:var(--bw-strong) solid var(--navy);padding:0 0 1px;cursor:pointer}
.karte-pop__btn:hover{color:var(--red);border-color:var(--red)}

.card__title,.rank__name{overflow-wrap:anywhere}
.admin-title,.display-1,.display-2,.display-3,.card__title,.rank__name{overflow-wrap:break-word}
.rank__sub{overflow-wrap:anywhere}

/* Rank rows: the thumbnail column must match the thumbnail's own width, or the
   image overflows its track and swallows the gap before the name. */
.rank__row{grid-template-columns:auto 56px minmax(0,1fr) auto;gap:var(--sp-4);align-items:center}
.rank__row>.pimg--thumb{width:56px;flex:none}
.rank__row .rank__name{min-width:0;display:block}
/* A rounded hover block reads as a stray card against the square separators. */
.rank__row:hover{border-radius:0;box-shadow:inset var(--bw-rule) 0 0 var(--red)}
/* The default hover tint IS the tinted section's own background, so inside one
   the row would highlight to exactly the colour it already sits on. Go white
   there instead. Applies to the homepage Top 5 and to "Nachbarn im Ranking". */
.section--tint .rank__row:hover{background:var(--white)}
.rank__row+.rank__row{margin-top:0}

/* The position is the headline; the score supports it. */
.rank__pos{font-size:var(--fs-h2);color:var(--text-strong);min-width:3.5ch;text-align:right;letter-spacing:var(--ls-display)}
.rank__pos::before{content:"#";color:var(--gray-300);margin-right:1px}
.rank__row--podium .rank__pos{color:var(--red)}
.rank__row--podium .rank__pos::before{color:var(--red);opacity:.5}
.rank__score{font-size:var(--fs-body);color:var(--text-muted);font-weight:var(--fw-bold)}
.rank__row--podium .rank__score{font-size:var(--fs-h4);color:var(--text-body)}
.rank__score{text-align:right}
.rank__score small{display:block;font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--gray-300);font-weight:var(--fw-bold);line-height:1.4}
.rank__text{display:grid;gap:2px;min-width:0}
/* On narrow screens the position and score must give the name room, or long
   brand names break mid-word. */
@media (max-width:640px){
  .rank__row{grid-template-columns:auto 44px minmax(0,1fr) auto;gap:var(--sp-3)}
  .rank__row>.pimg--thumb{width:44px;flex:none}
  .rank__pos{font-size:var(--fs-h4);min-width:2.6ch}
  .rank__row--podium .rank__pos{font-size:var(--fs-h2)}
  .rank__row--podium .rank__name{font-size:var(--fs-h4)}
  .rank__score{font-size:var(--fs-sm)}
  .rank__score small{display:none}
}
/* ---- Admin: the private side of the same product -------------------------
   Same type scale, colours, spacing and image treatment as the public site,
   only denser and task-first. */
.admin{grid-template-columns:minmax(0,1fr);overflow-x:clip}
.admin-top{padding-inline:var(--sp-5)}
.admin-top__brand{gap:var(--sp-4)}
.admin-top__brand img{height:26px;width:auto}
.admin-top__tag{font-size:var(--fs-label);font-weight:var(--fw-bold);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:rgba(255,255,255,.72);border-left:var(--bw-hair) solid var(--line-on-navy);padding-left:var(--sp-4)}
.admin-top__link{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:rgba(255,255,255,.86)!important}
.admin-top__link:hover{color:#fff!important;text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px}
.admin-top__logout{background:transparent;border:var(--bw-hair) solid var(--line-on-navy);color:#fff}
.admin-top__logout:hover{background:var(--red);border-color:var(--red);color:#fff}
.admin-side{padding-top:var(--sp-5)}
.admin-head{align-items:center;padding-bottom:var(--sp-4);border-bottom:var(--bw-strong) solid var(--line-strong)}

/* Stat tiles mirror the public "In Zahlen" figures. */
a.panel{transition:var(--motion-hover)}
a.panel:hover{border-color:var(--navy);color:inherit}
.stat{display:grid;gap:var(--sp-3);justify-items:start;align-content:start;text-decoration:none;color:inherit;border-top:var(--bw-rule) solid var(--line-accent)}
.stat__num{font-size:clamp(2rem,4vw,2.75rem);font-weight:var(--fw-bold);line-height:1;letter-spacing:var(--ls-display);color:var(--text-strong);font-variant-numeric:tabular-nums}
.stat:hover .stat__num{color:var(--red)}

/* Dashboard work queue. */
.queue{display:grid}
.queue__row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--sp-3);align-items:center;padding:var(--sp-3) 0;border-bottom:var(--bw-hair) solid var(--line-hairline)}
.queue__row:last-child{border-bottom:0}
.queue__body{display:grid;gap:2px;min-width:0}
.queue__name{font-weight:var(--fw-bold);color:var(--navy);text-decoration:none;overflow-wrap:anywhere}
.queue__name:hover{color:var(--red)}

/* Drink table. */
.table--drinks th:first-child,.table--drinks td:first-child{width:56px;padding-right:0}
.table__actions{text-align:right;white-space:nowrap}
.select--sm{min-height:38px;padding:6px 30px 6px 10px;font-size:var(--fs-sm);background-position:right 10px center;width:auto}
.status-form{flex-wrap:nowrap}

/* Branded upload control everywhere a picture is chosen. */
.uploader--sm{min-height:88px;padding:var(--sp-4);gap:var(--sp-1)}
.uploader.is-set{border-style:solid;border-color:var(--navy);color:var(--navy)}
.label__opt{font-weight:var(--fw-regular);letter-spacing:0;text-transform:none;color:var(--text-muted)}

/* Test entry: identify the drink at a glance, keep the running total in view. */
.test-summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--sp-4);align-items:center;margin-bottom:var(--sp-5);position:sticky;top:64px;z-index:var(--z-sticky)}
.test-summary__body{display:grid;gap:2px;min-width:0}
.test-summary__name{font-size:var(--fs-h3);font-weight:var(--fw-bold);color:var(--navy);text-decoration:none;overflow-wrap:anywhere}
.test-summary__name:hover{color:var(--red)}

/* Test result reveal: the placement stays blurred until the group has
   guessed, then a single click un-blurs everything in scope at once. */
[data-reveal-scope] .spoiler{filter:blur(10px);user-select:none;transition:filter .25s ease}
[data-reveal-scope].is-revealed .spoiler{filter:none}

.btn--danger{color:var(--red-900)}
.btn--danger:hover{color:#fff;background:var(--red)}
@media (min-width:1024px){.split--wide{grid-template-columns:minmax(0,1fr) 360px}}
@media (max-width:1023px){
  .sticky-actions{gap:var(--sp-2)}
  .sticky-actions .btn{flex:1 1 auto}
  .sticky-actions .meta{flex-basis:100%;text-align:center}
  .grade-scale{gap:var(--sp-1)}
  .grade-scale label{min-width:44px;min-height:48px;font-size:var(--fs-body)}
  /* Admin shell: give the top bar room and turn the hidden sidebar into a
     horizontal tab strip so mobile admin keeps its navigation. */
  .admin-top{flex-wrap:wrap;row-gap:var(--sp-2)}
  .admin-top__brand span{display:none}
  .admin-top>.cluster>a[href="/"]{display:none}
  .admin-body{display:block}
  .admin-main{overflow-x:clip}
  .admin-main .panel{max-width:100%}
  .admin-side{display:flex;overflow-x:auto;border-right:0;border-bottom:var(--bw-hair) solid var(--line-hairline);padding:0}
  .admin-side__group{display:none}
  .admin-side a{white-space:nowrap;border-radius:0;margin:0;border-bottom:var(--bw-rule) solid transparent}
  .admin-side a[aria-current="page"]{box-shadow:none;border-bottom-color:var(--red);background:transparent}
  .admin-head{flex-direction:column;align-items:stretch}
  .admin-head .cluster{width:100%}
  .admin-head .btn{width:100%}
  /* Drink list: one card per row instead of a horizontally scrolling table. */
  .admin-main .table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .admin-main .table tr{display:grid;grid-template-columns:56px 1fr;gap:var(--sp-2) var(--sp-3);padding:var(--sp-3) 0;border-bottom:var(--bw-hair) solid var(--line-hairline)}
  .admin-main .table td{border:0;padding:0}
  .admin-main .table td:first-child{grid-row:span 3}
  .admin-main .table td:nth-child(2){align-self:center}
  .admin-main .table form.cluster{flex-wrap:nowrap}
  .admin-main .table td .cluster{justify-content:flex-start!important}
  /* Detailed Spezi overview: stacked cells keep their column name as a label. */
  .admin-main .table--drinks tr{grid-template-columns:56px minmax(0,1fr)}
  .admin-main .table--drinks td:first-child{grid-row:span 7}
  .admin-main .table--drinks td[data-label]{display:flex;flex-wrap:wrap;gap:2px var(--sp-3);justify-content:space-between;align-items:baseline;min-width:0;overflow-wrap:anywhere}
  .admin-main .table--drinks td[data-label]::before{content:attr(data-label);flex:0 0 auto;font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted);font-weight:var(--fw-bold)}
  /* The per-tester result matrix is a compact numeric grid; keep it a real
     table (scrolls sideways if needed) rather than collapsing it to cards. */
  .admin-main .table--matrix thead{position:static;width:auto;height:auto;overflow:visible;clip-path:none}
  .admin-main .table--matrix tr{display:table-row;grid-template-columns:none;gap:0;padding:0;border:0}
  .admin-main .table--matrix th,.admin-main .table--matrix td{display:table-cell;border-bottom:var(--bw-hair) solid var(--line-hairline);padding:var(--sp-2) var(--sp-3)}
  .admin-main .table--matrix td:first-child{grid-row:auto}
}
.toolbar>form{flex-wrap:wrap}
.result-matrix td:not(:first-child),.result-matrix th:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}
.result-matrix tfoot td{font-weight:var(--fw-bold);color:var(--text-strong)}

/* ============================================================================
   Admin redesign (local layer, beta UX pass)
   ----------------------------------------------------------------------------
   Same tokens, type scale, colours and image treatment as the public site; the
   admin is only denser and task-first. Everything below deliberately overrides
   the earlier local admin block where the two disagree. No new colours, no new
   fonts, no new tokens.
   ========================================================================== */

/* ---- Shell ---------------------------------------------------------------
   The sidebar stays in view while the work column scrolls, and the work column
   stops growing on very wide monitors so table rows keep a readable measure. */
.admin{min-height:100vh}
.admin-top{min-height:60px;padding-block:var(--sp-2)}
.admin-top__brand img{height:24px}
.admin-body{align-items:start}
.admin-main{padding:var(--sp-5) var(--gutter) var(--sp-9);max-width:calc(var(--w-admin) + var(--sp-7) * 2)}
.admin-side{gap:2px}

@media (min-width:1024px){
  .admin-body{grid-template-columns:250px minmax(0,1fr)}
  .admin-side{position:sticky;top:60px;height:calc(100vh - 60px);overflow-y:auto;
    display:flex;flex-direction:column;padding:var(--sp-5) 0 var(--sp-4)}
  .admin-main{padding:var(--sp-6) var(--sp-7) var(--sp-9)}
}

.admin-side__group{padding:var(--sp-5) var(--sp-4) var(--sp-2)}
.admin-side__group:first-child{padding-top:0}
.admin-side a{padding:10px var(--sp-4);gap:var(--sp-3)}
.admin-side__count{flex:none;min-width:28px;padding:1px 8px;border-radius:var(--radius-pill);
  background:var(--surface-subtle);color:var(--text-muted);font-size:var(--fs-xs);
  font-weight:var(--fw-bold);text-align:center;font-variant-numeric:tabular-nums}
.admin-side a:hover .admin-side__count{background:var(--white)}
.admin-side a[aria-current="page"] .admin-side__count{background:var(--navy);color:var(--white)}
.admin-side__foot{margin-top:auto;padding:var(--sp-4) var(--sp-4) 0;
  border-top:var(--bw-hair) solid var(--line-hairline)}
.admin-side__foot .meta{display:block;line-height:1.45}

/* ---- Page header --------------------------------------------------------- */
.admin-head{align-items:flex-end;gap:var(--sp-4);margin-bottom:var(--sp-5)}
.admin-head__text{display:grid;gap:var(--sp-2);min-width:0}
.admin-head__sub{font-size:var(--fs-sm);color:var(--text-muted);max-width:64ch}
.admin-head__sub strong{color:var(--text-strong)}

/* ---- Panels -------------------------------------------------------------- */
.panel--flush{padding:0;overflow:clip}
.panel--flush>.table-scroll{border-radius:var(--radius-lg)}
.panel--flush>.panel__head{padding:var(--sp-4) var(--sp-5);margin-bottom:0}
.panel__head{padding-bottom:var(--sp-3);margin-bottom:var(--sp-4);align-items:baseline}
.panel--danger{border-color:var(--red);box-shadow:inset var(--bw-block) 0 0 var(--red)}
.panel--danger .panel__head{border-bottom-color:var(--red)}

/* ---- Stat tiles ---------------------------------------------------------- */
.stat{gap:var(--sp-3);padding:var(--sp-5);align-content:space-between;min-height:100%}
.stat__num{font-size:clamp(1.875rem,3vw,2.5rem)}
.stat__meter{display:block;width:100%;height:6px;border-radius:var(--radius-pill);background:var(--gray-075);overflow:hidden}
.stat__meter i{display:block;height:100%;background:var(--navy)}
.stat--identified .stat__meter i{background:var(--gray-300)}
.stat--tested .stat__meter i{background:var(--red)}
.stat__foot{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-2);
  width:100%;font-size:var(--fs-xs);color:var(--text-muted)}
.stat--total{border-top-color:var(--navy)}

/* Stacked lifecycle progress: the admin twin of the public "In Zahlen" block. */
.progress{display:flex;height:16px;border-radius:var(--radius-pill);overflow:hidden;background:var(--gray-075)}
.progress i{display:block;height:100%}
.progress i.is-identified,.progress-legend i.is-identified{background:var(--gray-300)}
.progress i.is-acquired,.progress-legend i.is-acquired{background:var(--navy)}
.progress i.is-tested,.progress-legend i.is-tested{background:var(--red)}
.progress-legend{display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-5);
  font-size:var(--fs-sm);color:var(--text-muted)}
.progress-legend span{display:inline-flex;align-items:center;gap:var(--sp-2)}
.progress-legend b{color:var(--text-strong);font-variant-numeric:tabular-nums}
.progress-legend i{width:10px;height:10px;border-radius:var(--radius-pill);flex:none}

/* ---- Filter bar ---------------------------------------------------------- */
.filterbar{display:grid;gap:var(--sp-4)}
.filterbar__top{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}
.filterbar__search{flex:1 1 300px;min-width:0;max-width:520px}
.filterbar__search .search input{min-height:48px;font-size:var(--fs-body);padding-inline:var(--sp-4)}
.filterbar__sort{margin-left:auto;display:flex;align-items:center;gap:var(--sp-2)}
.filterbar__row{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}
.filterbar__legend{flex:0 0 auto;min-width:78px;font-size:var(--fs-label);letter-spacing:var(--ls-label);
  text-transform:uppercase;font-weight:var(--fw-bold);color:var(--text-muted)}
.filterbar .chip{min-height:34px;padding-block:5px}
.filterbar__summary{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);align-items:baseline;
  padding-top:var(--sp-3);border-top:var(--bw-hair) solid var(--line-hairline);
  font-size:var(--fs-sm);color:var(--text-muted)}
.filterbar__count{font-weight:var(--fw-bold);color:var(--text-strong);font-variant-numeric:tabular-nums}

/* ---- Data table ---------------------------------------------------------- */
.table--drinks{font-size:var(--fs-sm)}
.table--drinks th{background:var(--white);padding-block:var(--sp-3)}
.table--drinks td{padding:var(--sp-3) var(--sp-4);vertical-align:middle}
.table--drinks tbody tr:last-child td{border-bottom:0}
.table--drinks th:first-child,.table--drinks td:first-child{width:52px;padding-right:0;padding-left:var(--sp-5)}
.table--drinks th:last-child,.table--drinks td:last-child{padding-right:var(--sp-5);width:1%}
.dt__name{display:block;overflow-wrap:anywhere}
.dt__sub{display:block;font-size:var(--fs-xs);color:var(--text-muted);overflow-wrap:anywhere;margin-top:1px}
.dt__note{display:block;font-size:var(--fs-xs);color:var(--text-muted);margin-top:var(--sp-1);
  padding-left:var(--sp-3);border-left:var(--bw-hair) solid var(--line-hairline);overflow-wrap:anywhere}
.dt__flags{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-top:var(--sp-2)}
.dt__actions{display:flex;gap:var(--sp-2);align-items:center;justify-content:flex-end}
.pimg--tile{aspect-ratio:1/1;width:44px;flex:0 0 44px;padding:2px;border-radius:var(--radius-1)}
.pimg--tile img{object-position:center}
.pimg--tile .pimg__ph::before{width:34%}
.pimg--tile .pimg__ph span{display:none}

/* The header stays legible while a long catalog scrolls past it. Sticky only
   resolves against the viewport once the row is no longer inside a scroll
   container, so the horizontal scroller is dropped at the width where the
   table fits on its own. */
@media (min-width:1280px){
  .panel--flush>.table-scroll{overflow:visible;border-radius:0}
  /* Only the flush panel drops its scroll container, so only its table can
     stick. A table inside a padded panel still scrolls sideways, and a
     sticky header there would be pushed down over its own first row. */
  .panel--flush .table--drinks thead th{position:sticky;top:60px;z-index:2;
    box-shadow:0 var(--bw-strong) 0 var(--line-strong)}
}

/* ---- Work queue ---------------------------------------------------------- */
.queue__row{grid-template-columns:auto minmax(0,1fr) auto;gap:var(--sp-4);padding:var(--sp-3) var(--sp-2)}
.queue__row:hover{background:var(--surface-tint);border-radius:var(--radius-1)}
.queue__name{font-size:var(--fs-body)}
.queue__meta{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3);align-items:center;margin-top:2px}

/* ---- Forms --------------------------------------------------------------- */
/* A .field is itself a grid, so inside a form row it would stretch its control
   to the tallest neighbour. Anchor every control to the top of its row. */
.form-row{align-items:start;gap:var(--sp-4) var(--sp-5)}
.form-row .field{align-content:start}
.form-row--2{grid-template-columns:1fr}
.form-row--wide{grid-column:1/-1}
@media (min-width:640px){.form-row--2{grid-template-columns:1fr 1fr}}
.label{display:flex;align-items:baseline;gap:var(--sp-2);flex-wrap:wrap}

/* Unit-suffixed inputs (Preis, Menge) that read as one control. */
.affix{display:flex;align-items:stretch;border:1px solid var(--line-hairline);border-radius:var(--radius-md);
  background:#fff;overflow:hidden;transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.affix:hover{border-color:var(--gray)}
.affix:focus-within{border-color:var(--navy);box-shadow:0 0 0 3px var(--navy-050),0 0 0 1px var(--navy)}
.affix .input{border:0;border-radius:0;flex:1;min-width:0;background:transparent}
.affix .input:hover,.affix .input:focus-visible{border:0;box-shadow:none;outline:none}
.affix__unit{display:flex;align-items:center;padding-inline:var(--sp-4);background:var(--surface-subtle);
  border-left:1px solid var(--line-hairline);font-size:var(--fs-sm);font-weight:var(--fw-bold);
  color:var(--text-muted)}

/* A derived value the form recomputes as you type. */
.readout{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:var(--sp-2) var(--sp-4);background:var(--surface-tint);border-radius:var(--radius-md);
  padding:var(--sp-3) var(--sp-4)}
.readout__label{font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;
  font-weight:var(--fw-bold);color:var(--text-muted)}
.readout__value{font-size:var(--fs-h3);font-weight:var(--fw-bold);color:var(--navy);
  font-variant-numeric:tabular-nums}

/* One-tap presets beside a numeric field. */
.presets{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-1)}
.preset{min-height:32px;padding:2px 12px;border:var(--bw-hair) solid var(--gray-300);
  border-radius:var(--radius-pill);background:var(--white);font-size:var(--fs-xs);
  font-weight:var(--fw-bold);color:var(--text-body);cursor:pointer;transition:var(--motion-hover)}
.preset:hover{border-color:var(--navy);color:var(--navy)}

.segmented label{min-height:44px}
.uploader--sm{min-height:76px}

/* The save bar follows the form instead of hiding at the end of a long page. */
.formbar{position:sticky;bottom:var(--sp-4);z-index:var(--z-sticky);display:flex;flex-wrap:wrap;
  gap:var(--sp-3);align-items:center;margin-top:var(--sp-5);padding:var(--sp-3) var(--sp-4);
  background:rgba(255,255,255,.96);border:var(--bw-hair) solid var(--line-hairline);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-overlay)}
.formbar__end{margin-left:auto;display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}

/* ---- Aside cards (image, status, facts) ---------------------------------- */
/* The image card stacks a heading, the preview, the upload control and a
   hint. Without a layout of its own those sat flush against each other. */
.aside-card{display:grid;gap:var(--sp-4);align-content:start}
.aside-card>.panel__head{margin-bottom:0}
.aside-card>.check{margin:0}
.aside-card>.hint,.aside-card>.notice{margin:0}
.aside-card .pimg{width:100%}
@media (min-width:1024px){
  .split--sidebar{grid-template-columns:minmax(0,1fr) 320px;gap:var(--sp-6)}
  .aside-sticky{position:sticky;top:76px}
}
.facts{display:grid;gap:var(--sp-3)}
.facts__row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-4);
  padding-bottom:var(--sp-3);border-bottom:var(--bw-hair) solid var(--line-hairline)}
.facts__row:last-child{border-bottom:0;padding-bottom:0}
.facts__key{font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;
  font-weight:var(--fw-bold);color:var(--text-muted)}
.facts__val{font-weight:var(--fw-bold);color:var(--text-strong);text-align:right;
  overflow-wrap:anywhere;font-variant-numeric:tabular-nums}

/* ---- Test entry ---------------------------------------------------------- */
.testbar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--sp-4);align-items:center;
  position:sticky;top:60px;z-index:var(--z-sticky);margin-bottom:var(--sp-5);padding:var(--sp-4) var(--sp-5)}
.testbar__body{display:grid;gap:var(--sp-2);min-width:0}
.testbar__name{font-size:var(--fs-h3);font-weight:var(--fw-bold);color:var(--navy);
  text-decoration:none;overflow-wrap:anywhere}
.testbar__name:hover{color:var(--red)}
.testbar__meta{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3);align-items:center;
  font-size:var(--fs-sm);color:var(--text-muted)}
.testbar__score{display:grid;justify-items:end;gap:var(--sp-1);text-align:right}
.testbar__num{font-size:clamp(1.75rem,4vw,2.5rem);font-weight:var(--fw-bold);line-height:1;
  letter-spacing:var(--ls-display);color:var(--text-strong);font-variant-numeric:tabular-nums}
.testbar__num small{font-size:.42em;color:var(--text-muted);letter-spacing:0;margin-left:2px}
.testbar__label{font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;
  font-weight:var(--fw-bold);color:var(--text-muted)}
.testbar__steps{display:flex;gap:3px}
.testbar__steps i{width:15px;height:5px;border-radius:var(--radius-pill);background:var(--gray-150)}
.testbar__steps i.is-set{background:var(--red)}

.gradegroup__weight{font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;
  font-weight:var(--fw-bold);color:var(--text-muted)}
.gradegroup__avg{font-variant-numeric:tabular-nums;font-weight:var(--fw-bold);color:var(--text-strong)}
.graderow{display:grid;gap:var(--sp-2)}
.graderow+.graderow{margin-top:var(--sp-4);padding-top:var(--sp-4);
  border-top:var(--bw-hair) solid var(--line-hairline)}
.graderow__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3)}
.graderow__tester{font-size:var(--fs-body);font-weight:var(--fw-bold);color:var(--text-strong);
  letter-spacing:0;text-transform:none}
.graderow__value{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--text-muted);
  font-variant-numeric:tabular-nums}
.grade-scale{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:var(--sp-1)}
.grade-scale label{min-width:0;min-height:46px;font-size:var(--fs-body);border-radius:var(--radius-1)}
.grade-scale__legend{display:flex;justify-content:space-between;font-size:var(--fs-xs);color:var(--text-muted)}
@media (max-width:640px){
  .grade-scale{grid-template-columns:repeat(6,minmax(0,1fr))}
  .grade-scale label{min-height:44px}
}

.sticky-actions{align-items:center;border:var(--bw-hair) solid var(--line-hairline);border-bottom:0;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0}

/* ---- Test result --------------------------------------------------------- */
.resulthero{display:grid;gap:var(--sp-5);align-items:center;grid-template-columns:minmax(0,1fr)}
@media (min-width:768px){.resulthero{grid-template-columns:auto minmax(0,1fr) auto}}
.resulthero__score{display:grid;justify-items:start;gap:var(--sp-1)}
.resulthero__num{font-size:clamp(2.5rem,6vw,3.5rem);font-weight:var(--fw-bold);line-height:1;
  letter-spacing:var(--ls-display);color:var(--text-strong);font-variant-numeric:tabular-nums}
.resulthero__num small{font-size:.4em;color:var(--text-muted);letter-spacing:0;margin-left:4px}
.spoiler-card{display:grid;gap:var(--sp-3);align-content:start}
.spoiler-card__num{font-size:clamp(1.75rem,4vw,2.25rem);font-weight:var(--fw-bold);line-height:1.1;
  color:var(--text-strong);letter-spacing:var(--ls-display)}
.spoiler-neighbours{display:grid;gap:var(--sp-3);grid-template-columns:1fr 1fr;font-size:var(--fs-sm)}
[data-reveal-scope] .spoiler{filter:blur(9px)}
.result-matrix th:first-child,.result-matrix td:first-child{width:30%}

/* ---- Login --------------------------------------------------------------- */
.auth{display:grid;place-items:center;min-height:calc(100vh - 60px);padding:var(--sp-7) var(--gutter)}
.auth__inner{width:100%;max-width:400px;display:grid;gap:var(--sp-5);justify-items:center}
.auth__inner .panel{width:100%}
.auth__foot{font-size:var(--fs-sm);color:var(--text-muted);text-align:center}

/* ---- Empty states -------------------------------------------------------- */
.empty--panel{border:0;background:transparent;padding:var(--sp-7) var(--sp-4)}

/* ---- Mobile -------------------------------------------------------------- */
@media (max-width:1023px){
  .admin-main{padding-top:var(--sp-4)}
  .admin-head{flex-direction:column;align-items:stretch;gap:var(--sp-4)}
  .admin-head .cluster{width:100%}
  .filterbar__sort{margin-left:0;width:100%}
  .filterbar__sort .select{flex:1}
  .formbar{bottom:0;border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter)}
  .formbar .btn{flex:1 1 auto}
  .formbar__end{margin-left:0;width:100%}
  .testbar{top:0;padding:var(--sp-3) var(--sp-4);gap:var(--sp-3);align-items:center}
  .testbar>.pimg--tile{width:34px;flex:0 0 34px}
  .testbar__name{font-size:var(--fs-h4);display:-webkit-box;-webkit-line-clamp:2;
    -webkit-box-orient:vertical;overflow:hidden}
  .testbar__meta{display:none}
  .testbar__num{font-size:var(--fs-h2)}
  .testbar__label{display:none}
  .spoiler-neighbours{grid-template-columns:1fr}

  /* The catalog table becomes one card per Spezi. */
  .admin-main .table--drinks tr{display:grid;grid-template-columns:52px minmax(0,1fr);
    gap:var(--sp-2) var(--sp-4);padding:var(--sp-4) var(--sp-2);align-items:start}
  .admin-main .table--drinks td:first-child{grid-row:span 5;padding-left:0}
  .admin-main .table--drinks td[data-label]::before{content:attr(data-label);flex:0 0 auto;
    font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;
    color:var(--text-muted);font-weight:var(--fw-bold)}
  .admin-main .table--drinks td[data-label="Spezi"]{display:block}
  .admin-main .table--drinks td[data-label="Spezi"]::before{content:none}
  .admin-main .table--drinks td.table__num{text-align:left}
  .admin-main .table--drinks .dt__actions{justify-content:flex-start;flex-wrap:wrap}
  /* The tab strip has no room for the sidebar footer. */
  .admin-side__foot{display:none}
}

/* ---- Fixes from the first live pass ------------------------------------- */
/* The destructive confirmation needs a filled button, not an outlined one. */
.btn--danger-solid{background:var(--red);border-color:var(--red);color:var(--text-on-red)}
.btn--danger-solid:hover{background:var(--red-900);border-color:var(--red-900);color:var(--text-on-red)}

/* The vendored `.empty p` rule outranks `.empty__title`, so the heading of an
   empty state renders as muted body text. And on the admin's tinted page the
   card needs its own ground to read as a card at all. */
.empty p.empty__title{font-size:var(--fs-h3);color:var(--text-strong);line-height:var(--lh-heading)}
.admin-main .empty{background:var(--white)}
.admin-main .empty--panel{background:transparent}

/* "Alle" is a reset, not a removable filter, so it carries no × affordance. */
.chip--all.chip--active::after,.chip--all[aria-pressed="true"]::after{content:none}

/* Both score headers stack their lines; the name is a span by default. */
.testbar__name{display:block}
.resulthero__text{display:grid;gap:var(--sp-1);min-width:0}
.resulthero__text .meta{overflow-wrap:anywhere}

.admin-side__foot{padding-bottom:var(--sp-2)}
.gradegroup__avg{white-space:nowrap}

@media (max-width:640px){
  /* The save bar explains itself through the page subtitle on a phone. */
  .sticky-actions .meta,.formbar .meta{display:none}
  .admin-head__sub{font-size:var(--fs-xs)}
}

/* A bare `1fr` track is `minmax(auto,1fr)`, so a tile whose min-content is
   wider than its share pushes the whole row past the viewport. */
.admin-main .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
.admin-main .grid--2{grid-template-columns:minmax(0,1fr)}
.stat__foot{flex-wrap:wrap;row-gap:2px}
@media (min-width:768px){
  .admin-main .grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .admin-main .grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---- Sortable column headings -------------------------------------------
   Click once to sort ascending, again to reverse, a third time to return to
   the default order. The arrow shows the current state; a muted double arrow
   marks the columns that can be sorted at all. */
.table--drinks th{padding:0}
.table--drinks th>.th-sort,.table--drinks th>span{display:block;padding:var(--sp-3) var(--sp-4)}
.table--drinks th:first-child>span,.table--drinks th:first-child>.th-sort{padding-left:var(--sp-5)}
.table--drinks th:last-child{padding:var(--sp-3) var(--sp-5)}
.th-sort{display:flex;align-items:center;gap:var(--sp-2);color:var(--text-muted);
  text-decoration:none;font-weight:var(--fw-bold);cursor:pointer;transition:var(--motion-hover)}
.table a.th-sort{color:var(--text-muted)}
.th-sort::after{content:"\21C5";font-size:1.1em;line-height:1;opacity:.4}
.table a.th-sort:hover{color:var(--navy);text-decoration:none}
.th-sort:hover::after{opacity:.85}
.th-sort:focus-visible{outline:var(--bw-rule) solid var(--focus-ring);outline-offset:-3px}
.table--drinks th[aria-sort="ascending"] .th-sort,
.table--drinks th[aria-sort="descending"] .th-sort{color:var(--navy)}
.table--drinks th[aria-sort="ascending"] .th-sort::after{content:"\25B4";opacity:1;color:var(--red)}
.table--drinks th[aria-sort="descending"] .th-sort::after{content:"\25BE";opacity:1;color:var(--red)}
.table--drinks th.table__num .th-sort{justify-content:flex-end}

/* ============================================================================
   Round two: row actions, catalog paging, the detail verdict row, and the
   homepage Testsieger. Same tokens as everything above.
   ========================================================================== */

/* ---- Admin: quiet row actions -------------------------------------------
   A dense table gets one lightweight button per row instead of a heavy
   outlined one, and a status control that actually looks openable. */
.btn--quiet{min-height:32px;padding:4px 12px;font-size:var(--fs-xs);font-weight:var(--fw-bold);
  background:var(--white);color:var(--navy);border:var(--bw-hair) solid var(--gray-300);
  border-radius:var(--radius-1);gap:var(--sp-1)}
.btn--quiet:hover{background:var(--surface-tint);border-color:var(--navy);color:var(--navy);box-shadow:none}
.btn--quiet:active{background:var(--navy-100)}

/* The status picker: a captioned control with a permanent caret, so it reads
   as "open me" rather than as a static box printing the current status. */
.statuspick{display:inline-flex;align-items:stretch;border:var(--bw-hair) solid var(--gray-300);
  border-radius:var(--radius-1);overflow:hidden;background:var(--white);
  transition:border-color var(--dur-fast) var(--ease-out)}
.statuspick:hover{border-color:var(--navy)}
.statuspick:focus-within{border-color:var(--navy);box-shadow:0 0 0 3px var(--navy-050)}
.statuspick::before{content:"";flex:none;align-self:center;width:9px;height:9px;border-radius:var(--radius-pill);
  margin-left:10px}
.statuspick--identified::before{background:transparent;box-shadow:inset 0 0 0 1px var(--gray)}
.statuspick--acquired::before{background:var(--navy)}
.statuspick--tested::before{background:var(--red)}
.select--status{min-height:34px;width:auto;border:0;border-radius:0;background-color:transparent;
  padding:2px 26px 2px var(--sp-2);font-size:var(--fs-sm);font-weight:var(--fw-bold);
  color:var(--text-strong);background-position:right 8px center}
.select--status:hover,.select--status:focus-visible{border:0;box-shadow:none;outline:none;background-color:transparent}
.dt__actions{gap:var(--sp-3)}
.status-form{display:inline-flex}

/* ---- Catalog: "Mehr laden" and the pager --------------------------------- */
.load-more{display:grid;justify-items:center;gap:var(--sp-2);padding-top:var(--sp-2)}
.load-more__btn{min-width:min(320px,100%);justify-content:center}
.load-more__note{text-align:center}
.load-more.is-busy .load-more__btn{opacity:.6;pointer-events:none}

.pagination{gap:var(--sp-2) var(--sp-3);justify-content:center}
.pagination__pages{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;justify-content:center}
.pagination__gap{border:0;min-width:auto;padding-inline:0;color:var(--text-muted)}
.pagination__step{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:var(--touch-min);
  padding-inline:var(--sp-4);border:var(--bw-strong) solid var(--navy);border-radius:var(--radius-1);
  font-weight:var(--fw-bold);color:var(--navy);text-decoration:none;background:var(--white);
  transition:var(--motion-hover)}
.pagination a.pagination__step:hover{background:var(--navy);color:var(--white);border-color:var(--navy)}
.pagination__step--prev::before{content:"\2190"}
.pagination__step--next::after{content:"\2192"}
.pagination__step[aria-disabled="true"]{border-color:var(--gray-150);color:var(--gray-300);
  background:var(--white);cursor:not-allowed}
@media (max-width:640px){
  .pagination__pages{order:-1;flex-basis:100%}
  .pagination__step{flex:1 1 40%}
}

/* ---- Spezi detail: the verdict row carries Preis/Leistung ----------------- */
.verdict-row{gap:var(--sp-4) var(--sp-6)}
/* The figures stay one group so a narrow column wraps them together
   instead of stranding a single score on its own line. */
.verdict-scores{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--sp-4) var(--sp-5)}
.verdict-scores .score+.score{padding-left:var(--sp-5);border-left:var(--bw-hair) solid var(--line-hairline)}
.verdict-row .score--pp .score__num{color:var(--text-body)}
@media (max-width:520px){
  .verdict-scores .score+.score{padding-left:0;border-left:0}
}

/* A compact facts strip replaces the old Preis/Leistung section. */

/* ---- Homepage Testsieger -------------------------------------------------
   The whole block is one link, so it answers the pointer as one object: the
   bottle lifts and grows a little, the panel gains depth, and the red tag
   rises off it. Clicking presses the whole thing back down. */
.winner{transition:transform var(--dur-base) var(--ease-out)}
.winner .pimg--hero{transition:box-shadow var(--dur-base) var(--ease-out),
  background-color var(--dur-base) var(--ease-out)}
.winner .pimg--hero img{transition:transform var(--dur-slow) var(--ease-out)}
.winner__tag{transition:transform var(--dur-base) var(--ease-out),
  box-shadow var(--dur-base) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}
.winner__name{text-decoration-thickness:2px;text-underline-offset:3px}

.winner:hover .pimg--hero,.winner:focus-visible .pimg--hero{box-shadow:var(--shadow-overlay)}
.winner:hover .pimg--hero img,.winner:focus-visible .pimg--hero img{transform:scale(1.05) translateY(-8px)}
.winner:hover .winner__tag,.winner:focus-visible .winner__tag{background:var(--red-900);
  transform:translateY(-6px);box-shadow:0 20px 44px rgba(0,45,85,.26)}
.winner:hover .winner__name,.winner:focus-visible .winner__name{text-decoration:underline}
.winner:focus-visible{outline:var(--bw-rule) solid var(--focus-ring);outline-offset:6px;border-radius:var(--radius-3)}

.winner:active{transform:scale(.994)}
.winner:active .pimg--hero{box-shadow:var(--shadow-sm)}
.winner:active .pimg--hero img{transform:scale(1.01) translateY(-2px);transition-duration:var(--dur-fast)}
.winner:active .winner__tag{transform:translateY(-1px);box-shadow:var(--shadow-sm);
  transition-duration:var(--dur-fast)}

@media (prefers-reduced-motion:reduce){
  .winner:hover,.winner:active,.winner:focus-visible,
  .winner:hover .pimg--hero img,.winner:active .pimg--hero img,.winner:focus-visible .pimg--hero img,
  .winner:hover .winner__tag,.winner:active .winner__tag,.winner:focus-visible .winner__tag{transform:none}
}

/* ---- Round three -------------------------------------------------------- */

/* The recorded price sits between the Gesamtwertung and the figure derived
   from it, so the row reads score → price → verdict. */
.verdict-row .score--price .score__num{font-size:var(--fs-h2);color:var(--text-strong)}
.verdict-row .score--pp .score__num{font-size:var(--fs-h2)}

/* The per-tester peek is a child of .rating__track, not of the row, so the
   vendored child combinator could never match it and the panel never
   appeared. Same rule, as a descendant selector. */
.rating--peek:hover .rating__peek,
.rating--peek:focus-visible .rating__peek,
.rating--peek:focus-within .rating__peek{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* The Testsieger tag keeps its red on hover; only the depth changes. */
.winner:hover .winner__tag,.winner:focus-visible .winner__tag{background:var(--surface-accent)}
.winner:active .winner__tag{background:var(--surface-accent)}

/* The detail hero gives the bottle more height at the same width, so the
   product itself is bigger rather than the panel around it. Beside a wide
   content column the panel simply takes that column's height, and the
   bottle grows with it; stacked on a phone it keeps a portrait ratio. */
.hero--detail .pimg--hero{aspect-ratio:3/4;padding:var(--sp-4)}
@media (min-width:1024px){
  .hero--detail{align-items:stretch}
  .hero--detail>div:first-child{display:flex;flex-direction:column}
  .hero--detail .pimg--hero{aspect-ratio:auto;flex:1;min-height:440px}
}

/* ---- Spezi detail: previous / next by Wertung ----------------------------
   Back sits on the left edge and forward on the right, each led by an arrow
   that points the way it goes, so the direction reads before the label does.
   The "next" card mirrors: arrow outermost, text right-aligned. */
.pager-nav{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:stretch;
  border-top:var(--bw-hair) solid var(--line-hairline);padding-top:var(--sp-5)}
.neighbour{flex:0 1 auto;max-width:min(100%,26rem);align-items:center;gap:var(--sp-3);
  padding:var(--sp-3);border-radius:var(--radius-2);
  transition:background-color var(--dur-fast) var(--ease-out)}
.neighbour--next{margin-left:auto;flex-direction:row-reverse;text-align:right}
.neighbour--next .neighbour__text{justify-items:end}
.neighbour:hover{background:var(--surface-tint);color:inherit}

.neighbour__arrow{flex:none;display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:var(--radius-pill);
  border:var(--bw-hair) solid var(--line-hairline);background:var(--white);
  color:var(--navy);font-weight:var(--fw-bold);line-height:1;
  transition:background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),
    transform var(--dur-base) var(--ease-out)}
.neighbour--prev .neighbour__arrow::before{content:"\2190"}
.neighbour--next .neighbour__arrow::before{content:"\2192"}
.neighbour:hover .neighbour__arrow{background:var(--navy);border-color:var(--navy);color:var(--white)}
.neighbour--prev:hover .neighbour__arrow{transform:translateX(-3px)}
.neighbour--next:hover .neighbour__arrow{transform:translateX(3px)}
.neighbour:focus-visible{outline:var(--bw-rule) solid var(--focus-ring);outline-offset:2px;
  border-radius:var(--radius-2)}

@media (prefers-reduced-motion:reduce){
  .neighbour--prev:hover .neighbour__arrow,
  .neighbour--next:hover .neighbour__arrow{transform:none}
}
@media (max-width:640px){
  /* Stacked, both cards keep their own direction but share the full width. */
  .pager-nav{flex-direction:column;gap:var(--sp-2)}
  .neighbour{max-width:100%}
  .neighbour--next{margin-left:0}
}

/* ---- Test entry: square grade buttons -----------------------------------
   Stretching the 0-10 buttons across the panel made them read as bars, not
   as a scale. They go back to fixed squares that wrap when the row runs out
   of room, left-aligned so every tester row starts at the same place. */
.grade-scale{display:flex;flex-wrap:wrap;gap:var(--sp-2);--grade-size:52px}
.grade-scale label{flex:none;width:var(--grade-size);height:var(--grade-size);
  min-width:var(--grade-size);min-height:var(--grade-size);font-size:var(--fs-body-lg)}
@media (max-width:520px){
  /* Six per row rather than five plus a stranded "10": the grade panels give
     back their side padding so the squares can stay a 44px touch target. */
  .gradegroup.panel--pad{padding-inline:var(--sp-4)}
  .grade-scale{--grade-size:44px;gap:6px}
  .grade-scale label{font-size:var(--fs-body)}
}

/* A bare chevron reads as direction; the circle around it read as a button
   competing with the card it sits on. Drawn from two borders on a rotated
   square so the stroke matches the rest of the rules on the page. */
.neighbour__arrow{width:18px;height:auto;align-self:center;border:0;background:none;
  border-radius:0;color:var(--navy);
  transition:color var(--dur-fast) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.neighbour--prev .neighbour__arrow::before,
.neighbour--next .neighbour__arrow::before{content:"";display:block;width:11px;height:11px;
  border-top:var(--bw-strong) solid currentColor;border-right:var(--bw-strong) solid currentColor}
.neighbour--prev .neighbour__arrow::before{transform:rotate(-135deg);margin-left:4px}
.neighbour--next .neighbour__arrow::before{transform:rotate(45deg);margin-right:4px}
.neighbour:hover .neighbour__arrow{background:none;border:0;color:var(--red)}
@media (prefers-reduced-motion:no-preference){
  .neighbour--prev:hover .neighbour__arrow{transform:translateX(-4px)}
  .neighbour--next:hover .neighbour__arrow{transform:translateX(4px)}
}

/* A light scale behind the Preis/Leistung scatter: ten-point rules across
   the Gesamtwertung and four price steps, so a dot can be read off the
   chart instead of only hovered. */
.scatter__grid line{stroke:var(--line-hairline);stroke-width:.6}
.scatter__grid line.is-axis{stroke:var(--gray-300);stroke-width:.9}
.scatter__tick{fill:var(--text-muted);font-family:var(--font-core);font-size:7px}
.scatter__plot{max-height:400px}

/* The two routes to this tasting, under the verdict row. Deliberately quiet:
   the score is the headline, these are a footnote with buttons. */
.stream-link{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3);
  margin-top:var(--sp-4)}
.stream-link__watch::before{content:"\25B6";font-size:.72em;margin-right:var(--sp-1)}
.stream-link__watch::after{content:"\2197";margin-left:var(--sp-1);opacity:.7}
.stream-link__note{flex-basis:100%;color:var(--text-muted)}

/* Segment times are read as single tokens. */
.table--drinks td[data-label="Dauer"],
.table--drinks td[data-label="Zeitstempel"]{white-space:nowrap}

/* ---- Streams: overview cards --------------------------------------------
   One card per Testabend. The bottles from that evening make the card
   recognisable at a glance; the title and the primary button both open the
   evening's own page, and a second link opens the recording. */
.episode-card{display:flex;flex-direction:column}
.episode-card__strip{display:flex;align-items:flex-end;gap:var(--sp-2);
  padding:var(--sp-5) var(--sp-5) var(--sp-4);background:var(--surface-tint);min-height:132px}
.episode-card__thumb{flex:1 1 0;min-width:0;display:flex;align-items:flex-end;justify-content:center}
.episode-card__thumb .pimg{width:100%;padding:0;aspect-ratio:auto}
.episode-card__thumb img{max-height:96px;width:auto;margin-inline:auto}
.episode-card__more{flex:none;align-self:center;font-size:var(--fs-sm);font-weight:var(--fw-bold);
  color:var(--text-muted);font-variant-numeric:tabular-nums}
.episode-card__link{color:inherit;text-decoration:none}
.episode-card__link:hover{color:var(--red);text-decoration:underline;
  text-decoration-thickness:2px;text-underline-offset:3px}
.episode-card__actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;
  margin-top:auto;padding-top:var(--sp-4)}
.episode-card__watch::after{content:"\2197";margin-left:var(--sp-1)}
.episode-card:hover{border-color:var(--navy-100);box-shadow:var(--shadow-card-hover)}
.episode-card:hover .episode-card__strip{background:var(--navy-050)}

/* ---- Streams: one evening's tasting list ---------------------------------
   Position, bottle, name, score, and a jump button that says what it does:
   a play mark next to the timestamp, not a bare icon. */
.tasting{display:grid;counter-reset:none}
.tasting__row{display:grid;
  grid-template-columns:2.25rem 44px minmax(0,1fr) auto auto;
  gap:var(--sp-4);align-items:center;padding:var(--sp-3) var(--sp-2);
  border-bottom:var(--bw-hair) solid var(--line-hairline)}
.tasting__row:last-child{border-bottom:0}
.tasting__row:hover{background:var(--white);box-shadow:inset var(--bw-rule) 0 0 var(--red)}
.tasting__pos{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--text-muted);
  text-align:right;font-variant-numeric:tabular-nums}
.tasting__row>.pimg--thumb{width:44px;flex:none}
.tasting__text{display:grid;gap:1px;min-width:0}
.tasting__name{font-size:var(--fs-body);font-weight:var(--fw-bold);color:var(--text-strong);
  text-decoration:none;overflow-wrap:anywhere}
.tasting__name:hover{color:var(--red);text-decoration:underline;text-decoration-thickness:2px}
.tasting__sub{font-size:var(--fs-xs);color:var(--text-muted);overflow-wrap:anywhere}
.tasting__score{text-align:right;font-size:var(--fs-body);font-weight:var(--fw-bold);
  color:var(--text-strong);font-variant-numeric:tabular-nums;line-height:1.2;white-space:nowrap}
.tasting__score small{display:block;font-size:var(--fs-label);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--gray-300);font-weight:var(--fw-bold)}

.tasting__jump{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:38px;
  padding:var(--sp-2) 14px;border:var(--bw-hair) solid var(--gray-300);border-radius:var(--radius-pill);
  background:var(--white);color:var(--navy);font-size:var(--fs-sm);font-weight:var(--fw-bold);
  text-decoration:none;white-space:nowrap;font-variant-numeric:tabular-nums;
  transition:var(--motion-hover)}
.tasting__jump::before{content:"\25B6";font-size:.75em;line-height:1}
.tasting__jump:hover{background:var(--red);border-color:var(--red);color:var(--white)}
.tasting__jump--none{border-style:dashed;color:var(--text-muted);pointer-events:none}
.tasting__jump--none::before{content:none}

@media (max-width:768px){
  .tasting__row{grid-template-columns:44px minmax(0,1fr) auto;
    gap:var(--sp-2) var(--sp-3);padding-block:var(--sp-4)}
  .tasting__pos{display:none}
  .tasting__score{grid-column:2;text-align:left;font-size:var(--fs-sm)}
  .tasting__score small{display:inline;margin-left:var(--sp-2)}
  .tasting__jump{grid-row:1/span 2;grid-column:3;align-self:center}
}

/* The evening's superlatives: each names a Spezi and links to it. */
.episode-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--sp-4)}
.episode-fact{display:grid;gap:var(--sp-1);align-content:start;padding-top:var(--sp-3);
  border-top:var(--bw-rule) solid var(--line-accent)}
.episode-fact__label{font-size:var(--fs-label);font-weight:var(--fw-bold);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--text-muted)}
.episode-fact__name{font-size:var(--fs-h4);font-weight:var(--fw-bold);color:var(--text-strong);
  text-decoration:none;overflow-wrap:anywhere}
.episode-fact__name:hover{color:var(--red);text-decoration:underline;text-decoration-thickness:2px}
.episode-fact__value{font-size:var(--fs-sm);color:var(--text-muted);font-variant-numeric:tabular-nums}

/* ---- Catalog pager, quieter ---------------------------------------------
   The numbers lose their boxes; only the current page keeps a filled pill.
   Zurück/Weiter use the same drawn chevrons as the Spezi pager instead of
   arrow characters, and the whole row sits tighter. */
.pagination{gap:var(--sp-2) var(--sp-4)}
.pagination__pages{gap:2px}
.pagination__pages a,.pagination__pages span{border:0;min-width:34px;min-height:34px;
  padding-inline:var(--sp-2);border-radius:var(--radius-1)}
.pagination__pages a:hover{background:var(--surface-tint);color:var(--red)}
.pagination__pages [aria-current="page"]{background:var(--navy);color:var(--white)}
.pagination__gap{min-width:auto;padding-inline:var(--sp-1);color:var(--gray-300)}

/* `.pagination a` from the design system is more specific than a lone class,
   so the element has to be named to drop its box. */
.pagination a.pagination__step,
.pagination span.pagination__step{border:0;background:none;min-height:34px;
  padding-inline:0;gap:var(--sp-2);color:var(--navy)}
.pagination a.pagination__step:hover{background:none;border:0;color:var(--red)}
.pagination__step--prev::before,
.pagination__step--next::after{content:"";display:inline-block;width:8px;height:8px;
  border-top:var(--bw-strong) solid currentColor;border-right:var(--bw-strong) solid currentColor}
.pagination__step--prev::before{transform:rotate(-135deg)}
.pagination__step--next::after{transform:rotate(45deg)}
.pagination span.pagination__step[aria-disabled="true"]{border:0;background:none;color:var(--gray-300)}

/* ---- Spezispiele ---------------------------------------------------------
   Small first-party games built from the existing design tokens. They keep no
   browser storage and submit no play data. */
.game-hub{display:grid;gap:var(--sp-5);grid-template-columns:repeat(3,minmax(0,1fr))}
.game-card{display:grid;grid-template-rows:230px 1fr;overflow:hidden;border:var(--bw-strong) solid var(--navy);
  border-radius:var(--radius-2);background:var(--white);color:inherit;text-decoration:none;box-shadow:var(--shadow-sm);
  transition:transform 180ms var(--ease-out),box-shadow 180ms var(--ease-out),border-color 180ms var(--ease-out)}
.game-card:hover,.game-card:focus-visible{transform:translateY(-6px);border-color:var(--red);box-shadow:var(--shadow-overlay);color:inherit}
.game-card:active{transform:translateY(-2px) scale(.99)}
.game-card:focus-visible{outline:var(--bw-block) solid var(--focus-ring);outline-offset:3px}
.game-card__body{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-4);align-items:start;padding:var(--sp-5)}
.game-card__num{display:grid;place-items:center;width:44px;aspect-ratio:1;border-radius:var(--radius-pill);
  background:var(--red);color:var(--white);font-weight:var(--fw-bold);font-variant-numeric:tabular-nums}
.game-card__title{display:block;font-size:var(--fs-h3);line-height:var(--lh-heading);font-weight:var(--fw-bold);color:var(--navy)}
.game-card__copy{display:block;margin-top:var(--sp-2);color:var(--text-muted);line-height:var(--lh-body)}
.game-card .link-arrow{display:flex;width:max-content;justify-self:start;margin-top:var(--sp-3)}
.game-card__visual{position:relative;display:block;overflow:hidden;border-bottom:var(--bw-strong) solid var(--navy);
  isolation:isolate;transition:border-color 180ms var(--ease-out)}
.game-card:hover .game-card__visual,.game-card:focus-visible .game-card__visual{border-color:var(--red)}
.game-card__visual::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(135deg,transparent 55%,rgba(255,255,255,.34))}
.game-card__visual--geo{background-color:#dcecf0;
  background-image:linear-gradient(29deg,transparent 46%,rgba(255,255,255,.8) 47% 51%,transparent 52%),
    linear-gradient(151deg,transparent 57%,rgba(255,255,255,.82) 58% 62%,transparent 63%),
    repeating-linear-gradient(90deg,transparent 0 58px,rgba(0,45,85,.09) 59px 61px)}
.game-card__route{position:absolute;left:18%;top:48%;width:56%;height:34%;border-top:4px dashed var(--red);
  border-radius:50%;transform:rotate(-12deg)}
.game-card__pin{position:absolute;z-index:2;width:22px;height:22px;border:4px solid var(--white);border-radius:50% 50% 50% 0;
  background:var(--navy);box-shadow:var(--shadow-sm);transform:rotate(-45deg);transition:transform 220ms var(--ease-out)}
.game-card__pin--start{left:15%;top:56%}
.game-card__pin--finish{right:23%;top:25%;background:var(--red)}
.game-card__bottle{position:absolute;z-index:3;object-fit:contain;filter:drop-shadow(0 12px 10px rgba(0,45,85,.22));
  transition:transform 220ms var(--ease-out)}
.game-card__bottle--hero{right:2%;bottom:-18px;width:42%;height:230px;transform:rotate(7deg)}
.game-card:hover .game-card__bottle--hero,.game-card:focus-visible .game-card__bottle--hero{transform:rotate(2deg) translateY(-7px) scale(1.04)}
.game-card:hover .game-card__pin--finish,.game-card:focus-visible .game-card__pin--finish{transform:rotate(-45deg) translate(4px,-5px)}
.game-card__visual--memory{display:grid;grid-template-columns:repeat(4,70px);place-content:center;gap:10px;
  background:linear-gradient(135deg,var(--navy) 0 64%,#0b426d 64%)}
.game-card__mini{display:grid;place-items:center;height:118px;padding:7px;border:2px solid var(--white);border-radius:var(--radius-1);
  background:var(--white);box-shadow:0 8px 15px rgba(0,0,0,.2);transition:transform 220ms var(--ease-out)}
.game-card__mini:nth-child(1){transform:rotate(-7deg) translateY(7px)}
.game-card__mini:nth-child(2){transform:rotate(4deg) translateY(-6px)}
.game-card__mini:nth-child(3){transform:rotate(-3deg) translateY(4px)}
.game-card__mini:nth-child(4){transform:rotate(6deg) translateY(-4px)}
.game-card__mini img{width:100%;height:100%;object-fit:contain}
.game-card__mini--back{background:var(--red);color:var(--white);font-size:var(--fs-h2);font-weight:var(--fw-bold)}
.game-card__mini--back b{display:grid;place-items:center;width:50px;aspect-ratio:1;border:3px solid var(--white);border-radius:50%}
.game-card:hover .game-card__mini:nth-child(1),.game-card:focus-visible .game-card__mini:nth-child(1){transform:rotate(-3deg) translateY(-3px)}
.game-card:hover .game-card__mini:nth-child(2),.game-card:focus-visible .game-card__mini:nth-child(2){transform:rotate(-2deg) translateY(4px)}
.game-card:hover .game-card__mini:nth-child(3),.game-card:focus-visible .game-card__mini:nth-child(3){transform:rotate(3deg) translateY(-4px)}
.game-card:hover .game-card__mini:nth-child(4),.game-card:focus-visible .game-card__mini:nth-child(4){transform:rotate(2deg) translateY(2px)}
.game-card__visual--quiz{background:linear-gradient(112deg,var(--red) 0 48%,var(--navy) 48%);color:var(--white)}
.game-card__visual--quiz::before{content:"?";position:absolute;right:5%;top:-34%;font-size:18rem;font-weight:var(--fw-bold);
  line-height:1;color:rgba(255,255,255,.07);transform:rotate(8deg)}
.game-card__bottle--quiz{left:50%;bottom:-28px;width:42%;height:235px;transform:translateX(-50%) rotate(-3deg)}
.game-card__quiz-word{position:absolute;z-index:4;font-size:clamp(1.35rem,2.2vw,2rem);font-weight:var(--fw-bold);
  letter-spacing:.04em;text-shadow:0 2px 7px rgba(0,0,0,.22);transition:transform 220ms var(--ease-out)}
.game-card__quiz-word--real{left:7%;top:14%;transform:rotate(-8deg)}
.game-card__quiz-word--fake{right:5%;bottom:11%;transform:rotate(8deg)}
.game-card:hover .game-card__bottle--quiz,.game-card:focus-visible .game-card__bottle--quiz{transform:translateX(-50%) rotate(2deg) translateY(-6px) scale(1.04)}
.game-card:hover .game-card__quiz-word--real,.game-card:focus-visible .game-card__quiz-word--real{transform:rotate(-3deg) scale(1.08)}
.game-card:hover .game-card__quiz-word--fake,.game-card:focus-visible .game-card__quiz-word--fake{transform:rotate(3deg) scale(1.08)}
.game-card__fallback{display:grid;place-items:center;width:90px;aspect-ratio:1;border-radius:50%;background:var(--red);
  color:var(--white);font-size:var(--fs-d3);font-weight:var(--fw-bold)}
.game-privacy{max-width:76ch;margin:var(--sp-8) auto 0;color:var(--text-muted);font-size:var(--fs-xs);text-align:center}

.game-app{border:var(--bw-strong) solid var(--navy);border-radius:var(--radius-2);background:var(--white);
  box-shadow:var(--shadow-card);padding:clamp(var(--sp-4),4vw,var(--sp-7));overflow:hidden}
.game-menu{max-width:620px;margin:auto;text-align:center;align-items:center;padding-block:var(--sp-6)}
.game-hud{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);
  padding-bottom:var(--sp-4);margin-bottom:var(--sp-5);border-bottom:var(--bw-rule) solid var(--line-hairline);
  font-variant-numeric:tabular-nums}
.game-hud strong{font-size:var(--fs-h4);color:var(--navy)}
.game-actions{margin-top:var(--sp-4)}
.game-result{min-height:3em;margin-top:var(--sp-4);padding:var(--sp-3) var(--sp-4);
  border-left:var(--bw-block) solid var(--navy);background:var(--navy-050);color:var(--text-strong)}
.game-result.is-correct{border-left-color:#19733b;background:#edf8f0}
.game-result.is-wrong{border-left-color:var(--red);background:var(--feedback-error-bg)}
.game-help{margin:var(--sp-2) 0 0;color:var(--text-muted);font-size:var(--fs-xs)}
.game-finish{display:flex;flex-direction:column;justify-content:center;max-width:620px;margin:auto;text-align:center;align-items:center;padding-block:var(--sp-7)}

.geo-game{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:var(--sp-6);align-items:stretch}
.geo-game__bottle{display:grid;grid-template-rows:auto minmax(0,1fr) auto;justify-items:center;gap:var(--sp-3);
  min-height:500px;padding:var(--sp-4);border-radius:var(--radius-2);background:var(--surface-sunken)}
.geo-game__bottle img{width:100%;height:440px;object-fit:contain;object-position:center;filter:drop-shadow(0 12px 14px rgba(0,45,85,.16))}
.geo-game__bottle p{margin:0;font-weight:var(--fw-bold);text-align:center;color:var(--navy)}
.geo-game__map-wrap{min-width:0}
#geo-game-map{height:520px;border:var(--bw-strong) solid var(--navy);border-radius:var(--radius-2);background:var(--navy-050)}
#geo-game-map:focus-visible{outline:var(--bw-block) solid var(--red);outline-offset:2px}
.geo-game .leaflet-container{font:inherit}

.game-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-5)}
.game-toolbar .segmented{max-width:360px;flex:1 1 220px}
.memory-grid{display:grid;gap:clamp(6px,1.2vw,var(--sp-3));margin:auto;max-width:980px}
.memory-grid[data-level="easy"]{grid-template-columns:repeat(4,minmax(0,1fr));max-width:660px}
.memory-grid[data-level="medium"]{grid-template-columns:repeat(5,minmax(0,1fr));max-width:820px}
.memory-grid[data-level="hard"]{grid-template-columns:repeat(6,minmax(0,1fr))}
.memory-card{position:relative;aspect-ratio:3/4;border:0;padding:0;background:transparent;cursor:pointer;perspective:800px}
.memory-card:focus-visible{outline:var(--bw-block) solid var(--red);outline-offset:3px;border-radius:var(--radius-2)}
.memory-card__inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 300ms var(--ease-out)}
.memory-card.is-flipped .memory-card__inner,.memory-card.is-matched .memory-card__inner{transform:rotateY(180deg)}
.memory-card__face{position:absolute;inset:0;display:grid;place-items:center;backface-visibility:hidden;
  border:var(--bw-strong) solid var(--navy);border-radius:var(--radius-2);overflow:hidden}
.memory-card__back{background:var(--navy);color:var(--white)}
.memory-card__back::before{content:"S";display:grid;place-items:center;width:52%;aspect-ratio:1;border-radius:50%;
  background:var(--red);font-size:clamp(1.4rem,4vw,3rem);font-weight:var(--fw-bold)}
.memory-card__front{transform:rotateY(180deg);grid-template-rows:minmax(0,1fr) auto;gap:var(--sp-1);
  padding:var(--sp-2);background:var(--white)}
.memory-card__front img{width:100%;height:100%;min-height:0;object-fit:contain}
.memory-card__front span{max-width:100%;font-size:clamp(.55rem,1vw,var(--fs-xs));font-weight:var(--fw-bold);
  color:var(--navy);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.memory-card.is-matched{cursor:default}
.memory-card.is-matched .memory-card__face{border-color:#19733b;box-shadow:inset 0 0 0 2px #19733b}

.game-app--quiz{max-width:820px;margin:auto}
.name-quiz{display:grid;justify-items:center;gap:var(--sp-5);padding:clamp(var(--sp-5),8vw,var(--sp-9)) var(--sp-4);
  border-radius:var(--radius-2);background:var(--surface-tint);text-align:center}
.name-quiz h2{max-width:18ch;overflow-wrap:anywhere}
.name-quiz__choices{display:flex;gap:var(--sp-4);flex-wrap:wrap;justify-content:center}
.name-quiz__choices .btn{min-width:150px}
.name-quiz__reveal{display:flex;align-items:center;gap:var(--sp-4);max-width:560px;text-align:left}
.name-quiz__reveal img{width:90px;height:144px;object-fit:contain;flex:none;filter:drop-shadow(0 8px 10px rgba(0,45,85,.15))}
.name-quiz__reveal p{margin:0;color:var(--text-muted)}

@media (max-width:900px){
  .game-hub{grid-template-columns:1fr}
  .game-card{grid-template-columns:minmax(260px,38%) minmax(0,1fr);grid-template-rows:minmax(230px,auto)}
  .game-card__visual{border-bottom:0;border-right:var(--bw-strong) solid var(--navy)}
  .game-card:hover .game-card__visual,.game-card:focus-visible .game-card__visual{border-color:var(--red)}
  .game-card__body{align-self:center}
  .geo-game{grid-template-columns:1fr}
  .geo-game__bottle{min-height:310px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;align-items:center}
  .geo-game__bottle .eyebrow{grid-column:1/-1}
  .geo-game__bottle img{height:260px}
  #geo-game-map{height:430px}
}
@media (max-width:620px){
  .game-app{padding:var(--sp-3)}
  .game-card{grid-template-columns:1fr;grid-template-rows:210px 1fr}
  .game-card__visual{border-right:0;border-bottom:var(--bw-strong) solid var(--navy)}
  .game-card__visual--memory{grid-template-columns:repeat(4,58px)}
  .game-card__mini{height:102px}
  .game-card__body{padding:var(--sp-4)}
  .game-toolbar{align-items:stretch;flex-direction:column}
  .game-toolbar .segmented{width:100%;max-width:none}
  .memory-score{margin:var(--sp-1) 0 0;justify-content:space-between;gap:var(--sp-2) var(--sp-4)}
  .memory-grid[data-level="easy"]{grid-template-columns:repeat(3,minmax(0,1fr))}
  .memory-grid[data-level="medium"]{grid-template-columns:repeat(4,minmax(0,1fr))}
  .memory-grid[data-level="hard"]{grid-template-columns:repeat(5,minmax(0,1fr))}
  .memory-card__front{padding:4px}
  .geo-game__bottle{grid-template-columns:1fr;grid-template-rows:auto 1fr auto}
  .geo-game__bottle .eyebrow{grid-column:auto}
  #geo-game-map{height:390px}
  .name-quiz__reveal{align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .game-card,.game-card *,.memory-card__inner{transition:none}
}

/* ---- Game room -----------------------------------------------------------
   The individual games use the same editorial colours and geometry as the
   catalogue, with larger targets and small bits of motion that explain state. */
.game-intro{position:relative;overflow:hidden;padding-bottom:clamp(var(--sp-5),5vw,var(--sp-7))}
.game-intro__copy{position:relative;z-index:1;max-width:820px}
.game-intro__bubble{position:absolute;border-radius:50%;pointer-events:none;opacity:.08}
.game-intro__bubble--one{right:8%;top:24%;width:150px;aspect-ratio:1;background:var(--red)}
.game-intro__bubble--two{right:2%;top:6%;width:82px;aspect-ratio:1;border:16px solid var(--navy)}

.game-app{position:relative;padding:clamp(var(--sp-4),4vw,var(--sp-7));border:0;
  background:linear-gradient(145deg,var(--white),var(--surface-tint));box-shadow:0 18px 45px rgba(0,45,85,.14)}
.game-app::before{content:"";position:absolute;inset:0 0 auto;height:5px;background:linear-gradient(90deg,var(--red) 0 38%,var(--navy) 38%)}
.game-menu{position:relative;display:grid;justify-items:center;gap:var(--sp-6);max-width:780px;padding-block:var(--sp-7)}
.game-menu__mark{display:grid;place-items:center;width:84px;height:84px;flex:none;padding:0;border-radius:50%;background:var(--red);
  color:var(--white);font-size:3.6rem;font-weight:var(--fw-bold);line-height:1;box-shadow:0 10px 0 rgba(230,0,5,.12);transform:rotate(-8deg)}
.game-menu>.stack{text-align:center}
.game-mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);width:100%}
.game-mode{display:flex;align-items:center;gap:var(--sp-4);min-height:116px;padding:var(--sp-5);border:var(--bw-strong) solid var(--navy);
  border-radius:var(--radius-2);background:var(--white);color:var(--navy);text-align:left;cursor:pointer;box-shadow:var(--shadow-sm);
  transition:transform 180ms var(--ease-out),box-shadow 180ms var(--ease-out),border-color 180ms var(--ease-out)}
.game-mode:hover,.game-mode:focus-visible{transform:translateY(-4px);border-color:var(--red);box-shadow:var(--shadow-card)}
.game-mode:active{transform:translateY(-1px) scale(.99)}
.game-mode:focus-visible{outline:var(--bw-block) solid var(--focus-ring);outline-offset:3px}
.game-mode__number{display:grid;place-items:center;width:62px;aspect-ratio:1;flex:none;border-radius:50%;background:var(--navy);
  color:var(--white);font-size:var(--fs-h2);font-weight:var(--fw-bold)}
.game-mode:last-child .game-mode__number{background:var(--red)}
.game-mode strong,.game-mode small{display:block}
.game-mode strong{font-size:var(--fs-h4)}
.game-mode small{margin-top:4px;color:var(--text-muted);font-size:var(--fs-sm)}

.game-stage-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4)}
.game-stage-head .game-hud{flex:1;margin:0;padding:0;border:0}
.game-quiet{border:0;border-bottom:2px solid transparent;padding:var(--sp-2) 0;background:transparent;color:var(--text-muted);
  font:inherit;font-size:var(--fs-sm);font-weight:var(--fw-bold);cursor:pointer}
.game-quiet:hover,.game-quiet:focus-visible{border-bottom-color:var(--red);color:var(--navy)}
.game-progress{height:8px;margin:var(--sp-4) 0 var(--sp-6);overflow:hidden;border-radius:var(--radius-pill);background:var(--navy-100)}
.game-progress>span{display:block;width:10%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--red),#ff474b);
  transition:width 350ms var(--ease-out)}

.geo-game{gap:clamp(var(--sp-4),4vw,var(--sp-7))}
.geo-game__bottle{position:relative;overflow:hidden;min-height:530px;background:
  radial-gradient(circle at 18% 14%,rgba(255,255,255,.22) 0 4%,transparent 4.5%),
  radial-gradient(circle at 87% 26%,rgba(255,255,255,.13) 0 8%,transparent 8.5%),
  linear-gradient(155deg,var(--navy) 0 65%,var(--red) 65%);color:var(--white)}
.geo-game__bottle .eyebrow{color:rgba(255,255,255,.78)}
.geo-game__bottle img{position:relative;z-index:1;filter:drop-shadow(0 18px 16px rgba(0,0,0,.32));transition:opacity 180ms ease,transform 400ms var(--ease-out)}
.geo-game__bottle img{height:440px}
.geo-game__bottle img.is-entering{opacity:0;transform:translateY(32px) rotate(4deg) scale(.93)}
.geo-game__bottle p{position:relative;z-index:1;padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-pill);
  background:var(--white);color:var(--navy);box-shadow:var(--shadow-sm)}
.geo-game__map-frame{position:relative;overflow:hidden;border-radius:var(--radius-2);box-shadow:var(--shadow-card)}
#geo-game-map{border:0;border-radius:0}
#geo-game-map{height:500px}
.game-result{min-height:0;margin-top:var(--sp-5);padding:var(--sp-4) var(--sp-5);border:0;border-radius:var(--radius-2);
  background:var(--navy);color:var(--white);font-size:var(--fs-body-lg);font-weight:var(--fw-bold);text-align:center;
  box-shadow:0 7px 0 var(--navy-100);animation:gameResultIn 220ms var(--ease-out)}
.game-result.is-correct{background:#19733b;color:var(--white);box-shadow:0 7px 0 #cce9d4}
.game-result.is-wrong{background:var(--red);color:var(--white);box-shadow:0 7px 0 #ffd2d3}
.game-actions--primary{display:grid;max-width:560px;margin:var(--sp-6) auto 0}
.game-actions--primary .btn{width:100%;min-height:58px;font-size:var(--fs-body-lg)}
.geo-game__map-frame .game-actions--primary{position:absolute;z-index:600;left:50%;bottom:var(--sp-7);width:min(68%,240px);
  margin:0;transform:translateX(-50%)}
.geo-game__map-frame .game-actions--primary .btn{min-height:44px;padding:var(--sp-2) var(--sp-4);font-size:var(--fs-sm);box-shadow:0 6px 16px rgba(0,45,85,.2)}

.game-app--memory{background:var(--navy-050)}
.shuffle-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:46px;padding:var(--sp-2) var(--sp-4);
  border:var(--bw-strong) solid var(--navy);border-radius:var(--radius-pill);background:var(--white);color:var(--navy);
  font:inherit;font-weight:var(--fw-bold);cursor:pointer;transition:var(--motion-hover)}
.shuffle-button span{font-size:1.35em;transition:transform 280ms var(--ease-out)}
.shuffle-button:hover,.shuffle-button:focus-visible{border-color:var(--red);color:var(--red);box-shadow:var(--shadow-sm)}
.shuffle-button:hover span{transform:rotate(110deg)}
.memory-score{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-2) var(--sp-5);margin:0 0 0 auto}
.memory-score>span{display:flex;align-items:baseline;gap:var(--sp-2)}
.memory-score small{font-size:var(--fs-label);font-weight:var(--fw-bold);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted)}
.memory-score strong{font-size:var(--fs-h4);color:var(--navy);font-variant-numeric:tabular-nums}
.memory-board{position:relative;min-height:260px;padding:clamp(var(--sp-3),3vw,var(--sp-5));border-radius:var(--radius-2);
  background:linear-gradient(145deg,#073963,var(--navy));box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 14px 28px rgba(0,45,85,.17)}
.memory-board::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(circle at 10% 20%,rgba(255,255,255,.06) 0 2px,transparent 3px);background-size:34px 34px}
.memory-shuffle{position:absolute;z-index:20;inset:0;display:grid;place-content:center;justify-items:center;gap:var(--sp-3);
  border-radius:inherit;background:rgba(0,45,85,.9);color:var(--white);text-align:center;backdrop-filter:blur(4px)}
.memory-shuffle[hidden]{display:none}
.memory-shuffle img{width:88px;animation:shuffleIcon 600ms var(--ease-out) both}
.memory-shuffle strong{font-size:var(--fs-h3);animation:shuffleCopy 500ms var(--ease-out) both}
.memory-grid{position:relative;z-index:1}
.memory-grid.is-shuffling .memory-card{animation:shuffleCard 560ms var(--ease-out) both;animation-delay:calc(var(--card-index) * 18ms)}
.memory-card{border-radius:var(--radius-2);transition:transform 160ms var(--ease-out),filter 160ms var(--ease-out)}
.memory-card:not(.is-flipped):not(.is-matched):hover{transform:translateY(-5px) rotate(1deg);filter:brightness(1.08)}
.memory-card__face{border-color:rgba(255,255,255,.84);box-shadow:0 7px 13px rgba(0,0,0,.23)}
.memory-card__back{background:linear-gradient(145deg,#0a3a64,var(--navy))}
.memory-card__back::before{content:"";width:58%;aspect-ratio:1;border-radius:50%;background:url('/assets/spezitest-icon-memory.svg') center/contain no-repeat}
.memory-card.is-matched{animation:memoryMatch 420ms var(--ease-out)}
.memory-complete{position:absolute;z-index:30;inset:0;display:grid;place-content:center;padding:var(--sp-4);
  border-radius:inherit;background:rgba(3,32,58,.68);backdrop-filter:blur(4px);animation:gameResultIn 240ms var(--ease-out)}
.memory-complete[hidden]{display:none}
.memory-complete__card{display:grid;justify-items:center;gap:var(--sp-3);max-width:340px;padding:var(--sp-6) var(--sp-7);
  text-align:center;background:var(--white);border:var(--bw-strong) solid var(--navy);border-radius:var(--radius-2);box-shadow:var(--shadow-overlay)}
.memory-complete__card img{width:52px;height:52px}
.memory-complete__title{font-size:var(--fs-h2);line-height:var(--lh-heading);color:var(--navy)}
.memory-complete__card .meta{font-variant-numeric:tabular-nums}
.memory-complete__card .btn{margin-top:var(--sp-2)}

.game-app--quiz{max-width:880px;background:linear-gradient(145deg,var(--white),#edf3f7)}
.name-quiz{position:relative;overflow:hidden;height:520px;padding:clamp(var(--sp-5),6vw,var(--sp-7)) var(--sp-5);
  grid-template-areas:"label" "title" "actions";grid-template-rows:auto minmax(0,1fr) auto;
  border:0;background:linear-gradient(145deg,var(--white),var(--navy-050));box-shadow:inset 0 0 0 var(--bw-strong) var(--navy)}
.name-quiz::before{content:"";position:absolute;inset:auto -15% -58% 38%;height:95%;border-radius:50%;background:var(--red);opacity:.05}
.name-quiz>.eyebrow{grid-area:label}
.name-quiz h2{position:relative;z-index:1;grid-area:title;align-self:center;font-size:clamp(2rem,5vw,3.7rem);
  transition:font-size 240ms var(--ease-out),transform 240ms var(--ease-out)}
.name-quiz h2.is-new{animation:quizNameIn 260ms var(--ease-out)}
.name-quiz.is-answered{grid-template-areas:"label" "title" "result" "actions";
  grid-template-rows:auto auto minmax(0,1fr) auto;gap:var(--sp-3)}
.name-quiz.is-answered h2{align-self:start;font-size:clamp(1.45rem,3vw,2.25rem);transform:translateY(-2px)}
.name-quiz.is-finished{grid-template-areas:"label" "title" "actions";grid-template-rows:auto minmax(0,1fr) auto}
.name-quiz__spark{position:absolute;color:var(--red);font-weight:var(--fw-bold);opacity:.22;pointer-events:none}
.name-quiz__spark--one{left:8%;top:14%;font-size:4rem;transform:rotate(-12deg)}
.name-quiz__spark--two{right:8%;bottom:10%;font-size:8rem;transform:rotate(12deg)}
.name-quiz__choices{position:relative;z-index:2;display:grid;grid-area:actions;grid-template-columns:1fr 1fr;gap:var(--sp-4);width:min(100%,560px)}
.quiz-choice{display:flex;align-items:center;justify-content:center;gap:var(--sp-3);min-height:76px;padding:var(--sp-3) var(--sp-5);
  border:var(--bw-strong) solid var(--navy);border-radius:var(--radius-2);background:var(--white);color:var(--navy);
  font:inherit;font-size:var(--fs-h4);cursor:pointer;box-shadow:0 6px 0 var(--navy);transition:transform 150ms var(--ease-out),box-shadow 150ms var(--ease-out),background 150ms ease}
.quiz-choice span{display:grid;place-items:center;width:36px;aspect-ratio:1;border-radius:50%;background:var(--navy);color:var(--white);font-size:var(--fs-body-lg)}
.quiz-choice--real{grid-column:1}
.quiz-choice--fake{grid-column:2}
.quiz-choice--fake span{background:var(--red)}
.quiz-choice:hover,.quiz-choice:focus-visible{transform:translateY(-4px);border-color:var(--red);box-shadow:0 10px 0 rgba(230,0,5,.2)}
.quiz-choice:active{transform:translateY(3px);box-shadow:0 2px 0 var(--navy)}
.quiz-choice.is-next{border-color:var(--red);background:var(--red);color:var(--white);box-shadow:0 6px 0 #9d0003;animation:quizNextIn 220ms var(--ease-out)}
.quiz-choice.is-next{grid-column:1/-1;justify-self:center;width:min(100%,280px)}
.quiz-choice.is-next span{background:var(--white);color:var(--red)}
.quiz-choice.is-next.was-correct{border-color:#19733b;background:#19733b;box-shadow:0 6px 0 #0d4d27}
.quiz-choice.is-next.was-correct span{color:#19733b}
.name-quiz__restart{grid-column:1/-1;min-height:70px}
.name-quiz__reveal{position:relative;z-index:1;grid-area:result;align-self:center;width:fit-content;max-width:min(100%,600px);padding:var(--sp-4) var(--sp-5);border-radius:var(--radius-2);
  background:var(--white);box-shadow:var(--shadow-card);animation:gameResultIn 260ms var(--ease-out)}
.name-quiz__reveal p{max-width:46ch}
.name-quiz__reveal strong{font-size:var(--fs-h4);color:var(--navy)}
.name-quiz__reveal.is-correct{box-shadow:inset 5px 0 #19733b,var(--shadow-card)}
.name-quiz__reveal.is-wrong{box-shadow:inset 5px 0 var(--red),var(--shadow-card)}

@keyframes gameResultIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes shuffleIcon{0%{opacity:0;transform:translateX(-80px) rotate(-30deg)}50%{opacity:1;transform:translateX(18px) rotate(18deg)}100%{transform:none}}
@keyframes shuffleCopy{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes shuffleCard{0%{opacity:1;transform:none}45%{opacity:.45;transform:translateY(-18px) rotate(5deg) scale(.94)}100%{opacity:1;transform:none}}
@keyframes memoryMatch{50%{transform:scale(1.06)}}
@keyframes quizNameIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
@keyframes quizNextIn{from{opacity:.25;transform:scale(.95)}to{opacity:1;transform:none}}

@media (max-width:700px){
  .game-intro__bubble{display:none}
  .game-mode-grid{grid-template-columns:1fr}
  .game-stage-head{align-items:flex-start}
  .game-stage-head .game-hud{display:grid;gap:var(--sp-1)}
  .memory-complete__card{padding:var(--sp-5)}
  .memory-complete__card .btn{width:100%}
  .geo-game__bottle{min-height:440px}
  .geo-game__bottle img{height:340px}
  #geo-game-map{height:420px}
  .name-quiz{height:560px;padding-inline:var(--sp-3)}
  .name-quiz__choices{gap:var(--sp-2)}
  .quiz-choice{min-height:68px;padding-inline:var(--sp-2)}
}
@media (prefers-reduced-motion:reduce){
  .game-menu__mark,.memory-shuffle img,.memory-shuffle strong,.memory-grid.is-shuffling .memory-card,
  .memory-card.is-matched,.name-quiz h2,.quiz-choice.is-next,.name-quiz__reveal,.game-result{animation:none}
}