/* ============================================================
   JOSEF AUTOANKAUF — "Handschlagqualität".
   Implements /DESIGN.md. Read that first; it explains why.

   :root below is the single source of truth for colour.
   tests/tokens.test.mjs parses THIS block and asserts every pair
   against WCAG AA. Do not change a value here without re-running:
     node --test
   ============================================================ */

/* Newsreader is a variable face: one file covers weight 400–700 and the
   optical-size axis. German needs only the latin subset (ä ö ü ß „ " – all
   sit in U+0000–00FF and U+2000–206F); latin-ext is declared for the rare
   Slovene/Czech place name and costs nothing until such a glyph appears. */
@font-face{font-family:"Newsreader";src:url("../assets/fonts/Newsreader-latin.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";src:url("../assets/fonts/Newsreader-latinext.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:"Geist";src:url("../assets/fonts/Geist-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url("../assets/fonts/Geist-Medium.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url("../assets/fonts/Geist-SemiBold.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url("../assets/fonts/Geist-Bold.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap}

:root{
  /* --- ground: stone paper, white is RAISED, surface-2 is RECESSED --- */
  --bg:#F2F1EC;
  --surface:#FFFFFF;
  --surface-2:#E7E6DF;

  /* --- ink: near-black with a faint green cast, so it belongs to the loden --- */
  --ink:#1A1C19;
  --ink-body:#3A3E38;
  --muted:#63675F;

  /* --- Lodengrün: the brand. Buttons, focus, marks. --- */
  --loden:#2F4F3E;
  --loden-deep:#1E3529;
  --loden-tint:#DEE6DF;

  /* --- Messing: BINDING ONLY. If brass is on screen, something is promised. --- */
  --accent:#E8C87C;
  --accent-deep:#7A5714;

  --line:#DBDAD2;
  --line-strong:#87867C;
  --focus:#2F4F3E;

  --radius-container:3px;
  --radius-control:6px;
  --header-h:74px;
  --measure:1140px;
  --ease:cubic-bezier(0.16,1,0.3,1);
  --font:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:"Newsreader",Georgia,"Times New Roman",serif;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

/* [hidden] kommt nur aus dem UA-Stylesheet und verliert gegen jede
   Autoren-Regel mit display. Ohne diese Zeile stand der Zurueck-Button
   (.btn-secondary, display:inline-flex) auf Schritt 1 des Wizards sichtbar
   da, obwohl wizard.js ihn als hidden markiert. tests/css.test.mjs haelt
   das fest. */
[hidden]{display:none!important}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink-body);
  font:400 17px/1.62 var(--font);
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}

/* ---------- type: Newsreader never below 24px, Geist never above 32px ---------- */
h1,h2,.display{
  font-family:var(--display);
  font-weight:400;
  color:var(--ink);
  line-height:1.06;
  letter-spacing:-0.018em;
  text-wrap:balance;
  margin:0 0 .4em;
}
h1{font-size:clamp(2.5rem,5vw,4.25rem);line-height:1.03;letter-spacing:-0.022em}
h2{font-size:clamp(2rem,4vw,3.15rem)}

/* Hierarchy has to survive the narrow column. Both clamps fall to their floor
   well before 390px, so at that width the display sat at 2rem over a 17px body
   — a 1.9x ratio, against 3.0x on the desktop the scale was tuned for. Heading
   and body were converging exactly where there is least room to signal
   structure. Raising the floor and settling the body one step gets it back to
   ~2.3x without pushing the headline into a third line. */
@media (max-width:767px){
  body{font-size:16px}
  h2{font-size:2.3rem}
}
h3{
  font:600 1.0625rem/1.35 var(--font);
  letter-spacing:-0.005em;color:var(--ink);margin:0 0 .4em;
}
p{margin:0 0 1em;max-width:66ch;text-wrap:pretty}
p:last-child{margin-bottom:0}

.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.container{max-width:var(--measure);margin-inline:auto;padding-inline:24px}
.hairline{border:0;border-top:1px solid var(--line);margin:0}

/* Three rhythm tiers. Uniform padding is what made the old page read flat. */
section{padding:88px 0}
.section-loud{padding:128px 0}
.section-tight{padding:56px 0}
.section-tight + .section-tight{padding-top:0}
/* The three tiers exist so the page has a shape (DESIGN.md). At 60/76/40 a loud
   section was only 1.27x a normal one — a difference you cannot feel, so on a
   phone the page read as one undifferentiated column. Restored to ~2.9x. */
@media (max-width:767px){
  section{padding:56px 0}
  .section-loud{padding:104px 0}
  .section-tight{padding:36px 0}
}

/* Recessed band. Replaces the old inline style="background:var(--surface)". */
.band-quiet{background:var(--surface-2);border-block:1px solid var(--line)}

:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ---------- marginal label: a clause number sits BESIDE its clause ---------- */
.sec{display:grid;gap:20px}
@media (min-width:1024px){
  .sec{grid-template-columns:168px minmax(0,1fr);gap:0 56px;align-items:start}
  .sec > .eyebrow{grid-column:1;margin:0;padding-top:.7em}
  .sec > *:not(.eyebrow){grid-column:2}
}
.eyebrow{
  font-size:.75rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);margin:0 0 1.25rem;
}

/* Below the rail breakpoint the marginal label has nowhere marginal to sit. It
   becomes a ruled running head rather than a floating kicker: a hairline across
   the column with the label sitting on it, so a section still announces itself
   as a clause — the same idea as the rail, expressed in the one dimension a
   phone has. The rule is --line-strong and never brass: brass marks what is
   binding, and a section opening is not a promise. */
@media (max-width:1023px){
  .eyebrow{position:relative;padding-top:12px;margin-bottom:1.1rem;color:var(--ink-body)}
  .eyebrow::before{
    content:"";position:absolute;top:0;left:0;right:0;height:1px;
    background:var(--line-strong);
  }
}

/* ---------- buttons ---------- */
.btn-primary,.btn-secondary{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:54px;padding:0 30px;border-radius:var(--radius-control);
  font:600 1rem var(--font);text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background .24s var(--ease),border-color .24s var(--ease),transform .15s var(--ease);
}
.btn-primary{background:var(--loden);color:#fff;border:1px solid var(--loden)}   /* 9.10:1 */
.btn-primary:hover{background:var(--loden-deep);border-color:var(--loden-deep)}
.btn-primary:active{transform:scale(.98)}
.btn-secondary{background:transparent;color:var(--ink);border:1px solid var(--line-strong)}
.btn-secondary:hover{border-color:var(--ink)}
.btn-secondary:active{transform:scale(.98)}

.skip-link{position:absolute;left:-999px;top:8px;z-index:200;background:var(--loden);color:#fff;
  padding:12px 20px;border-radius:var(--radius-control);text-decoration:none;font-weight:600}
.skip-link:focus{left:8px}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:90;height:var(--header-h);display:flex;align-items:center;
  background:rgba(242,241,236,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;width:100%;gap:1rem}
.wordmark{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);
  min-height:44px;padding-block:11px}
/* Das JA-Monogramm. Rein dekorativ ausgezeichnet (alt="" + aria-hidden), weil
   der Schriftzug daneben die Marke bereits nennt — sonst kuendigt ein
   Screenreader "Josef Autoankauf" zweimal an. */
.wordmark-mark{flex:none;display:block;width:30px;height:auto}
.wordmark-text{display:inline-flex;align-items:baseline;gap:.42rem}
.wordmark b{font:400 1.35rem/1 var(--display);letter-spacing:-.02em}
.wordmark-text > span{font:600 .68rem/1 var(--font);letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted)}
.site-nav{display:flex;align-items:center;gap:1.6rem}
/* Desktop nav links were 24px tall — fine for a mouse, mean for anyone using a
   trackpad or a touchscreen laptop. Padding costs nothing and clears 44px. */
.site-nav a:not(.btn-primary){color:var(--ink-body);text-decoration:none;font-size:.9375rem;
  display:inline-flex;align-items:center;min-height:44px;
  transition:color .24s var(--ease)}
.site-nav a:not(.btn-primary):hover{color:var(--ink)}
.site-nav a[aria-current]{color:var(--ink);font-weight:600;
  box-shadow:inset 0 -2px 0 var(--loden)}
.site-nav .btn-primary{min-height:44px;padding:0 20px;font-size:.9375rem}
.nav-phone{display:inline-flex;align-items:center;min-height:44px;
  font-weight:600;color:var(--ink) !important;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.nav-phone::before{content:"";width:1px;height:20px;background:var(--line);
  margin-right:1.6rem}
@media (max-width:1100px){ .nav-phone{display:none} }
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:10px;color:var(--ink)}
@media (max-width:900px){
  .nav-toggle{display:block}
  .site-nav{position:fixed;top:var(--header-h);left:0;right:0;z-index:89;flex-direction:column;
    align-items:stretch;gap:0;padding:8px 24px 24px;background:var(--bg);
    border-bottom:1px solid var(--line);transform:translateY(-115%);
    transition:transform .28s var(--ease)}
  .nav-open .site-nav{transform:translateY(0)}
  .site-nav a{padding:16px 0;min-height:56px}
  .site-nav a[aria-current]{box-shadow:none;border-left:3px solid var(--loden);padding-left:12px}
  .site-nav .btn-primary{margin-top:12px;min-height:54px}
}

/* ---------- hero ---------- */
.hero{padding:104px 0 0}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:64px;align-items:end}
.hero h1{margin-bottom:.34em}
.hero-lede{font-size:clamp(1.125rem,1.5vw,1.3125rem);line-height:1.5;color:var(--ink-body);
  max-width:34ch;margin:0}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero-figure{position:relative}
.hero-figure img{border-radius:var(--radius-container)}
.hero-note{margin:20px 0 0;padding-top:18px;font-size:.9375rem;color:var(--ink-body);
  max-width:42ch;position:relative}
.hero-note::before{content:"";position:absolute;top:0;left:0;width:34px;height:2px;
  background:var(--accent-deep)}
.hero-note a{color:var(--ink);font-weight:600;text-decoration:underline;
  text-underline-offset:4px;text-decoration-thickness:1px;
  text-decoration-color:var(--accent-deep);
  transition:text-decoration-color .24s var(--ease)}
.hero-note a:hover{text-decoration-color:var(--ink)}
/* The hero rule closes the section and hands off to the trust row. */
.hero-rule{border:0;border-top:1px solid var(--line);margin:68px 0 0}
@media (max-width:900px){
  .hero{padding:56px 0 0}
  .hero-grid{grid-template-columns:1fr;gap:36px;align-items:start}
  .hero-lede{max-width:none}
  .hero-rule{margin-top:56px}
}
/* Settles the lede one step so it sits under the headline rather than rivalling
   it. Must come after the base .hero-lede rule to win the cascade. */
@media (max-width:767px){ .hero-lede{font-size:1.0625rem} }

/* ---------- trust row: rules and words, never icons ---------- */
.trust-strip{padding:0}
/* Each item is rule / label / body. A one-line label next to a two-line label
   used to leave the bodies on different baselines; subgrid makes all three
   items share the same three row tracks, so the label row is sized by the
   tallest label and every body starts on the same line — whatever the copy
   becomes later. min-height is the pre-subgrid fallback. */
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  grid-template-rows:auto auto auto}
.trust-item{padding:34px 32px 30px;border-left:1px solid var(--line);
  display:grid;grid-template-rows:auto auto auto;align-content:start}
