:root{
  --ink:#14140F;
  --paper:#fafaf7;
  --slate:#4c535b;
  --line:#e4e3da;
  --gelb:#fdf709;
  --gelb-soft:#fefbc9;
  --maxw:1120px;
  --serif:"Newsreader",Georgia,serif;
  --sans:"Archivo",-apple-system,"Segoe UI",sans-serif;
  --pik:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='847 493 62 76'><path d='M874.916 515.79C863.808 502.989 849 514.6 849 525.536 849 544.062 879 567 879 567 879 567 908.994 544.062 908.994 525.536 908.994 514.607 894.214 503.007 883.108 515.759L883.108 515.509C883.669 506.357 885.344 497.988 889.328 495L868.661 495C872.646 497.988 874.32 506.357 874.881 515.509Z' fill='%2314140F'/></svg>");
  --tile:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><rect width='512' height='512' rx='118' fill='%2314140F'/><g transform='translate(256 256) scale(4.0) translate(-879 -531)'><path d='M874.916 515.79C863.808 502.989 849 514.6 849 525.536 849 544.062 879 567 879 567 879 567 908.994 544.062 908.994 525.536 908.994 514.607 894.214 503.007 883.108 515.759L883.108 515.509C883.669 506.357 885.344 497.988 889.328 495L868.661 495C872.646 497.988 874.32 506.357 874.881 515.509Z' fill='%23FDF709'/></g></svg>");
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--gelb);color:var(--ink)}
a{color:inherit}
img{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
@media(max-width:640px){.wrap{padding:0 30px}}

/* ---------- Nav ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(250,250,247,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{text-decoration:none;display:flex;align-items:center;gap:.65rem}
.brand .pik{width:2.4rem;height:2.4rem;background:var(--tile) no-repeat center/contain;flex:none}
.brand .wordmark{display:flex;flex-direction:column;line-height:1}
.brand .wordmark b{font-family:var(--serif);font-weight:600;font-size:1.32rem;letter-spacing:.005em;color:var(--ink)}
.brand .wordmark small{font-family:var(--sans);font-weight:600;font-size:.56rem;letter-spacing:.42em;text-transform:uppercase;color:var(--slate);margin-top:.22rem}
nav.links{display:flex;gap:1.75rem;align-items:center}
.has-sub{position:relative;display:flex;align-items:center}
.has-sub>a::after{content:" ▾";font-size:.7em}
.sub{display:none;position:absolute;top:100%;left:-.5rem;background:var(--paper);border:1px solid var(--line);box-shadow:0 8px 24px rgba(20,20,15,.08);min-width:250px;padding:.35rem 0;z-index:60}
.has-sub:hover .sub,.has-sub:focus-within .sub{display:block}
.sub a{display:block;padding:.55rem 1rem;border-bottom:none!important;font-size:.88rem}
.sub a:hover{background:var(--gelb-soft)}
nav.links a{
  text-decoration:none;font-size:.92rem;font-weight:500;color:var(--slate);
  padding:.25rem 0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;
}
nav.links a:hover,nav.links a.active{color:var(--ink);border-bottom-color:var(--gelb)}
nav.links a.cta{
  color:var(--ink);background:var(--gelb);border:1px solid var(--ink);
  padding:.45rem 1rem;font-weight:600;transition:background .15s;
}
nav.links a.cta:hover{background:var(--gelb-soft)}
.menu-btn{display:none;-webkit-appearance:none;appearance:none;background:var(--gelb);color:var(--ink);border:1px solid var(--ink);padding:.4rem .7rem;font-family:var(--sans);font-size:.85rem;font-weight:600;cursor:pointer;border-radius:0}
@media(max-width:860px){
  nav.links{
    display:none;position:absolute;top:64px;left:0;right:0;
    background:var(--paper);border-bottom:1px solid var(--line);
    flex-direction:column;align-items:stretch;gap:0;padding:.5rem 24px 1rem;
  }
  nav.links.open{display:flex}
  nav.links a{padding:.7rem 0;border-bottom:1px solid var(--line)}
  .has-sub{flex-direction:column;align-items:stretch}
  .has-sub>a::after{content:""}
  .sub{display:block;position:static;border:none;box-shadow:none;padding:0 0 0 1.1rem;min-width:0}
  .sub a{font-size:.85rem;color:var(--slate)}
  nav.links a.cta{margin-top:.75rem;text-align:center;border-bottom:1px solid var(--ink)}
  .menu-btn{display:block}
}

/* ---------- Typography helpers ---------- */
.eyebrow{
  font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate);display:flex;align-items:center;gap:.6rem;margin-bottom:1.1rem;
}
.eyebrow::before{content:"";width:2rem;height:2px;background:var(--gelb);outline:1px solid var(--ink);outline-offset:-1px}
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;line-height:1.12}
h1{font-size:clamp(2.4rem,5.6vw,4.1rem)}
h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:1.25rem}
h3{font-size:1.25rem;line-height:1.3}
.lead{font-size:1.15rem;color:var(--slate);max-width:38em}
p+p{margin-top:1em}

