*, *::before, *::after { box-sizing: border-box; }
    :root {
      --bg: #fff;
      --paper: #f7f6f2;
      --paper-2: #efeee8;
      --ink: #10110e;
      --muted: #54564f;
      --soft: #63655c;
      --green: #165b3d;
      --green-2: #0f452d;
      --mint: #e7f2eb;
      --line: #dedbd1;
      --line-2: #c7c4b7;
      --gold: #b9832d;
      --blue: #234a70;
      --shadow: 0 16px 55px rgba(16,17,14,.12);
      --shadow-sm: 0 8px 25px rgba(16,17,14,.08);
      --r: 8px;
      --serif: "Fraunces", Georgia, "Times New Roman", serif;
      --sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-family: var(--sans);
    }
    html { scroll-behavior: smooth; }
    body { margin: 0; color: var(--ink); background: var(--bg); line-height: 1.65; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
    a { color: inherit; text-decoration: none; }
    button, input, select, textarea { font: inherit; }
    button { cursor: pointer; }
    .serif { font-family: var(--serif); letter-spacing: -.02em; }

    @view-transition { navigation: auto; }
    .skip-link { position: absolute; left: 8px; top: -52px; z-index: 40; background: var(--green); color: #fff; padding: 10px 16px; border-radius: 6px; font-weight: 700; transition: top .2s; }
    .skip-link:focus { top: 8px; }
    :focus-visible { outline: 3px solid var(--green); outline-offset: 2px; border-radius: 4px; }
    .service-hero :focus-visible, .contact :focus-visible, .dark :focus-visible, .topbar :focus-visible, .calc-head :focus-visible { outline-color: #7be3a7; }

    .topbar {
      min-height: 38px;
      display: flex; align-items: center; justify-content: center;
      gap: .5rem; padding: 8px 6vw;
      background: var(--green); color: #fff;
      font-size: .86rem; text-align: center;
    }
    .topbar button, .topbar a { border: 0; background: transparent; color: #fff; text-decoration: underline; text-underline-offset: 3px; padding: 0; font-weight: 700; }

    .nav { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.95); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); }
    .nav-inner { height: 74px; display: flex; align-items: center; justify-content: space-between; padding: 0 6vw; gap: 1.5rem; }
    .brand { display: inline-flex; align-items: center; line-height: 1; border: 0; background: transparent; padding: 0; }
    .site-logo { display: block; width: auto; object-fit: contain; }
    .brand .site-logo { height: 44px; max-width: 190px; }
    .logo { display: inline-flex; align-items: baseline; font-family: var(--serif); font-size: 1.7rem; font-weight: 900; letter-spacing: -.04em; color: var(--ink); }
    .logo .logo-cap { font-size: 1.12em; }
    .logo .logo-stop { margin-left: .04em; color: var(--green); font-size: 1.05em; }
    .nav-links { display: flex; align-items: center; gap: .1rem; list-style: none; margin: 0; padding: 0; }
    .nav-links a, .nav-links button { border: 0; background: transparent; color: var(--muted); padding: 25px .7rem 22px; border-bottom: 3px solid transparent; font-size: .9rem; font-weight: 600; white-space: nowrap; display: inline-block; }
    .nav-links a:hover, .nav-links button:hover { color: var(--ink); }
    .nav-links .active, .nav-links a[aria-current="page"] { color: var(--green); border-bottom-color: var(--green); }
    .nav-cta { display: inline-flex; align-items: center; border: 0; border-radius: 6px; background: var(--green); color: #fff; padding: 11px 18px; font-weight: 700; white-space: nowrap; }
    .nav-cta:hover { background: var(--green-2); }
    .nav-toggle { display: none; border: 1px solid var(--line-2); background: #fff; border-radius: 6px; width: 42px; height: 42px; color: var(--ink); }
    .nav-toggle span, .nav-toggle::before, .nav-toggle::after { content: ""; display: block; width: 18px; height: 2px; background: currentColor; margin: 4px auto; }

    section, .band { padding: 72px 6vw; }
    .eyebrow { display: inline-flex; gap: 10px; align-items: center; color: var(--green); font-size: .72rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
    .eyebrow::before { content: ""; width: 24px; height: 2px; background: currentColor; border-radius: 2px; }
    h1, h2, h3 { margin: 0; font-family: var(--serif); line-height: 1.06; letter-spacing: -.02em; font-weight: 900; }
    h1 { font-size: clamp(2.3rem, 4.4vw, 3.85rem); }
    h2 { font-size: clamp(1.65rem, 3vw, 2.6rem); }
    h3 { font-size: clamp(1.1rem, 1.7vw, 1.35rem); }
    p { margin: 0; color: var(--muted); }
    .lead { font-size: 1rem; line-height: 1.75; max-width: 660px; }
    .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 7px; background: var(--green); color: #fff; padding: 14px 24px; min-height: 48px; font-weight: 700; transition: transform .18s, background .18s, box-shadow .18s; }
    .btn:hover { transform: translateY(-2px); background: var(--green-2); box-shadow: 0 12px 28px rgba(22,91,61,.25); }
    .btn.secondary { background: transparent; color: var(--green); border: 1px solid var(--line-2); box-shadow: none; }
    .btn.secondary:hover { border-color: var(--green); background: transparent; }
    .btn.light { background: #fff; color: var(--ink); }
    .btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.9; }

    .hero {
      position: relative;
      display: grid; align-items: center;
      padding: 58px 6vw 52px;
      background:
        radial-gradient(circle at 80% 22%, rgba(22,91,61,.16), transparent 34%),
        radial-gradient(circle at 88% 78%, rgba(125,188,34,.11), transparent 28%),
        linear-gradient(120deg, #f8f7f2 0%, #f2f1eb 55%, #e8eee8 100%);
    }
    .hero::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: var(--line); }
    .hero::before {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      background:
        linear-gradient(108deg, transparent 0 58%, rgba(22,91,61,.07) 58% 70%, transparent 70%),
        repeating-linear-gradient(76deg, rgba(16,17,14,.04) 0 1px, transparent 1px 170px);
      mask-image: linear-gradient(90deg, transparent 0%, #000 44%, #000 100%);
    }
    .hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(360px, .78fr); gap: 4vw; align-items: center; }
    .kicker { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; background: #fff; border: 1px solid var(--line-2); border-radius: 999px; box-shadow: var(--shadow-sm); color: var(--muted); font-size: .84rem; font-weight: 600; margin-bottom: 1.6rem; }
    .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--green); box-shadow: 0 0 0 4px rgba(22,91,61,.14); }
    .hero h1 em { color: var(--green); font-style: italic; }
    .service-hero h1 em { color: #7be3a7; font-style: italic; }
    .subline { margin: .55rem 0 1rem; color: var(--muted); font-family: var(--serif); font-size: clamp(1.2rem, 2vw, 1.6rem); font-style: italic; font-weight: 500; }
    .actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 2rem; }
    .kpis { display: flex; flex-wrap: wrap; gap: 2.4rem; border-top: 1px solid var(--line); margin-top: 2.6rem; padding-top: 2rem; }
    .kpi-value { font-family: var(--serif); color: var(--green); font-size: 1.55rem; font-weight: 900; line-height: 1.05; }
    .kpi-label { color: var(--muted); font-size: .8rem; margin-top: .3rem; max-width: 13rem; line-height: 1.4; }

    /* ---- Live-Einsparungsrechner ---- */
    .calc { align-self: stretch; background: rgba(255,255,255,.92); border: 1px solid var(--line-2); box-shadow: var(--shadow); border-radius: 14px; overflow: hidden; backdrop-filter: blur(10px); }
    .calc-head { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 18px 22px; background: var(--green); color: #fff; }
    .calc-title { font-weight: 800; font-size: 1.02rem; }
    .calc-sub { opacity: .76; font-size: .82rem; }
    .dash-pill { font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
    .calc-body { padding: 20px 22px 22px; }
    .calc-field { padding: 11px 0 13px; border-bottom: 1px solid var(--line); }
    .calc-label { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: .9rem; font-weight: 600; }
    .calc-amount { font-family: var(--serif); font-weight: 800; color: var(--ink); font-size: 1.05rem; }
    .calc-hint { color: var(--soft); font-size: .74rem; margin-top: 3px; }
    .calc input[type=range] { width: 100%; margin-top: 9px; accent-color: var(--green); height: 4px; }
    .calc-result { margin-top: 18px; padding: 18px; background: var(--mint); border: 1px solid #bdd8c8; border-radius: var(--r); }
    .calc-result-label { color: var(--green-2); font-size: .8rem; font-weight: 700; letter-spacing: .02em; }
    .calc-result-value { font-family: var(--serif); color: var(--green); font-size: clamp(1.9rem, 3.2vw, 2.35rem); font-weight: 900; line-height: 1.05; margin-top: 2px; }
    .calc-result-range { color: var(--muted); font-size: .86rem; margin-top: 4px; }
    .calc .btn { width: 100%; margin-top: 14px; }
    .mini-note { margin-top: 12px; color: var(--soft); font-size: .76rem; line-height: 1.5; }

    /* ---- Trust-Strip ---- */
    .trust-strip { padding: 26px 6vw; background: var(--paper); border-bottom: 1px solid var(--line); }
    .trust-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 26px; max-width: 1100px; margin: 0 auto; }
    .trust-label { color: var(--soft); font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
    .trust-chip { color: var(--ink); font-family: var(--serif); font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; opacity: .8; }
    .trust-partner { color: var(--green); font-weight: 800; font-size: .82rem; letter-spacing: .04em; border: 1px solid #bdd8c8; background: var(--mint); border-radius: 999px; padding: 5px 12px; }

    .center { max-width: 780px; margin: 0 auto; text-align: center; }
    .center .eyebrow { justify-content: center; }
    .center h2 { margin-top: .85rem; }
    .center p { margin: 1rem auto 0; }
    .cards { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--cards-gap, 1rem); margin-top: 3rem; }
    .cards > .card { flex: 0 1 calc((100% - 2 * var(--cards-gap, 1rem)) / 3); }
    .card { min-height: 290px; border: 1px solid var(--line); background: var(--paper); border-radius: var(--r); padding: 24px; text-align: left; transition: transform .2s, box-shadow .2s, border-color .2s, background .2s; }
    .card:hover { transform: translateY(-4px); background: #fff; border-color: #bdd8c8; box-shadow: var(--shadow-sm); }
    .icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 9px; background: var(--mint); border: 1px solid #bdd8c8; margin-bottom: 1.1rem; color: var(--green); }
    .icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; }
    .card h3 { font-family: var(--sans); font-size: 1.05rem; letter-spacing: 0; font-weight: 800; margin-bottom: .45rem; }
    .card p { font-size: .87rem; line-height: 1.6; }
    .card .link { margin-top: 1rem; color: var(--green); font-size: .8rem; font-weight: 800; letter-spacing: .03em; }

    /* ---- So läuft's (Home-Prozess) ---- */
    .how { background: var(--paper); }
    .how-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2.8rem; }
    .how-step { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 26px; }
    .how-num { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: #fff; font-family: var(--serif); font-weight: 800; margin-bottom: 1rem; }
    .how-step h3 { font-family: var(--sans); font-size: 1.1rem; font-weight: 800; letter-spacing: 0; margin-bottom: .4rem; }
    .how-step p { font-size: .9rem; }

    .dark { background: var(--ink); color: #fff; display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; align-items: center; }
    .dark p, .dark .quote { color: rgba(255,255,255,.7); }
    .quote { margin-top: 1.5rem; border-left: 3px solid #58a675; padding-left: 1rem; font-family: var(--serif); font-style: italic; font-size: 1.18rem; line-height: 1.6; }
    .stats { display: grid; gap: .8rem; }
    .stat { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 18px 20px; border: 1px solid rgba(255,255,255,.1); border-radius: var(--r); background: rgba(255,255,255,.05); }
    .stat span { color: rgba(255,255,255,.6); font-size: .9rem; }
    .stat strong { font-family: var(--serif); font-size: 1.7rem; font-weight: 900; }

    /* ---- Gründer ---- */
    .founder { display: grid; grid-template-columns: .8fr 1.2fr; gap: 5vw; align-items: center; }
    .founder-photo { aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, var(--paper-2), var(--mint)); border: 1px solid var(--line); display: grid; place-items: center; box-shadow: var(--shadow-sm); }
    .founder-photo picture, .founder-photo img { width: 100%; height: 100%; display: block; }
    .founder-photo img { object-fit: cover; object-position: center; }
    .founder-photo .site-logo { width: min(82%, 430px); max-height: 78%; }

    /* ---- Zitat-Band ---- */
    .quote-band { background: var(--mint); border-top: 1px solid #bdd8c8; border-bottom: 1px solid #bdd8c8; }
    .big-quote { font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.4; color: var(--green-2); max-width: 820px; margin: 1rem auto 0; }
    .quote-attr { color: var(--green); font-weight: 700; font-size: .9rem; margin-top: 1rem; }

    /* ---- FAQ ---- */
    .faq { max-width: 800px; margin: 2.6rem auto 0; display: grid; gap: .8rem; }
    .faq details { border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); padding: 0 20px; transition: border-color .2s, background .2s; }
    .faq details[open] { background: #fff; border-color: #bdd8c8; }
    .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 18px 0; font-weight: 700; color: var(--ink); }
    .faq summary::-webkit-details-marker { display: none; }
    .faq summary::after { content: "+"; font-family: var(--serif); font-size: 1.5rem; color: var(--green); line-height: 1; transition: transform .2s; }
    .faq details[open] summary::after { transform: rotate(45deg); }
    .faq details p { padding: 0 0 18px; font-size: .94rem; max-width: 680px; }

    .service-hero { position: relative; overflow: hidden; padding: 72px 6vw 64px; color: #fff; background-color: #0d2118; }
    .service-hero > * { position: relative; z-index: 2; }
    .service-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: right center; background-repeat: no-repeat; }
    .service-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, #0c2017 0%, rgba(12,32,23,.96) 30%, rgba(13,40,28,.5) 62%, rgba(20,70,48,.1) 100%); }
    .service-hero.shipping::before { background-image: url("images/hero-versand.jpg"); background-image: image-set(url("images/hero-versand.webp") type("image/webp"), url("images/hero-versand.jpg") type("image/jpeg")); }
    .service-hero.payment::before { background-image: url("images/hero-payment.jpg"); background-image: image-set(url("images/hero-payment.webp") type("image/webp"), url("images/hero-payment.jpg") type("image/jpeg")); }
    .service-hero.payment::after { background: linear-gradient(100deg, #0c121a 0%, rgba(17,24,32,.96) 30%, rgba(32,56,86,.5) 62%, rgba(49,95,134,.1) 100%); }
    .service-hero.packaging::before { background-image: url("images/hero-verpackung.jpg"); background-image: image-set(url("images/hero-verpackung.webp") type("image/webp"), url("images/hero-verpackung.jpg") type("image/jpeg")); }
    .service-hero.packaging::after { background: linear-gradient(100deg, #19130a 0%, rgba(33,27,15,.96) 30%, rgba(74,55,23,.5) 62%, rgba(107,81,33,.12) 100%); }
    .service-hero.contracts::before { background-image: url("images/hero-vertraege.jpg"); background-image: image-set(url("images/hero-vertraege.webp") type("image/webp"), url("images/hero-vertraege.jpg") type("image/jpeg")); }
    .service-hero.contracts::after { background: linear-gradient(100deg, #08130d 0%, rgba(9,23,17,.96) 30%, rgba(17,64,43,.5) 62%, rgba(22,91,61,.1) 100%); }
    .service-hero.partners::before { background-image: url("images/hero-rechnungspruefung.jpg"); background-image: image-set(url("images/hero-rechnungspruefung.webp") type("image/webp"), url("images/hero-rechnungspruefung.jpg") type("image/jpeg")); }
    .service-hero.partners::after { background: linear-gradient(100deg, #08130d 0%, rgba(10,27,21,.96) 30%, rgba(22,68,46,.5) 62%, rgba(31,110,75,.12) 100%); }
    .service-hero.sourcing::before { background-image: none; }
    .service-hero.sourcing::after { background: linear-gradient(100deg, #0a1712 0%, rgba(12,30,24,.96) 30%, rgba(19,72,58,.55) 62%, rgba(26,104,84,.12) 100%); }
    .service-hero.plain::before { background-image: none; }
    .service-hero.plain::after { background: linear-gradient(135deg, #091711, #11402b 62%, #165b3d); }
    .service-inner { max-width: 930px; }
    .crumb { color: rgba(255,255,255,.78); font-size: .84rem; margin-bottom: 1.9rem; }
    .crumb a, .crumb button { all: unset; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
    .crumb a:hover, .crumb button:hover { text-decoration: underline; }
    .badge { display: inline-flex; align-items: center; gap: 9px; padding: 6px 13px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.1); color: rgba(255,255,255,.78); font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1.2rem; }
    .badge::before { content: ""; width: 6px; height: 6px; border-radius: 99px; background: #7be3a7; }
    .service-hero p { color: rgba(255,255,255,.85); margin-top: 1rem; }
    .service-hero .btn.secondary { color: #fff; border-color: rgba(255,255,255,.25); }
    .service-kpis { display: flex; flex-wrap: wrap; gap: 3rem; border-top: 1px solid rgba(255,255,255,.14); padding-top: 2.4rem; margin-top: 3rem; }
    .service-kpis .kpi-value { color: #fff; }
    .service-kpis .kpi-label { color: rgba(255,255,255,.82); }
    .split { display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; align-items: start; }
    .split h2 { margin: .8rem 0 1rem; }
    .checks { display: grid; gap: .85rem; }
    .check { display: flex; align-items: flex-start; gap: 12px; color: var(--muted); font-size: .95rem; }
    .check-mark { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--mint); color: var(--green); border: 1px solid #bdd8c8; margin-top: 2px; }
    .check-mark svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 3; }
    .check strong { color: var(--ink); }
    .features { background: var(--paper); }
    .feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2.6rem; }
    .feature { border: 1px solid var(--line); background: #fff; border-radius: var(--r); padding: 24px; }
    .feature .icon { width: 38px; height: 38px; margin-bottom: .9rem; }
    .feature .icon svg { width: 18px; height: 18px; }
    .feature h3 { font-family: var(--sans); font-size: 1rem; letter-spacing: 0; font-weight: 800; margin-bottom: .45rem; }
    .feature p { font-size: .89rem; line-height: 1.6; }

    .process { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2.7rem; }
    .step-num { width: 50px; height: 50px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 50%; color: var(--green); font-family: var(--serif); font-weight: 800; margin-bottom: 1rem; }
    .step h3 { font-family: var(--sans); font-size: .98rem; letter-spacing: 0; font-weight: 800; margin-bottom: .3rem; }
    .step p { font-size: .88rem; line-height: 1.6; }

    .roi { background: var(--ink); color: #fff; }
    .roi p { color: rgba(255,255,255,.68); }
    .roi .eyebrow { color: #7be3a7; }
    .roi-card { border: 1px solid rgba(255,255,255,.13); border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.06); }
    .roi-card header { display: flex; justify-content: space-between; gap: 1rem; padding: 18px 22px; border-bottom: 1px solid rgba(255,255,255,.08); font-weight: 800; }
    .roi-row { display: flex; justify-content: space-between; gap: 1rem; padding: 14px 22px; border-bottom: 1px solid rgba(255,255,255,.07); color: rgba(255,255,255,.66); font-size: .92rem; }
    .roi-row strong { color: #7be3a7; }
    .roi-row .neg { color: rgba(255,255,255,.85); }
    .roi-total { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: 20px 22px; background: rgba(123,227,167,.12); }
    .roi-total strong { color: #7be3a7; font-family: var(--serif); font-size: 2rem; font-weight: 900; }

    .cta { text-align: center; background: var(--mint); border-top: 1px solid #bdd8c8; }
    .cta h2 { margin: .8rem 0 .7rem; }
    .cta p { max-width: 580px; margin: 0 auto 1.8rem; }

    .contact { background: var(--green); color: #fff; }
    .contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 4vw; max-width: 1080px; margin: 0 auto; }
    .contact p, .contact li { color: rgba(255,255,255,.78); }
    .contact ul { list-style: none; margin: 1.6rem 0 2rem; padding: 0; display: grid; gap: .8rem; }
    .contact li { display: flex; gap: 10px; align-items: flex-start; }
    .contact .check-mark { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.25); color: #7be3a7; }
    .form { background: #fff; color: var(--ink); border-radius: 12px; padding: 28px; box-shadow: 0 22px 60px rgba(0,0,0,.2); }
    .form h2 { font-size: 1.6rem; margin-bottom: .35rem; }
    .form > p { color: var(--muted); margin-bottom: 1.3rem; font-size: .94rem; }
    .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
    label { display: grid; gap: 6px; color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
    input, select, textarea { width: 100%; border: 1.5px solid var(--line-2); border-radius: 6px; padding: 11px 12px; color: var(--ink); background: #fff; }
    textarea { min-height: 105px; resize: vertical; }
    input:focus, select:focus, textarea:focus { outline: 3px solid rgba(22,91,61,.13); border-color: var(--green); }
    .full { grid-column: 1 / -1; }
    .success { display: none; margin-top: 1rem; padding: 14px; border-radius: var(--r); background: var(--mint); color: var(--green); font-weight: 800; }
    .form-error { display: none; margin-top: 1rem; padding: 12px 14px; border-radius: var(--r); background: #fbeceb; color: #9a2b21; font-size: .9rem; font-weight: 600; }

    footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 28px 6vw; background: var(--ink); color: rgba(255,255,255,.5); font-size: .82rem; }
    footer .site-logo { height: 44px; max-width: 190px; background: #fff; padding: 4px 8px; }
    footer .logo { color: #fff; font-size: 1.4rem; }
    footer .logo .logo-stop { color: #7be3a7; }
    footer .foot-links { display: flex; gap: 1.4rem; flex-wrap: wrap; }
    footer .foot-links a, footer .foot-links button { all: unset; cursor: pointer; }
    footer .foot-links a:hover, footer .foot-links button:hover { color: #fff; }

    .reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
    .reveal.in { opacity: 1; transform: none; }

    .mobile-cta { display: none; }

    /* ---- Logomark ---- */
    .logo-mark { width: .92em; height: .92em; margin-right: .16em; color: var(--green); display: inline-block; transform: translateY(.06em); }
    .logo-mark svg { width: 100%; height: 100%; display: block; }
    footer .logo-mark { color: #7be3a7; }

    /* ---- Rechner: Hebel-Aufschlüsselung ---- */
    .calc-breakdown { margin-top: 14px; padding-top: 13px; border-top: 1px solid #bdd8c8; display: grid; gap: 9px; }
    .cb-row { display: grid; grid-template-columns: 78px 1fr auto; gap: 10px; align-items: center; font-size: .8rem; }
    .cb-name { color: var(--green-2); font-weight: 700; }
    .cb-bar { height: 7px; border-radius: 99px; background: rgba(22,91,61,.12); overflow: hidden; }
    .cb-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green), #58a675); width: 0; transition: width .5s ease; }
    .cb-val { font-family: var(--serif); font-weight: 800; color: var(--green); font-size: .88rem; white-space: nowrap; }

    /* ---- Legal-Seiten ---- */
    .legal { max-width: 820px; margin: 0 auto; }
    .legal-h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); margin: .8rem 0 1rem; }
    .legal-note { background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--green); border-radius: var(--r); padding: 14px 16px; font-size: .9rem; margin-bottom: 2rem; line-height: 1.6; }
    .legal h2 { font-size: 1.2rem; margin: 1.8rem 0 .5rem; }
    .legal p { line-height: 1.7; }
    .legal a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }

    @media (max-width: 1120px) {
      .hero-grid { grid-template-columns: 1fr; }
      .calc { max-width: 560px; }
    }
    @media (max-width: 880px) {
      .nav-toggle { display: block; }
      .nav-links { position: absolute; left: 0; right: 0; top: 74px; display: none; flex-direction: column; align-items: stretch; background: #fff; border-bottom: 1px solid var(--line); padding: .5rem 6vw 1rem; }
      .nav.open .nav-links { display: flex; }
      .nav-links a, .nav-links button { width: 100%; text-align: left; padding: 13px 0; border-bottom: 1px solid var(--line); }
      .nav-cta { display: none; }
      .dark, .split, .contact-grid, .founder, .how-grid { grid-template-columns: 1fr; }
      .how-grid { gap: 1rem; }
      .feature-grid { grid-template-columns: 1fr 1fr; }
      .process { grid-template-columns: 1fr 1fr; }
      .founder-photo { aspect-ratio: 1 / 1; max-width: 420px; margin: 0 auto; }
      .founder-photo img { object-fit: cover; }
      .service-hero::before { background-position: center; }
      .service-hero::after { background: linear-gradient(180deg, rgba(8,18,13,.72), rgba(8,18,13,.9)) !important; }
      .mobile-cta { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 10px 5vw calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
      .mobile-cta .btn { width: 100%; }
      body { padding-bottom: 76px; }
    }
    @media (max-width: 620px) {
      section, .band, .hero, .service-hero { padding-left: 5vw; padding-right: 5vw; }
      .feature-grid, .process { grid-template-columns: 1fr; }
      .cards > .card { flex-basis: 100%; }
      .card { min-height: auto; }
      .form-grid { grid-template-columns: 1fr; }
      .kpis, .service-kpis { gap: 1.3rem; }
      .topbar { font-size: .78rem; }
      .calc { max-width: none; }
    }
    @media (prefers-reduced-motion: reduce) {
      * { animation: none !important; transition: none !important; }
      .reveal { opacity: 1; transform: none; }
    }

    /* Auf breiten Monitoren Inhalt zentrieren (Hintergründe bleiben randlos) */
    @media (min-width: 1500px) {
      .topbar, .nav-inner, section, .band, .hero, .service-hero, .trust-strip, footer {
        padding-left: max(6vw, calc((100vw - 1340px) / 2));
        padding-right: max(6vw, calc((100vw - 1340px) / 2));
      }
    }

    /* ---- EffiCent original CI refinement ---- */
    :root {
      --bg: #fbfaf6;
      --paper: #fbfaf6;
      --paper-2: #f3f1ea;
      --ink: #171816;
      --muted: #626862;
      --soft: #7a8078;
      --green: #0f5f3f;
      --green-2: #09452d;
      --mint: #edf7f2;
      --line: #e2dfd4;
      --line-2: #cfcabc;
      --gold: #b8862c;
      --blue: #1e7cf4;
      --shadow: 0 18px 42px rgba(15, 95, 63, .09);
      --shadow-sm: 0 10px 24px rgba(23, 24, 22, .07);
      --r: 4px;
      --serif: var(--sans);
    }

    body {
      background: var(--bg);
      color: var(--ink);
      line-height: 1.58;
    }

    main,
    section,
    .band,
    .hero,
    .dark {
      max-width: 100%;
      overflow-x: hidden;
    }

    .hero-grid > *,
    .split > *,
    .dark > *,
    .contact-grid > *,
    .founder > * {
      min-width: 0;
    }

    .topbar {
      background: var(--green);
      min-height: 32px;
      padding-top: 6px;
      padding-bottom: 6px;
      font-size: .74rem;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .nav {
      background: rgba(251, 250, 246, .96);
      border-bottom-color: var(--line);
    }

    .nav-inner { height: 68px; }

    .logo {
      font-family: var(--sans);
      font-size: 1.1rem;
      font-weight: 800;
      letter-spacing: 0;
      text-transform: none;
    }

    .logo .logo-cap,
    .logo .logo-stop {
      color: var(--green);
      font-size: 1em;
    }

    .logo-mark {
      display: none;
    }

    .nav-links a,
    .nav-links button {
      padding-top: 23px;
      padding-bottom: 20px;
      font-size: .76rem;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .nav-cta,
    .btn {
      border-radius: 3px;
      letter-spacing: 0;
      box-shadow: none;
    }

    .btn:hover {
      box-shadow: none;
      transform: translateY(-1px);
    }

    .btn.secondary {
      color: var(--ink);
      border-color: var(--line-2);
      background: transparent;
    }

    .btn.secondary:hover {
      color: var(--green);
      background: rgba(15, 95, 63, .04);
    }

    .eyebrow {
      color: var(--green);
      font-size: .66rem;
      letter-spacing: .22em;
    }

    .eyebrow::before {
      width: 18px;
      height: 1px;
    }

    h1,
    h2,
    h3 {
      font-family: var(--sans);
      font-weight: 800;
      letter-spacing: 0;
      line-height: 1.08;
    }

    h1 { font-size: clamp(2.35rem, 4.6vw, 4.15rem); }
    h2 { font-size: clamp(1.75rem, 3vw, 2.75rem); }
    h3 { font-size: clamp(1rem, 1.45vw, 1.18rem); }

    p,
    .lead {
      color: var(--muted);
    }

    .hero {
      padding-top: 68px;
      background: var(--bg);
    }

    .hero::before {
      display: none;
    }

    .hero::after {
      height: 4px;
      background: var(--green);
    }

    .hero-grid {
      align-items: stretch;
    }

    .kicker {
      border-radius: 0;
      border-color: var(--line);
      box-shadow: none;
      background: #fff;
      color: var(--green);
      font-size: .7rem;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .dot {
      background: var(--green);
      box-shadow: 0 0 0 4px rgba(15, 95, 63, .1);
    }

    .hero h1 em,
    .subline,
    .big-quote {
      color: var(--green);
      font-style: italic;
    }

    .subline {
      font-family: var(--sans);
      font-weight: 800;
    }

    .kpis {
      border-top-color: var(--line);
      gap: 1rem;
    }

    .kpis > div {
      flex: 1 1 150px;
      padding: 14px 16px;
      background: #fff;
      border: 1px solid var(--line);
      border-top: 4px solid var(--green);
    }

    .kpi-value,
    .calc-result-value,
    .stat strong,
    .roi-total strong,
    .cb-val {
      font-family: var(--sans);
      color: var(--green);
      letter-spacing: 0;
    }

    .calc {
      border-radius: 0;
      border-color: var(--line);
      box-shadow: var(--shadow);
      background: #fff;
    }

    .calc input[type=range] {
      display: block;
      min-width: 0;
    }

    .calc-head {
      background: var(--ink);
      border-top: 5px solid var(--green);
    }

    .dash-pill,
    .badge {
      border-radius: 0;
      letter-spacing: .14em;
    }

    .calc-result {
      border-radius: 0;
      background: var(--mint);
      border-color: rgba(15, 95, 63, .24);
    }

    .cb-bar span {
      background: var(--green);
    }

    .trust-strip {
      background: #fff;
      padding-top: 22px;
      padding-bottom: 22px;
    }

    .trust-label,
    .trust-partner {
      letter-spacing: .16em;
    }

    .trust-chip {
      font-family: var(--sans);
    }

    .cards,
    .feature-grid,
    .how-grid,
    .process {
      gap: .75rem;
    }
    .cards { --cards-gap: .75rem; }

    .card,
    .feature,
    .how-step,
    .faq details {
      border-radius: 0;
      background: #fff;
      box-shadow: none;
    }

    .card {
      min-height: 315px;
      border-top: 4px solid var(--green);
    }

    .card:hover,
    .feature:hover,
    .how-step:hover {
      border-color: rgba(15, 95, 63, .35);
      box-shadow: var(--shadow-sm);
      transform: translateY(-2px);
    }

    .icon {
      border-radius: 50%;
      background: var(--mint);
      border-color: rgba(15, 95, 63, .2);
    }

    .card h3,
    .feature h3,
    .how-step h3,
    .step h3 {
      font-family: var(--sans);
      font-weight: 800;
    }

    .how,
    .features {
      background: #fff;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .how-step {
      border-top: 4px solid var(--green);
    }

    .how-num,
    .step-num {
      border-radius: 0;
      font-family: var(--sans);
      background: var(--green);
      color: #fff;
      border-color: var(--green);
    }

    .dark,
    .roi,
    footer {
      background: var(--ink);
    }

    .dark .eyebrow,
    .roi .eyebrow,
    footer .logo .logo-stop,
    footer .logo .logo-cap {
      color: var(--green);
    }

    .quote {
      font-family: var(--sans);
      border-left-color: var(--green);
    }

    .stat {
      border-radius: 0;
      border-left: 4px solid var(--green);
      background: rgba(255,255,255,.035);
      flex-wrap: wrap;
    }

    .founder-photo {
      border-radius: 0;
      background: #fff;
      border: 1px solid var(--line);
      border-top: 5px solid var(--green);
    }

    .quote-band,
    .cta {
      background: var(--mint);
      border-color: rgba(15, 95, 63, .2);
    }

    .service-hero {
      background-color: var(--ink);
    }

    .service-hero::after,
    .service-hero.payment::after,
    .service-hero.packaging::after,
    .service-hero.contracts::after,
    .service-hero.partners::after {
      background: linear-gradient(100deg, rgba(23, 24, 22, .96) 0%, rgba(15, 95, 63, .88) 48%, rgba(15, 95, 63, .18) 100%);
    }

    .service-hero h1 em,
    .service-hero .eyebrow,
    .service-hero .badge::before,
    .roi-row strong,
    .roi-total strong {
      color: #c8f1df;
    }

    .service-kpis {
      border-top-color: rgba(255,255,255,.2);
    }

    .roi-card,
    .roi-card header,
    .roi-row {
      border-radius: 0;
    }

    .roi-total {
      background: var(--green);
    }

    .roi-total strong,
    .roi-total span {
      color: #fff;
    }

    .contact {
      background: var(--green);
    }

    .form {
      border-radius: 0;
      box-shadow: var(--shadow);
      border-top: 5px solid var(--ink);
    }

    input,
    select,
    textarea {
      border-radius: 0;
    }

    .faq summary::after {
      font-family: var(--sans);
    }

    @media (max-width: 880px) {
      .nav-links {
        top: 68px;
        background: var(--bg);
      }

      .topbar,
      .nav-inner,
      section,
      .band,
      .hero,
      .service-hero,
      .trust-strip,
      footer {
        padding-left: 4.5vw;
        padding-right: 4.5vw;
      }

      .service-hero::after {
        background: linear-gradient(180deg, rgba(23,24,22,.72), rgba(23,24,22,.94)) !important;
      }

      .stat strong {
        max-width: 100%;
        overflow-wrap: anywhere;
      }
    }

    /* --- Rechtstexte: Listen, Stand-Hinweis, offene Punkte --- */
    .legal ul { margin: .6rem 0 1rem 1.2rem; padding: 0; line-height: 1.7; }
    .legal ul li { margin-bottom: .35rem; }
    .legal-updated { font-size: .85rem; opacity: .7; margin: 0 0 1.2rem; }
    .todo { background: #fff3bf; color: #5f4b00; padding: 2px 6px; border-radius: 4px; font-size: .9em; }

    /* --- Kontaktformular: Datenschutzhinweis + Spam-Honeypot --- */
    .form-consent { font-size: .82rem; line-height: 1.6; opacity: .8; margin: 1rem 0 0; }
    .form-consent a { text-decoration: underline; text-underline-offset: 3px; }
    .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

    /* ---- Zweites Angebot: Internationales Sourcing ---- */
    .offer-band { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .offer-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 4vw; align-items: start; max-width: 1180px; margin: 0 auto; }
    .offer-list { list-style: none; display: grid; gap: .8rem; margin: 1.6rem 0 0; padding: 0; }
    .offer-list li { display: flex; align-items: flex-start; gap: 12px; color: var(--muted); font-size: .95rem; line-height: 1.55; }
    .offer-note { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--green); border-radius: var(--r); padding: 22px 24px; }
    .offer-note h3 { font-family: var(--sans); font-size: 1rem; font-weight: 800; margin-bottom: .6rem; }
    .offer-note p { font-size: .9rem; line-height: 1.65; color: var(--muted); }
    .offer-note p + p { margin-top: .9rem; }
    .offer-note-model { border-top: 1px solid var(--line); padding-top: .9rem; }
    @media (max-width: 900px) {
      .offer-grid { grid-template-columns: 1fr; gap: 2rem; }
    }