/* ==========================================================================
   ICOSIM e.V. — Gestaltungssystem
   --------------------------------------------------------------------------
   Haltung: ruhig, luftig, wenige Stilstufen. Inhalte werden durch Weißraum
   und Typografie gegliedert, nicht durch Rahmen und Kästen. Farbe tritt
   sparsam auf — das ICOSIM-Zyan ist Akzent, keine Flächenfarbe.

   Eine Schriftfamilie (General Sans) in drei Gewichten. Der Kontrast
   entsteht über Größe und Farbe, nicht über wechselnde Schnitte.
   ========================================================================== */

@import url('https://api.fontshare.com/v2/css?f[]=general-sans@300,400,500,600&display=swap');

/* ---------- Tokens ---------- */
:root {
  --font: 'General Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: var(--font);
  --font-sans: var(--font);

  /* Größenstufen — bewusst knapp gehalten */
  --text-xs: 0.9375rem;
  --text-sm: 1.0625rem;
  --text-base: 1.1875rem;
  --text-lg: 1.3125rem;
  --text-xl: 1.4rem;
  --text-2xl: clamp(1.75rem, 2.6vw, 2.25rem);
  --text-3xl: clamp(2.1rem, 3.6vw, 2.9rem);
  --text-hero: clamp(2.5rem, 5.2vw, 4rem);

  /* Abstände */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 5rem;
  --space-16: 7rem;

  /* Radien — weich, aber nicht verspielt */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  --wrap: 1140px;
  --measure: 62ch;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Hellmodus — sehr geringe Kontraste zwischen den Flächen */
  --c-bg: #fbfcfc;
  --c-surface: #ffffff;
  --c-surface-2: #f4f7f7;
  --c-surface-3: #eceff0;
  --c-ink: #26313a;
  --c-ink-soft: #47555f;
  --c-muted: #525d66;
  --c-line: #e6eaeb;
  --c-line-strong: #d3dadc;

  --c-primary: #07a7e3;        /* CI-Zyan — nur Akzent */
  --c-primary-ink: #0b7ba6;    /* Zyan für Text, ausreichender Kontrast */
  --c-primary-hover: #096a90;
  --c-primary-soft: #e4f2f8;
  --c-primary-tint: #f2f8fb;

  --c-sage: #5e6b72;
  --c-sage-soft: #eef1f2;
  --c-sand: #f4f7f7;
  --c-accent: #0b7ba6;
  --c-accent-soft: #e9f3f7;

  --c-deep: #1c333d;
  --c-deep-ink: #eef4f5;

  --shadow-soft: 0 1px 2px rgba(30, 45, 55, 0.04), 0 8px 28px rgba(30, 45, 55, 0.05);
}

[data-theme='dark'] {
  --c-bg: #0f1b21;
  --c-surface: #14242c;
  --c-surface-2: #182b34;
  --c-surface-3: #1f3843;
  --c-ink: #e9f0f2;
  --c-ink-soft: #b0c0c7;
  --c-muted: #8397a0;
  --c-line: #24404b;
  --c-line-strong: #2f5060;

  --c-primary: #3cbcec;
  --c-primary-ink: #6ed0f4;
  --c-primary-hover: #8ddbf7;
  --c-primary-soft: #17323e;
  --c-primary-tint: #142a34;

  --c-sage: #9fb0b8;
  --c-sage-soft: #1a2e37;
  --c-sand: #182b34;
  --c-accent: #6ed0f4;
  --c-accent-soft: #17323e;

  --c-deep: #0c171d;
  --c-deep-ink: #e9f0f2;

  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 28px rgba(0, 0, 0, 0.24);
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.72;
  color: var(--c-ink-soft);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--c-ink);
  font-weight: 500;
  letter-spacing: -0.021em;
  text-wrap: balance;
}
h1 { font-size: var(--text-3xl); line-height: 1.08; }
h2 { font-size: var(--text-2xl); line-height: 1.16; }
h3 { font-size: var(--text-lg); line-height: 1.4; font-weight: 500; letter-spacing: -0.012em; }
h4 { font-size: var(--text-base); line-height: 1.45; font-weight: 500; letter-spacing: -0.008em; }

p { margin: 0; max-width: var(--measure); }

a { color: var(--c-primary-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--c-primary-hover); }

ul, ol { margin: 0; padding-left: 1.15rem; }
li + li { margin-top: var(--space-2); }

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

::selection { background: var(--c-primary-soft); color: var(--c-ink); }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sr:focus {
  position: fixed; top: var(--space-4); left: var(--space-4);
  width: auto; height: auto; clip: auto; margin: 0;
  padding: var(--space-3) var(--space-5); background: var(--c-ink); color: #fff;
  border-radius: var(--r-pill); z-index: 999;
}

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

.section { padding-block: clamp(3.75rem, 6.5vw, 5.5rem); }
.section-sm { padding-block: clamp(2.5rem, 4.5vw, 4rem); }

