/* AI Atlas — design system «Pro» (default since 2026-08-21; see ~/docs/design/ai.ch.md).
   Swiss-institutional: ink slate / cartographic paper, ONE accent (Swiss red —
   brand mark + CTA only), inverted solid controls instead of gradients, hairlines,
   small-caps metadata voice. Dark-first, automatic light mode, manual toggle.
   Self-contained (Inter self-hosted). Tokens first; components below.
   Class names are unchanged from the first design system so every page/renderer
   keeps working — only the look changed. */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/InterVariable-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- palette, dark default ---- */
  --bg: #0f1419;           /* ink slate — graphite, not purple-black */
  --bg-soft: #151b22;
  --card: #161c23;
  --card-edge: #2a343f;
  --edge-soft: #222b34;
  --text: #eceff1;
  --text-dim: #9aa6b2;
  --text-faint: #77838f;
  --mark: #e3242b;         /* Swiss red: brand square, CTA, the active nav underline */
  --accent: #6f8fae;       /* steel — quiet emphasis (borders, tier fills, default dots) */
  --accent-2: #8cbbe0;     /* glacier — links, badges, highlights */
  --accent-3: #b08ad6;     /* slate violet — rarely, as data colour */
  --ok: #5ccb8e;
  --warn: #e9b44c;
  /* the first system used gradients; keep the tokens valid but flat */
  --grad: linear-gradient(0deg, var(--mark), var(--mark));
  --grad-text: linear-gradient(0deg, var(--text), var(--text));
  --shadow: 0 14px 40px rgba(0, 0, 0, .35);
  --radius: 10px;
  --radius-s: 6px;
  --maxw: 72rem;
  color-scheme: dark;
}
/* Light tokens exist twice: (a) OS preference in auto mode, (b) explicit
   user choice via data-theme. The two blocks MUST stay identical — edit both. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f4f5f2;         /* cartographic paper, cool grey-green bias */
    --bg-soft: #ebeee9;
    --card: #ffffff;
    --card-edge: #d3d9d8;
    --edge-soft: #e2e6e4;
    --text: #12181e;
    --text-dim: #55616c;
    --text-faint: #66717b;
    --mark: #d8232a;
    --accent: #3f5d7a;
    --accent-2: #2c5f8a;
    --accent-3: #7a5fa8;
    --shadow: 0 14px 40px rgba(18, 24, 30, .10);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #f4f5f2;
  --bg-soft: #ebeee9;
  --card: #ffffff;
  --card-edge: #d3d9d8;
  --edge-soft: #e2e6e4;
  --text: #12181e;
  --text-dim: #55616c;
  --text-faint: #66717b;
  --mark: #d8232a;
  --accent: #3f5d7a;
  --accent-2: #2c5f8a;
  --accent-3: #7a5fa8;
  --shadow: 0 14px 40px rgba(18, 24, 30, .10);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}
img, svg { max-width: 100%; }
a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .15em; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; font-weight: 600; letter-spacing: -.02em; }
p { margin: 0 0 1em; }
code { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: .92em; background: var(--bg-soft); padding: .1em .35em; border-radius: 4px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; }

/* small uppercase label — the metadata voice of the language */
.label, .eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-dim);
}
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; letter-spacing: 0; }

/* skip link (keyboard users) */
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .55rem .9rem; background: var(--mark); color: #fff; font-weight: 700; border-radius: var(--radius-s); text-decoration: none; }
.skip:focus-visible { top: .6rem; outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--edge-soft);
}
.site-head__row { display: flex; align-items: center; gap: 1rem; min-height: 3.6rem; }
.brand { display: inline-flex; align-items: center; gap: .65rem; font-weight: 600; font-size: 1.02rem; letter-spacing: -.01em; color: var(--text); text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand::before { content: ''; width: 18px; height: 18px; flex: none; background: url('/img/mark.svg?v=4') center / 18px 18px no-repeat; image-rendering: pixelated; image-rendering: crisp-edges; } /* the «Ai» mark — 18 px = grid 1:1, never another size */
.brand__logo { display: none; } /* the old node mark — the red square is the brand mark now */
.brand em { font-style: normal; font-weight: 600; color: var(--text); }
.site-nav { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .2rem; }
.site-nav a {
  color: var(--text-dim); font-weight: 600; font-size: .92rem;
  padding: .5rem .7rem; border-radius: 0;
}
.site-nav a:hover { color: var(--text); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--mark); }

/* theme toggle (auto → light → dark) — compact, icon-only */
.theme-toggle {
  flex: none; width: 2rem; height: 2rem; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--card-edge); border-radius: 50%;
  background: transparent; color: var(--text-dim); cursor: pointer;
}
.theme-toggle:hover { color: var(--text); border-color: var(--text-dim); }
.theme-toggle svg { display: none; }
.theme-toggle[data-mode="light"] .tt-sun,
.theme-toggle[data-mode="dark"] .tt-moon { display: block; }

/* language switcher (EN·DE·FR·IT) — injected by tools/build-i18n.js */
.lang-nav { flex: none; display: flex; align-items: center; gap: .1rem; font-size: .72rem; font-weight: 600; letter-spacing: .08em; }
.lang-nav a, .lang-nav .lang-nav__on { padding: .28rem .42rem; border-radius: 0; color: var(--text-faint); text-decoration: none; }
.lang-nav a:hover { color: var(--text); text-decoration: none; }
.lang-nav .lang-nav__on { color: var(--text); font-weight: 800; } /* active language: bold only, no underline (Sandro 2026-08-22) */

/* i18n: «dataset content still in English» note under the hero (DE/FR/IT pages) */
.i18n-note { margin: -.4rem 0 1.3rem; font-size: .82rem; color: var(--text-dim); font-style: italic; opacity: .9; }

/* ---------- hero (start page: full-bleed photo, Pro treatment) ---------- */
.hero {
  position: relative; overflow: hidden; text-align: left;
  /* ONE height for every hero on the site — start page and nav pages alike (Sandro 2026-08-22):
     fixed 33rem (the French start page title wraps to three lines), content vertically centred, meta line pinned at the bottom */
  min-height: 33rem; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center;
  padding: 2.4rem 0 3.4rem;
  background: #0f1419 url('../img/hero/matterhorn-night-1920.jpg') center 80% / cover no-repeat;
  background-image: image-set(
    url('../img/hero/matterhorn-night-1280.webp') type('image/webp'),
    url('../img/hero/matterhorn-night-1920.jpg') type('image/jpeg'));
  border-bottom: 1px solid var(--edge-soft);
}
@media (min-width: 1400px) {
  .hero { background-image: image-set(
    url('../img/hero/matterhorn-night-1920.webp') type('image/webp'),
    url('../img/hero/matterhorn-night-1920.jpg') type('image/jpeg')); }
}
@media (max-width: 640px) {
  .hero { background-image: image-set(
    url('../img/hero/matterhorn-night-640.webp') type('image/webp'),
    url('../img/hero/matterhorn-night-1920.jpg') type('image/jpeg')); }
}
/* ---- page heroes: same photo hero as the start page, one photo per nav page (2026-08-22) ---- */
/* .hero--page inherits the fixed 33rem hero height; only the type scale differs */
.hero--page h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); max-width: 18ch; }
.hero--page .lead { max-width: 60ch; margin-top: 1rem; font-size: clamp(1rem, 1.25vw, 1.1rem); }
.hero--swiss { background: #0f1419 url('../img/hero/swiss-1920.jpg') center 62% / cover no-repeat;
  background-image: image-set(url('../img/hero/swiss-1280.webp') type('image/webp'), url('../img/hero/swiss-1920.jpg') type('image/jpeg')); }
@media (min-width: 1400px) { .hero--swiss { background-image: image-set(url('../img/hero/swiss-1920.webp') type('image/webp'), url('../img/hero/swiss-1920.jpg') type('image/jpeg')); } }
@media (max-width: 640px) { .hero--swiss { background-image: image-set(url('../img/hero/swiss-640.webp') type('image/webp'), url('../img/hero/swiss-1920.jpg') type('image/jpeg')); } }
.hero--resources { background: #0f1419 url('../img/hero/resources-1920.jpg') center 50% / cover no-repeat;
  background-image: image-set(url('../img/hero/resources-1280.webp') type('image/webp'), url('../img/hero/resources-1920.jpg') type('image/jpeg')); }
@media (min-width: 1400px) { .hero--resources { background-image: image-set(url('../img/hero/resources-1920.webp') type('image/webp'), url('../img/hero/resources-1920.jpg') type('image/jpeg')); } }
@media (max-width: 640px) { .hero--resources { background-image: image-set(url('../img/hero/resources-640.webp') type('image/webp'), url('../img/hero/resources-1920.jpg') type('image/jpeg')); } }
.hero--learning { background: #0f1419 url('../img/hero/learning-1920.jpg') center 55% / cover no-repeat;
  background-image: image-set(url('../img/hero/learning-1280.webp') type('image/webp'), url('../img/hero/learning-1920.jpg') type('image/jpeg')); }