@supports (grid-template-rows:subgrid){
  .trust-item{grid-row:span 3;grid-template-rows:subgrid}
  .trust-title{min-height:0}
}
.trust-item:first-child{border-left:0;padding-left:0}
.trust-item::before{content:"";display:block;width:34px;height:2px;background:var(--accent-deep);
  margin-bottom:18px}
.trust-title{font:600 .75rem/1.35 var(--font);letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink);margin:0 0 .85em;min-height:2.9em}
.trust-item p{margin:0;max-width:32ch;font-size:.9375rem;line-height:1.5;color:var(--muted)}
@media (max-width:767px){
  .trust-grid{grid-template-columns:1fr;grid-template-rows:none}
  .trust-item{border-left:0;border-top:1px solid var(--line);padding:26px 0 28px;
    display:block;grid-row:auto}
  .trust-item:first-child{border-top:0}
  .trust-title{min-height:0}
}

/* ---------- ledger: the system's list device ----------
   A row, a hairline, an optional brass figure. No fill quota, so it can
   never leave the dead trailing cells a bento grid produces. */
.ledger{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ledger > li,.ledger-row{
  display:grid;grid-template-columns:3.5rem minmax(0,1fr);gap:0 24px;align-items:start;
  padding:26px 0;border-bottom:1px solid var(--line);margin:0;
}
.ledger-figure{
  font:600 .8125rem/1 var(--font);letter-spacing:.04em;font-variant-numeric:tabular-nums;
  color:var(--accent-deep);padding-top:.42em;
}
.ledger-body > :last-child{margin-bottom:0}
.ledger-body p{color:var(--muted);font-size:.9375rem;max-width:62ch}
.ledger-nofig > li,.ledger-nofig .ledger-row{grid-template-columns:minmax(0,1fr)}
@media (max-width:600px){
  .ledger > li,.ledger-row{grid-template-columns:minmax(0,1fr);gap:6px}
  .ledger-figure{padding-top:0}
}

/* Places we collect in: real data from regions.json, set as a plain ruled list.
   Not links, so no hover affordance and no chevron — it is a statement of
   coverage, not navigation. */
.place-grid{list-style:none;padding:0;margin:30px 0 0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px;
  border-top:1px solid var(--line)}
.place-grid li{position:relative;padding:14px 0 14px 26px;border-bottom:1px solid var(--line);
  color:var(--ink-body);font-size:.9375rem}
.place-grid li::before{content:"";position:absolute;left:0;top:1.5em;width:13px;height:1.5px;
  background:var(--line-strong)}
.place-grid .place-rest{color:var(--muted)}
@media (max-width:767px){ .place-grid{grid-template-columns:repeat(2,1fr);gap:0 24px} }
@media (max-width:480px){ .place-grid{grid-template-columns:1fr} }

/* A text-only register row (no thumbnail). Both classes sit on the same
   element here, so this needs its own rule — the .ledger-nofig descendant
   selector above only matches a wrapper. */
a.ledger-row.ledger-nofig{grid-template-columns:minmax(0,1fr) auto;align-items:center}
a.ledger-row.ledger-nofig h3{margin:0}
a.ledger-row.ledger-nofig::after{
  content:"";width:9px;height:9px;flex:none;margin-right:6px;
  border-right:1.5px solid var(--line-strong);border-top:1.5px solid var(--line-strong);
  transform:rotate(45deg);transition:transform .24s var(--ease),border-color .24s var(--ease);
}
a.ledger-row.ledger-nofig:hover::after{border-color:var(--loden);
  transform:rotate(45deg) translate(3px,-3px)}

/* A register: a ledger whose rows are links. The <li> carries no styling so the
   <a> can own the whole row — padding, rule and hit area together. */
.register{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.register li{margin:0}

/* A ledger row that links (the vehicle register on the home page). */
a.ledger-row{text-decoration:none;color:inherit;
  transition:background .2s var(--ease)}
a.ledger-row:hover{background:rgba(47,79,62,.035)}
a.ledger-row:hover h3{text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px}
.ledger-thumb{width:132px;height:92px;object-fit:cover;border-radius:var(--radius-container)}
/* align-items:start, not center. Centring looked fine while every row was two
   lines, but the rows are 2-4 lines and on a phone they are taller still, so a
   centred thumbnail floats against its own title and nothing in the column
   lines up. The nudge is optical: it drops the image to the title's cap height
   rather than its line box. */
.ledger-media{display:grid;grid-template-columns:132px minmax(0,1fr) auto;gap:0 28px;
  align-items:start}
.ledger-media .ledger-thumb{margin-top:.24em}
a.ledger-row.ledger-media::after{
  content:"";width:9px;height:9px;flex:none;margin-right:6px;
  border-right:1.5px solid var(--line-strong);border-top:1.5px solid var(--line-strong);
  transform:rotate(45deg);transition:transform .24s var(--ease),border-color .24s var(--ease);
}
a.ledger-row.ledger-media:hover::after{border-color:var(--loden);
  transform:rotate(45deg) translate(3px,-3px)}
@media (max-width:600px){
  .ledger-media{grid-template-columns:84px minmax(0,1fr);gap:0 16px}
  .ledger-thumb{width:84px;height:64px}
  a.ledger-row.ledger-media::after{display:none}
}

/* ---------- Der Stempel: at most ONCE per page, and only where binding ---------- */
.stamp{
  width:132px;height:132px;flex:none;border-radius:999px;
  border:2px solid var(--loden);box-shadow:inset 0 0 0 3px var(--bg),inset 0 0 0 4px var(--loden);
  display:grid;place-content:center;text-align:center;gap:5px;
  transform:rotate(-4deg);color:var(--loden);padding:8px;
}
.stamp b{font:600 .6875rem/1.15 var(--font);letter-spacing:.14em;text-transform:uppercase;
  display:block}
.stamp i{display:block;width:38px;height:1px;background:var(--loden);margin-inline:auto}
.stamp span{font:400 .625rem/1.25 var(--font);letter-spacing:.1em;text-transform:uppercase;
  color:var(--loden);display:block}
.stamp-row{display:flex;gap:32px;align-items:center;flex-wrap:wrap}
.stamp-row > p{margin:0;max-width:44ch}
/* In the closing band the stamp heads its own column rather than sitting
   beside the figures — side by side it wrapped and stranded the ring. */
.cta-band .stamp-row{flex-direction:column;align-items:flex-start;gap:38px}
.cta-band .cta-figures{width:100%}

/* ---------- numbered step band ---------- */
.step-band{display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px;margin-top:8px;
  border-top:1px solid var(--line)}
.step{padding:32px 0 8px}
.step img{border-radius:var(--radius-container);margin-bottom:22px;
  aspect-ratio:4/3;object-fit:cover;width:100%}
.step-num{
  font:600 .8125rem/1 var(--font);letter-spacing:.04em;font-variant-numeric:tabular-nums;
  color:var(--accent-deep);display:block;margin-bottom:10px;
}
.step p{color:var(--muted);font-size:.9375rem}
/* On a phone the three-column band used to become three stacked 4:3 photographs
   — about 1,200px of scrolling for a three-item list, with the pictures
   carrying the same weight as the argument. Comparable items are rows
   (DESIGN.md), so here the band adopts the ledger the rest of the site already
   speaks: the numeral in its own rail beside the clause, and the photograph
   demoted to a letterbox band under the text, where it corroborates rather
   than competes. */
@media (max-width:767px){
  .step-band{grid-template-columns:1fr}
  .step{
    display:grid;grid-template-columns:2.75rem minmax(0,1fr);gap:0 12px;
    grid-template-areas:"num title" ".  body" ".  img";
    border-top:1px solid var(--line);padding:22px 0 24px;
  }
  .step:first-child{border-top:0}
  .step-num{grid-area:num;margin:0;padding-top:.3em}
  .step h3{grid-area:title;margin:0 0 .4em}
  .step p{grid-area:body;margin:0}
  .step img{grid-area:img;aspect-ratio:16/6;margin:16px 0 0}
}

/* ---------- regions ---------- */
.region-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--line)}
.region-grid a{display:block;padding:20px 24px;border-bottom:1px solid var(--line);
  border-left:1px solid var(--line);text-decoration:none;color:var(--ink);font-weight:500;
  font-size:.9375rem;transition:background .2s var(--ease)}
