/* ASAY MEDIA · Designsystem */
@font-face{font-family:"Jakarta";src:url(../fonts/jakarta-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Jakarta";src:url(../fonts/jakarta-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Jakarta";src:url(../fonts/jakarta-800.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Hanken";src:url(../fonts/hanken-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Hanken";src:url(../fonts/hanken-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Hanken";src:url(../fonts/hanken-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"JBMono";src:url(../fonts/jbmono-500.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --canvas:#141518;--panel:#1C1E22;--panel-2:#24272C;--line:#33363D;--line-strong:#5A5E67;
  --paper:#FFFFFF;--paper-2:#F7F7F8;--ink:#16171A;--ink-line:#CFCBC2;--ink-line-strong:#8C8880;
  --accent:#FF5B1F;--accent-hover:#FF7440;--accent-ink:#D8430C;--accent-muted:rgba(255,91,31,.18);
  --text-primary:#F3F1EC;--text-secondary:#A9ABB1;--ink-secondary:#55585F;
  --f-display:"Jakarta",ui-sans-serif,system-ui,sans-serif;
  --f-body:"Hanken",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JBMono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease-out:cubic-bezier(.22,1,.36,1);--ease-io:cubic-bezier(.65,0,.35,1);
  --r:18px;--r-sm:12px;--gutter:clamp(16px,4vw,48px);--max:1240px;
  --tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{margin:0;overflow-x:hidden;overflow-x:clip;background:var(--canvas);color:var(--text-primary);font-family:var(--f-body);font-size:clamp(16px,.35vw + 15px,18px);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration-color:var(--accent);text-underline-offset:.2em}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--accent);color:#16171A;padding:10px 16px;border-radius:10px;font-weight:600;transition:top .3s var(--ease-out)}
.skip:focus{top:12px}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
main{display:block;outline:none}

/* Umgebung: ein fester Hintergrund für die ganze Seite */
.env{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:var(--canvas)}
.env::before{content:"";position:absolute;width:120vmax;height:120vmax;left:50%;top:40%;margin:-60vmax 0 0 -60vmax;background:radial-gradient(closest-side,rgba(255,91,31,.10),rgba(255,91,31,.03) 45%,transparent 70%);animation:envdrift 90s var(--ease-io) -20s infinite alternate}
.env::after{content:"";position:absolute;inset:0;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes envdrift{from{transform:translate(-18vw,-8vh) scale(1)}to{transform:translate(18vw,22vh) scale(1.15)}}

/* Typografie */
h1,h2,h3,h4{font-family:var(--f-display);font-weight:800;line-height:1.06;letter-spacing:-.025em;margin:0;text-wrap:balance;hyphens:manual}
.h-xl{font-size:clamp(2.4rem,6vw,5.4rem);font-weight:800;letter-spacing:-.035em}
.h-l{font-size:clamp(2rem,4.4vw,3.9rem)}
.h-m{font-size:clamp(1.5rem,2.6vw,2.3rem);letter-spacing:-.02em}
.h-s{font-size:clamp(1.15rem,1.5vw,1.35rem);letter-spacing:-.01em;line-height:1.2}
p{margin:0 0 1em}
.lede{font-size:clamp(1.08rem,1.1vw + .7rem,1.32rem);line-height:1.55;color:var(--text-secondary);max-width:58ch}
.kicker{font-family:var(--f-mono);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary);display:inline-flex;align-items:center;gap:.7em;margin:0 0 1.4rem}
.kicker::before{content:"";width:22px;height:1px;background:var(--accent)}
.accent{color:var(--accent)}
.muted{color:var(--text-secondary)}
.mono{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}

/* Layout */
.wrap{width:min(var(--max),100% - 2*var(--gutter));margin-inline:auto}
.sec{position:relative;padding:clamp(80px,11vw,150px) 0}
.sec--tight{padding:clamp(56px,7vw,96px) 0}
.paper{background:var(--paper);color:var(--ink);color-scheme:light}
.paper .lede,.paper .muted{color:var(--ink-secondary)}
.paper .kicker{color:var(--ink-secondary)}
.panel-bg{background:var(--panel)}
.sec-head{display:grid;gap:1.2rem;margin-bottom:clamp(40px,6vw,72px)}
.sec-head--split{grid-template-columns:1fr;align-items:end}
@media(min-width:900px){.sec-head--split{grid-template-columns:1.15fr .85fr;gap:4rem}}
.sec-head h2{max-width:18ch}
.sec-head .lede{margin:0}
.grid{display:grid;gap:clamp(14px,1.6vw,22px)}
@media(min-width:760px){.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.g4{grid-template-columns:repeat(4,1fr)}}

/* Buttons */
.btn{--bg:var(--accent);--fg:#16171A;display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:52px;padding:0 1.5em;border-radius:999px;border:1px solid transparent;background:var(--bg);color:var(--fg);font-weight:600;font-size:1rem;text-decoration:none;cursor:pointer;position:relative;isolation:isolate;overflow:hidden;transition:transform .45s var(--ease-out),background-color .3s var(--ease-out),border-color .3s var(--ease-out),color .3s var(--ease-out);text-shadow:none;white-space:nowrap}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.35),transparent 60%);opacity:0;transition:opacity .35s var(--ease-out)}
.btn:hover{background:var(--accent-hover);transform:translateY(-2px)}
.btn:hover::after{opacity:1}
.btn:active{transform:translateY(0) scale(.98)}
.btn .arr{transition:transform .45s var(--ease-out)}
.btn:hover .arr{transform:translateX(4px)}
.btn--ghost{--bg:transparent;--fg:var(--text-primary);border-color:var(--line-strong)}
.btn--ghost:hover{background:rgba(243,241,236,.08);border-color:var(--text-primary)}
.paper .btn--ghost{--fg:var(--ink);border-color:var(--ink-line-strong)}
.paper .btn--ghost:hover{background:rgba(22,23,26,.06);border-color:var(--ink)}
.btn--dark{--bg:var(--ink);--fg:var(--paper)}
.btn--dark:hover{background:#2A2C31}
.btn--sm{min-height:42px;padding:0 1.1em;font-size:.92rem}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.tlink{display:inline-flex;align-items:center;gap:.45em;font-weight:600;text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:2px;transition:gap .4s var(--ease-out),color .3s}
.tlink:hover{gap:.8em;color:var(--accent)}
.paper .tlink:hover{color:var(--accent-ink)}
@media(pointer:coarse){.btn{min-height:48px}.tlink{min-height:44px}}

/* Header */
.hdr{position:fixed;inset:0 0 auto;z-index:100;transition:background-color .5s var(--ease-out),border-color .5s var(--ease-out),transform .5s var(--ease-out);border-bottom:1px solid transparent}
.hdr.solid{background:rgba(20,21,24,.82);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-color:rgba(90,94,103,.35)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:76px}
.logo{display:inline-flex;align-items:center;text-decoration:none;flex:none}
.logo img{height:22px;width:auto}
@media(max-width:600px){.logo img{height:19px}}
.nav{display:none}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:4px;align-items:center}
.nav a,.nav button{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:999px;border:0;background:none;font-size:.95rem;font-weight:500;color:var(--text-primary);text-decoration:none;cursor:pointer;transition:background-color .3s var(--ease-out)}
.nav a:hover,.nav button:hover,.nav [aria-expanded=true]{background:rgba(243,241,236,.08)}
.nav a[aria-current=page]{color:var(--accent)}
.nav .chev{width:10px;height:10px;transition:transform .35s var(--ease-out)}
.nav [aria-expanded=true] .chev{transform:rotate(180deg)}
.dd{position:relative}
.dd-menu{position:absolute;top:calc(100% + 10px);left:-10px;min-width:300px;padding:10px;border-radius:var(--r);background:rgba(28,30,34,.97);backdrop-filter:blur(14px);border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.45);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .3s var(--ease-out),transform .35s var(--ease-out),visibility 0s .35s}
.dd.open .dd-menu{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.dd-menu a{display:flex;flex-direction:column;align-items:flex-start;height:auto;padding:10px 14px;border-radius:12px;gap:2px}
.dd-menu a small{font-size:.8rem;color:var(--text-secondary);font-weight:400}
.dd-menu a.hl{background:rgba(255,91,31,.08)}
.dd-menu hr{border:0;border-top:1px solid var(--line);margin:6px 8px}
.hdr-cta{display:none}
.burger{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:999px;border:1px solid var(--line-strong);background:rgba(20,21,24,.5);cursor:pointer}
.burger span{position:relative;width:18px;height:2px;background:var(--text-primary);border-radius:2px;transition:background-color .3s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--text-primary);border-radius:2px;transition:transform .45s var(--ease-out)}
.burger span::before{transform:translateY(-6px)}.burger span::after{transform:translateY(6px)}
.menu-open .burger span{background:transparent}
.menu-open .burger span::before{transform:rotate(45deg)}.menu-open .burger span::after{transform:rotate(-45deg)}
@media(min-width:1080px){.nav{display:block}.hdr-cta{display:inline-flex}.burger{display:none}}
.mnav{position:fixed;inset:0;z-index:99;background:var(--canvas);padding:100px var(--gutter) 40px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .4s var(--ease-out),visibility 0s .4s}
.menu-open .mnav{opacity:1;visibility:visible;transition-delay:0s}
.mnav ul{list-style:none;margin:0;padding:0}
.mnav>ul>li{border-bottom:1px solid var(--line)}
.mnav a{display:flex;align-items:center;min-height:52px;text-decoration:none;font-family:var(--f-display);font-size:1.5rem;font-weight:600;letter-spacing:-.02em}
.mnav .sub a{font-family:var(--f-body);font-size:1rem;font-weight:500;min-height:44px;color:var(--text-secondary);padding-left:4px}
.mnav .sub{padding-bottom:10px}
.mnav .btn{margin-top:28px;width:100%}
.menu-open{overflow:hidden}

/* Schnittmarken (Signatur) */
[data-marks]{position:relative}
.marks{position:absolute;inset:-12px;pointer-events:none;z-index:2}
.marks svg{width:100%;height:100%;overflow:visible}
.marks path{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-dasharray:40;stroke-dashoffset:40;transition:stroke-dashoffset 1.1s var(--ease-out)}
.marks path:nth-child(2){transition-delay:.12s}.marks path:nth-child(3){transition-delay:.24s}.marks path:nth-child(4){transition-delay:.36s}
.in .marks path,.marks.in path{stroke-dashoffset:0}

/* Entrances */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease-out),transform 1.1s var(--ease-out)}
.js .rv.in{opacity:1;transform:none}
.js .stg>*{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease-out),transform 1s var(--ease-out),background-color .35s var(--ease-out),border-color .35s var(--ease-out),box-shadow .45s var(--ease-out)}
.js .stg.in>*{opacity:1;transform:none}
.stg.in>*:nth-child(2){transition-delay:.09s,.09s,0s,0s,0s}.stg.in>*:nth-child(3){transition-delay:.18s,.18s,0s,0s,0s}.stg.in>*:nth-child(4){transition-delay:.27s,.27s,0s,0s,0s}.stg.in>*:nth-child(5){transition-delay:.36s,.36s,0s,0s,0s}.stg.in>*:nth-child(6){transition-delay:.45s,.45s,0s,0s,0s}.stg.in>*:nth-child(n+7){transition-delay:.5s,.5s,0s,0s,0s}
.stg.done>*,.stg.done>*:nth-child(n){transition-delay:0s!important}

