/* Sprachpass — design system.
 *
 * THE HOUSE STYLE IS FSPREIF'S (which is in turn NT2exam's). Sprachpass is a
 * sibling product and was reading as a different company, so the identity below
 * is LIFTED from fspreif's own token source (styles/site.css) rather than
 * eyeballed: the palette, the two type families, the four radii, the nine
 * spacing steps, the four blue-tinted shadows, the type scale, the motion curve
 * and the 44px tap floor are the same numbers, name for name.
 *
 * WHAT IS SPRACHPASS'S OWN AND STAYS: the level palette (A1 / A2 / B1) and the
 * result verdicts, which have to survive on a report and are therefore mapped
 * onto fspreif's own accessible semantic pairs; the square brand mark; the
 * four-skill tab bar; the voice stage.
 *
 * Rules of the system
 *   - Spacing comes from --s1..--s9. No one-off margins.
 *   - Type comes from --fs-*. Headings in the display family (Archivo), body in
 *     the text family (Inter).
 *   - One surface: 1px var(--line), var(--radius-lg), white, var(--shadow-card).
 *   - Everything pressable is a PILL at least var(--tap) tall — except the
 *     multi-line navigation rows, which are cards and carry the card treatment.
 *   - Three button levels: primary / secondary / quiet (+ the on-navy pair).
 */
