/* ──────────────────────────────────────────────────────────────────
   Swissblade base
   The foundation every page shares: tokens, background, glass, footer.
   These values used to live twice, in the inline CSS of audit.html and
   in static/css/blog.css, and had started to drift apart.

   Loaded after templates/_fonts.html and BEFORE blog.css or a page's
   own <style>, so page-specific rules still win.
   The rules behind it are in docs/DESIGN.md.
   ────────────────────────────────────────────────────────────────── */


/* ───────── TOKENS ───────── */
:root {
  --paper: #F7F5F0;
  --paper-2: #F1EEE6;
  --paper-hi: #FBF9F4;
  --ink: #171412;
  --ink-soft: #2B2621;
  --ink-mute: #525252;
  --muted: #7A7368;
  --hairline: #D9D4C9;
  --hairline-2: #C9C3B5;
  --forest: #0B4D3A;
  --forest-ink: #083A2C;
  /* Forest als schwache Flaeche: nur noch fuer den Fokusring. Flaechen
     hinter Chips und Icons tragen das Wolkenglas weiter unten. */
  --forest-soft: rgba(11, 77, 58, 0.10);
  --terra: #B8422B;
  --amber: #D9A441;
  --content: 1240px;
  --space-section: 120px;
  --space-lede: 64px;
  /* Type after the kinso.ai reference: Inter Tight for titles, Inter for text */
  --sans: 'Inter', Arial, Helvetica, sans-serif;
  --display: 'Inter Tight', 'Inter', Arial, Helvetica, sans-serif;
  /* glass system: shared recipes for buttons and chips (Apple liquid glass
     reference). Two variants: cta (forest glass) for primary actions and
     pill (clear glass) for chips and cards. Both mirror the background
     hues: forest body, amber glow. */
  --glass-cta-bg:
    linear-gradient(180deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.02) 46%, rgba(0,0,0,0.10) 100%),
    linear-gradient(160deg, rgba(14,90,69,0.92) 0%, rgba(11,77,58,0.90) 55%, rgba(8,58,44,0.88) 100%);
  --glass-cta-border: 1px solid rgba(255,255,255,0.30);
  --glass-cta-shadow:
    inset 0 1px 0 rgba(255,255,255,0.38),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 10px 26px -8px rgba(11,77,58,0.45),
    0 4px 24px -6px rgba(217,164,65,0.28);
  --glass-cta-shadow-hover:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.22),
    0 14px 34px -10px rgba(11,77,58,0.55),
    0 6px 30px -6px rgba(217,164,65,0.38);
  --glass-pill-bg: rgba(255,255,255,0.55);
  --glass-pill-border: 1px solid rgba(255,255,255,0.70);
  --glass-pill-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    0 10px 24px -14px rgba(23,20,18,0.35),
    0 1px 2px rgba(0,0,0,0.04);

  /* Wolkenglas, das vierte Rezept: Glas, das den Untergrund der Seite
     traegt statt einer eigenen Farbe. Terra und Amber links, Forest
     rechts, wie die Wolken in .page-bg. Es liegt unter kleinen Flaechen,
     die frueher hellgruen waren: Icon-Kreise, Marken-Chips, der
     Kategorie-Chip und die Kaesten im Artikel. Zeichen darin stehen in
     --ink-soft, nicht in Forest: das Wort fuehrt, das Icon begleitet. */
  --cloud-glass-bg:
    linear-gradient(135deg, rgba(184,66,43,0.13) 0%, rgba(217,164,65,0.15) 40%, rgba(11,77,58,0.16) 100%),
    rgba(255,255,255,0.52);
  --cloud-glass-border: 1px solid rgba(255,255,255,0.70);
  --cloud-glass-shadow:
    inset 0 1px 0 rgba(255,255,255,0.78),
    0 1px 2px rgba(23,20,18,0.05);

  /* Raised paper, the third surface. Depth is made of shadow alone: an
     inner light seam, two hard lips, one soft lift. Never a tinted fill. */
  --paper-key-bg: linear-gradient(180deg, #FDFCF8 0%, #F4F1E9 100%);
  --paper-key-border: 1px solid #DDD8CC;
  --paper-key-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 1px 0 #E6E1D5,
    0 2px 0 rgba(23,20,18,0.05),
    0 8px 16px -10px rgba(23,20,18,0.30);
}

