/* Viarden – Stylesheet. Schriften liegen auf dem eigenen Server (keine externen Anfragen). */
@font-face{font-family:"Viarden Display";src:url(fonts/viarden-display-bold.woff) format("woff");font-weight:700;font-display:swap}
@font-face{font-family:"Viarden Text";src:url(fonts/viarden-text-regular.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Viarden Text";src:url(fonts/viarden-text-bold.woff) format("woff");font-weight:600 700;font-display:swap}

:root{
  --ground:#F3F5F2; --surface:#FFFFFF; --ink:#111A17; --muted:#5A6560; --line:#D9DFDB;
  --forest:#16302A; --forest-ink:#FFFFFF; --ember:#DD6428; --ember-soft:#FBE7DC; --moss:#E5ECE8;
  --tree:#9DB3A8; --shadow:0 1px 2px rgba(17,26,23,.05),0 12px 32px rgba(17,26,23,.08);
  --display:"Viarden Display","Avenir Next","Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --body:"Viarden Text",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ground:#0C1411; --surface:#131E1A; --ink:#E6EEEA; --muted:#98A8A0; --line:#243430;
    --forest:#CFE3D8; --forest-ink:#0C1411; --ember:#F28B4E; --ember-soft:#3A2418; --moss:#18261F;
    --tree:#3E5A4D; --shadow:0 1px 2px rgba(0,0,0,.35),0 12px 32px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ground:#0C1411; --surface:#131E1A; --ink:#E6EEEA; --muted:#98A8A0; --line:#243430;
  --forest:#CFE3D8; --forest-ink:#0C1411; --ember:#F28B4E; --ember-soft:#3A2418; --moss:#18261F;
  --tree:#3E5A4D; --shadow:0 1px 2px rgba(0,0,0,.35),0 12px 32px rgba(0,0,0,.3);
}
*{box-sizing:border-box}
body{background:var(--ground);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;padding-inline:16px;padding-block:0 40px}
a{color:var(--ember)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
.wrap{max-width:1160px;margin:0 auto}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}


header.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:22px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.logo svg{width:36px;height:36px;flex:none}
.logo b{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:.34em}
nav.main{display:flex;gap:6px 22px;flex-wrap:wrap;align-items:center}
nav.main a{color:var(--ink);text-decoration:none;font-size:15px}
nav.main a:hover{color:var(--ember)}
@media (max-width:720px){nav.main a:not(.btn){display:none}}
.btn{display:inline-flex;align-items:center;gap:8px;font:inherit;font-weight:600;font-size:15px;border-radius:999px;padding:11px 20px;border:1px solid transparent;cursor:pointer;text-decoration:none;line-height:1.2;transition:transform .15s ease,box-shadow .2s ease}
.btn.primary{background:var(--forest);color:var(--forest-ink)}
.btn.primary:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(221,100,40,.25)}
.btn.ghost{background:var(--ground);color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ember)}
.btn.small{padding:8px 16px;font-size:14px}

@media (prefers-reduced-motion:reduce){.btn,.svc{transition:none}}


