/* Manrope — self-hosted (SIL OFL 1.1). No request ever leaves this domain. */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/manrope-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/manrope-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/manrope-cyrillic-400-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/manrope-cyrillic-ext-400-normal.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/manrope-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/manrope-latin-ext-500-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/manrope-cyrillic-500-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/manrope-cyrillic-ext-500-normal.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/manrope-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/manrope-latin-ext-600-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/manrope-cyrillic-600-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/manrope-cyrillic-ext-600-normal.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/manrope-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/manrope-latin-ext-700-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/manrope-cyrillic-700-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/manrope-cyrillic-ext-700-normal.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/manrope-latin-800-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/manrope-latin-ext-800-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/manrope-cyrillic-800-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/manrope-cyrillic-ext-800-normal.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}

/* ostroweb.de — Davyd Ostrovskyi — shared styles for every artboard */

/* ---------- Tokens: neutrals per mode ---------- */
.site{container-type:inline-size;container-name:site;min-height:100vh;background:var(--bg);color:var(--text);font-family:'Manrope',system-ui,sans-serif;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;transition:background-color .25s ease,color .25s ease}
.site *{box-sizing:border-box}
.site[data-mode="light"]{--bg:#F7F7F9;--surface:#FFFFFF;--surface-2:#EDEDF2;--text:#15151A;--muted:#45454F;--border:#E1E1E8;--danger:#B42318}
.site[data-mode="light"]{color-scheme:light}
.site[data-mode="dark"]{color-scheme:dark}
.site[data-mode="dark"]{--bg:#0E0E12;--surface:#17171D;--surface-2:#202028;--text:#F2F2F5;--muted:#B4B4BF;--border:#2B2B35;--danger:#FF8A80}

/* ---------- Tokens: accent palettes ---------- */
.site[data-mode="light"][data-palette="violet"]{--accent:#712CF9;--on-accent:#FFFFFF}
.site[data-mode="dark"][data-palette="violet"]{--accent:#A98BFF;--on-accent:#14092E}
.site[data-mode="light"][data-palette="emerald"]{--accent:#0B7A55;--on-accent:#FFFFFF}
.site[data-mode="dark"][data-palette="emerald"]{--accent:#3DD69F;--on-accent:#04261A}
.site[data-mode="light"][data-palette="coral"]{--accent:#C4410C;--on-accent:#FFFFFF}
.site[data-mode="dark"][data-palette="coral"]{--accent:#FF8A50;--on-accent:#2A0E02}
.site[data-mode="light"][data-palette="blue"]{--accent:#1D5BD8;--on-accent:#FFFFFF}
.site[data-mode="dark"][data-palette="blue"]{--accent:#6EA8FF;--on-accent:#081A33}
.site{--accent-soft:color-mix(in srgb,var(--accent) 12%,var(--surface))}

/* ---------- Intro: scrambled logo on page open ---------- */
/* .site is a size container, so the overlay is absolute at the top with viewport height; page is clipped while it plays */
.site{position:relative}
.site.is-intro{height:100vh;height:100svh;overflow:hidden}
.intro{position:absolute;top:0;left:0;right:0;height:100vh;height:100svh;z-index:100;display:grid;place-items:center;background:var(--bg);transition:opacity .6s ease,visibility .6s ease}
.intro.is-out{opacity:0;visibility:hidden}
.intro-inner{display:flex;flex-direction:column;align-items:center;gap:14px;padding:20px;text-align:center}
.intro-logo{display:block;font-size:clamp(44px, 30px + 5cqi, 88px);line-height:1;font-weight:800;letter-spacing:-.015em;color:var(--text);white-space:nowrap}
.intro-dot{opacity:0;transition:opacity .3s ease}
.intro-slogan{font-size:13px;line-height:1.4;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);opacity:0;transform:translateY(6px);transition:opacity .5s ease .1s,transform .5s ease .1s}
.intro-dot.is-shown,.intro-slogan.is-shown{opacity:1;transform:none}

/* ---------- German specifics ---------- */
/* No hyphenation: lines break only between whole words */
.site{hyphens:manual;-webkit-hyphens:manual}
.body,.lead,.small{text-wrap:pretty}
.tabular{font-variant-numeric:tabular-nums}

/* ---------- Layout ---------- */
/* Fluid tokens: scale smoothly from phone (390px) to desktop (1280px+), clamped at both ends */
.frame{--page:clamp(20px, 0.7px + 4.94cqi, 64px);--inner:clamp(36px, 30.7px + 1.35cqi, 48px);--stack:clamp(32px, 28.5px + 0.9cqi, 40px);--card-pad:clamp(24px, 17px + 1.8cqi, 40px);--num:clamp(40px, 36.5px + 0.9cqi, 48px);--num-gap:clamp(16px, 12.5px + 0.9cqi, 24px);--page-y:clamp(16px, 12.5px + 0.9cqi, 24px);--head-gap:clamp(32px, 21.5px + 2.7cqi, 56px);--section:clamp(76px, 54px + 5.62cqi, 126px);--block:clamp(40px, 29.5px + 2.7cqi, 64px);max-width:1328px;margin:0 auto;padding:var(--page-y) var(--page);display:flex;flex-direction:column}
.frame > main{margin-top:var(--head-gap)}
.frame > .footer{margin-top:var(--section)}

.home{display:flex;flex-direction:column;gap:var(--section)}
/* Über mich continues the hero: tighter spacing around it (block token instead of section token) */
.home > #about{margin-block:calc(var(--section) * -0.25)}

/* ---------- Type scale ---------- */
.overline{display:block;margin:0;font-size:12px;line-height:1.4;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.h1{display:block;margin:0;font-size:clamp(40px, 33px + 1.8cqi, 56px);line-height:1.05;font-weight:800;letter-spacing:-.025em;color:var(--text);overflow-wrap:break-word}
.h2{display:block;margin:0;font-size:clamp(30px, 25.6px + 1.12cqi, 40px);line-height:1.15;font-weight:700;letter-spacing:-.015em;color:var(--text);overflow-wrap:break-word}
.h3{display:block;margin:0;font-size:clamp(20px, 18.2px + 0.45cqi, 24px);line-height:1.3;font-weight:700;letter-spacing:-.01em;color:var(--text);overflow-wrap:break-word}
.lead{display:block;margin:0;font-size:clamp(18px, 17.1px + 0.225cqi, 20px);line-height:1.6;font-weight:500;color:var(--text)}
.body{display:block;margin:0;font-size:16px;line-height:1.65;font-weight:500;color:var(--muted)}
.small{display:block;margin:0;font-size:14px;line-height:1.5;font-weight:500;color:var(--muted)}

/* ---------- Header ---------- */
.header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px 24px}
.brand{display:flex;align-items:center;gap:12px;min-height:44px;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}

.wordmark{font-size:19px;line-height:1;font-weight:800;letter-spacing:-.03em;color:var(--text);white-space:nowrap}
.wordmark-dot{color:var(--accent)}
.logo-svg{display:block;height:.75em;width:auto;overflow:visible}
.wordmark-brand{font-size:24px;letter-spacing:-.015em}
.nav{display:flex;flex-wrap:wrap;gap:4px}
.nav-link{min-height:44px;padding:0 12px;border:0;border-radius:10px;background:none;color:var(--muted);font:inherit;font-size:15px;font-weight:600;cursor:pointer;transition:color .2s,background-color .2s}
.nav-link:hover{color:var(--text);background:var(--surface-2)}
.controls{display:flex;align-items:center;gap:8px}

/* Language switcher: vertical inline — the pill itself grows downward; selected language stays on top */
.lang{position:relative;width:56px;height:44px}
.lang-box{position:absolute;top:0;left:0;right:0;z-index:30;display:flex;flex-direction:column;max-height:44px;overflow:hidden;border:1px solid var(--border);border-radius:12px;background:var(--surface);transition:max-height .45s cubic-bezier(.22,1,.36,1),box-shadow .35s ease,border-color .35s ease,background-color .4s ease}
.lang-box:hover{border-color:var(--accent)}
.lang-box.is-open{max-height:132px;border-color:var(--accent);box-shadow:0 4px 12px rgba(10,10,20,.08)}
.lang-btn{flex:none;display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:42px;padding:0;border:0;background:none;color:var(--text);font:inherit;font-size:13px;font-weight:700;letter-spacing:.04em;cursor:pointer;transition:color .3s ease}
.lang-box:hover .lang-btn,.lang-box.is-open .lang-btn{color:var(--accent)}
.lang-opt{flex:none;display:flex;align-items:center;justify-content:center;width:calc(100% - 8px);height:40px;margin:0 4px 4px;padding:0;border:0;border-radius:9px;background:none;color:var(--muted);font:inherit;font-size:13px;font-weight:700;letter-spacing:.04em;cursor:pointer;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px);transition:opacity .3s ease,transform .4s cubic-bezier(.22,1,.36,1),background-color .2s ease,color .2s ease,visibility 0s linear .3s}
.lang-box.is-open .lang-opt{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .3s ease,transform .4s cubic-bezier(.22,1,.36,1),background-color .2s ease,color .2s ease,visibility 0s}
.lang-btn{position:relative;z-index:1}
.lang-box.is-open .lang-opt:nth-of-type(2){transition-delay:.05s}
.lang-box.is-open .lang-opt:nth-of-type(3){transition-delay:.1s}
.lang-opt:hover{background:var(--accent-soft);color:var(--accent)}

/* Theme toggle: old icon leaves to bottom-left, new one enters from top-right */
.icon-btn{position:relative;overflow:hidden;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);cursor:pointer;transition:border-color .4s ease,color .4s ease,background-color .4s ease}
.icon-btn:hover{border-color:var(--accent);color:var(--accent)}
.ti{position:absolute;inset:0;display:grid;place-items:center}
.ti-shown{opacity:1}
.ti-hidden{opacity:0;transform:translate(14px,-14px)}
.ti-in{animation:ti-in .5s cubic-bezier(.22,1,.36,1) .32s both}
.ti-out{animation:ti-out .35s cubic-bezier(.55,0,.75,.2) both}
@keyframes ti-in{from{opacity:0;transform:translate(16px,-16px) rotate(60deg) scale(.5)}to{opacity:1;transform:none}}
@keyframes ti-out{from{opacity:1;transform:none}to{opacity:0;transform:translate(-16px,16px) rotate(-60deg) scale(.5)}}
@media (prefers-reduced-motion: reduce){.ti-in,.ti-out{animation-duration:.01s}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border:1px solid transparent;border-radius:10px;font:inherit;font-size:15px;font-weight:700;text-decoration:none;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:color-mix(in srgb,var(--accent) 86%,var(--text));color:var(--on-accent)}
/* Hero CTA: soft light sweep every few seconds + arrow nudge on hover */
.btn-cta{position:relative;overflow:hidden;isolation:isolate;transition:background-color .2s,transform .25s cubic-bezier(.22,1,.36,1),box-shadow .3s ease}
.btn-cta::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;z-index:-1;background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.28) 50%,transparent 100%);transform:translateX(-130%) skewX(-12deg);animation:cta-sheen 5.5s cubic-bezier(.45,0,.25,1) 2.5s infinite;pointer-events:none}
@keyframes cta-sheen{0%{transform:translateX(-130%) skewX(-12deg)}22%,100%{transform:translateX(330%) skewX(-12deg)}}
.btn-cta svg{transition:transform .35s cubic-bezier(.22,1,.36,1)}
.btn-cta:hover{transform:translateY(-1px);box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 28%,transparent)}
.btn-cta:hover svg{transform:translateX(4px)}
.btn-cta:active{transform:translateY(0) scale(.98);box-shadow:none}
@media (prefers-reduced-motion: reduce){.btn-cta::after{animation:none;display:none}.btn-cta,.btn-cta svg{transition:none}}

.btn-secondary{background:transparent;border-color:var(--border);color:var(--text)}
.btn-secondary:hover{border-color:var(--accent);color:var(--accent)}

.site button:focus-visible,.site a:focus-visible,.site input:focus-visible,.site textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.link-btn{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;color:var(--muted);font:inherit;font-size:14px;font-weight:500;text-decoration:none;cursor:pointer}
.link-btn:hover{color:var(--accent)}

/* ---------- Placeholders ---------- */
.ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border-radius:16px;background:var(--accent-soft);color:var(--accent);font-size:14px;font-weight:600}

/* ---------- Hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--block);align-items:center}
.hero .actions{padding-top:16px}
.photo{aspect-ratio:1/1;border:1px solid var(--border)}
.hero-text{display:flex;flex-direction:column;gap:24px}
.stack-sm{display:flex;flex-direction:column;gap:12px}
.actions{display:flex;flex-wrap:wrap;gap:12px;padding-top:8px}

/* ---------- Sections ---------- */
.section{display:flex;flex-direction:column;gap:var(--inner)}
.section-head{display:flex;flex-direction:column;gap:12px;max-width:760px}
.split-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--block);align-items:start}
.prose{display:flex;flex-direction:column;gap:16px;max-width:720px}