@media (min-width: 1400px) { .hero--learning { background-image: image-set(url('../img/hero/learning-1920.webp') type('image/webp'), url('../img/hero/learning-1920.jpg') type('image/jpeg')); } }
@media (max-width: 640px) { .hero--learning { background-image: image-set(url('../img/hero/learning-640.webp') type('image/webp'), url('../img/hero/learning-1920.jpg') type('image/jpeg')); } }
.hero--education { background: #0f1419 url('../img/hero/education-1920.jpg') center 55% / cover no-repeat;
  background-image: image-set(url('../img/hero/education-1280.webp') type('image/webp'), url('../img/hero/education-1920.jpg') type('image/jpeg')); }
@media (min-width: 1400px) { .hero--education { background-image: image-set(url('../img/hero/education-1920.webp') type('image/webp'), url('../img/hero/education-1920.jpg') type('image/jpeg')); } }
@media (max-width: 640px) { .hero--education { background-image: image-set(url('../img/hero/education-640.webp') type('image/webp'), url('../img/hero/education-1920.jpg') type('image/jpeg')); } }
.hero--timeline { background: #0f1419 url('../img/hero/timeline-1920.jpg') center 50% / cover no-repeat;
  background-image: image-set(url('../img/hero/timeline-1280.webp') type('image/webp'), url('../img/hero/timeline-1920.jpg') type('image/jpeg')); }
@media (min-width: 1400px) { .hero--timeline { background-image: image-set(url('../img/hero/timeline-1920.webp') type('image/webp'), url('../img/hero/timeline-1920.jpg') type('image/jpeg')); } }
@media (max-width: 640px) { .hero--timeline { background-image: image-set(url('../img/hero/timeline-640.webp') type('image/webp'), url('../img/hero/timeline-1920.jpg') type('image/jpeg')); } }
.hero--glossary { background: #0f1419 url('../img/hero/glossary-1920.jpg') center 45% / cover no-repeat;
  background-image: image-set(url('../img/hero/glossary-1280.webp') type('image/webp'), url('../img/hero/glossary-1920.jpg') type('image/jpeg')); }
@media (min-width: 1400px) { .hero--glossary { background-image: image-set(url('../img/hero/glossary-1920.webp') type('image/webp'), url('../img/hero/glossary-1920.jpg') type('image/jpeg')); } }
@media (max-width: 640px) { .hero--glossary { background-image: image-set(url('../img/hero/glossary-640.webp') type('image/webp'), url('../img/hero/glossary-1920.jpg') type('image/jpeg')); } }
.hero--events { background: #0f1419 url('../img/hero/events-1920.jpg') center 8% / cover no-repeat; /* keeps the hiker on the ridge (top right) in frame */
  background-image: image-set(url('../img/hero/events-1280.webp') type('image/webp'), url('../img/hero/events-1920.jpg') type('image/jpeg')); }
@media (min-width: 1400px) { .hero--events { background-image: image-set(url('../img/hero/events-1920.webp') type('image/webp'), url('../img/hero/events-1920.jpg') type('image/jpeg')); } }
@media (max-width: 640px) { .hero--events { background-image: image-set(url('../img/hero/events-640.webp') type('image/webp'), url('../img/hero/events-1920.jpg') type('image/jpeg')); } }
.hero::before { display: none; }
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(15, 20, 25, .66) 0%, rgba(15, 20, 25, .42) 45%, rgba(15, 20, 25, .12) 100%),
    linear-gradient(180deg, rgba(15, 20, 25, .18) 0%, rgba(15, 20, 25, 0) 35%, rgba(15, 20, 25, .55) 100%);
}
.hero > .wrap { position: relative; z-index: 2; width: 100%; } /* flex column + margin:auto would shrink-wrap the text block */
.hero h1 {
  font-size: clamp(2.5rem, 5.6vw, 4.3rem); font-weight: 650; letter-spacing: -.035em; line-height: 1.02;
  margin: 0 0 0; max-width: 12ch; text-wrap: balance;
  color: #fff; text-shadow: 0 2px 24px rgba(15, 20, 25, .55);
}
.hero h1 em { font-style: normal; color: #fff; }
.hero h1 .dot, .page-hero h1 .dot { color: var(--mark); }
.hero .lead {
  margin: 1.4rem 0 0; max-width: 40ch;
  font-size: clamp(1.02rem, 1.4vw, 1.2rem); line-height: 1.55;
  color: rgba(255, 255, 255, .84); text-shadow: 0 1px 12px rgba(15, 20, 25, .6);
}
.hero-ctas { display: flex; gap: 1.1rem; justify-content: flex-start; align-items: center; flex-wrap: wrap; margin: 1.9rem 0 0; }
.hero-ctas .btn--ghost { background: transparent; color: rgba(255, 255, 255, .85); border-color: rgba(255, 255, 255, .32); }
.hero-ctas .btn--ghost:hover { color: #fff; border-color: #fff; }
.hero__meta { position: absolute; left: 0; right: 0; bottom: .85rem; z-index: 2; }
.hero__meta-row { display: grid; justify-content: end; justify-items: start; gap: .3rem; } /* as on coming-soon: coordinates above the photo credit, both left-aligned in a right-placed column */
.hero__coord, .hero__credit { font-size: .68rem; letter-spacing: .06em; color: rgba(255, 255, 255, .6); text-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.hero__coord { text-transform: uppercase; }
.hero__coord b { color: rgba(255, 255, 255, .85); font-weight: 600; }
.hero__credit { margin-left: 0; }
.hero__credit:hover { color: #fff; text-decoration: underline; }

/* page hero (subpages) */
.page-hero { padding: 2.4rem 0 1.2rem; }
.page-hero h1 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); font-weight: 650; letter-spacing: -.03em; }
.page-hero p { color: var(--text-dim); max-width: 60ch; margin-bottom: 0; font-size: 1.02rem; }

/* ---------- cards ---------- */
.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(12.8rem, 1fr)); padding: 1rem 0 3rem; } /* 13.5rem → the five section cards share one row at 72rem */
.card {
  display: flex; flex-direction: column; gap: .4rem;
  background: var(--card); border: 1px solid var(--card-edge);
  border-radius: var(--radius); padding: 1.3rem 1.25rem 1.15rem;
  color: var(--text);
  transition: border-color .15s ease;
}
a.card:hover { border-color: var(--text-dim); text-decoration: none; }
.card__icon {
  width: 42px; height: 42px; border-radius: 8px; display: grid; place-items: center;
  background: var(--bg-soft); color: var(--text-dim); flex: none; border: 1px solid var(--edge-soft);
}
.card h3 { font-size: 1.15rem; margin: .5rem 0 .1rem; min-height: 2.6em; display: flex; align-items: flex-start; }
.card p { color: var(--text-dim); font-size: .95rem; margin: 0; }
.card__go { margin-top: auto; padding-top: .8rem; font-weight: 600; color: var(--accent-2); font-size: .92rem; }

/* stats row */
.stats { display: flex; flex-wrap: wrap; gap: .6rem 2.4rem; justify-content: flex-start; padding: 0 0 2.4rem; }
.stats div, .stats a { text-align: left; }
.stats b { display: block; font-size: 1.6rem; font-weight: 600; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.stats span { color: var(--text-dim); font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

/* buttons — the CTA is the one place the red becomes a surface */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--mark); color: #fff; font-weight: 600; font-size: .95rem; letter-spacing: -.005em;
  padding: .7rem 1.25rem; border-radius: var(--radius-s); border: 1px solid var(--mark); cursor: pointer;
  transition: transform .12s ease, filter .12s ease;
}
.btn:hover { filter: brightness(.94); text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: none; }
.btn--ghost { background: transparent; color: var(--text); border: 1px solid var(--card-edge); }
.btn--ghost:hover { filter: none; border-color: var(--text-dim); }