/* ───────── BASE ───────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  /* anchor for .page-bg: absolute inset 0 must span the whole document */
  position: relative;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Graph-paper background with a wash, after the kinso.ai reference:
   warm (amber/terra) left, cool (forest) right, bright centre */
.page-bg {
  /* One grid for the whole document; only the hero colour clouds
     (terra/amber left, forest right) stay capped at the top. Sections
     mark themselves with soft washes only, never with a rule. */
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, rgba(23,20,18,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(23,20,18,0.05) 1px, transparent 1px),
    radial-gradient(120% 95% at -8% 4%, rgba(184,66,43,0.17) 0%, rgba(217,164,65,0.20) 32%, rgba(247,245,240,0) 64%),
    radial-gradient(110% 90% at 108% 10%, rgba(11,77,58,0.24) 0%, rgba(11,77,58,0.09) 42%, rgba(247,245,240,0) 68%);
  background-size: 6px 6px, 6px 6px, 100% 1250px, 100% 1250px;
  background-repeat: repeat, repeat, no-repeat, no-repeat;
  background-position: 0 0, 0 0, 0 0, 0 0;
}
.page-bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Nie hoeher als das Dokument: auf kurzen Seiten wie /scanning waere die
     Wolke sonst laenger als der Inhalt und haengte einen leeren Scrollweg
     an, der die Seite abgeschnitten aussehen laesst. */
  height: min(1250px, 100%);
  background: radial-gradient(ellipse at 50% 28%, rgba(251,249,244,0.85) 0%, rgba(251,249,244,0.35) 46%, rgba(247,245,240,0) 74%);
}

.wrap { max-width: var(--content); margin: 0 auto; padding: 0 40px; position: relative; }
.num { font-variant-numeric: tabular-nums lining-nums; }


/* ───────── STARS ─────────
   One star for the whole site. The shape is a CSS mask, the colour comes
   from --star, so every star on every page (and every star built in JS)
   looks the same and changes in one place.

   Single star, sized by the surrounding text or by --star-size:
     <i class="sb-star"></i>          <i class="sb-star off"></i>
   Row of five with a rating from 0 to 5 (fractions fill partially):
     <span class="sb-stars" role="img" aria-label="4.9 von 5" style="--rating:4.9"></span>
   Decorative rows next to a number take aria-hidden="true" instead. */
:root {
  --star: #FBBC04;
  --star-off: rgba(23, 20, 18, 0.15);
  --star-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.2 15.35 7.99 22.84 9.08 17.42 14.36 18.7 21.82 12 18.3 5.3 21.82 6.58 14.36 1.16 9.08 8.65 7.99Z' fill='%23000' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.sb-star, .sb-stars {
  display: inline-block;
  vertical-align: -0.12em;
  flex: 0 0 auto;
  height: var(--star-size, 1em);
  background-color: var(--star);
  -webkit-mask: var(--star-shape) center / contain no-repeat;
  mask: var(--star-shape) center / contain no-repeat;
}
.sb-star { width: var(--star-size, 1em); }
.sb-star.off { background-color: var(--star-off); }
.sb-stars {
  --rating: 5;
  --star-cell: calc(var(--star-size, 1em) * 1.18);
  width: calc(var(--star-cell) * 5);
  -webkit-mask: var(--star-shape) 0 0 / var(--star-cell) var(--star-size, 1em) repeat-x;
  mask: var(--star-shape) 0 0 / var(--star-cell) var(--star-size, 1em) repeat-x;
  background-color: transparent;
  background-image: linear-gradient(to right, var(--star) calc(var(--rating) / 5 * 100%), var(--star-off) 0);
}


/* ───────── SECTION WASH ─────────
   Sections are separated by colour, not by lines: a soft wash that fades
   into the paper at both ends. --feather sets how deep it fades, --wash
   carries the section's own colour. */
[data-wash] { position: relative; --feather: 120px; }
[data-wash]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--wash, none);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--feather), #000 calc(100% - var(--feather)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--feather), #000 calc(100% - var(--feather)), transparent 100%);
}
@media (min-width: 821px) and (max-width: 1100px) {
  [data-wash] { --feather: 90px; }
}
@media (max-width: 820px) {
  [data-wash] { --feather: 60px; }
}

