/* --- Design Tokens ---
   Shared between Web (ventilate.info / lueften.info) and Native App (Android first, iOS later).
   Use these names 1:1 as Android `colors.xml` / iOS `Asset Catalog` color references.
   Material 3 color roles in comments. --- */
:root {
  /* Brand — fresh air direction: cool whites, mint, petrol signal.
     Wirkt gesund, atmend, klinisch ohne steril zu sein. */
  --brand-primary:        #0A6E6B;  /* Petrol       (m3.primary) — signal  */
  --brand-primary-ink:    #054A48;  /* Petrol deep                         */
  --brand-secondary:      #5FA898;  /* Mint         (m3.secondary) — fresh */
  --brand-secondary-ink:  #2E7266;  /* Mint deep                           */
  --brand-tertiary:       #3E8D8A;  /* Aqua         (m3.tertiary)          */
  --brand-tertiary-ink:   #205F5E;  /* Aqua deep                           */

  /* Surfaces — cool near-white + mint/aqua tints, no warm beige */
  --bg:              #F4F7F5;       /* surface — cool paper, leicht minty */
  --bg-raised:       #FFFFFF;       /* surface-container-low              */
  --bg-sand:         #E6EEEA;       /* surface-container-high — pale mint */
  --bg-indoor:       #F0F3F1;       /* domain: indoor   — neutrales Weiß   */
  --bg-outdoor:      #DFEDE8;       /* domain: outdoor  — pale mint        */

  /* Ink (on-surface) — slightly cooler greens-charcoal */
  --ink:       #12201F;             /* on-surface high emphasis  */
  --ink-soft:  #354644;             /* on-surface medium         */
  --ink-mute:  #6B7A77;             /* on-surface low            */

  /* Lines (outline / outline-variant) */
  --line:           #C9D4D0;
  --line-soft:      #DCE5E1;
  --line-outdoor:   #A8C7BE;

  /* Semantic aliases (legacy names still used in CSS, remapped to fresh palette) */
  --sage:       var(--brand-secondary);
  --sage-deep:  var(--brand-secondary-ink);
  --petrol:     var(--brand-primary);
  --petrol-ink: var(--brand-primary-ink);
  --aqua:       var(--brand-tertiary);
  --aqua-deep:  var(--brand-tertiary-ink);

  /* Signal / Ampel — kühler abgestimmt, keine Erd-/Senf-Töne mehr */
  --green:    #2F7A52;  --green-bg: #D6EBDF;
  --amber:    #B07A0E;  --amber-bg: #FBEACC;
  --red:      #A8362A;  --red-bg:   #F5D9D4;

  /* Monetarisierung — dezent, passt zum frischen Stil */
  --ad-bg:         #FFFFFF;
  --ad-border:     #DCE5E1;
  --ad-label-bg:   #12201F;
  --ad-label-ink:  #F4F7F5;
  --ad-accent:     var(--brand-primary);

  /* Shape tokens (mirror Android Material shape scale) */
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius:     4px;
  --radius-md:  8px;
  --radius-lg:  8px;
  --radius-xl:  16px;
  --radius-full: 999px;

  /* Typography
     Web fallback: Inter + Instrument Serif.
     App: substitute with system-native Roboto (Android) / SF Pro (iOS) keeping weights identical. */
  --font-serif: 'Instrument Serif', 'Source Serif Pro', Georgia, serif;
  --font-sans:  'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:  'JetBrains Mono', 'Roboto Mono', ui-monospace, monospace;

  /* Elevation (maps to Material 3 elevation levels 0-3 / iOS shadow presets) */
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(20,30,30,0.06);
  --elev-2: 0 2px 6px rgba(20,30,30,0.08), 0 1px 2px rgba(20,30,30,0.04);
  --elev-3: 0 8px 24px -12px rgba(20,30,30,0.12), 0 2px 4px rgba(20,30,30,0.06);

  /* Layout */
  --maxw:       1040px;
  --maxw-read:   680px;
  --touch-min:   44px;   /* iOS HIG min tap target */
  --touch-rec:   48px;   /* Material recommended tap target */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: var(--petrol); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--petrol-ink); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.read { max-width: var(--maxw-read); margin: 0 auto; padding: 0 24px; }