/* ---------- glossary ---------- */
.tools { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin: 1.1rem 0; }
.search {
  flex: 1 1 16rem; display: flex; align-items: center; gap: .55rem;
  background: var(--card); border: 1px solid var(--card-edge); border-radius: var(--radius-s);
  padding: .55rem .9rem;
}
.search:focus-within { border-color: var(--text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 12%, transparent); }
.search svg { flex: none; color: var(--text-dim); }
.search input { flex: 1; background: none; border: 0; outline: 0; color: var(--text); font: inherit; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip {
  border: 1px solid var(--card-edge); background: var(--card); color: var(--text-dim);
  font: inherit; font-size: .84rem; font-weight: 600; padding: .3rem .8rem;
  border-radius: 999px; cursor: pointer; text-decoration: none;
}
.chip:hover { color: var(--text); border-color: var(--text-dim); text-decoration: none; }
.chip[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.chip--reset { border-style: dashed; }
.chip .flag { width: 18px; height: 12px; vertical-align: -1px; margin-right: .4rem; }
.chip[aria-pressed="true"] .flag { box-shadow: 0 0 0 1px color-mix(in srgb, var(--bg) 35%, transparent); }
.search__clear {
  flex: none; width: 1.6rem; height: 1.6rem; border: 0; border-radius: 50%;
  background: var(--bg-soft); color: var(--text-dim); font-size: 1.05rem;
  line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0;
}
.search__clear:hover { color: var(--text); background: var(--card-edge); }
.search__clear[hidden] { display: none; }
.alpha[hidden] { display: none; }
.alpha { display: flex; flex-wrap: wrap; gap: .25rem; margin: .3rem 0 1rem; }
.alpha a { font-weight: 600; font-size: .85rem; color: var(--text-dim); padding: .2rem .45rem; border-radius: 4px; }
.alpha a:hover { color: var(--text); background: var(--bg-soft); text-decoration: none; }
.alpha a.is-empty { opacity: .28; pointer-events: none; }
.g-count { color: var(--text-dim); font-size: .9rem; margin: 0 0 1rem; }
.g-letter { font-size: 1.35rem; font-weight: 600; margin: 1.8rem 0 .6rem; padding-bottom: .3rem; color: var(--text); border-bottom: 1px solid var(--edge-soft); scroll-margin-top: 5rem; }
.g-list { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); padding: 0; margin: 0 0 2rem; list-style: none; }
.g-item {
  background: var(--card); border: 1px solid var(--card-edge); border-radius: var(--radius-s);
  padding: .85rem 1rem;
}
.g-item h3 { font-size: 1.02rem; margin: 0 0 .25rem; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.g-item .g-cat, .map-panel .g-cat, .book__meta .g-cat, .reg__m .g-cat {
  font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-dim); background: transparent; border: 1px solid var(--card-edge);
  padding: .1em .5em; border-radius: 999px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
/* in the narrow book column a long category name must wrap, not push the page */
.book__meta .g-cat { white-space: normal; overflow: visible; }
.g-item p { color: var(--text-dim); font-size: .92rem; margin: 0; }
.g-item mark, .tl-item mark { background: color-mix(in srgb, var(--warn) 40%, transparent); color: inherit; border-radius: 3px; padding: 0 .1em; }
.g-empty { color: var(--text-dim); padding: 2rem 0; text-align: center; }

/* ---------- timeline ---------- */
.tl-legend { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1rem 0 2rem; }
.tl { position: relative; margin: 0 0 3rem; padding: 0; list-style: none; }
.tl::before { content: ''; position: absolute; top: 0; bottom: 0; left: 1.05rem; width: 1px; background: var(--card-edge); }
.tl-era { position: relative; margin: 2.6rem 0 1.2rem; padding-left: 2.6rem; scroll-margin-top: 5rem; }
.tl-era h2 { font-size: 1.3rem; margin: 0; }
.tl-era p { color: var(--text-dim); font-size: .95rem; margin: .2rem 0 0; }
.tl-item { position: relative; padding: 0 0 1.15rem 2.6rem; }
.tl-item::before {
  content: ''; position: absolute; left: calc(1.05rem - 5px); top: .5rem;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--dot, var(--accent)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot, var(--accent)) 22%, transparent);
}
.tl-item article { background: var(--card); border: 1px solid var(--card-edge); border-radius: var(--radius-s); padding: .8rem 1rem; }
.tl-item .tl-year { font-weight: 600; font-size: .92rem; color: var(--dot, var(--accent-2)); font-variant-numeric: tabular-nums; }
.tl-item h3 { font-size: 1.05rem; margin: .1rem 0 .25rem; }
.tl-item p { color: var(--text-dim); font-size: .93rem; margin: 0; }
@media (min-width: 64em) {
  .tl--alt::before { left: 50%; }
  .tl--alt .tl-era { padding-left: 0; text-align: center; }
  /* era headings: the spine fades out above the title and fades back in below
     the subtitle instead of striking through (Sandro 2026-08-29). The era block
     occludes the continuous line with the page bg; two 1px gradient stubs draw
     the fade-out / fade-in inside its padding zones. */
  .tl--alt .tl-era { background: var(--bg); margin: .4rem 0 0; padding-top: 2.2rem; padding-bottom: 1.2rem; }
  .tl--alt .tl-era::before, .tl--alt .tl-era::after { content: ''; position: absolute; left: 50%; width: 1px; }
  .tl--alt .tl-era::before { top: 0; height: 1.7rem; background: linear-gradient(to bottom, var(--card-edge), transparent); }
  .tl--alt .tl-era::after { bottom: 0; height: .95rem; background: linear-gradient(to top, var(--card-edge), transparent); }
  .tl--alt .tl-item { width: 50%; padding: 0 2.4rem 1.3rem 0; }
  .tl--alt .tl-item::before { left: calc(100% - 5px); } /* 11px dot centered on the 1px spine at 50%: center = 50% + .5px */
  .tl--alt .tl-item:nth-child(even of .tl-item) { margin-left: 50%; padding: 0 0 1.3rem 2.4rem; }
  .tl--alt .tl-item:nth-child(even of .tl-item)::before { left: -5px; }
}


/* ============================================================================
   «KARTENBLATT» content layout (Sandro's go 2026-08-30; concept + mockups in
   ~/docs/design/ai.ch.md and /root/design/ai-atlas-redesign/).
   The map-sheet idea: a labelled MARGIN carries the metadata so the FIELD can
   stay quiet. Hairlines instead of boxes; prose never wider than 66ch and never
   narrower than 45ch; one feature per page; cards only where an image IS the
   content. Class names of the old system stay valid — these are additive.
   ========================================================================== */

/* --- the block: margin column + content field ---------------------------- */
.block { border-top: 1px solid var(--edge-soft); }
.block:first-of-type { border-top: 0; }
.block__in {
  display: grid; grid-template-columns: 9.25rem minmax(0, 1fr); gap: 3.25rem;
  padding: 3.4rem 0;
}
.block--tight .block__in { padding: 2.4rem 0; }
/* start page (Sandro 2026-09-04): no margin column — the register labels cost
   ~200px of width; the section titles carry the label instead */
.block__in--full { grid-template-columns: minmax(0, 1fr); }
/* news rows: the tail holds a host name (tagesanzeiger.ch) — wider than the
   register's default 4.6rem tail so it does not break mid-word */
#news-ch .reg__row, #news-intl .reg__row { grid-template-columns: 8.25rem minmax(0, 1fr) 8rem; }
#news-ch .reg__d, #news-intl .reg__d { max-width: 92ch; } /* news one-liners are longer than register blurbs — use the width the removed margin column freed (Sandro 2026-09-04) */
/* news archive: one tab per region instead of two sections one after the
   other (Sandro 2026-09-04). Underline tabs on the hairline, counts as small
   figures; panels are plain blocks without their own top rule. */
.tabs { display: flex; gap: 1.8rem; border-bottom: 1px solid var(--edge-soft); margin: .4rem 0 0; }
.tab {
  background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: .55rem 0 .7rem; font: inherit; font-size: 1.02rem; font-weight: 600; letter-spacing: -.01em;
  color: var(--text-dim); cursor: pointer;
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--mark); }
.tab small { font-size: .82rem; font-weight: 500; color: var(--text-faint); margin-left: .3rem; font-variant-numeric: tabular-nums; }
.tab:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; border-radius: 3px; }
.tabpanel.block { border-top: 0; }
.tabpanel .block__in { padding-top: 2rem; }
@media (max-width: 60em) { #news-ch .reg__row, #news-intl .reg__row { grid-template-columns: minmax(0, 1fr); } }
.marg {
  font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-faint); padding-top: .3rem;
}
.marg em {
  display: block; font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none;
  font-size: .78rem; color: var(--text-faint); margin-top: .55rem; line-height: 1.45;
}
.field > h2 { font-size: 1.55rem; font-weight: 650; letter-spacing: -.025em; margin: 0 0 .35rem; }
.field > .sub { color: var(--text-dim); font-size: .95rem; line-height: 1.6; margin: 0 0 1.5rem; max-width: 62ch; }
.field > .more, .more {
  display: inline-block; margin-top: 1.3rem; font-size: .9rem; font-weight: 600; color: var(--accent-2);
}
@media (max-width: 60em) {
  .block__in { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 2.2rem 0; }
  .marg { padding-top: 0; }
  .marg em { display: inline; margin-left: .6rem; font-size: .72rem; }
}

/* --- the register: one row component replacing six card grids ------------- */
.reg { margin: 0; padding: 0; list-style: none; }
.reg__row {
  display: grid; grid-template-columns: 8.25rem minmax(0, 1fr) 4.6rem; gap: 1.6rem;
  align-items: baseline; padding: 1.05rem 0; border-top: 1px solid var(--edge-soft);
}
.reg__row:first-child { border-top: 0; padding-top: 0; }
.reg__m {
  font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint); line-height: 1.55; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
}
.reg__t { display: block; font-size: 1.03rem; font-weight: 600; letter-spacing: -.012em; margin: 0 0 .2rem; line-height: 1.35; }
.reg__t a { color: inherit; }
.reg__t a:hover { color: var(--accent-2); }
.reg__d { display: block; color: var(--text-dim); font-size: .88rem; line-height: 1.58; margin: 0; max-width: 66ch; }
.reg__l { font-size: .78rem; color: var(--text-faint); text-align: right; overflow-wrap: anywhere; hyphens: none; }
.reg__l a { color: var(--accent-2); }
.reg__row mark { background: color-mix(in srgb, var(--warn) 40%, transparent); color: inherit; border-radius: 3px; padding: 0 .1em; }
/* flags (news regions): one fixed slot so a square CH and a 3:2 US line up on
   the same left edge; big enough to read the detail (Sandro 2026-08-30). */
