/* ═════════════════════════════════════════════════════════════════
   BauEtappen – gemeinsames Design-System aller Seiten
   Aus der bisherigen index.html herausgelöst (nur <style>-Inhalt).
   Neue Komponenten stehen am Dateiende.
   ════════════════════════════════════════════════════════════════ */
    /* ════════════════════════════════════════════════════════════════
   TOKENS
════════════════════════════════════════════════════════════════ */
    :root {
      --bg: #faf8f5;
      --bg-sec: #f5f1ea;
      --card: #FFFFFF;
      --ink: #1C1814;
      --ink-muted: #6B6257;
      --ink-sub: #9A8F84;
      --accent: #332c20;
      --accent-10: rgba(51, 44, 32, .10);
      --accent-20: rgba(51, 44, 32, .20);
      --accent-40: rgba(51, 44, 32, .40);
      --border: #E2DDD4;
      --border-70: rgba(226, 221, 212, .70);
      --dark: #1C1814;
      --dark-card: #252019;
      --dark-border: rgba(255, 255, 255, .10);
      --dark-muted: rgba(255, 255, 255, .65);
      --font: 'Inter', ui-sans-serif, system-ui, sans-serif;
      --serif: 'Fraunces', ui-serif, Georgia, serif;
      --max-w: 1280px;
      --r: 8px;
      --r-lg: 12px;
      --r-xl: 16px;
      --r-2xl: 24px;
    }

    /* ════════════════════════════════════════════════════════════════
   RESET
════════════════════════════════════════════════════════════════ */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: var(--font);
      background: var(--bg);
      color: var(--ink);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    button {
      font-family: inherit;
      cursor: pointer;
      border: none;
      background: none;
    }

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

    ul {
      list-style: none;
    }

    /* ════════════════════════════════════════════════════════════════
   LAYOUT
════════════════════════════════════════════════════════════════ */
    section[id],
    header[id] {
      scroll-margin-top: 72px;
    }

    .container {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 0 24px;
    }

    .section {
      padding: 80px 0;
    }

    @media (min-width: 768px) {
      .section {
        padding: 112px 0;
      }
    }

    /* ════════════════════════════════════════════════════════════════
   TYPOGRAPHY
════════════════════════════════════════════════════════════════ */
    h1 {
      font-family: var(--serif);
      font-size: clamp(2.5rem, 6vw, 3.8rem);
      font-weight: 700;
      letter-spacing: -.02em;
      line-height: 1.06;
      color: var(--ink);
    }

    h2 {
      font-family: var(--serif);
      font-size: clamp(1.9rem, 4vw, 2.6rem);
      font-weight: 600;
      letter-spacing: -.02em;
      line-height: 1.1;
      color: var(--ink);
    }

    h3 {
      font-family: var(--serif);
      font-size: clamp(1.1rem, 2vw, 1.25rem);
      font-weight: 600;
      line-height: 1.25;
      color: var(--ink);
    }

    p {
      color: var(--ink-muted);
      line-height: 1.7;
    }

    .eyebrow {
      font-family: var(--font);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--accent);
    }

    /* ════════════════════════════════════════════════════════════════
   BUTTONS
════════════════════════════════════════════════════════════════ */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font);
      font-size: 14px;
      font-weight: 500;
      padding: 11px 22px;
      border-radius: 100px;
      cursor: pointer;
      white-space: nowrap;
      line-height: 1;
      transition: all .15s ease;
      border: 1px solid transparent;
    }

    .btn-dark {
      background: var(--ink);
      color: #fff;
      border-color: var(--ink);
    }

    .btn-dark:hover {
      background: #2e2a24;
    }

    .btn-outline {
      background: transparent;
      color: var(--ink);
      border-color: var(--border);
    }

    .btn-outline:hover {
      background: var(--bg-sec);
      border-color: var(--accent-40);
    }

    .btn-accent {
      background: var(--accent);
      color: #faf8f5;
      border-color: var(--accent);
    }

    .btn-accent:hover {
      background: #221e16;
    }

    /* ════════════════════════════════════════════════════════════════
   NAVIGATION
════════════════════════════════════════════════════════════════ */
    .nav {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(250, 248, 245, .88);
      backdrop-filter: blur(12px) saturate(180%);
      border-bottom: 1px solid var(--border-70);
    }

    .nav-inner {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 0 24px;
      display: flex;
      align-items: center;
      gap: 32px;
      height: 64px;
    }

    .nav-logo {
      font-family: var(--serif);
      font-size: 18px;
      font-weight: 600;
      color: var(--ink);
      letter-spacing: -.02em;
      display: inline-flex;
      align-items: center;
      gap: 9px;
    }

    .nav-logo-icon {
      width: 28px;
      height: 28px;
      background: var(--ink);
      border-radius: 7px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: #faf8f5;
    }

    .nav-logo .dash {
      color: var(--accent);
    }

    .nav-inner>nav {
      margin-left: auto;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 32px;
      list-style: none;
    }

    .nav-links a {
      font-size: 14px;
      color: var(--ink-muted);
      transition: color .12s;
    }

    .nav-links a:hover {
      color: var(--ink);
    }

    .menu-btn {
      display: none;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      color: var(--ink);
    }

    .mobile-menu {
      display: none;
      border-top: 1px solid var(--border-70);
      background: var(--bg);
    }

    .mobile-menu.open {
      display: block;
    }

    .mobile-menu-inner {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 12px 24px 20px;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .mobile-menu-inner a {
      display: block;
      padding: 10px 8px;
      font-size: 15px;
      color: var(--ink-muted);
      border-radius: var(--r);
      transition: background .12s, color .12s;
    }

    .mobile-menu-inner a:hover {
      background: var(--bg-sec);
      color: var(--ink);
    }

    .mobile-menu-cta {
      margin-top: 10px;
      width: 100%;
      justify-content: center;
    }

    @media (max-width: 768px) {

      .nav-links,
      .nav-cta {
        display: none;
      }

      .menu-btn {
        display: flex;
      }
    }

    /* ════════════════════════════════════════════════════════════════
   HERO
════════════════════════════════════════════════════════════════ */
    .hero {
      padding: 64px 0 80px;
    }

    @media (min-width: 768px) {
      .hero {
        padding: 96px 0 112px;
      }
    }

    .hero-grid {
      display: grid;
      gap: 56px;
      align-items: center;
    }

    @media (min-width: 900px) {
      .hero-grid {
        grid-template-columns: 1.05fr .95fr;
      }
    }

    .hero-eyebrow {
      display: block;
      margin-bottom: 24px;
    }

    .hero-h1 {
      margin-bottom: 24px;
    }

    .hero-sub {
      font-size: 17px;
      line-height: 1.7;
      max-width: 520px;
      margin-bottom: 36px;
    }

    .hero-btns {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 28px;
    }

    .hero-btns .btn {
      padding: 15px 28px;
      font-size: 15px;
    }

    .hero-trust {
      font-size: 14px;
      color: var(--ink-sub);
    }

    .hero-trust-sep {
      color: var(--border);
      margin: 0 8px;
    }

    /* Hero image */
    .hero-img {
      border-radius: var(--r-2xl);
      overflow: hidden;
      border: 1px solid var(--border);
      box-shadow: 0 24px 60px -30px rgba(60, 40, 20, .18);
    }

    .hero-img img {
      width: 100%;
      height: 100%;
      min-height: 440px;
      object-fit: cover;
      display: block;
    }

    /* Wizard section header */
    .wizard-section-header {
      text-align: center;
      max-width: 700px;
      margin: 0 auto 48px;
    }

    .wizard-section-header .eyebrow {
      display: block;
      margin-bottom: 16px;
    }

    .wizard-section-header h2 {
      margin-bottom: 18px;
    }

    .wizard-section-sub {
      font-size: 17px;
      line-height: 1.7;
    }

    /* Wizard card preview */
    .wizard-preview {
      max-width: 520px;
      margin: 0 auto;
    }

    /* Wizard card */
    .wizard-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--r-2xl);
      padding: 28px;
      box-shadow: 0 24px 60px -30px rgba(60, 40, 20, .22);
      position: relative;
    }

    .wizard-card::before {
      content: '';
      position: absolute;
      inset: -16px;
      z-index: -1;
      border-radius: 32px;
      background: radial-gradient(ellipse at 60% 30%, var(--accent-10) 0%, transparent 65%);
    }

    .wizard-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
    }

    .wizard-header-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .wizard-icon-wrap {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      background: var(--wc-accent);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .wizard-label {
      font-size: 11px;
      letter-spacing: .12em;
      color: var(--ink-sub);
      text-transform: uppercase;
      font-weight: 500;
    }

    .wizard-title {
      font-family: var(--serif);
      font-size: 28px;
      font-weight: 700;
      color: var(--ink);
      line-height: 1.2;
      margin-bottom: 18px;
    }

    .wizard-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: var(--wc-accent-10);
      color: var(--wc-accent);
      font-size: 11px;
      font-weight: 600;
      padding: 4px 10px;
      border-radius: 100px;
      white-space: nowrap;
    }

    .wizard-steps {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 16px;
    }

    .wizard-step {
      display: flex;
      align-items: flex-start;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 11px 14px;
    }

    .wizard-step-num {
      display: none;
    }

    .wizard-step-q {
      font-size: 13px;
      font-weight: 600;
      color: var(--ink);
      margin-bottom: 2px;
    }

    .wizard-step-hint {
      font-size: 12px;
      color: var(--ink-sub);
      line-height: 1.4;
    }

    .wizard-result {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      background: var(--accent-10);
      border: 1px solid var(--accent-40);
      border-radius: var(--r-lg);
      padding: 11px 14px;
      margin-bottom: 14px;
    }

    .wizard-result-ico {
      width: 20px;
      height: 20px;
      border-radius: 5px;
      background: var(--accent);
      color: #faf8f5;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 1px;
    }

    .wizard-result-text {
      font-size: 13px;
      font-weight: 600;
      color: var(--ink);
      line-height: 1.5;
    }

    .wizard-price {
      background: var(--bg-sec);
      border-radius: var(--r-lg);
      padding: 12px 16px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px 14px;
      margin-top: 10px;
    }

    .wizard-price-amount-wrap {
      display: flex;
      align-items: baseline;
      gap: 3px;
      flex-shrink: 0;
      white-space: nowrap;
    }

    .wizard-price-pre {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--ink-sub);
      white-space: nowrap;
    }

    .wizard-price-num {
      font-family: var(--serif);
      font-size: 26px;
      font-weight: 700;
      color: var(--ink);
      line-height: 1;
      white-space: nowrap;
    }

    .wizard-price-sub {
      font-size: 12px;
      color: var(--wc-accent);
      line-height: 1.4;
    }

    .wizard-tags {
      background: var(--bg-sec);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 10px 14px;
      font-size: 12px;
      color: var(--ink-muted);
      text-align: center;
      margin-top: 10px;
    }

    /* ════════════════════════════════════════════════════════════════
   WIZARD CARDS GRID – 3 Karten
════════════════════════════════════════════════════════════════ */
    .wizard-cards-grid {
      display: grid;
      gap: 20px;
      grid-template-columns: repeat(3, 1fr);
      max-width: 1100px;
      margin: 0 auto;
    }

    @media (max-width: 900px) {
      .wizard-cards-grid {
        grid-template-columns: 1fr;
        max-width: 520px;
      }
    }

    /* Farbthemen per Karte */
    .wc-elektro {
      --wc-accent: #332c20;
      --wc-accent-10: rgba(51, 44, 32, .10);
      --wc-accent-20: rgba(51, 44, 32, .20);
      --wc-accent-40: rgba(51, 44, 32, .40);
      border-top: 3px solid #332c20;
    }

    .wc-rohbau {
      --wc-accent: #7D4535;
      --wc-accent-10: rgba(125, 69, 53, .10);
      --wc-accent-20: rgba(125, 69, 53, .20);
      --wc-accent-40: rgba(125, 69, 53, .40);
      background: #fdf8f5;
      border-top: 3px solid #7D4535;
    }

    .wc-uebergabe {
      --wc-accent: #4A6842;
      --wc-accent-10: rgba(74, 104, 66, .10);
      --wc-accent-20: rgba(74, 104, 66, .20);
      --wc-accent-40: rgba(74, 104, 66, .40);
      background: #f7faf6;
      border-top: 3px solid #4A6842;
    }

    .wc-elektro .wizard-step-num,
    .wc-rohbau .wizard-step-num,
    .wc-uebergabe .wizard-step-num {
      background: var(--wc-accent);
    }

    .wc-elektro .wizard-result,
    .wc-rohbau .wizard-result,
    .wc-uebergabe .wizard-result {
      background: var(--wc-accent-10);
      border-color: var(--wc-accent-40);
    }

    .wc-elektro .wizard-result-ico,
    .wc-rohbau .wizard-result-ico,
    .wc-uebergabe .wizard-result-ico {
      background: var(--wc-accent);
    }

    .wc-rohbau::before {
      background: radial-gradient(ellipse at 60% 30%, rgba(125, 69, 53, .08) 0%, transparent 65%);
    }

    .wc-uebergabe::before {
      background: radial-gradient(ellipse at 60% 30%, rgba(74, 104, 66, .08) 0%, transparent 65%);
    }

    .btn-coming-soon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      width: 100%;
      font-family: var(--font);
      font-size: 14px;
      font-weight: 500;
      padding: 11px 20px;
      border-radius: 100px;
      border: 1px solid var(--border);
      background: var(--bg-sec);
      color: var(--ink-sub);
      cursor: not-allowed;
      margin-top: 16px;
      line-height: 1;
    }

    .wizard-card-btn {
      width: 100%;
      justify-content: center;
      font-size: 14px;
      padding: 12px 20px;
      margin-top: 16px;
    }

    /* ════════════════════════════════════════════════════════════════
   SHARED SECTION STYLES
════════════════════════════════════════════════════════════════ */
    .sec-border {
      border-top: 1px solid var(--border-70);
    }

    .sec-bg {
      background: var(--bg-sec);
    }

    /* ════════════════════════════════════════════════════════════════
   PROBLEM
════════════════════════════════════════════════════════════════ */
    .prob-header {
      max-width: 660px;
      margin-bottom: 52px;
    }

    .prob-header h2 {
      margin-bottom: 22px;
    }

    .prob-header p+p {
      margin-top: 14px;
    }

    /* Intro – Bild links, Text rechts */
    .prob-intro {
      display: grid;
      gap: 40px;
      align-items: center;
      margin-bottom: 52px;
    }

    @media (min-width: 900px) {
      .prob-intro {
        grid-template-columns: 1fr 1fr;
        gap: 56px;
      }
    }

    .prob-intro .principle-header {
      max-width: none;
      margin-bottom: 0;
    }

    .prob-img {
      border-radius: var(--r-2xl);
      overflow: hidden;
      border: 1px solid var(--border);
      box-shadow: 0 24px 60px -30px rgba(60, 40, 20, .18);
    }

    .prob-img img {
      width: 100%;
      height: auto;
      display: block;
    }

    .prob-grid {
      display: grid;
      gap: 18px;
      grid-template-columns: repeat(4, 1fr);
    }

    @media (max-width: 900px) {
      .prob-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

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

    .prob-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 24px;
      transition: border-color .2s;
    }

    .prob-card:hover {
      border-color: var(--accent-40);
    }

    .prob-icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: var(--bg-sec);
      color: var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
    }

    .prob-card h3 {
      font-family: var(--serif);
      font-size: 19px;
      margin-bottom: 8px;
    }

    .prob-card p {
      font-size: 15px;
    }

    /* ════════════════════════════════════════════════════════════════
   PRINCIPLE (SO FUNKTIONIERT'S)
════════════════════════════════════════════════════════════════ */
    .principle-header {
      max-width: 680px;
      margin-bottom: 52px;
    }

    .principle-header .eyebrow {
      display: block;
      margin-bottom: 20px;
    }

    .steps-grid {
      display: grid;
      gap: 1px;
      overflow: hidden;
      border-radius: 16px;
      border: 1px solid var(--border);
      background: var(--border);
    }

    @media (min-width: 768px) {
      .steps-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    .step-cell {
      background: var(--card);
      padding: 32px;
    }

    .step-num {
      font-family: var(--serif);
      font-size: 42px;
      font-weight: 600;
      color: var(--accent-40);
      line-height: 1;
      margin-bottom: 20px;
    }

    .step-cell h3 {
      font-family: var(--serif);
      font-size: 19px;
      margin-bottom: 12px;
    }

    .step-cell p {
      font-size: 15px;
    }

    /* ════════════════════════════════════════════════════════════════
   ELEKTRO – JETZT VERFÜGBAR
════════════════════════════════════════════════════════════════ */
    .elektro-grid {
      display: grid;
      gap: 56px;
      align-items: center;
    }

    @media (min-width: 900px) {
      .elektro-grid {
        grid-template-columns: 1fr 1fr;
      }

      .elektro-img-col {
        order: 2;
      }

      .elektro-text-col {
        order: 1;
      }
    }

    .elektro-img {
      border-radius: var(--r-2xl);
      overflow: hidden;
      border: 1px solid var(--border);
    }

    .elektro-img img {
      width: 100%;
      height: auto;
      object-fit: cover;
      display: block;
    }

    .elektro-eyebrow {
      display: block;
      margin-bottom: 20px;
    }

    .elektro-h2 {
      margin-bottom: 22px;
    }

    .elektro-desc {
      font-size: 17px;
      margin-bottom: 14px;
    }

    .topics {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 28px;
    }

    .topic-pill {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 100px;
      padding: 7px 15px;
      font-size: 14px;
      color: var(--ink);
      transition: border-color .15s;
    }

    .topic-pill:hover {
      border-color: var(--accent-40);
    }

    .topic-chk {
      color: var(--accent);
      flex-shrink: 0;
    }

    /* ════════════════════════════════════════════════════════════════
   REPORT – DEIN ERGEBNIS
════════════════════════════════════════════════════════════════ */
    .report-grid {
      display: grid;
      gap: 56px;
      align-items: start;
    }

    @media (min-width: 900px) {
      .report-grid {
        grid-template-columns: 1.15fr 0.85fr;
      }
    }

    .report-eyebrow {
      display: block;
      margin-bottom: 20px;
    }

    .report-h2 {
      margin-bottom: 22px;
    }

    .report-desc {
      font-size: 17px;
      margin-bottom: 14px;
    }

    /* Report image (left) */
    .report-img {
      border-radius: var(--r-2xl);
      overflow: hidden;
      border: 1px solid var(--border);
      box-shadow: 0 24px 60px -30px rgba(60, 40, 20, .18);
    }

    .report-img img {
      width: 100%;
      height: auto;
      display: block;
    }

    /* Report card (left) */
    .report-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--r-2xl);
      box-shadow: 0 24px 60px -30px rgba(60, 40, 20, .22);
      overflow: hidden;
    }

    .report-card-top {
      background: var(--ink);
      padding: 20px 24px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
    }

    .report-top-label {
      font-size: 10px;
      letter-spacing: .18em;
      color: rgba(255, 255, 255, .45);
      text-transform: uppercase;
      margin-bottom: 6px;
    }

    .report-top-title {
      font-family: var(--serif);
      font-size: 18px;
      font-weight: 600;
      color: #fff;
    }

    .report-top-badge {
      background: rgba(255, 255, 255, .12);
      color: rgba(255, 255, 255, .8);
      font-size: 11px;
      font-weight: 500;
      padding: 4px 10px;
      border-radius: 100px;
      white-space: nowrap;
    }

    .report-card-body {
      padding: 22px;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .report-block-hd {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
    }

    .report-block-ico {
      width: 26px;
      height: 26px;
      border-radius: 7px;
      background: var(--bg-sec);
      color: var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .report-block-lbl {
      font-size: 14px;
      font-weight: 600;
      color: var(--ink);
    }

    .report-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding-left: 36px;
    }

    .report-pill {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 100px;
      padding: 4px 12px;
      font-size: 12px;
      color: var(--ink-muted);
    }

    .report-items {
      padding-left: 36px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .report-item {
      font-size: 13px;
      color: var(--ink-muted);
      line-height: 1.55;
      padding-left: 12px;
      position: relative;
    }

    .report-item::before {
      content: '';
      position: absolute;
      left: 0;
      top: 7px;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--accent-40);
    }

    .report-hint-box {
      margin-top: 2px;
      padding-left: 36px;
    }

    .report-hint-inner {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 10px 14px;
      font-size: 13px;
      color: var(--ink-muted);
      font-style: italic;
    }

    /* Right column: steps */
    .report-steps {
      padding-top: 8px;
    }

    .report-eyebrow-right {
      display: block;
      margin-bottom: 20px;
    }

    .report-h2-right {
      margin-bottom: 28px;
    }

    .step-list {
      display: flex;
      flex-direction: column;
      gap: 22px;
      margin-bottom: 32px;
    }

    .step-row {
      display: flex;
      gap: 16px;
      align-items: flex-start;
    }

    .step-badge {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      background: var(--ink);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 700;
      flex-shrink: 0;
      margin-top: 2px;
    }

    .step-title {
      font-size: 15px;
      font-weight: 600;
      color: var(--ink);
      margin-bottom: 4px;
    }

    .step-desc {
      font-size: 14px;
      color: var(--ink-muted);
      line-height: 1.6;
    }

    .report-quote {
      border-top: 1px solid var(--border);
      padding-top: 24px;
      font-family: var(--serif);
      font-size: 19px;
      font-weight: 600;
      color: var(--ink);
      line-height: 1.4;
    }

    /* ════════════════════════════════════════════════════════════════
   WHY GUIDED – WARUM GEFÜHRT?
════════════════════════════════════════════════════════════════ */
    .why-grid {
      display: grid;
      gap: 56px;
    }

    @media (min-width: 900px) {
      .why-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    .why-eyebrow {
      display: block;
      margin-bottom: 20px;
    }

    .why-h2 {
      margin-bottom: 22px;
    }

    .why-desc {
      font-size: 17px;
    }

    .why-comparison {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 16px;
      margin-top: 28px;
    }

    .why-item {
      display: flex;
      gap: 14px;
      align-items: flex-start;
      padding: 14px;
      border-radius: 10px;
    }

    .why-item.vs-divider {
      padding: 8px 14px;
      align-items: center;
      justify-content: center;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }

    .why-item.vs-divider span {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .12em;
      color: var(--ink-sub);
      text-transform: uppercase;
    }

    .why-item.active {
      background: var(--ink);
      border-radius: 10px;
    }

    .why-ico {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: var(--bg-sec);
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--ink-muted);
    }

    .why-item.active .why-ico {
      background: rgba(255, 255, 255, .12);
      color: #fff;
    }

    .why-item-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--ink);
      margin-bottom: 3px;
    }

    .why-item.active .why-item-title {
      color: #fff;
    }

    .why-item-desc {
      font-size: 13px;
      color: var(--ink-muted);
      line-height: 1.5;
    }

    .why-item.active .why-item-desc {
      color: rgba(255, 255, 255, .65);
    }

    .why-benefits {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .why-benefit {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 18px 20px;
      display: flex;
      gap: 16px;
      align-items: flex-start;
      transition: border-color .2s;
    }

    .why-benefit:hover {
      border-color: var(--accent-40);
    }

    .why-ben-ico {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: var(--bg-sec);
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--accent);
    }

    .why-ben-title {
      font-size: 15px;
      font-weight: 600;
      color: var(--ink);
      margin-bottom: 3px;
    }

    .why-ben-desc {
      font-size: 14px;
      color: var(--ink-muted);
      line-height: 1.55;
    }

    /* ════════════════════════════════════════════════════════════════
   ROADMAP – WEITERE HELFER
════════════════════════════════════════════════════════════════ */
    .roadmap-header {
      max-width: 640px;
      margin-bottom: 52px;
    }

    .roadmap-eyebrow {
      display: block;
      margin-bottom: 20px;
    }

    .roadmap-h2 {
      margin-bottom: 22px;
    }

    .roadmap-grid {
      display: grid;
      gap: 18px;
      grid-template-columns: repeat(3, 1fr);
    }

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

    .roadmap-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 24px;
    }

    .roadmap-card.available {
      border-color: var(--accent-40);
    }

    .roadmap-card-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 20px;
    }

    .roadmap-ico {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: var(--bg-sec);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--ink-muted);
    }

    .roadmap-card.available .roadmap-ico {
      background: var(--accent);
      color: #faf8f5;
    }

    .roadmap-status {
      font-size: 11px;
      font-weight: 500;
      padding: 3px 10px;
      border-radius: 100px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }

    .roadmap-status.avail {
      background: var(--accent-10);
      color: var(--accent);
    }

    .roadmap-status.planned {
      background: var(--bg-sec);
      color: var(--ink-sub);
    }

    .roadmap-status .dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: currentColor;
    }

    .roadmap-card h3 {
      font-family: var(--serif);
      font-size: 20px;
      margin-bottom: 8px;
    }

    .roadmap-card p {
      font-size: 14px;
      line-height: 1.6;
    }

    .roadmap-items {
      margin-top: 14px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .roadmap-item {
      font-size: 13px;
      color: var(--ink-sub);
      padding-left: 12px;
      position: relative;
    }

    .roadmap-item::before {
      content: '·';
      position: absolute;
      left: 0;
      color: var(--ink-sub);
    }

    .roadmap-more {
      text-align: center;
      margin-top: 28px;
    }

    .roadmap-more a {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      color: var(--ink-muted);
      border: 1px solid var(--border);
      border-radius: 100px;
      padding: 10px 22px;
      background: var(--card);
      transition: border-color .2s, color .15s;
    }

    .roadmap-more a:hover {
      border-color: var(--accent-40);
      color: var(--ink);
    }

    /* ════════════════════════════════════════════════════════════════
   KEIN ERSATZ (PHOTO SECTION)
════════════════════════════════════════════════════════════════ */
    .nofach-grid {
      display: grid;
      gap: 56px;
      align-items: center;
    }

    @media (min-width: 900px) {
      .nofach-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    .nofach-img {
      border-radius: var(--r-2xl);
      overflow: hidden;
      border: 1px solid var(--border);
    }

    .nofach-img img {
      width: 100%;
      height: 380px;
      object-fit: cover;
      display: block;
    }

    .nofach-eyebrow {
      display: block;
      margin-bottom: 16px;
    }

    .nofach-h2 {
      margin-bottom: 20px;
    }

    .nofach-desc {
      font-size: 17px;
      margin-bottom: 14px;
    }

    .nofach-claim {
      font-family: var(--serif);
      font-size: 20px;
      font-weight: 600;
      color: var(--ink);
      margin-top: 28px;
      line-height: 1.35;
    }

    /* ════════════════════════════════════════════════════════════════
   TRUST – FÜR BAUHERREN ENTWICKELT (dark)
════════════════════════════════════════════════════════════════ */
    .trust-section {
      background: var(--dark);
      padding: 80px 0;
    }

    @media (min-width: 768px) {
      .trust-section {
        padding: 112px 0;
      }
    }

    .trust-section .eyebrow {
      color: #faf8f5;
      display: block;
      text-align: center;
      margin-bottom: 20px;
    }

    .trust-section h2 {
      color: #fff;
      text-align: center;
      margin-bottom: 56px;
    }

    .trust-grid {
      display: grid;
      gap: 16px;
      grid-template-columns: repeat(3, 1fr);
    }

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

    .trust-card {
      background: var(--dark-card);
      border: 1px solid var(--dark-border);
      border-radius: 16px;
      padding: 28px;
    }

    .trust-ico {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: rgba(255, 255, 255, .1);
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, .65);
      margin-bottom: 18px;
    }

    .trust-card h3 {
      font-family: var(--serif);
      font-size: 20px;
      color: #fff;
      margin-bottom: 10px;
    }

    .trust-card p {
      font-size: 15px;
      color: var(--dark-muted);
      line-height: 1.65;
    }

    /* ════════════════════════════════════════════════════════════════
   PRICING – JETZT STARTEN
════════════════════════════════════════════════════════════════ */
    .pricing-grid {
      display: grid;
      gap: 56px;
      align-items: start;
    }

    @media (min-width: 900px) {
      .pricing-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    .pricing-eyebrow {
      display: block;
      margin-bottom: 20px;
    }

    .pricing-h2 {
      margin-bottom: 22px;
    }

    .pricing-desc {
      font-size: 17px;
      margin-bottom: 32px;
    }

    .pricing-checks {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .pricing-check {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      font-size: 15px;
      color: var(--ink);
    }

    .chk-ico {
      width: 20px;
      height: 20px;
      border-radius: 6px;
      background: var(--accent-10);
      color: var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 2px;
    }

    /* Price card */
    .price-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--r-2xl);
      padding: 32px;
      position: relative;
      box-shadow: 0 8px 32px rgba(60, 40, 20, .08);
    }

    .price-card-badge {
      position: absolute;
      top: -14px;
      right: 24px;
      background: var(--ink);
      color: #fff;
      font-size: 12px;
      font-weight: 500;
      padding: 5px 14px;
      border-radius: 100px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .price-card-badge .live-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #4ade80;
    }

    .price-name {
      font-size: 14px;
      color: var(--ink-muted);
      margin-bottom: 14px;
    }

    .price-amount {
      font-family: var(--serif);
      font-size: 52px;
      font-weight: 700;
      color: var(--ink);
      letter-spacing: -.04em;
      line-height: 1;
    }

    .price-currency {
      font-size: 22px;
      vertical-align: super;
    }

    .price-period {
      font-size: 13px;
      color: var(--ink-sub);
      margin-top: 4px;
      margin-bottom: 28px;
    }

    .price-btn {
      width: 100%;
      justify-content: center;
      font-size: 15px;
      padding: 14px 24px;
    }

    .price-note {
      text-align: center;
      margin-top: 12px;
      font-size: 12px;
      color: var(--ink-sub);
      line-height: 1.5;
    }

    /* ════════════════════════════════════════════════════════════════
   FAQ
════════════════════════════════════════════════════════════════ */
    .faq-header {
      text-align: center;
      margin-bottom: 48px;
    }

    .faq-header .eyebrow {
      display: block;
      margin-bottom: 16px;
    }

    .faq-list {
      max-width: 700px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    details {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 16px;
      overflow: hidden;
      transition: border-color .2s;
    }

    details[open] {
      border-color: var(--accent-40);
    }

    summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 20px 24px;
      cursor: pointer;
      font-family: var(--serif);
      font-size: 17px;
      font-weight: 600;
      color: var(--ink);
      list-style: none;
      -webkit-appearance: none;
    }

    summary::-webkit-details-marker {
      display: none;
    }

    .faq-plus {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      flex-shrink: 0;
      background: var(--bg-sec);
      color: var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform .2s ease;
    }

    details[open] .faq-plus {
      transform: rotate(45deg);
    }

    .faq-ans {
      padding: 0 24px 20px;
      font-size: 15px;
      color: var(--ink-muted);
      line-height: 1.7;
    }

    /* ════════════════════════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════════════════════════ */
    .footer {
      background: var(--dark);
      color: #fff;
      padding: 64px 0 40px;
      border-top: 1px solid var(--dark-border);
    }

    .footer-grid {
      display: grid;
      gap: 40px;
      margin-bottom: 56px;
    }

    @media (min-width: 768px) {
      .footer-grid {
        grid-template-columns: 1.4fr 1fr 1fr 1fr;
      }
    }

    .footer-logo {
      font-family: var(--serif);
      font-size: 18px;
      font-weight: 600;
      color: #fff;
      letter-spacing: -.02em;
    }

    .footer-logo .dash {
      color: var(--accent);
    }

    .footer-desc {
      font-size: 14px;
      color: var(--dark-muted);
      line-height: 1.7;
      margin-top: 14px;
      max-width: 260px;
    }

    .footer-col-h {
      font-size: 14px;
      font-weight: 600;
      color: #fff;
      margin-bottom: 14px;
    }

    .footer-links {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .footer-links a {
      font-size: 14px;
      color: var(--dark-muted);
      transition: color .12s;
    }

    .footer-links a:hover {
      color: #fff;
    }

    .footer-bottom {
      border-top: 1px solid var(--dark-border);
      padding-top: 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
      font-size: 13px;
      color: var(--dark-muted);
    }

    /* ════════════════════════════════════════════════════════════════
   SCROLL REVEAL
════════════════════════════════════════════════════════════════ */
    .reveal {
      opacity: 0;
      transform: translateY(16px);
      transition: opacity .6s ease, transform .6s ease;
    }

    .reveal.in {
      opacity: 1;
      transform: none;
    }

    .reveal[data-d="1"] {
      transition-delay: .08s;
    }

    .reveal[data-d="2"] {
      transition-delay: .16s;
    }

    .reveal[data-d="3"] {
      transition-delay: .24s;
    }

    .reveal[data-d="4"] {
      transition-delay: .32s;
    }

    /* ════════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════════ */
    @media (max-width: 640px) {
      h1 {
        font-size: 2.3rem;
      }

      h2 {
        font-size: 1.8rem;
      }

      .hero-btns {
        flex-direction: column;
      }

      .hero-btns .btn {
        width: 100%;
        justify-content: center;
      }

      .footer-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

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

    /* ════════════════════════════════════════════════════════════════
   ACCESSIBILITY
════════════════════════════════════════════════════════════════ */
    @media (prefers-reduced-motion: reduce) {
      .reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }
    }

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

    /* ════════════════════════════════════════════════════════════════
   SEITEN-TEILBAUSTEINE (Website-Umbau nach Struktur-Spezifikation)
════════════════════════════════════════════════════════════════ */

    /* Aktiver Nav-Eintrag der aktuellen Seite */
    .nav-links a.active,
    .nav-links a[aria-current="page"] {
      color: var(--ink);
      font-weight: 500;
    }

    /* Hero: drei Vertrauenspunkte statt Preiszeile */
    .hero-points {
      display: grid;
      gap: 14px;
      margin-top: 36px;
      padding-top: 28px;
      border-top: 1px solid var(--border);
    }

    @media (min-width: 560px) {
      .hero-points {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
      }
    }

    .hero-point-title {
      font-family: var(--serif);
      font-size: 16px;
      font-weight: 600;
      color: var(--ink);
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 4px;
    }

    .hero-point-title svg {
      color: var(--accent);
      flex-shrink: 0;
    }

    .hero-point-sub {
      font-size: 14px;
      color: var(--ink-muted);
      line-height: 1.55;
    }

    /* Subseiten-Kopf (Produkt-, Info- und Übersichtsseiten) */
    .page-hero {
      padding: 64px 0 56px;
      border-bottom: 1px solid var(--border);
      background: var(--bg-sec);
    }

    @media (min-width: 768px) {
      .page-hero {
        padding: 88px 0 72px;
      }
    }

    .page-hero-inner {
      max-width: 780px;
    }

    .page-hero .eyebrow {
      display: block;
      margin-bottom: 20px;
    }

    .page-hero h1 {
      margin-bottom: 22px;
    }

    .page-hero .lead {
      font-size: 18px;
      line-height: 1.7;
      max-width: 660px;
    }

    .page-hero .hero-btns {
      margin-top: 34px;
    }

    .page-hero-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 22px;
      margin-top: 30px;
      padding-top: 24px;
      border-top: 1px solid var(--border);
      font-size: 14px;
      color: var(--ink-muted);
    }

    .page-hero-meta strong {
      color: var(--ink);
      font-weight: 600;
    }

    /* Absätze mit gesetzter Aussage */
    .claim {
      font-family: var(--serif);
      font-size: clamp(1.05rem, 2vw, 1.25rem);
      font-weight: 600;
      color: var(--ink);
      line-height: 1.45;
    }

    /* Zwei-Spalten-Vergleich (Checkliste vs. BauEtappen) */
    .vs-grid {
      display: grid;
      gap: 18px;
      margin-top: 44px;
    }

    @media (min-width: 768px) {
      .vs-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    .vs-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      padding: 30px;
    }

    .vs-card.active {
      border-color: var(--accent-40);
      box-shadow: 0 8px 32px rgba(60, 40, 20, .08);
    }

    .vs-label {
      font-family: var(--font);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--ink-sub);
      margin-bottom: 18px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .vs-card.active .vs-label {
      color: var(--accent);
    }

    .vs-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 13px;
    }

    .vs-list li {
      display: flex;
      gap: 12px;
      font-size: 15px;
      color: var(--ink-muted);
      line-height: 1.6;
    }

    .vs-list li::before {
      content: "";
      width: 16px;
      height: 16px;
      flex-shrink: 0;
      margin-top: 4px;
      border-radius: 50%;
      background: var(--accent-10);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M1.5 5l2.5 2.5 4.5-4.5' stroke='%23332c20' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
    }

    .vs-card:not(.active) .vs-list li::before {
      background-color: rgba(154, 143, 132, .16);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M2.5 2.5l5 5M7.5 2.5l-5 5' stroke='%236B6257' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    }

    .vs-card:not(.active) .vs-list li {
      color: var(--ink-sub);
    }

    /* Vier Schritte im Raster (Produktseite) */
    @media (min-width: 768px) {
      .steps-grid.four {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    /* Preis-Tarife (Kostenlos / einmalig) */
    .tier-grid {
      display: grid;
      gap: 18px;
      margin-top: 44px;
    }

    @media (min-width: 768px) {
      .tier-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    .tier-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      padding: 32px;
      display: flex;
      flex-direction: column;
    }

    .tier-card.highlight {
      border-color: var(--accent-40);
      box-shadow: 0 8px 32px rgba(60, 40, 20, .08);
    }

    .tier-name {
      font-size: 13px;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--ink-sub);
      margin-bottom: 16px;
    }

    .tier-card.highlight .tier-name {
      color: var(--accent);
    }

    .tier-price {
      font-family: var(--serif);
      font-size: 44px;
      font-weight: 700;
      letter-spacing: -.04em;
      line-height: 1;
      color: var(--ink);
      margin-bottom: 6px;
    }

    .tier-price small {
      font-size: 17px;
      font-weight: 600;
      letter-spacing: 0;
    }

    .tier-sub {
      font-size: 14px;
      color: var(--ink-muted);
      margin-bottom: 24px;
    }

    .tier-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 28px;
    }

    .tier-list li {
      display: flex;
      gap: 11px;
      font-size: 15px;
      color: var(--ink);
      line-height: 1.55;
    }

    .tier-list .chk-ico {
      margin-top: 3px;
    }

    .tier-card .btn {
      margin-top: auto;
      justify-content: center;
    }

    /* FAQ-Gruppenüberschrift */
    .faq-group {
      font-family: var(--font);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--accent);
      margin: 34px 0 4px;
    }

    .faq-group:first-child {
      margin-top: 0;
    }

    /* „Alle Fragen ansehen“-Link */
    .link-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      color: var(--ink-muted);
      border: 1px solid var(--border);
      background: var(--card);
      border-radius: 100px;
      padding: 11px 22px;
      transition: all .15s ease;
    }

    .link-pill:hover {
      color: var(--ink);
      border-color: var(--accent-40);
    }

    /* Aufzählung in Fließtext-Sections */
    .bullets {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 22px;
    }

    .bullets li {
      display: flex;
      gap: 12px;
      font-size: 16px;
      color: var(--ink-muted);
      line-height: 1.6;
    }

    .bullets li::before {
      content: "";
      width: 6px;
      height: 6px;
      flex-shrink: 0;
      margin-top: 10px;
      border-radius: 50%;
      background: var(--accent-40);
    }

    /* Abschluss-CTA-Band */
    .cta-band {
      background: var(--dark);
      padding: 72px 0;
      text-align: center;
    }

    @media (min-width: 768px) {
      .cta-band {
        padding: 96px 0;
      }
    }

    .cta-band .eyebrow {
      color: rgba(255, 255, 255, .55);
      display: block;
      margin-bottom: 18px;
    }

    .cta-band h2 {
      color: #fff;
      margin-bottom: 18px;
    }

    .cta-band p {
      color: var(--dark-muted);
      max-width: 520px;
      margin: 0 auto 32px;
      font-size: 17px;
    }

    .cta-band .btn-dark {
      background: #faf8f5;
      color: var(--ink);
      border-color: #faf8f5;
    }

    .cta-band .btn-dark:hover {
      background: #fff;
    }

    .cta-band .cta-note {
      margin-top: 20px;
      margin-bottom: 0;
      font-size: 14px;
      color: rgba(255, 255, 255, .5);
    }

    /* Themen-Pills ohne Haken („Was wird geplant“) */
    .topic-plain {
      background: var(--bg-sec);
    }

    /* Inline-Link in FAQ-Antworten (z. B. Datenschutzerklärung) */
    .faq-ans a.legal-link {
      color: var(--accent);
      font-weight: 500;
      text-decoration: underline;
      text-underline-offset: 3px;
      text-decoration-color: var(--accent-40);
      transition: text-decoration-color .12s;
    }

    .faq-ans a.legal-link:hover {
      text-decoration-color: var(--accent);
    }