/* --- Header / Nav --- */
.site-header {
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg);
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(1.1);
}
.site-header .inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px; max-width: var(--maxw); margin: 0 auto;
}
.brand {
  display: flex; align-items: baseline; gap: 10px;
  text-decoration: none; color: var(--ink);
}
.brand .mark {
  width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--sage) 0%, var(--petrol) 85%);
  display: inline-block; transform: translateY(2px);
}
.brand .name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px; letter-spacing: -0.005em;
}
.brand .tld {
  color: var(--ink-mute);
  font-family: var(--font-mono); font-size: 12px;
}
.nav {
  display: flex; gap: 22px; align-items: center;
  font-size: 14px;
}
.nav a {
  color: var(--ink-soft); text-decoration: none;
  padding: 8px 12px; border-radius: var(--radius-full);
  transition: background 0.12s, color 0.12s;
}
.nav a:hover { color: var(--ink); background: var(--bg-sand); }
.nav a.nav-primary {
  background: var(--ink);
  color: var(--bg-raised);
  padding: 8px 16px;
  font-weight: 500;
}
.nav a.nav-primary:hover {
  background: var(--petrol-ink);
  color: var(--bg-raised);
}
.nav-links {
  display: flex;
  gap: 4px;
  align-items: center;
}
.lang-toggle {
  display: inline-flex; border: 1px solid var(--line);
  border-radius: 999px; overflow: hidden;
  font-family: var(--font-mono); font-size: 11px;
  background: var(--bg-raised);
  margin-left: 8px;
}
.lang-toggle button {
  border: 0; background: transparent;
  padding: 6px 10px; cursor: pointer;
  color: var(--ink-mute); letter-spacing: 0.06em;
}
.lang-toggle button.active {
  background: var(--ink); color: var(--bg);
}

/* --- Hero --- */
.hero {
  padding: 56px 0 24px;
}
.hero .eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sage-deep);
  margin-bottom: 16px;
}
.hero h1 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  max-width: 760px;
  text-wrap: balance;
  color: var(--ink);
}
.hero h1 em {
  font-style: normal; color: var(--aqua-deep);
  border-bottom: 3px solid var(--aqua);
  padding-bottom: 1px;
}
.hero .lede {
  font-size: 17px; color: var(--ink-soft);
  max-width: 560px; margin: 0;
}

/* --- Calculator --------------------------------------------------------- */
.calc {
  margin: 40px 0 80px;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}
.calc-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 24px;
  align-items: stretch;
}
.calc-inputs {
  padding: 0;
  background: var(--bg-raised);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.calc-output {
  padding: 40px 40px 36px;
  background: var(--bg-raised);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  display: flex;
}

.calc-header {
  padding: 22px 28px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.calc h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
}
.calc .sub {
  color: var(--ink-mute); font-size: 13px;
  margin: 6px 0 0;
}

/* --- Panels: indoor + outdoor, klar getrennt als zwei Karten ------------ */
.panel {
  padding: 24px 28px 28px;
}
.panel.indoor  {
  background: var(--bg-raised);
  border-bottom: 1px solid var(--line-soft);
}
.panel.outdoor {
  background: var(--bg-outdoor);
}
.panel-head {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 18px;
}
.panel-head .tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-soft);
}
.panel.outdoor .tag {
  border-color: var(--line-outdoor);
  color: var(--aqua-deep);
}
.panel-head .desc {
  font-size: 12.5px; color: var(--ink-mute);
  letter-spacing: 0;
}
.input-group {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
}
label.field {
  display: flex; flex-direction: column; gap: 8px;
}
label.field > span {
  font-size: 12px; color: var(--ink-mute);
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Inputs: luftig, Premium-Tool-Feel */
.input-row {
  display: flex; align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  height: 52px;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.panel.outdoor .input-row { border-color: var(--line-outdoor); }
.input-row:focus-within {
  border-color: var(--petrol);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--petrol) 14%, transparent);
}
.input-row input {
  flex: 1; min-width: 0;
  border: 0; background: transparent;
  padding: 0 14px;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  outline: none;
  height: 100%;
}
.input-row input::-webkit-outer-spin-button,
.input-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.input-row input[type=number] { -moz-appearance: textfield; }
.input-row .unit {
  padding: 0 14px 0 4px;
  color: var(--ink-mute);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.01em;
  border-left: 0;
}

