/* Scoped to the two marketing pages. Shared styles and customer sites stay unchanged. */
/* Farbton: ausschließlich WebSofort-Palette aus stil.css (Orange #FF6B00 / #E65F00, Navy #111B29, neutrale Grautöne). */
.marketing .wrap{max-width:1200px}
.marketing main>section{scroll-margin-top:95px}
.marketing a,.marketing summary{touch-action:manipulation}
.marketing :focus-visible{outline:3px solid var(--ring);outline-offset:5px}
.marketing .skip-link{position:fixed;left:16px;top:-100px;z-index:100;background:#fff;padding:12px 20px;border:2px solid var(--ink);border-radius:8px}
.marketing .skip-link:focus{top:12px}
.marketing header.site{background:#f6f7f4f5}
.marketing header.site .in{gap:26px;min-height:98px;flex-wrap:nowrap}
.marketing header.site .brand svg{height:42px}
.marketing header.site .brand b{font-size:1.42rem}
.marketing header.site .desktop-nav{display:flex;gap:17px;width:auto;order:0;overflow:visible;margin-left:auto;font-size:.96rem}
.marketing header.site .desktop-nav a[aria-current="page"]{color:var(--accent-2);font-weight:600}
.marketing header.site .desktop-nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.marketing header.site .btn{font-size:.96rem;padding:13px 20px;margin-left:0}
.mobile-menu{display:none}
.refresh-hero{padding:76px 0 65px;background:
  radial-gradient(circle at 76% 24%,rgba(255,107,0,.12),transparent 23%),
  radial-gradient(circle at 91% 72%,rgba(17,27,41,.11),transparent 25%),
  linear-gradient(130deg,#f6f7f4 55%,#eceeea);position:relative;isolation:isolate;overflow:hidden}
.refresh-hero::before,.refresh-hero::after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none}
.refresh-hero::before{width:360px;height:360px;right:-175px;top:-190px;border:1px solid rgba(17,27,41,.12);box-shadow:0 0 0 52px rgba(255,255,255,.17),0 0 0 104px rgba(255,255,255,.1)}
.refresh-hero::after{width:9px;height:9px;right:9%;top:22%;background:var(--accent);box-shadow:-52px 84px 0 rgba(255,107,0,.45),36px 166px 0 rgba(17,27,41,.25)}
.hero-layout{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.hero-layout>*{min-width:0}
.overline{display:flex;align-items:center;gap:9px;font-size:.75rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--soft);margin-bottom:23px}
.overline>span,.status-dot{width:7px;height:7px;display:inline-block;flex:none;background:var(--accent);border-radius:50%}
.refresh-hero h1{font-size:clamp(2.4rem,4.5vw,3.7rem);line-height:1.06;letter-spacing:-.055em;font-weight:900;text-wrap:initial}
.refresh-hero h1 em{font-style:normal;color:var(--accent)}
.hero-lead{font-size:1.12rem;color:var(--soft);line-height:1.7;max-width:45ch;margin-top:23px}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:20px;margin-top:30px}
.hero-actions .btn{gap:22px;padding:15px 19px;font-size:.94rem}
.text-link{display:inline-flex;align-items:center;gap:12px;font-weight:700;font-size:.94rem;text-decoration:none;text-underline-offset:5px}
.text-link:hover{text-decoration:underline}
.hero-note{font-size:.82rem;color:var(--soft);margin-top:16px;max-width:48ch}
.product-stage{background:var(--navy);border:1px solid #2a3a4d;border-radius:18px;padding:17px;box-shadow:0 32px 68px -28px rgba(17,27,41,.52);position:relative;transform:perspective(1100px) rotateY(-1.6deg) rotateX(1deg);transform-origin:center;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease}
.product-stage:hover{transform:perspective(1100px) rotateY(0) rotateX(0) translateY(-5px);box-shadow:0 42px 78px -30px rgba(17,27,41,.62)}
.product-caption{display:flex;align-items:center;gap:7px;color:#e8ecef;font-size:.72rem;margin:0 0 14px}
.product-caption>span:last-child{margin-left:auto;color:#c9d2da;font-size:.59rem;letter-spacing:.12em;border:1px solid rgba(255,255,255,.22);padding:3px 6px;border-radius:4px}
.product-screen{display:block;overflow:hidden;background:#eef0f3;border-radius:7px;line-height:0}
.product-screen img{width:100%;height:auto;display:block;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.product-stage:hover .product-screen img{transform:scale(1.025)}
.product-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:21px 4px 8px;color:#c7d0da;font-size:.88rem;line-height:1.5}
.product-bottom b{color:white;font-family:var(--display);font-size:1.04rem}
.product-bottom a{color:#ffb98a;text-decoration:none;max-width:17ch;font-size:.78rem;font-weight:600}
.product-bottom a:hover{text-decoration:underline}
.product-tags{display:flex;gap:6px;margin:17px 4px 0;padding-top:13px;border-top:1px solid rgba(255,255,255,.13)}
.product-tags span{font-size:.64rem;letter-spacing:.035em;color:#c2ccd6}
.product-tags span+span::before{content:' / ';color:#7c8a99;margin-right:6px}
.proof-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:white}
.proof-strip .wrap{display:flex;justify-content:space-between;align-items:center;gap:18px;padding-block:20px;font-size:.83rem;color:var(--soft)}
.proof-strip .wrap>span::before{content:'✓';color:var(--ok);margin-right:10px}
.proof-strip a{font-weight:700;color:var(--ink);text-decoration:none}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:34px}
.section-heading h2{font-size:clamp(1.7rem,3vw,2.4rem);letter-spacing:-.04em;line-height:1.15}
.section-heading>p{max-width:32ch;font-size:.98rem;color:var(--soft)}
.section-heading .overline{margin-bottom:15px}
.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--line-2);border-radius:14px;overflow:hidden;background:#fff}
.service-grid article{min-width:0;padding:30px;display:flex;flex-direction:column;align-items:start;position:relative;transition:background .25s ease,transform .25s ease}
.service-grid article::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.service-grid article:hover{background:#fafaf8;transform:translateY(-3px)}
.service-grid article:hover::before{transform:scaleX(1)}
.service-grid article+article{border-left:1px solid var(--line)}
.service-number{color:var(--faint);font-size:.68rem;letter-spacing:.08em;font-weight:700;margin-bottom:31px}
.service-grid h3{font-size:1.5rem;letter-spacing:-.035em}
.service-grid p{color:var(--soft);font-size:.97rem;line-height:1.65;margin:15px 0 26px}
.service-grid .text-link{margin-top:auto;font-size:.85rem}
.service-guidance{display:flex;flex-wrap:wrap;gap:12px 22px;margin-top:25px;font-size:.85rem;color:var(--soft)}
.service-guidance a{color:var(--ink);font-weight:600;text-underline-offset:4px}
.marketing #referenzen{padding-block:60px}
.marketing .ref .shot{aspect-ratio:900/512;overflow:hidden}
.marketing .ref{transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.marketing .ref:hover{transform:translateY(-6px);border-color:var(--line-2);box-shadow:0 24px 50px -30px rgba(17,27,41,.5)}
.marketing .ref .shot img{transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.marketing .ref:hover .shot img{transform:scale(1.035)}
.marketing .ref .body{padding:23px}
.marketing .ref .body .k{color:var(--soft)}
.marketing .sec-head{max-width:710px}
.marketing .sec-head p{color:var(--soft)}
.marketing .sec-head h2{letter-spacing:-.035em;line-height:1.13}
.marketing .eyebrow{font-size:.74rem;font-weight:700;letter-spacing:.07em;background:transparent;padding:0;border-radius:0;text-transform:uppercase;color:var(--accent-2)}
.marketing .preis{border-radius:13px;box-shadow:none}
.marketing .preise{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.marketing .preis .dazu{color:var(--soft)}
.marketing .preis ul{margin-bottom:24px}
.marketing .preis .btn{margin-top:auto}
.marketing .preis.hervor{border-color:var(--accent);box-shadow:0 10px 26px -20px rgba(17,27,41,.28)}
.marketing .preis.hervor::before{content:'Website + mehr Überblick';background:var(--navy);color:#fff}
.marketing:has(.dealer-hero) .preis.hervor::before{content:'Mit KI-Fotostudio'}
.marketing .preis-hinweis{max-width:85ch;font-size:.9rem}
.marketing .faq{max-width:850px}
.marketing .faq summary{padding-block:21px;min-height:48px}
.marketing .faq .antwort{color:var(--soft)}
.marketing .kontakt .eyebrow{color:#ffb98a}
.marketing .kontakt .sec-head p{color:var(--on-navy-soft)}
.marketing .kways{display:flex;flex-direction:column}
.marketing .kway{min-width:0}
.marketing .kway span{overflow-wrap:anywhere}
.marketing .kway .ic{flex:none}
.marketing .dsgvo{color:var(--on-navy-soft)}
.marketing .hp{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%);padding:0!important;border:0!important;opacity:0}
.marketing .kmini{color:var(--on-navy-soft)}
.marketing #muster{background:#fff;padding-top:52px}
.marketing .muster{gap:25px}
.marketing .muster>a{border:1px solid var(--line-2);box-shadow:none}
.marketing .muster>a:hover{border-color:var(--accent);box-shadow:0 8px 24px -18px rgba(17,27,41,.25)}
.marketing .muster .u{padding:24px}
.marketing .muster img{display:block;width:100%;height:auto;aspect-ratio:900/512;object-fit:cover}
.marketing .muster .oeffnen{color:var(--accent-2)}
.marketing #vorteile .dabei{grid-template-columns:repeat(3,minmax(0,1fr))}
.marketing #vorteile .k{min-width:0}
.marketing #vorteile .k p{font-size:.94rem}
.reference-layout{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.reference-layout>*{min-width:0}
.reference-layout img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line-2)}
.reference-layout h2{font-size:clamp(1.65rem,3vw,2.3rem);line-height:1.14}
.reference-layout p:not(.overline){margin:20px 0;color:var(--soft)}
.dealer-faq{background:var(--surface-2)}
.dealer-daily{background:#fff}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:4px}
.grid3>div{min-width:0;padding:22px;border:1px solid var(--line-2);border-radius:13px}
.grid3 b{display:block;font-size:1.05rem;letter-spacing:-.02em;margin-bottom:8px}
.grid3 p{margin:0;color:var(--soft);font-size:.95rem;line-height:1.6}
.dealer-daily .grid3>div{background:var(--surface-2)}

/* Bewegungen nur als progressive Verbesserung: Ohne JavaScript bleibt alles sichtbar. */
.motion-ready .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.75,.2,1)}
.motion-ready .reveal.reveal-left{transform:translateX(-26px)}
.motion-ready .reveal.reveal-right{transform:translateX(26px)}
.motion-ready .reveal.is-visible{opacity:1;transform:translate(0,0)}
.motion-ready .reveal-stagger>*{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.75,.2,1)}
.motion-ready .reveal-stagger.is-visible>*{opacity:1;transform:none}
.motion-ready .reveal-stagger.is-visible>*:nth-child(2){transition-delay:.09s}
.motion-ready .reveal-stagger.is-visible>*:nth-child(3){transition-delay:.18s}
.motion-ready .reveal-stagger.is-visible>*:nth-child(4){transition-delay:.27s}
.motion-ready .hero-copy{animation:heroCopyIn .75s both cubic-bezier(.2,.75,.2,1)}
.motion-ready .product-stage{animation:heroStageIn .85s .12s both cubic-bezier(.2,.75,.2,1)}
.motion-ready .proof-strip .wrap{animation:proofIn .65s .4s both ease}
@keyframes heroCopyIn{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
@keyframes heroStageIn{from{opacity:0;transform:perspective(1100px) translateX(34px) rotateY(-5deg)}to{opacity:1;transform:perspective(1100px) rotateY(-1.6deg) rotateX(1deg)}}
@keyframes proofIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-width:860px){.grid3{grid-template-columns:1fr}}
.danke-leiste{background:var(--accent);color:#fff}
.danke-leiste .wrap{display:flex;align-items:center;gap:16px;padding:13px 0;font-size:.95rem;line-height:1.45}
.danke-leiste p{margin:0;flex:1 1 auto;min-width:0}
.danke-leiste b{font-weight:800}
.danke-leiste a{color:#fff;text-decoration:underline;text-underline-offset:2px;font-weight:700}
.danke-leiste .danke-zu{flex:none;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.22);color:#fff;font-size:19px;line-height:1;cursor:pointer}
.danke-leiste .danke-zu:hover{background:rgba(255,255,255,.35)}
.danke-leiste.fehler{background:var(--navy)}
@media(max-width:520px){.danke-leiste .wrap{font-size:.85rem;padding:11px 0;gap:10px}}
@media(max-width:1080px){
 .marketing header.site .desktop-nav{display:none}
 .marketing header.site .btn{margin-left:auto}
 .marketing header.site .mobile-menu{display:block;order:3;position:relative}
 .marketing header.site .mobile-menu summary{cursor:pointer;list-style:none;font-size:.85rem;font-weight:700;padding:12px 0 12px 7px}
 .marketing header.site .mobile-menu summary::-webkit-details-marker{display:none}
 .marketing header.site .mobile-menu nav{position:absolute;right:0;top:48px;background:#fff;border:1px solid var(--line-2);border-radius:12px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:0;padding:9px;width:250px;margin:0;max-height:75vh;overflow:auto}
 .marketing header.site .mobile-menu nav a{padding:13px;border-radius:6px;white-space:normal}
 .marketing header.site .mobile-menu nav a:hover{background:var(--surface-2)}
 .hero-layout{gap:30px}
 .hero-actions{gap:16px}
 .service-grid article{padding:23px}
}
@media(max-width:860px){
 .marketing header.site .in{min-height:82px;gap:12px}
 .marketing header.site .desktop-nav{display:none}
 .marketing header.site .btn{margin-left:auto;font-size:.78rem;padding:10px 12px}
 .mobile-menu{display:block;order:3;position:relative}
 .mobile-menu summary{cursor:pointer;list-style:none;font-size:.85rem;font-weight:700;padding:12px 0 12px 7px}
 .mobile-menu summary::-webkit-details-marker{display:none}
 .mobile-menu summary span{margin-left:5px}
 .marketing header.site .mobile-menu nav{position:absolute;right:0;top:48px;background:#fff;border:1px solid var(--line-2);border-radius:12px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:0;padding:9px;width:230px;margin:0;max-height:70vh;overflow:auto}
 .marketing header.site .mobile-menu nav a{padding:13px;border-radius:6px;white-space:normal}
 .marketing header.site .mobile-menu nav a:hover{background:var(--surface-2)}
 .hero-layout{grid-template-columns:1fr;gap:35px}
 .refresh-hero{padding:45px 0}
 .hero-copy{max-width:650px}
 .refresh-hero h1{font-size:clamp(2.25rem,6.5vw,3.8rem)}
 .hero-lead{max-width:55ch}
 .product-stage{max-width:620px;width:100%;transform:none}
 .product-stage:hover{transform:translateY(-3px)}
 .section-heading{display:block}
 .section-heading>p{max-width:54ch;margin-top:18px}
 .service-grid{grid-template-columns:1fr}
 .service-grid article+article{border-left:0;border-top:1px solid var(--line)}
 .service-number{margin-bottom:16px}
 .proof-strip .wrap{flex-wrap:wrap;gap:12px 25px}
 .reference-layout{grid-template-columns:1fr;gap:28px}
 .marketing #vorteile .dabei{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){
 .marketing .wrap{padding-inline:21px}
 .marketing header.site .brand b{font-size:1.12rem}
 .marketing header.site .brand svg{height:30px}
 .marketing header.site .brand{gap:6px}
 .marketing header.site .btn{display:none}
 .mobile-menu{margin-left:auto}
 .refresh-hero{padding-top:34px}
 .refresh-hero .overline{font-size:.62rem;letter-spacing:.07em;margin-bottom:20px}
 .refresh-hero h1{font-size:2.4rem;letter-spacing:-.055em}
 .hero-lead{font-size:1.03rem;line-height:1.6;margin-top:20px}
 .hero-actions{align-items:flex-start;gap:18px;margin-top:25px}
 .hero-actions .btn{font-size:.86rem;gap:12px;min-height:49px;padding:13px 15px}
 .hero-note{font-size:.76rem}
 .product-stage{padding:12px;border-radius:12px}
 .product-caption{font-size:.63rem}
 .product-bottom{font-size:.8rem;padding-top:16px}
 .product-bottom b{font-size:.93rem}
 .product-bottom a{font-size:.72rem}
 .proof-strip .wrap{font-size:.75rem;display:grid;grid-template-columns:1fr 1fr;gap:13px}
 .proof-strip span::before{margin-right:5px}
 .marketing #vorteile .dabei{grid-template-columns:1fr}
 .marketing .muster .u{padding:20px}
 .marketing .section-heading h2{font-size:1.8rem}
 .marketing .service-guidance{flex-direction:column;font-size:.8rem}
 .marketing .preis-hinweis{font-size:.86rem}
 .marketing .kway{padding:15px}
}
@media(prefers-reduced-motion:reduce){.marketing *, .marketing *::before,.marketing *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.motion-ready .reveal,.motion-ready .reveal-stagger>*{opacity:1!important;transform:none!important}}
@media print{.marketing header.site{position:static}.marketing .mobile-menu{display:none}.marketing details>.antwort{display:block!important}.marketing .product-stage{box-shadow:none}}