.region-grid a:nth-child(3n+1){border-left:0;padding-left:0}
.region-grid a:hover{background:rgba(47,79,62,.045)}
@media (max-width:767px){
  .region-grid{grid-template-columns:1fr}
  .region-grid a{border-left:0;padding-left:0}
}

/* ---------- FAQ ---------- */
.faq{margin-top:0;max-width:none;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:24px 0;font-weight:600;color:var(--ink);font-size:1.0625rem;
  list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:11px;height:11px;
  border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .24s var(--ease)}
.faq details[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.faq details > p{padding:0 0 26px;margin:0;color:var(--muted);max-width:70ch}

/* ---------- closing commitment band ---------- */
.cta-band{background:var(--loden);color:#fff}
.cta-band h2{color:#fff;max-width:16ch}
.cta-band p{color:rgba(255,255,255,.82);max-width:46ch}
.cta-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.cta-band .btn-primary{background:var(--accent);color:var(--ink);border-color:var(--accent);
  margin-top:26px}                                                   /* 10.61:1 */
.cta-band .btn-primary:hover{background:#F0D796;border-color:#F0D796}
.cta-band .stamp{border-color:rgba(255,255,255,.55);color:#fff;
  box-shadow:inset 0 0 0 3px var(--loden),inset 0 0 0 4px rgba(255,255,255,.55)}
.cta-band .stamp i{background:rgba(255,255,255,.55)}
.cta-band .stamp span{color:rgba(255,255,255,.8)}
.cta-figures{display:grid;gap:0;border-top:1px solid rgba(255,255,255,.22)}
.cta-figures div{display:grid;grid-template-columns:116px minmax(0,1fr);gap:20px;
  align-items:baseline;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.22)}
/* Scoped to .cta-band on purpose: brass is only legible here because the ground
   is loden. Stated in the selector so the QA gate can verify the ground rather
   than take the declaration on trust. */
.cta-band .cta-figures dt{font:600 .75rem/1.2 var(--font);letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent)}                       /* 5.62:1 */
.cta-figures dd{margin:0;color:#fff;font-size:.9375rem}
@media (max-width:900px){ .cta-grid{grid-template-columns:1fr;gap:40px} }

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:22px}
.field-label{font-weight:600;color:var(--ink);font-size:.9375rem}
.field input,.field select{
  min-height:54px;padding:0 16px;font:400 1rem var(--font);color:var(--ink);
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-control)}
.field input:focus-visible,.field select:focus-visible{border-color:var(--loden)}
.field-error{color:#9B1C1C;font-size:.875rem;min-height:1.3em}  /* 8.5:1 on --bg */
.field input[aria-invalid="true"]{border-color:#9B1C1C}
.radio-card{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;cursor:pointer;
  background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--radius-control);margin-bottom:10px;
  transition:border-color .24s var(--ease),box-shadow .24s var(--ease)}
.radio-card:hover{border-color:var(--ink)}
.radio-card:has(input:checked){border-color:var(--loden);box-shadow:inset 3px 0 0 var(--loden)}
.radio-card input{accent-color:var(--loden);margin-top:3px;flex:none}
.progress{height:3px;background:var(--line);overflow:hidden;margin-bottom:12px}
.progress > i{display:block;height:100%;width:100%;background:var(--loden);
  transform-origin:left center;transform:scaleX(0);
  transition:transform .28s var(--ease)}
.step-count{font:600 .75rem/1.2 var(--font);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0}

.quickstart{max-width:520px;margin-top:26px}
.quickstart .btn-primary{width:100%}
@media (min-width:768px){
  .quickstart{display:grid;grid-template-columns:1fr 1fr auto;gap:16px;align-items:end;max-width:720px}
  .quickstart .field{margin-bottom:0}
  .quickstart .btn-primary{width:auto}
}

/* ---------- sticky mobile contact bar ---------- */
/* Schnellkontakt: keine Leiste ueber die volle Breite am unteren Rand mehr,
   sondern zwei runde, schwebende Buttons mittig am rechten Rand — erreichbar
   ohne den Daumen quer ueber das Display zu fuehren, und sie nehmen dem
   Footer keine 60px Dokumenthoehe mehr weg. tests/css.test.mjs haelt Form
   und Position fest. */
.sticky-bar{display:none}
@media (max-width:900px){
  /* Mittig auf der Bildschirmhoehe: top:50% plus translateY(-50%) zentriert
     das Rail selbst, nicht seine Oberkante — der alte Wert setzte die Oberkante
     auf 58% und liess es dadurch deutlich unter der Mitte haengen.
     Rail-Hoehe: 3x52 + 2x10 = 176px, also 88px in jede Richtung.
     Die CTA-Reihe im Hero endet bei y=416px und liegt im Fluss, ist auf kurzen
     Displays also nicht per Prozentwert freizuhalten. Zentriert wird das Rail
     dort zwangslaeufig danebenliegen — deshalb weicht es unter 720px Hoehe
     wieder nach unten aus, statt auf dem Button zu sitzen.
     tests/css.test.mjs haelt beide Werte fest. */
  .sticky-bar{position:fixed;right:14px;top:50%;transform:translateY(-50%);
    z-index:95;display:flex;flex-direction:column;gap:10px;
    margin-right:env(safe-area-inset-right)}
  @media (max-height:719px){
    /* 504px = 416px CTA-Unterkante + 88px halbe Rail-Hoehe. */
    .sticky-bar{top:504px;transform:none}
  }
  /* Kein Schlagschatten — DESIGN.md, Elevation & Depth. Die Buttons trennen
     sich ueber Wert und Haarlinie vom Grund, wie alles andere auch. */
  .sticky-bar a{width:52px;height:52px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;text-decoration:none;
    border:1px solid;transition:transform .15s var(--ease)}
  .sticky-bar a:active{transform:scale(.94)}
  .sticky-call{background:var(--loden);color:#fff;border-color:var(--loden-deep)}
  .sticky-wa,.sticky-mail{background:var(--surface);color:var(--loden);
    border-color:var(--line-strong)}
}

/* ---------- footer ---------- */
.site-footer{background:var(--surface-2);border-top:1px solid var(--line);padding:64px 0 40px}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:40px}
.footer-head{font:600 .75rem/1.2 var(--font);letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink);margin:0 0 1.1em}
.footer-mark{display:block;width:38px;height:auto;margin:0 0 16px}
.wordmark-footer{font:400 1.35rem/1 var(--display);letter-spacing:-.02em;color:var(--ink);
  margin:0 0 .6em}
.site-footer p{margin:0 0 .55em;font-size:.9375rem}
.site-footer a{color:var(--ink-body);text-decoration:none}
.site-footer a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
@media (max-width:767px){ .footer-grid{grid-template-columns:1fr;gap:32px} }
.footer-regions{margin-top:44px;padding-top:26px;border-top:1px solid var(--line)}
.footer-regions ul{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px 24px}
.footer-regions li{margin:0;font-size:.9375rem}
@media (max-width:767px){ .footer-regions ul{grid-template-columns:repeat(2,1fr)} }
/* Firmenbuch / GISA / Gewerbe — Austrians check these, so they are not buried. */
.footer-legal{margin-top:30px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:8px 28px;font-size:.8125rem;color:var(--muted)}
.footer-legal span{font-variant-numeric:tabular-nums}
.footer-phone{font-size:1.0625rem !important;font-weight:600;color:var(--ink) !important;
  font-variant-numeric:tabular-nums}
/* No year: a stale copyright line is exactly the kind of small wrongness that
   costs a trust-selling site more than the line ever earned it. */
.footer-base{margin-top:30px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 28px;
  font-size:.8125rem;color:var(--muted)}
.footer-base p{margin:0;font-size:.8125rem}

/* ---------- prose (legal pages) ---------- */
.prose{max-width:68ch}
.prose h2{font-size:1.5rem;margin-top:1.6em}
.prose h3{margin-top:1.6em}

/* ---------- lists ---------- */
.lede{font-size:clamp(1.125rem,1.5vw,1.3125rem);line-height:1.5;color:var(--ink-body);
  max-width:60ch;margin-top:0}

.check-list{list-style:none;padding:0;margin:24px 0;max-width:62ch;
  border-top:1px solid var(--line)}
.check-list li{position:relative;padding:14px 0 14px 32px;border-bottom:1px solid var(--line)}
.check-list li::before{content:"";position:absolute;left:2px;top:22px;width:13px;height:7px;
  border-left:1.5px solid var(--loden);border-bottom:1.5px solid var(--loden);
  transform:rotate(-45deg)}

.portrait-slot{aspect-ratio:4/5;border:1px dashed var(--line-strong);
  border-radius:var(--radius-container);background:var(--surface)}

/* ---------- wizard (bewertung.html) ---------- */
.wizard-wrap{max-width:660px}
.wizard-wrap fieldset{border:0;padding:0;margin:32px 0 0;min-inline-size:0}
.wizard-wrap legend{padding:0}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.field-hint{font-size:.875rem;margin:0;color:var(--muted)}
.wizard-actions{display:flex;gap:12px;margin-top:32px}
.wizard-actions .btn-primary{flex:1}
.escape{margin-top:10px;font-size:.9375rem;color:var(--muted)}
.consent{display:flex;gap:12px;align-items:flex-start;cursor:pointer;line-height:1.5;
  font-size:.9375rem}
.consent input{margin-top:4px;width:20px;height:20px;flex:none;accent-color:var(--loden)}
.wizard-done{margin-top:32px;padding:34px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-container)}