/* --- Output / Ergebnisbox — das Herzstück ------------------------------- */
.signal {
  display: flex; flex-direction: column; gap: 28px;
  width: 100%;
}
.signal-head {
  display: flex; flex-direction: column;
}
.signal-top {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 18px;
}
.dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--ink-mute);
  flex-shrink: 0;
}
.dot.green { background: var(--green); }
.dot.amber { background: var(--amber); }
.dot.red   { background: var(--red); }

.signal .label {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
}
.signal .verdict {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(36px, 4.6vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.signal.green .verdict { color: var(--green); }
.signal.amber .verdict { color: var(--amber); }
.signal.red   .verdict { color: var(--red); }

.signal .verdict-sub {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 18px;
  color: var(--ink-soft);
  margin: 12px 0 0;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.signal .explain {
  color: var(--ink-mute);
  font-size: 14px;
  margin: 14px 0 0;
  max-width: 44ch;
  line-height: 1.55;
}

/* Metrics: neutrale Flächen, Farbe NICHT mehr zum Kennzeichnen benutzen */
.metrics {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: auto;
  border: 0;
  background: transparent;
  overflow: visible;
}
.metric {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  padding: 14px 16px 12px;
}
.metric .k {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  text-transform: none;
  margin-bottom: 4px;
  font-weight: 500;
}
.metric .v {
  font-family: var(--font-sans);
  font-size: 22px; font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.1;
}
.metric .v small {
  font-family: var(--font-sans);
  font-size: 12px; color: var(--ink-mute);
  margin-left: 3px;
  font-weight: 400;
  letter-spacing: 0;
}
.metric .k-sub {
  font-family: var(--font-sans);
  font-size: 10.5px;
  color: var(--ink-mute);
  opacity: 0.7;
  margin-top: 4px;
  font-weight: 400;
  letter-spacing: 0;
}

/* --- Sections --- */
section.block { padding: 64px 0; border-top: 1px solid var(--line-soft); }
section.block.alt { background: var(--bg-sand); border-top: 0; }

.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 36px; gap: 24px;
  flex-wrap: wrap;
}
.section-head h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 30px);
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
  color: var(--ink);
}
.section-head p {
  color: var(--ink-soft);
  max-width: 420px;
  margin: 0;
  font-size: 15px;
}

/* Problem tiles */
.tiles {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.tile {
  background: #fff;
  padding: 26px 24px 28px;
  display: flex; flex-direction: column;
  min-height: 220px;
  text-decoration: none; color: var(--ink);
  transition: background 0.15s;
  position: relative;
}
.tile:hover { background: var(--bg-raised); color: var(--ink); }
.tile .num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--sage-deep);
  letter-spacing: 0.1em;
  margin-bottom: 20px;
  font-weight: 500;
}
.tile h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  line-height: 1.25;
  color: var(--ink);
}
.tile p {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0 0 auto;
  line-height: 1.5;
}
.tile .more {
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--petrol);
  letter-spacing: 0.04em;
}
.tile .more::after { content: " →"; }