/* ───────── GLASS ─────────
   Two recipes: forest glass for primary actions, clear glass for chips
   and cards. Both always with backdrop-filter, both with an opaque
   fallback further down. */
.glass-cta {
  background: var(--glass-cta-bg);
  border: var(--glass-cta-border);
  box-shadow: var(--glass-cta-shadow);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  color: #FBF9F4;
}
.glass-cta:hover { box-shadow: var(--glass-cta-shadow-hover); }
.glass-pill {
  background: var(--glass-pill-bg);
  border: var(--glass-pill-border);
  box-shadow: var(--glass-pill-shadow);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
}


/* ───────── PAPER KEY ─────────
   The third surface next to the two glass recipes: an opaque raised
   capsule. It carries no backdrop-filter, so it needs no entry in the
   fallback block and stays readable where glass gives up. Geometry is
   the caller's, same as for the glass classes. */
.paper-key {
  background: var(--paper-key-bg);
  border: var(--paper-key-border);
  box-shadow: var(--paper-key-shadow);
}


/* ───────── FOOTER ─────────
   A floating glass card above the page grid. Markup lives in
   templates/_footer.html, the styling only here. */
footer.site {
  color: var(--ink);
  padding: 48px clamp(16px, 3vw, 40px) 56px;
  position: relative;
  --feather: 120px;
}
/* liquid glass card: layered glass surface with a metallic rim, floating
   over the page grid (Vitrio footer reference) */
footer.site .wrap {
  max-width: var(--content);
  margin: 0 auto;
  padding: 56px clamp(24px, 4vw, 64px) 32px;
  position: relative;
  background:
    linear-gradient(150deg, rgba(255,255,255,0.88) 0%, rgba(247,245,240,0.66) 45%, rgba(241,238,230,0.78) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: 40px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(23,20,18,0.05),
    0 0 0 1px rgba(23,20,18,0.05),
    0 2px 6px rgba(23,20,18,0.05),
    0 34px 80px -32px rgba(23,20,18,0.4);
}
footer.site::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* pronounced color clouds so the glass card has something to refract
     (Vitrio reference puts a strong gradient under its card) */
  background:
    radial-gradient(70% 95% at 10% 18%, rgba(217,164,65,0.42) 0%, rgba(184,66,43,0.20) 45%, rgba(247,245,240,0) 75%),
    radial-gradient(75% 95% at 90% 78%, rgba(11,77,58,0.38) 0%, rgba(14,90,69,0.14) 50%, rgba(247,245,240,0) 78%),
    linear-gradient(135deg, rgba(217,164,65,0.10) 0%, rgba(241,238,230,0.5) 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--feather), #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--feather), #000 100%);
  pointer-events: none;
}

/* Breathing glow: two soft colour clouds drift across the glass card and
   swell slowly, so the surface looks alive without pulling focus. They are
   painted inside the card and clipped by its own radius; every real child
   sits above them on z-index 1. Colours stay in the page palette, warm
   (amber/terra) and cool (forest), and the two cycles run at different
   speeds so they never line up twice the same way. */
footer.site .wrap { overflow: hidden; isolation: isolate; }
footer.site .wrap > * { position: relative; z-index: 1; }
footer.site .wrap::before,
footer.site .wrap::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
footer.site .wrap::before {
  top: -38%;
  left: -14%;
  width: 50%;
  height: 176%;
  background: radial-gradient(closest-side,
    rgba(217,164,65,0.32) 0%,
    rgba(184,66,43,0.14) 48%,
    rgba(217,164,65,0) 76%);
  animation: footer-glow-warm 9s ease-in-out infinite alternate;
}
footer.site .wrap::after {
  top: -44%;
  right: -14%;
  width: 52%;
  height: 184%;
  background: radial-gradient(closest-side,
    rgba(11,77,58,0.25) 0%,
    rgba(14,90,69,0.10) 50%,
    rgba(11,77,58,0) 76%);
  animation: footer-glow-cool 13s ease-in-out infinite alternate;
}
@keyframes footer-glow-warm {
  0%   { transform: translate3d(0, 0, 0) scale(0.96);    opacity: 0.45; }
  50%  { transform: translate3d(32%, 6%, 0) scale(1.18); opacity: 1; }
  100% { transform: translate3d(62%, -4%, 0) scale(1.0); opacity: 0.5; }
}
@keyframes footer-glow-cool {
  0%   { transform: translate3d(0, 0, 0) scale(1.08);      opacity: 0.5; }
  50%  { transform: translate3d(-28%, -7%, 0) scale(0.92); opacity: 1; }
  100% { transform: translate3d(-56%, 5%, 0) scale(1.10);  opacity: 0.55; }
}
/* Reduced motion keeps the glow, it just stops travelling. */
@media (prefers-reduced-motion: reduce) {
  footer.site .wrap::before,
  footer.site .wrap::after {
    animation: none;
  }
  footer.site .wrap::before { transform: translate3d(22%, 4%, 0) scale(1.08); }
  footer.site .wrap::after  { transform: translate3d(-19%, -5%, 0) scale(1); }
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.2fr;
  gap: 64px;
  max-width: 1120px;
  margin: 0 auto 56px;
  align-items: start;
}
/* EN führt keine Ratgeber-Spalte, sonst bliebe die dritte Spur leer */
.footer-grid.two-col { grid-template-columns: 1.6fr 1.4fr; }
.foot-col h4 {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin: 0 0 20px;
}
.foot-col ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.foot-col ul a {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-decoration: none;
  transition: color .2s ease;
}
.foot-col ul a:hover { color: var(--forest); }