.hero { padding-block: clamp(3.5rem, 7vw, 7rem) clamp(3.5rem, 7vw, 6.5rem); }

/* Flächen. Die Abstufungen sind absichtlich fast unmerklich — die
   Gliederung leistet der Weißraum, nicht der Farbwechsel. */
.tone-2 { background: var(--c-surface-2); }
.tone-tint { background: var(--c-surface-2); }
.tone-deep {
  background: var(--c-deep);
  color: #b7c7ce;
  --c-line: rgba(255, 255, 255, 0.11);
  --c-line-strong: rgba(255, 255, 255, 0.2);
  --c-ink-soft: #b7c7ce;
  --c-muted: #8fa4ac;
  --c-surface-2: rgba(255, 255, 255, 0.045);
  --c-surface-3: rgba(255, 255, 255, 0.07);
  --c-primary-ink: #6ed0f4;
  --c-sage: #9fb0b8;
}
.tone-deep h1, .tone-deep h2, .tone-deep h3, .tone-deep h4 { color: #fff; }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
@media (max-width: 900px) {
  .split, .hero-grid { grid-template-columns: 1fr; }
}

.grid { display: grid; gap: clamp(2rem, 3.6vw, 3.25rem); }
.grid > *, .split > *, .hero-grid > * { min-width: 0; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 940px) {
  .g-3, .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
}
/* Einige Raster sind im Markup inline feinjustiert (z. B. 1.25fr 1fr).
   Auf schmalen Bildschirmen werden diese zwingend einspaltig, sonst
   laufen sie aus dem Viewport heraus. */
@media (max-width: 880px) {
  .grid[style] { grid-template-columns: 1fr !important; }
}

.stack-2 > * + * { margin-top: var(--space-2); }
/* Zwischen Überschrift und Fließtext braucht es etwas mehr Luft als
   zwischen Etikett und Wert. */
.stack-2 > h3 + p, .stack-2 > h4 + p,
.stack-3 > h3 + p, .stack-3 > h4 + p { margin-top: 0.6rem; }
.stack-3 > * + * { margin-top: var(--space-3); }
.stack-4 > * + * { margin-top: var(--space-4); }
.stack-5 > * + * { margin-top: var(--space-5); }
.stack-6 > * + * { margin-top: var(--space-6); }
.stack-8 > * + * { margin-top: var(--space-8); }
.stack-10 > * + * { margin-top: var(--space-10); }

.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.center { text-align: center; margin-inline: auto; }
.center p { margin-inline: auto; }
.maxw-60 { max-width: 60ch; }
.spacer { height: var(--space-8); }
.hr { height: 1px; background: var(--c-line); border: 0; margin-block: var(--space-8); }
.sep { color: var(--c-line-strong); }

/* ---------- Typografie-Hilfsklassen ---------- */
.lead {
  font-size: var(--text-lg);
  line-height: 1.62;
  color: var(--c-ink-soft);
  font-weight: 400;
  max-width: 56ch;
}
.small { font-size: var(--text-sm); line-height: 1.65; }
.xs { font-size: var(--text-xs); line-height: 1.6; }
.muted { color: var(--c-muted); }
.soft { color: var(--c-ink-soft); }
.display { font-size: var(--text-hero); line-height: 1.04; font-weight: 500; letter-spacing: -0.03em; }

/* Kicker über Überschriften — kleiner, grau, mit kurzer Zyanlinie.
   Kein Blockversal-Geschrei. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.eyebrow::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--c-primary);
  flex: none;
}
.eyebrow.no-rule::before { display: none; }

.divider-label {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-muted);
}

/* Wortmarken-Reminiszenz: graue Linie mit zyanfarbenem Anfang */
.rule-mark {
  display: block;
  height: 1px;
  background: var(--c-line-strong);
  position: relative;
}
.rule-mark::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 64px; height: 1px;
  background: var(--c-primary);
}

.quote {
  font-size: var(--text-xl);
  line-height: 1.5;
  font-weight: 400;
  color: var(--c-ink);
  letter-spacing: -0.015em;
  max-width: 46ch;
}

/* ---------- Schaltflächen ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.72rem 1.3rem;
  font-family: var(--font);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: none;
  color: var(--c-ink);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }
.btn svg { width: 1.05em; height: 1.05em; flex: none; }

/* Dunkler Text auf dem CI-Zyan: so bleibt die Markenfarbe erhalten und der
   Kontrast erfüllt die Barrierefreiheitsanforderung. */