.flag {
  display: inline-block; width: 22px; height: 15px; flex: none;
  object-fit: contain; object-position: left center;
  border-radius: 2px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 14%, transparent);
  vertical-align: -2px;
}
/* 1:1 marks: the Swiss flag is square and the «International» globe is a
   symbol, not a flag — the box (and its hairline) hugs the square instead of
   the 3:2 slot, the globe gets no hairline at all (Sandro 2026-09-02). */
.flag--sq { width: 15px; margin-right: 7px; }
.flag--sym { width: 15px; margin-right: 7px; border-radius: 0; box-shadow: none; }
.reg__m .flag { margin-left: .1rem; }
@media (max-width: 60em) {
  .reg__row { grid-template-columns: minmax(0, 1fr); gap: .3rem; padding: .95rem 0; }
  .reg__l { text-align: left; }
}

/* Decluttering the entry rows (Sandro 2026-08-30): the NAME stands alone, the
   category badge moves to the right edge of the title line, and the metadata
   (year, tags) sits quietly under the definition rather than around the name. */
.reg__t { display: flex; align-items: baseline; gap: .6rem; }
.reg__t > .g-cat { margin-left: auto; flex: none; }
.reg--terms .reg__term { display: flex; align-items: baseline; gap: .5rem; }
.reg--terms .reg__term .g-year { margin-left: auto; opacity: .8; }
.reg--terms .g-tags { margin-top: .55rem; opacity: .85; }
.reg--terms .g-tags .g-tag { font-size: .72rem; }

/* Related terms as a quiet text line, not a row of buttons: with 686 entries a
   pill per cross-reference turned every definition into a control panel
   (Sandro 2026-08-30 — «the definition of each term deserves to stand clean»). */
.reg--terms .g-tags { display: block; margin-top: .5rem; font-size: .78rem; line-height: 1.6; color: var(--text-faint); }
.reg--terms .g-tags-label { font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); margin-right: .45rem; }
.reg--terms .g-tag {
  display: inline; border: 0; background: none; border-radius: 0; padding: 0;
  font-size: .78rem; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--text-dim); text-decoration: none;
  white-space: normal;              /* the pill rule set nowrap — a plain text line must wrap */
  overflow-wrap: anywhere;
}
.reg--terms .g-tag:hover { color: var(--accent-2); text-decoration: underline; }
.reg--terms .g-tag + .g-tag::before { content: ' · '; color: var(--text-faint); text-decoration: none; }
.reg--terms .g-tag--facet { font-style: italic; }

/* term register (glossary): the term itself is the margin, level is the tail */
.reg--terms .reg__row, .reg-head--terms { grid-template-columns: 12.5rem minmax(0, 1fr) 10.5rem 7.2rem; align-items: start; }
.reg__meta { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; padding-top: .1rem; }
.reg__meta .g-year { font-size: .78rem; color: var(--text-faint); font-variant-numeric: tabular-nums; }
/* the topic in column 3 is quiet text, not a pill — a badge here would just
   rebuild the clutter we removed from the term column */
.reg__meta .g-cat {
  max-width: 100%; border: 0; background: none; padding: 0; border-radius: 0;
  font-size: .8rem; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--text-dim); white-space: normal; overflow: visible; line-height: 1.4;
}
/* the year now lives under the definition, quiet and on its own line */
.reg__year {
  display: block; margin-top: .35rem; font-size: .72rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
/* column titles for the register tables */
.reg-head {
  display: grid; gap: 1.6rem; padding: 0 0 .55rem; margin-top: 1.6rem;
  border-bottom: 1px solid var(--text-faint);
  font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint);
}
.reg-head + .reg .reg__row:first-child, .reg-head + * .reg__row:first-child { padding-top: 1.05rem; border-top: 0; }
.reg-head span:last-child { text-align: right; }
@media (max-width: 60em) { .reg-head { display: none; } }
.reg--terms .reg__l { display: flex; align-items: baseline; justify-content: flex-end; gap: .3rem; line-height: 1.4; }
.reg--terms .reg__m { display: block; letter-spacing: normal; text-transform: none; padding-top: .05rem; }
.reg__term { display: block; font-size: 1.0rem; font-weight: 600; letter-spacing: -.012em; color: var(--text); line-height: 1.3; }
.reg__term .g-year { font-weight: 500; }
.reg--terms .reg__m .g-cat { display: inline-block; margin-top: .3rem; }
.reg--terms .g-tags { margin-top: .5rem; }
@media (max-width: 60em) {
  .reg--terms .reg__row { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
  .reg--terms .reg__l { text-align: left; }
  .reg__meta { flex-direction: row; align-items: center; gap: .5rem; }
}

/* register margins that carry several facts (events, education, swiss) */
.reg__m .ev-date, .reg__m .ev-place, .reg__m .ev-badge, .reg__m .sw-canton { display: block; }
.reg__row.sw-item .reg__m { display: block; }
.reg__row.sw-item .reg__m > span:not(.sw-canton) { display: inline; }
.reg__row.sw-item .reg__m .sw-canton { display: inline-block; margin: .1rem 0 0 15px; }
.reg__m .ev-badge { display: inline-block; }
.reg__m .ev-date { color: var(--text-dim); font-weight: 600; }
.reg__m .ev-place, .reg__m .sw-canton { margin-top: .18rem; text-transform: none; letter-spacing: .04em; }
.reg__m .ev-badge { margin-top: .3rem; }
.reg__m .ev-freq { display: block; margin-top: .45rem; font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); }
.reg__m svg { flex: none; }
.reg__t .ev-head { display: inline-flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.reg__t .ev-img { width: 34px; height: 34px; object-fit: contain; background: transparent; border: 0; padding: 0; border-radius: 0; }
.reg__t .ev-img--mono { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: .85rem; background: var(--accent); }
.ev-item--past { opacity: .62; }

.reg__m .mv-year { display: block; font-size: .82rem; font-weight: 700; color: var(--text-dim); font-variant-numeric: tabular-nums; margin-bottom: .3rem; }
.reg--films .reg__row { grid-template-columns: 8.25rem minmax(0, 1fr) 9rem; }
.reg__row.mv-item .reg__l { display: flex; align-items: baseline; justify-content: flex-end; gap: .35rem; text-align: right; }
.reg__row.mv-item .reg__l svg { width: 13px; height: 13px; flex: none; opacity: .7; }

/* news register: the source sits right, the first row gets air under the lead */
#news-ch .reg__row:first-child, #news-intl .reg__row:first-child { padding-top: .4rem; }
#news-ch .reg__l, #news-intl .reg__l { text-align: right; }
.field > .sub + .reg { margin-top: .4rem; }

/* full-width link register: no margin column, two roomy columns */
.reg--wide { display: grid; grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr)); column-gap: 3.2rem; margin-bottom: 2.2rem; }
.reg--wide .reg__row { grid-template-columns: minmax(0, 1fr); gap: .15rem; padding: .78rem 0; }
.reg--wide .reg__row:nth-child(-n+2) { border-top: 0; padding-top: 0; }
.reg--wide .reg__t { font-size: .99rem; }
.reg--wide .reg__d { font-size: .87rem; line-height: 1.55; }
.guide-sec__t { font-size: 1.12rem; font-weight: 650; letter-spacing: -.02em; margin: 2.4rem 0 .9rem; }
.guide-sec__note { display: block; font-size: .9rem; font-weight: 400; letter-spacing: 0; color: var(--text-dim); margin-top: .25rem; max-width: 62ch; }
.guide-sec:first-of-type .guide-sec__t { margin-top: 1rem; }
@media (max-width: 60em) { .reg--wide { grid-template-columns: minmax(0, 1fr); }
  .reg--wide .reg__row:nth-child(2) { border-top: 1px solid var(--edge-soft); padding-top: .78rem; } }

/* Registers of SHORT entries (link lists, the machine ladder) flow in two
   columns: one row per line was taller than the card grid it replaced — the
   flat look stays, the height comes back down (Sandro «still very long»). */
.reg--cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); column-gap: 2.6rem; }
.reg--cols .reg__row { grid-template-columns: minmax(0, 1fr); gap: .15rem; padding: .72rem 0; border-top: 1px solid var(--edge-soft); }
.reg--cols .reg__row:nth-child(-n+2) { border-top: 0; padding-top: 0; }
.reg--cols .reg__t { font-size: .97rem; margin-bottom: .1rem; }
.reg--cols .reg__d { font-size: .85rem; line-height: 1.5; }
/* three-across for compact catalogue entries (the machine ladder): a grid is
   simply shorter than a full-measure list when the entries are specs, not prose
   — flat and hairlined, but not one-per-row. */
