:root {
  --color-bg: #ffffff;
  --color-bg-alt: #f6f7f9;
  --color-text: #1c2530;
  --color-text-muted: #5a6472;
  --color-accent: #2f3e63;
  --color-accent-light: #eceef6;
  --color-border: #e3e6ea;
  --max-width: 760px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* --- Redesign token system (2026-07-11), additive — old tokens above stay untouched
     until every page is migrated. Scoped for use via the .site-v2 body class. --- */
  --ink: #12172a;
  --ink-soft: #232a45;
  --navy: #2f3e63;
  --navy-soft: #5b6890;
  --paper: #f6f3ec;
  --paper-line: #e2ddd0;
  --paper-ink: #1b2033;
  --brass: #b8863f;
  --brass-light: #e8d2a8;
  --brass-ink: #7a5a26; /* darkened brass for text-on-paper: ~5.7:1 contrast vs #b8863f's ~2.9:1 */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body-v2: 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* --- Atelier tokens (2026-07-31), additive — the v2 tokens above stay
     untouched until every page is migrated. Scoped via the .site-v3 body
     class. Forest ink on warm paper, sand as the single accent.

     Contrast rules that must survive the migration (measured, WCAG 2.x):
       --sand is NEVER text on paper (2.0:1) — surfaces, fills and markers
         only. On forest it is legible as text (7.5:1).
       --moss-deep is the secondary text colour on paper (5.0:1). --moss is
         for text on forest (6.3:1), not on paper.
       --terracotta is fills only (3.3:1); use --terracotta-text (4.9:1)
         when a deviation has to be written out. --- */
  --forest: #141f18;
  --forest-soft: #1c2a20;
  --forest-raised: #243329;
  --paper-v3: #f2efe6;
  /* rev. 2026-08-01. Currently unused on the web: it names the app's Home
     header band above the ink stage panel, and the website has no equivalent
     surface — the hero here is forest. Carried anyway so web and app share one
     vocabulary. Small secondary text on it must be #556355 (5.0:1); --moss-deep
     only reaches 4.6:1 against this. */
  --paper-header: #e5e0cf;
  --paper-deep: #eae6d9;
  --ink-v3: #1e2b23;
  --moss: #8fa392;
  --moss-deep: #5a6a5e;      /* secondary text on paper, 5.0:1 */
  --sand: #d9a441;
  --sand-ink: #3e2f0e;       /* text on sand, 5.8:1 */
  --terracotta: #c46a4a;     /* fills only on paper */
  --terracotta-text: #a34e31;/* 4.9:1 on paper */
  --line-v3: rgba(30,43,35,.12);
  --line-v3-dark: rgba(233,229,216,.12);
  --font-display-v3: 'Newsreader', Georgia, serif;
}

/* Self-hosted (no external requests — see Datenschutzerklärung) */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/space-grotesk-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-500.woff2') format('woff2');
}
/* Newsreader (SIL OFL) — display face of the Atelier direction. Variable on
   both wght (400–600) and opsz (6–72); the browser applies the optical size
   automatically, which is why headlines and body-size serif both look right
   without extra files. Latin subset only: it covers German completely
   (umlauts, ß, €, quotes, en dash) and keeps the payload down. */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/newsreader-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/newsreader-italic-variable.woff2') format('woff2');
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

header.site-header {
  border-bottom: 1px solid var(--color-border);
  padding: 20px 24px;
}

.header-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--color-text);
}
.logo span { color: var(--color-accent); }

nav.site-nav a {
  margin-left: 24px;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  font-weight: 500;
}
nav.site-nav a:hover { color: var(--color-text); text-decoration: none; }
nav.site-nav a.lang-switch {
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.8rem;
  font-weight: 600;
}
nav.site-nav a.lang-switch:hover {
  border-color: var(--color-text-muted);
  text-decoration: none;
}

.hero {
  max-width: 1000px;
  margin: 0 auto;
  padding: 88px 24px 64px;
  text-align: center;
}

.hero .eyebrow {
  display: inline-block;
  background: var(--color-accent-light);
  color: var(--color-accent);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 20px;
  letter-spacing: 0.02em;
}

.hero h1 {
  font-size: 2.5rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}

.hero p.subhead {
  font-size: 1.15rem;
  color: var(--color-text-muted);
  max-width: 560px;
  margin: 0 auto 32px;
}