.btn-primary { background: var(--c-primary); color: #062c3b; }
.btn-primary:hover { background: #06bcff; color: #062c3b; }
[data-theme='dark'] .btn-primary { background: var(--c-primary); color: #06222e; }
[data-theme='dark'] .btn-primary:hover { background: var(--c-primary-hover); color: #06222e; }

.btn-ghost { border-color: var(--c-line-strong); color: var(--c-ink); }
.btn-ghost:hover { border-color: var(--c-ink); background: transparent; }
/* Auf dunkler Fläche braucht der Ghost-Button helle Schrift und Kontur. */
.tone-deep .btn-ghost { border-color: rgba(255,255,255,.38); color: #ffffff; }
.tone-deep .btn-ghost:hover { border-color: #ffffff; }

.btn-light { background: #fff; color: #1c333d; }
.btn-light:hover { background: #eef4f5; color: #1c333d; }

.btn-on-deep { border-color: rgba(255, 255, 255, 0.32); color: #fff; }
.btn-on-deep:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }

.btn-lg { padding: 0.92rem 1.7rem; font-size: var(--text-base); }
.btn-sm { padding: 0.58rem 1.1rem; font-size: var(--text-sm); }

.icon-btn, .theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: none;
  color: var(--c-ink-soft);
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.icon-btn:hover, .theme-btn:hover { background: var(--c-surface-2); color: var(--c-ink); }
.icon-btn svg, .theme-btn svg { width: 19px; height: 19px; }

.link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--c-primary-ink);
  text-decoration: none;
  transition: gap 0.25s var(--ease);
}
.link:hover { gap: 0.8rem; }
.link svg { width: 0.95em; height: 0.95em; }

/* ---------- Kopfbereich ---------- */
.topbar {
  background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-line);
  font-size: var(--text-sm);
  color: var(--c-ink-soft);
}
.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 46px;
  padding-block: 0.5rem;
}
.topbar a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--c-ink-soft);
  text-decoration: none;
  white-space: nowrap;
}
.topbar a:hover { color: var(--c-primary-ink); }
.topbar svg { width: 16px; height: 16px; flex: none; stroke-width: 1.6; }
.topbar-meta { display: flex; align-items: center; gap: var(--space-4); margin-left: auto; }
@media (max-width: 820px) { .topbar { display: none; } }

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--c-bg) 95%, transparent);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}
.header.is-stuck { border-bottom-color: var(--c-line); }
.header .wrap { max-width: 1380px; }
.header-inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.8vw, 1.75rem);
  min-height: 78px;
  padding-block: var(--space-3);
}
.header-actions { display: flex; align-items: center; gap: var(--space-2); flex: none; margin-left: auto; }

/* Wortmarke */
.brand { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.brand-mark { display: none; }
.brand-txt { display: block; }
.brand-name {
  display: block;
  font-size: 1.46rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--c-primary);
  line-height: 1;
}
.brand-name i { font-style: normal; font-size: 0.52em; font-weight: 500; color: var(--c-muted); margin-left: 0.28em; }
.brand-rule { display: block; width: 214px; height: 1px; background: var(--c-line-strong); margin: 0.36rem 0 0.3rem; }
.brand-sub {
  display: block;
  font-size: 0.72rem;
  line-height: 1.36;
  letter-spacing: 0.005em;
  color: var(--c-muted);
  text-transform: none;
}

/* Hauptnavigation */
.nav { display: flex; align-items: center; gap: clamp(0.7rem, 1.35vw, 1.4rem); }
.nav-item { position: relative; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
  padding: 0.55rem 0;
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--c-ink);
  text-decoration: none;
  transition: color 0.25s var(--ease);
}
.nav-link:hover, .nav-link[aria-current='page'] { color: var(--c-ink); }
.nav-link[aria-current='page'] { font-weight: 500; }
.chev { width: 13px; height: 13px; opacity: 0.5; }

.submenu {
  position: absolute;
  top: 100%; left: -1rem;
  min-width: 300px;
  white-space: nowrap;
  padding: var(--space-3);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-soft);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: all 0.25s var(--ease);
  z-index: 20;
}
.nav-item:hover .submenu, .nav-item:focus-within .submenu {
  opacity: 1; visibility: visible; transform: none;
}
.submenu a {
  display: block;
  padding: 0.7rem 0.8rem;
  font-size: var(--text-base);
  line-height: 1.35;
  color: var(--c-ink);
  text-decoration: none;
  border-radius: var(--r-sm);
}
.submenu a + a { margin-top: 2px; }
.submenu small, .submenu .sub { display: none; }
.submenu a:hover { background: var(--c-surface-2); color: var(--c-ink); }

.burger { display: none; }
@media (max-width: 1400px) {
  .header .brand-rule, .header .brand-sub { display: none; }
}
@media (max-width: 1140px) {
  .nav { display: none; }
  .burger { display: inline-flex; }
  .header-actions .btn:not(.burger) { display: none; }
}