/* Tips */
.tips {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
.tip .n {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--sage-deep);
  letter-spacing: 0.1em;
  line-height: 1;
  margin-bottom: 14px;
  font-weight: 500;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.tip h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.tip p { color: var(--ink-soft); font-size: 15px; margin: 0; }

/* Trust note */
.trust {
  padding: 48px 0 56px;
  border-top: 1px solid var(--line-soft);
  text-align: center;
}
.trust p {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 15px;
  color: var(--ink-soft);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.5;
}

/* --- Footer --- */
footer.site-footer {
  background: var(--ink);
  color: var(--bg);
  padding: 56px 0 40px;
}
footer.site-footer .inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 40px;
  max-width: var(--maxw); margin: 0 auto; padding: 0 24px;
}
footer.site-footer .brand .name { color: var(--bg); }
footer.site-footer .brand .tld { color: #8C9595; }
footer .col h4 {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8C9595;
  margin: 0 0 14px;
  font-weight: 500;
}
footer .col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
footer .col a { color: var(--bg); text-decoration: none; font-size: 14px; }
footer .col a:hover { color: var(--sage); }
footer .about { color: #B5BCBC; font-size: 13px; line-height: 1.6; max-width: 320px; margin-top: 10px; }
footer .bottom {
  border-top: 1px solid #2F3A3A;
  margin-top: 40px; padding-top: 20px;
  max-width: var(--maxw); margin-left: auto; margin-right: auto;
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px;
  color: #8C9595;
  padding: 20px 24px 0;
}
footer .lang-toggle { background: #2F3A3A; border-color: #3F4A4A; }
footer .lang-toggle button { color: #B5BCBC; }
footer .lang-toggle button.active { background: var(--bg); color: var(--ink); }

/* --- Responsive --- */
@media (max-width: 860px) {
  .calc-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  /* Mobile: Ergebnis ZUERST, Inputs darunter */
  .calc-output { order: -1; padding: 28px 24px 24px; }
  .calc-inputs { order: 0; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .tips { grid-template-columns: 1fr; gap: 32px; }
  footer.site-footer .inner { grid-template-columns: 1fr; gap: 32px; }
  .nav .nav-links { display: none; }
}
@media (max-width: 540px) {
  .hero { padding: 48px 0 24px; }
  .input-group { grid-template-columns: 1fr; gap: 14px; }
  section.block { padding: 48px 0; }
  .tiles { grid-template-columns: 1fr; }
  .calc-inputs { border-radius: var(--radius-xl); }
  .panel { padding: 20px 22px 22px; }
  .calc-header { padding: 18px 22px 14px; }
  .signal .verdict { font-size: clamp(32px, 9vw, 44px); }
  .metrics { grid-template-columns: 1fr 1fr; gap: 8px; }
}

/* --- Article Page --- */
.article {
  padding: 56px 0 96px;
}
.article .breadcrumb {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  margin-bottom: 28px;
}
.article .breadcrumb a { color: var(--ink-mute); text-decoration: none; }
.article .breadcrumb a:hover { color: var(--ink); }
.article h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(32px, 3.8vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  text-wrap: balance;
  color: var(--ink);
}
.article .meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  margin-bottom: 48px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line-soft);
  display: flex; gap: 20px; flex-wrap: wrap;
}
.article .lede {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 40px;
}
.article h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.015em;
  margin: 48px 0 14px;
  line-height: 1.2;
  color: var(--ink);
}
.article h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  margin: 32px 0 8px;
}
.article p { margin: 0 0 18px; color: var(--ink); }
.article p.callout {
  background: var(--bg-sand);
  border-left: 2px solid var(--petrol);
  padding: 18px 22px;
  font-size: 16px;
  margin: 28px 0;
  color: var(--ink-soft);
}
.article ul {
  padding-left: 22px; margin: 0 0 24px;
}
.article ul li { margin-bottom: 8px; }
.article .tldr {
  background: var(--bg-indoor);
  border: 1px solid var(--line);
  border-left: 3px solid var(--sage-deep);
  border-radius: var(--radius-lg);
  padding: 22px 28px;
  margin: 0 0 48px;
}
.article .tldr h4 {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sage-deep);
  margin: 0 0 12px;
}
.article .tldr ul { margin: 0; padding-left: 20px; }