/* Hero: Wald und Glut als durchgehender Hintergrund */
body{overflow-x:clip}
.hero{position:relative;margin-inline:calc(50% - 50vw);padding-inline:max(16px,calc(50vw - 580px));min-height:640px;display:flex;align-items:center;overflow:hidden;border-bottom:1px solid var(--line)}
.hero .bg{position:absolute;inset:0;z-index:0}
.hero .bg svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero .fade{position:absolute;inset:0;--col:max(16px,calc(50vw - 580px));background:linear-gradient(90deg,color-mix(in srgb,var(--ground) 45%,transparent) 0,color-mix(in srgb,var(--ground) 78%,transparent) var(--col),color-mix(in srgb,var(--ground) 94%,transparent) calc(var(--col) + 460px),transparent calc(var(--col) + 700px)),linear-gradient(180deg,var(--ground) 0%,transparent 14%)}
.hero .txt{position:relative;z-index:1;max-width:580px;padding-block:48px}
.hero h1{font-family:var(--display);font-weight:700;font-size:clamp(38px,6vw,72px);line-height:1;letter-spacing:-.012em;margin:14px 0 20px;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--ember)}
.hero p{margin:0 0 26px;color:var(--muted);font-size:clamp(17px,1.6vw,19px);max-width:48ch}
.cta{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:900px){
  .hero{min-height:920px;align-items:flex-start}
  .hero .bg svg{inset:auto;bottom:0;right:-44px;left:auto;width:calc(100% + 44px);height:62%}
  .hero .fade{background:linear-gradient(180deg,var(--ground) 0%,var(--ground) 56%,transparent 66%)}
  .hero .txt{padding-block:24px}
}
.trees path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.trees .far path{stroke:var(--tree);stroke-width:1.2;opacity:.8}
.trees .mid path{stroke:var(--tree);stroke-width:1.5}
.trees .near path{stroke:var(--forest);stroke-width:1.8;opacity:.8}
.road{fill:none;stroke:var(--ink);stroke-width:1.4;opacity:.45}
.road-mid{fill:none;stroke:var(--ember);stroke-width:1.6;stroke-dasharray:3 9;opacity:.75}
.horizon{stroke:var(--line);stroke-width:1}
.halo{fill:var(--ember);transform-box:fill-box;transform-origin:center;animation:breathe 6s ease-in-out infinite}
.sun{fill:var(--ember)}
.ember{offset-path:path("M950 620 C 900 540, 1000 470, 948 400 C 910 350, 954 330, 940 300");offset-rotate:0deg;animation:travel 11s cubic-bezier(.45,.05,.35,1) infinite}
.ember circle:first-child{fill:var(--ember);opacity:.25}
.ember circle:last-child{fill:var(--ember)}
@keyframes travel{0%{offset-distance:0%;opacity:0}8%{opacity:1}88%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.14}50%{transform:scale(1.45);opacity:.24}}
@media (prefers-reduced-motion:reduce){.ember{animation:none;offset-distance:55%}.halo{animation:none}}

/* Sanftes Scrollen, mitlaufende Kopfzeile, Einblenden beim Scrollen */
html{scroll-behavior:smooth}
[id]{scroll-margin-top:84px}
header.top{position:sticky;top:0;z-index:20;margin-inline:calc(50% - 50vw);padding-inline:max(16px,calc(50vw - 580px));padding-block:14px;background:color-mix(in srgb,var(--ground) 86%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .3s ease}
@supports (animation-timeline: scroll()){
  header.top{animation:hdr linear both;animation-timeline:scroll(root);animation-range:0 120px}
  @keyframes hdr{to{border-bottom-color:var(--line)}}
}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){
    .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
    .trees .near{animation:par-near linear both;animation-timeline:scroll(root);animation-range:0 700px}
    .trees .mid{animation:par-mid linear both;animation-timeline:scroll(root);animation-range:0 700px}
    .hero .txt{animation:par-txt linear both;animation-timeline:scroll(root);animation-range:0 600px}
  }
}
@keyframes rise{from{opacity:0;translate:0 32px}to{opacity:1;translate:0 0}}
@keyframes par-near{to{translate:0 70px}}
@keyframes par-mid{to{translate:0 28px}}
@keyframes par-txt{to{translate:0 -36px;opacity:.35}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
section.block{padding-block:48px;border-top:1px solid var(--line)}
.head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:24px;margin-bottom:30px;align-items:end}
@media (max-width:820px){.head{grid-template-columns:minmax(0,1fr)}}
.head h2{font-family:var(--display);font-size:clamp(28px,3.4vw,42px);letter-spacing:-.01em;line-height:1.05;margin:6px 0 0;text-wrap:balance}
.head p{margin:0;color:var(--muted);font-size:17px;max-width:58ch}