.reg--grid3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); gap: 0 2.2rem; }
.reg--grid3 .reg__row { grid-template-columns: minmax(0, 1fr); gap: .2rem; padding: .85rem 0; }
.reg--grid3 .reg__row:nth-child(-n+3) { border-top: 0; padding-top: 0; }
.reg--grid3 .reg__m { margin-bottom: .1rem; }
.reg--grid3 .reg__l { text-align: left; font-weight: 600; color: var(--text-dim); margin-top: .15rem; }
.reg--grid3 .reg__d { font-size: .85rem; line-height: 1.5; }
@media (max-width: 60em) {
  .reg--cols, .reg--grid3 { grid-template-columns: minmax(0, 1fr); }
  .reg--cols .reg__row:nth-child(2), .reg--grid3 .reg__row:nth-child(-n+3) { border-top: 1px solid var(--edge-soft); padding-top: .8rem; }
  .reg--grid3 .reg__row:first-child, .reg--cols .reg__row:first-child { border-top: 0; padding-top: 0; }
}

/* link rows (guides, news sources): no margin column, the group title carries it */
.reg__row--link { grid-template-columns: minmax(0, 1fr); }
.reg__note { display: block; margin-top: .2rem; color: var(--text-faint); }
.reg__row--future { opacity: .82; }
.reg__row--future .reg__m { color: var(--warn); }
.block.guide-sec + .block.guide-sec { border-top: 1px solid var(--edge-soft); }

/* figure band: the ONE place a background colour is used. It is semantic, not
   decorative striping — it says «this is a picture, not text», and it gives the
   long resources page a read/look rhythm (Sandro asked about section colours,
   2026-08-30; alternating stripes were rejected as generic and they shorten
   nothing). Full-bleed on a .wrap page via the 50vw trick. */
.figband {
  background: var(--bg-soft);
  border-top: 1px solid var(--edge-soft); border-bottom: 1px solid var(--edge-soft);
  margin: 3.4rem calc(50% - 50vw); padding: 2.6rem calc(50vw - 50%);
}
.figband > :first-child { margin-top: 0; }
.figband > :last-child { margin-bottom: 0; }

/* wide tables scroll inside their own box, never the page (mobile overflow on
   the resources monster build, found 2026-08-30) */
.bn-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.bn-tablewrap > table { min-width: 34rem; }

/* ---- newsletter plate: the one warm, deliberately different surface --------
   Same ink-blue family as the footer so it reads as «the house speaking», not a
   card. Reusable: drop <section class="block block--tight nlplate"> on any page
   (Sandro 2026-08-30 — «could be in another color and be reused on the other
   pages for more effect getting subs»). */
.nlplate .newsletter {
  --nl-bg: #16202b; --nl-text: #c3ccd5; --nl-strong: #f2f5f7; --nl-line: #33424f;
  background: var(--nl-bg); border: 0; border-radius: var(--radius);
  padding: 1.5rem 1.6rem; color: var(--nl-text);
}
.nlplate .newsletter h2, .nlplate .newsletter h3, .nlplate .nl-cta { color: var(--nl-strong); }
.nlplate .newsletter .nl-note, .nlplate .newsletter p { color: var(--nl-text); }
.nlplate .newsletter a { color: #fff; }
.nlplate .nl-form input[type="email"], .nlplate .inf-input {
  background: rgba(255,255,255,.06); border: 1px solid var(--nl-line); color: var(--nl-strong);
}
.nlplate .nl-form input[type="email"]::placeholder, .nlplate .inf-input::placeholder { color: #8b98a5; }
.nlplate .nl-form input[type="email"]:focus, .nlplate .inf-input:focus {
  outline: 0; border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.14);
}
/* compact one-line variant for the foot of other pages */
.nlplate--slim .newsletter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); gap: 1.4rem 2rem; align-items: center; }
@media (max-width: 52em) { .nlplate--slim .newsletter { grid-template-columns: minmax(0, 1fr); } }
/* start page (Sandro 2026-09-04): the plate as a box beside the Swiss news, top
   of the news section — like the glossary's side column — instead of at the
   very bottom of the page. Stacks under the list on narrow screens. */
.news-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem); gap: 1.6rem 2rem; align-items: start; }
.news-split__main { min-width: 0; }
.nlplate--box .newsletter { margin: 0; padding: 1.2rem 1.25rem 1.15rem; }
.nlplate--box .nl-row { flex-direction: column; align-items: stretch; gap: .65rem; }
.nlplate--box .nl-cta { font-size: 1.02rem; line-height: 1.35; letter-spacing: -.012em; margin-bottom: .1rem; }
.nlplate--box .inf-input { flex: none; }
.nlplate--box .inf-submit .btn { width: 100%; box-sizing: border-box; }
.nlplate--box .nl-note { margin-top: .1rem; }
@media (max-width: 60em) { .news-split { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; } }

/* ---- page opening: every page starts the same way (Sandro 2026-08-30) -------
   A calm band under the hero: small-caps label + count in the margin, ONE
   orientation sentence in the field. Controls (search, filters, chips) always
   come after it — never straight under the photo, and never in a box. */
/* one consistent gap under EVERY header — Learning used to start at 0 px,
   Events at 15, Swiss at 39 (Sandro 2026-08-30). */
.page-hero { padding: 2.8rem 0 0; }
main.wrap > .page-hero + * { margin-top: 2.4rem; }
/* the hero sits OUTSIDE main on several pages, so the gap has to come from the
   first block inside main — not from a hero margin. */
main.wrap > :first-child:not(.pageopen):not(style):not(script) { margin-top: 2.6rem; }
main.wrap > .pageopen:first-child { margin-top: 0; }
.pageopen { border-bottom: 1px solid var(--edge-soft); }
/* 2026-09-04 (Sandro): no more margin label («LEARNING · 3 lines · 26 stops») —
   a clean title/subtitle pair over the full width instead; the counts move
   into the title. Controls (search, chips, tools) follow inside .pageopen__body. */
.pageopen__in { padding: 2.7rem 0 2.4rem; }
.pageopen__title {
  font-size: clamp(1.45rem, 2.4vw, 1.85rem); font-weight: 650; letter-spacing: -.025em; line-height: 1.15;
  margin: 0 0 .55rem;
}
.pageopen__lead {
  font-size: 1.2rem; line-height: 1.55; letter-spacing: -.011em; color: var(--text-dim);
  max-width: 64ch; margin: 0; font-weight: 450;
}
/* learning: three teaser cards under the title so the degree route is visible
   at the top, not only at the foot of the page (Sandro 2026-09-04) */
.cards--teaser { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 1.7rem 0 0; gap: 1rem; }
.cards--teaser .card h3 { min-height: 0; font-size: 1.08rem; margin: 0 0 .15rem; }
.cards--teaser .card { padding: 1.1rem 1.15rem 1rem; }
.cards--teaser .card__kicker { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; }
.cards--teaser .card p { font-size: .92rem; line-height: 1.5; }
.cards--teaser .card__go { padding-top: .7rem; }
@media (max-width: 48em) { .cards--teaser { grid-template-columns: minmax(0, 1fr); } }
.pageopen__note { margin: .85rem 0 0; color: var(--text-dim); font-size: .95rem; max-width: 62ch; line-height: 1.6; }
main > .pageopen:first-of-type { margin-top: 0; }
@media (max-width: 60em) {
  .pageopen__in { padding: 2rem 0 1.7rem; }
  .pageopen__lead { font-size: 1.08rem; }
}

/* «Term not found?» — the aside column carries the pictures teaser and this box */
.gl-ask { border: 1px solid var(--card-edge); border-radius: var(--radius); background: var(--card); padding: .85rem 1rem .95rem; }
.gl-ask > b { display: block; font-size: .97rem; font-weight: 650; letter-spacing: -.012em; color: var(--text); }
.gl-ask > p { font-size: .82rem; line-height: 1.5; color: var(--text-dim); margin: .25rem 0 .55rem; }
.gl-ask__form { display: flex; flex-direction: column; gap: .2rem; }
.gl-ask__lb { font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); margin-top: .3rem; }
.gl-ask__lb span { font-weight: 500; letter-spacing: 0; text-transform: none; }
.gl-ask input[type="text"], .gl-ask input[type="email"] {
  background: var(--bg); border: 1px solid var(--card-edge); border-radius: var(--radius-s);
  padding: .42rem .6rem; color: var(--text); font: inherit; font-size: .86rem; min-width: 0;
}
.gl-ask input:focus { outline: 0; border-color: var(--text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 12%, transparent); }
.gl-ask__hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: -1px; }
.gl-ask__go { margin-top: .55rem; font-size: .86rem; padding: .48rem .9rem; text-align: center; }
.gl-ask__note { font-size: .72rem; line-height: 1.45; color: var(--text-faint); margin: .45rem 0 0; }
.gl-ask__sum { font-size: .78rem; color: var(--mark); margin: .5rem 0 0; }
/* live check against the glossary while typing */
.gl-ask__hint { font-size: .78rem; line-height: 1.45; margin: .45rem 0 0; color: var(--text-dim); }
.gl-ask__hint a { color: var(--accent-2); font-weight: 600; }
.gl-ask__hint--have { color: var(--warn); }
.gl-ask__hint--new { color: var(--ok); }
.gl-tools > .gl-pics { margin-bottom: 1rem; }
.gl-tools__side { display: flex; flex-direction: column; gap: .8rem; min-width: 0; }

