:root{
    --paper:#ECE8DE;
    --panel:#E4DFD2;
    --panel-2:#E9E4D9;
    --ink:#182420;
    --ink-soft:#39473F;
    --patina:#2E6B5B;
    --patina-deep:#245448;
    --brass:#9A6B28;
    --brass-soft:#B98A3E;
    --line:#D4CEBE;
    --line-strong:#C6BFAD;
    --grid:rgba(24,36,32,.05);
    --on-dark:#F4F1E8;
    --radius:7px;
    --radius-sm:4px;
    --maxw:1140px;
    --pad:clamp(1.15rem, 5vw, 2.6rem);
    --font-display:'Archivo', system-ui, -apple-system, sans-serif;
    --font-body:'Figtree', system-ui, -apple-system, sans-serif;
    --font-mono:'Spline Sans Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  }

  *,*::before,*::after{box-sizing:border-box}

  html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
  @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

  body{
    margin:0;
    font-family:var(--font-body);
    color:var(--ink);
    background-color:var(--paper);
    background-image:
      linear-gradient(var(--grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size:30px 30px;
    background-position:center top;
    line-height:1.62;
    font-size:clamp(1rem, 0.96rem + 0.25vw, 1.1rem);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }

  ::selection{ background:var(--patina); color:var(--on-dark) }

  a{ color:inherit }

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

  .wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad) }

  /* ---------- shared type ---------- */
  h1,h2,h3{ font-family:var(--font-display); margin:0; letter-spacing:-0.015em; line-height:1.05 }
  p{ margin:0 }

  .eyebrow{
    font-family:var(--font-mono);
    font-size:0.75rem;
    font-weight:500;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--patina-deep);
    display:inline-flex;
    align-items:center;
    gap:0.55rem;
  }
  .eyebrow::before{
    content:"";
    width:26px; height:1px;
    background:var(--patina);
    display:inline-block;
  }

  .lead{ color:var(--ink-soft); max-width:60ch }

  /* ---------- buttons ---------- */
  .btn{
    --btn-bg:var(--patina);
    display:inline-flex;
    align-items:center;
    gap:0.6rem;
    font-family:var(--font-mono);
    font-weight:500;
    font-size:0.9rem;
    letter-spacing:0.01em;
    text-decoration:none;
    color:var(--on-dark);
    background:var(--btn-bg);
    padding:0.85rem 1.35rem;
    border-radius:var(--radius);
    border:1px solid var(--patina-deep);
    box-shadow:0 1px 0 rgba(20,40,34,.18);
    transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
    white-space:nowrap;
  }
  .btn .arw{ transition:transform .2s ease }
  .btn:hover{ background:var(--patina-deep); box-shadow:0 6px 18px -8px rgba(20,50,42,.55); transform:translateY(-1px) }
  .btn:hover .arw{ transform:translateX(4px) }
  .btn:active{ transform:translateY(0) }

  .btn-ghost{
    background:transparent;
    color:var(--ink);
    border:1px solid var(--line-strong);
    box-shadow:none;
  }
  .btn-ghost:hover{ background:var(--panel); border-color:var(--ink-soft); box-shadow:none }

  @media (prefers-reduced-motion:reduce){
    .btn,.btn .arw,.btn:hover{ transition:none; transform:none }
  }

  /* ---------- header ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter:saturate(1.1) blur(8px);
    -webkit-backdrop-filter:saturate(1.1) blur(8px);
    border-bottom:1px solid var(--line);
  }
  .bar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:0.7rem }
  .mark{ display:flex; align-items:center; gap:0.7rem; text-decoration:none; color:var(--ink) }
  .mark .block{
    width:34px; height:34px; flex:none;
    border:1.5px solid var(--ink);
    border-radius:5px;
    display:grid; place-items:center;
    font-family:var(--font-display); font-weight:800; font-size:0.86rem;
    letter-spacing:0.02em;
    background:var(--panel-2);
  }
  .mark .txt{ display:flex; flex-direction:column; line-height:1.12 }
  .mark .txt b{ font-family:var(--font-display); font-weight:700; font-size:0.98rem; letter-spacing:-0.01em }
  .mark .txt span{ font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.08em; color:var(--ink-soft); text-transform:uppercase }
  .bar-right{ display:flex; align-items:center; gap:0.9rem }
  .tel-link{ font-family:var(--font-mono); font-size:0.82rem; color:var(--ink-soft); text-decoration:none; letter-spacing:0.02em }
  .tel-link:hover{ color:var(--ink) }

  @media (max-width:640px){
    .header-cta{ display:none }
    .mark .txt span{ display:none }
  }

  /* ---------- section rhythm ---------- */
  section{ padding-block:clamp(3.4rem, 8vw, 6.2rem) }
  .section-head{ max-width:34ch; margin-bottom:2.4rem }
  .section-head h2{ font-size:clamp(1.65rem, 1.1rem + 2.6vw, 2.6rem); margin-top:0.9rem; font-weight:700 }

  /* ---------- hero ---------- */
  .hero{ padding-top:clamp(2.8rem, 6vw, 4.6rem); padding-bottom:clamp(2.6rem, 6vw, 4rem) }
  .hero h1{
    font-weight:800;
    font-size:clamp(2.15rem, 1.1rem + 5vw, 4.35rem);
    line-height:1.02;
    letter-spacing:-0.025em;
    margin-top:1.15rem;
    max-width:16ch;
  }
  .hero h1 .hl{ color:var(--patina-deep) }
  .hero-sub{ margin-top:1.5rem; font-size:clamp(1.05rem, 1rem + 0.4vw, 1.22rem); max-width:52ch }
  .hero-cta{ margin-top:2rem; display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.4rem }
  .hero-cta .note{ font-family:var(--font-mono); font-size:0.78rem; color:var(--ink-soft); letter-spacing:0.02em }
  .hero-cta .note a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line-strong); padding-bottom:1px }
  .hero-cta .note a:hover{ border-color:var(--patina) }

  /* ---------- signature strip ---------- */
  .strip{
    margin-top:clamp(2.6rem, 6vw, 3.8rem);
    border:1px solid var(--line-strong);
    border-radius:var(--radius);
    background:linear-gradient(180deg, var(--panel-2), var(--panel));
    padding:clamp(1.1rem, 3vw, 1.9rem);
    position:relative;
    overflow:hidden;
  }
  .strip-tag{
    position:absolute; top:0; right:0;
    font-family:var(--font-mono); font-size:0.64rem; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--ink-soft);
    background:var(--panel);
    border-left:1px solid var(--line-strong);
    border-bottom:1px solid var(--line-strong);
    border-bottom-left-radius:var(--radius-sm);
    padding:0.4rem 0.7rem;
  }
  .ba{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:stretch;
    gap:clamp(0.8rem, 2.5vw, 1.6rem);
  }
  .ba-card{ display:flex; flex-direction:column; gap:0.8rem }
  .ba-head{ display:flex; align-items:baseline; justify-content:space-between; gap:0.6rem }
  .ba-state{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; font-weight:500 }
  .ba-before .ba-state{ color:var(--brass) }
  .ba-after .ba-state{ color:var(--patina) }
  .ba-desc{ font-family:var(--font-mono); font-size:0.7rem; color:var(--ink-soft); letter-spacing:0.01em }
  .ba-svg{
    background:
      linear-gradient(var(--grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size:16px 16px;
    border:1px solid var(--line);
    border-radius:var(--radius-sm);
    width:100%; height:auto; display:block;
  }
  .ba-metric{ font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.01em; display:flex; align-items:center; gap:0.5rem }
  .ba-metric b{ font-weight:600 }
  .ba-before .ba-metric{ color:var(--brass) }
  .ba-after .ba-metric{ color:var(--patina-deep) }
  .ba-arrow{
    align-self:center;
    display:grid; place-items:center;
    font-family:var(--font-mono);
    color:var(--ink-soft);
  }
  .ba-arrow .glyph{ font-size:1.5rem; line-height:1; color:var(--ink) }
  .ba-arrow .glyph.down{ display:none }
  .ba-arrow small{ display:block; font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase; margin-top:0.35rem; text-align:center }

  @media (max-width:720px){
    .ba{ grid-template-columns:1fr }
    .ba-arrow{ transform:rotate(0) }
    .ba-arrow .glyph{ display:none }
    .ba-arrow .glyph.down{ display:block }
  }

  /* ---------- problem ---------- */
  .problem{ background:var(--panel); border-block:1px solid var(--line) }
  .problem .wrap{ display:grid; grid-template-columns:1fr; gap:1.4rem }
  .problem p{ font-size:clamp(1.08rem, 1rem + 0.6vw, 1.35rem); max-width:40ch; font-weight:500 }
  .problem .p-body{ font-size:1.05rem; font-weight:400; color:var(--ink-soft); max-width:62ch }
  @media (min-width:860px){
    .problem .wrap{ grid-template-columns:1fr 1fr; gap:2.6rem; align-items:start }
  }

  /* ---------- services ---------- */
  .svc-grid{ display:grid; grid-template-columns:1fr; gap:clamp(0.9rem, 2vw, 1.3rem) }
  @media (min-width:760px){ .svc-grid{ grid-template-columns:1fr 1fr } }
  .svc{
    border:1px solid var(--line-strong);
    border-radius:var(--radius);
    background:var(--panel-2);
    padding:clamp(1.2rem, 2.4vw, 1.7rem);
    display:flex; flex-direction:column; gap:1.1rem;
  }
  .svc h3{ font-size:1.18rem; font-weight:700 }
  .svc .row{ padding-left:0.95rem; position:relative }
  .svc .row::before{ content:""; position:absolute; left:0; top:0.15em; bottom:0.15em; width:3px; border-radius:2px }
  .svc .before::before{ background:var(--brass) }
  .svc .after::before{ background:var(--patina) }
  .svc .tag{ font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; display:block; margin-bottom:0.2rem }
  .svc .before .tag{ color:var(--brass) }
  .svc .after .tag{ color:var(--patina) }
  .svc .before .body{ color:var(--ink-soft) }
  .svc .after .body{ color:var(--ink); font-weight:500 }

  /* ---------- process ---------- */
  .process{ background:var(--panel); border-block:1px solid var(--line) }
  .steps{ display:grid; grid-template-columns:1fr; gap:0; border:1px solid var(--line-strong); border-radius:var(--radius); overflow:hidden; background:var(--panel-2) }
  @media (min-width:820px){ .steps{ grid-template-columns:repeat(3,1fr) } }
  .step{ padding:clamp(1.3rem, 2.6vw, 1.9rem); border-bottom:1px solid var(--line) }
  @media (min-width:820px){ .step{ border-bottom:none; border-right:1px solid var(--line) } .step:last-child{ border-right:none } }
  .step:last-child{ border-bottom:none }
  .step .no{ font-family:var(--font-mono); font-weight:600; font-size:0.85rem; color:var(--patina); letter-spacing:0.06em }
  .step h3{ font-size:1.12rem; font-weight:700; margin-top:0.7rem; margin-bottom:0.5rem }
  .step p{ color:var(--ink-soft); font-size:0.98rem }
  .process-cta{ margin-top:2.2rem }

  /* ---------- difference ---------- */
  .diff-grid{ display:grid; grid-template-columns:1fr; gap:1.6rem }
  @media (min-width:880px){ .diff-grid{ grid-template-columns:0.85fr 1.15fr; gap:3rem; align-items:start } }
  .diff-list{ display:flex; flex-direction:column; gap:1.35rem }
  .diff-item{ display:grid; grid-template-columns:auto 1fr; gap:0.9rem; align-items:start }
  .diff-item .dot{ width:26px; height:26px; flex:none; border:1.5px solid var(--patina); border-radius:6px; display:grid; place-items:center; color:var(--patina-deep); font-family:var(--font-mono); font-size:0.8rem; margin-top:2px }
  .diff-item p{ font-size:1.02rem }
  .diff-item p b{ font-weight:600 }
  .risk-card{
    border:1px solid var(--brass-soft);
    background:linear-gradient(180deg, #EEE7D6, var(--panel-2));
    border-radius:var(--radius);
    padding:clamp(1.3rem, 2.6vw, 1.9rem);
  }
  .risk-card .rk{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--brass); margin-bottom:0.9rem }
  .risk-card h3{ font-size:1.2rem; font-weight:700; margin-bottom:0.7rem; line-height:1.2 }
  .risk-card p{ color:var(--ink-soft); font-size:1rem }
  .risk-card p + p{ margin-top:0.7rem }

  /* ---------- about ---------- */
  .about-grid{ display:grid; grid-template-columns:1fr; gap:1.8rem; align-items:start }
  @media (min-width:820px){ .about-grid{ grid-template-columns:1.3fr 0.7fr; gap:3rem } }
  .about p{ font-size:1.06rem; color:var(--ink-soft); max-width:56ch }
  .about p + p{ margin-top:1rem }
  .about p b{ color:var(--ink); font-weight:600 }
  .about-facts{
    border:1px solid var(--line-strong);
    border-radius:var(--radius);
    background:var(--panel-2);
    overflow:hidden;
  }
  .about-facts .fx{ display:flex; justify-content:space-between; gap:1rem; padding:0.85rem 1.1rem; border-bottom:1px solid var(--line); font-family:var(--font-mono); font-size:0.82rem }
  .about-facts .fx:last-child{ border-bottom:none }
  .about-facts .fx .k{ color:var(--ink-soft); letter-spacing:0.04em }
  .about-facts .fx .v{ color:var(--ink); text-align:right }

  /* portrait card: duotone photo + data, like a datasheet with a plate */
  .person-card{
    max-width:380px;
    border:1px solid var(--line-strong);
    border-radius:var(--radius);
    background:var(--panel-2);
    overflow:hidden;
  }
  .person-photo{ margin:0; position:relative; line-height:0; background:var(--panel) }
  .person-photo img{ width:100%; height:auto; display:block }
  .person-photo figcaption{
    position:absolute; left:0; right:0; bottom:0;
    padding:0.7rem 0.8rem 0.55rem;
    font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.05em;
    color:var(--on-dark);
    background:linear-gradient(rgba(20,32,28,0), rgba(20,32,28,.66));
  }
  .person-card .about-facts{
    border:0; border-radius:0; background:transparent;
    border-top:1px solid var(--line-strong);
  }

  /* ---------- closing ---------- */
  .closing{ background:var(--ink); color:var(--on-dark); border-top:1px solid var(--patina-deep) }
  .closing .eyebrow{ color:var(--brass-soft) }
  .closing .eyebrow::before{ background:var(--brass-soft) }
  .closing h2{ color:var(--on-dark); font-size:clamp(1.8rem, 1.1rem + 3vw, 3rem); font-weight:800; letter-spacing:-0.02em; margin-top:0.9rem; max-width:18ch }
  .closing p{ color:#CBD4CD; margin-top:1.3rem; max-width:52ch; font-size:1.1rem }
  .closing-actions{ margin-top:2.2rem; display:flex; flex-wrap:wrap; gap:1rem 1.6rem; align-items:center }
  .closing .btn{ --btn-bg:var(--patina); border-color:#3f8a76 }
  .closing .btn:hover{ background:#3a8571 }
  .contact-lines{ display:flex; flex-wrap:wrap; gap:0.4rem 1.6rem; font-family:var(--font-mono); font-size:0.85rem }
  .contact-lines a{ color:var(--on-dark); text-decoration:none; border-bottom:1px solid rgba(244,241,232,.3); padding-bottom:1px }
  .contact-lines a:hover{ border-color:var(--brass-soft) }
  .contact-lines .k{ color:#9FB0A8 }

  /* ---------- legal (impressum / datenschutz) ---------- */
  .legal{ background:var(--paper); border-top:1px solid var(--line); padding-block:clamp(2.8rem,6vw,4.2rem) }
  .legal .wrap{ max-width:760px }
  .legal h2{ font-size:clamp(1.4rem,1rem+2vw,2rem); font-weight:700; margin-top:0.85rem }
  .legal .doc{ margin-top:1.5rem; color:var(--ink-soft); font-size:0.96rem; line-height:1.7 }
  .legal .doc h3{ font-family:var(--font-display); font-size:0.98rem; font-weight:700; color:var(--ink); margin:1.6rem 0 0.4rem; letter-spacing:0 }
  .legal .doc p{ margin:0 0 0.25rem }
  .legal .doc a{ color:var(--patina-deep); text-decoration:none; border-bottom:1px solid var(--line-strong); word-break:break-word }
  .legal .doc a:hover{ border-color:var(--patina) }
  .legal .addr{ font-style:normal; line-height:1.75 }
  .legal .ph{ color:var(--brass); font-family:var(--font-mono); font-size:0.88em; letter-spacing:0.01em }
  .legal .disclaimer{
    margin-top:1.8rem; padding:0.9rem 1.05rem;
    border:1px solid var(--line-strong); border-radius:var(--radius-sm);
    background:var(--panel-2);
    font-family:var(--font-mono); font-size:0.74rem; color:var(--ink-soft); line-height:1.7;
  }
  .legal .disclaimer .ph{ font-size:1em }

  /* ---------- footer / title block ---------- */
  footer{ background:var(--paper); border-top:1px solid var(--line); padding-block:clamp(2.6rem,6vw,4rem) }
  .titleblock{
    border:1.5px solid var(--ink);
    border-radius:2px;
    overflow:hidden;
    background:var(--panel-2);
    font-family:var(--font-mono);
  }
  .tb-top{
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    padding:0.7rem 1rem;
    border-bottom:1.5px solid var(--ink);
    background:var(--ink);
    color:var(--on-dark);
    font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase;
  }
  .tb-grid{ display:grid; grid-template-columns:1fr 1fr }
  @media (min-width:680px){ .tb-grid{ grid-template-columns:repeat(3,1fr) } }
  .tb-cell{ padding:0.85rem 1rem; border-bottom:1px solid var(--line-strong); border-right:1px solid var(--line-strong) }
  .tb-cell:nth-child(2n){ border-right:none }
  @media (min-width:680px){
    .tb-cell{ border-right:1px solid var(--line-strong) !important }
    .tb-cell:nth-child(3n){ border-right:none !important }
  }
  .tb-cell .k{ font-size:0.62rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-soft); display:block; margin-bottom:0.3rem }
  .tb-cell .v{ font-size:0.85rem; color:var(--ink) }
  .tb-cell a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line-strong) }
  .tb-cell a:hover{ border-color:var(--patina); color:var(--patina-deep) }
  .foot-note{ margin-top:1rem; font-family:var(--font-mono); font-size:0.7rem; color:var(--ink-soft); letter-spacing:0.01em; line-height:1.6 }

  /* ---------- reveal (progressive enhancement only) ---------- */
  .js .reveal{ opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1) }
  .js .reveal.in{ opacity:1; transform:none }

  /* signature draw-in: only when motion allowed */
  @media (prefers-reduced-motion:no-preference){
    .rail{ stroke-dasharray:200; stroke-dashoffset:200; animation:draw 1.5s cubic-bezier(.4,.8,.3,1) .4s forwards }
    .node{ opacity:0; animation:pop .45s ease forwards }
    .node.n1{ animation-delay:1.15s }
    .node.n2{ animation-delay:1.35s }
    .node.n3{ animation-delay:1.55s }
    .rail-arrow{ opacity:0; animation:pop .4s ease forwards 1.7s }
  }
  @keyframes draw{ to{ stroke-dashoffset:0 } }
  @keyframes pop{ to{ opacity:1 } }

  /* ---------- legal page helpers ---------- */
  main > .legal:first-child{ border-top:none }
  .backlink{
    display:inline-block; margin-bottom:0.5rem;
    font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.03em;
    color:var(--patina-deep); text-decoration:none;
    border-bottom:1px solid var(--line-strong); padding-bottom:1px;
  }
  .backlink:hover{ border-color:var(--patina) }