.foot-brand .brand-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  text-decoration: none;
}
.foot-brand .brand-row .foot-brand-logo {
  height: 56px;
  width: auto;
  display: block;
}
.foot-brand .brand-row .logo-mark {
  width: 36px; height: 36px;
  background: var(--forest);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #F3EFE4;
}
.foot-brand .brand-row .name {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.foot-brand .tagline {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 26px;
  max-width: 280px;
  letter-spacing: -0.005em;
}
.swiss-seal {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  border: 0;
  background: transparent;
}
.swiss-seal img {
  width: 150px;
  height: 150px;
  display: block;
  object-fit: contain;
}
.swiss-seal .cross {
  width: 22px; height: 22px;
  background: #D2042D;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.swiss-seal .seal-text {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 700;
  line-height: 1.3;
}

.foot-legal-div {
  height: 1px;
  background: var(--hairline);
  margin: 20px 0 18px;
}
.foot-address {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 10px;
  row-gap: 2px;
}
.foot-address .addr-item { white-space: nowrap; }
.foot-address .addr-company {
  font-weight: 700;
  color: var(--ink);
  flex-basis: 100%;
  margin-bottom: 2px;
}
.foot-address .addr-company + .addr-sep { display: none; }
.foot-address .addr-sep {
  color: var(--hairline);
  font-weight: 400;
  user-select: none;
}
.foot-address .addr-sep-comma {
  margin-left: -8px;       /* hug the street like a real comma */
  color: var(--ink-soft);
}
.foot-address a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.foot-address a:hover { border-bottom-color: var(--ink); }

.foot-bottom {
  max-width: 1120px;
  margin: 0 auto;
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--muted);
  flex-wrap: wrap;
}
.foot-bottom .made-ch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.foot-bottom .made-ch .mini-cross {
  width: 12px; height: 12px;
  background: #D2042D;
  border-radius: 1.5px;
  position: relative;
  display: inline-block;
}
.foot-bottom .made-ch .mini-cross::before,
.foot-bottom .made-ch .mini-cross::after {
  content: "";
  position: absolute;
  background: #fff;
  border-radius: 0.5px;
}
.foot-bottom .made-ch .mini-cross::before {
  left: 50%; top: 20%; bottom: 20%;
  width: 2px; transform: translateX(-50%);
}
.foot-bottom .made-ch .mini-cross::after {
  top: 50%; left: 20%; right: 20%;
  height: 2px; transform: translateY(-50%);
}

@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 48px 32px;
  }
  .foot-brand { grid-column: 1 / -1; }
  footer.site { padding: 72px 0 40px; }
}
@media (max-width: 540px) {
  .footer-grid { gap: 32px 24px; }
  .foot-bottom { flex-direction: column; align-items: flex-start; }
}