/* Karten */
.card{position:relative;border-radius:var(--r);padding:clamp(22px,2.4vw,32px);background:var(--panel);border:1px solid var(--line);overflow:hidden}
.card h3{margin:0 0 .6rem}
.card p{color:var(--text-secondary);margin:0}
.paper .card{background:#FBFAF7;border-color:var(--ink-line)}
.paper .card p{color:var(--ink-secondary)}
.card--hover:hover{border-color:var(--line-strong);transform:translateY(-4px)}
.paper .card--hover:hover{border-color:var(--ink-line-strong);box-shadow:0 18px 40px rgba(22,23,26,.08)}
.card .num{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.14em;color:var(--accent);margin-bottom:1.6rem;display:block}
.paper .card .num{color:var(--accent-ink)}
.ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--accent-muted);color:var(--accent);margin-bottom:1.4rem}
.ico svg{width:22px;height:22px}
.paper .ico{background:rgba(255,91,31,.12);color:var(--accent-ink)}
.card-link{position:absolute;inset:0;z-index:3;border-radius:inherit}
.card .more{margin-top:1.4rem;display:inline-flex;gap:.4em;align-items:center;font-weight:600;font-size:.95rem;color:var(--text-primary)}
.paper .card .more{color:var(--ink)}
.card .more .arr{transition:transform .45s var(--ease-out)}
.card:hover .more .arr{transform:translateX(5px)}

/* Listen mit Haken */
.checks{list-style:none;padding:0;margin:0;display:grid;gap:.7rem}
.checks li{display:grid;grid-template-columns:22px 1fr;gap:.75rem;align-items:baseline}
.checks li::before{content:"";width:14px;height:8px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:translateY(-3px) rotate(-45deg)}
.paper .checks li::before{border-color:var(--accent-ink)}

/* Fairness-Leiste */
.trust{border-block:1px solid var(--line);background:rgba(28,30,34,.6)}
.trust ul{list-style:none;margin:0;padding:18px 0;display:flex;flex-wrap:wrap;gap:10px 34px;justify-content:center}
.trust li{display:flex;align-items:center;gap:10px;font-size:.95rem;color:var(--text-secondary);font-weight:500}
.trust li b{color:var(--text-primary);font-weight:600}
.trust li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-muted)}

/* Seiten-Hero (Unterseiten) */
.phero{position:relative;padding:clamp(140px,18vw,220px) 0 clamp(64px,8vw,110px);overflow:hidden}
.phero::after{content:"";position:absolute;right:-10%;top:-20%;width:70vmax;height:70vmax;background:radial-gradient(closest-side,rgba(255,91,31,.16),transparent 70%);pointer-events:none;z-index:-1}
.phero h1{max-width:17ch;margin-bottom:1.6rem;font-size:clamp(2.3rem,5.2vw,4.7rem)}
.phero .lede{margin-bottom:2.2rem}
.crumbs{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:1.6rem}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--accent)}
.phero-grid{display:grid;gap:48px;align-items:center}
@media(min-width:1000px){.phero-grid{grid-template-columns:1.1fr .9fr}}