/* ---------- Reiter: Sprungnavigation innerhalb einer Seite ---------- */
.sectionnav-wrap {
  position: sticky;
  top: var(--header-h, 74px);
  z-index: 90;
  overflow: hidden;
  max-height: 72px;
  transition: max-height 0.3s cubic-bezier(.22,.61,.36,1), opacity 0.22s ease;
}
/* Beim Aufruf der Seite liegt die Reiterleiste eingeklappt hinter dem
   Kopfbereich. Erst wenn der Besucher den ersten Abschnitt erreicht,
   fährt sie aus — so sieht man oben nur eine Navigationszeile. */
.sectionnav-wrap[data-idle='true'] {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}
.sectionnav {
  position: relative;
  background: color-mix(in srgb, var(--c-bg) 96%, transparent);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  border-bottom: 1px solid var(--c-line);
}
.sectionnav-inner {
  display: flex;
  gap: clamp(1.1rem, 2.4vw, 2.1rem);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sectionnav-inner::-webkit-scrollbar { display: none; }
.sectionnav a {
  flex: none;
  padding: 0.95rem 0 0.9rem;
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--c-muted);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.sectionnav a:hover { color: var(--c-ink); }
.sectionnav a[aria-current='true'] {
  color: var(--c-ink);
  font-weight: 500;
  border-bottom-color: var(--c-primary);
}
.sn-i { display: none; }

.sectionnav-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 1px; right: 0;
  width: 40px;
  background: linear-gradient(to right, transparent, var(--c-bg));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s;
}
.sectionnav-wrap.can-scroll::after { opacity: 1; }

[data-navlabel], main section[id] { scroll-margin-top: calc(var(--header-h, 74px) + 54px); }

/* ---------- Schublade (mobil) ---------- */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--c-bg);
  padding: var(--space-5) clamp(1.25rem, 5vw, 2.5rem) var(--space-8);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s;
}
.drawer.icosim-offen { opacity: 1; visibility: visible; }
/* Fremde Stylesheets im Bestand definieren eine allgemeine Klasse .open mit
   transform: rotate(180deg). Deshalb heisst der Zustand hier icosim-offen und
   die Schublade schuetzt sich zusaetzlich gegen fremde Transformationen. */
.drawer { transform: none !important; }
.drawer-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-8); }
.drawer nav { display: flex; flex-direction: column; }
.drawer nav > a {
  padding: var(--space-4) 0;
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--c-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--c-line);
}
/* Mobiles Menue: Ebenen einheitlich, gut lesbar, mit Pfeil rechts */
.drawer nav > details { border-bottom: 1px solid var(--c-line); }
.drawer nav > details > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: var(--space-4) 0;
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--c-ink);
}
.drawer nav > details > summary::-webkit-details-marker { display: none; }
.drawer nav > details > summary::marker { content: ''; }
.drawer nav > details > summary::after {
  content: '';
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  margin-right: 0.35rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: 0.5;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s var(--ease);
}
.drawer nav > details[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.drawer nav > details > .sub {
  display: flex;
  flex-direction: column;
  padding-bottom: var(--space-4);
}
.drawer nav > details > .sub > a {
  padding: 0.66rem 0 0.66rem 1.05rem;
  font-size: var(--text-base);
  color: var(--c-ink-soft);
  text-decoration: none;
  border-left: 2px solid var(--c-line-strong);
}
.drawer nav > details > .sub > a:hover,
.drawer nav > details > .sub > a:focus-visible { color: var(--c-ink); }
.drawer nav > details > .sub small,
.drawer nav > details > .sub .sub { display: none; }

.drawer-cta { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-8); }

/* ---------- Seitenkopf ---------- */
.page-head {
  padding-top: clamp(3rem, 6vw, 5.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
  position: relative;
}
.crumbs {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  font-size: var(--text-sm);
  color: var(--c-ink-soft);
  margin-bottom: var(--space-6);
}
.crumbs a { color: var(--c-ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--c-primary-ink); }

/* Dekorformen aus der ersten Fassung sind entfallen — sie waren der
   Hauptgrund für den unruhigen Eindruck. */
.blob { display: none; }

/* ---------- Bilder ---------- */
.hero-arch,
.rounded-xl,
.ratio-4-3,
.ratio-16-9,
.card-media,
.prod-img,
.img-cover {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-surface-2);
}
.hero-arch { aspect-ratio: 4 / 4.7; }
.ratio-4-3 { aspect-ratio: 4 / 3; }
.ratio-16-9 { aspect-ratio: 16 / 9; }
.img-cover, .hero-arch img, .ratio-4-3 img, .ratio-16-9 img, .prod-img img {
  width: 100%; height: 100%; object-fit: cover;
}
@media (max-width: 900px) { .hero-arch { aspect-ratio: 4 / 3.2; } }

/* Bestandsgrafiken (Schemata, Produktabbildungen, Diagramme) aus der ICOSIM-
   Mediathek werden nicht beschnitten, sondern vollständig auf weisser Fläche
   gezeigt — wie eine Abbildung im Fachtext. */