/* Footer, compact on phones */
@media (max-width: 820px) {
  /* FOOTER — kompakt, horizontal orientiert */
  footer.site { padding: 44px 0 24px !important; }
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    margin-bottom: 28px !important;
  }
  .foot-col h4 {
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
    margin-bottom: 10px !important;
  }
  /* Links als horizontale Pill-Reihe */
  .foot-col ul {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px 6px !important;
  }
  .foot-col ul li { display: inline-flex; }
  .foot-col ul a {
    display: inline-flex;
    align-items: center;
    font-size: 13px !important;
    padding: 7px 12px;
    background: var(--cloud-glass-bg);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    white-space: nowrap;
    line-height: 1;
  }
  .foot-col ul a:hover {
    background: var(--cloud-glass-bg);
    border-color: rgba(11, 77, 58, 0.25);
  }

  /* Brand kompakt: Logo oben, Tagline darunter */
  .foot-brand {
    display: block;
  }
  .foot-brand .brand-row {
    margin-bottom: 14px !important;
  }
  .foot-brand .brand-row .foot-brand-logo { height: 52px !important; }
  .foot-brand .tagline {
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    max-width: none !important;
  }
  .foot-brand .swiss-seal { display: none !important; }

  .foot-legal-div {
    margin: 4px 0 12px !important;
    grid-column: 1 / -1;
  }
  /* Adresse mobile: jede Zeile auf eigener Zeile, kein Separator, sauberer Rhythmus */
  .foot-address {
    flex-direction: column !important;
    gap: 4px !important;
    row-gap: 0 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  .foot-address .addr-sep { display: none !important; }
  .foot-address .addr-item {
    flex-basis: auto !important;
    width: 100%;
    text-align: center;
  }
  .foot-address .addr-company {
    font-size: 15px !important;
    margin-bottom: 6px !important;  /* mehr Atemraum unter dem Firmen-Namen */
  }

  .foot-bottom {
    padding-top: 16px !important;
    gap: 8px 12px !important;
    font-size: 11.5px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Center-align footer content on mobile (app-like) */
  .foot-brand { text-align: center; }
  .foot-brand .brand-row { justify-content: center; }
  .foot-col { text-align: center; }
  .foot-col ul { justify-content: center !important; }
  .foot-address { justify-content: center !important; text-align: center; }
}

@media (max-width: 820px) {
  footer.site { padding: 24px 12px 28px !important; }
  footer.site .wrap {
    border-radius: 24px;
    padding: 28px 18px 20px;
  }
  .foot-brand .brand-row .foot-brand-logo { height: 44px !important; }
  .footer-grid { gap: 18px !important; margin-bottom: 22px !important; }
}

.cloud-glass {
  background: var(--cloud-glass-bg);
  border: var(--cloud-glass-border);
  box-shadow: var(--cloud-glass-shadow);
  -webkit-backdrop-filter: blur(14px) saturate(165%);
  backdrop-filter: blur(14px) saturate(165%);
}

/* ───────── FALLBACK ─────────
   Without backdrop-filter glass carries no contrast, so fall back to
   opaque surfaces and keep the text readable. */
@supports not (backdrop-filter: blur(1px)) {
  .glass-pill { background: rgba(255,255,255,0.88); }
  .cloud-glass { background: rgba(255,255,255,0.88); }
  .glass-cta {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.02) 46%, rgba(0,0,0,0.10) 100%),
      linear-gradient(160deg, #0E5A45 0%, #0B4D3A 55%, #083A2C 100%);
  }
  footer.site .wrap { background: rgba(251,249,244,0.96); }
}