/* ---------- Preisversprechen ----------
   Numbered because the list is CLOSED and countable — the count is the point.
   The h3 and p share one wrapper so the row is a real two-column grid; without
   the wrapper the p wraps to a new row and every heading floats off to the right. */
.promise-list{list-style:none;counter-reset:pv;padding:0;margin:0;
  border-top:1px solid var(--line)}
.promise-list li{counter-increment:pv;padding:26px 0;border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:3.5rem minmax(0,1fr);gap:0 24px;align-items:start}
.promise-list li::before{content:counter(pv,decimal-leading-zero);
  font:600 .8125rem/1 var(--font);letter-spacing:.04em;font-variant-numeric:tabular-nums;
  color:var(--accent-deep);padding-top:.42em}
.promise-list h3{margin:0 0 .35em}
.promise-list p{margin:0;color:var(--muted);font-size:.9375rem;max-width:62ch}

/* Already priced in: deliberately UNNUMBERED — an open set of examples, so
   numbering would claim a completeness it does not have. */
.promise-included{list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:0 48px;
  border-top:1px solid var(--line)}
.promise-included li{position:relative;padding:16px 0 16px 26px;
  border-bottom:1px solid var(--line);color:var(--ink-body);font-size:.9375rem}
.promise-included li::before{content:"";position:absolute;left:0;top:1.55em;
  width:13px;height:1.5px;background:var(--line-strong)}
