/* Seite Webdesign Agentur, aus Leistung.dc.html. Gemeinsame Regeln stehen in basis.css. */
.hero{padding-top:28px;padding-bottom:110px;overflow:hidden}
.hero .riesig{font-size:clamp(48px,14vw,230px);margin-top:40px}
.intro p{margin:0;font-size:19px;line-height:1.65;color:#C9CDC0;max-width:60ch}
.intro p+p{margin-top:20px}
.kat{padding-top:120px;padding-bottom:120px;border-top:1px solid var(--ln)}
.kat-kopf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:72px;align-items:end;margin-bottom:56px}
.kat-art{display:block;margin-bottom:16px;font:600 17px/1.3 "Instrument Sans",sans-serif;color:var(--gr)}
.kat-kopf p{margin:0;font-size:18px;line-height:1.65;color:var(--mut);max-width:58ch}
.rahmen{border:1px solid var(--ln);background:var(--panel);overflow:hidden}
.rahmen-kopf{height:34px;display:flex;align-items:center;gap:7px;padding:0 14px;border-bottom:1px solid var(--ln)}
.rahmen-kopf i{width:9px;height:9px;border-radius:999px;background:#3A3E2F}
.rahmen img{display:block;width:100%;height:auto}
.handy{width:min(300px,100%);margin:0 auto;border-radius:34px;padding:10px;background:#20231A;border:1px solid var(--ln)}
.handy img{display:block;width:100%;height:auto;border-radius:26px}
.merkmale{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 48px;margin-top:56px}
.merkmale article{border-top:1px solid var(--ln);padding-top:26px}
.merkmale h3{margin:0 0 10px;font:800 26px/1.1 "Bricolage Grotesque",sans-serif;letter-spacing:-0.02em}
.merkmale p{margin:0;font-size:16px;line-height:1.6;color:var(--mut)}
.paar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;align-items:center}
.paar-hell{background:var(--panel);border:1px solid var(--ln);padding:48px;display:flex;align-items:center;justify-content:center;min-height:100%}
.soft{background:#121410;border-top:1px solid var(--ln);border-bottom:1px solid var(--ln)}
.app-titel{margin:96px 0 0;font:800 clamp(32px,3.4vw,52px)/1 "Bricolage Grotesque",sans-serif;letter-spacing:-0.03em}
.app-rahmen{margin-top:40px;border:1px solid var(--ln);background:var(--panel);overflow:hidden}
.app-rahmen .rahmen-kopf span{margin-left:10px;font-size:13px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-rahmen iframe{display:block;width:100%;height:min(78vh,760px);min-height:520px;border:0;background:#0b1726}
.hinweis{margin:14px 0 0;font-size:14px;line-height:1.55;color:var(--mut);max-width:80ch}
.ds{margin-top:40px}
.ds-buehne{position:relative;overflow:hidden;background:#000;border:1px solid var(--ln)}
.ds-buehne>img{display:block;width:100%;height:auto}
.ds-box{position:absolute;opacity:0;transform:scale(1.35);transition:opacity 260ms var(--ease-out),transform 420ms var(--ease-out);transition-delay:var(--d,0ms)}
.ds-box::before{content:"";position:absolute;inset:-3px;border:2px solid var(--gr);box-shadow:0 0 0 1px rgba(14,15,12,.5);transition:border-color 400ms ease,opacity 400ms ease}
.ds-wisch{position:absolute;inset:0;-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);background:rgba(120,126,110,.18);opacity:0;transition:opacity 700ms ease;transition-delay:var(--d,0ms)}
.ds-tag{position:absolute;left:-3px;bottom:100%;margin-bottom:5px;white-space:nowrap;background:var(--gr);color:var(--ink);font:700 10px/1 "Instrument Sans",sans-serif;padding:4px 6px;border-radius:2px;transition:opacity 300ms ease}
.ziel .ds-box,.blur .ds-box{opacity:1;transform:none}
.blur .ds-wisch{opacity:1}
.blur .ds-box::before{border-color:rgba(204,227,16,.35)}
.blur .ds-tag{opacity:0}
.scan .ds-box,.scan .ds-wisch,.scan .ds-box::before,.scan .ds-tag{transition:none}
.ds-scan{position:absolute;left:0;right:0;top:0;height:2px;background:var(--gr);box-shadow:0 0 18px 4px rgba(204,227,16,.55);opacity:0}
.scan .ds-scan{opacity:1;animation:scannen 1.6s linear both}
@keyframes scannen{from{top:0}to{top:100%}}
.ds-status{position:absolute;left:16px;top:16px;margin:0;background:rgba(14,15,12,.82);color:var(--tx);font:600 14px/1 "Instrument Sans",sans-serif;padding:10px 14px;border-radius:999px;font-variant-numeric:tabular-nums}
.ds-leiste{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-top:18px}
.ds-wahl{display:flex;flex-wrap:wrap;gap:10px}
.chip{min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--ln2);background:transparent;color:var(--tx);font:600 15px/1 "Instrument Sans",sans-serif;cursor:pointer;transition:transform 160ms ease-out,background-color 200ms ease,color 200ms ease}
.chip:active{transform:scale(.97)}
.chip[aria-pressed="true"]{background:var(--gr);border-color:var(--gr);color:var(--ink)}
@media (prefers-reduced-motion:reduce){.ds-box,.ds-wisch,.ds-box::before{transition:none}.scan .ds-scan{animation:none;opacity:0}}
.ablauf2{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;counter-reset:f}
.ablauf2 li{position:relative;padding:28px 22px 0 0;border-top:3px solid #2B2E24}
.ablauf2 li::after{content:"";position:absolute;left:0;right:0;top:-3px;height:3px;background:var(--gr);transform:scaleX(0);transform-origin:left}
.ablauf2 b{display:block;font:800 22px/1.15 "Bricolage Grotesque",sans-serif;margin-bottom:8px}
.ablauf2 span{display:block;font-size:15px;line-height:1.55;color:var(--mut)}
.fantasie{border:1px solid var(--ln);background:var(--panel);overflow:hidden}
.f-buehne{position:relative;aspect-ratio:16/8;overflow:hidden;background:#000}
.f-buehne video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.f-buehne::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,12,14,.82) 0%,rgba(10,12,14,.35) 55%,rgba(10,12,14,.1) 100%)}
.f-nav{position:absolute;left:0;right:0;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:22px 36px;color:#fff;font:600 14px/1 "Instrument Sans",sans-serif}
.f-nav b{font:800 20px/1 "Bricolage Grotesque",sans-serif;letter-spacing:-0.02em}
.f-nav span{display:flex;gap:24px;opacity:.85}
.f-text{position:absolute;left:36px;bottom:40px;z-index:2;max-width:46%;color:#fff}
.f-text strong{display:block;font:800 clamp(24px,3.4vw,52px)/1 "Bricolage Grotesque",sans-serif;letter-spacing:-0.03em}
.f-text em{display:inline-flex;margin-top:22px;font-style:normal;font:600 14px/1 "Instrument Sans",sans-serif;padding:13px 20px;border-radius:999px;background:#fff;color:#111}
.f-pause{position:absolute;right:20px;top:70px;z-index:3}
.f-pfeil{position:absolute;right:36px;bottom:40px;z-index:3;max-width:260px;text-align:right;color:var(--gr);font:600 15px/1.4 "Instrument Sans",sans-serif}
.punkte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 48px;margin-top:40px}
.punkte p{margin:0;border-top:1px solid var(--ln);padding-top:20px;font-size:16px;line-height:1.6;color:var(--mut)}
.punkte b{display:block;color:var(--tx);font-weight:600;margin-bottom:6px}
.cmp{width:100%;border-collapse:collapse;font-size:17px}
.cmp th,.cmp td{text-align:left;padding:18px 18px 18px 0;border-top:1px solid #3A3E2F;vertical-align:top}
.cmp td{color:#2A2D22;font-variant-numeric:tabular-nums}
.gruen{background:var(--gr);color:var(--ink)}
.gruen :focus-visible{outline-color:var(--ink)}
.schritte{list-style:none;margin:0;padding:0;counter-reset:s}
.schritte li{display:grid;grid-template-columns:120px minmax(0,1fr);gap:24px;padding:34px 0;border-top:1px solid var(--ln)}
.schritte li::before{counter-increment:s;content:counter(s);font:800 64px/1 "Bricolage Grotesque",sans-serif;color:var(--gr)}
.schritte b{display:block;font:700 26px/1.15 "Bricolage Grotesque",sans-serif;margin-bottom:8px}
.schritte span{font-size:17px;line-height:1.6;color:var(--mut);max-width:60ch;display:block}
@media (prefers-reduced-motion:no-preference){
.laeuft .ablauf2 li::after{animation:schritt 10s linear infinite}
.laeuft .ablauf2 li:nth-child(2)::after{animation-delay:2s}.laeuft .ablauf2 li:nth-child(3)::after{animation-delay:4s}.laeuft .ablauf2 li:nth-child(4)::after{animation-delay:6s}.laeuft .ablauf2 li:nth-child(5)::after{animation-delay:8s}
@keyframes schritt{0%{transform:scaleX(0)}18%{transform:scaleX(1)}90%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
}
@supports (animation-timeline: view()){@media (prefers-reduced-motion:no-preference){
.rahmen,.fantasie{animation:kipp linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
@keyframes kipp{from{transform:perspective(1400px) rotateX(12deg) translateY(60px);opacity:.35}to{transform:none;opacity:1}}
}}
@media (max-width:900px){.ablauf2{grid-template-columns:minmax(0,1fr);row-gap:32px}}
@media (max-width:900px){.kat-kopf,.paar,.merkmale,.punkte{grid-template-columns:minmax(0,1fr);gap:28px}.f-buehne{aspect-ratio:4/5}.f-text{max-width:80%}.f-pause{position:absolute;right:20px;top:70px;z-index:3}
.f-pfeil{display:none}.f-nav span{display:none}}
@media (max-width:767px){.app-rahmen iframe{height:860px}.ds-tag{display:none}.ds-status{font-size:12px;left:10px;top:10px;padding:8px 10px}.kat{padding-top:90px;padding-bottom:90px}.ablauf2{grid-template-columns:minmax(0,1fr)}.schritte li{grid-template-columns:56px minmax(0,1fr);gap:16px}.schritte li::before{font-size:40px}.paar-hell{padding:24px}}
/* Ehemalige Inline Stile des Entwurfs */
.h1-null{margin:0}
.hero-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.intro{padding-bottom:120px}
.intro-zwei{align-items:start}
.h2-gross{font-size:clamp(44px,5vw,80px)}
.kat-kopf-0{margin-bottom:0}
.soft-in{padding-top:130px;padding-bottom:130px}
.app-titel-2{margin-top:130px}
.kat-ohne{border-top:0}
.lp-kopf{margin-bottom:56px}
.f-nav i{font-style:normal}
.tempo-in{padding-top:120px;padding-bottom:120px}
.tempo-text{margin:24px 0 0;font-size:19px;line-height:1.6;max-width:40ch;font-weight:500}
.cmp-huelle{overflow-x:auto}
.cmp caption{text-align:left;font-size:15px;padding-bottom:12px;color:#2A2D22}
.cmp th{color:#0E0F0C}
.cmp tbody th{font-weight:700}
.seo{padding-top:140px;padding-bottom:120px}
.seo-titel{margin-bottom:20px}
.lead.seo-lead{margin:0 0 48px}
.geo{padding-top:40px;padding-bottom:150px}
.kontakt{border-top:1px solid #2B2E24}
.kontakt-in{padding-top:120px;padding-bottom:120px;align-items:end}
.kontakt-titel{margin:0;font-size:clamp(48px,6vw,96px);line-height:.95}
.kontakt-adr{font-style:normal;font-size:18px;line-height:1.75}
.kontakt-adr .kontakt-tel{font:800 34px/1.2 "Bricolage Grotesque",sans-serif;text-decoration:none;display:inline-block;min-height:44px;color:#CCE310}
.kontakt-btn{margin-top:24px}