.img-figure { background: #ffffff; }
.img-figure img, img.img-figure { object-fit: contain; }
/* Trägt das Bild die Klasse selbst, bestimmt das Seitenverhältnis die Höhe —
   sonst würde die geerbte Höhe von 100 % die Fläche unnötig streckten. */
img.img-figure { height: auto; }
/* Buchcover stehen hochkant, deshalb quadratische Produktfläche. */
.prod-img.img-figure { aspect-ratio: 1 / 1; }

/* ---------- Endlos laufende Videofläche ----------
   Wird wie ein Bild behandelt: gleiche Rundung, gleicher Beschnitt.
   Bei reduzierter Bewegungsvorliebe hält das Skript die Wiedergabe an. */
.video-loop { border-radius: var(--r-lg); overflow: hidden; background: var(--c-deep); }
.video-loop video { display: block; width: 100%; height: 100%; object-fit: cover; }


/* ---------- Karten: bewusst ohne Rahmen und Füllung ----------
   Die Trennung leisten die großen Rasterabstände. Nur wo eine Fläche
   inhaltlich zusammengehalten werden muss, kommt .panel zum Einsatz. */
.card {
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
}
.card-hover { transition: transform 0.3s var(--ease); }
.card-link { text-decoration: none; color: inherit; display: block; }
.card-link:hover h3, .card-link:hover h4 { color: var(--c-primary-ink); }
.card-num {
  display: block;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--c-primary-ink);
  margin-bottom: var(--space-3);
}

/* Gefüllte Fläche — sparsam einsetzen */
.panel {
  background: var(--c-surface-2);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.tone-2 .panel, .tone-tint .panel { background: var(--c-surface); }
.tone-deep .panel { background: rgba(255, 255, 255, 0.05); }

.form-note {
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--c-ink-soft);
  padding-left: var(--space-5);
  border-left: 1px solid var(--c-primary);
  max-width: 68ch;
}

.hint { font-size: var(--text-xs); color: var(--c-muted); }

/* ---------- Auszeichnungen: reiner Text, kein Kästchen ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--c-muted);
}
.badge svg { width: 0.95em; height: 0.95em; }
.badge-accent { color: var(--c-primary-ink); }
.badge-sage { color: var(--c-sage); }
.badge-lock {
  color: var(--c-muted);
  font-style: italic;
  letter-spacing: 0;
}
.badge-lock::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c-line-strong);
  flex: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.9rem;
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--c-ink-soft);
  background: var(--c-surface-2);
  border: 0;
  border-radius: var(--r-pill);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.tone-2 .chip, .tone-tint .chip { background: var(--c-surface); }
.chip:hover { background: var(--c-surface-3); color: var(--c-ink); }
.chip[aria-pressed='true'], .chip.is-active {
  background: var(--c-ink); color: var(--c-bg);
}
.chip-static {
  cursor: default;
  padding: 0.55rem 1.05rem;
  font-size: var(--text-sm);
}
.chip-static::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-primary);
  flex: none;
  opacity: 0.55;
}
.chip-static:hover { background: var(--c-surface-2); color: var(--c-ink-soft); }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip-grid { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ---------- Kennzahlen ---------- */
.stat-row { display: flex; flex-wrap: wrap; gap: clamp(2rem, 5vw, 4rem); }
.stat-n {
  display: block;
  font-size: var(--text-2xl);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--c-ink);
  line-height: 1.05;
}
.stat-l {
  display: block;
  font-size: var(--text-xs);
  color: var(--c-muted);
  margin-top: var(--space-2);
  max-width: 22ch;
}

/* ---------- Säulen / Merkmale ---------- */
.pillar { }
.pillar-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  margin-bottom: var(--space-4);
  color: var(--c-primary-ink);
}
.pillar-ico svg { width: 24px; height: 24px; stroke-width: 1.4; }

.check { display: flex; gap: var(--space-3); align-items: flex-start; }
.check svg { width: 17px; height: 17px; flex: none; margin-top: 0.3rem; color: var(--c-primary-ink); stroke-width: 1.6; }