/* Browser-Mockup */
.mock{position:relative;border-radius:14px;background:#0F1013;border:1px solid var(--line);box-shadow:0 40px 90px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.02) inset;overflow:hidden}
.mock-bar{display:flex;align-items:center;gap:7px;height:34px;padding:0 14px;background:#1A1C20;border-bottom:1px solid var(--line)}
.mock-bar i{width:9px;height:9px;border-radius:50%;background:#3A3D44}
.mock-bar span{margin-left:12px;flex:1;max-width:260px;height:18px;border-radius:6px;background:#26292E;font-family:var(--f-mono);font-size:.62rem;color:#8A8D94;display:flex;align-items:center;padding:0 8px;letter-spacing:.04em}
.phone{position:absolute;width:31%;aspect-ratio:9/19;border-radius:26px;background:#0F1013;border:5px solid #2A2C31;box-shadow:0 30px 60px rgba(0,0,0,.55);overflow:hidden}

/* Demo-Website (Nachher) */
.demo-new{background:#F4F1EA;color:#1D2A24;font-family:var(--f-body);aspect-ratio:16/10;position:relative;overflow:hidden}
.demo-new .dn-nav{display:flex;justify-content:space-between;align-items:center;padding:3.2% 5%;font-size:clamp(7px,.85vw,11px);font-weight:600}
.demo-new .dn-nav b{font-family:var(--f-display);font-size:1.3em;letter-spacing:-.02em}
.demo-new .dn-nav span{display:flex;gap:1.6em;opacity:.75}
.demo-new .dn-nav em{font-style:normal;background:#1D3A2F;color:#F4F1EA;padding:.5em 1.1em;border-radius:99px;opacity:1}
.demo-new .dn-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:5%;padding:2% 5% 0;align-items:center}
.demo-new h4{font-family:var(--f-display);font-size:clamp(14px,2.5vw,34px);line-height:1;letter-spacing:-.03em;margin:0 0 .5em;color:#1D3A2F}
.demo-new p{font-size:clamp(6px,.8vw,11px);line-height:1.5;margin:0 0 1.4em;opacity:.7;max-width:34ch}
.demo-new .dn-btn{display:inline-block;font-size:clamp(6px,.75vw,10px);font-weight:600;background:#C8662B;color:#fff;padding:.9em 1.6em;border-radius:99px}
.demo-new .dn-img{aspect-ratio:4/5;border-radius:10px;background:linear-gradient(160deg,#9C7650 0%,#6E5236 55%,#3F2F20 100%);position:relative;overflow:hidden}
.demo-new .dn-img::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(100deg,rgba(255,255,255,.07) 0 2px,transparent 2px 14px),radial-gradient(circle at 30% 25%,rgba(255,230,190,.45),transparent 55%)}
.demo-new .dn-stats{display:flex;gap:6%;margin-top:4%;font-size:clamp(6px,.7vw,10px)}
.demo-new .dn-stats div b{display:block;font-family:var(--f-display);font-size:1.8em;color:#1D3A2F}

/* Vorher-Nachher-Regler */
.ba{position:relative;max-width:1080px;margin-inline:auto;border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:0 40px 90px rgba(0,0,0,.45);user-select:none;touch-action:pan-y}
.ba-after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--pos,50%));transition:clip-path .08s linear}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;margin-left:-1px;background:var(--accent);pointer-events:none;z-index:3}
.ba-handle::after{content:"";position:absolute;top:50%;left:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 8px rgba(255,91,31,.22),0 10px 30px rgba(0,0,0,.4);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316171A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E");background-size:24px;background-position:center;background-repeat:no-repeat;animation:pulse 4s var(--ease-io) -1.2s infinite}
.ba.touched .ba-handle::after{animation:none}
@keyframes pulse{0%,100%{box-shadow:0 0 0 8px rgba(255,91,31,.22),0 10px 30px rgba(0,0,0,.4)}50%{box-shadow:0 0 0 16px rgba(255,91,31,.06),0 10px 30px rgba(0,0,0,.4)}}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:4;margin:0}
.ba-tag{position:absolute;bottom:14px;z-index:2;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;padding:6px 10px;border-radius:8px;background:rgba(8,8,15,.7);color:#F3F1EC;backdrop-filter:blur(8px)}
.ba-tag.l{left:14px}.ba-tag.r{right:14px;background:var(--accent);color:#16171A}
.ba-note{max-width:1080px;margin:14px auto 0;font-size:.85rem;color:var(--text-secondary);position:relative;padding-left:1.1em}
.ba-note::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
/* Demo alt */
.demo-old{aspect-ratio:16/10;background:#E8E8E8;font-family:Georgia,"Times New Roman",serif;color:#333;position:relative;overflow:hidden}
.demo-old .do-top{background:linear-gradient(#6B8FB5,#3E6189);color:#fff;padding:2.2% 3%;display:flex;justify-content:space-between;align-items:center;font-size:clamp(8px,1.1vw,15px);font-weight:700;border-bottom:3px solid #F2C14E}
.demo-old .do-top small{font-size:.6em;font-weight:400;font-family:Arial,sans-serif}
.demo-old .do-menu{background:#2C4766;display:flex;gap:2px;padding:0 3%}
.demo-old .do-menu span{background:linear-gradient(#5579A0,#3A5878);color:#fff;font-family:Arial,sans-serif;font-size:clamp(5px,.65vw,9px);padding:.6em 1.1em;border:1px solid #6D90B8}
.demo-old .do-body{display:grid;grid-template-columns:1fr 2.2fr;gap:2%;padding:2% 3%}
.demo-old .do-side{background:#fff;border:1px solid #BBB;padding:6%;font-family:Arial,sans-serif;font-size:clamp(5px,.6vw,9px);line-height:1.6;color:#0645AD;text-decoration:underline}
.demo-old .do-main{background:#fff;border:1px solid #BBB;padding:3%}
.demo-old .do-main b{display:block;font-size:clamp(9px,1.2vw,17px);color:#8B0000;margin-bottom:.4em;text-align:center}
.demo-old .do-main p{font-size:clamp(5px,.6vw,9px);line-height:1.45;margin:0 0 .6em;font-family:"Times New Roman",serif}
.demo-old .do-img{float:right;width:34%;aspect-ratio:4/3;margin:0 0 4% 4%;background:repeating-linear-gradient(45deg,#ccc 0 6px,#bbb 6px 12px);border:2px ridge #999;display:grid;place-items:center;font-family:Arial,sans-serif;font-size:clamp(5px,.55vw,8px);color:#666}
.demo-old .do-marq{background:#FFFF99;border:1px dashed #C00;color:#C00;font-family:"Comic Sans MS",Arial,sans-serif;font-size:clamp(5px,.65vw,9px);text-align:center;padding:.5em;margin:0 3%}
.demo-old .do-count{position:absolute;bottom:3%;right:3%;font-family:"Courier New",monospace;background:#000;color:#0F0;font-size:clamp(5px,.6vw,9px);padding:.3em .6em}

/* Leistungen */
.svc-feature{display:grid;gap:clamp(14px,1.6vw,22px)}
@media(min-width:900px){.svc-feature{grid-template-columns:1.4fr 1fr}}
.svc-big{min-height:340px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(160deg,#22252A,#18191D);transition:transform .6s var(--ease-out),border-color .4s}
.svc-big .ico{margin-bottom:auto}
.svc-big h3{font-size:clamp(1.5rem,2.2vw,2rem)}
.svc-big .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:1.2rem}
.tag{font-size:.78rem;padding:5px 10px;border-radius:999px;border:1px solid var(--line-strong);color:var(--text-secondary)}
.paper .tag{border-color:var(--ink-line);color:var(--ink-secondary)}
.svc-big--a::before{content:"";position:absolute;right:-80px;top:-80px;width:320px;height:320px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,91,31,.25),transparent);transition:transform 1.2s var(--ease-out)}
.svc-big--a:hover::before{transform:scale(1.2) translate(-20px,20px)}
.svc-small{transition:transform .6s var(--ease-out),border-color .4s}

/* Pakete */
.pkg{display:flex;flex-direction:column;gap:1rem;padding:clamp(28px,3vw,44px)}
.pkg .pkg-for{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink)}
.pkg h3{font-size:clamp(1.7rem,2.6vw,2.4rem)}
.pkg .checks{margin:.4rem 0 1rem}
.pkg .btn-row{margin-top:auto}
.pkg--dark{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.paper .pkg--dark p,.pkg--dark p{color:#B9BBC0}
.pkg--dark .pkg-for{color:var(--accent)}
.pkg--dark .checks li::before{border-color:var(--accent)}

/* Projekte */
.proj{display:grid;gap:22px}
.proj-card{display:grid;gap:18px;text-decoration:none}
.proj-media{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:16/10;background:var(--panel-2);border:1px solid var(--line)}
.proj-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.proj-card:hover .proj-media img{transform:scale(1.04)}
.proj-meta{display:flex;justify-content:space-between;gap:16px;align-items:baseline;flex-wrap:wrap}
.proj-meta h3{font-size:1.35rem}
.proj-meta span{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary)}
.label-concept{position:absolute;top:14px;left:14px;z-index:2;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;padding:6px 10px;border-radius:8px;background:rgba(8,8,15,.75);color:#F3F1EC}
.proj-empty{border:1px dashed var(--line-strong);border-radius:var(--r);padding:clamp(28px,4vw,48px);display:grid;gap:1rem}
.ig-proof{display:grid;gap:28px;align-items:center}
@media(min-width:900px){.ig-proof{grid-template-columns:.8fr 1.2fr}}
.ig-proof img{border-radius:var(--r);width:100%;max-width:420px;margin-inline:auto}

/* Ablauf */
.steps{position:relative;display:grid;gap:0}
.step{position:relative;display:grid;grid-template-columns:64px 1fr;gap:20px;padding:0 0 46px}
@media(min-width:900px){.step{grid-template-columns:120px 1fr 1fr;gap:40px;padding-bottom:64px}}
.step-n{font-family:var(--f-display);font-size:clamp(1.8rem,3vw,2.6rem);font-weight:700;color:var(--accent);line-height:1;position:relative;z-index:1;background:var(--canvas);padding-bottom:10px}
.paper .step-n{color:var(--accent-ink);background:var(--paper)}
.step h3{font-size:clamp(1.3rem,2vw,1.75rem);margin-bottom:.4rem}
.step p{color:var(--text-secondary);margin:0}
.paper .step p{color:var(--ink-secondary)}
.steps-line{position:absolute;left:20px;top:46px;bottom:60px;width:2px}
@media(min-width:900px){.steps-line{left:30px}}
.steps-line svg{width:2px;height:100%;overflow:visible}
.steps-line line{stroke:var(--accent);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--draw,0))}
.steps-line .bg{stroke:var(--line);stroke-dasharray:none}
.paper .steps-line .bg{stroke:var(--ink-line)}

/* Preise */
.prices{display:grid;gap:14px}
@media(min-width:760px){.prices{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.prices{grid-template-columns:repeat(3,1fr)}}
.price{display:flex;flex-direction:column;gap:.6rem}
.price .amt{font-family:var(--f-display);font-size:clamp(2rem,3vw,2.6rem);font-weight:700;letter-spacing:-.03em;line-height:1;margin:.6rem 0}
.price .amt small{font-family:var(--f-body);font-size:.95rem;font-weight:500;color:var(--text-secondary);letter-spacing:0;margin-right:.3em}
.paper .price .amt small{color:var(--ink-secondary)}
.price .checks{margin-top:.6rem;font-size:.95rem}
.price--hl{border-color:var(--accent)!important}
.price-note{margin-top:22px;font-size:.9rem;color:var(--text-secondary)}
.paper .price-note{color:var(--ink-secondary)}

/* Person */
.person{display:grid;gap:40px;align-items:center}
@media(min-width:900px){.person{grid-template-columns:.9fr 1.1fr;gap:80px}}
.person-mark{aspect-ratio:1;border-radius:var(--r);background:radial-gradient(circle at 50% 60%,rgba(255,91,31,.22),transparent 62%),var(--panel);border:1px solid var(--line);display:grid;place-items:center;position:relative;overflow:hidden}
.person-mark img{width:62%;opacity:.95}
.person-mark .facts{position:absolute;left:20px;right:20px;bottom:20px;display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:.8rem;padding:7px 12px;border-radius:10px;background:rgba(8,8,15,.55);border:1px solid rgba(96,96,126,.3);backdrop-filter:blur(10px)}
.sig{font-family:var(--f-display);font-size:1.4rem;font-weight:600;margin-top:1.6rem}
.sig small{display:block;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary);font-weight:500;margin-top:.3rem}

/* FAQ */
.faq{display:grid;gap:0;border-top:1px solid var(--line)}
.paper .faq{border-color:var(--ink-line)}
.faq details{border-bottom:1px solid var(--line)}
.paper .faq details{border-color:var(--ink-line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;font-family:var(--f-display);font-size:clamp(1.08rem,1.4vw,1.3rem);font-weight:600;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(currentColor,currentColor) center/14px 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 14px no-repeat;transition:transform .45s var(--ease-out);color:var(--accent)}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq .a{overflow:hidden}
.faq .a p{color:var(--text-secondary);max-width:70ch;padding-bottom:24px;margin:0}
.paper .faq .a p{color:var(--ink-secondary)}

/* Abschluss-CTA */
.final{position:relative;overflow:hidden;text-align:center;padding:clamp(100px,14vw,190px) 0}
.final::before{content:"";position:absolute;left:50%;top:60%;width:110vmax;height:60vmax;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(255,91,31,.24),rgba(255,91,31,.05) 55%,transparent 75%);animation:breathe 9s var(--ease-io) -3s infinite;pointer-events:none}
@keyframes breathe{0%,100%{opacity:.75;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}
.final h2{max-width:15ch;margin:0 auto 1.4rem;position:relative}
.final .lede{margin:0 auto 2.4rem;position:relative}
.final .btn-row{justify-content:center;position:relative}

/* Formular */
.form{display:grid;gap:18px}
.f-row{display:grid;gap:18px}
@media(min-width:700px){.f-row{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:8px}
.field label,.field legend{font-size:.9rem;font-weight:600}
.field label .opt{font-weight:400;color:var(--text-secondary)}
.paper .field label .opt{color:var(--ink-secondary)}
.inp{width:100%;min-height:54px;padding:14px 16px;border-radius:var(--r-sm);border:1px solid var(--line-strong);background:rgba(20,21,24,.6);color:var(--text-primary);transition:border-color .3s var(--ease-out),box-shadow .3s var(--ease-out)}
textarea.inp{min-height:150px;resize:vertical}
.inp:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-muted)}
.paper .inp{background:#FBFAF7;border-color:var(--ink-line-strong);color:var(--ink)}
.inp::placeholder{color:#7D8088}
select.inp{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF5B1F' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px;padding-right:44px}
.pills{display:flex;flex-wrap:wrap;gap:8px;border:0;padding:0;margin:0}
.pills legend{margin-bottom:10px}
.pill{position:relative}
.pill input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.pill span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line-strong);font-size:.92rem;font-weight:500;transition:background-color .3s var(--ease-out),border-color .3s var(--ease-out),color .3s}
.pill input:checked+span{background:var(--accent);border-color:var(--accent);color:#16171A}
.pill input:focus-visible+span{outline:2px solid var(--accent);outline-offset:3px}
.paper .pill span{border-color:var(--ink-line-strong)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{display:grid;grid-template-columns:22px 1fr;gap:12px;font-size:.88rem;color:var(--text-secondary);align-items:start}
.paper .consent{color:var(--ink-secondary)}
.consent input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--accent)}
.form-msg{font-size:.92rem;min-height:1.4em}
.form-msg.err{color:#FF8A63}
.paper .form-msg.err{color:#B3360A}
.form-box{border-radius:calc(var(--r) + 6px);padding:clamp(24px,4vw,52px);background:var(--panel);border:1px solid var(--line)}
.paper .form-box{background:#FBFAF7;border-color:var(--ink-line)}
.form .btn{justify-self:start}
@media(max-width:520px){.form .btn{justify-self:stretch;width:100%}}

/* Kontakt-Grid */
.contact{display:grid;gap:40px}
@media(min-width:1000px){.contact{grid-template-columns:.8fr 1.2fr;gap:70px}}
.cinfo{display:grid;gap:14px;align-content:start}
.cinfo a{display:flex;gap:14px;align-items:center;text-decoration:none;padding:16px 18px;border-radius:var(--r-sm);border:1px solid var(--line);transition:border-color .3s,background-color .3s}
.cinfo a:hover{border-color:var(--accent);background:rgba(255,91,31,.05)}
.cinfo small{display:block;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}

/* Footer */
.ftr{border-top:1px solid var(--line);padding:72px 0 32px;background:#101114}
.ftr-grid{display:grid;gap:40px}
@media(min-width:900px){.ftr-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.ftr h3{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary);font-weight:500;margin-bottom:1rem}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.ftr a{text-decoration:none;color:var(--text-primary);display:inline-flex;min-height:34px;align-items:center;transition:color .3s}
.ftr a:hover{color:var(--accent)}
.ftr-brand p{color:var(--text-secondary);max-width:34ch;margin-top:1.2rem}
.ftr-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:56px;padding-top:24px;border-top:1px solid var(--line);font-size:.85rem;color:var(--text-secondary)}

/* Prosa (Rechtliches, Details) */
.prose{max-width:72ch}
.prose h2{font-size:clamp(1.4rem,2vw,1.8rem);margin:2.6rem 0 1rem}
.prose h3{font-size:1.15rem;margin:1.8rem 0 .6rem}
.prose p,.prose li{color:var(--text-secondary)}
.prose a{color:var(--text-primary)}
.split{display:grid;gap:40px;align-items:start}
@media(min-width:960px){.split{grid-template-columns:1fr 1fr;gap:80px}.split--wide{grid-template-columns:1.2fr .8fr}}
.sticky{position:sticky;top:110px}

/* Landingpage */
.lp-hdr .nav,.lp-hdr .burger{display:none!important}
.lp-hdr .hdr-cta{display:inline-flex}

/* Danke */
.thanks{min-height:80vh;display:grid;place-items:center;text-align:center;padding:160px 0 80px}

/* Pausen */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .rv,.stg>*{opacity:1!important;transform:none!important}
  .marks path{stroke-dashoffset:0!important}
  .steps-line line{stroke-dashoffset:0!important}
}
@media(max-height:560px){.marks{display:none}}

/* ===== Startseite: Motion-Hero "Viele Teile, ein Auftritt" ===== */
.hx{position:relative;height:260vh}
.hx-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center}
.hx-grid{display:grid;gap:0;align-items:center;padding-top:76px}
@media(min-width:1000px){.hx-grid{grid-template-columns:1fr 1fr;gap:3vw}}
.hx-h1{margin-bottom:1.5rem}
.rot{display:grid;color:var(--accent);padding-bottom:.12em;margin-bottom:-.12em;overflow:hidden}
.rot-w{grid-area:1/1;transform:translateY(105%);opacity:0;transition:transform .8s var(--ease-out),opacity .5s var(--ease-out)}
.rot-w.on{transform:none;opacity:1}
.rot-w.out{transform:translateY(-105%);opacity:0}
.hx-lede{margin-bottom:2rem}
.hx-side{position:relative}
.hx-stage{position:relative;height:min(58vh,560px);perspective:1800px;perspective-origin:50% 30%}
.hx-glow{position:absolute;left:50%;top:58%;width:80%;aspect-ratio:1.6;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(255,91,31,.42),rgba(255,91,31,.08) 55%,transparent 75%);opacity:calc(.25 + .75*var(--p,0));filter:blur(6px);pointer-events:none}
.hx-iso{position:absolute;left:50%;top:60%;width:24em;height:15em;margin:-7.5em 0 0 -12em;font-size:clamp(9px,1.1vw,16px);transform-style:preserve-3d;transform:rotateX(50deg) rotateZ(-32deg)}
.lyr{position:absolute;inset:0;transform-style:preserve-3d}
.lyr-float{position:absolute;inset:0;transform-style:preserve-3d;animation:bob 7s var(--ease-io) infinite}
.lyr[data-i="1"] .lyr-float{animation-delay:-1.4s}.lyr[data-i="2"] .lyr-float{animation-delay:-2.8s}.lyr[data-i="3"] .lyr-float{animation-delay:-4.2s}.lyr[data-i="4"] .lyr-float{animation-delay:-5.6s}
@keyframes bob{0%,100%{transform:translateZ(0)}50%{transform:translateZ(calc(var(--amp,1)*.9em))}}
.lyr-in{position:absolute;inset:0;border-radius:1em;overflow:hidden;border:1px solid rgba(255,255,255,.1);box-shadow:0 .2em .6em rgba(0,0,0,.25),-1.4em 1.8em 3em rgba(0,0,0,.45);transition:box-shadow .5s var(--ease-out),border-color .5s var(--ease-out)}
.lyr.hl .lyr-in{border-color:var(--accent);box-shadow:0 0 0 .14em var(--accent),-1.4em 1.8em 3em rgba(0,0,0,.45),0 0 3em rgba(255,91,31,.35)}
.lyr-tag{position:absolute;left:.9em;bottom:.8em;display:inline-flex;gap:.6em;align-items:center;font-family:var(--f-mono);font-size:.82em;letter-spacing:.08em;text-transform:uppercase;padding:.45em .8em;border-radius:.5em;background:rgba(10,10,14,.78);color:#F3F1EC;transition:background-color .4s var(--ease-out),color .4s var(--ease-out)}
.lyr-tag b{color:var(--accent);font-weight:500}
.lyr.hl .lyr-tag{background:var(--accent);color:#16171A}.lyr.hl .lyr-tag b{color:#16171A}
/* Ebene 1: Logo */
.ly-logo{position:absolute;inset:0;background:#1A1C20;display:grid;place-items:center}
.ly-logo svg{width:9em;height:9em}
.ly-logo .g{fill:none;stroke:rgba(243,241,236,.14);stroke-width:.6}
.ly-logo .m{fill:none;stroke:var(--accent);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.ly-logo span{position:absolute;right:1em;top:1em;font-family:var(--f-mono);font-size:.62em;letter-spacing:.1em;color:#8A8D94;text-transform:uppercase}
/* Ebene 2: Farben & Schrift */
.ly-brand{position:absolute;inset:0;background:#F4F1EA;color:#1D3A2F;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:1.6em 1.6em 3em}
.ly-brand .sw{display:grid;grid-template-columns:1fr 1fr;gap:.5em}
.ly-brand .sw i{aspect-ratio:1;border-radius:.5em;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.ly-brand .aa{display:grid;justify-items:center}
.ly-brand .aa b{font-family:var(--f-display);font-size:5em;line-height:.9;letter-spacing:-.04em}
.ly-brand .aa span{font-family:var(--f-mono);font-size:.62em;text-align:center;letter-spacing:.06em;opacity:.6;margin-top:.4em}
/* Ebene 3: Print */
.ly-print{position:absolute;inset:0;background:#2A2D33;display:flex;align-items:center;justify-content:center;gap:1.4em}
.ly-print .card1{width:9.5em;aspect-ratio:85/55;border-radius:.4em;background:#1D3A2F;color:#F4F1EA;padding:.9em;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:0 .6em 1.4em rgba(0,0,0,.35);transform:rotate(-6deg)}
.ly-print .card1 b{font-family:var(--f-display);font-size:.95em}
.ly-print .card1 span{font-size:.6em;opacity:.7}
.ly-print .flyer{width:7em;aspect-ratio:1/1.414;border-radius:.3em;background:#F4F1EA;padding:.6em;display:flex;flex-direction:column;gap:.35em;box-shadow:0 .6em 1.4em rgba(0,0,0,.35);transform:rotate(5deg)}
.ly-print .flyer i{flex:1;border-radius:.2em;background:linear-gradient(160deg,#9C7650,#4F3A27)}
.ly-print .flyer b{font-family:var(--f-display);font-size:.72em;color:#1D3A2F;line-height:1}
.ly-print .flyer span{height:.28em;border-radius:1em;background:#C9C3B6}
.ly-print .flyer span+span{width:60%}
/* Ebene 4: Social Media */
.ly-social{position:absolute;inset:0;background:#111215;padding:1.1em 1.4em 3em;display:grid;grid-template-columns:auto 1fr;gap:1.2em;align-items:start}
.ly-social .pf{display:grid;justify-items:center;gap:.5em}
.ly-social .pf i{width:3.4em;height:3.4em;border-radius:50%;background:conic-gradient(var(--accent),#FFB37A,var(--accent));padding:.18em;box-sizing:border-box;position:relative}
.ly-social .pf i::after{content:"";position:absolute;inset:.22em;border-radius:50%;background:#1D3A2F}
.ly-social .pf span{width:3em;height:.3em;border-radius:1em;background:#3A3D44}
.ly-social .gr{display:grid;grid-template-columns:repeat(3,1fr);gap:.3em}
.ly-social .gr i{aspect-ratio:1;border-radius:.25em}
.ly-social .t0{background:#1D3A2F}.ly-social .t1{background:#C8662B}.ly-social .t2{background:#E9E3D6}.ly-social .t3{background:linear-gradient(160deg,#9C7650,#4F3A27)}
/* Ebene 5: Website */
.ly-web{position:absolute;inset:0;background:#F4F1EA;color:#1D3A2F}
.ly-web .bar{display:flex;align-items:center;gap:.35em;height:1.7em;padding:0 .8em;background:#E4DFD4}
.ly-web .bar i{width:.5em;height:.5em;border-radius:50%;background:#C2BBAD}
.ly-web .bar span{margin-left:.6em;width:8em;height:.8em;border-radius:.3em;background:#F4F1EA}
.ly-web .hero{display:grid;grid-template-columns:1.2fr .8fr;gap:1em;padding:1.3em 1.4em}
.ly-web b{display:block;font-family:var(--f-display);font-size:1.32em;line-height:1.02;letter-spacing:-.03em}
.ly-web .p{display:block;height:.34em;border-radius:1em;background:#CFC8BA;margin-top:.8em;width:90%}
.ly-web .p.s{width:65%;margin-top:.4em}
.ly-web em{display:inline-block;margin-top:1em;font-style:normal;font-size:.62em;font-weight:600;background:#C8662B;color:#fff;padding:.7em 1.2em;border-radius:99px}
.ly-web .img{border-radius:.5em;background:linear-gradient(160deg,#9C7650,#6E5236 55%,#3F2F20);min-height:8.4em}
/* Liste */
.hx-list{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 10px;margin-top:4px}
.hx-list .mono{width:100%;text-align:center;font-size:.64rem;color:var(--text-secondary);margin:0 0 2px}
.hx-list ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.hx-list li{display:flex;align-items:center;gap:.5rem;font-size:.86rem;color:var(--text-secondary);padding:6px 12px 6px 8px;border-radius:999px;border:1px solid var(--line);background:rgba(20,21,24,.6);transition:color .5s var(--ease-out),border-color .5s var(--ease-out)}
.hx-list li i{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line-strong);position:relative;flex:none;transition:background-color .4s var(--ease-out),border-color .4s var(--ease-out)}
.hx-list li i::after{content:"";position:absolute;left:4px;top:4px;width:6px;height:3px;border-left:1.5px solid #16171A;border-bottom:1.5px solid #16171A;transform:rotate(-45deg) scale(0);transition:transform .4s var(--ease-out)}
.hx-list li.on{color:var(--text-primary);border-color:rgba(255,91,31,.45)}
.hx-list li.on i{background:var(--accent);border-color:var(--accent)}
.hx-list li.on i::after{transform:rotate(-45deg) scale(1)}
.hx-sum{width:100%;text-align:center;margin:6px 0 0;font-size:.95rem;color:var(--text-secondary);opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.hx-sum b{color:var(--accent);font-weight:600}
.hx.done .hx-sum{opacity:1;transform:none}
.hx-cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--f-mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-secondary);transition:opacity .5s var(--ease-out)}
.hx-cue span{width:1px;height:34px;background:linear-gradient(var(--accent),transparent);animation:cue 2.4s var(--ease-io) -.6s infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.hx.moved .hx-cue{opacity:0}
@media(max-width:999px){
  .hx{height:210vh}
  .hx-pin{align-items:flex-start}
  .hx-grid{padding-top:max(92px,11svh)}
  .hx-h1{font-size:clamp(2.1rem,8.4vw,3.6rem);margin-bottom:1rem}
  .hx-lede{font-size:1rem;margin-bottom:1.2rem}
  .hx-cta .btn--ghost{display:none}
  .hx-stage{height:44svh;margin-top:1svh}
  .hx-iso{font-size:clamp(7px,2.5vw,12px)}
  .hx-list{display:none}
  .hx-cue{bottom:12px}
}
@media(max-width:999px) and (max-height:760px){.hx-lede{display:none}.hx-stage{height:46svh}}
@media(min-width:1000px) and (max-height:760px){.hx-stage{height:52vh}.hx-list .mono{display:none}}
@media (prefers-reduced-motion:reduce){
  .hx{height:auto}.hx-pin{position:relative;height:auto;min-height:100svh;padding-bottom:40px}
  .lyr-float{animation:none}
}
.ki-grid{grid-template-columns:1fr}
@media(min-width:900px){.ki-grid{grid-template-columns:1.4fr auto}}
.demo-phone{aspect-ratio:auto;height:100%}
.demo-phone .dn-nav{padding:10% 8% 4%;font-size:clamp(6px,.7vw,9px)}
.demo-phone h4{font-size:clamp(11px,1.4vw,18px)}
.demo-phone p{font-size:clamp(5px,.55vw,8px)}

.demo-new.flip .dn-hero{grid-template-columns:.8fr 1.2fr}
.demo-new.flip .dn-img{order:-1;aspect-ratio:4/4.4}
.h-wd{font-size:clamp(2rem,3.3vw,3.2rem)}
@media(max-width:520px){.kicker{letter-spacing:.1em;font-size:.7rem}}

/* Seitenbild (flache Ebene) */
.pv{position:relative;aspect-ratio:24/15;border-radius:20px;transform:perspective(1600px) rotateY(-9deg) rotateX(5deg);box-shadow:-30px 40px 90px rgba(0,0,0,.5);transition:transform 1.2s var(--ease-out)}
.pv:hover{transform:perspective(1600px) rotateY(-4deg) rotateX(2deg)}
.pv-in{position:absolute;inset:0;border-radius:inherit;overflow:hidden;border:1px solid rgba(255,255,255,.1);font-size:clamp(11px,1.45vw,21px)}
@media(max-width:999px){.pv{transform:none;max-width:560px}.pv-in{font-size:clamp(10px,3.3vw,19px)}}
.pv-tag{position:absolute;left:18px;bottom:16px;font-size:.78rem;z-index:3}
.ly-video{position:absolute;inset:0;background:#111215;padding:1em;display:grid;grid-template-rows:1fr auto auto;gap:.5em}
.ly-video .scr{border-radius:.5em;background:linear-gradient(160deg,#2B3A33,#1D3A2F 50%,#C8662B 140%);position:relative}
.ly-video .scr i{position:absolute;left:50%;top:50%;width:2.4em;height:2.4em;margin:-1.2em;border-radius:50%;background:rgba(244,241,234,.9)}
.ly-video .scr i::after{content:"";position:absolute;left:.95em;top:.7em;border-left:.75em solid #1D3A2F;border-top:.5em solid transparent;border-bottom:.5em solid transparent}
.ly-video .scr span{position:absolute;right:.6em;bottom:.5em;font-family:var(--f-mono);font-size:.55em;color:#F4F1EA}
.ly-video .tl{display:flex;gap:.25em;height:1.1em}
.ly-video .tl i{border-radius:.25em;background:#2F5C4A}
.ly-video .tl2 i{background:#C8662B;opacity:.8}
.ly-video .ph{position:absolute;left:46%;top:auto;bottom:.8em;width:2px;height:3.2em;background:var(--accent)}
.ly-stream{position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,#2A1E3D,#121216 70%)}
.ly-stream .cam{position:absolute;right:1em;bottom:2.6em;width:7em;aspect-ratio:4/3;border-radius:.6em;border:.2em solid var(--accent);background:linear-gradient(160deg,#3A3D44,#1B1C20)}
.ly-stream .alert{position:absolute;left:1.2em;top:1.2em;padding:.7em 1em;border-radius:.6em;background:rgba(255,91,31,.95);color:#16171A;display:grid}
.ly-stream .alert b{font-family:var(--f-display);font-size:1em}
.ly-stream .alert span{font-size:.6em}
.ly-stream .bar{position:absolute;left:0;right:0;bottom:0;height:1.9em;display:flex;align-items:center;gap:.6em;padding:0 1em;background:rgba(0,0,0,.6);font-family:var(--f-mono);font-size:.62em;color:#F3F1EC}
.ly-stream .bar i{width:.7em;height:.7em;border-radius:50%;background:#FF3B3B}
.ly-stream .bar em{margin-left:auto;font-style:normal;opacity:.7}
.ly-ki{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;background:#1A1C20}
.ly-ki>div{position:relative;display:grid;place-items:center}
.ly-ki .px{background:#E9E6DF}
.ly-ki .px svg{width:52%;fill:#2A2D33;filter:blur(.4px)}
.ly-ki .vc svg{width:62%}
.ly-ki .vc .m{fill:none;stroke:var(--accent);stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.ly-ki .vc .n{fill:#1A1C20;stroke:#F3F1EC;stroke-width:1.2}
.ly-ki span{position:absolute;left:.8em;top:.8em;font-family:var(--f-mono);font-size:.55em;letter-spacing:.08em;text-transform:uppercase;padding:.35em .6em;border-radius:.4em;background:rgba(10,10,14,.75);color:#F3F1EC}

.phero-grid>*,.split>*,.hx-grid>*{min-width:0}
h1,h2{overflow-wrap:break-word}

/* Hero-Ebenen v2: großer Begriff + Icon */
.lyr-in{display:block;padding:1.5em 1.7em}
.lyr-ico{position:absolute;left:1.6em;top:1.5em;width:3.6em;height:3.6em;border-radius:1em;display:grid;place-items:center;background:rgba(255,91,31,.14);color:var(--accent)}
.lyr-ico svg{width:1.9em;height:1.9em}
.lyr-n{position:absolute;right:1.6em;top:1.7em;font-family:var(--f-mono);font-size:.95em;letter-spacing:.12em;opacity:.55}
.lyr-label{position:absolute;left:.68em;bottom:.5em;font-family:var(--f-display);font-weight:800;font-size:2.5em;line-height:1;letter-spacing:-.035em;white-space:nowrap}
.lyr--dark{background:#1C1E22;color:#F3F1EC}
.lyr--graphite{background:#2B2E34;color:#F3F1EC}
.lyr--light{background:#F3F1EC;color:#16171A;border-color:rgba(0,0,0,.08)!important}
.lyr--light .lyr-ico{background:rgba(255,91,31,.14);color:var(--accent-ink)}
.lyr--accent{background:var(--accent);color:#16171A}
.lyr--accent .lyr-ico{background:rgba(22,23,26,.14);color:#16171A}
.lyr.hl .lyr--accent{box-shadow:0 0 0 .14em #F3F1EC,-1.4em 1.8em 3em rgba(0,0,0,.45),0 0 3em rgba(255,91,31,.45)}
.hx-copy{position:relative;z-index:2}
@media(max-width:999px){.hx-stage{margin-top:4svh}}

/* Projektablauf v2: Zeitleiste */
.flow{list-style:none;margin:0;padding:0;display:grid;gap:0;position:relative;counter-reset:none}
.flow::before,.flow::after{content:"";position:absolute;background:var(--line)}

.paper .flow::before{background:var(--ink-line)}
.flow-step{position:relative;padding:0 0 34px 76px}
.flow-ico{position:absolute;left:0;top:0;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--panel);border:1px solid var(--line-strong);color:var(--text-secondary);z-index:1;transition:background-color .5s var(--ease-out),border-color .5s var(--ease-out),color .5s var(--ease-out)}
.paper .flow-ico{background:var(--paper);border-color:var(--ink-line-strong)}
.flow-ico svg{width:22px;height:22px}
.flow-n{display:block;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:4px 0 .5rem}
.paper .flow-n{color:var(--accent-ink)}
.flow-step h3{font-size:clamp(1.15rem,1.4vw,1.3rem);letter-spacing:-.015em;line-height:1.2;margin-bottom:.5rem}
.flow-step p{color:var(--text-secondary);margin:0;font-size:.98rem;max-width:36ch}
.paper .flow-step p{color:var(--ink-secondary)}
/* Handy: senkrecht */
.flow::before,.flow::after{left:25px;top:26px;bottom:60px;width:2px}


@media(min-width:900px){
  .flow{grid-template-columns:repeat(4,1fr);gap:28px}
  .flow::before,.flow::after{left:26px;right:calc(25% - 21px);top:25px;bottom:auto;width:auto;height:2px}


  .flow-step{padding:76px 0 0}
}







@media (prefers-reduced-motion:reduce){.flow::after{transform:none!important}.js .flow .flow-step{opacity:1;transform:none}}

/* Social-Proof */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.stats>div{padding:16px 16px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(28,30,34,.6)}
.stats b{display:block;font-family:var(--f-display);font-weight:800;font-size:clamp(1.5rem,2.6vw,2.2rem);letter-spacing:-.03em;line-height:1;color:var(--text-primary)}
.stats span{display:block;font-size:.82rem;color:var(--text-secondary);margin-top:.45rem;line-height:1.3}
.ig-proof img{max-width:480px}
.ig-hero{margin:0;position:relative;max-width:460px;justify-self:center}
.ig-hero img{width:100%;border-radius:var(--r);box-shadow:0 40px 90px rgba(0,0,0,.5)}
.ig-hero figcaption{position:absolute;left:16px;bottom:16px;right:16px;padding:12px 14px;border-radius:12px;background:rgba(20,21,24,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);font-size:.9rem;color:var(--text-secondary)}
.ig-hero figcaption b{color:var(--accent);font-family:var(--f-display);font-weight:800;font-size:1.1rem;margin-right:.3em}

@media(min-width:1000px){.hx-iso{top:52%}.hx-list{margin-top:3vh}}

.ig-proof img{height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 72%;width:100%}
@media(max-width:899px){.ig-proof img{aspect-ratio:1;object-position:50% 70%}.stats b{font-size:1.4rem}.stats>div{padding:12px}}

/* ===== Preise ===== */
.pr-track{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;outline:none}
.pr-card{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:24px;background:#fff;padding:clamp(26px,2.6vw,36px);transition:box-shadow .5s var(--ease-out),transform .6s var(--ease-out)}
.pr-card:hover{box-shadow:0 24px 50px rgba(14,15,18,.08);transform:translateY(-4px)}
.pr-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.pr-top h3{font-size:1.05rem;font-weight:700;letter-spacing:-.01em}
.pr-badge{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;padding:5px 9px;border-radius:999px;background:var(--accent);color:#16171A}
.pr-for{font-size:.9rem;color:var(--text-secondary);margin:.35rem 0 0}
.pr-amt{font-family:var(--f-display);font-weight:800;font-size:clamp(2.3rem,3.6vw,3rem);letter-spacing:-.04em;line-height:1;margin:1.3rem 0 .4rem}
.pr-amt small{font-family:var(--f-body);font-size:1rem;font-weight:500;letter-spacing:0;margin-right:.3em;color:var(--text-secondary)}
.pr-amt.sm{font-size:1.9rem;margin:0}
.pr-vat{font-size:.82rem;color:var(--text-secondary);margin:0 0 1.2rem}
.pr-h{font-weight:600;line-height:1.4;margin:0 0 1rem}
.pr-list{font-size:.96rem;gap:.55rem;margin-bottom:1.8rem}
.pr-list li::before{border-color:var(--accent)}
.pr-btn{margin-top:auto;width:100%}
.pr-card--hl{background:#0E0F12;border-color:#0E0F12;color:#F3F1EC}
.pr-card--hl .pr-for,.pr-card--hl .pr-vat,.pr-card--hl .pr-amt small{color:#A9ABB1}
.pr-card--hl .pr-list li{color:#E4E4E7}
.pr-card--hl::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(120% 60% at 100% 0%,rgba(255,91,31,.22),transparent 60%);pointer-events:none}
.pr-dots{display:none;justify-content:center;gap:8px;margin-top:16px}
.pr-dots i{width:7px;height:7px;border-radius:99px;background:var(--line-strong);transition:width .4s var(--ease-out),background-color .4s var(--ease-out)}
.pr-dots i.on{width:22px;background:var(--accent)}
.pr-web{margin-top:18px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px;padding:22px 26px;border:1px solid var(--line);border-radius:20px;background:#FAFAFB}
.pr-web b{display:block;font-family:var(--f-display);font-size:1.15rem}
.pr-web span{color:var(--text-secondary);font-size:.95rem}
.pr-web-r{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.pr-sum{background:#0E0F12;color:#F3F1EC;border-radius:24px;padding:clamp(24px,3vw,36px)}
.pr-sum .mono{color:#FF8A5C;margin-bottom:1rem}
.pr-sum dl{margin:0;display:grid}
.pr-sum dl div{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid #2A2C31}
.pr-sum dt{color:#C9CAD0}
.pr-sum dd{margin:0;font-family:var(--f-display);font-weight:800;letter-spacing:-.02em}
.pr-sum-note{font-size:.82rem;color:#8E9097;margin:14px 0 0}
@media(max-width:899px){
  .pr-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-inline:calc(-1*var(--gutter));padding:6px var(--gutter) 10px;scroll-padding-inline:var(--gutter);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .pr-track::-webkit-scrollbar{display:none}
  .pr-card{flex:0 0 86%;scroll-snap-align:start}
  .pr-card:hover{transform:none}
  .pr-dots{display:flex}
}

/* ===== Projektablauf: scroll-gesteuert ===== */
.flow::after{background:var(--accent)}
.flow::after{transform-origin:top;transform:scaleY(var(--fp,0))}
@media(min-width:900px){.flow::after{transform-origin:left;transform:scaleX(var(--fp,0))}}
.flow-ico{background:var(--panel);border-color:var(--line-strong);color:var(--text-secondary)}
.flow-step{transition:opacity .6s var(--ease-out),transform .7s var(--ease-out)}
.js .flow .flow-step{opacity:.35;transform:translateY(10px)}
.js .flow .flow-step.on{opacity:1;transform:none}
.flow-step.on .flow-ico{background:var(--accent);border-color:var(--accent);color:#16171A;box-shadow:0 0 0 7px rgba(255,91,31,.14)}
.flow-ico{transition:background-color .5s var(--ease-out),border-color .5s var(--ease-out),color .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.paper .flow-n{color:var(--accent-ink)}
@media (prefers-reduced-motion:reduce){.flow::after{transform:none!important}.js .flow .flow-step{opacity:1;transform:none}}
@media(min-width:1000px){.hx-iso{top:58%;left:56%}}
.h-xl{letter-spacing:-.022em}
h1,h2,h3,h4{letter-spacing:-.018em}
.h-l{letter-spacing:-.02em}
.lyr-label{letter-spacing:-.02em}
.pr-amt{letter-spacing:-.025em}

.pt{margin-left:-.07em}

/* ===== Helle Bereiche: reines Weiß, dünne orange Rahmen ===== */
.paper{background:#fff;--line:rgba(255,91,31,.22);--line-strong:rgba(255,91,31,.45);--text-primary:#0E0F12;--text-secondary:#5B5E67;--panel:#fff;--ink-line:rgba(255,91,31,.22);--ink-line-strong:rgba(255,91,31,.45)}
.paper .card,.paper .pr-card,.paper .form-box,.paper .pr-web{background:#fff;border:1px solid rgba(255,91,31,.18)}
.paper .card--hover:hover{border-color:rgba(255,91,31,.5);box-shadow:0 18px 40px rgba(255,91,31,.08)}
.paper .pr-card:hover{box-shadow:0 22px 48px rgba(255,91,31,.10)}
.paper .pr-card--hl{background:#0E0F12;border-color:#0E0F12}
.paper .ico{background:#FFF1EA;color:var(--accent-ink)}
.paper .inp{background:#fff;border-color:#E2E3E7}
.paper .inp:focus{border-color:var(--accent)}
.paper .pill span{border-color:#E2E3E7}
.paper .faq,.paper .faq details{border-color:#ECECEF}
.paper .tag{border-color:rgba(255,91,31,.3)}
.paper .btn--ghost{background:#fff;border-color:#D5D6DB}
.paper .btn--ghost:hover{border-color:var(--accent);background:#FFF7F3}
.paper .pr-web{background:#fff}
.paper .pr-dots i{background:#E2E3E7}
.paper .pr-dots i.on{background:var(--accent)}
.form-box,.pr-web{position:relative}
/* Rahmen zeichnet sich beim Scrollen */
.bd{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:2}
.bd rect{x:.75px;y:.75px;width:calc(100% - 1.5px);height:calc(100% - 1.5px);fill:none;stroke:var(--accent);stroke-width:1.4;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--bd,0));stroke-linecap:round}
@media (prefers-reduced-motion:reduce){.bd rect{stroke-dashoffset:0}}

/* Hero: Preis-Feld auf dunkel, größere Icons */
.price-pill{display:inline-flex;align-items:center;gap:.45em;min-height:52px;padding:0 18px;border-radius:999px;border:1px solid var(--line-strong);background:rgba(20,21,24,.5);text-decoration:none;transition:border-color .3s var(--ease-out),transform .45s var(--ease-out)}
.price-pill span{font-size:.92rem;color:var(--text-secondary)}
.price-pill b{font-family:var(--f-display);font-weight:800;font-size:1.15rem;letter-spacing:-.02em;color:var(--text-primary)}
.price-pill small{font-size:.72rem;color:var(--text-secondary)}
.price-pill:hover{border-color:var(--accent);transform:translateY(-2px)}
.lyr-ico{width:3.8em;height:3.8em}
.lyr-ico svg{width:2.1em;height:2.1em;stroke-width:1.8}
.lyr-label{-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}

/* ===== Neue Bausteine (statt Icon-Karten) ===== */
/* Leistungsliste */
.idx{display:grid;border-top:1px solid var(--line)}
.idx-row{position:relative;display:grid;grid-template-columns:1fr;gap:.5rem 3rem;align-items:baseline;padding:clamp(22px,2.6vw,34px) 56px clamp(22px,2.6vw,34px) 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--text-primary)}
@media(min-width:900px){.idx-row{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}}
.idx-row h3{font-size:clamp(1.45rem,2.4vw,2.1rem);letter-spacing:-.02em;transition:transform .35s var(--ease-out),color .25s ease}
.idx-row--big h3{font-size:clamp(1.9rem,3.6vw,3.2rem);letter-spacing:-.03em}
.idx-row p{margin:0;color:var(--text-secondary);max-width:52ch}
.idx-arr{position:absolute;right:4px;top:50%;width:40px;height:40px;margin-top:-20px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-strong);color:var(--text-primary);transition:transform .35s var(--ease-out),background-color .25s ease,border-color .25s ease,color .25s ease}
.idx-arr svg{width:18px;height:18px}
.idx--sm .idx-row h3{font-size:clamp(1.2rem,1.8vw,1.5rem)}
.idx--sm .idx-row{padding-top:20px;padding-bottom:20px}
@media(hover:hover) and (pointer:fine){
  .idx-row:hover h3{transform:translateX(8px);color:var(--accent-ink)}
  .sec:not(.paper) .idx-row:hover h3{color:var(--accent)}
  .idx-row:hover .idx-arr{background:var(--accent);border-color:var(--accent);color:#16171A;transform:rotate(-45deg)}
}
.idx-row:active .idx-arr{transform:scale(.94)}
/* Aussagen-Raster */
.pts{display:grid;gap:clamp(28px,4vw,56px) clamp(24px,4vw,64px)}
@media(min-width:760px){.pts-2{grid-template-columns:repeat(2,1fr)}.pts-3{grid-template-columns:repeat(3,1fr)}}
.pts-i{padding-top:22px;border-top:2px solid var(--text-primary)}
.paper .pts-i{border-top-color:var(--accent)}
.pts-i h3{font-size:clamp(1.3rem,1.9vw,1.7rem);letter-spacing:-.02em;line-height:1.15;margin-bottom:.7rem}
.pts-i p{color:var(--text-secondary);margin:0 0 1rem;max-width:44ch}
.pts-i .tlink{margin-top:.2rem}
/* Kleine Überschriften statt Mono-Labels */
.hx-list-h,.pr-sum-h{width:100%;text-align:center;font-size:.86rem;font-weight:600;color:var(--text-secondary);margin:0 0 2px}
.pr-sum-h{text-align:left;color:#FF8A5C;margin-bottom:1rem;font-size:.95rem}

/* ===== Keine Mono-Kostüme: Labels in der Textschrift, normale Schreibweise ===== */
:root{--f-mono:var(--f-body)}
.crumbs,.mono,.flow-n,.pr-badge,.ba-tag,.lyr-tag,.ftr h3,.cinfo small,.card .num,.pkg-for,.hx-cue{text-transform:none;letter-spacing:0;font-family:var(--f-body)}
.crumbs{font-size:.88rem}
.ftr h3{font-size:.92rem;font-weight:600;color:var(--text-primary)}
.card .num{font-size:.95rem;font-weight:600}
.pr-badge{font-size:.75rem;font-weight:600}
.ba-tag{font-size:.78rem;font-weight:600}
.hx-cue{font-size:.75rem}
.pkg-for{font-size:.9rem;font-weight:600}
.cinfo small{font-size:.8rem}

/* ===== Typografie: mehr Kontrast, kürzere Zeilen ===== */
.h-l{font-size:clamp(2.2rem,4.6vw,4.3rem)}
.sec-head h2{max-width:20ch}
.sec-head{margin-bottom:clamp(44px,6vw,80px)}

/* ===== Bewegung & Bedienung (Emil Kowalski) ===== */
:root{--ease-out:cubic-bezier(.23,1,.32,1);--ease-io:cubic-bezier(.77,0,.175,1)}
.btn{transition:transform 160ms var(--ease-out),background-color 200ms ease,border-color 200ms ease,color 200ms ease}
.btn:hover,.card--hover:hover,.pr-card:hover,.price-pill:hover{transform:none}
.btn:active{transform:scale(.97)}
.price-pill:active,.tlink:active{transform:scale(.98)}
@media(hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-1px)}
  .btn:hover:active{transform:scale(.97)}
  .card--hover:hover{transform:translateY(-3px)}
  .pr-card:hover{transform:translateY(-3px)}
  .price-pill:hover{transform:translateY(-1px)}
}
.js .rv{transform:translateY(16px);transition:opacity .6s var(--ease-out),transform .7s var(--ease-out)}
.js .stg>*{transform:translateY(14px);transition:opacity .55s var(--ease-out),transform .65s var(--ease-out),background-color .25s ease,border-color .25s ease,box-shadow .3s ease}
.stg.in>*:nth-child(2){transition-delay:.06s,.06s,0s,0s,0s}.stg.in>*:nth-child(3){transition-delay:.12s,.12s,0s,0s,0s}.stg.in>*:nth-child(4){transition-delay:.18s,.18s,0s,0s,0s}.stg.in>*:nth-child(5){transition-delay:.24s,.24s,0s,0s,0s}.stg.in>*:nth-child(6){transition-delay:.3s,.3s,0s,0s,0s}.stg.in>*:nth-child(n+7){transition-delay:.34s,.34s,0s,0s,0s}
.dd-menu{transition:opacity 180ms var(--ease-out),transform 220ms var(--ease-out),visibility 0s 220ms;transform-origin:top left;transform:translateY(-4px) scale(.98)}
.dd.open .dd-menu{transform:none}
.mnav{transition:opacity 220ms var(--ease-out),visibility 0s 220ms}
.tlink{transition:gap .25s var(--ease-out),color .2s ease}
.faq summary::after{transition:transform .25s var(--ease-out)}

/* ===== Handy-Feinschliff (mobile-native) ===== */
html{-webkit-tap-highlight-color:transparent}
a,button,.btn,.pill,label{touch-action:manipulation}
.btn,.pill span,.burger,.idx-arr,.price-pill,.ba{-webkit-user-select:none;user-select:none}
.inp,select,textarea{font-size:max(16px,1rem)}
.hdr{padding-top:env(safe-area-inset-top)}
.hdr-in,.wrap{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.mnav{padding-bottom:calc(40px + env(safe-area-inset-bottom))}
.ftr{padding-bottom:calc(32px + env(safe-area-inset-bottom))}
.pr-track{touch-action:pan-x pan-y;overscroll-behavior-x:contain}

/* ===== Browser-Oberflächen im Markenstil ===== */
::selection{background:var(--accent);color:#16171A}
html{scrollbar-color:#3A3D44 #141518;caret-color:var(--accent);accent-color:var(--accent)}
.paper{caret-color:var(--accent-ink)}
a{text-underline-offset:.22em;text-decoration-thickness:1px}

.sec-head>*,.pts-i,.idx-row>*{min-width:0}
@media(max-width:600px){h1,h2,h3{-webkit-hyphens:auto;hyphens:auto}}

/* ===== Projektwand (echte Arbeiten) ===== */
.wall{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;grid-auto-flow:dense}
@media(min-width:900px){.wall{grid-template-columns:repeat(4,1fr);gap:14px}}
.wk{position:relative;margin:0;aspect-ratio:1;overflow:hidden;border-radius:16px;background:var(--panel-2)}
.wk--w{grid-column:span 2;aspect-ratio:2/1}
.wk img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out)}
.wk figcaption{position:absolute;left:10px;right:10px;bottom:10px;display:grid;gap:1px;padding:10px 12px;border-radius:10px;background:rgba(14,15,18,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#F3F1EC;font-size:.8rem;line-height:1.3;opacity:0;transform:translateY(6px);transition:opacity .25s var(--ease-out),transform .3s var(--ease-out)}
.wk figcaption b{font-size:.92rem;font-weight:600}
.wk figcaption span{color:#B4B6BC}
@media(hover:hover) and (pointer:fine){.wk:hover img{transform:scale(1.04)}.wk:hover figcaption{opacity:1;transform:none}}
@media(hover:none){.wk figcaption{opacity:1;transform:none;padding:7px 9px;left:6px;right:6px;bottom:6px}.wk figcaption span{display:none}.wk figcaption b{font-size:.75rem}}
.stats--inline{margin-top:1.4rem}
.stats--inline>div{background:transparent}
.pts-4{grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.pts-4{grid-template-columns:repeat(4,1fr)}}
.pts-4 .pts-i h3{font-size:clamp(1.1rem,1.5vw,1.35rem)}
.pts-4 .pts-i p{margin:0}
/* Filter */
.wk-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.wk-filter button{min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line-strong);background:transparent;color:var(--text-primary);font-weight:500;cursor:pointer;transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.wk-filter button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#16171A}
.wk-filter button:active{transform:scale(.97)}
.wk.is-hidden{display:none}

/* ===== Arbeiten als Laufband ===== */
.mq{overflow:hidden;padding:4px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mq-track{display:flex;width:max-content;animation:mq 70s linear infinite}
.mq-set{display:flex;gap:14px;padding-right:14px}
.mq-i{position:relative;margin:0;flex:none;width:clamp(150px,17vw,240px);aspect-ratio:1;border-radius:16px;overflow:hidden;background:var(--panel-2)}
.mq-i--w{width:clamp(300px,34vw,480px);aspect-ratio:2/1}
.mq-i img{width:100%;height:100%;object-fit:cover}
.mq-i figcaption{position:absolute;left:8px;bottom:8px;max-width:calc(100% - 16px);padding:5px 9px;border-radius:8px;background:rgba(14,15,18,.82);color:#F3F1EC;font-size:.74rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .25s var(--ease-out)}
@keyframes mq{to{transform:translateX(-50%)}}
@media(hover:hover) and (pointer:fine){.mq:hover .mq-track{animation-play-state:paused}.mq-i:hover figcaption{opacity:1}}
@media (prefers-reduced-motion:reduce){.mq{overflow-x:auto;-webkit-mask-image:none;mask-image:none}.mq-track{animation:none}.mq-set[aria-hidden]{display:none}}
#projekte .sec-head{margin-bottom:clamp(32px,4vw,52px)}
#projekte .btn-row{margin-top:clamp(28px,3vw,40px)!important}

/* ===== Bewertungs-Abzeichen (Hero) ===== */
.stars{display:inline-flex;gap:2px;color:var(--accent)}
.stars svg{width:15px;height:15px;fill:currentColor}
.stars--sm svg{width:13px;height:13px}
.stars--lg svg{width:clamp(22px,2.4vw,30px);height:clamp(22px,2.4vw,30px)}
.rating{display:inline-flex;align-items:center;gap:9px;margin-top:22px;text-decoration:none;color:var(--text-secondary);font-size:.92rem}
.rating b{color:var(--text-primary);font-weight:700}
.rating span{border-bottom:1px solid transparent;transition:border-color .2s ease}
@media(hover:hover) and (pointer:fine){.rating:hover span{border-color:var(--text-secondary)}}
@media(max-width:999px) and (max-height:760px){.rating{margin-top:14px;font-size:.85rem}}

/* ===== Was Kunden sagen ===== */
.proof{display:grid;gap:clamp(36px,5vw,80px);align-items:start}
@media(min-width:960px){.proof{grid-template-columns:.85fr 1.15fr}}
.proof-num{display:flex;align-items:center;gap:18px;margin:clamp(20px,3vw,36px) 0 .4rem}
.proof-num b{font-family:var(--f-display);font-weight:800;font-size:clamp(5rem,11vw,9.5rem);line-height:.85;letter-spacing:-.04em;color:var(--text-primary)}
.proof-sub{color:var(--text-secondary);margin:0 0 1.4rem}
.proof-quotes{display:grid;gap:clamp(28px,3.4vw,44px)}
.q{margin:0;padding-left:clamp(18px,2vw,28px);border-left:2px solid var(--accent)}
.q blockquote{margin:0}
.q p{font-family:var(--f-display);font-weight:600;font-size:clamp(1.2rem,1.9vw,1.6rem);line-height:1.35;letter-spacing:-.015em;color:var(--text-primary);margin:0 0 .8rem;max-width:34ch}
.q figcaption{display:flex;align-items:center;gap:10px;font-size:.9rem;color:var(--text-secondary)}
.promises{list-style:none;margin:clamp(48px,6vw,80px) 0 0;padding:clamp(22px,2.6vw,30px) 0 0;border-top:1px solid #ECECEF;display:grid;grid-template-columns:repeat(2,1fr);gap:18px 24px}
@media(min-width:900px){.promises{grid-template-columns:repeat(4,1fr)}}
.promises li{display:grid;grid-template-columns:22px 1fr;column-gap:10px;align-items:baseline}
.promises li::before{content:"";grid-row:span 2;width:14px;height:8px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:translateY(-3px) rotate(-45deg)}
.promises b{font-weight:700}
.promises span{color:var(--text-secondary);font-size:.92rem}

.proof-num b .cm{margin:0 -.1em 0 -.06em}
.proof-sub{margin-top:1rem!important}

/* ===== Leistungen direkt unter den Preisen ===== */
.sec--after{padding-top:clamp(24px,3vw,48px)}

/* ===== Erster Eindruck: Auswahl "Wo stehen Sie?" ===== */
.imp-head{display:grid;gap:1.2rem;align-items:end;margin-bottom:clamp(40px,5vw,64px)}
@media(min-width:900px){.imp-head{grid-template-columns:1.2fr .8fr;gap:4rem}}
.imp-head h2{max-width:16ch}
.imp-head .lede{margin:0;font-size:clamp(1.1rem,1.3vw,1.3rem);color:var(--text-primary)}
.imp-ask{font-weight:600;margin:0 0 14px;color:var(--text-secondary)}
.imp{display:grid;padding:0!important;overflow:hidden;border-radius:22px}
@media(min-width:900px){.imp{grid-template-columns:repeat(3,1fr)}}
.imp-i{position:relative;display:flex;flex-direction:column;gap:.7rem;padding:clamp(24px,2.8vw,40px);text-decoration:none;color:var(--text-primary);transition:background-color .3s var(--ease-out),color .3s var(--ease-out)}
.imp-i+.imp-i{border-top:1px solid rgba(255,91,31,.18)}
@media(min-width:900px){.imp-i+.imp-i{border-top:0;border-left:1px solid rgba(255,91,31,.18)}.imp-i{min-height:250px}}
.imp-i h3{font-size:clamp(1.35rem,2vw,1.75rem);letter-spacing:-.02em;line-height:1.1}
.imp-i p{margin:0;color:var(--text-secondary);max-width:32ch}
.imp-go{margin-top:auto;padding-top:.6rem;display:inline-flex;align-items:center;gap:.5em;font-weight:600;color:var(--accent-ink);transition:gap .25s var(--ease-out),color .3s ease}
@media(hover:hover) and (pointer:fine){
  .imp-i:hover{background:#0E0F12;color:#F3F1EC}
  .imp-i:hover p{color:#B4B6BC}
  .imp-i:hover .imp-go{color:var(--accent);gap:.85em}
}
.imp-i:active{background:#0E0F12;color:#F3F1EC}

/* ===== Hero ohne Kartenstapel auf dem Handy ===== */
@media(max-width:999px){
  .hx{height:auto}
  .hx-pin{position:relative;height:auto;min-height:0;padding-bottom:clamp(48px,10vw,72px)}
  .hx-side,.hx-cue{display:none}
  .hx-lede{display:block!important}
}

/* ===== Was Kunden sagen: kompakt auf dem Handy ===== */
.q-dots{display:none}
@media(max-width:959px){
  .proof-num{margin:14px 0 .2rem}
  .proof-num b{font-size:4.4rem}
  .proof-sub{margin:0 0 .8rem!important}
  .proof-quotes{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-inline:calc(-1*var(--gutter));padding:4px var(--gutter) 6px;scroll-padding-inline:var(--gutter);scrollbar-width:none;overscroll-behavior-x:contain}
  .proof-quotes::-webkit-scrollbar{display:none}
  .q{flex:0 0 86%;scroll-snap-align:start;padding:20px;border:1px solid rgba(255,91,31,.22);border-left:2px solid var(--accent);border-radius:16px}
  .q p{font-size:1.1rem}
  .q-dots{display:flex}
  .proof{gap:24px}
  .promises{margin-top:32px;padding-top:20px;gap:12px 16px}
  .promises span{font-size:.85rem}
}

@media(max-width:600px){.imp-head h2{-webkit-hyphens:manual;hyphens:manual;font-size:clamp(1.9rem,8.2vw,2.4rem)}}

/* ===== Erster Eindruck v3: Aussage, die sich beim Scrollen einschreibt ===== */
.stmt-sec{padding:clamp(96px,13vw,190px) 0}
.stmt-h{max-width:18ch;margin-bottom:clamp(28px,3.4vw,48px)}
.stmt{font-family:var(--f-display);font-weight:700;font-size:clamp(1.45rem,3vw,2.6rem);line-height:1.22;letter-spacing:-.02em;color:var(--text-primary);max-width:30ch;margin:0}
.js .stmt[data-ready] .sw{color:#CDCED4;transition:color .35s var(--ease-out)}
.js .stmt[data-ready] .sw.on{color:var(--text-primary)}
.paths{margin-top:clamp(48px,6vw,88px)}
.paths-q{font-weight:600;color:var(--text-secondary);margin:0 0 14px}
.paths-row{display:flex;flex-wrap:wrap;gap:10px}
.path{display:inline-flex;align-items:center;gap:14px;min-height:60px;padding:0 22px 0 26px;border-radius:999px;border:1px solid #DADBE0;background:#fff;color:var(--text-primary);text-decoration:none;font-weight:600;font-size:clamp(1rem,1.2vw,1.1rem);transition:background-color .25s var(--ease-out),border-color .25s var(--ease-out),color .25s var(--ease-out),transform 160ms var(--ease-out)}
.path svg{width:20px;height:20px;padding:6px;box-sizing:content-box;border-radius:50%;background:#F1F1F3;transition:background-color .25s ease,color .25s ease,transform .3s var(--ease-out)}
.path:active{transform:scale(.97)}
@media(hover:hover) and (pointer:fine){
  .path:hover{background:#0E0F12;border-color:#0E0F12;color:#F3F1EC}
  .path:hover svg{background:var(--accent);color:#16171A;transform:rotate(-45deg)}
}
@media(max-width:600px){.paths-row{display:grid}.path{justify-content:space-between}.stmt{font-size:1.4rem}}
@media (prefers-reduced-motion:reduce){.js .stmt[data-ready] .sw{color:var(--text-primary)}}
.stmt-grid{display:grid;gap:0}
@media(min-width:1000px){
  .stmt-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr);gap:clamp(48px,6vw,110px);align-items:end}
  .stmt{max-width:none}
  .paths{margin-top:0}
  .paths-row{display:grid;gap:12px}
  .path{justify-content:space-between;min-height:72px;font-size:1.15rem;padding:0 22px 0 28px}
}

@media(max-width:600px){.stmt-h{-webkit-hyphens:manual;hyphens:manual;font-size:clamp(1.9rem,8.2vw,2.4rem)}}

/* ===== Wo stehen Sie gerade? (interaktive Auswahl) ===== */
.sit-head{display:grid;gap:1rem;margin-bottom:clamp(32px,4vw,56px)}
@media(min-width:900px){.sit-head{grid-template-columns:1fr auto;align-items:end;gap:3rem}}
.sit-head .lede{margin:0;color:var(--text-secondary)}
.sit{display:grid;gap:14px}
@media(min-width:1000px){.sit{grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);gap:16px;align-items:stretch}}
.sit-tabs{display:grid;gap:10px;align-content:start}
.sit-tab{display:flex;align-items:center;gap:16px;width:100%;min-height:84px;padding:0 24px;border-radius:20px;border:1px solid #E4E5E9;background:#fff;color:var(--text-primary);text-align:left;cursor:pointer;font:inherit;transition:background-color .3s var(--ease-out),border-color .3s var(--ease-out),color .3s var(--ease-out),transform 160ms var(--ease-out)}
.sit-l{flex:1}
.sit-l b{font-family:var(--f-display);font-weight:700;font-size:clamp(1.15rem,1.6vw,1.45rem);letter-spacing:-.015em}
.sit-short{display:none}
.sit-dot{width:12px;height:12px;border-radius:50%;border:2px solid #CFD0D6;flex:none;transition:all .3s var(--ease-out)}
.sit-tab svg{width:20px;height:20px;opacity:.35;transition:opacity .3s,transform .35s var(--ease-out)}
.sit-tab:active{transform:scale(.98)}
.sit-tab[aria-selected=true]{background:#0E0F12;border-color:#0E0F12;color:#F3F1EC}
.sit-tab[aria-selected=true] .sit-dot{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 5px rgba(255,91,31,.22)}
.sit-tab[aria-selected=true] svg{opacity:1;color:var(--accent);transform:translateX(4px)}
@media(hover:hover) and (pointer:fine){.sit-tab[aria-selected=false]:hover{border-color:var(--accent)}.sit-tab[aria-selected=false]:hover svg{opacity:.8}}
.sit-panels{position:relative;border-radius:28px;background:#0E0F12;color:#F3F1EC;overflow:hidden;isolation:isolate}
.sit-panels::before{content:"";position:absolute;right:-20%;top:-40%;width:80%;aspect-ratio:1;background:radial-gradient(closest-side,rgba(255,91,31,.32),transparent 70%);z-index:-1;pointer-events:none}
.sit-p{padding:clamp(28px,3.4vw,52px);display:flex;flex-direction:column}
.js .sit-panels{display:grid}
.js .sit-p{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .3s var(--ease-out),transform .45s var(--ease-out),visibility 0s .3s}
.js .sit-p.on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.sit-kind{display:inline-flex;align-self:flex-start;font-size:.85rem;font-weight:600;color:#FF8A5C;padding:6px 12px;border-radius:999px;background:rgba(255,91,31,.14);margin:0 0 1.2rem}
.sit-p h3{font-size:clamp(1.6rem,2.8vw,2.5rem);line-height:1.12;letter-spacing:-.025em;max-width:20ch;margin-bottom:1.4rem}
.sit-p .checks{margin-bottom:2rem;font-size:1.05rem}
.sit-p .checks li{color:#D9DADF}
.sit-foot{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.sit-price{font-weight:600;color:#B4B6BC}
@media(max-width:999px){
  .sit-tabs{grid-template-columns:repeat(3,1fr);gap:6px;padding:5px;border-radius:999px;background:#F1F1F3}
  .sit-tab{min-height:48px;padding:0 6px;border-radius:999px;border:0;background:transparent;justify-content:center;gap:0}
  .sit-tab svg,.sit-dot{display:none}
  .sit-l{flex:none;text-align:center}
  .sit-long{display:none}.sit-short{display:inline}
  .sit-l b{font-size:.92rem}
  .sit-panels{border-radius:22px}
  .sit-p h3{font-size:1.45rem}
  .sit-foot .btn{width:100%}
}
@media(min-width:1000px){.sit-tabs{grid-auto-rows:1fr;align-content:stretch}}
.sit-p h3{-webkit-hyphens:manual;hyphens:manual}
@media(max-width:999px){.sit-l b{font-size:.84rem;letter-spacing:-.01em}.sit-tab{padding:0 4px}}

/* Wo stehen Sie gerade? Handy: helle, cleane Antwortkarte */
@media(max-width:999px){
  .sit-panels{background:#fff;color:var(--text-primary);border:1px solid rgba(255,91,31,.28);box-shadow:0 16px 40px rgba(14,15,18,.06)}
  .sit-panels::before{opacity:.35}
  .sit-kind{background:#FFF1EA;color:var(--accent-ink)}
  .sit-p .checks li{color:var(--text-secondary)}
  .sit-price{color:var(--text-secondary)}
}

/* Preise mit Website-Karte (4 Karten) */
@media(min-width:900px){.pr-track--4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1200px){.pr-track--4{grid-template-columns:repeat(4,1fr);gap:14px}.pr-track--4 .pr-card{padding:26px 24px}.pr-track--4 .pr-amt{font-size:2.5rem}}

/* Vertrauenszeile im Hero */
.hx-trust{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:22px;font-size:.92rem;color:var(--text-secondary)}
.hx-trust .rating{margin-top:0}
.hx-fact{display:inline-flex;align-items:center;gap:8px}
.hx-fact::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--line-strong)}
@media(max-width:999px) and (max-height:760px){.hx-trust{margin-top:14px;font-size:.85rem}}
.checks li b{font-weight:600}

.hx-trust{gap:8px 14px;font-size:.88rem}

/* ===== Echte Website-Screenshots ===== */
.shot{position:relative;padding:0 4% 9% 0}
.shot .mock img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.shot-phone{position:absolute;right:0;bottom:0;width:24%;aspect-ratio:480/1039;border-radius:clamp(14px,2vw,26px);border-width:clamp(3px,.4vw,5px)}
.shot-phone img{width:100%;height:100%;object-fit:cover;object-position:top}
.ba-after img{width:100%;height:100%;object-fit:cover;object-position:top}
.ba-note a{color:inherit}
.sites{display:grid;gap:clamp(48px,6vw,80px) clamp(24px,3vw,48px)}
@media(min-width:900px){.sites{grid-template-columns:repeat(2,1fr)}.sites .site:first-child:nth-last-child(odd){grid-column:1/-1}}
.site-meta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px 24px;margin-top:22px}
.site-meta h3{font-size:clamp(1.25rem,1.8vw,1.6rem);letter-spacing:-.015em;margin-bottom:.3rem}
.site-meta p{margin:0;color:var(--text-secondary);font-size:.95rem}

/* Website Basic: Einzelkarte unter den Paketen */
.pr-basic{margin-top:18px;display:grid;gap:22px 48px;border:1px solid rgba(255,91,31,.18);border-radius:24px;background:#fff;padding:clamp(26px,2.6vw,36px)}
.pr-basic h3{font-size:1.05rem;font-weight:700;letter-spacing:-.01em}
.pr-basic .pr-amt{margin-top:1rem}
.pr-basic .pr-amt s{font-family:var(--f-body);font-size:1.05rem;font-weight:500;letter-spacing:0;color:var(--text-secondary);margin-right:.45em;text-decoration-thickness:1.5px;text-decoration-color:var(--accent)}
.pr-basic .pr-list{margin:0;align-content:start}
.pr-basic .pr-btn{align-self:start}
@media(min-width:900px){
  .pr-basic{grid-template-columns:minmax(240px,300px) 1fr;align-items:center}
  .pr-basic-l{display:flex;flex-direction:column}
  .pr-basic .pr-list{grid-template-columns:repeat(2,1fr);column-gap:32px}
}

/* Kontaktbereich auf Unterseiten: dunkel, mit feiner Trennlinie */
.sec--contact{border-top:1px solid var(--line)}

/* Leistungsumfang als Gruppen (z.B. Webdesign) */
.scope-g{display:grid;gap:18px}
@media(min-width:900px){.scope-g{grid-template-columns:repeat(3,1fr)}}
.scope-c{padding:clamp(24px,2.6vw,34px);border-radius:24px}
.scope-c h3{font-size:clamp(1.15rem,1.5vw,1.35rem);letter-spacing:-.02em;margin-bottom:1.2rem}
.scope-c .checks{font-size:.98rem;gap:.75rem}

/* Relaunch: alt und neu nebeneinander */
.oldnew{position:relative;display:grid;grid-template-columns:44% 1fr;align-items:center;padding:6% 0 4%}
.oldnew figure{margin:0;position:relative}
.oldnew .mock img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.oldnew .mock-bar{height:24px;padding:0 10px;gap:5px}
.oldnew .mock-bar i{width:7px;height:7px}
.oldnew .mock-bar span{height:14px;font-size:.55rem;margin-left:8px}
.oldnew-old{transform:translateY(-8%) rotate(-2deg);filter:saturate(.85)}
.oldnew-old .mock{opacity:1}
.oldnew-new{margin-left:-10%;z-index:2}
.oldnew-new .mock{box-shadow:0 40px 90px rgba(0,0,0,.6),0 0 0 1px rgba(255,91,31,.25)}
.oldnew figcaption{position:absolute;bottom:-14px;font-size:.78rem;font-weight:600;padding:6px 10px;border-radius:8px;white-space:nowrap}
.oldnew-old figcaption{left:10px;background:rgba(8,8,15,.85);color:#F3F1EC;border:1px solid var(--line)}
.oldnew-new figcaption{right:10px;background:var(--accent);color:#16171A}
@media(max-width:600px){.oldnew figcaption{font-size:.68rem;padding:5px 8px}.oldnew-new figcaption{right:6px}}

/* Video: Creator-Leiste */
.creators{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 40px;padding:28px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.creators-l{margin:0;color:var(--text-secondary);font-size:.95rem}
.creators-n{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 44px}
.creators-n li{font-family:var(--f-display);font-weight:800;font-size:clamp(1.5rem,2.6vw,2.2rem);letter-spacing:-.03em}