/* highlighter signature */
.mark{
  background:linear-gradient(transparent 58%,var(--gelb) 58%,var(--gelb) 94%,transparent 94%);
  padding:0 .08em;
}
.mark-solid{background:var(--gelb);color:var(--ink);padding:.02em .14em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ---------- Hero ---------- */
.hero{padding:6.5rem 0 5.5rem;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.hero .num42{
  position:absolute;right:-1vw;bottom:-1.5rem;
  width:clamp(300px,44vw,760px);pointer-events:none;user-select:none;
}
.hero .num42 svg{display:block;width:100%;height:auto}
.hero .num42 #ghostpath{
  stroke-dasharray:1000;stroke-dashoffset:1000;
  animation:ghostdraw 2.4s linear forwards;
}
@keyframes ghostdraw{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){
  .hero .num42 #ghostpath{animation:none;stroke-dashoffset:0}
}
.hero h1{max-width:15em;margin-bottom:1.4rem;position:relative;z-index:1}
.hero .lead{position:relative;z-index:1;margin-bottom:2.4rem}
.hero-ctas{display:flex;gap:1rem;flex-wrap:wrap;position:relative;z-index:1}
.btn{
  display:inline-block;text-decoration:none;font-weight:600;font-size:.95rem;
  padding:.85rem 1.6rem;border:1px solid var(--ink);transition:transform .12s,box-shadow .12s,background .15s;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--ink)}
.btn.primary{background:var(--gelb)}
.btn.ghost{background:transparent}
.hero-facts{
  display:flex;gap:2.5rem;flex-wrap:wrap;margin-top:3.2rem;position:relative;z-index:1;
  font-size:.85rem;color:var(--slate);
}
.hero-facts b{display:block;font-family:var(--serif);font-size:1.35rem;color:var(--ink);font-weight:600}
.hero-facts>div{position:relative;padding-left:1.55rem}
.hero-facts>div::before{
  content:"";position:absolute;left:0;top:.42em;width:1.05rem;height:1.05rem;
  background:var(--pik) no-repeat center/contain;
}
/* Pik als Spiegelstrich: <ul class="pik-list"> */
ul.pik-list{list-style:none}
ul.pik-list li{position:relative;padding-left:1.7rem;margin:.45rem 0}
ul.pik-list li::before{
  content:"";position:absolute;left:0;top:.24em;width:1.05rem;height:1.05rem;
  background:var(--pik) no-repeat center/contain;
}

/* ---------- Sections ---------- */
section{padding:5.5rem 0}
section+section{border-top:1px solid var(--line)}
.two-col{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:3.5rem;align-items:start}
@media(max-width:860px){.two-col{grid-template-columns:1fr;gap:2rem}}
.sticky-col{position:sticky;top:96px}
@media(max-width:860px){.sticky-col{position:static}}