/* Price card */

/* Process: heading on top, steps left-to-right in rows of 4, joined by a horizontal line */
.process-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--inner)}
.process-timeline .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px;row-gap:var(--inner);max-width:none}
.process-timeline .step{grid-template-columns:minmax(0,1fr);row-gap:16px;align-content:start;padding-bottom:0}
.process-timeline .step::before{left:calc(var(--num) + 12px);right:-20px;top:calc(var(--num) / 2 - 1px);bottom:auto;width:auto;height:2px}
.process-timeline .step-body{padding-top:0}
/* row wrap: the last line of a row runs out and fades */
.process-timeline .step:nth-child(3n)::before{right:0;-webkit-mask-image:linear-gradient(90deg,#000 40%,transparent);mask-image:linear-gradient(90deg,#000 40%,transparent)}
@container site (max-width: 1100px){
.process-timeline .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
.process-timeline .step:nth-child(3n)::before{right:-20px;-webkit-mask-image:none;mask-image:none}
.process-timeline .step:nth-child(2n)::before{right:0;-webkit-mask-image:linear-gradient(90deg,#000 40%,transparent);mask-image:linear-gradient(90deg,#000 40%,transparent)}
}
@container site (max-width: 900px){
.process-timeline .steps{display:flex;row-gap:0}
.process-timeline .step{grid-template-columns:var(--num) minmax(0,1fr);column-gap:var(--num-gap);row-gap:0;padding-bottom:var(--stack)}
.process-timeline .step:nth-child(n)::before{display:block;left:calc(var(--num) / 2 - 1px);right:auto;top:calc(var(--num) + 8px);bottom:8px;width:2px;height:auto;background:var(--border);border:0;border-radius:1px;-webkit-mask-image:none;mask-image:none}
.process-timeline .step:nth-child(n):not(:first-child)::after{display:none}
.process-timeline .step:last-child{padding-bottom:0}
.process-timeline .step:last-child::before{display:none}
.process-timeline .step-body{padding-top:calc((var(--num) - 26px) / 2)}
}
.process-timeline .step:last-child::before{display:none}

/* Process: numbered vertical timeline */
.steps{display:flex;flex-direction:column;max-width:860px;margin:0;padding:0;list-style:none}
.step{position:relative;display:grid;grid-template-columns:var(--num) minmax(0,1fr);column-gap:var(--num-gap);padding-bottom:var(--stack)}
.step:last-child{padding-bottom:0}
.step::before{content:"";position:absolute;left:calc(var(--num) / 2 - 1px);top:calc(var(--num) + 8px);bottom:8px;width:2px;border-radius:1px;background:var(--border)}
.step:last-child::before{display:none}
.step-num{display:grid;place-items:center;width:var(--num);height:var(--num);border-radius:calc(var(--num) / 4);background:var(--accent-soft);color:var(--accent);font-size:clamp(14px, 13.56px + 0.112cqi, 15px);font-weight:800;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.step-body{display:flex;flex-direction:column;gap:8px;padding-top:calc((var(--num) - 26px) / 2)}

.step-title{font-size:clamp(18px, 16.7px + 0.34cqi, 21px)}

.price{display:flex;flex-direction:column;gap:12px;padding:var(--card-pad);border:2px solid var(--accent);border-radius:16px;background:var(--accent-soft)}

/* Project card */
.card{display:flex;flex-direction:column;width:100%;max-width:560px;padding:0;border:1px solid var(--border);border-radius:16px;background:var(--surface);color:inherit;font:inherit;text-align:left;overflow:hidden;cursor:pointer;transition:border-color .2s,transform .2s}
.card:hover{border-color:var(--accent);transform:translateY(-2px)}
.card-media{aspect-ratio:16/10;border-radius:0}
.card-body{display:flex;flex-direction:column;gap:8px;padding:24px}
/* Wide project card: big preview left, text right — fills the full content width */
.card.card-wide{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);max-width:none;align-items:stretch}
.card-wide .card-media{aspect-ratio:auto;min-height:360px}
.card-wide .card-body{justify-content:center;gap:12px;padding:var(--card-pad)}

@container site (max-width: 900px){.card.card-wide{grid-template-columns:minmax(0,1fr)}.card-wide .card-media{aspect-ratio:16/10;min-height:0}}
.card-link{display:inline-flex;align-items:center;gap:8px;padding-top:8px;color:var(--accent);font-size:14px;font-weight:700}

/* ---------- Contact form ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--block);align-items:start}
.form{position:relative;display:flex;flex-direction:column;gap:20px;padding:var(--card-pad);border:1px solid var(--border);border-radius:16px;background:var(--surface)}
.field{display:flex;flex-direction:column;gap:8px}
.label{font-size:14px;font-weight:600;line-height:1.5;color:var(--text)}
.req{color:var(--accent)}
.input{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--bg);color:var(--text);font:inherit;font-size:16px;line-height:1.5}
.input::placeholder{color:var(--muted);opacity:.55}
.input:focus{border-color:var(--accent)}
textarea.input{min-height:128px;resize:vertical}
.check{display:flex;align-items:flex-start;gap:12px;font-size:14px;line-height:1.5;color:var(--muted);cursor:pointer}
.check input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--accent)}
.check a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
/* the hidden attribute must win over any display value set below */
.site [hidden]{display:none!important}
.field-error{display:flex;align-items:flex-start;gap:6px;margin:0;font-size:13px;line-height:1.45;font-weight:600;color:var(--danger)}
.field-error::before{content:"!";flex:none;display:grid;place-items:center;width:16px;height:16px;margin-top:1px;border-radius:50%;background:var(--danger);color:var(--surface);font-size:11px;font-weight:800}

.field.has-error .input{border-color:var(--danger);box-shadow:0 0 0 1px var(--danger)}
.field.has-error .check input{outline:2px solid var(--danger);outline-offset:1px}

.submit-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.btn.is-disabled{opacity:.45;cursor:not-allowed}
.btn.is-disabled:hover{background:var(--accent)}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.alert{padding:16px 20px;border-radius:12px;font-size:15px;line-height:1.5;color:var(--text)}
.alert-ok{border:1px solid var(--accent);background:var(--accent-soft)}
.alert-err{border:1px solid var(--danger);background:color-mix(in srgb,var(--danger) 10%,var(--surface))}

/* ---------- Footer ---------- */
.footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 24px;padding-top:24px;border-top:1px solid var(--border)}
.footer-links{display:flex;flex-wrap:wrap;align-items:center;gap:0 20px}

/* ---------- Case page ---------- */
.case{display:flex;flex-direction:column;gap:var(--block)}
.case-head{display:flex;flex-direction:column;gap:16px;max-width:880px}
.cover{aspect-ratio:16/9}

.demo{display:flex;flex-direction:column;gap:12px;margin:0}
.demo-caption{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:8px 24px;margin:0;font-size:13px;line-height:1.5;font-weight:400;color:#5B636F}
.demo-caption > span{flex:1 1 420px;max-width:760px}
.site[data-mode="dark"] .demo-caption{color:var(--muted)}

.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--block)}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{display:inline-flex;align-items:center;min-height:32px;padding:4px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);font-size:14px;font-weight:600;color:var(--text)}

/* ---------- Legal pages ---------- */
.legal .h1{font-size:clamp(30px, 25.6px + 1.12cqi, 40px);line-height:1.15;letter-spacing:-.015em}
.legal{display:flex;flex-direction:column;gap:var(--stack);max-width:760px}
.legal-sec{display:flex;flex-direction:column;gap:12px}
.legal p{white-space:pre-line;overflow-wrap:anywhere}
.notice{margin:0;padding:16px 20px;border-radius:12px;background:var(--accent-soft);font-size:14px;line-height:1.5;color:var(--text)}

/* ---------- Layout breakpoints (real screen width of the page) ----------
   Sizes and spacing are fluid (see tokens above); these only change the layout. */

/* Small laptop / tablet landscape: up to 1100 */
@container site (max-width: 1100px){
.contact-grid{grid-template-columns:minmax(0,1fr);gap:var(--inner)}

}

/* Tablet portrait: up to 900 — nav to its own row, columns stack */
@container site (max-width: 900px){
.nav{order:3;width:100%;margin-left:-12px}
.hero,.split-head,.contact-grid{grid-template-columns:minmax(0,1fr);gap:var(--inner)}
.photo{width:100%;max-width:440px}
.split{grid-template-columns:minmax(0,1fr);gap:12px}
}

/* Phone: up to 720 */
@container site (max-width: 720px){
.header{gap:12px}
.wordmark{font-size:17px}
.wordmark-brand{font-size:21px}

.photo{max-width:none}
.hero .actions .btn{flex:1 1 auto}
.footer{flex-direction:column;align-items:flex-start}

}

/* Small phone: up to 640 — one column cards */

/* Very small phone (320–360) */
@container site (max-width: 360px){
.controls{gap:6px}

.wordmark-brand{font-size:19px}
}

/* ---------- Mobile menu (phone + tablet portrait) ---------- */
.menu-btn{display:none}
.mmenu{display:none}
@container site (max-width: 900px){
.header .nav,.header .lang,.header .controls > .icon-btn:not(.menu-btn){display:none}
.menu-btn{display:grid}
.mmenu{display:flex;position:absolute;top:0;left:0;right:0;height:100dvh;z-index:60;align-items:center;justify-content:center;padding:var(--page-y) var(--page);background:color-mix(in srgb,var(--bg) 86%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility 0s linear .3s}
.mmenu.is-open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .3s ease}
.mmenu-close{position:absolute;top:var(--page-y);right:var(--page)}
.mmenu-inner{display:flex;flex-direction:column;align-items:center;gap:40px;text-align:center;transform:translateY(8px);transition:transform .4s cubic-bezier(.22,1,.36,1)}
.mmenu.is-open .mmenu-inner{transform:none}
.mmenu-nav{display:flex;flex-direction:column;align-items:center;gap:8px}
.mmenu-link{min-height:52px;padding:0 16px;border:0;background:none;color:var(--text);font:inherit;font-size:28px;font-weight:700;letter-spacing:-.01em;cursor:pointer}
.mmenu-link:active{color:var(--accent)}
.mmenu-group{display:flex;flex-direction:column;align-items:center;gap:12px}
.mmenu-label{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mmenu-seg{display:flex;gap:4px;padding:4px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.mmenu-opt{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:56px;min-height:40px;padding:0 14px;border:0;border-radius:9px;background:none;color:var(--muted);font:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:background-color .2s,color .2s}
.mmenu-opt.is-active{background:var(--accent-soft);color:var(--accent)}
}
@media (prefers-reduced-motion: reduce){.mmenu,.mmenu-inner{transition:none}}
/* phone layout previewed on a wider screen (design canvas): keep the menu at phone-screen height */
@media (min-width: 901px){
@container site (max-width: 720px){.mmenu{max-height:844px}}
@container site (min-width: 721px){.mmenu{max-height:1024px}}
}
/* ---------- Hero identity: round avatar beside the name on phones and tablets; big photo stays on larger screens ---------- */
.hero-ava{display:none}
@container site (max-width: 900px){
.hero .photo{display:none}
.hero-id{display:flex;align-items:center;gap:24px}
.hero-ava{flex:none;display:grid;place-items:center;width:88px;height:88px;border-radius:50%;border:1px solid var(--border);background:var(--accent-soft);color:var(--accent);overflow:hidden}
.hero-id .h1{min-width:0}
}
@container site (max-width: 720px){
.hero-id{gap:20px}
.hero-id .h1{font-size:min(40px, 9.4cqi)}
}
@container site (max-width: 360px){
.hero-id{gap:16px}
.hero-ava{width:64px;height:64px}
.hero-ava svg{width:26px;height:26px}
.hero-id .h1{font-size:34px}
}
/* Case meta: one line with separators; one topic per line on phones */
.cs-meta-item + .cs-meta-item::before{content:" · "}
@container site (max-width: 900px){
.cs-meta-item{display:block}
.cs-meta-item + .cs-meta-item::before{content:none}
}
/* tablet sizes for the menu and the avatar */
@container site (min-width: 721px) and (max-width: 900px){
.mmenu-inner{gap:48px}
.mmenu-link{font-size:34px;min-height:60px}
.mmenu-opt{min-height:44px;font-size:15px;min-width:64px}
.hero-ava{width:112px;height:112px}
.hero-ava svg{width:40px;height:40px}
.hero-id{gap:32px}
}
/* Price card: keep lines at a readable length on wide screens */
.price > *{max-width:760px}
/* Process grid (2 or 4 columns): number, title and text share rows across a line, so texts start at the same height */
@container site (min-width: 901px){
.process-timeline .step{grid-template-rows:subgrid;grid-row:span 3;row-gap:0}
.process-timeline .step-body{display:contents}
.process-timeline .step-title{margin-top:16px;align-self:start}
.process-timeline .step-body > .body{margin-top:8px}
}
/* Project card: screenshot slot (add the <img> in production) */
.card-shot{position:relative;display:block;background:var(--accent-soft);overflow:hidden}
.card-shot img{position:absolute;left:50%;top:32px;transform:translateX(-50%);display:block;width:min(62%, 300px);height:auto;border-radius:16px;box-shadow:0 12px 32px rgba(16,21,28,.16)}
.card-wide .card-shot{aspect-ratio:auto;min-height:360px;max-height:420px}
.demo-open{flex:none;color:var(--accent);font-weight:700;text-decoration:none;white-space:nowrap}
.demo-open:hover{text-decoration:underline}
/* FAQ: plain accordion (Faq3 pattern) — divider lines, chevron, one item open at a time (details[name]) */
.faq-list{display:flex;flex-direction:column;width:100%}
.faq-item{border-bottom:1px solid var(--border)}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;padding:clamp(16px, 14.2px + 0.45cqi, 20px) 0;cursor:pointer;list-style:none;font-size:clamp(18px, 16.7px + 0.34cqi, 21px);line-height:1.3;font-weight:700;letter-spacing:-.01em;color:var(--text);transition:opacity .2s ease}
.faq-q::-webkit-details-marker{display:none}
.faq-q:hover{opacity:.6}
.faq-chev{flex:none;color:var(--text);transition:transform .2s ease}
.faq-item[open] .faq-chev{transform:rotate(180deg)}
.faq-a{padding:0 0 clamp(16px, 14.2px + 0.45cqi, 20px);max-width:760px}
/* smooth open/close where the browser supports animating details */
.site{interpolate-size:allow-keywords}
.faq-item::details-content{block-size:0;overflow:hidden;transition:block-size .2s ease-out,content-visibility .2s allow-discrete}
.faq-item[open]::details-content{block-size:auto}
@media (prefers-reduced-motion: reduce){.faq-q,.faq-chev,.faq-item::details-content{transition:none}}

/* Real photo */
.photo-img{border-radius:16px;overflow:hidden;background:var(--accent-soft)}
.photo-img img,.hero-ava img{display:block;width:100%;height:100%;object-fit:cover}
.photo-img img{object-position:50% 30%}

/* Legal texts (IT-Recht Kanzlei export) */
.legal-sub{margin:8px 0 0;font-size:17px;line-height:1.35;font-weight:700;color:var(--text)}
.legal-ul{margin:0;padding-left:1.25em;display:flex;flex-direction:column;gap:4px}
.legal-a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.legal-meta{margin:16px 0 0;color:var(--muted);white-space:normal}
.legal p span{white-space:pre-line}

/* Live demo window: browser chrome + slot for the production <iframe class="demo-slot"> */
.demo-window{display:flex;flex-direction:column;width:100%;border:1px solid var(--border);border-radius:16px;overflow:hidden;background:var(--surface)}
.demo-bar{display:flex;align-items:center;gap:16px;height:44px;padding:0 16px;border-bottom:1px solid var(--border)}
.demo-dots{display:flex;gap:6px;flex:none}
.demo-dots i{width:10px;height:10px;border-radius:50%;background:var(--border)}
.demo-url{flex:1;min-width:0;max-width:420px;margin-inline:auto;padding:5px 12px;border-radius:8px;background:var(--bg);font-size:13px;font-weight:500;color:var(--muted);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;height:640px;border:0;background:var(--accent-soft);color:var(--accent);text-align:center}
.demo-slot-t{font-size:15px;font-weight:700}
.demo-slot-s{font-size:13px;font-weight:500;opacity:.75}
@container site (max-width: 720px){
.demo-slot{height:560px}
.demo-bar{height:40px;padding:0 12px;gap:12px}
.demo-dots{display:none}
}

/* ---------- Scroll reveal (JS marks elements with data-rv="out" → "in" → "done") ---------- */
.site[data-reveal] [data-rv="out"],.site[data-reveal] [data-rv="in"]{transition-property:opacity,transform;transition-duration:.9s;transition-timing-function:cubic-bezier(.16,1,.3,1);transition-delay:var(--rv-d,0ms)}
[data-rv-d="1"]{--rv-d:90ms}[data-rv-d="2"]{--rv-d:180ms}[data-rv-d="3"]{--rv-d:270ms}[data-rv-d="4"]{--rv-d:360ms}[data-rv-d="5"]{--rv-d:450ms}
.site[data-reveal="rise"] [data-rv="out"]{opacity:0;transform:translateY(28px)}
.site[data-rv-init] [data-rv]{transition:none!important}
@media (prefers-reduced-motion: reduce){.site[data-reveal] [data-rv]{opacity:1!important;transform:none!important;transition:none!important}}


/* ---------- production additions ---------- */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg,#F7F7F9)}
:target{scroll-margin-top:96px}
.site a.brand{display:inline-flex;align-items:center;background:none;border:0;padding:0;cursor:pointer;text-decoration:none;color:inherit}
.site a.nav-link,.site a.m-link{text-decoration:none}
.site a.card{text-decoration:none;color:inherit;display:flex}
.site a.lang-opt{display:flex;align-items:center;justify-content:center;text-decoration:none}

/* two-click demo gate */
.demo-consent{gap:12px;padding:32px 24px}
.demo-slot-note{max-width:48ch;font-size:13px;line-height:1.5;font-weight:400;color:var(--muted);text-align:center}
.demo-load{margin-top:4px;cursor:pointer}
iframe.demo-slot{display:block;border:0;width:100%;background:#fff}

/* project-card preview */
.card-shot img{top:28px}
.card-shot:has(img:only-child:not([src])){background:var(--accent-soft)}

/* contact form status */
.form-status{margin:12px 0 0;padding:12px 16px;border-radius:12px;font-size:15px;line-height:1.5}
.form-status[data-state="ok"]{background:var(--accent-soft);color:var(--accent)}
.form-status[data-state="err"]{background:rgba(180,35,24,.08);color:var(--danger,#B42318)}
.form-status[data-state="sending"]{color:var(--muted)}
.field.is-invalid .input{border-color:var(--danger,#B42318)}
.field-err{margin:6px 0 0;font-size:13px;color:var(--danger,#B42318)}

/* language note on the legal pages */
.legal-lang-note{margin:8px 0 24px;padding:12px 16px;border-radius:12px;background:var(--surface-2);
  color:var(--muted);font-size:14px;line-height:1.5}

/* footer cookie-settings button: .link-btn already resets the button and
   gives it the size and colour of the sibling links - nothing to override */

/* mode tokens mirrored to <html> so the pre-paint script avoids a flash */
html[data-mode="light"] .site{--bg:#F7F7F9;--surface:#FFFFFF;--surface-2:#EDEDF2;--text:#15151A;--muted:#45454F;--border:#E1E1E8;--danger:#B42318}
html[data-mode="light"] .site{color-scheme:light}
html[data-mode="dark"] .site{color-scheme:dark}
html[data-mode="dark"] .site{--bg:#0E0E12;--surface:#17171D;--surface-2:#202028;--text:#F2F2F5;--muted:#B4B4BF;--border:#2B2B35;--danger:#FF8A80}
html[data-mode="light"] .site[data-palette="violet"]{--accent:#712CF9;--on-accent:#FFFFFF}
html[data-mode="dark"] .site[data-palette="violet"]{--accent:#A98BFF;--on-accent:#14092E}
html[data-mode="light"] .site[data-palette="emerald"]{--accent:#0B7A55;--on-accent:#FFFFFF}
html[data-mode="dark"] .site[data-palette="emerald"]{--accent:#3DD69F;--on-accent:#04261A}
html[data-mode="light"] .site[data-palette="coral"]{--accent:#C4410C;--on-accent:#FFFFFF}
html[data-mode="dark"] .site[data-palette="coral"]{--accent:#FF8A50;--on-accent:#2A0E02}
html[data-mode="light"] .site[data-palette="blue"]{--accent:#1D5BD8;--on-accent:#FFFFFF}
html[data-mode="dark"] .site[data-palette="blue"]{--accent:#6EA8FF;--on-accent:#081A33}

/* ---------------------------------------------------------------------
   Korrekturen nach dem Live-Gang (05.11.2026)
   --------------------------------------------------------------------- */

/* Die Navigationslinks waren im Export <button> und sind jetzt <a>.
   Ein <a> ist standardmaessig inline - dadurch sass die Hover-Flaeche
   tiefer als der Text. Wieder als Flex-Box ausrichten. */
.nav-link{display:inline-flex;align-items:center;justify-content:center}
.mmenu-link{display:flex;align-items:center}
.site a.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}

/* Die Projektvorschau fuellt jetzt die ganze Kachel, statt als kleines
   Fenster in der Mitte zu schweben. */
.card-shot{aspect-ratio:16/10;min-height:0;max-height:none;background:var(--accent-soft)}
.card-shot img{position:absolute;inset:0;left:0;top:0;transform:none;
  width:100%;height:100%;object-fit:cover;object-position:50% 0;
  border-radius:0;box-shadow:none}

/* ---------------------------------------------------------------------
   Reveal beim Scrollen — ersetzt die Animation aus dem Claude-Design-
   Runtime, das beim Umbau auf statisches HTML entfernt wurde.
   Timing und Kurve sind aus dem Original uebernommen.

   Versteckt wird nur, solange die Seite auch wirklich animieren kann:
   das Attribut data-rv-ready setzt das Inline-Skript im <head> vor dem
   ersten Paint, und <noscript> hebt es wieder auf. Ohne JavaScript ist
   also jeder Inhalt sichtbar.
   --------------------------------------------------------------------- */
html[data-rv-ready] .site :is(.split-head,.section-head,.prose,.step,.card,.faq-item,.contact-grid>*,.demo,.split){
  opacity:0;transform:translateY(28px)
}
.site :is(.split-head,.section-head,.prose,.step,.card,.faq-item,.contact-grid>*,.demo,.split){
  transition-property:opacity,transform;
  transition-duration:.9s;
  transition-timing-function:cubic-bezier(.16,1,.3,1);
  transition-delay:var(--rv-d,0ms)
}
html[data-rv-ready] .site .is-rv-in{opacity:1;transform:none}

[data-rv-d="1"]{--rv-d:90ms}
[data-rv-d="2"]{--rv-d:180ms}
[data-rv-d="3"]{--rv-d:270ms}
[data-rv-d="4"]{--rv-d:360ms}
[data-rv-d="5"]{--rv-d:450ms}

@media (prefers-reduced-motion: reduce){
  html[data-rv-ready] .site :is(.split-head,.section-head,.prose,.step,.card,.faq-item,.contact-grid>*,.demo,.split){
    opacity:1!important;transform:none!important;transition:none!important
  }
}

/* ---------------------------------------------------------------------
   Startbildschirm (Intro)
   Sichtbar ausschliesslich, wenn das Inline-Skript im <head> die Klasse
   ow-intro gesetzt hat - also auf der Startseite, einmal pro Sitzung und
   nur bei erwuenschten Animationen. Ohne JavaScript existiert die Klasse
   nie: die Seite ist dann sofort vollstaendig sichtbar, der Splash wird
   gar nicht erst angezeigt.
   --------------------------------------------------------------------- */
.site .intro{display:none}
html.ow-intro .site .intro{display:grid}
html.ow-intro .site{height:100vh;height:100svh;overflow:hidden}

/* der Scramble-Text darf die Breite nicht springen lassen */
.intro-logo{font-variant-ligatures:none}

/* Tippziele auf dem Handy: mindestens 24 px (WCAG 2.2, 2.5.8) */
.check input[type="checkbox"]{width:24px;height:24px;flex:none}
.demo-open{display:inline-flex;align-items:center;min-height:44px}

/* <picture> nur als Format-/Breiten-Weiche: fuer das Layout unsichtbar,
   die Bilder verhalten sich wie direkte Kinder ihrer Container */
.hero-ava picture,.photo-img picture,.card-shot picture{display:contents}