/* ---------- Ablaufschritte ---------- */
.steps { display: flex; flex-direction: column; gap: var(--space-6); }
.step { display: flex; gap: var(--space-5); align-items: flex-start; }
.step-n {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--c-primary-ink);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-pill);
}
.tone-deep .step-n { border-color: rgba(255, 255, 255, 0.28); color: #6ed0f4; }

/* ---------- Termine ---------- */
.event {
  display: grid;
  grid-template-columns: 78px 1fr auto;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  padding-block: var(--space-6);
  border-top: 1px solid var(--c-line);
}
.event:last-child { border-bottom: 1px solid var(--c-line); }
.event-date { text-align: left; }
.event-day {
  font-size: var(--text-xl);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--c-ink);
  line-height: 1;
}
.event-mon {
  font-size: var(--text-xs);
  color: var(--c-muted);
  margin-top: 0.25rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
@media (max-width: 760px) {
  .event { grid-template-columns: 1fr; gap: var(--space-4); align-items: start; }
  .event > .btn, .event > a.btn { justify-self: start; }
}

/* ---------- Mediathek ---------- */
.video-tile {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--c-surface-3);
  display: block;
  text-decoration: none;
}
.video-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.video-tile:hover img { transform: scale(1.035); }
.video-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(9, 20, 27, 0.95) 0%, rgba(9, 20, 27, 0.86) 30%, rgba(9, 20, 27, 0.62) 58%, rgba(9, 20, 27, 0.3) 80%, rgba(9, 20, 27, 0.12) 100%);
}
.video-meta {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: clamp(1rem, 2.2vw, 1.4rem);
  color: #fff;
}
.video-meta h3, .video-meta h4 { color: #fff; }
.video-meta .small, .video-meta .xs { color: rgba(255, 255, 255, 0.94); }
.video-meta h3, .video-meta h4, .video-meta .small, .video-meta .xs { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55); }
.video-locked {
  position: absolute;
  top: var(--space-4); right: var(--space-4);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.65rem;
  font-size: var(--text-xs);
  color: #fff;
  background: rgba(12, 26, 34, 0.62);
  backdrop-filter: blur(6px);
  border-radius: var(--r-pill);
}
.video-locked svg { width: 0.85em; height: 0.85em; }
.video-locked.badge-lock { font-style: normal; }
.video-locked.badge-lock::before { display: none; }
.play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 52px; height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #1c333d;
  transition: transform 0.3s var(--ease);
}
.video-tile:hover .play { transform: translate(-50%, -50%) scale(1.08); }
.play svg { width: 17px; height: 17px; margin-left: 2px; }

/* ---------- Weekly ---------- */
.weekly-card {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
  padding-block: var(--space-6);
  border-top: 1px solid var(--c-line);
  text-decoration: none;
  color: inherit;
}
.weekly-card:last-child { border-bottom: 1px solid var(--c-line); }
.weekly-card:hover h3, .weekly-card:hover h4 { color: var(--c-primary-ink); }

.pager { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; justify-content: center; }
@media (max-width: 640px) { .weekly-card { grid-template-columns: 1fr; gap: var(--space-3); } }

/* ---------- Partner ---------- */
.partners { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.partner {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--c-muted);
  text-decoration: none;
  transition: color 0.25s var(--ease);
}
.partner:hover { color: var(--c-ink); }

/* ---------- Preise ---------- */
.price {
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--c-ink);
  letter-spacing: -0.02em;
}
.price s { font-weight: 400; font-size: 0.74em; color: var(--c-muted); margin-left: 0.45em; }