/* service cards */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2.5rem}
@media(max-width:700px){.cards{grid-template-columns:1fr}}
.card{background:var(--paper);padding:1.9rem 1.7rem;transition:background .15s}
.card:hover{background:#fff}
.card h3{margin-bottom:.55rem;display:flex;align-items:center;gap:.55rem}
.card h3::before{
  content:"";flex:none;width:1.05em;height:1.05em;
  background:var(--pik) no-repeat center/contain;
}
.card p{font-size:.95rem;color:var(--slate)}

/* dark section */
.dark{background:var(--ink);color:#d9dbde}
.dark h2,.dark h3{color:var(--paper)}
.dark .eyebrow{color:#9aa0a8}
.dark section+section,.dark .rule{border-color:#2b3138}
.qa{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;margin-top:3rem}
@media(max-width:860px){.qa{grid-template-columns:1fr}}
.qa h3{font-family:var(--sans);font-size:.95rem;font-weight:600;letter-spacing:.02em;color:var(--gelb);margin-bottom:.7rem}
.qa p{font-size:.95rem}

/* suchprofil */
.profil{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2.5rem}
@media(max-width:860px){.profil{grid-template-columns:1fr}}
.crit{background:var(--paper);padding:1.7rem 1.6rem}
.crit .tag{
  display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:.2rem .55rem;margin-bottom:1rem;border:1px solid var(--ink);
}
.crit .tag.kern{background:var(--gelb)}
.crit .tag.opt{background:transparent;color:var(--slate);border-color:var(--slate)}
.crit b{display:block;font-family:var(--serif);font-size:1.35rem;font-weight:600;margin-bottom:.35rem}
.crit p{font-size:.9rem;color:var(--slate)}

/* about */
.about-quote{
  font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,1.7rem);line-height:1.45;
  max-width:30em;margin-top:1.5rem;
}

/* kontakt */
.kontakt-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
@media(max-width:700px){.kontakt-grid{grid-template-columns:1fr}}
.kontakt a.mail{
  font-family:var(--serif);font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:500;
  text-decoration:none;border-bottom:3px solid var(--gelb);
}
.kontakt a.mail:hover{background:var(--gelb-soft)}
.kontakt address{font-style:normal;color:var(--slate);margin-top:1.5rem;line-height:1.7}

/* footer */
footer{border-top:1px solid var(--line);padding:2.2rem 0;font-size:.85rem;color:var(--slate)}
.foot{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.foot nav{display:flex;gap:1.4rem;flex-wrap:wrap}
.foot a{text-decoration:none}
.foot a:hover{border-bottom:2px solid var(--gelb)}

/* reveal */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ---------- Unterseiten (Digital Services, Rechtliches) ---------- */
.page-hero{padding:5rem 0 3.5rem;border-bottom:1px solid var(--line)}
.page-hero h1{font-size:clamp(2.1rem,4.5vw,3.2rem);max-width:16em}
.page-hero .lead{margin-top:1.2rem}
.testimonial{
  border-left:3px solid var(--gelb);padding:.4rem 0 .4rem 1.4rem;margin-top:2.2rem;
  font-family:var(--serif);font-size:1.08rem;line-height:1.55;color:var(--slate);
}
.testimonial footer{font-family:var(--sans);font-size:.82rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-top:.7rem;color:var(--ink)}
.claim{
  display:inline-block;background:var(--gelb);border:1px solid var(--ink);
  padding:.3rem .8rem;font-weight:600;font-size:.95rem;margin-bottom:1.4rem;
}
.legal{padding:4rem 0;max-width:760px}
.legal h1{font-size:clamp(1.9rem,4vw,2.6rem);margin-bottom:2rem}
.legal h2{font-size:1.25rem;font-family:var(--sans);font-weight:600;margin:2.2rem 0 .6rem}
.legal p,.legal li{font-size:.97rem;color:var(--slate)}
.legal ul{padding-left:1.2rem;margin:.5rem 0}
.todo{
  background:var(--gelb-soft);border:1px dashed var(--ink);padding:1rem 1.2rem;
  font-size:.9rem;margin:1rem 0;
}
.back{display:inline-block;margin-top:2.5rem;font-weight:600;text-decoration:none;border-bottom:2px solid var(--gelb)}

/* ---------- Weitere Leistungen (kompakt) ---------- */
.addons{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;margin-top:2.5rem}
@media(max-width:760px){.addons{grid-template-columns:1fr}}
.addon h3{color:var(--paper);margin-bottom:.6rem}
.addon p{font-size:.95rem}
.addon a.more{display:inline-block;margin-top:.9rem;font-weight:600;color:var(--paper);text-decoration:none;border-bottom:2px solid var(--gelb)}
/* Fokusfelder-Teaser */
.fields{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2.5rem}
@media(max-width:860px){.fields{grid-template-columns:1fr}}
.field{background:var(--paper);padding:1.7rem 1.6rem;text-decoration:none;display:block;transition:background .15s}
.field:hover{background:#fff}
.field b{display:block;font-family:var(--serif);font-size:1.3rem;font-weight:600;margin-bottom:.35rem}
.field p{font-size:.9rem;color:var(--slate)}
.field .go{display:inline-block;margin-top:.8rem;font-weight:600;font-size:.85rem;border-bottom:2px solid var(--gelb)}