/* Themenseiten (WEB-1004-5). Grundstil 1:1 aus module.html uebernommen, damit Kopf, Fuss,
   Karten und Formular identisch aussehen; darunter nur die Ergaenzungen der Themenseiten. */
  /* Selbst gehostet, bewusst kein Google-Fonts-CDN - Begruendung und Lizenzen in
     /vendor/fonts/SOURCES.md. Nur latin-Subsets als variable Schnitte (zusammen ~75 KB). */
  @font-face {
    font-family: "Jakarta";
    src: url("/vendor/fonts/plusjakartasans-latin-var.woff2") format("woff2");
    font-weight: 400 800; font-style: normal; font-display: swap;
  }
  @font-face {
    font-family: "InterVar";
    src: url("/vendor/fonts/inter-latin-var.woff2") format("woff2");
    font-weight: 400 700; font-style: normal; font-display: swap;
  }
  :root {
    --font-display: "Jakarta", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-sans: "InterVar", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
    --ink: var(--wr-ink);
    --ink-soft: var(--wr-brand-deep);
    --paper: var(--wr-surface-canvas);
    --paper-deep: var(--wr-surface-subtle);
    --white: var(--wr-surface-card);
    --green: var(--wr-brand-primary);
    --green-bright: var(--wr-brand-seafoam);
    --green-deep: var(--wr-brand-deep);
    --mint: var(--wr-brand-soft);
    --amber: var(--wr-brand-wheat);
    --accent-warm: var(--wr-brand-warm);
    --text: var(--wr-text);
    --muted: var(--wr-text-muted);
    --line: var(--wr-line);
    --line-dark: rgba(255,255,255,.13);
    --shadow-sm: var(--wr-shadow-sm);
    --shadow-lg: var(--wr-shadow-lg);
    --radius: 12px;
    --radius-lg: 18px;
    --max: 1240px;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    color: var(--text);
    background: var(--paper);
    font-family: var(--font-sans);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  /* Ueberschriften und Zahlen tragen die Display-Schrift, Fliesstext bleibt Inter. */
  h1, h2, h3, .brand, .price strong, .calc-total strong, .signal .number { font-family: var(--font-display); }
  body.nav-open { overflow: hidden; }
  a { color: inherit; text-decoration: none; }
  button, input, select { font: inherit; }
  button, select { cursor: pointer; }
  :focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
  [hidden] { display: none !important; }
  .skip-link { position: fixed; left: 16px; top: -60px; z-index: 999; padding: 10px 16px; border-radius: 10px; color: #fff; background: var(--ink); }
  .skip-link:focus { top: 16px; }
  .container { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
  .section { padding: 112px 0; scroll-margin-top: 90px; }
  .eyebrow { display: inline-flex; align-items: center; color: var(--green-deep); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
  .eyebrow.on-dark { color: var(--green-bright); }
  .section-heading { max-width: 790px; margin-bottom: 48px; }
  .section-heading.center { text-align: center; margin-inline: auto; }
  .section h2 { margin: 14px 0 18px; color: var(--ink); font-size: clamp(38px,4.6vw,62px); line-height: 1; letter-spacing: -.02em; overflow-wrap: normal; hyphens: none; text-wrap: balance; }
  .section-heading p { margin: 0; max-width: 680px; color: var(--muted); font-size: 18px; }
  .section-heading.center p { margin-inline: auto; }

  /* Navigation */
  .site-header { position: fixed; inset: 0 0 auto; z-index: 100; border-bottom: 1px solid transparent; transition: background .25s,border-color .25s; }
  .site-header.scrolled { background: rgba(247,243,236,.88); border-color: var(--line); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
  .nav { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
  .brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); font-size: 21px; font-weight: 900; letter-spacing: -.04em; }
  .brand-mark { position: relative; width: 30px; height: 30px; border: 2px solid var(--green); border-radius: 50%; box-shadow: inset 0 0 0 5px rgba(47,111,115,.14); }
  .brand-mark::before, .brand-mark::after { content: ""; position: absolute; left: 50%; top: 50%; transform-origin: left center; height: 2px; border-radius: 2px; background: var(--green-deep); }
  .brand-mark::before { width: 7px; transform: translate(-1px,-1px) rotate(-90deg); }
  .brand-mark::after { width: 8px; transform: translate(-1px,-1px) rotate(28deg); }
  .nav-links { display: flex; align-items: center; gap: 27px; }
  .nav-links a { position: relative; color: #4f5155; font-size: 13px; font-weight: 750; }
  .nav-links a:hover { color: var(--green-deep); }
  .nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 2px; border-radius: 999px; background: var(--green); transform: scaleX(0); transform-origin: center; transition: transform .2s ease; }
  .nav-links a[aria-current="location"] { color: var(--green-deep); }
  .nav-links a[aria-current="location"]::after { transform: scaleX(1); }
  .nav-mobile-cta { display: none; }
  .nav-actions { display: flex; align-items: center; gap: 10px; }
  .nav-cta, .button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 0 20px; border: 1px solid transparent; border-radius: 9px; font-weight: 800; transition: transform .2s,box-shadow .2s,background .2s; }
  .nav-cta { color: #fff; background: var(--ink); font-size: 13px; }
  .nav-cta:hover, .button.primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(47,49,54,.2); }
  .menu-toggle { display: none; width: 46px; height: 46px; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.72); color: var(--ink); font-weight: 900; }

  /* Hero */
  .hero { min-height: 820px; padding: 140px 0 78px; overflow: hidden; position: relative; border-bottom: 1px solid var(--line); background: linear-gradient(135deg,var(--paper) 0%,#f1eee5 58%,#edf3f1 100%); }
  .hero::before { content: ""; position: absolute; width: 580px; height: 580px; right: 10%; top: 20px; border-radius: 50%; background: radial-gradient(circle,rgba(168,207,198,.32),rgba(168,207,198,0) 70%); pointer-events: none; animation: ambient-breathe 14s ease-in-out infinite alternate; }
  .hero::after { content: ""; position: absolute; width: 480px; height: 480px; left: -180px; bottom: -220px; border-radius: 50%; background: radial-gradient(circle,rgba(199,111,74,.13),rgba(199,111,74,0) 70%); pointer-events: none; animation: ambient-breathe 18s ease-in-out infinite alternate-reverse; }
  @keyframes ambient-breathe {
    0% { transform: translate(0, 0) scale(1); opacity: .75; }
    50% { transform: translate(20px, -15px) scale(1.1); opacity: 1; }
    100% { transform: translate(-15px, 10px) scale(0.95); opacity: .8; }
  }
  .hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1.1fr) minmax(320px,.7fr); align-items: start; gap: 70px; }
  .hero-copy h1 { margin: 18px 0 26px; max-width: 760px; color: var(--ink); font-size: clamp(55px,6vw,86px); line-height: .98; letter-spacing: -.025em; }
  .hero-copy h1 span {
    display: block;
    margin-top: .04em;
    background: linear-gradient(110deg, var(--green-deep) 0%, var(--green-deep) 42%, var(--green) 50%, var(--green-deep) 58%, var(--green-deep) 100%);
    background-size: 260% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: text-shimmer 9s ease-in-out infinite;
  }
  @keyframes text-shimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
  }
  .hero-copy > p { max-width: 650px; margin: 0 0 30px; color: var(--muted); font-size: clamp(18px,1.8vw,21px); }
  .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
  .button { min-height: 54px; padding-inline: 25px; }
  .button.primary { color: #fff; background: var(--green); border-color: var(--green); }
  .button.secondary { color: var(--ink); background: rgba(255,255,255,.76); border-color: var(--line); }
  .button.secondary:hover { background: #fff; }
  .button.dark { color: #fff; background: var(--ink); }
  .button-arrow { font-size: 18px; transition: transform .2s; }
  .button:hover .button-arrow { transform: translateX(3px); }
  .hero-proof { display: flex; flex-wrap: wrap; gap: 10px 22px; color: var(--muted); font-size: 13px; font-weight: 700; }
  .hero-proof span { display: inline-flex; align-items: center; gap: 7px; }
  .hero-proof span::before { content: ""; width: 7px; height: 7px; background: var(--green); }

  /* Product stage */
  .product-stage { position: relative; min-height: 620px; display: grid; place-items: center; perspective: 1200px; }
  .product-device { position: relative; width: min(100%,345px); padding: 11px; border: 1px solid #484c52; border-radius: 39px; background: #22252a; box-shadow: 0 30px 70px rgba(47,49,54,.24); will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
  .product-device::before { content: ""; position: absolute; z-index: 2; left: 50%; top: 17px; width: 62px; height: 5px; transform: translateX(-50%); border-radius: 4px; background: #3f4349; }
  .product-device img { display: block; width: 100%; border-radius: 30px; image-rendering: -webkit-optimize-contrast; image-rendering: high-quality; -webkit-backface-visibility: hidden; backface-visibility: hidden; }

  .signal-strip { position: relative; z-index: 2; margin-top: -1px; color: #fff; background: var(--ink); }
  .signal-grid { display: grid; grid-template-columns: 1.35fr repeat(3,1fr); min-height: 126px; }
  .signal { padding: 25px 28px; border-right: 1px solid var(--line-dark); display: flex; flex-direction: column; justify-content: center; }
  .signal:last-child { border-right: 0; }
  .signal .number { color: var(--green-bright); font-size: 25px; font-weight: 850; letter-spacing: -.035em; }
  .signal p { margin: 5px 0 0; color: #b8bdc1; font-size: 13px; }
  .signal-intro strong { font-size: 18px; }
  .signal-intro p { max-width: 270px; }

  /* Story */
  .narrative { background: #fff; }
  .narrative-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 90px; align-items: start; }
  .sticky-copy { position: sticky; top: 120px; }
  .sticky-copy p { color: var(--muted); font-size: 18px; }
  .story-list { display: grid; gap: 16px; }
  .story-card { position: relative; min-height: 190px; padding: 30px 30px 28px 96px; border: 1px solid var(--line); border-radius: var(--radius); background: #f8f7f2; }
  .story-num { position: absolute; left: 28px; top: 28px; display: grid; place-items: center; width: 45px; height: 45px; border-radius: 4px; color: var(--green-deep); background: var(--mint); font-weight: 900; }
  .story-card h3 { margin: 0 0 8px; font-size: 23px; letter-spacing: -.035em; }
  .story-card p { margin: 0; color: var(--muted); }
  .flow { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 17px; }
  .flow span { padding: 6px 9px; border: 1px solid var(--line); border-radius: 4px; background: #fff; font-size: 10px; font-weight: 800; }

  /* Modules */
  .modules { color: #fff; background: var(--ink); }
  .modules .section-heading h2 { color: #fff; }
  .modules .section-heading p { color: #b8bdc1; }
  .module-bento { display: grid; grid-template-columns: repeat(12,1fr); gap: 14px; }
  .module-card { position: relative; min-height: 270px; padding: 27px; overflow: hidden; border: 1px solid var(--line-dark); border-radius: var(--radius); background: #25282d; transition: border-color .2s, transform .24s ease; }
  .module-card:hover { border-color: rgba(47,111,115,.5); }
  .module-card.large { grid-column: span 7; }
  .module-card.medium { grid-column: span 5; }
  .module-card.third { grid-column: span 4; }
  .module-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 30px; }
  .module-index { color: var(--green-bright); font-size: 11px; font-weight: 850; letter-spacing: .12em; }
  .module-state { padding: 5px 9px; border-radius: 4px; color: #c8cccf; background: rgba(255,255,255,.06); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
  .module-card h3 { margin: 0 0 9px; max-width: 440px; font-size: 27px; letter-spacing: -.02em; }
  .module-card p { max-width: 500px; margin: 0; color: #adb3b7; font-size: 14px; }
  .module-tags { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 7px; margin-top: 24px; }
  .module-tags span { padding: 6px 9px; border: 1px solid var(--line-dark); border-radius: 8px; color: #d1d4d6; font-size: 10px; font-weight: 700; }
  .module-card.accent { color: #fff; background: var(--green-deep); border-color: rgba(168,207,198,.55); border-left: 4px solid var(--green-bright); }
  .module-card.accent p { color: #c1d5d2; }
  .module-card.accent .module-index { color: var(--green-bright); }
  .module-card.accent .module-state { color: #d5e3e0; background: rgba(255,255,255,.06); }
  .module-card.accent .module-tags span { color: #d5e3e0; border-color: var(--line-dark); background: transparent; }

  /* Product tour */
  .tour { background: var(--paper-deep); }
  .tour-layout { display: grid; grid-template-columns: 300px 1fr; gap: 18px; }
  .tour-tabs { display: grid; align-content: start; gap: 7px; }
  .tour-tab { width: 100%; padding: 17px 18px; border: 0; border-left: 3px solid transparent; border-radius: 0; color: #686a6d; background: transparent; text-align: left; font-weight: 800; }
  .tour-tab[aria-selected="true"] { color: var(--ink); border-left-color: var(--green); background: #fff; box-shadow: none; }
  .tour-panel { min-height: 505px; padding: 42px; border-radius: var(--radius-lg); color: #fff; background: var(--ink); }
  .tour-panel-grid { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 46px; }
  .tour-panel h3 { margin: 13px 0 14px; font-size: 38px; line-height: 1.02; letter-spacing: -.02em; }
  .tour-panel p { color: #b8bdc1; }
  .tour-points { display: grid; gap: 10px; margin-top: 24px; }
  .tour-point { display: flex; align-items: flex-start; gap: 10px; color: #e0e2e4; font-size: 13px; }
  .tour-point::before { content: "✓"; color: var(--green-bright); font-weight: 900; }
  .tour-ui { padding: 17px; border: 1px solid var(--line-dark); border-radius: 8px; background: #23262a; }
  .tour-ui-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 13px; border-bottom: 1px solid var(--line-dark); }
  .tour-ui-head strong { font-size: 12px; }
  .tour-ui-head span { color: var(--green-bright); font-size: 9px; font-weight: 800; }
  .tour-row { display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
  .tour-row:last-child { border-bottom: 0; }
  .tour-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--ink); background: var(--green-bright); font-size: 10px; font-weight: 900; }
  .tour-row strong { display: block; font-size: 11px; }
  .tour-row small { color: #aeb4b7; font-size: 9px; }
  .tour-row time { color: #d2d6d8; font-size: 10px; }
  .tour-flow { display: grid; gap: 10px; }
  .tour-flow-step { display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: center; padding: 18px; border: 1px solid var(--line-dark); border-radius: 8px; background: #23262a; }
  .tour-flow-step > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 8px; color: var(--ink); background: var(--green-bright); font-size: 11px; font-weight: 900; }
  .tour-flow-step strong { display: block; margin-bottom: 3px; font-size: 13px; }
  .tour-flow-step small { display: block; color: #aeb4b7; font-size: 10px; line-height: 1.45; }

  /* Hardware */
  .hardware { background: var(--paper); padding: 112px 0; border-bottom: 1px solid var(--line); }
  .hw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 54px; }
  .hw-card { padding: 42px 34px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; text-align: center; }
  .hw-icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 0 auto 24px; border-radius: 50%; background: var(--paper); color: var(--green-deep); }
  .hw-card h3 { margin: 0 0 12px; font-size: 22px; letter-spacing: -.02em; }
  .hw-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }

  /* Pricing */
  .pricing { background: #fff; }
  .pricing-top { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 46px; }
  .pricing-top .section-heading { margin-bottom: 0; }
  .billing-toggle { display: inline-flex; padding: 5px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); }
  .billing-toggle button { padding: 10px 14px; border: 0; border-radius: 6px; color: var(--muted); background: transparent; font-size: 12px; font-weight: 850; }
  .billing-toggle button[aria-pressed="true"] { color: #fff; background: var(--ink); }
  .billing-toggle em { color: var(--green-deep); font-size: 10px; font-style: normal; }
  .price-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
  .price-card { position: relative; display: flex; flex-direction: column; padding: 31px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); transition: transform .24s ease,box-shadow .24s ease,border-color .24s ease; }
  .price-card.featured { color: #fff; background: var(--ink); border-color: var(--ink); box-shadow: none; transform: none; }
  .price-label { color: var(--green-deep); font-size: 11px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
  .featured .price-label { color: var(--green-bright); }
  .price-card h3 { margin: 9px 0 4px; font-size: 27px; letter-spacing: -.02em; }
  .price-card > p { min-height: 47px; margin: 0; color: var(--muted); font-size: 13px; }
  .featured > p, .featured .price-note { color: #99a8a0; }
  .price { display: flex; align-items: baseline; gap: 4px; margin: 25px 0 2px; }
  .price strong { font-size: 48px; line-height: 1; letter-spacing: -.02em; }
  .price span { color: var(--muted); font-size: 13px; }
  .featured .price span { color: #9baaa2; }
  .price-note { min-height: 22px; color: var(--muted); font-size: 11px; }
  .price-save { margin: -6px 0 0; color: var(--green-deep); font-size: 11px; font-weight: 700; }
  .featured .price-save { color: var(--green-bright); }
  .price-list { display: grid; gap: 11px; margin: 24px 0 29px; padding: 21px 0 0; border-top: 1px solid var(--line); }
  .featured .price-list { border-color: var(--line-dark); }
  .price-list span { display: flex; gap: 8px; font-size: 12px; font-weight: 700; }
  .price-list span::before { content: "✓"; color: var(--green-deep); font-weight: 900; }
  .featured .price-list span::before { color: var(--green-bright); }
  .price-card .button { width: 100%; margin-top: auto; }
  .featured .button { color: var(--ink); background: var(--green-bright); }
  .price-detail { margin-top: 68px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; }
  .detail-copy h3 { margin: 0 0 13px; font-size: 31px; letter-spacing: -.02em; }
  .detail-copy p { color: var(--muted); }
  .detail-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
  .detail-badges span { padding: 7px 10px; border-radius: 4px; color: var(--green-deep); background: var(--mint); font-size: 10px; font-weight: 850; }
  .module-table { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
  .table-row { display: grid; grid-template-columns: 1.2fr .8fr .7fr; gap: 14px; align-items: center; padding: 15px 19px; border-bottom: 1px solid var(--line); background: #fff; font-size: 12px; }
  .table-row:last-child { border-bottom: 0; }
  .table-row.head { color: var(--muted); background: var(--paper); font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
  .table-row strong { font-size: 13px; }
  .table-price { text-align: right; font-weight: 850; }

  /* Aus dem entfernten Rechnerformular uebrig geblieben: dieselben Klassen tragen
     die Felder im Demo-Anfrage-Fenster. */
  .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .field { display: grid; gap: 7px; }
  .field.full { grid-column: 1 / -1; }
  .field label { color: #4d5c54; font-size: 10px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
  .field select { width: 100%; height: 48px; padding: 0 13px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: var(--paper); }

  /* Subscription and pitch */
  .subscription { background: var(--paper); }
  .path-grid { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
  .path-step { min-height: 215px; padding: 26px; border-right: 1px solid var(--line); }
  .path-step:last-child { border-right: 0; }
  .path-step .step { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 3px; color: var(--green-deep); background: var(--mint); font-size: 11px; font-weight: 900; }
  .path-step h3 { margin: 25px 0 8px; font-size: 19px; letter-spacing: -.025em; }
  .path-step p { margin: 0; color: var(--muted); font-size: 12px; }
  .merchant { padding: 0 0 112px; background: var(--paper); }
  .merchant-card { position: relative; overflow: hidden; padding: 66px; border-radius: var(--radius-lg); color: #fff; background: var(--ink-soft); }
  .merchant-grid { position: relative; z-index: 1; display: grid; grid-template-columns: .95fr 1.05fr; gap: 60px; }
  .merchant-card h2 { margin: 14px 0 17px; max-width: 540px; color: #fff; font-size: clamp(38px,5vw,65px); line-height: .96; letter-spacing: -.02em; }
  .merchant-card p { color: #b8c8c1; }
  .pitch-list { display: grid; gap: 12px; }
  .pitch { padding: 20px; border: 1px solid var(--line-dark); border-radius: 6px; background: rgba(255,255,255,.035); }
  .pitch strong { display: block; margin-bottom: 5px; color: var(--green-bright); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
  .pitch span { font-size: 15px; font-weight: 750; }

  /* FAQ and footer */
  .faq { background: #fff; }
  .faq-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 80px; }
  .faq-list details { border-bottom: 1px solid var(--line); }
  .faq-list summary { list-style: none; display: flex; justify-content: space-between; gap: 20px; padding: 23px 0; font-weight: 820; cursor: pointer; }
  .faq-list summary::-webkit-details-marker { display: none; }
  .faq-list summary::after { content: "+"; color: var(--green-deep); font-size: 22px; }
  .faq-list details[open] summary::after { content: "−"; }
  .faq-list details p { margin: -7px 35px 23px 0; color: var(--muted); font-size: 14px; }
  .final-cta { padding: 78px 0; color: var(--ink); background: var(--green-bright); }
  .final-grid { display: flex; justify-content: space-between; align-items: center; gap: 45px; }
  .final-grid h2 { max-width: 760px; margin: 0; color: var(--ink); font-size: clamp(38px,5vw,65px); line-height: .98; letter-spacing: -.02em; }
  .site-footer { padding: 64px 0 26px; color: #c1cbc5; background: var(--ink); }
  .footer-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1.2fr; gap: 45px; }
  .footer-brand { color: #fff; }
  .footer-about { max-width: 320px; margin-top: 17px; color: #aebbb4; font-size: 13px; }
  .footer-col h3 { margin: 0 0 17px; color: #fff; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; }
  .footer-col a { display: block; margin: 8px 0; color: #8f9e96; font-size: 12px; }
  .footer-col a:hover { color: var(--green-bright); }
  .footer-address { color: #8f9e96; font-size: 12px; font-style: normal; }
  .footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 52px; padding-top: 22px; border-top: 1px solid var(--line-dark); color: #9caba3; font-size: 10px; }

  /* Demo Modal */
  .modal { padding: 0; border: 0; border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-lg); width: min(100% - 40px, 460px); color: var(--ink); }
  .modal::backdrop { background: rgba(34,37,42,0.85); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
  .modal-content { padding: 45px 40px; position: relative; }
  .modal-close { position: absolute; right: 15px; top: 15px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--paper); color: var(--muted); font-size: 20px; cursor: pointer; transition: background .2s; }
  .modal-close:hover { background: #e8e3dc; color: var(--ink); }
  .modal h3 { margin: 0 0 10px; font-size: 24px; letter-spacing: -.02em; }
  .modal p { color: var(--muted); font-size: 14px; margin: 0 0 25px; }
  .modal .field { margin-bottom: 16px; }
  .modal .field label { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--green-deep); margin-bottom: 6px; }
  .modal .field input, .modal .field select { width: 100%; height: 50px; padding: 0 16px; border: 1px solid var(--line); border-radius: 8px; font-size: 15px; }
  .modal .field input:focus, .modal .field select:focus { border-color: var(--green); outline: none; box-shadow: 0 0 0 3px rgba(47,111,115,.15); }
  .modal .button { width: 100%; margin-top: 10px; }

  @media (hover:hover) and (prefers-reduced-motion:no-preference) {
    .module-card:hover,.price-card:hover { transform: translateY(-3px); }
    .price-card:hover { border-color: rgba(47,111,115,.38); box-shadow: 0 16px 36px rgba(47,49,54,.09); }
    .price-card.featured:hover { box-shadow: 0 18px 42px rgba(47,49,54,.2); }
  }
  @media (prefers-reduced-motion:no-preference) {
    .motion-ready [data-reveal] { opacity: 0; transform: translateY(18px); }
    .motion-ready [data-reveal].is-visible { opacity: 1; transform: translateY(0); transition: opacity .58s cubic-bezier(.22,1,.36,1),transform .58s cubic-bezier(.22,1,.36,1); transition-delay: var(--reveal-delay,0ms); }
    .tour-panel.is-entering { animation: tour-panel-in .28s cubic-bezier(.22,1,.36,1); }
    .calc-total strong.is-updating { animation: price-update .28s cubic-bezier(.22,1,.36,1); }
  }
  @keyframes tour-panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes price-update { from { opacity: .45; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

  @media (max-width:1040px) {
    .nav-links { gap: 17px; }
    .hero-grid { grid-template-columns: 1fr; gap: 46px; }
    .hero-copy { max-width: 760px; }
    .product-stage { max-width: 780px; min-height: 580px; }
    .narrative-grid,.price-detail,.merchant-grid,.faq-grid { grid-template-columns: 1fr; gap: 42px; }
    .sticky-copy { position: static; }
    .module-card.large,.module-card.medium,.module-card.third { grid-column: span 6; }
    .tour-panel-grid { grid-template-columns: 1fr; }
    .tour-panel { min-height: auto; }
    .calculator { grid-template-columns: 1fr; }
    .hw-grid { grid-template-columns: 1fr; }
    .path-grid { grid-template-columns: 1fr 1fr; }
    .path-step:nth-child(2) { border-right: 0; }
    .path-step:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  }
  @media (max-width:820px) {
    .section { padding: 82px 0; }
    .menu-toggle { display: inline-grid; place-items: center; }
    .nav-cta { display: none; }
    .nav-links { position: fixed; inset: 76px 0 auto; display: grid; gap: 0; padding: 17px 20px 28px; background: var(--paper); border-bottom: 1px solid var(--line); transform: translateY(-130%); opacity: 0; transition: transform .25s,opacity .25s; }
    .nav-links.open { transform: translateY(0); opacity: 1; }
    .nav-links a { padding: 14px 2px; border-bottom: 1px solid var(--line); font-size: 16px; }
    .nav-links a::after { display: none; }
    .nav-links .nav-mobile-cta { display: inline-flex; justify-content: center; margin-top: 14px; padding: 13px 18px; border: 0; border-radius: 9px; color: #fff; background: var(--ink); }
    .hero { padding-top: 125px; }
    .hero-copy h1 { font-size: clamp(51px,14vw,72px); line-height: 1; }
    .product-stage { min-height: 590px; }
    .product-device { width: 290px; }
    .signal-grid { grid-template-columns: 1fr 1fr; }
    .signal { border-bottom: 1px solid var(--line-dark); }
    .signal:nth-child(2) { border-right: 0; }
    .module-card.large,.module-card.medium,.module-card.third { grid-column: span 12; }
    .tour-layout { grid-template-columns: 1fr; }
    .tour-tabs { display: flex; overflow-x: auto; padding-bottom: 5px; }
    .tour-tab { width: auto; white-space: nowrap; }
    .pricing-top { align-items: start; flex-direction: column; }
    .pricing-top .section-heading { width: 100%; max-width: 100%; min-width: 0; }
    .price-cards { grid-template-columns: 1fr; }
    .price-card.featured { transform: none; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width:590px) {
    .container { width: min(calc(100% - 28px),var(--max)); }
    .section h2 { font-size: clamp(31px,9.2vw,38px); }
    .hero { min-height: 0; padding-bottom: 65px; }
    .hero-copy h1 { font-size: clamp(42px,12.7vw,49px); }
    .hero-actions .button { width: 100%; }
    .product-stage { min-height: 0; margin-top: 8px; display: flex; flex-direction: column; gap: 14px; }
    .product-device { width: min(86vw,290px); }
    .signal-grid { grid-template-columns: 1fr; }
    .signal { border-right: 0; }
    .signal-intro { display: none; }
    .story-card { padding: 84px 23px 25px; }
    .story-num { left: 23px; top: 23px; }
    .tour-panel { padding: 27px 21px; }
    .module-card { min-height: 240px; padding: 23px; }
    .table-row { grid-template-columns: 1fr auto; }
    .table-row > :nth-child(2) { display: none; }
    .field-grid { grid-template-columns: 1fr; }
    .field.full { grid-column: auto; }
    .calc-form,.calc-result { padding: 28px 21px; }
    .path-grid { grid-template-columns: 1fr; }
    .path-step { min-height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
    .path-step:last-child { border-bottom: 0; }
    .merchant-card { padding: 42px 23px; }
    .final-grid { align-items: start; flex-direction: column; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; }
  }
  @media (prefers-reduced-motion:reduce) {
    html { scroll-behavior: auto; }
    *,*::before,*::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  }
  .language-switch{max-width:1180px;margin:0 auto;padding:8px 20px 0;display:flex;justify-content:flex-end;align-items:center;gap:8px}
  .language-switch label{font-size:.85rem;font-weight:700;opacity:.72}
  .language-switch select{min-height:38px;max-width:190px;border:1px solid rgba(0,0,0,.18);border-radius:10px;background:#fff;color:inherit;padding-block:6px;padding-inline:10px 32px}
  /* WEB-MOBILE-LANG-1005: Der Kopf ist fest und durchsichtig - bis 1040 px lag die Auswahl sonst ueber Logo, Menue bzw. "Demo anfragen". */
  @media (max-width:1040px){.language-switch{position:absolute;top:82px;left:0;right:0;padding:0 20px;z-index:2}}

  /* ---- Themenseiten (WEB-1004-5) ---- */
  .topic-hero { min-height: 0; padding: 170px 0 70px; }
  .topic-hero .hero-copy { max-width: 860px; }
  .topic-hero h1 { margin: 14px 0 0; font-size: clamp(36px,5.6vw,60px); line-height: 1.04; letter-spacing: -.02em; color: var(--ink); }
  .topic-hero .hero-copy > p { max-width: 720px; margin: 24px 0 30px; font-size: 18px; line-height: 1.6; color: var(--muted); }
  .topic-features .module-card { min-height: 0; }
  .topic-features .module-card p { margin-bottom: 18px; }
  .topic-price { background: #fff; }
  .topic-price-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items: start; }
  .price-rows { border-top: 1px solid var(--line); }
  .price-row { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line); }
  .price-row strong { display: block; font-family: var(--font-display); font-size: 17px; color: var(--ink); }
  .price-row span.note { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; }
  .price-row .amount { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--green-deep); white-space: nowrap; }
  .price-foot { margin: 18px 0 0; color: var(--muted); font-size: 13px; }
  .faq { background: var(--paper); }
  .faq-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 80px; }
  .faq-list details { border-bottom: 1px solid var(--line); }
  .faq-list summary { list-style: none; display: flex; justify-content: space-between; gap: 20px; padding: 23px 0; font-weight: 820; cursor: pointer; }
  .faq-list summary::-webkit-details-marker { display: none; }
  .faq-list summary::after { content: "+"; color: var(--green-deep); font-size: 22px; }
  .faq-list details[open] summary::after { content: "\2212"; }
  .faq-list details p { margin: -7px 35px 23px 0; color: var(--muted); font-size: 15px; }
  .topic-related { padding: 64px 0; background: #fff; border-top: 1px solid var(--line); }
  .topic-related h2 { margin: 0 0 22px; font-size: 22px; color: var(--ink); }
  .related-links { display: flex; flex-wrap: wrap; gap: 10px; }
  .related-links a { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-weight: 700; font-size: 14px; background: var(--paper); }
  .related-links a:hover { border-color: var(--green); color: var(--green-deep); }
  @media (max-width:1040px) {
    .topic-price-grid { grid-template-columns: 1fr; gap: 36px; }
  }
  @media (max-width:820px) {
    /* 140 statt 120 px: Platz fuer die Sprachauswahl unter dem Kopf (WEB-MOBILE-LANG-1005). */
    .topic-hero { padding: 140px 0 56px; }
  }
  @media (max-width:590px) {
    .topic-hero h1 { font-size: clamp(31px,9vw,40px); }
    .faq-list details p { margin-right: 0; }
  }

  @media (max-width:590px) { .modal-content { padding: 28px 24px; } }