@font-face{font-family:'Bricolage Grotesque';src:url('assets/bricolage-grotesque.ttf') format('truetype');font-style:normal;font-weight:200 800;font-display:swap}
:root{--paper:#fafaf9;--ink:#18181a;--muted:#727277;--accent:#27275a;--line:#e4e4e7;--space:clamp(1.25rem,4.5vw,5.5rem);--header-height:88px;font-family:'Bricolage Grotesque',Arial,sans-serif;font-size:16px;font-optical-sizing:auto;color:var(--ink);background:var(--paper);color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-height) + 1.5rem)}body{margin:0}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{cursor:pointer;color:inherit}img{display:block;max-width:100%}figure,p,h1,h2{margin:0}h1,h2{font-weight:550}::selection{background:var(--accent);color:white}:focus-visible{outline:2px solid var(--accent);outline-offset:5px}.content{width:min(calc(100% - var(--space)*2),1400px);margin-inline:auto}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:absolute;left:1rem;top:-5rem;z-index:30;padding:1rem;background:white}.skip-link:focus{top:1rem}
.site-header{position:absolute;top:0;left:0;width:100%;z-index:20;background:transparent;border:0;transition:background .2s,box-shadow .2s}.site-header.is-scrolled{position:fixed;background:#fafaf9f5;backdrop-filter:blur(16px);box-shadow:0 1px 0 #18181a0c}.header{height:var(--header-height);display:flex;align-items:center;justify-content:space-between;gap:2rem}.brand{flex-shrink:0}.brand img{width:158px;height:auto}.header nav{display:flex;align-items:center;gap:2.5rem;font-size:.9375rem;color:#5c5c63}.workflow-link:hover,.login-button:hover{color:var(--ink)}.login-button{padding:.65rem 0;border:0;background:transparent;font-size:inherit;min-height:44px}
.hero{height:80svh;max-height:80svh;display:grid;grid-template-rows:auto minmax(0,1fr);gap:clamp(1.5rem,3vh,2.5rem);padding-top:calc(var(--header-height) + clamp(1.25rem,3.5vh,3rem));padding-bottom:clamp(1.5rem,4vh,3rem)}.hero-copy{text-align:center}.hero h1{font-size:clamp(2.35rem,4vw,4.6rem);line-height:1.09;letter-spacing:-.045em;font-weight:450;text-wrap:balance}.hero-description{font-size:clamp(1rem,1.25vw,1.3rem);line-height:1.5;color:var(--muted);margin-top:clamp(1rem,2.5vh,1.75rem)}.button{display:inline-flex;align-items:center;justify-content:center;gap:.65rem;padding:.72rem 1.2rem;min-height:44px;border:1px solid var(--ink);border-radius:999px;background:var(--ink);color:white;font-size:1rem;font-weight:500;line-height:1.3;transition:background .2s,box-shadow .2s}.button:hover{background:#353536;box-shadow:0 3px 10px #18181a12}.button-plus{font-size:1.5rem;line-height:.8;font-weight:300}.hero-copy .button{margin-top:clamp(1.15rem,2.5vh,1.8rem)}.hero-visual{min-height:0;position:relative}
.comparison{height:100%;width:100%;position:relative;overflow:hidden;background:#fff;isolation:isolate;cursor:ew-resize;touch-action:pan-y;border:1px solid var(--line);border-radius:18px;--split:50%}.comparison:focus-within{outline:2px solid var(--accent);outline-offset:4px}.compare-picture{position:absolute;inset:0;overflow:hidden;background:#fff}.compare-picture img{position:absolute;max-width:none;user-select:none;pointer-events:none;-webkit-user-drag:none}.compare-original{clip-path:inset(0 calc(100% - var(--split)) 0 0)}.comparison-croc .compare-picture img{width:100%;height:auto;left:0;top:50%;transform:translateY(-50%)}.compare-labels{position:absolute;inset:1rem 1.2rem auto;display:flex;justify-content:space-between;gap:1rem;z-index:3;pointer-events:none;color:#6b6b70;font-size:.875rem}.compare-labels span{background:#ffffffc4;padding:.12rem .35rem;border-radius:3px}.compare-divider{position:absolute;left:var(--split);top:0;bottom:0;width:2px;background:var(--accent);z-index:2;pointer-events:none;transform:translateX(-1px)}.compare-handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:42px;height:42px;display:grid;place-items:center;background:var(--accent);color:white;border-radius:50%;box-shadow:0 0 0 2px #ffffffd9,0 2px 8px #18181a14}.compare-handle svg{width:23px;height:23px}.compare-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:none;z-index:4}
.workflow{border-top:1px solid var(--line);padding-top:clamp(3rem,5.5vw,6rem);scroll-margin-top:1.5rem}.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,3.5rem)}.step{min-width:0;display:grid;grid-template-rows:subgrid;grid-row:span 2;row-gap:2rem}.step-number{display:block;font-size:.875rem;color:var(--accent);font-variant-numeric:tabular-nums;font-weight:550;margin-bottom:1.2rem}.step h2{font-size:clamp(1.4rem,1.6vw,1.8rem);line-height:1.25;letter-spacing:-.025em;font-weight:550;margin-bottom:1.1rem}.step p{font-size:1rem;color:var(--muted);line-height:1.6;max-width:27rem}.step-image{aspect-ratio:4/5;min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:white}.step-image>img{width:100%;height:100%;object-fit:cover}.comparison-kraken{border:0;border-radius:0}.comparison-kraken .compare-picture img{width:139%;height:auto;left:-4%;top:-23.6%}.comparison-kraken .compare-handle{width:38px;height:38px}
.closing{text-align:center;padding-block:clamp(4rem,7vw,8rem)}.closing h2{font-size:clamp(2rem,2.5vw,2.7rem);line-height:1.2;letter-spacing:-.035em;font-weight:550;margin-bottom:1.5rem}.footer{border-top:1px solid var(--line);padding-block:2rem;color:var(--muted);font-size:.8125rem}.footer-inner{display:flex;align-items:center;gap:2rem}.footer .brand img{width:137px}.footer-legal{display:flex;align-items:center;gap:1.3rem;flex-wrap:wrap;margin-left:auto}.footer-legal button{padding:.3rem 0;border:0;background:transparent;font-size:inherit;line-height:1.5;min-height:36px}.footer-legal button:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}.copyright{white-space:nowrap;font-size:.8125rem}
@supports not (grid-template-rows:subgrid){.step{grid-template-rows:minmax(172px,auto) auto;grid-row:auto}}
@media(min-width:1700px){.hero h1{font-size:4.25rem}.hero-description{font-size:1.25rem}}
@media(max-width:900px){.hero h1{font-size:clamp(2.3rem,4.8vw,3.3rem)}.steps{gap:1.5rem}.step h2{font-size:1.4rem}.footer-inner{flex-wrap:wrap;gap:1rem 2rem}.footer-legal{gap:1rem}.copyright{margin-left:auto}}
@media(max-width:650px){:root{--header-height:72px;--space:1.25rem}.brand img{width:138px}.header{gap:1rem}.header nav{gap:1rem;font-size:.875rem}.hero{height:80svh;padding-top:calc(var(--header-height) + 1.4rem);padding-bottom:1.8rem;gap:1.7rem}.hero h1{font-size:clamp(2rem,7.8vw,3rem);line-height:1.12;letter-spacing:-.035em}.desktop-break{display:none}.hero-description{font-size:1rem;margin-top:1.1rem;line-height:1.5}.hero-copy .button{margin-top:1.3rem}.hero-visual{max-height:240px;align-self:center;height:100%}.comparison{border-radius:12px}.comparison-croc .compare-picture img{width:100%;height:100%;object-fit:contain;transform:none;top:0}.compare-labels{inset:.7rem .6rem auto;font-size:.75rem}.compare-handle{width:36px;height:36px}.compare-handle svg{width:21px}.steps{grid-template-columns:1fr;gap:2.8rem;max-width:440px}.step{display:block;grid-row:auto}.step-number{margin-bottom:.85rem}.step h2{font-size:1.5rem;margin-bottom:.85rem}.step p{max-width:none}.step-image{margin-top:1.4rem}.workflow{padding-top:2.7rem}.closing{padding-block:4rem}.closing h2{font-size:2.1rem}.footer{padding-block:1.7rem}.footer-inner{justify-content:center;gap:1.1rem;text-align:center}.footer .brand{width:100%;display:flex;justify-content:center}.footer-legal{margin:0;justify-content:center;font-size:.875rem;gap:.35rem 1.25rem}.copyright{margin:0;width:100%}}
@media(max-width:380px){.workflow-link{display:none}.hero h1{font-size:1.9rem}.hero-description{font-size:.9375rem}}
@media(max-height:650px) and (min-width:651px){.hero{padding-top:calc(var(--header-height) + .6rem);gap:1rem;padding-bottom:1.3rem}.hero h1{font-size:2.4rem}.hero-description{font-size:1rem;margin-top:.7rem}.hero-copy .button{margin-top:.8rem}.compare-labels{inset:.5rem .7rem auto}}
@media(max-height:550px){.hero{height:auto;max-height:none;padding-top:calc(var(--header-height) + 1.3rem);padding-bottom:2rem}.hero-visual{height:clamp(140px,24vw,300px);min-height:140px}.hero h1{font-size:2rem}.hero-description{font-size:1rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
.comparison-croc .compare-picture img{height:210%;object-fit:contain}.comparison-croc .compare-original{background:#fcf1cf}.footer-legal{font-size:.875rem}
@media(max-width:650px){.comparison-croc .compare-picture img{height:100%}.compare-labels{font-size:.875rem}}
.comparison,.comparison *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.comparison ::selection,.comparison::selection{background:transparent}
h1,h2{color:var(--accent)}.button{background:var(--accent);border-color:var(--accent)}.button:hover{background:color-mix(in srgb,var(--accent) 85%,#fff)}
.closing h2{font-size:clamp(2.35rem,4vw,4.6rem);line-height:1.09;letter-spacing:-.045em;font-weight:450;text-wrap:balance}
@media(min-width:1700px){.closing h2{font-size:4.25rem}}
@media(max-width:900px){.closing h2{font-size:clamp(2.3rem,4.8vw,3.3rem)}}
@media(max-width:650px){.closing h2{font-size:clamp(2rem,7.8vw,3rem);line-height:1.12;letter-spacing:-.035em}}
@media(max-width:380px){.closing h2{font-size:1.9rem}}
:root{--header-height:72px}
@media(max-width:650px){:root{--header-height:60px}}
.site-header.is-scrolled{background:rgba(250,250,249,.62);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px)}
/* Krokodil (Flora 07.10.2026): oben mindestens 20 %, unten mindestens 15 % der Tierhoehe frei, nie am Rand.
   Gemessen im 2048 x 745-Bild: Tier Zeilen 241-659 (418 hoch) -> sichtbar mindestens Zeilen 157-722 (565 hoch,
   Mitte 439,5) und die volle Breite 2048. Massstab = der kleinere von Hoehe/565 und Breite/2048; der Rest des
   Rahmens zeigt die Papierfarbe des Scans (Median am Bildrand 253/242/205) bzw. Weiss. */
.comparison-croc .compare-picture{container-type:size}
.comparison-croc .compare-picture img{--s:min(100cqh / 565, 100cqw / 2048);width:calc(2048 * var(--s));height:auto;max-width:none;
  object-fit:fill;left:calc((100cqw - 2048 * var(--s)) / 2);top:calc(50cqh - 439.5 * var(--s));transform:none}
.comparison-croc .compare-original{background:#fdf2cd}
.hero{gap:clamp(2.25rem,5vh,4rem)}@media(max-width:650px){.hero{gap:2.2rem}}
.comparison-croc .compare-original img{-webkit-mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent),linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent),linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent);mask-composite:intersect}