.infographic {
  margin: 48px 0;
  padding: 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.infographic .caption {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  text-transform: uppercase;
  margin-bottom: 20px;
}
.infographic svg { width: 100%; height: auto; }

.recommend {
  font-size: 15px;
  color: var(--ink-soft);
  padding: 24px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  margin: 40px 0;
}
.recommend strong { color: var(--ink); font-weight: 600; }
.recommend a { color: var(--petrol); }

/* --- Monetarisierung --- */
.ad-slot {
  background: var(--ad-bg);
  border: 1px solid var(--ad-border);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  margin: 28px 0;
  display: flex; align-items: flex-start; gap: 18px;
  position: relative;
}
.ad-slot .ad-label {
  position: absolute; top: 10px; right: 12px;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  background: transparent;
  padding: 0;
}
.ad-slot .ad-thumb {
  width: 72px; height: 72px; flex-shrink: 0;
  border: 1px solid var(--line); border-radius: 4px;
  background:
    repeating-linear-gradient(45deg, transparent 0 6px, rgba(22,34,33,0.04) 6px 7px),
    var(--bg);
}
.ad-slot .ad-body { flex: 1; }
.ad-slot .ad-kicker {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--sage-deep);
  margin-bottom: 4px;
}
.ad-slot .ad-title {
  font-family: var(--font-sans); font-weight: 600;
  font-size: 16px; color: var(--ink);
  margin: 0 0 4px;
}
.ad-slot .ad-sub {
  font-size: 13px; color: var(--ink-soft); margin: 0 0 10px;
  max-width: 52ch;
}
.ad-slot .ad-link {
  font-family: var(--font-sans); font-weight: 500;
  font-size: 13px; color: var(--petrol); text-decoration: none;
}
.ad-slot .ad-link::after { content: " →"; }
.ad-slot .ad-link:hover { color: var(--petrol-ink); }

.ad-banner {
  background: var(--ad-bg);
  border: 1px solid var(--ad-border);
  border-radius: var(--radius-md);
  margin: 32px 0;
  padding: 10px 14px;
  min-height: 90px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  font-family: var(--font-mono);
  font-size: 12px; color: var(--ink-mute);
  letter-spacing: 0.06em;
}
.ad-banner::before {
  content: 'ANZEIGE';
  position: absolute; top: 6px; left: 10px;
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 0.14em;
  color: var(--ink-mute);
}
.ad-inline {
  font-size: 13px;
  background: var(--bg-raised);
  border-left: 2px solid var(--sage-deep);
  padding: 10px 14px; margin: 20px 0;
  color: var(--ink-soft);
  border-radius: 0 4px 4px 0;
}
.ad-inline::before {
  content: 'Anzeige · ';
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
@media (max-width: 540px) {
  .ad-slot { flex-direction: column; }
  .ad-slot .ad-thumb { width: 100%; height: 100px; }
}

.article .next-read {
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--line-soft);
}
.article .next-read h4 {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 16px;
}
.article .next-read a {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 20px;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.article .next-read a:hover { color: var(--petrol); }
.article .next-read a::after { content: " →"; color: var(--petrol); }

/* ============================================================
   ADDITIONS FOR FULL SITE BUILD
   Guides index, static pages, contact form, tables.
   Kept consistent with existing design tokens.
   ============================================================ */

/* --- Page hero (smaller than landing hero, used on every secondary page) --- */
.page-hero {
  padding: 56px 0 32px;
  border-bottom: 1px solid var(--line-soft);
}
.page-hero .eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sage-deep);
  margin-bottom: 14px;
}
.page-hero h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  max-width: 760px;
  text-wrap: balance;
  color: var(--ink);
}
.page-hero .lede {
  font-size: 17px; color: var(--ink-soft);
  max-width: 640px; margin: 0;
}

/* --- Guides index grid --- */
.guide-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 48px 0 32px;
}
.guide-card {
  background: #fff;
  padding: 28px 26px 30px;
  display: flex; flex-direction: column;
  text-decoration: none; color: var(--ink);
  transition: background 0.15s;
  min-height: 200px;
}
.guide-card:hover { background: var(--bg-raised); color: var(--ink); }
.guide-card .num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--sage-deep);
  letter-spacing: 0.1em;
  margin-bottom: 16px;
  font-weight: 500;
}
.guide-card h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  line-height: 1.25;
}
.guide-card p {
  font-size: 14.5px;
  color: var(--ink-soft);
  margin: 0 0 auto;
  line-height: 1.5;
}
.guide-card .more {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--petrol);
  letter-spacing: 0.04em;
}
.guide-card .more::after { content: " →"; }

@media (max-width: 720px) {
  .guide-grid { grid-template-columns: 1fr; }
}

