/* Codemeta OS – adaptive Marketing-Website. Design-Tokens und Komponenten. Spezifikation: docs/specs/adaptive-marketing-website.md */

  :root{
    --ink:#0f1720; --ink2:#3b4652; --mute:#66717d; --line:#dde3e9; --line2:#eef1f4;
    --ground:#f3f5f7; --paper:#ffffff; --green:#18cc63; --green-ink:#0e8a45; --green-soft:#e4f8ec;
    --steel:#2b5c8a; --steel-soft:#e7eef6; --amber:#b7791f; --amber-soft:#fbf1dc; --red:#c0392b;
    --display:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif;
    --body:'IBM Plex Sans',ui-sans-serif,system-ui,sans-serif;
    --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:14px;line-height:1.5}
  #site{min-height:100vh}
  button{font:inherit;cursor:pointer;color:inherit}
  button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--green-ink);outline-offset:2px}

  /* ---------- Simulator-Rail (nur Werkzeug, nicht Teil der Site) ---------- */
  .seg{display:flex;flex-wrap:wrap;gap:4px}
  .seg button{background:var(--paper);border:1px solid var(--line);color:var(--ink2);padding:3px 8px;border-radius:5px;font-size:12px}
  .seg button[aria-pressed="true"]{color:var(--ink);border-color:var(--ink);background:var(--paper);font-weight:600}

  /* ---------- Browser-Rahmen ---------- */
  @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
  .wrap{max-width:1080px;margin:0 auto;padding:0 40px}

  /* ---------- Site: Header ---------- */
  .site-head{position:sticky;top:0;z-index:5;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  .site-head .wrap{display:flex;align-items:center;gap:26px;height:60px}
  .logo{display:inline-flex;align-items:center;gap:0;font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:-.02em;color:inherit;text-decoration:none;white-space:nowrap}
  .logo .mark{height:22px;width:auto;display:block;margin-right:8px}
  .logo .w-code{color:var(--ink)}
  .logo .w-meta{color:var(--green);margin-right:6px}
  .logo .os-tag{font-family:var(--body);font-weight:700;font-size:10px;letter-spacing:.08em;color:var(--ink);border:1.5px solid var(--ink);border-radius:4px;padding:1px 5px;transform:translateY(-1px)}
  .menu-btn{display:none}
  .site-nav{display:flex;gap:18px;font-size:13.5px;color:var(--ink2);flex:1}
  .site-nav a{color:inherit;text-decoration:none}
  .head-cta{display:flex;gap:8px;align-items:center}
  .head-cta .tel{font-family:var(--mono);font-size:12.5px;color:var(--ink2);text-decoration:none;margin-right:6px}
  .btn-p{background:var(--green);color:var(--ink);border:0;border-radius:6px;padding:9px 15px;font-weight:600;font-size:13.5px;white-space:nowrap}
  .btn-p:hover{background:#13b857}
  .btn-s{background:transparent;color:var(--ink);border:1px solid var(--ink);border-radius:6px;padding:8px 14px;font-weight:600;font-size:13.5px;white-space:nowrap}
  .btn-s:hover{background:var(--ground)}
  .btn-l{background:transparent;border:0;padding:0;font-weight:600;color:var(--ink);border-bottom:2px solid var(--green);font-size:13.5px}

  /* ---------- Hero mit Raster ---------- */
  .hero{position:relative;padding:64px 0 48px;background:var(--paper);overflow:hidden}
  .hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line2) 1px,transparent 1px),linear-gradient(90deg,var(--line2) 1px,transparent 1px);background-size:32px 32px;mask-image:radial-gradient(900px 500px at 70% 20%,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(900px 500px at 70% 20%,#000 30%,transparent 75%);pointer-events:none}
  .hero .wrap{position:relative}
  .eyebrow{display:flex;align-items:center;gap:8px;font-size:11.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--green-ink);font-weight:600;margin:0 0 16px}
  .eyebrow::before{content:"";width:8px;height:8px;background:var(--green)}
  .hero h1{font-family:var(--display);font-weight:800;font-size:clamp(34px,5vw,60px);line-height:1;letter-spacing:-.025em;margin:0 0 18px;max-width:17ch;text-wrap:balance}
  .hero p.lead{font-size:18px;color:var(--ink2);max-width:56ch;margin:0 0 24px;line-height:1.5}
  .hero .ctas{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:34px}
  .hero .ctas small{color:var(--mute);font-size:12.5px;margin-left:6px}

  /* Intake — Einstieg wählen */
  .intake{border-top:1px solid var(--ink);border-bottom:1px solid var(--line);padding:18px 0 16px;max-width:760px;background:var(--paper)}
  .intake .q{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
  .intake .q b{font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:-.01em}
  .intake .q small{color:var(--mute);font-size:12px}
  .chips{display:flex;flex-wrap:wrap;gap:8px}
  .chip{background:var(--paper);border:1px solid var(--line);color:var(--ink);border-radius:6px;padding:8px 14px;font-size:13.5px;font-weight:500;text-align:left}
  .chip small{display:block;color:var(--mute);font-size:11.5px;font-weight:400}
  .chip:hover{border-color:var(--ink)}
  .chip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
  .chip[aria-pressed="true"] small{color:#b8c2cc}
  .intake .q2{margin-top:14px;padding-top:14px;border-top:1px solid var(--line2)}
  .intake .done{display:flex;align-items:center;gap:12px;color:var(--ink2);font-size:13.5px;flex-wrap:wrap}
  .intake .done b{color:var(--ink)}
  .intake .x{background:transparent;border:0;color:var(--mute);font-size:12.5px;text-decoration:underline;padding:0}
  .ctrl-badge{display:inline-flex;align-items:center;gap:8px;background:var(--amber-soft);color:var(--amber);border-radius:6px;padding:8px 12px;font-size:13px;margin-top:10px}

  /* Consent-Leiste */
  .consent{background:var(--ground);border-bottom:1px solid var(--line)}
  .consent .wrap{display:flex;align-items:center;gap:12px;padding:9px 40px;font-size:12.5px;color:var(--ink2);flex-wrap:wrap}
  .consent .wrap>span{flex:1;min-width:240px}
  .consent button{border-radius:5px;padding:5px 10px;font-size:12px;font-weight:600;border:1px solid var(--line);background:var(--paper);color:var(--ink)}
  .consent button.ok{background:var(--ink);color:#fff;border-color:var(--ink)}
  .consent button.link{border:0;background:transparent;text-decoration:underline;font-weight:500;color:var(--mute)}

  /* ---------- Sprachen (ADR 0997) ---------- */
  .lang-dd{position:relative}
  .lang-btn{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid transparent;border-radius:6px;padding:7px 9px;color:var(--ink2);font-family:var(--body);font-size:13px;font-weight:600;letter-spacing:.02em;cursor:pointer}
  .lang-btn:hover,.lang-btn[aria-expanded="true"]{background:var(--ground);color:var(--ink)}
  .lang-btn .globe{color:var(--green-ink)}
  .lang-btn .chev{color:var(--mute);transition:transform .15s}
  .lang-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
  .lang-pop{position:absolute;right:0;top:calc(100% + 6px);min-width:190px;background:var(--paper);border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 32px rgba(15,23,32,.12);padding:6px;z-index:20}
  .lang-pop[hidden]{display:none}
  .lang-pop a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:9px 10px;border-radius:6px;color:var(--ink);text-decoration:none;font-size:13.5px}
  .lang-pop a:hover,.lang-pop a:focus-visible{background:var(--ground)}
  .lang-pop a small{font-family:var(--mono);font-size:11px;color:var(--mute)}
  .lang-pop a[aria-current]{font-weight:600}
  .lang-pop a[aria-current] svg{color:var(--green-ink)}
  .lang-foot{display:flex;align-items:center;gap:14px;margin-left:auto}
  .lang-foot .globe{flex:none}
  .lang-foot a[aria-current]{color:var(--ink);font-weight:600}
  .lang-menu{display:flex;flex-wrap:wrap;gap:8px;padding:12px 0 24px}
  .lang-menu a{padding:8px 14px;border:1px solid var(--line);border-radius:6px;font-size:14px;color:var(--ink2);text-decoration:none}
  .lang-menu a[aria-current]{border-color:var(--ink);color:var(--ink);font-weight:600}
  .langhint{background:var(--ink);color:#fff}
  .langhint .wrap{display:flex;align-items:center;gap:14px;padding:8px 40px;font-size:12.5px;flex-wrap:wrap}
  .langhint .wrap>span{flex:1;min-width:200px}
  .langhint a{color:#fff;font-weight:600;text-decoration:underline}
  .langhint .x{background:transparent;border:0;color:rgba(255,255,255,.7);font-size:12px;text-decoration:underline;padding:0}

  /* ---------- Module ---------- */
  .mods{transition:opacity .3s}
  .mods.swap{opacity:.12}
  .mod{padding:72px 0;border-bottom:1px solid var(--line)}
  .mod.alt{background:var(--ground)}
  .mod .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:52px;align-items:center}
  .mod.flip .wrap>div:first-child{order:2}
  .mod .eyebrow{color:var(--mute)}
  .mod .eyebrow::before{background:var(--ink)}
  .mod h2{font-family:var(--display);font-weight:700;font-size:clamp(24px,2.9vw,36px);line-height:1.08;letter-spacing:-.02em;margin:0 0 14px;text-wrap:balance}
  .mod p.intro{color:var(--ink2);font-size:16px;margin:0 0 18px;max-width:50ch}
  .mod ul{margin:0 0 22px;padding:0;list-style:none;display:grid;gap:9px}
  .mod ul li{display:grid;grid-template-columns:14px 1fr;gap:10px;font-size:14px;color:var(--ink)}
  .mod ul li::before{content:"";width:6px;height:6px;background:var(--green);margin-top:7px;margin-left:2px}
  .mod .actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
  .mod.compact{padding:20px 0}
  .mod.compact .wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
  .mod.compact h3{font-family:var(--display);font-weight:700;font-size:17px;margin:0;letter-spacing:-.01em;min-width:170px}
  .mod.compact p{margin:0;color:var(--ink2);font-size:13.5px;flex:1;min-width:220px}

  /* Kontakt-Streifen (mitten in der Seite) */
  .strip{background:var(--paper);border-bottom:1px solid var(--line);padding:26px 0}
  .strip .wrap{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:20px;align-items:center}
  .strip h3{font-family:var(--display);font-weight:700;font-size:20px;margin:0 0 4px;letter-spacing:-.015em}
  .strip p{margin:0;color:var(--mute);font-size:13px}
  .strip .way{border-left:1px solid var(--line);padding-left:18px}
  .strip .way b{display:block;font-size:13.5px;margin-bottom:2px}
  .strip .way a,.strip .way button{font-family:var(--mono);font-size:13px;color:var(--ink);text-decoration:none;background:none;border:0;padding:0;border-bottom:1px solid var(--green)}
  .strip .way small{display:block;color:var(--mute);font-size:11.5px;margin-top:3px}

  /* Alle Funktionen */
  .allf{padding:56px 0;background:var(--paper);border-bottom:1px solid var(--line)}
  .allf h2{font-family:var(--display);font-weight:700;font-size:26px;margin:0 0 6px;letter-spacing:-.02em}
  .allf p{color:var(--mute);margin:0 0 20px}
  .allf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
  .allf-grid a{display:block;background:var(--paper);padding:14px 16px;color:var(--ink);text-decoration:none;font-size:13px}
  .allf-grid a b{display:block;font-family:var(--display);font-size:14.5px;margin-bottom:3px}
  .allf-grid a span{color:var(--mute)}
  .allf-grid a:hover{background:var(--green-soft)}

  /* ---------- Kontakt-Block (der eine dunkle Moment) ---------- */
  .contact{background:var(--ink);color:#fff;padding:72px 0}
  .contact .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:start}
  .contact .eyebrow{color:var(--green)}.contact .eyebrow::before{background:var(--green)}
  .contact h2{font-family:var(--display);font-weight:800;font-size:clamp(28px,3.4vw,44px);line-height:1.02;letter-spacing:-.025em;margin:0 0 14px;text-wrap:balance}
  .contact p.lead{color:#aeb8c2;font-size:16px;margin:0 0 26px;max-width:46ch}
  .ways{display:grid;gap:14px}
  .way2{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding:14px 0;border-top:1px solid #2a3542}
  .way2 .ic{width:36px;height:36px;border:1px solid #2a3542;display:grid;place-items:center;font-family:var(--mono);font-size:12px;color:var(--green)}
  .way2 b{display:block;font-size:14.5px}
  .way2 span{color:#aeb8c2;font-size:13px}
  .way2 a{color:#fff;font-family:var(--mono);font-size:13.5px;text-decoration:none;border-bottom:1px solid var(--green)}
  .form{background:#fff;color:var(--ink);padding:26px;border-radius:8px}
  .form h3{font-family:var(--display);font-weight:700;font-size:20px;margin:0 0 4px;letter-spacing:-.015em}
  .form p.sub{color:var(--mute);font-size:13px;margin:0 0 16px}
  .form .tabs{display:flex;gap:0;border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-bottom:16px}
  .form .tabs button{flex:1;background:var(--paper);border:0;padding:9px;font-size:13px;font-weight:500;color:var(--ink2)}
  .form .tabs button[aria-pressed="true"]{background:var(--ink);color:#fff;font-weight:600}
  .form .grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .form label{display:grid;gap:4px;font-size:12px;color:var(--mute)}
  .form label.full{grid-column:1/-1}
  .form input,.form textarea{font:inherit;font-size:14px;color:var(--ink);border:1px solid var(--line);border-radius:5px;padding:9px 10px;background:var(--paper);width:100%}
  .form textarea{min-height:70px;resize:vertical}
  .slots{display:flex;gap:6px;flex-wrap:wrap}
  .slot{border:1px solid var(--line);background:var(--paper);border-radius:5px;padding:6px 10px;font-size:12.5px;font-family:var(--mono)}
  .slot[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:#fff}
  .form .submit{display:flex;gap:12px;align-items:center;margin-top:14px;flex-wrap:wrap}
  .form .submit small{color:var(--mute);font-size:12px}
  .form .ok-msg{background:var(--green-soft);color:var(--green-ink);border-radius:6px;padding:12px 14px;font-size:13.5px;margin-top:12px}
  .foot{background:var(--ground);color:var(--mute);font-size:12.5px;padding:22px 0;border-top:1px solid var(--line)}
  .foot .wrap{display:flex;gap:18px;flex-wrap:wrap}
  .foot a{color:inherit;text-decoration:none}

  /* Schwebender Kontakt + mobile Leiste */
  .fab{position:fixed;right:18px;bottom:18px;background:var(--ink);color:#fff;border:0;border-radius:999px;padding:11px 16px;font-weight:600;font-size:13px;box-shadow:0 10px 30px rgba(15,23,32,.3);z-index:6;display:flex;gap:8px;align-items:center}
  .fab i{width:8px;height:8px;background:var(--green);border-radius:50%}
  .mbar{display:none}
  .hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

  /* ---------- Produkt-Mockups (helles App-Fenster) ---------- */
  .mock{background:var(--paper);border:1px solid var(--line);border-radius:8px;box-shadow:0 14px 40px rgba(15,23,32,.10);font-size:13px;min-width:0;overflow:hidden}
  .mod.alt .mock{box-shadow:0 14px 40px rgba(15,23,32,.14)}
  .mock .hd{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--ground);color:var(--mute);font-size:12px}
  .mock .hd b{color:var(--ink);font-weight:600;font-size:12.5px}
  .mock .bd{padding:14px}
  .kbd{font-family:var(--mono);font-size:11px;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:1px 6px;color:var(--ink);background:var(--paper)}
  .day{display:grid;gap:0}
  .day>div:not(.sum){display:grid;grid-template-columns:52px 1fr;gap:12px;padding:9px 0;border-top:1px solid var(--line2);position:relative}
  .day>div:not(.sum):first-child{border-top:0;padding-top:0}
  .day time{font-family:var(--mono);font-size:11.5px;color:var(--green-ink);padding-top:2px}
  .day b{display:block;font-size:12.5px;line-height:1.35}
  .day span{display:block;color:var(--mute);font-size:11.5px;margin-top:2px}
  .day .sum{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px solid var(--ink);font-size:11.5px;color:var(--mute)}
  .day .sum b{font-family:var(--display);font-size:15px;color:var(--ink);margin-left:4px}
  .list{display:grid;gap:6px}
  .li{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;border:1px solid var(--line);border-radius:6px;padding:8px 10px;background:var(--paper)}
  .li.sel{border-color:var(--green-ink);background:var(--green-soft)}
  .li small{color:var(--mute);display:block;font-size:11.5px}
  .tag{font-size:10.5px;font-weight:600;border-radius:4px;padding:2px 6px;letter-spacing:.03em;text-transform:uppercase}
  .tag.g{background:var(--green-soft);color:var(--green-ink)}.tag.b{background:var(--steel-soft);color:var(--steel)}.tag.y{background:var(--amber-soft);color:var(--amber)}.tag.r{background:#fdecea;color:var(--red)}
  .cmd input{width:100%;border:1px solid var(--ink);border-radius:6px;padding:9px 12px;color:var(--ink);font:inherit;margin-bottom:8px;background:var(--paper)}
  .calc .big{font-family:var(--display);font-weight:800;font-size:36px;color:var(--green-ink);line-height:1;letter-spacing:-.02em;margin:10px 0 12px}
  .calc .big small{font-size:13px;color:var(--mute);font-weight:500;font-family:var(--body);margin-left:6px;letter-spacing:0}
  .calc table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
  .calc td{padding:6px 0;border-top:1px solid var(--line2)}.calc td:last-child{text-align:right;font-family:var(--mono);font-size:12px}
  .calc td.strike{color:var(--mute);text-decoration:line-through}
  .calc .src{margin:10px 0 0;font-size:11px;color:var(--mute);line-height:1.4}
  .ring{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center}
  .ring svg{width:96px;height:96px}
  .ring .val{font-family:var(--display);font-weight:800;font-size:28px;letter-spacing:-.02em}
  .ring .val small{font-size:12px;color:var(--mute);font-weight:500;font-family:var(--body);letter-spacing:0}
  .findings{display:grid;gap:6px;margin-top:12px}
  .finding{display:grid;grid-template-columns:8px 1fr auto;gap:10px;align-items:center;font-size:12.5px}
  .finding i{width:8px;height:8px;border-radius:50%}
  .tl{position:relative;padding-left:18px}
  .tl::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--line)}
  .tl .ev{position:relative;padding:0 0 14px}
  .tl .ev::before{content:"";position:absolute;left:-17px;top:4px;width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--paper)}
  .tl .ev.next::before{background:var(--steel)}.tl .ev.vision::before{background:var(--paper);border:2px solid var(--green);width:6px;height:6px}
  .tl .ev b{display:block;font-family:var(--display);font-size:13px}
  .tl .ev span{color:var(--ink2);font-size:12.5px;display:block}
  .tl .ev em{font-style:normal;font-size:10.5px;color:var(--mute);font-family:var(--mono)}
  .akte{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;font-size:12.5px}
  .akte div{border-bottom:1px solid var(--line2);padding:5px 0}
  .akte small{display:block;color:var(--mute);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em}
  .akte .dq{grid-column:1/-1;display:flex;align-items:center;gap:8px;border:0;padding-top:8px}
  .bar{height:6px;background:var(--line2);border-radius:3px;overflow:hidden;flex:1}
  .bar i{display:block;height:100%;background:var(--green);border-radius:3px;transition:width .4s}
  .mock .in{display:flex;gap:8px;margin-bottom:12px}
  .mock .in input{flex:1;border:1px solid var(--line);border-radius:6px;padding:8px 10px;color:var(--ink);font:inherit;background:var(--paper)}
  .mock .in button{background:var(--ink);color:#fff;border:0;border-radius:6px;padding:0 12px;font-weight:600}
  .flow{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
  .flow .st{border:1px solid var(--line);border-radius:5px;padding:6px 9px;font-size:12px;white-space:nowrap;background:var(--paper)}
  .flow .st.ai{border-color:var(--steel);color:var(--steel);background:var(--steel-soft)}
  .flow .ar{color:var(--mute);font-size:11px}
  .vault{display:grid;gap:8px}
  .vault .row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;border:1px solid var(--line);border-radius:6px;padding:8px 10px;font-family:var(--mono);font-size:12px}
  .vault .row small{font-family:var(--body);color:var(--mute);display:block;font-size:11px}
  .vault button{background:var(--paper);border:1px solid var(--ink);color:var(--ink);border-radius:6px;padding:7px 12px;font-weight:600;font-size:12.5px}
  .bars{display:grid;gap:10px}
  .bars .b{display:grid;grid-template-columns:150px 1fr 70px;gap:10px;align-items:center;font-size:12.5px;font-variant-numeric:tabular-nums}
  .bars .b span:last-child{font-family:var(--mono);text-align:right;font-size:11.5px}
  .bars .track{height:10px;background:var(--line2);border-radius:5px;overflow:hidden;display:flex}
  .bars .track i{display:block;height:100%}
  .kan{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .kan .col b{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--mute);margin-bottom:6px}
  .kan .card{border:1px solid var(--line);border-radius:6px;padding:8px;font-size:12px;margin-bottom:6px;background:var(--paper)}
  .kan .card em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--green-ink);display:block}
  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .grid3 .it{border:1px solid var(--line);border-radius:6px;padding:9px 10px;font-size:12.5px}
  .grid3 .it small{display:block;color:var(--mute);font-size:11px}
  .grid3 .it.hi{border-color:var(--green-ink);background:var(--green-soft)}
  .steps{counter-reset:s;display:grid;gap:7px}
  .steps div{display:grid;grid-template-columns:22px 1fr;gap:8px;font-size:12.5px;align-items:start}
  .steps div::before{counter-increment:s;content:counter(s);font-family:var(--mono);font-size:11px;color:var(--green-ink);border:1px solid var(--green-ink);border-radius:50%;width:18px;height:18px;display:grid;place-items:center}
  .loc{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .loc .it{border:1px solid var(--line);border-radius:6px;padding:9px 10px;font-size:12.5px}
  .loc .it b{display:block;font-family:var(--display);font-size:13px}
  .loc .it span{color:var(--mute);font-size:11.5px}
  .docs{margin-top:10px;display:flex;gap:6px;flex-wrap:wrap}
  .docs span{border:1px solid var(--line);border-radius:4px;padding:3px 8px;font-size:11.5px;color:var(--ink2)}
  .inv{display:grid;grid-template-columns:1fr auto auto;gap:6px 12px;font-size:12.5px;align-items:center}
  .inv .h{color:var(--mute);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--line);padding-bottom:4px}
  .inv span{padding:3px 0}
  .inv .m{font-family:var(--mono);font-size:11.5px}
  /* ---------- Unterseiten (Sheets), Modal, Toast ---------- */
  .sheet{position:fixed;inset:0;background:var(--paper);overflow-y:auto;z-index:9}
  .sheet-bar{position:sticky;top:0;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);z-index:2}
  .sheet-bar .wrap{display:flex;align-items:center;gap:16px;height:48px}
  .crumb{font-family:var(--mono);font-size:12px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .detail{padding:40px 0 64px}
  .detail h1{font-family:var(--display);font-weight:800;font-size:clamp(28px,3.6vw,44px);letter-spacing:-.025em;line-height:1.02;margin:0 0 12px;max-width:22ch;text-wrap:balance}
  .detail p.lead{font-size:17px;color:var(--ink2);max-width:60ch;margin:0 0 28px}
  .detail-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
  .detail h3{font-family:var(--display);font-size:18px;letter-spacing:-.01em;margin:22px 0 6px}
  .detail h3:first-child{margin-top:0}
  .detail p{color:var(--ink2);max-width:60ch;margin:0 0 8px}
  .detail ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
  .detail ul li{display:grid;grid-template-columns:14px 1fr;gap:10px;font-size:14px}
  .detail ul li::before{content:"";width:6px;height:6px;background:var(--green);margin-top:7px;margin-left:2px}
  .detail .keys{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13px;align-items:center;margin:8px 0 4px}
  .faq details{border-top:1px solid var(--line);padding:10px 0}
  .faq details:last-child{border-bottom:1px solid var(--line)}
  .faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px}
  .faq summary::after{content:"+";font-family:var(--mono);color:var(--mute)}
  .faq details[open] summary::after{content:"–"}
  .faq p{margin:8px 0 0}
  .detail-cta{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap;align-items:center}
  .modal{position:fixed;inset:0;background:rgba(15,23,32,.45);display:grid;place-items:center;z-index:20}
  .modal-box{background:var(--paper);color:var(--ink);border-radius:10px;padding:26px;max-width:460px;width:calc(100% - 40px);box-shadow:0 30px 80px rgba(15,23,32,.35)}
  .modal-box h3{font-family:var(--display);font-size:22px;margin:0 0 8px;letter-spacing:-.015em}
  .modal-box p{color:var(--ink2);margin:0}
  .modal-box code{display:block;font-family:var(--mono);font-size:12px;background:var(--ground);padding:8px 10px;border-radius:6px;margin:12px 0 16px;word-break:break-all}
  .modal-box .row{display:flex;gap:10px;flex-wrap:wrap}
  .modal-box a.btn-p{text-decoration:none;display:inline-block}
  .toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,10px);background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px;font-size:13px;opacity:0;transition:.25s;z-index:30;pointer-events:none;max-width:80%;text-align:center}
  .toast.on{opacity:1;transform:translate(-50%,0)}
  /* Preise */
  .tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:20px 0}
  .tier{border:1px solid var(--line);border-radius:8px;padding:18px;display:flex;flex-direction:column;gap:8px}
  .tier.hi{border-color:var(--ink);box-shadow:0 14px 40px rgba(15,23,32,.10)}
  .tier .n{font-family:var(--display);font-weight:700;font-size:18px}
  .tier .s{color:var(--mute);font-size:12.5px}
  .tier .pr{font-family:var(--display);font-weight:800;font-size:34px;letter-spacing:-.02em;line-height:1;margin-top:6px;font-variant-numeric:tabular-nums}
  .tier .pr small{font-family:var(--body);font-size:12px;color:var(--mute);font-weight:500;letter-spacing:0;margin-left:4px}
  .tier ul{margin:6px 0 10px;padding:0;list-style:none;display:grid;gap:5px;font-size:13px}
  .tier ul li::before{content:"";display:inline-block;width:6px;height:6px;background:var(--green);margin-right:8px;transform:translateY(-2px)}
  .tier .btn-p,.tier .btn-s{margin-top:auto;text-align:center}
  .badge{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--green-ink);font-weight:600}
  .matrix{width:100%;border-collapse:collapse;font-size:13px;margin-top:12px}
  .matrix th,.matrix td{padding:8px 6px;border-top:1px solid var(--line2);text-align:center}
  .matrix th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--mute);font-weight:600}
  .matrix td:first-child,.matrix th:first-child{text-align:left}
  .matrix td .ok{display:inline-block;width:10px;height:10px;background:var(--green)}
  .matrix td .no{color:var(--line);font-family:var(--mono)}
  .matrix tr.grp td{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--mute);padding-top:14px;font-weight:600;border-top:0}
  .quick{border:1px solid var(--line);border-radius:8px;padding:18px;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;margin-top:24px}
  .stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:6px;overflow:hidden}
  .stepper button{border:0;background:var(--paper);width:32px;height:32px;font-size:16px}
  .stepper span{min-width:44px;text-align:center;font-family:var(--mono);font-size:13px}
  .quick .total{font-family:var(--display);font-weight:800;font-size:28px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;text-align:right}
  .quick .total small{display:block;font-family:var(--body);font-size:12px;color:var(--mute);font-weight:500;letter-spacing:0}
  /* Branchen */
  .ind-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:20px}
  .ind{border:1px solid var(--line);border-radius:8px;padding:18px}
  .ind b{font-family:var(--display);font-size:18px;display:block;margin-bottom:8px}
  .ind p{font-size:13px;margin:0 0 6px}
  .ind p span{color:var(--mute)}
  .ind .row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
  /* Formular */
  .form-err{color:var(--red);font-size:12.5px;margin-top:8px}
  .form input.err,.form textarea.err{border-color:var(--red)}
  .demo-note{background:var(--amber-soft);color:var(--amber);border-radius:6px;padding:10px 14px;font-size:13px;margin:0 0 24px}
  .demo-quote{border-left:3px solid var(--green);padding:6px 0 6px 16px;font-size:17px;color:var(--ink);max-width:60ch;margin:0 0 28px;font-style:italic}
  .demo-mods{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 40px;margin:16px 0 8px}
  .demo-mods h3{margin-top:6px}
  .demo-mods p{font-size:14px}
  .demo-mods .mock{margin-top:12px}
  .menu-list{padding:24px 0;display:grid;gap:4px}
  .menu-list a{display:block;padding:12px 0;border-bottom:1px solid var(--line);font-family:var(--display);font-size:20px;color:var(--ink);text-decoration:none}

  @media (max-width:700px){
    .wrap{padding:0 20px}
    .menu-btn{display:inline-block}
    .site-nav{display:none}
    .head-cta .tel{display:none}
    .hero{padding:36px 0 28px}
    .hero .ctas small{display:none}
    .mod{padding:44px 0}
    .mod .wrap{grid-template-columns:1fr;gap:24px}
    .mod.flip .wrap>div:first-child{order:0}
    .strip .wrap{grid-template-columns:1fr;gap:14px}
    .strip .way{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:12px}
    .contact .wrap{grid-template-columns:1fr;gap:32px}
    .form .grid{grid-template-columns:1fr}
    .fab{display:none}
    .mbar{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:sticky;bottom:0;background:rgba(255,255,255,.96);border-top:1px solid var(--line);padding:10px 14px;z-index:6}
    .mbar a,.mbar button{text-align:center;text-decoration:none}
    .sheet.mobile{left:50%;right:auto;width:430px;transform:translateX(-50%);border-left:1px solid var(--line);border-right:1px solid var(--line)}
    .wrap{padding:0 20px}
    .detail-grid,.tiers,.ind-grid{grid-template-columns:1fr}
    .quick{grid-template-columns:1fr}
    .demo-mods{grid-template-columns:1fr}
    .fab{display:none}
    .mbar{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;background:rgba(255,255,255,.96);border-top:1px solid var(--line);padding:10px 14px;z-index:6}
    .mbar a,.mbar button{text-align:center;text-decoration:none}
    body{padding-bottom:64px}
  }

  /* ---------- Responsive Breakpoints (nur Website) ---------- */
  .head-cta .tel{white-space:nowrap}
  .site-nav{flex-wrap:nowrap;white-space:nowrap}
  @media (max-width:1180px){
    .head-cta .tel{display:none}
    .site-head .wrap{gap:18px}
  }
  /* Französische und spanische Navigation ist ~15 % länger: der Header klappt dort schon unter
     1000 px ins Menü, sonst wird zwischen 900 und 1000 px der Demo-Knopf abgeschnitten (ADR 0997). */
  @media (max-width:1000px){
    :root:lang(fr) .site-nav,:root:lang(es) .site-nav{display:none}
    :root:lang(fr) .menu-btn,:root:lang(es) .menu-btn{display:inline-block}
    :root:lang(fr) .head-cta,:root:lang(es) .head-cta{margin-left:auto;gap:6px}
  }
  @media (max-width:900px){
    .wrap{padding:0 20px}
    .site-nav{display:none}
    .menu-btn{display:inline-block}
    .site-head .wrap{gap:10px}
    .head-cta{margin-left:auto;gap:6px}
    .hero{padding:40px 0 28px}
    .hero h1{max-width:none}
    .mod{padding:44px 0}
    .mod .wrap{grid-template-columns:1fr;gap:24px}
    .mod.flip .wrap>div:first-child{order:0}
    .strip .wrap{grid-template-columns:1fr;gap:14px}
    .strip .way{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:12px}
    .contact{padding:48px 0}
    .contact .wrap{grid-template-columns:1fr;gap:32px}
    .form .grid{grid-template-columns:1fr}
    .detail-grid,.ind-grid,.quick,.demo-mods{grid-template-columns:1fr}
    .tiers{grid-template-columns:1fr 1fr}
    .consent .wrap{padding:9px 20px}
    .langhint .wrap{padding:8px 20px}
    .allf{padding:40px 0}
  }
  @media (max-width:700px){
    .site-head .wrap{height:56px}
    .head-cta .btn-s:not(.menu-btn),.head-cta>.btn-p{display:none}
    .logo{font-size:16px}
    .logo .mark{height:20px}
    .tiers{grid-template-columns:1fr}
    .hero h1{font-size:clamp(30px,9vw,40px)}
    .intake .q{flex-direction:column;align-items:flex-start;gap:2px}
    .day>div:not(.sum){grid-template-columns:44px 1fr}
    .kan{grid-template-columns:1fr}
    .grid3{grid-template-columns:1fr 1fr}
    .bars .b{grid-template-columns:110px 1fr 60px}
    .mock .hd{flex-wrap:wrap;gap:4px}
  }