/* ───────── DARK ─────────
   Der Dunkelmodus haengt an html[data-theme="dark"], gesetzt vom Toggler
   im Header (templates/_header.html), gemerkt in localStorage unter
   "sb-theme". Standard bleibt hell. Seiten ohne Header (results) kennen
   den Modus nicht und bleiben hell. Die Token drehen das Papier ins
   warme Dunkel, die Palette (forest, amber, terra) bleibt dieselbe,
   nur heller abgemischt, damit sie auf Dunkel traegt. Fest codierte
   helle Glasflaechen uebersteuert jede Seite in ihrem eigenen CSS unter
   demselben Selektor. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #161410;
  --paper-2: #1C1914;
  --paper-hi: #211E17;
  --ink: #EDE8DC;
  --ink-soft: #D8D2C5;
  --ink-mute: #ABA599;
  --muted: #8E887C;
  --hairline: #35312A;
  --hairline-2: #423D32;
  --forest: #3FA37C;
  --forest-ink: #5CBE97;
  --forest-soft: rgba(63, 163, 124, 0.16);
  --cloud-glass-bg:
    linear-gradient(135deg, rgba(208,104,79,0.16) 0%, rgba(226,177,92,0.16) 40%, rgba(63,163,124,0.18) 100%),
    rgba(34,31,25,0.55);
  --cloud-glass-border: 1px solid rgba(255,255,255,0.12);
  --cloud-glass-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  --terra: #D0684F;
  --amber: #E2B15C;
  --star-off: rgba(255, 255, 255, 0.18);
  --glass-pill-bg: rgba(34, 31, 25, 0.55);
  --glass-pill-border: 1px solid rgba(255, 255, 255, 0.12);
  --glass-pill-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 24px -14px rgba(0, 0, 0, 0.6),
    0 1px 2px rgba(0, 0, 0, 0.35);
  --paper-key-bg: linear-gradient(180deg, #272319 0%, #1E1B14 100%);
  --paper-key-border: 1px solid #3A3529;
  --paper-key-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 1px 0 #0E0C09,
    0 2px 0 rgba(0, 0, 0, 0.35),
    0 8px 16px -10px rgba(0, 0, 0, 0.6);
}
/* Gitter und Farbwolken auf dunklem Papier */
:root[data-theme="dark"] .page-bg {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.045) 1px, transparent 1px),
    radial-gradient(120% 95% at -8% 4%, rgba(184,66,43,0.22) 0%, rgba(217,164,65,0.13) 32%, rgba(22,20,16,0) 64%),
    radial-gradient(110% 90% at 108% 10%, rgba(23,128,95,0.24) 0%, rgba(11,77,58,0.10) 42%, rgba(22,20,16,0) 68%);
}
:root[data-theme="dark"] .page-bg::after {
  background: radial-gradient(ellipse at 50% 28%, rgba(33,30,23,0.85) 0%, rgba(33,30,23,0.35) 46%, rgba(22,20,16,0) 74%);
}
/* Footer: dunkles Glas, gleiche Wolken, gedimmt */
:root[data-theme="dark"] footer.site .wrap {
  background: linear-gradient(150deg, rgba(41,38,31,0.88) 0%, rgba(30,28,22,0.72) 45%, rgba(26,24,19,0.82) 100%);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.35),
    0 0 0 1px rgba(0,0,0,0.3),
    0 2px 6px rgba(0,0,0,0.3),
    0 34px 80px -32px rgba(0,0,0,0.7);
}
:root[data-theme="dark"] footer.site::before { opacity: 0.55; }
:root[data-theme="dark"] .foot-address a:hover { border-bottom-color: var(--ink); }
@media (max-width: 820px) {
  :root[data-theme="dark"] .foot-col ul a,
  :root[data-theme="dark"] .foot-col ul a:hover { background: var(--cloud-glass-bg); }
}
@supports not (backdrop-filter: blur(1px)) {
  :root[data-theme="dark"] .glass-pill { background: rgba(30,28,23,0.94); }
  :root[data-theme="dark"] .cloud-glass { background: rgba(30,28,23,0.94); }
  :root[data-theme="dark"] footer.site .wrap { background: rgba(28,26,21,0.96); }
}
/* Logo: helle Wortmarke im Dunkelmodus. Jede Einbindung traegt beide
   Bilder, .logo-light und .logo-dark, sichtbar ist immer genau eines.
   :root:not(...) hebt die Spezifitaet ueber die display-Regeln der
   Einbindungsstellen, etwa .topbar .brand img. */
:root:not([data-theme="dark"]) img.logo-dark { display: none !important; }
:root[data-theme="dark"] img.logo-light { display: none !important; }

/* Ab 1480px waechst die Seite mit dem Fenster, Deckel 1720px. Alles, was eine
   eigene Breite hat, liest ab hier --content statt einer festen Zahl. Darunter
   aendert sich nichts. */
@media (min-width: 1480px) {
  :root { --content: min(1720px, 92vw); --space-section: 140px; }
  .footer-grid, .foot-bottom { max-width: 100%; }
  /* Die Farbwolken sind so hoch wie der Hero, der ab 1101px 100svh fuellt */
  .page-bg { background-size: 6px 6px, 6px 6px, 100% 1600px, 100% 1600px; }
  .page-bg::after { height: min(1600px, 100%); }
}