/* ==========================================================================
   AUTOTEILE SCHRAUBER — "WERKSTATTHANDBUCH"
   Site-locked to autoteileschrauber.de. Not a fleet template.

   THE DIRECTION
   The German workshop manual, set as a premium reference work. Paper and
   white, anthracite type, hairline rules — and colour used the way a German
   road uses it (RAL colours):

     Verkehrsblau  RAL 5017  information: links, numbering, the brand sign
     Signalgelb    RAL 1003  caution: symptom markers, the safety notice
     Anthrazit     RAL 7016  the colophon, table heads

   Three voices of type, each with one job:
     Source Serif 4          headlines — the premium-publication voice
     Source Sans 3           reading copy
     Barlow Semi Condensed   every label, number and caption — the DIN voice

   THE RULES
   No gradients, no glows, no drop shadows. Hierarchy comes from type size and
   rule weight: a 2px anthracite rule opens a list, 1px warm rules divide it.
   Numbers are tabular. Sections are numbered like a manual (1, 1.1, 1.2).
   Light theme only, painted explicitly on every surface.
   ========================================================================== */

:root{
  /* Palette — the layout overrides the base tokens from template fields. */
  --blue:        #005387;
  --blue-deep:   #003A5F;
  --yellow:      #F9A800;
  --anthracite:  #262B2F;
  --paper:       #F5F3EE;
  --ink:         #1D2226;
  --rule:        #D8D3C8;

  --white:       #FFFFFF;
  --blue-tint:   color-mix(in srgb, var(--blue) 8%, #FFFFFF);
  --blue-soft:   color-mix(in srgb, var(--blue) 22%, #FFFFFF);
  --yellow-tint: color-mix(in srgb, var(--yellow) 14%, #FFFFFF);
  --yellow-rule: color-mix(in srgb, var(--yellow) 58%, #FFFFFF);
  --ink-2:       color-mix(in srgb, var(--ink) 86%, #FFFFFF);   /* body copy       */
  --ink-3:       color-mix(in srgb, var(--ink) 70%, #FFFFFF);   /* secondary ≥5:1  */
  --ink-4:       color-mix(in srgb, var(--ink) 52%, #FFFFFF);   /* large/decor only */
  --rule-2:      color-mix(in srgb, var(--rule) 55%, #FFFFFF);
  --foot-ink:    #C9CED3;
  --foot-mute:   #A3AAB0;
  --foot-rule:   rgba(255,255,255,.14);

  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body:    "Source Sans 3", system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-label:   "Barlow Semi Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --container:  1280px;
  --read:       720px;
  --measure:    68ch;
  --radius:     2px;
  --base-size:  18px;
  --base-lh:    1.7;

  --ease:       cubic-bezier(.2,.6,.3,1);
  --t:          150ms;
}

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

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--base-size);
  line-height:var(--base-lh);
  font-kerning:normal;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{ max-width:100%; height:auto; }
svg{ display:block; }
a{ color:var(--blue); text-decoration:none; }
a:hover{ color:var(--blue-deep); }
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }
::selection{ background:var(--blue-soft); color:var(--ink); }

.container{
  max-width:var(--container); margin-inline:auto;
  padding-inline:clamp(18px,4vw,48px); position:relative;
}
.container .container{ max-width:none; padding-inline:0; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--blue); color:#fff; padding:.7rem 1.1rem; font-weight:700;
}
.skip-link:focus{ left: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;
}

/* --- The DIN voice: one rule for every label, caption and small number. --- */

.label, .lk-desc, .tp-kicker, .finder-label, .finder-terms span, .tp-facts span,
.band-more, .gd-tag, .gd-go, .plate-no, .plate-ref, .foot-h, .foot-top-link,
.toc-h, .breadcrumb, .post-card-meta, .result-meta, .results-count, .pl-eyebrow,
.eyebrow, .post-cat, .card-tag, .pc-tag, .post-links h2, .chip, .section-cap,
.stat .l, .article-body thead th, .article-body .pro-tip::before,
.article-body .related-inline-link::before, .pagination{
  font-family:var(--font-label);
  font-weight:600;
  font-size:.78rem;
  letter-spacing:.07em;
  text-transform:uppercase;
  line-height:1.3;
}

/* --- Type ---------------------------------------------------------------- */

h1,h2,h3,h4{
  font-family:var(--font-display); font-weight:600;
  letter-spacing:-.01em; margin:0; color:var(--ink);
  font-optical-sizing:auto;
}
p{ margin:0 0 1rem; }
.muted{ color:var(--ink-3); }
.accent{ color:var(--blue); font-style:normal; }
.center{ text-align:center; }
.display{ font-family:var(--font-display); font-weight:600; letter-spacing:-.012em; }
.lead{ font-size:1.12rem; line-height:1.6; color:var(--ink-2); max-width:var(--measure); }
.eyebrow{ display:inline-block; color:var(--blue); margin-bottom:.6rem; }

/* --- The brand sign ------------------------------------------------------
   A German information sign: Verkehrsblau ground, white inset rim, white
   lettering in the DIN voice. */

.sign{ width:42px; height:42px; flex:none; }
.sign-lg{ width:54px; height:54px; }
.sign-bg{ fill:var(--blue); }
.sign-rim{ stroke:#FFFFFF; }
.sign-txt{
  fill:#FFFFFF; font-family:var(--font-label); font-weight:700;
  font-size:17px; letter-spacing:.3px;
}

.lk-text{ display:flex; flex-direction:column; gap:.2rem; min-width:0; }
.lk-name{
  font-family:var(--font-display); font-weight:600; font-size:1.24rem;
  line-height:1.05; letter-spacing:-.01em; color:var(--ink); white-space:nowrap;
}
.lk-desc{ font-size:.66rem; letter-spacing:.11em; color:var(--ink-3); white-space:nowrap; }
.lk-img{ height:42px; width:auto; }

/* ==========================================================================
   HEADER
   ========================================================================== */

.site-header{
  position:sticky; top:0; z-index:60;
  background:var(--white);
  border-top:4px solid var(--blue);
  border-bottom:1px solid var(--rule);
}
.nav{ display:flex; align-items:center; gap:clamp(16px,2.4vw,36px); min-height:78px; }
.nav-brand{ display:inline-flex; align-items:center; gap:.75rem; color:var(--ink); flex:none; }
.nav-brand:hover{ color:var(--ink); }
.nav-brand:hover .lk-name{ color:var(--blue); }

.nav-links{ display:flex; align-items:center; gap:.1rem; margin-left:auto; }
.nav-link{
  position:relative; padding:.55rem .75rem;
  font-size:.98rem; font-weight:600; color:var(--ink-2);
  transition:color var(--t) var(--ease);
}
.nav-link::after{
  content:""; position:absolute; left:.75rem; right:.75rem; bottom:.2rem; height:2px;
  background:var(--blue); transform:scaleX(0); transform-origin:left;
  transition:transform var(--t) var(--ease);
}
.nav-link:hover{ color:var(--blue); }
.nav-link:hover::after{ transform:scaleX(1); }

.nav-tail{ display:flex; align-items:center; gap:.6rem; flex:none; }
.nav-search{
  display:flex; align-items:center;
  border:1px solid var(--rule); background:var(--paper); border-radius:var(--radius);
  transition:border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.nav-search:focus-within{ border-color:var(--blue); background:var(--white); }
.nav-search input{
  width:200px; border:0; background:transparent; outline:none;
  font:inherit; font-size:.95rem; color:var(--ink); padding:.55rem .1rem .55rem .8rem;
}
.nav-search input::placeholder{ color:var(--ink-3); }
.nav-search button{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border:0; background:transparent; color:var(--ink-2); cursor:pointer;
}
.nav-search button svg{ width:18px; height:18px; }
.nav-search button:hover{ color:var(--blue); }

.nav-toggle{
  display:none; width:44px; height:44px; padding:0;
  background:var(--white); border:1px solid var(--rule); border-radius:var(--radius);
  cursor:pointer; align-items:center; justify-content:center;
}
.nav-burger, .nav-burger::before, .nav-burger::after{
  display:block; width:18px; height:2px; background:var(--ink);
  transition:transform var(--t) var(--ease), background var(--t) var(--ease);
}
.nav-burger{ position:relative; }
.nav-burger::before, .nav-burger::after{ content:""; position:absolute; left:0; }
.nav-burger::before{ top:-6px; }
.nav-burger::after{ top:6px; }
.site-header.is-open .nav-burger{ background:transparent; }
.site-header.is-open .nav-burger::before{ transform:translateY(6px) rotate(45deg); }
.site-header.is-open .nav-burger::after{ transform:translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   HOME — the title page
   ========================================================================== */

.title-page{
  background:var(--paper);
  padding:clamp(40px,6vw,92px) 0 clamp(44px,5.5vw,80px);
  border-bottom:1px solid var(--rule);
}
.tp-grid{
  display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(32px,5vw,84px); align-items:center;
}
.tp-kicker{
  display:flex; align-items:center; flex-wrap:wrap; gap:.6rem .8rem;
  margin:0 0 1.5rem; color:var(--blue);
}
.sq{ width:10px; height:10px; background:var(--blue); flex:none; }
.tp-asof{ color:var(--ink-3); padding-left:.8rem; border-left:1px solid var(--rule); }
.tp-asof time{ font-variant-numeric:tabular-nums; }

.tp-title{
  font-size:clamp(2.25rem,4.3vw,3.85rem); line-height:1.06; letter-spacing:-.02em;
  margin:0 0 1.5rem;
}
.tp-line{ display:block; }
.tp-line.is-blue{ color:var(--blue); }
.tp-lead{
  font-size:clamp(1.06rem,1.45vw,1.22rem); line-height:1.62;
  color:var(--ink-2); max-width:56ch; margin:0 0 2.1rem;
}

.finder{ max-width:640px; margin:0; }
.finder-label{ display:block; color:var(--ink); margin-bottom:.6rem; }
.finder-row{
  display:flex; background:var(--white);
  border:1.5px solid var(--ink); border-radius:var(--radius);
  transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.finder-row:focus-within{ border-color:var(--blue); box-shadow:0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent); }
.finder-input{
  flex:1; min-width:0; border:0; outline:none; background:transparent;
  font:inherit; font-size:1.06rem; color:var(--ink); padding:.95rem 1.1rem;
}
.finder-input::placeholder{ color:var(--ink-3); }
.finder-go{
  display:inline-flex; align-items:center; gap:.65rem; flex:none;
  border:0; background:var(--blue); color:#fff; padding:0 1.5rem; cursor:pointer;
  font-family:var(--font-label); font-weight:600; font-size:1rem;
  letter-spacing:.07em; text-transform:uppercase;
  transition:background var(--t) var(--ease);
}
.finder-go svg{ width:20px; height:10px; }
.finder-go:hover{ background:var(--blue-deep); }
.finder-terms{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.35rem .9rem;
  margin:1rem 0 0; font-size:.98rem;
}
.finder-terms span{ color:var(--ink-3); }
.finder-terms a{ color:var(--ink-2); border-bottom:1px solid var(--rule); padding-bottom:1px; }
.finder-terms a:hover{ color:var(--blue); border-bottom-color:var(--blue); }

.tp-facts{
  display:flex; flex-wrap:wrap; gap:.6rem 0; margin:2.2rem 0 0;
  padding-top:1.1rem; border-top:1px solid var(--rule); max-width:640px;
}
.tp-facts span{ color:var(--ink-3); padding-right:1.3rem; margin-right:1.3rem; border-right:1px solid var(--rule); }
.tp-facts span:last-child{ border-right:0; margin-right:0; padding-right:0; }
.tp-facts strong{
  font-family:var(--font-display); font-weight:600; font-size:1.4rem;
  letter-spacing:0; text-transform:none; color:var(--ink);
  margin-right:.35rem; font-variant-numeric:tabular-nums;
}

/* --- Abb. 1 — the plate ----------------------------------------------------
   A technical figure on a white plate, closed by a title block (Schriftfeld)
   the way a German drawing is. Centre lines are dash-dot, as DIN draws them. */

.plate{
  margin:0; background:var(--white); border:1px solid var(--rule);
  padding:clamp(14px,2vw,26px) clamp(14px,2vw,26px) 0;
}
.plate-draw svg{ width:100%; height:auto; }
.dr-part{ stroke:var(--ink); stroke-width:1.6; stroke-linejoin:round; }
.dr-fill{ fill:var(--white); }
.dr-fine{ stroke:var(--ink-4); stroke-width:1; }
.dr-hole{ fill:none; stroke:var(--ink); stroke-width:1.1; }
.dr-center{ stroke:var(--blue); stroke-width:1; stroke-dasharray:16 4 2 4; opacity:.6; }
.dr-lead{ stroke:var(--blue); stroke-width:1.2; }
.dr-call circle{ fill:var(--white); stroke:var(--blue); stroke-width:1.6; }
.dr-call text{
  fill:var(--blue); font-family:var(--font-label); font-weight:700;
  font-size:15px; text-anchor:middle;
}
.plate-cap{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:.35rem .9rem; align-items:baseline;
  margin:clamp(12px,1.6vw,20px) calc(-1 * clamp(14px,2vw,26px)) 0;
  padding:.85rem clamp(14px,2vw,26px) 1rem;
  border-top:1.5px solid var(--ink);
}
.plate-no{ background:var(--ink); color:#fff; padding:.22rem .5rem; }
.plate-title{ font-family:var(--font-display); font-weight:600; font-size:1.02rem; line-height:1.3; }
.plate-legend{ grid-column:1 / -1; font-size:.9rem; color:var(--ink-3); line-height:1.5; }
.plate-ref{ grid-column:1 / -1; color:var(--blue); }
.plate-ref:hover{ color:var(--blue-deep); }

/* ==========================================================================
   HOME — bands
   ========================================================================== */

section{ position:relative; }
.band{ padding:clamp(52px,6.5vw,96px) 0; border-bottom:1px solid var(--rule); }
.band.contents, .band.principles, .band.latest, .band.safety{ background:var(--white); }
.band.diagnosis, .band.guides, .band.register{ background:var(--paper); }
.band.safety{ border-bottom:0; }

.band-head{ margin-bottom:clamp(26px,3vw,42px); max-width:780px; }
.band-head-row{
  max-width:none; display:grid; grid-template-columns:minmax(0,1fr) auto;
  column-gap:2rem; align-items:end;
}
.band-head-row .label, .band-head-row .band-note{ grid-column:1 / -1; }
.band-head-row .band-note{ order:3; }
.label{ display:flex; align-items:center; gap:.55rem; margin:0 0 .75rem; color:var(--blue); }
.label::before{ content:""; width:10px; height:10px; background:currentColor; flex:none; }
.label-warn{ color:var(--ink-2); }
.label-warn::before{ background:var(--yellow); box-shadow:0 0 0 1px var(--ink); }
.band-title{
  font-size:clamp(1.8rem,3.1vw,2.55rem); line-height:1.14; letter-spacing:-.014em;
  margin:0; text-wrap:balance;
}
.band-note{ margin:.85rem 0 0; color:var(--ink-3); font-size:1.04rem; max-width:62ch; }
.band-more{ color:var(--blue); white-space:nowrap; padding-bottom:.35rem; }
.band-more:hover{ color:var(--blue-deep); }

/* --- Inhalt: the ten chapters as a table of contents -------------------- */

.toc-list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(28px,4vw,72px);
  border-top:2px solid var(--ink);
}
.toc-list li{ border-bottom:1px solid var(--rule); }
.toc-list a{
  display:grid; grid-template-columns:3.4rem minmax(0,1fr) auto; gap:.9rem;
  align-items:start; padding:1.25rem 0; color:var(--ink);
}
.ch-no{
  font-family:var(--font-label); font-weight:700; font-size:1.7rem; line-height:1;
  color:var(--blue); font-variant-numeric:tabular-nums; padding-top:.1rem;
}
.ch-title{ display:block; font-family:var(--font-display); font-weight:600; font-size:1.3rem; line-height:1.22; }
.ch-desc{ display:block; margin-top:.3rem; font-size:.98rem; line-height:1.5; color:var(--ink-3); }
.ch-go{ color:var(--ink-4); font-size:1.25rem; line-height:1.2; transition:transform var(--t) var(--ease), color var(--t) var(--ease); }
.toc-list a:hover .ch-title{ color:var(--blue); }
.toc-list a:hover .ch-go{ color:var(--blue); transform:translateX(4px); }

/* --- Diagnose: symptoms with a warning-lamp marker ---------------------- */

.diag-grid{
  display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(28px,4vw,76px); align-items:start;
}
.diag-grid .band-head{ margin-bottom:0; }
.symptoms{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:2rem;
  border-top:2px solid var(--ink);
}
.symptoms li{ border-bottom:1px solid var(--rule); }
.symptoms a{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  position:relative; padding:.95rem 0 .95rem 1.5rem;
  color:var(--ink); font-weight:600; font-size:1.04rem;
}
.symptoms a::before{
  content:""; position:absolute; left:0; top:50%; width:10px; height:10px; margin-top:-5px;
  background:var(--yellow); box-shadow:0 0 0 1px var(--ink);
}
.sy-go{ color:var(--ink-4); transition:transform var(--t) var(--ease), color var(--t) var(--ease); }
.symptoms a:hover{ color:var(--blue); }
.symptoms a:hover .sy-go{ color:var(--blue); transform:translateX(4px); }

/* --- Grundsätze --------------------------------------------------------- */

.pr-list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:2px solid var(--ink);
}
.pr-list li{ padding:1.6rem 1.6rem 1.7rem; border-right:1px solid var(--rule); }
.pr-list li:first-child{ padding-left:0; }
.pr-list li:last-child{ border-right:0; padding-right:0; }
.pr-no{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; margin-bottom:1rem;
  border:1.5px solid var(--blue); border-radius:50%; color:var(--blue);
  font-family:var(--font-label); font-weight:700; font-size:1.06rem;
}
.pr-h{ font-size:1.2rem; line-height:1.28; margin:0 0 .5rem; }
.pr-p{ margin:0; color:var(--ink-3); font-size:.99rem; line-height:1.56; }

/* --- Komplettratgeber --------------------------------------------------- */

.gd-grid{
  display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);
  gap:clamp(28px,4vw,72px); padding-top:1.9rem; border-top:2px solid var(--ink);
}
.gd-tag{ color:var(--blue); margin:0 0 .8rem; }
.gd-lead-title{ font-size:clamp(1.75rem,3vw,2.45rem); line-height:1.12; letter-spacing:-.016em; margin:0; text-wrap:balance; }
.gd-lead-title a{ color:var(--ink); }
.gd-lead-title a:hover{ color:var(--blue); }
.gd-lead-ex{ margin:1.05rem 0 0; color:var(--ink-2); font-size:1.1rem; line-height:1.62; max-width:54ch; }
.gd-go{
  display:inline-block; margin-top:1.4rem; padding:.8rem 1.2rem;
  background:var(--blue); color:#fff; font-size:.86rem;
  transition:background var(--t) var(--ease);
}
.gd-go:hover{ background:var(--blue-deep); color:#fff; }
.gd-side{ border-left:1px solid var(--rule); padding-left:clamp(22px,3vw,48px); min-width:0; }
.gd-med{ padding:0 0 1.25rem; margin:0 0 1.25rem; border-bottom:1px solid var(--rule); }
.gd-med h3{ font-size:1.2rem; line-height:1.3; margin:0; }
.gd-med h3 a{ color:var(--ink); }
.gd-med h3 a:hover{ color:var(--blue); }
.gd-med p{ margin:.45rem 0 0; color:var(--ink-3); font-size:.98rem; line-height:1.52; }
.gd-list{ list-style:none; margin:0; padding:0; counter-reset:gd; }
.gd-list li{ counter-increment:gd; border-bottom:1px solid var(--rule-2); }
.gd-list a{
  display:grid; grid-template-columns:2.3rem minmax(0,1fr); gap:.5rem;
  padding:.72rem 0; color:var(--ink-2); font-size:1.02rem; line-height:1.4;
}
.gd-list a::before{
  content:counter(gd, decimal-leading-zero);
  font-family:var(--font-label); font-weight:700; color:var(--blue); font-variant-numeric:tabular-nums;
}
.gd-list a:hover{ color:var(--blue); }

/* --- Register: makes A–Z, each letter a small information sign ---------- */

.reg-cols{ columns:5 170px; column-gap:clamp(24px,3vw,52px); }
.reg-group{ break-inside:avoid; margin-bottom:1.7rem; }
.reg-letter{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:4px; background:var(--blue); color:#fff;
  box-shadow:inset 0 0 0 2.5px var(--blue), inset 0 0 0 4px #fff;
  font-family:var(--font-label); font-weight:700; font-size:1.05rem;
}
.reg-group ul{ list-style:none; margin:.6rem 0 0; padding:0; }
.reg-group li a{ display:block; padding:.3rem 0; color:var(--ink-2); font-size:1.02rem; }
.reg-group li a:hover{ color:var(--blue); }

/* --- Sicherheitshinweis: a warning sign, not a coloured box ------------- */

.warn{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(18px,2.4vw,32px);
  align-items:start; padding:clamp(22px,3vw,36px);
  background:var(--yellow-tint); border:1px solid var(--yellow-rule);
  border-left:6px solid var(--yellow);
}
.warn-sign{ width:64px; height:56px; }
.ws-fill{ fill:var(--yellow); }
.ws-rim{ stroke:var(--ink); }
.ws-mark{ fill:var(--ink); }
.warn-h{ font-size:1.5rem; margin:0 0 .55rem; }
.warn-p{ margin:0; color:var(--ink-2); font-size:1.04rem; line-height:1.66; max-width:86ch; }

/* --- Latest: the engine's own band, restyled ---------------------------- */

.latest .section{ padding:0; }
.latest .section-head{ margin-bottom:clamp(26px,3vw,40px); }
/* The engine prints only the heading; the band gets the same blue label as the
   others (square drawn as a background so no extra element is needed). */
.latest .section-head::before{
  content:"Aktuell"; display:block; margin:0 0 .75rem; padding-left:1.25rem;
  background:linear-gradient(var(--blue),var(--blue)) no-repeat left center / 10px 10px;
  color:var(--blue); font-family:var(--font-label); font-weight:600; font-size:.78rem;
  letter-spacing:.07em; text-transform:uppercase; line-height:1.3;
}
.latest .section-head h2{ font-size:clamp(1.8rem,3.1vw,2.55rem); line-height:1.14; }

/* ==========================================================================
   CARDS — post grid, pillar grid, generic cards
   ========================================================================== */

.post-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:clamp(18px,2vw,28px);
}
.post-card{
  display:flex; flex-direction:column; min-width:0;
  background:var(--white); border:1px solid var(--rule); border-top:3px solid var(--ink);
  transition:border-top-color var(--t) var(--ease);
}
.post-card:hover{ border-top-color:var(--blue); }
/* The archive has no photography: these images are generated cards that
   re-print the headline. Hidden, never fetched (display:none on the link). */
.post-card-media{ display:none; }
.post-card-body{ padding:1.2rem 1.3rem 1.3rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.post-cat{ color:var(--blue); }
.post-card-title{ font-size:1.16rem; line-height:1.3; margin:0; }
.post-card-title a{ color:var(--ink); }
.post-card-title a:hover{ color:var(--blue); }
.post-card-excerpt{ margin:0; font-size:.97rem; line-height:1.52; color:var(--ink-3); }
.post-card-meta{ margin-top:auto; padding-top:.7rem; color:var(--ink-3); font-size:.72rem; }

.card-grid, .pillar-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:clamp(18px,2vw,28px);
}
.card, .pillar-card{
  display:block; padding:1.3rem 1.35rem 1.4rem;
  background:var(--white); border:1px solid var(--rule); border-top:3px solid var(--ink);
  color:var(--ink); transition:border-top-color var(--t) var(--ease);
}
.card:hover, .pillar-card:hover{ border-top-color:var(--blue); color:var(--ink); }
.card-tag, .pc-tag{ display:block; color:var(--blue); margin-bottom:.6rem; }
.card h3, .pillar-card h3{ font-size:1.14rem; line-height:1.3; margin:0; }
.pc-arrow{ display:inline-block; margin-top:.8rem; color:var(--ink-4); }
.card:hover .pc-arrow, .pillar-card:hover .pc-arrow{ color:var(--blue); }
.blk-more{ margin-top:1.8rem; }

/* ==========================================================================
   BUTTONS · CHIPS · PAGINATION
   ========================================================================== */

.btn{
  display:inline-flex; align-items:center; gap:.5rem; padding:.8rem 1.25rem;
  font-family:var(--font-label); font-size:.9rem; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase;
  border:1.5px solid transparent; border-radius:var(--radius); cursor:pointer;
  transition:background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.btn--accent{ background:var(--blue); color:#fff; }
.btn--accent:hover{ background:var(--blue-deep); color:#fff; }
.btn--ghost{ background:transparent; border-color:var(--ink); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--blue); color:var(--blue); }
.btn-row{ display:flex; flex-wrap:wrap; gap:.7rem; }

.chip-row{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.chip{
  display:inline-block; padding:.45rem .75rem;
  border:1px solid var(--rule); background:var(--white); color:var(--ink-2);
  transition:border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.chip:hover{ color:var(--blue); border-color:var(--blue); }

.pagination{
  display:flex; align-items:center; justify-content:center; gap:1rem;
  margin-top:3rem; padding-top:1.6rem; border-top:1px solid var(--rule); color:var(--ink-3);
}
.pagination a{ padding:.65rem 1.05rem; border:1.5px solid var(--ink); color:var(--ink); }
.pagination a:hover{ border-color:var(--blue); color:var(--blue); }
.pagination span{ font-variant-numeric:tabular-nums; }

/* ==========================================================================
   GENERIC PAGE SHELL — list, search, topic, legal, about/contact, 404
   ========================================================================== */

.page-shell{ padding:clamp(28px,4vw,52px) 0 clamp(60px,7vw,100px); }

.breadcrumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .5rem;
  margin-bottom:1.6rem; color:var(--ink-3); font-size:.74rem;
}
.breadcrumb a{ color:var(--ink-3); }
.breadcrumb a:hover{ color:var(--blue); }
.breadcrumb [aria-hidden="true"]{ color:var(--ink-4); }
.breadcrumb [aria-current="page"], .breadcrumb > span:last-child{
  color:var(--ink-4); max-width:46ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Page titles. Topic names arrive in lower case from the archive; the first
   letter is capitalised here until the names themselves are corrected. */
.page-shell h1.display{ font-size:clamp(2rem,4vw,3rem); line-height:1.1; margin:0; text-wrap:balance; }
.page-shell h1.display::first-letter{ text-transform:uppercase; }
.page-shell .section{ padding:clamp(32px,4vw,52px) 0 0; }
.page-shell .section-head h2{ font-size:clamp(1.4rem,2.4vw,1.8rem); }

.results-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin-bottom:1.6rem; padding-bottom:1.1rem; border-bottom:2px solid var(--ink);
}
.results-head h1{ font-size:clamp(1.7rem,3.4vw,2.4rem); margin:0; }
.results-count{ color:var(--ink-3); }
.results-list{ display:flex; flex-direction:column; }
.result{ display:block; padding:1.3rem 0; border-bottom:1px solid var(--rule); color:var(--ink); }
.result h2{ font-size:1.25rem; line-height:1.3; margin:0; color:var(--ink); }
.result:hover h2{ color:var(--blue); }
.result p{ margin:.45rem 0 0; font-size:.98rem; line-height:1.55; color:var(--ink-3); max-width:76ch; }
.result-meta{ display:flex; gap:.9rem; margin-top:.6rem; color:var(--ink-4); font-size:.72rem; }

.topic-index{ margin-top:2.6rem; }
.topic-index-head{ margin-bottom:1.1rem; padding-bottom:.8rem; border-bottom:2px solid var(--ink); }
.topic-index-list{ list-style:none; margin:0; padding:0; columns:2 320px; column-gap:2.5rem; }
.topic-index-list li, .topic-index-list a{ break-inside:avoid; }
.topic-index-list a{ display:block; padding:.7rem 0; border-bottom:1px solid var(--rule-2); color:var(--ink-2); font-size:1rem; }
.topic-index-list a:hover{ color:var(--blue); }

/* ==========================================================================
   ARTICLE — a manual page
   ========================================================================== */

.article{ padding-bottom:1rem; }
.article-hero{
  margin-bottom:clamp(26px,4vw,44px); padding-bottom:clamp(20px,3vw,30px);
  border-bottom:2px solid var(--ink);
}
.article-hero-grid{ display:block; }
.article-hero-copy h1{
  font-size:clamp(2rem,4vw,3.1rem); line-height:1.1; letter-spacing:-.014em;
  margin:.2rem 0 0; max-width:24ch; text-wrap:balance;
}
.post-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
  margin-top:1.1rem; font-size:.98rem; color:var(--ink-3);
}
.post-meta [aria-hidden="true"]{ color:var(--ink-4); }
.post-meta time{ font-variant-numeric:tabular-nums; }
.post-meta strong{ color:var(--ink); font-weight:600; }
.article-lead{ margin:1.2rem 0 0; font-size:1.2rem; line-height:1.58; color:var(--ink-2); max-width:60ch; }

/* The generated hero card re-prints the title; hidden, never fetched. The
   <img> stays in the DOM, so og:image and the schema ImageObject are intact. */
.article-hero-media{ display:none; }

.article-shell{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(28px,4vw,64px); align-items:start; }
.article-shell:has(.toc){ grid-template-columns:236px minmax(0,1fr); }
.article-shell:not(:has(.toc)){ justify-items:center; }
.article-main{ min-width:0; max-width:var(--read); width:100%; overflow-wrap:break-word; contain:inline-size; }

/* --- Inhalt (TOC) ------------------------------------------------------- */

.toc{ position:sticky; top:108px; }
.toc-h{ margin:0 0 .4rem; padding-bottom:.6rem; color:var(--ink); border-bottom:2px solid var(--ink); }
.toc ol{ list-style:none; margin:0; padding:0; counter-reset:toc; }
.toc li{ counter-increment:toc; border-bottom:1px solid var(--rule-2); }
.toc a{
  display:grid; grid-template-columns:1.7rem minmax(0,1fr); gap:.3rem;
  padding:.62rem 0; font-size:.95rem; line-height:1.4; color:var(--ink-2);
}
.toc a::before{
  content:counter(toc); font-family:var(--font-label); font-weight:700;
  color:var(--blue); font-variant-numeric:tabular-nums;
}
.toc a:hover{ color:var(--blue); }
.article-rail{ min-width:0; }

/* --- Body: numbered like a manual (1, 1.1, 1.2) ------------------------- */

.article-body{ counter-reset:sec; font-size:1rem; line-height:var(--base-lh); color:var(--ink-2); }
.article-body > *:first-child{ margin-top:0; }
.article-body p{ margin:0 0 1.15rem; }
.article-body h2{
  counter-increment:sec; counter-reset:sub;
  display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:.75rem;
  margin:2.7rem 0 1rem; padding-top:1.25rem; border-top:1px solid var(--rule);
  font-size:clamp(1.45rem,2.4vw,1.85rem); line-height:1.2; letter-spacing:-.012em;
}
.article-body h2::before{
  content:counter(sec); font-family:var(--font-label); font-weight:700;
  font-size:.82em; line-height:1.45; color:var(--blue); font-variant-numeric:tabular-nums;
}
.article-body > h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.article-body h3{ counter-increment:sub; margin:2rem 0 .6rem; font-size:1.24rem; line-height:1.3; }
.article-body h2 ~ h3::before{
  content:counter(sec) "." counter(sub) "\2002";
  font-family:var(--font-label); font-weight:700; font-size:.86em; color:var(--blue);
}
.article-body h4{ margin:1.5rem 0 .45rem; font-family:var(--font-body); font-weight:700; font-size:1.05rem; }
.article-body a{
  color:var(--blue); text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:3px; text-decoration-color:color-mix(in srgb, var(--blue) 40%, transparent);
}
.article-body a:hover{ color:var(--blue-deep); text-decoration-color:currentColor; }
.article-body strong{ color:var(--ink); font-weight:650; }

/* Legal and institutional pages (the engine marks them .solo) number their
   own headings in the text — the manual numbering stays on guides only. */
.article-shell.solo .article-body h2{ display:block; }
.article-shell.solo .article-body h2::before,
.article-shell.solo .article-body h2 ~ h3::before{ content:none; }

/* German list conventions: en dashes for bullets, numbered steps in the
   DIN voice. */
.article-body ul, .article-body ol{ list-style:none; margin:0 0 1.35rem; padding:0; }
.article-body ul > li{ position:relative; padding-left:1.4rem; margin-bottom:.5rem; }
.article-body ul > li::before{ content:"–"; position:absolute; left:0; top:0; color:var(--blue); font-weight:700; }
.article-body ol{ counter-reset:step; }
.article-body ol > li{ counter-increment:step; position:relative; padding-left:2.2rem; margin-bottom:.6rem; }
.article-body ol > li::before{
  content:counter(step) "."; position:absolute; left:0; top:0;
  font-family:var(--font-label); font-weight:700; color:var(--blue); font-variant-numeric:tabular-nums;
}

/* Praxistipp */
.article-body .pro-tip{
  margin:1.7rem 0; padding:1rem 1.2rem 1.05rem;
  background:var(--blue-tint); border-left:4px solid var(--blue); color:var(--ink);
}
.article-body .pro-tip::before{ content:"Praxistipp"; display:block; margin-bottom:.35rem; color:var(--blue); }

/* "Siehe auch" — the cross-reference of a manual. The engine prints "→ " as
   a text node before the link; font-size:0 retires it without touching DOM. */
.article-body .related-inline-link{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem .8rem;
  margin:1.5rem 0; padding:.8rem 1rem; font-size:0;
  background:var(--paper); border:1px solid var(--rule);
}
.article-body .related-inline-link::before{ content:"Siehe auch"; font-size:.74rem; color:var(--ink-3); }
.article-body .related-inline-link a{ font-size:1rem; font-weight:600; text-decoration:none; }
.article-body .related-inline-link a:hover{ text-decoration:underline; }

.article-body blockquote{
  margin:1.8rem 0; padding:.2rem 0 .2rem 1.3rem;
  border-left:3px solid var(--blue); color:var(--ink);
  font-family:var(--font-display); font-size:1.18rem; line-height:1.5;
}
.article-body blockquote p:last-child{ margin-bottom:0; }
.article-body img{ border:1px solid var(--rule); }
.article-body hr{ border:0; border-top:1px solid var(--rule); margin:2.4rem 0; }
.article-body code{
  font-family:var(--font-mono); font-size:.86em; padding:.12em .38em;
  background:var(--paper); border:1px solid var(--rule); color:var(--ink);
}
.article-body pre{ margin:1.5rem 0; padding:1rem 1.2rem; overflow-x:auto; background:var(--paper); border:1px solid var(--rule); }
.article-body pre code{ padding:0; border:0; background:transparent; }

/* Tables — "Technische Daten": anthracite head, hairline rows. */
.table-wrap{ margin:1.8rem 0; overflow-x:auto; border:1px solid var(--rule); }
.article-body table{ width:100%; border-collapse:collapse; font-size:.96rem; font-variant-numeric:tabular-nums; }
.article-body th, .article-body td{ padding:.72rem .95rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--rule-2); }
.article-body thead th{ background:var(--anthracite); color:#fff; font-size:.74rem; white-space:nowrap; }
.article-body tbody tr:nth-child(even) td{ background:color-mix(in srgb, var(--paper) 55%, #fff); }
.article-body tbody tr:last-child td{ border-bottom:0; }

/* --- Inline CTA, FAQ, further reading ----------------------------------- */

.inline-cta{
  display:flex; align-items:center; justify-content:space-between; gap:1.2rem; flex-wrap:wrap;
  margin:2.2rem 0; padding:1.3rem 1.4rem;
  background:var(--paper); border:1px solid var(--rule); border-left:4px solid var(--blue);
}
.inline-cta-body{ display:flex; flex-direction:column; gap:.3rem; min-width:0; }
.inline-cta-body strong{ font-family:var(--font-display); font-size:1.08rem; color:var(--ink); }
.inline-cta-body span{ font-size:.96rem; color:var(--ink-3); }

.faq{ margin-top:3rem; padding-top:1.3rem; border-top:2px solid var(--ink); }
.faq h2{ font-size:1.65rem; margin:0 0 .8rem; }
.faq-item{ border-bottom:1px solid var(--rule); }
.faq-item summary{
  list-style:none; cursor:pointer; position:relative;
  padding:1rem 2.6rem 1rem 0; font-weight:600; font-size:1.06rem; line-height:1.42; color:var(--ink);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; position:absolute; right:.25rem; top:.62rem;
  font-family:var(--font-label); font-weight:600; font-size:1.55rem; line-height:1; color:var(--blue);
}
.faq-item[open] summary::after{ content:"–"; }
.faq-item summary:hover{ color:var(--blue); }
.faq-a{ padding:0 0 1.1rem; }
.faq-a p{ margin:0 0 .8rem; font-size:1rem; line-height:1.68; color:var(--ink-2); }
.faq-a p:last-child{ margin-bottom:0; }

.post-links{ margin-top:3rem; padding-top:1.3rem; border-top:1px solid var(--rule); }
.post-links h2{ margin:0 0 1rem; color:var(--ink); }
.pillar-link{
  display:flex; align-items:center; gap:1rem; padding:1.1rem 1.25rem;
  background:var(--white); border:1px solid var(--rule); border-left:4px solid var(--blue); color:var(--ink);
  transition:background var(--t) var(--ease);
}
.pillar-link:hover{ background:var(--blue-tint); color:var(--ink); }
.pl-eyebrow{ display:block; margin-bottom:.25rem; color:var(--blue); }
.pl-title{ display:block; font-family:var(--font-display); font-weight:600; font-size:1.14rem; line-height:1.3; }
.pl-arrow{ margin-left:auto; color:var(--blue); font-size:1.2rem; transition:transform var(--t) var(--ease); }
.pillar-link:hover .pl-arrow{ transform:translateX(4px); }

/* ==========================================================================
   BLOCKS — the Pages studio's own components
   ========================================================================== */

.blk{ padding:clamp(44px,6vw,80px) 0; }
.blk-space{ padding:0; }
.section{ padding:clamp(44px,6vw,80px) 0; }
.section-head{ margin-bottom:1.8rem; }
.section-cap{ color:var(--ink-3); }

.blk-hero .hero, .hero{ padding:clamp(40px,6vw,88px) 0; }
.hero-inner{ display:grid; gap:clamp(24px,3vw,48px); align-items:center; }
.hero h1{ font-size:clamp(2.1rem,5vw,3.6rem); line-height:1.08; text-wrap:balance; }
.hero .lead{ margin-top:1.1rem; color:var(--ink-3); }
.hero-media img{ border:1px solid var(--rule); }

.blk-prose, .blk-text{ font-size:1.02rem; line-height:1.72; color:var(--ink-2); }
.blk-prose h2, .blk-text h2{ font-size:1.7rem; margin:2rem 0 .9rem; }

.feat{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(26px,3.4vw,56px); align-items:center; }
.feat-copy h2{ font-size:clamp(1.5rem,3vw,2.1rem); margin-bottom:.9rem; }
.feat-media img{ border:1px solid var(--rule); }
.blk-feat-title{ margin-bottom:.9rem; }

.cols{ display:grid; gap:clamp(20px,2.4vw,36px); }
.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.col{ padding:1.4rem 1.45rem; background:var(--white); border:1px solid var(--rule); border-top:3px solid var(--ink); min-width:0; }
.col h3{ font-size:1.12rem; margin-bottom:.5rem; }
.col p{ margin:0; font-size:.97rem; line-height:1.6; color:var(--ink-3); }

.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); border-top:2px solid var(--ink); }
.stat{ padding:1.4rem 1.4rem 1.4rem 0; border-right:1px solid var(--rule); }
.stat:last-child{ border-right:0; }
.stat .n{
  display:block; font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.8rem,3.4vw,2.5rem); line-height:1; font-variant-numeric:tabular-nums; color:var(--ink);
}
.stat .l{ display:block; margin-top:.5rem; color:var(--ink-3); }
.sec-stat-band{ border-top:0; }

.blk-quote blockquote, .sec-quote blockquote{
  margin:0; padding:0 0 0 1.4rem; border-left:3px solid var(--blue);
  font-family:var(--font-display); font-size:clamp(1.25rem,2.4vw,1.7rem);
  font-weight:500; line-height:1.4; color:var(--ink); max-width:36ch;
}
.cite{ display:block; margin-top:.9rem; font-size:.9rem; color:var(--ink-3); }

.cta, .cta-band, .sec-cta-band{
  padding:clamp(32px,4.4vw,60px) clamp(24px,4vw,54px);
  background:var(--paper); border:1px solid var(--rule); border-top:4px solid var(--blue); text-align:center;
}
.cta h2, .cta-band h2{ font-size:clamp(1.5rem,3vw,2.1rem); margin-bottom:.8rem; }
.cta p, .cta-band p{ color:var(--ink-3); max-width:56ch; margin-inline:auto; }
.cta .btn-row, .cta-band .btn-row{ justify-content:center; margin-top:1.5rem; }

.blk-divider hr, hr{ border:0; border-top:1px solid var(--rule); margin:0; }
.blk-figure figcaption{ margin-top:.7rem; font-size:.9rem; color:var(--ink-3); }
.blk-notfound .lead{ margin-inline:auto; }

/* ==========================================================================
   FOOTER — the colophon, in anthracite
   ========================================================================== */

.site-footer{
  background:var(--anthracite); color:var(--foot-ink);
  padding:clamp(52px,6vw,84px) 0 clamp(28px,3vw,40px);
  border-top:4px solid var(--blue);
}
.foot-top{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);
  gap:clamp(32px,4vw,76px); padding-bottom:clamp(8px,1vw,16px);
}
.foot-brand-col{ min-width:0; }
.foot-brand{ display:inline-flex; align-items:center; gap:.85rem; color:#fff; }
.foot-brand:hover{ color:#fff; }
.foot-brand .lk-name{ color:#fff; font-size:1.4rem; }
.foot-brand .lk-desc{ color:var(--foot-mute); }
.foot-tag{ margin:1.2rem 0 0; font-family:var(--font-display); font-size:1.1rem; line-height:1.45; color:#EEF0F2; }
.foot-about{ margin:.8rem 0 0; font-size:.97rem; line-height:1.62; color:var(--foot-mute); max-width:46ch; }

.foot-cols{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(20px,2.4vw,40px); min-width:0; }
.foot-col{ min-width:0; }
.foot-h{ margin:0 0 .9rem; padding-bottom:.6rem; color:#fff; border-bottom:1px solid var(--foot-rule); font-size:.76rem; }
.foot-col ul, .foot-col ol{ list-style:none; margin:0; padding:0; }
.foot-col-2up{ columns:2; column-gap:1rem; }
.foot-col li{ break-inside:avoid; }
.foot-col li a{ display:block; padding:.3rem 0; font-size:.97rem; line-height:1.45; color:var(--foot-ink); }
.foot-col li a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.foot-chapters span{ font-family:var(--font-label); font-weight:700; color:#8DB6DB; font-variant-numeric:tabular-nums; margin-right:.25rem; }

.foot-disclosure{
  margin:clamp(22px,2.4vw,32px) 0 0; padding:1rem 1.2rem;
  border:1px solid var(--foot-rule); font-size:.9rem; line-height:1.6; color:var(--foot-ink); max-width:100ch;
}
.foot-disclosure a{ color:#fff; text-decoration:underline; text-underline-offset:3px; }

.foot-base{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin-top:clamp(22px,2.4vw,32px); padding-top:1.2rem; border-top:1px solid var(--foot-rule);
}
.foot-copy{ margin:0; font-size:.92rem; color:var(--foot-mute); font-variant-numeric:tabular-nums; }
.foot-top-link{ color:var(--foot-ink); }
.foot-top-link:hover{ color:#fff; }
.foot-note{ margin:1.1rem 0 0; font-size:.85rem; line-height:1.6; color:#8E969C; max-width:104ch; }

/* ==========================================================================
   MOTION
   ========================================================================== */

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

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width:1180px){
  .tp-grid{ grid-template-columns:minmax(0,1fr); }
  .plate{ max-width:680px; }
  .foot-top{ grid-template-columns:minmax(0,1fr); }
  .pr-list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pr-list li{ padding-left:1.6rem; border-bottom:1px solid var(--rule); }
  .pr-list li:nth-child(2n+1){ padding-left:0; }
  .pr-list li:nth-child(2n){ border-right:0; }
}

@media (max-width:1040px){
  .diag-grid{ grid-template-columns:minmax(0,1fr); gap:1.6rem; }
  .gd-grid{ grid-template-columns:minmax(0,1fr); }
  .gd-side{ border-left:0; padding-left:0; border-top:1px solid var(--rule); padding-top:1.5rem; }
}

/* The article collapses to one column; both shell selectors are restated
   because `.article-shell:has(.toc)` outranks a bare class. */
@media (max-width:1000px){
  .article-shell, .article-shell:has(.toc){ grid-template-columns:minmax(0,1fr); }
  .article-shell:not(:has(.toc)){ justify-items:stretch; }
  .article-main{ max-width:none; }
  .toc{ position:static; order:-1; margin-bottom:1.2rem; }
  .toc ol{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); column-gap:1.6rem; }
  .article-rail{ order:-2; }
  .reg-cols{ columns:3 150px; }
  .foot-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:920px){
  .nav{ min-height:68px; }
  .nav-toggle{ display:inline-flex; }
  .nav-search input{ display:none; }
  .nav-search{ background:var(--white); }
  .nav-links{
    position:absolute; left:0; right:0; top:100%;
    display:none; flex-direction:column; align-items:stretch; gap:0; margin:0;
    padding:.4rem clamp(18px,4vw,48px) 1.1rem;
    background:var(--white); border-bottom:1px solid var(--rule);
  }
  .site-header.is-open .nav-links{ display:flex; }
  .nav-link{ padding:.9rem 0; border-bottom:1px solid var(--rule-2); font-size:1.05rem; }
  .nav-link::after{ display:none; }
  .feat, .cols-3, .cols-4, .cols-2{ grid-template-columns:minmax(0,1fr); }
}

@media (max-width:760px){
  .toc-list, .symptoms{ grid-template-columns:minmax(0,1fr); }
  .band-head-row{ grid-template-columns:minmax(0,1fr); }
  .band-more{ padding:.8rem 0 0; }
  .results-head{ flex-direction:column; gap:.4rem; }
  .stats{ grid-template-columns:minmax(0,1fr); }
  .stat{ padding:1.1rem 0; border-right:0; border-bottom:1px solid var(--rule); }
  .warn{ grid-template-columns:minmax(0,1fr); }
  .warn-sign{ width:52px; height:46px; }

  /* Stacked table rows; the engine stamps data-label on each cell. */
  .article-body table, .article-body thead, .article-body tbody,
  .article-body tr, .article-body td{ display:block; width:100%; }
  .article-body thead{ display:none; }
  .article-body tr{ border-bottom:1px solid var(--rule); padding:.4rem 0; }
  .article-body tr:last-child{ border-bottom:0; }
  .article-body tbody tr:nth-child(even) td{ background:transparent; }
  .article-body td{ border-bottom:0; padding:.4rem .95rem; }
  .article-body td[data-label]::before{
    content:attr(data-label); display:block; margin-bottom:.15rem;
    font-family:var(--font-label); font-weight:600; font-size:.7rem;
    letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3);
  }
}

@media (max-width:600px){
  .lk-desc{ display:none; }
  .lk-name{ font-size:1.1rem; }
  .sign{ width:38px; height:38px; }
  .pr-list{ grid-template-columns:minmax(0,1fr); }
  .pr-list li, .pr-list li:nth-child(2n+1){ padding:1.3rem 0; border-right:0; }
  .finder-row{ flex-wrap:wrap; }
  .finder-input{ flex:1 1 100%; }
  .finder-go{ flex:1 1 100%; justify-content:center; padding:.9rem 1rem; }
  .tp-facts span{ padding-right:.9rem; margin-right:.9rem; }
  .post-grid, .card-grid, .pillar-grid{ grid-template-columns:minmax(0,1fr); }
  .reg-cols{ columns:2 130px; }
  .foot-cols{ grid-template-columns:minmax(0,1fr); gap:1.8rem; }
  .inline-cta{ flex-direction:column; align-items:stretch; }
  .topic-index-list{ columns:1; }
}