@media (max-width:767px){
  .promise-included{grid-template-columns:1fr;gap:0}
  .promise-list li{grid-template-columns:minmax(0,1fr);gap:6px}
  .promise-list li::before{padding-top:0}
}

/* ---------- wizard: quote-readiness panel ---------- */
.readiness-head{font:600 .75rem/1.2 var(--font);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);margin:26px 0 12px}
.readiness{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.readiness li{position:relative;padding-left:28px;color:var(--ink-body);font-size:.9375rem}
.readiness li::before{position:absolute;left:0;top:0;font-weight:700;
  font-size:.95rem;line-height:1.6}
.readiness li.has::before{content:"✓";color:var(--loden)}          /* 8.04:1 */
.readiness li.lacks::before{content:"–";color:var(--muted)}
.readiness li.extra::before{content:"+";color:var(--muted)}

.verdict{margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}
.verdict-line{font:400 1.375rem/1.25 var(--display);color:var(--ink);margin:0 0 20px;
  letter-spacing:-.01em;max-width:30ch}
.verdict-meta{margin:0;display:grid;gap:0;border-top:1px solid var(--line)}
.verdict-meta > div{display:grid;grid-template-columns:112px 1fr;gap:16px;align-items:baseline;
  padding:12px 0;border-bottom:1px solid var(--line)}
.verdict-meta dt{color:var(--muted);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600}
.verdict-meta dd{margin:0;color:var(--ink);font-weight:500;font-size:.9375rem}

.verdict-claim{margin-top:0;font:400 1.5rem/1.2 var(--display);color:var(--ink);
  letter-spacing:-.012em}
.nachreichen{margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}
.wizard-done h2:focus-visible{outline:2px solid var(--focus);outline-offset:4px}

/* ---------- wizard: one-tap answers ---------- */
/* Kraftstoff, Getriebe und Fahrbereitschaft sind kurz genug, um nebeneinander
   zu stehen. Als Chips kostet jede Antwort einen Daumentipp statt einer Zeile
   Formular — der Grund, warum vier Schritte sich schneller anfuehlen als drei. */
.choice{border:0;padding:0;margin:0 0 26px;min-width:0}
.choice > .field-label{display:block;margin:0 0 12px}
.choice-row{display:flex;flex-wrap:wrap;gap:10px}
.chip{position:relative;display:inline-flex}
/* Der Radio bleibt bedienbar und fokussierbar, liegt aber unsichtbar unter dem
   Label — display:none wuerde ihn aus der Tab-Reihenfolge und aus der
   Screenreader-Ausgabe nehmen. */
.chip input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;padding:11px 18px;border-radius:2px;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-body);
  font-size:.9375rem;line-height:1.2;transition:border-color .15s var(--ease),
  background-color .15s var(--ease),color .15s var(--ease)}