/* ---------- Akkordeon ---------- */
.acc { border-top: 1px solid var(--c-line); }
.acc details { border-bottom: 1px solid var(--c-line); }
.acc summary {
  display: flex;
  align-items: baseline;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--c-ink);
  cursor: pointer;
  list-style: none;
  transition: color 0.2s var(--ease);
}
.acc summary:hover { color: var(--c-primary-ink); }
.acc summary > .acc-title { flex: 1 1 auto; }
.acc summary > .acc-meta {
  flex: 0 1 auto;
  text-wrap: balance;
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--c-muted);
  text-align: right;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: '';
  flex: 0 0 auto;
  align-self: center;
  width: 9px; height: 9px;
  margin-left: var(--space-2);
  border-right: 1.5px solid var(--c-muted);
  border-bottom: 1.5px solid var(--c-muted);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.3s var(--ease);
}
.acc summary:hover::after { border-color: var(--c-primary-ink); }
.acc details[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.acc details[open] summary { padding-bottom: var(--space-3); }
.acc details > div {
  padding-right: var(--space-6);
  padding-bottom: var(--space-6);
  font-size: var(--text-sm);
  line-height: 1.72;
  color: var(--c-ink-soft);
  max-width: 68ch;
}
.acc details > div > p { margin: 0; }
.acc details > div > p + p { margin-top: var(--space-4); }
/* Tabellen im Akkordeon duerfen die volle Spaltenbreite nutzen —
   die 72ch-Grenze gilt nur fuer Fliesstext. */
.acc details > div:has(> .table-wrap) { max-width: none; padding-right: 0; }
/* Auf schmalen Displays rutscht die Zusatzangabe unter den Titel,
   statt den Titel zusammenzuquetschen. */
@media (max-width: 620px) {
  .acc summary { flex-wrap: wrap; gap: 0.2rem var(--space-4); }
  .acc summary > .acc-title { flex: 1 1 0; min-width: 0; }
  .acc summary > .acc-meta { flex: 1 0 100%; text-align: left; order: 3; }
  .acc summary::after { order: 2; }
}

/* ---------- Reiter innerhalb einer Komponente ---------- */
.tabs { display: flex; gap: var(--space-6); border-bottom: 1px solid var(--c-line); }
.tab {
  padding: 0.8rem 0;
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--c-muted);
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.tab:hover { color: var(--c-ink); }
.tab[aria-selected='true'] { color: var(--c-ink); font-weight: 500; border-bottom-color: var(--c-primary); }

/* ---------- Tabellen ---------- */
.table-wrap { overflow-x: auto; min-width: 0; max-width: 100%; }
table.data { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
table.data th, table.data td {
  padding: var(--space-4) var(--space-4) var(--space-4) 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--c-line);
}
table.data th {
  font-weight: 500;
  color: var(--c-ink);
  white-space: nowrap;
  width: 1%;
  padding-right: var(--space-6);
}
table.data td { color: var(--c-ink-soft); }
table.data tr:last-child th, table.data tr:last-child td { border-bottom: 0; }

/* Programmtabelle: Uhrzeit schmal, Referent in Ink, Titel gedaempft.
   Auf schmalen Displays klappen die Zeilen zu Bloecken, damit die
   langen englischen Vortragstitel nicht buchstabenweise umbrechen. */
table.data.prog th { padding-right: var(--space-5); color: var(--c-muted); font-variant-numeric: tabular-nums; }
table.data.prog td:first-of-type { width: 30%; min-width: 15rem; white-space: normal; padding-right: var(--space-6); }
table.data.prog td strong { font-weight: 500; color: var(--c-ink); }
@media (max-width: 700px) {
  table.data.prog, table.data.prog tbody, table.data.prog tr, table.data.prog th, table.data.prog td { display: block; width: auto; }
  table.data.prog tr { border-bottom: 1px solid var(--c-line); padding: var(--space-4) 0; }
  table.data.prog tr:last-child { border-bottom: 0; }
  table.data.prog th, table.data.prog td { border-bottom: 0; padding: 0; }
  table.data.prog th { margin-bottom: var(--space-1); }
  table.data.prog td:first-of-type { margin-bottom: 2px; }
}

/* ---------- Formulare ---------- */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field > label, .field > .divider-label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--c-ink);
  letter-spacing: 0;
  text-transform: none;
}
.input, .select, .textarea {
  width: 100%;
  padding: 0.78rem 1rem;
  font-family: var(--font);
  font-size: var(--text-sm);
  color: var(--c-ink);
  background: var(--c-surface);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-sm);
  transition: border-color 0.25s var(--ease);
}
.tone-2 .input, .tone-2 .select, .tone-2 .textarea { background: var(--c-surface); }
.input::placeholder, .textarea::placeholder { color: var(--c-muted); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--c-primary); }
.textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.input-mono { font-variant-numeric: tabular-nums; letter-spacing: 0.06em; }