.cta-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
}
.btn-primary {
  background: var(--color-accent);
  color: #fff;
}
.btn-primary:hover { background: #212c49; text-decoration: none; }
.btn-secondary {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.btn-secondary:hover { border-color: var(--color-text-muted); text-decoration: none; }

.note-placeholder {
  max-width: 1000px;
  margin: 0 auto 64px;
  padding: 0 24px;
}
.note-placeholder .box {
  background: var(--color-bg-alt);
  border: 1px dashed var(--color-border);
  border-radius: 10px;
  padding: 16px 20px;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}


.app-teaser {
  max-width: 700px;
  margin: 0 auto 64px;
  padding: 40px 36px;
  background: var(--color-accent-light);
  border: 1px solid var(--color-border);
  border-radius: 16px;
}
.app-teaser .eyebrow { margin-bottom: 14px; }
.app-teaser h2 {
  font-size: 1.5rem;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.app-teaser > p {
  margin: 0 0 20px;
  color: var(--color-text);
  font-size: 1rem;
}
.app-teaser-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.app-teaser-list li {
  padding-left: 28px;
  position: relative;
  font-size: 0.97rem;
}
.app-teaser-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: 700;
}
.app-teaser-timeline {
  font-size: 0.92rem;
  color: var(--color-text);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 12px 16px;
  margin: 0 0 20px;
}
.app-teaser-note {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  margin: 0 0 20px !important;
}

.blog-section {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 72px 24px;
}
/* Direct child only: the section title. On the homepage this band is one
   section among many (h2); on /blog/ and /rechner/ it is the page itself
   (h1). The child combinator keeps this off the card headings nested
   inside .post-card, which are one level down and styled separately. */
.blog-section > h1,
.blog-section > h2 {
  font-size: 1.6rem;
  margin: 0 0 8px;
}
.blog-section .section-sub {
  color: var(--color-text-muted);
  margin: 0 0 36px;
}

.post-card {
  display: block;
  padding: 20px 0;
  border-top: 1px solid var(--color-border);
}
.post-card:hover { text-decoration: none; }
.post-card:last-child { border-bottom: 1px solid var(--color-border); }
.post-card .post-date {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* h2 on the listing pages (below their h1), h3 on the homepage (below the
   section h2) — same card, different depth in the page outline. */
.post-card h2,
.post-card h3 {
  margin: 6px 0 6px;
  color: var(--color-text);
  font-size: 1.15rem;
}
.post-card p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.newsletter-section {
  background: var(--color-bg-alt);
  padding: 64px 24px;
  margin-top: 8px;
}
.newsletter-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}
.newsletter-inner h2 {
  font-size: 1.6rem;
  margin: 0 0 8px;
}
.newsletter-form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-top: 24px;
}
.newsletter-form .form-row {
  flex: 1;
  min-width: 220px;
  margin-bottom: 0;
}
.newsletter-form button {
  border: none;
  cursor: pointer;
}

.contact-section {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 72px 24px 96px;
}
.contact-section h2 {
  font-size: 1.6rem;
  margin: 0 0 8px;
}
.hidden-field { display: none; }
.form-row {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-row label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
}
.form-row input,
.form-row textarea {
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-family: var(--font);
  font-size: 0.95rem;
  color: var(--color-text);
}
.form-row textarea { resize: vertical; }
.contact-form button {
  border: none;
  cursor: pointer;
  margin-top: 4px;
}

footer.site-footer {
  border-top: 1px solid var(--color-border);
  padding: 32px 24px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

/* Article page */
.article {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 56px 24px 96px;
}
.article .post-date {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.article h1 {
  font-size: 2.1rem;
  line-height: 1.2;
  margin: 10px 0 24px;
  letter-spacing: -0.02em;
}
.article h2 {
  font-size: 1.3rem;
  margin: 40px 0 12px;
}
.article p {
  margin: 0 0 18px;
  font-size: 1.02rem;
}
.article ul {
  margin: 0 0 18px;
  padding-left: 22px;
}
.article li { margin-bottom: 8px; }
.article .tldr {
  background: var(--color-accent-light);
  border-radius: 10px;
  padding: 18px 22px;
  margin: 0 0 32px;
  font-size: 0.98rem;
}
.article .disclaimer {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.article .sources {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.article .sources a { color: var(--color-text-muted); text-decoration: underline; }
.article table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 24px;
  font-size: 0.95rem;
}
.article th,
.article td {
  text-align: left;
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--color-border);
}
.article th {
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.back-link {
  display: inline-block;
  margin-bottom: 24px;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

@media (max-width: 640px) {
  .hero h1 { font-size: 1.9rem; }
  nav.site-nav a { margin-left: 14px; font-size: 0.88rem; }
}

/* ============================================================
   REDESIGN SYSTEM (2026-07-11) — scoped to <body class="site-v2">
   so pages not yet migrated keep using the rules above untouched.
   ============================================================ */

.site-v2 { font-family: var(--font-body-v2); color: var(--paper-ink); background: var(--paper); }
.site-v2 a { color: inherit; text-decoration: none; }
.site-v2 .wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.site-v2 h1, .site-v2 h2, .site-v2 h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }

/* NAV */
.site-v2 header.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(18,23,42,0.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(184,134,63,0.25);
  padding: 0;
}
.site-v2 .header-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px; max-width: 1180px; margin: 0 auto;
}
.site-v2 .logo, .site-v2 a.logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
  color: #fff; letter-spacing: 0.01em;
}
.site-v2 .logo span { color: var(--brass-light); }
.site-v2 .logo svg { width: 24px; height: 24px; flex-shrink: 0; }
.site-v2 nav.site-nav { display: flex; align-items: center; gap: 28px; }
.site-v2 nav.site-nav a {
  font-size: 0.92rem; color: #c9cee0; font-weight: 500; margin-left: 0;
  transition: color .15s ease;
}
.site-v2 nav.site-nav a:hover { color: #fff; }
.site-v2 nav.site-nav a.lang-switch {
  border: 1px solid rgba(255,255,255,0.25); border-radius: 3px;
  padding: 6px 12px; font-size: 0.8rem; font-weight: 600; color: #fff;
}
.site-v2 nav.site-nav a.lang-switch:hover { border-color: #fff; background: rgba(255,255,255,0.06); }
.site-v2 nav.site-nav a.nav-cta {
  font-family: var(--font-body-v2); font-weight: 600; font-size: 0.86rem;
  background: var(--brass); color: #181109; padding: 9px 18px; border-radius: 3px;
  border: 1px solid var(--brass); transition: background .15s ease, transform .15s ease;
  white-space: nowrap;
}
.site-v2 nav.site-nav a.nav-cta:hover { background: #c99a52; transform: translateY(-1px); color: #181109; }
.site-v2 .burger {
  display: none; flex-direction: column; gap: 5px; cursor: pointer;
  background: none; border: none; padding: 6px;
}
.site-v2 .burger span { width: 22px; height: 2px; background: #fff; display: block; }
.site-v2 nav.site-nav.nav-open {
  display: flex; position: absolute; top: 100%; left: 0; right: 0;
  flex-direction: column; align-items: flex-start; gap: 4px;
  background: var(--ink); padding: 16px 32px 24px; border-bottom: 1px solid rgba(184,134,63,0.25);
}
.site-v2 nav.site-nav.nav-open a { padding: 10px 0; width: 100%; }

/* HERO */
.site-v2 .hero {
  background: linear-gradient(180deg, var(--ink) 0%, #171d38 100%);
  color: #fff; padding: 88px 32px 56px; position: relative; overflow: hidden;
  text-align: left; max-width: none; margin: 0;
}
.site-v2 .hero-inner {
  max-width: 1180px; margin: 0 auto; display: grid;
  grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center;
}
.site-v2 .hero .eyebrow {
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--brass-light); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px;
  background: none; padding: 0; border-radius: 0;
}
.site-v2 .hero .eyebrow::before { content: ''; width: 26px; height: 1px; background: var(--brass-light); }
.site-v2 .hero h1 {
  font-size: 2.9rem; line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 22px;
}
.site-v2 .hero h1 em { font-style: normal; color: var(--brass-light); }
.site-v2 .hero p.subhead {
  font-family: var(--font-body-v2); font-size: 1.06rem; line-height: 1.6; color: #c9cee0;
  max-width: 480px; margin: 0 0 32px; text-align: left;
}
.site-v2 .hero-note {
  margin-top: 20px; font-family: var(--font-mono); font-size: 0.76rem; color: #7c88ad;
}
.site-v2 .hero .btn-secondary {
  border-color: rgba(255,255,255,0.35); color: #fff;
}
.site-v2 .hero .btn-secondary:hover {
  border-color: #fff; background: rgba(255,255,255,0.06);
}
.site-v2 .chain-wrap { position: relative; }
.site-v2 .chain-caption {
  font-family: var(--font-mono); font-size: 0.7rem; color: #7c88ad; text-align: center; margin-top: 10px;
  letter-spacing: 0.03em;
}
.site-v2 #chainPath { stroke-dasharray: 900; stroke-dashoffset: 900; animation: chainDraw 2.1s ease forwards 0.4s; }
@keyframes chainDraw { to { stroke-dashoffset: 0; } }
.site-v2 .chain-node {
  opacity: 0; transform: scale(0.6); transform-origin: center;
  animation: chainPop 0.5s cubic-bezier(.2,.9,.3,1.3) forwards;
}
.site-v2 .chain-node:nth-of-type(1) { animation-delay: 0.5s; }
.site-v2 .chain-node:nth-of-type(2) { animation-delay: 0.9s; }
.site-v2 .chain-node:nth-of-type(3) { animation-delay: 1.3s; }
.site-v2 .chain-node:nth-of-type(4) { animation-delay: 1.7s; }
.site-v2 .chain-node:nth-of-type(5) { animation-delay: 2.1s; }
@keyframes chainPop { to { opacity: 1; transform: scale(1); } }
.site-v2 .chain-label { font-family: var(--font-mono); font-size: 0.64rem; fill: #c9cee0; }
.site-v2 .chain-label-num { font-family: var(--font-mono); font-size: 0.64rem; fill: var(--brass-light); }
@media (prefers-reduced-motion: reduce) {
  .site-v2 #chainPath, .site-v2 .chain-node { animation: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; transform: none !important; }
}

/* PROOF STRIP */
.site-v2 .proof { background: var(--ink); color: #fff; padding: 40px 32px; }
.site-v2 .proof-inner {
  max-width: 1180px; margin: 0 auto; display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: 24px;
}
.site-v2 .proof-item { font-family: var(--font-mono); font-size: 0.8rem; color: #9aa3c4; }
.site-v2 .proof-item strong {
  display: block; font-family: var(--font-display); font-size: 1.4rem; color: #fff;
  font-weight: 600; margin-bottom: 4px;
}

/* SECTIONS ON PAPER */
.site-v2 .section { padding: 80px 32px; }
.site-v2 .section-head { max-width: 640px; margin: 0 auto 48px; }
.site-v2 .section-head.left { margin-left: 0; }
.site-v2 .section-eyebrow {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--brass-ink); margin-bottom: 12px;
}
.site-v2 .section h2 { font-size: 2rem; line-height: 1.15; }
.site-v2 .section .section-sub { margin-top: 14px; font-size: 1.01rem; color: #4a5178; line-height: 1.6; }

.site-v2 .chain-steps { display: grid; grid-template-columns: repeat(5,1fr); gap: 0; border-top: 1px solid var(--paper-line); max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.site-v2 .step { padding: 26px 18px 4px; border-right: 1px solid var(--paper-line); }
.site-v2 .step:last-child { border-right: none; }
.site-v2 .step-num { font-family: var(--font-mono); font-size: 0.76rem; color: var(--brass-ink); margin-bottom: 12px; }
.site-v2 .step h3 { font-size: 1.02rem; font-weight: 600; margin: 0 0 8px; line-height: 1.25; }
.site-v2 .step p { font-size: 0.87rem; color: #565d82; line-height: 1.55; margin: 0; }

/* Re-skinned shared components (forms, cards, rate banner) reused on the new homepage */
.site-v2 .blog-section, .site-v2 .newsletter-section, .site-v2 .contact-section {
  max-width: 1180px; margin-left: auto; margin-right: auto; padding-left: 32px; padding-right: 32px; background: var(--paper);
}
/* Child combinator as above — without it this would also hit the card
   headings on /blog/ and /rechner/ and blow them up to 1.9rem. */
.site-v2 .blog-section > h1, .site-v2 .blog-section > h2,
.site-v2 .newsletter-inner h2, .site-v2 .contact-section h2 {
  font-size: 1.9rem;
}
/* Text-heavy content stays at reading width inside the wide 1180px band —
   cards, intros and forms at full 1180px produce 140+ character lines. */
.site-v2 .blog-section .post-card,
.site-v2 .blog-section .section-sub { max-width: 760px; }
.site-v2 .contact-section form,
.site-v2 .contact-section .section-sub { max-width: 640px; }
.site-v2 .newsletter-section { background: #efe9db; }
.site-v2 .post-card { border-top-color: var(--paper-line); }
.site-v2 .post-card:last-child { border-bottom-color: var(--paper-line); }
.site-v2 .post-card .post-date { font-family: var(--font-mono); color: var(--brass-ink); }
.site-v2 .post-card h2, .site-v2 .post-card h3 { font-family: var(--font-display); color: var(--paper-ink); }
.site-v2 .form-row input, .site-v2 .form-row textarea {
  border-color: var(--paper-line); border-radius: 3px; font-family: var(--font-body-v2);
}
.site-v2 .btn { border-radius: 3px; font-family: var(--font-body-v2); }
.site-v2 .btn-primary { background: var(--brass); color: #181109; }
.site-v2 .btn-primary:hover { background: #c99a52; }
.site-v2 .btn-secondary { border-color: var(--paper-line); color: var(--paper-ink); }

/* Article/tool-page wrapper (calculator pages, will also cover blog articles) */
.site-v2 .article { font-family: var(--font-body-v2); }
.site-v2 .article .post-date { font-family: var(--font-mono); color: var(--brass-ink); }
.site-v2 .article .tldr { background: #efe9db; }
.site-v2 .article .disclaimer { border-top-color: var(--paper-line); }
.site-v2 .article .sources a { color: var(--paper-ink); }
.site-v2 .article select {
  border: 1px solid var(--paper-line); border-radius: 3px; font-family: var(--font-body-v2);
  padding: 10px 12px; font-size: 0.95rem; color: var(--paper-ink); background: #fff;
}
.site-v2 .back-link { color: var(--brass-ink); font-family: var(--font-mono); font-size: 0.85rem; }

/* Produkt / App-teaser + Features (existing content, re-skinned) */
.site-v2 .app-teaser {
  max-width: 700px; margin: 0 auto 64px; padding: 40px 36px;
  background: #efe9db; border: 1px solid var(--paper-line); border-radius: 4px;
}
.site-v2 .app-teaser .eyebrow {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--brass-ink); background: none; padding: 0; border-radius: 0;
}
.site-v2 .app-teaser h2 { font-size: 1.5rem; margin: 10px 0 12px; }
.site-v2 .app-teaser-list li::before { color: var(--brass-ink); }
.site-v2 .app-teaser-timeline { background: var(--paper); border-color: var(--paper-line); font-family: var(--font-body-v2); }

/* FOOTER */
.site-v2 footer.site-footer {
  background: var(--ink); color: #8a92b5; padding: 52px 32px 28px;
  border-top: 1px solid rgba(255,255,255,0.06); text-align: left; font-size: inherit;
}
.site-v2 .footer-inner { max-width: 1180px; margin: 0 auto; }
.site-v2 .footer-cols { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding-bottom: 32px; }
.site-v2 .footer-col h4 {
  font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: #5b6390; margin: 0 0 14px; font-weight: 600;
}
.site-v2 .footer-col a { display: block; font-size: 0.87rem; color: #c9cee0; margin-bottom: 9px; }
.site-v2 .footer-col a:hover { color: #fff; }
.site-v2 .footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08); padding-top: 20px; font-size: 0.8rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}

@media (max-width: 860px) {
  .site-v2 nav.site-nav:not(.nav-open) { display: none; }
  .site-v2 .burger { display: flex; }
  .site-v2 .header-inner { position: relative; }
  .site-v2 .hero-inner { grid-template-columns: 1fr; }
  .site-v2 .hero h1 { font-size: 2.1rem; }
  /* In the single-column layout the chain diagram would otherwise scale to
     full viewport width and fill nearly two screen heights. */
  .site-v2 .chain-wrap { max-width: 440px; margin: 0 auto; }
  .site-v2 .chain-steps { grid-template-columns: 1fr; }
  .site-v2 .step { border-right: none; border-bottom: 1px solid var(--paper-line); padding-bottom: 22px; }
}

/* ============================================================================
   ATELIER (site-v3) — 2026-07-31, handoff rev. 2026-08-01
   Forest ink on warm paper, sand as the single accent, Newsreader for display.
   Additive: .site-v2 above stays valid until every page carries .site-v3.
   Visual target: design-reference/lm-homeplan-atelier-mockup.html
   ========================================================================== */

/* From the mockup: the in-page anchors (#kette, #produkt, #rechner, #kontakt)
   glide instead of jumping. Disabled for anyone who asked for less motion. */
html:has(body.site-v3) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html:has(body.site-v3) { scroll-behavior: auto; }
}

.site-v3 { font-family: var(--font-body-v2); color: var(--ink-v3); background: var(--paper-v3); }
.site-v3 a { color: inherit; text-decoration: none; }
.site-v3 .wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.site-v3 h1, .site-v3 h2, .site-v3 h3 {
  font-family: var(--font-display-v3); font-weight: 500; letter-spacing: -0.01em;
  text-wrap: balance;
}
.site-v3 a:focus-visible, .site-v3 button:focus-visible {
  outline: 2px solid var(--sand); outline-offset: 3px; border-radius: 4px;
}

/* HEADER */
.site-v3 header.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(20,31,24,0.94); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(217,164,65,0.22);
}
.site-v3 .header-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px; max-width: 1180px; margin: 0 auto;
}
.site-v3 .logo, .site-v3 a.logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display-v3); font-weight: 500; font-size: 1.15rem;
  color: #e9e5d8; letter-spacing: 0.01em;
}
/* Per the mockup the wordmark is one uniform cream and the sand sits in the
   glyph alone — the link mark, which is what the "chain" idea comes down to.
   The SVG strokes with currentColor so the accent stays on one token. */
.site-v3 .logo span { color: inherit; }
.site-v3 .logo svg { width: 26px; height: 26px; flex-shrink: 0; color: var(--sand); }
.site-v3 nav.site-nav { display: flex; align-items: center; gap: 28px; }
.site-v3 nav.site-nav a {
  font-size: 0.92rem; color: var(--moss); font-weight: 500; margin-left: 0;
  transition: color 0.15s ease;
}
.site-v3 nav.site-nav a:hover { color: #e9e5d8; }
.site-v3 nav.site-nav a.lang-switch {
  border: 1px solid rgba(233,229,216,0.35); border-radius: 999px;
  padding: 3px 10px; font-size: 0.8rem; color: #e9e5d8;
}
.site-v3 nav.site-nav a.lang-switch:hover { border-color: #e9e5d8; background: rgba(233,229,216,0.06); }
.site-v3 nav.site-nav a.nav-cta {
  background: var(--sand); color: var(--sand-ink); padding: 10px 20px;
  border-radius: 7px; border: 1px solid var(--sand); font-weight: 600; font-size: 0.88rem;
  white-space: nowrap; transition: background 0.15s ease, transform 0.15s ease;
}
.site-v3 nav.site-nav a.nav-cta:hover { background: #c99a52; transform: translateY(-1px); color: var(--sand-ink); }
.site-v3 .burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 0; }
.site-v3 .burger span { width: 22px; height: 2px; background: #e9e5d8; display: block; }
.site-v3 nav.site-nav.nav-open {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0;
  position: absolute; top: 100%; left: 0; right: 0; background: var(--forest);
  padding: 12px 32px 20px; border-bottom: 1px solid var(--line-v3-dark);
}
.site-v3 nav.site-nav.nav-open a { padding: 10px 0; width: 100%; }
/* The rule above stretches every item to full width and zeroes the horizontal
   padding. On the two items that are shapes rather than plain links — the EN
   pill and the sand CTA — that produced a full-width rounded box with the label
   flush against its left edge. Both get their own geometry back. */
.site-v3 nav.site-nav.nav-open a.lang-switch {
  width: auto; padding: 4px 14px; margin: 8px 0 4px;
}
.site-v3 nav.site-nav.nav-open a.nav-cta {
  width: auto; padding: 10px 20px; margin: 6px 0 2px;
}

/* Anchor targets sit behind the sticky header without this: the header is 122px
   on desktop and 106px below the layout break, so #produkt and #kette landed
   with their heading already scrolled out of view. */
.site-v3 #kette, .site-v3 #produkt, .site-v3 #rechner, .site-v3 #finanzierung,
.site-v3 #newsletter, .site-v3 #kontakt { scroll-margin-top: 138px; }

/* HERO */
.site-v3 .hero {
  background: linear-gradient(180deg, var(--forest) 0%, #182620 100%);
  color: #e9e5d8; padding: 96px 32px 64px; position: relative; overflow: hidden;
  text-align: left; max-width: none; margin: 0;
}
.site-v3 .hero-inner {
  max-width: 1180px; margin: 0 auto; display: grid;
  grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center;
}
.site-v3 .hero .eyebrow {
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--sand); display: inline-flex;
  align-items: center; gap: 10px; margin-bottom: 22px;
  background: none; padding: 0; border-radius: 0;
}
.site-v3 .hero .eyebrow::before { content: ''; width: 26px; height: 1px; background: var(--sand); }
.site-v3 .hero h1 { font-size: 3.4rem; line-height: 1.06; margin: 0 0 22px; }
.site-v3 .hero h1 em { font-style: italic; color: var(--sand); }
.site-v3 .hero p.subhead {
  font-family: var(--font-body-v2); font-size: 1.08rem; line-height: 1.6;
  color: var(--moss); max-width: 480px; margin: 0 0 34px; text-align: left;
}
.site-v3 .hero .btn-secondary { border-color: rgba(233,229,216,0.35); color: #e9e5d8; background: transparent; }
.site-v3 .hero .btn-secondary:hover { border-color: #e9e5d8; background: rgba(233,229,216,0.06); }

/* JOURNEY — the app's own progress motif, replaces the v2 chain drawing */
.site-v3 .journey-card {
  background: var(--forest-soft); border: 1px solid var(--line-v3-dark);
  border-radius: 20px; padding: 30px 28px;
}
.site-v3 .journey-kicker {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--moss); margin-bottom: 24px;
}
.site-v3 .journey { display: flex; align-items: flex-start; }
.site-v3 .j-step {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  flex: none; width: 72px; text-align: center;
}
.site-v3 .j-dot {
  width: 30px; height: 30px; border-radius: 50%; background: var(--sand);
  color: var(--sand-ink); display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700;
}
.site-v3 .j-dot.open { background: transparent; border: 2px solid var(--sand); color: var(--sand); }
.site-v3 .j-dot.later { background: transparent; border: 2px solid rgba(233,229,216,0.25); color: var(--moss); }
.site-v3 .j-label { font-size: 0.72rem; color: var(--moss); line-height: 1.3; }
.site-v3 .j-line {
  flex: 1; height: 2px; background: var(--sand); margin-top: 14px;
  transform-origin: left; animation: journeyGrow 1.4s ease both;
}
.site-v3 .j-line.later { background: rgba(233,229,216,0.25); }
.site-v3 .j-line:nth-of-type(2) { animation-delay: 0.2s; }
.site-v3 .j-line:nth-of-type(4) { animation-delay: 0.5s; }
.site-v3 .j-line:nth-of-type(6) { animation-delay: 0.8s; }
.site-v3 .j-line:nth-of-type(8) { animation-delay: 1.1s; }
@keyframes journeyGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.site-v3 .journey-figures {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line-v3-dark); border-radius: 12px; overflow: hidden; margin-top: 26px;
}
.site-v3 .jf { background: var(--forest-raised); padding: 14px 16px; }
.site-v3 .jf small { display: block; font-size: 0.72rem; color: var(--moss); margin-bottom: 4px; }
.site-v3 .jf strong {
  font-family: var(--font-display-v3); font-weight: 500; font-size: 1.35rem;
  color: #e9e5d8; font-variant-numeric: tabular-nums;
}
.site-v3 .journey-example {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: #8ba08f; margin-top: 10px; text-align: right;
}
.site-v3 .journey-caption {
  font-family: var(--font-mono); font-size: 0.72rem; color: #8ba08f;
  text-align: center; margin-top: 12px; letter-spacing: 0.03em;
}
@media (prefers-reduced-motion: reduce) {
  .site-v3 .j-line { animation: none !important; transform: none !important; }
}

/* PROOF STRIP — on paper-deep in this direction, not on the dark band */
.site-v3 .proof { background: var(--paper-deep); border-bottom: 1px solid var(--line-v3); padding: 44px 32px; color: var(--ink-v3); }
/* A grid at every width. The mockup's space-between flex wrapped the four
   items 3+1 on wide screens, leaving "5 Lebensphasen" as an orphan row.
   Four across on desktop, 2x2 from 1100px down (the phone block below
   keeps its own tighter 2x2). */
.site-v3 .proof-inner {
  max-width: 1180px; margin: 0 auto; display: grid;
  grid-template-columns: repeat(4, 1fr); gap: 24px 32px;
}
@media (max-width: 1100px) {
  .site-v3 .proof-inner { grid-template-columns: repeat(2, 1fr); }
}
.site-v3 .proof-item { font-family: var(--font-mono); font-size: 0.82rem; color: var(--moss-deep); }
.site-v3 .proof-item strong {
  display: block; font-family: var(--font-display-v3); font-size: 1.7rem;
  color: var(--ink-v3); font-weight: 500; margin-bottom: 4px;
}

/* SECTIONS */
.site-v3 .section { padding: 88px 32px; }
.site-v3 .section-head { max-width: 640px; margin: 0 auto 56px; }
.site-v3 .section-head.left { margin-left: 0; }
.site-v3 .section-eyebrow {
  font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--moss-deep); margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px;
}
.site-v3 .section-eyebrow::before { content: ''; width: 18px; height: 3px; background: var(--sand); border-radius: 2px; }
.site-v3 .section h2 { font-size: 2.35rem; line-height: 1.12; }
.site-v3 .section .section-sub { margin-top: 14px; font-size: 1.02rem; color: var(--moss-deep); line-height: 1.6; }

.site-v3 .chain-steps {
  display: grid; grid-template-columns: repeat(5,1fr); gap: 0;
  border-top: 2px solid var(--ink-v3); max-width: 1180px; margin: 0 auto; padding: 0 32px;
}
.site-v3 .step { padding: 28px 20px 0; border-right: 1px solid var(--line-v3); }
.site-v3 .step:last-child { border-right: none; }
.site-v3 .step-num { font-family: var(--font-mono); font-size: 0.78rem; color: var(--moss-deep); margin-bottom: 14px; }
.site-v3 .step h3 { font-size: 1.2rem; font-weight: 500; margin: 0 0 10px; line-height: 1.25; }
.site-v3 .step p { font-size: 0.88rem; color: var(--moss-deep); line-height: 1.55; margin: 0; }

/* BANDS: blog listing, newsletter, contact */
.site-v3 .blog-section, .site-v3 .newsletter-section, .site-v3 .contact-section {
  max-width: 1180px; margin-left: auto; margin-right: auto;
  padding-left: 32px; padding-right: 32px; background: var(--paper-v3);
}
.site-v3 .blog-section > h1, .site-v3 .blog-section > h2,
.site-v3 .newsletter-inner h2, .site-v3 .contact-section h2 { font-size: 2.35rem; }
.site-v3 .blog-section .post-card,
.site-v3 .blog-section .section-sub { max-width: 760px; }
.site-v3 .contact-section form,
.site-v3 .contact-section .section-sub { max-width: 640px; }
.site-v3 .blog-section .section-sub { color: var(--moss-deep); }
.site-v3 .newsletter-section { background: var(--paper-deep); }
.site-v3 .post-card { border-top-color: var(--line-v3); }
.site-v3 .post-card:last-child { border-bottom-color: var(--line-v3); }
.site-v3 .post-card .post-date { font-family: var(--font-mono); color: var(--moss-deep); }
.site-v3 .post-card h2, .site-v3 .post-card h3 {
  font-family: var(--font-display-v3); font-weight: 500; color: var(--ink-v3);
}
.site-v3 .post-card p { color: var(--moss-deep); }

/* CONTROLS */
.site-v3 .form-row input, .site-v3 .form-row textarea {
  border: 1px solid var(--line-v3); border-radius: 6px; font-family: var(--font-body-v2);
  background: #fff; color: var(--ink-v3);
}
.site-v3 .btn { border-radius: 7px; font-family: var(--font-body-v2); font-weight: 600; }
.site-v3 .btn-primary { background: var(--sand); color: var(--sand-ink); border: 1px solid var(--sand); }
.site-v3 .btn-primary:hover { background: #c99a52; color: var(--sand-ink); }
.site-v3 .btn-secondary { border-color: var(--line-v3); color: var(--ink-v3); }

/* ARTICLE / TOOL PAGES */
.site-v3 .article { font-family: var(--font-body-v2); color: var(--ink-v3); }
.site-v3 .article h1 { font-size: 2.5rem; line-height: 1.14; }
.site-v3 .article h2 { font-size: 1.6rem; }
.site-v3 .article h3 { font-size: 1.2rem; }
.site-v3 .article .post-date { font-family: var(--font-mono); color: var(--moss-deep); }
.site-v3 .article .tldr { background: var(--paper-deep); border-color: var(--line-v3); }
.site-v3 .article .disclaimer { border-top-color: var(--line-v3); color: var(--moss-deep); }
.site-v3 .article .sources a { color: var(--ink-v3); }
.site-v3 .article select {
  border: 1px solid var(--line-v3); border-radius: 6px; font-family: var(--font-body-v2);
  padding: 10px 12px; font-size: 0.95rem; color: var(--ink-v3); background: #fff;
}
.site-v3 .article label { color: var(--ink-v3); }
.site-v3 .article input { border-color: var(--line-v3); border-radius: 6px; color: var(--ink-v3); }
.site-v3 .back-link { color: var(--terracotta-text); font-family: var(--font-mono); font-size: 0.85rem; }
.site-v3 .result-box { background: var(--paper-deep); border-color: var(--line-v3); }
.site-v3 .result-box strong { font-family: var(--font-display-v3); font-weight: 500; }

/* TOOLS — the mockup's dark card band for the calculators. Restores the
   alternating rhythm of the design: paper-deep (Produkt) -> paper (Blog) ->
   forest (Tools) -> paper-deep (Newsletter) -> paper (Kontakt) -> forest.
   Same card recipe as the mockup: raised green on forest, sand on hover. */
.site-v3 .tools {
  background: var(--forest); color: #e9e5d8; padding: 88px 32px;
  max-width: none; margin: 0;
}
.site-v3 .tools .wrap { max-width: 1180px; margin: 0 auto; padding: 0; }
.site-v3 .tools .section-head { max-width: 640px; margin: 0 0 40px; }
.site-v3 .tools .section-eyebrow { color: var(--moss); }
.site-v3 .tools h2 { color: #e9e5d8; font-size: 2.35rem; line-height: 1.12; margin: 0; }
.site-v3 .tools .section-sub { color: var(--moss); }
.site-v3 .tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 8px; }
.site-v3 .tool-card {
  background: var(--forest-soft); border: 1px solid var(--line-v3-dark);
  border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 12px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.site-v3 .tool-card:hover { border-color: rgba(217,164,65,0.5); transform: translateY(-2px); }
.site-v3 .tool-card small {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--moss);
}
.site-v3 .tool-card h3 { font-size: 1.3rem; font-weight: 500; line-height: 1.2; margin: 0; }
.site-v3 .tool-card p { font-size: 0.88rem; color: var(--moss); line-height: 1.55; margin: 0; }
/* Sand as text is fine here — on forest it measures 7.5:1. */
.site-v3 .tool-card .go { margin-top: auto; font-size: 0.85rem; font-weight: 600; color: var(--sand); }
@media (prefers-reduced-motion: reduce) {
  .site-v3 .tool-card { transition: none; }
  .site-v3 .tool-card:hover { transform: none; }
}

/* FINANZIERUNG IM DETAIL — three feature rows in a grid on paper, directly
   after the chain: how it is built -> how precisely it computes -> the app.
   Reuses the .feature recipe (sand-bar markers, no numerals — rule of
   2026-08-03). The hairline separates it from the chain grid above, since
   both bands sit on plain paper. */
.site-v3 .section.fin { border-top: 1px solid var(--line-v3); }
.site-v3 .fin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 40px; }
.site-v3 .fin-grid .feature { border-bottom: none; padding: 8px 0; }

/* PRODUKT — two-column band from the mockup: copy left, phone screens right.
   Live on both homepages. Requirements for replacing the screenshots (device
   mockups with transparent corners, overlap, no baked-in radius) are in
   design-reference/screens-spec.md. */
.site-v3 .produkt {
  background: var(--paper-deep);
  border-top: 1px solid var(--line-v3); border-bottom: 1px solid var(--line-v3);
}
.site-v3 .produkt-inner { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; }
.site-v3 .feature { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line-v3); }
.site-v3 .feature:last-child { border-bottom: none; }
/* Rule (Martin, 2026-08-03, recorded in the Notion task of the same day):
   digits only where order is the message — the chain (01-05) and the journey
   (1-4). Parallel content is marked in the eyebrow language, never numbered.
   This bar is the section-eyebrow's marker motif (18x3, sand); sand as a
   decorative marker on paper is exactly what the handoff allows. The old
   .feature-num rule is deliberately gone so the numbered pattern cannot be
   quietly reused in a future section. */
.site-v3 .feature-mark {
  width: 18px; height: 3px; background: var(--sand); border-radius: 2px;
  margin-top: 0.62em; flex-shrink: 0;
}
.site-v3 .feature h3 { font-size: 1.15rem; font-weight: 500; margin: 0 0 4px; }
.site-v3 .feature p { font-size: 0.88rem; color: var(--moss-deep); line-height: 1.55; margin: 0; }
.site-v3 .phones { display: flex; justify-content: center; align-items: flex-start; position: relative; min-height: 560px; }
/* The delivered screens are device mockups: the bezel is part of the image and
   the corners are transparent. So the mockup's 24px radius would only clip
   already-transparent pixels, and a box-shadow would cast a rounded *rectangle*
   behind a much rounder silhouette, with the corners peeking out. drop-shadow
   follows the alpha channel and hugs the actual device outline instead. */
.site-v3 .phones img {
  width: 270px; height: auto; display: block;
  filter: drop-shadow(0 20px 30px rgba(30,43,35,0.35));
}
/* The front phone overlaps the back one; the back one sits slightly recessed. */
.site-v3 .phones img:first-child { position: relative; z-index: 2; margin-top: 44px; }
/* The mockup overlaps by 60px. That crops the back phone's display figure
   mid-number ("460.000 €" reads as "60.000 €"), which is a bad look on a site
   selling calculation accuracy. 28px still reads as depth and clears the figure. */
.site-v3 .phones img:last-child { margin-left: -28px; opacity: 0.94; }

/* PRODUKT / APP-TEASER */
.site-v3 .app-teaser {
  max-width: 700px; margin: 0 auto 64px; padding: 40px 36px;
  background: var(--paper-deep); border: 1px solid var(--line-v3); border-radius: 16px;
}
.site-v3 .app-teaser .eyebrow {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--moss-deep); background: none; padding: 0; border-radius: 0;
}
.site-v3 .app-teaser h2 { font-size: 1.7rem; margin: 10px 0 12px; }
.site-v3 .app-teaser p { color: var(--moss-deep); }
/* The bullet here is a "✓" glyph, not a decorative bar — it has to be read.
   Sand would put it at 1.8:1 on paper, so this takes the secondary text
   colour (5.0:1) instead. Sand stays on surfaces, fills and the eyebrow bar. */
.site-v3 .app-teaser-list li::before { color: var(--moss-deep); }
.site-v3 .app-teaser-timeline {
  background: var(--paper-v3); border-color: var(--line-v3); font-family: var(--font-body-v2);
  color: var(--moss-deep);
}
.site-v3 .app-teaser-note { color: var(--moss-deep); }

/* FOOTER */
.site-v3 footer.site-footer {
  background: var(--forest); color: var(--moss); padding: 56px 32px 32px;
  border-top: 1px solid var(--line-v3-dark); text-align: left; font-size: inherit;
}
.site-v3 .footer-inner { max-width: 1180px; margin: 0 auto; }
.site-v3 .footer-cols { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding-bottom: 36px; }
/* These label the footer's nav groups. They are h2 (not h4) so the outline
   runs h1 -> h2 without a skipped level; the mono/uppercase treatment is what
   makes them read as labels rather than as content headings. */
.site-v3 .footer-col h2 {
  font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: #8ba08f; margin: 0 0 14px; font-weight: 600;
  line-height: 1.6;
}
.site-v3 .footer-col a { display: block; font-size: 0.88rem; color: #c9d6cb; margin-bottom: 9px; }
.site-v3 .footer-col a:hover { color: #fff; }
/* v3: hover underline only where links sit in running text — UI elements
   (nav, cards, buttons, footer) hover via color/transform like the mockup. */
.site-v3 a:hover { text-decoration: none; }
.site-v3 .article p a:hover,
.site-v3 .article li a:hover,
.site-v3 .article .sources a:hover,
.site-v3 .section-sub a:hover,
.site-v3 .back-link:hover { text-decoration: underline; }

.site-v3 .footer-bottom {
  border-top: 1px solid var(--line-v3-dark); padding-top: 22px; font-size: 0.8rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}

/* Produkt: below ~1020px the 1fr text column gets narrower than ~400px and the
   headline breaks almost word-by-word — switch to the stacked layout early. */
@media (max-width: 1020px) {
  .site-v3 .produkt-inner { grid-template-columns: 1fr; }
  .site-v3 .phones { min-height: 0; }
  .site-v3 .phones img { width: 46%; max-width: 270px; }
  .site-v3 .phones img:last-child { margin-left: -8%; }
}

/* Five stages: at five columns the cells cannot shrink below their content, so
   between 861px and 908px the row pushed the page wider than the viewport and
   it scrolled sideways. Drops to three columns at the same breakpoint as the
   Produkt band above, which also gives the cells room again from 1020px down.
   minmax(0,1fr) so the track can never be forced open by its content again. */
@media (max-width: 1020px) {
  .site-v3 .chain-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Two rows now, so the first three cells need a rule underneath them and the
     cell ending a row must not draw one to its right. The existing
     :last-child rule already clears the right edge of the fifth cell. */
  .site-v3 .step:nth-child(-n+3) { border-bottom: 1px solid var(--line-v3); padding-bottom: 24px; }
  .site-v3 .step:nth-child(3n) { border-right: none; }
}

/* Article tables cannot shrink below the min-content width of their columns, so
   on narrow phones they pushed the whole page sideways — the comparison table in
   the Anschlussfinanzierung post needs 384px and forced a 422px page at a 375px
   viewport. The table now sits in its own scroll container, so it scrolls
   instead of dragging the page with it.

   The container is a wrapper element rather than overflow on the table itself:
   `table { display: block; overflow-x: auto }` does scroll, but the table-internal
   rows keep contributing their full width to the ancestors' scrollWidth, so the
   page still scrolled sideways. Measured, not assumed. */
.site-v3 .article .table-wrap { overflow-x: auto; margin: 0 0 24px; }
.site-v3 .article .table-wrap > table { margin-bottom: 0; }

/* Long German compounds in article headlines cannot break: "Anschluss­finanzierung"
   needs 398px at the 2.5rem h1 size and pushed a 375px page out to 422px. Below
   the reading width the headlines may hyphenate — the pages carry lang="de"/"en",
   so this hyphenates properly rather than chopping mid-syllable. break-word is
   the fallback for anything hyphenation cannot split. Desktop typography is
   untouched. */
@media (max-width: 700px) {
  .site-v3 .article h1,
  .site-v3 .article h2,
  .site-v3 .article h3 { hyphens: auto; overflow-wrap: break-word; }
}

@media (max-width: 860px) {
  .site-v3 nav.site-nav:not(.nav-open) { display: none; }
  .site-v3 .burger { display: flex; }
  .site-v3 .header-inner { position: relative; }
  .site-v3 .hero-inner { grid-template-columns: 1fr; }
  .site-v3 .hero h1 { font-size: 2.3rem; }
  .site-v3 .chain-steps { grid-template-columns: 1fr; }
  .site-v3 .step { border-right: none; border-bottom: 1px solid var(--line-v3); padding-bottom: 24px; }
  .site-v3 .j-step { width: 58px; }
  .site-v3 .journey-figures { grid-template-columns: 1fr; }
  .site-v3 .tool-grid { grid-template-columns: 1fr; }
  .site-v3 .fin-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   PHONE (site-v3) — the 860px block above only collapses the layout; every
   padding and rhythm value stayed at its desktop size, which made the page
   9231px (about eleven screens) tall on a 390px viewport with the hero alone
   taking 1.6 screens. This block tightens the vertical rhythm and fixes the
   two elements that read as broken rather than merely airy: the CTA pair and
   the proof strip.
   ------------------------------------------------------------------------- */
/* Everything below the 860px layout break, tablets included — the rhythm has
   to tighten as soon as the columns stack, not only on phones. */
@media (max-width: 860px) {
  /* Bands: roughly 60% of the desktop padding. */
  .site-v3 .hero { padding: 48px 22px 44px; }
  .site-v3 .proof { padding: 28px 22px; }
  .site-v3 .section { padding: 52px 22px; }
  .site-v3 .tools { padding: 52px 22px; }
  .site-v3 .blog-section { padding-top: 44px; padding-bottom: 44px; padding-left: 22px; padding-right: 22px; }
  .site-v3 .newsletter-section { padding: 44px 22px; }
  .site-v3 .contact-section { padding: 44px 22px 56px; }
  .site-v3 footer.site-footer { padding: 40px 22px 24px; }
  .site-v3 .chain-steps { padding: 0 22px; }
  .site-v3 .section-head { margin-bottom: 28px; }

  /* Header is 106px here rather than 122px. */
  .site-v3 #kette, .site-v3 #produkt, .site-v3 #rechner, .site-v3 #finanzierung,
  .site-v3 #newsletter, .site-v3 #kontakt { scroll-margin-top: 118px; }

  /* The strip wrapped into four full-width rows — 456px for four short facts
     at 390px, 343px at 700px. A 2x2 grid keeps it a strip rather than a list. */
  .site-v3 .proof-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; }
  .site-v3 .proof-item { font-size: 0.78rem; line-height: 1.4; }
  .site-v3 .proof-item strong { font-size: 1.4rem; margin-bottom: 2px; }

  /* Centred CTAs under left-aligned hero copy read as misaligned. */
  .site-v3 .cta-row { justify-content: flex-start; }
}

@media (max-width: 640px) {
  /* Side by side the two buttons no longer fit, and stacking them at their
     natural widths (222px and 198px) looks like a mistake rather than a
     choice. Full width is the honest phone treatment. */
  .site-v3 .cta-row { justify-content: stretch; gap: 10px; }
  .site-v3 .cta-row .btn { flex: 1 1 100%; text-align: center; }

  /* Headline and lead a touch smaller so they stop eating a whole screen. */
  .site-v3 .hero h1 { font-size: 2.05rem; }
  .site-v3 .hero p.subhead { font-size: 1rem; margin-bottom: 26px; }
  .site-v3 .section h2, .site-v3 .tools h2 { font-size: 1.9rem; }
  .site-v3 .blog-section > h1, .site-v3 .blog-section > h2 { font-size: 1.9rem; }

  /* Journey card: 28px padding on a 390px screen leaves little for the dots. */
  .site-v3 .journey-card { padding: 22px 16px; }
  .site-v3 .j-step { width: 52px; }
  .site-v3 .j-label { font-size: 0.68rem; }
}