@font-face{font-family:"Inter";src:url("/assets/fonts/Inter-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/Inter-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/Inter-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("/assets/fonts/Archivo-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("/assets/fonts/Archivo-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  color-scheme:light;

  /* ---- palette — fspreif's, role for role ---- */
  --ink:#1A2238;
  --ink-mid:#28304A;
  --muted:#5A6072;
  --faint:#93A0B8;
  --paper:#FFFFFF;
  --wash:#F6F8FC;
  --sunken:#E8EBF2;
  --line:#E3E8F0;
  --line-soft:#EDF1F7;
  --line-strong:#C9D5E8;

  /* THE one brand colour. */
  --blue:#14346B;
  --blue-deep:#0E2A5C;
  --blue-tint:#EAF0FB;
  --blue-line:#9DB6E0;
  --link:#2457C5;
  --link-soft:#EEF3FF;

  /* The light stop of the navy gradient and the two inks that survive on it.
     PRECOMPUTED, never color-mix(): color-mix() is a SyntaxError before Safari
     16.2 and takes the whole declaration with it. */
  --hero-end:#48618C;
  --hero-lede-ink:#F6F7F9;
  --hero-proof-ink:#F1F3F6;
  --on-navy-08:rgba(255,255,255,.08);
  --on-navy-12:rgba(255,255,255,.12);
  --on-navy-16:rgba(255,255,255,.16);
  --on-navy-24:rgba(255,255,255,.24);
  --on-navy-34:rgba(255,255,255,.34);
  --paper-a94:rgba(255,255,255,.94);

  /* The one warm accent, rationed. Two values: #F5A524 is 2.04:1 on white —
     correct as a rule or a fill, unreadable as text — so TEXT takes the deep
     value (5.19:1 on white). */
  --warm:#F5A524;
  --warm-deep:#A15C00;
  --warm-wash:rgba(245,165,36,.08);

  /* ---- verdict / level palette ---- */
  --strong:#247247;  --strong-bg:#E7F3EC;  --strong-line:#BFDCCC;
  --moderate:#6B5200; --moderate-bg:#FFF5D0; --moderate-line:#EBD79A;
  --weak:#A8462E;    --weak-bg:#FBE9E8;    --weak-line:#EFC9C1;

  /* ---- spacing ---- */
  --s1:0.35rem; --s2:0.6rem; --s3:0.9rem; --s4:1.2rem; --s5:1.8rem;
  --s6:2.6rem; --s7:3.6rem; --s8:5rem; --s9:7rem;

  /* ---- rhythm ---- */
  --maxw:70rem;
  --maxw-app:47.5rem;                 /* the single-column product measure */
  --maxw-narrow:40rem;
  --pad:clamp(1.25rem,4vw,2rem);
  --page-y:clamp(1.8rem,5vw,3.2rem);
  --sec-gap:clamp(1.2rem,3vw,1.8rem);
  --gap:var(--s4);
  --stack:var(--s4);
  --card-pad:clamp(1.2rem,2.4vw,1.8rem);

  /* ---- type scale ---- */
  --fs-caps:0.76rem;
  --fs-sm:0.85rem;
  --fs-md:0.95rem;
  --fs-base:1rem;
  --fs-lg:1.15rem;
  --fs-2xl:clamp(1.45rem,2.8vw,1.95rem);
  --fs-3xl:clamp(2rem,4.5vw,2.75rem);
  --fs-num:clamp(1.8rem,4vw,2.5rem);

  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;
  --font-display:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  /* ---- four radii, and everything pressable is a pill ---- */
  --radius-sm:0.8rem;
  --radius:1.1rem;
  --radius-lg:1.45rem;
  --radius-xl:2rem;
  --radius-pill:999px;

  /* ---- four shadows, one blue at four depths ---- */
  --shadow-card:0 12px 32px rgba(20,52,107,.07);
  --shadow-lift:0 18px 42px rgba(20,52,107,.12);
  --shadow-panel:0 24px 72px rgba(20,52,107,.16);
  --shadow-hero:0 24px 72px rgba(14,42,92,.24);

  --motion:180ms cubic-bezier(.2,.8,.2,1);
  --tap:44px;

  /* legacy names kept so nothing that still says var(--accent) breaks */
  --accent:var(--blue); --accent-d:var(--blue-deep); --accent-bg:var(--blue-tint);
  --ink-2:var(--muted); --bg:var(--wash); --card:var(--paper);
  --ok:var(--strong); --mid:var(--moderate);
  --shadow:var(--shadow-card); --r:var(--radius-lg);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}
body{
  background:var(--wash);color:var(--ink);
  font-family:var(--font);font-size:var(--fs-base);line-height:1.6;
  font-feature-settings:"kern" 1;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--blue-deep);text-underline-offset:.22em}
::selection{background:var(--blue);color:#fff}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.14;margin:0 0 .5em;
  letter-spacing:-.025em;font-weight:600;overflow-wrap:break-word}
h1{font-size:var(--fs-2xl)}
h2{font-size:var(--fs-lg)}
h3{font-size:var(--fs-base);line-height:1.3}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
strong,b{font-weight:600}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px}
.hero :focus-visible,.vstage :focus-visible,.exbar :focus-visible{outline-color:#fff}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:50;background:var(--paper-a94);
  backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.hdr__in{display:flex;align-items:center;gap:var(--s2) var(--s4);flex-wrap:wrap;
  min-height:64px;max-width:var(--maxw);margin:0 auto;
  padding-inline:var(--pad);padding-block:var(--s2)}

/* The wordmark: the name set in the DISPLAY family, the last syllable in the
   brand navy — fspreif's locked treatment, applied to this name. */
.brand{display:flex;align-items:center;gap:var(--s2);text-decoration:none;color:inherit;margin-right:auto;min-height:var(--tap)}
.brand:hover{text-decoration:none}
.brand__mark{width:32px;height:32px;display:block;flex:none;color:var(--blue)}
/* Reversed lock-up: on a navy ground the stamp is drawn in white. The mark
   is currentColor throughout, so this one rule flips it. */
.brand__mark--rev,.on-navy .brand__mark{color:#fff}
.brand__txt{display:flex;flex-direction:column;line-height:1.1}
.wm{font-family:var(--font-display);font-size:clamp(1.15rem,4.4vw,1.45rem);line-height:1;letter-spacing:-.03em;white-space:nowrap}
.wm__a{font-weight:700;color:var(--ink);letter-spacing:-.02em}
.wm__b{font-weight:600;color:var(--blue)}
.brand__txt em{font-style:normal;font-weight:500;font-size:var(--fs-caps);color:var(--muted);margin-top:3px}

/* The menu wrapper is layout-transparent on desktop: nav and .hdr__right stay
   direct flex children of .hdr__in, so the >=769px header is byte-for-byte the
   row it always was. Under 769px it becomes the burger panel (see below). */
.hdr__menu{display:contents}

.nav{display:flex;gap:var(--s1);flex-wrap:wrap;order:4;width:100%;
  border-top:1px solid var(--line-soft);padding-top:var(--s1)}
@media(min-width:769px){.nav{order:2;width:auto;border-top:0;padding-top:0;margin-inline-start:auto}}
.nav__a{display:inline-flex;align-items:center;min-height:var(--tap);
  padding-inline:.72rem;border-radius:var(--radius-pill);text-decoration:none;
  color:var(--muted);font-size:var(--fs-md);font-weight:600;white-space:nowrap}
.nav__a:hover{background:var(--blue-tint);color:var(--blue);text-decoration:none}
.nav__a--on{background:var(--blue-tint);color:var(--blue)}

.hdr__right{display:flex;align-items:center;gap:var(--s2);order:3;margin-inline-start:auto}
@media(min-width:769px){.hdr__right{margin-inline-start:0}}
.acct{display:inline-flex;align-items:center;min-height:38px;padding:0 .8rem;
  font-size:var(--fs-sm);font-weight:600;text-decoration:none;color:var(--muted);
  border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:var(--paper)}
.acct:hover{border-color:var(--blue-line);color:var(--blue);text-decoration:none}
.langs{display:flex;align-items:center;gap:2px;border:1px solid var(--line-strong);
  border-radius:var(--radius-pill);padding:3px;background:var(--paper)}
.ls{font-size:var(--fs-caps);line-height:1;border-radius:var(--radius-pill);text-decoration:none;
  color:var(--muted);font-weight:600;display:inline-flex;align-items:center;justify-content:center;
  min-height:32px;padding:0 .6rem;border:0}
.ls:hover{background:var(--blue-tint);color:var(--blue);text-decoration:none}
.ls--on{background:var(--blue);color:#fff}

/* ---------- header: phone (<=768px) ----------
   ONE bar, <=64px tall: mark + wordmark, burger on the right. The tagline,
   the nav, the account link and DE/EN move into the panel. */
.burger{display:none}
@media(max-width:768px){
  .hdr__in{flex-wrap:nowrap;gap:var(--s2);min-height:56px;padding-block:var(--s1)}
  .brand{min-height:44px;margin-right:auto;min-width:0}
  .brand__tag{display:none}
  .brand__mark{width:30px;height:30px}
  .wm{font-size:1.22rem}

  .burger{display:inline-flex;align-items:center;justify-content:center;flex:none;
    width:var(--tap);height:var(--tap);margin-inline-end:calc(var(--s2) * -1);
    padding:0;border:0;background:none;color:var(--blue);cursor:pointer;
    border-radius:var(--radius-pill);-webkit-tap-highlight-color:transparent}
  .burger:hover{background:var(--blue-tint)}
  .burger__i{width:26px;height:26px;display:block;fill:none}
  .burger__i--close{display:none}
  .hdr--open .burger{background:var(--blue-tint)}
  .hdr--open .burger__i--open{display:none}
  .hdr--open .burger__i--close{display:block}

  .hdr__menu{display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:var(--s3);
    background:var(--paper);border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-panel);padding:var(--s3) var(--pad) var(--s4);
    max-height:calc(100vh - 57px);max-height:calc(100dvh - 57px);
    overflow-y:auto;overscroll-behavior:contain}
  .hdr--open .hdr__menu{display:flex}
  /* Flow pages (nav:false) have no burger — their language switch stays inline. */
  .hdr__menu--bare{display:contents}

  .hdr__menu:not(.hdr__menu--bare) .nav{order:1;width:auto;flex-direction:column;flex-wrap:nowrap;
    gap:2px;border-top:0;padding-top:0;margin:0}
  .hdr__menu:not(.hdr__menu--bare) .nav__a{width:100%;padding-inline:var(--s3);border-radius:var(--radius);
    font-size:var(--fs-base);color:var(--ink-mid)}
  .hdr__menu:not(.hdr__menu--bare) .hdr__right{order:2;width:auto;margin:0;padding-top:var(--s3);
    border-top:1px solid var(--line-soft);
    justify-content:space-between;gap:var(--s3)}
  .hdr__menu:not(.hdr__menu--bare) .acct{display:inline-flex;align-items:center;line-height:1.2;
    min-height:var(--tap);padding-inline:var(--s4);font-size:var(--fs-md);max-width:18ch}
}

/* ---------- practice tabs ---------- */
.tabs{background:var(--paper);border-bottom:1px solid var(--line)}
.tabs__in{display:flex;gap:var(--s1);max-width:var(--maxw);margin:0 auto;
  padding:var(--s2) var(--pad);overflow-x:auto;-webkit-overflow-scrolling:touch}
.tab{display:inline-flex;align-items:center;min-height:38px;padding:0 .95rem;
  border-radius:var(--radius-pill);text-decoration:none;font-size:var(--fs-md);
  font-weight:600;color:var(--muted);white-space:nowrap}
.tab:hover{background:var(--blue-tint);color:var(--blue);text-decoration:none}
.tab--on{background:var(--blue);color:#fff}
.tab--on:hover{background:var(--blue-deep);color:#fff}

/* ---------- shell ---------- */
.main{max-width:var(--maxw-app);margin:0 auto;padding:var(--page-y) var(--pad) var(--s6);min-width:0}
body.has-sticky .main{padding-bottom:7rem}

.ftr{border-top:1px solid var(--line);background:var(--paper);color:var(--muted);padding-block:var(--page-y)}
.ftr__in{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);text-align:center}
.ftr__links{font-size:var(--fs-md);color:var(--muted);margin:0 0 var(--s2)}
.ftr a{color:var(--muted);text-decoration:none;display:inline-block;padding-block:var(--s1)}
.ftr a:hover{color:var(--blue);text-decoration:underline}
.disclaimer{font-size:var(--fs-sm);color:var(--muted);margin:0;max-width:70ch;margin-inline:auto}

/* ---------- surfaces: ONE card treatment ---------- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--card-pad);margin:0 0 var(--stack);box-shadow:var(--shadow-card)}
.card>h2{font-family:var(--font-display);font-size:var(--fs-lg);letter-spacing:-.025em;
  font-weight:600;margin-bottom:var(--s3)}
.card--flat{box-shadow:none;background:var(--wash);border-color:var(--line)}
.card--accent{border-inline-start:4px solid var(--blue)}
/* the feature card: the accent bar over the palette's softest blue */
.card--pay{border-color:var(--blue-line);border-inline-start:4px solid var(--blue);
  background:var(--link-soft);box-shadow:none}

/* ---------- hero: THE inverted navy panel ---------- */
.hero{
  padding:clamp(1.4rem,5vw,2.6rem);
  border:1px solid var(--on-navy-12);border-radius:var(--radius-xl);
  background:linear-gradient(135deg,var(--blue-deep) 0%,var(--blue) 52%,var(--hero-end) 100%);
  box-shadow:var(--shadow-hero);color:#fff;
}
.hero.card--accent{border-inline-start:1px solid var(--on-navy-12)}
.hero h1{font-size:var(--fs-3xl);color:#fff;max-width:22ch;margin-bottom:0}
/* the lede paragraph. On the navy panel it takes the on-navy ink; on a white
   card (the exam intro uses the same class) it stays the panel prose colour —
   stated in that order so a page without a .hero never gets near-white type on
   white paper. */
.hero__sub{margin-top:var(--s4);margin-bottom:var(--s5);font-size:clamp(1rem,2vw,1.12rem);
  line-height:1.55;color:var(--ink-mid);max-width:56ch}
.hero .hero__sub{color:var(--hero-lede-ink);max-width:44ch}
/* The eyebrow on the hero is a pill: the border and translucent fill are what
   make it secondary, so the WORDS stay at full strength. inline-block, never
   inline-flex + fit-content. */
.hero .tag{display:inline-block;padding:.35rem .8rem;border:1px solid var(--on-navy-34);
  border-radius:var(--radius-pill);background:var(--on-navy-08);color:#fff;margin-bottom:var(--s4)}
.subcta{margin:var(--s4) 0 0;text-align:center;font-size:var(--fs-md)}
.hero .subcta a{color:#fff;text-decoration:underline;text-underline-offset:.2em}
.hero .subcta a:hover{color:var(--blue-tint)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:var(--tap);padding:.72rem 1.1rem;
  border-radius:var(--radius-pill);font-size:var(--fs-base);font-weight:600;
  font-family:inherit;line-height:1.2;text-decoration:none;text-align:center;
  border:1px solid var(--blue);background:var(--blue);color:#fff;cursor:pointer;
  box-shadow:var(--shadow-card);
  transition:background var(--motion),border-color var(--motion),color var(--motion),box-shadow var(--motion),transform var(--motion);
}
.btn:hover{background:var(--blue-deep);border-color:var(--blue-deep);color:#fff;
  box-shadow:var(--shadow-lift);transform:translateY(-1px);text-decoration:none}
.btn:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
/* the SECONDARY level: an outline, never a second filled shape */
.btn--ghost{background:var(--paper);color:var(--ink);border-color:var(--line-strong);box-shadow:none}
.btn--ghost:hover{background:var(--paper);border-color:var(--blue-line);color:var(--blue);
  box-shadow:var(--shadow-card);transform:none}
.btn--wide{display:flex;width:100%}
.btn--rec{width:auto;display:inline-flex}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;pointer-events:none}
@media (prefers-reduced-motion:reduce){.btn{transition:none}.btn:hover{transform:none}}
/* ON THE NAVY PANEL THE PAIR REVERSES: the primary goes solid white with navy
   type, the secondary drops to a translucent hairline outline. */
.hero .btn,.vstage .btn{background:var(--paper);color:var(--blue);border-color:var(--paper);box-shadow:var(--shadow-card)}
.hero .btn:hover,.vstage .btn:hover{background:var(--blue-tint);color:var(--blue-deep);border-color:var(--blue-tint)}
.hero .btn--ghost,.vstage .btn--ghost{background:var(--on-navy-08);border-color:var(--on-navy-34);color:#fff}
.hero .btn--ghost:hover,.vstage .btn--ghost:hover{background:var(--on-navy-16);border-color:#fff;color:#fff}
.hero .btn:focus-visible,.vstage .btn:focus-visible{outline-color:#fff}

/* A multi-line navigation row is a CARD, not a pill: it carries the card
   treatment and the card's one hover affordance. */
.btn--left{
  display:flex;width:100%;justify-content:space-between;align-items:center;gap:var(--s3);
  text-align:start;padding:var(--card-pad);border-radius:var(--radius-lg);
  background:var(--paper);color:var(--ink);border:1px solid var(--line);
  border-inline-start:4px solid var(--blue);box-shadow:var(--shadow-card);
  font-weight:400;min-height:var(--tap);
}
.btn--left b{font-family:var(--font-display);font-size:var(--fs-lg);font-weight:600;letter-spacing:-.025em}
.btn--left:hover{background:var(--paper);border-color:var(--blue-line);border-inline-start-color:var(--blue);
  color:var(--ink);box-shadow:var(--shadow-lift);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.btn--left:hover{transform:none}}
.skip{display:block;text-align:center;font-size:var(--fs-md);color:var(--muted);
  margin-top:var(--s3);min-height:var(--tap);line-height:var(--tap)}

.stickybar{position:fixed;left:0;right:0;bottom:0;background:var(--paper-a94);
  backdrop-filter:blur(16px);border-top:1px solid var(--line);
  padding:var(--s3) var(--pad) calc(var(--s3) + env(safe-area-inset-bottom));
  z-index:40;box-shadow:0 -12px 32px rgba(20,52,107,.10)}
.stickybar>*{max-width:var(--maxw-app);margin:0 auto}

.row{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center}
.stack{display:grid;gap:var(--s3)}
.grid{display:grid;gap:var(--gap)}
@media(min-width:720px){.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.muted{color:var(--muted)}
.small{font-size:var(--fs-md)}
.ok-txt{color:var(--strong)}
.lock{font-size:var(--fs-sm);color:var(--warm-deep);margin-left:6px}

/* the eyebrow above a heading: small, uppercase, letter-spaced, chrome navy */
.tag{display:block;font-size:var(--fs-caps);letter-spacing:.09em;text-transform:uppercase;
  color:var(--blue);font-weight:600;margin:0 0 var(--s2);background:none;padding:0}

/* ---------- notices: the rule on the reading-start edge ---------- */
.notice{padding:var(--s3) var(--s4);border-radius:var(--radius-sm);font-size:var(--fs-md);
  border:1px solid transparent;border-inline-start-width:4px;border-inline-start-style:solid;
  margin:0 0 var(--stack)}
.notice--ok{background:var(--strong-bg);color:var(--strong);border-color:var(--strong-line);border-inline-start-color:var(--strong)}
.notice--warn{background:var(--moderate-bg);color:var(--moderate);border-color:var(--moderate-line);border-inline-start-color:var(--moderate)}
.notice--err{background:var(--weak-bg);color:var(--weak);border-color:var(--weak-line);border-inline-start-color:var(--weak)}
.notice--info{background:var(--link-soft);color:var(--blue);border-color:var(--blue-line);border-inline-start-color:var(--blue)}

/* ---------- fields ---------- */
label{display:block;font-weight:600;font-size:var(--fs-md);margin:0 0 var(--s1);color:var(--ink)}
input[type=text],input[type=date],input[type=email],input[type=number],input[type=password],select,textarea{
  width:100%;min-height:var(--tap);padding:.72rem .95rem;
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  font:inherit;font-size:max(1rem,16px);background:var(--paper);color:var(--ink)}
input:hover,select:hover,textarea:hover{border-color:var(--blue-line)}
textarea{min-height:140px;resize:vertical;line-height:1.55}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
input:focus,select:focus,textarea:focus{border-color:var(--blue)}
input[disabled],select[disabled],textarea[disabled]{background:var(--sunken);color:var(--muted);cursor:not-allowed}

.opt{display:flex;gap:var(--s3);align-items:flex-start;
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  padding:var(--s3) var(--s4);margin:0 0 var(--s2);cursor:pointer;background:var(--paper);
  font-weight:400;min-height:var(--tap);transition:border-color var(--motion),background var(--motion)}
.opt:hover{border-color:var(--blue-line)}
.opt input{margin-top:3px;flex:none;width:20px;height:20px;accent-color:var(--blue)}
.opt span{font-size:var(--fs-base);color:var(--ink-mid)}
.opt--pick{align-items:center}
.opt--consent{background:var(--wash)}
.opt:has(input:checked){border-color:var(--blue);background:var(--blue-tint)}

.qitem{border-top:1px solid var(--line-soft);padding-top:var(--s4);margin-top:var(--s4)}
.qitem:first-of-type{border-top:0;padding-top:0;margin-top:0}
.qitem__q{font-weight:600;margin:var(--s3) 0 var(--s2)}
.stimulus{white-space:pre-wrap;background:var(--wash);color:var(--ink-mid);
  border:1px solid var(--line);padding:var(--s3) var(--s4);border-radius:var(--radius-sm);
  font:inherit;font-size:var(--fs-md);margin:0 0 var(--s3)}

/* physical borders: the checkmark keeps its shape whatever the direction */
.ticks{list-style:none;padding:0;margin:0;font-size:var(--fs-md);display:grid;gap:var(--s2)}
.ticks li{padding:0 0 0 var(--s5);position:relative}
.ticks li::before{content:"";position:absolute;left:2px;top:.42em;width:11px;height:6px;
  border-left:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg)}
.ticks--on li::before{border-left-color:var(--strong);border-bottom-color:var(--strong)}

/* ---------- progress ---------- */
.prog{margin:0 0 var(--stack)}
.prog__top{display:flex;justify-content:space-between;font-size:var(--fs-caps);
  letter-spacing:.09em;text-transform:uppercase;font-weight:600;color:var(--blue);margin-bottom:var(--s2)}
.prog__top .muted{color:var(--muted);letter-spacing:0;text-transform:none;font-size:var(--fs-sm)}
.prog__bar{height:6px;border-radius:var(--radius-pill);background:var(--sunken);
  overflow:hidden;border:1px solid var(--line-soft)}
.prog__bar i{display:block;height:100%;background:var(--blue);border-radius:var(--radius-pill);transition:width .3s}

/* ---------- levels & results ----------
   The level palette is fspreif's verdict palette: a tint, an accessible ink and
   the hairline each one needs to sit in a bordered box. */
.pill{display:inline-grid;place-items:center;min-width:44px;padding:.3rem .75rem;
  border-radius:var(--radius-pill);font-family:var(--font-display);font-weight:600;
  font-size:var(--fs-md);border:1px solid transparent;
  background:var(--sunken);color:var(--muted)}
.pill--a1{background:var(--blue-tint);color:var(--blue);border-color:var(--blue-line)}
.pill--a2{background:var(--moderate-bg);color:var(--moderate);border-color:var(--moderate-line)}
.pill--b1{background:var(--strong-bg);color:var(--strong);border-color:var(--strong-line)}
.pill--none{background:var(--sunken);color:var(--muted);border-color:var(--line)}
.pill.big{font-size:1.3rem;min-width:70px;padding:var(--s2) var(--s4)}

.rhead{display:flex;gap:var(--s4);align-items:center;flex-wrap:wrap}
.rhead__big{min-width:88px;height:88px;border-radius:var(--radius);display:grid;place-items:center;
  font-family:var(--font-display);font-weight:700;font-size:2rem;letter-spacing:-.035em;
  border:1px solid var(--line);background:var(--sunken);color:var(--muted);flex:none;padding:0 var(--s3)}
.rhead__big--b1{background:var(--strong-bg);color:var(--strong);border-color:var(--strong-line)}
.rhead__big--a2{background:var(--moderate-bg);color:var(--moderate);border-color:var(--moderate-line)}
.rhead__big--a1{background:var(--blue-tint);color:var(--blue);border-color:var(--blue-line)}
.rhead__big--none{background:var(--sunken);color:var(--muted);border-color:var(--line)}
.rhead__big--score{background:var(--blue);color:#fff;border-color:var(--blue);font-size:1.5rem}
.rhead__txt{min-width:0}
.rhead__txt h1{margin:0 0 .15em;font-size:clamp(1.3rem,4.6vw,1.8rem)}
.rhead__txt .tag{margin:0 0 var(--s1)}

.chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.chip{display:inline-flex;gap:6px;align-items:baseline;border-radius:var(--radius-pill);
  padding:.3rem .75rem;font-size:var(--fs-sm);background:var(--wash);color:var(--ink);
  border:1px solid var(--line)}
.chip b{font-weight:600}
.chip i{font-style:normal;opacity:.8;font-size:var(--fs-caps)}
.chip--b1{background:var(--strong-bg);color:var(--strong);border-color:var(--strong-line)}
.chip--a2{background:var(--moderate-bg);color:var(--moderate);border-color:var(--moderate-line)}
.chip--a1{background:var(--blue-tint);color:var(--blue);border-color:var(--blue-line)}
.chip--none{background:var(--weak-bg);color:var(--weak);border-color:var(--weak-line)}

.lvlrow{display:flex;gap:var(--s2);margin:0 0 var(--s4);flex-wrap:wrap}
.lvlchip{display:inline-flex;align-items:center;gap:6px;padding:.5rem 1rem;
  border-radius:var(--radius-pill);border:1px solid var(--line-strong);text-decoration:none;
  color:var(--ink);font-weight:600;background:var(--paper);min-height:var(--tap)}
.lvlchip:hover{border-color:var(--blue-line);color:var(--blue);text-decoration:none}
.lvlchip i{font-style:normal;font-weight:400;font-size:var(--fs-sm);color:var(--muted)}
.lvlchip--on{background:var(--blue);color:#fff;border-color:var(--blue)}
.lvlchip--on:hover{background:var(--blue-deep);color:#fff;border-color:var(--blue-deep)}
.lvlchip--on i{color:var(--hero-proof-ink)}

/* ---------- meters ---------- */
.meter{margin:0 0 var(--s4)}
.meter__top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3)}
.meter__label{font-weight:600;font-size:var(--fs-md)}
.meter__val{font-family:var(--font-display);font-weight:700;font-variant-numeric:tabular-nums}
.meter__val--strong{color:var(--strong)}
.meter__val--mid{color:var(--moderate)}
.meter__val--weak{color:var(--weak)}
.meter__bar{height:6px;border-radius:var(--radius-pill);background:var(--sunken);
  overflow:hidden;margin:var(--s2) 0 var(--s1);border:1px solid var(--line-soft)}
.meter__fill{display:block;height:100%;border-radius:var(--radius-pill)}
.meter__fill--strong{background:var(--strong)}
.meter__fill--mid{background:var(--warm)}
.meter__fill--weak{background:var(--weak)}
.meter__hint{font-size:var(--fs-sm);color:var(--muted);margin:0}
.critrow{border-top:1px solid var(--line-soft);padding-top:var(--s4);margin-top:var(--s4)}
.critrow:first-child{border-top:0;padding-top:0;margin-top:0}

/* ---------- quoted correction: the ONE pattern every report uses ---------- */
.qb{margin:0 0 var(--s4);padding:var(--s3) var(--s4);
  border:1px solid var(--blue-line);border-inline-start:4px solid var(--blue-line);
  background:var(--link-soft);border-radius:var(--radius-sm)}
.qb--big{background:var(--paper);border-color:var(--line);border-inline-start:4px solid var(--blue);
  box-shadow:var(--shadow-card);padding:var(--s4)}
.qb__q{margin:0 0 var(--s2);font-style:normal;font-size:var(--fs-base);color:var(--ink);line-height:1.6}
.qb__i{font-size:var(--fs-sm);color:var(--weak);margin:0 0 var(--s2)}
.qb__b{margin:0;font-size:var(--fs-md);color:var(--ink)}
.qb__tag{display:inline-block;font-size:var(--fs-caps);font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;background:var(--strong-bg);color:var(--strong);border:1px solid var(--strong-line);
  padding:.1rem .5rem;border-radius:var(--radius-pill);margin-right:6px}
.recline{margin:var(--s4) 0 0}

/* ---------- accordion ---------- */
.acc{border:1px solid var(--line);border-radius:var(--radius);margin:0 0 var(--s2);
  background:var(--paper);box-shadow:var(--shadow-card)}
.acc>summary{cursor:pointer;padding:var(--s3) var(--s4);font-family:var(--font-display);
  font-weight:600;letter-spacing:-.02em;font-size:var(--fs-lg);list-style:none;
  min-height:var(--tap);display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);border-radius:var(--radius)}
.acc>summary::-webkit-details-marker{display:none}
.acc>summary:hover{color:var(--blue)}
.acc>summary::after{content:"+";flex:0 0 auto;color:var(--blue);font-weight:400;font-size:1.5rem;line-height:1}
.acc[open]{border-color:var(--blue-line);background:var(--blue-tint)}
.acc[open]>summary{color:var(--blue)}
.acc[open]>summary::after{content:"−"}
.acc__b{padding:0 var(--s4) var(--s4);color:var(--ink-mid)}
summary:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

/* ---------- audio player ---------- */
.ap{display:flex;align-items:center;gap:var(--s3);margin:0 0 var(--s3);flex-wrap:wrap}
.ap__btn{display:inline-flex;align-items:center;gap:var(--s2);
  border:1px solid var(--blue-line);background:var(--blue-tint);color:var(--blue);
  border-radius:var(--radius-pill);padding:.5rem 1.1rem .5rem .5rem;
  font:inherit;font-weight:600;cursor:pointer;min-height:var(--tap);
  transition:background var(--motion),border-color var(--motion)}
.ap__btn:hover{background:var(--link-soft);border-color:var(--blue)}
.ap__icon{width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;
  display:grid;place-items:center;font-size:.8rem;flex:none}
.ap--on .ap__icon{background:var(--blue-deep)}
.ap__left{font-size:var(--fs-sm);color:var(--muted)}
.ap--spent .ap__btn{opacity:.5;cursor:not-allowed}
.ap--spent .ap__left{color:var(--weak)}

/* ---------- loading ---------- */
.loading{text-align:center;padding:var(--s4) 0}
.loading__dots{display:flex;gap:var(--s2);justify-content:center;margin:0 0 var(--s5)}
.loading__dots i{width:12px;height:12px;border-radius:50%;background:var(--blue);animation:bounce 1.1s infinite}
.loading__dots i:nth-child(2){animation-delay:.15s}
.loading__dots i:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-5px)}}
@media (prefers-reduced-motion:reduce){.loading__dots i{animation:none;opacity:.6}}

/* ---------- voice: the second navy panel ---------- */
.voicewrap{display:grid;gap:var(--gap)}
@media(min-width:880px){.voicewrap{grid-template-columns:1.15fr .85fr;align-items:start}}
.vstage{
  border:1px solid var(--on-navy-12);border-radius:var(--radius-xl);
  background:linear-gradient(135deg,var(--blue-deep) 0%,var(--blue) 52%,var(--hero-end) 100%);
  box-shadow:var(--shadow-hero);color:#fff;
  padding:var(--card-pad);min-height:330px;display:flex;flex-direction:column;gap:var(--s3)}
.vstage__top{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap}
.vstatus{font-size:var(--fs-sm);font-weight:600;padding:.25rem .75rem;border-radius:var(--radius-pill);
  background:var(--on-navy-12);color:#fff;border:1px solid var(--on-navy-34);
  display:inline-flex;align-items:center;min-height:32px}
.vstatus--ok{background:var(--strong-bg);color:var(--strong);border-color:var(--strong-line)}
.vstatus--busy{background:var(--moderate-bg);color:var(--moderate);border-color:var(--moderate-line)}
.vstatus--err{background:var(--weak-bg);color:var(--weak);border-color:var(--weak-line)}
.timer{font-family:var(--font-display);font-variant-numeric:tabular-nums;font-weight:700;
  font-size:1.4rem;letter-spacing:-.03em;line-height:1}
.vstage .timer{color:#fff}
.timer--low{color:#FFB4A6}
#chat{flex:1;overflow-y:auto;max-height:340px;display:flex;flex-direction:column;gap:var(--s3);padding-right:4px}
.turn{max-width:88%}
.turn--examiner{align-self:flex-start}
.turn--candidate{align-self:flex-end;text-align:right}
.turn__who{margin:0 0 3px;font-size:var(--fs-caps);text-transform:uppercase;letter-spacing:.09em;
  font-weight:600;color:var(--hero-proof-ink)}
.turn__txt{background:var(--on-navy-08);border:1px solid var(--on-navy-16);
  padding:var(--s2) var(--s3);border-radius:var(--radius);font-size:var(--fs-md);line-height:1.55;color:#fff}
.turn--candidate .turn__txt{background:var(--on-navy-16);border-color:var(--on-navy-34)}
.vhint{color:var(--hero-proof-ink);font-size:var(--fs-md);margin:auto 0;text-align:center}
.vctl{display:flex;gap:var(--s3);flex-wrap:wrap}
.vctl .btn{width:auto;flex:1}
#taskcards{display:grid;gap:var(--s3)}
.tcard{border:1px solid var(--line);border-inline-start:4px solid var(--blue);
  border-radius:var(--radius-lg);padding:var(--s3) var(--s4);background:var(--paper);box-shadow:var(--shadow-card)}
.tcard__h{margin:0 0 var(--s1);font-size:var(--fs-caps);text-transform:uppercase;letter-spacing:.09em;
  color:var(--blue);font-weight:600}
.tcard__b{font-size:var(--fs-md);color:var(--ink-mid)}
.simsteps{list-style:none;display:flex;gap:var(--s2);flex-wrap:wrap;padding:0;margin:0 0 var(--s4);
  font-size:var(--fs-sm);color:var(--muted)}
.simsteps li{background:var(--wash);border:1px solid var(--line);border-radius:var(--radius-pill);padding:.25rem .7rem}
.simsteps b{color:var(--blue);font-weight:600}
.clockline{margin:var(--s2) 0 0}

/* ---------- misc ---------- */
.kv{display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s5);font-size:var(--fs-md)}
.kv dt{color:var(--muted)}
.kv dd{margin:0;font-weight:600}
table{width:100%;border-collapse:collapse;font-size:var(--fs-md)}
th,td{text-align:left;padding:var(--s2);border-bottom:1px solid var(--line-soft);vertical-align:top}
th{font-size:var(--fs-caps);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;
  border-bottom-color:var(--line)}
tbody tr:last-child td{border-bottom:0}
.rec{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;margin:var(--s4) 0}
.rec__dot{width:12px;height:12px;border-radius:50%;background:var(--line-strong);flex:none}
.rec--on .rec__dot{background:var(--weak);animation:pulse 1.1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.rec--on .rec__dot{animation:none}}

/* ---------- next three steps (placement result + Mein Plan) ---------- */
.step{display:flex;align-items:center;gap:var(--s3);min-height:56px;padding:var(--s3) var(--s4);
  border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--paper);
  text-decoration:none;color:var(--ink);box-shadow:var(--shadow-card);
  transition:border-color var(--motion),box-shadow var(--motion),transform var(--motion)}
.step:hover{border-color:var(--blue-line);box-shadow:var(--shadow-lift);transform:translateY(-2px);
  color:var(--ink);text-decoration:none}
.step--first{background:var(--blue);border-color:var(--blue);color:#fff}
.step--first:hover{background:var(--blue-deep);border-color:var(--blue-deep);color:#fff}
.step__n{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-size:var(--fs-caps);font-weight:600;background:var(--blue-tint);color:var(--blue)}
.step--first .step__n{background:var(--on-navy-24);color:#fff}
.step__txt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.step__txt b{font-weight:600;line-height:1.25}
.step__txt i{font-style:normal;font-size:var(--fs-sm);color:var(--muted)}
.step--first .step__txt i{color:var(--hero-proof-ink)}
.step__go{flex:none;font-size:1.3rem;line-height:1;color:var(--muted)}
.step--first .step__go{color:#fff}
@media (prefers-reduced-motion:reduce){.step{transition:none}.step:hover{transform:none}}

/* ---------- Prüfungssimulation ---------- */
.exbar{position:sticky;top:0;z-index:15;display:flex;align-items:center;justify-content:space-between;
  gap:var(--s3);background:var(--blue);color:#fff;border-radius:var(--radius-lg);
  padding:var(--s3) var(--s4);margin:0 0 var(--stack);box-shadow:var(--shadow-card)}
.exbar__label{font-size:var(--fs-caps);letter-spacing:.09em;text-transform:uppercase;
  font-weight:600;color:var(--hero-proof-ink)}
.exbar .timer{color:#fff}
.exbar .timer--low{color:#FFB4A6}
.wordcount{font-size:var(--fs-sm);color:var(--muted);margin:var(--s2) 0 0;text-align:right;
  font-variant-numeric:tabular-nums}
.wordcount--ok{color:var(--strong);font-weight:600}
.pts{list-style:none;padding:0;margin:0 0 var(--s3);font-size:var(--fs-md);display:grid;gap:var(--s2)}
.pts li{position:relative;padding:0 0 0 var(--s5)}
.pts li::before{content:"□";position:absolute;left:0;color:var(--muted);font-weight:600}
.pts li.pts--on::before{content:"☑";color:var(--strong)}
.pts li.pts--off::before{content:"☐";color:var(--weak)}
.verdict{display:flex;gap:var(--s4);align-items:center;padding:var(--card-pad);
  border-radius:var(--radius-lg);margin:0 0 var(--stack);flex-wrap:wrap}
.verdict--yes{background:var(--strong-bg);border:1px solid var(--strong-line)}
.verdict--no{background:var(--moderate-bg);border:1px solid var(--moderate-line)}
.verdict__mark{width:56px;height:56px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:1.6rem;color:#fff;background:var(--strong)}
.verdict--no .verdict__mark{background:var(--warm-deep)}
.verdict h2{margin:0 0 .2em}
.verdict--yes h2{color:var(--strong)}
.verdict--no h2{color:var(--moderate)}
.verdict p{margin:0;font-size:var(--fs-md);color:var(--ink-mid)}
.exsteps{list-style:none;padding:0;margin:0 0 var(--stack);display:grid;gap:var(--s2)}
.exsteps li{display:flex;align-items:center;gap:var(--s3);font-size:var(--fs-md);color:var(--muted)}
.exsteps__n{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:var(--fs-caps);font-weight:600;background:var(--sunken);color:var(--muted)}
.exsteps li.on{color:var(--ink);font-weight:600}
.exsteps li.on .exsteps__n{background:var(--blue);color:#fff}
.exsteps li.done .exsteps__n{background:var(--strong-bg);color:var(--strong)}

/* An example of the real report, rendered on the home page with real
   components: the same card treatment on the cool wash, marked as an example
   by its ground rather than by a dashed rule. */
.demo{border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--card-pad);
  background:var(--wash)}
.demo .card,.demo .acc,.demo .qb--big{box-shadow:none}
.demo .rhead__big{min-width:70px;height:70px;font-size:1.6rem}

/* ---------- phones ---------- */
@media (max-width:520px){
  .brand__mark{width:28px;height:28px}
  .acct{max-width:12ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;line-height:36px}
  .hdr__in{gap:var(--s2)}
  .rhead{gap:var(--s3)}
  .rhead__big{min-width:72px;height:72px;font-size:1.7rem}
  .verdict__mark{width:48px;height:48px;font-size:1.4rem}
  .vctl .btn{flex:1 1 100%}
}

/* ---------- print (the Beleg is meant to be saved as a PDF) ---------- */
@media print{
  .hdr,.ftr,.stickybar,.practicetabs,.btn,.burger{display:none !important}
  body{background:#fff}
  .main{padding:0}
  .card{border:0;box-shadow:none;padding:0}
  a[href^="mailto:"]{color:inherit;text-decoration:none}
}

/* ---------- level test: one-tap answers ---------- */
/* The 2-minute test has no "continue" button: an option IS the submit, so the
   whole test is ten taps. Same surface as .opt, sized for a thumb. */
.opts{display:grid;gap:var(--s2)}
.opt--tap{width:100%;text-align:left;font:inherit;color:var(--ink-mid);
  align-items:center;margin:0;appearance:none;-webkit-appearance:none}
.opt--tap:hover{border-color:var(--blue-line);background:var(--blue-tint)}
.opt--tap:active{transform:scale(.995)}
.opt--tap span{display:block}
.opt--quiet{border-style:dashed;color:var(--muted);background:var(--wash)}

/* ---------- the free taste on the result page ---------- */
.taste{border-top:1px solid var(--line-soft);padding-top:var(--s4);margin-top:var(--s4)}
.taste:first-of-type{border-top:0}
.taste .opt--tap[data-state="right"]{border-color:var(--strong-line);background:var(--strong-bg);color:var(--strong)}
.taste .opt--tap[data-state="wrong"]{border-color:var(--weak-line);background:var(--weak-bg);color:var(--weak)}
.taste .opt--tap[disabled]{cursor:default}
.taste__fb{margin:var(--s3) 0 0;font-weight:600}
.taste__fb--right{color:var(--strong)}
.taste__fb--wrong{color:var(--weak)}
.taste__why{margin:var(--s2) 0 0;font-size:var(--fs-sm);color:var(--muted);
  background:var(--wash);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:var(--s3) var(--s4)}

/* ---------- tables ---------- */
.tbl th:last-child,.tbl td:last-child{text-align:right;white-space:nowrap}
.ok-txt{color:var(--strong);font-weight:600}