.tone-deep .input, .tone-deep .select, .tone-deep .textarea {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.tone-deep .input::placeholder, .tone-deep .textarea::placeholder { color: rgba(255, 255, 255, 0.42); }
.tone-deep .input:focus, .tone-deep .textarea:focus { border-color: #6ed0f4; }
.tone-deep .field > label, .tone-deep .field > .divider-label { color: #e4eef0; }
.select { appearance: none; background-image: none; }

.map-ph {
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  background: var(--c-surface-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-align: center;
  padding: var(--space-6);
  color: var(--c-muted);
  font-size: var(--text-sm);
  cursor: pointer;
}
.map-ph h3 { color: var(--c-ink); }
.tone-deep .map-ph { background: rgba(255, 255, 255, 0.05); }
.tone-deep .map-ph h3 { color: #fff; }
.tone-deep .map-ph p, .tone-deep .map-ph { color: #b7c7ce; }

/* ---------- Fußbereich ---------- */
.footer {
  background: var(--c-deep);
  color: #a3b6bd;
  --c-ink-soft: #a3b6bd;
  --c-muted: #93a7af;
  --c-line: rgba(255, 255, 255, 0.1);
  --c-line-strong: rgba(255, 255, 255, 0.18);
  padding-block: clamp(3.5rem, 7vw, 6rem) var(--space-6);
  font-size: var(--text-sm);
}
.footer h4, .footer h3 { color: #fff; }
.footer a { color: #a3b6bd; text-decoration: none; }
.footer a:hover { color: #fff; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-col { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--text-xs);
  color: #93a7af;
}
.footer-bottom > div { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.footer .brand-name { color: #fff; }
.footer .brand-name i { color: #93a7af; }
.footer .brand-rule { background: rgba(255, 255, 255, 0.24); }
.footer .brand-sub { color: #93a7af; }

/* ---------- Prototyp-Hinweis ---------- */
.proto-flag {
  position: fixed;
  left: var(--space-4);
  bottom: var(--space-4);
  z-index: 150;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.95rem;
  font-size: var(--text-xs);
  color: #fff;
  background: rgba(28, 51, 61, 0.9);
  backdrop-filter: blur(8px);
  border-radius: var(--r-pill);
  pointer-events: none;
}
.proto-flag span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-primary);
  flex: none;
}

/* ---------- Einblenden beim Scrollen ---------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

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

/* ---------- Produktkarten Shop ---------- */
/* Preis und Bestell-Button sitzen in allen vier Karten auf derselben
   Grundlinie, unabhaengig davon wie lang der Buchtitel umbricht. */
.card.prod-card { display: flex; flex-direction: column; }
.prod-card .prod-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-5);
}
.prod-card .prod-foot {
  margin-top: auto;
  padding-top: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}
.prod-card .prod-foot .price { font-size: var(--text-base); }
@media (min-width: 1100px) {
  .prod-card .prod-body > .prod-foot { margin-top: auto; }
}

/* Kleines Portrait in Personenkarten */
.portrait-sm {
  width: 4.5rem; height: 4.5rem;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin-bottom: var(--space-4);
}

/* Farbmodus-Schalter in der oberen Servicezeile */
.topbar-theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  color: var(--c-ink-soft);
  cursor: pointer;
  transition: color 0.25s var(--ease), background 0.25s var(--ease);
}
.topbar-theme:hover { color: var(--c-primary-ink); background: var(--c-surface); }
.topbar-theme svg { width: 17px; height: 17px; }

/* Nur das jeweils passende Symbol zeigen: im Hellmodus den Mond
   (Ziel: dunkel), im Dunkelmodus die Sonne (Ziel: hell). */
[data-theme-toggle] .sun { display: none; }
[data-theme-toggle] .moon { display: block; }
:root[data-theme='dark'] [data-theme-toggle] .sun { display: block; }
:root[data-theme='dark'] [data-theme-toggle] .moon { display: none; }

/* Farbmodus im mobilen Menü */
.drawer-theme {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.85rem 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--c-line);
  font-family: var(--font);
  font-size: var(--text-sm);
  color: var(--c-ink);
  cursor: pointer;
}
.drawer-theme svg { width: 19px; height: 19px; }
@media (min-width: 1141px) { .drawer-theme { display: none; } }

/* Beitragstabelle: Betrag rechts, gut lesbar, Ziffern in gleicher Breite */
table.data.preis th { white-space: normal; width: auto; }
table.data.preis td {
  width: 1%;
  white-space: nowrap;
  text-align: right;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
  padding-right: 0;
}
table.data.preis thead th:last-child { text-align: right; padding-right: 0; }

/* Leitfragen-Liste: ruhige Aufzählung statt Kästchen */
.qlist {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--c-line);
  max-width: 78ch;
}
.qlist li {
  display: flex;
  align-items: baseline;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--c-line);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -0.012em;
  color: var(--c-ink);
}
.qlist-n {
  flex: 0 0 auto;
  min-width: 2.2rem;
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--c-primary-ink);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) {
  .qlist li { gap: var(--space-4); font-size: var(--text-base); }
  .qlist-n { min-width: 1.8rem; }
}

.weekly-card.card-link a { color: inherit; text-decoration: none; }
.weekly-card.card-link:hover h3 { color: var(--c-primary-ink); }

/* Der Einwilligungs-Hinweis vor eingebetteten Videos (Consent Manager) bringt
   auf schmalen Bildschirmen feste Breiten mit. Wir begrenzen sie, damit die
   Seite auf dem Telefon nicht seitlich verschoben werden kann. */
.cmplazypreviewiframe,
.cmplazypreviewmsg,
.cmplazypreviewmsginner,
.cmplazyhl,
.cmplazytxt,
.cmplazybtn,
.cmplazycb,
.cmpbox,
.cmpboxinner {
	max-width: 100% !important;
	box-sizing: border-box;
}

/* Die Schublade muss die Innenabstaende in ihre Breite einrechnen. Ein fremdes
   Stylesheet im Bestand setzt dies zurueck, wodurch das Menue breiter als der
   Bildschirm wurde und sich die Seite seitlich verschieben liess. */
.drawer,
.drawer * {
	box-sizing: border-box;
}
.drawer {
	width: 100%;
	max-width: 100vw;
}

/* Lesbarkeit auf dem Telefon: kleine Hilfstexte werden dort auf 16 Pixel
   gebracht, damit sie auch mit Lesebrille gut zu erfassen sind. */
@media (max-width: 820px) {

	.pillar,
	.soft,
	.link-wrap,
	.partners,
	.reiter-label,
	.btn-zeile,
	.hinweis,
	figcaption,
	small {
		font-size: 1rem !important;
		line-height: 1.6;
	}
}

/* Hinweisstreifen der Voransicht bleibt innerhalb des Bildschirms. */
.proto-flag {
	box-sizing: border-box;
	max-width: 100vw;
}