.chip:hover span{border-color:var(--ink)}
.chip input:checked + span{background:var(--loden);border-color:var(--loden-deep);color:#fff}
.chip input:focus-visible + span{outline:2px solid var(--focus);outline-offset:2px}

.field-optional{font-weight:400;letter-spacing:.08em;font-size:.6875rem;
  text-transform:uppercase;color:var(--muted);margin-left:.5em}

/* ---------- wizard: the receipt ---------- */
/* Frueher eine Folge gleichrangiger Absaetze, die als Wand las. Jetzt ein Beleg:
   Referenz oben, darunter die Angaben des Verkaeufers im Wortlaut, dann was
   passiert. Die Abschnitte trennen sich ueber Haarlinien statt ueber Abstand,
   damit die Struktur auch beim Ueberfliegen sichtbar bleibt. */
.ticket{display:grid;gap:0}
.ticket-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;
  gap:18px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.ticket-head h2{margin:0;font-size:1.75rem;line-height:1.15}
.ticket-eyebrow{font:600 .6875rem/1.2 var(--font);letter-spacing:.16em;text-transform:uppercase;
  color:var(--loden);margin:0 0 .5em}
.ticket-ref{text-align:right}
.ticket-ref p:last-child{margin:0;font-size:1.0625rem;font-weight:600;color:var(--ink)}
.ticket-label{font:600 .6875rem/1.2 var(--font);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .85em}
.ticket-section{padding:22px 0;border-bottom:1px solid var(--line)}

/* Die Angaben selbst. Zwei Spalten, damit Etikett und Wert eine Kante teilen
   und der Beleg zeilenweise gegengelesen werden kann. */
.ticket-data{margin:0;display:grid;gap:0}
.ticket-data > div{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:baseline;
  padding:7px 0}
.ticket-data > div + div{border-top:1px solid var(--line)}
.ticket-data dt{color:var(--muted);font-size:.8125rem}
.ticket-data dd{margin:0;color:var(--ink);font-weight:500;font-size:.9375rem}

.ticket-steps{margin:0;padding-left:1.2em;display:grid;gap:7px;color:var(--ink-body);
  font-size:.9375rem}
.ticket-steps li::marker{color:var(--muted);font-variant-numeric:tabular-nums}
.ticket-foot{padding-top:24px}
.ticket .verdict-line{margin:18px 0 0;font-size:1.125rem;line-height:1.4}
.ticket .nachreichen .btn-secondary{margin-top:16px}

@media (max-width:600px){
  .ticket-head{flex-direction:column}
  .ticket-ref{text-align:left}
  .ticket-data > div{grid-template-columns:1fr;gap:2px}
}

@media (max-width:600px){
  .verdict-meta > div{grid-template-columns:1fr;gap:2px}
  .wizard-done{padding:24px}
}

.note-after-list{margin-top:28px}

/* ============================================================
   MOTION — reveal on scroll, and the stamp being pressed.

   Every animated property is transform or opacity (DESIGN.md, Components).
   Elements are hidden only under `.js`, which an inline script in <head> sets
   before first paint: without JavaScript nothing is ever hidden, so the page
   degrades to the static document it already was. A failsafe keyframe forces
   everything visible at 2.5s in case main.js fails to load — content that
   never appears is a far worse failure than content that appears unanimated.
   ============================================================ */
.js .hero-grid > *,
.js .trust-item,
.js .step,
.js .register > li,
.js .ledger > li,
.js .promise-list > li,
.js .promise-included > li,
.js .region-grid > a,
.js .faq details,
.js .cta-grid > *,
.js .sec > *,
.js .check-list li{
  opacity:0;transform:translateY(14px);
  transition:opacity .52s var(--ease) var(--rd,0ms),transform .52s var(--ease) var(--rd,0ms);
  animation:reveal-failsafe 0s 2.5s forwards;
  will-change:opacity,transform;
}
/* Doubled class on purpose. Seven of the selectors above end in an element
   type — `.register > li`, `.ledger > li`, `.promise-list > li`,
   `.promise-included > li`, `.check-list li`, `.region-grid > a`,
   `.faq details` — which scores (0,2,1) and so out-ranks a plain `.js .in`
   at (0,2,0). Those seven groups stayed at opacity 0 with the class already
   on them and were rescued 2.5s later by the failsafe keyframe, unanimated:
   the nine Bundesland cards, the five category rows, the FAQ and both
   Preisversprechen lists all sat as blank space until then. `.in.in` scores
   (0,3,0) and clears every one of them without restating the list.
   Deliberately still below `.js .cta-grid .stamp` (0,3,0, and later in the
   file), so the stamp keeps its own press animation rather than fading. */
.js .in.in{opacity:1;transform:none;animation:none;will-change:auto}
@keyframes reveal-failsafe{to{opacity:1;transform:none}}

/* Der Stempel does not fade in — it gets pressed. Overshoot on the rotation
   so it lands on its -4deg rest angle the way a rubber stamp settles. */
.js .cta-grid .stamp{
  opacity:0;transform:rotate(-17deg) scale(1.18);
  transition:opacity .34s var(--ease) .16s,transform .58s var(--ease) .16s;
}
.js .cta-grid .in .stamp,
.js .cta-grid .stamp.in{opacity:1;transform:rotate(-4deg) scale(1)}

/* The numerals arrive from the rail they belong to. A clause number sliding in
   beside its clause states the structure instead of decorating it — which is
   the only reason it earns motion at all. --rd inherits from the row, so a
   numeral keeps its row's place in the stagger. */
.js .step .step-num,
.js .ledger > li .ledger-figure{
  opacity:0;transform:translateX(-10px);
  transition:opacity .38s var(--ease) calc(var(--rd,0ms) + 140ms),
             transform .38s var(--ease) calc(var(--rd,0ms) + 140ms);
  animation:reveal-failsafe 0s 2.8s forwards;
}
.js .step.in .step-num,
.js .ledger > li.in .ledger-figure{opacity:1;transform:none;animation:none}

/* The running head is ruled as the section arrives — a rule being drawn, not a
   line fading up. Scoped to the breakpoint that generates the pseudo-element.
   Same failsafe as everything else: if the observer never fires, it rules
   itself at 2.5s rather than leaving the section unmarked. */
@media (max-width:1023px){
  .js .eyebrow::before{
    transform:scaleX(0);transform-origin:left center;
    transition:transform .5s var(--ease) calc(var(--rd,0ms) + 90ms);
    animation:reveal-failsafe 0s 2.5s forwards;
  }
  .js .eyebrow.in::before{transform:scaleX(1);animation:none}
}

/* prefers-reduced-motion: never hide anything in the first place. The global
   reduce block only shortens durations, which would still leave a hidden
   element hidden until the observer happened to fire. */
@media (prefers-reduced-motion:reduce){
  .js .hero-grid > *,.js .trust-item,.js .step,.js .register > li,.js .ledger > li,
  .js .promise-list > li,.js .promise-included > li,.js .region-grid > a,
  .js .faq details,.js .cta-grid > *,.js .sec > *,.js .check-list li,
  .js .cta-grid .stamp,
  .js .step .step-num,.js .ledger > li .ledger-figure,
  .js .eyebrow::before{
    opacity:1 !important;transform:none !important;animation:none !important;
  }
}

/* FAQ opens smoothly where the browser supports animating to auto height.
   Behind @supports so older browsers keep the instant native toggle. */
@supports (interpolate-size: allow-keywords){
  html{interpolate-size:allow-keywords}
  .faq details::details-content{
    block-size:0;overflow:clip;
    transition:block-size .32s var(--ease),content-visibility .32s allow-discrete;
  }
  .faq details[open]::details-content{block-size:auto}
}

/* The register chevron and the row tint already move on hover; the thumbnail
   gets a slow scale so the row feels like one object rather than three. */
a.ledger-row.ledger-media .ledger-thumb{transition:transform .5s var(--ease)}
a.ledger-row.ledger-media:hover .ledger-thumb{transform:scale(1.04)}
.ledger-thumb{overflow:hidden}
a.ledger-row.ledger-media{overflow:hidden}