/* ---- glossary tools: filters take three quarters, the pictures teaser one --- */
.gl-tools { display: grid; grid-template-columns: minmax(0, 3fr) minmax(15rem, 1fr); gap: 1.6rem; margin: 2.2rem 0 1.4rem; align-items: start; }
.gl-tools__main { min-width: 0; }
.gl-tools .searchrow { margin-bottom: .8rem; }
.gl-pics {
  border: 1px solid var(--card-edge); border-radius: var(--radius); background: var(--card);
  overflow: hidden; height: 100%;
}
.gl-pics__link { display: flex; flex-direction: column; gap: .6rem; padding: .85rem 1rem .95rem; height: 100%; text-decoration: none; color: inherit; }
.gl-pics:hover { border-color: var(--text-dim); }
.gl-pics__thumbs { display: flex; gap: .7rem; }
.gl-pics__thumbs svg { width: 50%; height: 52px; fill: none; stroke: var(--accent); stroke-width: 1.6; opacity: .85;
  background: var(--bg-soft); border-radius: var(--radius-s); padding: .35rem; }
.gl-pics__ring circle { stroke: var(--accent-2); }
.gl-pics__ring path { stroke: var(--edge-soft); }
.gl-pics__body { display: flex; flex-direction: column; gap: .28rem; }
.gl-pics__body b { font-size: .97rem; font-weight: 650; letter-spacing: -.012em; color: var(--text); }
.gl-pics__body > span { font-size: .84rem; line-height: 1.5; color: var(--text-dim); }
.gl-pics__go { margin-top: auto; padding-top: .35rem; font-size: .84rem; font-weight: 600; color: var(--accent-2); }
@media (max-width: 60em) { .gl-tools { grid-template-columns: minmax(0, 1fr); } .gl-pics__thumbs svg { height: 74px; } }

/* the source column needs room: long hosts were spilling past the right edge
   (Sandro 2026-08-30). Wider tail on the entry registers + wrapping links. */
.sw-list .reg__row, .reg-head--sw { grid-template-columns: 8.25rem minmax(0, 1fr) 9.5rem 8.5rem; }
.reg__l a, .reg__l { overflow-wrap: anywhere; word-break: break-word; line-height: 1.45; }
.ev-item .reg__l, .mv-item .reg__l { overflow-wrap: anywhere; }

/* --- the legend strip: the sheet legend, replaces the boxed stats row ----- */
.legend { border-top: 1px solid var(--edge-soft); border-bottom: 1px solid var(--edge-soft); }
.legend__in { display: flex; flex-wrap: wrap; padding: 1.6rem 0; }
.legend__in > * {
  flex: 1 1 8rem; border-left: 1px solid var(--edge-soft); padding-left: 1.1rem; text-align: left;
}
.legend__in > *:first-child { border-left: 0; padding-left: 0; }
.legend b {
  display: block; font-size: 1.7rem; font-weight: 650; letter-spacing: -.03em; line-height: 1;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.legend span {
  display: block; margin-top: .38rem; font-size: .66rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-faint);
}
@media (max-width: 48em) {
  .legend__in > * { flex: 1 1 33%; padding: .55rem 0 .55rem 1.1rem; }
  .legend__in > *:nth-child(3n+1) { border-left: 0; padding-left: 0; }
}