/* --- Static / legal pages (Impressum, Datenschutz, Kontakt, 404) --- */
.static {
  padding: 48px 0 96px;
}
.static h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.015em;
  margin: 40px 0 12px;
  line-height: 1.2;
  color: var(--ink);
}
.static h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  margin: 28px 0 8px;
  color: var(--ink);
}
.static p { margin: 0 0 14px; color: var(--ink); }
.static ul { padding-left: 22px; margin: 0 0 18px; }
.static ul li { margin-bottom: 6px; }
.static dl {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 8px 24px;
  margin: 20px 0 32px;
  font-size: 15px;
}
.static dt { color: var(--ink-mute); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; padding-top: 4px; }
.static dd { margin: 0; color: var(--ink); }

@media (max-width: 540px) {
  .static dl { grid-template-columns: 1fr; gap: 4px; }
  .static dt { padding-top: 8px; border-top: 1px solid var(--line-soft); }
}

/* --- 404 --- */
.notfound {
  padding: 80px 0 120px;
  text-align: center;
}
.notfound .code {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.2em;
  color: var(--ink-mute);
  margin-bottom: 16px;
}
.notfound h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 56px);
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.notfound p {
  font-size: 17px; color: var(--ink-soft);
  max-width: 480px; margin: 0 auto 28px;
}
.notfound .cta {
  display: inline-block;
  background: var(--ink);
  color: var(--bg-raised);
  padding: 12px 22px;
  border-radius: var(--radius-full);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
}
.notfound .cta:hover { background: var(--petrol-ink); color: var(--bg-raised); }

/* --- Contact form (mailto link, no backend) --- */
.contact-card {
  background: var(--bg-raised);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  padding: 32px;
  margin: 32px 0;
}
.contact-card .row {
  display: flex; align-items: baseline; gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}
.contact-card .row:last-child { border-bottom: 0; }
.contact-card .row .label {
  flex: 0 0 120px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.contact-card .row .val {
  flex: 1;
  font-size: 15px;
  color: var(--ink);
}
.contact-card .row .val a { color: var(--petrol); text-decoration: none; }
.contact-card .row .val a:hover { color: var(--petrol-ink); }

@media (max-width: 540px) {
  .contact-card { padding: 24px; }
  .contact-card .row { flex-direction: column; gap: 4px; }
  .contact-card .row .label { flex: none; }
}

/* --- Comparison table (used in hygrometer guide etc.) --- */
.cmp-table {
  width: 100%;
  border-collapse: collapse;
  margin: 32px 0;
  font-size: 14px;
}
.cmp-table th, .cmp-table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.cmp-table th {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
  background: var(--bg-sand);
  border-bottom: 1px solid var(--line);
}
.cmp-table td { color: var(--ink); }
.cmp-table td.muted { color: var(--ink-mute); }

/* --- Article: ensure the brand mark works in articles too --- */
.article a.skip-to-calc {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--petrol);
  text-decoration: none;
}
.article a.skip-to-calc::after { content: " →"; }

/* --- Replace gradient mark with proper window glyph --- */
.brand .mark {
  width: 18px; height: 18px;
  background: none;
  border: 1.6px solid var(--petrol);
  border-radius: 1px;
  position: relative;
  transform: translateY(2px);
}
.brand .mark::before {
  content: "";
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1.6px; background: var(--petrol);
  transform: translateX(-50%);
}
.brand .mark::after {
  content: "";
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 1.6px; background: var(--petrol);
  transform: translateY(-50%);
}
footer.site-footer .brand .mark {
  border-color: var(--sage);
}
footer.site-footer .brand .mark::before,
footer.site-footer .brand .mark::after {
  background: var(--sage);
}

/* --- Mobile nav: at very small sizes, show calc as small pill, hide other links handled in original responsive block --- */
@media (max-width: 540px) {
  .nav { gap: 10px; }
  .nav a.nav-primary { padding: 6px 12px; font-size: 13px; }
}

/* --- Print-friendly (Sachverständigen-Berichte könnten Artikel als PDF wollen) --- */
@media print {
  .site-header, .site-footer, .ad-slot, .ad-banner, .ad-inline, .next-read { display: none; }
  body { background: #fff; }
  .article, .static { padding: 0; }
}