.services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:900px){.services{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.services{grid-template-columns:minmax(0,1fr)}}
.svc{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:10px;overflow:hidden;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.svc::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--ember);transition:width .35s ease}
.svc:hover{transform:translateY(-3px);border-color:transparent;box-shadow:var(--shadow)}
.svc:hover::after{width:100%}
.svc svg{width:30px;height:30px;color:var(--forest)}
.svc:hover svg{color:var(--ember)}
.svc h3{font-family:var(--display);font-size:20px;letter-spacing:-.01em;margin:6px 0 0}
.svc p{margin:0;color:var(--muted);font-size:15.5px}
.svc ul{margin:4px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.svc li{font-size:12.5px;background:var(--moss);border-radius:999px;padding:3px 10px;color:var(--muted)}

.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;counter-reset:s}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.steps{grid-template-columns:minmax(0,1fr)}}
.steps li{counter-increment:s;padding-top:14px;border-top:2px solid var(--forest)}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--mono);font-size:13px;color:var(--ember)}
.steps h3{font-size:18px;margin:6px 0}
.steps p{margin:0;color:var(--muted);font-size:15px}

.name{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:8px}
@media (max-width:720px){.name{grid-template-columns:minmax(0,1fr)}}
.word{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px}
.word b{display:block;font-family:var(--display);font-size:34px;letter-spacing:-.02em;line-height:1}
.word b span{color:var(--ember)}
.word i{display:block;font-style:normal;font-family:var(--mono);font-size:12.5px;color:var(--muted);margin:6px 0 10px}
.word p{margin:0;color:var(--muted)}
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start;margin-top:34px}
@media (max-width:820px){.about{grid-template-columns:minmax(0,1fr)}}
.about .quote{font-family:var(--display);font-size:clamp(24px,2.8vw,32px);line-height:1.22;letter-spacing:-.02em;margin:0;color:var(--ink)}
.about p{margin:0 0 14px;color:var(--muted);font-size:17px}

.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:28px}
@media (max-width:820px){.contact{grid-template-columns:minmax(0,1fr)}}
.cinfo{display:grid;gap:14px;align-content:start}
.cinfo a,.cinfo div{display:block;text-decoration:none;color:var(--ink)}
.cinfo span{display:block;font-size:13px;color:var(--muted)}
.cinfo b{font-size:18px;font-weight:600}
.social{display:flex;gap:10px;margin-top:4px}
.social a{display:inline-flex;width:40px;height:40px;border:1px solid var(--line);border-radius:50%;align-items:center;justify-content:center;color:var(--ink)}
.social a:hover{border-color:var(--ember);color:var(--ember)}
.social svg{width:18px;height:18px}
form.cform{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px;display:grid;gap:14px}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
label.l{display:block;font-weight:600;font-size:14.5px;margin-bottom:6px}
input,textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
textarea{min-height:120px;resize:vertical}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--muted)}
.chk input{width:18px;height:18px;margin-top:2px;flex:none;accent-color:var(--ember)}
.ok{background:var(--ember-soft);border-radius:10px;padding:12px 14px;margin:0}

footer.site{border-top:1px solid var(--line);margin-top:24px;padding-block:22px 0;display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;color:var(--muted);font-size:14px}
footer.site nav{display:flex;gap:18px}
footer.site a{color:var(--muted)}

/* Rechtstexte */
.legal{max-width:760px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:clamp(20px,4vw,40px);margin-block:24px 40px}
.legal h1{font-family:var(--display);font-size:clamp(28px,4vw,40px);letter-spacing:-.02em;margin:0 0 18px}
.legal h2{font-family:var(--display);font-size:19px;margin:28px 0 8px}
.legal p{margin:0 0 12px}
.legal .muted{color:var(--muted);margin-top:28px}
.err{color:#B3261E;font-size:14px;margin:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn[disabled]{opacity:.6;cursor:default}