/* --- the feature: ONE quiet frame per page ------------------------------- */
.feature { border: 1px solid var(--card-edge); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.feature > img, .feature > svg { display: block; width: 100%; }
.feature__cap {
  display: flex; flex-wrap: wrap; gap: 1.4rem; padding: .8rem 1.1rem;
  border-top: 1px solid var(--edge-soft); font-size: .82rem; color: var(--text-dim);
}
.feature__cap b { font-weight: 600; color: var(--text); }
.feature__cap .go { margin-left: auto; color: var(--accent-2); font-weight: 600; }

/* ---------- map (explorer, d3) — also embedded on glossary.html ---------- */
.map-shell { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 2.5rem; }
@media (min-width: 64em) { .map-shell { grid-template-columns: minmax(0, 1fr) 21rem; } }
.map-stage {
  position: relative; background: var(--card); border: 1px solid var(--card-edge);
  border-radius: var(--radius); overflow: hidden; height: min(72vh, 46rem); min-height: 24rem;
  touch-action: none;
}
.map-stage svg { display: block; width: 100%; height: 100%; cursor: grab; }
.map-stage svg:active { cursor: grabbing; }
.map-hint {
  position: absolute; left: .9rem; bottom: .8rem; font-size: .76rem; color: var(--text-dim);
  background: color-mix(in srgb, var(--bg) 82%, transparent); padding: .25rem .6rem; border-radius: 999px;
  pointer-events: none;
}
.map-ctrl { position: absolute; right: .8rem; top: .8rem; display: flex; flex-direction: column; gap: .4rem; }
.map-ctrl button {
  width: 2.2rem; height: 2.2rem; border-radius: var(--radius-s); border: 1px solid var(--card-edge);
  background: var(--bg-soft); color: var(--text); font-size: 1.1rem; font-weight: 600; cursor: pointer;
}
.map-ctrl button:hover { border-color: var(--text-dim); }
.map-panel {
  background: var(--card); border: 1px solid var(--card-edge); border-radius: var(--radius);
  padding: 1.1rem 1.2rem; align-self: start; position: sticky; top: 4.4rem;
}
.map-panel h2 { font-size: 1.15rem; display: flex; align-items: center; gap: .5rem; }
.map-panel p { color: var(--text-dim); font-size: .93rem; }
.map-panel .crumb { font-size: .8rem; color: var(--text-dim); margin-bottom: .4rem; }
.map-panel .kids { padding-left: 1.1rem; margin: .4rem 0; color: var(--text-dim); font-size: .9rem; }
.map-panel .kids a { cursor: pointer; }
.m-link { fill: none; stroke: var(--card-edge); stroke-width: 1.3; }
.m-node circle { stroke-width: 2; cursor: pointer; }
.m-node text {
  font: 600 12px 'Inter', system-ui, sans-serif; fill: var(--text);
  paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round; cursor: pointer;
}
.m-node--sel circle { stroke: var(--text) !important; stroke-width: 3; }

/* ---------- Layers of AI (taxonomy rings) — map-layers.html + embedded on glossary.html ---------- */
.ml-shell { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 2.5rem; }
@media (min-width: 64em) { .ml-shell { grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; } }
.ml-stage { position: relative; background: var(--card); border: 1px solid var(--card-edge); border-radius: var(--radius); padding: .6rem; }
.ml-stage svg { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; max-height: 82vh; margin: 0 auto; font-family: inherit; }
.ml-stage svg text { text-rendering: geometricPrecision; } /* scaled SVG text: stops Chromium rounding glyph advances into intra-word gaps */
.ml-seg { stroke: var(--card); stroke-width: 1.5; cursor: pointer; transition: opacity .15s ease, filter .15s ease; outline: none; }
.ml-seg:hover, .ml-seg:focus-visible { filter: brightness(1.18); }
.ml-seg:focus-visible { stroke: var(--text); stroke-width: 3; }
.ml-seg.is-dim { opacity: .28; }
.ml-seg.is-on { stroke: var(--text); stroke-width: 3; }
.ml-seglabel { font-size: 13px; font-weight: 600; fill: #fff; cursor: pointer; user-select: none; }
.ml-seglabel--dark { fill: #0b0e1a; }
.ml-ringlabel { cursor: pointer; outline: none; }
.ml-ringlabel rect { fill: var(--bg); fill-opacity: .84; stroke: var(--card-edge); stroke-width: 1; }
.ml-ringlabel text { font-size: 14px; font-weight: 700; fill: var(--text); }
.ml-ringlabel:hover rect, .ml-ringlabel:focus-visible rect, .ml-ringlabel.is-on rect { stroke: var(--text); stroke-width: 2; }
.ml-core { cursor: pointer; outline: none; }
.ml-core circle { fill: var(--bg); stroke: var(--mark); stroke-width: 3; }
.ml-core text { font-size: 34px; font-weight: 800; fill: var(--text); }
.ml-core:hover circle, .ml-core:focus-visible circle { stroke: var(--text); }
.ml-tip { position: absolute; pointer-events: none; background: var(--bg); border: 1px solid var(--card-edge); border-radius: 8px; padding: .35rem .6rem; font-size: .82rem; color: var(--text); box-shadow: var(--shadow); z-index: 2; white-space: nowrap; }
.ml-tip b { color: var(--accent-2); }
.ml-panel { background: var(--card); border: 1px solid var(--card-edge); border-radius: var(--radius); padding: 1rem 1.1rem; position: sticky; top: 4.4rem; max-height: calc(100vh - 5rem); overflow: auto; }
.ml-panel .crumb { font-size: .8rem; color: var(--text-dim); margin: 0 0 .35rem; min-height: 1.2em; }
.ml-crumb-btn { background: none; border: 0; padding: 0; color: var(--accent-2); font: inherit; font-size: inherit; cursor: pointer; }
.ml-crumb-btn:hover { text-decoration: underline; }
.ml-panel h2 { font-size: 1.15rem; margin: 0 0 .25rem; }
.ml-panel .ml-meta { color: var(--text-dim); font-size: .9rem; margin: 0 0 .8rem; }
.ml-panel p { color: var(--text-dim); font-size: .93rem; margin: 0 0 .7rem; }
.ml-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; }
.ml-pick { display: flex; align-items: center; gap: .55rem; width: 100%; text-align: left; background: none; border: 0; border-radius: 6px; padding: .42rem .5rem; color: var(--text); font: inherit; font-size: .95rem; cursor: pointer; }
.ml-pick:hover, .ml-pick:focus-visible { background: var(--bg-soft); outline: none; }
.ml-pick i { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.ml-pick span { margin-left: auto; color: var(--text-dim); font-size: .85rem; font-variant-numeric: tabular-nums; }
.ml-list--terms li { display: grid; grid-template-columns: 1fr auto; align-items: center; border-bottom: 1px solid var(--edge-soft); }
.ml-list--terms li:last-child { border-bottom: 0; }
.ml-term { display: flex; align-items: center; gap: .5rem; background: none; border: 0; padding: .38rem .25rem; color: var(--text); font: inherit; font-size: .93rem; text-align: left; cursor: pointer; border-radius: 6px; }
.ml-term:hover, .ml-term:focus-visible { color: var(--accent-2); outline: none; }
.ml-term .g-dot { flex: none; }
.ml-term__go { padding: .2rem .4rem; font-size: .9rem; text-decoration: none; border-radius: 6px; }
.ml-term__go:hover, .ml-term__go:focus-visible { background: var(--bg-soft); }
.ml-def { grid-column: 1 / -1; color: var(--text-dim); font-size: .88rem; margin: 0 0 .55rem .25rem; line-height: 1.5; }
.ml-back { margin: 0 0 .7rem; }
.ml-back button { background: none; border: 1px solid var(--card-edge); border-radius: 999px; color: var(--text-dim); font: inherit; font-size: .8rem; padding: .25rem .7rem; cursor: pointer; }
.ml-back button:hover, .ml-back button:focus-visible { border-color: var(--text-dim); color: var(--text); }
.ml-count { color: var(--text-dim); font-size: .9rem; margin: -.4rem 0 1rem; }
@media (max-width: 40em) { .ml-seglabel { font-size: 15px; } .ml-ringlabel text { font-size: 17px; } }

/* glossary level dots + label */
.g-dot { display: inline-block; width: .55em; height: .55em; border-radius: 50%; margin-right: .35em; vertical-align: baseline; }
.g-dot--1 { background: #5ccb8e; }
.g-dot--2 { background: #e9b44c; }
.g-dot--3 { background: #e8707a; }
.g-lvls-label { color: var(--text-dim); font-size: .85rem; font-weight: 600; align-self: center; margin-right: .2rem; }

/* glossary taxonomy: second-level (domain) chips under the super-domain row */
.chips--sub { margin-top: .35rem; padding-left: .9rem; border-left: 2px solid var(--card-edge); }
.chip--sub { font-size: .78rem; padding: .28em .7em; }
.chip--sub[aria-pressed="true"] { background: var(--accent-2); border-color: var(--accent-2); color: var(--bg); }

/* glossary tag pills: cross-references (#slug) and facet filters (?tag=) */
.g-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: .5rem 0 0; }
.g-tags-label { color: var(--text-dim); font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-right: .15rem; }
.g-tag {
  font-size: .74rem; line-height: 1.5; padding: .12em .6em; border-radius: 999px;
  border: 1px solid var(--card-edge); color: var(--text-dim); background: transparent;
  white-space: nowrap; cursor: pointer; font-family: inherit;
}
.g-tag:hover { color: var(--text); border-color: var(--text-dim); text-decoration: none; }
.g-tag--ref { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 35%, transparent); }
.g-tag--ref:hover { background: color-mix(in srgb, var(--accent-2) 10%, transparent); }
.g-tag--facet { border-style: dashed; }
.g-tag--active { background: var(--text); border-color: var(--text); color: var(--bg); }

/* glossary year badge */
.g-year {
  font-size: .72rem; font-weight: 600; color: var(--text-dim); font-variant-numeric: tabular-nums;
  background: var(--bg-soft); border: 1px solid var(--card-edge);
  padding: .1em .5em; border-radius: 999px; white-space: nowrap;
}

/* timeline kind badge */
.tl-kind {
  float: right; font-size: .68rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-dim);
  background: var(--bg-soft); border: 1px solid var(--card-edge);
  padding: .12em .55em; border-radius: 999px; margin-left: .6rem;
}

/* ---------- resources ---------- */
.rs-h { font-size: 1.5rem; margin: 2.4rem 0 .4rem; scroll-margin-top: 5rem; }
.rs-lead { color: var(--text-dim); margin: 0 0 1rem; max-width: 66ch; }
/* min(17rem, 100%) so a 390 px phone cannot be pushed sideways by the 17 rem
   track (pre-existing mobile overflow, found 2026-08-30) */
.book-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); margin: 0 0 2.6rem; }
.book { display: flex; gap: .95rem; background: var(--card); border: 1px solid var(--card-edge); border-radius: var(--radius-s); padding: .9rem; }
.book__cover { flex: none; width: 6.6rem; aspect-ratio: 2 / 3; overflow: hidden; background: var(--bg-soft); position: relative; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.book__cover img { width: 100%; height: 100%; object-fit: contain; display: block; position: relative; z-index: 1; }
.book__fallback {
  position: absolute; inset: 0; display: none; padding: .5rem .45rem;
  font-size: .62rem; font-weight: 600; line-height: 1.25; color: #fff; background: var(--accent);
}
.book__cover--fallback .book__fallback { display: block; }
.book__body { min-width: 0; }
.book__body h3 { font-size: 1rem; margin: 0 0 .2rem; }
.book__meta { font-size: .8rem; color: var(--text-dim); margin: 0 0 .35rem; }
.book__desc { font-size: .88rem; color: var(--text-dim); margin: 0; }
.guide-sec { margin: 0 0 1.6rem; }
.guide-sec > h3 { font-size: 1.15rem; margin: 1.4rem 0 .1rem; }

/* ---------- footer ---------- */
/* footer: one deep ink-blue plate in BOTH themes — it closes the sheet and is
   the only large dark surface in light mode (Sandro 2026-08-30). */
.site-foot {
  --foot-bg: #16202b; --foot-text: #aab6c2; --foot-strong: #eef2f5; --foot-line: #2b3a49;
  margin-top: 3rem; border-top: 0; background: var(--foot-bg); padding: 2.2rem 0 2rem;
  color: var(--foot-text); font-size: .86rem;
}
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; align-items: center; }
.site-foot > .wrap > span:first-child { color: var(--foot-text); }
.site-foot nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; }
.site-foot a { color: var(--foot-strong); }
.site-foot a:hover { color: #fff; text-decoration: underline; }
.site-foot__bottom { width: 100%; display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; align-items: center; font-size: .76rem; color: #7f8d9b; padding-top: .9rem; margin-top: .4rem; border-top: 1px solid var(--foot-line); }
.site-foot__bottom a { color: var(--text-dim); }
.site-foot__bottom nav { margin-left: auto; gap: .4rem 1.1rem; }

/* dataset freshness line (data pages, above the footer) */
.data-state { margin: 2.2rem 0 .4rem; font-size: .76rem; color: var(--text-faint); letter-spacing: .04em; text-transform: uppercase; }

/* header below 58em (928px): brand + languages + toggle on the first row, the main nav
   on its own full-width row that scrolls horizontally instead of wrapping. Above that
   width all four languages fit in one row (FR is the longest: 515px of links). Before
   2026-09-17 the nav wrapped into a right-aligned two-liner between 641 and ~860px and
   dropped «Glossar»/«Glossaire» onto an orphan line at 390px. */
@media (max-width: 58em) {
  .site-head__row { height: auto; padding-block: .55rem; flex-wrap: wrap; } /* padding-block: the old «.55rem 0» shorthand zeroed the .wrap side gutter — brand and toggle sat flush at the viewport edge */
  .site-nav { margin: 0 -1.25rem; width: calc(100% + 2.5rem); padding: 0 .7rem; box-sizing: border-box; flex-wrap: nowrap; justify-content: flex-start; gap: .1rem; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; } /* bleeds to the viewport edge; the cut-off last item is the scroll hint */
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { flex: none; white-space: nowrap; padding: .4rem .55rem; }
  .brand { order: -2; }
  .lang-nav { order: -1; margin-left: auto; }
  .theme-toggle { order: -1; margin-left: .35rem; }
}
/* small screens */
@media (max-width: 40em) {
  .site-nav a { font-size: .88rem; }
  .hero { padding: 2.6rem 0 2.4rem; }
  .hero h1 { max-width: none; }
  .hero__coord { display: none; }
}
@media (max-width: 26em) {
  .site-head__row { gap: .6rem; } /* brand + EN/DE/FR/IT + toggle stay on one row at 320px */
  .site-nav a { padding: .35rem .45rem; font-size: .84rem; }
}

/* motion & a11y */
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* welcoming entry additions */
.paths { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); padding: .4rem 0 .4rem; }
.path {
  display: flex; flex-direction: column; gap: .25rem;
  background: var(--card); border: 1px solid var(--card-edge); border-radius: var(--radius-s);
  padding: .95rem 1.1rem; color: var(--text);
}
.path:hover { border-color: var(--text-dim); text-decoration: none; }
.path b { font-size: 1.02rem; font-weight: 600; }
.path span { color: var(--text-dim); font-size: .9rem; }
.rs-index { margin: 1rem 0 1.6rem; }
.rs-index .chip { text-decoration: none; }

/* pyramid diagrams (ordinal tiers — widths deliberately not to scale) */
.pyr { padding: 1.6rem 0 3rem; text-align: center; }
.pyr__title { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.pyr__lead { color: var(--text-dim); max-width: 44rem; margin: 0 auto 1.4rem; }
.pyr__stack { display: flex; flex-direction: column; gap: 6px; align-items: center; max-width: 46rem; margin: 0 auto; }
.pyr__tier { position: relative; width: 100%; padding: .55rem .75rem; border-radius: 6px; display: flex; gap: .6rem; align-items: baseline; justify-content: center; flex-wrap: wrap; }
.pyr__tier::before {
  content: ''; position: absolute; inset: 0; left: 50%; transform: translateX(-50%);
  width: var(--w); border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
.pyr__tier > * { position: relative; }
.pyr__tier b { font-size: 1.05rem; }
.pyr__tier span { color: var(--text-dim); font-size: .92rem; }
.pyr__tier a { font-size: .82rem; font-weight: 600; white-space: nowrap; }
.pyr__tier--you::before { background: color-mix(in srgb, var(--accent-2) 16%, transparent); border-color: color-mix(in srgb, var(--accent-2) 55%, transparent); }
.pyr__apiline { width: 90%; border-top: 2px dashed var(--warn); padding-top: .25rem; }
.pyr__apiline span { font-size: .78rem; font-weight: 600; color: var(--warn); text-transform: uppercase; letter-spacing: .05em; }
.pyr__note { color: var(--text-dim); font-size: .8rem; max-width: 44rem; margin: 1rem auto 0; }
.pyr--small { text-align: left; padding: 0 0 1rem; }
.pyr--small .pyr__stack { margin: 0; align-items: center; max-width: 40rem; }
.pyr--small .pyr__note { margin: .8rem 0 0; }

/* waffle unit chart (infographics) — palette validated dark+light, 2px gaps */
.waffle { padding: 1.6rem 0 3rem; text-align: center; }
.waffle__legend { display: flex; flex-wrap: wrap; gap: .35rem .9rem; justify-content: center; margin: 0 0 1rem; font-size: .82rem; color: var(--text-dim); }
.waffle__legend b { color: var(--text); font-weight: 600; }
.waffle__legend i { display: inline-block; width: .7em; height: .7em; border-radius: 2px; margin-right: .35em; }
.waffle__never { background: var(--card-edge); }
.waffle__grid { display: grid; grid-template-columns: repeat(50, 1fr); gap: 2px; max-width: 46rem; margin: 0 auto; }
.waffle__grid i { aspect-ratio: 1; border-radius: 2px; background: color-mix(in srgb, var(--card-edge) 70%, var(--bg)); }

/* AI Engineer spectrum diagram (resources) */
.spec { margin: 0 0 2rem; }
.spec__wrap { max-width: 56rem; overflow-x: auto; padding-bottom: .4rem; }
.spec__ends { display: flex; justify-content: space-between; font-size: .76rem; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; min-width: 34rem; margin-bottom: .5rem; }
.spec__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; min-width: 34rem; }
.spec__role { padding: .5rem .9rem .2rem; position: relative; }
.spec__role b { font-size: .92rem; line-height: 1.3; display: block; margin-bottom: .3rem; }
.spec__role ul { margin: 0; padding-left: 1.1rem; color: var(--text-dim); font-size: .85rem; }
.spec__role--hl { border-left: 2px dashed var(--accent-2); }
.spec__role--hl b, .spec__role--hl ul { color: var(--accent-2); }
.spec__api { position: absolute; top: -1.4rem; left: -1.1rem; font-size: .72rem; font-weight: 700; letter-spacing: .18em; color: var(--accent-2); }
.spec__axis { position: relative; height: 2px; background: var(--text-dim); min-width: 34rem; margin-top: .8rem; }
.spec__axis::before, .spec__axis::after { content: ''; position: absolute; top: -4px; border: 5px solid transparent; }
.spec__axis::before { left: -2px; border-right-color: var(--text-dim); border-left: 0; }
.spec__axis::after { right: -2px; border-left-color: var(--text-dim); border-right: 0; }

/* infographics grid (resources) */
.info-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(12.8rem, 1fr)); margin: 0 0 1rem; }
.info-card { display: flex; flex-direction: column; gap: .35rem; background: var(--card); border: 1px solid var(--card-edge); border-radius: var(--radius); padding: 1.2rem 1.2rem 1.1rem; color: var(--text); }
.info-card:hover { border-color: var(--text-dim); text-decoration: none; }
.info-card .label { margin-bottom: .2rem; }
.info-card h3 { font-size: 1.1rem; margin: 0; }
.info-card p { color: var(--text-dim); font-size: .92rem; margin: 0; }
.info-card .card__go { margin-top: auto; padding-top: .6rem; }

/* ---------- search row: the field and ONE button, nothing else ---------- */
.searchrow { display: flex; gap: .6rem; align-items: stretch; margin: 1.1rem 0 .9rem; }
.searchrow .search { flex: 1 1 10rem; min-width: 0; margin: 0; }
.search__go {
  flex: none; display: inline-flex; align-items: center; gap: .45rem; padding: 0 1.05rem;
  border-radius: var(--radius-s); border: 1px solid var(--text); background: var(--text); color: var(--bg);
  font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer;
}
.search__go:hover { filter: brightness(.92); }
.search__go svg { width: 16px; height: 16px; }

/* ---------- filter bar: one visible element, labelled groups ---------- */
.filterbar {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: .7rem 1.5rem;
  padding: .85rem 1rem .9rem; margin: 0 0 1rem;
  background: var(--card); border: 1px solid var(--card-edge); border-radius: var(--radius);
}
.filterbar__title {
  display: inline-flex; align-items: center; gap: .45rem; padding-top: 1.25rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); /* a step above .filterbar__name (Sandro 2026-09-02) */
}
.filterbar__title svg { width: 14px; height: 14px; }
.filterbar__group { display: flex; flex-direction: column; gap: .35rem; }
.filterbar__group--wide { flex-basis: 100%; }
.filterbar__group--wide:has(> [hidden]) { display: none; }
.filterbar__name { font-size: .64rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); }
.filterbar__group .chips { gap: .35rem; }
.filterbar .chip { font-size: .8rem; padding: .26rem .7rem; }
.filterbar .chips--sub { margin-top: 0; }
.filterbar__reset { margin-left: auto; align-self: flex-end; }
@media (max-width: 40em) { .filterbar { gap: .6rem 1rem; padding: .7rem .8rem; } .filterbar__title { padding-top: 0; flex-basis: 100%; } .filterbar__reset { margin-left: 0; } }


.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ---- KARTENBLATT mobile guard -------------------------------------------
   The per-page column templates (.sw-list, .reg--terms, .reg--films, .reg-head)
   are more specific than the generic mobile rule, so they need their own
   collapse. Keep this block LAST so it always wins. */
@media (max-width: 60em) {
  .reg__row,
  .sw-list .reg__row,
  .reg--terms .reg__row,
  .reg--films .reg__row,
  .reg--cols .reg__row,
  .reg--wide .reg__row,
  .reg--grid3 .reg__row { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
  .sw-list .reg__row, .reg--terms .reg__row { grid-template-columns: minmax(0, 1fr); }
  .reg-head, .reg-head--terms, .reg-head--sw { display: none; }
  .reg__l, .reg--terms .reg__l { text-align: left; }
  .reg__meta { flex-direction: row; align-items: center; gap: .55rem; flex-wrap: wrap; }
  .reg__t { flex-wrap: wrap; }
  .reg__t > .g-cat { margin-left: 0; }
}